npm - @elliemae/ds-left-navigation - Versions diffs - 3.11.0-next.1 → 3.11.0-next.3 - Mend

@elliemae/ds-left-navigation 3.11.0-next.1 → 3.11.0-next.3

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 (139) hide show

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../constants';\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(ChevronSmallLeft, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n  cursor: pointer;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,sBAAsB;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,IAAI,WAAW,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEnE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1C,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG/C,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,oBAAoB,OAAO,kBAAkB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
+import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
 import { LeftNavContext } from "../../LeftNavigationContext";
 import { LeftNavFooterItem } from "../LeftNavFooterItem";
 import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem";
@@ -11,7 +12,6 @@ import {
   StyledLeftNavBodyAreasContainer,
   StyledLeftNavBodyHeaderArea,
   StyledLeftNavBodyItemsArea,
-  StyledLeftNavFooterArea,
   StyledLeftNavContentWithScrollbar
 } from "./styled";
 import { LeftNavLoading } from "../LeftNavLoading";
@@ -31,6 +31,8 @@ const LeftNavInnerContent = () => {
         }) : null
       }),
       /* @__PURE__ */ jsxs(StyledLeftNavBodyAreasContainer, {
+        cols: ["1fr"],
+        rows: ["auto", "1fr"],
         children: [
           /* @__PURE__ */ jsx(StyledLeftNavBodyHeaderArea, {
             "data-testid": "leftnav-body-header-area",
@@ -57,27 +59,31 @@ const LeftNavInnerContent = () => {
 const LeftNavContent = () => {
   const {
     expandedForAnimation,
-    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading }
+    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },
+    leftNavProps
   } = React2.useContext(LeftNavContext);
+  const globalProps = useGetGlobalAttributes(leftNavProps);
   return /* @__PURE__ */ jsx(StyledLeftNavExpandAnimationWrapper, {
     expandedWidth,
     expanded,
     "data-testid": "leftnav-component",
     "aria-label": leftNavScreenReaderInstructions,
+    role: "menu",
+    ...globalProps,
     children: /* @__PURE__ */ jsxs(StyledLeftNavAreasContainer, {
       expandedWidth,
       expanded: expandedForAnimation,
+      rows: ["auto", "1fr", "auto"],
+      cols: ["1fr"],
       children: [
         loading && /* @__PURE__ */ jsx(LeftNavLoading, {
           expanded: expandedForAnimation
         }),
         !loading && /* @__PURE__ */ jsx(LeftNavInnerContent, {}),
-        /* @__PURE__ */ jsx(StyledLeftNavFooterArea, {
-          children: /* @__PURE__ */ jsx(LeftNavFooterItem, {
-            footerLabel,
-            onFooterExpand,
-            onFooterClose
-          })
+        /* @__PURE__ */ jsx(LeftNavFooterItem, {
+          footerLabel,
+          onFooterExpand,
+          onFooterClose
         })
       ]
     })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n  StyledLeftNavFooterArea,\n  StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\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)}\n      >\n        {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer>\n        <StyledLeftNavBodyHeaderArea\n          data-testid=\"leftnav-body-header-area\"\n          selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)}\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        >\n          <StyledLeftNavContentWithScrollbar>\n            {items.map((item) => (\n              <OutOfTheBoxMapItem item={item} key={item.dsId} />\n            ))}\n          </StyledLeftNavContentWithScrollbar>\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  } = React.useContext(LeftNavContext);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      data-testid=\"leftnav-component\"\n      aria-label={leftNavScreenReaderInstructions}\n    >\n      <StyledLeftNavAreasContainer expandedWidth={expandedWidth} expanded={expandedForAnimation}>\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <StyledLeftNavFooterArea>\n          <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n        </StyledLeftNavFooterArea>\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAI;AAAA,QAEpF,4BAAkB,oBAAC;AAAA,UAAmB,MAAM;AAAA,SAAiB,IAAK;AAAA,OACrE;AAAA,MACA,qBAAC;AAAA,QACC;AAAA,8BAAC;AAAA,YACC,eAAY;AAAA,YACZ,UAAU,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAI;AAAA,YAE5F,gCAAsB,oBAAC;AAAA,cAAmB,MAAM;AAAA,aAAqB,IAAK;AAAA,WAC7E;AAAA,UACA,oBAAC;AAAA,YACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,YAC/C,eAAY;AAAA,YACZ,UAAU;AAAA,YAEV,8BAAC;AAAA,cACE,gBAAM,IAAI,CAAC,SACV,oBAAC;AAAA,gBAAmB;AAAA,iBAAiB,KAAK,IAAM,CACjD;AAAA,aACH;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,EAC/F,IAAIA,OAAM,WAAW,cAAc;AAEnC,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,IAEZ,+BAAC;AAAA,MAA4B;AAAA,MAA8B,UAAU;AAAA,MAClE;AAAA,mBAAW,oBAAC;AAAA,UAAe,UAAU;AAAA,SAAsB;AAAA,QAC3D,CAAC,WAAW,oBAAC,uBAAoB;AAAA,QAClC,oBAAC;AAAA,UACC,8BAAC;AAAA,YAAkB;AAAA,YAA0B;AAAA,YAAgC;AAAA,WAA8B;AAAA,SAC7G;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n  StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\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      >\n        {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n        <StyledLeftNavBodyHeaderArea\n          data-testid=\"leftnav-body-header-area\"\n          selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\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        >\n          <StyledLeftNavContentWithScrollbar>\n            {items.map((item) => (\n              <OutOfTheBoxMapItem item={item} key={item.dsId} />\n            ))}\n          </StyledLeftNavContentWithScrollbar>\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      role=\"menu\"\n      {...globalProps}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={['auto', '1fr', 'auto']}\n        cols={['1fr']}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QAE9F,4BAAkB,oBAAC;AAAA,UAAmB,MAAM;AAAA,SAAiB,IAAK;AAAA,OACrE;AAAA,MACA,qBAAC;AAAA,QAAgC,MAAM,CAAC,KAAK;AAAA,QAAG,MAAM,CAAC,QAAQ,KAAK;AAAA,QAClE;AAAA,8BAAC;AAAA,YACC,eAAY;AAAA,YACZ,UAAU,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,YAEtG,gCAAsB,oBAAC;AAAA,cAAmB,MAAM;AAAA,aAAqB,IAAK;AAAA,WAC7E;AAAA,UACA,oBAAC;AAAA,YACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,YAC/C,eAAY;AAAA,YACZ,UAAU;AAAA,YAEV,8BAAC;AAAA,cACE,gBAAM,IAAI,CAAC,SACV,oBAAC;AAAA,gBAAmB;AAAA,iBAAiB,KAAK,IAAM,CACjD;AAAA,aACH;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AAEnC,QAAM,cAAc,uBAAuB,YAAY;AAEvD,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,+BAAC;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,MAAM,CAAC,KAAK;AAAA,MAEX;AAAA,mBAAW,oBAAC;AAAA,UAAe,UAAU;AAAA,SAAsB;AAAA,QAC3D,CAAC,WAAW,oBAAC,uBAAoB;AAAA,QAClC,oBAAC;AAAA,UAAkB;AAAA,UAA0B;AAAA,UAAgC;AAAA,SAA8B;AAAA;AAAA,KAC7G;AAAA,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
   "names": ["React"]
 }

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

@@ -1,10 +1,7 @@
 import * as React from "react";
-import { css, styled } from "@elliemae/ds-system";
-import {
-  DSScrollableContainer,
-  DSScrollableContainerName,
-  DSScrollableContainerSlots
-} from "@elliemae/ds-scrollable-container";
+import { Grid } from "@elliemae/ds-grid";
+import { styled } from "@elliemae/ds-system";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
 const getLeftShadowStyles = ({
   selected,
   selectedParent,
@@ -23,7 +20,10 @@ const getLeftShadowStyles = ({
   }
   return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
 };
-const StyledLeftNavExpandAnimationWrapper = styled.nav`
+const StyledLeftNavExpandAnimationWrapper = styled("nav", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.ROOT
+})`
   width: ${(props) => props.expanded ? props.expandedWidth : "48px"};
   transition: width ${(props) => props.expanded ? "ease-out" : "ease-in"} 350ms;
   box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};
@@ -32,63 +32,49 @@ const StyledLeftNavExpandAnimationWrapper = styled.nav`
   height: 100%;
   position: relative;
 `;
-const StyledLeftNavAreasContainer = styled.div`
-  position: absolute;
+const StyledLeftNavAreasContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.AREAS_CONTAINER
+})`
   width: ${(props) => props.expanded ? `calc(${props.expandedWidth} - 2px)` : "46px"};
   height: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    'left-nav-header'
-    'left-nav-body'
-    'left-nav-footer';
 `;
-const StyledLeftNavHeaderArea = styled.div`
-  grid-area: left-nav-header;
+const StyledLeftNavHeaderArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.HEADER_AREA
+})`
   ${getLeftShadowStyles}
 `;
-const StyledLeftNavBodyAreasContainer = styled.div`
-  position: absolute;
+const StyledLeftNavBodyAreasContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER
+})`
   width: 100%;
   height: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr;
-  grid-template-areas:
-    'left-nav-body-header'
-    'left-nav-body-body';
-  grid-area: left-nav-body;
 `;
-const StyledLeftNavBodyHeaderArea = styled.div`
+const StyledLeftNavBodyHeaderArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BODY_HEADER_AREA
+})`
   width: 100%;
-  grid-area: left-nav-body-header;
   ${getLeftShadowStyles}
 `;
-const StyledLeftNavBodyItemsArea = styled.div`
+const StyledLeftNavBodyItemsArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BODY_ITEMS_AREA
+})`
   width: 100%;
-  grid-area: left-nav-body-body;
   max-height: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
 `;
-const StyledLeftNavFooterArea = styled.div`
-  width: 100%;
-  grid-area: left-nav-footer;
-`;
-const allSlotsCombined = Object.values(DSScrollableContainerSlots).map((slot) => `.${DSScrollableContainerName}-${slot}`).join(", ");
-const inheritBoxShadowCss = css`
-  box-shadow: inherit;
-`;
-const StyledLeftNavContentWithScrollbar = styled(DSScrollableContainer)`
-  &,
-  .${DSScrollableContainerName}-${DSScrollableContainerSlots.HOST} {
-    height: 100%;
-  }
-  ${allSlotsCombined} {
-    ${inheritBoxShadowCss}
-  }
+const StyledLeftNavContentWithScrollbar = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.CONTENT_WITH_SCROLLBAR
+})`
+  height: 100%;
+  overflow: auto;
 `;
 export {
   StyledLeftNavAreasContainer,
@@ -97,7 +83,6 @@ export {
   StyledLeftNavBodyItemsArea,
   StyledLeftNavContentWithScrollbar,
   StyledLeftNavExpandAnimationWrapper,
-  StyledLeftNavFooterArea,
   StyledLeftNavHeaderArea
 };
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport {\n  DSScrollableContainer,\n  DSScrollableContainerName,\n  DSScrollableContainerSlots,\n} from '@elliemae/ds-scrollable-container';\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: any;\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<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`;\nexport const StyledLeftNavAreasContainer = styled.div<LeftNavProps>`\n  position: absolute;\n  width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    'left-nav-header'\n    'left-nav-body'\n    'left-nav-footer';\n`;\n\nexport const StyledLeftNavHeaderArea = styled.div<{ selected: boolean }>`\n  grid-area: left-nav-header;\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n  grid-template-areas:\n    'left-nav-body-header'\n    'left-nav-body-body';\n  grid-area: left-nav-body;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled.div<{ selected: boolean }>`\n  width: 100%;\n  grid-area: left-nav-body-header;\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled.div<{ selected: boolean }>`\n  width: 100%;\n  grid-area: left-nav-body-body;\n  max-height: 100%;\n  overflow-y: hidden;\n  overflow-x: hidden;\n  box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavFooterArea = styled.div`\n  width: 100%;\n  grid-area: left-nav-footer;\n`;\n\nconst allSlotsCombined = Object.values(DSScrollableContainerSlots)\n  .map((slot) => `.${DSScrollableContainerName}-${slot}`)\n  .join(', ');\n\nconst inheritBoxShadowCss = css`\n  box-shadow: inherit;\n`;\n\nexport const StyledLeftNavContentWithScrollbar = styled(DSScrollableContainer)`\n  &,\n  .${DSScrollableContainerName}-${DSScrollableContainerSlots.HOST} {\n    height: 100%;\n  }\n  ${allSlotsCombined} {\n    ${inheritBoxShadowCss}\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP,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;AAAA;AAAA;AAAA,sCAGnB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAC3D;AAEO,MAAM,sCAAsC,OAAO;AAAA,WAC/C,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,8BAA8B,OAAO;AAAA;AAAA,WAEvC,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxE,MAAM,0BAA0B,OAAO;AAAA;AAAA,IAE1C;AAAA;AAGG,MAAM,kCAAkC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa/C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,IAG9C;AAAA;AAGG,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMjB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGtF,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAK9C,MAAM,mBAAmB,OAAO,OAAO,0BAA0B,EAC9D,IAAI,CAAC,SAAS,IAAI,6BAA6B,MAAM,EACrD,KAAK,IAAI;AAEZ,MAAM,sBAAsB;AAAA;AAAA;AAIrB,MAAM,oCAAoC,OAAO,qBAAqB;AAAA;AAAA,KAExE,6BAA6B,2BAA2B;AAAA;AAAA;AAAA,IAGzD;AAAA,MACE;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled, Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\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  height: 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  max-height: 100%;\n  overflow-y: hidden;\n  overflow-x: hidden;\n  box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavContentWithScrollbar = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.CONTENT_WITH_SCROLLBAR,\n})`\n  height: 100%;\n  overflow: auto;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,cAAqB;AAC9B,SAAS,sBAAsB,6BAA6B;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,sCAGnB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAC3D;AAEO,MAAM,sCAAsC,OAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,sBAAsB;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;AAAA,sBAC3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kCAAkC,OAAO,MAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG;AAAA;AAGG,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gCAK+B,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGtF,MAAM,oCAAoC,OAAO,OAAO;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -2,15 +2,12 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { MenuExpand } from "@elliemae/ds-icons";
-import { PropTypes } from "@elliemae/ds-utilities";
-import Grid from "@elliemae/ds-grid";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import {
   StyledFooterMenu,
-  StyledItem,
-  StyledItemWrapper,
-  StyledLabel,
-  StyledSeparator,
+  StyledFooterItem,
+  StyledFooterLabel,
+  StyledFooterSeparator,
   StyledMenuCollapse
 } from "./styled";
 import { useKeyboardNavigation } from "../../hooks";
@@ -19,9 +16,8 @@ import { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../../exported-related/co
 const LeftNavFooterItem = (props) => {
   const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
   const {
-    leftNavProps: { labelOverflow, openedItem },
+    leftNavProps: { labelOverflow },
     expandedForAnimation,
-    setSelectedItem,
     setFocusedItem,
     visibleItemsRefs
   } = useContext(LeftNavigationContext);
@@ -40,73 +36,63 @@ const LeftNavFooterItem = (props) => {
   });
   return /* @__PURE__ */ jsx(StyledFooterMenu, {
     "data-testid": "leftnav-container",
-    children: /* @__PURE__ */ jsx(StyledItemWrapper, {
-      children: /* @__PURE__ */ jsx(StyledItem, {
-        ref: visibleItemsRefs.current[id],
-        tabIndex: expandedForAnimation ? -1 : 0,
-        expanded: expandedForAnimation,
-        pt: "xxs2",
-        height: expandedForAnimation ? "auto" : "48px",
-        alignItems: "flex-start",
-        pl: "xxs",
-        cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
-        onClick: expandedForAnimation ? () => null : handleOnClick,
-        onKeyDown,
-        onFocus: () => setFocusedItem(id),
-        "data-testid": "leftnav-item-container",
-        role: "menuitem",
-        "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`,
-        children: !expandedForAnimation ? /* @__PURE__ */ jsx(MenuExpand, {
-          size: "m",
-          color: ["brand-primary", 800],
-          "data-testid": "leftnav-footer-btn"
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [
-            /* @__PURE__ */ jsx(StyledLabel, {
-              mt: "5px",
-              mr: "12px",
-              mb: "16px",
-              "data-testid": "leftnav-itemlabel",
-              labelOverflow,
-              "aria-live": "polite",
-              children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
-                value: footerLabel,
-                placement: "bottom-start"
-              }) : footerLabel
-            }),
-            /* @__PURE__ */ jsx(StyledSeparator, {
-              mt: "xxxs"
-            }),
-            /* @__PURE__ */ jsx(Grid, {
-              m: "0 12px",
-              children: /* @__PURE__ */ jsx(StyledMenuCollapse, {
-                size: "m",
-                color: ["brand-primary", 800],
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleOnClick(e);
-                },
-                "data-testid": "leftnav-footer-btn",
-                tabIndex: 0,
-                onFocus: (e) => {
-                  e.stopPropagation();
-                  setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);
-                },
-                role: "button",
-                "aria-label": "Collapse left navigation"
-              })
-            })
-          ]
-        })
+    children: /* @__PURE__ */ jsx(StyledFooterItem, {
+      ref: visibleItemsRefs.current[id],
+      tabIndex: expandedForAnimation ? -1 : 0,
+      expanded: expandedForAnimation,
+      pt: "xxs2",
+      height: expandedForAnimation ? "auto" : "48px",
+      alignItems: "flex-start",
+      pl: "xxs2",
+      cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
+      onClick: expandedForAnimation ? () => null : handleOnClick,
+      onKeyDown,
+      onFocus: () => setFocusedItem(id),
+      "data-testid": "leftnav-item-container",
+      role: "menuitem",
+      "aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
+      children: !expandedForAnimation ? /* @__PURE__ */ jsx(MenuExpand, {
+        size: "m",
+        color: ["brand-primary", 800],
+        "data-testid": "leftnav-footer-btn"
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(StyledFooterLabel, {
+            mt: "5px",
+            mr: "12px",
+            mb: "16px",
+            "data-testid": "leftnav-itemlabel",
+            labelOverflow,
+            "aria-live": "polite",
+            children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
+              value: footerLabel,
+              placement: "bottom-start"
+            }) : footerLabel
+          }),
+          /* @__PURE__ */ jsx(StyledFooterSeparator, {
+            mt: "xxxs"
+          }),
+          /* @__PURE__ */ jsx(StyledMenuCollapse, {
+            size: "m",
+            color: ["brand-primary", 800],
+            onClick: (e) => {
+              e.stopPropagation();
+              handleOnClick(e);
+            },
+            "data-testid": "leftnav-footer-btn",
+            tabIndex: 0,
+            onFocus: (e) => {
+              e.stopPropagation();
+              setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);
+            },
+            role: "button",
+            "aria-label": "Collapse left navigation"
+          })
+        ]
       })
     })
   }, id);
 };
-LeftNavFooterItem.propTypes = {
-  footerLabel: PropTypes.any,
-  onFooterExpand: PropTypes.func,
-  onFooterClose: PropTypes.func
-};
 var LeftNavFooterItem_default = LeftNavFooterItem;
 export {
   LeftNavFooterItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand } from '@elliemae/ds-icons';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledFooterMenu,\n  StyledItem,\n  StyledItemWrapper,\n  StyledLabel,\n  StyledSeparator,\n  StyledMenuCollapse,\n} from './styled';\nimport { useKeyboardNavigation } from '../../hooks';\nimport LeftNavigationContext from '../../LeftNavigationContext';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants';\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, openedItem },\n    expandedForAnimation,\n    setSelectedItem,\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      <StyledItemWrapper>\n        <StyledItem\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=\"xxs\"\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={expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`}\n        >\n          {!expandedForAnimation ? (\n            <MenuExpand size=\"m\" color={['brand-primary', 800]} data-testid=\"leftnav-footer-btn\" />\n          ) : (\n            <>\n              <StyledLabel\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              </StyledLabel>\n              <StyledSeparator mt=\"xxxs\" />\n              <Grid m=\"0 12px\">\n                <StyledMenuCollapse\n                  size=\"m\"\n                  color={['brand-primary', 800]}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    handleOnClick(e);\n                  }}\n                  data-testid=\"leftnav-footer-btn\"\n                  tabIndex={0}\n                  onFocus={(e) => {\n                    e.stopPropagation();\n                    setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n                  }}\n                  role=\"button\"\n                  aria-label=\"Collapse left navigation\"\n                />\n              </Grid>\n            </>\n          )}\n        </StyledItem>\n      </StyledItemWrapper>\n    </StyledFooterMenu>\n  );\n};\n\nLeftNavFooterItem.propTypes = {\n  footerLabel: PropTypes.any,\n  onFooterExpand: PropTypes.func,\n  onFooterClose: PropTypes.func,\n};\n\nexport default LeftNavFooterItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,OAAO,UAAU;AACjB,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,OAAO,2BAA2B;AAClC,SAAS,cAAc,+BAA+B;AAQ/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,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,YAAY,sBAAsB;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,oBAAC;AAAA,IAA0B,eAAY;AAAA,IACrC,8BAAC;AAAA,MACC,8BAAC;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,UAAU,uBAAuB,KAAK;AAAA,QACtC,UAAU;AAAA,QACV,IAAG;AAAA,QACH,QAAQ,uBAAuB,SAAS;AAAA,QACxC,YAAW;AAAA,QACX,IAAG;AAAA,QACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,QAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,QAC7C;AAAA,QACA,SAAS,MAAM,eAAe,EAAE;AAAA,QAChC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,cAAY,uBAAuB,WAAW,gBAAgB;AAAA,QAE7D,WAAC,uBACA,oBAAC;AAAA,UAAW,MAAK;AAAA,UAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,UAAG,eAAY;AAAA,SAAqB,IAErF;AAAA,UACE;AAAA,gCAAC;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,eAAY;AAAA,cACZ;AAAA,cACA,aAAU;AAAA,cAET,4BAAkB,aACjB,oBAAC;AAAA,gBAA2B,OAAO;AAAA,gBAAa,WAAU;AAAA,eAAe,IAEzE;AAAA,aAEJ;AAAA,YACA,oBAAC;AAAA,cAAgB,IAAG;AAAA,aAAO;AAAA,YAC3B,oBAAC;AAAA,cAAK,GAAE;AAAA,cACN,8BAAC;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,CAAC,iBAAiB,GAAG;AAAA,gBAC5B,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,gCAAc,CAAC;AAAA,gBACjB;AAAA,gBACA,eAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,iCAAe,uBAAuB;AAAA,gBACxC;AAAA,gBACA,MAAK;AAAA,gBACL,cAAW;AAAA,eACb;AAAA,aACF;AAAA;AAAA,SACF;AAAA,OAEJ;AAAA,KACF;AAAA,KA1DqB,EA2DvB;AAEJ;AAEA,kBAAkB,YAAY;AAAA,EAC5B,aAAa,UAAU;AAAA,EACvB,gBAAgB,UAAU;AAAA,EAC1B,eAAe,UAAU;AAC3B;AAEA,IAAO,4BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledFooterMenu,\n  StyledFooterItem,\n  StyledFooterWrapper,\n  StyledFooterLabel,\n  StyledFooterSeparator,\n  StyledMenuCollapse,\n} from './styled';\nimport { useKeyboardNavigation } from '../../hooks';\nimport LeftNavigationContext from '../../LeftNavigationContext';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants';\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              size=\"m\"\n              color={['brand-primary', 800]}\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          </>\n        )}\n      </StyledFooterItem>\n    </StyledFooterMenu>\n  );\n};\n\nexport default LeftNavFooterItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,OAAO,2BAA2B;AAClC,SAAS,cAAc,+BAA+B;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,IAAI,WAAW,qBAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,YAAY,sBAAsB;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,oBAAC;AAAA,IAA0B,eAAY;AAAA,IACrC,8BAAC;AAAA,MACC,KAAK,iBAAiB,QAAQ;AAAA,MAC9B,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,oBAAC;AAAA,QAAW,MAAK;AAAA,QAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,QAAG,eAAY;AAAA,OAAqB,IAErF;AAAA,QACE;AAAA,8BAAC;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET,4BAAkB,aACjB,oBAAC;AAAA,cAA2B,OAAO;AAAA,cAAa,WAAU;AAAA,aAAe,IAEzE;AAAA,WAEJ;AAAA,UACA,oBAAC;AAAA,YAAsB,IAAG;AAAA,WAAO;AAAA,UACjC,oBAAC;AAAA,YACC,MAAK;AAAA,YACL,OAAO,CAAC,iBAAiB,GAAG;AAAA,YAC5B,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,uBAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,WACb;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,KA1DqB,EA2DvB;AAEJ;AAEA,IAAO,4BAAQ;",
   "names": []
 }

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

@@ -3,20 +3,18 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { MenuCollapse } from "@elliemae/ds-icons";
 import { getLeftBorderStyle, getItemBackgroundStyle } from "../../common";
-const StyledFooterMenu = styled(Grid)`
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
+const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_MENU })`
   width: 100%;
   margin-top: auto;
   background: ${(props) => props.theme.colors.neutral["000"]};
-  ${getLeftBorderStyle}
   border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};
 `;
-const StyledItemWrapper = styled(Grid)`
+const StyledFooterItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_ITEM })`
   position: relative;
-  padding-left: ${(props) => props.theme.space.xxxs};
-`;
-const StyledItem = styled(Grid)`
+  ${getLeftBorderStyle}
   min-height: 48px;
   cursor: ${(props) => props.expanded ? "auto" : "pointer"};
@@ -37,29 +35,38 @@ const StyledItem = styled(Grid)`
     }
   }
 `;
-const StyledLabel = styled(Grid)`
+const StyledFooterLabel = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.FOOTER_LABEL
+})`
   font-size: 11px;
   color: ${(props) => props.theme.colors.neutral[500]};
   line-height: 14px;
   word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
 `;
-const StyledSeparator = styled(Grid)`
+const StyledFooterSeparator = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.FOOTER_SEPARATOR
+})`
   height: 16px;
   width: 1px;
   background-color: ${(props) => props.theme.colors.neutral[100]};
 `;
-const StyledMenuCollapse = styled(MenuCollapse)`
+const StyledMenuCollapse = styled(MenuCollapse, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE
+})`
+  margin: 0 12px;
   cursor: pointer;
   :focus {
     outline: 2px solid ${(props) => props.theme.colors.brand[700]};
   }
 `;
 export {
+  StyledFooterItem,
+  StyledFooterLabel,
   StyledFooterMenu,
-  StyledItem,
-  StyledItemWrapper,
-  StyledLabel,
-  StyledMenuCollapse,
-  StyledSeparator
+  StyledFooterSeparator,
+  StyledMenuCollapse
 };
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse } from '@elliemae/ds-icons';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common';\n\nexport const StyledFooterMenu = styled(Grid)`\n  width: 100%;\n  margin-top: auto;\n  background: ${(props) => props.theme.colors.neutral['000']};\n\n  ${getLeftBorderStyle}\n\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledItemWrapper = styled(Grid)`\n  position: relative;\n  padding-left: ${(props) => props.theme.space.xxxs};\n`;\n\nexport const StyledItem = styled(Grid)`\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 StyledLabel = styled(Grid)`\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 StyledSeparator = styled(Grid)`\n  height: 16px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(MenuCollapse)`\n  cursor: pointer;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,8BAA8B;AAEpD,MAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAElD;AAAA;AAAA,0BAEsB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA,kBAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA,YAEzB,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;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,cAAc,OAAO,IAAI;AAAA;AAAA,WAE3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrD,MAAM,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA,yBAG5B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse } from '@elliemae/ds-icons';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\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(MenuCollapse, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE,\n})`\n  margin: 0 12px;\n  cursor: pointer;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,sBAAsB,6BAA6B;AAErD,MAAM,mBAAmB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,0BAE5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,mBAAmB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,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;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrD,MAAM,qBAAqB,OAAO,cAAc;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/LeftNavLoading/index.js CHANGED Viewed

@@ -3,7 +3,8 @@ import { jsx } from "react/jsx-runtime";
 import DSCircularProgressIndicator from "@elliemae/ds-circular-progress-indicator";
 import Grid from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-const StyledLoaderWrapper = styled(Grid)`
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
+const StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`
   grid-area: left-nav-body;
   height: 100%;
   place-items: center;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavLoading/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSCircularProgressIndicator from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledLoaderWrapper = styled(Grid)`\n  grid-area: left-nav-body;\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>\n    <DSCircularProgressIndicator\n      size={expanded ? 'xl' : 'm'}\n      loading\n      showLabel={expanded}\n      waiting={false}\n      showTooltip={!expanded}\n    />\n  </StyledLoaderWrapper>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,iCAAiC;AACxC,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB,MAAM,sBAAsB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,oBAAC;AAAA,EACC,8BAAC;AAAA,IACC,MAAM,WAAW,OAAO;AAAA,IACxB,SAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,GAChB;AAAA,CACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSCircularProgressIndicator from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`\n  grid-area: left-nav-body;\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>\n    <DSCircularProgressIndicator\n      size={expanded ? 'xl' : 'm'}\n      loading\n      showLabel={expanded}\n      waiting={false}\n      showTooltip={!expanded}\n    />\n  </StyledLoaderWrapper>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,iCAAiC;AACxC,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B;AAE5D,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,oBAAC;AAAA,EACC,8BAAC;AAAA,IACC,MAAM,WAAW,OAAO;AAAA,IACxB,SAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,GAChB;AAAA,CACF;",
   "names": []
 }

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

@@ -16,6 +16,8 @@ const OutOfTheBoxMapItem = (props) => {
       ctx
     });
   }
+  if (!Component)
+    return null;
   return /* @__PURE__ */ jsx(Component, {
     item,
     ctx

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/OutOfTheBoxMapItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { outOfTheBoxComponents } from '../outOfTheBox';\nimport { OutOfTheBoxMapItemT } from '../index.d';\nimport { LeftNavContext } from '../LeftNavigationContext';\n\nexport const OutOfTheBoxMapItem = (props: OutOfTheBoxMapItemT): JSX.Element => {\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  // 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,6BAA6B;AAEtC,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,CAAC,UAA4C;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAMA,OAAM,WAAW,cAAc;AAE3C,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,sBAAsB,OAAO;AAC7D,UAAM,uBAAuB,sBAAsB;AACnD,WAAO,oBAAC;AAAA,MAAqB,MAAM,EAAE,UAAU,CAAC,GAAG,GAAG,KAAK;AAAA,MAAG;AAAA,KAAU;AAAA,EAC1E;AAEA,SAAO,oBAAC;AAAA,IAAU;AAAA,IAAY;AAAA,GAAU;AAC1C;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { outOfTheBoxComponents } from '../outOfTheBox';\nimport { OutOfTheBoxMapItemT } from '../index.d';\nimport { LeftNavContext } from '../LeftNavigationContext';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,6BAA6B;AAEtC,SAAS,sBAAsB;AAExB,MAAM,qBAA+D,CAAC,UAAU;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAMA,OAAM,WAAW,cAAc;AAE3C,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,sBAAsB,OAAO;AAC7D,UAAM,uBAAuB,sBAAsB;AACnD,WAAO,oBAAC;AAAA,MAAqB,MAAM,EAAE,UAAU,CAAC,GAAG,GAAG,KAAK;AAAA,MAAG;AAAA,KAAU;AAAA,EAC1E;AACA,MAAI,CAAC;AAAW,WAAO;AAEvB,SAAO,oBAAC;AAAA,IAAU;AAAA,IAAY;AAAA,GAAU;AAC1C;",
   "names": ["React"]
 }