@okta/odyssey-contribution-tooling 1.53.0 → 1.54.0

package/dist/cjs/ui-shell/SideNav/SideNav.cjs

@@ -1,647 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SideNav = void 0;
-var _Skeleton2 = _interopRequireDefault(require("@mui/material/Skeleton"));
-var _sortable = require("@dnd-kit/sortable");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react = require("react");
-var _reactErrorBoundary = require("react-error-boundary");
-var _i18n = require("../../i18n.generated/i18n.cjs");
-var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
-var _OdysseyThemeProvider = require("../../OdysseyThemeProvider.cjs");
-var _Typography = require("../../Typography.cjs");
-var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
-var _useMountLifecycleEffect = require("../../useMountLifecycleEffect.cjs");
-var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
-var _useElementAtContainerEdge = require("../useElementAtContainerEdge.cjs");
-var _NavAccordion = require("./NavAccordion.cjs");
-var _SideNavFooterContent = require("./SideNavFooterContent.cjs");
-var _SideNavHeader = require("./SideNavHeader.cjs");
-var _SideNavItemContent = require("./SideNavItemContent.cjs");
-var _SideNavItemContentContext = require("./SideNavItemContentContext.cjs");
-var _SideNavSortableList = require("./SideNavSortableList.cjs");
-var _SideNavToggleButton = require("./SideNavToggleButton.cjs");
-var _useIsSideNavCollapsedSessionStorage = require("./useIsSideNavCollapsedSessionStorage.cjs");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-const SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = 12;
-const SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = 2;
-const flattenNestedItems = items => {
-  return items.flatMap(item => {
-    if (item.nestedNavItems) {
-      return [item, ...flattenNestedItems(item.nestedNavItems)];
-    }
-    return item;
-  });
-};
-const StyledCollapsibleContent = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
-})(({
-  odysseyDesignTokens,
-  isSideNavCollapsed
-}) => ({
-  position: "relative",
-  display: "grid",
-  gridTemplateColumns: _uiShellSharedConstants.SIDE_NAV_WIDTH,
-  height: "100%",
-  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-  overflow: "hidden",
-  ...(isSideNavCollapsed && {
-    gridTemplateColumns: 0,
-    opacity: 0
-  })
-}));
-const StyledOpacityTransitionContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
-})(({
-  odysseyDesignTokens,
-  isSideNavCollapsed
-}) => ({
-  display: "grid",
-  gridTemplateRows: "max-content 1fr max-content",
-  height: "100%",
-  transition: `opacity 50ms`,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-  overflow: "hidden",
-  ...(isSideNavCollapsed && {
-    opacity: 0
-  })
-}));
-const StyledSideNavContainer = (0, _styled.default)("nav", {
-  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "hasNeighbouringContentAtInlineStart" && prop !== "isAppContentWhiteBackground" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
-})(({
-  backgroundColor,
-  hasNeighbouringContentAtInlineStart,
-  isAppContentWhiteBackground,
-  isSideNavCollapsed,
-  isSideNavToggleHighlighted,
-  odysseyDesignTokens
-}) => ({
-  backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,
-  height: "100%",
-  position: "relative",
-  width: "fit-content",
-  "&::before, &::after": {
-    content: "''",
-    height: "100%",
-    pointerEvents: "none",
-    position: "absolute",
-    right: `-${odysseyDesignTokens.BorderWidthMain}`,
-    top: 0,
-    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}, width ${odysseyDesignTokens.TransitionDurationMain}`,
-    userSelect: "none",
-    zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX
-  },
-  "&::before": {
-    backgroundColor: isSideNavToggleHighlighted ? odysseyDesignTokens.BorderColorPrimaryControl : odysseyDesignTokens.HueNeutral100,
-    opacity: isAppContentWhiteBackground || !isSideNavCollapsed && isSideNavToggleHighlighted ? 1 : 0,
-    width: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
-  },
-  "&::after": {
-    backgroundColor: odysseyDesignTokens.HueNeutral200,
-    opacity: isSideNavCollapsed ? 1 : 0,
-    transform: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? isSideNavToggleHighlighted ? `translateX(calc(100% - (${odysseyDesignTokens.BorderWidthMain} * 2)))` : `translateX(calc(100% - ${SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px))` : "translateX(0)",
-    width: hasNeighbouringContentAtInlineStart ? 0 : `calc(${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px + ${odysseyDesignTokens.BorderWidthMain} * 2)`,
-    ...(isSideNavCollapsed && isSideNavToggleHighlighted ? {
-      borderRightColor: odysseyDesignTokens.BorderColorPrimaryControl,
-      borderRightStyle: odysseyDesignTokens.BorderStyleMain,
-      borderRightWidth: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
-    } : {})
-  }
-}));
-const StyledSideNavToggleButtonContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "hasNeighbouringContentAtInlineStart" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
-})(({
-  hasNeighbouringContentAtInlineStart,
-  isSideNavCollapsed,
-  isSideNavToggleHighlighted,
-  odysseyDesignTokens
-}) => ({
-  position: "absolute",
-  right: `${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE}px`,
-  top: _uiShellSharedConstants.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
-  width: `${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_SIZE}px`,
-  transform: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? isSideNavToggleHighlighted ? `translate3d(calc(100% + ${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px), 0, 0)` : `translate3d(calc(100% + ${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED}px), 0, 0)` : "translate3d(100%, 0, 0)",
-  transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
-  zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX + 1
-}));
-const StyledSideNavHeaderContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "borderColor" && prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
-})(({
-  borderColor,
-  hasContentScrolled,
-  odysseyDesignTokens
-}) => ({
-  flexShrink: 0,
-  ...(hasContentScrolled && {
-    borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
-    borderBottomStyle: odysseyDesignTokens.BorderStyleMain,
-    borderBottomColor: odysseyDesignTokens.HueNeutral100,
-    ...(borderColor && {
-      borderBottomColor: borderColor.concat("15")
-    })
-  })
-}));
-const StyledSideNavListContainer = (0, _styled.default)("ul")(() => ({
-  padding: 0,
-  listStyle: "none",
-  listStyleType: "none",
-  margin: 0,
-  width: "100%"
-}));
-const StyledSideNavScrollableContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasBlockStartPadding"
-})(({
-  odysseyDesignTokens,
-  hasBlockStartPadding
-}) => ({
-  display: "inline-grid",
-  gridTemplateRows: "1fr max-content",
-  overflowY: "auto",
-  paddingBlockStart: hasBlockStartPadding ? odysseyDesignTokens.Spacing2 : 0,
-  paddingInline: odysseyDesignTokens.Spacing2
-}));
-const StyledSectionHeaderContainer = (0, _styled.default)("li", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastFontColor"
-})(({
-  contrastFontColor,
-  odysseyDesignTokens
-}) => ({
-  color: contrastFontColor || odysseyDesignTokens.HueNeutral600,
-  marginBlock: `${odysseyDesignTokens.Spacing3}`,
-  paddingBlock: odysseyDesignTokens.Spacing1,
-  paddingInline: odysseyDesignTokens.Spacing4
-}));
-const StyledSideNavFooter = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
-})(({
-  odysseyDesignTokens,
-  sideNavBackgroundColor
-}) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  flexShrink: 0,
-  padding: odysseyDesignTokens.Spacing4,
-  ...(sideNavBackgroundColor && {
-    backgroundColor: sideNavBackgroundColor
-  })
-}));
-const StyledPersistentSideNavFooter = (0, _styled.default)(StyledSideNavFooter, {
-  shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
-})(({
-  isContentScrollable,
-  odysseyDesignTokens,
-  sideNavBackgroundColor
-}) => ({
-  transitionProperty: "box-shadow",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTiming: odysseyDesignTokens.TransitionTimingMain,
-  zIndex: _uiShellSharedConstants.UI_SHELL_BASE_Z_INDEX,
-  ...(isContentScrollable && {
-    boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
-  }),
-  ...(sideNavBackgroundColor && {
-    backgroundColor: sideNavBackgroundColor
-  })
-}));
-const StyledSideNavFooterItemsContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
-})(({
-  odysseyDesignTokens,
-  sideNavContrastColors
-}) => ({
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "a, span": {
-    color: odysseyDesignTokens.HueNeutral600,
-    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,
-    "&:visited": {
-      color: odysseyDesignTokens.HueNeutral600,
-      ...(sideNavContrastColors?.fontColor && {
-        color: sideNavContrastColors?.fontColor
-      })
-    },
-    "&:hover": {
-      textDecoration: "none",
-      color: odysseyDesignTokens.HueNeutral900,
-      ...(sideNavContrastColors?.fontColor && {
-        color: sideNavContrastColors?.fontColor
-      })
-    },
-    ...(sideNavContrastColors?.fontColor && {
-      color: sideNavContrastColors?.fontColor
-    })
-  }
-}));
-const StyledLoadingItemContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})(({
-  odysseyDesignTokens
-}) => ({
-  alignItems: "center",
-  display: "flex",
-  gap: odysseyDesignTokens.Spacing2,
-  paddingBlock: odysseyDesignTokens.Spacing2,
-  paddingInline: odysseyDesignTokens.Spacing4
-}));
-const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
-const LoadingItem = () => {
-  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
-  return (0, _jsxRuntime.jsxs)(StyledLoadingItemContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [(0, _jsxRuntime.jsx)(_Skeleton2.default, {
-      height: odysseyDesignTokens.Spacing4,
-      variant: "circular",
-      width: odysseyDesignTokens.Spacing4
-    }), (0, _jsxRuntime.jsx)(_Skeleton2.default, {
-      variant: "rounded",
-      width: "100%"
-    })]
-  });
-};
-const SideNav = ({
-  appName,
-  footerComponent,
-  footerItems,
-  hasCustomFooter,
-  hasSessionStorageState,
-  isCollapsible,
-  isCollapsed = false,
-  isCompact,
-  isLoading,
-  isObtrusive,
-  logoProps,
-  leavesPaddingStart,
-  onCollapse,
-  onExpand,
-  onSort,
-  sideNavItems
-}) => {
-  const [hasContentScrolled, setHasContentScrolled] = (0, _react.useState)(false);
-  const [isContentScrollable, setIsContentScrollable] = (0, _react.useState)(false);
-  const [isSideNavToggleHighlighted, setIsSideNavToggleHighlighted] = (0, _react.useState)(false);
-  const [sideNavItemsList, updateSideNavItemsList] = (0, _react.useState)(sideNavItems || []);
-  const [isSideNavCollapsedLocalState, setIsSideNavCollapsedLocalState] = (0, _react.useState)(isCollapsed);
-  const {
-    sessionState: isSideNavCollapsedSessionState,
-    setSessionState: setIsSideNavCollapsedSessionState
-  } = (0, _useIsSideNavCollapsedSessionStorage.useIsSideNavCollapsedSessionStorage)(isCollapsed);
-  const isSideNavCollapsed = hasSessionStorageState ? isSideNavCollapsedSessionState : isSideNavCollapsedLocalState;
-  const setIsSideNavCollapsed = hasSessionStorageState ? setIsSideNavCollapsedSessionState : setIsSideNavCollapsedLocalState;
-  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
-  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
-  const {
-    t
-  } = (0, _i18n.useTranslation)();
-  const scrollableContentRef = (0, _react.useRef)(null);
-  const resizeObserverRef = (0, _react.useRef)(null);
-  const intersectionObserverRef = (0, _react.useRef)(null);
-  const sideNavRef = (0, _react.useRef)(null);
-  const {
-    isAtContainerInlineStart
-  } = (0, _useElementAtContainerEdge.useElementAtContainerEdge)({
-    element: sideNavRef.current,
-    monitoringElement: sideNavRef.current?.parentElement?.parentElement
-  });
-  const hasNeighbouringContentAtInlineStart = !isAtContainerInlineStart;
-  const blankElement = (0, _react.useMemo)(() => (0, _jsxRuntime.jsx)("div", {}), []);
-  (0, _react.useEffect)(() => updateSideNavItemsList(sideNavItems || []), [sideNavItems]);
-  const onMount = (0, _react.useCallback)(() => {
-    if (!isCollapsible) {
-      setIsSideNavCollapsed(isCollapsed);
-    }
-  }, [isCollapsed, isCollapsible, setIsSideNavCollapsed]);
-  const onUpdate = (0, _react.useCallback)(() => {
-    setIsSideNavCollapsed(isCollapsed);
-  }, [isCollapsed, setIsSideNavCollapsed]);
-  (0, _useMountLifecycleEffect.useMountLifecycleEffect)({
-    onMount,
-    onUpdate
-  });
-  (0, _react.useEffect)(() => {
-    const updateIsContentScrollable = () => {
-      if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
-        setIsContentScrollable(getHasScrollableContent(scrollableContentRef.current.parentElement));
-      }
-    };
-    let resizeObserverDebounceTimer;
-    if (!resizeObserverRef.current) {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        cancelAnimationFrame(resizeObserverDebounceTimer);
-        resizeObserverDebounceTimer = requestAnimationFrame(updateIsContentScrollable);
-      });
-    }
-    if (resizeObserverRef.current && scrollableContentRef.current) {
-      resizeObserverRef.current.observe(scrollableContentRef.current);
-      if (scrollableContentRef.current.parentElement) {
-        resizeObserverRef.current.observe(scrollableContentRef.current.parentElement);
-      }
-    }
-    updateIsContentScrollable();
-    if (!intersectionObserverRef.current && scrollableContentRef.current) {
-      intersectionObserverRef.current = new IntersectionObserver(entries => {
-        const isIntersecting = entries.slice().sort((a, b) => a.time - b.time).at(0)?.isIntersecting;
-        setHasContentScrolled(!isIntersecting);
-      }, {
-        root: scrollableContentRef.current.parentElement,
-        threshold: 1.0
-      });
-    }
-    if (intersectionObserverRef.current && scrollableContentRef.current) {
-      const ulElement = scrollableContentRef.current;
-      const [liElement] = Array.from(ulElement?.children || []);
-      if (liElement) {
-        intersectionObserverRef.current.observe(liElement);
-      }
-    }
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (intersectionObserverRef.current) {
-        intersectionObserverRef.current.disconnect();
-        intersectionObserverRef.current = null;
-      }
-      cancelAnimationFrame(resizeObserverDebounceTimer);
-    };
-  }, [sideNavItemsList]);
-  const scrollIntoViewRef = (0, _react.useRef)(null);
-  const firstSideNavItemIdWithIsSelected = (0, _react.useMemo)(() => {
-    const flattenedItems = flattenNestedItems(sideNavItemsList);
-    const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
-    return firstItemWithIsSelected?.id;
-  }, [sideNavItemsList]);
-  (0, _react.useEffect)(() => {
-    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {
-      scrollIntoViewRef.current.scrollIntoView();
-    }
-  }, [firstSideNavItemIdWithIsSelected]);
-  const getRefIfThisIsFirstNodeWithIsSelected = (0, _react.useCallback)(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
-  const setSelectedItem = (0, _react.useCallback)(selectedItemId => {
-    const updateNestedSelection = items => {
-      return items.map(item => {
-        if (item.nestedNavItems) {
-          return {
-            ...item,
-            isSelected: item.id === selectedItemId,
-            nestedNavItems: updateNestedSelection(item.nestedNavItems)
-          };
-        }
-        return {
-          ...item,
-          isSelected: item.id === selectedItemId
-        };
-      });
-    };
-    const updatedSideNavItems = updateNestedSelection(sideNavItemsList);
-    updateSideNavItemsList(updatedSideNavItems);
-    if (isCollapsed || isObtrusive) {
-      if (isCollapsible) {
-        uiShellContext?.closeSideNavMenu();
-      } else {
-        onCollapse?.();
-      }
-    }
-  }, [isCollapsed, isCollapsible, isObtrusive, onCollapse, sideNavItemsList, uiShellContext]);
-  const createAccordionContextValue = (0, _react.useCallback)(depth => ({
-    depth
-  }), []);
-  const createLeafItemContextValue = (0, _react.useCallback)((depth, isSortable) => ({
-    isCompact,
-    depth,
-    isSortable,
-    absolutePaddingStart: leavesPaddingStart
-  }), [isCompact, leavesPaddingStart]);
-  const renderSideNavItem = (item, depth = 1) => {
-    const {
-      href,
-      id,
-      isDefaultExpanded,
-      isDisabled,
-      isExpanded,
-      isSectionHeader,
-      label,
-      startIcon,
-      nestedNavItems,
-      onChange,
-      isSortable,
-      translate
-    } = item;
-    if (isSectionHeader) {
-      return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-        fallback: blankElement,
-        children: (0, _jsxRuntime.jsx)(StyledSectionHeaderContainer, {
-          contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
-          id: id,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: (0, _jsxRuntime.jsx)(_Typography.Overline, {
-            component: "h3",
-            children: label
-          })
-        })
-      }, id);
-    } else if (nestedNavItems && nestedNavItems.length > 0) {
-      const nestedChildren = (0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
-        role: "presentation",
-        children: isSortable ? (0, _jsxRuntime.jsx)(_SideNavSortableList.SideNavSortableList, {
-          depth: depth + 1,
-          items: nestedNavItems,
-          onChange: setSortedItems,
-          parentId: item.id,
-          processSideNavItems: processSideNavItems
-        }) : processSideNavItems(nestedNavItems, depth + 1).map(item => item.sortableItem.navItem)
-      });
-      return href ? (0, _jsxRuntime.jsxs)(_reactErrorBoundary.ErrorBoundary, {
-        fallback: blankElement,
-        children: [(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
-          ...item,
-          href: href,
-          onItemSelected: setSelectedItem,
-          scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-          startIcon: item.startIcon
-        }), (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
-          "aria-disabled": isDisabled,
-          disabled: isDisabled,
-          id: `${id}-items`,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: nestedChildren
-        })]
-      }, id) : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-        fallback: blankElement,
-        children: (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
-          "aria-disabled": isDisabled,
-          disabled: isDisabled,
-          id: id,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
-            value: createAccordionContextValue(depth),
-            children: (0, _jsxRuntime.jsx)(_NavAccordion.NavAccordion, {
-              isCompact: isCompact,
-              isDefaultExpanded: isDefaultExpanded,
-              isDisabled: isDisabled,
-              isExpanded: isExpanded,
-              label: label,
-              onChange: onChange,
-              startIcon: startIcon,
-              children: nestedChildren
-            })
-          }, id)
-        })
-      }, id);
-    } else {
-      return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-        fallback: blankElement,
-        children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
-          value: createLeafItemContextValue(depth, isSortable),
-          children: (0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
-            ...item,
-            onItemSelected: setSelectedItem,
-            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(id),
-            startIcon: startIcon,
-            translate: translate
-          })
-        }, id)
-      }, id);
-    }
-  };
-  const processSideNavItems = (items, depth = 1) => {
-    return items?.map(item => ({
-      ...item,
-      sortableItem: {
-        id: item.id,
-        isSelected: item.isSelected,
-        isDisabled: item.isDisabled,
-        isSortable: item.isSortable,
-        navItem: renderSideNavItem(item, depth)
-      }
-    }));
-  };
-  const sideNavExpandClickHandler = (0, _react.useCallback)(() => {
-    setIsSideNavCollapsed(isSideNavCollapsed => {
-      if (isSideNavCollapsed) {
-        onExpand?.();
-      } else {
-        onCollapse?.();
-      }
-      return !isSideNavCollapsed;
-    });
-  }, [onCollapse, onExpand, setIsSideNavCollapsed]);
-  const sideNavExpandKeyHandler = (0, _react.useCallback)(event => {
-    if (event?.key === "Enter" || event?.code === "Space") {
-      event.preventDefault();
-      sideNavExpandClickHandler();
-    }
-  }, [sideNavExpandClickHandler]);
-  (0, _react.useEffect)(() => {
-    const unsubscribe = uiShellContext?.subscribeToCloseSideNavMenu(() => {
-      onCollapse?.();
-      setIsSideNavCollapsed(true);
-    });
-    return () => {
-      unsubscribe?.();
-    };
-  }, [onCollapse, setIsSideNavCollapsed, uiShellContext]);
-  const setSortedItems = (0, _react.useCallback)((parentId, activeId, activeIndex, overIndex) => {
-    const sortedSideNavItems = sideNavItemsList.map(item => item.id === parentId && item.nestedNavItems ? {
-      ...item,
-      nestedNavItems: (0, _sortable.arrayMove)(item.nestedNavItems, activeIndex, overIndex)
-    } : item);
-    updateSideNavItemsList(sortedSideNavItems);
-    onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);
-  }, [onSort, sideNavItemsList]);
-  const onSideNavToggleButtonHighlight = (0, _react.useCallback)(isHighlighted => {
-    setIsSideNavToggleHighlighted(isHighlighted);
-  }, []);
-  return (0, _jsxRuntime.jsxs)(StyledSideNavContainer, {
-    "aria-label": t("navigation.label"),
-    backgroundColor: uiShellContext?.sideNavBackgroundColor,
-    hasNeighbouringContentAtInlineStart: hasNeighbouringContentAtInlineStart,
-    id: "side-nav-expandable",
-    isAppContentWhiteBackground: uiShellContext?.appBackgroundColor === odysseyDesignTokens.HueNeutralWhite,
-    isSideNavCollapsed: isSideNavCollapsed,
-    isSideNavToggleHighlighted: isSideNavToggleHighlighted,
-    odysseyDesignTokens: odysseyDesignTokens,
-    ref: sideNavRef,
-    children: [isCollapsible && (0, _jsxRuntime.jsx)(StyledSideNavToggleButtonContainer, {
-      hasNeighbouringContentAtInlineStart: hasNeighbouringContentAtInlineStart,
-      isSideNavCollapsed: isSideNavCollapsed,
-      isSideNavToggleHighlighted: isSideNavToggleHighlighted,
-      odysseyDesignTokens: odysseyDesignTokens,
-      children: (0, _jsxRuntime.jsx)(_SideNavToggleButton.SideNavToggleButton, {
-        ariaControls: "side-nav-expandable",
-        clickAreaPadding: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? _SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_SIZE / 2 : 0,
-        isSideNavCollapsed: isSideNavCollapsed,
-        onClick: sideNavExpandClickHandler,
-        onHighlight: onSideNavToggleButtonHighlight,
-        onKeyDown: sideNavExpandKeyHandler
-      })
-    }), (0, _jsxRuntime.jsx)(_OdysseyThemeProvider.OdysseyThemeProvider, {
-      children: (0, _jsxRuntime.jsx)(StyledCollapsibleContent, {
-        "data-se": "collapsible-region",
-        isSideNavCollapsed: isSideNavCollapsed,
-        odysseyDesignTokens: odysseyDesignTokens,
-        children: (0, _jsxRuntime.jsxs)(StyledOpacityTransitionContainer, {
-          isSideNavCollapsed: isSideNavCollapsed,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: [appName || isLoading || logoProps ? (0, _jsxRuntime.jsx)(StyledSideNavHeaderContainer, {
-            borderColor: uiShellContext?.sideNavContrastColors?.fontColor,
-            hasContentScrolled: hasContentScrolled,
-            odysseyDesignTokens: odysseyDesignTokens,
-            children: isLoading && !appName && !logoProps ? (0, _jsxRuntime.jsx)(_SideNavHeader.SideNavHeader, {
-              isLoading: isLoading
-            }) : (0, _jsxRuntime.jsx)(_SideNavHeader.SideNavHeader, {
-              appName: appName,
-              isLoading: isLoading,
-              logoProps: logoProps
-            })
-          }) : (0, _jsxRuntime.jsx)("div", {}), (0, _jsxRuntime.jsxs)(StyledSideNavScrollableContainer, {
-            "data-se": "scrollable-region",
-            hasBlockStartPadding: !appName,
-            odysseyDesignTokens: odysseyDesignTokens,
-            children: [(0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
-              ref: scrollableContentRef,
-              role: "none",
-              children: isLoading ? Array(6).fill(null).map((_, index) => (0, _jsxRuntime.jsx)(LoadingItem, {}, index)) : processSideNavItems(sideNavItemsList).map(item => item.sortableItem.navItem)
-            }), !isLoading && footerItems && !hasCustomFooter && (0, _jsxRuntime.jsx)(StyledSideNavFooter, {
-              odysseyDesignTokens: odysseyDesignTokens,
-              sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
-              children: (0, _jsxRuntime.jsx)(StyledSideNavFooterItemsContainer, {
-                odysseyDesignTokens: odysseyDesignTokens,
-                sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-                children: (0, _jsxRuntime.jsx)(_SideNavFooterContent.SideNavFooterContent, {
-                  footerItems: footerItems
-                })
-              })
-            })]
-          }), !isLoading && !footerItems && hasCustomFooter && (0, _jsxRuntime.jsx)(StyledPersistentSideNavFooter, {
-            isContentScrollable: isContentScrollable,
-            odysseyDesignTokens: odysseyDesignTokens,
-            sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
-            children: footerComponent
-          })]
-        })
-      })
-    })]
-  });
-};
-const MemoizedSideNav = exports.SideNav = (0, _react.memo)(SideNav);
-MemoizedSideNav.displayName = "SideNav";
-//# sourceMappingURL=SideNav.cjs.map