@elliemae/ds-left-navigation 3.16.0-next.2 → 3.16.0-next.21

package/dist/cjs/prop-types.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -31,36 +35,36 @@ __export(prop_types_exports, {
 });
 module.exports = __toCommonJS(prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_outOfTheBox = require("./outOfTheBox");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_outOfTheBox = require("./outOfTheBox/index.js");
 const leftNavItemProps = {
-  type: import_ds_utilities.PropTypes.oneOf(import_outOfTheBox.outOfTheBoxTypes).description("out of the box types"),
-  dsId: import_ds_utilities.PropTypes.string.description("unique identifier for the left nav item"),
-  Component: import_ds_utilities.PropTypes.func.description(
+  type: import_ds_props_helpers.PropTypes.oneOf(import_outOfTheBox.outOfTheBoxTypes).description("out of the box types"),
+  dsId: import_ds_props_helpers.PropTypes.string.description("unique identifier for the left nav item"),
+  Component: import_ds_props_helpers.PropTypes.func.description(
     "A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box"
   ),
-  CollapsedComponent: import_ds_utilities.PropTypes.func.description("A component which is renderer when the left-nav is collapsed"),
-  itemOpts: import_ds_utilities.PropTypes.object.description("Item options")
+  CollapsedComponent: import_ds_props_helpers.PropTypes.func.description("A component which is renderer when the left-nav is collapsed"),
+  itemOpts: import_ds_props_helpers.PropTypes.object.description("Item options")
 };
 const leftNavigationProps = {
-  containerProps: import_ds_utilities.PropTypes.shape({ expandedWidth: import_ds_utilities.PropTypes.string }).description("Set of Properties attached to the main container").defaultValue({ expandedWidth: "240px" }),
-  expanded: import_ds_utilities.PropTypes.bool.description("Whether to show the left navigation expanded or collapsed").defaultValue(false),
-  loading: import_ds_utilities.PropTypes.bool.description("Whether the left-nav is loading").defaultValue(false),
-  openedItem: import_ds_utilities.PropTypes.string.description("The id of the left navigation item you want to be opened").defaultValue(null),
-  footerLabel: import_ds_utilities.PropTypes.string.description("The label to show in the footer item"),
-  onFooterExpand: import_ds_utilities.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
-  onFooterClose: import_ds_utilities.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
-  onSelectedChange: import_ds_utilities.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
-  onFocusChange: import_ds_utilities.PropTypes.func.description("A callback which triggers when the focused item changes").defaultValue(() => null),
-  items: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("The array of items you want to render inside the left nav").defaultValue([]),
-  disableDefaultSelection: import_ds_utilities.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false)
+  containerProps: import_ds_props_helpers.PropTypes.shape({ expandedWidth: import_ds_props_helpers.PropTypes.string }).description("Set of Properties attached to the main container").defaultValue({ expandedWidth: "240px" }),
+  expanded: import_ds_props_helpers.PropTypes.bool.description("Whether to show the left navigation expanded or collapsed").defaultValue(false),
+  loading: import_ds_props_helpers.PropTypes.bool.description("Whether the left-nav is loading").defaultValue(false),
+  openedItem: import_ds_props_helpers.PropTypes.string.description("The id of the left navigation item you want to be opened").defaultValue(null),
+  footerLabel: import_ds_props_helpers.PropTypes.string.description("The label to show in the footer item"),
+  onFooterExpand: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
+  onFooterClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
+  onSelectedChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
+  onFocusChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the focused item changes").defaultValue(() => null),
+  items: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("The array of items you want to render inside the left nav").defaultValue([]),
+  disableDefaultSelection: import_ds_props_helpers.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false)
 };
 const LeftNavItemProps = () => null;
 LeftNavItemProps.displayName = "LeftNavItemProps";
-const LeftNavItemPropsSchema = (0, import_ds_utilities.describe)(LeftNavItemProps);
+const LeftNavItemPropsSchema = (0, import_ds_props_helpers.describe)(LeftNavItemProps);
 LeftNavItemPropsSchema.propTypes = leftNavItemProps;
 const LeftNavItemOptions = () => null;
 LeftNavItemOptions.displayName = "LeftNavItemOptions";
-const LeftNavItemOptionsSchema = (0, import_ds_utilities.describe)(LeftNavItemOptions);
+const LeftNavItemOptionsSchema = (0, import_ds_props_helpers.describe)(LeftNavItemOptions);
 LeftNavItemOptionsSchema.propTypes = leftNavItemProps;
 //# sourceMappingURL=prop-types.js.map

package/dist/cjs/prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { outOfTheBoxTypes } from './outOfTheBox';\n\nexport const leftNavItemProps = {\n  type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n  dsId: PropTypes.string.description('unique identifier for the left nav item'),\n  Component: PropTypes.func.description(\n    \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n  ),\n  CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n  containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n    .description('Set of Properties attached to the main container')\n    .defaultValue({ expandedWidth: '240px' }),\n  expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n  loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n  openedItem: PropTypes.string\n    .description('The id of the left navigation item you want to be opened')\n    .defaultValue(null),\n  footerLabel: PropTypes.string.description('The label to show in the footer item'),\n  onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n  onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n  onSelectedChange: PropTypes.func\n    .description('A callback which triggers when the selected item changes')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('A callback which triggers when the focused item changes')\n    .defaultValue(() => null),\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of items you want to render inside the left nav')\n    .defaultValue([]),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether you do not want to automatically select the first body item')\n    .defaultValue(false),\n};\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAoC;AACpC,yBAAiC;AAE1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,8BAAU,MAAM,mCAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,8BAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,8BAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,8BAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,8BAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,8BAAU,MAAM,EAAE,eAAe,8BAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,8BAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,8BAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,8BAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,8BAAU,OAAO,YAAY,sCAAsC;AAAA,EAChF,gBAAgB,8BAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,8BAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,8BAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,8BAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,8BAAU,QAAQ,8BAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,8BAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AACvB;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,6BAAyB,8BAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,+BAA2B,8BAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
+  "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\n\nexport const leftNavItemProps = {\n  type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n  dsId: PropTypes.string.description('unique identifier for the left nav item'),\n  Component: PropTypes.func.description(\n    \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n  ),\n  CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n  containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n    .description('Set of Properties attached to the main container')\n    .defaultValue({ expandedWidth: '240px' }),\n  expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n  loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n  openedItem: PropTypes.string\n    .description('The id of the left navigation item you want to be opened')\n    .defaultValue(null),\n  footerLabel: PropTypes.string.description('The label to show in the footer item'),\n  onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n  onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n  onSelectedChange: PropTypes.func\n    .description('A callback which triggers when the selected item changes')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('A callback which triggers when the focused item changes')\n    .defaultValue(() => null),\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of items you want to render inside the left nav')\n    .defaultValue([]),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether you do not want to automatically select the first body item')\n    .defaultValue(false),\n};\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAoC;AACpC,yBAAiC;AAE1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,MAAM,mCAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,kCAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,kCAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,kCAAU,MAAM,EAAE,eAAe,kCAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,kCAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,kCAAU,OAAO,YAAY,sCAAsC;AAAA,EAChF,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,kCAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,kCAAU,QAAQ,kCAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,kCAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AACvB;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,6BAAyB,kCAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,+BAA2B,kCAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/LeftNavigation.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-utilities";
-import { leftNavigationProps } from "./prop-types";
-import LeftNavigationContext, { defaultProps } from "./LeftNavigationContext";
-import { useLeftNavConfig } from "./configs/useLeftNavConfig";
-import LeftNavContent from "./parts/LeftNavContent";
+import { describe } from "@elliemae/ds-props-helpers";
+import { leftNavigationProps } from "./prop-types.js";
+import LeftNavigationContext, { defaultProps } from "./LeftNavigationContext.js";
+import { useLeftNavConfig } from "./configs/useLeftNavConfig.js";
+import LeftNavContent from "./parts/LeftNavContent/index.js";
 const LeftNavigation = (props) => {
   const leftNavConfig = useLeftNavConfig(props);
   return /* @__PURE__ */ jsx(LeftNavigationContext.Provider, { value: leftNavConfig, children: /* @__PURE__ */ jsx(LeftNavContent, {}) });

package/dist/esm/LeftNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/LeftNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { leftNavigationProps } from './prop-types';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig';\nimport LeftNavContent from './parts/LeftNavContent';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n  const leftNavConfig = useLeftNavConfig(props);\n\n  return (\n    <LeftNavigationContext.Provider value={leftNavConfig}>\n      <LeftNavContent />\n    </LeftNavigationContext.Provider>\n  );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './prop-types.js';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig.js';\nimport LeftNavContent from './parts/LeftNavContent/index.js';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n  const leftNavConfig = useLeftNavConfig(props);\n\n  return (\n    <LeftNavigationContext.Provider value={leftNavConfig}>\n      <LeftNavContent />\n    </LeftNavigationContext.Provider>\n  );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,OAAO,yBAAyB,oBAAoB;AACpD,SAAS,wBAAwB;AACjC,OAAO,oBAAoB;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,gBAAgB,iBAAiB,KAAK;AAE5C,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACrC,8BAAC,kBAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/common/getItemBackgroundStyle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getItemBackgroundStyle.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonItemBackgroundStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  background: ${color};\n\n  :hover {\n    background: ${hoverColor};\n  }\n\n  :active {\n    background: ${activeColor};\n  }\n`;\n\nexport const getItemBackgroundStyle = (props: { theme: Theme; selected: boolean; opened: boolean }): string => {\n  if (props.selected && !props.opened)\n    return commonItemBackgroundStyle(\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n      props.theme.colors.brand[200],\n    );\n\n  return commonItemBackgroundStyle(\n    props.theme.colors.neutral['000'],\n    props.theme.colors.neutral['080'],\n    props.theme.colors.brand[200],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF;AAAA;AAAA;AAAA,kBAGE;AAAA;AAAA;AAAA;AAAA,kBAIA;AAAA;AAAA;AAIX,MAAM,yBAAyB,CAAC,UAAwE;AAC7G,MAAI,MAAM,YAAY,CAAC,MAAM;AAC3B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM;AAAA,MACzB,MAAM,MAAM,OAAO,MAAM;AAAA,MACzB,MAAM,MAAM,OAAO,MAAM;AAAA,IAC3B;AAEF,SAAO;AAAA,IACL,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC3B,MAAM,MAAM,OAAO,MAAM;AAAA,EAC3B;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF;AAAA;AAAA;AAAA,kBAGE;AAAA;AAAA;AAAA;AAAA,kBAIA;AAAA;AAAA;AAIX,MAAM,yBAAyB,CAAC,UAAwE;AAC7G,MAAI,MAAM,YAAY,CAAC,MAAM;AAC3B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO;AAAA,IACL,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,EAC9B;AACF;",
   "names": []
 }

package/dist/esm/common/getLeftBorderStyle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getLeftBorderStyle.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonLeftBorderStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n  -webkit-box-shadow: inset 4px 0 0 0 ${color};\n          box-shadow: inset 4px 0 0 0 ${color};\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};\n            box-shadow: inset 4px 0 0 0 ${hoverColor};\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};\n            box-shadow: inset 4px 0 0 0 ${activeColor};\n  }\n`;\n\nexport const getLeftBorderStyle = (props: { theme: Theme; selected: boolean; selectedParent: boolean }): string => {\n  if (props.selected || props.selectedParent)\n    return commonLeftBorderStyle(\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n      props.theme.colors.brand[400],\n    );\n\n  return commonLeftBorderStyle('transparent', props.theme.colors.brand[300], props.theme.colors.brand[400]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D;AAAA,wCACA;AAAA;AAAA;AAAA,0CAGE;AAAA,0CACA;AAAA;AAAA;AAAA;AAAA,0CAIA;AAAA,0CACA;AAAA;AAAA;AAInC,MAAM,qBAAqB,CAAC,UAAgF;AACjH,MAAI,MAAM,YAAY,MAAM;AAC1B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM;AAAA,MACzB,MAAM,MAAM,OAAO,MAAM;AAAA,MACzB,MAAM,MAAM,OAAO,MAAM;AAAA,IAC3B;AAEF,SAAO,sBAAsB,eAAe,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAC1G;",
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D;AAAA,wCACA;AAAA;AAAA;AAAA,0CAGE;AAAA,0CACA;AAAA;AAAA;AAAA;AAAA,0CAIA;AAAA,0CACA;AAAA;AAAA;AAInC,MAAM,qBAAqB,CAAC,UAAgF;AACjH,MAAI,MAAM,YAAY,MAAM;AAC1B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO,sBAAsB,eAAe,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAC1G;",
   "names": []
 }

package/dist/esm/common/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export * from "./getItemBackgroundStyle";
-export * from "./getLeftBorderStyle";
-export * from "./getScrollbarStyle";
+export * from "./getItemBackgroundStyle.js";
+export * from "./getLeftBorderStyle.js";
+export * from "./getScrollbarStyle.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/common/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './getItemBackgroundStyle';\nexport * from './getLeftBorderStyle';\nexport * from './getScrollbarStyle';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './getItemBackgroundStyle.js';\nexport * from './getLeftBorderStyle.js';\nexport * from './getScrollbarStyle.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/configs/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useLeftNavConfig } from "./useLeftNavConfig";
-import { useLeftNavConfig as useLeftNavConfig2 } from "./useLeftNavConfig";
+import { useLeftNavConfig } from "./useLeftNavConfig.js";
+import { useLeftNavConfig as useLeftNavConfig2 } from "./useLeftNavConfig.js";
 var configs_default = useLeftNavConfig;
 export {
   configs_default as default,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useLeftNavConfig } from './useLeftNavConfig';\n\nexport { useLeftNavConfig } from './useLeftNavConfig';\nexport default useLeftNavConfig;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useLeftNavConfig } from './useLeftNavConfig.js';\n\nexport { useLeftNavConfig } from './useLeftNavConfig.js';\nexport default useLeftNavConfig;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;AAEjC,SAAS,oBAAAA,yBAAwB;AACjC,IAAO,kBAAQ;",
   "names": ["useLeftNavConfig"]
 }

package/dist/esm/configs/useLeftNavConfig.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React2 from "react";
-import useLeftNavItems from "./useLeftNavItems";
-import { useLeftNavSmoothExpand } from "./useLeftNavSmoothExpand";
-import { useSelectFirstBodyItem } from "../hooks/useSelectFirstBodyItem";
+import useLeftNavItems from "./useLeftNavItems.js";
+import { useLeftNavSmoothExpand } from "./useLeftNavSmoothExpand.js";
+import { useSelectFirstBodyItem } from "../hooks/useSelectFirstBodyItem.js";
 const useLeftNavConfig = (props) => {
   const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;
   const [selectedItem, setSelectedItem] = React2.useState(null);

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

@@ -1,7 +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 type { 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { LeftNavProps } from '../index.d';\nimport type { ContextProps } from '../LeftNavigationContext.js';\nimport useLeftNavItems from './useLeftNavItems.js';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';\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,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,OAAO,qBAAqB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,UAAsC;AACrE,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,OAAM,SAAS,QAAQ;AAC/E,QAAM,aAAaA,OAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,yBAAuB,OAAO,gBAAgB;AAM9C,EAAAA,OAAM,UAAU,MAAM;AACpB,qBAAiB,YAAY;AAAA,EAC/B,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,MAAM,aAAa,MAAM,UAAU,SAAS;AAC9C,YAAM,UAAU,QAAQ,iBAAiB;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,eAAe;AAAM,wBAAkB,UAAU;AAAA,EACvD,GAAG,CAAC,UAAU,CAAC;AAEf,EAAAA,OAAM,UAAU,MAAM;AACpB,kBAAc,WAAW;AAAA,EAC3B,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM,iBAAiB,SAAY,MAAM,eAAe;AAAA,IACxD;AAAA,IACA,MAAM;AAAA,EACR;AAOA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL,YAAY,MAAM;AAAA,MAClB,gBAAgB,MAAM;AAAA,MACtB,OAAO,MAAM;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,MAAM,iBAAiB,MAAM,qBAAqB,MAAM,OAAO,gBAAgB;AAAA,EAClF;AAGA,QAAM,EAAE,cAAc,iBAAiB,IAAI,gBAAgB,iBAAiB;AAM5E,QAAM,cAAcA,OAAM;AAAA,IACxB,OAAO;AAAA,MACL,cAAc;AAAA,MACd;AAAA,MACA,cAAc,MAAM,iBAAiB,SAAY,MAAM,eAAe;AAAA,MACtE;AAAA,MACA,gBAAgB,MAAM,mBAAmB,SAAY,MAAM,iBAAiB;AAAA,MAC5E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEA,IAAO,2BAAQ;",
   "names": ["React"]
 }

package/dist/esm/configs/useLeftNavItems.js

@@ -1,7 +1,7 @@
 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";
+import { ITEM_TYPES } from "../exported-related/index.js";
+import { FOOTER_DS_ID } from "../exported-related/constants.js";
 const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach((item) => {

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

@@ -1,7 +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 type { MutableRefObject, RefObject } from 'react';\nimport { createRef, 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,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAAC,OAA+B,kBAA4B,aAAqC;AACjH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,UAAU;AAEjC,UAAI,mBAAmB,SAAS,KAAK,IAAI;AAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,OAAO;AAEL,UAAI,CAAC,KAAK,UAAU;AAAY;AAChC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,iBAAiB,IAAI;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAqC,CAAC,GAAG,SAAS;AACxD,QAAI;AAAgB,iBAAW,QAAQ,cAAc;AACrD,QAAI;AAAY,iBAAW,QAAQ,UAAU;AAC7C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,gBAAgB,SAAS,CAAC;AAE1C,QAAM,mBAAmB,OAA+C,CAAC,CAAC;AAE1E,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,YAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,QAAQ,UAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { MutableRefObject, RefObject } from 'react';\nimport { createRef, useMemo, useRef } from 'react';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport type { GenericItemItemProps } from '../index.d';\nimport { FOOTER_DS_ID } from '../exported-related/constants.js';\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,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAAC,OAA+B,kBAA4B,aAAqC;AACjH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,UAAU;AAEjC,UAAI,mBAAmB,SAAS,KAAK,IAAI;AAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,OAAO;AAEL,UAAI,CAAC,KAAK,UAAU;AAAY;AAChC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,iBAAiB,IAAI;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAqC,CAAC,GAAG,SAAS;AACxD,QAAI;AAAgB,iBAAW,QAAQ,cAAc;AACrD,QAAI;AAAY,iBAAW,QAAQ,UAAU;AAC7C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,gBAAgB,SAAS,CAAC;AAE1C,QAAM,mBAAmB,OAA+C,CAAC,CAAC;AAE1E,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,YAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB;AAAU,uBAAiB,QAAQ,IAAI,IAAI,UAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -1,3 +1,3 @@
 import * as React from "react";
-export * from "./constants";
+export * from "./constants.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { ChevronSmallRight } from "@elliemae/ds-icons";
-const ChevronItem = (props) => /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: ["brand-primary", 800], ...props });
+const ChevronItem = (props) => /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: ["brand-primary", "800"], ...props });
 var ChevronItem_default = ChevronItem;
 export {
   ChevronItem,

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

@@ -1,7 +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,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAyB;AAE3B,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,GAAG,GAAI,GAAG,OAAO;AAGxE,IAAO,sBAAQ;",
+  "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,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAyB;AAE3B,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
   "names": []
 }

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

@@ -12,7 +12,7 @@ const AugmentedIcon = (Icon2) => styled(Icon2)`
 `;
 const Icon = (IconComponent) => function(props) {
   const StyledComponent = AugmentedIcon(IconComponent);
-  return /* @__PURE__ */ jsx(StyledComponent, { color: ["brand-primary", 800], tabIndex: 0, ...props });
+  return /* @__PURE__ */ jsx(StyledComponent, { color: ["brand-primary", "800"], tabIndex: 0, ...props });
 };
 export {
   Icon

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

@@ -1,7 +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 '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n  cursor: pointer;\n\n  outline: 0;\n  :focus,\n  :active {\n    outline: 1px solid #1e79c2;\n  }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n  function (props: unknown): JSX.Element {\n    const StyledComponent = AugmentedIcon(IconComponent);\n    return <StyledComponent color={['brand-primary', 800]} tabIndex={0} {...props} />;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBZ;AAfX,SAAS,cAAc;AAEvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,GAAG,GAAG,UAAU,GAAI,GAAG,OAAO;AACjF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n  cursor: pointer;\n\n  outline: 0;\n  :focus,\n  :active {\n    outline: 1px solid #1e79c2;\n  }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n  function (props: unknown): JSX.Element {\n    const StyledComponent = AugmentedIcon(IconComponent);\n    return <StyledComponent color={['brand-primary', '800']} tabIndex={0} {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBZ;AAfX,SAAS,cAAc;AAEvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
   "names": ["Icon"]
 }

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

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback } from "react";
-import { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from "./styled";
-import { LeftNavContext } from "../../LeftNavigationContext";
-import { usePropsWithDefaults } from "./usePropsWithDefaults";
-import { useKeyboardNavigation } from "../../hooks";
+import { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from "./styled.js";
+import { LeftNavContext } from "../../LeftNavigationContext.js";
+import { usePropsWithDefaults } from "./usePropsWithDefaults.js";
+import { useKeyboardNavigation } from "../../hooks/index.js";
 const ItemRenderer = (props) => {
   const propsWithDefault = usePropsWithDefaults(props);
   const {
     item,
     item: {
       dsId,
-      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },
+      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },
       CollapsedComponent
     },
     subitems,
@@ -76,7 +76,7 @@ const ItemRenderer = (props) => {
         opened,
         onFocus: handleFocus,
         "data-testid": "leftnav-item-container",
-        tabIndex: focuseable ? 0 : -1,
+        tabIndex: focuseable ? 0 : void 0,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": ariaExpanded,
         role: ariaRole,
@@ -85,7 +85,6 @@ const ItemRenderer = (props) => {
         "data-opened": opened,
         "data-type": item.type,
         "aria-label": ariaLabel,
-        "aria-live": ariaLive,
         children: [
           !expandedForAnimation ? /* @__PURE__ */ jsx(StyledCollapsedContainer, { "data-testid": "leftnav-leftcomponent", justifyContent: "center", children: CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx }) }) : children,
           hasBorderBottom && /* @__PURE__ */ jsx(StyledBorderBottom, { opened, borderBottomMr })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\n\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId as string);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId as string);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledItem\n        ref={visibleItemsRefs.current[dsId]}\n        pt={paddingTop}\n        pl={indent === undefined ? 'xxxs' : `${indent}px`}\n        minHeight={minHeight}\n        shadowStyle={shadowStyle(opened, item.type)}\n        alignItems=\"flex-start\"\n        cols={cols}\n        onClick={!opened ? handleOnClick : () => null}\n        onKeyDown={onKeyDown}\n        selectable={selectable}\n        selected={isSelected}\n        selectedParent={selectedParent === dsId}\n        opened={opened}\n        onFocus={handleFocus}\n        data-testid=\"leftnav-item-container\"\n        tabIndex={focuseable ? 0 : -1}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        role={ariaRole}\n        data-selected={isSelected}\n        data-selectedparent={selectedParent === dsId}\n        data-opened={opened}\n        data-type={item.type}\n        aria-label={ariaLabel}\n        aria-live={ariaLive}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoEnB,mBA8B+B,KA7B7B,YADF;AAlEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAGzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,aAAW;AAAA,QAEV;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n  const propsWithDefault = usePropsWithDefaults(props);\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },\n      CollapsedComponent,\n    },\n    subitems,\n    minHeight,\n    paddingTop,\n    onClick,\n    shadowStyle,\n    hasBorderBottom,\n    borderBottomMr,\n    children,\n  } = propsWithDefault;\n\n  const ctx = useContext(LeftNavContext);\n  const {\n    leftNavProps: { onItemClick, openedItem },\n    expandedForAnimation,\n    selectedParent,\n    selectedItem,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = ctx;\n\n  const opened = dsId === openedItem;\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (onClick) onClick(); // used by uncontrolled drilldowns\n      onItemClick(item, e);\n      if (selectable) setSelectedItem(item.dsId as string);\n    },\n    [onItemClick, item, setSelectedItem, selectable, onClick],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (focuseable) setFocusedItem(dsId as string);\n  }, [dsId, setFocusedItem, focuseable]);\n\n  const onKeyDown = useKeyboardNavigation({\n    item,\n    onClick: handleOnClick,\n  });\n\n  const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n  if (!expandedForAnimation && !CollapsedComponent) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledItem\n        ref={visibleItemsRefs.current[dsId]}\n        pt={paddingTop}\n        pl={indent === undefined ? 'xxxs' : `${indent}px`}\n        minHeight={minHeight}\n        shadowStyle={shadowStyle(opened, item.type)}\n        alignItems=\"flex-start\"\n        cols={cols}\n        onClick={!opened ? handleOnClick : () => null}\n        onKeyDown={onKeyDown}\n        selectable={selectable}\n        selected={isSelected}\n        selectedParent={selectedParent === dsId}\n        opened={opened}\n        onFocus={handleFocus}\n        data-testid=\"leftnav-item-container\"\n        tabIndex={focuseable ? 0 : undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        role={ariaRole}\n        data-selected={isSelected}\n        data-selectedparent={selectedParent === dsId}\n        data-opened={opened}\n        data-type={item.type}\n        aria-label={ariaLabel}\n      >\n        {!expandedForAnimation ? (\n          <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n            {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n          </StyledCollapsedContainer>\n        ) : (\n          children\n        )}\n        {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n      </StyledItem>\n      {subitems}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmEnB,mBA6B+B,KA5B7B,YADF;AAjEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MAC/F;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ,IAAI;AAAA,QAClC,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QAEX;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Grid from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants/index.js";
 const borderOutside = (color, weight = 2) => `&:before {
   content: '';
   position: absolute;

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

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

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

@@ -7,9 +7,8 @@ const itemDefaultProps = {
   focuseable: true,
   openable: false,
   closable: false,
-  ariaLabel: "",
+  ariaLabel: void 0,
   ariaRole: "menuitem",
-  ariaLive: "off",
   ariaExpanded: void 0,
   ariaDescribedBy: void 0
 };

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

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

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

@@ -8,7 +8,7 @@ import {
 } from "@elliemae/ds-icons";
 import { styled } from "@elliemae/ds-system";
 import Grid from "@elliemae/ds-grid";
-import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants/index.js";
 const StyledIconContainer = styled("div", {
   name: DSLeftNavigationName,
   slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Notifications/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  AlertsSmallFill,\n  Notifications as InternalNotifications,\n  ExceptionsSmallFill,\n  MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\nconst StyledIconContainer = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER,\n})`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\ntype NotificationsProps = {\n  exceptions?: boolean;\n  alerts?: boolean;\n  messages?: boolean;\n};\n\nexport const Notifications = ({\n  exceptions = false,\n  alerts = false,\n  messages = false,\n}: NotificationsProps): JSX.Element => (\n  <StyledIconContainer>\n    <InternalNotifications size=\"m\" color={['brand-primary', '800']} data-testid=\"left-nav-notifications-icon\" />\n    {(exceptions || alerts || messages) && (\n      <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-exceptions-icon\">\n          {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-alerts-icon\">\n          {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-messages-icon\">\n          {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', '900']} />}\n        </Grid>\n      </Grid>\n    )}\n  </StyledIconContainer>\n);\n\nexport default Notifications;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  AlertsSmallFill,\n  Notifications as InternalNotifications,\n  ExceptionsSmallFill,\n  MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\nconst StyledIconContainer = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER,\n})`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\ntype NotificationsProps = {\n  exceptions?: boolean;\n  alerts?: boolean;\n  messages?: boolean;\n};\n\nexport const Notifications = ({\n  exceptions = false,\n  alerts = false,\n  messages = false,\n}: NotificationsProps): JSX.Element => (\n  <StyledIconContainer>\n    <InternalNotifications size=\"m\" color={['brand-primary', '800']} data-testid=\"left-nav-notifications-icon\" />\n    {(exceptions || alerts || messages) && (\n      <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-exceptions-icon\">\n          {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-alerts-icon\">\n          {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', '900']} />}\n        </Grid>\n        <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-messages-icon\">\n          {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', '900']} />}\n        </Grid>\n      </Grid>\n    )}\n  </StyledIconContainer>\n);\n\nexport default Notifications;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgCnB,cAEE,YAFF;AA/BJ;AAAA,EACE;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,sBAAsB,6BAA6B;AAE5D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAYM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE,qBAAC,uBACC;AAAA,sBAAC,yBAAsB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,+BAA8B;AAAA,GACzG,cAAc,UAAU,aACxB,qBAAC,QAAK,MAAM,CAAC,OAAO,OAAO,KAAK,GAAG,QAAO,QAAO,IAAG,OAClD;AAAA,wBAAC,QAAK,OAAM,OAAM,QAAO,OAAM,eAAY,4BACxC,wBAAc,oBAAC,uBAAoB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG,GAC1F;AAAA,IACA,oBAAC,QAAK,OAAM,OAAM,QAAO,OAAM,eAAY,wBACxC,oBAAU,oBAAC,mBAAgB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,UAAU,KAAK,GAAG,GACjF;AAAA,IACA,oBAAC,QAAK,OAAM,OAAM,QAAO,OAAM,eAAY,0BACxC,sBAAY,oBAAC,qBAAkB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG,GACtF;AAAA,KACF;AAAA,GAEJ;AAGF,IAAO,wBAAQ;",
   "names": []
 }

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

@@ -8,7 +8,7 @@ const StyledOpenWindow = styled(OpenWindowIcon)`
     outline: 1px solid ${(props) => props.theme.colors.brand[800]};
   }
 `;
-const OpenWindow = (props) => /* @__PURE__ */ jsx(StyledOpenWindow, { size: "s", color: ["brand-primary", 800], ...props });
+const OpenWindow = (props) => /* @__PURE__ */ jsx(StyledOpenWindow, { size: "s", color: ["brand-primary", "800"], ...props });
 var OpenWindowItem_default = OpenWindow;
 export {
   OpenWindow,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n  cursor: pointer;\n  :focus {\n    outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\nexport const OpenWindow = (props: unknown): JSX.Element => (\n  <StyledOpenWindow size=\"s\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default OpenWindow;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,GAAG,GAAI,GAAG,OAAO;AAGvE,IAAO,yBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n  cursor: pointer;\n  :focus {\n    outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\nexport const OpenWindow = (props: unknown): JSX.Element => (\n  <StyledOpenWindow size=\"s\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default OpenWindow;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-export * from "./constants";
-export * from "./ItemRenderer";
-export * from "./ChevronItem";
-export * from "./Notifications";
-export * from "./OpenWindowItem";
-export * from "./Icon";
+export * from "./constants.js";
+export * from "./ItemRenderer/index.js";
+export * from "./ChevronItem/index.js";
+export * from "./Notifications/index.js";
+export * from "./OpenWindowItem/index.js";
+export * from "./Icon/index.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants';\nexport * from './ItemRenderer';\nexport * from './ChevronItem';\nexport * from './Notifications';\nexport * from './OpenWindowItem';\nexport * from './Icon';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants.js';\nexport * from './ItemRenderer/index.js';\nexport * from './ChevronItem/index.js';\nexport * from './Notifications/index.js';\nexport * from './OpenWindowItem/index.js';\nexport * from './Icon/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }