@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
47 lines (46 loc) • 1.66 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useListItemFocus = void 0;
var _react = require("react");
const useListItemFocus = ({
uuid,
listGroupUuid,
isInKeyboardNavigationGroup,
updateActiveListItemUuid
}) => {
const [isFocusWithinListItem, setIsFocusWithinListItem] = (0, _react.useState)(false);
const handleFocus = (0, _react.useCallback)(event => {
setIsFocusWithinListItem(true);
if (event.currentTarget === event.target && isInKeyboardNavigationGroup && typeof updateActiveListItemUuid === 'function') {
updateActiveListItemUuid(uuid);
}
}, [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid]);
const handleBlur = (0, _react.useCallback)(event => {
const nextFocusedElement = event.relatedTarget;
const currentListItemElement = event.currentTarget;
if (nextFocusedElement && currentListItemElement.contains(nextFocusedElement)) {
return;
}
setIsFocusWithinListItem(false);
if (!isInKeyboardNavigationGroup || typeof updateActiveListItemUuid !== 'function' || typeof listGroupUuid !== 'string') {
return;
}
if (!nextFocusedElement) {
updateActiveListItemUuid(undefined);
return;
}
const nextFocusedListItem = nextFocusedElement.closest(`[data-uuid^="${listGroupUuid}---"]`);
if (!nextFocusedListItem) {
updateActiveListItemUuid(undefined);
}
}, [isInKeyboardNavigationGroup, listGroupUuid, updateActiveListItemUuid]);
return {
isFocusWithinListItem,
handleFocus,
handleBlur
};
};
exports.useListItemFocus = useListItemFocus;
//# sourceMappingURL=useListItemFocus.js.map