@elliemae/ds-left-navigation 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -4,21 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
-var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
+var dsIcons = require('@elliemae/ds-icons');
 var constants = require('../../exported-related/constants.js');
 var index$3 = require('../../exported-related/ItemRenderer/index.js');
-require('@elliemae/ds-icons/ChevronSmallRight');
 require('react/jsx-runtime');
-require('@elliemae/ds-icons/Notifications');
-require('@elliemae/ds-icons/ExceptionsSmallFill');
-require('@elliemae/ds-icons/AlertsSmallFill');
-require('@elliemae/ds-icons/MessagesSmallFill');
 require('styled-components');
-require('@elliemae/ds-icons/OpenWindow');
 var styled = require('./styled.js');
 var index = require('../ItemSeparator/index.js');
 var index$1 = require('../ItemWithDate/index.js');
@@ -29,12 +30,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
-var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
 
 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__default['default'](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; }
+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__default["default"](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; }
 // Subitem mapping
 const outOfTheBoxSubitemsComponents = {
   [constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: index.ItemSeparator,
@@ -53,10 +52,10 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts;
+    var _item$itemOpts$indent, _item$itemOpts;
 
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = ((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) ?? 0;
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
@@ -64,14 +63,14 @@ const OutOfTheBoxMapSubitem = props => {
       })
     });
 
-    return /*#__PURE__*/_jsx__default['default'](OutOfTheBoxComponent, {
+    return /*#__PURE__*/_jsx__default["default"](OutOfTheBoxComponent, {
       item: newItem,
       ctx: ctx
     });
   } // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...
 
 
-  return /*#__PURE__*/_jsx__default['default'](Component, {
+  return /*#__PURE__*/_jsx__default["default"](Component, {
     item: item,
     ctx: ctx
   });
@@ -90,7 +89,8 @@ const ItemUncontrolledDrilldown = props => {
         labelBold,
         labelColor,
         startOpened,
-        items
+        items,
+        labelDataTestId
       }
     },
     ctx,
@@ -109,8 +109,8 @@ const ItemUncontrolledDrilldown = props => {
   const opened = openedDrilldowns.includes(dsId);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const arrowIcon = React.useMemo(() => {
-    const Component = opened ? ArrowheadDown__default['default'] : ArrowheadRight__default['default'];
-    return /*#__PURE__*/_jsx__default['default'](Component, {
+    const Component = opened ? dsIcons.ArrowheadDown : dsIcons.ArrowheadRight;
+    return /*#__PURE__*/_jsx__default["default"](Component, {
       width: "24px",
       height: "18px",
       color: ['brand-primary', '800']
@@ -119,7 +119,7 @@ const ItemUncontrolledDrilldown = props => {
 
   const subitems = React.useMemo(() => {
     if (!opened || !items) return [];
-    return items.map(subitem => /*#__PURE__*/_jsx__default['default'](OutOfTheBoxMapSubitem, {
+    return items.map(subitem => /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapSubitem, {
       item: subitem,
       ctx: ctx
     }, subitem.dsId));
@@ -127,11 +127,11 @@ const ItemUncontrolledDrilldown = props => {
   const handleOnClick = React.useCallback(() => {
     if (opened) setOpenedDrilldowns(openedDrilldowns.filter(openedDrilldown => openedDrilldown !== dsId));else setOpenedDrilldowns([...openedDrilldowns, dsId]);
   }, [opened, setOpenedDrilldowns, openedDrilldowns]);
-  return /*#__PURE__*/_jsx__default['default'](index$3.ItemRenderer, {
+  return /*#__PURE__*/_jsx__default["default"](index$3.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({
         ariaExpanded: opened,
-        ariaRole: 'menu'
+        ariaRole: 'menuitem'
       }, item.itemOpts), {}, {
         openable: !opened,
         closable: opened
@@ -142,28 +142,28 @@ const ItemUncontrolledDrilldown = props => {
     minHeight: "32px",
     paddingTop: "8px",
     onClick: handleOnClick
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     pl: "xxs",
     mt: "-2px"
-  }, void 0, arrowIcon), /*#__PURE__*/_jsx__default['default'](styled.StyledLabel, {
+  }, void 0, arrowIcon), /*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
     pb: "xxxs",
-    "data-testid": "leftnav-list-item-label",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
     labelOverflow: labelOverflow,
     labelBold: labelBold,
     labelColor: labelColor
-  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: label,
     placement: "bottom-start"
-  }) : label), /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }) : label), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     pr: "xxs2",
     cols: ['auto', 'auto'],
     alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledDate, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledDate, {
     ml: "xxs",
     "data-testid": "leftnav-list-item-date"
-  }, void 0, labelRightSection), /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     pl: RightComponent ? 'xxs' : '0px'
-  }, void 0, RightComponent && /*#__PURE__*/_jsx__default['default'](RightComponent, {
+  }, void 0, RightComponent && /*#__PURE__*/_jsx__default["default"](RightComponent, {
     ctx: ctx,
     item: item
   }))));

package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js

@@ -10,13 +10,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-const StyledLabel = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledLabel = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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');
-const StyledDate = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["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__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-17rk89j-1"
 })(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
 

package/cjs/outOfTheBox/ItemWithDate/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var index = require('../../exported-related/ItemRenderer/index.js');
-require('@elliemae/ds-icons/ChevronSmallRight');
+require('@elliemae/ds-icons');
 require('react/jsx-runtime');
-require('@elliemae/ds-icons/Notifications');
-require('@elliemae/ds-icons/ExceptionsSmallFill');
-require('@elliemae/ds-icons/AlertsSmallFill');
-require('@elliemae/ds-icons/MessagesSmallFill');
 require('styled-components');
-require('@elliemae/ds-icons/OpenWindow');
 var styled = require('./styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +28,7 @@ var _div;
 
 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__default['default'](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; }
+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__default["default"](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 ItemWithDate = props => {
   const {
     item,
@@ -39,7 +39,8 @@ const ItemWithDate = props => {
         labelRightSection,
         labelOverflow: itemLabelOverflow,
         labelBold,
-        labelColor
+        labelColor,
+        labelDataTestId
       }
     },
     ctx,
@@ -50,33 +51,33 @@ const ItemWithDate = props => {
     }
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
-  return /*#__PURE__*/_jsx__default['default'](index.ItemRenderer, {
+  return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       CollapsedComponent: null
     }),
     minHeight: "32px",
     paddingTop: "8px"
-  }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx__default['default']("div", {})), /*#__PURE__*/_jsx__default['default'](styled.StyledLabel, {
+  }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), /*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
     pl: "xxs",
     pb: "xxxs",
-    "data-testid": "leftnav-list-item-label",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
     labelOverflow: labelOverflow,
     labelBold: labelBold,
     labelColor: labelColor
-  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: label,
     placement: "bottom-start"
-  }) : label), /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }) : label), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     pr: "xxs2",
     cols: ['auto', 'auto'],
     alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledDate, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledDate, {
     ml: "xxs",
     "data-testid": "leftnav-list-item-date"
-  }, void 0, labelRightSection), /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     pl: RightComponent ? 'xxs' : '0px',
     "data-testid": "leftnav-right-component"
-  }, void 0, RightComponent && /*#__PURE__*/_jsx__default['default'](RightComponent, {
+  }, void 0, RightComponent && /*#__PURE__*/_jsx__default["default"](RightComponent, {
     ctx: ctx,
     item: item
   }))));

package/cjs/outOfTheBox/ItemWithDate/styled.js

@@ -10,13 +10,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-const StyledLabel = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledLabel = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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');
-const StyledDate = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["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__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-govmsc-1"
 })(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
 

package/cjs/outOfTheBox/index.js

@@ -7,14 +7,14 @@ require('@babel/runtime/helpers/jsx');
 require('react');
 require('@elliemae/ds-grid');
 require('styled-components');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@babel/runtime/helpers/defineProperty');
 require('react/jsx-runtime');
-require('@elliemae/ds-icons/ChevronSmallRight');
-require('@elliemae/ds-icons/Notifications');
-require('@elliemae/ds-icons/ExceptionsSmallFill');
-require('@elliemae/ds-icons/AlertsSmallFill');
-require('@elliemae/ds-icons/MessagesSmallFill');
-require('@elliemae/ds-icons/OpenWindow');
+require('@elliemae/ds-icons');
 var index = require('./ItemControlledDrilldown/index.js');
 var index$1 = require('./ItemUncontrolledDrilldown/index.js');
 var index$2 = require('./ItemHeader/index.js');

package/cjs/parts/LeftNavContent/index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var LeftNavigationContext = require('../../LeftNavigationContext.js');
 var index$1 = require('../LeftNavFooterItem/index.js');
@@ -24,26 +26,27 @@ const LeftNavInnerContent = () => {
       HeaderComponent,
       BodyHeaderComponent,
       openedItem,
-      items
+      items,
+      withoutBodyShadow
     },
     selectedItem
-  } = React__default['default'].useContext(LeftNavigationContext.LeftNavContext);
+  } = React__default["default"].useContext(LeftNavigationContext.LeftNavContext);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavHeaderArea, {
+    children: [/*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavHeaderArea, {
       "data-testid": "leftnav-header-area",
       selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
-    }, void 0, HeaderComponent ? /*#__PURE__*/_jsx__default['default'](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
+    }, void 0, HeaderComponent ? /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
       item: HeaderComponent
-    }) : null), /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavBodyAreasContainer, {}, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavBodyHeaderArea, {
+    }) : null), /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavBodyAreasContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavBodyHeaderArea, {
       "data-testid": "leftnav-body-header-area",
       selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
-    }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx__default['default'](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
+    }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
       item: BodyHeaderComponent
-    }) : null), /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavBodyItemsArea, {
-      selected: openedItem !== null,
+    }) : null), /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavBodyItemsArea, {
+      selected: !withoutBodyShadow && openedItem !== null,
       "data-testid": "leftnav-body-items-area",
       tabIndex: -1
-    }, void 0, /*#__PURE__*/_jsx__default['default'](index$2.LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx__default['default'](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](index$2.LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
       item: item
     }, item.dsId)))))]
   });
@@ -60,18 +63,18 @@ const LeftNavContent = () => {
       onFooterClose,
       loading
     }
-  } = React__default['default'].useContext(LeftNavigationContext.LeftNavContext);
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavExpandAnimationWrapper, {
+  } = React__default["default"].useContext(LeftNavigationContext.LeftNavContext);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavExpandAnimationWrapper, {
     expandedWidth: expandedWidth,
     expanded: expanded,
     "data-testid": "leftnav-component",
     "aria-label": leftNavScreenReaderInstructions
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavAreasContainer, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavAreasContainer, {
     expandedWidth: expandedWidth,
     expanded: expandedForAnimation
-  }, void 0, loading && /*#__PURE__*/_jsx__default['default'](index.LeftNavLoading, {
+  }, void 0, loading && /*#__PURE__*/_jsx__default["default"](index.LeftNavLoading, {
     expanded: expandedForAnimation
-  }), !loading && (_LeftNavInnerContent || (_LeftNavInnerContent = /*#__PURE__*/_jsx__default['default'](LeftNavInnerContent, {}))), /*#__PURE__*/_jsx__default['default'](styled.StyledLeftNavFooterArea, {}, void 0, /*#__PURE__*/_jsx__default['default'](index$1.LeftNavFooterItem, {
+  }), !loading && (_LeftNavInnerContent || (_LeftNavInnerContent = /*#__PURE__*/_jsx__default["default"](LeftNavInnerContent, {}))), /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavFooterArea, {}, void 0, /*#__PURE__*/_jsx__default["default"](index$1.LeftNavFooterItem, {
     footerLabel: footerLabel,
     onFooterExpand: onFooterExpand,
     onFooterClose: onFooterClose

package/cjs/parts/LeftNavContent/styled.js

@@ -8,44 +8,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getLeftShadowStyles = ({
-  selected,
-  theme
-}) => {
-  if (!selected) {
-    return `
-      box-shadow: inset 4px 0 0 0 transparent;
-      :hover {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.neutral[300]};
-      }
-      :active {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-      }
-    `;
+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 ${theme.colors.brand[400]};`;
+  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
 };
 
-const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default['default'].nav.withConfig({
+const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default["default"].nav.withConfig({
   componentId: "sc-1hvvtkb-0"
 })(["width:", ";transition:width ", " 350ms;box-shadow:-1px 0 0 0 ", ";border:1px solid ", ";overflow:hidden;height:100%;position:relative;"], props => props.expanded ? props.expandedWidth : '48px', props => props.expanded ? 'ease-out' : 'ease-in', props => props.theme.colors.neutral[100], props => props.theme.colors.neutral[100]);
-const StyledLeftNavAreasContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledLeftNavAreasContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-1"
-})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px');
-const StyledLeftNavHeaderArea = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? "calc(".concat(props.expandedWidth, " - 2px)") : '46px');
+const StyledLeftNavHeaderArea = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-2"
 })(["grid-area:left-nav-header;", ""], getLeftShadowStyles);
-const StyledLeftNavBodyAreasContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledLeftNavBodyAreasContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-3"
 })(["position:absolute;width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:'left-nav-body-header' 'left-nav-body-body';grid-area:left-nav-body;"]);
-const StyledLeftNavBodyHeaderArea = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledLeftNavBodyHeaderArea = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-4"
 })(["width:100%;grid-area:left-nav-body-header;", ""], getLeftShadowStyles);
-const StyledLeftNavBodyItemsArea = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledLeftNavBodyItemsArea = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-5"
 })(["width:100%;grid-area:left-nav-body-body;max-height:100%;overflow-y:hidden;overflow-x:hidden;box-shadow:inset 4px 0 0 0 ", ";"], props => props.selected ? props.theme.colors.brand[400] : 'transparent');
-const StyledLeftNavFooterArea = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledLeftNavFooterArea = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-6"
 })(["width:100%;grid-area:left-nav-footer;"]);
 

package/cjs/parts/LeftNavContentWithScrollbar/index.js

@@ -4,7 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
+require('overlayscrollbars/css/OverlayScrollbars.css');
 var OverlayScrollbars = require('overlayscrollbars');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
@@ -20,28 +27,28 @@ var _div, _div2, _div3, _div4;
 
 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__default['default'](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 StyledHandle = /*#__PURE__*/styled__default['default'].div.withConfig({
+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__default["default"](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 StyledHandle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-yn7jj3-0"
 })(["width:6px;border:1px solid rgba(0,0,0,0);background-color:rgba(105,116,137,0.5) !important;border-radius:7px;:hover{background-color:rgba(105,116,137,0.7) !important;}:active{background-color:rgba(105,116,137,0.7) !important;}"]);
+const options = {
+  className: 'os-theme-dark',
+  scrollbars: {
+    autoHide: 'leave',
+    autoHideDelay: 0
+  }
+};
 const LeftNavContentWithScrollbar = props => {
   const {
     children
   } = props;
-  const options = {
-    className: 'os-theme-dark',
-    scrollbars: {
-      autoHide: 'leave',
-      autoHideDelay: 0
-    }
-  };
   const inheritBoxShadow = {
     boxShadow: 'inherit'
   };
   const [osInstance, setOsInstance] = React.useState();
   const osTargetRef = React.useRef(null);
   React.useEffect(() => {
-    const nextOsInstance = OverlayScrollbars__default['default'](osTargetRef.current, options);
+    const nextOsInstance = OverlayScrollbars__default["default"](osTargetRef.current, options);
     setOsInstance(nextOsInstance);
   }, [osInstance]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -51,30 +58,31 @@ const LeftNavContentWithScrollbar = props => {
     }, inheritBoxShadow),
     tabIndex: -1,
     ref: osTargetRef,
-    children: [_div || (_div = /*#__PURE__*/_jsx__default['default']("div", {
+    children: [_div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-resize-observer-host"
-    })), /*#__PURE__*/_jsx__default['default']("div", {
+    })), /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-padding",
       style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-viewport",
       style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-content",
-      style: inheritBoxShadow
-    }, void 0, children))), _div2 || (_div2 = /*#__PURE__*/_jsx__default['default']("div", {
+      style: inheritBoxShadow,
+      "aria-hidden": true
+    }, void 0, children))), _div2 || (_div2 = /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar os-scrollbar-horizontal "
-    }, void 0, /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar-handle"
-    })))), _div3 || (_div3 = /*#__PURE__*/_jsx__default['default']("div", {
+    })))), _div3 || (_div3 = /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar os-scrollbar-vertical"
-    }, void 0, /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx__default['default'](StyledHandle, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](StyledHandle, {
       className: "os-scrollbar-handle"
-    })))), _div4 || (_div4 = /*#__PURE__*/_jsx__default['default']("div", {
+    })))), _div4 || (_div4 = /*#__PURE__*/_jsx__default["default"]("div", {
       className: "os-scrollbar-corner"
     }))]
   });