@elliemae/ds-left-navigation 3.60.0-next.3 → 3.60.0-next.30

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { 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\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 ItemControlledDrilldown = (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        isOpened,\n        items,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [isOpened]);\n\n  const subitems = useMemo(() => {\n    if (!isOpened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [isOpened, items, ctx]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: isOpened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !isOpened,\n          closable: isOpened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\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={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", "import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { 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\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 ItemControlledDrilldown = (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        isOpened,\n        items,\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\n  const arrowIcon = useMemo(() => {\n    const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [isOpened]);\n\n  const subitems = useMemo(() => {\n    if (!isOpened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [isOpened, items, ctx]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: isOpened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !isOpened,\n          closable: isOpened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\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={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/ItemHeader/index.js

@@ -1,18 +1,17 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 import { ChevronSmallLeft } from "@elliemae/ds-icons";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import React2, { useCallback } from "react";
+import { CHEVRON_BACK_DS_ID, LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import {
-  StyledItemLabel,
   StyledBottomContainer,
+  StyledChevronLeft,
+  StyledItemLabel,
   StyledLeftContainer,
-  StyledRightContainer,
-  StyledChevronLeft
+  StyledRightContainer
 } from "../styled.js";
-import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants.js";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
 const notOpenedShadowStyle = (isSelected) => (theme) => `
   box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
 
@@ -34,6 +33,7 @@ const ItemHeader = (props) => {
     },
     ctx,
     ctx: {
+      leftNavProps,
       leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },
       expandedForAnimation,
       setFocusedItem,
@@ -41,6 +41,8 @@ const ItemHeader = (props) => {
       selectedParent
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
   const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? `${label}, category` : "category");
@@ -75,6 +77,8 @@ const ItemHeader = (props) => {
             pl: opened ? "xxs" : 0,
             justifyItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               opened && /* @__PURE__ */ jsx(
                 StyledChevronLeft,
@@ -89,6 +93,8 @@ const ItemHeader = (props) => {
                   },
                   "aria-label": `Close ${ariaLabel}`,
                   "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: /* @__PURE__ */ jsx(ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
                 }
               ),
@@ -104,6 +110,8 @@ const ItemHeader = (props) => {
             mb: "15px",
             labelOverflow,
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
@@ -118,6 +126,8 @@ const ItemHeader = (props) => {
             },
             onKeyDown: (e) => e.stopPropagation(),
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
           }
         ),
@@ -133,6 +143,8 @@ const ItemHeader = (props) => {
             },
             onKeyDown: (e) => e.stopPropagation(),
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsx(BottomComponent, { ctx, item })
           }
         )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemHeader/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledItemLabel,\n  StyledBottomContainer,\n  StyledLeftContainer,\n  StyledRightContainer,\n  StyledChevronLeft,\n} from '../styled.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.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 ItemHeader = (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      setFocusedItem,\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel,\n          ariaExpanded: opened,\n          ...item.itemOpts,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      hasBorderBottom\n      borderBottomMr={opened ? '12px' : '0px'}\n      shadowStyle={shadowStyle}\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            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          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => 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          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e: React.FocusEvent) => {\n            setFocusedItem(null);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => 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 @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\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 { 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 ItemHeader = (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      setFocusedItem,\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel,\n          ariaExpanded: opened,\n          ...item.itemOpts,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      hasBorderBottom\n      borderBottomMr={opened ? '12px' : '0px'}\n      shadowStyle={shadowStyle}\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            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          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => 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          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e: React.FocusEvent) => {\n            setFocusedItem(null);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => 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/ItemLink/index.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import React2, { useCallback } from "react";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from "../styled.js";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
 const notOpenedShadowStyle = (isSelected) => (theme) => `
   box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
 
@@ -26,11 +26,14 @@ const ItemLink = (props) => {
     },
     ctx,
     ctx: {
+      leftNavProps,
       leftNavProps: { labelOverflow: leftNavLabelOverflow },
       selectedItem,
       selectedParent
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const isSelected = selectedItem === dsId || selectedParent === dsId;
   const shadowStyle = useCallback(
@@ -57,6 +60,8 @@ const ItemLink = (props) => {
             gutter: "1px",
             justifyItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx })
           }
         ),
@@ -68,6 +73,8 @@ const ItemLink = (props) => {
             mb: "15px",
             labelOverflow,
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
@@ -77,6 +84,8 @@ const ItemLink = (props) => {
             mt: "xxxs",
             pr: "xxs2",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
           }
         )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemLink/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.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 ItemLink = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel: typeof label === 'string' ? label : '',\n          ...item.itemOpts,\n          selectable: true,\n        },\n      }}\n      shadowStyle={shadowStyle}\n    >\n      <StyledLeftContainer\n        cols={['38px']}\n        gutter=\"1px\"\n        justifyItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml=\"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        mt=\"xxxs\"\n        pr=\"xxs2\"\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    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDnB,SAiB2B,KAjB3B;AAhDJ,SAAgB,mBAAmB;AACnC,SAAS,kCAAkC;AAE3C,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB,qBAAqB,4BAA4B;AAC3E,SAAS,mCAAmC;AAE5C,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA;AAAA;AAAA,kCAGlD,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kCAI9D,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlD,MAAM,WAAW,CAAC,UAAyD;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,cAAa;AAAA,YACb,eAAa,4BAA4B;AAAA,YAExC,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU;AAAA;AAAA,QACnE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA,eAAa,mBAAmB,4BAA4B;AAAA,YAE3D,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,4BAA4B;AAAA,YAExC,4BAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\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/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } 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 ItemLink = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps,\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel: typeof label === 'string' ? label : '',\n          ...item.itemOpts,\n          selectable: true,\n        },\n      }}\n      shadowStyle={shadowStyle}\n    >\n      <StyledLeftContainer\n        cols={['38px']}\n        gutter=\"1px\"\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        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml=\"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        mt=\"xxxs\"\n        pr=\"xxs2\"\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    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDnB,SAmB2B,KAnB3B;AAlDJ,SAAS,kCAAkC;AAC3C,OAAOA,UAAS,mBAAmB;AACnC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB,qBAAqB,4BAA4B;AAE3E,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA;AAAA;AAAA,kCAGlD,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kCAI9D,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlD,MAAM,WAAW,CAAC,UAAyD;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH;AAAA,MACA,cAAc,EAAE,eAAe,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,cAAa;AAAA,YACb,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEC,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU;AAAA;AAAA,QACnE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA,eAAa,mBAAmB,4BAA4B;AAAA,YAC5D;AAAA,YACA;AAAA,YAEC,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEC,4BAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

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

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import {
-  StyledSectionLabel,
-  StyledRightLabel,
-  StyledVerticalSeparator,
   StyledRightContainer,
-  StyledSectionContainer
+  StyledRightLabel,
+  StyledSectionContainer,
+  StyledSectionLabel,
+  StyledVerticalSeparator
 } from "../styled.js";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
 const ItemSection = (props) => {
   const {
     item,
@@ -16,8 +17,10 @@ const ItemSection = (props) => {
       itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId }
     },
     ctx,
-    ctx: { setFocusedItem }
+    ctx: { leftNavProps, setFocusedItem }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   return /* @__PURE__ */ jsxs(
     ItemRenderer,
     {
@@ -36,19 +39,33 @@ const ItemSection = (props) => {
             pl: "xxs",
             alignItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.SECTION_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               LeftComponent ? /* @__PURE__ */ jsx(LeftComponent, { ctx, item }) : /* @__PURE__ */ jsx("div", {}),
-              /* @__PURE__ */ jsx(StyledSectionLabel, { "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL, children: label }),
+              /* @__PURE__ */ jsx(
+                StyledSectionLabel,
+                {
+                  "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: label
+                }
+              ),
               /* @__PURE__ */ jsx(
                 StyledVerticalSeparator,
                 {
-                  "data-testid": LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR
+                  "data-testid": LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR,
+                  getOwnerProps,
+                  getOwnerPropsArguments
                 }
               ),
               /* @__PURE__ */ jsx(
                 StyledRightLabel,
                 {
                   "data-testid": LEFT_NAVIGATION_DATA_TESTID.SECTION_RIGHT_LABEL,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: labelRightSection
                 }
               )
@@ -67,6 +84,8 @@ const ItemSection = (props) => {
             pr: "xxs2",
             alignItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
           }
         )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSection/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledSectionLabel,\n  StyledRightLabel,\n  StyledVerticalSeparator,\n  StyledRightContainer,\n  StyledSectionContainer,\n} from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemSection = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n    },\n    ctx,\n    ctx: { setFocusedItem },\n  } = props;\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      <StyledSectionContainer\n        cols={['min-content', 'auto', 'min-content', 'auto']}\n        pl=\"xxs\"\n        alignItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n        <StyledSectionLabel data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL}>\n          {label}\n        </StyledSectionLabel>\n        <StyledVerticalSeparator\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n        />\n        <StyledRightLabel\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_RIGHT_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n        >\n          {labelRightSection}\n        </StyledRightLabel>\n      </StyledSectionContainer>\n      <StyledRightContainer\n        ml=\"auto\"\n        onFocus={(e: React.FocusEvent) => {\n          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        pr=\"xxs2\"\n        alignItems=\"center\"\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    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCjB,SAMmB,KANnB;AA/BN,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAErC,MAAM,cAAc,CAAC,UAAyD;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,eAAe;AAAA,EACxB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,QACnE,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,eAAe,QAAQ,eAAe,MAAM;AAAA,YACnD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,4BAA4B;AAAA,YAExC;AAAA,8BAAgB,oBAAC,iBAAc,KAAU,MAAY,IAAK,oBAAC,SAAI;AAAA,cAChE,oBAAC,sBAAmB,eAAa,mBAAmB,4BAA4B,eAC7E,iBACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,4BAA4B;AAAA;AAAA,cAC3C;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,4BAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAS,CAAC,MAAwB;AAChC,6BAAe,IAAI;AACnB,gBAAE,gBAAgB;AAAA,YACpB;AAAA,YACA,WAAW,CAAC,MAA2B,EAAE,gBAAgB;AAAA,YACzD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,4BAA4B;AAAA,YAExC,4BAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import 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 {\n  StyledRightContainer,\n  StyledRightLabel,\n  StyledSectionContainer,\n  StyledSectionLabel,\n  StyledVerticalSeparator,\n} from '../styled.js';\n\nexport const ItemSection = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n    },\n    ctx,\n    ctx: { leftNavProps, setFocusedItem },\n  } = props;\n\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      <StyledSectionContainer\n        cols={['min-content', 'auto', 'min-content', 'auto']}\n        pl=\"xxs\"\n        alignItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n        <StyledSectionLabel\n          data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.SECTION_LABEL}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {label}\n        </StyledSectionLabel>\n        <StyledVerticalSeparator\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.VERTICAL_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n        <StyledRightLabel\n          data-testid={LEFT_NAVIGATION_DATA_TESTID.SECTION_RIGHT_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {labelRightSection}\n        </StyledRightLabel>\n      </StyledSectionContainer>\n      <StyledRightContainer\n        ml=\"auto\"\n        onFocus={(e: React.FocusEvent) => {\n          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        pr=\"xxs2\"\n        alignItems=\"center\"\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    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB,SAQmB,KARnB;AAlCN,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,cAAc,CAAC,UAAyD;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,cAAc,eAAe;AAAA,EACtC,IAAI;AAEJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,QACnE,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,eAAe,QAAQ,eAAe,MAAM;AAAA,YACnD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEC;AAAA,8BAAgB,oBAAC,iBAAc,KAAU,MAAY,IAAK,oBAAC,SAAI;AAAA,cAChE;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,mBAAmB,4BAA4B;AAAA,kBAC5D;AAAA,kBACA;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,4BAA4B;AAAA,kBACzC;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,4BAA4B;AAAA,kBACzC;AAAA,kBACA;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAS,CAAC,MAAwB;AAChC,6BAAe,IAAI;AACnB,gBAAE,gBAAgB;AAAA,YACpB;AAAA,YACA,WAAW,CAAC,MAA2B,EAAE,gBAAgB;AAAA,YACzD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEC,4BAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

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

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import React2 from "react";
 import { styled } from "@elliemae/ds-system";
+import { DSLeftNavigationName, LEFT_NAVIGATION_DATA_TESTID, LEFT_NAVIGATION_SLOTS } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
-import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS, LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
 const StyledSeparator = styled("div", { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_SEPARATOR })`
   height: 1px;
   background-color: ${(props) => props.theme.colors.neutral[100]};
@@ -12,7 +13,12 @@ const StyledSeparator = styled("div", { name: DSLeftNavigationName, slot: LEFT_N
   grid-column: span 3;
 `;
 const ItemSeparator = (props) => {
-  const { item } = props;
+  const {
+    item,
+    ctx: { leftNavProps }
+  } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   return /* @__PURE__ */ jsx(
     ItemRenderer,
     {
@@ -31,7 +37,9 @@ const ItemSeparator = (props) => {
       children: /* @__PURE__ */ jsx(
         StyledSeparator,
         {
-          "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR
+          "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR,
+          getOwnerProps,
+          getOwnerPropsArguments
         }
       )
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSeparator/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS, LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n  width: auto;\n  margin: ${(props) => props.theme.space.xxxs} 0;\n  margin-left: ${(props) => props.theme.space.xxxs};\n  grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const { item } = props;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaRole: 'separator',\n          selectable: false,\n          focuseable: false,\n        },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"1px\"\n      paddingTop=\"0px\"\n    >\n      <StyledSeparator\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n      />\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCjB;AA/BN,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB,uBAAuB,mCAAmC;AAGzF,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEpD,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,iBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAI3C,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,4BAA4B;AAAA;AAAA,MAC3C;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_DATA_TESTID, LEFT_NAVIGATION_SLOTS } from '../../constants/index.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n  width: auto;\n  margin: ${(props) => props.theme.space.xxxs} 0;\n  margin-left: ${(props) => props.theme.space.xxxs};\n  grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    ctx: { leftNavProps },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaRole: 'separator',\n          selectable: false,\n          focuseable: false,\n        },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"1px\"\n      paddingTop=\"0px\"\n    >\n      <StyledSeparator\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCjB;AArCN,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B,6BAA6B;AACzF,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEpD,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,iBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAI3C,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,KAAK,EAAE,aAAa;AAAA,EACtB,IAAI;AACJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,4BAA4B;AAAA,UACzC;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

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

@@ -1,13 +1,20 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
 import { DSSkeleton } from "@elliemae/ds-skeleton";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
+import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import { StyledLeftContainer } from "../styled.js";
 const noShadowStyle = () => () => "box-shadow: none;";
 const CollapsedComponent = () => /* @__PURE__ */ jsx(DSSkeleton, { variant: "circular", w: 24, h: 24 });
 const ItemSkeleton = (props) => {
-  const { item, hasBorderBottom } = props;
+  const {
+    item,
+    hasBorderBottom,
+    ctx: { leftNavProps }
+  } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const variant = item?.itemOpts?.skeletonVariant ?? "item";
   return /* @__PURE__ */ jsxs(
     ItemRenderer,
@@ -35,6 +42,8 @@ const ItemSkeleton = (props) => {
             pl: 0,
             justifyItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: variant === "item" && /* @__PURE__ */ jsx(CollapsedComponent, {})
           }
         ),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSkeleton/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSSkeleton } from '@elliemae/ds-skeleton';\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 { StyledLeftContainer } from '../styled.js';\n\nconst noShadowStyle = () => () => 'box-shadow: none;';\n\nconst CollapsedComponent = () => <DSSkeleton variant=\"circular\" w={24} h={24} />;\n\ninterface SkeletonPropsT {\n  item: DSLeftNavigationT.ComponentProps['item'];\n  hasBorderBottom?: boolean;\n}\nexport const ItemSkeleton = (props: SkeletonPropsT): JSX.Element => {\n  const { item, hasBorderBottom } = props;\n\n  const variant = item?.itemOpts?.skeletonVariant ?? 'item';\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: item?.itemOpts\n          ? {\n              ...item.itemOpts,\n              selectable: false,\n              focuseable: false,\n              ariaRole: 'menuitem',\n              ariaLabel: 'Loading',\n            }\n          : {},\n        CollapsedComponent: variant === 'item' ? CollapsedComponent : null,\n      }}\n      minHeight={variant === 'item' ? '48px' : '32px'}\n      shadowStyle={noShadowStyle}\n      hasBorderBottom={hasBorderBottom}\n    >\n      <StyledLeftContainer\n        cols={['38px']}\n        gutter=\"1px\"\n        pl={0}\n        justifyItems=\"center\"\n        data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n      >\n        {variant === 'item' && <CollapsedComponent />}\n      </StyledLeftContainer>\n      <DSSkeleton variant=\"rectangular\" mt=\"2px\" mb=\"15px\" w=\"auto\" mr=\"xs\" />\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQU,cAY7B,YAZ6B;AARjC,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAEpC,MAAM,gBAAgB,MAAM,MAAM;AAElC,MAAM,qBAAqB,MAAM,oBAAC,cAAW,SAAQ,YAAW,GAAG,IAAI,GAAG,IAAI;AAMvE,MAAM,eAAe,CAAC,UAAuC;AAClE,QAAM,EAAE,MAAM,gBAAgB,IAAI;AAElC,QAAM,UAAU,MAAM,UAAU,mBAAmB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,MAAM,WACZ;AAAA,UACE,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,QACb,IACA,CAAC;AAAA,QACL,oBAAoB,YAAY,SAAS,qBAAqB;AAAA,MAChE;AAAA,MACA,WAAW,YAAY,SAAS,SAAS;AAAA,MACzC,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,cAAa;AAAA,YACb,eAAa,4BAA4B;AAAA,YAExC,sBAAY,UAAU,oBAAC,sBAAmB;AAAA;AAAA,QAC7C;AAAA,QACA,oBAAC,cAAW,SAAQ,eAAc,IAAG,OAAM,IAAG,QAAO,GAAE,QAAO,IAAG,MAAK;AAAA;AAAA;AAAA,EACxE;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\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 { StyledLeftContainer } from '../styled.js';\n\nconst noShadowStyle = () => () => 'box-shadow: none;';\n\nconst CollapsedComponent = () => <DSSkeleton variant=\"circular\" w={24} h={24} />;\n\ninterface SkeletonPropsT extends DSLeftNavigationT.ComponentProps {\n  item: DSLeftNavigationT.ComponentProps['item'];\n  hasBorderBottom?: boolean;\n}\nexport const ItemSkeleton = (props: SkeletonPropsT): JSX.Element => {\n  const {\n    item,\n    hasBorderBottom,\n    ctx: { leftNavProps },\n  } = props;\n  const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const variant = item?.itemOpts?.skeletonVariant ?? 'item';\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: item?.itemOpts\n          ? {\n              ...item.itemOpts,\n              selectable: false,\n              focuseable: false,\n              ariaRole: 'menuitem',\n              ariaLabel: 'Loading',\n            }\n          : {},\n        CollapsedComponent: variant === 'item' ? CollapsedComponent : null,\n      }}\n      minHeight={variant === 'item' ? '48px' : '32px'}\n      shadowStyle={noShadowStyle}\n      hasBorderBottom={hasBorderBottom}\n    >\n      <StyledLeftContainer\n        cols={['38px']}\n        gutter=\"1px\"\n        pl={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        {variant === 'item' && <CollapsedComponent />}\n      </StyledLeftContainer>\n      <DSSkeleton variant=\"rectangular\" mt=\"2px\" mb=\"15px\" w=\"auto\" mr=\"xs\" />\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSU,cAiB7B,YAjB6B;AATjC,OAAOA,YAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAEpC,MAAM,gBAAgB,MAAM,MAAM;AAElC,MAAM,qBAAqB,MAAM,oBAAC,cAAW,SAAQ,YAAW,GAAG,IAAI,GAAG,IAAI;AAMvE,MAAM,eAAe,CAAC,UAAuC;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,EAAE,aAAa;AAAA,EACtB,IAAI;AACJ,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAC1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,UAAU,MAAM,UAAU,mBAAmB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,MAAM,WACZ;AAAA,UACE,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,QACb,IACA,CAAC;AAAA,QACL,oBAAoB,YAAY,SAAS,qBAAqB;AAAA,MAChE;AAAA,MACA,WAAW,YAAY,SAAS,SAAS;AAAA,MACzC,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,cAAa;AAAA,YACb,eAAa,4BAA4B;AAAA,YACzC;AAAA,YACA;AAAA,YAEC,sBAAY,UAAU,oBAAC,sBAAmB;AAAA;AAAA,QAC7C;AAAA,QACA,oBAAC,cAAW,SAAQ,eAAc,IAAG,OAAM,IAAG,QAAO,GAAE,QAAO,IAAG,MAAK;AAAA;AAAA;AAAA,EACxE;AAEJ;",
+  "names": ["React"]
 }

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

@@ -2,9 +2,8 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronSmallLeft } from "@elliemae/ds-icons";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { useCallback } from "react";
-import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
-import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants.js";
+import React2 from "react";
+import { CHEVRON_BACK_DS_ID, LEFT_NAVIGATION_DATA_TESTID } from "../../constants/index.js";
 import { ItemRenderer } from "../../exported-related/index.js";
 import {
   StyledBottomContainer,
@@ -34,6 +33,7 @@ const ItemSubmenu = (props) => {
     },
     ctx,
     ctx: {
+      leftNavProps,
       leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },
       expandedForAnimation,
       selectedItem,
@@ -41,10 +41,12 @@ const ItemSubmenu = (props) => {
       setFocusedItem
     }
   } = props;
+  const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = useCallback(
+  const shadowStyle = React2.useCallback(
     (opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
     [dsId, isSelected, selectedParent]
   );
@@ -75,6 +77,8 @@ const ItemSubmenu = (props) => {
             pl: opened ? "xxs" : 0,
             justifyItems: "center",
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               opened && /* @__PURE__ */ jsx(
                 StyledChevronLeft,
@@ -90,6 +94,8 @@ const ItemSubmenu = (props) => {
                   },
                   "aria-label": `Close ${ariaLabel}`,
                   "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: /* @__PURE__ */ jsx(ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
                 }
               ),
@@ -105,6 +111,8 @@ const ItemSubmenu = (props) => {
             mb: "15px",
             labelOverflow,
             "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
@@ -120,6 +128,8 @@ const ItemSubmenu = (props) => {
             onKeyDown: (e) => e.stopPropagation(),
             onClick: (e) => openedItem === dsId && e.stopPropagation(),
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
           }
         ),
@@ -137,6 +147,8 @@ const ItemSubmenu = (props) => {
             onKeyDown: (e) => e.stopPropagation(),
             onClick: (e) => openedItem && e.stopPropagation(),
             "data-testid": LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsx(BottomComponent, { ctx, item })
           }
         )