@elliemae/ds-left-navigation 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/configs/useLeftNavItems.js

@@ -1,82 +1,80 @@
-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 useLeftNavItems_exports = {};
-__export(useLeftNavItems_exports, {
-  default: () => useLeftNavItems_default,
-  useLeftNavItems: () => useLeftNavItems
-});
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_exported_related = require("../exported-related");
-var import_constants = require("../exported-related/constants");
-const notFocuseableItems = [import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_SECTION];
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var constants = require('../exported-related/constants.js');
+require('@babel/runtime/helpers/jsx');
+require('@elliemae/ds-grid');
+require('styled-components');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('@babel/runtime/helpers/defineProperty');
+require('react/jsx-runtime');
+require('@elliemae/ds-icons');
+
+const notFocuseableItems = [constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, constants.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 === import_exported_related.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
-        walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
-      if (item.type === import_exported_related.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 === constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems((_item$itemOpts$items = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 ? _item$itemOpts$items : [], openedDrilldowns, callback); // If it's an opened controlled drilldown
+
+      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_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 items = (0, import_react.useMemo)(() => {
+
+const useLeftNavItems = props => {
+  const {
+    headerItem,
+    bodyHeaderItem,
+    items: bodyItems,
+    openedDrilldowns
+  } = props; // Place the header and body header items into the array of items
+
+  const items = React.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 = (0, import_react.useRef)({});
-  const visibleItems = (0, import_react.useMemo)(() => {
+  const visibleItemsRefs = React.useRef({});
+  const visibleItems = React.useMemo(() => {
     const visibleItemsArray = [];
-    walkItems(items, openedDrilldowns, (dsId) => {
+    walkItems(items, openedDrilldowns, dsId => {
       visibleItemsArray.push(dsId);
     });
-    visibleItemsArray.push(import_constants.FOOTER_DS_ID);
+    visibleItemsArray.push(constants.FOOTER_DS_ID);
     return visibleItemsArray;
   }, [items, openedDrilldowns]);
-  visibleItems.forEach((dsId) => {
-    if (!(dsId in visibleItemsRefs.current))
-      visibleItemsRefs.current[dsId] = (0, import_react.createRef)();
+  visibleItems.forEach(dsId => {
+    if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = /*#__PURE__*/React.createRef();
   });
-  return { visibleItems, visibleItemsRefs };
+  return {
+    visibleItems,
+    visibleItemsRefs
+  };
 };
-var useLeftNavItems_default = useLeftNavItems;
-module.exports = __toCommonJS(useLeftNavItems_exports);
-//# sourceMappingURL=useLeftNavItems.js.map
+
+exports["default"] = useLeftNavItems;
+exports.useLeftNavItems = useLeftNavItems;

package/cjs/configs/useLeftNavSmoothExpand.js

@@ -1,53 +1,35 @@
-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 useLeftNavSmoothExpand_exports = {};
-__export(useLeftNavSmoothExpand_exports, {
-  default: () => useLeftNavSmoothExpand_default,
-  useLeftNavSmoothExpand: () => useLeftNavSmoothExpand
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
-  const { expanded } = props;
+  const {
+    expanded
+  } = props;
   const {
     expandedForAnimation,
     timeoutRef,
     setExpandedForAnimation
   } = smoothExpandOpts;
-  import_react.default.useEffect(() => {
+  React__default["default"].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]);
-  import_react.default.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React__default["default"].useEffect(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, [timeoutRef]);
 };
-var useLeftNavSmoothExpand_default = useLeftNavSmoothExpand;
-module.exports = __toCommonJS(useLeftNavSmoothExpand_exports);
-//# sourceMappingURL=useLeftNavSmoothExpand.js.map
+
+exports["default"] = useLeftNavSmoothExpand;
+exports.useLeftNavSmoothExpand = useLeftNavSmoothExpand;

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

@@ -1,43 +1,28 @@
-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 ChevronItem_exports = {};
-__export(ChevronItem_exports, {
-  ChevronItem: () => ChevronItem,
-  default: () => ChevronItem_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
-const ChevronItem = (props) => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallRight, {
+'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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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 ChevronItem = props => /*#__PURE__*/jsxRuntime.jsx(dsIcons.ChevronSmallRight, _objectSpread({
   size: "m",
-  color: ["brand-primary", 800],
-  ...props
-});
-var ChevronItem_default = ChevronItem;
-module.exports = __toCommonJS(ChevronItem_exports);
-//# sourceMappingURL=index.js.map
+  color: ['brand-primary', 800]
+}, props));
+
+exports.ChevronItem = ChevronItem;
+exports["default"] = ChevronItem;

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

@@ -1,53 +1,36 @@
-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 Icon_exports = {};
-__export(Icon_exports, {
-  Icon: () => Icon
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const AugmentedIcon = (Icon2) => (0, import_styled_components.default)(Icon2)`
-  cursor: pointer;
-
-  outline: 0;
-  :focus,
-  :active {
-    outline: 1px solid #1e79c2;
-  }
-`;
-const Icon = (IconComponent) => (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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var styled = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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 AugmentedIcon = Icon => styled__default["default"](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__ */ import_react.default.createElement(StyledComponent, {
-    color: ["brand-primary", 800],
-    tabIndex: 0,
-    ...props
-  });
+  return /*#__PURE__*/jsxRuntime.jsx(StyledComponent, _objectSpread({
+    color: ['brand-primary', 800],
+    tabIndex: 0
+  }, props));
 };
-module.exports = __toCommonJS(Icon_exports);
-//# sourceMappingURL=index.js.map
+
+exports.Icon = Icon;

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

@@ -1,48 +1,37 @@
-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 ItemRenderer_exports = {};
-__export(ItemRenderer_exports, {
-  ItemRenderer: () => ItemRenderer
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_styled = require("./styled");
-var import_LeftNavigationContext = require("../../LeftNavigationContext");
-var import_usePropsWithDefaults = require("./usePropsWithDefaults");
-var import_hooks = require("../../hooks");
-const ItemRenderer = (props) => {
-  const propsWithDefault = (0, import_usePropsWithDefaults.usePropsWithDefaults)(props);
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var styled = require('./styled.js');
+var LeftNavigationContext = require('../../LeftNavigationContext.js');
+var usePropsWithDefaults = require('./usePropsWithDefaults.js');
+var useKeyboardNavigation = require('../../hooks/useKeyboardNavigation.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const ItemRenderer = props => {
+  const propsWithDefault = usePropsWithDefaults.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,
@@ -54,9 +43,12 @@ const ItemRenderer = (props) => {
     borderBottomMr,
     children
   } = propsWithDefault;
-  const ctx = (0, import_react.useContext)(import_LeftNavigationContext.LeftNavContext);
+  const ctx = React.useContext(LeftNavigationContext.LeftNavContext);
   const {
-    leftNavProps: { onItemClick, openedItem },
+    leftNavProps: {
+      onItemClick,
+      openedItem
+    },
     expandedForAnimation,
     selectedParent,
     selectedItem,
@@ -65,69 +57,72 @@ const ItemRenderer = (props) => {
     visibleItemsRefs
   } = ctx;
   const opened = dsId === openedItem;
-  const handleOnClick = (0, import_react.useCallback)((e) => {
-    if (onClick)
-      onClick();
+  const handleOnClick = React.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 = (0, import_react.useCallback)(() => {
-    if (focuseable)
-      setFocusedItem(dsId);
+  const handleFocus = React.useCallback(() => {
+    if (focuseable) setFocusedItem(dsId);
   }, [dsId, setFocusedItem, focuseable]);
-  const onKeyDown = (0, import_hooks.useKeyboardNavigation)({
+  const onKeyDown = useKeyboardNavigation.useKeyboardNavigation({
     item,
     onClick: handleOnClick
   });
-  const cols = (0, import_react.useMemo)(() => expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"], [expandedForAnimation]);
-  const isSelected = (0, import_react.useMemo)(() => selectedItem === dsId, [selectedItem, dsId]);
+  const cols = React.useMemo(() => expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'], [expandedForAnimation]);
+  const isSelected = React.useMemo(() => selectedItem === dsId, [selectedItem, dsId]);
+
   if (!expandedForAnimation && !CollapsedComponent) {
     return null;
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItemWrapper, {
-    shadowStyle: shadowStyle(opened, item.type),
-    "data-testid": "leftnav-item-wrapper"
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.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__ */ import_react.default.createElement(import_ds_grid.default, {
-    "data-testid": "leftnav-leftcomponent",
-    justifyContent: "center"
-  }, /* @__PURE__ */ import_react.default.createElement(CollapsedComponent, {
-    item,
-    ctx
-  })) : children), hasBorderBottom && /* @__PURE__ */ import_react.default.createElement("div", {
-    style: {
-      marginLeft: opened ? "16px" : "0px",
-      marginRight: borderBottomMr,
-      height: "1px",
-      width: `calc(100% - ${borderBottomMr} - ${opened ? "16px" : "0px"})`,
-      backgroundColor: "#E0E3E8"
-    }
-  })), subitems);
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](styled.StyledItemWrapper, {
+      shadowStyle: shadowStyle(opened, item.type),
+      "data-testid": "leftnav-item-wrapper"
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.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__default["default"](Grid__default["default"], {
+        "data-testid": "leftnav-leftcomponent",
+        justifyContent: "center"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CollapsedComponent, {
+        item: item,
+        ctx: ctx
+      })) : children
+    }), hasBorderBottom && /*#__PURE__*/_jsx__default["default"]("div", {
+      style: {
+        marginLeft: opened ? '16px' : '0px',
+        marginRight: borderBottomMr,
+        height: '1px',
+        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
+        backgroundColor: '#E0E3E8'
+      }
+    })), subitems]
+  });
 };
-module.exports = __toCommonJS(ItemRenderer_exports);
-//# sourceMappingURL=index.js.map
+
+exports.ItemRenderer = ItemRenderer;