@elliemae/ds-legacy-left-navigation 1.0.0-rc.1

package/dist/cjs/outOfTheBox/ItemHeader/index.js

@@ -0,0 +1,169 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemHeader_exports = {};
+__export(ItemHeader_exports, {
+  ItemHeader: () => ItemHeader
+});
+module.exports = __toCommonJS(ItemHeader_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_ds_legacy_truncated_tooltip_text = require("@elliemae/ds-legacy-truncated-tooltip-text");
+var import_exported_related = require("../../exported-related/index.js");
+var import_styled = require("../styled.js");
+var import_constants = require("../../exported-related/constants.js");
+const notOpenedShadowStyle = (isSelected) => (theme) => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
+
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
+const ItemHeader = (props) => {
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },
+      CollapsedComponent = () => null
+    },
+    ctx,
+    ctx: {
+      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },
+      expandedForAnimation,
+      setFocusedItem,
+      selectedItem,
+      selectedParent
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const opened = openedItem === dsId;
+  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? `${label}, category` : "category");
+  const isSelected = selectedItem === dsId || selectedParent === dsId;
+  const shadowStyle = (0, import_react.useCallback)(
+    (opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
+    [isSelected]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: {
+          ariaLabel,
+          ariaExpanded: opened,
+          ...item.itemOpts,
+          openable: expandedForAnimation && !opened,
+          closable: expandedForAnimation && opened,
+          selectable: !opened
+        }
+      },
+      hasBorderBottom: true,
+      borderBottomMr: opened ? "12px" : "0px",
+      shadowStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styled.StyledLeftContainer,
+          {
+            cols: opened ? ["auto", "auto"] : ["38px"],
+            gutter: "1px",
+            pl: opened ? "xxs" : 0,
+            justifyItems: "center",
+            "data-testid": "leftnav-leftcomponent",
+            children: [
+              opened && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledChevronLeft,
+                {
+                  buttonType: "raw",
+                  onClick: (e) => {
+                    if (onItemClick)
+                      onItemClick(item, e);
+                  },
+                  "data-testid": "leftnav-leftcomponent-chevron",
+                  onFocus: (e) => {
+                    e.stopPropagation();
+                    setFocusedItem(import_constants.CHEVRON_BACK_DS_ID);
+                  },
+                  "aria-label": `Close ${ariaLabel}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_icons.ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
+                }
+              ),
+              CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledItemLabel,
+          {
+            ml: opened ? "xxs" : "1px",
+            mt: "xxxs",
+            mb: "15px",
+            "data-testid": labelDataTestId || "leftnav-itemlabel",
+            labelOverflow,
+            children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledRightContainer,
+          {
+            pl: "xs",
+            pr: opened ? "xxs2" : "xxs",
+            onFocus: (e) => {
+              setFocusedItem(null);
+              e.stopPropagation();
+            },
+            onKeyDown: (e) => e.stopPropagation(),
+            "data-testid": "leftnav-right-component",
+            children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
+          }
+        ),
+        BottomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledBottomContainer,
+          {
+            pb: "xxxs",
+            pl: "xxs",
+            pr: "xxs",
+            onFocus: (e) => {
+              setFocusedItem(null);
+              e.stopPropagation();
+            },
+            onKeyDown: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomComponent, { ctx, item })
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/outOfTheBox/ItemLink/index.js

@@ -0,0 +1,102 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemLink_exports = {};
+__export(ItemLink_exports, {
+  ItemLink: () => ItemLink
+});
+module.exports = __toCommonJS(ItemLink_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_legacy_truncated_tooltip_text = require("@elliemae/ds-legacy-truncated-tooltip-text");
+var import_exported_related = require("../../exported-related/index.js");
+var import_styled = require("../styled.js");
+const notOpenedShadowStyle = (isSelected) => (theme) => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
+
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
+const ItemLink = (props) => {
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },
+      CollapsedComponent = () => null
+    },
+    ctx,
+    ctx: {
+      leftNavProps: { labelOverflow: leftNavLabelOverflow },
+      selectedItem,
+      selectedParent
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const isSelected = selectedItem === dsId || selectedParent === dsId;
+  const shadowStyle = (0, import_react.useCallback)(
+    (opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
+    [isSelected]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: {
+          ariaLabel: typeof label === "string" ? label : "",
+          ...item.itemOpts,
+          selectable: true
+        }
+      },
+      shadowStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftContainer, { cols: ["38px"], gutter: "1px", justifyItems: "center", "data-testid": "leftnav-leftcomponent", children: CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledItemLabel,
+          {
+            ml: "1px",
+            mt: "xxxs",
+            mb: "15px",
+            "data-testid": labelDataTestId || "leftnav-itemlabel",
+            labelOverflow,
+            children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContainer, { mt: "xxxs", pr: "xxs2", "data-testid": "leftnav-right-component", children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item }) })
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemLink/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-legacy-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n  `\n  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n  }\n`;\n\nexport const ItemLink = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { label, RightComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n      CollapsedComponent = () => null,\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      selectedItem,\n      selectedParent,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [isSelected],\n  );\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaLabel: typeof label === 'string' ? label : '',\n          ...item.itemOpts,\n          selectable: true,\n        },\n      }}\n      shadowStyle={shadowStyle}\n    >\n      <StyledLeftContainer cols={['38px']} gutter=\"1px\" justifyItems=\"center\" data-testid=\"leftnav-leftcomponent\">\n        {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n      </StyledLeftContainer>\n      <StyledItemLabel\n        ml=\"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 mt=\"xxxs\" pr=\"xxs2\" data-testid=\"leftnav-right-component\">\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,mBAAmC;AACnC,8CAA2C;AAE3C,8BAA6B;AAE7B,oBAA2E;AAE3E,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,kCAGrC,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,kCAI7D,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIjD,MAAM,WAAW,CAAC,UAAyD;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,kBAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,qCAAoB,MAAM,CAAC,MAAM,GAAG,QAAO,OAAM,cAAa,UAAS,eAAY,yBACjF,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU,GACnE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YAEC,4BAAkB,aAAa,4CAAC,sEAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA,4CAAC,sCAAqB,IAAG,QAAO,IAAG,QAAO,eAAY,2BACnD,4BAAkB,4CAAC,kBAAe,KAAU,MAAY,GAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemSection_exports = {};
+__export(ItemSection_exports, {
+  ItemSection: () => ItemSection
+});
+module.exports = __toCommonJS(ItemSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_exported_related = require("../../exported-related/index.js");
+var import_styled = require("../styled.js");
+const ItemSection = (props) => {
+  const {
+    item,
+    item: {
+      itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId }
+    },
+    ctx,
+    ctx: { setFocusedItem }
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },
+        CollapsedComponent: null
+      },
+      minHeight: "32px",
+      paddingTop: "8px",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSectionContainer, { cols: ["min-content", "auto", "min-content", "auto"], pl: "xxs", alignItems: "center", children: [
+          LeftComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftComponent, { ctx, item }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionLabel, { "data-testid": labelDataTestId || "leftnav-section-item-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVerticalSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightLabel, { children: labelRightSection })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledRightContainer,
+          {
+            ml: "auto",
+            onFocus: (e) => {
+              setFocusedItem(null);
+              e.stopPropagation();
+            },
+            onKeyDown: (e) => e.stopPropagation(),
+            pr: "xxs2",
+            alignItems: "center",
+            "data-testid": "leftnav-right-component",
+            children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemSection/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n  StyledSectionLabel,\n  StyledRightLabel,\n  StyledVerticalSeparator,\n  StyledRightContainer,\n  StyledSectionContainer,\n} from '../styled.js';\n\nexport const ItemSection = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n    },\n    ctx,\n    ctx: { setFocusedItem },\n  } = props;\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      <StyledSectionContainer cols={['min-content', 'auto', 'min-content', 'auto']} pl=\"xxs\" alignItems=\"center\">\n        {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n        <StyledSectionLabel data-testid={labelDataTestId || 'leftnav-section-item-label'}>{label}</StyledSectionLabel>\n        <StyledVerticalSeparator />\n        <StyledRightLabel>{labelRightSection}</StyledRightLabel>\n      </StyledSectionContainer>\n      <StyledRightContainer\n        ml=\"auto\"\n        onFocus={(e: React.FocusEvent) => {\n          setFocusedItem(null);\n          e.stopPropagation();\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        pr=\"xxs2\"\n        alignItems=\"center\"\n        data-testid=\"leftnav-right-component\"\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BjB;AA9BN,8BAA6B;AAE7B,oBAMO;AAEA,MAAM,cAAc,CAAC,UAAyD;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,eAAe;AAAA,EACxB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,QACnE,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA,qDAAC,wCAAuB,MAAM,CAAC,eAAe,QAAQ,eAAe,MAAM,GAAG,IAAG,OAAM,YAAW,UAC/F;AAAA,0BAAgB,4CAAC,iBAAc,KAAU,MAAY,IAAK,4CAAC,SAAI;AAAA,UAChE,4CAAC,oCAAmB,eAAa,mBAAmB,8BAA+B,iBAAM;AAAA,UACzF,4CAAC,yCAAwB;AAAA,UACzB,4CAAC,kCAAkB,6BAAkB;AAAA,WACvC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAS,CAAC,MAAwB;AAChC,6BAAe,IAAI;AACnB,gBAAE,gBAAgB;AAAA,YACpB;AAAA,YACA,WAAW,CAAC,MAA2B,EAAE,gBAAgB;AAAA,YACzD,IAAG;AAAA,YACH,YAAW;AAAA,YACX,eAAY;AAAA,YAEX,4BAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemSeparator_exports = {};
+__export(ItemSeparator_exports, {
+  ItemSeparator: () => ItemSeparator
+});
+module.exports = __toCommonJS(ItemSeparator_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_exported_related = require("../../exported-related/index.js");
+var import_constants = require("../../constants/index.js");
+const StyledSeparator = (0, import_ds_legacy_system.styled)("div", { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.ITEM_SEPARATOR })`
+  height: 1px;
+  background-color: ${(props) => props.theme.colors.neutral[100]};
+  width: auto;
+  margin: ${(props) => props.theme.space.xxxs} 0;
+  margin-left: ${(props) => props.theme.space.xxxs};
+  grid-column: span 3;
+`;
+const ItemSeparator = (props) => {
+  const { item } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: {
+          ...item.itemOpts,
+          ariaRole: "separator",
+          selectable: false,
+          focuseable: false
+        },
+        CollapsedComponent: null
+      },
+      minHeight: "1px",
+      paddingTop: "0px",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, { "data-testid": "leftnav-separator-subitem" })
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemSeparator/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_SEPARATOR })`\n  height: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n  width: auto;\n  margin: ${(props) => props.theme.space.xxxs} 0;\n  margin-left: ${(props) => props.theme.space.xxxs};\n  grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const { item } = props;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaRole: 'separator',\n          selectable: false,\n          focuseable: false,\n        },\n        CollapsedComponent: null,\n      }}\n      minHeight=\"1px\"\n      paddingTop=\"0px\"\n    >\n      <StyledSeparator data-testid=\"leftnav-separator-subitem\" />\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,8BAAuB;AACvB,8BAA6B;AAC7B,uBAA4D;AAG5D,MAAM,sBAAkB,gCAAO,OAAO,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAEnD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX,sDAAC,mBAAgB,eAAY,6BAA4B;AAAA;AAAA,EAC3D;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemSkeleton_exports = {};
+__export(ItemSkeleton_exports, {
+  ItemSkeleton: () => ItemSkeleton
+});
+module.exports = __toCommonJS(ItemSkeleton_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_skeleton = require("@elliemae/ds-legacy-skeleton");
+var import_exported_related = require("../../exported-related/index.js");
+var import_styled = require("../styled.js");
+const noShadowStyle = () => () => "box-shadow: none;";
+const CollapsedComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_skeleton.DSSkeleton, { variant: "circular", w: 24, h: 24 });
+const ItemSkeleton = (props) => {
+  const { item, hasBorderBottom } = props;
+  const variant = item?.itemOpts?.skeletonVariant ?? "item";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: item?.itemOpts ? {
+          ...item.itemOpts,
+          selectable: false,
+          focuseable: false,
+          ariaRole: "menuitem",
+          ariaLabel: "Loading"
+        } : {},
+        CollapsedComponent: variant === "item" ? CollapsedComponent : null
+      },
+      minHeight: variant === "item" ? "48px" : "32px",
+      shadowStyle: noShadowStyle,
+      hasBorderBottom,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledLeftContainer,
+          {
+            cols: ["38px"],
+            gutter: "1px",
+            pl: 0,
+            justifyItems: "center",
+            "data-testid": "leftnav-leftcomponent",
+            children: variant === "item" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_skeleton.DSSkeleton, { variant: "rectangular", mt: "2px", mb: "15px", w: "auto", mr: "xs" })
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemSkeleton/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSSkeleton } from '@elliemae/ds-legacy-skeleton';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLeftContainer } from '../styled.js';\n\nconst noShadowStyle = () => () => 'box-shadow: none;';\n\nconst CollapsedComponent = () => <DSSkeleton variant=\"circular\" w={24} h={24} />;\n\ninterface SkeletonPropsT {\n  item: DSLeftNavigationT.ComponentProps['item'];\n  hasBorderBottom?: boolean;\n}\nexport const ItemSkeleton = (props: SkeletonPropsT): JSX.Element => {\n  const { item, hasBorderBottom } = props;\n\n  const variant = item?.itemOpts?.skeletonVariant ?? 'item';\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: item?.itemOpts\n          ? {\n              ...item.itemOpts,\n              selectable: false,\n              focuseable: false,\n              ariaRole: 'menuitem',\n              ariaLabel: 'Loading',\n            }\n          : {},\n        CollapsedComponent: variant === 'item' ? CollapsedComponent : null,\n      }}\n      minHeight={variant === 'item' ? '48px' : '32px'}\n      shadowStyle={noShadowStyle}\n      hasBorderBottom={hasBorderBottom}\n    >\n      <StyledLeftContainer\n        cols={['38px']}\n        gutter=\"1px\"\n        pl={0}\n        justifyItems=\"center\"\n        data-testid=\"leftnav-leftcomponent\"\n      >\n        {variant === 'item' && <CollapsedComponent />}\n      </StyledLeftContainer>\n      <DSSkeleton variant=\"rectangular\" mt=\"2px\" mb=\"15px\" w=\"auto\" mr=\"xs\" />\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQU;AAPjC,gCAA2B;AAC3B,8BAA6B;AAE7B,oBAAoC;AAEpC,MAAM,gBAAgB,MAAM,MAAM;AAElC,MAAM,qBAAqB,MAAM,4CAAC,wCAAW,SAAQ,YAAW,GAAG,IAAI,GAAG,IAAI;AAMvE,MAAM,eAAe,CAAC,UAAuC;AAClE,QAAM,EAAE,MAAM,gBAAgB,IAAI;AAElC,QAAM,UAAU,MAAM,UAAU,mBAAmB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU,MAAM,WACZ;AAAA,UACE,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,QACb,IACA,CAAC;AAAA,QACL,oBAAoB,YAAY,SAAS,qBAAqB;AAAA,MAChE;AAAA,MACA,WAAW,YAAY,SAAS,SAAS;AAAA,MACzC,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,MAAM;AAAA,YACb,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,cAAa;AAAA,YACb,eAAY;AAAA,YAEX,sBAAY,UAAU,4CAAC,sBAAmB;AAAA;AAAA,QAC7C;AAAA,QACA,4CAAC,wCAAW,SAAQ,eAAc,IAAG,OAAM,IAAG,QAAO,GAAE,QAAO,IAAG,MAAK;AAAA;AAAA;AAAA,EACxE;AAEJ;",
+  "names": []
+}