@elliemae/ds-left-navigation 3.60.0-next.4 → 3.60.0-next.41

package/dist/cjs/outOfTheBox/index.js

@@ -29,24 +29,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var outOfTheBox_exports = {};
 __export(outOfTheBox_exports, {
-  outOfTheBoxComponents: () => outOfTheBoxComponents,
-  outOfTheBoxTypes: () => outOfTheBoxTypes
+  outOfTheBoxComponents: () => outOfTheBoxComponents
 });
 module.exports = __toCommonJS(outOfTheBox_exports);
 var React = __toESM(require("react"));
-var import_exported_related = require("../exported-related/index.js");
+var import_constants = require("../constants/index.js");
 var import_ItemControlledDrilldown = require("./ItemControlledDrilldown/index.js");
-var import_ItemUncontrolledDrilldown = require("./ItemUncontrolledDrilldown/index.js");
 var import_ItemHeader = require("./ItemHeader/index.js");
 var import_ItemLink = require("./ItemLink/index.js");
 var import_ItemSection = require("./ItemSection/index.js");
 var import_ItemSeparator = require("./ItemSeparator/index.js");
+var import_ItemSkeleton = require("./ItemSkeleton/index.js");
 var import_ItemSubmenu = require("./ItemSubmenu/index.js");
 var import_ItemTextLabel = require("./ItemTextLabel/index.js");
+var import_ItemUncontrolledDrilldown = require("./ItemUncontrolledDrilldown/index.js");
 var import_ItemWithDate = require("./ItemWithDate/index.js");
-var import_ItemSkeleton = require("./ItemSkeleton/index.js");
 __reExport(outOfTheBox_exports, require("./ItemControlledDrilldown/index.js"), module.exports);
-__reExport(outOfTheBox_exports, require("./ItemUncontrolledDrilldown/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemHeader/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemLink/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemSection/index.js"), module.exports);
@@ -54,8 +52,8 @@ __reExport(outOfTheBox_exports, require("./ItemSeparator/index.js"), module.expo
 __reExport(outOfTheBox_exports, require("./ItemSkeleton/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemSubmenu/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemTextLabel/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemUncontrolledDrilldown/index.js"), module.exports);
 __reExport(outOfTheBox_exports, require("./ItemWithDate/index.js"), module.exports);
-const outOfTheBoxTypes = Object.values(import_exported_related.ITEM_TYPES);
 const {
   LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,
   LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,
@@ -67,7 +65,7 @@ const {
   LEFT_NAV_ITEM_SUBMENU,
   LEFT_NAV_ITEM_TEXT_LABEL,
   LEFT_NAV_ITEM_WITH_DATE
-} = import_exported_related.ITEM_TYPES;
+} = import_constants.ITEM_TYPES;
 const outOfTheBoxComponents = {
   [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: import_ItemControlledDrilldown.ItemControlledDrilldown,
   [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: import_ItemUncontrolledDrilldown.ItemUncontrolledDrilldown,

package/dist/cjs/outOfTheBox/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/outOfTheBox/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';\nimport { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';\nimport { ItemHeader } from './ItemHeader/index.js';\nimport { ItemLink } from './ItemLink/index.js';\nimport { ItemSection } from './ItemSection/index.js';\nimport { ItemSeparator } from './ItemSeparator/index.js';\nimport { ItemSubmenu } from './ItemSubmenu/index.js';\nimport { ItemTextLabel } from './ItemTextLabel/index.js';\nimport { ItemWithDate } from './ItemWithDate/index.js';\nimport { ItemSkeleton } from './ItemSkeleton/index.js';\n\nexport * from './ItemControlledDrilldown/index.js';\nexport * from './ItemUncontrolledDrilldown/index.js';\nexport * from './ItemHeader/index.js';\nexport * from './ItemLink/index.js';\nexport * from './ItemSection/index.js';\nexport * from './ItemSeparator/index.js';\nexport * from './ItemSkeleton/index.js';\nexport * from './ItemSubmenu/index.js';\nexport * from './ItemTextLabel/index.js';\nexport * from './ItemWithDate/index.js';\n\nexport const outOfTheBoxTypes = Object.values(ITEM_TYPES);\nconst {\n  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_HEADER,\n  LEFT_NAV_ITEM_LINK,\n  LEFT_NAV_ITEM_SECTION,\n  LEFT_NAV_ITEM_SEPARATOR,\n  LEFT_NAV_ITEM_SKELETON,\n  LEFT_NAV_ITEM_SUBMENU,\n  LEFT_NAV_ITEM_TEXT_LABEL,\n  LEFT_NAV_ITEM_WITH_DATE,\n} = ITEM_TYPES;\n\nexport const outOfTheBoxComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: ItemControlledDrilldown,\n  [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: ItemUncontrolledDrilldown,\n  [LEFT_NAV_ITEM_HEADER]: ItemHeader,\n  [LEFT_NAV_ITEM_LINK]: ItemLink,\n  [LEFT_NAV_ITEM_SECTION]: ItemSection,\n  [LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [LEFT_NAV_ITEM_SKELETON]: ItemSkeleton,\n  [LEFT_NAV_ITEM_SUBMENU]: ItemSubmenu,\n  [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n  [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA2B;AAC3B,qCAAwC;AACxC,uCAA0C;AAC1C,wBAA2B;AAC3B,sBAAyB;AACzB,yBAA4B;AAC5B,2BAA8B;AAC9B,yBAA4B;AAC5B,2BAA8B;AAC9B,0BAA6B;AAC7B,0BAA6B;AAE7B,gCAAc,+CAdd;AAeA,gCAAc,iDAfd;AAgBA,gCAAc,kCAhBd;AAiBA,gCAAc,gCAjBd;AAkBA,gCAAc,mCAlBd;AAmBA,gCAAc,qCAnBd;AAoBA,gCAAc,oCApBd;AAqBA,gCAAc,mCArBd;AAsBA,gCAAc,qCAtBd;AAuBA,gCAAc,oCAvBd;AAyBO,MAAM,mBAAmB,OAAO,OAAO,kCAAU;AACxD,MAAM;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,IAAI;AAEG,MAAM,wBAA+F;AAAA,EAC1G,CAAC,kCAAkC,GAAG;AAAA,EACtC,CAAC,oCAAoC,GAAG;AAAA,EACxC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,kBAAkB,GAAG;AAAA,EACtB,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,sBAAsB,GAAG;AAAA,EAC1B,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,uBAAuB,GAAG;AAC7B;",
+  "sourcesContent": ["import type React from 'react';\nimport { ITEM_TYPES } from '../constants/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';\nimport { ItemHeader } from './ItemHeader/index.js';\nimport { ItemLink } from './ItemLink/index.js';\nimport { ItemSection } from './ItemSection/index.js';\nimport { ItemSeparator } from './ItemSeparator/index.js';\nimport { ItemSkeleton } from './ItemSkeleton/index.js';\nimport { ItemSubmenu } from './ItemSubmenu/index.js';\nimport { ItemTextLabel } from './ItemTextLabel/index.js';\nimport { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';\nimport { ItemWithDate } from './ItemWithDate/index.js';\n\nexport * from './ItemControlledDrilldown/index.js';\nexport * from './ItemHeader/index.js';\nexport * from './ItemLink/index.js';\nexport * from './ItemSection/index.js';\nexport * from './ItemSeparator/index.js';\nexport * from './ItemSkeleton/index.js';\nexport * from './ItemSubmenu/index.js';\nexport * from './ItemTextLabel/index.js';\nexport * from './ItemUncontrolledDrilldown/index.js';\nexport * from './ItemWithDate/index.js';\n\nconst {\n  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_HEADER,\n  LEFT_NAV_ITEM_LINK,\n  LEFT_NAV_ITEM_SECTION,\n  LEFT_NAV_ITEM_SEPARATOR,\n  LEFT_NAV_ITEM_SKELETON,\n  LEFT_NAV_ITEM_SUBMENU,\n  LEFT_NAV_ITEM_TEXT_LABEL,\n  LEFT_NAV_ITEM_WITH_DATE,\n} = ITEM_TYPES;\n\nexport const outOfTheBoxComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: ItemControlledDrilldown,\n  [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: ItemUncontrolledDrilldown,\n  [LEFT_NAV_ITEM_HEADER]: ItemHeader,\n  [LEFT_NAV_ITEM_LINK]: ItemLink,\n  [LEFT_NAV_ITEM_SECTION]: ItemSection,\n  [LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [LEFT_NAV_ITEM_SKELETON]: ItemSkeleton,\n  [LEFT_NAV_ITEM_SUBMENU]: ItemSubmenu,\n  [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n  [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAE3B,qCAAwC;AACxC,wBAA2B;AAC3B,sBAAyB;AACzB,yBAA4B;AAC5B,2BAA8B;AAC9B,0BAA6B;AAC7B,yBAA4B;AAC5B,2BAA8B;AAC9B,uCAA0C;AAC1C,0BAA6B;AAE7B,gCAAc,+CAdd;AAeA,gCAAc,kCAfd;AAgBA,gCAAc,gCAhBd;AAiBA,gCAAc,mCAjBd;AAkBA,gCAAc,qCAlBd;AAmBA,gCAAc,oCAnBd;AAoBA,gCAAc,mCApBd;AAqBA,gCAAc,qCArBd;AAsBA,gCAAc,iDAtBd;AAuBA,gCAAc,oCAvBd;AAyBA,MAAM;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,IAAI;AAEG,MAAM,wBAA+F;AAAA,EAC1G,CAAC,kCAAkC,GAAG;AAAA,EACtC,CAAC,oCAAoC,GAAG;AAAA,EACxC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,kBAAkB,GAAG;AAAA,EACtB,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,sBAAsB,GAAG;AAAA,EAC1B,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,uBAAuB,GAAG;AAC7B;",
   "names": []
 }

package/dist/cjs/outOfTheBox/styled.js

@@ -46,7 +46,7 @@ var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_constants = require("../constants/constants.js");
+var import_constants = require("../constants/index.js");
 const StyledLabel = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_constants.DSLeftNavigationName,
   slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_LABEL

package/dist/cjs/outOfTheBox/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n  labelBold?: boolean;\n  labelOverflow?: string;\n  labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n  font-size: 1rem; // 13px -> 13/13 = 1rem;\n  font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n  color: ${({ labelColor, theme }) =>\n    labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n  line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem; // 16px -> 13/16 = 0.8125\n    line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n  font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n    line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n  font-size: 1rem; // 13px -> 13/13 = 1rem\n  color: ${(props) => props.theme.colors.neutral[700]};\n  margin-left: ${(props) => props.theme.space.xxs};\n  line-height: 1rem; // 13px -> 13/13 = 1rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n    line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n  }\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n  margin: 0 ${(props) => props.theme.space.xxs};\n  width: 1px;\n  height: 13px;\n  background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n  font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;\n  line-height: 1rem; // 13px -> 13/13 = 1rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n    line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n  }\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n  grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n  labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n  font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  color: ${(props) => props.theme.colors.neutral[800]};\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n  padding: 0;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n  labelBold?: boolean;\n  labelOverflow?: string;\n  labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n  font-size: 1rem; // 13px -> 13/13 = 1rem;\n  font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n  color: ${({ labelColor, theme }) =>\n    labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n  line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem; // 16px -> 13/16 = 0.8125\n    line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n  font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n    line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n  font-size: 1rem; // 13px -> 13/13 = 1rem\n  color: ${(props) => props.theme.colors.neutral[700]};\n  margin-left: ${(props) => props.theme.space.xxs};\n  line-height: 1rem; // 13px -> 13/13 = 1rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n    line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n  }\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n  margin: 0 ${(props) => props.theme.space.xxs};\n  width: 1px;\n  height: 13px;\n  background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n  font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;\n  line-height: 1rem; // 13px -> 13/13 = 1rem\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n    line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n  }\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n  grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n  labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n  font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n  color: ${(props) => props.theme.colors.neutral[800]};\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.875rem; // 14px -> 14/16 = 0.875rem\n  }\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n  padding: 0;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/LeftNavContent/index.js

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 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_ItemSkeleton = require("../../outOfTheBox/ItemSkeleton/index.js");
 var import_LeftNavFooterItem = require("../LeftNavFooterItem/index.js");
 var import_LeftNavLoading = require("../LeftNavLoading/index.js");
@@ -44,10 +44,14 @@ var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem.js");
 var import_styled = require("./styled.js");
 const leftNavScreenReaderInstructions = "Left Navigation. You can navigate through the items using the Up/Down arrows. To expand or select an item, use the Enter/Return or Space keys. Expandable items can also be opened/closed with the Right/Left arrows. The Home and End keys will take you to the first and last item respectively.";
 const LeftNavInnerContent = () => {
+  const ctx = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
   const {
+    leftNavProps,
     leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },
     selectedItem
-  } = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
+  } = ctx;
+  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styled.StyledLeftNavHeaderArea,
@@ -55,7 +59,16 @@ const LeftNavInnerContent = () => {
         selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
         "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA,
         role: "group",
-        children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSkeleton.ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ItemSkeleton.ItemSkeleton,
+          {
+            ctx,
+            item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } },
+            hasBorderBottom: true
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           " ",
           HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: HeaderComponent }) : null
         ] })
@@ -68,6 +81,8 @@ const LeftNavInnerContent = () => {
         rows: ["auto", "1fr"],
         role: "group",
         "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             import_styled.StyledLeftNavBodyHeaderArea,
@@ -76,10 +91,13 @@ const LeftNavInnerContent = () => {
               role: "group",
               isSkeleton,
               "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: [
                 isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_ItemSkeleton.ItemSkeleton,
                   {
+                    ctx,
                     item: {
                       dsId: "body-header-skeleton",
                       itemOpts: {
@@ -100,9 +118,12 @@ const LeftNavInnerContent = () => {
               role: "group",
               isSkeleton,
               "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_ItemSkeleton.ItemSkeleton,
                 {
+                  ctx,
                   item: {
                     dsId: "action-items-skeleton",
                     itemOpts: {

package/dist/cjs/parts/LeftNavContent/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n  StyledLeftNavAreasContainer,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavHeaderArea,\n} from './styled.js';\nconst leftNavScreenReaderInstructions =\n  'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n  'To expand or select an item, use the Enter/Return or Space keys. ' +\n  'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n  'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n  const {\n    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n    selectedItem,\n  } = React.useContext(LeftNavContext);\n  return (\n    <>\n      <StyledLeftNavHeaderArea\n        selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n        role=\"group\"\n      >\n        {isSkeleton ? (\n          <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n        ) : (\n          <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n        )}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer\n        cols={['1fr']}\n        rows={['auto', '1fr']}\n        role=\"group\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        <StyledLeftNavBodyHeaderArea\n          selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              item={{\n                dsId: 'body-header-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'item',\n                },\n              }}\n            />\n          ) : null}\n          {!isSkeleton && BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n        </StyledLeftNavBodyHeaderArea>\n        <StyledLeftNavBodyItemsArea\n          selected={!withoutBodyShadow && openedItem !== null}\n          tabIndex={-1}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              item={{\n                dsId: 'action-items-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'subitem',\n                },\n              }}\n            />\n          ) : (\n            <>\n              {items.map((item) => (\n                <OutOfTheBoxMapItem item={item} key={item.dsId} />\n              ))}\n            </>\n          )}\n        </StyledLeftNavBodyItemsArea>\n      </StyledLeftNavBodyAreasContainer>\n    </>\n  );\n};\n\n// original props from previous dev\nconst LeftNavContent: React.ComponentType = () => {\n  const {\n    expandedForAnimation,\n    leftNavProps: {\n      expanded,\n      expandedWidth,\n      FooterLabelComponent,\n      footerLabel,\n      onFooterExpand,\n      onFooterClose,\n      loading,\n    },\n    leftNavProps,\n  } = React.useContext(LeftNavContext);\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  const globalProps = useGetGlobalAttributes(leftNavProps);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      aria-label={leftNavScreenReaderInstructions}\n      data-testid={LEFT_NAVIGATION_DATA_TESTID.ROOT} // https://jira.elliemae.io/browse/PUI-15589\n      {...globalProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n        cols={['1fr']}\n        role=\"menu\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <LeftNavFooterItem\n          footerLabel={footerLabel}\n          FooterLabelComponent={FooterLabelComponent}\n          onFooterExpand={onFooterExpand}\n          onFooterClose={onFooterClose}\n        />\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n  StyledLeftNavAreasContainer,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavHeaderArea,\n} from './styled.js';\nconst leftNavScreenReaderInstructions =\n  'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n  'To expand or select an item, use the Enter/Return or Space keys. ' +\n  'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n  'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n  const ctx = React.useContext(LeftNavContext);\n  const {\n    leftNavProps,\n    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n    selectedItem,\n  } = ctx;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <>\n      <StyledLeftNavHeaderArea\n        selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n        role=\"group\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {isSkeleton ? (\n          <ItemSkeleton\n            ctx={ctx}\n            item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }}\n            hasBorderBottom\n          />\n        ) : (\n          <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n        )}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer\n        cols={['1fr']}\n        rows={['auto', '1fr']}\n        role=\"group\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledLeftNavBodyHeaderArea\n          selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              ctx={ctx}\n              item={{\n                dsId: 'body-header-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'item',\n                },\n              }}\n            />\n          ) : null}\n          {!isSkeleton && BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n        </StyledLeftNavBodyHeaderArea>\n        <StyledLeftNavBodyItemsArea\n          selected={!withoutBodyShadow && openedItem !== null}\n          tabIndex={-1}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              ctx={ctx}\n              item={{\n                dsId: 'action-items-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'subitem',\n                },\n              }}\n            />\n          ) : (\n            <>\n              {items.map((item) => (\n                <OutOfTheBoxMapItem item={item} key={item.dsId} />\n              ))}\n            </>\n          )}\n        </StyledLeftNavBodyItemsArea>\n      </StyledLeftNavBodyAreasContainer>\n    </>\n  );\n};\n\n// original props from previous dev\nconst LeftNavContent: React.ComponentType = () => {\n  const {\n    expandedForAnimation,\n    leftNavProps: {\n      expanded,\n      expandedWidth,\n      FooterLabelComponent,\n      footerLabel,\n      onFooterExpand,\n      onFooterClose,\n      loading,\n    },\n    leftNavProps,\n  } = React.useContext(LeftNavContext);\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  const globalProps = useGetGlobalAttributes(leftNavProps);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      aria-label={leftNavScreenReaderInstructions}\n      data-testid={LEFT_NAVIGATION_DATA_TESTID.ROOT} // https://jira.elliemae.io/browse/PUI-15589\n      {...globalProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n        cols={['1fr']}\n        role=\"menu\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <LeftNavFooterItem\n          footerLabel={footerLabel}\n          FooterLabelComponent={FooterLabelComponent}\n          onFooterExpand={onFooterExpand}\n          onFooterClose={onFooterClose}\n        />\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/LeftNavContent/styled.js

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = 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 getLeftShadowStyles = ({
   selected,
   selectedParent,

package/dist/cjs/parts/LeftNavContent/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport type { Theme } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.js';\n\ntype LeftNavProps = {\n  expanded: boolean;\n  expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n  selected,\n  selectedParent,\n  theme,\n}: {\n  selected: boolean;\n  selectedParent?: boolean;\n  theme: Theme;\n}) => {\n  if (!selected && !selectedParent) {\n    return `\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n      }\n    `;\n  }\n  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ROOT,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n  transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n  box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n  border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.AREAS_CONTAINER,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n  height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_AREAS_CONTAINER,\n})`\n  width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  ${({ isSkeleton }) => (!isSkeleton ? getLeftShadowStyles : '')}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_ITEMS_AREA,\n})<{ selected: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  overflow: auto;\n  box-shadow: ${({ isSkeleton, selected, theme }) =>\n    !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : 'transparent'}` : ''};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport type { Theme } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/index.js';\n\ntype LeftNavProps = {\n  expanded: boolean;\n  expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n  selected,\n  selectedParent,\n  theme,\n}: {\n  selected: boolean;\n  selectedParent?: boolean;\n  theme: Theme;\n}) => {\n  if (!selected && !selectedParent) {\n    return `\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n      }\n    `;\n  }\n  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.ROOT,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n  transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n  box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n  border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.AREAS_CONTAINER,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n  height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_AREAS_CONTAINER,\n})`\n  width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  ${({ isSkeleton }) => (!isSkeleton ? getLeftShadowStyles : '')}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.BODY_ITEMS_AREA,\n})<{ selected: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  overflow: auto;\n  box-shadow: ${({ isSkeleton, selected, theme }) =>\n    !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : 'transparent'}` : ''};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,uBAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,sCAGvB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,EAG3D;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM,GAAG,CAAC;AAC/D;AAEO,MAAM,0CAAsC,yBAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB,MAAO;AAAA,sBAC/C,CAAC,UAAW,MAAM,WAAW,aAAa,SAAU;AAAA,2BAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,sBAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,kCAA8B,yBAAO,qBAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,aAAa,YAAY,MAAO;AAAA;AAAA;AAI/E,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG,mBAAmB;AAAA;AAGhB,MAAM,sCAAkC,yBAAO,qBAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB,EAAG;AAAA;AAGzD,MAAM,iCAA6B,yBAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,YAAY,UAAU,MAAM,MAC3C,CAAC,aAAa,mBAAmB,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa,KAAK,EAAE;AAAA;",
   "names": []
 }

package/dist/cjs/parts/LeftNavFooterItem/index.js

@@ -37,11 +37,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_skeleton = require("@elliemae/ds-skeleton");
-var import_react = __toESM(require("react"));
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_react = __toESM(require("react"));
 var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext.js"));
-var import_constants = require("../../constants/constants.js");
-var import_constants2 = require("../../exported-related/constants.js");
+var import_constants = require("../../constants/index.js");
 var import_hooks = require("../../hooks/index.js");
 var import_styled = require("./styled.js");
 const LeftNavFooterItem = (props) => {
@@ -54,7 +53,9 @@ const LeftNavFooterItem = (props) => {
     visibleItemsRefs,
     leftNavProps
   } = (0, import_react.useContext)(import_LeftNavigationContext.default);
-  const id = import_constants2.FOOTER_DS_ID;
+  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  const id = import_constants.FOOTER_DS_ID;
   const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;
   const onKeyDown = (0, import_hooks.useKeyboardNavigation)({
     item: {
@@ -76,12 +77,9 @@ const LeftNavFooterItem = (props) => {
     [handleOnClick, id, setFocusedItem]
   );
   const label = (0, import_react.useMemo)(() => {
-    if (FooterLabelComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterLabelComponent, {});
-    }
-    if (labelOverflow === "truncate") {
+    if (FooterLabelComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterLabelComponent, {});
+    if (labelOverflow === "truncate")
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: footerLabel, placement: "bottom-start" });
-    }
     return footerLabel;
   }, [footerLabel, FooterLabelComponent, labelOverflow]);
   const postAnimationButtonFocusHandler = (0, import_react.useCallback)(
@@ -100,13 +98,13 @@ const LeftNavFooterItem = (props) => {
       import_styled.StyledFooterMenu,
       {
         "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", height: "24px" }) })
       },
       id
     );
   }
-  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
-  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledFooterMenu,
     {
@@ -158,7 +156,9 @@ const LeftNavFooterItem = (props) => {
               import_styled.StyledFooterSeparator,
               {
                 mt: "xxxs",
-                "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR
+                "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR,
+                getOwnerProps,
+                getOwnerPropsArguments
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -170,7 +170,7 @@ const LeftNavFooterItem = (props) => {
                 tabIndex: 0,
                 onFocus: (e) => {
                   e.stopPropagation();
-                  setFocusedItem(import_constants2.FOOTER_MENU_CLOSE_DS_ID);
+                  setFocusedItem(import_constants.FOOTER_MENU_CLOSE_DS_ID);
                 },
                 role: "button",
                 "aria-label": "Collapse left navigation",

package/dist/cjs/parts/LeftNavFooterItem/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n  StyledFooterItem,\n  StyledFooterLabel,\n  StyledFooterMenu,\n  StyledFooterSeparator,\n  StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n  footerLabel: string;\n  FooterLabelComponent?: React.ComponentType<unknown>;\n  onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n  const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n  const {\n    leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n    expandedForAnimation,\n    setFocusedItem,\n    focusedItem,\n    visibleItemsRefs,\n    leftNavProps,\n  } = useContext(LeftNavigationContext);\n  const id = FOOTER_DS_ID;\n\n  const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n  const onKeyDown = useKeyboardNavigation({\n    item: {\n      dsId: id,\n      itemOpts: {\n        selectable: !expandedForAnimation,\n        openable: false,\n        closable: false,\n      },\n    },\n    onClick: handleOnClick,\n  });\n\n  const handleMenuCollapseClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n      setFocusedItem(id);\n    },\n    [handleOnClick, id, setFocusedItem],\n  );\n\n  const label = useMemo(() => {\n    if (FooterLabelComponent) {\n      return <FooterLabelComponent />;\n    }\n    if (labelOverflow === 'truncate') {\n      return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n    }\n    return footerLabel;\n  }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n  const postAnimationButtonFocusHandler = useCallback(\n    (newHTMLNode: HTMLButtonElement | null) => {\n      if (newHTMLNode === null || !expanded) {\n        return;\n      }\n      if (focusedItem === id) {\n        newHTMLNode.focus();\n      }\n    },\n    [focusedItem, id, expanded],\n  );\n\n  if (isSkeleton) {\n    return (\n      <StyledFooterMenu\n        key={id}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n          <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n        </Grid>\n      </StyledFooterMenu>\n    );\n  }\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledFooterMenu\n      key={id}\n      data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledFooterItem\n        innerRef={visibleItemsRefs.current[id]}\n        tabIndex={expandedForAnimation ? -1 : 0}\n        expanded={expandedForAnimation}\n        pt=\"xxs2\"\n        height={expandedForAnimation ? 'auto' : '48px'}\n        alignItems=\"flex-start\"\n        pl=\"xxs2\"\n        cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n        onClick={expandedForAnimation ? () => null : handleOnClick}\n        onKeyDown={onKeyDown}\n        onFocus={() => setFocusedItem(id)}\n        role=\"menuitem\"\n        aria-label={\n          expandedForAnimation\n            ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n            : `Expand left navigation`\n        }\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {!expandedForAnimation ? (\n          <MenuExpand\n            size=\"m\"\n            color={['brand-primary', '800']}\n            // https://jira.elliemae.io/browse/PUI-15589\n            //   VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n          />\n        ) : (\n          <>\n            <StyledFooterLabel\n              mt=\"5px\"\n              mr=\"12px\"\n              mb=\"16px\"\n              labelOverflow={labelOverflow}\n              aria-live=\"polite\"\n              data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {label}\n            </StyledFooterLabel>\n            {!hideFooterPipe ? (\n              <StyledFooterSeparator\n                mt=\"xxxs\"\n                data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n              />\n            ) : (\n              <div></div>\n            )}\n            <StyledMenuCollapse\n              innerRef={postAnimationButtonFocusHandler}\n              buttonType=\"raw\"\n              onClick={handleMenuCollapseClick}\n              tabIndex={0}\n              onFocus={(e: React.FocusEvent) => {\n                e.stopPropagation();\n                setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n              }}\n              role=\"button\"\n              aria-label=\"Collapse left navigation\"\n              //   VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n              data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n            </StyledMenuCollapse>\n          </>\n        )}\n      </StyledFooterItem>\n    </StyledFooterMenu>\n  );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["import_constants", "LeftNavigationContext", "React"]
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n  StyledFooterItem,\n  StyledFooterLabel,\n  StyledFooterMenu,\n  StyledFooterSeparator,\n  StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n  footerLabel: string;\n  FooterLabelComponent?: React.ComponentType<unknown>;\n  onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n  const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n  const {\n    leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n    expandedForAnimation,\n    setFocusedItem,\n    focusedItem,\n    visibleItemsRefs,\n    leftNavProps,\n  } = useContext(LeftNavigationContext);\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const id = FOOTER_DS_ID;\n\n  const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n  const onKeyDown = useKeyboardNavigation({\n    item: {\n      dsId: id,\n      itemOpts: {\n        selectable: !expandedForAnimation,\n        openable: false,\n        closable: false,\n      },\n    },\n    onClick: handleOnClick,\n  });\n\n  const handleMenuCollapseClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n      setFocusedItem(id);\n    },\n    [handleOnClick, id, setFocusedItem],\n  );\n\n  const label = useMemo(() => {\n    if (FooterLabelComponent) return <FooterLabelComponent />;\n    if (labelOverflow === 'truncate')\n      return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n    return footerLabel;\n  }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n  const postAnimationButtonFocusHandler = useCallback(\n    (newHTMLNode: HTMLButtonElement | null) => {\n      if (newHTMLNode === null || !expanded) {\n        return;\n      }\n      if (focusedItem === id) {\n        newHTMLNode.focus();\n      }\n    },\n    [focusedItem, id, expanded],\n  );\n\n  if (isSkeleton) {\n    return (\n      <StyledFooterMenu\n        key={id}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n          <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n        </Grid>\n      </StyledFooterMenu>\n    );\n  }\n\n  return (\n    <StyledFooterMenu\n      key={id}\n      data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledFooterItem\n        innerRef={visibleItemsRefs.current[id]}\n        tabIndex={expandedForAnimation ? -1 : 0}\n        expanded={expandedForAnimation}\n        pt=\"xxs2\"\n        height={expandedForAnimation ? 'auto' : '48px'}\n        alignItems=\"flex-start\"\n        pl=\"xxs2\"\n        cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n        onClick={expandedForAnimation ? () => null : handleOnClick}\n        onKeyDown={onKeyDown}\n        onFocus={() => setFocusedItem(id)}\n        role=\"menuitem\"\n        aria-label={\n          expandedForAnimation\n            ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n            : `Expand left navigation`\n        }\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {!expandedForAnimation ? (\n          <MenuExpand\n            size=\"m\"\n            color={['brand-primary', '800']}\n            // https://jira.elliemae.io/browse/PUI-15589\n            //   VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n          />\n        ) : (\n          <>\n            <StyledFooterLabel\n              mt=\"5px\"\n              mr=\"12px\"\n              mb=\"16px\"\n              labelOverflow={labelOverflow}\n              aria-live=\"polite\"\n              data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              {label}\n            </StyledFooterLabel>\n            {!hideFooterPipe ? (\n              <StyledFooterSeparator\n                mt=\"xxxs\"\n                data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            ) : (\n              <div></div>\n            )}\n            <StyledMenuCollapse\n              innerRef={postAnimationButtonFocusHandler}\n              buttonType=\"raw\"\n              onClick={handleMenuCollapseClick}\n              tabIndex={0}\n              onFocus={(e: React.FocusEvent) => {\n                e.stopPropagation();\n                setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n              }}\n              role=\"button\"\n              aria-label=\"Collapse left navigation\"\n              //   VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n              data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n            </StyledMenuCollapse>\n          </>\n        )}\n      </StyledFooterItem>\n    </StyledFooterMenu>\n  );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["LeftNavigationContext", "React"]
 }

package/dist/cjs/parts/LeftNavFooterItem/styled.js

@@ -40,7 +40,7 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_common = require("../../common/index.js");
-var import_constants = require("../../constants/constants.js");
+var import_constants = require("../../constants/index.js");
 const StyledFooterMenu = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.FOOTER_MENU })`
   width: 100%;
   margin-top: auto;

package/dist/cjs/parts/LeftNavFooterItem/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/LeftNavFooterItem/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common/index.js';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nexport const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.FOOTER_MENU })`\n  width: 100%;\n  margin-top: auto;\n  background: ${(props) => props.theme.colors.neutral['000']};\n\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterItem = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.FOOTER_ITEM })<{\n  expanded?: boolean;\n  opened?: boolean;\n  selected?: boolean;\n  selectedParent?: boolean;\n}>`\n  position: relative;\n  ${(props) => getLeftBorderStyle({ ...props })}\n\n  min-height: 48px;\n  cursor: ${(props) => (props.expanded ? 'auto' : 'pointer')};\n\n  ${getItemBackgroundStyle}\n\n  outline: none;\n\n  :focus {\n    &:before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0px;\n      border: 2px solid ${(props) => props.theme.colors.brand[600]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledFooterLabel = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_LABEL,\n})<{ labelOverflow?: DSLeftNavigationT.LabelOveflowT }>`\n  font-size: 11px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  line-height: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledFooterSeparator = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_SEPARATOR,\n})`\n  height: 16px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_MENU_COLLAPSE,\n})`\n  padding: 0;\n  margin: 0 12px;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common/index.js';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nexport const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.FOOTER_MENU })`\n  width: 100%;\n  margin-top: auto;\n  background: ${(props) => props.theme.colors.neutral['000']};\n\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterItem = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.FOOTER_ITEM })<{\n  expanded?: boolean;\n  opened?: boolean;\n  selected?: boolean;\n  selectedParent?: boolean;\n}>`\n  position: relative;\n  ${(props) => getLeftBorderStyle({ ...props })}\n\n  min-height: 48px;\n  cursor: ${(props) => (props.expanded ? 'auto' : 'pointer')};\n\n  ${getItemBackgroundStyle}\n\n  outline: none;\n\n  :focus {\n    &:before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0px;\n      border: 2px solid ${(props) => props.theme.colors.brand[600]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledFooterLabel = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_LABEL,\n})<{ labelOverflow?: DSLeftNavigationT.LabelOveflowT }>`\n  font-size: 11px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  line-height: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledFooterSeparator = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_SEPARATOR,\n})`\n  height: 16px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: LEFT_NAVIGATION_SLOTS.FOOTER_MENU_COLLAPSE,\n})`\n  padding: 0;\n  margin: 0 12px;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,qBAAqB;AACrB,oBAA2D;AAC3D,uBAA4D;AAGrD,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,0BAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA,IAOhH,CAAC,cAAU,kCAAmB,EAAE,GAAG,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,YAGnC,CAAC,UAAW,MAAM,WAAW,SAAS,SAAU;AAAA;AAAA,IAExD,oCAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYA,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM3D,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAErC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGzD,MAAM,yBAAqB,yBAAO,gCAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/LeftNavLoading/index.js

@@ -36,20 +36,36 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
 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_react = __toESM(require("react"));
+var import_constants = require("../../constants/index.js");
+var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext.js"));
 const StyledLoaderWrapper = (0, import_ds_system.styled)(import_ds_grid.default, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.LOADER_WRAPPER })`
   height: 100%;
   place-items: center;
   z-index: 0;
   background-color: white;
 `;
-const LeftNavLoading = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoaderWrapper, { role: "menuitem", "aria-label": "Loading...", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator,
-  {
-    size: expanded ? "l" : "s",
-    text: "Loading...",
-    showText: expanded,
-    withTooltip: !expanded
-  }
-) });
+const LeftNavLoading = ({ expanded }) => {
+  const { leftNavProps } = import_react.default.useContext(import_LeftNavigationContext.default);
+  const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledLoaderWrapper,
+    {
+      role: "menuitem",
+      "aria-label": "Loading...",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator,
+        {
+          size: expanded ? "l" : "s",
+          text: "Loading...",
+          showText: expanded,
+          withTooltip: !expanded
+        }
+      )
+    }
+  );
+};
 //# sourceMappingURL=index.js.map

package/dist/cjs/parts/LeftNavLoading/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/LeftNavLoading/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.LOADER_WRAPPER })`\n  height: 100%;\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\nexport const LeftNavLoading: React.ComponentType<{ expanded: boolean }> = ({ expanded }) => (\n  <StyledLoaderWrapper role=\"menuitem\" aria-label=\"Loading...\">\n    <DSCircularIndeterminateIndicator\n      size={expanded ? 'l' : 's'}\n      text=\"Loading...\"\n      showText={expanded}\n      withTooltip={!expanded}\n    />\n  </StyledLoaderWrapper>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAdJ,4CAAiD;AACjD,qBAAiB;AACjB,uBAAuB;AACvB,uBAA4D;AAE5D,MAAM,0BAAsB,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,4CAAC,uBAAoB,MAAK,YAAW,cAAW,cAC9C;AAAA,EAAC;AAAA;AAAA,IACC,MAAM,WAAW,MAAM;AAAA,IACvB,MAAK;AAAA,IACL,UAAU;AAAA,IACV,aAAa,CAAC;AAAA;AAChB,GACF;",
-  "names": ["Grid"]
+  "sourcesContent": ["import { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../../constants/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.LOADER_WRAPPER })`\n  height: 100%;\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\nexport const LeftNavLoading: React.ComponentType<{ expanded: boolean }> = ({ expanded }) => {\n  const { leftNavProps } = React.useContext(LeftNavigationContext);\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledLoaderWrapper\n      role=\"menuitem\"\n      aria-label=\"Loading...\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSCircularIndeterminateIndicator\n        size={expanded ? 'l' : 's'}\n        text=\"Loading...\"\n        showText={expanded}\n        withTooltip={!expanded}\n      />\n    </StyledLoaderWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,4CAAiD;AACjD,qBAAiB;AACjB,uBAAuB;AACvB,mBAAkB;AAClB,uBAA4D;AAC5D,mCAAkC;AAElC,MAAM,0BAAsB,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MAAM;AAC1F,QAAM,EAAE,aAAa,IAAI,aAAAC,QAAM,WAAW,6BAAAC,OAAqB;AAC/D,QAAM,gBAAgB,aAAAD,QAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,WAAW,MAAM;AAAA,UACvB,MAAK;AAAA,UACL,UAAU;AAAA,UACV,aAAa,CAAC;AAAA;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["Grid", "React", "LeftNavigationContext"]
 }