@chayns-components/core/lib/esm/components/list/list-item/useListItemFocus.js

A set of beautiful React components for developing your own applications with chayns.

import { useCallback, useState } from 'react';
export const useListItemFocus = ({
  uuid,
  listGroupUuid,
  isInKeyboardNavigationGroup,
  updateActiveListItemUuid
}) => {
  const [isFocusWithinListItem, setIsFocusWithinListItem] = useState(false);
  const handleFocus = useCallback(event => {
    setIsFocusWithinListItem(true);
    if (event.currentTarget === event.target && isInKeyboardNavigationGroup && typeof updateActiveListItemUuid === 'function') {
      updateActiveListItemUuid(uuid);
    }
  }, [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid]);
  const handleBlur = 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
  };
};
//# sourceMappingURL=useListItemFocus.js.map