@wix/design-system
Version:
@wix/design-system
68 lines • 4.83 kB
JavaScript
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
import { useId } from '../utils/useId';
import { useFocusRing } from '../providers/useFocusRing/useFocusRing';
import deprecationLog from '../utils/deprecationLog';
import { classes, st } from './ListItemAction.st.css.js';
import { PrefixIcon } from './components/PrefixIcon/PrefixIcon';
import { Suffix } from './components/Suffix/Suffix';
import { Icon } from './components/SuffixIcon/SuffixIcon';
import { Title } from './components/Title/Title';
import Tooltip from '../Tooltip';
import { DATA_HOOK, SIZE, SKIN } from './ListItemAction.constants';
export const ListItemAction = forwardRef((props, ref) => {
const { as: Component = 'button', skin = SKIN.standard, size = SIZE.medium, highlighted, dataHook, disabled, prefixIcon, onClick, onMouseEnter, onMouseLeave, tabIndex, onKeyDown, autoFocus, className, subtitle, suffix, suffixIcon, disabledDescription, ...others } = props;
// We're spreading the "rest" props as "others" so we don't want to pass them to the component
const {
// @ts-expect-error type does not exist but we don't want to pass this
selected,
// @ts-expect-error type does not exist but we don't want to pass this
hovered, ellipsis, title, shouldFocusWithoutScroll, ...rest } = others;
const { isFocusVisible, focusProps } = useFocusRing();
const innerComponentRef = useRef(null);
const isDisabledWithTooltip = disabled && !!disabledDescription;
const descriptionId = useId('list-item-action-description');
const focus = useCallback(() => {
const scrollOptions = shouldFocusWithoutScroll
? { preventScroll: true }
: {};
innerComponentRef.current?.focus(scrollOptions);
}, [shouldFocusWithoutScroll]);
useImperativeHandle(ref, () => ({ focus }), [focus]);
useEffect(() => {
if (skin === SKIN.dark) {
deprecationLog('<ListItemAction/> - skin="dark" is deprecated and will be removed in next major version, please use skin="standard" instead');
}
}, [skin]);
function renderComponent() {
return (React.createElement(Component, { "aria-disabled": disabled, ...rest, ref: innerComponentRef, className: st(classes.root, {
skin,
disabled,
highlighted,
ellipsis,
size,
withPrefixIcon: !!prefixIcon,
withSuffixIcon: !!suffixIcon,
hoverHighlightDisabled: highlighted === false,
'focus-visible': isFocusVisible,
}, className), "data-skin": skin, "data-disabled": disabled, tabIndex: tabIndex ?? 0, autoFocus: autoFocus, type: Component === 'button' ? 'button' : undefined, "data-hook": dataHook, onKeyDown: !disabled ? onKeyDown : undefined, onClick: !disabled ? onClick : undefined, onMouseEnter: !disabled ? onMouseEnter : undefined, onMouseLeave: !disabled ? onMouseLeave : undefined, ...focusProps },
prefixIcon && (React.createElement(PrefixIcon, { prefixIcon: prefixIcon, size: size, subtitle: subtitle })),
React.createElement(Title, { title: title, size: size, ellipsis: ellipsis, tooltipModifiers: rest.tooltipModifiers, subtitle: subtitle, disabled: disabled }),
suffix && (React.createElement(Suffix, { suffix: suffix, size: size, ellipsis: ellipsis, disabled: disabled })),
suffixIcon && (React.createElement(Icon, { suffixIcon: suffixIcon, size: size, subtitle: subtitle })),
isDisabledWithTooltip && (React.createElement("span", { id: descriptionId, hidden: true }, disabledDescription))));
}
if (isDisabledWithTooltip) {
return (React.createElement(Tooltip, { dataHook: DATA_HOOK.tooltip, disabled: false, content: disabledDescription, enterDelay: 450, "aria-describedby": descriptionId }, renderComponent()));
}
return renderComponent();
});
ListItemAction.displayName = 'ListItemAction';
export const listItemActionBuilder = ({ title, prefixIcon, onClick, onMouseEnter, onMouseLeave, id, disabled, skin, size, dataHook, as, tabIndex, autoFocus, className, ellipsis, subtitle, suffix, disabledDescription, ...rest }) => ({
id,
disabled,
overrideOptionStyle: true,
label: undefined,
prefix: prefixIcon,
value: ({ hovered }) => (React.createElement(ListItemAction, { ...rest, ellipsis: ellipsis, className: className, autoFocus: autoFocus, tabIndex: tabIndex, as: as, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dataHook: dataHook, title: title, prefixIcon: prefixIcon, skin: skin, size: size, highlighted: hovered, disabled: disabled, disabledDescription: disabledDescription, subtitle: subtitle, suffix: suffix })),
});
//# sourceMappingURL=ListItemAction.js.map