@elliemae/ds-left-navigation 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/configs/useLeftNavConfig.js

@@ -1,91 +1,58 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import { useGlobalKeyListeners } from './useGlobalKeyListeners.js';
 import { useLeftNavItems } from './useLeftNavItems.js';
 import { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';
 import { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '../exported-related/constants.js';
-import '@elliemae/ds-grid';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/extends';
-import '@elliemae/ds-icons';
 
-var useLeftNavConfig = function useLeftNavConfig(props) {
-  var expanded = props.expanded,
-      openedItem = props.openedItem,
-      onSelectedChange = props.onSelectedChange,
-      onFocusChange = props.onFocusChange,
-      items = props.items; // -----------------------------------------------------------------------------
+const useLeftNavConfig = props => {
+  const {
+    expanded,
+    openedItem,
+    onSelectedChange,
+    onFocusChange,
+    items
+  } = props; // -----------------------------------------------------------------------------
   // ************************** ------------ **************************
   // *                         INTERNAL STATE                         *
   // ************************** ------------ **************************
   // Selection related
 
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedItem = _React$useState2[0],
-      setSelectedItem = _React$useState2[1];
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [selectedSubitem, setSelectedSubitem] = React.useState(null); // Focus related
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedSubitem = _React$useState4[0],
-      setSelectedSubitem = _React$useState4[1]; // Focus related
+  const [focusedItem, setFocusedItem] = React.useState(null);
+  const [focusedByKey, setFocusedByKey] = React.useState(true); // Opened uncontrolled drilldowns
 
-
-  var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focusedItem = _React$useState6[0],
-      setFocusedItem = _React$useState6[1];
-
-  var _React$useState7 = React.useState(true),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      focusedByKey = _React$useState8[0],
-      setFocusedByKey = _React$useState8[1]; // Opened uncontrolled drilldowns
-
-
-  var _React$useState9 = React.useState([]),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      openedDrilldowns = _React$useState10[0],
-      setOpenedDrilldowns = _React$useState10[1]; // -----------------------------------------------------------------------------
+  const [openedDrilldowns, setOpenedDrilldowns] = React.useState([]); // -----------------------------------------------------------------------------
   // ************************** ------------ **************************
   // *                        EXPAND ANIMATION                        *
   // ************************** ------------ **************************
 
-
-  var _React$useState11 = React.useState(expanded),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      expandedForAnimation = _React$useState12[0],
-      setExpandedForAnimation = _React$useState12[1];
-
-  var timeoutRef = React.useRef(null);
-  var smoothExpandOpts = React.useMemo(function () {
-    return {
-      expandedForAnimation: expandedForAnimation,
-      timeoutRef: timeoutRef,
-      setExpandedForAnimation: setExpandedForAnimation
-    };
-  }, [expandedForAnimation, timeoutRef, setExpandedForAnimation]);
+  const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);
+  const timeoutRef = React.useRef(null);
+  const smoothExpandOpts = React.useMemo(() => ({
+    expandedForAnimation,
+    timeoutRef,
+    setExpandedForAnimation
+  }), [expandedForAnimation, timeoutRef, setExpandedForAnimation]);
   useLeftNavSmoothExpand(props, smoothExpandOpts); // -----------------------------------------------------------------------------
   // ************************** ------------ **************************
   // *                            KEYBOARD                            *
   // ************************** ------------ **************************
 
-  var globalKeyOpts = React.useMemo(function () {
-    return {
-      setFocusedByKey: setFocusedByKey
-    };
-  }, [setFocusedByKey]);
+  const globalKeyOpts = React.useMemo(() => ({
+    setFocusedByKey
+  }), [setFocusedByKey]);
   useGlobalKeyListeners(globalKeyOpts); // -----------------------------------------------------------------------------
   // ************************** ------------ **************************
   // *                          SIDE EFFECTS                          *
   // ************************** ------------ **************************
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     onSelectedChange(selectedItem);
   }, [selectedItem, onSelectedChange]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     onFocusChange(focusedItem);
   }, [focusedItem, setFocusedItem]);
   useSelectFirstBodyItem(items, openedItem, setSelectedItem); // -----------------------------------------------------------------------------
@@ -93,43 +60,38 @@ var useLeftNavConfig = function useLeftNavConfig(props) {
   // *                        ITEMS MANAGEMENT                        *
   // ************************** ------------ **************************
 
-  var leftNavItemsProps = React.useMemo(function () {
-    return {
-      headerItem: props.HeaderComponent,
-      bodyHeaderItem: props.BodyHeaderComponent,
-      items: props.items,
-      openedDrilldowns: openedDrilldowns
-    };
-  }, [props.items, openedDrilldowns]); // We need to know the current visible items since we have drilldowns
-
-  var _useLeftNavItems = useLeftNavItems(leftNavItemsProps),
-      visibleItems = _useLeftNavItems.visibleItems,
-      visibleItemsRefs = _useLeftNavItems.visibleItemsRefs; // -----------------------------------------------------------------------------
+  const leftNavItemsProps = React.useMemo(() => ({
+    headerItem: props.HeaderComponent,
+    bodyHeaderItem: props.BodyHeaderComponent,
+    items: props.items,
+    openedDrilldowns
+  }), [props.items, openedDrilldowns]); // We need to know the current visible items since we have drilldowns
+
+  const {
+    visibleItems,
+    visibleItemsRefs
+  } = useLeftNavItems(leftNavItemsProps); // -----------------------------------------------------------------------------
   // ************************** ------------ **************************
   // *                         LEFTNAV CONFIG                         *
   // ************************** ------------ **************************
 
-
-  var finalConfig = React.useMemo(function () {
-    return {
-      leftNavProps: props,
-      expandedForAnimation: expandedForAnimation,
-      selectedItem: selectedItem,
-      setSelectedItem: setSelectedItem,
-      selectedSubitem: selectedSubitem,
-      setSelectedSubitem: setSelectedSubitem,
-      focusedItem: focusedItem,
-      setFocusedItem: setFocusedItem,
-      focusedByKey: focusedByKey,
-      setFocusedByKey: setFocusedByKey,
-      openedDrilldowns: openedDrilldowns,
-      setOpenedDrilldowns: setOpenedDrilldowns,
-      visibleItems: visibleItems,
-      visibleItemsRefs: visibleItemsRefs
-    };
-  }, [props, props.items, expandedForAnimation, selectedItem, setSelectedItem, selectedSubitem, setSelectedSubitem, focusedItem, setFocusedItem, focusedByKey, setFocusedByKey, openedDrilldowns, setOpenedDrilldowns, visibleItems, visibleItemsRefs]);
+  const finalConfig = React.useMemo(() => ({
+    leftNavProps: props,
+    expandedForAnimation,
+    selectedItem,
+    setSelectedItem,
+    selectedSubitem,
+    setSelectedSubitem,
+    focusedItem,
+    setFocusedItem,
+    focusedByKey,
+    setFocusedByKey,
+    openedDrilldowns,
+    setOpenedDrilldowns,
+    visibleItems,
+    visibleItemsRefs
+  }), [props, props.items, expandedForAnimation, selectedItem, setSelectedItem, selectedSubitem, setSelectedSubitem, focusedItem, setFocusedItem, focusedByKey, setFocusedByKey, openedDrilldowns, setOpenedDrilldowns, visibleItems, visibleItemsRefs]);
   return finalConfig;
 };
 
 export { useLeftNavConfig as default, useLeftNavConfig };
-//# sourceMappingURL=useLeftNavConfig.js.map

package/esm/configs/useLeftNavItems.js

@@ -1,17 +1,23 @@
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+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';
 import '@elliemae/ds-grid';
 import 'styled-components';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/extends';
-import '@elliemae/ds-icons';
+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';
 
-var notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION]; // Walks the array of items
+const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION]; // Walks the array of items
 // Drilldowns are tree-like structures
 
-var walkItems = function walkItems(items, openedDrilldowns, callback) {
-  items.forEach(function (item) {
+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;
 
@@ -34,36 +40,36 @@ var walkItems = function walkItems(items, openedDrilldowns, callback) {
   });
 };
 
-var useLeftNavItems = function useLeftNavItems(props) {
-  var headerItem = props.headerItem,
-      bodyHeaderItem = props.bodyHeaderItem,
-      bodyItems = props.items,
-      openedDrilldowns = props.openedDrilldowns; // Place the header and body header items into the array of items
-
-  var items = useMemo(function () {
-    var itemsArray = _toConsumableArray(bodyItems);
+const useLeftNavItems = props => {
+  const {
+    headerItem,
+    bodyHeaderItem,
+    items: bodyItems,
+    openedDrilldowns
+  } = props; // Place the header and body header items into the array of items
 
+  const items = useMemo(() => {
+    const itemsArray = [...bodyItems];
     if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);
     if (headerItem) itemsArray.unshift(headerItem);
     return itemsArray;
   }, [headerItem, bodyHeaderItem, bodyItems]);
-  var visibleItemsRefs = useRef({});
-  var visibleItems = useMemo(function () {
-    var visibleItemsArray = [];
-    walkItems(items, openedDrilldowns, function (dsId) {
+  const visibleItemsRefs = useRef({});
+  const visibleItems = useMemo(() => {
+    const visibleItemsArray = [];
+    walkItems(items, openedDrilldowns, dsId => {
       visibleItemsArray.push(dsId);
     });
     visibleItemsArray.push(FOOTER_DS_ID);
     return visibleItemsArray;
   }, [props]);
-  visibleItems.forEach(function (dsId) {
+  visibleItems.forEach(dsId => {
     if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = /*#__PURE__*/createRef();
   });
   return {
-    visibleItems: visibleItems,
-    visibleItemsRefs: visibleItemsRefs
+    visibleItems,
+    visibleItemsRefs
   };
 };
 
 export { useLeftNavItems as default, useLeftNavItems };
-//# sourceMappingURL=useLeftNavItems.js.map

package/esm/configs/useLeftNavSmoothExpand.js

@@ -1,26 +1,23 @@
 import React from 'react';
 
-var useLeftNavSmoothExpand = function useLeftNavSmoothExpand(props, smoothExpandOpts) {
-  var expanded = props.expanded;
-  var expandedForAnimation = smoothExpandOpts.expandedForAnimation,
-      timeoutRef = smoothExpandOpts.timeoutRef,
-      setExpandedForAnimation = smoothExpandOpts.setExpandedForAnimation;
-  React.useEffect(function () {
+const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
+  const {
+    expanded
+  } = props;
+  const {
+    expandedForAnimation,
+    timeoutRef,
+    setExpandedForAnimation
+  } = smoothExpandOpts;
+  React.useEffect(() => {
     // If expanded changes, we need to smoothly transition to the non-expanded state
     // so we need to wait for 350ms
     if (!expanded && expandedForAnimation) {
       clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(function () {
-        return setExpandedForAnimation(false);
-      }, 350);
+      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
     } else if (expanded) setExpandedForAnimation(true);
   }, [expanded]);
-  React.useEffect(function () {
-    return function () {
-      return clearTimeout(timeoutRef.current);
-    };
-  }, []);
+  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
 };
 
 export { useLeftNavSmoothExpand as default, useLeftNavSmoothExpand };
-//# sourceMappingURL=useLeftNavSmoothExpand.js.map

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

@@ -1,13 +1,14 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
-import { ChevronSmallRight } from '@elliemae/ds-icons';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import ChevronRight from '@elliemae/ds-icons/ChevronSmallRight';
+import { jsx } from 'react/jsx-runtime';
 
-var ChevronItem = function ChevronItem(props) {
-  return /*#__PURE__*/React.createElement(ChevronSmallRight, _extends({
-    size: "m",
-    color: ['brand-primary', 800]
-  }, props));
-};
+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 ChevronItem = props => /*#__PURE__*/jsx(ChevronRight, _objectSpread({
+  size: "m",
+  color: ['brand-primary', 800]
+}, props));
 
 export { ChevronItem, ChevronItem as default };
-//# sourceMappingURL=index.js.map

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

@@ -1,22 +1,22 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
 import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-var AugmentedIcon = function AugmentedIcon(Icon) {
-  return styled(Icon).withConfig({
-    componentId: "sc-1eek2uh-0"
-  })(["cursor:pointer;outline:0;:focus,:active{outline:1px solid #1e79c2;}"]);
-};
+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 AugmentedIcon = Icon => styled(Icon).withConfig({
+  componentId: "sc-1eek2uh-0"
+})(["cursor:pointer;outline:0;:focus,:active{outline:1px solid #1e79c2;}"]);
 
-var Icon = function Icon(IconComponent) {
-  return function (props) {
-    var StyledComponent = AugmentedIcon(IconComponent);
-    return /*#__PURE__*/React.createElement(StyledComponent, _extends({
-      color: ['brand-primary', 800],
-      tabIndex: 0
-    }, props));
-  };
+const Icon = IconComponent => props => {
+  const StyledComponent = AugmentedIcon(IconComponent);
+  return /*#__PURE__*/jsx(StyledComponent, _objectSpread({
+    color: ['brand-primary', 800],
+    tabIndex: 0
+  }, props));
 };
 
 export { Icon };
-//# sourceMappingURL=index.js.map

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

@@ -1,121 +1,120 @@
-import React, { useContext, useCallback, useMemo } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useCallback, useMemo } from 'react';
 import Grid from '@elliemae/ds-grid';
 import { StyledItemWrapper, StyledItem } from './styled.js';
 import { LeftNavContext } from '../../LeftNavigationContext.js';
 import { usePropsWithDefaults } from './usePropsWithDefaults.js';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation.js';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '../constants.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-/* eslint-disable complexity */
-var ItemRenderer = function ItemRenderer(props) {
-  var propsWithDefault = usePropsWithDefaults(props);
-  var item = propsWithDefault.item,
-      _propsWithDefault$ite = propsWithDefault.item,
-      dsId = _propsWithDefault$ite.dsId,
-      _propsWithDefault$ite2 = _propsWithDefault$ite.itemOpts,
-      selectable = _propsWithDefault$ite2.selectable,
-      focuseable = _propsWithDefault$ite2.focuseable,
-      indent = _propsWithDefault$ite2.indent,
-      ariaLabel = _propsWithDefault$ite2.ariaLabel,
-      ariaRole = _propsWithDefault$ite2.ariaRole,
-      ariaLive = _propsWithDefault$ite2.ariaLive,
-      ariaExpanded = _propsWithDefault$ite2.ariaExpanded,
-      ariaDescribedBy = _propsWithDefault$ite2.ariaDescribedBy,
-      CollapsedComponent = _propsWithDefault$ite.CollapsedComponent,
-      subitems = propsWithDefault.subitems,
-      minHeight = propsWithDefault.minHeight,
-      paddingTop = propsWithDefault.paddingTop,
-      onClick = propsWithDefault.onClick,
-      shadowStyle = propsWithDefault.shadowStyle,
-      hasBorderBottom = propsWithDefault.hasBorderBottom,
-      borderBottomMr = propsWithDefault.borderBottomMr,
-      children = propsWithDefault.children;
-  var ctx = useContext(LeftNavContext);
-  var _ctx$leftNavProps = ctx.leftNavProps,
-      onItemClick = _ctx$leftNavProps.onItemClick,
-      openedItem = _ctx$leftNavProps.openedItem,
-      expandedForAnimation = ctx.expandedForAnimation,
-      focusedByKey = ctx.focusedByKey,
-      selectedItem = ctx.selectedItem,
-      setSelectedItem = ctx.setSelectedItem,
-      focusedItem = ctx.focusedItem,
-      setFocusedItem = ctx.setFocusedItem,
-      visibleItemsRefs = ctx.visibleItemsRefs;
-  var opened = dsId === openedItem;
-  var handleOnClick = useCallback(function (e) {
+const ItemRenderer = props => {
+  const propsWithDefault = usePropsWithDefaults(props);
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: {
+        selectable,
+        focuseable,
+        indent,
+        ariaLabel,
+        ariaRole,
+        ariaLive,
+        ariaExpanded,
+        ariaDescribedBy
+      },
+      CollapsedComponent
+    },
+    subitems,
+    minHeight,
+    paddingTop,
+    onClick,
+    shadowStyle,
+    hasBorderBottom,
+    borderBottomMr,
+    children
+  } = propsWithDefault;
+  const ctx = useContext(LeftNavContext);
+  const {
+    leftNavProps: {
+      onItemClick,
+      openedItem
+    },
+    expandedForAnimation,
+    focusedByKey,
+    selectedItem,
+    setSelectedItem,
+    focusedItem,
+    setFocusedItem,
+    visibleItemsRefs
+  } = ctx;
+  const opened = dsId === openedItem;
+  const handleOnClick = useCallback(e => {
     if (onClick) onClick(); // used by uncontrolled drilldowns
 
     onItemClick(item, e);
     if (selectable) setSelectedItem(item.dsId);
   }, [onItemClick, item, setSelectedItem, selectable, onClick]);
-  var handleFocus = useCallback(function () {
+  const handleFocus = useCallback(() => {
     if (focuseable) setFocusedItem(dsId);
   }, [dsId, setFocusedItem, focuseable]);
-  var onKeyDown = useKeyboardNavigation({
-    item: item,
+  const onKeyDown = useKeyboardNavigation({
+    item,
     onClick: handleOnClick
   });
-  var cols = useMemo(function () {
-    return expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'];
-  }, [expandedForAnimation]);
-  var isSelected = useMemo(function () {
-    return selectedItem === dsId;
-  }, [selectedItem, dsId]);
-  var isFocused = useMemo(function () {
-    return focusedItem === dsId;
-  }, [focusedItem, dsId]);
+  const cols = useMemo(() => expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'], [expandedForAnimation]);
+  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);
+  const isFocused = useMemo(() => focusedItem === dsId, [focusedItem, dsId]);
 
   if (!expandedForAnimation && !CollapsedComponent) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledItemWrapper, {
-    shadowStyle: shadowStyle,
-    "data-testid": "leftnav-item-wrapper"
-  }, /*#__PURE__*/React.createElement(StyledItem, {
-    ref: visibleItemsRefs.current[dsId],
-    pt: paddingTop,
-    pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
-    minHeight: minHeight,
-    shadowStyle: shadowStyle,
-    alignItems: "flex-start",
-    cols: cols,
-    onClick: !opened ? handleOnClick : function () {
-      return null;
-    },
-    onKeyDown: onKeyDown,
-    selectable: selectable,
-    selected: isSelected,
-    opened: opened,
-    focused: isFocused,
-    focusedByKey: focusedByKey,
-    onFocus: handleFocus,
-    "data-testid": "leftnav-item-container",
-    tabIndex: focuseable ? 0 : -1,
-    "aria-describedby": ariaDescribedBy,
-    "aria-expanded": ariaExpanded,
-    role: ariaRole,
-    "aria-label": ariaLabel,
-    "aria-hidden": !focuseable,
-    "aria-live": ariaLive
-  }, !expandedForAnimation ? /*#__PURE__*/React.createElement(Grid, {
-    "data-testid": "leftnav-leftcomponent",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(CollapsedComponent, {
-    item: item,
-    ctx: ctx
-  })) : children), hasBorderBottom && /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginLeft: opened ? '16px' : '0px',
-      marginRight: borderBottomMr,
-      height: '1px',
-      width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
-      backgroundColor: '#E0E3E8'
-    }
-  })), subitems);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledItemWrapper, {
+      shadowStyle: shadowStyle,
+      "data-testid": "leftnav-item-wrapper"
+    }, void 0, /*#__PURE__*/jsx(StyledItem, {
+      ref: visibleItemsRefs.current[dsId],
+      pt: paddingTop,
+      pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
+      minHeight: minHeight,
+      shadowStyle: shadowStyle,
+      alignItems: "flex-start",
+      cols: cols,
+      onClick: !opened ? handleOnClick : () => null,
+      onKeyDown: onKeyDown,
+      selectable: selectable,
+      selected: isSelected,
+      opened: opened,
+      focused: isFocused,
+      focusedByKey: focusedByKey,
+      onFocus: handleFocus,
+      "data-testid": "leftnav-item-container",
+      tabIndex: focuseable ? 0 : -1,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      role: ariaRole,
+      "aria-label": ariaLabel,
+      "aria-hidden": !focuseable,
+      "aria-live": ariaLive,
+      children: !expandedForAnimation ? /*#__PURE__*/_jsx(Grid, {
+        "data-testid": "leftnav-leftcomponent",
+        justifyContent: "center"
+      }, void 0, /*#__PURE__*/_jsx(CollapsedComponent, {
+        item: item,
+        ctx: ctx
+      })) : children
+    }), hasBorderBottom && /*#__PURE__*/_jsx("div", {
+      style: {
+        marginLeft: opened ? '16px' : '0px',
+        marginRight: borderBottomMr,
+        height: '1px',
+        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
+        backgroundColor: '#E0E3E8'
+      }
+    })), subitems]
+  });
 };
 
 export { ItemRenderer };
-//# sourceMappingURL=index.js.map