@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
57 lines • 4.35 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListOptionsStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const useId_1 = require("../../hooks/useId/useId");
const useRoveFocus_1 = require("../../hooks/useRoveFocus/useRoveFocus");
const role_1 = require("../../types/role/role");
const option_1 = require("../option/option");
const listOptions_styled_1 = require("./listOptions.styled");
const type_1 = require("./types/type");
const listOptions_utils_1 = require("./utils/listOptions.utils");
// eslint-disable-next-line react/display-name
exports.ListOptionsStandAlone = react_1.default.forwardRef(({ type = type_1.ListOptionsType.SELECTION, dataTestId = 'list-options', ...props }, ref) => {
const roveFocusProps = react_1.default.useMemo(() => ({
size: props.options.length,
keyDownMove: (0, listOptions_utils_1.keyDownMove)(props.options),
keyUpMove: listOptions_utils_1.keyUpMove,
currentFocusSelected: -1,
keyRightMove: 0,
keyLeftMove: 0,
keyTabMove: null,
}), [props.options]);
const [focus, setFocus, listEl] = (0, useRoveFocus_1.useRoveFocus)(props.roveFocus ?? roveFocusProps);
const _id = (0, useId_1.useId)();
react_1.default.useImperativeHandle(ref, () => {
return listEl.current;
}, []);
const id = props.id ?? _id;
const isSelection = type === type_1.ListOptionsType.SELECTION;
const isNavigation = type === type_1.ListOptionsType.NAVIGATION;
const hasOptions = props.options && props.options.length > 0;
return ((0, jsx_runtime_1.jsxs)(listOptions_styled_1.ListOptionsWrapperStyled, { "data-testid": dataTestId, styles: props.styles, children: [props.title?.content && props.options.length > 0 && ((0, jsx_runtime_1.jsx)(listOptions_styled_1.TitleWrapperStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { customTypography: props.styles.title, ...props.title, children: props.title.content }) })), props.content, hasOptions && ((0, jsx_runtime_1.jsx)(listOptions_styled_1.OptionsWrapperStyled, { ref: listEl, "aria-label": props.optionsContainerArias?.['aria-label'], "aria-labelledby": props.optionsContainerArias?.['aria-labelledby'], as: 'ul', id: id, role: isSelection ? role_1.ROLES.LISTBOX : undefined, styles: props.styles, children: props.options.map((option, index) => {
const selected = (0, listOptions_utils_1.isSelected)(option, props.selectedValue, props.multiSelect, props.caseSensitive);
const title = props.title?.content ? `-${props.title.content}` : '';
const dataTestIdOption = `${dataTestId}${title}-option-${index}-${option.value || ''}`;
const optionComponent = ((0, jsx_runtime_1.jsx)(option_1.Option, { "aria-selected": isSelection ? selected : undefined, as: isNavigation ? 'div' : 'li', checkedIcon: props.checkedIcon, dataTestId: dataTestIdOption, focus: focus === index, labelCharsHighlighted: props.charsHighlighted, multiSelect: props.multiSelect, role: isSelection ? role_1.ROLES.OPTION : undefined, selected: selected, tabIndex: isNavigation ? 0 : -1, variant: (0, listOptions_utils_1.getOptionVariant)(option.highlighted, props.hightlightedOptionVariant, props.optionVariant), ...option, onClick: e => {
setFocus(index);
props.onOptionClick?.(option.value, e);
option.onClick?.(e);
}, onFocus: e => {
if (index !== focus) {
setFocus(index);
}
option.onFocus?.(e);
} }, `${id}Option${index}`));
if (type === type_1.ListOptionsType.NAVIGATION) {
return (0, jsx_runtime_1.jsx)("li", { children: optionComponent }, `${id}LiOption${index}`);
}
return optionComponent;
}) }))] }));
});
//# sourceMappingURL=listOptionsStandAlone.js.map