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

package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -1,42 +1,72 @@
-import * as React from "react";
-import React2, { useMemo, useCallback, useEffect } from "react";
-import Grid from "@elliemae/ds-grid";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
-import { ItemRenderer, ITEM_TYPES } from "../../exported-related/index";
-import { StyledLabel, StyledDate } from "./styled";
-import { ItemSeparator } from "../ItemSeparator";
-import { ItemWithDate } from "../ItemWithDate";
-import { ItemTextLabel } from "../ItemTextLabel";
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 { useEffect, useMemo, useCallback } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import { ITEM_TYPES } from '../../exported-related/constants.js';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import 'react/jsx-runtime';
+import 'styled-components';
+import { StyledLabel, StyledDate } from './styled.js';
+import { ItemSeparator } from '../ItemSeparator/index.js';
+import { ItemWithDate } from '../ItemWithDate/index.js';
+import { ItemTextLabel } from '../ItemTextLabel/index.js';
+
+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; }
+// Subitem mapping
 const outOfTheBoxSubitemsComponents = {
   [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,
   [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,
   [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel
 };
-const OutOfTheBoxMapSubitem = (props) => {
+
+const OutOfTheBoxMapSubitem = props => {
   const {
     item,
-    item: { type, Component },
+    item: {
+      type,
+      Component
+    },
     ctx
   } = props;
-  if (typeof type === "string" && !!outOfTheBoxSubitemsComponents[type]) {
+
+  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
+    var _item$itemOpts$indent, _item$itemOpts;
+
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = item.itemOpts?.indent ?? 0;
-    const newItem = {
-      ...item,
-      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
-    };
-    return /* @__PURE__ */ React2.createElement(OutOfTheBoxComponent, {
+    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(OutOfTheBoxComponent, {
       item: newItem,
-      ctx
+      ctx: ctx
     });
-  }
-  return /* @__PURE__ */ React2.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(Component, {
+    item: item,
+    ctx: ctx
   });
 };
-const ItemUncontrolledDrilldown = (props) => {
+
+const ItemUncontrolledDrilldown = props => {
   const {
     item,
     item: {
@@ -55,83 +85,78 @@ const ItemUncontrolledDrilldown = (props) => {
     },
     ctx,
     ctx: {
-      leftNavProps: { labelOverflow: leftNavLabelOverflow },
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      },
       openedDrilldowns,
       setOpenedDrilldowns
     }
-  } = props;
+  } = props; // Start opened functionality
+
   useEffect(() => {
-    if (startOpened)
-      setOpenedDrilldowns([...openedDrilldowns, dsId]);
+    if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId]);
   }, []);
   const opened = openedDrilldowns.includes(dsId);
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
   const arrowIcon = useMemo(() => {
     const Component = opened ? ArrowheadDown : ArrowheadRight;
-    return /* @__PURE__ */ React2.createElement(Component, {
+    return /*#__PURE__*/_jsx(Component, {
       width: "24px",
       height: "18px",
-      color: ["brand-primary", "800"]
+      color: ['brand-primary', '800']
     });
-  }, [opened]);
+  }, [opened]); // Array of subitems
+
   const subitems = useMemo(() => {
-    if (!opened || !items)
-      return [];
-    return items.map((subitem) => /* @__PURE__ */ React2.createElement(OutOfTheBoxMapSubitem, {
+    if (!opened || !items) return [];
+    return items.map(subitem => /*#__PURE__*/_jsx(OutOfTheBoxMapSubitem, {
       item: subitem,
-      ctx,
-      key: subitem.dsId
-    }));
+      ctx: ctx
+    }, subitem.dsId));
   }, [items, opened]);
   const handleOnClick = useCallback(() => {
-    if (opened)
-      setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));
-    else
-      setOpenedDrilldowns([...openedDrilldowns, dsId]);
+    if (opened) setOpenedDrilldowns(openedDrilldowns.filter(openedDrilldown => openedDrilldown !== dsId));else setOpenedDrilldowns([...openedDrilldowns, dsId]);
   }, [opened, setOpenedDrilldowns, openedDrilldowns]);
-  return /* @__PURE__ */ React2.createElement(ItemRenderer, {
-    item: {
-      ...item,
-      itemOpts: {
+  return /*#__PURE__*/_jsx(ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
+      itemOpts: _objectSpread(_objectSpread({
         ariaExpanded: opened,
-        ariaRole: "menuitem",
-        ...item.itemOpts,
+        ariaRole: 'menuitem'
+      }, item.itemOpts), {}, {
         openable: !opened,
         closable: opened
-      },
+      }),
       CollapsedComponent: null
-    },
-    subitems,
+    }),
+    subitems: subitems,
     minHeight: "32px",
     paddingTop: "8px",
     onClick: handleOnClick
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     pl: "xxs",
     mt: "-2px"
-  }, arrowIcon), /* @__PURE__ */ React2.createElement(StyledLabel, {
+  }, void 0, arrowIcon), /*#__PURE__*/_jsx(StyledLabel, {
     pb: "xxxs",
-    "data-testid": labelDataTestId || "leftnav-list-item-label",
-    labelOverflow,
-    labelBold,
-    labelColor
-  }, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: label,
     placement: "bottom-start"
-  }) : label), /* @__PURE__ */ React2.createElement(Grid, {
+  }) : label), /*#__PURE__*/_jsx(Grid, {
     pr: "xxs2",
-    cols: ["auto", "auto"],
+    cols: ['auto', 'auto'],
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledDate, {
+  }, void 0, /*#__PURE__*/_jsx(StyledDate, {
     ml: "xxs",
     "data-testid": "leftnav-list-item-date"
-  }, labelRightSection), /* @__PURE__ */ React2.createElement(Grid, {
-    pl: RightComponent ? "xxs" : "0px"
-  }, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
-    ctx,
-    item
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx(Grid, {
+    pl: RightComponent ? 'xxs' : '0px'
+  }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
+    ctx: ctx,
+    item: item
   }))));
 };
-export {
-  ItemUncontrolledDrilldown
-};
-//# sourceMappingURL=index.js.map
+
+export { ItemUncontrolledDrilldown };

package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js

@@ -1,20 +1,17 @@
-import * as React from "react";
-import styled from "styled-components";
-import Grid from "@elliemae/ds-grid";
-const StyledLabel = styled(Grid)`
-  font-size: 13px;
-  font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
-  color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
-  line-height: 14px;
-  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
-`;
-const StyledDate = styled(Grid)`
-  font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral[600]};
-  line-height: 14px;
-`;
-export {
-  StyledDate,
-  StyledLabel
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-17rk89j-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(Grid).withConfig({
+  componentId: "sc-17rk89j-1"
+})(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
+
+export { StyledDate, StyledLabel };

package/esm/outOfTheBox/ItemWithDate/index.js

@@ -1,10 +1,25 @@
-import * as React from "react";
-import React2 from "react";
-import Grid from "@elliemae/ds-grid";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { ItemRenderer } from "../../exported-related/index";
-import { StyledLabel, StyledDate } from "./styled";
-const ItemWithDate = (props) => {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import Grid from '@elliemae/ds-grid';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import '@elliemae/ds-icons';
+import 'react/jsx-runtime';
+import 'styled-components';
+import { StyledLabel, StyledDate } from './styled.js';
+
+var _div;
+
+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 ItemWithDate = props => {
   const {
     item,
     item: {
@@ -20,43 +35,42 @@ const ItemWithDate = (props) => {
     },
     ctx,
     ctx: {
-      leftNavProps: { labelOverflow: leftNavLabelOverflow }
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      }
     }
   } = props;
   const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
-  return /* @__PURE__ */ React2.createElement(ItemRenderer, {
-    item: {
-      ...item,
+  return /*#__PURE__*/_jsx(ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
       CollapsedComponent: null
-    },
+    }),
     minHeight: "32px",
     paddingTop: "8px"
-  }, " ", /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement(StyledLabel, {
+  }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
     pl: "xxs",
     pb: "xxxs",
-    "data-testid": labelDataTestId || "leftnav-list-item-label",
-    labelOverflow,
-    labelBold,
-    labelColor
-  }, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: label,
     placement: "bottom-start"
-  }) : label), /* @__PURE__ */ React2.createElement(Grid, {
+  }) : label), /*#__PURE__*/_jsx(Grid, {
     pr: "xxs2",
-    cols: ["auto", "auto"],
+    cols: ['auto', 'auto'],
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledDate, {
+  }, void 0, /*#__PURE__*/_jsx(StyledDate, {
     ml: "xxs",
     "data-testid": "leftnav-list-item-date"
-  }, labelRightSection), /* @__PURE__ */ React2.createElement(Grid, {
-    pl: RightComponent ? "xxs" : "0px",
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx(Grid, {
+    pl: RightComponent ? 'xxs' : '0px',
     "data-testid": "leftnav-right-component"
-  }, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
-    ctx,
-    item
+  }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
+    ctx: ctx,
+    item: item
   }))));
 };
-export {
-  ItemWithDate
-};
-//# sourceMappingURL=index.js.map
+
+export { ItemWithDate };

package/esm/outOfTheBox/ItemWithDate/styled.js

@@ -1,20 +1,17 @@
-import * as React from "react";
-import styled from "styled-components";
-import Grid from "@elliemae/ds-grid";
-const StyledLabel = styled(Grid)`
-  font-size: 13px;
-  font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
-  color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
-  line-height: 14px;
-  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
-`;
-const StyledDate = styled(Grid)`
-  font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral[600]};
-  line-height: 14px;
-`;
-export {
-  StyledDate,
-  StyledLabel
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-govmsc-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(Grid).withConfig({
+  componentId: "sc-govmsc-1"
+})(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
+
+export { StyledDate, StyledLabel };

package/esm/outOfTheBox/index.js

@@ -1,23 +1,35 @@
-import * as React from "react";
-import { ITEM_TYPES } from "../exported-related";
-import { ItemControlledDrilldown } from "./ItemControlledDrilldown";
-import { ItemUncontrolledDrilldown } from "./ItemUncontrolledDrilldown";
-import { ItemHeader } from "./ItemHeader";
-import { ItemLink } from "./ItemLink";
-import { ItemSection } from "./ItemSection";
-import { ItemSeparator } from "./ItemSeparator";
-import { ItemSubmenu } from "./ItemSubmenu";
-import { ItemTextLabel } from "./ItemTextLabel";
-import { ItemWithDate } from "./ItemWithDate";
-export * from "./ItemControlledDrilldown";
-export * from "./ItemUncontrolledDrilldown";
-export * from "./ItemHeader";
-export * from "./ItemLink";
-export * from "./ItemSection";
-export * from "./ItemSeparator";
-export * from "./ItemSubmenu";
-export * from "./ItemTextLabel";
-export * from "./ItemWithDate";
+import { ITEM_TYPES } from '../exported-related/constants.js';
+import '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import '@elliemae/ds-grid';
+import 'styled-components';
+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 '@babel/runtime/helpers/esm/defineProperty';
+import 'react/jsx-runtime';
+import '@elliemae/ds-icons';
+import { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
+export { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
+import { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';
+export { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';
+import { ItemHeader } from './ItemHeader/index.js';
+export { ItemHeader } from './ItemHeader/index.js';
+import { ItemLink } from './ItemLink/index.js';
+export { ItemLink } from './ItemLink/index.js';
+import { ItemSection } from './ItemSection/index.js';
+export { ItemSection } from './ItemSection/index.js';
+import { ItemSeparator } from './ItemSeparator/index.js';
+export { ItemSeparator } from './ItemSeparator/index.js';
+import { ItemSubmenu } from './ItemSubmenu/index.js';
+export { ItemSubmenu } from './ItemSubmenu/index.js';
+import { ItemTextLabel } from './ItemTextLabel/index.js';
+export { ItemTextLabel } from './ItemTextLabel/index.js';
+import { ItemWithDate } from './ItemWithDate/index.js';
+export { ItemWithDate } from './ItemWithDate/index.js';
+
 const outOfTheBoxTypes = Object.values(ITEM_TYPES);
 const {
   LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,
@@ -41,8 +53,5 @@ const outOfTheBoxComponents = {
   [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,
   [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate
 };
-export {
-  outOfTheBoxComponents,
-  outOfTheBoxTypes
-};
-//# sourceMappingURL=index.js.map
+
+export { outOfTheBoxComponents, outOfTheBoxTypes };

package/esm/parts/LeftNavContent/index.js

@@ -1,67 +1,77 @@
-import * as React from "react";
-import React2 from "react";
-import { LeftNavContext } from "../../LeftNavigationContext";
-import { LeftNavFooterItem } from "../LeftNavFooterItem";
-import { LeftNavContentWithScrollbar } from "../LeftNavContentWithScrollbar";
-import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem";
-import {
-  StyledLeftNavExpandAnimationWrapper,
-  StyledLeftNavAreasContainer,
-  StyledLeftNavHeaderArea,
-  StyledLeftNavBodyAreasContainer,
-  StyledLeftNavBodyHeaderArea,
-  StyledLeftNavBodyItemsArea,
-  StyledLeftNavFooterArea
-} from "./styled";
-import { LeftNavLoading } from "../LeftNavLoading";
-const leftNavScreenReaderInstructions = "Left Navigation. You can navigate through the items using the Up/Down arrows. To expand or select an item, use the Enter/Return or Space keys. Expandable items can also be opened/closed with the Right/Left arrows. The Home and End keys will take you to the first and last item respectively.";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import { LeftNavContext } from '../../LeftNavigationContext.js';
+import { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';
+import { LeftNavContentWithScrollbar } from '../LeftNavContentWithScrollbar/index.js';
+import { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';
+import { StyledLeftNavExpandAnimationWrapper, StyledLeftNavAreasContainer, StyledLeftNavFooterArea, StyledLeftNavHeaderArea, StyledLeftNavBodyAreasContainer, StyledLeftNavBodyHeaderArea, StyledLeftNavBodyItemsArea } from './styled.js';
+import { LeftNavLoading } from '../LeftNavLoading/index.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _LeftNavInnerContent;
+const leftNavScreenReaderInstructions = 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' + 'To expand or select an item, use the Enter/Return or Space keys. ' + 'Expandable items can also be opened/closed with the Right/Left arrows. ' + 'The Home and End keys will take you to the first and last item respectively.';
+
 const LeftNavInnerContent = () => {
   const {
-    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },
+    leftNavProps: {
+      HeaderComponent,
+      BodyHeaderComponent,
+      openedItem,
+      items,
+      withoutBodyShadow
+    },
     selectedItem
-  } = React2.useContext(LeftNavContext);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledLeftNavHeaderArea, {
-    "data-testid": "leftnav-header-area",
-    selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
-  }, HeaderComponent ? /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
-    item: HeaderComponent
-  }) : null), /* @__PURE__ */ React2.createElement(StyledLeftNavBodyAreasContainer, null, /* @__PURE__ */ React2.createElement(StyledLeftNavBodyHeaderArea, {
-    "data-testid": "leftnav-body-header-area",
-    selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
-  }, BodyHeaderComponent ? /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
-    item: BodyHeaderComponent
-  }) : null), /* @__PURE__ */ React2.createElement(StyledLeftNavBodyItemsArea, {
-    selected: !withoutBodyShadow && openedItem !== null,
-    "data-testid": "leftnav-body-items-area",
-    tabIndex: -1
-  }, /* @__PURE__ */ React2.createElement(LeftNavContentWithScrollbar, null, items.map((item) => /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
-    item,
-    key: item.dsId
-  }))))));
+  } = React.useContext(LeftNavContext);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledLeftNavHeaderArea, {
+      "data-testid": "leftnav-header-area",
+      selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
+    }, void 0, HeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: HeaderComponent
+    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyAreasContainer, {}, void 0, /*#__PURE__*/_jsx(StyledLeftNavBodyHeaderArea, {
+      "data-testid": "leftnav-body-header-area",
+      selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
+    }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: BodyHeaderComponent
+    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyItemsArea, {
+      selected: !withoutBodyShadow && openedItem !== null,
+      "data-testid": "leftnav-body-items-area",
+      tabIndex: -1
+    }, void 0, /*#__PURE__*/_jsx(LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: item
+    }, item.dsId)))))]
+  });
 };
+
 const LeftNavContent = () => {
   const {
     expandedForAnimation,
-    leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading }
-  } = React2.useContext(LeftNavContext);
-  return /* @__PURE__ */ React2.createElement(StyledLeftNavExpandAnimationWrapper, {
-    expandedWidth,
-    expanded,
+    leftNavProps: {
+      expanded,
+      expandedWidth,
+      footerLabel,
+      onFooterExpand,
+      onFooterClose,
+      loading
+    }
+  } = React.useContext(LeftNavContext);
+  return /*#__PURE__*/_jsx(StyledLeftNavExpandAnimationWrapper, {
+    expandedWidth: expandedWidth,
+    expanded: expanded,
     "data-testid": "leftnav-component",
     "aria-label": leftNavScreenReaderInstructions
-  }, /* @__PURE__ */ React2.createElement(StyledLeftNavAreasContainer, {
-    expandedWidth,
+  }, void 0, /*#__PURE__*/_jsx(StyledLeftNavAreasContainer, {
+    expandedWidth: expandedWidth,
     expanded: expandedForAnimation
-  }, loading && /* @__PURE__ */ React2.createElement(LeftNavLoading, {
+  }, void 0, loading && /*#__PURE__*/_jsx(LeftNavLoading, {
     expanded: expandedForAnimation
-  }), !loading && /* @__PURE__ */ React2.createElement(LeftNavInnerContent, null), /* @__PURE__ */ React2.createElement(StyledLeftNavFooterArea, null, /* @__PURE__ */ React2.createElement(LeftNavFooterItem, {
-    footerLabel,
-    onFooterExpand,
-    onFooterClose
+  }), !loading && (_LeftNavInnerContent || (_LeftNavInnerContent = /*#__PURE__*/_jsx(LeftNavInnerContent, {}))), /*#__PURE__*/_jsx(StyledLeftNavFooterArea, {}, void 0, /*#__PURE__*/_jsx(LeftNavFooterItem, {
+    footerLabel: footerLabel,
+    onFooterExpand: onFooterExpand,
+    onFooterClose: onFooterClose
   }))));
 };
-var LeftNavContent_default = LeftNavContent;
-export {
-  LeftNavContent_default as default
-};
-//# sourceMappingURL=index.js.map
+
+export { LeftNavContent as default };