@wix/design-system/dist/esm/CloseButton/CloseButton.js

@wix/design-system

import React, { useContext, useRef, useEffect, forwardRef, useImperativeHandle, } from 'react';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './CloseButton.st.css.js';
import { ButtonCore } from '../Button/ButtonCore';
import { ThemeContext } from '../ThemeProvider/ThemeContext';
import { Close, CloseLarge } from '@wix/wix-ui-icons-common/system';
import { SIZES, SKINS } from './CloseButton.constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
import { useDefaultProps } from '../WixDesignSystemDefaultPropsProvider';
const CHILD_SIZE = '18px';
const CloseButton = forwardRef((props, ref) => {
    const { skin = SKINS.standard, size = SIZES.small, disabled = false, autoFocus = false, className, dataHook, children, ...rest } = useDefaultProps('CloseButton', props);
    const icons = useIcons('CloseButton', {
        Close,
        CloseLarge,
    });
    const sizeToIconMap = {
        small: React.createElement(icons.Close, { "data-hook": "close" }),
        medium: React.createElement(icons.CloseLarge, { "data-hook": "close-medium" }),
        large: React.createElement(icons.CloseLarge, { "data-hook": "close-large", size: "12" }),
    };
    const theme = useContext(ThemeContext);
    const { icons: themeIcons } = theme || {};
    const closeIcon = themeIcons?.CloseButton?.[size] ?? sizeToIconMap[size];
    const buttonRef = useRef(null);
    useImperativeHandle(ref, () => buttonRef.current, []);
    useEffect(() => {
        if (autoFocus) {
            buttonRef.current?.focus();
        }
    }, [autoFocus]);
    return (React.createElement(ButtonCore, { ref: buttonRef, ...rest, disabled: disabled, className: st(classes.root, { skin, size }, className), ...generateDataAttr({ skin, size }, ['skin', 'size']), "data-hook": dataHook }, children
        ? React.cloneElement(children, {
            size: CHILD_SIZE,
            width: CHILD_SIZE,
            height: CHILD_SIZE,
        })
        : closeIcon));
});
CloseButton.displayName = 'CloseButton';
export { CloseButton };
//# sourceMappingURL=CloseButton.js.map