npm - @elliemae/ds-left-navigation - Versions diffs - 3.22.0-next.3 → 3.22.0-next.5 - Mend

@elliemae/ds-left-navigation 3.22.0-next.3 → 3.22.0-next.5

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 (159) hide show

package/dist/cjs/LeftNavigation.js CHANGED Viewed

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(LeftNavigation_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_prop_types = require("./prop-types.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_LeftNavigationContext = __toESM(require("./LeftNavigationContext.js"));
 var import_useLeftNavConfig = require("./configs/useLeftNavConfig.js");
 var import_LeftNavContent = __toESM(require("./parts/LeftNavContent/index.js"));
@@ -43,9 +43,9 @@ const LeftNavigation = (props) => {
   const leftNavConfig = (0, import_useLeftNavConfig.useLeftNavConfig)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavigationContext.default.Provider, { value: leftNavConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavContent.default, {}) });
 };
-LeftNavigation.propTypes = import_prop_types.leftNavigationProps;
+LeftNavigation.propTypes = import_react_desc_prop_types.leftNavigationProps;
 LeftNavigation.defaultProps = import_LeftNavigationContext.defaultProps;
 LeftNavigation.displayName = "LeftNavigation";
 const LeftNavigationWithSchema = (0, import_ds_props_helpers.describe)(LeftNavigation).description("Left Navigation");
-LeftNavigationWithSchema.propTypes = import_prop_types.leftNavigationProps;
+LeftNavigationWithSchema.propTypes = import_react_desc_prop_types.leftNavigationProps;
 //# sourceMappingURL=LeftNavigation.js.map

package/dist/cjs/LeftNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LeftNavigation.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './prop-types.js';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig.js';\nimport LeftNavContent from './parts/LeftNavContent/index.js';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n  const leftNavConfig = useLeftNavConfig(props);\n\n  return (\n    <LeftNavigationContext.Provider value={leftNavConfig}>\n      <LeftNavContent />\n    </LeftNavigationContext.Provider>\n  );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,wBAAoC;AACpC,mCAAoD;AACpD,8BAAiC;AACjC,4BAA2B;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,oBAAgB,0CAAiB,KAAK;AAE5C,SACE,4CAAC,6BAAAA,QAAsB,UAAtB,EAA+B,OAAO,eACrC,sDAAC,sBAAAC,SAAA,EAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './react-desc-prop-types.js';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig.js';\nimport LeftNavContent from './parts/LeftNavContent/index.js';\nimport type { DSLeftNavigationT } from './react-desc-prop-types.js';\n\nexport const LeftNavigation = (props: DSLeftNavigationT.Props): JSX.Element => {\n  const leftNavConfig = useLeftNavConfig(props);\n\n  return (\n    <LeftNavigationContext.Provider value={leftNavConfig}>\n      <LeftNavContent />\n    </LeftNavigationContext.Provider>\n  );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,mCAAoC;AACpC,mCAAoD;AACpD,8BAAiC;AACjC,4BAA2B;AAGpB,MAAM,iBAAiB,CAAC,UAAgD;AAC7E,QAAM,oBAAgB,0CAAiB,KAAK;AAE5C,SACE,4CAAC,6BAAAA,QAAsB,UAAtB,EAA+B,OAAO,eACrC,sDAAC,sBAAAC,SAAA,EAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
   "names": ["LeftNavigationContext", "LeftNavContent"]
 }

package/dist/cjs/LeftNavigationContext.js CHANGED Viewed

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LeftNavigationContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA8B;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,qBAAiB,4BAA4B,cAAc;AAExE,IAAO,gCAAQ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA8B;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,qBAAiB,4BAA4B,cAAc;AAExE,IAAO,gCAAQ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/common/getItemBackgroundStyle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,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/cjs/common/getLeftBorderStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/common/getLeftBorderStyle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,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/cjs/configs/useLeftNavConfig.js CHANGED Viewed

@@ -34,11 +34,14 @@ __export(useLeftNavConfig_exports, {
 module.exports = __toCommonJS(useLeftNavConfig_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_LeftNavigationContext = require("../LeftNavigationContext.js");
 var import_useLeftNavItems = __toESM(require("./useLeftNavItems.js"));
 var import_useLeftNavSmoothExpand = require("./useLeftNavSmoothExpand.js");
 var import_useSelectFirstBodyItem = require("../hooks/useSelectFirstBodyItem.js");
 const useLeftNavConfig = (props) => {
-  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_LeftNavigationContext.defaultProps);
+  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;
   const [selectedItem, setSelectedItem] = import_react.default.useState(null);
   const [selectedParent, setSelectedParent] = import_react.default.useState(null);
   const [focusedItem, setFocusedItem] = import_react.default.useState(null);
@@ -53,46 +56,53 @@ const useLeftNavConfig = (props) => {
     }),
     [expandedForAnimation, timeoutRef, setExpandedForAnimation]
   );
-  (0, import_useLeftNavSmoothExpand.useLeftNavSmoothExpand)(props, smoothExpandOpts);
+  (0, import_useLeftNavSmoothExpand.useLeftNavSmoothExpand)(propsWithDefaults, smoothExpandOpts);
   import_react.default.useEffect(() => {
-    onSelectedChange(selectedItem);
+    if (onSelectedChange)
+      onSelectedChange(selectedItem);
   }, [selectedItem, onSelectedChange]);
   import_react.default.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]);
   import_react.default.useEffect(() => {
-    if (openedItem !== null)
+    if (openedItem)
       setSelectedParent(openedItem);
   }, [openedItem]);
   import_react.default.useEffect(() => {
-    onFocusChange(focusedItem);
+    if (onFocusChange)
+      onFocusChange(focusedItem);
   }, [focusedItem, onFocusChange]);
   (0, import_useSelectFirstBodyItem.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 = import_react.default.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 } = (0, import_useLeftNavItems.default)(leftNavItemsProps);
-  const finalConfig = import_react.default.useMemo(
+  return import_react.default.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,
@@ -102,21 +112,16 @@ const useLeftNavConfig = (props) => {
       visibleItemsRefs
     }),
     [
-      props,
+      propsWithDefaults,
       expandedForAnimation,
       selectedItem,
-      setSelectedItem,
-      setSelectedParent,
       selectedParent,
       focusedItem,
-      setFocusedItem,
       openedDrilldowns,
-      setOpenedDrilldowns,
       visibleItems,
       visibleItemsRefs
     ]
   );
-  return finalConfig;
 };
 var useLeftNavConfig_default = useLeftNavConfig;
 //# sourceMappingURL=useLeftNavConfig.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useLeftNavConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,6BAA4B;AAC5B,oCAAuC;AACvC,oCAAuC;AAEhC,MAAM,mBAAmB,CAAC,UAAsC;AACrE,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,aAAAA,QAAM,SAAS,QAAQ;AAC/E,QAAM,aAAa,aAAAA,QAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,4DAAuB,OAAO,gBAAgB;AAM9C,eAAAA,QAAM,UAAU,MAAM;AACpB,qBAAiB,YAAY;AAAA,EAC/B,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,eAAAA,QAAM,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,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe;AAAM,wBAAkB,UAAU;AAAA,EACvD,GAAG,CAAC,UAAU,CAAC;AAEf,eAAAA,QAAM,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,oBAAoB,aAAAA,QAAM;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,QAAI,uBAAAC,SAAgB,iBAAiB;AAM5E,QAAM,cAAc,aAAAD,QAAM;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAA6C;AAC7C,mCAA6B;AAG7B,6BAA4B;AAC5B,oCAAuC;AACvC,oCAAuC;AAEhC,MAAM,mBAAmB,CAAC,UAAmC;AAClE,QAAM,wBAAoB,sDAA8D,OAAO,yCAAY;AAE3G,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,aAAAA,QAAM,SAAS,QAAQ;AAC/E,QAAM,aAAa,aAAAA,QAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,4DAAuB,mBAAmB,gBAAgB;AAM1D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI;AAAkB,uBAAiB,YAAY;AAAA,EACrD,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,eAAAA,QAAM,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,QAAM,UAAU,MAAM;AACpB,QAAI;AAAY,wBAAkB,UAAU;AAAA,EAC9C,GAAG,CAAC,UAAU,CAAC;AAEf,eAAAA,QAAM,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,oBAAoB,aAAAA,QAAM;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,QAAI,uBAAAC,SAAgB,iBAAiB;AAM5E,SAAO,aAAAD,QAAM;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", "useLeftNavItems"]
 }

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

@@ -39,7 +39,7 @@ var import_constants = require("../exported-related/constants.js");
 const notFocuseableItems = [import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, import_exported_related.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);
@@ -47,7 +47,7 @@ const walkItems = (items, openedDrilldowns, callback) => {
         walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
       if (item.type === import_exported_related.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);
@@ -57,6 +57,8 @@ const walkItems = (items, openedDrilldowns, callback) => {
 const useLeftNavItems = (props) => {
   const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;
   const items = (0, import_react.useMemo)(() => {
+    if (!bodyItems)
+      return [];
     const itemsArray = [...bodyItems];
     if (bodyHeaderItem)
       itemsArray.unshift(bodyHeaderItem);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useLeftNavItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2C;AAC3C,8BAA2B;AAE3B,uBAA6B;AAE7B,MAAM,qBAAqB,CAAC,mCAAW,yBAAyB,mCAAW,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,mCAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,mCAAW,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,YAAQ,sBAAQ,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,uBAAmB,qBAA+C,CAAC,CAAC;AAE1E,QAAM,mBAAyB,sBAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,6BAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,IAAI,QAAI,wBAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2C;AAC3C,8BAA2B;AAE3B,uBAA6B;AAE7B,MAAM,qBAAqB,CAAC,mCAAW,yBAAyB,mCAAW,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,mCAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,mCAAW,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,YAAQ,sBAAQ,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,uBAAmB,qBAAkD,CAAC,CAAC;AAE7E,QAAM,mBAAyB,sBAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,6BAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,IAAI,QAAI,wBAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useLeftNavSmoothExpand.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAQX,MAAM,yBAAyB,CAAC,OAAqB,qBAA8C;AACxG,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,eAAAA,QAAM,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,QAAM;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAQX,MAAM,yBAAyB,CAAC,OAAgC,qBAA8C;AACnH,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,eAAAA,QAAM,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,QAAM;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/cjs/exported-related/ChevronItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/ChevronItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,sBAAkC;AAE3B,MAAM,cAAc,CAAC,UAC1B,4CAAC,qCAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,sBAAiD;AAE1C,MAAM,cAAc,CAAC,UAC1B,4CAAC,qCAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Icon/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBZ;AAfX,uBAAuB;AAEvB,MAAM,gBAAgB,CAACA,cAAoE,yBAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,4CAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBZ;AAhBX,uBAAuB;AAGvB,MAAM,gBAAgB,CAACA,cAAoE,yBAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAAqC;AAC7C,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,4CAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
   "names": ["Icon"]
 }

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

@@ -44,7 +44,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,
@@ -71,7 +71,8 @@ const ItemRenderer = (props) => {
     (e) => {
       if (onClick)
         onClick();
-      onItemClick(item, e);
+      if (onItemClick)
+        onItemClick(item, e);
       if (selectable)
         setSelectedItem(item.dsId);
     },
@@ -90,11 +91,13 @@ const ItemRenderer = (props) => {
   if (!expandedForAnimation && !CollapsedComponent) {
     return null;
   }
+  const isSelectedParent = selectedParent === dsId;
+  const visibleItemRef = dsId ? visibleItemsRefs.current[dsId] : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_styled.StyledItem,
       {
-        ref: visibleItemsRefs.current[dsId],
+        ref: visibleItemRef,
         pt: paddingTop,
         pl: indent === void 0 ? "xxxs" : `${indent}px`,
         minHeight,
@@ -105,7 +108,7 @@ const ItemRenderer = (props) => {
         onKeyDown,
         selectable,
         selected: isSelected,
-        selectedParent: selectedParent === dsId,
+        selectedParent: isSelectedParent,
         opened,
         onFocus: handleFocus,
         "data-testid": "leftnav-item-container",
@@ -114,7 +117,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/cjs/exported-related/ItemRenderer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/ItemRenderer/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEnB;AAjEJ,mBAAwD;AACxD,oBAAyE;AAEzE,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,uBAAmB,kDAAqB,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,UAAM,yBAAW,2CAAc;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,oBAAgB;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,kBAAc,0BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,gBAAY,oCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,WAAO,sBAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,4EACE;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,4CAAC,0CAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,4CAAC,oCAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEnB;AAnEJ,mBAAwD;AACxD,oBAAyE;AAEzE,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAqE,CAAC,UAAU;AAC3F,QAAM,uBAAmB,kDAAqB,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,UAAM,yBAAW,2CAAc;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,oBAAgB;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,kBAAc,0BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,gBAAY,oCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,WAAO,sBAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,iBAAa,sBAAQ,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,4EACE;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,4CAAC,0CAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,4CAAC,oCAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/ItemRenderer/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAiB;AACjB,uBAAmC;AACnC,uBAA4D;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,iBAAa,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,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,+BAA2B,yBAAO,eAAAA,SAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;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": ["Grid"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;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,uBAAmB,sBAAQ,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;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,uBAAmB,sBAAQ,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/cjs/exported-related/OpenWindowItem/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/OpenWindowItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AAXF,uBAAuB;AACvB,sBAA6C;AAE7C,MAAM,uBAAmB,yBAAO,gBAAAA,UAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,4CAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AAXF,uBAAuB;AACvB,sBAA4D;AAE5D,MAAM,uBAAmB,yBAAO,gBAAAA,UAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,4CAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
   "names": ["OpenWindowIcon"]
 }

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

@@ -32,7 +32,8 @@ __export(constants_exports, {
   FOOTER_DS_ID: () => FOOTER_DS_ID,
   FOOTER_MENU_CLOSE_DS_ID: () => FOOTER_MENU_CLOSE_DS_ID,
   ITEM_TYPES: () => ITEM_TYPES,
-  LABEL_OVERFLOW: () => LABEL_OVERFLOW
+  LABEL_OVERFLOW: () => LABEL_OVERFLOW,
+  MAP_ITEMS_TO_SKELETON: () => MAP_ITEMS_TO_SKELETON
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
@@ -53,6 +54,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";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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/cjs/hooks/useExpandableOnClickHandler.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useExpandableOnClickHandler.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,mCAAkC;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,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,qBAAiB;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,mBAAe;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,oBAAgB;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,mCAAkC;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,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,qBAA0C;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,mBAAwC;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,oBAAyC;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": ["LeftNavigationContext"]
 }

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

@@ -76,7 +76,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);
@@ -91,7 +91,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);
       }