@elliemae/ds-left-navigation 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/configs/useLeftNavItems.js

@@ -1,53 +1,75 @@
-import * as React from "react";
-import { createRef, useMemo, useRef } from "react";
-import { ITEM_TYPES } from "../exported-related";
-import { FOOTER_DS_ID } from "../exported-related/constants";
-const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
+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';
+import '@elliemae/ds-grid';
+import 'styled-components';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import 'react/jsx-runtime';
+import '@elliemae/ds-icons';
+
+const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION]; // Walks the array of items
+// Drilldowns are tree-like structures
+
 const walkItems = (items, openedDrilldowns, callback) => {
-  items.forEach((item) => {
-    if (typeof item.type === "string") {
-      if (notFocuseableItems.includes(item.type))
-        return;
-      callback(item.dsId);
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
-        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
-        walkItems(item.itemOpts?.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_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);
     } else {
-      if (!item.itemOpts?.focuseable)
-        return;
+      var _item$itemOpts4;
+
+      // Custom item
+      if (!((_item$itemOpts4 = item.itemOpts) !== null && _item$itemOpts4 !== void 0 && _item$itemOpts4.focuseable)) return; // not focuseable specified
+
       callback(item.dsId);
     }
   });
 };
-const useLeftNavItems = (props) => {
-  const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;
+
+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);
+    if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);
+    if (headerItem) itemsArray.unshift(headerItem);
     return itemsArray;
   }, [headerItem, bodyHeaderItem, bodyItems]);
   const visibleItemsRefs = useRef({});
   const visibleItems = useMemo(() => {
     const visibleItemsArray = [];
-    walkItems(items, openedDrilldowns, (dsId) => {
+    walkItems(items, openedDrilldowns, dsId => {
       visibleItemsArray.push(dsId);
     });
     visibleItemsArray.push(FOOTER_DS_ID);
     return visibleItemsArray;
   }, [items, openedDrilldowns]);
-  visibleItems.forEach((dsId) => {
-    if (!(dsId in visibleItemsRefs.current))
-      visibleItemsRefs.current[dsId] = createRef();
+  visibleItems.forEach(dsId => {
+    if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = /*#__PURE__*/createRef();
   });
-  return { visibleItems, visibleItemsRefs };
-};
-var useLeftNavItems_default = useLeftNavItems;
-export {
-  useLeftNavItems_default as default,
-  useLeftNavItems
+  return {
+    visibleItems,
+    visibleItemsRefs
+  };
 };
-//# sourceMappingURL=useLeftNavItems.js.map
+
+export { useLeftNavItems as default, useLeftNavItems };

package/esm/configs/useLeftNavSmoothExpand.js

@@ -1,24 +1,26 @@
-import * as React from "react";
-import React2 from "react";
+import React from 'react';
+
 const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
-  const { expanded } = props;
+  const {
+    expanded
+  } = props;
   const {
     expandedForAnimation,
     timeoutRef,
     setExpandedForAnimation
   } = smoothExpandOpts;
-  React2.useEffect(() => {
+  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);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
-    } else if (expanded)
-      setExpandedForAnimation(true);
+    } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [expanded]);
-  React2.useEffect(() => () => clearTimeout(timeoutRef.current), []);
-};
-var useLeftNavSmoothExpand_default = useLeftNavSmoothExpand;
-export {
-  useLeftNavSmoothExpand_default as default,
-  useLeftNavSmoothExpand
+  React.useEffect(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, [timeoutRef]);
 };
-//# sourceMappingURL=useLeftNavSmoothExpand.js.map
+
+export { useLeftNavSmoothExpand as default, useLeftNavSmoothExpand };

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

@@ -1,14 +1,19 @@
-import * as React from "react";
-import React2 from "react";
-import { ChevronSmallRight } from "@elliemae/ds-icons";
-const ChevronItem = (props) => /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { ChevronSmallRight } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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 ChevronItem = props => /*#__PURE__*/jsx(ChevronSmallRight, _objectSpread({
   size: "m",
-  color: ["brand-primary", 800],
-  ...props
-});
-var ChevronItem_default = ChevronItem;
-export {
-  ChevronItem,
-  ChevronItem_default as default
-};
-//# sourceMappingURL=index.js.map
+  color: ['brand-primary', 800]
+}, props));
+
+export { ChevronItem, ChevronItem as default };

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

@@ -1,24 +1,27 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-const AugmentedIcon = (Icon2) => styled(Icon2)`
-  cursor: pointer;
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-  outline: 0;
-  :focus,
-  :active {
-    outline: 1px solid #1e79c2;
-  }
-`;
-const Icon = (IconComponent) => (props) => {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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 AugmentedIcon = Icon => styled(Icon).withConfig({
+  componentId: "sc-1eek2uh-0"
+})(["cursor:pointer;outline:0;:focus,:active{outline:1px solid #1e79c2;}"]);
+
+const Icon = IconComponent => props => {
   const StyledComponent = AugmentedIcon(IconComponent);
-  return /* @__PURE__ */ React2.createElement(StyledComponent, {
-    color: ["brand-primary", 800],
-    tabIndex: 0,
-    ...props
-  });
+  return /*#__PURE__*/jsx(StyledComponent, _objectSpread({
+    color: ['brand-primary', 800],
+    tabIndex: 0
+  }, props));
 };
-export {
-  Icon
-};
-//# sourceMappingURL=index.js.map
+
+export { Icon };

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

@@ -1,17 +1,28 @@
-import * as React from "react";
-import React2, { useContext, useMemo, useCallback } from "react";
-import Grid from "@elliemae/ds-grid";
-import { StyledItemWrapper, StyledItem } from "./styled";
-import { LeftNavContext } from "../../LeftNavigationContext";
-import { usePropsWithDefaults } from "./usePropsWithDefaults";
-import { useKeyboardNavigation } from "../../hooks";
-const ItemRenderer = (props) => {
+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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const ItemRenderer = props => {
   const propsWithDefault = usePropsWithDefaults(props);
   const {
     item,
     item: {
       dsId,
-      itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },
+      itemOpts: {
+        selectable,
+        focuseable,
+        indent,
+        ariaLabel,
+        ariaRole,
+        ariaLive,
+        ariaExpanded,
+        ariaDescribedBy
+      },
       CollapsedComponent
     },
     subitems,
@@ -25,7 +36,10 @@ const ItemRenderer = (props) => {
   } = propsWithDefault;
   const ctx = useContext(LeftNavContext);
   const {
-    leftNavProps: { onItemClick, openedItem },
+    leftNavProps: {
+      onItemClick,
+      openedItem
+    },
     expandedForAnimation,
     selectedParent,
     selectedItem,
@@ -34,71 +48,72 @@ const ItemRenderer = (props) => {
     visibleItemsRefs
   } = ctx;
   const opened = dsId === openedItem;
-  const handleOnClick = useCallback((e) => {
-    if (onClick)
-      onClick();
+  const handleOnClick = useCallback(e => {
+    if (onClick) onClick(); // used by uncontrolled drilldowns
+
     onItemClick(item, e);
-    if (selectable)
-      setSelectedItem(item.dsId);
+    if (selectable) setSelectedItem(item.dsId);
   }, [onItemClick, item, setSelectedItem, selectable, onClick]);
   const handleFocus = useCallback(() => {
-    if (focuseable)
-      setFocusedItem(dsId);
+    if (focuseable) setFocusedItem(dsId);
   }, [dsId, setFocusedItem, focuseable]);
   const onKeyDown = useKeyboardNavigation({
     item,
     onClick: handleOnClick
   });
-  const cols = useMemo(() => expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"], [expandedForAnimation]);
+  const cols = useMemo(() => expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'], [expandedForAnimation]);
   const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);
+
   if (!expandedForAnimation && !CollapsedComponent) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledItemWrapper, {
-    shadowStyle: shadowStyle(opened, item.type),
-    "data-testid": "leftnav-item-wrapper"
-  }, /* @__PURE__ */ React2.createElement(StyledItem, {
-    ref: visibleItemsRefs.current[dsId],
-    pt: paddingTop,
-    pl: indent === void 0 ? "xxxs" : `${indent}px`,
-    minHeight,
-    shadowStyle: shadowStyle(opened, item.type),
-    alignItems: "flex-start",
-    cols,
-    onClick: !opened ? handleOnClick : () => null,
-    onKeyDown,
-    selectable,
-    selected: isSelected,
-    selectedParent: selectedParent === dsId,
-    opened,
-    onFocus: handleFocus,
-    "data-testid": "leftnav-item-container",
-    tabIndex: focuseable ? 0 : -1,
-    "aria-describedby": ariaDescribedBy,
-    "aria-expanded": ariaExpanded,
-    role: ariaRole,
-    "data-selected": isSelected,
-    "data-selectedparent": selectedParent === dsId,
-    "aria-label": ariaLabel,
-    "aria-hidden": !focuseable,
-    "aria-live": ariaLive
-  }, !expandedForAnimation ? /* @__PURE__ */ React2.createElement(Grid, {
-    "data-testid": "leftnav-leftcomponent",
-    justifyContent: "center"
-  }, /* @__PURE__ */ React2.createElement(CollapsedComponent, {
-    item,
-    ctx
-  })) : children), hasBorderBottom && /* @__PURE__ */ React2.createElement("div", {
-    style: {
-      marginLeft: opened ? "16px" : "0px",
-      marginRight: borderBottomMr,
-      height: "1px",
-      width: `calc(100% - ${borderBottomMr} - ${opened ? "16px" : "0px"})`,
-      backgroundColor: "#E0E3E8"
-    }
-  })), subitems);
-};
-export {
-  ItemRenderer
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledItemWrapper, {
+      shadowStyle: shadowStyle(opened, item.type),
+      "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(opened, item.type),
+      alignItems: "flex-start",
+      cols: cols,
+      onClick: !opened ? handleOnClick : () => null,
+      onKeyDown: onKeyDown,
+      selectable: selectable,
+      selected: isSelected,
+      selectedParent: selectedParent === dsId,
+      opened: opened,
+      onFocus: handleFocus,
+      "data-testid": "leftnav-item-container",
+      tabIndex: focuseable ? 0 : -1,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      role: ariaRole,
+      "data-selected": isSelected,
+      "data-selectedparent": selectedParent === dsId,
+      "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]
+  });
 };
-//# sourceMappingURL=index.js.map
+
+export { ItemRenderer };

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

@@ -1,61 +1,47 @@
-import * as React from "react";
-import Grid from "@elliemae/ds-grid";
-import styled from "styled-components";
-const borderOutside = (color, weight = 2) => `&:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: ${weight}px solid ${color};
-  pointer-events: none;
-}`;
-const StyledItemWrapper = styled(Grid)`
-  position: relative;
-  ${(props) => props.shadowStyle(props.theme)}
-`;
-const getItemBackground = ({ selectable, opened, selected, theme }) => {
-  if (!selectable)
-    return "white";
-  if (selected && !opened)
-    return theme.colors.brand[200];
-  return theme.colors.neutral["000"];
-};
-const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
-  if (!selectable)
-    return "white";
-  if (selected && !opened)
-    return theme.colors.brand[200];
-  return theme.colors.brand["200"];
-};
-const StyledItem = styled(Grid)`
-  cursor: ${(props) => props.selectable && !props.opened ? "pointer" : "auto"};
-  min-height: ${(props) => props.minHeight};
-
-  background: ${getItemBackground};
-
-  ${(props) => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : ""}
+import Grid from '@elliemae/ds-grid';
+import styled from 'styled-components';
 
-  :hover {
-    background: ${getItemHoverBackground};
-  }
+/* 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}");
+};
+const StyledItemWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-11wzgfh-0"
+})(["position:relative;", ""], props => props.shadowStyle(props.theme));
 
-  :active {
-    background: ${({ selectable, theme }) => selectable ? theme.colors.brand[200] : "white"};
-  }
+const getItemBackground = _ref => {
+  let {
+    selectable,
+    opened,
+    selected,
+    theme
+  } = _ref;
+  if (!selectable) return 'white';
+  if (selected && !opened) return theme.colors.brand[200];
+  return theme.colors.neutral['000'];
+};
 
-  ${(props) => props.shadowStyle(props.theme)};
+const getItemHoverBackground = _ref2 => {
+  let {
+    selectable,
+    opened,
+    selected,
+    theme
+  } = _ref2;
+  if (!selectable) return 'white';
+  if (selected && !opened) return theme.colors.brand[200];
+  return theme.colors.brand['200'];
+};
 
-  outline: none;
+const StyledItem = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-11wzgfh-1"
+})(["cursor:", ";min-height:", ";background:", ";", ":hover{background:", ";}:active{background:", ";}", ";outline:none;", ""], props => props.selectable && !props.opened ? 'pointer' : 'auto', props => props.minHeight, getItemBackground, props => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '', getItemHoverBackground, _ref3 => {
+  let {
+    selectable,
+    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.tabIndex !== -1 ? `:focus {
-    ${borderOutside(props.theme.colors.brand[700])}
-        }` : ""}
-`;
-export {
-  StyledItem,
-  StyledItemWrapper,
-  borderOutside
-};
-//# sourceMappingURL=styled.js.map
+export { StyledItem, StyledItemWrapper, borderOutside };

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

@@ -1,40 +1,49 @@
-import * as React from "react";
-import { useMemo } from "react";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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 itemDefaultProps = {
-  label: "",
-  labelOverflow: "truncate",
+  label: '',
+  labelOverflow: 'truncate',
   selectable: true,
   focuseable: true,
   openable: false,
   closable: false,
-  ariaLabel: "",
-  ariaRole: "menuitem",
-  ariaLive: "off",
-  ariaExpanded: void 0,
-  ariaDescribedBy: void 0
+  ariaLabel: '',
+  ariaRole: 'menuitem',
+  ariaLive: 'off',
+  ariaExpanded: undefined,
+  ariaDescribedBy: undefined
 };
-const itemWithoutShadows = ["ds-left-nav-item-header", "ds-left-nav-item-link", "ds-left-nav-item-submenu"];
-const usePropsWithDefaults = (props) => {
+const itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu']; // Make use Item props with defaults
+
+const usePropsWithDefaults = props => {
   const propsWithDefault = useMemo(() => {
-    const itemWithDefaults = {
-      CollapsedComponent: () => null,
-      ...props.item,
-      itemOpts: { ...itemDefaultProps, ...props.item.itemOpts }
-    };
-    return {
-      minHeight: "48px",
-      paddingTop: "12px",
+    const itemWithDefaults = _objectSpread(_objectSpread({
+      CollapsedComponent: () => null
+    }, props.item), {}, {
+      itemOpts: _objectSpread(_objectSpread({}, itemDefaultProps), props.item.itemOpts)
+    });
+
+    return _objectSpread(_objectSpread({
+      minHeight: '48px',
+      paddingTop: '12px',
       subitems: [],
-      shadowStyle: (opened, type) => (theme) => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? "inset 4px 0 0 0 #52A6EC" : "inset 4px 0 0 0 white"}`,
+      shadowStyle: (opened, type) => theme => "box-shadow: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
       hasBorderBottom: false,
-      borderBottomMr: "0px",
-      ...props,
+      borderBottomMr: '0px'
+    }, props), {}, {
       item: itemWithDefaults
-    };
+    });
   }, [props]);
   return propsWithDefault;
 };
-export {
-  usePropsWithDefaults
-};
-//# sourceMappingURL=usePropsWithDefaults.js.map
+
+export { usePropsWithDefaults };