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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useEffect } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index.js';\nimport { StyledLabel, StyledDate, StyledRightContainer, StyledArrowContainer } from '../styled.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport type { ComponentProps } from '../../index.d';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<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<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: 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 pl=\"xxs\" mt=\"-2px\">\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\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=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useEffect } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index.js';\nimport { StyledLabel, StyledDate, StyledRightContainer, StyledArrowContainer } from '../styled.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.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 pl=\"xxs\" mt=\"-2px\">\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\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=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/outOfTheBox/ItemWithDate/index.js CHANGED Viewed

@@ -77,7 +77,7 @@ const ItemWithDate = (props) => {
             labelOverflow,
             labelBold,
             labelColor,
-            children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+            children: labelOverflow === "truncate" && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledRightContainer, StyledLabel, StyledDate } from '../styled.js';\n\nexport const ItemWithDate = (props: 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\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        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\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=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCW;AApClC,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAA8D;AAEvD,MAAM,eAAe,CAAC,UAAuC;AAClE,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;AAE3C,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,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,4BAAkB,aAAa,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAY;AAAA,YAEZ;AAAA,0DAAC,4BAAW,IAAG,OAAM,eAAY,0BAC9B,6BACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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 { StyledRightContainer, StyledLabel, StyledDate } 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        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\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=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCW;AAnClC,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAA8D;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,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,4BAAkB,cAAc,QAC/B,4CAAC,+DAA2B,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,eAAY;AAAA,YAEZ;AAAA,0DAAC,4BAAW,IAAG,OAAM,eAAY,0BAC9B,6BACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../constants/index.js';\n\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: DSLeftNavigationSlots.ITEM_LABEL,\n})<StyledLabelT>`\n  font-size: 13px;\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: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_LABEL,\n})`\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  margin-left: ${(props) => props.theme.space.xxs};\n  line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.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: DSLeftNavigationSlots.SECTION_RIGHT_LABEL,\n})`\n  font-size: 12px;\n  line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BOTTOM_CONTAINER,\n})`\n  grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })<{\n  labelOverflow: string;\n}>`\n  font-size: 14px;\n  color: ${(props) => props.theme.colors.neutral[800]};\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n  padding: 0;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } 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: DSLeftNavigationSlots.ITEM_LABEL,\n})<StyledLabelT>`\n  font-size: 13px;\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: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_LABEL,\n})`\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  margin-left: ${(props) => props.theme.space.xxs};\n  line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.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: DSLeftNavigationSlots.SECTION_RIGHT_LABEL,\n})`\n  font-size: 12px;\n  line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BOTTOM_CONTAINER,\n})`\n  grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })<{\n  labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n  font-size: 14px;\n  color: ${(props) => props.theme.colors.neutral[800]};\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n  padding: 0;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AACnC,qBAAqB;AACrB,0BAA2B;AAC3B,uBAA4D;AAUrD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY;AAAA,WAC/F,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAEtE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7C,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,iBACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGlD,MAAM,uBAAmB,yBAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,sBAAkB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
   "names": []
 }

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

@@ -39,11 +39,12 @@ var import_LeftNavigationContext = require("../../LeftNavigationContext.js");
 var import_LeftNavFooterItem = require("../LeftNavFooterItem/index.js");
 var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem.js");
 var import_styled = require("./styled.js");
+var import_ItemSkeleton = require("../../outOfTheBox/ItemSkeleton/index.js");
 var import_LeftNavLoading = require("../LeftNavLoading/index.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 {
-    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },
+    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },
     selectedItem
   } = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -53,7 +54,10 @@ const LeftNavInnerContent = () => {
         "data-testid": "leftnav-header-area",
         selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
         role: "group",
-        children: HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: HeaderComponent }) : null
+        children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSkeleton.ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          " ",
+          HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: HeaderComponent }) : null
+        ] })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftNavBodyAreasContainer, { cols: ["1fr"], rows: ["auto", "1fr"], role: "group", children: [
@@ -63,7 +67,18 @@ const LeftNavInnerContent = () => {
           "data-testid": "leftnav-body-header-area",
           selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
           role: "group",
-          children: BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ItemSkeleton.ItemSkeleton,
+            {
+              item: {
+                dsId: "body-header-skeleton",
+                itemOpts: {
+                  skeletonVariant: "item"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -73,7 +88,18 @@ const LeftNavInnerContent = () => {
           "data-testid": "leftnav-body-items-area",
           tabIndex: -1,
           role: "group",
-          children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item }, item.dsId))
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ItemSkeleton.ItemSkeleton,
+            {
+              item: {
+                dsId: "action-items-skeleton",
+                itemOpts: {
+                  skeletonVariant: "subitem"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item }, item.dsId)) })
         }
       )
     ] })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\n\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 },\n    selectedItem,\n  } = React.useContext(LeftNavContext);\n  return (\n    <>\n      <StyledLeftNavHeaderArea\n        data-testid=\"leftnav-header-area\"\n        selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n        role=\"group\"\n      >\n        {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n        <StyledLeftNavBodyHeaderArea\n          data-testid=\"leftnav-body-header-area\"\n          selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n          role=\"group\"\n        >\n          {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n        </StyledLeftNavBodyHeaderArea>\n        <StyledLeftNavBodyItemsArea\n          selected={!withoutBodyShadow && openedItem !== null}\n          data-testid=\"leftnav-body-items-area\"\n          tabIndex={-1}\n          role=\"group\"\n        >\n          {items.map((item) => (\n            <OutOfTheBoxMapItem item={item} key={item.dsId} />\n          ))}\n        </StyledLeftNavBodyItemsArea>\n      </StyledLeftNavBodyAreasContainer>\n    </>\n  );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n  const {\n    expandedForAnimation,\n    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n    leftNavProps,\n  } = React.useContext(LeftNavContext);\n\n  const globalProps = useGetGlobalAttributes(leftNavProps);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      data-testid=\"leftnav-component\"\n      aria-label={leftNavScreenReaderInstructions}\n      {...globalProps}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n        cols={['1fr']}\n        role={'menu'}\n      >\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAAkB;AAClB,8BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAOO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QACjG,MAAK;AAAA,QAEJ,4BAAkB,4CAAC,gDAAmB,MAAM,iBAAiB,IAAK;AAAA;AAAA,IACrE;AAAA,IACA,6CAAC,iDAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAAG,MAAK,SAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UACzG,MAAK;AAAA,UAEJ,gCAAsB,4CAAC,gDAAmB,MAAM,qBAAqB,IAAK;AAAA;AAAA,MAC7E;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,MAAK;AAAA,UAEJ,gBAAM,IAAI,CAAC,SACV,4CAAC,gDAAmB,QAAiB,KAAK,IAAM,CACjD;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AAEnC,QAAM,kBAAc,gDAAuB,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,UAAU,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,OAAO,MAAM;AAAA,UACxD,MAAM,CAAC,KAAK;AAAA,UACZ,MAAM;AAAA,UAEL;AAAA,uBAAW,4CAAC,wCAAe,UAAU,sBAAsB;AAAA,YAC3D,CAAC,WAAW,4CAAC,uBAAoB;AAAA,YAClC,4CAAC,8CAAkB,aAA0B,gBAAgC,eAA8B;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
+  "sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.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        data-testid=\"leftnav-header-area\"\n        selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\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 cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n        <StyledLeftNavBodyHeaderArea\n          data-testid=\"leftnav-body-header-area\"\n          selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              item={{\n                dsId: 'body-header-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'item',\n                },\n              }}\n            />\n          ) : (\n            <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n          )}\n        </StyledLeftNavBodyHeaderArea>\n        <StyledLeftNavBodyItemsArea\n          selected={!withoutBodyShadow && openedItem !== null}\n          data-testid=\"leftnav-body-items-area\"\n          tabIndex={-1}\n          role=\"group\"\n          isSkeleton={isSkeleton}\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\nconst LeftNavContent: React.ComponentType = () => {\n  const {\n    expandedForAnimation,\n    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n    leftNavProps,\n  } = React.useContext(LeftNavContext);\n\n  const globalProps = useGetGlobalAttributes(leftNavProps);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      data-testid=\"leftnav-component\"\n      aria-label={leftNavScreenReaderInstructions}\n      {...globalProps}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n        cols={['1fr']}\n        role={'menu'}\n      >\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCb;AAlCV,mBAAkB;AAClB,8BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAOO;AACP,0BAA6B;AAC7B,4BAA+B;AAC/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,mBAAmB,WAAW;AAAA,IACvG;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QACjG,MAAK;AAAA,QAEJ,uBACC,4CAAC,oCAAa,MAAM,EAAE,MAAM,mBAAmB,UAAU,EAAE,iBAAiB,OAAO,EAAE,GAAG,iBAAe,MAAC,IAExG,4EAAE;AAAA;AAAA,UAAE,kBAAkB,4CAAC,gDAAmB,MAAM,iBAAiB,IAAK;AAAA,WAAK;AAAA;AAAA,IAE/E;AAAA,IACA,6CAAC,iDAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAAG,MAAK,SAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UACzG,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,2EAAG,gCAAsB,4CAAC,gDAAmB,MAAM,qBAAqB,IAAK,MAAK;AAAA;AAAA,MAEtF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,2EACG,gBAAM,IAAI,CAAC,SACV,4CAAC,gDAAmB,QAAiB,KAAK,IAAM,CACjD,GACH;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AAEnC,QAAM,kBAAc,gDAAuB,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,UAAU,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,OAAO,MAAM;AAAA,UACxD,MAAM,CAAC,KAAK;AAAA,UACZ,MAAM;AAAA,UAEL;AAAA,uBAAW,4CAAC,wCAAe,UAAU,sBAAsB;AAAA,YAC3D,CAAC,WAAW,4CAAC,uBAAoB;AAAA,YAClC,4CAAC,8CAAkB,aAA0B,gBAAgC,eAA8B;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
   "names": ["React"]
 }

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

@@ -94,7 +94,7 @@ const StyledLeftNavBodyHeaderArea = (0, import_ds_system.styled)("div", {
   slot: import_constants.DSLeftNavigationSlots.BODY_HEADER_AREA
 })`
   width: 100%;
-  ${getLeftShadowStyles}
+  ${({ isSkeleton }) => !isSkeleton ? getLeftShadowStyles : ""}
 `;
 const StyledLeftNavBodyItemsArea = (0, import_ds_system.styled)("div", {
   name: import_constants.DSLeftNavigationName,
@@ -102,6 +102,6 @@ const StyledLeftNavBodyItemsArea = (0, import_ds_system.styled)("div", {
 })`
   width: 100%;
   overflow: auto;
-  box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
+  box-shadow: ${({ isSkeleton, selected, theme }) => !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : "transparent"}` : ""};
 `;
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport type { Theme } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } 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: DSLeftNavigationSlots.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: DSLeftNavigationSlots.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: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n  width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  width: 100%;\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean }>`\n  width: 100%;\n  overflow: auto;\n  box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,uBAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,sCAGtB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,EAG1D;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM,GAAG;AAC9D;AAEO,MAAM,0CAAsC,yBAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,sBAC9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAM,kCAA8B,yBAAO,qBAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,sCAAkC,yBAAO,qBAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG;AAAA;AAGG,MAAM,iCAA6B,yBAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gCAG+B,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;",
+  "sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport type { Theme } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } 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: DSLeftNavigationSlots.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: DSLeftNavigationSlots.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: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n  width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.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: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  overflow: auto;\n  box-shadow: ${({ isSkeleton, selected, theme }) =>\n    !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : 'transparent'}` : ''};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,uBAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,sCAGtB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,EAG1D;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM,GAAG;AAC9D;AAEO,MAAM,0CAAsC,yBAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,sBAC9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAM,kCAA8B,yBAAO,qBAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,sCAAkC,yBAAO,qBAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB;AAAA;AAGtD,MAAM,iCAA6B,yBAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,YAAY,UAAU,MAAM,MAC3C,CAAC,aAAa,mBAAmB,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,kBAAkB;AAAA;",
   "names": []
 }

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

@@ -36,6 +36,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_skeleton = require("@elliemae/ds-skeleton");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_styled = require("./styled.js");
 var import_hooks = require("../../hooks/index.js");
@@ -44,7 +46,7 @@ var import_constants = require("../../exported-related/constants.js");
 const LeftNavFooterItem = (props) => {
   const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
   const {
-    leftNavProps: { labelOverflow },
+    leftNavProps: { labelOverflow, isSkeleton },
     expandedForAnimation,
     setFocusedItem,
     visibleItemsRefs
@@ -62,6 +64,16 @@ const LeftNavFooterItem = (props) => {
     },
     onClick: handleOnClick
   });
+  const handleMenuCollapseClick = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      handleOnClick(e);
+    },
+    [handleOnClick]
+  );
+  if (isSkeleton) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFooterMenu, { "data-testid": "leftnav-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", height: "24px" }) }) }, id);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFooterMenu, { "data-testid": "leftnav-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledFooterItem,
     {
@@ -97,10 +109,7 @@ const LeftNavFooterItem = (props) => {
           import_styled.StyledMenuCollapse,
           {
             buttonType: "raw",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleOnClick(e);
-            },
+            onClick: handleMenuCollapseClick,
             "data-testid": "leftnav-footer-btn",
             tabIndex: 0,
             onFocus: (e) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledFooterMenu,\n  StyledFooterItem,\n  StyledFooterLabel,\n  StyledFooterSeparator,\n  StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n  footerLabel: string | JSX.Element;\n  onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n  const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;\n  const {\n    leftNavProps: { labelOverflow },\n    expandedForAnimation,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = useContext(LeftNavigationContext);\n\n  const id = FOOTER_DS_ID;\n\n  const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n  const onKeyDown = useKeyboardNavigation({\n    item: {\n      dsId: id,\n      itemOpts: {\n        selectable: !expandedForAnimation,\n        openable: false,\n        closable: false,\n      },\n    },\n    onClick: handleOnClick,\n  });\n\n  return (\n    <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n      <StyledFooterItem\n        ref={visibleItemsRefs.current[id] as React.RefObject<HTMLDivElement>}\n        tabIndex={expandedForAnimation ? -1 : 0}\n        expanded={expandedForAnimation}\n        pt=\"xxs2\"\n        height={expandedForAnimation ? 'auto' : '48px'}\n        alignItems=\"flex-start\"\n        pl=\"xxs2\"\n        cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n        onClick={expandedForAnimation ? () => null : handleOnClick}\n        onKeyDown={onKeyDown}\n        onFocus={() => setFocusedItem(id)}\n        data-testid=\"leftnav-item-container\"\n        role=\"menuitem\"\n        aria-label={\n          expandedForAnimation\n            ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n            : `Expand left navigation`\n        }\n      >\n        {!expandedForAnimation ? (\n          <MenuExpand size=\"m\" color={['brand-primary', '800']} data-testid=\"leftnav-footer-btn\" />\n        ) : (\n          <>\n            <StyledFooterLabel\n              mt=\"5px\"\n              mr=\"12px\"\n              mb=\"16px\"\n              data-testid=\"leftnav-itemlabel\"\n              labelOverflow={labelOverflow}\n              aria-live=\"polite\"\n            >\n              {labelOverflow === 'truncate' ? (\n                <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />\n              ) : (\n                footerLabel\n              )}\n            </StyledFooterLabel>\n            <StyledFooterSeparator mt=\"xxxs\" />\n            <StyledMenuCollapse\n              buttonType=\"raw\"\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                handleOnClick(e);\n              }}\n              data-testid=\"leftnav-footer-btn\"\n              tabIndex={0}\n              onFocus={(e: React.FocusEvent) => {\n                e.stopPropagation();\n                setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n              }}\n              role=\"button\"\n              aria-label=\"Collapse left navigation\"\n            >\n              <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n            </StyledMenuCollapse>\n          </>\n        )}\n      </StyledFooterItem>\n    </StyledFooterMenu>\n  );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEb;AApEV,mBAAkC;AAClC,sBAAyC;AACzC,uCAA2C;AAC3C,oBAMO;AACP,mBAAsC;AACtC,mCAAkC;AAClC,uBAAsD;AAQ/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACjF,QAAM;AAAA,IACJ,cAAc,EAAE,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,gBAAY,oCAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,SACE,4CAAC,kCAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,QAAQ,EAAE;AAAA,MAChC,UAAU,uBAAuB,KAAK;AAAA,MACtC,UAAU;AAAA,MACV,IAAG;AAAA,MACH,QAAQ,uBAAuB,SAAS;AAAA,MACxC,YAAW;AAAA,MACX,IAAG;AAAA,MACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,MAC7C;AAAA,MACA,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,OAC3D;AAAA,MAGL,WAAC,uBACA,4CAAC,8BAAW,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,sBAAqB,IAEvF,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET,4BAAkB,aACjB,4CAAC,+DAA2B,OAAO,aAAa,WAAU,gBAAe,IAEzE;AAAA;AAAA,QAEJ;AAAA,QACA,4CAAC,uCAAsB,IAAG,QAAO;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,4BAAc,CAAC;AAAA,YACjB;AAAA,YACA,eAAY;AAAA,YACZ,UAAU;AAAA,YACV,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,6BAAe,wCAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,sDAAC,gCAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAC1D;AAAA,SACF;AAAA;AAAA,EAEJ,KA3DqB,EA4DvB;AAEJ;AAEA,IAAO,4BAAQ;",
+  "sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useCallback } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledFooterMenu,\n  StyledFooterItem,\n  StyledFooterLabel,\n  StyledFooterSeparator,\n  StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n  footerLabel: string | JSX.Element;\n  onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n  const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;\n  const {\n    leftNavProps: { labelOverflow, isSkeleton },\n    expandedForAnimation,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = useContext(LeftNavigationContext);\n\n  const id = FOOTER_DS_ID;\n\n  const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n  const onKeyDown = useKeyboardNavigation({\n    item: {\n      dsId: id,\n      itemOpts: {\n        selectable: !expandedForAnimation,\n        openable: false,\n        closable: false,\n      },\n    },\n    onClick: handleOnClick,\n  });\n\n  const handleMenuCollapseClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n    },\n    [handleOnClick],\n  );\n\n  if (isSkeleton) {\n    return (\n      <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n        <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n          <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n        </Grid>\n      </StyledFooterMenu>\n    );\n  }\n\n  return (\n    <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n      <StyledFooterItem\n        ref={visibleItemsRefs.current[id]}\n        tabIndex={expandedForAnimation ? -1 : 0}\n        expanded={expandedForAnimation}\n        pt=\"xxs2\"\n        height={expandedForAnimation ? 'auto' : '48px'}\n        alignItems=\"flex-start\"\n        pl=\"xxs2\"\n        cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n        onClick={expandedForAnimation ? () => null : handleOnClick}\n        onKeyDown={onKeyDown}\n        onFocus={() => setFocusedItem(id)}\n        data-testid=\"leftnav-item-container\"\n        role=\"menuitem\"\n        aria-label={\n          expandedForAnimation\n            ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n            : `Expand left navigation`\n        }\n      >\n        {!expandedForAnimation ? (\n          <MenuExpand size=\"m\" color={['brand-primary', '800']} data-testid=\"leftnav-footer-btn\" />\n        ) : (\n          <>\n            <StyledFooterLabel\n              mt=\"5px\"\n              mr=\"12px\"\n              mb=\"16px\"\n              data-testid=\"leftnav-itemlabel\"\n              labelOverflow={labelOverflow}\n              aria-live=\"polite\"\n            >\n              {labelOverflow === 'truncate' ? (\n                <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />\n              ) : (\n                footerLabel\n              )}\n            </StyledFooterLabel>\n            <StyledFooterSeparator mt=\"xxxs\" />\n            <StyledMenuCollapse\n              buttonType=\"raw\"\n              onClick={handleMenuCollapseClick}\n              data-testid=\"leftnav-footer-btn\"\n              tabIndex={0}\n              onFocus={(e: React.FocusEvent) => {\n                e.stopPropagation();\n                setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n              }}\n              role=\"button\"\n              aria-label=\"Collapse left navigation\"\n            >\n              <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n            </StyledMenuCollapse>\n          </>\n        )}\n      </StyledFooterItem>\n    </StyledFooterMenu>\n  );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Db;AA7DV,mBAA+C;AAC/C,sBAAyC;AACzC,yBAA2B;AAC3B,qBAAqB;AAErB,uCAA2C;AAC3C,oBAMO;AACP,mBAAsC;AACtC,mCAAkC;AAClC,uBAAsD;AAS/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACjF,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe,WAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,gBAAY,oCAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,8BAA0B;AAAA,IAC9B,CAAC,MAAgG;AAC/F,QAAE,gBAAgB;AAClB,oBAAc,CAAoD;AAAA,IACpE;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,MAAI,YAAY;AACd,WACE,4CAAC,kCAA0B,eAAY,qBACrC,sDAAC,uBAAK,QAAO,QAAO,gBAAe,UAAS,YAAW,UAAS,MAAM,CAAC,KAAK,GAAG,GAAE,OAC/E,sDAAC,iCAAW,SAAQ,eAAc,QAAO,QAAO,GAClD,KAHqB,EAIvB;AAAA,EAEJ;AAEA,SACE,4CAAC,kCAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,QAAQ,EAAE;AAAA,MAChC,UAAU,uBAAuB,KAAK;AAAA,MACtC,UAAU;AAAA,MACV,IAAG;AAAA,MACH,QAAQ,uBAAuB,SAAS;AAAA,MACxC,YAAW;AAAA,MACX,IAAG;AAAA,MACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,MAC7C;AAAA,MACA,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,OAC3D;AAAA,MAGL,WAAC,uBACA,4CAAC,8BAAW,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,sBAAqB,IAEvF,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET,4BAAkB,aACjB,4CAAC,+DAA2B,OAAO,aAAa,WAAU,gBAAe,IAEzE;AAAA;AAAA,QAEJ;AAAA,QACA,4CAAC,uCAAsB,IAAG,QAAO;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,UAAU;AAAA,YACV,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,6BAAe,wCAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,sDAAC,gCAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAC1D;AAAA,SACF;AAAA;AAAA,EAEJ,KAxDqB,EAyDvB;AAEJ;AAEA,IAAO,4BAAQ;",
   "names": ["LeftNavigationContext"]
 }

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

@@ -50,7 +50,7 @@ const StyledFooterMenu = (0, import_ds_system.styled)(import_ds_grid.Grid, { nam
 `;
 const StyledFooterItem = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.FOOTER_ITEM })`
   position: relative;
-  ${import_common.getLeftBorderStyle}
+  ${(props) => (0, import_common.getLeftBorderStyle)({ ...props })}
   min-height: 48px;
   cursor: ${(props) => props.expanded ? "auto" : "pointer"};

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

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

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/LeftNavLoading/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/parts/LeftNavLoading/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`\n  height: 100%;\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\nexport const LeftNavLoading: React.ComponentType<{ expanded: boolean }> = ({ expanded }) => (\n  <StyledLoaderWrapper role=\"menuitem\" aria-label=\"Loading...\">\n    <DSCircularIndeterminateIndicator\n      size={expanded ? 'l' : 's'}\n      text=\"Loading...\"\n      showText={expanded}\n      withTooltip={!expanded}\n    />\n  </StyledLoaderWrapper>\n);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAdJ,4CAAiD;AACjD,qBAAiB;AACjB,uBAAuB;AACvB,uBAA4D;AAE5D,MAAM,0BAAsB,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,4CAAC,uBAAoB,MAAK,YAAW,cAAW,cAC9C;AAAA,EAAC;AAAA;AAAA,IACC,MAAM,WAAW,MAAM;AAAA,IACvB,MAAK;AAAA,IACL,UAAU;AAAA,IACV,aAAa,CAAC;AAAA;AAChB,GACF;",
   "names": ["Grid"]

package/dist/cjs/parts/OutOfTheBoxMapItem.js CHANGED Viewed

@@ -42,9 +42,15 @@ const OutOfTheBoxMapItem = (props) => {
     item: { type, Component }
   } = props;
   const ctx = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
+  const finalItem = {
+    ...item,
+    itemOpts: {
+      ...item.itemOpts
+    }
+  };
   if (typeof type === "string" && !!import_outOfTheBox.outOfTheBoxComponents[type]) {
     const OutOfTheBoxComponent = import_outOfTheBox.outOfTheBoxComponents[type];
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: { itemOpts: {}, ...item }, ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: finalItem, ctx });
   }
   if (!Component)
     return null;

package/dist/cjs/parts/OutOfTheBoxMapItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/parts/OutOfTheBoxMapItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { outOfTheBoxComponents } from '../outOfTheBox/index.js';\nimport type { OutOfTheBoxMapItemT } from '../index.d';\nimport { LeftNavContext } from '../LeftNavigationContext.js';\n\nexport const OutOfTheBoxMapItem: React.ComponentType<OutOfTheBoxMapItemT> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n  } = props;\n  const ctx = React.useContext(LeftNavContext);\n\n  if (typeof type === 'string' && !!outOfTheBoxComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxComponents[type];\n    return <OutOfTheBoxComponent item={{ itemOpts: {}, ...item }} 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcZ;AAdX,mBAAkB;AAClB,yBAAsC;AAEtC,mCAA+B;AAExB,MAAM,qBAA+D,CAAC,UAAU;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAM,aAAAA,QAAM,WAAW,2CAAc;AAE3C,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,yCAAsB,IAAI,GAAG;AAC7D,UAAM,uBAAuB,yCAAsB,IAAI;AACvD,WAAO,4CAAC,wBAAqB,MAAM,EAAE,UAAU,CAAC,GAAG,GAAG,KAAK,GAAG,KAAU;AAAA,EAC1E;AACA,MAAI,CAAC;AAAW,WAAO;AAEvB,SAAO,4CAAC,aAAU,MAAY,KAAU;AAC1C;",
+  "sources": ["../../../src/parts/OutOfTheBoxMapItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { outOfTheBoxComponents } from '../outOfTheBox/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { LeftNavContext } from '../LeftNavigationContext.js';\n\nexport const OutOfTheBoxMapItem: React.ComponentType<DSLeftNavigationT.OutOfTheBoxMapItemT> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n  } = props;\n  const ctx = React.useContext(LeftNavContext);\n\n  const finalItem = {\n    ...item,\n    itemOpts: {\n      ...item.itemOpts,\n    },\n  };\n  if (typeof type === 'string' && !!outOfTheBoxComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxComponents[type];\n    return <OutOfTheBoxComponent item={finalItem} 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBZ;AApBX,mBAAkB;AAClB,yBAAsC;AAEtC,mCAA+B;AAExB,MAAM,qBAAiF,CAAC,UAAU;AACvG,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAM,aAAAA,QAAM,WAAW,2CAAc;AAE3C,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,UAAU;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF;AACA,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,yCAAsB,IAAI,GAAG;AAC7D,UAAM,uBAAuB,yCAAsB,IAAI;AACvD,WAAO,4CAAC,wBAAqB,MAAM,WAAW,KAAU;AAAA,EAC1D;AACA,MAAI,CAAC;AAAW,WAAO;AAEvB,SAAO,4CAAC,aAAU,MAAY,KAAU;AAC1C;",
   "names": ["React"]
 }

package/dist/cjs/{prop-types.js → react-desc-prop-types.js} RENAMED Viewed

@@ -26,14 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var prop_types_exports = {};
-__export(prop_types_exports, {
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
   LeftNavItemOptionsSchema: () => LeftNavItemOptionsSchema,
   LeftNavItemPropsSchema: () => LeftNavItemPropsSchema,
   leftNavItemProps: () => leftNavItemProps,
   leftNavigationProps: () => leftNavigationProps
 });
-module.exports = __toCommonJS(prop_types_exports);
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_outOfTheBox = require("./outOfTheBox/index.js");
@@ -51,13 +51,16 @@ const leftNavigationProps = {
   expanded: import_ds_props_helpers.PropTypes.bool.description("Whether to show the left navigation expanded or collapsed").defaultValue(false),
   loading: import_ds_props_helpers.PropTypes.bool.description("Whether the left-nav is loading").defaultValue(false),
   openedItem: import_ds_props_helpers.PropTypes.string.description("The id of the left navigation item you want to be opened").defaultValue(null),
-  footerLabel: import_ds_props_helpers.PropTypes.string.description("The label to show in the footer item"),
+  footerLabel: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node, import_ds_props_helpers.PropTypes.string]).description(
+    "The label to show in the footer item"
+  ),
   onFooterExpand: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
   onFooterClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
   onSelectedChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
   onFocusChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the focused item changes").defaultValue(() => null),
   items: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("The array of items you want to render inside the left nav").defaultValue([]),
-  disableDefaultSelection: import_ds_props_helpers.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false)
+  disableDefaultSelection: import_ds_props_helpers.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false),
+  isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether the component is in skeleton mode").defaultValue(false)
 };
 const LeftNavItemProps = () => null;
 LeftNavItemProps.displayName = "LeftNavItemProps";
@@ -67,4 +70,4 @@ const LeftNavItemOptions = () => null;
 LeftNavItemOptions.displayName = "LeftNavItemOptions";
 const LeftNavItemOptionsSchema = (0, import_ds_props_helpers.describe)(LeftNavItemOptions);
 LeftNavItemOptionsSchema.propTypes = leftNavItemProps;
-//# sourceMappingURL=prop-types.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\nexport declare namespace DSLeftNavigationT {\n  export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\n\n  export interface DefaultProps {\n    expanded: boolean;\n    expandedWidth: string;\n    openedItem: string | null;\n    items: GenericItemItemProps[];\n    footerLabel: string | JSX.Element;\n    labelOverflow: LabelOveflowT;\n    onSelectedChange: (item: string | null) => void;\n    onFocusChange: (item: string | null) => void;\n    onFooterExpand: () => void;\n    onFooterClose: () => void;\n    onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;\n    loading: boolean;\n    isSkeleton: boolean;\n  }\n  export interface OptionalProps {\n    selectedItem?: string | null;\n    selectedParent?: string | null;\n    disableDefaultSelection?: boolean;\n    withoutBodyShadow?: boolean;\n    actionRef?: React.RefObject<{ setFocusedItem: React.Dispatch<React.SetStateAction<string | null>> }>;\n    HeaderComponent?: GenericItemItemProps;\n    BodyHeaderComponent?: GenericItemItemProps;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export type OutOfTheBoxT =\n    | 'ds-left-nav-item-header'\n    | 'ds-left-nav-item-link'\n    | 'ds-left-nav-item-submenu'\n    | 'ds-left-nav-item-controlled-drilldown'\n    | 'ds-left-nav-item-uncontrolled-drilldown'\n    | 'ds-left-nav-item-section'\n    | 'ds-left-nav-item-separator'\n    | 'ds-left-nav-item-text-label'\n    | 'ds-left-nav-item-with-date';\n\n  export interface ItemOptsT extends Record<string, unknown> {\n    label?: string | JSX.Element;\n    labelBold?: boolean;\n    labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n    labelOverflow?: LabelOveflowT;\n    labelRightSection?: string | JSX.Element;\n    selectable?: boolean;\n    focuseable?: boolean;\n    startOpened?: boolean;\n    isOpened?: boolean;\n    openable?: boolean;\n    closable?: boolean;\n    indent?: number;\n    LeftComponent?: React.ComponentType<ComponentProps>;\n    RightComponent?: React.ComponentType<ComponentProps>;\n    BottomComponent?: React.ComponentType<ComponentProps>;\n    ariaLabel?: string;\n    ariaRole?: string;\n    ariaLive?: string;\n    ariaExpanded?: boolean;\n    ariaDescribedBy?: string;\n    items?: GenericItemItemProps[];\n    labelDataTestId?: string;\n    skeletonVariant?: 'item' | 'subitem';\n  }\n\n  export interface ComponentProps {\n    item: GenericItemItemProps;\n    ctx: ContextProps;\n  }\n  export interface GenericItemItemProps {\n    dsId?: string;\n    type?: string;\n    CollapsedComponent?: React.ComponentType<ComponentProps> | null;\n    Component?: React.ComponentType<ComponentProps>;\n    itemOpts: ItemOptsT;\n  }\n  export interface OutOfTheBoxMapItemT {\n    item: GenericItemItemProps;\n  }\n  export interface ItemRendererT {\n    item: GenericItemItemProps;\n    subitems?: JSX.Element[];\n    minHeight?: string;\n    paddingTop?: string;\n    onClick?: () => void;\n    shadowStyle?: (opened: boolean, type?: string) => (theme: Theme) => string;\n    hasBorderBottom?: boolean;\n    borderBottomMr?: string;\n    children: React.ReactNode;\n  }\n}\nexport const leftNavItemProps = {\n  type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n  dsId: PropTypes.string.description('unique identifier for the left nav item'),\n  Component: PropTypes.func.description(\n    \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n  ),\n  CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n  containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n    .description('Set of Properties attached to the main container')\n    .defaultValue({ expandedWidth: '240px' }),\n  expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n  loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n  openedItem: PropTypes.string\n    .description('The id of the left navigation item you want to be opened')\n    .defaultValue(null),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description(\n    'The label to show in the footer item',\n  ),\n  onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n  onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n  onSelectedChange: PropTypes.func\n    .description('A callback which triggers when the selected item changes')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('A callback which triggers when the focused item changes')\n    .defaultValue(() => null),\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of items you want to render inside the left nav')\n    .defaultValue([]),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether you do not want to automatically select the first body item')\n    .defaultValue(false),\n  isSkeleton: PropTypes.bool.description('Whether the component is in skeleton mode').defaultValue(false),\n} as unknown as WeakValidationMap<DSLeftNavigationT.Props>;\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAoC;AAIpC,yBAAiC;AA2G1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,MAAM,mCAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,kCAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,kCAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,kCAAU,MAAM,EAAE,eAAe,kCAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,kCAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,kCAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,kCAAU,QAAQ,kCAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,kCAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AAAA,EACrB,YAAY,kCAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AACxG;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,6BAAyB,kCAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,+BAA2B,kCAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
+  "names": []
+}