@elliemae/ds-left-navigation 2.3.0-alpha.9 → 2.3.0-next.0

package/esm/configs/useLeftNavSmoothExpand.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+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) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
+    } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [expanded]);
+  React.useEffect(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, [timeoutRef]);
+};
+
+export { useLeftNavSmoothExpand as default, useLeftNavSmoothExpand };

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

@@ -0,0 +1,19 @@
+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));
+
+export { ChevronItem, ChevronItem as default };

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

@@ -0,0 +1,27 @@
+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';
+
+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__*/jsx(StyledComponent, _objectSpread({
+    color: ['brand-primary', 800],
+    tabIndex: 0
+  }, props));
+};
+
+export { Icon };

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

@@ -0,0 +1,119 @@
+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
+      },
+      CollapsedComponent
+    },
+    subitems,
+    minHeight,
+    paddingTop,
+    onClick,
+    shadowStyle,
+    hasBorderBottom,
+    borderBottomMr,
+    children
+  } = propsWithDefault;
+  const ctx = useContext(LeftNavContext);
+  const {
+    leftNavProps: {
+      onItemClick,
+      openedItem
+    },
+    expandedForAnimation,
+    selectedParent,
+    selectedItem,
+    setSelectedItem,
+    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]);
+  const handleFocus = useCallback(() => {
+    if (focuseable) setFocusedItem(dsId);
+  }, [dsId, setFocusedItem, focuseable]);
+  const onKeyDown = useKeyboardNavigation({
+    item,
+    onClick: handleOnClick
+  });
+  const cols = useMemo(() => expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'], [expandedForAnimation]);
+  const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);
+
+  if (!expandedForAnimation && !CollapsedComponent) {
+    return null;
+  }
+
+  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]
+  });
+};
+
+export { ItemRenderer };

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

@@ -0,0 +1,47 @@
+import Grid from '@elliemae/ds-grid';
+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}");
+};
+const StyledItemWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-11wzgfh-0"
+})(["position:relative;", ""], props => props.shadowStyle(props.theme));
+
+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'];
+};
+
+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'];
+};
+
+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        }") : '');
+
+export { StyledItem, StyledItemWrapper, borderOutside };

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

@@ -0,0 +1,49 @@
+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',
+  selectable: true,
+  focuseable: true,
+  openable: false,
+  closable: false,
+  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']; // Make use Item props with defaults
+
+const usePropsWithDefaults = props => {
+  const propsWithDefault = useMemo(() => {
+    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: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
+      hasBorderBottom: false,
+      borderBottomMr: '0px'
+    }, props), {}, {
+      item: itemWithDefaults
+    });
+  }, [props]);
+  return propsWithDefault;
+};
+
+export { usePropsWithDefaults };

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

@@ -0,0 +1,51 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Notifications as Notifications$1, ExceptionsSmallFill, AlertsSmallFill, MessagesSmallFill } from '@elliemae/ds-icons';
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledIcon = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-hasbsd-0"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+const Notifications = _ref => {
+  let {
+    exceptions = false,
+    alerts = false,
+    messages = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledIcon, {}, void 0, /*#__PURE__*/_jsx(Notifications$1, {
+    size: "m",
+    color: ['brand-primary', 800],
+    "data-testid": "left-nav-notifications-icon"
+  }), (exceptions || alerts || messages) && /*#__PURE__*/_jsx(Grid, {
+    cols: ['1fr', '1fr', '1fr'],
+    gutter: "xxxs",
+    mt: "2px"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-exceptions-icon"
+  }, void 0, exceptions && /*#__PURE__*/_jsx(ExceptionsSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['warning', 900]
+  })), /*#__PURE__*/_jsx(Grid, {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-alerts-icon"
+  }, void 0, alerts && /*#__PURE__*/_jsx(AlertsSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['danger', 900]
+  })), /*#__PURE__*/_jsx(Grid, {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-messages-icon"
+  }, void 0, messages && /*#__PURE__*/_jsx(MessagesSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['success', 900]
+  }))));
+};
+
+export { Notifications, Notifications as default };

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

@@ -0,0 +1,23 @@
+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 { OpenWindow as OpenWindow$1 } 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 StyledOpenWindow = /*#__PURE__*/styled(OpenWindow$1).withConfig({
+  componentId: "sc-g53ios-0"
+})(["cursor:pointer;:focus{outline:1px solid ", ";}"], props => props.theme.colors.brand[800]);
+const OpenWindow = props => /*#__PURE__*/jsx(StyledOpenWindow, _objectSpread({
+  size: "s",
+  color: ['brand-primary', 800]
+}, props));
+
+export { OpenWindow, OpenWindow as default };

package/esm/exported-related/constants.js

@@ -0,0 +1,21 @@
+const LABEL_OVERFLOW = {
+  WRAP: 'wrap',
+  WRAP_ALL: 'wrapAll',
+  TRUNCATE: 'truncate'
+};
+const ITEM_TYPES = {
+  LEFT_NAV_ITEM_HEADER: 'ds-left-nav-item-header',
+  LEFT_NAV_ITEM_LINK: 'ds-left-nav-item-link',
+  LEFT_NAV_ITEM_SUBMENU: 'ds-left-nav-item-submenu',
+  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: 'ds-left-nav-item-controlled-drilldown',
+  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: 'ds-left-nav-item-uncontrolled-drilldown',
+  LEFT_NAV_ITEM_SECTION: 'ds-left-nav-item-section',
+  LEFT_NAV_ITEM_SEPARATOR: 'ds-left-nav-item-separator',
+  LEFT_NAV_ITEM_TEXT_LABEL: 'ds-left-nav-item-text-label',
+  LEFT_NAV_ITEM_WITH_DATE: 'ds-left-nav-item-with-date'
+};
+const FOOTER_DS_ID = 'ds-left-nav-__internal__-footer';
+const FOOTER_MENU_CLOSE_DS_ID = 'ds-left-nav-__internal__-footer-menu-close';
+const CHEVRON_BACK_DS_ID = 'ds-left-nav-__internal__-chevron-back';
+
+export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW };

package/esm/exported-related/index.js

@@ -0,0 +1,6 @@
+export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW } from './constants.js';
+export { ItemRenderer } from './ItemRenderer/index.js';
+export { ChevronItem } from './ChevronItem/index.js';
+export { Notifications } from './Notifications/index.js';
+export { OpenWindow } from './OpenWindowItem/index.js';
+export { Icon } from './Icon/index.js';

package/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export { useOpenableOnClickHandler } from './useOpenableOnClickHandler.js';
+export { useExpandableOnClickHandler } from './useExpandableOnClickHandler.js';
+export { useKeyboardNavigation } from './useKeyboardNavigation.js';

package/esm/hooks/useExpandableOnClickHandler.js

@@ -0,0 +1,31 @@
+import { useContext, useCallback } from 'react';
+import { LeftNavContext } from '../LeftNavigationContext.js';
+
+const useExpandableOnClickHandler = _ref => {
+  let {
+    id,
+    onExpand,
+    onOpen,
+    selectable = true
+  } = _ref;
+  const {
+    leftNavProps: {
+      expanded
+    },
+    setSelectedItem
+  } = useContext(LeftNavContext);
+  const handleOnExpand = useCallback(e => {
+    onExpand(e);
+    if (selectable) setSelectedItem(id);
+  }, [id, onExpand, setSelectedItem, selectable]);
+  const handleOnOpen = useCallback(e => {
+    onOpen(e);
+    if (selectable) setSelectedItem(id);
+  }, [id, onOpen, setSelectedItem, selectable]);
+  const handleOnClick = useCallback(e => {
+    if (!expanded) handleOnExpand(e);else handleOnOpen(e);
+  }, [expanded, handleOnExpand, handleOnOpen]);
+  return handleOnClick;
+};
+
+export { useExpandableOnClickHandler };

package/{dist/esm → esm}/hooks/useKeyboardNavigation.js

@@ -1,7 +1,8 @@
-import * as React from "react";
-import { useCallback, useMemo, useLayoutEffect, useContext } from "react";
-import { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../exported-related/constants";
-import LeftNavContext from "../LeftNavigationContext";
+import { useContext, useMemo, useCallback, useLayoutEffect } from 'react';
+import { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';
+import { LeftNavContext } from '../LeftNavigationContext.js';
+
+/* eslint-disable max-statements */
 const KEY_CODES = {
   TAB: 9,
   ENTER: 13,
@@ -13,29 +14,52 @@ const KEY_CODES = {
   END: 35,
   HOME: 36
 };
+
 const nextIndex = (index, length) => (index + 1) % length;
+
 const prevIndex = (index, length) => (index - 1 + length) % length;
-const useKeyboardNavigation = ({ item, onClick }) => {
+
+const useKeyboardNavigation = _ref => {
+  let {
+    item,
+    onClick
+  } = _ref;
   const {
     dsId,
-    itemOpts: { selectable, openable, closable }
+    itemOpts: {
+      selectable,
+      openable,
+      closable
+    }
   } = item;
-  const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);
-  const currentIndex = useMemo(() => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId), [dsId, visibleItems]);
-  const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);
-  const focusAndSelect = useCallback((nextDsId) => {
+  const {
+    visibleItems,
+    visibleItemsRefs
+  } = useContext(LeftNavContext);
+  const currentIndex = useMemo(() => visibleItems.findIndex(visibleItemDsId => visibleItemDsId === dsId), [dsId, visibleItems]);
+  const {
+    setFocusedItem,
+    focusedItem,
+    setSelectedItem
+  } = useContext(LeftNavContext);
+  const focusAndSelect = useCallback(nextDsId => {
     setFocusedItem(nextDsId);
     setSelectedItem(nextDsId);
   }, [setFocusedItem, setSelectedItem]);
   useLayoutEffect(() => {
-    if (dsId === focusedItem)
-      visibleItemsRefs.current[dsId]?.current?.focus();
+    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();
   }, [dsId, focusedItem, visibleItemsRefs]);
-  const onKeyDown = useCallback((e) => {
-    const { keyCode } = e;
+  const onKeyDown = useCallback(e => {
+    const {
+      keyCode
+    } = e; // Prevent default behaviour when not tab
+
     if (keyCode !== KEY_CODES.TAB) {
       e.preventDefault();
     }
+
     if (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE) {
       if (selectable) {
         onClick(e);
@@ -48,42 +72,35 @@ const useKeyboardNavigation = ({ item, onClick }) => {
         setFocusedItem(dsId);
       }
     }
+
     if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
       onClick(e);
     }
+
     if (closable && keyCode === KEY_CODES.LEFT_ARROW) {
       onClick(e);
       setFocusedItem(dsId);
     }
+
     if (keyCode === KEY_CODES.DOWN_ARROW) {
       const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];
       setFocusedItem(nextDsId);
     }
+
     if (keyCode === KEY_CODES.UP_ARROW) {
       const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];
       setFocusedItem(prevDsId);
     }
+
     if (keyCode === KEY_CODES.HOME) {
       setFocusedItem(visibleItems[0]);
     }
+
     if (keyCode === KEY_CODES.END) {
       setFocusedItem(visibleItems[visibleItems.length - 1]);
     }
-  }, [
-    openable,
-    closable,
-    selectable,
-    focusedItem,
-    onClick,
-    focusAndSelect,
-    dsId,
-    setFocusedItem,
-    visibleItems,
-    currentIndex
-  ]);
+  }, [openable, closable, selectable, focusedItem, onClick, focusAndSelect, dsId, setFocusedItem, visibleItems, currentIndex]);
   return onKeyDown;
 };
-export {
-  useKeyboardNavigation
-};
-//# sourceMappingURL=useKeyboardNavigation.js.map
+
+export { useKeyboardNavigation };

package/esm/hooks/useOpenableOnClickHandler.js

@@ -0,0 +1,36 @@
+import { useContext, useCallback } from 'react';
+import { LeftNavContext } from '../LeftNavigationContext.js';
+
+const useOpenableOnClickHandler = _ref => {
+  let {
+    id,
+    opened,
+    onExpand,
+    onOpen,
+    onClose
+  } = _ref;
+  const {
+    leftNavProps: {
+      expanded
+    },
+    setSelectedItem
+  } = useContext(LeftNavContext);
+  const handleOnExpand = useCallback(e => {
+    onExpand(e);
+    setSelectedItem(id);
+  }, [id, onExpand, setSelectedItem]);
+  const handleOnOpen = useCallback(e => {
+    onOpen(e);
+    setSelectedItem(id);
+  }, [id, onOpen, setSelectedItem]);
+  const handleOnClose = useCallback(e => {
+    onClose(e);
+    setSelectedItem(id);
+  }, [id, onClose, setSelectedItem]);
+  const handleOnClick = useCallback(e => {
+    if (!expanded) handleOnExpand(e);else if (!opened) handleOnOpen(e);else handleOnClose(e);
+  }, [expanded, opened, handleOnExpand, handleOnOpen, handleOnClose]);
+  return handleOnClick;
+};
+
+export { useOpenableOnClickHandler };

package/esm/hooks/useSelectFirstBodyItem.js

@@ -0,0 +1,35 @@
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { useEffect } from 'react';
+import { ITEM_TYPES } from '../exported-related/constants.js';
+
+const {
+  LEFT_NAV_ITEM_SEPARATOR,
+  LEFT_NAV_ITEM_SECTION
+} = ITEM_TYPES;
+
+const isSelectableOutOfTheBox = elem => typeof elem.type === 'string' && elem.type !== LEFT_NAV_ITEM_SEPARATOR && elem.type !== LEFT_NAV_ITEM_SECTION;
+
+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 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 : '');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [openedItem, setSelectedItem, disableDefaultSelection]);
+};
+
+export { useSelectFirstBodyItem };

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -0,0 +1,8 @@
+export { LeftNavItemOptionsSchema, LeftNavItemPropsSchema } from './prop-types.js';
+export { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation.js';
+export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW } from './exported-related/constants.js';
+export { ItemRenderer } from './exported-related/ItemRenderer/index.js';
+export { ChevronItem } from './exported-related/ChevronItem/index.js';
+export { Notifications } from './exported-related/Notifications/index.js';
+export { OpenWindow } from './exported-related/OpenWindowItem/index.js';
+export { Icon } from './exported-related/Icon/index.js';