@elliemae/ds-left-navigation 2.0.0-next.7 → 2.0.0-rc.10

package/esm/outOfTheBox/ItemTextLabel/index.js

@@ -1,17 +1,17 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
-import '@elliemae/ds-icons/ChevronSmallRight';
+import '@elliemae/ds-icons';
 import 'react/jsx-runtime';
-import '@elliemae/ds-icons/Notifications';
-import '@elliemae/ds-icons/ExceptionsSmallFill';
-import '@elliemae/ds-icons/AlertsSmallFill';
-import '@elliemae/ds-icons/MessagesSmallFill';
 import 'styled-components';
 import '@elliemae/ds-grid';
-import '@elliemae/ds-icons/OpenWindow';
 import { StyledLabel } from './styled.js';
 
 var _div;
@@ -27,7 +27,8 @@ const ItemTextLabel = props => {
         label,
         labelOverflow: itemLabelOverflow,
         labelBold,
-        labelColor
+        labelColor,
+        labelDataTestId
       }
     },
     ctx: {
@@ -44,12 +45,13 @@ const ItemTextLabel = props => {
     minHeight: "32px",
     paddingTop: "8px"
   }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
-    "data-testid": "leftnav-list-item-label",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
     pl: "24px",
     labelOverflow: labelOverflow,
     labelBold: labelBold,
     labelColor: labelColor,
-    mr: "xxs2"
+    mr: "xxs2",
+    pb: "xxxs"
   }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: label,
     placement: "bottom-start"

package/esm/outOfTheBox/ItemTextLabel/styled.js

@@ -3,9 +3,12 @@ import Grid from '@elliemae/ds-grid';
 
 const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1v26p1i-0"
-})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, ({
-  labelColor,
-  theme
-}) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
 
 export { StyledLabel };

package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -1,21 +1,21 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useEffect, useMemo, useCallback } from 'react';
 import Grid from '@elliemae/ds-grid';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import ArrowheadRight from '@elliemae/ds-icons/ArrowheadRight';
-import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 import { ITEM_TYPES } from '../../exported-related/constants.js';
 import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
-import '@elliemae/ds-icons/ChevronSmallRight';
 import 'react/jsx-runtime';
-import '@elliemae/ds-icons/Notifications';
-import '@elliemae/ds-icons/ExceptionsSmallFill';
-import '@elliemae/ds-icons/AlertsSmallFill';
-import '@elliemae/ds-icons/MessagesSmallFill';
 import 'styled-components';
-import '@elliemae/ds-icons/OpenWindow';
 import { StyledLabel, StyledDate } from './styled.js';
 import { ItemSeparator } from '../ItemSeparator/index.js';
 import { ItemWithDate } from '../ItemWithDate/index.js';
@@ -79,7 +79,8 @@ const ItemUncontrolledDrilldown = props => {
         labelBold,
         labelColor,
         startOpened,
-        items
+        items,
+        labelDataTestId
       }
     },
     ctx,
@@ -136,7 +137,7 @@ const ItemUncontrolledDrilldown = props => {
     mt: "-2px"
   }, void 0, arrowIcon), /*#__PURE__*/_jsx(StyledLabel, {
     pb: "xxxs",
-    "data-testid": "leftnav-list-item-label",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
     labelOverflow: labelOverflow,
     labelBold: labelBold,
     labelColor: labelColor

package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js

@@ -3,10 +3,13 @@ import Grid from '@elliemae/ds-grid';
 
 const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-17rk89j-0"
-})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, ({
-  labelColor,
-  theme
-}) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
 const StyledDate = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-17rk89j-1"
 })(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);

package/esm/outOfTheBox/ItemWithDate/index.js

@@ -1,17 +1,17 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import Grid from '@elliemae/ds-grid';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
-import '@elliemae/ds-icons/ChevronSmallRight';
+import '@elliemae/ds-icons';
 import 'react/jsx-runtime';
-import '@elliemae/ds-icons/Notifications';
-import '@elliemae/ds-icons/ExceptionsSmallFill';
-import '@elliemae/ds-icons/AlertsSmallFill';
-import '@elliemae/ds-icons/MessagesSmallFill';
 import 'styled-components';
-import '@elliemae/ds-icons/OpenWindow';
 import { StyledLabel, StyledDate } from './styled.js';
 
 var _div;
@@ -29,7 +29,8 @@ const ItemWithDate = props => {
         labelRightSection,
         labelOverflow: itemLabelOverflow,
         labelBold,
-        labelColor
+        labelColor,
+        labelDataTestId
       }
     },
     ctx,
@@ -49,7 +50,7 @@ const ItemWithDate = props => {
   }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
     pl: "xxs",
     pb: "xxxs",
-    "data-testid": "leftnav-list-item-label",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
     labelOverflow: labelOverflow,
     labelBold: labelBold,
     labelColor: labelColor

package/esm/outOfTheBox/ItemWithDate/styled.js

@@ -3,10 +3,13 @@ import Grid from '@elliemae/ds-grid';
 
 const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-govmsc-0"
-})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, ({
-  labelColor,
-  theme
-}) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
 const StyledDate = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-govmsc-1"
 })(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);

package/esm/outOfTheBox/index.js

@@ -3,14 +3,14 @@ import '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import '@elliemae/ds-grid';
 import 'styled-components';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import 'react/jsx-runtime';
-import '@elliemae/ds-icons/ChevronSmallRight';
-import '@elliemae/ds-icons/Notifications';
-import '@elliemae/ds-icons/ExceptionsSmallFill';
-import '@elliemae/ds-icons/AlertsSmallFill';
-import '@elliemae/ds-icons/MessagesSmallFill';
-import '@elliemae/ds-icons/OpenWindow';
+import '@elliemae/ds-icons';
 import { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
 export { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
 import { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';

package/esm/parts/LeftNavContent/index.js

@@ -1,4 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React from 'react';
 import { LeftNavContext } from '../../LeftNavigationContext.js';
 import { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';

package/esm/parts/LeftNavContent/styled.js

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 
-const getLeftShadowStyles = ({
-  selected,
-  theme
-}) => {
-  if (!selected) {
-    return "\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ".concat(theme.colors.neutral[300], ";\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n      }\n    ");
+const getLeftShadowStyles = _ref => {
+  let {
+    selected,
+    selectedParent,
+    theme
+  } = _ref;
+
+  if (!selected && !selectedParent) {
+    return "\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[300], ";\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n      }\n    ");
   }
 
   return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");

package/esm/parts/LeftNavContentWithScrollbar/index.js

@@ -1,9 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect } from 'react';
-import OverlayScrollbars from 'overlayscrollbars';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
+import OverlayScrollbars from 'overlayscrollbars';
 import styled from 'styled-components';
 import { jsxs } from 'react/jsx-runtime';
 

package/esm/parts/LeftNavFooterItem/index.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import MenuExpand from '@elliemae/ds-icons/MenuExpand';
+import { MenuExpand } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledFooterMenu, StyledItemWrapper, StyledItem, StyledLabel, StyledSeparator, StyledMenuCollapse } from './styled.js';
@@ -23,9 +23,7 @@ const LeftNavFooterItem = props => {
     },
     expandedForAnimation,
     setSelectedItem,
-    focusedItem,
     setFocusedItem,
-    focusedByKey,
     visibleItemsRefs
   } = useContext(LeftNavContext);
   const id = FOOTER_DS_ID;
@@ -54,8 +52,6 @@ const LeftNavFooterItem = props => {
     cols: expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'],
     onClick: expandedForAnimation ? () => null : handleOnClick,
     onKeyDown: onKeyDown,
-    focused: focusedItem === id,
-    focusedByKey: focusedByKey,
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
@@ -83,13 +79,9 @@ const LeftNavFooterItem = props => {
         size: "m",
         color: ['brand-primary', 800],
         onClick: e => {
-          if (openedItem) setSelectedItem(openedItem);
           e.stopPropagation();
           handleOnClick(e);
         },
-        onKeyDown: e => {
-          if (['Space', 'Enter'].includes(e.code) && openedItem) setSelectedItem(openedItem);
-        },
         "data-testid": "leftnav-footer-btn",
         tabIndex: 0,
         onFocus: e => {

package/esm/parts/LeftNavFooterItem/styled.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic';
+import { Grid } from '@elliemae/ds-grid';
 import { MenuCollapse } from '@elliemae/ds-icons';
-import { getFocusedByKeyboardBorderStyle } from '../../common/getFocusedByKeyboardStyle.js';
 import { getItemBackgroundStyle } from '../../common/getItemBackgroundStyle.js';
 import { getLeftBorderStyle } from '../../common/getLeftBorderStyle.js';
 
@@ -13,7 +12,7 @@ const StyledItemWrapper = /*#__PURE__*/styled(Grid).withConfig({
 })(["position:relative;padding-left:", ";"], props => props.theme.space.xxxs);
 const StyledItem = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1mcbjxr-2"
-})(["min-height:48px;cursor:", ";", " outline:none;", ""], props => props.expanded ? 'auto' : 'pointer', getItemBackgroundStyle, getFocusedByKeyboardBorderStyle);
+})(["min-height:48px;cursor:", ";", " outline:none;:focus{&:before{content:'';position:absolute;height:100%;width:100%;top:0;left:0px;border:2px solid ", ";pointer-events:none;}}"], props => props.expanded ? 'auto' : 'pointer', getItemBackgroundStyle, props => props.theme.colors.brand[600]);
 const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1mcbjxr-3"
 })(["font-size:11px;color:", ";line-height:14px;word-break:", ";"], props => props.theme.colors.neutral[500], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
@@ -22,6 +21,6 @@ const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
 })(["height:16px;width:1px;background-color:", ";"], props => props.theme.colors.neutral[100]);
 const StyledMenuCollapse = /*#__PURE__*/styled(MenuCollapse).withConfig({
   componentId: "sc-1mcbjxr-5"
-})(["cursor:pointer;:focus{outline:1px solid ", ";}"], props => props.theme.colors.brand[800]);
+})(["cursor:pointer;:focus{outline:2px solid ", ";}"], props => props.theme.colors.brand[700]);
 
 export { StyledFooterMenu, StyledItem, StyledItemWrapper, StyledLabel, StyledMenuCollapse, StyledSeparator };

package/esm/parts/LeftNavLoading/index.js

@@ -1,20 +1,23 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSCircularProgressIndicator from '@elliemae/ds-basic/CircularProgressIndicator';
+import DSCircularProgressIndicator from '@elliemae/ds-circular-progress-indicator';
 import Grid from '@elliemae/ds-grid';
 import styled from 'styled-components';
 
 const StyledLoaderWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-mqgtxd-0"
 })(["grid-area:left-nav-body;height:100%;place-items:center;z-index:0;background-color:white;"]);
-const LeftNavLoading = ({
-  expanded
-}) => /*#__PURE__*/_jsx(StyledLoaderWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
-  size: expanded ? 'xl' : 'm',
-  loading: true,
-  showLabel: expanded,
-  waiting: false,
-  showTooltip: !expanded
-}));
+const LeftNavLoading = _ref => {
+  let {
+    expanded
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledLoaderWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
+    size: expanded ? 'xl' : 'm',
+    loading: true,
+    showLabel: expanded,
+    waiting: false,
+    showTooltip: !expanded
+  }));
+};
 
 export { LeftNavLoading };

package/esm/parts/OutOfTheBoxMapItem.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Left Navigation",
   "module": "./esm/index.js",
@@ -191,10 +191,6 @@
       "import": "./esm/configs/useLeftNavConfig.js",
       "require": "./cjs/configs/useLeftNavConfig.js"
     },
-    "./configs/useGlobalKeyListeners": {
-      "import": "./esm/configs/useGlobalKeyListeners.js",
-      "require": "./cjs/configs/useGlobalKeyListeners.js"
-    },
     "./configs": {
       "import": "./esm/configs/index.js",
       "require": "./cjs/configs/index.js"
@@ -214,10 +210,6 @@
     "./common/getItemBackgroundStyle": {
       "import": "./esm/common/getItemBackgroundStyle.js",
       "require": "./cjs/common/getItemBackgroundStyle.js"
-    },
-    "./common/getFocusedByKeyboardStyle": {
-      "import": "./esm/common/getFocusedByKeyboardStyle.js",
-      "require": "./cjs/common/getFocusedByKeyboardStyle.js"
     }
   },
   "repository": {
@@ -241,21 +233,24 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.7",
-    "@elliemae/ds-icons": "2.0.0-next.7",
-    "@elliemae/ds-system": "2.0.0-next.7",
-    "overlayscrollbars": "^1.13.1",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.10",
+    "@elliemae/ds-grid": "2.0.0-rc.10",
+    "@elliemae/ds-icons": "2.0.0-rc.10",
+    "@elliemae/ds-system": "2.0.0-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.10",
+    "overlayscrollbars": "1.13.1",
     "prop-types": "~15.7.2",
-    "react-virtual": "~2.3.2",
-    "tree-model": "~1.0.7"
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   }
 }

package/types/LeftNavigation.d.ts

@@ -1,19 +1,51 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { LeftNavProps } from './index.d';
 export declare const LeftNavigation: {
     (props: LeftNavProps): JSX.Element;
     propTypes: {
-        containerProps: any;
-        expanded: any;
-        loading: any;
-        tabIndex: any;
-        openedItem: any;
-        footerLabel: any;
-        onFooterExpand: any;
-        onFooterClose: any;
-        onSelectedChange: any;
-        onFocusChange: any;
-        items: any;
+        containerProps: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        expanded: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        loading: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        tabIndex: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        openedItem: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        footerLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onFooterExpand: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onFooterClose: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onSelectedChange: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        onFocusChange: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        items: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
     defaultProps: LeftNavProps;
 };

package/types/LeftNavigationContext.d.ts

@@ -3,12 +3,8 @@ import type { LeftNavProps } from './index.d';
 export declare type ContextProps = {
     selectedItem: string;
     setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
-    selectedSubitem: string;
-    setSelectedSubitem: React.Dispatch<React.SetStateAction<string>>;
     focusedItem: string;
     setFocusedItem: React.Dispatch<React.SetStateAction<string>>;
-    focusedByKey: boolean;
-    setFocusedByKey: React.Dispatch<React.SetStateAction<boolean>>;
     openedDrilldowns: string[];
     setOpenedDrilldowns: React.Dispatch<React.SetStateAction<string[]>>;
     visibleItems: string[];

package/types/common/index.d.ts

@@ -1,4 +1,3 @@
-export * from './getFocusedByKeyboardStyle';
 export * from './getItemBackgroundStyle';
 export * from './getLeftBorderStyle';
 export * from './getScrollbarStyle';

package/types/exported-related/ItemRenderer/styled.d.ts

@@ -6,10 +6,11 @@ interface ItemProps {
     theme: any;
     shadowStyle: (theme: any) => string;
 }
-export declare const StyledItemWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {
+export declare const borderOutside: (color: any, weight?: number) => string;
+export declare const StyledItemWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     shadowStyle: (theme: any) => string;
 }, never>;
-export declare const StyledItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {
+export declare const StyledItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     minHeight: string;
 } & ItemProps, never>;
 export {};

package/types/hooks/useKeyboardNavigation.d.ts

@@ -4,5 +4,5 @@ declare type useKeyboardNavigationProps = {
     item: GenericItemItemProps;
     onClick: (e: any) => void;
 };
-export declare const useKeyboardNavigation: ({ item, onClick, }: useKeyboardNavigationProps) => React.KeyboardEventHandler;
+export declare const useKeyboardNavigation: ({ item, onClick }: useKeyboardNavigationProps) => React.KeyboardEventHandler;
 export {};

package/types/hooks/useSelectFirstBodyItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { GenericItemItemProps } from '../index.d';
-export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string>>) => void;
+export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string, selectedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string>>) => void;

package/types/index.d.d.ts

@@ -8,8 +8,8 @@ export interface LeftNavProps {
     items: GenericItemItemProps[];
     footerLabel: string;
     labelOverflow: LabelOveflowT;
-    onSelectedChange: (item: GenericItemItemProps) => void;
-    onFocusChange: (item: GenericItemItemProps) => void;
+    onSelectedChange: (item: string) => void;
+    onFocusChange: (item: string) => void;
     onFooterExpand: () => void;
     onFooterClose: () => void;
     onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;
@@ -17,6 +17,8 @@ export interface LeftNavProps {
     BodyHeaderComponent?: GenericItemItemProps;
     tabIndex: number;
     loading: boolean;
+    selectedItem?: string;
+    selectedParent?: string;
 }
 export declare type OutOfTheBoxT = 'ds-left-nav-item-header' | 'ds-left-nav-item-link' | 'ds-left-nav-item-submenu' | 'ds-left-nav-item-controlled-drilldown' | 'ds-left-nav-item-uncontrolled-drilldown' | 'ds-left-nav-item-section' | 'ds-left-nav-item-separator' | 'ds-left-nav-item-text-label' | 'ds-left-nav-item-with-date';
 export interface itemOptsT {
@@ -41,6 +43,7 @@ export interface itemOptsT {
     ariaExpanded?: boolean;
     ariaDescribedBy?: string;
     items?: GenericItemItemProps[];
+    labelDataTestId?: string;
 }
 export interface ComponentProps {
     item: GenericItemItemProps;

package/types/outOfTheBox/ItemControlledDrilldown/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     labelBold: boolean;
 }, never>;
-export declare const StyledDate: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledDate: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;

package/types/outOfTheBox/ItemHeader/styled.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const StyledChevronLeft: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledChevronLeft: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/types/outOfTheBox/ItemLink/styled.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;

package/types/outOfTheBox/ItemSection/styled.d.ts

@@ -1,3 +1,3 @@
-export declare const StyledLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledVerticalSeparator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledRightLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledVerticalSeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRightLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/types/outOfTheBox/ItemSubmenu/styled.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const StyledChevronLeft: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledChevronLeft: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;