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

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const StyledIcon = /*#__PURE__*/styled__default["default"].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__default["default"](StyledIcon, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Notifications, {
+    size: "m",
+    color: ['brand-primary', 800],
+    "data-testid": "left-nav-notifications-icon"
+  }), (exceptions || alerts || messages) && /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    cols: ['1fr', '1fr', '1fr'],
+    gutter: "xxxs",
+    mt: "2px"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-exceptions-icon"
+  }, void 0, exceptions && /*#__PURE__*/_jsx__default["default"](dsIcons.ExceptionsSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['warning', 900]
+  })), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-alerts-icon"
+  }, void 0, alerts && /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['danger', 900]
+  })), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    width: "6px",
+    height: "6px",
+    "data-testid": "left-nav-messages-icon"
+  }, void 0, messages && /*#__PURE__*/_jsx__default["default"](dsIcons.MessagesSmallFill, {
+    width: "6px",
+    height: "6px",
+    color: ['success', 900]
+  }))));
+};
+
+exports.Notifications = Notifications;
+exports["default"] = Notifications;

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

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

package/cjs/exported-related/constants.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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';
+
+exports.CHEVRON_BACK_DS_ID = CHEVRON_BACK_DS_ID;
+exports.FOOTER_DS_ID = FOOTER_DS_ID;
+exports.FOOTER_MENU_CLOSE_DS_ID = FOOTER_MENU_CLOSE_DS_ID;
+exports.ITEM_TYPES = ITEM_TYPES;
+exports.LABEL_OVERFLOW = LABEL_OVERFLOW;

package/cjs/exported-related/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('./constants.js');
+var index = require('./ItemRenderer/index.js');
+var index$1 = require('./ChevronItem/index.js');
+var index$2 = require('./Notifications/index.js');
+var index$3 = require('./OpenWindowItem/index.js');
+var index$4 = require('./Icon/index.js');
+
+
+
+exports.CHEVRON_BACK_DS_ID = constants.CHEVRON_BACK_DS_ID;
+exports.FOOTER_DS_ID = constants.FOOTER_DS_ID;
+exports.FOOTER_MENU_CLOSE_DS_ID = constants.FOOTER_MENU_CLOSE_DS_ID;
+exports.ITEM_TYPES = constants.ITEM_TYPES;
+exports.LABEL_OVERFLOW = constants.LABEL_OVERFLOW;
+exports.ItemRenderer = index.ItemRenderer;
+exports.ChevronItem = index$1.ChevronItem;
+exports.Notifications = index$2.Notifications;
+exports.OpenWindow = index$3.OpenWindow;
+exports.Icon = index$4.Icon;

package/cjs/hooks/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useOpenableOnClickHandler = require('./useOpenableOnClickHandler.js');
+var useExpandableOnClickHandler = require('./useExpandableOnClickHandler.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
+
+
+
+exports.useOpenableOnClickHandler = useOpenableOnClickHandler.useOpenableOnClickHandler;
+exports.useExpandableOnClickHandler = useExpandableOnClickHandler.useExpandableOnClickHandler;
+exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;

package/cjs/hooks/useExpandableOnClickHandler.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var LeftNavigationContext = require('../LeftNavigationContext.js');
+
+const useExpandableOnClickHandler = _ref => {
+  let {
+    id,
+    onExpand,
+    onOpen,
+    selectable = true
+  } = _ref;
+  const {
+    leftNavProps: {
+      expanded
+    },
+    setSelectedItem
+  } = React.useContext(LeftNavigationContext.LeftNavContext);
+  const handleOnExpand = React.useCallback(e => {
+    onExpand(e);
+    if (selectable) setSelectedItem(id);
+  }, [id, onExpand, setSelectedItem, selectable]);
+  const handleOnOpen = React.useCallback(e => {
+    onOpen(e);
+    if (selectable) setSelectedItem(id);
+  }, [id, onOpen, setSelectedItem, selectable]);
+  const handleOnClick = React.useCallback(e => {
+    if (!expanded) handleOnExpand(e);else handleOnOpen(e);
+  }, [expanded, handleOnExpand, handleOnOpen]);
+  return handleOnClick;
+};
+
+exports.useExpandableOnClickHandler = useExpandableOnClickHandler;

package/cjs/hooks/useKeyboardNavigation.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('../exported-related/constants.js');
+var LeftNavigationContext = require('../LeftNavigationContext.js');
+
+/* eslint-disable max-statements */
+const KEY_CODES = {
+  TAB: 9,
+  ENTER: 13,
+  SPACE: 32,
+  LEFT_ARROW: 37,
+  UP_ARROW: 38,
+  RIGHT_ARROW: 39,
+  DOWN_ARROW: 40,
+  END: 35,
+  HOME: 36
+};
+
+const nextIndex = (index, length) => (index + 1) % length;
+
+const prevIndex = (index, length) => (index - 1 + length) % length;
+
+const useKeyboardNavigation = _ref => {
+  let {
+    item,
+    onClick
+  } = _ref;
+  const {
+    dsId,
+    itemOpts: {
+      selectable,
+      openable,
+      closable
+    }
+  } = item;
+  const {
+    visibleItems,
+    visibleItemsRefs
+  } = React.useContext(LeftNavigationContext.LeftNavContext);
+  const currentIndex = React.useMemo(() => visibleItems.findIndex(visibleItemDsId => visibleItemDsId === dsId), [dsId, visibleItems]);
+  const {
+    setFocusedItem,
+    focusedItem,
+    setSelectedItem
+  } = React.useContext(LeftNavigationContext.LeftNavContext);
+  const focusAndSelect = React.useCallback(nextDsId => {
+    setFocusedItem(nextDsId);
+    setSelectedItem(nextDsId);
+  }, [setFocusedItem, setSelectedItem]);
+  React.useLayoutEffect(() => {
+    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 = React.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);
+        focusAndSelect(dsId);
+      } else if (focusedItem === constants.CHEVRON_BACK_DS_ID) {
+        onClick(e);
+        focusAndSelect(dsId);
+      } else if (focusedItem === constants.FOOTER_MENU_CLOSE_DS_ID) {
+        onClick(e);
+        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]);
+  return onKeyDown;
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/hooks/useOpenableOnClickHandler.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var LeftNavigationContext = require('../LeftNavigationContext.js');
+
+const useOpenableOnClickHandler = _ref => {
+  let {
+    id,
+    opened,
+    onExpand,
+    onOpen,
+    onClose
+  } = _ref;
+  const {
+    leftNavProps: {
+      expanded
+    },
+    setSelectedItem
+  } = React.useContext(LeftNavigationContext.LeftNavContext);
+  const handleOnExpand = React.useCallback(e => {
+    onExpand(e);
+    setSelectedItem(id);
+  }, [id, onExpand, setSelectedItem]);
+  const handleOnOpen = React.useCallback(e => {
+    onOpen(e);
+    setSelectedItem(id);
+  }, [id, onOpen, setSelectedItem]);
+  const handleOnClose = React.useCallback(e => {
+    onClose(e);
+    setSelectedItem(id);
+  }, [id, onClose, setSelectedItem]);
+  const handleOnClick = React.useCallback(e => {
+    if (!expanded) handleOnExpand(e);else if (!opened) handleOnOpen(e);else handleOnClose(e);
+  }, [expanded, opened, handleOnExpand, handleOnOpen, handleOnClose]);
+  return handleOnClick;
+};
+
+exports.useOpenableOnClickHandler = useOpenableOnClickHandler;

package/cjs/hooks/useSelectFirstBodyItem.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+var React = require('react');
+var constants = require('../exported-related/constants.js');
+
+const {
+  LEFT_NAV_ITEM_SEPARATOR,
+  LEFT_NAV_ITEM_SECTION
+} = constants.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) => {
+  React.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]);
+};
+
+exports.useSelectFirstBodyItem = useSelectFirstBodyItem;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var propTypes = require('./prop-types.js');
+var LeftNavigation = require('./LeftNavigation.js');
+var constants = require('./exported-related/constants.js');
+var index = require('./exported-related/ItemRenderer/index.js');
+var index$1 = require('./exported-related/ChevronItem/index.js');
+var index$2 = require('./exported-related/Notifications/index.js');
+var index$3 = require('./exported-related/OpenWindowItem/index.js');
+var index$4 = require('./exported-related/Icon/index.js');
+
+
+
+exports.LeftNavItemOptionsSchema = propTypes.LeftNavItemOptionsSchema;
+exports.LeftNavItemPropsSchema = propTypes.LeftNavItemPropsSchema;
+exports.LeftNavigation = LeftNavigation.LeftNavigation;
+exports.LeftNavigationWithSchema = LeftNavigation.LeftNavigationWithSchema;
+exports["default"] = LeftNavigation.LeftNavigation;
+exports.CHEVRON_BACK_DS_ID = constants.CHEVRON_BACK_DS_ID;
+exports.FOOTER_DS_ID = constants.FOOTER_DS_ID;
+exports.FOOTER_MENU_CLOSE_DS_ID = constants.FOOTER_MENU_CLOSE_DS_ID;
+exports.ITEM_TYPES = constants.ITEM_TYPES;
+exports.LABEL_OVERFLOW = constants.LABEL_OVERFLOW;
+exports.ItemRenderer = index.ItemRenderer;
+exports.ChevronItem = index$1.ChevronItem;
+exports.Notifications = index$2.Notifications;
+exports.OpenWindow = index$3.OpenWindow;
+exports.Icon = index$4.Icon;

package/cjs/outOfTheBox/ItemControlledDrilldown/index.js

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+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 React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsIcons = require('@elliemae/ds-icons');
+var constants = require('../../exported-related/constants.js');
+var index$3 = require('../../exported-related/ItemRenderer/index.js');
+require('react/jsx-runtime');
+require('styled-components');
+var styled = require('./styled.js');
+var index = require('../ItemSeparator/index.js');
+var index$1 = require('../ItemWithDate/index.js');
+var index$2 = require('../ItemTextLabel/index.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 Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+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 outOfTheBoxSubitemsComponents = {
+  [constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: index.ItemSeparator,
+  [constants.ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: index$1.ItemWithDate,
+  [constants.ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: index$2.ItemTextLabel
+};
+
+const OutOfTheBoxMapSubitem = props => {
+  const {
+    item,
+    item: {
+      type,
+      Component
+    },
+    ctx
+  } = props;
+
+  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
+    var _item$itemOpts$indent, _item$itemOpts;
+
+    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
+
+    const newItem = _objectSpread(_objectSpread({}, item), {}, {
+      itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
+        indent: currentIndent + 44
+      })
+    });
+
+    return /*#__PURE__*/_jsx__default["default"](OutOfTheBoxComponent, {
+      item: newItem,
+      ctx: 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
+  });
+};
+
+const ItemControlledDrilldown = props => {
+  const {
+    item,
+    item: {
+      itemOpts: {
+        label,
+        RightComponent,
+        labelRightSection,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        isOpened,
+        items,
+        labelDataTestId
+      }
+    },
+    ctx,
+    ctx: {
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      }
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const arrowIcon = React.useMemo(() => {
+    const Component = isOpened ? dsIcons.ArrowheadDown : dsIcons.ArrowheadRight;
+    return /*#__PURE__*/_jsx__default["default"](Component, {
+      width: "24px",
+      height: "18px",
+      color: ['brand-primary', '800']
+    });
+  }, [isOpened]);
+  const subitems = React.useMemo(() => {
+    if (!isOpened || !items) return [];
+    return items.map(subitem => /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapSubitem, {
+      item: subitem,
+      ctx: ctx
+    }, subitem.dsId));
+  }, [items, isOpened]);
+  return /*#__PURE__*/_jsx__default["default"](index$3.ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
+      itemOpts: _objectSpread(_objectSpread({
+        ariaExpanded: isOpened,
+        ariaRole: 'menuitem'
+      }, item.itemOpts), {}, {
+        openable: !isOpened,
+        closable: isOpened
+      }),
+      CollapsedComponent: null
+    }),
+    subitems: subitems,
+    minHeight: "32px",
+    paddingTop: "8px"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    pl: "xxs",
+    mt: "-2px"
+  }, void 0, arrowIcon), /*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
+    pb: "xxxs",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: label,
+    placement: "bottom-start"
+  }) : label), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    pr: "xxs2",
+    cols: ['auto', 'auto'],
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledDate, {
+    ml: "xxs",
+    "data-testid": "leftnav-list-item-date"
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    pl: RightComponent ? 'xxs' : '0px',
+    "data-testid": "leftnav-right-component"
+  }, void 0, RightComponent && /*#__PURE__*/_jsx__default["default"](RightComponent, {
+    ctx: ctx,
+    item: item
+  }))));
+};
+
+exports.ItemControlledDrilldown = ItemControlledDrilldown;

package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const StyledLabel = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-1tjij7e-0"
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+const StyledDate = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-1tjij7e-1"
+})(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
+
+exports.StyledDate = StyledDate;
+exports.StyledLabel = StyledLabel;