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

@wix/design-system

import React, { memo, useEffect } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Tag.st.css.js';
import CloseButton from '../CloseButton';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
import { SIZE, SKIN, dataHooks, tagToTextSize, validRemoveKeys, } from './Tag.constants';
import deprecationLog from '../utils/deprecationLog';
const formatPx = (maxWidth) => typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
const Tag = ({ id, onClick, onRemove, maxWidth, dataHook, size = SIZE.small, theme = SKIN.standard, // TODO: add default value for skin once theme is removed
removable = true, disabled, thumb, ellipsisProps, className, children, ...props }) => {
    const skin = props.skin || theme;
    useEffect(() => {
        if (theme) {
            deprecationLog('<Tag/> - theme prop is deprecated and will be removed in next major version, please use skin instead');
        }
    }, [theme]);
    const handleRemove = (event) => {
        event.preventDefault();
        event.stopPropagation();
        onRemove?.(id);
    };
    const handleOnClick = (event) => {
        onClick?.(id, event);
    };
    const handleRemoveKeyDown = (event) => {
        if (validRemoveKeys.includes(event.key)) {
            handleRemove(event);
        }
    };
    const clickable = !!onClick;
    const hoverable = !disabled && !!onClick;
    return (React.createElement("span", { className: st(classes.root, {
            withRemoveButton: removable,
            withThumb: !!thumb,
            disabled,
            clickable,
            hoverable,
            size,
            skin,
        }, className), ...generateDataAttr({ size, disabled, skin, hoverable, clickable }, [
            'size',
            'disabled',
            'skin',
            'hoverable',
            'clickable',
        ]), "data-hook": dataHook, id: id, onClick: handleOnClick, style: { maxWidth: formatPx(maxWidth) } },
        thumb && (React.createElement("span", { "data-hook": dataHooks.thumb, className: classes.thumb }, thumb)),
        React.createElement(Text, { skin: disabled ? 'disabled' : 'standard', light: skin === 'dark', secondary: skin !== 'dark', ellipsis: true, tooltipProps: ellipsisProps, size: tagToTextSize[size], weight: "thin", className: classes.text, dataHook: dataHooks.text }, children),
        removable && (React.createElement(CloseButton, { size: size === 'large' ? 'medium' : 'small', skin: skin === 'dark' ? 'light' : 'dark', disabled: disabled, dataHook: dataHooks.removeButton, className: classes.removeButton, onClick: handleRemove, onKeyDown: handleRemoveKeyDown }))));
};
Tag.propTypes = {
    dataHook: PropTypes.any,
    children: PropTypes.any,
    disabled: PropTypes.any,
    ellipsisProps: PropTypes.any,
    id: PropTypes.any,
    onClick: PropTypes.any,
    onRemove: PropTypes.any,
    removable: PropTypes.any,
    size: PropTypes.any,
    skin: PropTypes.any,
    theme: PropTypes.any,
    thumb: PropTypes.any,
    maxWidth: PropTypes.any,
    className: PropTypes.any,
};
export default memo(Tag);
//# sourceMappingURL=Tag.js.map