@okta/odyssey-contribution-tooling 1.49.0 → 1.50.1

package/dist/esm/ui-shell/SideNav/SideNav.js

@@ -1,641 +0,0 @@
-import _Skeleton from "@mui/material/Skeleton";
-/*!
- * 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.
- */
-
-import { arrayMove } from "@dnd-kit/sortable";
-import styled from "@emotion/styled";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { useTranslation } from "../../i18n.generated/i18n.js";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
-import { Overline } from "../../Typography.js";
-import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
-import { useMountLifecycleEffect } from "../../useMountLifecycleEffect.js";
-import { SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION, SIDE_NAV_WIDTH, UI_SHELL_BASE_Z_INDEX, UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
-import { useElementAtContainerEdge } from "../useElementAtContainerEdge.js";
-import { NavAccordion } from "./NavAccordion.js";
-import { SideNavFooterContent } from "./SideNavFooterContent.js";
-import { SideNavHeader } from "./SideNavHeader.js";
-import { SideNavItemContent, StyledSideNavListItem } from "./SideNavItemContent.js";
-import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
-import { SideNavSortableList } from "./SideNavSortableList.js";
-import { SIDE_NAV_TOGGLE_ICON_HALF_SIZE, SIDE_NAV_TOGGLE_ICON_SIZE, SideNavToggleButton } from "./SideNavToggleButton.js";
-import { useIsSideNavCollapsedSessionStorage } from "./useIsSideNavCollapsedSessionStorage.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
-})(({
-  odysseyDesignTokens,
-  isSideNavCollapsed
-}) => ({
-  position: "relative",
-  display: "grid",
-  gridTemplateColumns: 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 = styled("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 = styled("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: 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(${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 = styled("div", {
-  shouldForwardProp: prop => prop !== "hasNeighbouringContentAtInlineStart" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
-})(({
-  hasNeighbouringContentAtInlineStart,
-  isSideNavCollapsed,
-  isSideNavToggleHighlighted,
-  odysseyDesignTokens
-}) => ({
-  position: "absolute",
-  right: `${SIDE_NAV_TOGGLE_ICON_HALF_SIZE}px`,
-  top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
-  width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
-  transform: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? isSideNavToggleHighlighted ? `translate3d(calc(100% + ${SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px), 0, 0)` : `translate3d(calc(100% + ${SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED}px), 0, 0)` : "translate3d(100%, 0, 0)",
-  transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
-  zIndex: UI_SHELL_OVERLAY_Z_INDEX + 1
-}));
-const StyledSideNavHeaderContainer = styled("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 = styled("ul")(() => ({
-  padding: 0,
-  listStyle: "none",
-  listStyleType: "none",
-  margin: 0,
-  width: "100%"
-}));
-const StyledSideNavScrollableContainer = styled("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 = styled("li", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastFontColor"
-})(({
-  contrastFontColor,
-  odysseyDesignTokens
-}) => ({
-  color: contrastFontColor || odysseyDesignTokens.HueNeutral600,
-  marginBlock: `${odysseyDesignTokens.Spacing3}`,
-  paddingBlock: odysseyDesignTokens.Spacing1,
-  paddingInline: odysseyDesignTokens.Spacing4
-}));
-const StyledSideNavFooter = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
-})(({
-  odysseyDesignTokens,
-  sideNavBackgroundColor
-}) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  flexShrink: 0,
-  padding: odysseyDesignTokens.Spacing4,
-  ...(sideNavBackgroundColor && {
-    backgroundColor: sideNavBackgroundColor
-  })
-}));
-const StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {
-  shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
-})(({
-  isContentScrollable,
-  odysseyDesignTokens,
-  sideNavBackgroundColor
-}) => ({
-  transitionProperty: "box-shadow",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTiming: odysseyDesignTokens.TransitionTimingMain,
-  zIndex: UI_SHELL_BASE_Z_INDEX,
-  ...(isContentScrollable && {
-    boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
-  }),
-  ...(sideNavBackgroundColor && {
-    backgroundColor: sideNavBackgroundColor
-  })
-}));
-const StyledSideNavFooterItemsContainer = styled("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 = styled("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 = useOdysseyDesignTokens();
-  return _jsxs(StyledLoadingItemContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [_jsx(_Skeleton, {
-      height: odysseyDesignTokens.Spacing4,
-      variant: "circular",
-      width: odysseyDesignTokens.Spacing4
-    }), _jsx(_Skeleton, {
-      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] = useState(false);
-  const [isContentScrollable, setIsContentScrollable] = useState(false);
-  const [isSideNavToggleHighlighted, setIsSideNavToggleHighlighted] = useState(false);
-  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems || []);
-  const [isSideNavCollapsedLocalState, setIsSideNavCollapsedLocalState] = useState(isCollapsed);
-  const {
-    sessionState: isSideNavCollapsedSessionState,
-    setSessionState: setIsSideNavCollapsedSessionState
-  } = useIsSideNavCollapsedSessionStorage(isCollapsed);
-  const isSideNavCollapsed = hasSessionStorageState ? isSideNavCollapsedSessionState : isSideNavCollapsedLocalState;
-  const setIsSideNavCollapsed = hasSessionStorageState ? setIsSideNavCollapsedSessionState : setIsSideNavCollapsedLocalState;
-  const uiShellContext = useUiShellContext();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const {
-    t
-  } = useTranslation();
-  const scrollableContentRef = useRef(null);
-  const resizeObserverRef = useRef(null);
-  const intersectionObserverRef = useRef(null);
-  const sideNavRef = useRef(null);
-  const {
-    isAtContainerInlineStart
-  } = useElementAtContainerEdge({
-    element: sideNavRef.current,
-    monitoringElement: sideNavRef.current?.parentElement?.parentElement
-  });
-  const hasNeighbouringContentAtInlineStart = !isAtContainerInlineStart;
-  const blankElement = useMemo(() => _jsx("div", {}), []);
-  useEffect(() => updateSideNavItemsList(sideNavItems || []), [sideNavItems]);
-  const onMount = useCallback(() => {
-    if (!isCollapsible) {
-      setIsSideNavCollapsed(isCollapsed);
-    }
-  }, [isCollapsed, isCollapsible, setIsSideNavCollapsed]);
-  const onUpdate = useCallback(() => {
-    setIsSideNavCollapsed(isCollapsed);
-  }, [isCollapsed, setIsSideNavCollapsed]);
-  useMountLifecycleEffect({
-    onMount,
-    onUpdate
-  });
-  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 = useRef(null);
-  const firstSideNavItemIdWithIsSelected = useMemo(() => {
-    const flattenedItems = flattenNestedItems(sideNavItemsList);
-    const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
-    return firstItemWithIsSelected?.id;
-  }, [sideNavItemsList]);
-  useEffect(() => {
-    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {
-      scrollIntoViewRef.current.scrollIntoView();
-    }
-  }, [firstSideNavItemIdWithIsSelected]);
-  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
-  const setSelectedItem = 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 = useCallback(depth => ({
-    depth
-  }), []);
-  const createLeafItemContextValue = 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 _jsx(ErrorBoundary, {
-        fallback: blankElement,
-        children: _jsx(StyledSectionHeaderContainer, {
-          contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
-          id: id,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: _jsx(Overline, {
-            component: "h3",
-            children: label
-          })
-        })
-      }, id);
-    } else if (nestedNavItems && nestedNavItems.length > 0) {
-      const nestedChildren = _jsx(StyledSideNavListContainer, {
-        role: "presentation",
-        children: isSortable ? _jsx(SideNavSortableList, {
-          depth: depth + 1,
-          items: nestedNavItems,
-          onChange: setSortedItems,
-          parentId: item.id,
-          processSideNavItems: processSideNavItems
-        }) : processSideNavItems(nestedNavItems, depth + 1).map(item => item.sortableItem.navItem)
-      });
-      return href ? _jsxs(ErrorBoundary, {
-        fallback: blankElement,
-        children: [_jsx(SideNavItemContent, {
-          ...item,
-          href: href,
-          onItemSelected: setSelectedItem,
-          scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-          startIcon: item.startIcon
-        }), _jsx(StyledSideNavListItem, {
-          "aria-disabled": isDisabled,
-          disabled: isDisabled,
-          id: `${id}-items`,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: nestedChildren
-        })]
-      }, id) : _jsx(ErrorBoundary, {
-        fallback: blankElement,
-        children: _jsx(StyledSideNavListItem, {
-          "aria-disabled": isDisabled,
-          disabled: isDisabled,
-          id: id,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: _jsx(SideNavItemContentContext.Provider, {
-            value: createAccordionContextValue(depth),
-            children: _jsx(NavAccordion, {
-              isCompact: isCompact,
-              isDefaultExpanded: isDefaultExpanded,
-              isDisabled: isDisabled,
-              isExpanded: isExpanded,
-              label: label,
-              onChange: onChange,
-              startIcon: startIcon,
-              children: nestedChildren
-            })
-          }, id)
-        })
-      }, id);
-    } else {
-      return _jsx(ErrorBoundary, {
-        fallback: blankElement,
-        children: _jsx(SideNavItemContentContext.Provider, {
-          value: createLeafItemContextValue(depth, isSortable),
-          children: _jsx(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 = useCallback(() => {
-    setIsSideNavCollapsed(isSideNavCollapsed => {
-      if (isSideNavCollapsed) {
-        onExpand?.();
-      } else {
-        onCollapse?.();
-      }
-      return !isSideNavCollapsed;
-    });
-  }, [onCollapse, onExpand, setIsSideNavCollapsed]);
-  const sideNavExpandKeyHandler = useCallback(event => {
-    if (event?.key === "Enter" || event?.code === "Space") {
-      event.preventDefault();
-      sideNavExpandClickHandler();
-    }
-  }, [sideNavExpandClickHandler]);
-  useEffect(() => {
-    const unsubscribe = uiShellContext?.subscribeToCloseSideNavMenu(() => {
-      onCollapse?.();
-      setIsSideNavCollapsed(true);
-    });
-    return () => {
-      unsubscribe?.();
-    };
-  }, [onCollapse, setIsSideNavCollapsed, uiShellContext]);
-  const setSortedItems = useCallback((parentId, activeId, activeIndex, overIndex) => {
-    const sortedSideNavItems = sideNavItemsList.map(item => item.id === parentId && item.nestedNavItems ? {
-      ...item,
-      nestedNavItems: arrayMove(item.nestedNavItems, activeIndex, overIndex)
-    } : item);
-    updateSideNavItemsList(sortedSideNavItems);
-    onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);
-  }, [onSort, sideNavItemsList]);
-  const onSideNavToggleButtonHighlight = useCallback(isHighlighted => {
-    setIsSideNavToggleHighlighted(isHighlighted);
-  }, []);
-  return _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 && _jsx(StyledSideNavToggleButtonContainer, {
-      hasNeighbouringContentAtInlineStart: hasNeighbouringContentAtInlineStart,
-      isSideNavCollapsed: isSideNavCollapsed,
-      isSideNavToggleHighlighted: isSideNavToggleHighlighted,
-      odysseyDesignTokens: odysseyDesignTokens,
-      children: _jsx(SideNavToggleButton, {
-        ariaControls: "side-nav-expandable",
-        clickAreaPadding: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? SIDE_NAV_TOGGLE_ICON_SIZE / 2 : 0,
-        isSideNavCollapsed: isSideNavCollapsed,
-        onClick: sideNavExpandClickHandler,
-        onHighlight: onSideNavToggleButtonHighlight,
-        onKeyDown: sideNavExpandKeyHandler
-      })
-    }), _jsx(OdysseyThemeProvider, {
-      children: _jsx(StyledCollapsibleContent, {
-        "data-se": "collapsible-region",
-        isSideNavCollapsed: isSideNavCollapsed,
-        odysseyDesignTokens: odysseyDesignTokens,
-        children: _jsxs(StyledOpacityTransitionContainer, {
-          isSideNavCollapsed: isSideNavCollapsed,
-          odysseyDesignTokens: odysseyDesignTokens,
-          children: [appName || isLoading || logoProps ? _jsx(StyledSideNavHeaderContainer, {
-            borderColor: uiShellContext?.sideNavContrastColors?.fontColor,
-            hasContentScrolled: hasContentScrolled,
-            odysseyDesignTokens: odysseyDesignTokens,
-            children: isLoading && !appName && !logoProps ? _jsx(SideNavHeader, {
-              isLoading: isLoading
-            }) : _jsx(SideNavHeader, {
-              appName: appName,
-              isLoading: isLoading,
-              logoProps: logoProps
-            })
-          }) : _jsx("div", {}), _jsxs(StyledSideNavScrollableContainer, {
-            "data-se": "scrollable-region",
-            hasBlockStartPadding: !appName,
-            odysseyDesignTokens: odysseyDesignTokens,
-            children: [_jsx(StyledSideNavListContainer, {
-              ref: scrollableContentRef,
-              role: "none",
-              children: isLoading ? Array(6).fill(null).map((_, index) => _jsx(LoadingItem, {}, index)) : processSideNavItems(sideNavItemsList).map(item => item.sortableItem.navItem)
-            }), !isLoading && footerItems && !hasCustomFooter && _jsx(StyledSideNavFooter, {
-              odysseyDesignTokens: odysseyDesignTokens,
-              sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
-              children: _jsx(StyledSideNavFooterItemsContainer, {
-                odysseyDesignTokens: odysseyDesignTokens,
-                sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-                children: _jsx(SideNavFooterContent, {
-                  footerItems: footerItems
-                })
-              })
-            })]
-          }), !isLoading && !footerItems && hasCustomFooter && _jsx(StyledPersistentSideNavFooter, {
-            isContentScrollable: isContentScrollable,
-            odysseyDesignTokens: odysseyDesignTokens,
-            sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
-            children: footerComponent
-          })]
-        })
-      })
-    })]
-  });
-};
-const MemoizedSideNav = memo(SideNav);
-MemoizedSideNav.displayName = "SideNav";
-export { MemoizedSideNav as SideNav };
-//# sourceMappingURL=SideNav.js.map