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

@elliemae/ds-left-navigation 3.11.0-next.2 → 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/exported-related/ItemRenderer/index.js CHANGED Viewed

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback } from "react";
-import Grid from "@elliemae/ds-grid";
-import { StyledItemWrapper, StyledItem } from "./styled";
+import { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from "./styled";
 import { LeftNavContext } from "../../LeftNavigationContext";
 import { usePropsWithDefaults } from "./usePropsWithDefaults";
 import { useKeyboardNavigation } from "../../hooks";
@@ -60,52 +59,45 @@ const ItemRenderer = (props) => {
   }
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsxs(StyledItemWrapper, {
+      /* @__PURE__ */ jsxs(StyledItem, {
+        ref: visibleItemsRefs.current[dsId],
+        pt: paddingTop,
+        pl: indent === void 0 ? "xxxs" : `${indent}px`,
+        minHeight,
         shadowStyle: shadowStyle(opened, item.type),
-        "data-testid": "leftnav-item-wrapper",
+        alignItems: "flex-start",
+        cols,
+        onClick: !opened ? handleOnClick : () => null,
+        onKeyDown,
+        selectable,
+        selected: isSelected,
+        selectedParent: selectedParent === dsId,
+        opened,
+        onFocus: handleFocus,
+        "data-testid": "leftnav-item-container",
+        tabIndex: focuseable ? 0 : -1,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        role: ariaRole,
+        "data-selected": isSelected,
+        "data-selectedparent": selectedParent === dsId,
+        "data-opened": opened,
+        "data-type": item.type,
+        "aria-label": ariaLabel,
+        "aria-hidden": !focuseable,
+        "aria-live": ariaLive,
         children: [
-          /* @__PURE__ */ jsx(StyledItem, {
-            ref: visibleItemsRefs.current[dsId],
-            pt: paddingTop,
-            pl: indent === void 0 ? "xxxs" : `${indent}px`,
-            minHeight,
-            shadowStyle: shadowStyle(opened, item.type),
-            alignItems: "flex-start",
-            cols,
-            onClick: !opened ? handleOnClick : () => null,
-            onKeyDown,
-            selectable,
-            selected: isSelected,
-            selectedParent: selectedParent === dsId,
+          !expandedForAnimation ? /* @__PURE__ */ jsx(StyledCollapsedContainer, {
+            "data-testid": "leftnav-leftcomponent",
+            justifyContent: "center",
+            children: CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, {
+              item,
+              ctx
+            })
+          }) : children,
+          hasBorderBottom && /* @__PURE__ */ jsx(StyledBorderBottom, {
             opened,
-            onFocus: handleFocus,
-            "data-testid": "leftnav-item-container",
-            tabIndex: focuseable ? 0 : -1,
-            "aria-describedby": ariaDescribedBy,
-            "aria-expanded": ariaExpanded,
-            role: ariaRole,
-            "data-selected": isSelected,
-            "data-selectedparent": selectedParent === dsId,
-            "aria-label": ariaLabel,
-            "aria-hidden": !focuseable,
-            "aria-live": ariaLive,
-            children: !expandedForAnimation ? /* @__PURE__ */ jsx(Grid, {
-              "data-testid": "leftnav-leftcomponent",
-              justifyContent: "center",
-              children: /* @__PURE__ */ jsx(CollapsedComponent, {
-                item,
-                ctx
-              })
-            }) : children
-          }),
-          hasBorderBottom && /* @__PURE__ */ jsx("div", {
-            style: {
-              marginLeft: opened ? "16px" : "0px",
-              marginRight: borderBottomMr,
-              height: "1px",
-              width: `calc(100% - ${borderBottomMr} - ${opened ? "16px" : "0px"})`,
-              backgroundColor: "#E0E3E8"
-            }
+            borderBottomMr
           })
         ]
       }),

package/dist/esm/exported-related/ItemRenderer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledItemWrapper shadowStyle={shadowStyle(opened, item.type)} data-testid=\"leftnav-item-wrapper\">\n        <StyledItem\n          ref={visibleItemsRefs.current[dsId]}\n          pt={paddingTop}\n          pl={indent === undefined ? 'xxxs' : `${indent}px`}\n          minHeight={minHeight}\n          shadowStyle={shadowStyle(opened, item.type)}\n          alignItems=\"flex-start\"\n          cols={cols}\n          onClick={!opened ? handleOnClick : () => null}\n          onKeyDown={onKeyDown}\n          selectable={selectable}\n          selected={isSelected}\n          selectedParent={selectedParent === dsId}\n          opened={opened}\n          onFocus={handleFocus}\n          data-testid=\"leftnav-item-container\"\n          tabIndex={focuseable ? 0 : -1}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          role={ariaRole}\n          data-selected={isSelected}\n          data-selectedparent={selectedParent === dsId}\n          aria-label={ariaLabel}\n          aria-hidden={!focuseable}\n          aria-live={ariaLive}\n        >\n          {!expandedForAnimation ? (\n            <Grid data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n              <CollapsedComponent item={item} ctx={ctx} />\n            </Grid>\n          ) : (\n            children\n          )}\n        </StyledItem>\n        {hasBorderBottom && (\n          <div\n            style={{\n              marginLeft: opened ? '16px' : '0px',\n              marginRight: borderBottomMr,\n              height: '1px',\n              width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,\n              backgroundColor: '#E0E3E8',\n            }}\n          />\n        )}\n      </StyledItemWrapper>\n      {subitems}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId as string);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId as string);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledItem\n        ref={visibleItemsRefs.current[dsId]}\n        pt={paddingTop}\n        pl={indent === undefined ? 'xxxs' : `${indent}px`}\n        minHeight={minHeight}\n        shadowStyle={shadowStyle(opened, item.type)}\n        alignItems=\"flex-start\"\n        cols={cols}\n        onClick={!opened ? handleOnClick : () => null}\n        onKeyDown={onKeyDown}\n        selectable={selectable}\n        selected={isSelected}\n        selectedParent={selectedParent === dsId}\n        opened={opened}\n        onFocus={handleFocus}\n        data-testid=\"leftnav-item-container\"\n        tabIndex={focuseable ? 0 : -1}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        role={ariaRole}\n        data-selected={isSelected}\n        data-selectedparent={selectedParent === dsId}\n        data-opened={opened}\n        data-type={item.type}\n        aria-label={ariaLabel}\n        aria-hidden={!focuseable}\n        aria-live={ariaLive}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAGzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IACE;AAAA,2BAAC;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,eAAa,CAAC;AAAA,QACd,aAAW;AAAA,QAEV;AAAA,WAAC,uBACA,oBAAC;AAAA,YAAyB,eAAY;AAAA,YAAwB,gBAAe;AAAA,YAC1E,gCAAsB,oBAAC;AAAA,cAAmB;AAAA,cAAY;AAAA,aAAU;AAAA,WACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC;AAAA,YAAmB;AAAA,YAAgB;AAAA,WAAgC;AAAA;AAAA,OAC1F;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/exported-related/ItemRenderer/styled.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from "react";
 import Grid from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
 const borderOutside = (color, weight = 2) => `&:before {
   content: '';
   position: absolute;
@@ -11,10 +12,6 @@ const borderOutside = (color, weight = 2) => `&:before {
   border: ${weight}px solid ${color};
   pointer-events: none;
 }`;
-const StyledItemWrapper = styled(Grid)`
-  position: relative;
-  ${(props) => props.shadowStyle(props.theme)}
-`;
 const getItemBackground = ({ selectable, opened, selected, theme }) => {
   if (!selectable)
     return "white";
@@ -29,7 +26,8 @@ const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
     return theme.colors.brand[200];
   return theme.colors.brand["200"];
 };
-const StyledItem = styled(Grid)`
+const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })`
+  position: relative;
   cursor: ${(props) => props.selectable && !props.opened ? "pointer" : "auto"};
   min-height: ${(props) => props.minHeight};
@@ -49,13 +47,30 @@ const StyledItem = styled(Grid)`
   outline: none;
-  ${(props) => props.tabIndex !== -1 ? `:focus {
-    ${borderOutside(props.theme.colors.brand[700])}
-        }` : ""}
+  :focus {
+    ${(props) => borderOutside(props.theme.colors.brand[700])}
+  }
+`;
+const StyledCollapsedContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER
+})``;
+const StyledBorderBottom = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM
+})`
+  margin-left: ${({ opened }) => opened ? "16px" : "0px"};
+  margin-right: ${({ borderBottomMr }) => borderBottomMr};
+  height: 1px;
+  width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => opened ? "16px" : "0px"});
+  background-color: #e0e3e8;
+  grid-column: span 3;
+  align-self: end;
 `;
 export {
+  StyledBorderBottom,
+  StyledCollapsedContainer,
   StyledItem,
-  StyledItemWrapper,
   borderOutside
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/exported-related/ItemRenderer/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\ninterface ItemProps {\n  selected: boolean;\n  selectable: boolean;\n  opened: boolean;\n  theme: any;\n  shadowStyle: (theme: any) => string;\n}\n\nexport const borderOutside = (color, weight = 2): string => `&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ${weight}px solid ${color};\n  pointer-events: none;\n}`;\n\nexport const StyledItemWrapper = styled(Grid)<{\n  shadowStyle: (theme: any) => string;\n}>`\n  position: relative;\n  ${(props) => props.shadowStyle(props.theme)}\n`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid)<{ minHeight: string } & ItemProps>`\n  cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n  min-height: ${(props) => props.minHeight};\n\n  background: ${getItemBackground};\n\n  ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n  :hover {\n    background: ${getItemHoverBackground};\n  }\n\n  :active {\n    background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n  }\n\n  ${(props) => props.shadowStyle(props.theme)};\n\n  outline: none;\n\n  ${(props) =>\n    props.tabIndex !== -1\n      ? `:focus {\n    ${borderOutside(props.theme.colors.brand[700])}\n        }`\n      : ''}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAO,UAAU;AACjB,SAAS,cAAc;AAUhB,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhD,kBAAkB;AAAA;AAAA;AAIvB,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA,IAIxC,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAG5C,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,aAAa,OAAO,IAAI;AAAA,YACzB,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UACD,MAAM,aAAa,KACf;AAAA,MACF,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,aAEzC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ninterface ItemProps {\n  selected: boolean;\n  selectable: boolean;\n  opened: boolean;\n  theme: Theme;\n  shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ${weight}px solid ${color};\n  pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n  if (!selectable) return 'white';\n  if (selected && !opened) return theme.colors.brand[200];\n  return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n  { minHeight: string } & ItemProps\n>`\n  position: relative;\n  cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n  min-height: ${(props) => props.minHeight};\n\n  background: ${getItemBackground};\n\n  ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n  :hover {\n    background: ${getItemHoverBackground};\n  }\n\n  :active {\n    background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n  }\n\n  ${(props) => props.shadowStyle(props.theme)};\n\n  outline: none;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700])}\n  }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n  margin-left: ${({ opened }) => (opened ? '16px' : '0px')};\n  margin-right: ${({ borderBottomMr }) => borderBottomMr};\n  height: 1px;\n  width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '16px' : '0px')});\n  background-color: #e0e3e8;\n  grid-column: span 3;\n  align-self: end;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAIrD,MAAM,2BAA2B,OAAO,MAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA,uBAEnB,CAAC,EAAE,eAAe,MAAM,oBAAoB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js CHANGED Viewed

@@ -25,7 +25,7 @@ const usePropsWithDefaults = (props) => {
       minHeight: "48px",
       paddingTop: "12px",
       subitems: [],
-      shadowStyle: (opened, type) => (theme) => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? "inset 4px 0 0 0 #52A6EC" : "inset 4px 0 0 0 white"}`,
+      shadowStyle: (opened, type) => () => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? "inset 4px 0 0 0 #52A6EC" : "inset 4px 0 0 0 white"}`,
       hasBorderBottom: false,
       borderBottomMr: "0px",
       ...props,

package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n  label: '',\n  labelOverflow: 'truncate',\n  selectable: true,\n  focuseable: true,\n  openable: false,\n  closable: false,\n  ariaLabel: '',\n  ariaRole: 'menuitem',\n  ariaLive: 'off',\n  ariaExpanded: undefined,\n  ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): ItemRendererT => {\n  const propsWithDefault = useMemo(() => {\n    const itemWithDefaults = {\n      CollapsedComponent: () => null,\n      ...props.item,\n      itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n    };\n    return {\n      minHeight: '48px',\n      paddingTop: '12px',\n      subitems: [],\n      shadowStyle: (opened: boolean, type: string) => (theme: any) =>\n        `box-shadow: ${\n          opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n        }`,\n      hasBorderBottom: false,\n      borderBottomMr: '0px',\n      ...props,\n      item: itemWithDefaults,\n    };\n  }, [props]);\n\n  return propsWithDefault;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAAC,UAAwC;AAC3E,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,CAAC,UAC/C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { ItemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: ItemOptsT = {\n  label: '',\n  labelOverflow: 'truncate',\n  selectable: true,\n  focuseable: true,\n  openable: false,\n  closable: false,\n  ariaLabel: '',\n  ariaRole: 'menuitem',\n  ariaLive: 'off',\n  ariaExpanded: undefined,\n  ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): Required<ItemRendererT> => {\n  const propsWithDefault = useMemo(() => {\n    const itemWithDefaults = {\n      CollapsedComponent: () => null,\n      ...props.item,\n      itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n    };\n    return {\n      minHeight: '48px',\n      paddingTop: '12px',\n      subitems: [],\n      shadowStyle: (opened: boolean, type: string) => () =>\n        `box-shadow: ${\n          opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n        }`,\n      hasBorderBottom: false,\n      borderBottomMr: '0px',\n      ...props,\n      item: itemWithDefaults,\n    };\n  }, [props]);\n\n  return propsWithDefault as Required<ItemRendererT>;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAAC,UAAkD;AACrF,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/Notifications/index.js CHANGED Viewed

@@ -8,7 +8,11 @@ import {
 } from "@elliemae/ds-icons";
 import { styled } from "@elliemae/ds-system";
 import Grid from "@elliemae/ds-grid";
-const StyledIcon = styled.div`
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
+const StyledIconContainer = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER
+})`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17,7 +21,7 @@ const Notifications = ({
   exceptions = false,
   alerts = false,
   messages = false
-}) => /* @__PURE__ */ jsxs(StyledIcon, {
+}) => /* @__PURE__ */ jsxs(StyledIconContainer, {
   children: [
     /* @__PURE__ */ jsx(InternalNotifications, {
       size: "m",
@@ -36,7 +40,7 @@ const Notifications = ({
           children: exceptions && /* @__PURE__ */ jsx(ExceptionsSmallFill, {
             width: "6px",
             height: "6px",
-            color: ["warning", 900]
+            color: ["warning", "900"]
           })
         }),
         /* @__PURE__ */ jsx(Grid, {
@@ -46,7 +50,7 @@ const Notifications = ({
           children: alerts && /* @__PURE__ */ jsx(AlertsSmallFill, {
             width: "6px",
             height: "6px",
-            color: ["danger", 900]
+            color: ["danger", "900"]
           })
         }),
         /* @__PURE__ */ jsx(Grid, {
@@ -56,7 +60,7 @@ const Notifications = ({
           children: messages && /* @__PURE__ */ jsx(MessagesSmallFill, {
             width: "6px",
             height: "6px",
-            color: ["success", 900]
+            color: ["success", "900"]
           })
         })
       ]

package/dist/esm/exported-related/Notifications/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Notifications/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  AlertsSmallFill,\n  Notifications as InternalNotifications,\n  ExceptionsSmallFill,\n  MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nconst StyledIcon = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\ntype NotificationsProps = {\n  exceptions?: boolean;\n  alerts?: boolean;\n  messages?: boolean;\n};\n\nexport const Notifications = ({\n  exceptions = false,\n  alerts = false,\n  messages = false,\n}: NotificationsProps): JSX.Element => (\n  <StyledIcon>\n    <InternalNotifications size=\"m\" color={['brand-primary', 800]} data-testid=\"left-nav-notifications-icon\" />\n    {(exceptions || alerts || messages) && (\n      <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-exceptions-icon\">\n          {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', 900]} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-alerts-icon\">\n          {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', 900]} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-messages-icon\">\n          {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', 900]} />}\n        </Grid>\n      </Grid>\n    )}\n  </StyledIcon>\n);\n\nexport default Notifications;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA;AAAA,EACE;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,OAAO,UAAU;AAEjB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAYnB,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE,qBAAC;AAAA,EACC;AAAA,wBAAC;AAAA,MAAsB,MAAK;AAAA,MAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,MAAG,eAAY;AAAA,KAA8B;AAAA,KACvG,cAAc,UAAU,aACxB,qBAAC;AAAA,MAAK,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,MAAG,QAAO;AAAA,MAAO,IAAG;AAAA,MAClD;AAAA,4BAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,wBAAc,oBAAC;AAAA,YAAoB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,WAAW,GAAG;AAAA,WAAG;AAAA,SACxF;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,oBAAU,oBAAC;AAAA,YAAgB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,UAAU,GAAG;AAAA,WAAG;AAAA,SAC/E;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,sBAAY,oBAAC;AAAA,YAAkB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,WAAW,GAAG;AAAA,WAAG;AAAA,SACpF;AAAA;AAAA,KACF;AAAA;AAAA,CAEJ;AAGF,IAAO,wBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  AlertsSmallFill,\n  Notifications as InternalNotifications,\n  ExceptionsSmallFill,\n  MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\nconst StyledIconContainer = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER,\n})`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\ntype NotificationsProps = {\n  exceptions?: boolean;\n  alerts?: boolean;\n  messages?: boolean;\n};\n\nexport const Notifications = ({\n  exceptions = false,\n  alerts = false,\n  messages = false,\n}: NotificationsProps): JSX.Element => (\n  <StyledIconContainer>\n    <InternalNotifications size=\"m\" color={['brand-primary', 800]} data-testid=\"left-nav-notifications-icon\" />\n    {(exceptions || alerts || messages) && (\n      <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-exceptions-icon\">\n          {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-alerts-icon\">\n          {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-messages-icon\">\n          {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', '900']} />}\n        </Grid>\n      </Grid>\n    )}\n  </StyledIconContainer>\n);\n\nexport default Notifications;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA;AAAA,EACE;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,sBAAsB,6BAA6B;AAE5D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAYM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE,qBAAC;AAAA,EACC;AAAA,wBAAC;AAAA,MAAsB,MAAK;AAAA,MAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,MAAG,eAAY;AAAA,KAA8B;AAAA,KACvG,cAAc,UAAU,aACxB,qBAAC;AAAA,MAAK,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,MAAG,QAAO;AAAA,MAAO,IAAG;AAAA,MAClD;AAAA,4BAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,wBAAc,oBAAC;AAAA,YAAoB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,WAAW,KAAK;AAAA,WAAG;AAAA,SAC1F;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,oBAAU,oBAAC;AAAA,YAAgB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,UAAU,KAAK;AAAA,WAAG;AAAA,SACjF;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAO;AAAA,UAAM,eAAY;AAAA,UACxC,sBAAY,oBAAC;AAAA,YAAkB,OAAM;AAAA,YAAM,QAAO;AAAA,YAAM,OAAO,CAAC,WAAW,KAAK;AAAA,WAAG;AAAA,SACtF;AAAA;AAAA,KACF;AAAA;AAAA,CAEJ;AAGF,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/index.js CHANGED Viewed

@@ -1,12 +1,15 @@
 import * as React from "react";
+import { LeftNavigation } from "./LeftNavigation";
+var src_default = LeftNavigation;
 import { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from "./prop-types";
-import { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as LeftNavigation2 } from "./LeftNavigation";
+import { LeftNavigation as LeftNavigation2, LeftNavigationWithSchema } from "./LeftNavigation";
 export * from "./exported-related";
+export * from "./constants";
 export {
   LeftNavItemOptionsSchema,
   LeftNavItemPropsSchema,
-  LeftNavigation,
+  LeftNavigation2 as LeftNavigation,
   LeftNavigationWithSchema,
-  LeftNavigation2 as default
+  src_default as default
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from './prop-types';\nexport { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation';\nexport * from './exported-related';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,gCAAgC;AACjE,SAAS,gBAAgB,0BAA4C,kBAAlBA,uBAAiC;AACpF,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { LeftNavigation } from './LeftNavigation';\n\nexport default LeftNavigation;\nexport { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from './prop-types';\nexport { LeftNavigation, LeftNavigationWithSchema } from './LeftNavigation';\nexport * from './exported-related';\nexport * from './constants';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAE/B,IAAO,cAAQ;AACf,SAAS,wBAAwB,gCAAgC;AACjE,SAAS,kBAAAA,iBAAgB,gCAAgC;AACzD,cAAc;AACd,cAAc;",
   "names": ["LeftNavigation"]
 }

package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js CHANGED Viewed

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import Grid from "@elliemae/ds-grid";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
 import { ItemRenderer, ITEM_TYPES } from "../../exported-related/index";
-import { StyledLabel, StyledDate } from "./styled";
+import { StyledLabel, StyledDate, StyledArrowContainer, StyledRightContainer } from "../styled";
 import { ItemSeparator } from "../ItemSeparator";
 import { ItemWithDate } from "../ItemWithDate";
 import { ItemTextLabel } from "../ItemTextLabel";
@@ -32,6 +31,8 @@ const OutOfTheBoxMapSubitem = (props) => {
       ctx
     });
   }
+  if (!Component)
+    return null;
   return /* @__PURE__ */ jsx(Component, {
     item,
     ctx
@@ -74,7 +75,7 @@ const ItemControlledDrilldown = (props) => {
       item: subitem,
       ctx
     }, subitem.dsId));
-  }, [items, isOpened]);
+  }, [isOpened, items, ctx]);
   return /* @__PURE__ */ jsxs(ItemRenderer, {
     item: {
       ...item,
@@ -91,7 +92,7 @@ const ItemControlledDrilldown = (props) => {
     minHeight: "32px",
     paddingTop: "8px",
     children: [
-      /* @__PURE__ */ jsx(Grid, {
+      /* @__PURE__ */ jsx(StyledArrowContainer, {
         pl: "xxs",
         mt: "-2px",
         children: arrowIcon
@@ -107,23 +108,21 @@ const ItemControlledDrilldown = (props) => {
           placement: "bottom-start"
         }) : label
       }),
-      /* @__PURE__ */ jsxs(Grid, {
+      /* @__PURE__ */ jsxs(StyledRightContainer, {
         pr: "xxs2",
         cols: ["auto", "auto"],
         alignItems: "center",
+        gutter: "xxs",
+        "data-testid": "leftnav-right-component",
         children: [
           /* @__PURE__ */ jsx(StyledDate, {
             ml: "xxs",
             "data-testid": "leftnav-list-item-date",
             children: labelRightSection
           }),
-          /* @__PURE__ */ jsx(Grid, {
-            pl: RightComponent ? "xxs" : "0px",
-            "data-testid": "leftnav-right-component",
-            children: RightComponent && /* @__PURE__ */ jsx(RightComponent, {
-              ctx,
-              item
-            })
+          RightComponent && /* @__PURE__ */ jsx(RightComponent, {
+            ctx,
+            item
           })
         ]
       })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index';\nimport { StyledLabel, StyledDate } from './styled';\nimport { ItemSeparator } from '../ItemSeparator';\nimport { ItemWithDate } from '../ItemWithDate';\nimport { ItemTextLabel } from '../ItemTextLabel';\nimport type { ComponentProps } from '../../index.d';\n\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<ComponentProps>> = {\n  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem = (props: ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: { type, Component },\n    ctx,\n  } = props;\n\n  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n    const currentIndent = item.itemOpts?.indent ?? 0;\n    const newItem = {\n      ...item,\n      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n    };\n    return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n  }\n  // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n  return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemControlledDrilldown = (props: ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        isOpened,\n        items,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [isOpened]);\n\n  const subitems = useMemo(() => {\n    if (!isOpened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [items, isOpened]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: isOpened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !isOpened,\n          closable: isOpened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      <Grid pl=\"xxs\" mt=\"-2px\">\n        {arrowIcon}\n      </Grid>\n      <StyledLabel\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <Grid pr=\"xxs2\" cols={['auto', 'auto']} alignItems=\"center\">\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        <Grid pl={RightComponent ? 'xxs' : '0px'} data-testid=\"leftnav-right-component\">\n          {RightComponent && <RightComponent ctx={ctx} item={item} />}\n        </Grid>\n      </Grid>\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index';\nimport { StyledLabel, StyledDate, StyledArrowContainer, StyledRightContainer } from '../styled';\nimport { ItemSeparator } from '../ItemSeparator';\nimport { ItemWithDate } from '../ItemWithDate';\nimport { ItemTextLabel } from '../ItemTextLabel';\nimport type { ComponentProps } from '../../index.d';\n\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<ComponentProps>> = {\n  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<ComponentProps> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n    ctx,\n  } = props;\n\n  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n    const currentIndent = item.itemOpts?.indent ?? 0;\n    const newItem = {\n      ...item,\n      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n    };\n    return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n  }\n  if (!Component) return null;\n  // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n  return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemControlledDrilldown = (props: ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        isOpened,\n        items,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [isOpened]);\n\n  const subitems = useMemo(() => {\n    if (!isOpened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [isOpened, items, ctx]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: isOpened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !isOpened,\n          closable: isOpened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      <StyledArrowContainer pl=\"xxs\" mt=\"-2px\">\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/outOfTheBox/ItemHeader/index.js CHANGED Viewed

@@ -1,10 +1,15 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import Grid from "@elliemae/ds-grid";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import { ItemRenderer } from "../../exported-related/index";
-import { StyledLabel, StyledChevronLeft } from "./styled";
+import {
+  StyledItemLabel,
+  StyledChevronLeft,
+  StyledBottomContainer,
+  StyledLeftContainer,
+  StyledRightContainer
+} from "../styled";
 import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants";
 const notOpenedShadowStyle = (isSelected) => (theme) => `
   box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
@@ -39,8 +44,8 @@ const ItemHeader = (props) => {
   const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? label : "menuitem");
   const isSelected = selectedItem === dsId || selectedParent === dsId;
   const shadowStyle = useCallback(
-    (opened2) => (theme) => !opened2 ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
-    [isSelected, openedItem]
+    (opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
+    [isSelected]
   );
   return /* @__PURE__ */ jsxs(ItemRenderer, {
     item: {
@@ -58,7 +63,7 @@ const ItemHeader = (props) => {
     borderBottomMr: opened ? "12px" : "0px",
     shadowStyle,
     children: [
-      /* @__PURE__ */ jsxs(Grid, {
+      /* @__PURE__ */ jsxs(StyledLeftContainer, {
         cols: opened ? ["auto", "auto"] : ["38px"],
         gutter: "1px",
         pl: opened ? "xxs" : 0,
@@ -80,13 +85,13 @@ const ItemHeader = (props) => {
             role: "button",
             "aria-label": `Close ${ariaLabel}`
           }),
-          /* @__PURE__ */ jsx(CollapsedComponent, {
+          CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, {
             item,
             ctx
           })
         ]
       }),
-      /* @__PURE__ */ jsx(StyledLabel, {
+      /* @__PURE__ */ jsx(StyledItemLabel, {
         ml: opened ? "xxs" : "1px",
         mt: "xxxs",
         mb: "15px",
@@ -97,7 +102,7 @@ const ItemHeader = (props) => {
           placement: "bottom-start"
         }) : label
       }),
-      /* @__PURE__ */ jsx(Grid, {
+      /* @__PURE__ */ jsx(StyledRightContainer, {
         pl: "xs",
         pr: opened ? "xxs2" : "xxs",
         onFocus: (e) => {
@@ -111,8 +116,7 @@ const ItemHeader = (props) => {
           item
         })
       }),
-      BottomComponent && /* @__PURE__ */ jsx(Grid, {
-        style: { gridColumn: "span 3" },
+      BottomComponent && /* @__PURE__ */ jsx(StyledBottomContainer, {
         pb: "xxxs",
         pl: "xxs",
         pr: "xxs",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemHeader/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledChevronLeft } from './styled';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: any) =>\n  `\n  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n  }\n`;\n\nexport const ItemHeader = (props: ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n      expandedForAnimation,\n      setFocusedItem,\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened) => (theme: any) =>\n      !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected, openedItem],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel,\n          ariaExpanded: opened,\n          ...item.itemOpts,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      hasBorderBottom\n      borderBottomMr={opened ? '12px' : '0px'}\n      shadowStyle={shadowStyle}\n    >\n      <Grid\n        cols={opened ? ['auto', 'auto'] : ['38px']}\n        gutter=\"1px\"\n        pl={opened ? 'xxs' : 0}\n        justifyItems=\"center\"\n        data-testid=\"leftnav-leftcomponent\"\n      >\n        {opened && (\n          <StyledChevronLeft\n            size=\"m\"\n            color={['brand-primary', 800]}\n            onClick={(e) => {\n              onItemClick(item, e);\n            }}\n            data-testid=\"leftnav-leftcomponent-chevron\"\n            tabIndex={0}\n            onFocus={(e) => {\n              e.stopPropagation();\n              setFocusedItem(CHEVRON_BACK_DS_ID);\n            }}\n            role=\"button\"\n            aria-label={`Close ${ariaLabel}`}\n          />\n        )}\n        <CollapsedComponent item={item} ctx={ctx} />\n      </Grid>\n      <StyledLabel\n        ml={opened ? 'xxs' : '1px'}\n        mt=\"xxxs\"\n        mb=\"15px\"\n        data-testid={labelDataTestId || 'leftnav-itemlabel'}\n        labelOverflow={labelOverflow}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <Grid\n        pl=\"xs\"\n        pr={opened ? 'xxs2' : 'xxs'}\n        onFocus={(e) => {\n          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e) => e.stopPropagation()}\n        data-testid=\"leftnav-right-component\"\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </Grid>\n      {BottomComponent && (\n        <Grid\n          style={{ gridColumn: 'span 3' }}\n          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e) => {\n            setFocusedItem(null);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => e.stopPropagation()}\n        >\n          <BottomComponent ctx={ctx} item={item} />\n        </Grid>\n      )}\n    </ItemRenderer>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["opened"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport {\n  StyledItemLabel,\n  StyledChevronLeft,\n  StyledBottomContainer,\n  StyledLeftContainer,\n  StyledRightContainer,\n} from '../styled';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n  `\n  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n  }\n`;\n\nexport const ItemHeader = (props: ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n      expandedForAnimation,\n      setFocusedItem,\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel,\n          ariaExpanded: opened,\n          ...item.itemOpts,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      hasBorderBottom\n      borderBottomMr={opened ? '12px' : '0px'}\n      shadowStyle={shadowStyle}\n    >\n      <StyledLeftContainer\n        cols={opened ? ['auto', 'auto'] : ['38px']}\n        gutter=\"1px\"\n        pl={opened ? 'xxs' : 0}\n        justifyItems=\"center\"\n        data-testid=\"leftnav-leftcomponent\"\n      >\n        {opened && (\n          <StyledChevronLeft\n            size=\"m\"\n            color={['brand-primary', 800]}\n            onClick={(e: React.MouseEvent<HTMLElement>) => {\n              onItemClick(item, e);\n            }}\n            data-testid=\"leftnav-leftcomponent-chevron\"\n            tabIndex={0}\n            onFocus={(e: React.FocusEvent) => {\n              e.stopPropagation();\n              setFocusedItem(CHEVRON_BACK_DS_ID);\n            }}\n            role=\"button\"\n            aria-label={`Close ${ariaLabel}`}\n          />\n        )}\n        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml={opened ? 'xxs' : '1px'}\n        mt=\"xxxs\"\n        mb=\"15px\"\n        data-testid={labelDataTestId || 'leftnav-itemlabel'}\n        labelOverflow={labelOverflow}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledItemLabel>\n      <StyledRightContainer\n        pl=\"xs\"\n        pr={opened ? 'xxs2' : 'xxs'}\n        onFocus={(e) => {\n          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e) => e.stopPropagation()}\n        data-testid=\"leftnav-right-component\"\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n      {BottomComponent && (\n        <StyledBottomContainer\n          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e) => {\n            setFocusedItem(null);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => e.stopPropagation()}\n        >\n          <BottomComponent ctx={ctx} item={item} />\n        </StyledBottomContainer>\n      )}\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
 }