@chayns-components/core 5.4.18 → 5.4.20-alpha.0

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.handleListItemToggleKey = exports.handleListItemTabNavigation = 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,216 @@ 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 getListItemElementByIndex = ({
+  index,
+  listItemUuids,
+  listGroupUuid
+}) => {
+  const listItemUuid = listItemUuids[index];
+  if (!listItemUuid || typeof listGroupUuid !== 'string') {
+    return undefined;
+  }
+  return document.querySelector(`[data-uuid="${listGroupUuid}---${listItemUuid}"]`);
+};
+const focusListItemByIndex = ({
+  index,
+  listItemUuids,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  const listItemUuid = listItemUuids[index];
+  const listItemElement = getListItemElementByIndex({
+    index,
+    listItemUuids,
+    listGroupUuid
+  });
+  if (!listItemUuid || !listItemElement || typeof updateActiveListItemUuid !== 'function') {
+    return false;
+  }
+  updateActiveListItemUuid(listItemUuid);
+  listItemElement.focus();
+  return true;
+};
+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 handleListItemTabNavigation = ({
+  event,
+  currentListItemElement,
+  targetElement,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  if (event.key !== 'Tab' || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length)) {
+    return false;
+  }
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return false;
+  }
+  const focusableRightElements = getFocusableElements(currentListItemElement, RIGHT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);
+  if (event.shiftKey) {
+    return false;
+  }
+  if (isCurrentListItemTarget) {
+    if (focusableRightElements.length > 0) {
+      var _focusableRightElemen4;
+      event.preventDefault();
+      (_focusableRightElemen4 = focusableRightElements[0]) === null || _focusableRightElemen4 === void 0 || _focusableRightElemen4.focus();
+      return true;
+    }
+    return false;
+  }
+  if (focusedRightElementIndex === -1) {
+    return false;
+  }
+  const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];
+  if (nextRightElement) {
+    event.preventDefault();
+    nextRightElement.focus();
+    return true;
+  }
+  if (currentIndex < listItemUuids.length - 1) {
+    event.preventDefault();
+    return focusListItemByIndex({
+      index: currentIndex + 1,
+      listItemUuids,
+      listGroupUuid,
+      updateActiveListItemUuid
+    });
+  }
+  return false;
+};
+exports.handleListItemTabNavigation = handleListItemTabNavigation;
+const handleVerticalListGroupNavigation = ({
+  event,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length) || event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return false;
+  }
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return true;
+  }
+  const isBackward = event.key === 'ArrowUp';
+  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;
+const handleListItemToggleKey = ({
+  event,
+  isCurrentListItemTarget,
+  isExpandable,
+  isItemOpen,
+  shouldEnableKeyboardHighlighting,
+  toggleItem
+}) => {
+  if (!isCurrentListItemTarget || !shouldEnableKeyboardHighlighting) {
+    return false;
+  }
+  const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;
+  const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;
+  const shouldToggle = event.key === 'Enter' || event.key === ' ';
+  if (!shouldOpen && !shouldClose && !shouldToggle) {
+    return false;
+  }
+  event.preventDefault();
+  toggleItem();
+  return true;
+};
+exports.handleListItemToggleKey = handleListItemToggleKey;
 //# 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","getListItemElementByIndex","index","listItemUuids","listGroupUuid","listItemUuid","document","querySelector","focusListItemByIndex","updateActiveListItemUuid","listItemElement","focus","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","nextLeftElement","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","_focusableRightElemen3","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","_focusableRightElemen4","nextRightElement","handleVerticalListGroupNavigation","isBackward","nextIndex","nextListItemUuid","nextListItemElement","handleListItemToggleKey","isItemOpen","shouldEnableKeyboardHighlighting","toggleItem","shouldOpen","shouldClose","shouldToggle"],"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\ntype ListGroupNavigationParams = {\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\ntype ListItemTabNavigationParams = ListGroupNavigationParams & {\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n};\n\ntype ListItemToggleKeyParams = {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isExpandable: boolean;\n    isItemOpen: boolean;\n    shouldEnableKeyboardHighlighting: boolean;\n    toggleItem: VoidFunction;\n};\n\nconst getListItemElementByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n}) => {\n    const listItemUuid = listItemUuids[index];\n\n    if (!listItemUuid || typeof listGroupUuid !== 'string') {\n        return undefined;\n    }\n\n    return document.querySelector<HTMLDivElement>(\n        `[data-uuid=\"${listGroupUuid}---${listItemUuid}\"]`,\n    );\n};\n\nconst focusListItemByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n    const listItemUuid = listItemUuids[index];\n    const listItemElement = getListItemElementByIndex({ index, listItemUuids, listGroupUuid });\n\n    if (!listItemUuid || !listItemElement || typeof updateActiveListItemUuid !== 'function') {\n        return false;\n    }\n\n    updateActiveListItemUuid(listItemUuid);\n    listItemElement.focus();\n    return true;\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 handleListItemTabNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: ListItemTabNavigationParams) => {\n    if (event.key !== 'Tab' || !isInKeyboardNavigationGroup || !listItemUuids?.length) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return false;\n    }\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (event.shiftKey) {\n        return false;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (focusableRightElements.length > 0) {\n            event.preventDefault();\n            focusableRightElements[0]?.focus();\n            return true;\n        }\n\n        return false;\n    }\n\n    if (focusedRightElementIndex === -1) {\n        return false;\n    }\n\n    const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];\n\n    if (nextRightElement) {\n        event.preventDefault();\n        nextRightElement.focus();\n        return true;\n    }\n\n    if (currentIndex < listItemUuids.length - 1) {\n        event.preventDefault();\n        return focusListItemByIndex({\n            index: currentIndex + 1,\n            listItemUuids,\n            listGroupUuid,\n            updateActiveListItemUuid,\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}: ListGroupNavigationParams) => {\n    if (\n        !isCurrentListItemTarget ||\n        !isInKeyboardNavigationGroup ||\n        !listItemUuids?.length ||\n        (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\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';\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\nexport const handleListItemToggleKey = ({\n    event,\n    isCurrentListItemTarget,\n    isExpandable,\n    isItemOpen,\n    shouldEnableKeyboardHighlighting,\n    toggleItem,\n}: ListItemToggleKeyParams) => {\n    if (!isCurrentListItemTarget || !shouldEnableKeyboardHighlighting) {\n        return false;\n    }\n\n    const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;\n    const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;\n    const shouldToggle = event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen && !shouldClose && !shouldToggle) {\n        return false;\n    }\n\n    event.preventDefault();\n    toggleItem();\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)(({
@@ -56,14 +59,23 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   titleInputProps,
   shouldDisableAnimation = false,
   cornerElement,
-  isSelected = false
+  isSelected = false,
+  shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp
 }, ref) => {
   const {
     isAnyItemExpandable,
     isWrapped,
     openItemUuid,
-    updateOpenItemUuid
+    updateOpenItemUuid,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,
+    listGroupUuid,
+    listItemUuids,
+    registerListItemUuid,
+    unregisterListItemUuid,
+    activeListItemUuid,
+    updateActiveListItemUuid
   } = (0, _react2.useContext)(_List.ListContext);
+  const shouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingProp ?? shouldEnableKeyboardHighlightingContext;
   const {
     isWrapped: isParentAccordionWrapped
   } = (0, _react2.useContext)(_Accordion.AccordionContext);
@@ -126,6 +138,69 @@ 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)(() => shouldEnableKeyboardHighlighting ? 0 : -1, [shouldEnableKeyboardHighlighting]);
+  const handleKeyDown = (0, _react2.useCallback)(event => {
+    const isCurrentListItemTarget = event.currentTarget === event.target;
+    const currentListItemElement = event.currentTarget;
+    const targetElement = event.target;
+    [() => shouldEnableKeyboardHighlighting && (0, _List2.handleHorizontalArrowNavigation)({
+      event,
+      currentListItemElement,
+      targetElement,
+      isCurrentListItemTarget
+    }), () => (0, _List2.handleListItemTabNavigation)({
+      event,
+      currentListItemElement,
+      targetElement,
+      isCurrentListItemTarget,
+      isInKeyboardNavigationGroup,
+      listItemUuids,
+      currentUuid: uuid,
+      listGroupUuid,
+      updateActiveListItemUuid
+    }), () => (0, _List2.handleVerticalListGroupNavigation)({
+      event,
+      isCurrentListItemTarget,
+      isInKeyboardNavigationGroup,
+      listItemUuids,
+      currentUuid: uuid,
+      listGroupUuid,
+      updateActiveListItemUuid
+    }), () => (0, _List2.handleListItemToggleKey)({
+      event,
+      isCurrentListItemTarget,
+      isExpandable,
+      isItemOpen,
+      shouldEnableKeyboardHighlighting,
+      toggleItem: () => handleHeadClick(event)
+    })].some(handleKey => handleKey());
+  }, [handleHeadClick, isExpandable, isInKeyboardNavigationGroup, isItemOpen, 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]);
   return /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItem, {
     as: shouldDisableAnimation ? undefined : _react.motion.div,
     animate: shouldDisableAnimation ? undefined : {
@@ -143,6 +218,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,
@@ -156,7 +232,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,

package/lib/cjs/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","forwardRef","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","isInDialog","useIsInsideDialog","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n    titleWidth: number;\n    titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n    /**\n     * The background color of the `ListItem`.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Whether the item is selected.\n     */\n    isSelected?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Whether a Tooltip should be displayed on hover if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * Whether the ListItem Animation should be disabled.\n     */\n    shouldDisableAnimation?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n    /**\n     * Function to be executed if the size are changed.\n     */\n    onSizeChange?: (sizes: ListItemSize) => void;\n    /**\n     * Function that is executed when the text of the title input changes.\n     * When this function is given, the title is displayed as an input.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * The props of the title input.\n     */\n    titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n    (\n        {\n            backgroundColor,\n            careOfLocationId,\n            children,\n            cornerImage,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isDefaultOpen,\n            isOpen,\n            isTitleGreyed,\n            leftElements,\n            onClick,\n            onClose,\n            onLongPress,\n            onOpen,\n            rightElements,\n            shouldShowTooltipOnTitleOverflow = false,\n            shouldForceBackground = false,\n            shouldForceBottomLine = false,\n            shouldForceHover = false,\n            shouldHideBottomLine = false,\n            shouldOpenImageOnClick = false,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator = false,\n            shouldPreventLayoutAnimation = false,\n            shouldRenderClosed = false,\n            shouldShowRoundImageOrIcon,\n            shouldShowSeparatorBelow = false,\n            subtitle,\n            title,\n            onImageError,\n            onSizeChange,\n            onTitleInputChange,\n            titleElement,\n            titleInputProps,\n            shouldDisableAnimation = false,\n            cornerElement,\n            isSelected = false,\n        },\n        ref,\n    ) => {\n        const { isAnyItemExpandable, isWrapped, openItemUuid, updateOpenItemUuid } =\n            useContext(ListContext);\n\n        const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n        const areaProvider = useContext(AreaContext);\n\n        const isInitialRenderRef = useRef(true);\n\n        const listItemRef = useRef<HTMLDivElement>(null);\n\n        const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n        const uuid = useUuid();\n\n        const isExpandable = children !== undefined;\n        const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n        const onCloseRef = useRef(onClose);\n        const onOpenRef = useRef(onOpen);\n\n        const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n        const [titleWidth, setTitleWidth] = useState(0);\n        const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n        useEffect(() => {\n            onCloseRef.current = onClose;\n            onOpenRef.current = onOpen;\n        }, [isOpen, onClose, onOpen]);\n\n        useEffect(() => {\n            if (isInitialRenderRef.current) {\n                isInitialRenderRef.current = false;\n            } else if (isItemOpen) {\n                if (typeof onOpenRef.current === 'function') {\n                    onOpenRef.current();\n                }\n            } else if (typeof onCloseRef.current === 'function') {\n                onCloseRef.current();\n            }\n        }, [isItemOpen]);\n\n        const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                if (isExpandable) {\n                    updateOpenItemUuid(uuid);\n                }\n\n                if (typeof onClick === 'function') {\n                    onClick(event);\n                }\n            },\n            [isExpandable, onClick, updateOpenItemUuid, uuid],\n        );\n\n        useEffect(() => {\n            if (isDefaultOpen) {\n                updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n            }\n        }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n        const isClickable = typeof onClick === 'function' || isExpandable;\n\n        useEffect(() => {\n            if (typeof onSizeChange === 'function') {\n                onSizeChange({\n                    titleWidth,\n                    titleMaxWidth,\n                });\n            }\n        }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                titleWidth,\n                titleMaxWidth,\n            }),\n            [titleMaxWidth, titleWidth],\n        );\n\n        const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n            setTitleWidth(width);\n            setTitleMaxWidth(maxWidth);\n        }, []);\n\n        return (\n            <StyledListItem\n                as={shouldDisableAnimation ? undefined : motion.div}\n                animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n                className=\"beta-chayns-list-item\"\n                exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                key={`list-item-${uuid}`}\n                ref={listItemRef}\n                layout={\n                    shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position'\n                }\n                $backgroundColor={backgroundColor}\n                $isClickable={isClickable}\n                $isInAccordion={\n                    typeof isParentAccordionWrapped === 'boolean' &&\n                    !areaProvider.shouldDisableListItemPadding\n                }\n                $isOpen={isItemOpen}\n                $isWrapped={isWrapped}\n                $isInDialog={isInDialog}\n                $isSelected={isSelected}\n                $shouldChangeColor={areaProvider.shouldChangeColor}\n                $shouldForceBackground={shouldForceBackground}\n                $shouldForceBottomLine={shouldForceBottomLine}\n                $shouldHideBottomLine={shouldHideBottomLine}\n                $shouldHideIndicator={shouldHideIndicator}\n                $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n            >\n                <Tooltip\n                    shouldUseFullWidth\n                    isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                    item={\n                        <StyledListItemTooltip\n                            style={{ cursor: 'default' }}\n                            key={`list-item-tooltip-${uuid}`}\n                        >\n                            {title}\n                        </StyledListItemTooltip>\n                    }\n                >\n                    <ListItemHead\n                        hoverItem={hoverItem}\n                        careOfLocationId={careOfLocationId}\n                        cornerElement={cornerElement}\n                        cornerImage={cornerImage}\n                        icons={icons}\n                        imageBackground={imageBackground}\n                        images={images}\n                        isAnyItemExpandable={isAnyItemExpandable}\n                        isExpandable={isExpandable}\n                        isOpen={isItemOpen}\n                        isTitleGreyed={isTitleGreyed}\n                        leftElements={leftElements}\n                        onClick={isClickable ? handleHeadClick : undefined}\n                        onLongPress={onLongPress}\n                        shouldForceHover={shouldForceHover}\n                        rightElements={rightElements}\n                        shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                        shouldHideIndicator={shouldHideIndicator}\n                        shouldOpenImageOnClick={shouldOpenImageOnClick}\n                        shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                        subtitle={subtitle}\n                        title={title}\n                        onTitleInputChange={onTitleInputChange}\n                        onTitleWidthChange={handleTitleWidthChange}\n                        titleInputProps={titleInputProps}\n                        titleElement={titleElement}\n                        setShouldEnableTooltip={setShouldEnableTooltip}\n                        shouldDisableAnimation={shouldDisableAnimation}\n                        onImageError={onImageError}\n                    />\n                </Tooltip>\n                <AnimatePresence initial={false}>\n                    {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                        <ListItemBody\n                            id={uuid}\n                            key={`listItemBody-${uuid}`}\n                            shouldHideBody={shouldRenderClosed && !isItemOpen}\n                        >\n                            <AreaContextProvider>{children}</AreaContextProvider>\n                        </ListItemBody>\n                    )}\n                </AnimatePresence>\n            </StyledListItem>\n        );\n    },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_List2","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","_useKeyboardFocusHighlighting","_useListItemFocus","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","forwardRef","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","isInDialog","useIsInsideDialog","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","isInKeyboardNavigationGroup","tabIndex","useMemo","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","handleHorizontalArrowNavigation","handleListItemTabNavigation","currentUuid","handleVerticalListGroupNavigation","handleListItemToggleKey","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","useListItemFocus","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","onKeyDown","onFocus","onBlur","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    KeyboardEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport {\n    handleHorizontalArrowNavigation,\n    handleListItemTabNavigation,\n    handleListItemToggleKey,\n    handleVerticalListGroupNavigation,\n} from '../List.utils';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n    titleWidth: number;\n    titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n    /**\n     * The background color of the `ListItem`.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Whether the item is selected.\n     */\n    isSelected?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Whether a Tooltip should be displayed on hover if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * Whether the ListItem Animation should be disabled.\n     */\n    shouldDisableAnimation?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n    /**\n     * Function to be executed if the size are changed.\n     */\n    onSizeChange?: (sizes: ListItemSize) => void;\n    /**\n     * Enables keyboard-only focus highlighting. Overrides the value from the List context.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Function that is executed when the text of the title input changes.\n     * When this function is given, the title is displayed as an input.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * The props of the title input.\n     */\n    titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n    (\n        {\n            backgroundColor,\n            careOfLocationId,\n            children,\n            cornerImage,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isDefaultOpen,\n            isOpen,\n            isTitleGreyed,\n            leftElements,\n            onClick,\n            onClose,\n            onLongPress,\n            onOpen,\n            rightElements,\n            shouldShowTooltipOnTitleOverflow = false,\n            shouldForceBackground = false,\n            shouldForceBottomLine = false,\n            shouldForceHover = false,\n            shouldHideBottomLine = false,\n            shouldOpenImageOnClick = false,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator = false,\n            shouldPreventLayoutAnimation = false,\n            shouldRenderClosed = false,\n            shouldShowRoundImageOrIcon,\n            shouldShowSeparatorBelow = false,\n            subtitle,\n            title,\n            onImageError,\n            onSizeChange,\n            onTitleInputChange,\n            titleElement,\n            titleInputProps,\n            shouldDisableAnimation = false,\n            cornerElement,\n            isSelected = false,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n        },\n        ref,\n    ) => {\n        const {\n            isAnyItemExpandable,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        } = useContext(ListContext);\n\n        const shouldEnableKeyboardHighlighting =\n            shouldEnableKeyboardHighlightingProp ?? shouldEnableKeyboardHighlightingContext;\n\n        const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n        const areaProvider = useContext(AreaContext);\n\n        const isInitialRenderRef = useRef(true);\n\n        const listItemRef = useRef<HTMLDivElement>(null);\n\n        const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n        const uuid = useUuid();\n\n        const isExpandable = children !== undefined;\n        const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n        const onCloseRef = useRef(onClose);\n        const onOpenRef = useRef(onOpen);\n\n        const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n        const [titleWidth, setTitleWidth] = useState(0);\n        const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n        useEffect(() => {\n            onCloseRef.current = onClose;\n            onOpenRef.current = onOpen;\n        }, [isOpen, onClose, onOpen]);\n\n        useEffect(() => {\n            if (isInitialRenderRef.current) {\n                isInitialRenderRef.current = false;\n            } else if (isItemOpen) {\n                if (typeof onOpenRef.current === 'function') {\n                    onOpenRef.current();\n                }\n            } else if (typeof onCloseRef.current === 'function') {\n                onCloseRef.current();\n            }\n        }, [isItemOpen]);\n\n        const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                if (isExpandable) {\n                    updateOpenItemUuid(uuid);\n                }\n\n                if (typeof onClick === 'function') {\n                    onClick(event);\n                }\n            },\n            [isExpandable, onClick, updateOpenItemUuid, uuid],\n        );\n\n        useEffect(() => {\n            if (isDefaultOpen) {\n                updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n            }\n        }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n        const isClickable = typeof onClick === 'function' || isExpandable;\n\n        useEffect(() => {\n            if (typeof onSizeChange === 'function') {\n                onSizeChange({\n                    titleWidth,\n                    titleMaxWidth,\n                });\n            }\n        }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                titleWidth,\n                titleMaxWidth,\n            }),\n            [titleMaxWidth, titleWidth],\n        );\n\n        const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n            setTitleWidth(width);\n            setTitleMaxWidth(maxWidth);\n        }, []);\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const isInKeyboardNavigationGroup =\n            shouldEnableKeyboardHighlighting &&\n            typeof listGroupUuid === 'string' &&\n            typeof updateActiveListItemUuid === 'function';\n\n        useEffect(() => {\n            if (\n                shouldEnableKeyboardHighlighting &&\n                typeof registerListItemUuid === 'function' &&\n                typeof unregisterListItemUuid === 'function'\n            ) {\n                registerListItemUuid(uuid);\n\n                return () => {\n                    unregisterListItemUuid(uuid);\n                };\n            }\n\n            return undefined;\n        }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n        const tabIndex = useMemo(\n            () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n            [shouldEnableKeyboardHighlighting],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                const isCurrentListItemTarget = event.currentTarget === event.target;\n                const currentListItemElement = event.currentTarget as HTMLDivElement;\n                const targetElement = event.target as HTMLElement | null;\n\n                [\n                    () =>\n                        shouldEnableKeyboardHighlighting &&\n                        handleHorizontalArrowNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                        }),\n                    () =>\n                        handleListItemTabNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleVerticalListGroupNavigation({\n                            event,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleListItemToggleKey({\n                            event,\n                            isCurrentListItemTarget,\n                            isExpandable,\n                            isItemOpen,\n                            shouldEnableKeyboardHighlighting,\n                            toggleItem: () =>\n                                handleHeadClick(\n                                    event as unknown as React.MouseEvent<HTMLDivElement>,\n                                ),\n                        }),\n                ].some((handleKey) => handleKey());\n            },\n            [\n                handleHeadClick,\n                isExpandable,\n                isInKeyboardNavigationGroup,\n                isItemOpen,\n                listGroupUuid,\n                listItemUuids,\n                shouldEnableKeyboardHighlighting,\n                updateActiveListItemUuid,\n                uuid,\n            ],\n        );\n\n        const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n            uuid,\n            listGroupUuid,\n            isInKeyboardNavigationGroup,\n            updateActiveListItemUuid,\n        });\n\n        useEffect(() => {\n            if (\n                isInKeyboardNavigationGroup &&\n                activeListItemUuid == null &&\n                typeof updateActiveListItemUuid === 'function' &&\n                listItemUuids?.[0] === uuid\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        }, [\n            activeListItemUuid,\n            isInKeyboardNavigationGroup,\n            listItemUuids,\n            updateActiveListItemUuid,\n            uuid,\n        ]);\n\n        return (\n            <StyledListItem\n                as={shouldDisableAnimation ? undefined : motion.div}\n                animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n                className=\"beta-chayns-list-item\"\n                exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                key={`list-item-${uuid}`}\n                ref={listItemRef}\n                data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n                layout={\n                    shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position'\n                }\n                $backgroundColor={backgroundColor}\n                $isClickable={isClickable}\n                $isInAccordion={\n                    typeof isParentAccordionWrapped === 'boolean' &&\n                    !areaProvider.shouldDisableListItemPadding\n                }\n                $isOpen={isItemOpen}\n                $isWrapped={isWrapped}\n                $isInDialog={isInDialog}\n                $isSelected={isSelected}\n                $shouldChangeColor={areaProvider.shouldChangeColor}\n                $shouldForceBackground={shouldForceBackground}\n                $shouldForceBottomLine={shouldForceBottomLine}\n                $shouldHideBottomLine={shouldHideBottomLine}\n                $shouldHideIndicator={shouldHideIndicator}\n                $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n                data-should-show-keyboard-highlighting={\n                    shouldShowKeyboardHighlighting ? 'true' : undefined\n                }\n                tabIndex={tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n            >\n                <Tooltip\n                    shouldUseFullWidth\n                    isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                    item={\n                        <StyledListItemTooltip\n                            style={{ cursor: 'default' }}\n                            key={`list-item-tooltip-${uuid}`}\n                        >\n                            {title}\n                        </StyledListItemTooltip>\n                    }\n                >\n                    <ListItemHead\n                        hoverItem={hoverItem}\n                        careOfLocationId={careOfLocationId}\n                        cornerElement={cornerElement}\n                        cornerImage={cornerImage}\n                        icons={icons}\n                        imageBackground={imageBackground}\n                        images={images}\n                        isAnyItemExpandable={isAnyItemExpandable}\n                        isExpandable={isExpandable}\n                        isOpen={isItemOpen}\n                        isTitleGreyed={isTitleGreyed}\n                        leftElements={leftElements}\n                        onClick={isClickable ? handleHeadClick : undefined}\n                        onLongPress={onLongPress}\n                        shouldForceHover={shouldForceHover}\n                        rightElements={rightElements}\n                        shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                        shouldHideIndicator={shouldHideIndicator}\n                        shouldOpenImageOnClick={shouldOpenImageOnClick}\n                        shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                        subtitle={subtitle}\n                        title={title}\n                        onTitleInputChange={onTitleInputChange}\n                        onTitleWidthChange={handleTitleWidthChange}\n                        titleInputProps={titleInputProps}\n                        titleElement={titleElement}\n                        setShouldEnableTooltip={setShouldEnableTooltip}\n                        shouldDisableAnimation={shouldDisableAnimation}\n                        onImageError={onImageError}\n                    />\n                </Tooltip>\n                <AnimatePresence initial={false}>\n                    {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                        <ListItemBody\n                            id={uuid}\n                            key={`listItemBody-${uuid}`}\n                            shouldHideBody={shouldRenderClosed && !isItemOpen}\n                        >\n                            <AreaContextProvider>{children}</AreaContextProvider>\n                        </ListItemBody>\n                    )}\n                </AnimatePresence>\n            </StyledListItem>\n        );\n    },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/ListItem.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledListItemTooltip = exports.StyledListItem = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../../utils/keyboardFocusHighlighting.styles");
 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 StyledListItem = exports.StyledListItem = _styledComponents.default.div`
     overflow: hidden;
@@ -87,6 +88,12 @@ const StyledListItem = exports.StyledListItem = _styledComponents.default.div`
 }) => $isWrapped && (0, _styledComponents.css)`
             padding-left: 26px;
         `}
+    
+        &[data-should-show-keyboard-highlighting='true']:focus-visible {
+        transition: none;
+        ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
+        overflow: visible;
+    }
 `;
 const StyledListItemTooltip = exports.StyledListItemTooltip = _styledComponents.default.div`
     padding: 6px;

package/lib/cjs/components/list/list-item/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItem","exports","styled","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldChangeColor?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $isInDialog: boolean;\n    $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.div<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n        $isInDialog,\n        $isSelected,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                ${theme.cardBackgroundOpacity}\n            );\n        `}\n\n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        $isInDialog,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            }\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps & { theme: Theme }) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItem","exports","styled","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","keyboardFocusHighlightingRingCss","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldChangeColor?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $isInDialog: boolean;\n    $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.div<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n        $isInDialog,\n        $isSelected,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                ${theme.cardBackgroundOpacity}\n            );\n        `}\n\n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        $isInDialog,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            }\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps & { theme: Theme }) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n    \n        &[data-should-show-keyboard-highlighting='true']:focus-visible {\n        transition: none;\n        ${keyboardFocusHighlightingRingCss};\n        overflow: visible;\n    }\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,0BAAA,GAAAD,OAAA;AAAmG,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAkB5F,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACd,IAAAE,qBAAG;AACX,4BAA4BD,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EACCD,cAAc;EACdG,OAAO;EACPC,kBAAkB;EAClBC,sBAAsB;EACtBC,KAAK;EACLC,WAAW;EACXC;AAGJ,CAAC,KACG,CAAE,CAACR,cAAc,IAAIG,OAAO,IAAKE,sBAAsB,IAAIG,WAAW,KACtE,IAAAN,qBAAG;AACX;AACA,kBAAkBE,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AACzF,kBAAkBA,KAAK,CAACG,qBAAqB;AAC7C;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAEV,cAAc;EAAEG,OAAO;EAAEE;AAAuB,CAAC,KACpEK,gBAAgB,KACd,CAACV,cAAc,IAAIG,OAAO,IAAKE,sBAAsB,CAAC,IACxD,IAAAH,qBAAG;AACX,gCAAgCQ,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EACCC,YAAY;EACZX,cAAc;EACdI,kBAAkB;EAClBG,WAAW;EACXD;AAGJ,CAAC,KACGK,YAAY,IACZ,CAACX,cAAc,IACf,IAAAE,qBAAG;AACX;AACA;AACA,sBAAsBE,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC7F,sBAAsBA,KAAK,CAACG,qBAAqB;AACjD;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCT,cAAc;EACdG,OAAO;EACPS,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBT;AACoC,CAAC,KAAK;EAC1C,IACIS,yBAAyB,IACxB,CAAC,CAACZ,OAAO,IAAIS,UAAU,IAAIZ,cAAc,KACtCM,KAAK,CAACU,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAO,IAAAZ,qBAAG;AAC1B,qCAAqCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAO,IAAAJ,qBAAG;AACtB;AACA,qCAAqCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOW,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACV,IAAAV,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA;AACA,UAAUgB,2DAAgC;AAC1C;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAtB,OAAA,CAAAsB,qBAAA,GAAGrB,yBAAM,CAACC,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}