npm - @elliemae/ds-left-navigation - Versions diffs - 3.60.0-next.2 → 3.60.0-next.20 - Mend

@elliemae/ds-left-navigation 3.60.0-next.2 → 3.60.0-next.20

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

@@ -37,14 +37,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 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_useLeftNavConfig = require("./config/useLeftNavConfig.js");
 var import_LeftNavContent = __toESM(require("./parts/LeftNavContent/index.js"));
 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.defaultProps = import_LeftNavigationContext.defaultProps;
+LeftNavigation.defaultProps = import_react_desc_prop_types.defaultProps;
 LeftNavigation.displayName = "LeftNavigation";
 const LeftNavigationWithSchema = (0, import_ds_props_helpers.describe)(LeftNavigation).description("Left Navigation");
-LeftNavigationWithSchema.propTypes = import_react_desc_prop_types.leftNavigationProps;
+LeftNavigationWithSchema.propTypes = import_react_desc_prop_types.DSLeftNavigationPropTypesSchema;
 //# 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 './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.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,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 { DSLeftNavigationPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport LeftNavigationContext from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './config/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.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = DSLeftNavigationPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,mCAA8D;AAC9D,mCAAkC;AAClC,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,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

@@ -30,30 +30,14 @@ var LeftNavigationContext_exports = {};
 __export(LeftNavigationContext_exports, {
   LeftNavContext: () => LeftNavContext,
   default: () => LeftNavigationContext_default,
-  defaultContext: () => defaultContext,
-  defaultProps: () => defaultProps
+  defaultContext: () => defaultContext
 });
 module.exports = __toCommonJS(LeftNavigationContext_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const defaultProps = {
-  expandedWidth: "240px",
-  loading: false,
-  expanded: false,
-  openedItem: null,
-  footerLabel: "",
-  onSelectedChange: () => null,
-  onFocusChange: () => null,
-  onFooterExpand: () => null,
-  onFooterClose: () => null,
-  items: [],
-  labelOverflow: "wrap",
-  onItemClick: () => null,
-  isSkeleton: false,
-  hideFooterPipe: false
-};
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const defaultContext = {
-  leftNavProps: defaultProps,
+  leftNavProps: import_react_desc_prop_types.defaultProps,
   selectedItem: null,
   setSelectedItem: () => null,
   selectedParent: null,

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 { 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  hideFooterPipe: 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;AAAA,EACZ,gBAAgB;AAClB;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 React from 'react';\nimport type { MutableRefObject, RefObject } from 'react';\nimport { createContext } from 'react';\nimport type { DSLeftNavigationT } from './react-desc-prop-types.js';\nimport { defaultProps } 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 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;ACAA,YAAuB;ADEvB,mBAA8B;AAE9B,mCAA6B;AAiBtB,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/{configs → config}/index.js RENAMED Viewed

@@ -26,14 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var configs_exports = {};
-__export(configs_exports, {
-  default: () => configs_default,
+var config_exports = {};
+__export(config_exports, {
+  default: () => config_default,
   useLeftNavConfig: () => import_useLeftNavConfig2.useLeftNavConfig
 });
-module.exports = __toCommonJS(configs_exports);
+module.exports = __toCommonJS(config_exports);
 var React = __toESM(require("react"));
 var import_useLeftNavConfig = require("./useLeftNavConfig.js");
 var import_useLeftNavConfig2 = require("./useLeftNavConfig.js");
-var configs_default = import_useLeftNavConfig.useLeftNavConfig;
+var config_default = import_useLeftNavConfig.useLeftNavConfig;
 //# sourceMappingURL=index.js.map

package/dist/cjs/{configs → config}/index.js.map RENAMED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/configs/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useLeftNavConfig } from './useLeftNavConfig.js';\n\nexport { useLeftNavConfig } from './useLeftNavConfig.js';\nexport default useLeftNavConfig;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAiC;AAEjC,IAAAA,2BAAiC;AACjC,IAAO,kBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAiC;AAEjC,IAAAA,2BAAiC;AACjC,IAAO,iBAAQ;",
   "names": ["import_useLeftNavConfig"]
 }

package/dist/cjs/{configs → config}/useLeftNavConfig.js RENAMED Viewed

@@ -33,14 +33,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_react = __toESM(require("react"));
+var import_useSelectFirstBodyItem = require("../hooks/useSelectFirstBodyItem.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.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 propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_LeftNavigationContext.defaultProps);
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;
   const [selectedItem, setSelectedItem] = import_react.default.useState(null);
   const [selectedParent, setSelectedParent] = import_react.default.useState(null);

package/dist/cjs/config/useLeftNavConfig.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useLeftNavConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../react-desc-prop-types.js';\nimport useLeftNavItems from './useLeftNavItems.js';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';\n\nexport const useLeftNavConfig = (props: DSLeftNavigationT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSLeftNavigationT.InternalProps>(props, defaultProps);\n  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;\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,8BAA6C;AAC7C,mBAAkB;AAClB,oCAAuC;AAEvC,mCAA6B;AAC7B,6BAA4B;AAC5B,oCAAuC;AAEhC,MAAM,mBAAmB,CAAC,UAAmC;AAClE,QAAM,wBAAoB,sDAA8D,OAAO,yCAAY;AAC3G,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAMzE,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,iBAAkB,kBAAiB,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,WAAY,mBAAkB,UAAU;AAAA,EAC9C,GAAG,CAAC,UAAU,CAAC;AAEf,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,cAAe,eAAc,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 → config}/useLeftNavItems.js RENAMED Viewed

@@ -34,17 +34,16 @@ __export(useLeftNavItems_exports, {
 module.exports = __toCommonJS(useLeftNavItems_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_exported_related = require("../exported-related/index.js");
-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];
+var import_constants = require("../constants/index.js");
+const notFocuseableItems = [import_constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, import_constants.ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach((item) => {
     if (typeof item.type === "string" && item.dsId) {
       if (notFocuseableItems.includes(item.type)) return;
       callback(item.dsId);
-      if (item.type === import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
+      if (item.type === import_constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
         walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
-      if (item.type === import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
+      if (item.type === import_constants.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
         walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
     } else if (item.dsId) {
       if (!item.itemOpts?.focuseable) return;

package/dist/cjs/config/useLeftNavItems.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/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, FOOTER_DS_ID } from '../constants/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.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,uBAAyC;AAGzC,MAAM,qBAAqB,CAAC,4BAAW,yBAAyB,4BAAW,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,EAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,4BAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,4BAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,WAAW,KAAK,MAAM;AAEpB,UAAI,CAAC,KAAK,UAAU,WAAY;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,UAAW,QAAO,CAAC;AACxB,UAAM,aAAuD,CAAC,GAAG,SAAS;AAC1E,QAAI,eAAgB,YAAW,QAAQ,cAAc;AACrD,QAAI,WAAY,YAAW,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,SAAU,kBAAiB,QAAQ,IAAI,QAAI,wBAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/cjs/{configs → config}/useLeftNavSmoothExpand.js.map RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/configs/useLeftNavSmoothExpand.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useLeftNavSmoothExpand.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "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,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,wBAAwB,KAAK,GAAG,GAAG;AAAA,IAC3E,WAAW,SAAU,yBAAwB,IAAI;AAAA,EAEnD,GAAG,CAAC,QAAQ,CAAC;AAEb,eAAAA,QAAM;AAAA,IACJ,MAAM,MAAM;AACV,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACF;AAEA,IAAO,iCAAQ;",
   "names": ["React"]

package/dist/cjs/constants/{constants.js → index.js} RENAMED Viewed

@@ -28,11 +28,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  CHEVRON_BACK_DS_ID: () => CHEVRON_BACK_DS_ID,
   DSLeftNavigationName: () => DSLeftNavigationName,
   DSLeftNavigationSlots: () => DSLeftNavigationSlots,
+  FOOTER_DS_ID: () => FOOTER_DS_ID,
+  FOOTER_MENU_CLOSE_DS_ID: () => FOOTER_MENU_CLOSE_DS_ID,
+  ITEM_TYPES: () => ITEM_TYPES,
+  LABEL_OVERFLOW: () => LABEL_OVERFLOW,
   LEFT_NAVIGATION_DATA_TESTID: () => LEFT_NAVIGATION_DATA_TESTID,
   LEFT_NAVIGATION_REGION_FOCUSES: () => LEFT_NAVIGATION_REGION_FOCUSES,
-  LEFT_NAVIGATION_SLOTS: () => LEFT_NAVIGATION_SLOTS
+  LEFT_NAVIGATION_SLOTS: () => LEFT_NAVIGATION_SLOTS,
+  MAP_ITEMS_TO_SKELETON: () => MAP_ITEMS_TO_SKELETON,
+  outOfTheBoxTypes: () => outOfTheBoxTypes
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
@@ -149,4 +156,36 @@ const LEFT_NAVIGATION_DATA_TESTID = {
   LIST_ITEM_LABEL_ID_EXCEPTION: "leftnav-list-item-label"
 };
 const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;
-//# sourceMappingURL=constants.js.map
+const LABEL_OVERFLOW = {
+  WRAP: "wrap",
+  WRAP_ALL: "wrapAll",
+  TRUNCATE: "truncate"
+};
+const ITEM_TYPES = {
+  LEFT_NAV_ITEM_HEADER: "ds-left-nav-item-header",
+  LEFT_NAV_ITEM_LINK: "ds-left-nav-item-link",
+  LEFT_NAV_ITEM_SUBMENU: "ds-left-nav-item-submenu",
+  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: "ds-left-nav-item-controlled-drilldown",
+  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: "ds-left-nav-item-uncontrolled-drilldown",
+  LEFT_NAV_ITEM_SECTION: "ds-left-nav-item-section",
+  LEFT_NAV_ITEM_SEPARATOR: "ds-left-nav-item-separator",
+  LEFT_NAV_ITEM_SKELETON: "ds-left-nav-item-skeleton",
+  LEFT_NAV_ITEM_TEXT_LABEL: "ds-left-nav-item-text-label",
+  LEFT_NAV_ITEM_WITH_DATE: "ds-left-nav-item-with-date"
+};
+const outOfTheBoxTypes = Object.values(ITEM_TYPES);
+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";
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/{constants.js.map → index.js.map} RENAMED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/constants/constants.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSLeftNavigationName = 'DSLeftnavigation';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_REGION_FOCUSES = {\n  RESET: '',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_SLOTS = {\n  ALERTS_ICON_WRAPPER: 'alerts-icon',\n  AREAS_CONTAINER: 'areas-container',\n  ARROW_CONTAINER: 'arrow-container',\n  BODY_AREAS_CONTAINER: 'body-areas-container',\n  BODY_HEADER_AREA: 'body-header-area',\n  BODY_ITEMS_AREA: 'body-items-area',\n  BOTTOM_CONTAINER: 'bottom-container',\n  COLLAPSED_CONTAINER: 'collapsed-container',\n  EXCEPTIONS_ICON_WRAPPER: 'exceptions-icon',\n  FOOTER_ITEM: 'footer-item',\n  FOOTER_LABEL: 'footer-label',\n  FOOTER_MENU: 'footer-menu',\n  FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n  FOOTER_SEPARATOR: 'footer-separator',\n  ITEM: 'item',\n  ITEM_BORDER_BOTTOM: 'item-border-bottom',\n  ITEM_CHEVRON_BACK: 'item-chevron-back',\n  ITEM_DATE: 'item-date',\n  ITEM_LABEL: 'item-label',\n  ITEM_SEPARATOR: 'item-separator',\n  LEFT_CONTAINER: 'left-container',\n  LOADER_WRAPPER: 'loader-wrapper',\n  HEADER_AREA: 'header-area',\n  MESSAGES_ICON_WRAPPER: 'messages-icon',\n  NOTIFICATIONS_CONTAINER: 'notifications-container',\n  NOTIFICATIONS_ICON: 'notifications-icon',\n  RIGHT_CONTAINER: 'right-container',\n  ROOT: 'root',\n  SECTION_CONTAINER: 'section-container',\n  SECTION_LABEL: 'section-label',\n  SECTION_RIGHT_LABEL: 'section-right-label',\n  VERTICAL_SEPARATOR: 'vertical-separator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSLeftNavigationName, LEFT_NAVIGATION_SLOTS),\n  /* ********************************************************************************************************************************************\n   *    keeping old values around based on vinoth/guncha (forced) request to keep them stable\n   *      in the future, before removing/changing those values, please make sure to check with them\n   *      (and get written approval for future reference, verba volant, scripta manent).\n   * ********************************************************************************************************************************************\n   *                  https://jira.elliemae.io/browse/PUI-15589\n   ******************************************************************************************************************************************** */\n  ROOT: 'leftnav-component',\n  HEADER_AREA: 'leftnav-header-area',\n  AREAS_CONTAINER: 'ds-leftnavigation-areas-container',\n\n  COLLAPSED_CONTAINER: 'leftnav-leftcomponent',\n\n  BODY_AREAS_CONTAINER: 'ds-leftnavigation-body-areas-container',\n  BODY_HEADER_AREA: 'leftnav-body-header-area',\n  BODY_ITEMS_AREA: 'leftnav-body-items-area',\n  BOTTOM_CONTAINER: 'ds-leftnavigation-bottom-container',\n\n  ITEM: 'leftnav-item-container',\n  ITEM_BORDER_BOTTOM: 'ds-leftnavigation-item-border-bottom',\n  ITEM_LABEL: 'leftnav-itemlabel',\n  ITEM_DATE: 'leftnav-list-item-date',\n  ITEM_SEPARATOR: 'leftnav-separator-subitem',\n  ITEM_CHEVRON_BACK: 'leftnav-leftcomponent-chevron',\n\n  // repeated with \"COLLAPSED_CONTAINER\" above, APP QA team doesn't approve us changing this.\n  //    IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n  LEFT_CONTAINER: 'leftnav-leftcomponent',\n  RIGHT_CONTAINER: 'leftnav-right-component',\n  ARROW_CONTAINER: 'ds-leftnavigation-arrow-container',\n\n  SECTION_CONTAINER: 'ds-leftnavigation-section-container',\n  SECTION_LABEL: 'leftnav-section-item-label',\n  SECTION_RIGHT_LABEL: 'ds-leftnavigation-section-right-label',\n\n  NOTIFICATIONS_CONTAINER: 'ds-leftnavigation-notifications-container',\n\n  EXCEPTIONS_ICON_WRAPPER: 'left-nav-exceptions-icon',\n  ALERTS_ICON_WRAPPER: 'left-nav-alerts-icon',\n  MESSAGES_ICON_WRAPPER: 'left-nav-messages-icon',\n\n  FOOTER_MENU: 'leftnav-container',\n  FOOTER_SEPARATOR: 'ds-leftnavigation-footer-separator',\n  // repeated with \"ITEM\" above, APP QA team doesn't approve us changing this.\n  //    IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n  FOOTER_ITEM: 'leftnav-item-container',\n\n  VERTICAL_SEPARATOR: 'ds-leftnavigation-vertical-separator',\n\n  // Things that are not slots (why?) and still need data-testids (that needs to not change else APP QA team can't work)\n  NOTIFICATION_ICON: 'left-nav-notifications-icon',\n  ALERTS_ICON: 'left-nav-alerts-icon',\n  EXCEPTIONS_ICON: 'left-nav-exceptions-icon',\n  MESSAGES_ICON: 'left-nav-messages-icon',\n\n  // I don't know if there was already a slot or not because the naming convention is confusing and we can't change it.\n  //   so I am re-defining those to be sure.\n  //  (usually this comes from previous implementation \"slot\" being a \"nested\" slot that inherits the slot from the child)\n  DROPDOWN_MENU_TRIGGER_WRAPPER: 'dropdown-menu-trigger-wrapper', // used to be dsDropdownmenuRoot slot at time of writing this comment\n\n  NOTIFICATIONS_ICON: 'left-nav-notifications-icon', // used to be dsIconRoot slot at time of writing this comment\n  LEFT_COMPONENT_CHEVRON: 'leftnav-leftcomponent-chevron', // used to be dsButtonRoot slot at time of writing this comment\n  // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n  //   WE CAN'T FIX THE TECH DEBT\n  FOOTER_BTN: 'leftnav-footer-btn', // used to be [ \"dsIconRoot\", \"dsButtonRoot\" ] slots at time of writing this comment\n  // VERY SPECIAL CASE 2\n  //   THE SLOT IS TECHNICALLY dsLeftnavigationItemLabel\n  //      which is LEFT_NAVIGATION_SLOTS.ITEM_LABEL\n  //   BUT the data-test-id is either \"leftnav-itemlabel\" or \"leftnav-list-item-label\"\n  //      APPARENTLY (we are not sure) based on it's \"type\"\n  //      \"leftnav-list-item-label\" for:\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN\n  //   WE CAN'T FIX THE TECH DEBT\n  //    IF we somehow need to change this, address them to guncha/vinoth.\n  LIST_ITEM_LABEL_ID_EXCEPTION: 'leftnav-list-item-label',\n};\n\nexport const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,iCAAiC;AAAA,EAC5C,OAAO;AACT;AAGO,MAAM,wBAAwB;AAAA,EACnC,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AACtB;AAGO,MAAM,8BAA8B;AAAA,EACzC,OAAG,0CAAwB,sBAAsB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtE,MAAM;AAAA,EACN,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,qBAAqB;AAAA,EAErB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAElB,MAAM;AAAA,EACN,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,mBAAmB;AAAA;AAAA;AAAA,EAInB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EAEjB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EAErB,yBAAyB;AAAA,EAEzB,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EAEvB,aAAa;AAAA,EACb,kBAAkB;AAAA;AAAA;AAAA,EAGlB,aAAa;AAAA,EAEb,oBAAoB;AAAA;AAAA,EAGpB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,+BAA+B;AAAA;AAAA,EAE/B,oBAAoB;AAAA;AAAA,EACpB,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAGxB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaZ,8BAA8B;AAChC;AAEO,MAAM,wBAAwB;",
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSLeftNavigationName = 'DSLeftnavigation';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_REGION_FOCUSES = {\n  RESET: '',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_SLOTS = {\n  ALERTS_ICON_WRAPPER: 'alerts-icon',\n  AREAS_CONTAINER: 'areas-container',\n  ARROW_CONTAINER: 'arrow-container',\n  BODY_AREAS_CONTAINER: 'body-areas-container',\n  BODY_HEADER_AREA: 'body-header-area',\n  BODY_ITEMS_AREA: 'body-items-area',\n  BOTTOM_CONTAINER: 'bottom-container',\n  COLLAPSED_CONTAINER: 'collapsed-container',\n  EXCEPTIONS_ICON_WRAPPER: 'exceptions-icon',\n  FOOTER_ITEM: 'footer-item',\n  FOOTER_LABEL: 'footer-label',\n  FOOTER_MENU: 'footer-menu',\n  FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n  FOOTER_SEPARATOR: 'footer-separator',\n  ITEM: 'item',\n  ITEM_BORDER_BOTTOM: 'item-border-bottom',\n  ITEM_CHEVRON_BACK: 'item-chevron-back',\n  ITEM_DATE: 'item-date',\n  ITEM_LABEL: 'item-label',\n  ITEM_SEPARATOR: 'item-separator',\n  LEFT_CONTAINER: 'left-container',\n  LOADER_WRAPPER: 'loader-wrapper',\n  HEADER_AREA: 'header-area',\n  MESSAGES_ICON_WRAPPER: 'messages-icon',\n  NOTIFICATIONS_CONTAINER: 'notifications-container',\n  NOTIFICATIONS_ICON: 'notifications-icon',\n  RIGHT_CONTAINER: 'right-container',\n  ROOT: 'root',\n  SECTION_CONTAINER: 'section-container',\n  SECTION_LABEL: 'section-label',\n  SECTION_RIGHT_LABEL: 'section-right-label',\n  VERTICAL_SEPARATOR: 'vertical-separator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSLeftNavigationName, LEFT_NAVIGATION_SLOTS),\n  /* ********************************************************************************************************************************************\n   *    keeping old values around based on vinoth/guncha (forced) request to keep them stable\n   *      in the future, before removing/changing those values, please make sure to check with them\n   *      (and get written approval for future reference, verba volant, scripta manent).\n   * ********************************************************************************************************************************************\n   *                  https://jira.elliemae.io/browse/PUI-15589\n   ******************************************************************************************************************************************** */\n  ROOT: 'leftnav-component',\n  HEADER_AREA: 'leftnav-header-area',\n  AREAS_CONTAINER: 'ds-leftnavigation-areas-container',\n\n  COLLAPSED_CONTAINER: 'leftnav-leftcomponent',\n\n  BODY_AREAS_CONTAINER: 'ds-leftnavigation-body-areas-container',\n  BODY_HEADER_AREA: 'leftnav-body-header-area',\n  BODY_ITEMS_AREA: 'leftnav-body-items-area',\n  BOTTOM_CONTAINER: 'ds-leftnavigation-bottom-container',\n\n  ITEM: 'leftnav-item-container',\n  ITEM_BORDER_BOTTOM: 'ds-leftnavigation-item-border-bottom',\n  ITEM_LABEL: 'leftnav-itemlabel',\n  ITEM_DATE: 'leftnav-list-item-date',\n  ITEM_SEPARATOR: 'leftnav-separator-subitem',\n  ITEM_CHEVRON_BACK: 'leftnav-leftcomponent-chevron',\n\n  // repeated with \"COLLAPSED_CONTAINER\" above, APP QA team doesn't approve us changing this.\n  //    IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n  LEFT_CONTAINER: 'leftnav-leftcomponent',\n  RIGHT_CONTAINER: 'leftnav-right-component',\n  ARROW_CONTAINER: 'ds-leftnavigation-arrow-container',\n\n  SECTION_CONTAINER: 'ds-leftnavigation-section-container',\n  SECTION_LABEL: 'leftnav-section-item-label',\n  SECTION_RIGHT_LABEL: 'ds-leftnavigation-section-right-label',\n\n  NOTIFICATIONS_CONTAINER: 'ds-leftnavigation-notifications-container',\n\n  EXCEPTIONS_ICON_WRAPPER: 'left-nav-exceptions-icon',\n  ALERTS_ICON_WRAPPER: 'left-nav-alerts-icon',\n  MESSAGES_ICON_WRAPPER: 'left-nav-messages-icon',\n\n  FOOTER_MENU: 'leftnav-container',\n  FOOTER_SEPARATOR: 'ds-leftnavigation-footer-separator',\n  // repeated with \"ITEM\" above, APP QA team doesn't approve us changing this.\n  //    IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n  FOOTER_ITEM: 'leftnav-item-container',\n\n  VERTICAL_SEPARATOR: 'ds-leftnavigation-vertical-separator',\n\n  // Things that are not slots (why?) and still need data-testids (that needs to not change else APP QA team can't work)\n  NOTIFICATION_ICON: 'left-nav-notifications-icon',\n  ALERTS_ICON: 'left-nav-alerts-icon',\n  EXCEPTIONS_ICON: 'left-nav-exceptions-icon',\n  MESSAGES_ICON: 'left-nav-messages-icon',\n\n  // I don't know if there was already a slot or not because the naming convention is confusing and we can't change it.\n  //   so I am re-defining those to be sure.\n  //  (usually this comes from previous implementation \"slot\" being a \"nested\" slot that inherits the slot from the child)\n  DROPDOWN_MENU_TRIGGER_WRAPPER: 'dropdown-menu-trigger-wrapper', // used to be dsDropdownmenuRoot slot at time of writing this comment\n\n  NOTIFICATIONS_ICON: 'left-nav-notifications-icon', // used to be dsIconRoot slot at time of writing this comment\n  LEFT_COMPONENT_CHEVRON: 'leftnav-leftcomponent-chevron', // used to be dsButtonRoot slot at time of writing this comment\n  // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n  //   WE CAN'T FIX THE TECH DEBT\n  FOOTER_BTN: 'leftnav-footer-btn', // used to be [ \"dsIconRoot\", \"dsButtonRoot\" ] slots at time of writing this comment\n  // VERY SPECIAL CASE 2\n  //   THE SLOT IS TECHNICALLY dsLeftnavigationItemLabel\n  //      which is LEFT_NAVIGATION_SLOTS.ITEM_LABEL\n  //   BUT the data-test-id is either \"leftnav-itemlabel\" or \"leftnav-list-item-label\"\n  //      APPARENTLY (we are not sure) based on it's \"type\"\n  //      \"leftnav-list-item-label\" for:\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN\n  //         - ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN\n  //   WE CAN'T FIX THE TECH DEBT\n  //    IF we somehow need to change this, address them to guncha/vinoth.\n  LIST_ITEM_LABEL_ID_EXCEPTION: 'leftnav-list-item-label',\n};\n\nexport const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;\n\n/* ********************************************************************************************************************************************\n *    Specific left-nav constants. Those are exported to third parties so they can use them in their code.\n ******************************************************************************************************************************************** */\n\nexport 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 outOfTheBoxTypes = Object.values(ITEM_TYPES);\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": "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",
   "names": []
 }

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

@@ -33,9 +33,9 @@ __export(ItemRenderer_exports, {
 module.exports = __toCommonJS(ItemRenderer_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_LeftNavigationContext = require("../../LeftNavigationContext.js");
-var import_constants = require("../../constants/constants.js");
+var import_constants = require("../../constants/index.js");
 var import_hooks = require("../../hooks/index.js");
 var import_styled = require("./styled.js");
 var import_usePropsWithDefaults = require("./usePropsWithDefaults.js");
@@ -59,6 +59,7 @@ const ItemRenderer = (props) => {
   } = propsWithDefault;
   const ctx = (0, import_react.useContext)(import_LeftNavigationContext.LeftNavContext);
   const {
+    leftNavProps,
     leftNavProps: { onItemClick, openedItem },
     expandedForAnimation,
     selectedParent,
@@ -67,6 +68,8 @@ const ItemRenderer = (props) => {
     setFocusedItem,
     visibleItemsRefs
   } = ctx;
+  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
   const opened = dsId === openedItem;
   const handleOnClick = (0, import_react.useCallback)(
     (e) => {
@@ -118,10 +121,14 @@ const ItemRenderer = (props) => {
         "data-type": item.type,
         "aria-label": ariaLabel,
         "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: [
           !expandedForAnimation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_styled.StyledCollapsedContainer,
             {
+              getOwnerProps,
+              getOwnerPropsArguments,
               justifyContent: "center",
               "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.COLLAPSED_CONTAINER,
               children: CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx })
@@ -132,7 +139,9 @@ const ItemRenderer = (props) => {
             {
               opened,
               borderBottomMr,
-              "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM
+              "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM,
+              getOwnerProps,
+              getOwnerPropsArguments
             }
           )
         ]

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, { useCallback, useContext, useMemo } from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledBorderBottom, StyledCollapsedContainer, StyledItem } from './styled.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.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        innerRef={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        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        data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer\n            justifyContent=\"center\"\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.COLLAPSED_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n          >\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && (\n          <StyledBorderBottom\n            opened={opened}\n            borderBottomMr={borderBottomMr}\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM} // https://jira.elliemae.io/browse/PUI-15589\n          />\n        )}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEnB;AApEJ,mBAAwD;AACxD,mCAA+B;AAC/B,uBAA4C;AAC5C,mBAAsC;AAEtC,oBAAyE;AACzE,kCAAqC;AAE9B,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,QAAS,SAAQ;AACrB,UAAI,YAAa,aAAY,MAAM,CAAC;AACpC,UAAI,WAAY,iBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,WAAY,gBAAe,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,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG,MAAM;AAAA,QAC7C;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,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,QACZ,eAAa,6CAA4B;AAAA,QAExC;AAAA,WAAC,uBACA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,eAAa,6CAA4B;AAAA,cAExC,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU;AAAA;AAAA,UACnE,IAEA;AAAA,UAED,mBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAa,6CAA4B;AAAA;AAAA,UAC3C;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC;AAAA,KACH;AAEJ;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledBorderBottom, StyledCollapsedContainer, StyledItem } from './styled.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.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,\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\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        innerRef={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        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        data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            justifyContent=\"center\"\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.COLLAPSED_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n          >\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && (\n          <StyledBorderBottom\n            opened={opened}\n            borderBottomMr={borderBottomMr}\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM} // https://jira.elliemae.io/browse/PUI-15589\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        )}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("../../constants/constants.js");
+var import_constants = require("../../constants/index.js");
 const borderOutside = (color, weight = 2) => `&:before {
   content: '';
   position: absolute;

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, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.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: LEFT_NAVIGATION_SLOTS.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: LEFT_NAVIGATION_SLOTS.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.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, LEFT_NAVIGATION_SLOTS } 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: LEFT_NAVIGATION_SLOTS.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: LEFT_NAVIGATION_SLOTS.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.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,MAAM,YAAY,KAAK;AAAA;AAAA;AAInC,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC,WAAY,QAAO;AACxB,MAAI,YAAY,CAAC,OAAQ,QAAO,MAAM,OAAO,MAAM,GAAG;AACtD,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC,WAAY,QAAO;AACxB,MAAI,YAAY,CAAC,OAAQ,QAAO,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,MAAO;AAAA,gBAC/D,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,gBAE1B,iBAAiB;AAAA;AAAA,IAE7B,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA,kBAGrF,sBAAsB;AAAA;AAAA;AAAA;AAAA,kBAItB,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,OAAQ;AAAA;AAAA;AAAA,IAGzF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKvC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAItD,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,MAAO;AAAA,kBACzC,CAAC,EAAE,eAAe,MAAM,cAAc;AAAA;AAAA;AAAA,uBAGjC,CAAC,EAAE,eAAe,MAAM,cAAc,MAAM,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": ["Grid"]
 }

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

@@ -34,10 +34,12 @@ __export(Notifications_exports, {
 module.exports = __toCommonJS(Notifications_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
 var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("../../constants/constants.js");
+var import_constants = require("../../constants/index.js");
+var import_LeftNavigationContext = require("../../LeftNavigationContext.js");
 const StyledIconContainer = (0, import_ds_system.styled)("div", {
   name: import_constants.DSLeftNavigationName,
   slot: import_constants.LEFT_NAVIGATION_SLOTS.NOTIFICATIONS_CONTAINER
@@ -66,50 +68,66 @@ const Notifications = ({
   exceptions = false,
   alerts = false,
   messages = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-  StyledIconContainer,
-  {
-    "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_CONTAINER,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        StyledInternalNotifications,
-        {
-          size: "m",
-          color: ["brand-primary", "800"],
-          "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_ICON
-        }
-      ),
-      (exceptions || alerts || messages) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.default, { cols: ["1fr", "1fr", "1fr"], gutter: "xxxs", mt: "2px", children: [
+}) => {
+  const ctx = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
+  const { leftNavProps } = ctx;
+  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledIconContainer,
+    {
+      "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_CONTAINER,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledExceptionsSmallFillWrapper,
+          StyledInternalNotifications,
           {
-            width: "6px",
-            height: "6px",
-            "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.EXCEPTIONS_ICON_WRAPPER,
-            children: exceptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ExceptionsSmallFill, { width: "6px", height: "6px", color: ["warning", "900"] })
+            size: "m",
+            color: ["brand-primary", "800"],
+            "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_ICON,
+            getOwnerProps,
+            getOwnerPropsArguments
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledAlertsSmallFillWrapper,
-          {
-            width: "6px",
-            height: "6px",
-            "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ALERTS_ICON_WRAPPER,
-            children: alerts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, { width: "6px", height: "6px", color: ["danger", "900"] })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledMessagesSmallFillWrapper,
-          {
-            width: "6px",
-            height: "6px",
-            "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.MESSAGES_ICON_WRAPPER,
-            children: messages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MessagesSmallFill, { width: "6px", height: "6px", color: ["success", "900"] })
-          }
-        )
-      ] })
-    ]
-  }
-);
+        (exceptions || alerts || messages) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.default, { cols: ["1fr", "1fr", "1fr"], gutter: "xxxs", mt: "2px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledExceptionsSmallFillWrapper,
+            {
+              width: "6px",
+              height: "6px",
+              "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.EXCEPTIONS_ICON_WRAPPER,
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: exceptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ExceptionsSmallFill, { width: "6px", height: "6px", color: ["warning", "900"] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledAlertsSmallFillWrapper,
+            {
+              width: "6px",
+              height: "6px",
+              "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ALERTS_ICON_WRAPPER,
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: alerts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, { width: "6px", height: "6px", color: ["danger", "900"] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledMessagesSmallFillWrapper,
+            {
+              width: "6px",
+              height: "6px",
+              "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.MESSAGES_ICON_WRAPPER,
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: messages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MessagesSmallFill, { width: "6px", height: "6px", color: ["success", "900"] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var Notifications_default = Notifications;
 //# sourceMappingURL=index.js.map