@chayns-components/core 5.3.9 → 5.3.11-alpha.0

package/lib/esm/components/list/List.js

@@ -1,24 +1,39 @@
 import { c as _c } from "react-compiler-runtime";
 import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useMemo, useState } from 'react';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
+import { useUuid } from '../../hooks/uuid';
 import { shouldShowExpandIndicator } from './List.utils';
 export const ListContext = /*#__PURE__*/React.createContext({
   isAnyItemExpandable: false,
   isWrapped: false,
   openItemUuid: undefined,
-  updateOpenItemUuid: () => {}
+  updateOpenItemUuid: () => {},
+  shouldEnableKeyboardHighlighting: false,
+  listGroupUuid: undefined,
+  listItemUuids: undefined,
+  registerListItemUuid: undefined,
+  unregisterListItemUuid: undefined,
+  activeListItemUuid: undefined,
+  updateActiveListItemUuid: undefined
 });
 ListContext.displayName = 'ListContext';
 const List = t0 => {
   "use memo";
 
-  const $ = _c(13);
+  const $ = _c(24);
   const {
     children,
-    isWrapped: t1
+    isWrapped: t1,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const isWrapped = t1 === undefined ? false : t1;
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const [openItemUuid, setOpenItemUuid] = useState(undefined);
+  const [listItemUuids, setListItemUuids] = useState();
+  const [activeListItemUuid, setActiveListItemUuid] = useState(undefined);
+  const listGroupUuid = useUuid();
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = (uuid, t3) => {
@@ -38,63 +53,134 @@ const List = t0 => {
   }
   const updateOpenItemUuid = t2;
   let t3;
-  if ($[1] !== children) {
-    t3 = shouldShowExpandIndicator(children);
-    $[1] = children;
+  if ($[1] !== listGroupUuid) {
+    t3 = uuids => {
+      if (typeof document === "undefined") {
+        return uuids;
+      }
+      const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${listGroupUuid}---"]`)).map(_temp).filter(_temp2);
+      return domOrderedUuids.filter(uuid_1 => uuids.includes(uuid_1));
+    };
+    $[1] = listGroupUuid;
     $[2] = t3;
   } else {
     t3 = $[2];
   }
+  const sortListItemUuidsByDom = t3;
   let t4;
-  if ($[3] !== isWrapped || $[4] !== openItemUuid || $[5] !== t3) {
-    t4 = {
-      isAnyItemExpandable: t3,
+  if ($[3] !== sortListItemUuidsByDom) {
+    t4 = uuid_2 => {
+      setListItemUuids(t5 => {
+        const currentListItemUuids = t5 === undefined ? [] : t5;
+        const nextListItemUuids = currentListItemUuids.includes(uuid_2) ? currentListItemUuids : [...currentListItemUuids, uuid_2];
+        return sortListItemUuidsByDom(nextListItemUuids);
+      });
+    };
+    $[3] = sortListItemUuidsByDom;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const registerListItemUuid = t4;
+  let t5;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = uuid_3 => {
+      setListItemUuids(t6 => {
+        const currentListItemUuids_0 = t6 === undefined ? [] : t6;
+        return currentListItemUuids_0.filter(currentUuid => currentUuid !== uuid_3);
+      });
+    };
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const unregisterListItemUuid = t5;
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = uuid_4 => {
+      setActiveListItemUuid(uuid_4);
+    };
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const updateActiveListItemUuid = t6;
+  let t7;
+  if ($[7] !== children) {
+    t7 = shouldShowExpandIndicator(children);
+    $[7] = children;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== activeListItemUuid || $[10] !== isWrapped || $[11] !== listGroupUuid || $[12] !== listItemUuids || $[13] !== openItemUuid || $[14] !== registerListItemUuid || $[15] !== shouldEnableKeyboardHighlightingEffective || $[16] !== t7) {
+    t8 = {
+      isAnyItemExpandable: t7,
       isWrapped,
       openItemUuid,
-      updateOpenItemUuid
+      updateOpenItemUuid,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+      listGroupUuid,
+      listItemUuids,
+      registerListItemUuid,
+      unregisterListItemUuid,
+      activeListItemUuid,
+      updateActiveListItemUuid
     };
-    $[3] = isWrapped;
-    $[4] = openItemUuid;
-    $[5] = t3;
-    $[6] = t4;
+    $[9] = activeListItemUuid;
+    $[10] = isWrapped;
+    $[11] = listGroupUuid;
+    $[12] = listItemUuids;
+    $[13] = openItemUuid;
+    $[14] = registerListItemUuid;
+    $[15] = shouldEnableKeyboardHighlightingEffective;
+    $[16] = t7;
+    $[17] = t8;
   } else {
-    t4 = $[6];
+    t8 = $[17];
   }
-  const providerValue = t4;
-  let t5;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
+  const providerValue = t8;
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
       type: "tween"
     };
-    $[7] = t5;
+    $[18] = t9;
   } else {
-    t5 = $[7];
+    t9 = $[18];
   }
-  let t6;
-  if ($[8] !== children) {
-    t6 = /*#__PURE__*/React.createElement(MotionConfig, {
-      transition: t5
+  let t10;
+  if ($[19] !== children) {
+    t10 = /*#__PURE__*/React.createElement(MotionConfig, {
+      transition: t9
     }, /*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, children));
-    $[8] = children;
-    $[9] = t6;
+    $[19] = children;
+    $[20] = t10;
   } else {
-    t6 = $[9];
+    t10 = $[20];
   }
-  let t7;
-  if ($[10] !== providerValue || $[11] !== t6) {
-    t7 = /*#__PURE__*/React.createElement(ListContext.Provider, {
+  let t11;
+  if ($[21] !== providerValue || $[22] !== t10) {
+    t11 = /*#__PURE__*/React.createElement(ListContext.Provider, {
       value: providerValue
-    }, t6);
-    $[10] = providerValue;
-    $[11] = t6;
-    $[12] = t7;
+    }, t10);
+    $[21] = providerValue;
+    $[22] = t10;
+    $[23] = t11;
   } else {
-    t7 = $[12];
+    t11 = $[23];
   }
-  return t7;
+  return t11;
 };
 List.displayName = 'List';
 export default List;
+function _temp(element) {
+  return element.getAttribute("data-uuid")?.split("---")[1];
+}
+function _temp2(uuid_0) {
+  return Boolean(uuid_0);
+}
 //# sourceMappingURL=List.js.map

package/lib/esm/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","shouldShowExpandIndicator","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_c","children","t1","setOpenItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","t4","providerValue","t5","type","t6","createElement","transition","initial","t7","Provider"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    'use memo';\n\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            isAnyItemExpandable: shouldShowExpandIndicator(children),\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [children, isWrapped, openItemUuid, updateOpenItemUuid],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","useColorScheme","useUuid","shouldShowExpandIndicator","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","shouldEnableKeyboardHighlighting","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","displayName","List","t0","$","_c","children","t1","colorScheme","shouldEnableKeyboardHighlightingEffective","setOpenItemUuid","setListItemUuids","setActiveListItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","uuids","document","domOrderedUuids","Array","from","querySelectorAll","map","_temp","filter","_temp2","uuid_1","includes","sortListItemUuidsByDom","t4","uuid_2","t5","currentListItemUuids","nextListItemUuids","uuid_3","t6","currentListItemUuids_0","currentUuid","uuid_4","t7","t8","providerValue","t9","type","t10","createElement","transition","initial","t11","Provider","element","getAttribute","split","uuid_0","Boolean"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useUuid } from '../../hooks/uuid';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n    shouldEnableKeyboardHighlighting: boolean;\n    listGroupUuid?: string;\n    listItemUuids?: string[];\n    registerListItemUuid?: (uuid: string) => void;\n    unregisterListItemUuid?: (uuid: string) => void;\n    activeListItemUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n    shouldEnableKeyboardHighlighting: false,\n    listGroupUuid: undefined,\n    listItemUuids: undefined,\n    registerListItemUuid: undefined,\n    unregisterListItemUuid: undefined,\n    activeListItemUuid: undefined,\n    updateActiveListItemUuid: undefined,\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting and arrow-key navigation within the list.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false, shouldEnableKeyboardHighlighting }) => {\n    'use memo';\n\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [listItemUuids, setListItemUuids] = useState<string[]>();\n    const [activeListItemUuid, setActiveListItemUuid] =\n        useState<IListContext['activeListItemUuid']>(undefined);\n\n    const listGroupUuid = useUuid();\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const sortListItemUuidsByDom = useCallback(\n        (uuids: string[]) => {\n            if (typeof document === 'undefined') {\n                return uuids;\n            }\n\n            const domOrderedUuids = Array.from(\n                document.querySelectorAll<HTMLElement>(`[data-uuid^=\"${listGroupUuid}---\"]`),\n            )\n                .map((element) => element.getAttribute('data-uuid')?.split('---')[1])\n                .filter((uuid): uuid is string => Boolean(uuid));\n\n            return domOrderedUuids.filter((uuid) => uuids.includes(uuid));\n        },\n        [listGroupUuid],\n    );\n\n    const registerListItemUuid = useCallback(\n        (uuid: string) => {\n            setListItemUuids((currentListItemUuids = []) => {\n                const nextListItemUuids = currentListItemUuids.includes(uuid)\n                    ? currentListItemUuids\n                    : [...currentListItemUuids, uuid];\n\n                return sortListItemUuidsByDom(nextListItemUuids);\n            });\n        },\n        [sortListItemUuidsByDom],\n    );\n\n    const unregisterListItemUuid = useCallback((uuid: string) => {\n        setListItemUuids((currentListItemUuids = []) =>\n            currentListItemUuids.filter((currentUuid) => currentUuid !== uuid),\n        );\n    }, []);\n\n    const updateActiveListItemUuid = useCallback((uuid?: string) => {\n        setActiveListItemUuid(uuid);\n    }, []);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            isAnyItemExpandable: shouldShowExpandIndicator(children),\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        }),\n        [\n            children,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlightingEffective,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/List.utils.js

@@ -14,4 +14,103 @@ export const shouldShowExpandIndicator = node => Children.toArray(node).some(chi
   }
   return false;
 });
+const LEFT_ELEMENT_FOCUSABLE_SELECTOR = '[data-left-element="true"] a[href], [data-left-element="true"] button, [data-left-element="true"] input, [data-left-element="true"] select, [data-left-element="true"] textarea, [data-left-element="true"] [tabindex], [data-left-element="true"] [contenteditable="true"]';
+const RIGHT_ELEMENT_FOCUSABLE_SELECTOR = '[data-right-element="true"] a[href], [data-right-element="true"] button, [data-right-element="true"] input, [data-right-element="true"] select, [data-right-element="true"] textarea, [data-right-element="true"] [tabindex], [data-right-element="true"] [contenteditable="true"]';
+const getFocusableElements = (root, selector) => Array.from(root.querySelectorAll(selector)).filter(element => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1');
+const getFocusedElementIndex = (elements, targetElement) => {
+  if (!targetElement || elements.length === 0) {
+    return -1;
+  }
+  return elements.findIndex(element => element === targetElement || element.contains(targetElement));
+};
+export const handleHorizontalArrowNavigation = ({
+  event,
+  currentListItemElement,
+  targetElement,
+  isCurrentListItemTarget
+}) => {
+  if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+    return false;
+  }
+  const focusableLeftElements = getFocusableElements(currentListItemElement, LEFT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusableRightElements = getFocusableElements(currentListItemElement, RIGHT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);
+  if (focusedLeftElementIndex !== -1) {
+    event.preventDefault();
+    if (event.key === 'ArrowLeft') {
+      const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];
+      if (previousLeftElement) {
+        previousLeftElement.focus();
+      } else {
+        currentListItemElement.focus();
+      }
+      return true;
+    }
+    const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];
+    if (nextLeftElement) {
+      nextLeftElement.focus();
+    } else if (focusableRightElements.length > 0) {
+      focusableRightElements[0]?.focus();
+    }
+    return true;
+  }
+  const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);
+  if (focusedRightElementIndex !== -1) {
+    event.preventDefault();
+    if (event.key === 'ArrowRight') {
+      focusableRightElements[focusedRightElementIndex + 1]?.focus();
+      return true;
+    }
+    const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];
+    if (previousRightElement) {
+      previousRightElement.focus();
+    } else if (focusableLeftElements.length > 0) {
+      focusableLeftElements[focusableLeftElements.length - 1]?.focus();
+    } else {
+      currentListItemElement.focus();
+    }
+    return true;
+  }
+  if (isCurrentListItemTarget) {
+    if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {
+      event.preventDefault();
+      focusableLeftElements[focusableLeftElements.length - 1]?.focus();
+      return true;
+    }
+    if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {
+      event.preventDefault();
+      focusableRightElements[0]?.focus();
+      return true;
+    }
+  }
+  return false;
+};
+export const handleVerticalListGroupNavigation = ({
+  event,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !listItemUuids?.length || event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return false;
+  }
+  event.preventDefault();
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return true;
+  }
+  const nextIndex = event.key === 'ArrowDown' ? (currentIndex + 1) % listItemUuids.length : (currentIndex - 1 + listItemUuids.length) % listItemUuids.length;
+  const nextListItemUuid = listItemUuids[nextIndex];
+  if (nextListItemUuid && nextListItemUuid !== currentUuid && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function') {
+    const nextListItemElement = document.querySelector(`[data-uuid="${listGroupUuid}---${nextListItemUuid}"]`);
+    if (nextListItemElement) {
+      updateActiveListItemUuid(nextListItemUuid);
+      nextListItemElement.focus();
+    }
+  }
+  return true;
+};
 //# sourceMappingURL=List.utils.js.map

package/lib/esm/components/list/List.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.utils.js","names":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n    isExpandable?: boolean;\n    shouldHideIndicator?: boolean;\n    children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n    $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) &&\n    typeof node.type !== 'string' &&\n    (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n    Children.toArray(node).some((child) => {\n        if (isDirectListItemElement(child)) {\n            return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n        }\n\n        if (isMarkedListItemElement(child)) {\n            return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n        }\n\n        if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n            return shouldShowExpandIndicator(child.props.children);\n        }\n\n        return false;\n    });\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAA2C,OAAO;AACnF,SAASC,gBAAgB,QAAQ,4BAA4B;AAY7D,OAAO,MAAMC,uBAAuB,GAAIC,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IAAKA,IAAI,CAACC,IAAI,CAA8BC,WAAW,KAAK,UAAU;AAE9F,OAAO,MAAMC,uBAAuB,GAAIH,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IACpB,OAAOA,IAAI,CAACC,IAAI,KAAK,QAAQ,IAC5BD,IAAI,CAACC,IAAI,CAAwBG,UAAU,KAAKN,gBAAgB;AAErE,OAAO,MAAMO,yBAAyB,GAAIL,IAAe,IACrDJ,QAAQ,CAACU,OAAO,CAACN,IAAI,CAAC,CAACO,IAAI,CAAEC,KAAK,IAAK;EACnC,IAAIT,uBAAuB,CAACS,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI,IAAIF,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS;EACzF;EAEA,IAAIT,uBAAuB,CAACK,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACI,YAAY,KAAK,IAAI,IAAIL,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI;EACxF;EAEA,IAAI,aAAAb,cAAc,CAA2BW,KAAK,CAAC,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS,EAAE;IACvF,OAAOP,yBAAyB,CAACG,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC;EAC1D;EAEA,OAAO,KAAK;AAChB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"List.utils.js","names":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","focus","nextLeftElement","focusedRightElementIndex","previousRightElement","handleVerticalListGroupNavigation","isInKeyboardNavigationGroup","listItemUuids","currentUuid","listGroupUuid","updateActiveListItemUuid","currentIndex","indexOf","nextIndex","nextListItemUuid","nextListItemElement","document","querySelector"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n    Children,\n    isValidElement,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n    isExpandable?: boolean;\n    shouldHideIndicator?: boolean;\n    children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n    $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) &&\n    typeof node.type !== 'string' &&\n    (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n    Children.toArray(node).some((child) => {\n        if (isDirectListItemElement(child)) {\n            return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n        }\n\n        if (isMarkedListItemElement(child)) {\n            return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n        }\n\n        if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n            return shouldShowExpandIndicator(child.props.children);\n        }\n\n        return false;\n    });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n    Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n        (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n    );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement | null) => {\n    if (!targetElement || elements.length === 0) {\n        return -1;\n    }\n\n    return elements.findIndex(\n        (element) => element === targetElement || element.contains(targetElement),\n    );\n};\n\nexport const handleHorizontalArrowNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n}: {\n    event: KeyboardEvent<HTMLDivElement>;\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n    isCurrentListItemTarget: boolean;\n}) => {\n    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n        return false;\n    }\n\n    const focusableLeftElements = getFocusableElements(\n        currentListItemElement,\n        LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n    if (focusedLeftElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowLeft') {\n            const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n            if (previousLeftElement) {\n                previousLeftElement.focus();\n            } else {\n                currentListItemElement.focus();\n            }\n\n            return true;\n        }\n\n        const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n        if (nextLeftElement) {\n            nextLeftElement.focus();\n        } else if (focusableRightElements.length > 0) {\n            focusableRightElements[0]?.focus();\n        }\n\n        return true;\n    }\n\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (focusedRightElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowRight') {\n            focusableRightElements[focusedRightElementIndex + 1]?.focus();\n            return true;\n        }\n\n        const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n        if (previousRightElement) {\n            previousRightElement.focus();\n        } else if (focusableLeftElements.length > 0) {\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n        } else {\n            currentListItemElement.focus();\n        }\n\n        return true;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n            event.preventDefault();\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n            return true;\n        }\n\n        if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {\n            event.preventDefault();\n            focusableRightElements[0]?.focus();\n            return true;\n        }\n    }\n\n    return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n    event,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isInKeyboardNavigationGroup: boolean;\n    listItemUuids?: string[];\n    currentUuid: string;\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n    if (\n        !isCurrentListItemTarget ||\n        !isInKeyboardNavigationGroup ||\n        !listItemUuids?.length ||\n        (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\n    ) {\n        return false;\n    }\n\n    event.preventDefault();\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return true;\n    }\n\n    const nextIndex =\n        event.key === 'ArrowDown'\n            ? (currentIndex + 1) % listItemUuids.length\n            : (currentIndex - 1 + listItemUuids.length) % listItemUuids.length;\n\n    const nextListItemUuid = listItemUuids[nextIndex];\n\n    if (\n        nextListItemUuid &&\n        nextListItemUuid !== currentUuid &&\n        typeof listGroupUuid === 'string' &&\n        typeof updateActiveListItemUuid === 'function'\n    ) {\n        const nextListItemElement = document.querySelector<HTMLDivElement>(\n            `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n        );\n\n        if (nextListItemElement) {\n            updateActiveListItemUuid(nextListItemUuid);\n            nextListItemElement.focus();\n        }\n    }\n\n    return true;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -1,14 +1,17 @@
 import { AnimatePresence, motion } from 'motion/react';
-import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../../hooks/uuid';
 import { AccordionContext } from '../../accordion/Accordion';
 import AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';
 import { ListContext } from '../List';
+import { handleHorizontalArrowNavigation, handleVerticalListGroupNavigation } from '../List.utils';
 import ListItemBody from './list-item-body/ListItemBody';
 import ListItemHead from './list-item-head/ListItemHead';
 import { StyledListItem, StyledListItemTooltip } from './ListItem.styles';
 import Tooltip from '../../tooltip/Tooltip';
 import { useIsInsideDialog } from '../../../hooks/element';
+import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
+import { useListItemFocus } from './useListItemFocus';
 const ListItem = /*#__PURE__*/forwardRef(({
   backgroundColor,
   careOfLocationId,
@@ -52,7 +55,14 @@ const ListItem = /*#__PURE__*/forwardRef(({
     isAnyItemExpandable,
     isWrapped,
     openItemUuid,
-    updateOpenItemUuid
+    updateOpenItemUuid,
+    shouldEnableKeyboardHighlighting,
+    listGroupUuid,
+    listItemUuids,
+    registerListItemUuid,
+    unregisterListItemUuid,
+    activeListItemUuid,
+    updateActiveListItemUuid
   } = useContext(ListContext);
   const {
     isWrapped: isParentAccordionWrapped
@@ -116,6 +126,68 @@ const ListItem = /*#__PURE__*/forwardRef(({
     setTitleWidth(width);
     setTitleMaxWidth(maxWidth);
   }, []);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const isInKeyboardNavigationGroup = shouldEnableKeyboardHighlighting && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function';
+  useEffect(() => {
+    if (shouldEnableKeyboardHighlighting && typeof registerListItemUuid === 'function' && typeof unregisterListItemUuid === 'function') {
+      registerListItemUuid(uuid);
+      return () => {
+        unregisterListItemUuid(uuid);
+      };
+    }
+    return undefined;
+  }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);
+  const tabIndex = useMemo(() => {
+    if (isInKeyboardNavigationGroup) {
+      const isGroupTabStop = activeListItemUuid != null ? activeListItemUuid === uuid : listItemUuids?.[0] === uuid;
+      return isGroupTabStop ? 0 : -1;
+    }
+    return shouldEnableKeyboardHighlighting ? 0 : -1;
+  }, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, shouldEnableKeyboardHighlighting, uuid]);
+  const handleKeyDown = useCallback(event => {
+    const isCurrentListItemTarget = event.currentTarget === event.target;
+    const currentListItemElement = event.currentTarget;
+    const targetElement = event.target;
+    if (shouldEnableKeyboardHighlighting && handleHorizontalArrowNavigation({
+      event,
+      currentListItemElement,
+      targetElement,
+      isCurrentListItemTarget
+    })) {
+      return;
+    }
+    if (handleVerticalListGroupNavigation({
+      event,
+      isCurrentListItemTarget,
+      isInKeyboardNavigationGroup,
+      listItemUuids,
+      currentUuid: uuid,
+      listGroupUuid,
+      updateActiveListItemUuid
+    })) {
+      return;
+    }
+    if (isCurrentListItemTarget && shouldEnableKeyboardHighlighting && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      handleHeadClick(event);
+    }
+  }, [handleHeadClick, isInKeyboardNavigationGroup, listGroupUuid, listItemUuids, shouldEnableKeyboardHighlighting, updateActiveListItemUuid, uuid]);
+  const {
+    isFocusWithinListItem,
+    handleFocus,
+    handleBlur
+  } = useListItemFocus({
+    uuid,
+    listGroupUuid,
+    isInKeyboardNavigationGroup,
+    updateActiveListItemUuid
+  });
+  useEffect(() => {
+    if (isInKeyboardNavigationGroup && activeListItemUuid == null && typeof updateActiveListItemUuid === 'function' && listItemUuids?.[0] === uuid) {
+      updateActiveListItemUuid(uuid);
+    }
+  }, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, updateActiveListItemUuid, uuid]);
+  const shouldAllowElementFocus = !shouldEnableKeyboardHighlighting || isFocusWithinListItem;
   return /*#__PURE__*/React.createElement(StyledListItem, {
     as: shouldDisableAnimation ? undefined : motion.div,
     animate: shouldDisableAnimation ? undefined : {
@@ -133,6 +205,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
     },
     key: `list-item-${uuid}`,
     ref: listItemRef,
+    "data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
     layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
     $backgroundColor: backgroundColor,
     $isClickable: isClickable,
@@ -146,7 +219,12 @@ const ListItem = /*#__PURE__*/forwardRef(({
     $shouldForceBottomLine: shouldForceBottomLine,
     $shouldHideBottomLine: shouldHideBottomLine,
     $shouldHideIndicator: shouldHideIndicator,
-    $shouldShowSeparatorBelow: shouldShowSeparatorBelow
+    $shouldShowSeparatorBelow: shouldShowSeparatorBelow,
+    "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined,
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur
   }, /*#__PURE__*/React.createElement(Tooltip, {
     shouldUseFullWidth: true,
     isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
@@ -183,7 +261,8 @@ const ListItem = /*#__PURE__*/forwardRef(({
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,
-    onImageError: onImageError
+    onImageError: onImageError,
+    shouldAllowElementFocus: shouldAllowElementFocus
   })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(ListItemBody, {