@wix/design-system
Version:
@wix/design-system
36 lines • 2.1 kB
JavaScript
import React from 'react';
import { st, classes, cssStates } from '../VerticalTabsItem.st.css.js';
import { Affix } from './Affix';
import { DATA_HOOKS } from '../VerticalTabsItem.constants';
import { Text } from '../..';
import { SIZE } from '../../VerticalTabs/VerticalTabs.constants';
const SelectableItem = ({ children, dataHook, prefixIcon, suffixIcon, size, baseSkin, disabled, id, tabIndex, skin, selected, onChange, 'aria-controls': ariaControls, focusableOnFocus, focusableOnBlur, }) => {
const onKeyDown = (e) => {
if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
e.preventDefault();
if (id !== undefined) {
onChange?.(id);
}
}
};
return (React.createElement("div", { className: st(classes.wrapper, cssStates({
disabled,
baseSkin,
skin,
selected,
})), id: String(id), role: "tab", "data-hook": dataHook, tabIndex: tabIndex, "aria-selected": selected, "aria-disabled": disabled, "aria-controls": ariaControls, onFocus: focusableOnFocus, onBlur: focusableOnBlur, onClick: !disabled && id !== undefined ? () => onChange?.(id) : undefined, onKeyDown: !disabled ? e => onKeyDown(e) : undefined },
React.createElement("div", { className: st(classes.root, classes.selectableItem, cssStates({
disabled,
size,
baseSkin,
skin,
suffixIcon: !!suffixIcon,
prefixIcon: !!prefixIcon,
selected,
})) },
React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_PREFIX_ICON, size: size, className: st(classes.prefixIcon) }, prefixIcon),
React.createElement(Text, { className: classes.text, weight: "thin", size: size === SIZE.TINY ? SIZE.SMALL : size, dataHook: DATA_HOOKS.ITEM_TEXT }, children),
React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_SUFFIX_ICON, size: size, className: classes.suffixIcon }, suffixIcon))));
};
export { SelectableItem };
//# sourceMappingURL=SelectableItem.js.map