@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
36 lines • 2.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ItemRove = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
// styles
const itemRove_styled_1 = require("./itemRove.styled");
const ItemRove = ({ id, children, focus, index, setFocus, onSelectItem, asElement, role, onMouseOver, dataTestId = 'item-rove', type, disabled = false, ariaSelected, ariaControls, ariaLabel, url, disableKeys = false, ariaDisabled = false, preventScrollOnFocus = false, ariaHidden = false, checkIsFirstTime = false, }) => {
const ref = (0, react_1.useRef)(null);
const isFirstTime = (0, react_1.useRef)(checkIsFirstTime);
(0, react_1.useEffect)(() => {
//It is needed to not put the focus automatically when the component appears
if (focus && !isFirstTime.current) {
ref && ref.current && ref.current.focus({ preventScroll: preventScrollOnFocus });
}
else {
isFirstTime.current = false;
}
}, [focus]);
const handleSelect = (hasOnclick) => {
//It is needed because you can reach a disabled tab with keyboard arrows but you shouldnt be able to do any action.
if (!disableKeys) {
// setFocus only needs to be sent if we don't use useRoveFocus hook previously
setFocus?.(index);
if (hasOnclick) {
onSelectItem && onSelectItem();
}
}
};
const handleFocus = () => {
return focus ? 0 : -1;
};
return ((0, jsx_runtime_1.jsx)(itemRove_styled_1.ItemRoveStyled, { ref: ref, "aria-controls": ariaControls, "aria-disabled": ariaDisabled, "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-selected": ariaSelected, as: asElement, "data-testid": dataTestId, disabled: disabled, id: id, role: role, tabIndex: handleFocus(), type: type, url: url, onClick: () => handleSelect(true), onFocus: onMouseOver, onKeyDown: () => handleSelect(false), onMouseOver: onMouseOver, children: children }));
};
exports.ItemRove = ItemRove;
//# sourceMappingURL=itemRove.js.map