@elliemae/ds-left-navigation 3.0.0-next.0 → 3.0.0-next.4

package/dist/esm/configs/useLeftNavConfig.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import React2 from "react";
+import useLeftNavItems from "./useLeftNavItems";
+import { useLeftNavSmoothExpand } from "./useLeftNavSmoothExpand";
+import { useSelectFirstBodyItem } from "../hooks/useSelectFirstBodyItem";
+const useLeftNavConfig = (props) => {
+  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;
+  const [selectedItem, setSelectedItem] = React2.useState(null);
+  const [selectedParent, setSelectedParent] = React2.useState(null);
+  const [focusedItem, setFocusedItem] = React2.useState(null);
+  const [openedDrilldowns, setOpenedDrilldowns] = React2.useState([]);
+  const [expandedForAnimation, setExpandedForAnimation] = React2.useState(expanded);
+  const timeoutRef = React2.useRef(null);
+  const smoothExpandOpts = React2.useMemo(() => ({
+    expandedForAnimation,
+    timeoutRef,
+    setExpandedForAnimation
+  }), [expandedForAnimation, timeoutRef, setExpandedForAnimation]);
+  useLeftNavSmoothExpand(props, smoothExpandOpts);
+  React2.useEffect(() => {
+    onSelectedChange(selectedItem);
+  }, [selectedItem, onSelectedChange]);
+  React2.useEffect(() => {
+    if (props.actionRef && props.actionRef.current) {
+      props.actionRef.current.setFocusedItem = setFocusedItem;
+    }
+  }, [props.actionRef]);
+  React2.useEffect(() => {
+    if (openedItem !== null)
+      setSelectedParent(openedItem);
+  }, [openedItem]);
+  React2.useEffect(() => {
+    onFocusChange(focusedItem);
+  }, [focusedItem, onFocusChange]);
+  useSelectFirstBodyItem(items, openedItem, props.selectedItem !== void 0 ? props.selectedItem : selectedItem, setSelectedItem, props.disableDefaultSelection);
+  const leftNavItemsProps = React2.useMemo(() => ({
+    headerItem: props.HeaderComponent,
+    bodyHeaderItem: props.BodyHeaderComponent,
+    items: props.items,
+    openedDrilldowns
+  }), [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns]);
+  const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);
+  const finalConfig = React2.useMemo(() => ({
+    leftNavProps: props,
+    expandedForAnimation,
+    selectedItem: props.selectedItem !== void 0 ? props.selectedItem : selectedItem,
+    setSelectedItem,
+    selectedParent: props.selectedParent !== void 0 ? props.selectedParent : selectedParent,
+    setSelectedParent,
+    focusedItem,
+    setFocusedItem,
+    openedDrilldowns,
+    setOpenedDrilldowns,
+    visibleItems,
+    visibleItemsRefs
+  }), [
+    props,
+    expandedForAnimation,
+    selectedItem,
+    setSelectedItem,
+    setSelectedParent,
+    selectedParent,
+    focusedItem,
+    setFocusedItem,
+    openedDrilldowns,
+    setOpenedDrilldowns,
+    visibleItems,
+    visibleItemsRefs
+  ]);
+  return finalConfig;
+};
+var useLeftNavConfig_default = useLeftNavConfig;
+export {
+  useLeftNavConfig_default as default,
+  useLeftNavConfig
+};
+//# sourceMappingURL=useLeftNavConfig.js.map

package/dist/esm/configs/useLeftNavConfig.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavConfig.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { LeftNavProps } from '../index.d';\nimport { ContextProps } from '../LeftNavigationContext';\nimport useLeftNavItems from './useLeftNavItems';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem';\n\nexport const useLeftNavConfig = (props: LeftNavProps): ContextProps => {\n  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         INTERNAL STATE                         *\n  // ************************** ------------ **************************\n  // Selection related\n  const [selectedItem, setSelectedItem] = React.useState<string | null>(null);\n  const [selectedParent, setSelectedParent] = React.useState<string | null>(null);\n  // Focus related\n  const [focusedItem, setFocusedItem] = React.useState<string | null>(null);\n  // Opened uncontrolled drilldowns\n  const [openedDrilldowns, setOpenedDrilldowns] = React.useState<string[]>([]);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        EXPAND ANIMATION                        *\n  // ************************** ------------ **************************\n  const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n  const smoothExpandOpts = React.useMemo(\n    () => ({\n      expandedForAnimation,\n      timeoutRef,\n      setExpandedForAnimation,\n    }),\n    [expandedForAnimation, timeoutRef, setExpandedForAnimation],\n  );\n  useLeftNavSmoothExpand(props, smoothExpandOpts);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                          SIDE EFFECTS                          *\n  // ************************** ------------ **************************\n  React.useEffect(() => {\n    onSelectedChange(selectedItem);\n  }, [selectedItem, onSelectedChange]);\n\n  React.useEffect(() => {\n    if (props.actionRef && props.actionRef.current) {\n      props.actionRef.current.setFocusedItem = setFocusedItem;\n    }\n  }, [props.actionRef]);\n\n  React.useEffect(() => {\n    if (openedItem !== null) setSelectedParent(openedItem);\n  }, [openedItem]);\n\n  React.useEffect(() => {\n    onFocusChange(focusedItem);\n  }, [focusedItem, onFocusChange]);\n\n  useSelectFirstBodyItem(\n    items,\n    openedItem,\n    props.selectedItem !== undefined ? props.selectedItem : selectedItem,\n    setSelectedItem,\n    props.disableDefaultSelection,\n  );\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                        ITEMS MANAGEMENT                        *\n  // ************************** ------------ **************************\n\n  const leftNavItemsProps = React.useMemo(\n    () => ({\n      headerItem: props.HeaderComponent,\n      bodyHeaderItem: props.BodyHeaderComponent,\n      items: props.items,\n      openedDrilldowns,\n    }),\n    [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns],\n  );\n\n  // We need to know the current visible items since we have drilldowns\n  const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);\n\n  // -----------------------------------------------------------------------------\n  // ************************** ------------ **************************\n  // *                         LEFTNAV CONFIG                         *\n  // ************************** ------------ **************************\n  const finalConfig = React.useMemo(\n    () => ({\n      leftNavProps: props,\n      expandedForAnimation,\n      selectedItem: props.selectedItem !== undefined ? props.selectedItem : selectedItem,\n      setSelectedItem,\n      selectedParent: props.selectedParent !== undefined ? props.selectedParent : selectedParent,\n      setSelectedParent,\n      focusedItem,\n      setFocusedItem,\n      openedDrilldowns,\n      setOpenedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    }),\n    [\n      props,\n      expandedForAnimation,\n      selectedItem,\n      setSelectedItem,\n      setSelectedParent,\n      selectedParent,\n      focusedItem,\n      setFocusedItem,\n      openedDrilldowns,\n      setOpenedDrilldowns,\n      visibleItems,\n      visibleItemsRefs,\n    ],\n  );\n\n  return finalConfig;\n};\n\nexport default useLeftNavConfig;\n"],
+  "mappings": "AAAA;ACAA;AAGA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC,UAAsC;AACrE,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,UAAU;AAOzE,QAAM,CAAC,cAAc,mBAAmB,OAAM,SAAwB;AACtE,QAAM,CAAC,gBAAgB,qBAAqB,OAAM,SAAwB;AAE1E,QAAM,CAAC,aAAa,kBAAkB,OAAM,SAAwB;AAEpE,QAAM,CAAC,kBAAkB,uBAAuB,OAAM,SAAmB;AAMzE,QAAM,CAAC,sBAAsB,2BAA2B,OAAM,SAAS;AACvE,QAAM,aAAa,OAAM,OAAsC;AAC/D,QAAM,mBAAmB,OAAM,QAC7B,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,sBAAsB,YAAY;AAErC,yBAAuB,OAAO;AAM9B,SAAM,UAAU,MAAM;AACpB,qBAAiB;AAAA,KAChB,CAAC,cAAc;AAElB,SAAM,UAAU,MAAM;AACpB,QAAI,MAAM,aAAa,MAAM,UAAU,SAAS;AAC9C,YAAM,UAAU,QAAQ,iBAAiB;AAAA;AAAA,KAE1C,CAAC,MAAM;AAEV,SAAM,UAAU,MAAM;AACpB,QAAI,eAAe;AAAM,wBAAkB;AAAA,KAC1C,CAAC;AAEJ,SAAM,UAAU,MAAM;AACpB,kBAAc;AAAA,KACb,CAAC,aAAa;AAEjB,yBACE,OACA,YACA,MAAM,iBAAiB,SAAY,MAAM,eAAe,cACxD,iBACA,MAAM;AAQR,QAAM,oBAAoB,OAAM,QAC9B,MAAO;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,gBAAgB,MAAM;AAAA,IACtB,OAAO,MAAM;AAAA,IACb;AAAA,MAEF,CAAC,MAAM,iBAAiB,MAAM,qBAAqB,MAAM,OAAO;AAIlE,QAAM,EAAE,cAAc,qBAAqB,gBAAgB;AAM3D,QAAM,cAAc,OAAM,QACxB,MAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,cAAc,MAAM,iBAAiB,SAAY,MAAM,eAAe;AAAA,IACtE;AAAA,IACA,gBAAgB,MAAM,mBAAmB,SAAY,MAAM,iBAAiB;AAAA,IAC5E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO;AAAA;AAGT,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/configs/useLeftNavItems.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { createRef, useMemo, useRef } from "react";
+import { ITEM_TYPES } from "../exported-related";
+import { FOOTER_DS_ID } from "../exported-related/constants";
+const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
+const walkItems = (items, openedDrilldowns, callback) => {
+  items.forEach((item) => {
+    if (typeof item.type === "string") {
+      if (notFocuseableItems.includes(item.type))
+        return;
+      callback(item.dsId);
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
+        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
+        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
+    } else {
+      if (!item.itemOpts?.focuseable)
+        return;
+      callback(item.dsId);
+    }
+  });
+};
+const useLeftNavItems = (props) => {
+  const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;
+  const items = useMemo(() => {
+    const itemsArray = [...bodyItems];
+    if (bodyHeaderItem)
+      itemsArray.unshift(bodyHeaderItem);
+    if (headerItem)
+      itemsArray.unshift(headerItem);
+    return itemsArray;
+  }, [headerItem, bodyHeaderItem, bodyItems]);
+  const visibleItemsRefs = useRef({});
+  const visibleItems = useMemo(() => {
+    const visibleItemsArray = [];
+    walkItems(items, openedDrilldowns, (dsId) => {
+      visibleItemsArray.push(dsId);
+    });
+    visibleItemsArray.push(FOOTER_DS_ID);
+    return visibleItemsArray;
+  }, [items, openedDrilldowns]);
+  visibleItems.forEach((dsId) => {
+    if (!(dsId in visibleItemsRefs.current))
+      visibleItemsRefs.current[dsId] = createRef();
+  });
+  return { visibleItems, visibleItemsRefs };
+};
+var useLeftNavItems_default = useLeftNavItems;
+export {
+  useLeftNavItems_default as default,
+  useLeftNavItems
+};
+//# sourceMappingURL=useLeftNavItems.js.map

package/dist/esm/configs/useLeftNavItems.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavItems.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { createRef, MutableRefObject, RefObject, useMemo, useRef } from 'react';\nimport { ITEM_TYPES } from '../exported-related';\nimport type { GenericItemItemProps } from '../index.d';\nimport { FOOTER_DS_ID } from '../exported-related/constants';\n\nconst notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];\n\n// Walks the array of items\n// Drilldowns are tree-like structures\nconst walkItems = (items: GenericItemItemProps[], openedDrilldowns: string[], callback: (dsId: string) => void) => {\n  items.forEach((item) => {\n    if (typeof item.type === 'string') {\n      // Out of the box item\n      if (notFocuseableItems.includes(item.type)) return; // not focuseable\n\n      callback(item.dsId);\n\n      // If it's an opened uncontrolled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n\n      // If it's an opened controlled drilldown\n      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)\n        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n    } else {\n      // Custom item\n      if (!item.itemOpts?.focuseable) return; // not focuseable specified\n      callback(item.dsId);\n    }\n  });\n};\n\nexport const useLeftNavItems = (props: {\n  headerItem: GenericItemItemProps;\n  bodyHeaderItem: GenericItemItemProps;\n  items: GenericItemItemProps[];\n  openedDrilldowns: string[];\n}): {\n  visibleItems: string[];\n  visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLElement>>>;\n} => {\n  const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;\n\n  // Place the header and body header items into the array of items\n  const items = useMemo(() => {\n    const itemsArray: GenericItemItemProps[] = [...bodyItems];\n    if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);\n    if (headerItem) itemsArray.unshift(headerItem);\n    return itemsArray;\n  }, [headerItem, bodyHeaderItem, bodyItems]);\n\n  const visibleItemsRefs = useRef<Record<string, RefObject<HTMLElement>>>({});\n\n  const visibleItems: string[] = useMemo(() => {\n    const visibleItemsArray: string[] = [];\n    walkItems(items, openedDrilldowns, (dsId: string) => {\n      visibleItemsArray.push(dsId);\n    });\n    visibleItemsArray.push(FOOTER_DS_ID);\n    return visibleItemsArray;\n  }, [items, openedDrilldowns]);\n\n  visibleItems.forEach((dsId) => {\n    if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = createRef();\n  });\n\n  return { visibleItems, visibleItemsRefs };\n};\n\nexport default useLeftNavItems;\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEA;AAEA,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW;AAI3E,MAAM,YAAY,CAAC,OAA+B,kBAA4B,aAAqC;AACjH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,UAAU;AAEjC,UAAI,mBAAmB,SAAS,KAAK;AAAO;AAE5C,eAAS,KAAK;AAGd,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK;AAClG,kBAAU,KAAK,UAAU,SAAS,IAAI,kBAAkB;AAG1D,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,IAAI,kBAAkB;AAAA,WACrD;AAEL,UAAI,CAAC,KAAK,UAAU;AAAY;AAChC,eAAS,KAAK;AAAA;AAAA;AAAA;AAKb,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,qBAAqB;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAqC,CAAC,GAAG;AAC/C,QAAI;AAAgB,iBAAW,QAAQ;AACvC,QAAI;AAAY,iBAAW,QAAQ;AACnC,WAAO;AAAA,KACN,CAAC,YAAY,gBAAgB;AAEhC,QAAM,mBAAmB,OAA+C;AAExE,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B;AACpC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK;AAAA;AAEzB,sBAAkB,KAAK;AACvB,WAAO;AAAA,KACN,CAAC,OAAO;AAEX,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,CAAE,SAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,QAAQ;AAAA;AAG5E,SAAO,EAAE,cAAc;AAAA;AAGzB,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/esm/configs/useLeftNavSmoothExpand.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2 from "react";
+const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
+  const { expanded } = props;
+  const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;
+  React2.useEffect(() => {
+    if (!expanded && expandedForAnimation) {
+      if (timeoutRef.current)
+        clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
+    } else if (expanded)
+      setExpandedForAnimation(true);
+  }, [expanded]);
+  React2.useEffect(() => () => {
+    if (timeoutRef.current)
+      clearTimeout(timeoutRef.current);
+  }, [timeoutRef]);
+};
+var useLeftNavSmoothExpand_default = useLeftNavSmoothExpand;
+export {
+  useLeftNavSmoothExpand_default as default,
+  useLeftNavSmoothExpand
+};
+//# sourceMappingURL=useLeftNavSmoothExpand.js.map

package/dist/esm/configs/useLeftNavSmoothExpand.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavSmoothExpand.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { LeftNavProps } from '../index.d';\n\ninterface SmoothExpandOptsT {\n  expandedForAnimation: boolean;\n  timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;\n  setExpandedForAnimation: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const useLeftNavSmoothExpand = (props: LeftNavProps, smoothExpandOpts: SmoothExpandOptsT): void => {\n  const { expanded } = props;\n  const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;\n\n  React.useEffect(() => {\n    // If expanded changes, we need to smoothly transition to the non-expanded state\n    // so we need to wait for 350ms\n    if (!expanded && expandedForAnimation) {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);\n    } else if (expanded) setExpandedForAnimation(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [expanded]);\n\n  React.useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    },\n    [timeoutRef],\n  );\n};\n\nexport default useLeftNavSmoothExpand;\n"],
+  "mappings": "AAAA;ACAA;AAQO,MAAM,yBAAyB,CAAC,OAAqB,qBAA8C;AACxG,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,sBAAsB,YAAY,4BAA4B;AAEtE,SAAM,UAAU,MAAM;AAGpB,QAAI,CAAC,YAAY,sBAAsB;AACrC,UAAI,WAAW;AAAS,qBAAa,WAAW;AAChD,iBAAW,UAAU,WAAW,MAAM,wBAAwB,QAAQ;AAAA,eAC7D;AAAU,8BAAwB;AAAA,KAE5C,CAAC;AAEJ,SAAM,UACJ,MAAM,MAAM;AACV,QAAI,WAAW;AAAS,mBAAa,WAAW;AAAA,KAElD,CAAC;AAAA;AAIL,IAAO,iCAAQ;",
+  "names": []
+}

package/dist/esm/exported-related/ChevronItem/index.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import { ChevronSmallRight } from "@elliemae/ds-icons";
+const ChevronItem = (props) => /* @__PURE__ */ React2.createElement(ChevronSmallRight, __spreadValues({
+  size: "m",
+  color: ["brand-primary", 800]
+}, props));
+var ChevronItem_default = ChevronItem;
+export {
+  ChevronItem,
+  ChevronItem_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/exported-related/ChevronItem/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ChevronItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props: unknown): JSX.Element => (\n  <ChevronSmallRight size=\"m\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default ChevronItem;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEO,MAAM,cAAc,CAAC,UAC1B,qCAAC,mBAAD;AAAA,EAAmB,MAAK;AAAA,EAAI,OAAO,CAAC,iBAAiB;AAAA,GAAU;AAGjE,IAAO,sBAAQ;",
+  "names": []
+}

package/dist/esm/exported-related/Icon/index.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+const AugmentedIcon = (Icon2) => styled(Icon2)`
+  cursor: pointer;
+
+  outline: 0;
+  :focus,
+  :active {
+    outline: 1px solid #1e79c2;
+  }
+`;
+const Icon = (IconComponent) => (props) => {
+  const StyledComponent = AugmentedIcon(IconComponent);
+  return /* @__PURE__ */ React2.createElement(StyledComponent, __spreadValues({
+    color: ["brand-primary", 800],
+    tabIndex: 0
+  }, props));
+};
+export {
+  Icon
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/exported-related/Icon/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Icon/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\n\nconst AugmentedIcon = (\n  Icon: React.ComponentType<{ color: unknown; tabIndex: number }>,\n) => styled(Icon)`\n  cursor: pointer;\n\n  outline: 0;\n  :focus,\n  :active {\n    outline: 1px solid #1e79c2;\n  }\n`;\n\nexport const Icon = (\n  IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>,\n) => (props: unknown): JSX.Element => {\n  const StyledComponent = AugmentedIcon(IconComponent);\n  return (\n    <StyledComponent color={['brand-primary', 800]} tabIndex={0} {...props} />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA,MAAM,gBAAgB,CACpB,UACG,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUL,MAAM,OAAO,CAClB,kBACG,CAAC,UAAgC;AACpC,QAAM,kBAAkB,cAAc;AACtC,SACE,qCAAC,iBAAD;AAAA,IAAiB,OAAO,CAAC,iBAAiB;AAAA,IAAM,UAAU;AAAA,KAAO;AAAA;",
+  "names": []
+}

package/dist/esm/exported-related/ItemRenderer/index.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+import React2, { useContext, useMemo, useCallback } from "react";
+import Grid from "@elliemae/ds-grid";
+import { StyledItemWrapper, StyledItem } from "./styled";
+import { LeftNavContext } from "../../LeftNavigationContext";
+import { usePropsWithDefaults } from "./usePropsWithDefaults";
+import { useKeyboardNavigation } from "../../hooks";
+const ItemRenderer = (props) => {
+  const propsWithDefault = usePropsWithDefaults(props);
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },
+      CollapsedComponent
+    },
+    subitems,
+    minHeight,
+    paddingTop,
+    onClick,
+    shadowStyle,
+    hasBorderBottom,
+    borderBottomMr,
+    children
+  } = propsWithDefault;
+  const ctx = useContext(LeftNavContext);
+  const {
+    leftNavProps: { onItemClick, openedItem },
+    expandedForAnimation,
+    selectedParent,
+    selectedItem,
+    setSelectedItem,
+    setFocusedItem,
+    visibleItemsRefs
+  } = ctx;
+  const opened = dsId === openedItem;
+  const handleOnClick = useCallback((e) => {
+    if (onClick)
+      onClick();
+    onItemClick(item, e);
+    if (selectable)
+      setSelectedItem(item.dsId);
+  }, [onItemClick, item, setSelectedItem, selectable, onClick]);
+  const handleFocus = useCallback(() => {
+    if (focuseable)
+      setFocusedItem(dsId);
+  }, [dsId, setFocusedItem, focuseable]);
+  const onKeyDown = useKeyboardNavigation({
+    item,
+    onClick: handleOnClick
+  });
+  const cols = useMemo(() => expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"], [expandedForAnimation]);
+  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);
+  if (!expandedForAnimation && !CollapsedComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledItemWrapper, {
+    shadowStyle: shadowStyle(opened, item.type),
+    "data-testid": "leftnav-item-wrapper"
+  }, /* @__PURE__ */ React2.createElement(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,
+    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
+  }, !expandedForAnimation ? /* @__PURE__ */ React2.createElement(Grid, {
+    "data-testid": "leftnav-leftcomponent",
+    justifyContent: "center"
+  }, /* @__PURE__ */ React2.createElement(CollapsedComponent, {
+    item,
+    ctx
+  })) : children), hasBorderBottom && /* @__PURE__ */ React2.createElement("div", {
+    style: {
+      marginLeft: opened ? "16px" : "0px",
+      marginRight: borderBottomMr,
+      height: "1px",
+      width: `calc(100% - ${borderBottomMr} - ${opened ? "16px" : "0px"})`,
+      backgroundColor: "#E0E3E8"
+    }
+  })), subitems);
+};
+export {
+  ItemRenderer
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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": "AAAA;ACEA;AACA;AACA;AAGA;AACA;AACA;AAEO,MAAM,eAAe,CAAC,UAAsC;AACjE,QAAM,mBAAmB,qBAAqB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc;AAAA,MACzF;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI;AAAS;AACb,gBAAY,MAAM;AAClB,QAAI;AAAY,sBAAgB,KAAK;AAAA,KAEvC,CAAC,aAAa,MAAM,iBAAiB,YAAY;AAGnD,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe;AAAA,KAC9B,CAAC,MAAM,gBAAgB;AAE1B,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA;AAGX,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,UAAU,CAAC,SAAU,CAAC;AACzF,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc;AAEvE,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA;AAGT,SACE,4DACE,qCAAC,mBAAD;AAAA,IAAmB,aAAa,YAAY,QAAQ,KAAK;AAAA,IAAO,eAAY;AAAA,KAC1E,qCAAC,YAAD;AAAA,IACE,KAAK,iBAAiB,QAAQ;AAAA,IAC9B,IAAI;AAAA,IACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,IACvC;AAAA,IACA,aAAa,YAAY,QAAQ,KAAK;AAAA,IACtC,YAAW;AAAA,IACX;AAAA,IACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,IACzC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB,mBAAmB;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,IACT,eAAY;AAAA,IACZ,UAAU,aAAa,IAAI;AAAA,IAC3B,oBAAkB;AAAA,IAClB,iBAAe;AAAA,IACf,MAAM;AAAA,IACN,iBAAe;AAAA,IACf,uBAAqB,mBAAmB;AAAA,IACxC,cAAY;AAAA,IACZ,eAAa,CAAC;AAAA,IACd,aAAW;AAAA,KAEV,CAAC,uBACA,qCAAC,MAAD;AAAA,IAAM,eAAY;AAAA,IAAwB,gBAAe;AAAA,KACvD,qCAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,QAGlC,WAGH,mBACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,YAAY,SAAS,SAAS;AAAA,MAC9B,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO,eAAe,oBAAoB,SAAS,SAAS;AAAA,MAC5D,iBAAiB;AAAA;AAAA,OAKxB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import Grid from "@elliemae/ds-grid";
+import styled from "styled-components";
+const borderOutside = (color, weight = 2) => `&:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  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";
+  if (selected && !opened)
+    return theme.colors.brand[200];
+  return theme.colors.neutral["000"];
+};
+const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
+  if (!selectable)
+    return "white";
+  if (selected && !opened)
+    return theme.colors.brand[200];
+  return theme.colors.brand["200"];
+};
+const StyledItem = styled(Grid)`
+  cursor: ${(props) => props.selectable && !props.opened ? "pointer" : "auto"};
+  min-height: ${(props) => props.minHeight};
+
+  background: ${getItemBackground};
+
+  ${(props) => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : ""}
+
+  :hover {
+    background: ${getItemHoverBackground};
+  }
+
+  :active {
+    background: ${({ selectable, theme }) => selectable ? theme.colors.brand[200] : "white"};
+  }
+
+  ${(props) => props.shadowStyle(props.theme)};
+
+  outline: none;
+
+  ${(props) => props.tabIndex !== -1 ? `:focus {
+    ${borderOutside(props.theme.colors.brand[700])}
+        }` : ""}
+`;
+export {
+  StyledItem,
+  StyledItemWrapper,
+  borderOutside
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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 'styled-components';\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;ACEA;AACA;AAUO,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhD,kBAAkB;AAAA;AAAA;AAIvB,MAAM,oBAAoB,OAAO;AAAA;AAAA,IAIpC,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAGvC,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAAA;AAGrB,MAAM,aAAa,OAAO;AAAA,YACrB,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,KAAK;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,YAAa,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,UACD,MAAM,aAAa,KACf;AAAA,MACF,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,aAErC;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,59 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { useMemo } from "react";
+const itemDefaultProps = {
+  label: "",
+  labelOverflow: "truncate",
+  selectable: true,
+  focuseable: true,
+  openable: false,
+  closable: false,
+  ariaLabel: "",
+  ariaRole: "menuitem",
+  ariaLive: "off",
+  ariaExpanded: void 0,
+  ariaDescribedBy: void 0
+};
+const itemWithoutShadows = ["ds-left-nav-item-header", "ds-left-nav-item-link", "ds-left-nav-item-submenu"];
+const usePropsWithDefaults = (props) => {
+  const propsWithDefault = useMemo(() => {
+    const itemWithDefaults = __spreadProps(__spreadValues({
+      CollapsedComponent: () => null
+    }, props.item), {
+      itemOpts: __spreadValues(__spreadValues({}, itemDefaultProps), props.item.itemOpts)
+    });
+    return __spreadProps(__spreadValues({
+      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"}`,
+      hasBorderBottom: false,
+      borderBottomMr: "0px"
+    }, props), {
+      item: itemWithDefaults
+    });
+  }, [props]);
+  return propsWithDefault;
+};
+export {
+  usePropsWithDefaults
+};
+//# sourceMappingURL=usePropsWithDefaults.js.map

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

@@ -0,0 +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;ACAA;AAGA,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;AAAA;AAGnB,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB;AAGzE,MAAM,uBAAuB,CAAC,UAAwC;AAC3E,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,OACvB,MAAM,OAFc;AAAA,MAGvB,UAAU,kCAAK,mBAAqB,MAAM,KAAK;AAAA;AAEjD,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAa,CAAC,QAAiB,SAAiB,CAAC,UAC/C,eACE,UAAU,CAAC,mBAAmB,SAAS,QAAQ,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,OACb,QAVE;AAAA,MAWL,MAAM;AAAA;AAAA,KAEP,CAAC;AAEJ,SAAO;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  AlertsSmallFill,
+  Notifications as InternalNotifications,
+  ExceptionsSmallFill,
+  MessagesSmallFill
+} from "@elliemae/ds-icons";
+import styled from "styled-components";
+import Grid from "@elliemae/ds-grid";
+const StyledIcon = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Notifications = ({
+  exceptions = false,
+  alerts = false,
+  messages = false
+}) => /* @__PURE__ */ React2.createElement(StyledIcon, null, /* @__PURE__ */ React2.createElement(InternalNotifications, {
+  size: "m",
+  color: ["brand-primary", 800],
+  "data-testid": "left-nav-notifications-icon"
+}), (exceptions || alerts || messages) && /* @__PURE__ */ React2.createElement(Grid, {
+  cols: ["1fr", "1fr", "1fr"],
+  gutter: "xxxs",
+  mt: "2px"
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  width: "6px",
+  height: "6px",
+  "data-testid": "left-nav-exceptions-icon"
+}, exceptions && /* @__PURE__ */ React2.createElement(ExceptionsSmallFill, {
+  width: "6px",
+  height: "6px",
+  color: ["warning", 900]
+})), /* @__PURE__ */ React2.createElement(Grid, {
+  width: "6px",
+  height: "6px",
+  "data-testid": "left-nav-alerts-icon"
+}, alerts && /* @__PURE__ */ React2.createElement(AlertsSmallFill, {
+  width: "6px",
+  height: "6px",
+  color: ["danger", 900]
+})), /* @__PURE__ */ React2.createElement(Grid, {
+  width: "6px",
+  height: "6px",
+  "data-testid": "left-nav-messages-icon"
+}, messages && /* @__PURE__ */ React2.createElement(MessagesSmallFill, {
+  width: "6px",
+  height: "6px",
+  color: ["success", 900]
+}))));
+var Notifications_default = Notifications;
+export {
+  Notifications,
+  Notifications_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 'styled-components';\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;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAEA,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAYnB,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,MAEX,qCAAC,YAAD,MACE,qCAAC,uBAAD;AAAA,EAAuB,MAAK;AAAA,EAAI,OAAO,CAAC,iBAAiB;AAAA,EAAM,eAAY;AAAA,IACzE,eAAc,UAAU,aACxB,qCAAC,MAAD;AAAA,EAAM,MAAM,CAAC,OAAO,OAAO;AAAA,EAAQ,QAAO;AAAA,EAAO,IAAG;AAAA,GAClD,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,cAAc,qCAAC,qBAAD;AAAA,EAAqB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW;AAAA,KAElF,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,UAAU,qCAAC,iBAAD;AAAA,EAAiB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,UAAU;AAAA,KAEzE,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,YAAY,qCAAC,mBAAD;AAAA,EAAmB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW;AAAA;AAOtF,IAAO,wBAAQ;",
+  "names": []
+}