"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