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

@wix/design-system

import React, { forwardRef, useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { ICON_CHILD_SIZE } from './IconButton.constants';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './IconButton.st.css.js';
import { WixStyleReactDefaultsOverrideContext } from '../WixStyleReactDefaultsOverrideProvider';
import deprecationLog from '../utils/deprecationLog';
import ButtonCore from '../Button/ButtonCore';
export const IconButton = forwardRef((props, ref) => {
    if (props.skin === 'inverted') {
        deprecationLog('<IconButton/> - skin="inverted" is deprecated and will be removed in next major version, please use skin="standard" and priority="secondary" instead');
    }
    const defaultOverrides = React.useContext(WixStyleReactDefaultsOverrideContext);
    const buttonRef = React.useRef(null);
    useImperativeHandle(ref, () => {
        return {
            focus() {
                buttonRef.current && buttonRef.current.focus();
            },
        };
    }, [buttonRef]);
    const { button: buttonPropsDefaults } = defaultOverrides;
    const { skin = 'standard', className, priority = 'primary', size = buttonPropsDefaults.size, children, disabled = false, dataHook, ariaLabel, ariaLabelledBy, ...rest } = props;
    const childSize = ICON_CHILD_SIZE[size];
    return (React.createElement(ButtonCore, { ...rest, disabled: disabled, ref: buttonRef, className: st(classes.root, { skin, priority, size }, className), ...generateDataAttr({
            ...props,
            size,
        }, ['skin', 'size', 'priority']), "data-hook": dataHook, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, children &&
        React.cloneElement(children, {
            size: childSize,
            width: childSize,
            height: childSize,
            'aria-hidden': true,
        })));
});
IconButton.displayName = 'IconButton';
IconButton.propTypes = {
    as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
    className: PropTypes.string,
    children: PropTypes.any,
    skin: PropTypes.oneOf([
        'standard',
        'inverted',
        'premium',
        'dark',
        'light',
        'transparent',
        'ai',
    ]),
    priority: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
    onClick: PropTypes.func,
    disabled: PropTypes.bool,
    dataHook: PropTypes.string,
    ariaLabel: PropTypes.string,
    ariaLabelledBy: PropTypes.string,
};
export default IconButton;
//# sourceMappingURL=IconButton.js.map