@elliemae/ds-left-navigation 2.0.0-alpha.11 → 2.0.0-alpha.12

package/esm/outOfTheBox/ItemSeparator/index.js

@@ -1,16 +1,16 @@
+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 styled from 'styled-components';
 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 '@elliemae/ds-grid';
-import '@elliemae/ds-icons/OpenWindow';
 
 var _StyledSeparator;
 

package/esm/outOfTheBox/ItemSubmenu/index.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 { useCallback } from 'react';
@@ -5,21 +10,16 @@ import Grid from '@elliemae/ds-grid';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';
 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 { StyledChevronLeft, StyledLabel } from './styled.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.neutral[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
 
 const ItemSubmenu = props => {
   var _item$itemOpts$ariaLa;
@@ -31,7 +31,8 @@ const ItemSubmenu = props => {
       itemOpts: {
         label,
         RightComponent,
-        BottomComponent
+        BottomComponent,
+        labelDataTestId
       },
       CollapsedComponent = () => null
     },
@@ -44,13 +45,13 @@ const ItemSubmenu = props => {
       },
       expandedForAnimation,
       selectedItem,
-      setSelectedItem,
+      selectedParent,
       setFocusedItem
     }
   } = props;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inherit", [isSelected, !openedItem]);
+  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
   const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
@@ -76,7 +77,6 @@ const ItemSubmenu = props => {
     color: ['brand-primary', 800],
     onClick: e => {
       onItemClick(item, e);
-      setSelectedItem(dsId);
     },
     "data-testid": "leftnav-leftcomponent-chevron",
     tabIndex: 0,
@@ -93,7 +93,7 @@ const ItemSubmenu = props => {
     ml: opened ? 'xxs' : '1px',
     mt: "xxxs",
     mb: "15px",
-    "data-testid": "leftnav-itemlabel",
+    "data-testid": labelDataTestId || 'leftnav-itemlabel',
     labelOverflow: labelOverflow
   }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: label,
@@ -106,7 +106,7 @@ const ItemSubmenu = props => {
       setFocusedItem(null);
     },
     onKeyDown: e => e.stopPropagation(),
-    onClick: e => openedItem && e.stopPropagation(),
+    onClick: e => openedItem === dsId && e.stopPropagation(),
     "data-testid": "leftnav-right-component"
   }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
     ctx: ctx,

package/esm/outOfTheBox/ItemSubmenu/styled.js

@@ -1,12 +1,12 @@
 import Grid from '@elliemae/ds-grid';
-import ChevronLeft from '@elliemae/ds-icons/ChevronSmallLeft';
+import { ChevronSmallLeft } from '@elliemae/ds-icons';
 import styled from 'styled-components';
 
 const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1hegp8y-0"
 })(["font-size:14px;color:", ";word-break:", ";"], props => props.theme.colors.neutral[800], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
-const StyledChevronLeft = /*#__PURE__*/styled(ChevronLeft).withConfig({
+const StyledChevronLeft = /*#__PURE__*/styled(ChevronSmallLeft).withConfig({
   componentId: "sc-1hegp8y-1"
-})(["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 { StyledChevronLeft, StyledLabel };

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';
@@ -17,7 +19,8 @@ const LeftNavInnerContent = () => {
       HeaderComponent,
       BodyHeaderComponent,
       openedItem,
-      items
+      items,
+      withoutBodyShadow
     },
     selectedItem
   } = React.useContext(LeftNavContext);
@@ -33,7 +36,7 @@ const LeftNavInnerContent = () => {
     }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
       item: BodyHeaderComponent
     }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyItemsArea, {
-      selected: openedItem !== null,
+      selected: !withoutBodyShadow && openedItem !== null,
       "data-testid": "leftnav-body-items-area",
       tabIndex: -1
     }, void 0, /*#__PURE__*/_jsx(LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {

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/esm/prop-types.js

@@ -23,7 +23,8 @@ const leftNavigationProps = {
   onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),
   onSelectedChange: PropTypes.func.description('A callback which triggers when the selected item changes').defaultValue(() => null),
   onFocusChange: PropTypes.func.description('A callback which triggers when the focused item changes').defaultValue(() => null),
-  items: PropTypes.arrayOf(PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([])
+  items: PropTypes.arrayOf(PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([]),
+  disableDefaultSelection: PropTypes.bool.description('Whether you do not want to automatically select the first body item').defaultValue(false)
 };
 
 const LeftNavItemProps = () => null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "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-alpha.11",
-    "@elliemae/ds-icons": "2.0.0-alpha.11",
-    "@elliemae/ds-system": "2.0.0-alpha.11",
-    "overlayscrollbars": "^1.13.1",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.12",
+    "@elliemae/ds-grid": "2.0.0-alpha.12",
+    "@elliemae/ds-icons": "2.0.0-alpha.12",
+    "@elliemae/ds-system": "2.0.0-alpha.12",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.12",
+    "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"
   }
 }