@elliemae/ds-left-navigation 2.4.2-rc.11 → 2.4.2-rc.14

package/cjs/common/getItemBackgroundStyle.js

@@ -2,7 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const commonItemBackgroundStyle = (color, hoverColor, activeColor) => "\n\n  background: ".concat(color, ";\n\n  :hover {\n    background: ").concat(hoverColor, ";\n  }\n\n  :active {\n    background: ").concat(activeColor, ";\n  }\n");
+const commonItemBackgroundStyle = (color, hoverColor, activeColor) => `
+
+  background: ${color};
+
+  :hover {
+    background: ${hoverColor};
+  }
+
+  :active {
+    background: ${activeColor};
+  }
+`;
 
 const getItemBackgroundStyle = props => {
   if (props.selected && !props.opened) return commonItemBackgroundStyle(props.theme.colors.brand[200], props.theme.colors.brand[200], props.theme.colors.brand[200]);

package/cjs/common/getLeftBorderStyle.js

@@ -2,7 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const commonLeftBorderStyle = (color, hoverColor, activeColor) => "\n\n  -webkit-box-shadow: inset 4px 0 0 0 ".concat(color, ";\n          box-shadow: inset 4px 0 0 0 ").concat(color, ";\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n  }\n");
+const commonLeftBorderStyle = (color, hoverColor, activeColor) => `
+
+  -webkit-box-shadow: inset 4px 0 0 0 ${color};
+          box-shadow: inset 4px 0 0 0 ${color};
+
+  :hover {
+    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};
+            box-shadow: inset 4px 0 0 0 ${hoverColor};
+  }
+
+  :active {
+    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};
+            box-shadow: inset 4px 0 0 0 ${activeColor};
+  }
+`;
 
 const getLeftBorderStyle = props => {
   if (props.selected || props.selectedParent) return commonLeftBorderStyle(props.theme.colors.brand[400], props.theme.colors.brand[400], props.theme.colors.brand[400]);

package/cjs/common/getScrollbarStyle.js

@@ -2,6 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getScrolbarStyle = () => "\n  ::-webkit-scrollbar {\n    width: 14px;\n  }\n  ::-webkit-scrollbar-thumb {\n    height: 6px;\n    border: 4px solid rgba(0, 0, 0, 0);\n\n    background-clip: padding-box;\n\n    background-color: rgba(105, 116, 137, 0.5);\n\n    border-radius: 7px;\n    -webkit-border-radius: 7px;\n  }\n  ::-webkit-scrollbar-button {\n    width: 0;\n    height: 0;\n    display: none;\n  }\n  ::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n";
+const getScrolbarStyle = () => `
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+  ::-webkit-scrollbar-thumb {
+    height: 6px;
+    border: 4px solid rgba(0, 0, 0, 0);
+
+    background-clip: padding-box;
+
+    background-color: rgba(105, 116, 137, 0.5);
+
+    border-radius: 7px;
+    -webkit-border-radius: 7px;
+  }
+  ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+`;
 
 exports.getScrolbarStyle = getScrolbarStyle;

package/cjs/configs/useLeftNavConfig.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var useLeftNavItems = require('./useLeftNavItems.js');
 var useLeftNavSmoothExpand = require('./useLeftNavSmoothExpand.js');

package/cjs/configs/useLeftNavItems.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var constants = require('../exported-related/constants.js');
 require('@babel/runtime/helpers/jsx');
@@ -23,21 +22,17 @@ const notFocuseableItems = [constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, consta
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach(item => {
     if (typeof item.type === 'string') {
-      var _item$itemOpts$items, _item$itemOpts, _item$itemOpts2, _item$itemOpts$items2, _item$itemOpts3;
-
       // Out of the box item
       if (notFocuseableItems.includes(item.type)) return; // not focuseable
 
       callback(item.dsId); // If it's an opened uncontrolled drilldown
 
-      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems((_item$itemOpts$items = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 ? _item$itemOpts$items : [], openedDrilldowns, callback); // If it's an opened controlled drilldown
+      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback); // If it's an opened controlled drilldown
 
-      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems((_item$itemOpts$items2 = (_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) !== null && _item$itemOpts$items2 !== void 0 ? _item$itemOpts$items2 : [], openedDrilldowns, callback);
+      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened) walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
     } else {
-      var _item$itemOpts4;
-
       // Custom item
-      if (!((_item$itemOpts4 = item.itemOpts) !== null && _item$itemOpts4 !== void 0 && _item$itemOpts4.focuseable)) return; // not focuseable specified
+      if (!item.itemOpts?.focuseable) return; // not focuseable specified
 
       callback(item.dsId);
     }

package/cjs/exported-related/ItemRenderer/index.js

@@ -84,7 +84,7 @@ const ItemRenderer = props => {
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledItem, {
       ref: visibleItemsRefs.current[dsId],
       pt: paddingTop,
-      pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
+      pl: indent === undefined ? 'xxxs' : `${indent}px`,
       minHeight: minHeight,
       shadowStyle: shadowStyle(opened, item.type),
       alignItems: "flex-start",
@@ -118,7 +118,7 @@ const ItemRenderer = props => {
         marginLeft: opened ? '16px' : '0px',
         marginRight: borderBottomMr,
         height: '1px',
-        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
+        width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,
         backgroundColor: '#E0E3E8'
       }
     })), subitems]

package/cjs/exported-related/ItemRenderer/styled.js

@@ -13,7 +13,16 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 /* eslint-disable indent */
 const borderOutside = function (color) {
   let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return "&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ".concat(weight, "px solid ").concat(color, ";\n  pointer-events: none;\n}");
+  return `&:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: ${weight}px solid ${color};
+  pointer-events: none;
+}`;
 };
 const StyledItemWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-11wzgfh-0"
@@ -51,7 +60,9 @@ const StyledItem = /*#__PURE__*/styled__default["default"](Grid__default["defaul
     theme
   } = _ref3;
   return selectable ? theme.colors.brand[200] : 'white';
-}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? ":focus {\n    ".concat(borderOutside(props.theme.colors.brand[700]), "\n        }") : '');
+}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? `:focus {
+    ${borderOutside(props.theme.colors.brand[700])}
+        }` : '');
 
 exports.StyledItem = StyledItem;
 exports.StyledItemWrapper = StyledItemWrapper;

package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js

@@ -44,7 +44,7 @@ const usePropsWithDefaults = props => {
       minHeight: '48px',
       paddingTop: '12px',
       subitems: [],
-      shadowStyle: (opened, type) => theme => "box-shadow: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
+      shadowStyle: (opened, type) => theme => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'}`,
       hasBorderBottom: false,
       borderBottomMr: '0px'
     }, props), {}, {

package/cjs/hooks/useKeyboardNavigation.js

@@ -51,9 +51,7 @@ const useKeyboardNavigation = _ref => {
     setSelectedItem(nextDsId);
   }, [setFocusedItem, setSelectedItem]);
   React.useLayoutEffect(() => {
-    var _visibleItemsRefs$cur, _visibleItemsRefs$cur2;
-
-    if (dsId === focusedItem) (_visibleItemsRefs$cur = visibleItemsRefs.current[dsId]) === null || _visibleItemsRefs$cur === void 0 ? void 0 : (_visibleItemsRefs$cur2 = _visibleItemsRefs$cur.current) === null || _visibleItemsRefs$cur2 === void 0 ? void 0 : _visibleItemsRefs$cur2.focus();
+    if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();
   }, [dsId, focusedItem, visibleItemsRefs]);
   const onKeyDown = React.useCallback(e => {
     const {

package/cjs/hooks/useSelectFirstBodyItem.js

@@ -17,20 +17,14 @@ const isSelectableOutOfTheBox = elem => typeof elem.type === 'string' && elem.ty
 
 const isSelectableCustom = elem => elem.itemOpts.selectable;
 
-const isItemInsideTheTree = (item, itemID) => {
-  var _item$itemOpts, _item$itemOpts$items;
-
-  return item.dsId === itemID || !!(item !== null && item !== void 0 && (_item$itemOpts = item.itemOpts) !== null && _item$itemOpts !== void 0 && (_item$itemOpts$items = _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 && _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
-};
+const isItemInsideTheTree = (item, itemID) => item.dsId === itemID || !!item?.itemOpts?.items?.some(it => isItemInsideTheTree(it, itemID));
 
 const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
   React.useEffect(() => {
     if (!disableDefaultSelection && items && items.length && openedItem) {
-      var _items$index$dsId;
-
       const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
       const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
-      if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem((_items$index$dsId = items[index].dsId) !== null && _items$index$dsId !== void 0 ? _items$index$dsId : '');
+      if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId ?? '');
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [openedItem, setSelectedItem, disableDefaultSelection]);

package/cjs/outOfTheBox/ItemControlledDrilldown/index.js

@@ -50,10 +50,8 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts$indent, _item$itemOpts;
-
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    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 currentIndent = item.itemOpts?.indent ?? 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/cjs/outOfTheBox/ItemHeader/index.js

@@ -29,11 +29,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
 
-const ItemHeader = props => {
-  var _item$itemOpts$ariaLa;
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
+const ItemHeader = props => {
   const {
     item,
     item: {
@@ -62,9 +70,9 @@ const ItemHeader = props => {
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
-  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
+  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
   const isSelected = selectedItem === dsId || selectedParent === dsId;
-  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
+  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({
@@ -98,7 +106,7 @@ const ItemHeader = props => {
       setFocusedItem(constants.CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": "Close ".concat(ariaLabel)
+    "aria-label": `Close ${ariaLabel}`
   }), /*#__PURE__*/_jsx__default["default"](CollapsedComponent, {
     item: item,
     ctx: ctx

package/cjs/outOfTheBox/ItemLink/index.js

@@ -28,7 +28,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
+
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
 const ItemLink = props => {
   const {
@@ -55,7 +65,7 @@ const ItemLink = props => {
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const isSelected = selectedItem === dsId || selectedParent === dsId;
-  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
+  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({

package/cjs/outOfTheBox/ItemSubmenu/index.js

@@ -29,11 +29,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
 
-const ItemSubmenu = props => {
-  var _item$itemOpts$ariaLa;
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
+const ItemSubmenu = props => {
   const {
     item,
     item: {
@@ -63,8 +71,8 @@ const ItemSubmenu = props => {
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = React.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';
+  const shadowStyle = React.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.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
@@ -97,7 +105,7 @@ const ItemSubmenu = props => {
       setFocusedItem(constants.CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": "Close ".concat(ariaLabel)
+    "aria-label": `Close ${ariaLabel}`
   }), /*#__PURE__*/_jsx__default["default"](CollapsedComponent, {
     item: item,
     ctx: ctx

package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -4,7 +4,6 @@ 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');
@@ -52,10 +51,8 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts$indent, _item$itemOpts;
-
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    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 currentIndent = item.itemOpts?.indent ?? 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/cjs/parts/LeftNavContent/styled.js

@@ -16,10 +16,18 @@ const getLeftShadowStyles = _ref => {
   } = _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 transparent;
+      :hover {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};
+      }
+      :active {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+      }
+    `;
   }
 
-  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
+  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
 };
 
 const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default["default"].nav.withConfig({
@@ -27,7 +35,7 @@ const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default["defaul
 })(["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({
   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(".concat(props.expandedWidth, " - 2px)") : '46px');
+})(["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({
   componentId: "sc-1hvvtkb-2"
 })(["grid-area:left-nav-header;", ""], getLeftShadowStyles);

package/cjs/parts/LeftNavContentWithScrollbar/index.js

@@ -2,14 +2,13 @@
 
 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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 require('overlayscrollbars/css/OverlayScrollbars.css');
 var OverlayScrollbars = require('overlayscrollbars');

package/cjs/parts/LeftNavFooterItem/index.js

@@ -64,7 +64,7 @@ const LeftNavFooterItem = props => {
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? "Footer, ".concat(footerLabel) : "Expand left navigation",
+    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`,
     children: !expandedForAnimation ? /*#__PURE__*/_jsx__default["default"](dsIcons.MenuExpand, {
       size: "m",
       color: ['brand-primary', 800],

package/esm/common/getItemBackgroundStyle.js

@@ -1,4 +1,15 @@
-const commonItemBackgroundStyle = (color, hoverColor, activeColor) => "\n\n  background: ".concat(color, ";\n\n  :hover {\n    background: ").concat(hoverColor, ";\n  }\n\n  :active {\n    background: ").concat(activeColor, ";\n  }\n");
+const commonItemBackgroundStyle = (color, hoverColor, activeColor) => `
+
+  background: ${color};
+
+  :hover {
+    background: ${hoverColor};
+  }
+
+  :active {
+    background: ${activeColor};
+  }
+`;
 
 const getItemBackgroundStyle = props => {
   if (props.selected && !props.opened) return commonItemBackgroundStyle(props.theme.colors.brand[200], props.theme.colors.brand[200], props.theme.colors.brand[200]);

package/esm/common/getLeftBorderStyle.js

@@ -1,4 +1,18 @@
-const commonLeftBorderStyle = (color, hoverColor, activeColor) => "\n\n  -webkit-box-shadow: inset 4px 0 0 0 ".concat(color, ";\n          box-shadow: inset 4px 0 0 0 ").concat(color, ";\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n  }\n");
+const commonLeftBorderStyle = (color, hoverColor, activeColor) => `
+
+  -webkit-box-shadow: inset 4px 0 0 0 ${color};
+          box-shadow: inset 4px 0 0 0 ${color};
+
+  :hover {
+    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};
+            box-shadow: inset 4px 0 0 0 ${hoverColor};
+  }
+
+  :active {
+    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};
+            box-shadow: inset 4px 0 0 0 ${activeColor};
+  }
+`;
 
 const getLeftBorderStyle = props => {
   if (props.selected || props.selectedParent) return commonLeftBorderStyle(props.theme.colors.brand[400], props.theme.colors.brand[400], props.theme.colors.brand[400]);

package/esm/common/getScrollbarStyle.js

@@ -1,3 +1,26 @@
-const getScrolbarStyle = () => "\n  ::-webkit-scrollbar {\n    width: 14px;\n  }\n  ::-webkit-scrollbar-thumb {\n    height: 6px;\n    border: 4px solid rgba(0, 0, 0, 0);\n\n    background-clip: padding-box;\n\n    background-color: rgba(105, 116, 137, 0.5);\n\n    border-radius: 7px;\n    -webkit-border-radius: 7px;\n  }\n  ::-webkit-scrollbar-button {\n    width: 0;\n    height: 0;\n    display: none;\n  }\n  ::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n";
+const getScrolbarStyle = () => `
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+  ::-webkit-scrollbar-thumb {
+    height: 6px;
+    border: 4px solid rgba(0, 0, 0, 0);
+
+    background-clip: padding-box;
+
+    background-color: rgba(105, 116, 137, 0.5);
+
+    border-radius: 7px;
+    -webkit-border-radius: 7px;
+  }
+  ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+`;
 
 export { getScrolbarStyle };

package/esm/configs/useLeftNavConfig.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import { useLeftNavItems } from './useLeftNavItems.js';
 import { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';

package/esm/configs/useLeftNavItems.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useRef, createRef } from 'react';
 import { ITEM_TYPES, FOOTER_DS_ID } from '../exported-related/constants.js';
 import '@babel/runtime/helpers/esm/jsx';
@@ -19,21 +18,17 @@ const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach(item => {
     if (typeof item.type === 'string') {
-      var _item$itemOpts$items, _item$itemOpts, _item$itemOpts2, _item$itemOpts$items2, _item$itemOpts3;
-
       // Out of the box item
       if (notFocuseableItems.includes(item.type)) return; // not focuseable
 
       callback(item.dsId); // If it's an opened uncontrolled drilldown
 
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems((_item$itemOpts$items = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 ? _item$itemOpts$items : [], openedDrilldowns, callback); // If it's an opened controlled drilldown
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback); // If it's an opened controlled drilldown
 
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems((_item$itemOpts$items2 = (_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) !== null && _item$itemOpts$items2 !== void 0 ? _item$itemOpts$items2 : [], openedDrilldowns, callback);
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened) walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
     } else {
-      var _item$itemOpts4;
-
       // Custom item
-      if (!((_item$itemOpts4 = item.itemOpts) !== null && _item$itemOpts4 !== void 0 && _item$itemOpts4.focuseable)) return; // not focuseable specified
+      if (!item.itemOpts?.focuseable) return; // not focuseable specified
 
       callback(item.dsId);
     }

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

@@ -75,7 +75,7 @@ const ItemRenderer = props => {
     }, void 0, /*#__PURE__*/jsx(StyledItem, {
       ref: visibleItemsRefs.current[dsId],
       pt: paddingTop,
-      pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
+      pl: indent === undefined ? 'xxxs' : `${indent}px`,
       minHeight: minHeight,
       shadowStyle: shadowStyle(opened, item.type),
       alignItems: "flex-start",
@@ -109,7 +109,7 @@ const ItemRenderer = props => {
         marginLeft: opened ? '16px' : '0px',
         marginRight: borderBottomMr,
         height: '1px',
-        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
+        width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,
         backgroundColor: '#E0E3E8'
       }
     })), subitems]

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

@@ -4,7 +4,16 @@ import styled from 'styled-components';
 /* eslint-disable indent */
 const borderOutside = function (color) {
   let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return "&:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: ".concat(weight, "px solid ").concat(color, ";\n  pointer-events: none;\n}");
+  return `&:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: ${weight}px solid ${color};
+  pointer-events: none;
+}`;
 };
 const StyledItemWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-11wzgfh-0"
@@ -42,6 +51,8 @@ const StyledItem = /*#__PURE__*/styled(Grid).withConfig({
     theme
   } = _ref3;
   return selectable ? theme.colors.brand[200] : 'white';
-}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? ":focus {\n    ".concat(borderOutside(props.theme.colors.brand[700]), "\n        }") : '');
+}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? `:focus {
+    ${borderOutside(props.theme.colors.brand[700])}
+        }` : '');
 
 export { StyledItem, StyledItemWrapper, borderOutside };

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

@@ -36,7 +36,7 @@ const usePropsWithDefaults = props => {
       minHeight: '48px',
       paddingTop: '12px',
       subitems: [],
-      shadowStyle: (opened, type) => theme => "box-shadow: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
+      shadowStyle: (opened, type) => theme => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'}`,
       hasBorderBottom: false,
       borderBottomMr: '0px'
     }, props), {}, {

package/esm/hooks/useKeyboardNavigation.js

@@ -47,9 +47,7 @@ const useKeyboardNavigation = _ref => {
     setSelectedItem(nextDsId);
   }, [setFocusedItem, setSelectedItem]);
   useLayoutEffect(() => {
-    var _visibleItemsRefs$cur, _visibleItemsRefs$cur2;
-
-    if (dsId === focusedItem) (_visibleItemsRefs$cur = visibleItemsRefs.current[dsId]) === null || _visibleItemsRefs$cur === void 0 ? void 0 : (_visibleItemsRefs$cur2 = _visibleItemsRefs$cur.current) === null || _visibleItemsRefs$cur2 === void 0 ? void 0 : _visibleItemsRefs$cur2.focus();
+    if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();
   }, [dsId, focusedItem, visibleItemsRefs]);
   const onKeyDown = useCallback(e => {
     const {

package/esm/hooks/useSelectFirstBodyItem.js

@@ -13,20 +13,14 @@ const isSelectableOutOfTheBox = elem => typeof elem.type === 'string' && elem.ty
 
 const isSelectableCustom = elem => elem.itemOpts.selectable;
 
-const isItemInsideTheTree = (item, itemID) => {
-  var _item$itemOpts, _item$itemOpts$items;
-
-  return item.dsId === itemID || !!(item !== null && item !== void 0 && (_item$itemOpts = item.itemOpts) !== null && _item$itemOpts !== void 0 && (_item$itemOpts$items = _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 && _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
-};
+const isItemInsideTheTree = (item, itemID) => item.dsId === itemID || !!item?.itemOpts?.items?.some(it => isItemInsideTheTree(it, itemID));
 
 const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
   useEffect(() => {
     if (!disableDefaultSelection && items && items.length && openedItem) {
-      var _items$index$dsId;
-
       const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
       const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
-      if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem((_items$index$dsId = items[index].dsId) !== null && _items$index$dsId !== void 0 ? _items$index$dsId : '');
+      if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId ?? '');
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [openedItem, setSelectedItem, disableDefaultSelection]);

package/esm/outOfTheBox/ItemControlledDrilldown/index.js

@@ -40,10 +40,8 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts$indent, _item$itemOpts;
-
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    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 currentIndent = item.itemOpts?.indent ?? 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/esm/outOfTheBox/ItemHeader/index.js

@@ -19,11 +19,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
 
-const ItemHeader = props => {
-  var _item$itemOpts$ariaLa;
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
+const ItemHeader = props => {
   const {
     item,
     item: {
@@ -52,9 +60,9 @@ const ItemHeader = props => {
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
-  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
+  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
   const isSelected = selectedItem === dsId || selectedParent === dsId;
-  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
+  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({
@@ -88,7 +96,7 @@ const ItemHeader = props => {
       setFocusedItem(CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": "Close ".concat(ariaLabel)
+    "aria-label": `Close ${ariaLabel}`
   }), /*#__PURE__*/_jsx(CollapsedComponent, {
     item: item,
     ctx: ctx

package/esm/outOfTheBox/ItemLink/index.js

@@ -18,7 +18,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
+
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
 const ItemLink = props => {
   const {
@@ -45,7 +55,7 @@ const ItemLink = props => {
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const isSelected = selectedItem === dsId || selectedParent === dsId;
-  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
+  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({

package/esm/outOfTheBox/ItemSubmenu/index.js

@@ -19,11 +19,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.brand[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
+const notOpenedShadowStyle = isSelected => theme => `
+  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
 
-const ItemSubmenu = props => {
-  var _item$itemOpts$ariaLa;
+  :hover {
+    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
+  }
+
+  :active {
+    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+  }
+`;
 
+const ItemSubmenu = props => {
   const {
     item,
     item: {
@@ -53,8 +61,8 @@ const ItemSubmenu = props => {
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  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';
+  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.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
@@ -87,7 +95,7 @@ const ItemSubmenu = props => {
       setFocusedItem(CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": "Close ".concat(ariaLabel)
+    "aria-label": `Close ${ariaLabel}`
   }), /*#__PURE__*/_jsx(CollapsedComponent, {
     item: item,
     ctx: ctx

package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -2,7 +2,6 @@ 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';
@@ -42,10 +41,8 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts$indent, _item$itemOpts;
-
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    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 currentIndent = item.itemOpts?.indent ?? 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/esm/parts/LeftNavContent/styled.js

@@ -8,10 +8,18 @@ const getLeftShadowStyles = _ref => {
   } = _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 transparent;
+      :hover {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};
+      }
+      :active {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+      }
+    `;
   }
 
-  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
+  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
 };
 
 const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled.nav.withConfig({
@@ -19,7 +27,7 @@ const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled.nav.withConfig({
 })(["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.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(".concat(props.expandedWidth, " - 2px)") : '46px');
+})(["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.div.withConfig({
   componentId: "sc-1hvvtkb-2"
 })(["grid-area:left-nav-header;", ""], getLeftShadowStyles);

package/esm/parts/LeftNavContentWithScrollbar/index.js

@@ -5,7 +5,6 @@ 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/css/OverlayScrollbars.css';
 import OverlayScrollbars from 'overlayscrollbars';

package/esm/parts/LeftNavFooterItem/index.js

@@ -55,7 +55,7 @@ const LeftNavFooterItem = props => {
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? "Footer, ".concat(footerLabel) : "Expand left navigation",
+    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`,
     children: !expandedForAnimation ? /*#__PURE__*/_jsx(MenuExpand, {
       size: "m",
       color: ['brand-primary', 800],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation",
-  "version": "2.4.2-rc.11",
+  "version": "2.4.2-rc.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Left Navigation",
   "module": "./esm/index.js",
@@ -233,11 +233,11 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.11",
-    "@elliemae/ds-grid": "2.4.2-rc.11",
-    "@elliemae/ds-icons": "2.4.2-rc.11",
-    "@elliemae/ds-system": "2.4.2-rc.11",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.11",
+    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.14",
+    "@elliemae/ds-grid": "2.4.2-rc.14",
+    "@elliemae/ds-icons": "2.4.2-rc.14",
+    "@elliemae/ds-system": "2.4.2-rc.14",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.14",
     "overlayscrollbars": "1.13.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"