@wix/design-system
Version:
@wix/design-system
47 lines • 2.31 kB
JavaScript
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { InfoCircle, InfoCircleSmall } from '@wix/wix-ui-icons-common';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { dataHooks } from './constants';
import Tooltip from '../Tooltip';
import { st, classes } from './InfoIcon.st.css.js';
import { useId } from '../utils/useId';
const iconComponentBySizeMap = {
small: InfoCircleSmall,
medium: InfoCircle,
};
const InfoIcon = ({ dataHook, content, size = 'medium', tooltipProps, className, children, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, }) => {
const Icon = iconComponentBySizeMap[size];
const tooltipRef = useRef(null);
const autoId = useId();
const propAriaLabelledBy = tooltipProps?.['aria-labelledby'] ?? ariaLabelledBy;
const propAriaDescribedBy = tooltipProps?.['aria-describedby'] ?? ariaDescribedBy;
const tooltipId = propAriaLabelledBy || propAriaDescribedBy || `infoicon-tooltip-${autoId}`;
const mergedTooltipProps = {
...tooltipProps,
...(propAriaLabelledBy
? { 'aria-labelledby': propAriaLabelledBy }
: { 'aria-describedby': propAriaDescribedBy || tooltipId }),
};
const handleKeyDown = (event) => {
if (event.key === 'Escape') {
tooltipRef.current?.close();
}
};
return (React.createElement("div", { className: st(classes.root, className), "data-size": size, "data-hook": dataHook },
React.createElement(Tooltip, { ...mergedTooltipProps, content: content, dataHook: dataHooks.tooltip, ref: tooltipRef },
React.createElement("div", { role: "button", tabIndex: 0, "aria-haspopup": true, "aria-controls": tooltipId, onKeyDown: handleKeyDown }, children ?? React.createElement(Icon, { className: classes.icon })))));
};
InfoIcon.displayName = 'InfoIcon';
InfoIcon.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
size: PropTypes.oneOf(['small', 'medium']),
content: PropTypes.node.isRequired,
tooltipProps: PropTypes.shape(TooltipCommonProps),
children: PropTypes.node,
'aria-describedby': PropTypes.string,
'aria-labelledby': PropTypes.string,
};
export default InfoIcon;
//# sourceMappingURL=InfoIcon.js.map