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

package/cjs/parts/OutOfTheBoxMapItem.js

@@ -1,55 +1,52 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var OutOfTheBoxMapItem_exports = {};
-__export(OutOfTheBoxMapItem_exports, {
-  OutOfTheBoxMapItem: () => OutOfTheBoxMapItem
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_outOfTheBox = __toESM(require("../outOfTheBox"));
-var import_LeftNavigationContext = __toESM(require("../LeftNavigationContext"));
-const OutOfTheBoxMapItem = (props) => {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var index = require('../outOfTheBox/index.js');
+var LeftNavigationContext = require('../LeftNavigationContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(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__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 OutOfTheBoxMapItem = props => {
   const {
     item,
-    item: { type, Component }
+    item: {
+      type,
+      Component
+    }
   } = props;
-  const ctx = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
-  if (typeof type === "string" && !!import_outOfTheBox.outOfTheBoxComponents[type]) {
-    const OutOfTheBoxComponent = import_outOfTheBox.outOfTheBoxComponents[type];
-    return /* @__PURE__ */ import_react.default.createElement(OutOfTheBoxComponent, {
-      item: { itemOpts: {}, ...item },
-      ctx
+  const ctx = React__default["default"].useContext(LeftNavigationContext.LeftNavContext);
+
+  if (typeof type === 'string' && !!index.outOfTheBoxComponents[type]) {
+    const OutOfTheBoxComponent = index.outOfTheBoxComponents[type];
+    return /*#__PURE__*/_jsx__default["default"](OutOfTheBoxComponent, {
+      item: _objectSpread({
+        itemOpts: {}
+      }, item),
+      ctx: ctx
     });
-  }
-  return /* @__PURE__ */ import_react.default.createElement(Component, {
-    item,
-    ctx
+  } // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...
+
+
+  return /*#__PURE__*/_jsx__default["default"](Component, {
+    item: item,
+    ctx: ctx
   });
 };
-module.exports = __toCommonJS(OutOfTheBoxMapItem_exports);
-//# sourceMappingURL=OutOfTheBoxMapItem.js.map
+
+exports.OutOfTheBoxMapItem = OutOfTheBoxMapItem;

package/cjs/prop-types.js

@@ -1,66 +1,47 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var prop_types_exports = {};
-__export(prop_types_exports, {
-  LeftNavItemOptionsSchema: () => LeftNavItemOptionsSchema,
-  LeftNavItemPropsSchema: () => LeftNavItemPropsSchema,
-  leftNavItemProps: () => leftNavItemProps,
-  leftNavigationProps: () => leftNavigationProps
-});
-var React = __toESM(require("react"));
-var import_react_desc = __toESM(require("react-desc"));
-var import_outOfTheBox = __toESM(require("./outOfTheBox"));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var index = require('./outOfTheBox/index.js');
+
 const leftNavItemProps = {
-  type: import_react_desc.PropTypes.oneOf(import_outOfTheBox.outOfTheBoxTypes).description("out of the box types"),
-  dsId: import_react_desc.PropTypes.string.description("unique identifier for the left nav item"),
-  Component: import_react_desc.PropTypes.func.description("A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box"),
-  CollapsedComponent: import_react_desc.PropTypes.func.description("A component which is renderer when the left-nav is collapsed"),
-  itemOpts: import_react_desc.PropTypes.object.description("Item options")
+  type: reactDesc.PropTypes.oneOf(index.outOfTheBoxTypes).description('out of the box types'),
+  dsId: reactDesc.PropTypes.string.description('unique identifier for the left nav item'),
+  Component: reactDesc.PropTypes.func.description("A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box"),
+  CollapsedComponent: reactDesc.PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),
+  itemOpts: reactDesc.PropTypes.object.description('Item options')
 };
 const leftNavigationProps = {
-  containerProps: import_react_desc.PropTypes.shape({ expandedWidth: import_react_desc.PropTypes.string }).description("Set of Properties attached to the main container").defaultValue({ expandedWidth: "240px" }),
-  expanded: import_react_desc.PropTypes.bool.description("Whether to show the left navigation expanded or collapsed").defaultValue(false),
-  loading: import_react_desc.PropTypes.bool.description("Whether the left-nav is loading").defaultValue(false),
-  tabIndex: import_react_desc.PropTypes.number.description("Tab index").defaultValue(0),
-  openedItem: import_react_desc.PropTypes.string.description("The id of the left navigation item you want to be opened").defaultValue(null),
-  footerLabel: import_react_desc.PropTypes.string.description("The label to show in the footer item"),
-  onFooterExpand: import_react_desc.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
-  onFooterClose: import_react_desc.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
-  onSelectedChange: import_react_desc.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
-  onFocusChange: import_react_desc.PropTypes.func.description("A callback which triggers when the focused item changes").defaultValue(() => null),
-  items: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.object).description("The array of items you want to render inside the left nav").defaultValue([]),
-  disableDefaultSelection: import_react_desc.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false)
+  containerProps: reactDesc.PropTypes.shape({
+    expandedWidth: reactDesc.PropTypes.string
+  }).description('Set of Properties attached to the main container').defaultValue({
+    expandedWidth: '240px'
+  }),
+  expanded: reactDesc.PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),
+  loading: reactDesc.PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),
+  tabIndex: reactDesc.PropTypes.number.description('Tab index').defaultValue(0),
+  openedItem: reactDesc.PropTypes.string.description('The id of the left navigation item you want to be opened').defaultValue(null),
+  footerLabel: reactDesc.PropTypes.string.description('The label to show in the footer item'),
+  onFooterExpand: reactDesc.PropTypes.func.description('The function to call when the left-nav is opened via the footer'),
+  onFooterClose: reactDesc.PropTypes.func.description('The function to call when the left-nav is closed via the footer'),
+  onSelectedChange: reactDesc.PropTypes.func.description('A callback which triggers when the selected item changes').defaultValue(() => null),
+  onFocusChange: reactDesc.PropTypes.func.description('A callback which triggers when the focused item changes').defaultValue(() => null),
+  items: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([]),
+  disableDefaultSelection: reactDesc.PropTypes.bool.description('Whether you do not want to automatically select the first body item').defaultValue(false)
 };
+
 const LeftNavItemProps = () => null;
-const LeftNavItemPropsSchema = (0, import_react_desc.describe)(LeftNavItemProps);
+
+const LeftNavItemPropsSchema = reactDesc.describe(LeftNavItemProps);
 LeftNavItemPropsSchema.propTypes = leftNavItemProps;
+
 const LeftNavItemOptions = () => null;
-const LeftNavItemOptionsSchema = (0, import_react_desc.describe)(LeftNavItemOptions);
+
+const LeftNavItemOptionsSchema = reactDesc.describe(LeftNavItemOptions);
 LeftNavItemOptionsSchema.propTypes = leftNavItemProps;
-module.exports = __toCommonJS(prop_types_exports);
-//# sourceMappingURL=prop-types.js.map
+
+exports.LeftNavItemOptionsSchema = LeftNavItemOptionsSchema;
+exports.LeftNavItemPropsSchema = LeftNavItemPropsSchema;
+exports.leftNavItemProps = leftNavItemProps;
+exports.leftNavigationProps = leftNavigationProps;

package/esm/LeftNavigation.js

@@ -1,22 +1,20 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { leftNavigationProps } from "./prop-types";
-import LeftNavigationContext, { defaultProps } from "./LeftNavigationContext";
-import { useLeftNavConfig } from "./configs/useLeftNavConfig";
-import LeftNavContent from "./parts/LeftNavContent";
-const LeftNavigation = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { leftNavigationProps } from './prop-types.js';
+import { LeftNavContext, defaultProps } from './LeftNavigationContext.js';
+import { useLeftNavConfig } from './configs/useLeftNavConfig.js';
+import LeftNavContent from './parts/LeftNavContent/index.js';
+
+var _LeftNavContent;
+const LeftNavigation = props => {
   const leftNavConfig = useLeftNavConfig(props);
-  return /* @__PURE__ */ React2.createElement(LeftNavigationContext.Provider, {
+  return /*#__PURE__*/_jsx(LeftNavContext.Provider, {
     value: leftNavConfig
-  }, /* @__PURE__ */ React2.createElement(LeftNavContent, null));
+  }, void 0, _LeftNavContent || (_LeftNavContent = /*#__PURE__*/_jsx(LeftNavContent, {})));
 };
-LeftNavigation.propTypes = leftNavigationProps;
 LeftNavigation.defaultProps = defaultProps;
-const LeftNavigationWithSchema = describe(LeftNavigation).description("Left Navigation");
+const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');
 LeftNavigationWithSchema.propTypes = leftNavigationProps;
-export {
-  LeftNavigation,
-  LeftNavigationWithSchema
-};
-//# sourceMappingURL=LeftNavigation.js.map
+
+export { LeftNavigation, LeftNavigationWithSchema };

package/esm/LeftNavigationContext.js

@@ -1,18 +1,18 @@
-import * as React from "react";
-import { createContext } from "react";
+import { createContext } from 'react';
+
 const defaultProps = {
-  expandedWidth: "240px",
+  expandedWidth: '240px',
   tabIndex: 0,
   loading: false,
   expanded: false,
   openedItem: null,
-  footerLabel: "",
+  footerLabel: '',
   onSelectedChange: () => null,
   onFocusChange: () => null,
   onFooterExpand: () => null,
   onFooterClose: () => null,
   items: [],
-  labelOverflow: "wrap",
+  labelOverflow: 'wrap',
   onItemClick: () => null
 };
 const defaultContext = {
@@ -25,14 +25,10 @@ const defaultContext = {
   openedDrilldowns: [],
   setOpenedDrilldowns: () => null,
   visibleItems: [],
-  visibleItemsRefs: { current: {} }
+  visibleItemsRefs: {
+    current: {}
+  }
 };
-const LeftNavContext = createContext(defaultContext);
-var LeftNavigationContext_default = LeftNavContext;
-export {
-  LeftNavContext,
-  LeftNavigationContext_default as default,
-  defaultContext,
-  defaultProps
-};
-//# sourceMappingURL=LeftNavigationContext.js.map
+const LeftNavContext = /*#__PURE__*/createContext(defaultContext);
+
+export { LeftNavContext, LeftNavContext as default, defaultContext, defaultProps };

package/esm/common/getItemBackgroundStyle.js

@@ -1,22 +1,8 @@
-import * as React from "react";
-const commonItemBackgroundStyle = (color, hoverColor, activeColor) => `
+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");
 
-  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]);
-  return commonItemBackgroundStyle(props.theme.colors.neutral["000"], props.theme.colors.neutral["080"], props.theme.colors.brand[200]);
+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]);
+  return commonItemBackgroundStyle(props.theme.colors.neutral['000'], props.theme.colors.neutral['080'], props.theme.colors.brand[200]);
 };
-export {
-  getItemBackgroundStyle
-};
-//# sourceMappingURL=getItemBackgroundStyle.js.map
+
+export { getItemBackgroundStyle };

package/esm/common/getLeftBorderStyle.js

@@ -1,25 +1,8 @@
-import * as React from "react";
-const commonLeftBorderStyle = (color, hoverColor, activeColor) => `
+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");
 
-  -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]);
-  return commonLeftBorderStyle(props.theme.colors.neutral["000"], props.theme.colors.brand[300], props.theme.colors.brand[400]);
+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]);
+  return commonLeftBorderStyle(props.theme.colors.neutral['000'], props.theme.colors.brand[300], props.theme.colors.brand[400]);
 };
-export {
-  getLeftBorderStyle
-};
-//# sourceMappingURL=getLeftBorderStyle.js.map
+
+export { getLeftBorderStyle };

package/esm/common/getScrollbarStyle.js

@@ -1,29 +1,3 @@
-import * as React from "react";
-const getScrolbarStyle = () => `
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-  ::-webkit-scrollbar-thumb {
-    height: 6px;
-    border: 4px solid rgba(0, 0, 0, 0);
+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";
 
-    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
-};
-//# sourceMappingURL=getScrollbarStyle.js.map
+export { getScrolbarStyle };

package/esm/common/index.js

@@ -1,5 +1,3 @@
-import * as React from "react";
-export * from "./getItemBackgroundStyle";
-export * from "./getLeftBorderStyle";
-export * from "./getScrollbarStyle";
-//# sourceMappingURL=index.js.map
+export { getItemBackgroundStyle } from './getItemBackgroundStyle.js';
+export { getLeftBorderStyle } from './getLeftBorderStyle.js';
+export { getScrolbarStyle } from './getScrollbarStyle.js';

package/esm/configs/index.js

@@ -1,9 +1,2 @@
-import * as React from "react";
-import { useLeftNavConfig } from "./useLeftNavConfig";
-import { useLeftNavConfig as useLeftNavConfig2 } from "./useLeftNavConfig";
-var configs_default = useLeftNavConfig;
-export {
-  configs_default as default,
-  useLeftNavConfig2 as useLeftNavConfig
-};
-//# sourceMappingURL=index.js.map
+import { useLeftNavConfig } from './useLeftNavConfig.js';
+export { useLeftNavConfig as default, useLeftNavConfig } from './useLeftNavConfig.js';

package/esm/configs/useLeftNavConfig.js

@@ -1,73 +1,93 @@
-import * as React from "react";
-import React2 from "react";
-import useLeftNavItems from "./useLeftNavItems";
-import { useLeftNavSmoothExpand } from "./useLeftNavSmoothExpand";
-import { useSelectFirstBodyItem } from "../hooks/useSelectFirstBodyItem";
-const useLeftNavConfig = (props) => {
-  const { expanded, openedItem, onSelectedChange, onFocusChange, items } = props;
-  const [selectedItem, setSelectedItem] = React2.useState(null);
-  const [selectedSubitem, setSelectedSubitem] = React2.useState(null);
-  const [selectedParent, setSelectedParent] = React2.useState(null);
-  const [focusedItem, setFocusedItem] = React2.useState(null);
-  const [openedDrilldowns, setOpenedDrilldowns] = React2.useState([]);
-  const [expandedForAnimation, setExpandedForAnimation] = React2.useState(expanded);
-  const timeoutRef = React2.useRef(null);
-  const smoothExpandOpts = React2.useMemo(() => ({
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React from 'react';
+import { useLeftNavItems } from './useLeftNavItems.js';
+import { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';
+import { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';
+
+const useLeftNavConfig = props => {
+  const {
+    expanded,
+    openedItem,
+    onSelectedChange,
+    onFocusChange,
+    items
+  } = props; // -----------------------------------------------------------------------------
+  // ************************** ------------ **************************
+  // *                         INTERNAL STATE                         *
+  // ************************** ------------ **************************
+  // Selection related
+
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [selectedParent, setSelectedParent] = React.useState(null); // Focus related
+
+  const [focusedItem, setFocusedItem] = React.useState(null); // Opened uncontrolled drilldowns
+
+  const [openedDrilldowns, setOpenedDrilldowns] = React.useState([]); // -----------------------------------------------------------------------------
+  // ************************** ------------ **************************
+  // *                        EXPAND ANIMATION                        *
+  // ************************** ------------ **************************
+
+  const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);
+  const timeoutRef = React.useRef(null);
+  const smoothExpandOpts = React.useMemo(() => ({
     expandedForAnimation,
     timeoutRef,
     setExpandedForAnimation
   }), [expandedForAnimation, timeoutRef, setExpandedForAnimation]);
-  useLeftNavSmoothExpand(props, smoothExpandOpts);
-  React2.useEffect(() => {
+  useLeftNavSmoothExpand(props, smoothExpandOpts); // -----------------------------------------------------------------------------
+  // ************************** ------------ **************************
+  // *                          SIDE EFFECTS                          *
+  // ************************** ------------ **************************
+
+  React.useEffect(() => {
     onSelectedChange(selectedItem);
   }, [selectedItem, onSelectedChange]);
-  React2.useEffect(() => {
-    if (openedItem !== null)
-      setSelectedParent(openedItem);
+  React.useEffect(() => {
+    if (props.actionRef && props.actionRef.current) {
+      props.actionRef.current.setFocusedItem = setFocusedItem;
+    }
+  }, [props.actionRef]);
+  React.useEffect(() => {
+    if (openedItem !== null) setSelectedParent(openedItem);
   }, [openedItem]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     onFocusChange(focusedItem);
   }, [focusedItem, onFocusChange]);
-  useSelectFirstBodyItem(items, openedItem, props.selectedItem !== void 0 ? props.selectedItem : selectedItem, setSelectedItem, props.disableDefaultSelection);
-  const leftNavItemsProps = React2.useMemo(() => ({
+  useSelectFirstBodyItem(items, openedItem, props.selectedItem !== undefined ? props.selectedItem : selectedItem, setSelectedItem, props.disableDefaultSelection); // -----------------------------------------------------------------------------
+  // ************************** ------------ **************************
+  // *                        ITEMS MANAGEMENT                        *
+  // ************************** ------------ **************************
+
+  const leftNavItemsProps = React.useMemo(() => ({
     headerItem: props.HeaderComponent,
     bodyHeaderItem: props.BodyHeaderComponent,
     items: props.items,
     openedDrilldowns
-  }), [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns]);
-  const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);
-  const finalConfig = React2.useMemo(() => ({
-    leftNavProps: props,
-    expandedForAnimation,
-    selectedItem: props.selectedItem !== void 0 ? props.selectedItem : selectedItem,
-    setSelectedItem,
-    selectedParent: props.selectedParent !== void 0 ? props.selectedParent : selectedParent,
-    setSelectedParent,
-    focusedItem,
-    setFocusedItem,
-    openedDrilldowns,
-    setOpenedDrilldowns,
+  }), [props.HeaderComponent, props.BodyHeaderComponent, props.items, openedDrilldowns]); // We need to know the current visible items since we have drilldowns
+
+  const {
     visibleItems,
     visibleItemsRefs
-  }), [
-    props,
+  } = useLeftNavItems(leftNavItemsProps); // -----------------------------------------------------------------------------
+  // ************************** ------------ **************************
+  // *                         LEFTNAV CONFIG                         *
+  // ************************** ------------ **************************
+
+  const finalConfig = React.useMemo(() => ({
+    leftNavProps: props,
     expandedForAnimation,
-    selectedItem,
+    selectedItem: props.selectedItem !== undefined ? props.selectedItem : selectedItem,
     setSelectedItem,
+    selectedParent: props.selectedParent !== undefined ? props.selectedParent : selectedParent,
     setSelectedParent,
-    selectedParent,
     focusedItem,
     setFocusedItem,
     openedDrilldowns,
     setOpenedDrilldowns,
     visibleItems,
     visibleItemsRefs
-  ]);
+  }), [props, expandedForAnimation, selectedItem, setSelectedItem, setSelectedParent, selectedParent, focusedItem, setFocusedItem, openedDrilldowns, setOpenedDrilldowns, visibleItems, visibleItemsRefs]);
   return finalConfig;
 };
-var useLeftNavConfig_default = useLeftNavConfig;
-export {
-  useLeftNavConfig_default as default,
-  useLeftNavConfig
-};
-//# sourceMappingURL=useLeftNavConfig.js.map
+
+export { useLeftNavConfig as default, useLeftNavConfig };