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

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

@@ -0,0 +1,173 @@
+"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 ItemSubmenu_exports = {};
+__export(ItemSubmenu_exports, {
+  ItemSubmenu: () => ItemSubmenu
+});
+module.exports = __toCommonJS(ItemSubmenu_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_constants = require("../../exported-related/constants.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 ItemSubmenu = (props) => {
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },
+      CollapsedComponent = () => null
+    },
+    ctx,
+    ctx: {
+      leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },
+      expandedForAnimation,
+      selectedItem,
+      selectedParent,
+      setFocusedItem
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const opened = openedItem === dsId;
+  const isSelected = selectedItem === dsId;
+  const shadowStyle = (0, import_react.useCallback)(
+    (opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
+    [dsId, isSelected, selectedParent]
+  );
+  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? `${label}, category` : "category");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: {
+          ...item.itemOpts,
+          ariaLabel,
+          ariaExpanded: opened,
+          openable: expandedForAnimation && !opened,
+          closable: expandedForAnimation && opened,
+          selectable: !opened
+        }
+      },
+      shadowStyle,
+      hasBorderBottom: opened,
+      borderBottomMr: "12px",
+      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",
+                  tabIndex: 0,
+                  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) => {
+              e.stopPropagation();
+              setFocusedItem(null);
+            },
+            onKeyDown: (e) => e.stopPropagation(),
+            onClick: (e) => openedItem === dsId && 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,
+          {
+            style: { gridColumn: "span 3" },
+            pb: "xxxs",
+            pl: "xxs",
+            pr: "xxs",
+            onFocus: (e) => {
+              e.stopPropagation();
+              setFocusedItem(null);
+            },
+            onKeyDown: (e) => e.stopPropagation(),
+            onClick: (e) => openedItem && e.stopPropagation(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomComponent, { ctx, item })
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemSubmenu/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\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 { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport {\n  StyledLeftContainer,\n  StyledItemLabel,\n  StyledBottomContainer,\n  StyledRightContainer,\n  StyledChevronLeft,\n} 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 ItemSubmenu = (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      selectedItem,\n      selectedParent,\n      setFocusedItem,\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const opened = openedItem === dsId;\n\n  const isSelected = selectedItem === dsId;\n\n  const shadowStyle = useCallback(\n    (opened_: boolean) => (theme: Theme) =>\n      !opened_\n        ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n        : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n    [dsId, isSelected, selectedParent],\n  );\n\n  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ...item.itemOpts,\n          ariaLabel,\n          ariaExpanded: opened,\n          openable: expandedForAnimation && !opened,\n          closable: expandedForAnimation && opened,\n          selectable: !opened,\n        },\n      }}\n      shadowStyle={shadowStyle}\n      hasBorderBottom={opened}\n      borderBottomMr=\"12px\"\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            tabIndex={0}\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          e.stopPropagation();\n          setFocusedItem(null);\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n        onClick={(e: React.MouseEvent) => openedItem === dsId && e.stopPropagation()}\n        data-testid=\"leftnav-right-component\"\n      >\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n      {BottomComponent && (\n        <StyledBottomContainer\n          style={{ gridColumn: 'span 3' }}\n          pb=\"xxxs\"\n          pl=\"xxs\"\n          pr=\"xxs\"\n          onFocus={(e: React.FocusEvent) => {\n            e.stopPropagation();\n            setFocusedItem(null);\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n          onClick={(e: React.MouseEvent) => openedItem && 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/ItemTextLabel/index.js

@@ -0,0 +1,79 @@
+"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 ItemTextLabel_exports = {};
+__export(ItemTextLabel_exports, {
+  ItemTextLabel: () => ItemTextLabel
+});
+module.exports = __toCommonJS(ItemTextLabel_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+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 ItemTextLabel = (props) => {
+  const {
+    item,
+    item: {
+      itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId }
+    },
+    ctx: {
+      leftNavProps: { labelOverflow: leftNavLabelOverflow }
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        CollapsedComponent: null
+      },
+      minHeight: "32px",
+      paddingTop: "8px",
+      children: [
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledLabel,
+          {
+            "data-testid": labelDataTestId || "leftnav-list-item-label",
+            pl: "24px",
+            labelOverflow,
+            labelBold,
+            labelColor,
+            mr: "xxs2",
+            pb: "xxxs",
+            children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemTextLabel/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n    },\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        pl=\"24px\"\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n        mr=\"xxs2\"\n        pb=\"xxxs\"\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,8CAA2C;AAC3C,8BAA6B;AAE7B,oBAA4B;AAErB,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mBAAmB;AAAA,YAChC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YAEF,4BAAkB,aAAa,4CAAC,sEAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,162 @@
+"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 ItemUncontrolledDrilldown_exports = {};
+__export(ItemUncontrolledDrilldown_exports, {
+  ItemUncontrolledDrilldown: () => ItemUncontrolledDrilldown
+});
+module.exports = __toCommonJS(ItemUncontrolledDrilldown_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_ds_legacy_icons = require("@elliemae/ds-legacy-icons");
+var import_exported_related = require("../../exported-related/index.js");
+var import_styled = require("../styled.js");
+var import_ItemSeparator = require("../ItemSeparator/index.js");
+var import_ItemWithDate = require("../ItemWithDate/index.js");
+var import_ItemTextLabel = require("../ItemTextLabel/index.js");
+const outOfTheBoxSubitemsComponents = {
+  [import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: import_ItemSeparator.ItemSeparator,
+  [import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: import_ItemWithDate.ItemWithDate,
+  [import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: import_ItemTextLabel.ItemTextLabel
+};
+const OutOfTheBoxMapSubitem = (props) => {
+  const {
+    item,
+    item: { type, Component },
+    ctx
+  } = props;
+  if (typeof type === "string" && !!outOfTheBoxSubitemsComponents[type]) {
+    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
+    const currentIndent = item.itemOpts?.indent ?? 0;
+    const newItem = {
+      ...item,
+      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: newItem, ctx });
+  }
+  if (!Component)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { item, ctx });
+};
+const ItemUncontrolledDrilldown = (props) => {
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: {
+        label,
+        RightComponent,
+        labelRightSection,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        startOpened,
+        items,
+        labelDataTestId
+      }
+    },
+    ctx,
+    ctx: {
+      leftNavProps: { labelOverflow: leftNavLabelOverflow },
+      openedDrilldowns,
+      setOpenedDrilldowns
+    }
+  } = props;
+  (0, import_react.useEffect)(() => {
+    if (startOpened)
+      setOpenedDrilldowns([...openedDrilldowns, dsId]);
+  }, []);
+  const opened = openedDrilldowns.includes(dsId);
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const arrowIcon = (0, import_react.useMemo)(() => {
+    const Component = opened ? import_ds_legacy_icons.ArrowheadDown : import_ds_legacy_icons.ArrowheadRight;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { width: "24px", height: "18px", color: ["brand-primary", "800"] });
+  }, [opened]);
+  const subitems = (0, import_react.useMemo)(() => {
+    if (!opened || !items)
+      return [];
+    return items.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxMapSubitem, { item: subitem, ctx }, subitem.dsId));
+  }, [ctx, items, opened]);
+  const handleOnClick = (0, import_react.useCallback)(() => {
+    if (opened)
+      setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));
+    else
+      setOpenedDrilldowns([...openedDrilldowns, dsId]);
+  }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        itemOpts: {
+          ariaExpanded: opened,
+          ariaRole: "menuitem",
+          ...item.itemOpts,
+          openable: !opened,
+          closable: opened
+        },
+        CollapsedComponent: null
+      },
+      subitems,
+      minHeight: "32px",
+      paddingTop: "8px",
+      onClick: handleOnClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledArrowContainer, { pl: "xxs", mt: "-2px", children: arrowIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledLabel,
+          {
+            pb: "xxxs",
+            "data-testid": labelDataTestId || "leftnav-list-item-label",
+            labelOverflow,
+            labelBold,
+            labelColor,
+            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.jsxs)(
+          import_styled.StyledRightContainer,
+          {
+            pr: "xxs2",
+            cols: ["auto", "auto"],
+            alignItems: "center",
+            gutter: "xxs",
+            "data-testid": "leftnav-right-component",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDate, { ml: "xxs", "data-testid": "leftnav-list-item-date", children: labelRightSection }),
+              RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,101 @@
+"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 ItemWithDate_exports = {};
+__export(ItemWithDate_exports, {
+  ItemWithDate: () => ItemWithDate
+});
+module.exports = __toCommonJS(ItemWithDate_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+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 ItemWithDate = (props) => {
+  const {
+    item,
+    item: {
+      itemOpts: {
+        label,
+        RightComponent,
+        labelRightSection,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        labelDataTestId
+      }
+    },
+    ctx,
+    ctx: {
+      leftNavProps: { labelOverflow: leftNavLabelOverflow }
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_exported_related.ItemRenderer,
+    {
+      item: {
+        ...item,
+        CollapsedComponent: null
+      },
+      minHeight: "32px",
+      paddingTop: "8px",
+      children: [
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledLabel,
+          {
+            pl: "xxs",
+            pb: "xxxs",
+            "data-testid": labelDataTestId || "leftnav-list-item-label",
+            labelOverflow,
+            labelBold,
+            labelColor,
+            children: labelOverflow === "truncate" && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styled.StyledRightContainer,
+          {
+            pr: "xxs2",
+            cols: ["auto", "auto"],
+            alignItems: "center",
+            gutter: "xxs",
+            "data-testid": "leftnav-right-component",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDate, { ml: "xxs", "data-testid": "leftnav-list-item-date", children: labelRightSection }),
+              RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledRightContainer, StyledLabel, StyledDate } from '../styled.js';\n\nexport const ItemWithDate = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"xxs\"\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n      >\n        {labelOverflow === 'truncate' && label ? (\n          <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n        ) : (\n          label\n        )}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCW;AAnClC,8CAA2C;AAC3C,8BAA6B;AAE7B,oBAA8D;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,4BAAkB,cAAc,QAC/B,4CAAC,sEAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAY;AAAA,YAEZ;AAAA,0DAAC,4BAAW,IAAG,OAAM,eAAY,0BAC9B,6BACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}