npm - @elliemae/ds-left-navigation - Versions diffs - 3.22.0-next.2 → 3.22.0-next.21 - Mend

@elliemae/ds-left-navigation 3.22.0-next.2 → 3.22.0-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/dist/esm/LeftNavigationContext.js CHANGED Viewed

@@ -12,7 +12,8 @@ const defaultProps = {
   onFooterClose: () => null,
   items: [],
   labelOverflow: "wrap",
-  onItemClick: () => null
+  onItemClick: () => null,
+  isSkeleton: false
 };
 const defaultContext = {
   leftNavProps: defaultProps,

package/dist/esm/LeftNavigationContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/LeftNavigationContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject, RefObject } from 'react';\nimport type React from 'react';\nimport { createContext } from 'react';\nimport type { LeftNavProps, LabelOveflowT } from './index.d';\n\nexport type ContextProps = {\n  selectedItem: string | null;\n  setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;\n  selectedParent: string | null;\n  setSelectedParent: React.Dispatch<React.SetStateAction<string | null>>;\n  focusedItem: string | null;\n  setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;\n  openedDrilldowns: string[];\n  setOpenedDrilldowns: React.Dispatch<React.SetStateAction<string[]>>;\n  visibleItems: string[];\n  visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLElement>>>;\n  leftNavProps: LeftNavProps;\n  expandedForAnimation: boolean;\n};\n\nexport const defaultProps: LeftNavProps = {\n  expandedWidth: '240px',\n  loading: false,\n  expanded: false,\n  openedItem: null,\n  footerLabel: '',\n  onSelectedChange: () => null,\n  onFocusChange: () => null,\n  onFooterExpand: () => null,\n  onFooterClose: () => null,\n  items: [],\n  labelOverflow: 'wrap' as LabelOveflowT,\n  onItemClick: () => null,\n};\n\nexport const defaultContext: ContextProps = {\n  leftNavProps: defaultProps,\n  selectedItem: null,\n  setSelectedItem: () => null,\n  selectedParent: null,\n  setSelectedParent: () => null,\n  focusedItem: null,\n  setFocusedItem: () => null,\n  expandedForAnimation: true,\n  openedDrilldowns: [],\n  setOpenedDrilldowns: () => null,\n  visibleItems: [],\n  visibleItemsRefs: { current: {} },\n};\n\nexport const LeftNavContext = createContext<ContextProps>(defaultContext);\n\nexport default LeftNavContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,qBAAqB;AAkBvB,MAAM,eAA6B;AAAA,EACxC,eAAe;AAAA,EACf,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB,MAAM;AAAA,EACxB,eAAe,MAAM;AAAA,EACrB,gBAAgB,MAAM;AAAA,EACtB,eAAe,MAAM;AAAA,EACrB,OAAO,CAAC;AAAA,EACR,eAAe;AAAA,EACf,aAAa,MAAM;AACrB;AAEO,MAAM,iBAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA,EACzB,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,sBAAsB;AAAA,EACtB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,MAAM;AAAA,EAC3B,cAAc,CAAC;AAAA,EACf,kBAAkB,EAAE,SAAS,CAAC,EAAE;AAClC;AAEO,MAAM,iBAAiB,cAA4B,cAAc;AAExE,IAAO,gCAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject, RefObject } from 'react';\nimport type React from 'react';\nimport { createContext } from 'react';\nimport type { DSLeftNavigationT } from './react-desc-prop-types.js';\n\nexport type ContextProps = {\n  selectedItem: string | null;\n  setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;\n  selectedParent: string | null;\n  setSelectedParent: React.Dispatch<React.SetStateAction<string | null>>;\n  focusedItem: string | null;\n  setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;\n  openedDrilldowns: string[];\n  setOpenedDrilldowns: React.Dispatch<React.SetStateAction<string[]>>;\n  visibleItems: string[];\n  visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;\n  leftNavProps: DSLeftNavigationT.InternalProps;\n  expandedForAnimation: boolean;\n};\n\nexport const defaultProps: DSLeftNavigationT.DefaultProps = {\n  expandedWidth: '240px',\n  loading: false,\n  expanded: false,\n  openedItem: null,\n  footerLabel: '',\n  onSelectedChange: () => null,\n  onFocusChange: () => null,\n  onFooterExpand: () => null,\n  onFooterClose: () => null,\n  items: [],\n  labelOverflow: 'wrap' as DSLeftNavigationT.LabelOveflowT,\n  onItemClick: () => null,\n  isSkeleton: false,\n};\n\nexport const defaultContext: ContextProps = {\n  leftNavProps: defaultProps,\n  selectedItem: null,\n  setSelectedItem: () => null,\n  selectedParent: null,\n  setSelectedParent: () => null,\n  focusedItem: null,\n  setFocusedItem: () => null,\n  expandedForAnimation: true,\n  openedDrilldowns: [],\n  setOpenedDrilldowns: () => null,\n  visibleItems: [],\n  visibleItemsRefs: { current: {} },\n};\n\nexport const LeftNavContext = createContext<ContextProps>(defaultContext);\n\nexport default LeftNavContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,qBAAqB;AAkBvB,MAAM,eAA+C;AAAA,EAC1D,eAAe;AAAA,EACf,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB,MAAM;AAAA,EACxB,eAAe,MAAM;AAAA,EACrB,gBAAgB,MAAM;AAAA,EACtB,eAAe,MAAM;AAAA,EACrB,OAAO,CAAC;AAAA,EACR,eAAe;AAAA,EACf,aAAa,MAAM;AAAA,EACnB,YAAY;AACd;AAEO,MAAM,iBAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA,EACzB,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,sBAAsB;AAAA,EACtB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,MAAM;AAAA,EAC3B,cAAc,CAAC;AAAA,EACf,kBAAkB,EAAE,SAAS,CAAC,EAAE;AAClC;AAEO,MAAM,iBAAiB,cAA4B,cAAc;AAExE,IAAO,gCAAQ;",
   "names": []
 }

package/dist/esm/common/getItemBackgroundStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getItemBackgroundStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonItemBackgroundStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  background: ${color};\n\n\n  :active {\n    background: ${activeColor};\n  }\n`;\n\nexport const getItemBackgroundStyle = (props: { theme: Theme; selected: boolean; opened: boolean }): string => {\n  if (props.selected && !props.opened)\n    return commonItemBackgroundStyle(\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n    );\n\n  return commonItemBackgroundStyle(\n    props.theme.colors.neutral['000'],\n    props.theme.colors.neutral['080'],\n    props.theme.colors.brand[200],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF;AAAA;AAAA;AAAA;AAAA,kBAIE;AAAA;AAAA;AAIX,MAAM,yBAAyB,CAAC,UAAwE;AAC7G,MAAI,MAAM,YAAY,CAAC,MAAM;AAC3B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO;AAAA,IACL,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonItemBackgroundStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  background: ${color};\n\n\n  :active {\n    background: ${activeColor};\n  }\n`;\n\nexport const getItemBackgroundStyle = (props: { theme: Theme; selected?: boolean; opened?: boolean }): string => {\n  if (props.selected && !props.opened)\n    return commonItemBackgroundStyle(\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n    );\n\n  return commonItemBackgroundStyle(\n    props.theme.colors.neutral['000'],\n    props.theme.colors.neutral['080'],\n    props.theme.colors.brand[200],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF;AAAA;AAAA;AAAA;AAAA,kBAIE;AAAA;AAAA;AAIX,MAAM,yBAAyB,CAAC,UAA0E;AAC/G,MAAI,MAAM,YAAY,CAAC,MAAM;AAC3B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO;AAAA,IACL,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,EAC9B;AACF;",
   "names": []
 }

package/dist/esm/common/getLeftBorderStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getLeftBorderStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonLeftBorderStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  -webkit-box-shadow: inset 4px 0 0 0 ${color};\n          box-shadow: inset 4px 0 0 0 ${color};\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};\n            box-shadow: inset 4px 0 0 0 ${hoverColor};\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};\n            box-shadow: inset 4px 0 0 0 ${activeColor};\n  }\n`;\n\nexport const getLeftBorderStyle = (props: { theme: Theme; selected: boolean; selectedParent: boolean }): string => {\n  if (props.selected || props.selectedParent)\n    return commonLeftBorderStyle(\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n    );\n\n  return commonLeftBorderStyle('transparent', props.theme.colors.brand[300], props.theme.colors.brand[400]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D;AAAA,wCACA;AAAA;AAAA;AAAA,0CAGE;AAAA,0CACA;AAAA;AAAA;AAAA;AAAA,0CAIA;AAAA,0CACA;AAAA;AAAA;AAInC,MAAM,qBAAqB,CAAC,UAAgF;AACjH,MAAI,MAAM,YAAY,MAAM;AAC1B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO,sBAAsB,eAAe,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAC1G;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonLeftBorderStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  -webkit-box-shadow: inset 4px 0 0 0 ${color};\n          box-shadow: inset 4px 0 0 0 ${color};\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};\n            box-shadow: inset 4px 0 0 0 ${hoverColor};\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};\n            box-shadow: inset 4px 0 0 0 ${activeColor};\n  }\n`;\n\nexport const getLeftBorderStyle = (props: { theme: Theme; selected?: boolean; selectedParent?: boolean }): string => {\n  if (props.selected || props.selectedParent)\n    return commonLeftBorderStyle(\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n    );\n\n  return commonLeftBorderStyle('transparent', props.theme.colors.brand[300], props.theme.colors.brand[400]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D;AAAA,wCACA;AAAA;AAAA;AAAA,0CAGE;AAAA,0CACA;AAAA;AAAA;AAAA;AAAA,0CAIA;AAAA,0CACA;AAAA;AAAA;AAInC,MAAM,qBAAqB,CAAC,UAAkF;AACnH,MAAI,MAAM,YAAY,MAAM;AAC1B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO,sBAAsB,eAAe,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAC1G;",
   "names": []
 }

package/dist/esm/configs/useLeftNavConfig.js CHANGED Viewed

@@ -1,10 +1,13 @@
 import * as React from "react";
 import React2 from "react";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { defaultProps } from "../LeftNavigationContext.js";
 import useLeftNavItems from "./useLeftNavItems.js";
 import { useLeftNavSmoothExpand } from "./useLeftNavSmoothExpand.js";
 import { useSelectFirstBodyItem } from "../hooks/useSelectFirstBodyItem.js";
 const useLeftNavConfig = (props) => {
-  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;
   const [selectedItem, setSelectedItem] = React2.useState(null);
   const [selectedParent, setSelectedParent] = React2.useState(null);
   const [focusedItem, setFocusedItem] = React2.useState(null);
@@ -19,46 +22,53 @@ const useLeftNavConfig = (props) => {
     }),
     [expandedForAnimation, timeoutRef, setExpandedForAnimation]
   );
-  useLeftNavSmoothExpand(props, smoothExpandOpts);
+  useLeftNavSmoothExpand(propsWithDefaults, smoothExpandOpts);
   React2.useEffect(() => {
-    onSelectedChange(selectedItem);
+    if (onSelectedChange)
+      onSelectedChange(selectedItem);
   }, [selectedItem, onSelectedChange]);
   React2.useEffect(() => {
-    if (props.actionRef && props.actionRef.current) {
-      props.actionRef.current.setFocusedItem = setFocusedItem;
+    if (propsWithDefaults.actionRef && propsWithDefaults.actionRef.current) {
+      propsWithDefaults.actionRef.current.setFocusedItem = setFocusedItem;
     }
-  }, [props.actionRef]);
+  }, [propsWithDefaults.actionRef]);
   React2.useEffect(() => {
-    if (openedItem !== null)
+    if (openedItem)
       setSelectedParent(openedItem);
   }, [openedItem]);
   React2.useEffect(() => {
-    onFocusChange(focusedItem);
+    if (onFocusChange)
+      onFocusChange(focusedItem);
   }, [focusedItem, onFocusChange]);
   useSelectFirstBodyItem(
-    items,
-    openedItem,
-    props.selectedItem !== void 0 ? props.selectedItem : selectedItem,
+    items ?? [],
+    openedItem ?? "",
+    propsWithDefaults.selectedItem !== void 0 ? propsWithDefaults.selectedItem : selectedItem,
     setSelectedItem,
-    props.disableDefaultSelection
+    propsWithDefaults.disableDefaultSelection
   );
   const leftNavItemsProps = React2.useMemo(
     () => ({
-      headerItem: props.HeaderComponent,
-      bodyHeaderItem: props.BodyHeaderComponent,
-      items: props.items,
+      headerItem: propsWithDefaults.HeaderComponent,
+      bodyHeaderItem: propsWithDefaults.BodyHeaderComponent,
+      items: propsWithDefaults.items,
       openedDrilldowns
     }),
-    [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns]
+    [
+      propsWithDefaults.HeaderComponent,
+      propsWithDefaults.BodyHeaderComponent,
+      propsWithDefaults.items,
+      openedDrilldowns
+    ]
   );
   const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);
-  const finalConfig = React2.useMemo(
+  return React2.useMemo(
     () => ({
-      leftNavProps: props,
+      leftNavProps: propsWithDefaults,
       expandedForAnimation,
-      selectedItem: props.selectedItem !== void 0 ? props.selectedItem : selectedItem,
+      selectedItem: propsWithDefaults.selectedItem !== void 0 ? propsWithDefaults.selectedItem : selectedItem,
       setSelectedItem,
-      selectedParent: props.selectedParent !== void 0 ? props.selectedParent : selectedParent,
+      selectedParent: propsWithDefaults.selectedParent !== void 0 ? propsWithDefaults.selectedParent : selectedParent,
       setSelectedParent,
       focusedItem,
       setFocusedItem,
@@ -68,21 +78,16 @@ const useLeftNavConfig = (props) => {
       visibleItemsRefs
     }),
     [
-      props,
+      propsWithDefaults,
       expandedForAnimation,
       selectedItem,
-      setSelectedItem,
-      setSelectedParent,
       selectedParent,
       focusedItem,
-      setFocusedItem,
       openedDrilldowns,
-      setOpenedDrilldowns,
       visibleItems,
       visibleItemsRefs
     ]
   );
-  return finalConfig;
 };
 var useLeftNavConfig_default = useLeftNavConfig;
 export {

package/dist/esm/configs/useLeftNavConfig.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { LeftNavProps } from '../index.d';\nimport type { ContextProps } from '../LeftNavigationContext.js';\nimport useLeftNavItems from './useLeftNavItems.js';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';\n\nexport const useLeftNavConfig = (props: LeftNavProps): ContextProps => {\n  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         INTERNAL STATE                         *\n  // ************************** ------------ **************************\n  // Selection related\n  const [selectedItem, setSelectedItem] = React.useState<string | null>(null);\n  const [selectedParent, setSelectedParent] = React.useState<string | null>(null);\n  // Focus related\n  const [focusedItem, setFocusedItem] = React.useState<string | null>(null);\n  // Opened uncontrolled drilldowns\n  const [openedDrilldowns, setOpenedDrilldowns] = React.useState<string[]>([]);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        EXPAND ANIMATION                        *\n  // ************************** ------------ **************************\n  const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n  const smoothExpandOpts = React.useMemo(\n    () => ({\n      expandedForAnimation,\n      timeoutRef,\n      setExpandedForAnimation,\n    }),\n    [expandedForAnimation, timeoutRef, setExpandedForAnimation],\n  );\n  useLeftNavSmoothExpand(props, smoothExpandOpts);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                          SIDE EFFECTS                          *\n  // ************************** ------------ **************************\n  React.useEffect(() => {\n    onSelectedChange(selectedItem);\n  }, [selectedItem, onSelectedChange]);\n\n  React.useEffect(() => {\n    if (props.actionRef && props.actionRef.current) {\n      props.actionRef.current.setFocusedItem = setFocusedItem;\n    }\n  }, [props.actionRef]);\n\n  React.useEffect(() => {\n    if (openedItem !== null) setSelectedParent(openedItem);\n  }, [openedItem]);\n\n  React.useEffect(() => {\n    onFocusChange(focusedItem);\n  }, [focusedItem, onFocusChange]);\n\n  useSelectFirstBodyItem(\n    items,\n    openedItem,\n    props.selectedItem !== undefined ? props.selectedItem : selectedItem,\n    setSelectedItem,\n    props.disableDefaultSelection,\n  );\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        ITEMS MANAGEMENT                        *\n  // ************************** ------------ **************************\n\n  const leftNavItemsProps = React.useMemo(\n    () => ({\n      headerItem: props.HeaderComponent,\n      bodyHeaderItem: props.BodyHeaderComponent,\n      items: props.items,\n      openedDrilldowns,\n    }),\n    [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns],\n  );\n\n  // We need to know the current visible items since we have drilldowns\n  const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         LEFTNAV CONFIG                         *\n  // ************************** ------------ **************************\n  const finalConfig = React.useMemo(\n    () => ({\n      leftNavProps: props,\n      expandedForAnimation,\n      selectedItem: props.selectedItem !== undefined ? props.selectedItem : selectedItem,\n      setSelectedItem,\n      selectedParent: props.selectedParent !== undefined ? props.selectedParent : selectedParent,\n      setSelectedParent,\n      focusedItem,\n      setFocusedItem,\n      openedDrilldowns,\n      setOpenedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    }),\n    [\n      props,\n      expandedForAnimation,\n      selectedItem,\n      setSelectedItem,\n      setSelectedParent,\n      selectedParent,\n      focusedItem,\n      setFocusedItem,\n      openedDrilldowns,\n      setOpenedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    ],\n  );\n\n  return finalConfig;\n};\n\nexport default useLeftNavConfig;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,OAAO,qBAAqB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,UAAsC;AACrE,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,OAAM,SAAS,QAAQ;AAC/E,QAAM,aAAaA,OAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,yBAAuB,OAAO,gBAAgB;AAM9C,EAAAA,OAAM,UAAU,MAAM;AACpB,qBAAiB,YAAY;AAAA,EAC/B,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,MAAM,aAAa,MAAM,UAAU,SAAS;AAC9C,YAAM,UAAU,QAAQ,iBAAiB;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,eAAe;AAAM,wBAAkB,UAAU;AAAA,EACvD,GAAG,CAAC,UAAU,CAAC;AAEf,EAAAA,OAAM,UAAU,MAAM;AACpB,kBAAc,WAAW;AAAA,EAC3B,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM,iBAAiB,SAAY,MAAM,eAAe;AAAA,IACxD;AAAA,IACA,MAAM;AAAA,EACR;AAOA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL,YAAY,MAAM;AAAA,MAClB,gBAAgB,MAAM;AAAA,MACtB,OAAO,MAAM;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,MAAM,iBAAiB,MAAM,qBAAqB,MAAM,OAAO,gBAAgB;AAAA,EAClF;AAGA,QAAM,EAAE,cAAc,iBAAiB,IAAI,gBAAgB,iBAAiB;AAM5E,QAAM,cAAcA,OAAM;AAAA,IACxB,OAAO;AAAA,MACL,cAAc;AAAA,MACd;AAAA,MACA,cAAc,MAAM,iBAAiB,SAAY,MAAM,eAAe;AAAA,MACtE;AAAA,MACA,gBAAgB,MAAM,mBAAmB,SAAY,MAAM,iBAAiB;AAAA,MAC5E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEA,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../LeftNavigationContext.js';\n// import { leftNavigationProps } from '../react-desc-prop-types.js';\n// import { DSLeftNavigationName } from '../constants/constants.js';\nimport useLeftNavItems from './useLeftNavItems.js';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';\n\nexport const useLeftNavConfig = (props: DSLeftNavigationT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSLeftNavigationT.InternalProps>(props, defaultProps);\n  // useValidateTypescriptPropTypes(propsWithDefaults, leftNavigationProps, DSLeftNavigationName);\n  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         INTERNAL STATE                         *\n  // ************************** ------------ **************************\n  // Selection related\n  const [selectedItem, setSelectedItem] = React.useState<string | null>(null);\n  const [selectedParent, setSelectedParent] = React.useState<string | null>(null);\n  // Focus related\n  const [focusedItem, setFocusedItem] = React.useState<string | null>(null);\n  // Opened uncontrolled drilldowns\n  const [openedDrilldowns, setOpenedDrilldowns] = React.useState<string[]>([]);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        EXPAND ANIMATION                        *\n  // ************************** ------------ **************************\n  const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n  const smoothExpandOpts = React.useMemo(\n    () => ({\n      expandedForAnimation,\n      timeoutRef,\n      setExpandedForAnimation,\n    }),\n    [expandedForAnimation, timeoutRef, setExpandedForAnimation],\n  );\n  useLeftNavSmoothExpand(propsWithDefaults, smoothExpandOpts);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                          SIDE EFFECTS                          *\n  // ************************** ------------ **************************\n  React.useEffect(() => {\n    if (onSelectedChange) onSelectedChange(selectedItem);\n  }, [selectedItem, onSelectedChange]);\n\n  React.useEffect(() => {\n    if (propsWithDefaults.actionRef && propsWithDefaults.actionRef.current) {\n      propsWithDefaults.actionRef.current.setFocusedItem = setFocusedItem;\n    }\n  }, [propsWithDefaults.actionRef]);\n\n  React.useEffect(() => {\n    if (openedItem) setSelectedParent(openedItem);\n  }, [openedItem]);\n\n  React.useEffect(() => {\n    if (onFocusChange) onFocusChange(focusedItem);\n  }, [focusedItem, onFocusChange]);\n\n  useSelectFirstBodyItem(\n    items ?? [],\n    openedItem ?? '',\n    propsWithDefaults.selectedItem !== undefined ? propsWithDefaults.selectedItem : selectedItem,\n    setSelectedItem,\n    propsWithDefaults.disableDefaultSelection,\n  );\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        ITEMS MANAGEMENT                        *\n  // ************************** ------------ **************************\n\n  const leftNavItemsProps = React.useMemo(\n    () => ({\n      headerItem: propsWithDefaults.HeaderComponent,\n      bodyHeaderItem: propsWithDefaults.BodyHeaderComponent,\n      items: propsWithDefaults.items,\n      openedDrilldowns,\n    }),\n    [\n      propsWithDefaults.HeaderComponent,\n      propsWithDefaults.BodyHeaderComponent,\n      propsWithDefaults.items,\n      openedDrilldowns,\n    ],\n  );\n\n  // We need to know the current visible items since we have drilldowns\n  const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         LEFTNAV CONFIG                         *\n  // ************************** ------------ **************************\n  return React.useMemo(\n    () => ({\n      leftNavProps: propsWithDefaults,\n      expandedForAnimation,\n      selectedItem: propsWithDefaults.selectedItem !== undefined ? propsWithDefaults.selectedItem : selectedItem,\n      setSelectedItem,\n      selectedParent:\n        propsWithDefaults.selectedParent !== undefined ? propsWithDefaults.selectedParent : selectedParent,\n      setSelectedParent,\n      focusedItem,\n      setFocusedItem,\n      openedDrilldowns,\n      setOpenedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    }),\n    [\n      propsWithDefaults,\n      expandedForAnimation,\n      selectedItem,\n      selectedParent,\n      focusedItem,\n      openedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    ],\n  );\n};\n\nexport default useLeftNavConfig;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAG7B,OAAO,qBAAqB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,UAAmC;AAClE,QAAM,oBAAoB,6BAA8D,OAAO,YAAY;AAE3G,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,OAAM,SAAS,QAAQ;AAC/E,QAAM,aAAaA,OAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,yBAAuB,mBAAmB,gBAAgB;AAM1D,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI;AAAkB,uBAAiB,YAAY;AAAA,EACrD,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,kBAAkB,aAAa,kBAAkB,UAAU,SAAS;AACtE,wBAAkB,UAAU,QAAQ,iBAAiB;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI;AAAY,wBAAkB,UAAU;AAAA,EAC9C,GAAG,CAAC,UAAU,CAAC;AAEf,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI;AAAe,oBAAc,WAAW;AAAA,EAC9C,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B;AAAA,IACE,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,kBAAkB,iBAAiB,SAAY,kBAAkB,eAAe;AAAA,IAChF;AAAA,IACA,kBAAkB;AAAA,EACpB;AAOA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL,YAAY,kBAAkB;AAAA,MAC9B,gBAAgB,kBAAkB;AAAA,MAClC,OAAO,kBAAkB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,QAAM,EAAE,cAAc,iBAAiB,IAAI,gBAAgB,iBAAiB;AAM5E,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL,cAAc;AAAA,MACd;AAAA,MACA,cAAc,kBAAkB,iBAAiB,SAAY,kBAAkB,eAAe;AAAA,MAC9F;AAAA,MACA,gBACE,kBAAkB,mBAAmB,SAAY,kBAAkB,iBAAiB;AAAA,MACtF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,2BAAQ;",
   "names": ["React"]
 }

package/dist/esm/configs/useLeftNavItems.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { FOOTER_DS_ID } from "../exported-related/constants.js";
 const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach((item) => {
-    if (typeof item.type === "string") {
+    if (typeof item.type === "string" && item.dsId) {
       if (notFocuseableItems.includes(item.type))
         return;
       callback(item.dsId);
@@ -13,7 +13,7 @@ const walkItems = (items, openedDrilldowns, callback) => {
         walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
       if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
         walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
-    } else {
+    } else if (item.dsId) {
       if (!item.itemOpts?.focuseable)
         return;
       callback(item.dsId);
@@ -23,6 +23,8 @@ const walkItems = (items, openedDrilldowns, callback) => {
 const useLeftNavItems = (props) => {
   const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;
   const items = useMemo(() => {
+    if (!bodyItems)
+      return [];
     const itemsArray = [...bodyItems];
     if (bodyHeaderItem)
       itemsArray.unshift(bodyHeaderItem);

package/dist/esm/configs/useLeftNavItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavItems.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { MutableRefObject, RefObject } from 'react';\nimport { createRef, useMemo, useRef } from 'react';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport type { GenericItemItemProps } from '../index.d';\nimport { FOOTER_DS_ID } from '../exported-related/constants.js';\n\nconst notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];\n\n// Walks the array of items\n// Drilldowns are tree-like structures\nconst walkItems = (items: GenericItemItemProps[], openedDrilldowns: string[], callback: (dsId: string) => void) => {\n  items.forEach((item) => {\n    if (typeof item.type === 'string') {\n      // Out of the box item\n      if (notFocuseableItems.includes(item.type)) return; // not focuseable\n\n      callback(item.dsId);\n\n      // If it's an opened uncontrolled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n\n      // If it's an opened controlled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n    } else {\n      // Custom item\n      if (!item.itemOpts?.focuseable) return; // not focuseable specified\n      callback(item.dsId);\n    }\n  });\n};\n\nexport const useLeftNavItems = (props: {\n  headerItem: GenericItemItemProps;\n  bodyHeaderItem: GenericItemItemProps;\n  items: GenericItemItemProps[];\n  openedDrilldowns: string[];\n}): {\n  visibleItems: string[];\n  visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLElement>>>;\n} => {\n  const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;\n\n  // Place the header and body header items into the array of items\n  const items = useMemo(() => {\n    const itemsArray: GenericItemItemProps[] = [...bodyItems];\n    if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);\n    if (headerItem) itemsArray.unshift(headerItem);\n    return itemsArray;\n  }, [headerItem, bodyHeaderItem, bodyItems]);\n\n  const visibleItemsRefs = useRef<Record<string, RefObject<HTMLElement>>>({});\n\n  const visibleItems: string[] = useMemo(() => {\n    const visibleItemsArray: string[] = [];\n    walkItems(items, openedDrilldowns, (dsId: string) => {\n      visibleItemsArray.push(dsId);\n    });\n    visibleItemsArray.push(FOOTER_DS_ID);\n    return visibleItemsArray;\n  }, [items, openedDrilldowns]);\n\n  visibleItems.forEach((dsId) => {\n    if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = createRef();\n  });\n\n  return { visibleItems, visibleItemsRefs };\n};\n\nexport default useLeftNavItems;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAAC,OAA+B,kBAA4B,aAAqC;AACjH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,UAAU;AAEjC,UAAI,mBAAmB,SAAS,KAAK,IAAI;AAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,OAAO;AAEL,UAAI,CAAC,KAAK,UAAU;AAAY;AAChC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,iBAAiB,IAAI;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAqC,CAAC,GAAG,SAAS;AACxD,QAAI;AAAgB,iBAAW,QAAQ,cAAc;AACrD,QAAI;AAAY,iBAAW,QAAQ,UAAU;AAC7C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,gBAAgB,SAAS,CAAC;AAE1C,QAAM,mBAAmB,OAA+C,CAAC,CAAC;AAE1E,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,YAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,IAAI,IAAI,UAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { MutableRefObject, RefObject } from 'react';\nimport { createRef, useMemo, useRef } from 'react';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { FOOTER_DS_ID } from '../exported-related/constants.js';\n\nconst notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];\n\n// Walks the array of items\n// Drilldowns are tree-like structures\nconst walkItems = (\n  items: DSLeftNavigationT.GenericItemItemProps[],\n  openedDrilldowns: string[],\n  callback: (dsId: string) => void,\n) => {\n  items.forEach((item) => {\n    if (typeof item.type === 'string' && item.dsId) {\n      // Out of the box item\n      if (notFocuseableItems.includes(item.type)) return; // not focuseable\n\n      callback(item.dsId);\n\n      // If it's an opened uncontrolled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n\n      // If it's an opened controlled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n    } else if (item.dsId) {\n      // Custom item\n      if (!item.itemOpts?.focuseable) return; // not focuseable specified\n      callback(item.dsId);\n    }\n  });\n};\n\nexport const useLeftNavItems = (props: {\n  headerItem?: DSLeftNavigationT.GenericItemItemProps;\n  bodyHeaderItem?: DSLeftNavigationT.GenericItemItemProps;\n  items?: DSLeftNavigationT.GenericItemItemProps[];\n  openedDrilldowns: string[];\n}): {\n  visibleItems: string[];\n  visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;\n} => {\n  const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;\n\n  // Place the header and body header items into the array of items\n  const items = useMemo(() => {\n    if (!bodyItems) return [];\n    const itemsArray: DSLeftNavigationT.GenericItemItemProps[] = [...bodyItems];\n    if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);\n    if (headerItem) itemsArray.unshift(headerItem);\n    return itemsArray;\n  }, [headerItem, bodyHeaderItem, bodyItems]);\n\n  const visibleItemsRefs = useRef<Record<string, RefObject<HTMLDivElement>>>({});\n\n  const visibleItems: string[] = useMemo(() => {\n    const visibleItemsArray: string[] = [];\n    walkItems(items, openedDrilldowns, (dsId: string) => {\n      visibleItemsArray.push(dsId);\n    });\n    visibleItemsArray.push(FOOTER_DS_ID);\n    return visibleItemsArray;\n  }, [items, openedDrilldowns]);\n\n  visibleItems.forEach((dsId) => {\n    if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = createRef();\n  });\n\n  return { visibleItems, visibleItemsRefs };\n};\n\nexport default useLeftNavItems;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAChB,OACA,kBACA,aACG;AACH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,YAAY,KAAK,MAAM;AAE9C,UAAI,mBAAmB,SAAS,KAAK,IAAI;AAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,WAAW,KAAK,MAAM;AAEpB,UAAI,CAAC,KAAK,UAAU;AAAY;AAChC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,iBAAiB,IAAI;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC;AAAW,aAAO,CAAC;AACxB,UAAM,aAAuD,CAAC,GAAG,SAAS;AAC1E,QAAI;AAAgB,iBAAW,QAAQ,cAAc;AACrD,QAAI;AAAY,iBAAW,QAAQ,UAAU;AAC7C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,gBAAgB,SAAS,CAAC;AAE1C,QAAM,mBAAmB,OAAkD,CAAC,CAAC;AAE7E,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,YAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,IAAI,IAAI,UAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/configs/useLeftNavSmoothExpand.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavSmoothExpand.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { LeftNavProps } from '../index.d';\n\ninterface SmoothExpandOptsT {\n  expandedForAnimation: boolean;\n  timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;\n  setExpandedForAnimation: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const useLeftNavSmoothExpand = (props: LeftNavProps, smoothExpandOpts: SmoothExpandOptsT): void => {\n  const { expanded } = props;\n  const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;\n\n  React.useEffect(() => {\n    // If expanded changes, we need to smoothly transition to the non-expanded state\n    // so we need to wait for 350ms\n    if (!expanded && expandedForAnimation) {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);\n    } else if (expanded) setExpandedForAnimation(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [expanded]);\n\n  React.useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    },\n    [timeoutRef],\n  );\n};\n\nexport default useLeftNavSmoothExpand;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAQX,MAAM,yBAAyB,CAAC,OAAqB,qBAA8C;AACxG,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,EAAAA,OAAM,UAAU,MAAM;AAGpB,QAAI,CAAC,YAAY,sBAAsB;AACrC,UAAI,WAAW;AAAS,qBAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,wBAAwB,KAAK,GAAG,GAAG;AAAA,IAC3E,WAAW;AAAU,8BAAwB,IAAI;AAAA,EAEnD,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,OAAM;AAAA,IACJ,MAAM,MAAM;AACV,UAAI,WAAW;AAAS,qBAAa,WAAW,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACF;AAEA,IAAO,iCAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\n\ninterface SmoothExpandOptsT {\n  expandedForAnimation: boolean;\n  timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;\n  setExpandedForAnimation: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const useLeftNavSmoothExpand = (props: DSLeftNavigationT.Props, smoothExpandOpts: SmoothExpandOptsT): void => {\n  const { expanded } = props;\n  const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;\n\n  React.useEffect(() => {\n    // If expanded changes, we need to smoothly transition to the non-expanded state\n    // so we need to wait for 350ms\n    if (!expanded && expandedForAnimation) {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);\n    } else if (expanded) setExpandedForAnimation(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [expanded]);\n\n  React.useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    },\n    [timeoutRef],\n  );\n};\n\nexport default useLeftNavSmoothExpand;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAQX,MAAM,yBAAyB,CAAC,OAAgC,qBAA8C;AACnH,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,EAAAA,OAAM,UAAU,MAAM;AAGpB,QAAI,CAAC,YAAY,sBAAsB;AACrC,UAAI,WAAW;AAAS,qBAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,wBAAwB,KAAK,GAAG,GAAG;AAAA,IAC3E,WAAW;AAAU,8BAAwB,IAAI;AAAA,EAEnD,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,OAAM;AAAA,IACJ,MAAM,MAAM;AACV,UAAI,WAAW;AAAS,qBAAa,WAAW,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACF;AAEA,IAAO,iCAAQ;",
   "names": ["React"]
 }

package/dist/esm/exported-related/ChevronItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ChevronItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props: unknown): JSX.Element => (\n  <ChevronSmallRight size=\"m\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default ChevronItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAyB;AAE3B,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight, type SvgIconT } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props?: SvgIconT.Props): JSX.Element => (\n  <ChevronSmallRight size=\"m\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default ChevronItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAwC;AAE1C,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/exported-related/Icon/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Icon/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n  cursor: pointer;\n\n  outline: 0;\n  :focus,\n  :active {\n    outline: 1px solid #1e79c2;\n  }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n  function (props: unknown): JSX.Element {\n    const StyledComponent = AugmentedIcon(IconComponent);\n    return <StyledComponent color={['brand-primary', '800']} tabIndex={0} {...props} />;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBZ;AAfX,SAAS,cAAc;AAEvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { type SvgIconT } from '@elliemae/ds-icons';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n  cursor: pointer;\n\n  outline: 0;\n  :focus,\n  :active {\n    outline: 1px solid #1e79c2;\n  }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n  function (props?: SvgIconT.Props): JSX.Element {\n    const StyledComponent = AugmentedIcon(IconComponent);\n    return <StyledComponent color={['brand-primary', '800']} tabIndex={0} {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBZ;AAhBX,SAAS,cAAc;AAGvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAAqC;AAC7C,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
   "names": ["Icon"]
 }

package/dist/esm/exported-related/ItemRenderer/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ItemRenderer = (props) => {
     item,
     item: {
       dsId,
-      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },
+      itemOpts: { selectable = false, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },
       CollapsedComponent
     },
     subitems,
@@ -38,7 +38,8 @@ const ItemRenderer = (props) => {
     (e) => {
       if (onClick)
         onClick();
-      onItemClick(item, e);
+      if (onItemClick)
+        onItemClick(item, e);
       if (selectable)
         setSelectedItem(item.dsId);
     },
@@ -57,11 +58,13 @@ const ItemRenderer = (props) => {
   if (!expandedForAnimation && !CollapsedComponent) {
     return null;
   }
+  const isSelectedParent = selectedParent === dsId;
+  const visibleItemRef = dsId ? visibleItemsRefs.current[dsId] : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       StyledItem,
       {
-        ref: visibleItemsRefs.current[dsId],
+        ref: visibleItemRef,
         pt: paddingTop,
         pl: indent === void 0 ? "xxxs" : `${indent}px`,
         minHeight,
@@ -72,7 +75,7 @@ const ItemRenderer = (props) => {
         onKeyDown,
         selectable,
         selected: isSelected,
-        selectedParent: selectedParent === dsId,
+        selectedParent: isSelectedParent,
         opened,
         onFocus: handleFocus,
         "data-testid": "leftnav-item-container",
@@ -81,7 +84,7 @@ const ItemRenderer = (props) => {
         "aria-expanded": ariaExpanded,
         role: ariaRole,
         "data-selected": isSelected,
-        "data-selectedparent": selectedParent === dsId,
+        "data-selectedparent": isSelectedParent,
         "data-opened": opened,
         "data-type": item.type,
         "aria-label": ariaLabel,

package/dist/esm/exported-related/ItemRenderer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId as string);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId as string);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledItem\n        ref={visibleItemsRefs.current[dsId]}\n        pt={paddingTop}\n        pl={indent === undefined ? 'xxxs' : `${indent}px`}\n        minHeight={minHeight}\n        shadowStyle={shadowStyle(opened, item.type)}\n        alignItems=\"flex-start\"\n        cols={cols}\n        onClick={!opened ? handleOnClick : () => null}\n        onKeyDown={onKeyDown}\n        selectable={selectable}\n        selected={isSelected}\n        selectedParent={selectedParent === dsId}\n        opened={opened}\n        onFocus={handleFocus}\n        data-testid=\"leftnav-item-container\"\n        tabIndex={focuseable ? 0 : undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        role={ariaRole}\n        data-selected={isSelected}\n        data-selectedparent={selectedParent === dsId}\n        data-opened={opened}\n        data-type={item.type}\n        aria-label={ariaLabel}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmEnB,mBA6B+B,KA5B7B,YADF;AAjEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MAC/F;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ,IAAI;AAAA,QAClC,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QAEX;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<DSLeftNavigationT.ItemRendererT> = (props) => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable = false, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      if (onItemClick) onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId as string);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId as string);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  const isSelectedParent = selectedParent === dsId;\n  const visibleItemRef = dsId ? visibleItemsRefs.current[dsId] : undefined;\n  return (\n    <>\n      <StyledItem\n        ref={visibleItemRef}\n        pt={paddingTop}\n        pl={indent === undefined ? 'xxxs' : `${indent}px`}\n        minHeight={minHeight}\n        shadowStyle={shadowStyle(opened, item.type)}\n        alignItems=\"flex-start\"\n        cols={cols}\n        onClick={!opened ? handleOnClick : () => null}\n        onKeyDown={onKeyDown}\n        selectable={selectable}\n        selected={isSelected}\n        selectedParent={isSelectedParent}\n        opened={opened}\n        onFocus={handleFocus}\n        data-testid=\"leftnav-item-container\"\n        tabIndex={focuseable ? 0 : undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        role={ariaRole}\n        data-selected={isSelected}\n        data-selectedparent={isSelectedParent}\n        data-opened={opened}\n        data-type={item.type}\n        aria-label={ariaLabel}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqEnB,mBA6B+B,KA5B7B,YADF;AAnEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAqE,CAAC,UAAU;AAC3F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,aAAa,OAAO,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MACvG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,UAAI;AAAa,oBAAY,MAAM,CAAC;AACpC,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,mBAAmB;AAC5C,QAAM,iBAAiB,OAAO,iBAAiB,QAAQ,IAAI,IAAI;AAC/D,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB;AAAA,QACrB,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QAEX;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/esm/exported-related/ItemRenderer/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\ninterface ItemProps {\n  selected: boolean;\n  selectable: boolean;\n  opened: boolean;\n  theme: Theme;\n  shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ${weight}px solid ${color};\n  pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n  { minHeight: string } & ItemProps\n>`\n  position: relative;\n  cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n  min-height: ${(props) => props.minHeight};\n\n  background: ${getItemBackground};\n\n  ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n  :hover {\n    background: ${getItemHoverBackground};\n  }\n\n  :active {\n    background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n  }\n\n  ${(props) => props.shadowStyle(props.theme)};\n\n  outline: none;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700])}\n  }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n  margin-left: ${({ opened }) => (opened ? '12px' : '-4px')};\n  margin-right: ${({ borderBottomMr }) => borderBottomMr};\n  margin-top: 1px;\n  height: 1px;\n  width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '12px' : '-4px')});\n  background-color: #e0e3e8;\n  grid-column: span 3;\n  align-self: end;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\ninterface ItemProps {\n  selected: boolean;\n  selectable: boolean;\n  opened: boolean;\n  theme: Theme;\n  shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ${weight}px solid ${color};\n  pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n  { minHeight: string; selectedParent: boolean } & ItemProps\n>`\n  position: relative;\n  cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n  min-height: ${(props) => props.minHeight};\n\n  background: ${getItemBackground};\n\n  ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n  :hover {\n    background: ${getItemHoverBackground};\n  }\n\n  :active {\n    background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n  }\n\n  ${(props) => props.shadowStyle(props.theme)};\n\n  outline: none;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700])}\n  }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n  margin-left: ${({ opened }) => (opened ? '12px' : '-4px')};\n  margin-right: ${({ borderBottomMr }) => borderBottomMr};\n  margin-top: 1px;\n  height: 1px;\n  width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '12px' : '-4px')});\n  background-color: #e0e3e8;\n  grid-column: span 3;\n  align-self: end;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM,GAAG;AACtD,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM,GAAG;AACtD,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIrD,MAAM,2BAA2B,OAAO,MAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA;AAAA,uBAGnB,CAAC,EAAE,eAAe,MAAM,oBAAoB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { ItemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: ItemOptsT = {\n  label: '',\n  labelOverflow: 'truncate',\n  selectable: true,\n  focuseable: true,\n  openable: false,\n  closable: false,\n  ariaLabel: undefined,\n  ariaRole: 'menuitem',\n  ariaExpanded: undefined,\n  ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): Required<ItemRendererT> => {\n  const propsWithDefault = useMemo(() => {\n    const itemWithDefaults = {\n      CollapsedComponent: () => null,\n      ...props.item,\n      itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n    };\n    return {\n      minHeight: '48px',\n      paddingTop: '12px',\n      subitems: [],\n      shadowStyle: (opened: boolean, type: string) => () =>\n        `box-shadow: ${\n          opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n        }`,\n      hasBorderBottom: false,\n      borderBottomMr: '0px',\n      ...props,\n      item: itemWithDefaults,\n    };\n  }, [props]);\n\n  return propsWithDefault as Required<ItemRendererT>;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAAC,UAAkD;AACrF,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst itemDefaultProps: DSLeftNavigationT.ItemOptsT = {\n  label: '',\n  labelOverflow: 'truncate',\n  selectable: true,\n  focuseable: true,\n  openable: false,\n  closable: false,\n  ariaLabel: undefined,\n  ariaRole: 'menuitem',\n  ariaExpanded: undefined,\n  ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (\n  props: DSLeftNavigationT.ItemRendererT,\n): Required<DSLeftNavigationT.ItemRendererT> => {\n  const propsWithDefault = useMemo(() => {\n    const itemWithDefaults = {\n      CollapsedComponent: () => null,\n      ...props.item,\n      itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n    };\n    return {\n      minHeight: '48px',\n      paddingTop: '12px',\n      subitems: [],\n      shadowStyle: (opened: boolean, type: string) => () =>\n        `box-shadow: ${\n          opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n        }`,\n      hasBorderBottom: false,\n      borderBottomMr: '0px',\n      ...props,\n      item: itemWithDefaults,\n    };\n  }, [props]);\n\n  return propsWithDefault as Required<DSLeftNavigationT.ItemRendererT>;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAClC,UAC8C;AAC9C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/OpenWindowItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n  cursor: pointer;\n  :focus {\n    outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\nexport const OpenWindow = (props: unknown): JSX.Element => (\n  <StyledOpenWindow size=\"s\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default OpenWindow;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon, type SvgIconT } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n  cursor: pointer;\n  :focus {\n    outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\nexport const OpenWindow = (props: SvgIconT.Props): JSX.Element => (\n  <StyledOpenWindow size=\"s\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default OpenWindow;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAqC;AAE5D,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
   "names": []
 }

package/dist/esm/exported-related/constants.js CHANGED Viewed

@@ -16,6 +16,17 @@ const ITEM_TYPES = {
   LEFT_NAV_ITEM_TEXT_LABEL: "ds-left-nav-item-text-label",
   LEFT_NAV_ITEM_WITH_DATE: "ds-left-nav-item-with-date"
 };
+const MAP_ITEMS_TO_SKELETON = {
+  "ds-left-nav-item-header": "item",
+  "ds-left-nav-item-link": "subitem",
+  "ds-left-nav-item-submenu": "item",
+  "ds-left-nav-item-controlled-drilldown": "subitem",
+  "ds-left-nav-item-uncontrolled-drilldown": "subitem",
+  "ds-left-nav-item-section": "subitem",
+  "ds-left-nav-item-separator": "subitem",
+  "ds-left-nav-item-text-label": "subitem",
+  "ds-left-nav-item-with-date": "subitem"
+};
 const FOOTER_DS_ID = "ds-left-nav-__internal__-footer";
 const FOOTER_MENU_CLOSE_DS_ID = "ds-left-nav-__internal__-footer-menu-close";
 const CHEVRON_BACK_DS_ID = "ds-left-nav-__internal__-chevron-back";
@@ -24,6 +35,7 @@ export {
   FOOTER_DS_ID,
   FOOTER_MENU_CLOSE_DS_ID,
   ITEM_TYPES,
-  LABEL_OVERFLOW
+  LABEL_OVERFLOW,
+  MAP_ITEMS_TO_SKELETON
 };
 //# sourceMappingURL=constants.js.map

package/dist/esm/exported-related/constants.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/constants.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const LABEL_OVERFLOW = {\n  WRAP: 'wrap',\n  WRAP_ALL: 'wrapAll',\n  TRUNCATE: 'truncate',\n};\n\nexport const ITEM_TYPES = {\n  LEFT_NAV_ITEM_HEADER: 'ds-left-nav-item-header',\n  LEFT_NAV_ITEM_LINK: 'ds-left-nav-item-link',\n  LEFT_NAV_ITEM_SUBMENU: 'ds-left-nav-item-submenu',\n  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: 'ds-left-nav-item-controlled-drilldown',\n  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: 'ds-left-nav-item-uncontrolled-drilldown',\n  LEFT_NAV_ITEM_SECTION: 'ds-left-nav-item-section',\n  LEFT_NAV_ITEM_SEPARATOR: 'ds-left-nav-item-separator',\n  LEFT_NAV_ITEM_SKELETON: 'ds-left-nav-item-skeleton',\n  LEFT_NAV_ITEM_TEXT_LABEL: 'ds-left-nav-item-text-label',\n  LEFT_NAV_ITEM_WITH_DATE: 'ds-left-nav-item-with-date',\n};\n\nexport const FOOTER_DS_ID = 'ds-left-nav-__internal__-footer';\n\nexport const FOOTER_MENU_CLOSE_DS_ID = 'ds-left-nav-__internal__-footer-menu-close';\n\nexport const CHEVRON_BACK_DS_ID = 'ds-left-nav-__internal__-chevron-back';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,aAAa;AAAA,EACxB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,yBAAyB;AAC3B;AAEO,MAAM,eAAe;AAErB,MAAM,0BAA0B;AAEhC,MAAM,qBAAqB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const LABEL_OVERFLOW = {\n  WRAP: 'wrap',\n  WRAP_ALL: 'wrapAll',\n  TRUNCATE: 'truncate',\n};\n\nexport const ITEM_TYPES = {\n  LEFT_NAV_ITEM_HEADER: 'ds-left-nav-item-header',\n  LEFT_NAV_ITEM_LINK: 'ds-left-nav-item-link',\n  LEFT_NAV_ITEM_SUBMENU: 'ds-left-nav-item-submenu',\n  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: 'ds-left-nav-item-controlled-drilldown',\n  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: 'ds-left-nav-item-uncontrolled-drilldown',\n  LEFT_NAV_ITEM_SECTION: 'ds-left-nav-item-section',\n  LEFT_NAV_ITEM_SEPARATOR: 'ds-left-nav-item-separator',\n  LEFT_NAV_ITEM_SKELETON: 'ds-left-nav-item-skeleton',\n  LEFT_NAV_ITEM_TEXT_LABEL: 'ds-left-nav-item-text-label',\n  LEFT_NAV_ITEM_WITH_DATE: 'ds-left-nav-item-with-date',\n};\n\nexport const MAP_ITEMS_TO_SKELETON = {\n  'ds-left-nav-item-header': 'item',\n  'ds-left-nav-item-link': 'subitem',\n  'ds-left-nav-item-submenu': 'item',\n  'ds-left-nav-item-controlled-drilldown': 'subitem',\n  'ds-left-nav-item-uncontrolled-drilldown': 'subitem',\n  'ds-left-nav-item-section': 'subitem',\n  'ds-left-nav-item-separator': 'subitem',\n  'ds-left-nav-item-text-label': 'subitem',\n  'ds-left-nav-item-with-date': 'subitem',\n} as const;\n\nexport const FOOTER_DS_ID = 'ds-left-nav-__internal__-footer';\n\nexport const FOOTER_MENU_CLOSE_DS_ID = 'ds-left-nav-__internal__-footer-menu-close';\n\nexport const CHEVRON_BACK_DS_ID = 'ds-left-nav-__internal__-chevron-back';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,aAAa;AAAA,EACxB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,yBAAyB;AAC3B;AAEO,MAAM,wBAAwB;AAAA,EACnC,2BAA2B;AAAA,EAC3B,yBAAyB;AAAA,EACzB,4BAA4B;AAAA,EAC5B,yCAAyC;AAAA,EACzC,2CAA2C;AAAA,EAC3C,4BAA4B;AAAA,EAC5B,8BAA8B;AAAA,EAC9B,+BAA+B;AAAA,EAC/B,8BAA8B;AAChC;AAEO,MAAM,eAAe;AAErB,MAAM,0BAA0B;AAEhC,MAAM,qBAAqB;",
   "names": []
 }

package/dist/esm/hooks/useExpandableOnClickHandler.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useExpandableOnClickHandler.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport LeftNavigationContext from '../LeftNavigationContext.js';\n\ntype useExpandableOnClickHandlerProps = {\n  id: string;\n  onExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onOpen: React.MouseEventHandler & React.KeyboardEventHandler;\n  selectable?: boolean;\n};\n\nexport const useExpandableOnClickHandler = ({\n  id,\n  onExpand,\n  onOpen,\n  selectable = true,\n}: useExpandableOnClickHandlerProps): ((e: React.MouseEvent<HTMLElement>) => void) => {\n  const {\n    leftNavProps: { expanded },\n    setSelectedItem,\n  } = useContext(LeftNavigationContext);\n\n  const handleOnExpand = useCallback(\n    (e) => {\n      onExpand(e);\n      if (selectable) setSelectedItem(id);\n    },\n    [id, onExpand, setSelectedItem, selectable],\n  );\n\n  const handleOnOpen = useCallback(\n    (e) => {\n      onOpen(e);\n      if (selectable) setSelectedItem(id);\n    },\n    [id, onOpen, setSelectedItem, selectable],\n  );\n\n  const handleOnClick = useCallback(\n    (e) => {\n      if (!expanded) handleOnExpand(e);\n      else handleOnOpen(e);\n    },\n    [expanded, handleOnExpand, handleOnOpen],\n  );\n\n  return handleOnClick;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AACxC,OAAO,2BAA2B;AAS3B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAsF;AACpF,QAAM;AAAA,IACJ,cAAc,EAAE,SAAS;AAAA,IACzB;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAM;AACL,eAAS,CAAC;AACV,UAAI;AAAY,wBAAgB,EAAE;AAAA,IACpC;AAAA,IACA,CAAC,IAAI,UAAU,iBAAiB,UAAU;AAAA,EAC5C;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAM;AACL,aAAO,CAAC;AACR,UAAI;AAAY,wBAAgB,EAAE;AAAA,IACpC;AAAA,IACA,CAAC,IAAI,QAAQ,iBAAiB,UAAU;AAAA,EAC1C;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAM;AACL,UAAI,CAAC;AAAU,uBAAe,CAAC;AAAA;AAC1B,qBAAa,CAAC;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY;AAAA,EACzC;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport LeftNavigationContext from '../LeftNavigationContext.js';\n\ntype UseExpandableOnClickHandlerProps = {\n  id: string;\n  onExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onOpen: React.MouseEventHandler & React.KeyboardEventHandler;\n  selectable?: boolean;\n};\n\nexport const useExpandableOnClickHandler = ({\n  id,\n  onExpand,\n  onOpen,\n  selectable = true,\n}: UseExpandableOnClickHandlerProps): ((e: React.MouseEvent<HTMLElement>) => void) => {\n  const {\n    leftNavProps: { expanded },\n    setSelectedItem,\n  } = useContext(LeftNavigationContext);\n\n  const handleOnExpand: React.MouseEventHandler = useCallback(\n    (e) => {\n      onExpand(e);\n      if (selectable) setSelectedItem(id);\n    },\n    [id, onExpand, setSelectedItem, selectable],\n  );\n\n  const handleOnOpen: React.MouseEventHandler = useCallback(\n    (e) => {\n      onOpen(e);\n      if (selectable) setSelectedItem(id);\n    },\n    [id, onOpen, setSelectedItem, selectable],\n  );\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!expanded) handleOnExpand(e);\n      else handleOnOpen(e);\n    },\n    [expanded, handleOnExpand, handleOnOpen],\n  );\n\n  return handleOnClick;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AACxC,OAAO,2BAA2B;AAS3B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAsF;AACpF,QAAM;AAAA,IACJ,cAAc,EAAE,SAAS;AAAA,IACzB;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,iBAA0C;AAAA,IAC9C,CAAC,MAAM;AACL,eAAS,CAAC;AACV,UAAI;AAAY,wBAAgB,EAAE;AAAA,IACpC;AAAA,IACA,CAAC,IAAI,UAAU,iBAAiB,UAAU;AAAA,EAC5C;AAEA,QAAM,eAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,aAAO,CAAC;AACR,UAAI;AAAY,wBAAgB,EAAE;AAAA,IACpC;AAAA,IACA,CAAC,IAAI,QAAQ,iBAAiB,UAAU;AAAA,EAC1C;AAEA,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,UAAI,CAAC;AAAU,uBAAe,CAAC;AAAA;AAC1B,qBAAa,CAAC;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY;AAAA,EACzC;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/hooks/useKeyboardNavigation.js CHANGED Viewed

@@ -43,7 +43,7 @@ const useKeyboardNavigation = ({ item, onClick }) => {
       if (keyCode !== KEY_CODES.TAB) {
         e.preventDefault();
       }
-      if (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE) {
+      if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {
         if (selectable) {
           onClick(e);
           focusAndSelect(dsId);
@@ -58,7 +58,7 @@ const useKeyboardNavigation = ({ item, onClick }) => {
       if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
         onClick(e);
       }
-      if (closable && keyCode === KEY_CODES.LEFT_ARROW) {
+      if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {
         onClick(e);
         setFocusedItem(dsId);
       }

package/dist/esm/hooks/useKeyboardNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { GenericItemItemProps } from '../index.d';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst KEY_CODES = {\n  TAB: 9,\n  ENTER: 13,\n  SPACE: 32,\n  LEFT_ARROW: 37,\n  UP_ARROW: 38,\n  RIGHT_ARROW: 39,\n  DOWN_ARROW: 40,\n  END: 35,\n  HOME: 36,\n};\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype useKeyboardNavigationProps = {\n  item: GenericItemItemProps;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: useKeyboardNavigationProps): React.KeyboardEventHandler => {\n  const {\n    dsId,\n    itemOpts: { selectable, openable, closable },\n  } = item;\n\n  const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n  const currentIndex = useMemo(\n    () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n    [dsId, visibleItems],\n  );\n\n  const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n  const focusAndSelect = useCallback(\n    (nextDsId: string) => {\n      setFocusedItem(nextDsId);\n      setSelectedItem(nextDsId);\n    },\n    [setFocusedItem, setSelectedItem],\n  );\n\n  useLayoutEffect(() => {\n    if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n  }, [dsId, focusedItem, visibleItemsRefs]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const { keyCode } = e;\n\n      // Prevent default behaviour when not tab\n      if (keyCode !== KEY_CODES.TAB) {\n        e.preventDefault();\n      }\n\n      if (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE) {\n        if (selectable) {\n          onClick(e);\n          focusAndSelect(dsId);\n        } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n          onClick(e);\n          focusAndSelect(dsId);\n        } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n          onClick(e);\n          setFocusedItem(dsId);\n        }\n      }\n\n      if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {\n        onClick(e);\n      }\n\n      if (closable && keyCode === KEY_CODES.LEFT_ARROW) {\n        onClick(e);\n        setFocusedItem(dsId);\n      }\n\n      if (keyCode === KEY_CODES.DOWN_ARROW) {\n        const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n        setFocusedItem(nextDsId);\n      }\n\n      if (keyCode === KEY_CODES.UP_ARROW) {\n        const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n        setFocusedItem(prevDsId);\n      }\n\n      if (keyCode === KEY_CODES.HOME) {\n        setFocusedItem(visibleItems[0]);\n      }\n\n      if (keyCode === KEY_CODES.END) {\n        setFocusedItem(visibleItems[visibleItems.length - 1]);\n      }\n    },\n    [\n      openable,\n      closable,\n      selectable,\n      focusedItem,\n      onClick,\n      focusAndSelect,\n      dsId,\n      setFocusedItem,\n      visibleItems,\n      currentIndex,\n    ],\n  );\n\n  return onKeyDown;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,SAAS,iBAAiB,kBAAkB;AAClE,SAAS,oBAAoB,+BAA+B;AAE5D,OAAO,oBAAoB;AAE3B,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;AAEA,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,IAAI,WAAW,cAAc;AAEpE,QAAM,eAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,IAAI,WAAW,cAAc;AAElF,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,kBAAgB,MAAM;AACpB,QAAI,SAAS;AAAa,uBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,QAAQ,IAAI;AAGpB,UAAI,YAAY,UAAU,KAAK;AAC7B,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,YAAY,UAAU,SAAS,YAAY,UAAU,OAAO;AAC9D,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,oBAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,yBAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,YAAY,UAAU,aAAa;AACjD,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,YAAY,YAAY,UAAU,YAAY;AAChD,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,YAAY,UAAU,YAAY;AACpC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,UAAU;AAClC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,MAAM;AAC9B,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,YAAY,UAAU,KAAK;AAC7B,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst KEY_CODES = {\n  TAB: 9,\n  ENTER: 13,\n  SPACE: 32,\n  LEFT_ARROW: 37,\n  UP_ARROW: 38,\n  RIGHT_ARROW: 39,\n  DOWN_ARROW: 40,\n  END: 35,\n  HOME: 36,\n};\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype UseKeyboardNavigationProps = {\n  item: DSLeftNavigationT.GenericItemItemProps;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: UseKeyboardNavigationProps): React.KeyboardEventHandler => {\n  const {\n    dsId,\n    itemOpts: { selectable, openable, closable },\n  } = item;\n\n  const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n  const currentIndex = useMemo(\n    () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n    [dsId, visibleItems],\n  );\n\n  const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n  const focusAndSelect = useCallback(\n    (nextDsId: string) => {\n      setFocusedItem(nextDsId);\n      setSelectedItem(nextDsId);\n    },\n    [setFocusedItem, setSelectedItem],\n  );\n\n  useLayoutEffect(() => {\n    if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n  }, [dsId, focusedItem, visibleItemsRefs]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const { keyCode } = e;\n\n      // Prevent default behaviour when not tab\n      if (keyCode !== KEY_CODES.TAB) {\n        e.preventDefault();\n      }\n\n      if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {\n        if (selectable) {\n          onClick(e);\n          focusAndSelect(dsId);\n        } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n          onClick(e);\n          focusAndSelect(dsId);\n        } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n          onClick(e);\n          setFocusedItem(dsId);\n        }\n      }\n\n      if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {\n        onClick(e);\n      }\n\n      if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {\n        onClick(e);\n        setFocusedItem(dsId);\n      }\n\n      if (keyCode === KEY_CODES.DOWN_ARROW) {\n        const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n        setFocusedItem(nextDsId);\n      }\n\n      if (keyCode === KEY_CODES.UP_ARROW) {\n        const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n        setFocusedItem(prevDsId);\n      }\n\n      if (keyCode === KEY_CODES.HOME) {\n        setFocusedItem(visibleItems[0]);\n      }\n\n      if (keyCode === KEY_CODES.END) {\n        setFocusedItem(visibleItems[visibleItems.length - 1]);\n      }\n    },\n    [\n      openable,\n      closable,\n      selectable,\n      focusedItem,\n      onClick,\n      focusAndSelect,\n      dsId,\n      setFocusedItem,\n      visibleItems,\n      currentIndex,\n    ],\n  );\n\n  return onKeyDown;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,SAAS,iBAAiB,kBAAkB;AAClE,SAAS,oBAAoB,+BAA+B;AAE5D,OAAO,oBAAoB;AAE3B,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;AAEA,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,IAAI,WAAW,cAAc;AAEpE,QAAM,eAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,IAAI,WAAW,cAAc;AAElF,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,kBAAgB,MAAM;AACpB,QAAI,SAAS;AAAa,uBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,QAAQ,IAAI;AAGpB,UAAI,YAAY,UAAU,KAAK;AAC7B,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,SAAS,YAAY,UAAU,SAAS,YAAY,UAAU,QAAQ;AACxE,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,oBAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,yBAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,YAAY,UAAU,aAAa;AACjD,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,QAAQ,YAAY,YAAY,UAAU,YAAY;AACxD,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,YAAY,UAAU,YAAY;AACpC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,UAAU;AAClC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,MAAM;AAC9B,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,YAAY,UAAU,KAAK;AAC7B,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }