@elliemae/ds-left-navigation 3.60.0-next.6 → 3.60.0-next.60

package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSubmenu/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport type { Theme } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback } from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledBottomContainer,\n  StyledChevronLeft,\n  StyledItemLabel,\n  StyledLeftContainer,\n  StyledRightContainer,\n} from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n  `\n  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n  }\n`;\n\nexport const ItemSubmenu = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n      expandedForAnimation,\n      selectedItem,\n      selectedParent,\n      setFocusedItem,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const isSelected = selectedItem === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_\n        ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n        : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [dsId, isSelected, selectedParent],\n  );\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaLabel,\n          ariaExpanded: opened,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      shadowStyle={shadowStyle}\n      hasBorderBottom={opened}\n      borderBottomMr=\"12px\"\n    >\n      <StyledLeftContainer\n        cols={opened ? ['auto', 'auto'] : ['38px']}\n        gutter=\"1px\"\n        pl={opened ? 'xxs' : 0}\n        justifyItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {opened && (\n          <StyledChevronLeft\n            buttonType=\"raw\"\n            onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n              if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n            }}\n            tabIndex={0}\n            onFocus={(e: React.FocusEvent) => {\n              e.stopPropagation();\n              setFocusedItem(CHEVRON_BACK_DS_ID);\n            }}\n            aria-label={`Close ${ariaLabel}`}\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK} // https://jira.elliemae.io/browse/PUI-15589\n          >\n            <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n          </StyledChevronLeft>\n        )}\n        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml={opened ? 'xxs' : '1px'}\n        mt=\"xxxs\"\n        mb=\"15px\"\n        labelOverflow={labelOverflow}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledItemLabel>\n      <StyledRightContainer\n        pl=\"xs\"\n        pr={opened ? 'xxs2' : 'xxs'}\n        onFocus={(e: React.FocusEvent) => {\n          e.stopPropagation();\n          setFocusedItem(null);\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        onClick={(e: React.MouseEvent) => openedItem === dsId && e.stopPropagation()}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n      {BottomComponent && (\n        <StyledBottomContainer\n          style={{ gridColumn: 'span 3' }}\n          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e: React.FocusEvent) => {\n            e.stopPropagation();\n            setFocusedItem(null);\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n          onClick={(e: React.MouseEvent) => openedItem && e.stopPropagation()}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          <BottomComponent ctx={ctx} item={item} />\n        </StyledBottomContainer>\n      )}\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport type { Theme } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React from 'react';\nimport { CHEVRON_BACK_DS_ID, LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledBottomContainer,\n  StyledChevronLeft,\n  StyledItemLabel,\n  StyledLeftContainer,\n  StyledRightContainer,\n} from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n  `\n  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n  }\n`;\n\nexport const ItemSubmenu = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps,\n      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n      expandedForAnimation,\n      selectedItem,\n      selectedParent,\n      setFocusedItem,\n    },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const isSelected = selectedItem === dsId;\n\n  const shadowStyle = React.useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_\n        ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n        : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [dsId, isSelected, selectedParent],\n  );\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaLabel,\n          ariaExpanded: opened,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      shadowStyle={shadowStyle}\n      hasBorderBottom={opened}\n      borderBottomMr=\"12px\"\n    >\n      <StyledLeftContainer\n        cols={opened ? ['auto', 'auto'] : ['38px']}\n        gutter=\"1px\"\n        pl={opened ? 'xxs' : 0}\n        justifyItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {opened && (\n          <StyledChevronLeft\n            buttonType=\"raw\"\n            onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n              if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n            }}\n            tabIndex={0}\n            onFocus={(e: React.FocusEvent) => {\n              e.stopPropagation();\n              setFocusedItem(CHEVRON_BACK_DS_ID);\n            }}\n            aria-label={`Close ${ariaLabel}`}\n            data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK} // https://jira.elliemae.io/browse/PUI-15589\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n          </StyledChevronLeft>\n        )}\n        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml={opened ? 'xxs' : '1px'}\n        mt=\"xxxs\"\n        mb=\"15px\"\n        labelOverflow={labelOverflow}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledItemLabel>\n      <StyledRightContainer\n        pl=\"xs\"\n        pr={opened ? 'xxs2' : 'xxs'}\n        onFocus={(e: React.FocusEvent) => {\n          e.stopPropagation();\n          setFocusedItem(null);\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        onClick={(e: React.MouseEvent) => openedItem === dsId && e.stopPropagation()}\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n      {BottomComponent && (\n        <StyledBottomContainer\n          style={{ gridColumn: 'span 3' }}\n          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e: React.FocusEvent) => {\n            e.stopPropagation();\n            setFocusedItem(null);\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n          onClick={(e: React.MouseEvent) => openedItem && e.stopPropagation()}\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <BottomComponent ctx={ctx} item={item} />\n        </StyledBottomContainer>\n      )}\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/esm/outOfTheBox/ItemTextLabel/index.js

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import React2 from "react";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import { StyledLabel } from "../styled.js";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
 const ItemTextLabel = (props) => {
   const {
     item,
@@ -11,9 +12,12 @@ const ItemTextLabel = (props) => {
       itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId }
     },
     ctx: {
+      leftNavProps,
       leftNavProps: { labelOverflow: leftNavLabelOverflow }
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   return /* @__PURE__ */ jsxs(
     ItemRenderer,
@@ -37,6 +41,8 @@ const ItemTextLabel = (props) => {
             mr: "xxs2",
             pb: "xxxs",
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         )

package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemTextLabel/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n    },\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"24px\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        mr=\"xxs2\"\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBnB,SAQ8B,KAR9B;AAnBJ,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAErC,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB,4BAA4B;AAAA,YAE3D,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n    },\n    ctx: {\n      leftNavProps,\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"24px\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        mr=\"xxs2\"\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAQ8B,KAR9B;AAvBJ,SAAS,kCAAkC;AAC3C,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAErB,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH;AAAA,MACA,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AACJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB,4BAA4B;AAAA,YAC5D;AAAA,YACA;AAAA,YAEC,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { useCallback, useEffect, useMemo } from "react";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
-import { ITEM_TYPES, ItemRenderer } from "../../exported-related/index.js";
+import React2, { useCallback, useEffect, useMemo } from "react";
+import { ITEM_TYPES, LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
+import { ItemRenderer } from "../../exported-related/index.js";
 import { ItemSeparator } from "../ItemSeparator/index.js";
 import { ItemTextLabel } from "../ItemTextLabel/index.js";
 import { ItemWithDate } from "../ItemWithDate/index.js";
@@ -51,11 +51,14 @@ const ItemUncontrolledDrilldown = (props) => {
     },
     ctx,
     ctx: {
+      leftNavProps,
       leftNavProps: { labelOverflow: leftNavLabelOverflow },
       openedDrilldowns,
       setOpenedDrilldowns
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   useEffect(() => {
     if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId]);
   }, []);
@@ -98,6 +101,8 @@ const ItemUncontrolledDrilldown = (props) => {
             pl: "xxs",
             mt: "-2px",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: arrowIcon
           }
         ),
@@ -109,6 +114,8 @@ const ItemUncontrolledDrilldown = (props) => {
             labelBold,
             labelColor,
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
@@ -120,12 +127,16 @@ const ItemUncontrolledDrilldown = (props) => {
             alignItems: "center",
             gutter: "xxs",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsx(
                 StyledDate,
                 {
                   ml: "xxs",
                   "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: labelRightSection
                 }
               ),

package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ITEM_TYPES, ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { StyledArrowContainer, StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n    ctx,\n  } = props;\n\n  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n    const currentIndent = item.itemOpts?.indent ?? 0;\n    const newItem = {\n      ...item,\n      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n    };\n    return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n  }\n  if (!Component) return null;\n  // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n  return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        startOpened,\n        items,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      openedDrilldowns,\n      setOpenedDrilldowns,\n    },\n  } = props;\n\n  // Start opened functionality\n  useEffect(() => {\n    if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const opened = openedDrilldowns.includes(dsId as string);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = opened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [opened]);\n\n  // Array of subitems\n  const subitems = useMemo(() => {\n    if (!opened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [ctx, items, opened]);\n\n  const handleOnClick = useCallback(() => {\n    if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n    else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n  }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: opened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !opened,\n          closable: opened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n      onClick={handleOnClick}\n    >\n      <StyledArrowContainer\n        pl=\"xxs\"\n        mt=\"-2px\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        <StyledDate\n          ml=\"xxs\"\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { ITEM_TYPES, LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { StyledArrowContainer, StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n    ctx,\n  } = props;\n\n  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n    const currentIndent = item.itemOpts?.indent ?? 0;\n    const newItem = {\n      ...item,\n      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n    };\n    return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n  }\n  if (!Component) return null;\n  // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n  return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        startOpened,\n        items,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps,\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      openedDrilldowns,\n      setOpenedDrilldowns,\n    },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  // Start opened functionality\n  useEffect(() => {\n    if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const opened = openedDrilldowns.includes(dsId as string);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = opened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [opened]);\n\n  // Array of subitems\n  const subitems = useMemo(() => {\n    if (!opened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [ctx, items, opened]);\n\n  const handleOnClick = useCallback(() => {\n    if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n    else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n  }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: opened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !opened,\n          closable: opened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n      onClick={handleOnClick}\n    >\n      <StyledArrowContainer\n        pl=\"xxs\"\n        mt=\"-2px\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledDate\n          ml=\"xxs\"\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/esm/outOfTheBox/ItemWithDate/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
+import React2 from "react";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import { StyledDate, StyledLabel, StyledRightContainer } from "../styled.js";
 const ItemWithDate = (props) => {
@@ -20,9 +21,12 @@ const ItemWithDate = (props) => {
     },
     ctx,
     ctx: {
+      leftNavProps,
       leftNavProps: { labelOverflow: leftNavLabelOverflow }
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   return /* @__PURE__ */ jsxs(
     ItemRenderer,
@@ -45,6 +49,8 @@ const ItemWithDate = (props) => {
             labelBold,
             labelColor,
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" && label ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
@@ -56,12 +62,16 @@ const ItemWithDate = (props) => {
             alignItems: "center",
             gutter: "xxs",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsx(
                 StyledDate,
                 {
                   ml: "xxs",
                   "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: labelRightSection
                 }
               ),

package/dist/esm/outOfTheBox/ItemWithDate/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemWithDate/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"xxs\"\n        pb=\"xxxs\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n      >\n        {labelOverflow === 'truncate' && label ? (\n          <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n        ) : (\n          label\n        )}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        <StyledDate\n          ml=\"xxs\"\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoCW,cAe5B,YAf4B;AApClC,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,YAAY,aAAa,4BAA4B;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,mBAAmB,4BAA4B;AAAA,YAE3D,4BAAkB,cAAc,QAC/B,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YAEzC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,4BAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps,\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"xxs\"\n        pb=\"xxxs\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {labelOverflow === 'truncate' && label ? (\n          <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n        ) : (\n          label\n        )}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledDate\n          ml=\"xxs\"\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwCW,cAiB5B,YAjB4B;AAxClC,SAAS,kCAAkC;AAC3C,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,YAAY,aAAa,4BAA4B;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH;AAAA,MACA,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AACJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,mBAAmB,4BAA4B;AAAA,YAC5D;AAAA,YACA;AAAA,YAEC,4BAAkB,cAAc,QAC/B,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,4BAA4B;AAAA,kBACzC;AAAA,kBACA;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/outOfTheBox/index.js

@@ -1,17 +1,16 @@
 import * as React from "react";
-import { ITEM_TYPES } from "../exported-related/index.js";
+import { ITEM_TYPES } from "../constants/index.js";
 import { ItemControlledDrilldown } from "./ItemControlledDrilldown/index.js";
-import { ItemUncontrolledDrilldown } from "./ItemUncontrolledDrilldown/index.js";
 import { ItemHeader } from "./ItemHeader/index.js";
 import { ItemLink } from "./ItemLink/index.js";
 import { ItemSection } from "./ItemSection/index.js";
 import { ItemSeparator } from "./ItemSeparator/index.js";
+import { ItemSkeleton } from "./ItemSkeleton/index.js";
 import { ItemSubmenu } from "./ItemSubmenu/index.js";
 import { ItemTextLabel } from "./ItemTextLabel/index.js";
+import { ItemUncontrolledDrilldown } from "./ItemUncontrolledDrilldown/index.js";
 import { ItemWithDate } from "./ItemWithDate/index.js";
-import { ItemSkeleton } from "./ItemSkeleton/index.js";
 export * from "./ItemControlledDrilldown/index.js";
-export * from "./ItemUncontrolledDrilldown/index.js";
 export * from "./ItemHeader/index.js";
 export * from "./ItemLink/index.js";
 export * from "./ItemSection/index.js";
@@ -19,8 +18,8 @@ export * from "./ItemSeparator/index.js";
 export * from "./ItemSkeleton/index.js";
 export * from "./ItemSubmenu/index.js";
 export * from "./ItemTextLabel/index.js";
+export * from "./ItemUncontrolledDrilldown/index.js";
 export * from "./ItemWithDate/index.js";
-const outOfTheBoxTypes = Object.values(ITEM_TYPES);
 const {
   LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,
   LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,
@@ -46,7 +45,6 @@ const outOfTheBoxComponents = {
   [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate
 };
 export {
-  outOfTheBoxComponents,
-  outOfTheBoxTypes
+  outOfTheBoxComponents
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEP,MAAM,mBAAmB,OAAO,OAAO,UAAU;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAE3B,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAE7B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,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/esm/outOfTheBox/styled.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from "../constants/constants.js";
+import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from "../constants/index.js";
 const StyledLabel = styled(Grid, {
   name: DSLeftNavigationName,
   slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "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",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { LeftNavContext } from "../../LeftNavigationContext.js";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemSkeleton } from "../../outOfTheBox/ItemSkeleton/index.js";
 import { LeftNavFooterItem } from "../LeftNavFooterItem/index.js";
 import { LeftNavLoading } from "../LeftNavLoading/index.js";
@@ -18,10 +18,14 @@ import {
 } from "./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 = React2.useContext(LeftNavContext);
   const {
+    leftNavProps,
     leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },
     selectedItem
-  } = React2.useContext(LeftNavContext);
+  } = ctx;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       StyledLeftNavHeaderArea,
@@ -29,7 +33,16 @@ const LeftNavInnerContent = () => {
         selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
         "data-testid": LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA,
         role: "group",
-        children: isSkeleton ? /* @__PURE__ */ jsx(ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: isSkeleton ? /* @__PURE__ */ jsx(
+          ItemSkeleton,
+          {
+            ctx,
+            item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } },
+            hasBorderBottom: true
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",
           HeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: HeaderComponent }) : null
         ] })
@@ -42,6 +55,8 @@ const LeftNavInnerContent = () => {
         rows: ["auto", "1fr"],
         role: "group",
         "data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: [
           /* @__PURE__ */ jsxs(
             StyledLeftNavBodyHeaderArea,
@@ -50,10 +65,13 @@ const LeftNavInnerContent = () => {
               role: "group",
               isSkeleton,
               "data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: [
                 isSkeleton ? /* @__PURE__ */ jsx(
                   ItemSkeleton,
                   {
+                    ctx,
                     item: {
                       dsId: "body-header-skeleton",
                       itemOpts: {
@@ -74,9 +92,12 @@ const LeftNavInnerContent = () => {
               role: "group",
               isSkeleton,
               "data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: isSkeleton ? /* @__PURE__ */ jsx(
                 ItemSkeleton,
                 {
+                  ctx,
                   item: {
                     dsId: "action-items-skeleton",
                     itemOpts: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from "../../constants/constants.js";
+import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from "../../constants/index.js";
 const getLeftShadowStyles = ({
   selected,
   selectedParent,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B;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,sCAAsC,OAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,sBAAsB;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,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,aAAa,YAAY,MAAO;AAAA;AAAA;AAI/E,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,IACG,mBAAmB;AAAA;AAGhB,MAAM,kCAAkC,OAAO,MAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB,EAAG;AAAA;AAGzD,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;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": []
 }