@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
46 lines • 3.33 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PillSelectorStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useRoveFocus_1 = require("../../hooks/useRoveFocus/useRoveFocus");
const role_1 = require("../../types/role/role");
const aria_1 = require("../../utils/aria/aria");
const pillUnControlled_1 = require("../pill/pillUnControlled");
const pillSelector_styled_1 = require("./pillSelector.styled");
const pillSelector_utils_1 = require("./utils/pillSelector.utils");
const MAX_PILLS = 3;
const PillSelectorStandAloneComponent = ({ dataTestId = 'pill-selector', maxPills = MAX_PILLS, ...props }, ref) => {
const ariaProps = (0, aria_1.pickAriaProps)(props);
const roveFocusProps = react_1.default.useMemo(() => ({
size: props.pills.length,
keyDownMove: (0, pillSelector_utils_1.keyRightMove)(props.pills),
keyUpMove: (0, pillSelector_utils_1.keyLeftMove)(props.pills),
keyRightMove: (0, pillSelector_utils_1.keyRightMove)(props.pills),
keyLeftMove: (0, pillSelector_utils_1.keyLeftMove)(props.pills),
keyTabMove: null,
currentFocusSelected: -1,
}), [props.pills]);
const [focus, setFocus, listEl] = (0, useRoveFocus_1.useRoveFocus)(roveFocusProps);
const isPillSelected = props.pillSelected?.length !== 0;
react_1.default.useImperativeHandle(ref, () => {
return listEl.current;
}, []);
return ((0, jsx_runtime_1.jsxs)(pillSelector_styled_1.PillSelectorWrapper, { ...ariaProps, ref: listEl, "data-testid": dataTestId, hasThumb: !!(!props.multiSelect && props.styles?.thumb), isSelected: isPillSelected, role: role_1.ROLES.RADIOGROUP, styles: props.styles, children: [!props.multiSelect && props.styles?.thumb && ((0, jsx_runtime_1.jsx)(pillSelector_styled_1.ThumbStyled, { "data-testid": `${dataTestId}-thumb`, styles: props.styles })), props.pills.length > 1 && props.pills.length <= maxPills
? props.pills.map((pill, index) => {
// deprecated - remove this line when this props are changed
const { label, externalLabel, ...rest } = pill;
const pillSelected = props.pillSelected?.includes(pill.value.toString());
return ((props.pillSize || pill?.size) && ((0, jsx_runtime_1.jsx)(pillUnControlled_1.PillUnControlled, { dataTestId: `${dataTestId}-pill-${index}`, focus: focus === index, label: externalLabel, multiSelect: props.multiSelect, name: props.name, selected: pillSelected, size: props.pillSize || '', tabIndex: pillSelected || (!isPillSelected && index === 0) ? 0 : -1, ...rest, value: pill.value.toString(), variant: props.pillVariant, onFocus: () => {
if (index !== focus) {
setFocus(index);
}
}, onPillChange: props.onPillChange, children: label }, pill.value)));
})
: null] }));
};
exports.PillSelectorStandAlone = react_1.default.forwardRef(PillSelectorStandAloneComponent);
//# sourceMappingURL=pillSelectorStandAlone.js.map