@elliemae/ds-left-navigation 2.2.0-next.6 → 2.3.0-alpha.1

package/esm/parts/LeftNavContent/index.js

@@ -1,77 +1,67 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import React from 'react';
-import { LeftNavContext } from '../../LeftNavigationContext.js';
-import { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';
-import { LeftNavContentWithScrollbar } from '../LeftNavContentWithScrollbar/index.js';
-import { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';
-import { StyledLeftNavExpandAnimationWrapper, StyledLeftNavAreasContainer, StyledLeftNavFooterArea, StyledLeftNavHeaderArea, StyledLeftNavBodyAreasContainer, StyledLeftNavBodyHeaderArea, StyledLeftNavBodyItemsArea } from './styled.js';
-import { LeftNavLoading } from '../LeftNavLoading/index.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _LeftNavInnerContent;
-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.';
-
+import * as React from "react";
+import React2 from "react";
+import { LeftNavContext } from "../../LeftNavigationContext";
+import { LeftNavFooterItem } from "../LeftNavFooterItem";
+import { LeftNavContentWithScrollbar } from "../LeftNavContentWithScrollbar";
+import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem";
+import {
+  StyledLeftNavExpandAnimationWrapper,
+  StyledLeftNavAreasContainer,
+  StyledLeftNavHeaderArea,
+  StyledLeftNavBodyAreasContainer,
+  StyledLeftNavBodyHeaderArea,
+  StyledLeftNavBodyItemsArea,
+  StyledLeftNavFooterArea
+} from "./styled";
+import { LeftNavLoading } from "../LeftNavLoading";
+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 },
     selectedItem
-  } = React.useContext(LeftNavContext);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(StyledLeftNavHeaderArea, {
-      "data-testid": "leftnav-header-area",
-      selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
-    }, void 0, HeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
-      item: HeaderComponent
-    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyAreasContainer, {}, void 0, /*#__PURE__*/_jsx(StyledLeftNavBodyHeaderArea, {
-      "data-testid": "leftnav-body-header-area",
-      selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
-    }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
-      item: BodyHeaderComponent
-    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyItemsArea, {
-      selected: !withoutBodyShadow && openedItem !== null,
-      "data-testid": "leftnav-body-items-area",
-      tabIndex: -1
-    }, void 0, /*#__PURE__*/_jsx(LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
-      item: item
-    }, item.dsId)))))]
-  });
+  } = React2.useContext(LeftNavContext);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledLeftNavHeaderArea, {
+    "data-testid": "leftnav-header-area",
+    selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
+  }, HeaderComponent ? /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
+    item: HeaderComponent
+  }) : null), /* @__PURE__ */ React2.createElement(StyledLeftNavBodyAreasContainer, null, /* @__PURE__ */ React2.createElement(StyledLeftNavBodyHeaderArea, {
+    "data-testid": "leftnav-body-header-area",
+    selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
+  }, BodyHeaderComponent ? /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
+    item: BodyHeaderComponent
+  }) : null), /* @__PURE__ */ React2.createElement(StyledLeftNavBodyItemsArea, {
+    selected: !withoutBodyShadow && openedItem !== null,
+    "data-testid": "leftnav-body-items-area",
+    tabIndex: -1
+  }, /* @__PURE__ */ React2.createElement(LeftNavContentWithScrollbar, null, items.map((item) => /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
+    item,
+    key: item.dsId
+  }))))));
 };
-
 const LeftNavContent = () => {
   const {
     expandedForAnimation,
-    leftNavProps: {
-      expanded,
-      expandedWidth,
-      footerLabel,
-      onFooterExpand,
-      onFooterClose,
-      loading
-    }
-  } = React.useContext(LeftNavContext);
-  return /*#__PURE__*/_jsx(StyledLeftNavExpandAnimationWrapper, {
-    expandedWidth: expandedWidth,
-    expanded: expanded,
+    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading }
+  } = React2.useContext(LeftNavContext);
+  return /* @__PURE__ */ React2.createElement(StyledLeftNavExpandAnimationWrapper, {
+    expandedWidth,
+    expanded,
     "data-testid": "leftnav-component",
     "aria-label": leftNavScreenReaderInstructions
-  }, void 0, /*#__PURE__*/_jsx(StyledLeftNavAreasContainer, {
-    expandedWidth: expandedWidth,
+  }, /* @__PURE__ */ React2.createElement(StyledLeftNavAreasContainer, {
+    expandedWidth,
     expanded: expandedForAnimation
-  }, void 0, loading && /*#__PURE__*/_jsx(LeftNavLoading, {
+  }, loading && /* @__PURE__ */ React2.createElement(LeftNavLoading, {
     expanded: expandedForAnimation
-  }), !loading && (_LeftNavInnerContent || (_LeftNavInnerContent = /*#__PURE__*/_jsx(LeftNavInnerContent, {}))), /*#__PURE__*/_jsx(StyledLeftNavFooterArea, {}, void 0, /*#__PURE__*/_jsx(LeftNavFooterItem, {
-    footerLabel: footerLabel,
-    onFooterExpand: onFooterExpand,
-    onFooterClose: onFooterClose
+  }), !loading && /* @__PURE__ */ React2.createElement(LeftNavInnerContent, null), /* @__PURE__ */ React2.createElement(StyledLeftNavFooterArea, null, /* @__PURE__ */ React2.createElement(LeftNavFooterItem, {
+    footerLabel,
+    onFooterExpand,
+    onFooterClose
   }))));
 };
-
-export { LeftNavContent as default };
+var LeftNavContent_default = LeftNavContent;
+export {
+  LeftNavContent_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 { LeftNavContentWithScrollbar } from '../LeftNavContentWithScrollbar';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n  StyledLeftNavFooterArea,\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          <LeftNavContentWithScrollbar>\n            {items.map((item) => (\n              <OutOfTheBoxMapItem item={item} key={item.dsId} />\n            ))}\n          </LeftNavContentWithScrollbar>\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;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO;AAAA,IACzE;AAAA,MACE,OAAM,WAAW;AACrB,SACE,4DACE,qCAAC,yBAAD;AAAA,IACE,eAAY;AAAA,IACZ,UAAU,mBAAmB,CAAC,cAAc,YAAY,SAAS,gBAAgB;AAAA,KAEhF,kBAAkB,qCAAC,oBAAD;AAAA,IAAoB,MAAM;AAAA,OAAsB,OAErE,qCAAC,iCAAD,MACE,qCAAC,6BAAD;AAAA,IACE,eAAY;AAAA,IACZ,UAAU,uBAAuB,CAAC,cAAc,YAAY,SAAS,oBAAoB;AAAA,KAExF,sBAAsB,qCAAC,oBAAD;AAAA,IAAoB,MAAM;AAAA,OAA0B,OAE7E,qCAAC,4BAAD;AAAA,IACE,UAAU,CAAC,qBAAqB,eAAe;AAAA,IAC/C,eAAY;AAAA,IACZ,UAAU;AAAA,KAEV,qCAAC,6BAAD,MACG,MAAM,IAAI,CAAC,SACV,qCAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY,KAAK,KAAK;AAAA;AAAA;AASxD,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe;AAAA,MACnF,OAAM,WAAW;AAErB,SACE,qCAAC,qCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,KAEZ,qCAAC,6BAAD;AAAA,IAA6B;AAAA,IAA8B,UAAU;AAAA,KAClE,WAAW,qCAAC,gBAAD;AAAA,IAAgB,UAAU;AAAA,MACrC,CAAC,WAAW,qCAAC,qBAAD,OACb,qCAAC,yBAAD,MACE,qCAAC,mBAAD;AAAA,IAAmB;AAAA,IAA0B;AAAA,IAAgC;AAAA;AAAA;AAOvF,IAAO,yBAAQ;",
+  "names": []
+}

package/esm/parts/LeftNavContent/styled.js

@@ -1,39 +1,84 @@
-import styled from 'styled-components';
-
-const getLeftShadowStyles = _ref => {
-  let {
-    selected,
-    selectedParent,
-    theme
-  } = _ref;
-
+import * as React from "react";
+import styled from "styled-components";
+const getLeftShadowStyles = ({
+  selected,
+  selectedParent,
+  theme
+}) => {
   if (!selected && !selectedParent) {
-    return "\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[300], ";\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n      }\n    ");
+    return `
+      box-shadow: inset 4px 0 0 0 transparent;
+      :hover {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};
+      }
+      :active {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+      }
+    `;
   }
-
-  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
+  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
 };
-
-const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled.nav.withConfig({
-  componentId: "sc-1hvvtkb-0"
-})(["width:", ";transition:width ", " 350ms;box-shadow:-1px 0 0 0 ", ";border:1px solid ", ";overflow:hidden;height:100%;position:relative;"], props => props.expanded ? props.expandedWidth : '48px', props => props.expanded ? 'ease-out' : 'ease-in', props => props.theme.colors.neutral[100], props => props.theme.colors.neutral[100]);
-const StyledLeftNavAreasContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-1"
-})(["position:absolute;width:", ";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';"], props => props.expanded ? "calc(".concat(props.expandedWidth, " - 2px)") : '46px');
-const StyledLeftNavHeaderArea = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-2"
-})(["grid-area:left-nav-header;", ""], getLeftShadowStyles);
-const StyledLeftNavBodyAreasContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-3"
-})(["position:absolute;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 = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-4"
-})(["width:100%;grid-area:left-nav-body-header;", ""], getLeftShadowStyles);
-const StyledLeftNavBodyItemsArea = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-5"
-})(["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 = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1hvvtkb-6"
-})(["width:100%;grid-area:left-nav-footer;"]);
-
-export { StyledLeftNavAreasContainer, StyledLeftNavBodyAreasContainer, StyledLeftNavBodyHeaderArea, StyledLeftNavBodyItemsArea, StyledLeftNavExpandAnimationWrapper, StyledLeftNavFooterArea, StyledLeftNavHeaderArea };
+const StyledLeftNavExpandAnimationWrapper = styled.nav`
+  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]};
+  border: 1px solid ${(props) => props.theme.colors.neutral[100]};
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+`;
+const StyledLeftNavAreasContainer = styled.div`
+  position: absolute;
+  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;
+  ${getLeftShadowStyles}
+`;
+const StyledLeftNavBodyAreasContainer = styled.div`
+  position: absolute;
+  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`
+  width: 100%;
+  grid-area: left-nav-body-header;
+  ${getLeftShadowStyles}
+`;
+const StyledLeftNavBodyItemsArea = styled.div`
+  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;
+`;
+export {
+  StyledLeftNavAreasContainer,
+  StyledLeftNavBodyAreasContainer,
+  StyledLeftNavBodyHeaderArea,
+  StyledLeftNavBodyItemsArea,
+  StyledLeftNavExpandAnimationWrapper,
+  StyledLeftNavFooterArea,
+  StyledLeftNavHeaderArea
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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 styled from 'styled-components';\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"],
+  "mappings": "AAAA;ACAA;AAOA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,MAKI;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;AAIvD,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAAA;AAGpD,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;",
+  "names": []
+}

package/esm/parts/LeftNavContentWithScrollbar/index.js

@@ -1,80 +1,72 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useEffect } from 'react';
-import 'overlayscrollbars/css/OverlayScrollbars.css';
-import OverlayScrollbars from 'overlayscrollbars';
-import styled from 'styled-components';
-import { jsxs } from 'react/jsx-runtime';
+import * as React from "react";
+import React2, { useEffect, useRef, useState } from "react";
+import "overlayscrollbars/css/OverlayScrollbars.css";
+import OverlayScrollbars from "overlayscrollbars";
+import styled from "styled-components";
+const StyledHandle = styled.div`
+  width: 6px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-color: rgba(105, 116, 137, 0.5) !important;
+  border-radius: 7px;
 
-var _div, _div2, _div3, _div4;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  :hover {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const StyledHandle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-yn7jj3-0"
-})(["width:6px;border:1px solid rgba(0,0,0,0);background-color:rgba(105,116,137,0.5) !important;border-radius:7px;:hover{background-color:rgba(105,116,137,0.7) !important;}:active{background-color:rgba(105,116,137,0.7) !important;}"]);
+  :active {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
+`;
 const options = {
-  className: 'os-theme-dark',
+  className: "os-theme-dark",
   scrollbars: {
-    autoHide: 'leave',
+    autoHide: "leave",
     autoHideDelay: 0
   }
 };
-const LeftNavContentWithScrollbar = props => {
-  const {
-    children
-  } = props;
-  const inheritBoxShadow = {
-    boxShadow: 'inherit'
-  };
+const LeftNavContentWithScrollbar = (props) => {
+  const { children } = props;
+  const inheritBoxShadow = { boxShadow: "inherit" };
   const [osInstance, setOsInstance] = useState();
   const osTargetRef = useRef(null);
   useEffect(() => {
     const nextOsInstance = OverlayScrollbars(osTargetRef.current, options);
     setOsInstance(nextOsInstance);
   }, [osInstance]);
-  return /*#__PURE__*/jsxs("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     className: "os-host",
-    style: _objectSpread({
-      height: '100%'
-    }, inheritBoxShadow),
+    style: { height: "100%", ...inheritBoxShadow },
     tabIndex: -1,
-    ref: osTargetRef,
-    children: [_div || (_div = /*#__PURE__*/_jsx("div", {
-      className: "os-resize-observer-host"
-    })), /*#__PURE__*/_jsx("div", {
-      className: "os-padding",
-      style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      className: "os-viewport",
-      style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      className: "os-content",
-      style: inheritBoxShadow,
-      "aria-hidden": true
-    }, void 0, children))), _div2 || (_div2 = /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar os-scrollbar-horizontal "
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar-handle"
-    })))), _div3 || (_div3 = /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar os-scrollbar-vertical"
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx(StyledHandle, {
-      className: "os-scrollbar-handle"
-    })))), _div4 || (_div4 = /*#__PURE__*/_jsx("div", {
-      className: "os-scrollbar-corner"
-    }))]
-  });
+    ref: osTargetRef
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-resize-observer-host"
+  }), /* @__PURE__ */ React2.createElement("div", {
+    className: "os-padding",
+    style: inheritBoxShadow
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-viewport",
+    style: inheritBoxShadow
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-content",
+    style: inheritBoxShadow,
+    "aria-hidden": true
+  }, children))), /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar os-scrollbar-horizontal "
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar-handle"
+  }))), /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar os-scrollbar-vertical"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /* @__PURE__ */ React2.createElement(StyledHandle, {
+    className: "os-scrollbar-handle"
+  }))), /* @__PURE__ */ React2.createElement("div", {
+    className: "os-scrollbar-corner"
+  }));
 };
-
-export { LeftNavContentWithScrollbar };
+export {
+  LeftNavContentWithScrollbar
+};
+//# sourceMappingURL=index.js.map

package/esm/parts/LeftNavContentWithScrollbar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContentWithScrollbar/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useRef, useState } from 'react';\nimport 'overlayscrollbars/css/OverlayScrollbars.css';\nimport OverlayScrollbars, { Options } from 'overlayscrollbars';\nimport styled from 'styled-components';\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\nconst StyledHandle = styled.div`\n  width: 6px;\n  border: 1px solid rgba(0, 0, 0, 0);\n  background-color: rgba(105, 116, 137, 0.5) !important;\n  border-radius: 7px;\n\n  :hover {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n\n  :active {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n`;\n\nconst options: Options = {\n  className: 'os-theme-dark',\n  scrollbars: {\n    autoHide: 'leave',\n    autoHideDelay: 0,\n  },\n};\n\nexport const LeftNavContentWithScrollbar: React.ComponentType<OverlayScrollbarsComponentProps> = (props) => {\n  const { children } = props;\n\n  const inheritBoxShadow = { boxShadow: 'inherit' };\n  const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n  const osTargetRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n    setOsInstance(nextOsInstance);\n  }, [osInstance]);\n\n  return (\n    <div className=\"os-host\" style={{ height: '100%', ...inheritBoxShadow }} tabIndex={-1} ref={osTargetRef}>\n      <div className=\"os-resize-observer-host\" />\n      <div className=\"os-padding\" style={inheritBoxShadow}>\n        <div className=\"os-viewport\" style={inheritBoxShadow}>\n          <div className=\"os-content\" style={inheritBoxShadow} aria-hidden>\n            {children}\n          </div>\n        </div>\n      </div>\n      <div className=\"os-scrollbar os-scrollbar-horizontal \">\n        <div className=\"os-scrollbar-track\">\n          <div className=\"os-scrollbar-handle\" />\n        </div>\n      </div>\n      <div className=\"os-scrollbar os-scrollbar-vertical\">\n        <div className=\"os-scrollbar-track\">\n          <StyledHandle className=\"os-scrollbar-handle\"></StyledHandle>\n        </div>\n      </div>\n      <div className=\"os-scrollbar-corner\" />\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAMA,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5B,MAAM,UAAmB;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA;AAAA;AAIZ,MAAM,8BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,aAAa;AAErB,QAAM,mBAAmB,EAAE,WAAW;AACtC,QAAM,CAAC,YAAY,iBAAiB;AACpC,QAAM,cAAc,OAAuB;AAE3C,YAAU,MAAM;AACd,UAAM,iBAAoC,kBAAkB,YAAY,SAAS;AACjF,kBAAc;AAAA,KACb,CAAC;AAEJ,SACE,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAU,OAAO,EAAE,QAAQ,WAAW;AAAA,IAAoB,UAAU;AAAA,IAAI,KAAK;AAAA,KAC1F,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,MACf,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAa,OAAO;AAAA,KACjC,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAc,OAAO;AAAA,KAClC,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAa,OAAO;AAAA,IAAkB,eAAW;AAAA,KAC7D,aAIP,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,QAGnB,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,qCAAC,cAAD;AAAA,IAAc,WAAU;AAAA,QAG5B,qCAAC,OAAD;AAAA,IAAK,WAAU;AAAA;AAAA;",
+  "names": []
+}

package/esm/parts/LeftNavFooterItem/index.js

@@ -1,31 +1,29 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { MenuExpand } from '@elliemae/ds-icons';
-import Grid from '@elliemae/ds-grid';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledFooterMenu, StyledItemWrapper, StyledItem, StyledLabel, StyledSeparator, StyledMenuCollapse } from './styled.js';
-import { LeftNavContext } from '../../LeftNavigationContext.js';
-import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation.js';
-import { FOOTER_MENU_CLOSE_DS_ID, FOOTER_DS_ID } from '../../exported-related/constants.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var _StyledSeparator;
-const LeftNavFooterItem = props => {
+import * as React from "react";
+import React2, { useContext } from "react";
+import { MenuExpand } from "@elliemae/ds-icons";
+import { PropTypes } from "react-desc";
+import Grid from "@elliemae/ds-grid";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import {
+  StyledFooterMenu,
+  StyledItem,
+  StyledItemWrapper,
+  StyledLabel,
+  StyledSeparator,
+  StyledMenuCollapse
+} from "./styled";
+import { useKeyboardNavigation } from "../../hooks";
+import LeftNavigationContext from "../../LeftNavigationContext";
+import { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../../exported-related/constants";
+const LeftNavFooterItem = (props) => {
+  const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
   const {
-    footerLabel,
-    onFooterExpand = () => null,
-    onFooterClose = () => null
-  } = props;
-  const {
-    leftNavProps: {
-      labelOverflow,
-      openedItem
-    },
+    leftNavProps: { labelOverflow, openedItem },
     expandedForAnimation,
     setSelectedItem,
     setFocusedItem,
     visibleItemsRefs
-  } = useContext(LeftNavContext);
+  } = useContext(LeftNavigationContext);
   const id = FOOTER_DS_ID;
   const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;
   const onKeyDown = useKeyboardNavigation({
@@ -39,60 +37,67 @@ const LeftNavFooterItem = props => {
     },
     onClick: handleOnClick
   });
-  return /*#__PURE__*/_jsx(StyledFooterMenu, {
+  return /* @__PURE__ */ React2.createElement(StyledFooterMenu, {
+    key: id,
     "data-testid": "leftnav-container"
-  }, id, /*#__PURE__*/_jsx(StyledItemWrapper, {}, void 0, /*#__PURE__*/jsx(StyledItem, {
+  }, /* @__PURE__ */ React2.createElement(StyledItemWrapper, null, /* @__PURE__ */ React2.createElement(StyledItem, {
     ref: visibleItemsRefs.current[id],
     tabIndex: expandedForAnimation ? -1 : 0,
     expanded: expandedForAnimation,
     pt: "xxs2",
-    height: expandedForAnimation ? 'auto' : '48px',
+    height: expandedForAnimation ? "auto" : "48px",
     alignItems: "flex-start",
     pl: "xxs",
-    cols: expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'],
+    cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
     onClick: expandedForAnimation ? () => null : handleOnClick,
-    onKeyDown: onKeyDown,
+    onKeyDown,
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? "Footer, ".concat(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: labelOverflow,
-        "aria-live": "polite"
-      }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-        value: footerLabel,
-        placement: "bottom-start"
-      }) : footerLabel), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
-        mt: "xxxs"
-      })), /*#__PURE__*/_jsx(Grid, {
-        m: "0 12px"
-      }, void 0, /*#__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"
-      }))]
-    })
-  })));
+    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`
+  }, !expandedForAnimation ? /* @__PURE__ */ React2.createElement(MenuExpand, {
+    size: "m",
+    color: ["brand-primary", 800],
+    "data-testid": "leftnav-footer-btn"
+  }) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledLabel, {
+    mt: "5px",
+    mr: "12px",
+    mb: "16px",
+    "data-testid": "leftnav-itemlabel",
+    labelOverflow,
+    "aria-live": "polite"
+  }, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    value: footerLabel,
+    placement: "bottom-start"
+  }) : footerLabel), /* @__PURE__ */ React2.createElement(StyledSeparator, {
+    mt: "xxxs"
+  }), /* @__PURE__ */ React2.createElement(Grid, {
+    m: "0 12px"
+  }, /* @__PURE__ */ React2.createElement(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"
+  }))))));
+};
+LeftNavFooterItem.propTypes = {
+  footerLabel: PropTypes.any,
+  onFooterExpand: PropTypes.func,
+  onFooterClose: PropTypes.func
+};
+var LeftNavFooterItem_default = LeftNavFooterItem;
+export {
+  LeftNavFooterItem,
+  LeftNavFooterItem_default as default
 };
-
-export { LeftNavFooterItem, LeftNavFooterItem as default };
+//# sourceMappingURL=index.js.map