@chayns-components/core 5.3.10 → 5.3.12-alpha.0

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

@@ -7,25 +7,40 @@ exports.default = exports.ListContext = void 0;
 var _reactCompilerRuntime = require("react-compiler-runtime");
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
+var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
+var _uuid = require("../../hooks/uuid");
 var _List = require("./List.utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ListContext = exports.ListContext = /*#__PURE__*/_react2.default.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 $ = (0, _reactCompilerRuntime.c)(13);
+  const $ = (0, _reactCompilerRuntime.c)(24);
   const {
     children,
-    isWrapped: t1
+    isWrapped: t1,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const isWrapped = t1 === undefined ? false : t1;
+  const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const [openItemUuid, setOpenItemUuid] = (0, _react2.useState)(undefined);
+  const [listItemUuids, setListItemUuids] = (0, _react2.useState)();
+  const [activeListItemUuid, setActiveListItemUuid] = (0, _react2.useState)(undefined);
+  const listGroupUuid = (0, _uuid.useUuid)();
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = (uuid, t3) => {
@@ -45,63 +60,135 @@ const List = t0 => {
   }
   const updateOpenItemUuid = t2;
   let t3;
-  if ($[1] !== children) {
-    t3 = (0, _List.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 = (0, _List.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__*/_react2.default.createElement(_react.MotionConfig, {
-      transition: t5
+  let t10;
+  if ($[19] !== children) {
+    t10 = /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
+      transition: t9
     }, /*#__PURE__*/_react2.default.createElement(_react.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__*/_react2.default.createElement(ListContext.Provider, {
+  let t11;
+  if ($[21] !== providerValue || $[22] !== t10) {
+    t11 = /*#__PURE__*/_react2.default.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';
 var _default = exports.default = List;
+function _temp(element) {
+  var _element$getAttribute;
+  return (_element$getAttribute = element.getAttribute("data-uuid")) === null || _element$getAttribute === void 0 ? void 0 : _element$getAttribute.split("---")[1];
+}
+function _temp2(uuid_0) {
+  return Boolean(uuid_0);
+}
 //# sourceMappingURL=List.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["_react","require","_react2","_interopRequireWildcard","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","setOpenItemUuid","useState","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","shouldShowExpandIndicator","t4","providerValue","t5","type","t6","createElement","MotionConfig","transition","AnimatePresence","initial","t7","Provider","_default"],"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":["_react","require","_react2","_interopRequireWildcard","_ColorSchemeProvider","_uuid","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","shouldEnableKeyboardHighlighting","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","setOpenItemUuid","useState","setListItemUuids","setActiveListItemUuid","useUuid","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","shouldShowExpandIndicator","t8","providerValue","t9","type","t10","createElement","MotionConfig","transition","AnimatePresence","initial","t11","Provider","_default","element","_element$getAttribute","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/cjs/components/list/List.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowExpandIndicator = exports.isMarkedListItemElement = exports.isDirectListItemElement = void 0;
+exports.shouldShowExpandIndicator = exports.isMarkedListItemElement = exports.isDirectListItemElement = exports.handleVerticalListGroupNavigation = exports.handleHorizontalArrowNavigation = void 0;
 var _react = require("react");
 var _ListItem = require("./list-item/ListItem.utils");
 const isDirectListItemElement = node => /*#__PURE__*/(0, _react.isValidElement)(node) && node.type.displayName === 'ListItem';
@@ -23,4 +23,122 @@ const shouldShowExpandIndicator = node => _react.Children.toArray(node).some(chi
   return false;
 });
 exports.shouldShowExpandIndicator = shouldShowExpandIndicator;
+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));
+};
+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) {
+      var _focusableRightElemen;
+      (_focusableRightElemen = focusableRightElements[0]) === null || _focusableRightElemen === void 0 || _focusableRightElemen.focus();
+    }
+    return true;
+  }
+  const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);
+  if (focusedRightElementIndex !== -1) {
+    event.preventDefault();
+    if (event.key === 'ArrowRight') {
+      var _focusableRightElemen2;
+      (_focusableRightElemen2 = focusableRightElements[focusedRightElementIndex + 1]) === null || _focusableRightElemen2 === void 0 || _focusableRightElemen2.focus();
+      return true;
+    }
+    const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];
+    if (previousRightElement) {
+      previousRightElement.focus();
+    } else if (focusableLeftElements.length > 0) {
+      var _focusableLeftElement;
+      (_focusableLeftElement = focusableLeftElements[focusableLeftElements.length - 1]) === null || _focusableLeftElement === void 0 || _focusableLeftElement.focus();
+    } else {
+      currentListItemElement.focus();
+    }
+    return true;
+  }
+  if (isCurrentListItemTarget) {
+    if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {
+      var _focusableLeftElement2;
+      event.preventDefault();
+      (_focusableLeftElement2 = focusableLeftElements[focusableLeftElements.length - 1]) === null || _focusableLeftElement2 === void 0 || _focusableLeftElement2.focus();
+      return true;
+    }
+    if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {
+      var _focusableRightElemen3;
+      event.preventDefault();
+      (_focusableRightElemen3 = focusableRightElements[0]) === null || _focusableRightElemen3 === void 0 || _focusableRightElemen3.focus();
+      return true;
+    }
+  }
+  return false;
+};
+exports.handleHorizontalArrowNavigation = handleHorizontalArrowNavigation;
+const handleVerticalListGroupNavigation = ({
+  event,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  const isTab = event.key === 'Tab';
+  const isShiftTab = isTab && event.shiftKey;
+  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length) || event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && !isTab) {
+    return false;
+  }
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return true;
+  }
+  const isBackward = event.key === 'ArrowUp' || isShiftTab;
+
+  // For Tab at the boundaries, let the browser handle natural tab order
+  if (isTab) {
+    const isAtStart = currentIndex === 0;
+    const isAtEnd = currentIndex === listItemUuids.length - 1;
+    if (isShiftTab && isAtStart || !isShiftTab && isAtEnd) {
+      return false;
+    }
+  }
+  event.preventDefault();
+  const nextIndex = isBackward ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length : (currentIndex + 1) % 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;
+};
+exports.handleVerticalListGroupNavigation = handleVerticalListGroupNavigation;
 //# sourceMappingURL=List.utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAYO,MAAME,uBAAuB,GAAIC,IAAe,IACnD,iBAAAC,qBAAc,EAACD,IAAI,CAAC,IAAKA,IAAI,CAACE,IAAI,CAA8BC,WAAW,KAAK,UAAU;AAACC,OAAA,CAAAL,uBAAA,GAAAA,uBAAA;AAExF,MAAMM,uBAAuB,GAAIL,IAAe,IACnD,iBAAAC,qBAAc,EAACD,IAAI,CAAC,IACpB,OAAOA,IAAI,CAACE,IAAI,KAAK,QAAQ,IAC5BF,IAAI,CAACE,IAAI,CAAwBI,UAAU,KAAKC,0BAAgB;AAACH,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAE/D,MAAMG,yBAAyB,GAAIR,IAAe,IACrDS,eAAQ,CAACC,OAAO,CAACV,IAAI,CAAC,CAACW,IAAI,CAAEC,KAAK,IAAK;EACnC,IAAIb,uBAAuB,CAACa,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI,IAAIF,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS;EACzF;EAEA,IAAIX,uBAAuB,CAACO,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACI,YAAY,KAAK,IAAI,IAAIL,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI;EACxF;EAEA,IAAI,iBAAAb,qBAAc,EAA2BW,KAAK,CAAC,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS,EAAE;IACvF,OAAOR,yBAAyB,CAACI,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC;EAC1D;EAEA,OAAO,KAAK;AAChB,CAAC,CAAC;AAACX,OAAA,CAAAI,yBAAA,GAAAA,yBAAA","ignoreList":[]}
+{"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","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","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","_focusableRightElemen3","handleVerticalListGroupNavigation","isInKeyboardNavigationGroup","listItemUuids","currentUuid","listGroupUuid","updateActiveListItemUuid","isTab","isShiftTab","shiftKey","currentIndex","indexOf","isBackward","isAtStart","isAtEnd","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    const isTab = event.key === 'Tab';\n    const isShiftTab = isTab && event.shiftKey;\n\n    if (\n        !isCurrentListItemTarget ||\n        !isInKeyboardNavigationGroup ||\n        !listItemUuids?.length ||\n        (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && !isTab)\n    ) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return true;\n    }\n\n    const isBackward = event.key === 'ArrowUp' || isShiftTab;\n\n    // For Tab at the boundaries, let the browser handle natural tab order\n    if (isTab) {\n        const isAtStart = currentIndex === 0;\n        const isAtEnd = currentIndex === listItemUuids.length - 1;\n\n        if ((isShiftTab && isAtStart) || (!isShiftTab && isAtEnd)) {\n            return false;\n        }\n    }\n\n    event.preventDefault();\n\n    const nextIndex = isBackward\n        ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length\n        : (currentIndex + 1) % 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/cjs/components/list/list-item/ListItem.js

@@ -10,11 +10,14 @@ var _uuid = require("../../../hooks/uuid");
 var _Accordion = require("../../accordion/Accordion");
 var _AreaContextProvider = _interopRequireWildcard(require("../../area-provider/AreaContextProvider"));
 var _List = require("../List");
+var _List2 = require("../List.utils");
 var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
 var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
 var _ListItem = require("./ListItem.styles");
 var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
 var _element = require("../../../hooks/element");
+var _useKeyboardFocusHighlighting = require("../../../hooks/useKeyboardFocusHighlighting");
+var _useListItemFocus = require("./useListItemFocus");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
@@ -60,7 +63,14 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     isAnyItemExpandable,
     isWrapped,
     openItemUuid,
-    updateOpenItemUuid
+    updateOpenItemUuid,
+    shouldEnableKeyboardHighlighting,
+    listGroupUuid,
+    listItemUuids,
+    registerListItemUuid,
+    unregisterListItemUuid,
+    activeListItemUuid,
+    updateActiveListItemUuid
   } = (0, _react2.useContext)(_List.ListContext);
   const {
     isWrapped: isParentAccordionWrapped
@@ -124,6 +134,68 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     setTitleWidth(width);
     setTitleMaxWidth(maxWidth);
   }, []);
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  const isInKeyboardNavigationGroup = shouldEnableKeyboardHighlighting && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function';
+  (0, _react2.useEffect)(() => {
+    if (shouldEnableKeyboardHighlighting && typeof registerListItemUuid === 'function' && typeof unregisterListItemUuid === 'function') {
+      registerListItemUuid(uuid);
+      return () => {
+        unregisterListItemUuid(uuid);
+      };
+    }
+    return undefined;
+  }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);
+  const tabIndex = (0, _react2.useMemo)(() => {
+    if (isInKeyboardNavigationGroup) {
+      const isGroupTabStop = activeListItemUuid != null ? activeListItemUuid === uuid : (listItemUuids === null || listItemUuids === void 0 ? void 0 : listItemUuids[0]) === uuid;
+      return isGroupTabStop ? 0 : -1;
+    }
+    return shouldEnableKeyboardHighlighting ? 0 : -1;
+  }, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, shouldEnableKeyboardHighlighting, uuid]);
+  const handleKeyDown = (0, _react2.useCallback)(event => {
+    const isCurrentListItemTarget = event.currentTarget === event.target;
+    const currentListItemElement = event.currentTarget;
+    const targetElement = event.target;
+    if (shouldEnableKeyboardHighlighting && (0, _List2.handleHorizontalArrowNavigation)({
+      event,
+      currentListItemElement,
+      targetElement,
+      isCurrentListItemTarget
+    })) {
+      return;
+    }
+    if ((0, _List2.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
+  } = (0, _useListItemFocus.useListItemFocus)({
+    uuid,
+    listGroupUuid,
+    isInKeyboardNavigationGroup,
+    updateActiveListItemUuid
+  });
+  (0, _react2.useEffect)(() => {
+    if (isInKeyboardNavigationGroup && activeListItemUuid == null && typeof updateActiveListItemUuid === 'function' && (listItemUuids === null || listItemUuids === void 0 ? void 0 : listItemUuids[0]) === uuid) {
+      updateActiveListItemUuid(uuid);
+    }
+  }, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, updateActiveListItemUuid, uuid]);
+  const shouldAllowElementFocus = !shouldEnableKeyboardHighlighting || isFocusWithinListItem;
   return /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItem, {
     as: shouldDisableAnimation ? undefined : _react.motion.div,
     animate: shouldDisableAnimation ? undefined : {
@@ -141,6 +213,7 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     },
     key: `list-item-${uuid}`,
     ref: listItemRef,
+    "data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
     layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
     $backgroundColor: backgroundColor,
     $isClickable: isClickable,
@@ -154,7 +227,12 @@ const ListItem = /*#__PURE__*/(0, _react2.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__*/_react2.default.createElement(_Tooltip.default, {
     shouldUseFullWidth: true,
     isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
@@ -191,7 +269,8 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,
-    onImageError: onImageError
+    onImageError: onImageError,
+    shouldAllowElementFocus: shouldAllowElementFocus
   })), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/_react2.default.createElement(_ListItemBody.default, {