@okta/odyssey-react-mui 1.33.0 → 1.35.0

package/dist/cjs/ui-shell/NarrowUiShellContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NarrowUiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_Button","_Close","_More","_OdysseyDesignTokensContext","_SideNav","_SideNavLogo","_HamburgerMenuIcon","_UiShellProvider","_uiShellSharedConstants","_useScrollState","_useMatchAppElementToUiShellAppArea","_hexToRgb","_jsxRuntime","e","__esModule","default","StyledAppContentArea","styled","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","UI_SHELL_BASE_Z_INDEX","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","SIDE_NAV_WIDTH","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","TOP_NAV_HEIGHT","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","hexToRgb","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","StyledTopNav","isContentScrolled","topNavBackgroundColor","boxShadow","DepthMedium","undefined","clipPath","flexDirection","justifyContent","transition","TransitionDurationMain","TransitionTimingMain","StyledTopNavMenu","minHeight","Spacing2","paddingInline","borderBottomColor","HueNeutral100","borderBottomStyle","BorderStyleMain","borderBottomWidth","BorderWidthMain","StyledTopNavSearch","NarrowUiShellContent","appElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","useState","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","useCallback","useEffect","unsubscribe","subscribeSideNavItemClicked","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","Fragment","children","jsx","onClick","ref","banners","includes","ErrorBoundary","fallback","sideNavBackgroundColor","Button","startIcon","HamburgerMenuIcon","variant","isLoading","_Skeleton2","SideNavLogo","logoProps","rightSideMenu","CloseIcon","MoreIcon","topNavLeftSide","SideNav","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isCollapsed","isCollapsible","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","exports","memo","displayName"],"sources":["../../../src/ui-shell/NarrowUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport {\n  CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport type { HtmlProps } from \"../HtmlProps.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport {\n  SIDE_NAV_WIDTH,\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n  gridArea: \"app-content\",\n  position: \"relative\",\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"left-side app-container right-side\"\n  `,\n  gridTemplateColumns: \"auto 1fr auto\",\n  gridTemplateRows: \"1fr\",\n  height: \"100%\",\n  width: \"100%\",\n});\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  height: \"100%\",\n  gridArea: \"app-container\",\n  overflow: \"hidden\",\n  width: \"100%\",\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst StyledLeftSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isOpen\",\n})<{\n  isOpen: boolean;\n}>(({ isOpen }) => ({\n  display: isOpen ? \"block\" : \"none\",\n  height: \"100%\",\n  gridArea: \"left-side\",\n  overflowY: \"auto\",\n  position: \"absolute\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledRightSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isOpen\" && prop !== \"odysseyDesignTokens\",\n})<{\n  isOpen: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isOpen, odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n  display: isOpen ? \"block\" : \"none\",\n  gridArea: \"right-side\",\n  height: \"100%\",\n  maxWidth: SIDE_NAV_WIDTH,\n  overflowY: \"auto\",\n  position: \"absolute\",\n  right: 0,\n  width: SIDE_NAV_WIDTH,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledMenuLogo = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"inline-flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  height: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing4,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst StyledPageOverlay = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: hexToRgb(\n    odysseyDesignTokens.HueNeutral900,\n  ).asFormattedString.replace(/rgb\\((.+)\\)$/, \"rgba($1, 0.26)\"),\n  gridArea: \"app-content\",\n  height: \"100vh\",\n  left: 0,\n  position: \"absolute\",\n  top: 0,\n  width: \"100vw\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledSideNavContainer = styled(\"div\")({\n  height: \"100%\", // Without this value, side nav won't fill up the height if the content is too short.\n});\n\nconst StyledUiShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners\"\n    \"top-nav\"\n    \"app-content\"\n  `,\n  gridTemplateColumns: \"1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  overflow: \"hidden\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNav = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isContentScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isContentScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isContentScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"stretch\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite || topNavBackgroundColor, // This logic doesn't make sense, but I wanted to leave it here for when we eventually make a decision on `topNavBackgroundColor`. --Kevin Ghadyani\n  boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gridArea: \"top-nav\",\n  height: \"100%\",\n  justifyContent: \"center\",\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledTopNavMenu = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite &&\n    ({\n      borderBottomColor: odysseyDesignTokens.HueNeutral100,\n      borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n      borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n    } as CSSProperties)),\n}));\n\nconst StyledTopNavSearch = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n}));\n\nexport type NarrowUiShellContentProps = Pick<HtmlProps, \"testId\"> &\n  Pick<UiShellNavComponentProps, \"sideNavProps\" | \"topNavProps\"> &\n  UiShellContentProps;\n\nconst NarrowUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding = true,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: NarrowUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);\n  const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);\n\n  const closeSideMenus = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen(false);\n  }, []);\n\n  useEffect(() => {\n    const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {\n      closeSideMenus();\n    });\n\n    return () => {\n      unsubscribe?.();\n    };\n  }, [closeSideMenus, uiShellContext]);\n\n  const toggleLeftSideMenu = useCallback(() => {\n    setIsRightSideMenuOpen(false);\n    setIsLeftSideMenuOpen((isLeftSideMenuOpen) => !isLeftSideMenuOpen);\n  }, []);\n\n  const toggleRightSideMenu = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen((isRightSideMenuOpen) => !isRightSideMenuOpen);\n  }, []);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"compact\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <>\n      {(isLeftSideMenuOpen || isRightSideMenuOpen) && (\n        <StyledPageOverlay\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={closeSideMenus}\n        />\n      )}\n\n      <StyledUiShellContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={parentContainerRef}\n      >\n        <StyledBannersContainer>\n          {optionalComponents?.banners}\n        </StyledBannersContainer>\n\n        {(initialVisibleSections?.includes(\"TopNav\") || topNavProps) && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <StyledTopNav\n              isContentScrolled={isContentScrolled}\n              odysseyDesignTokens={odysseyDesignTokens}\n              topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n            >\n              <StyledTopNavMenu\n                odysseyDesignTokens={odysseyDesignTokens}\n                topNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n              >\n                <StyledMenuLogo odysseyDesignTokens={odysseyDesignTokens}>\n                  <Button\n                    onClick={toggleLeftSideMenu}\n                    startIcon={<HamburgerMenuIcon />}\n                    variant=\"floating\"\n                  />\n\n                  <StyledLogoContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {sideNavProps?.isLoading ? (\n                      //  The skeleton takes the hardcoded dimensions of the Okta logo\n                      <Skeleton variant=\"rounded\" height={24} width={67} />\n                    ) : (\n                      <SideNavLogo {...sideNavProps?.logoProps} />\n                    )}\n                  </StyledLogoContainer>\n                </StyledMenuLogo>\n\n                {optionalComponents?.rightSideMenu && (\n                  <Button\n                    onClick={toggleRightSideMenu}\n                    startIcon={\n                      isRightSideMenuOpen ? <CloseIcon /> : <MoreIcon />\n                    }\n                    variant=\"floating\"\n                  />\n                )}\n              </StyledTopNavMenu>\n\n              {optionalComponents?.topNavLeftSide && (\n                <StyledTopNavSearch odysseyDesignTokens={odysseyDesignTokens}>\n                  {optionalComponents?.topNavLeftSide}\n                </StyledTopNavSearch>\n              )}\n            </StyledTopNav>\n          </ErrorBoundary>\n        )}\n\n        <StyledAppContentArea>\n          <StyledLeftSideContainer isOpen={isLeftSideMenuOpen}>\n            {sideNavProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <StyledSideNavContainer>\n                  <SideNav\n                    {...{\n                      ...{\n                        ...sideNavProps,\n                        // This hides the side nav logo or app name from showing up as we already have one in the narrow top nav.\n                        appName: undefined,\n                        logoProps: undefined,\n                      },\n                      ...(sideNavProps.hasCustomFooter &&\n                      optionalComponents?.sideNavFooter\n                        ? {\n                            footerComponent: optionalComponents.sideNavFooter,\n                            footerItems: undefined,\n                            hasCustomFooter: sideNavProps.hasCustomFooter,\n                          }\n                        : {\n                            footerItems: sideNavProps.footerItems,\n                            hasCustomFooter: false,\n                          }),\n                    }}\n                    isCollapsed={false}\n                    isCollapsible={false}\n                    isObtrusive\n                  />\n                </StyledSideNavContainer>\n              </ErrorBoundary>\n            )}\n          </StyledLeftSideContainer>\n\n          <StyledRightSideContainer\n            isOpen={isRightSideMenuOpen}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <StyledSideNavContainer>\n              {optionalComponents?.rightSideMenu}\n            </StyledSideNavContainer>\n          </StyledRightSideContainer>\n\n          <StyledAppContainer\n            appBackgroundColor={uiShellContext?.appBackgroundColor}\n            tabIndex={0}\n            ref={uiShellAppAreaRef}\n          />\n        </StyledAppContentArea>\n      </StyledUiShellContainer>\n    </>\n  );\n};\n\nconst MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);\nMemoizedNarrowUiShellContent.displayName = \"NarrowUiShellContent\";\n\nexport { MemoizedNarrowUiShellContent as NarrowUiShellContent };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"NarrowUiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_Button","_Close","_More","_OdysseyDesignTokensContext","_SideNav","_SideNavLogo","_HamburgerMenuIcon","_UiShellProvider","_uiShellSharedConstants","_useScrollState","_useMatchAppElementToUiShellAppArea","_hexToRgb","_jsxRuntime","e","__esModule","default","StyledAppContentArea","styled","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","UI_SHELL_BASE_Z_INDEX","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","SIDE_NAV_WIDTH","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","TOP_NAV_HEIGHT","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","hexToRgb","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","StyledTopNav","isContentScrolled","topNavBackgroundColor","boxShadow","DepthMedium","undefined","clipPath","flexDirection","justifyContent","transition","TransitionDurationMain","TransitionTimingMain","StyledTopNavMenu","minHeight","Spacing2","paddingInline","borderBottomColor","HueNeutral100","borderBottomStyle","BorderStyleMain","borderBottomWidth","BorderWidthMain","StyledTopNavSearch","NarrowUiShellContent","appElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","useState","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","useCallback","useEffect","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","Fragment","children","jsx","onClick","ref","banners","includes","ErrorBoundary","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","Button","startIcon","HamburgerMenuIcon","testId","variant","isLoading","_Skeleton2","SideNavLogo","logoProps","rightSideMenu","CloseIcon","MoreIcon","topNavLeftSide","SideNav","sideNavItems","emptySideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","exports","memo","displayName"],"sources":["../../../src/ui-shell/NarrowUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport {\n  CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport type { HtmlProps } from \"../HtmlProps.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport {\n  emptySideNavItems,\n  SIDE_NAV_WIDTH,\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n  gridArea: \"app-content\",\n  position: \"relative\",\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"left-side app-container right-side\"\n  `,\n  gridTemplateColumns: \"auto 1fr auto\",\n  gridTemplateRows: \"1fr\",\n  height: \"100%\",\n  width: \"100%\",\n});\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  height: \"100%\",\n  gridArea: \"app-container\",\n  overflow: \"hidden\",\n  width: \"100%\",\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst StyledLeftSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isOpen\",\n})<{\n  isOpen: boolean;\n}>(({ isOpen }) => ({\n  display: isOpen ? \"block\" : \"none\",\n  height: \"100%\",\n  gridArea: \"left-side\",\n  overflowY: \"auto\",\n  position: \"absolute\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledRightSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isOpen\" && prop !== \"odysseyDesignTokens\",\n})<{\n  isOpen: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isOpen, odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n  display: isOpen ? \"block\" : \"none\",\n  gridArea: \"right-side\",\n  height: \"100%\",\n  maxWidth: SIDE_NAV_WIDTH,\n  overflowY: \"auto\",\n  position: \"absolute\",\n  right: 0,\n  width: SIDE_NAV_WIDTH,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledMenuLogo = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"inline-flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  height: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing4,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst StyledPageOverlay = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: hexToRgb(\n    odysseyDesignTokens.HueNeutral900,\n  ).asFormattedString.replace(/rgb\\((.+)\\)$/, \"rgba($1, 0.26)\"),\n  gridArea: \"app-content\",\n  height: \"100vh\",\n  left: 0,\n  position: \"absolute\",\n  top: 0,\n  width: \"100vw\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledSideNavContainer = styled(\"div\")({\n  height: \"100%\", // Without this value, side nav won't fill up the height if the content is too short.\n});\n\nconst StyledUiShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners\"\n    \"top-nav\"\n    \"app-content\"\n  `,\n  gridTemplateColumns: \"1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  overflow: \"hidden\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNav = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isContentScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isContentScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isContentScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"stretch\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite || topNavBackgroundColor, // This logic doesn't make sense, but I wanted to leave it here for when we eventually make a decision on `topNavBackgroundColor`. --Kevin Ghadyani\n  boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gridArea: \"top-nav\",\n  height: \"100%\",\n  justifyContent: \"center\",\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledTopNavMenu = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite &&\n    ({\n      borderBottomColor: odysseyDesignTokens.HueNeutral100,\n      borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n      borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n    } as CSSProperties)),\n}));\n\nconst StyledTopNavSearch = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n}));\n\nexport type NarrowUiShellContentProps = Pick<HtmlProps, \"testId\"> &\n  Pick<UiShellNavComponentProps, \"sideNavProps\" | \"topNavProps\"> &\n  UiShellContentProps;\n\nconst NarrowUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding = true,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: NarrowUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);\n  const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);\n\n  const closeSideMenus = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen(false);\n  }, []);\n\n  useEffect(() => {\n    const unsubscribeFromCloseRightSideMenu =\n      uiShellContext?.subscribeToCloseRightSideMenu(() => {\n        closeSideMenus();\n      });\n\n    const unsubscribeFromSideNavItemClicked =\n      uiShellContext?.subscribeToCloseSideNavMenu(() => {\n        closeSideMenus();\n      });\n\n    return () => {\n      unsubscribeFromCloseRightSideMenu?.();\n      unsubscribeFromSideNavItemClicked?.();\n    };\n  }, [closeSideMenus, uiShellContext]);\n\n  const toggleLeftSideMenu = useCallback(() => {\n    setIsRightSideMenuOpen(false);\n    setIsLeftSideMenuOpen((isLeftSideMenuOpen) => !isLeftSideMenuOpen);\n  }, []);\n\n  const toggleRightSideMenu = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen((isRightSideMenuOpen) => !isRightSideMenuOpen);\n  }, []);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"compact\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <>\n      {(isLeftSideMenuOpen || isRightSideMenuOpen) && (\n        <StyledPageOverlay\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={closeSideMenus}\n        />\n      )}\n\n      <StyledUiShellContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={parentContainerRef}\n      >\n        <StyledBannersContainer>\n          {optionalComponents?.banners}\n        </StyledBannersContainer>\n\n        {(initialVisibleSections?.includes(\"TopNav\") || topNavProps) && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <StyledTopNav\n              isContentScrolled={isContentScrolled}\n              odysseyDesignTokens={odysseyDesignTokens}\n              topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n            >\n              <StyledTopNavMenu\n                odysseyDesignTokens={odysseyDesignTokens}\n                topNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n              >\n                <StyledMenuLogo odysseyDesignTokens={odysseyDesignTokens}>\n                  {(sideNavProps?.isCollapsible ||\n                    !sideNavProps?.isCollapsed) && (\n                    <Button\n                      onClick={toggleLeftSideMenu}\n                      startIcon={<HamburgerMenuIcon />}\n                      testId=\"sidenav-menu--icon\"\n                      variant=\"floating\"\n                    />\n                  )}\n\n                  <StyledLogoContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {sideNavProps?.isLoading ? (\n                      //  The skeleton takes the hardcoded dimensions of the Okta logo\n                      <Skeleton variant=\"rounded\" height={24} width={67} />\n                    ) : (\n                      <SideNavLogo {...sideNavProps?.logoProps} />\n                    )}\n                  </StyledLogoContainer>\n                </StyledMenuLogo>\n\n                {optionalComponents?.rightSideMenu && (\n                  <Button\n                    onClick={toggleRightSideMenu}\n                    startIcon={\n                      isRightSideMenuOpen ? <CloseIcon /> : <MoreIcon />\n                    }\n                    testId=\"userprofile-menu--icon\"\n                    variant=\"floating\"\n                  />\n                )}\n              </StyledTopNavMenu>\n\n              {optionalComponents?.topNavLeftSide && (\n                <StyledTopNavSearch odysseyDesignTokens={odysseyDesignTokens}>\n                  {optionalComponents?.topNavLeftSide}\n                </StyledTopNavSearch>\n              )}\n            </StyledTopNav>\n          </ErrorBoundary>\n        )}\n\n        <StyledAppContentArea>\n          <StyledLeftSideContainer isOpen={isLeftSideMenuOpen}>\n            {\n              /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n              initialVisibleSections?.includes(\"SideNav\") &&\n                sideNavProps === undefined && (\n                  <ErrorBoundary fallback={null} onError={onError}>\n                    <SideNav isLoading sideNavItems={emptySideNavItems} />\n                  </ErrorBoundary>\n                )\n            }\n\n            {sideNavProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <StyledSideNavContainer>\n                  <SideNav\n                    {...{\n                      ...{\n                        ...sideNavProps,\n                        // This hides the side nav logo or app name from showing up as we already have one in the narrow top nav.\n                        appName: undefined,\n                        logoProps: undefined,\n                      },\n                      ...(sideNavProps.hasCustomFooter &&\n                      optionalComponents?.sideNavFooter\n                        ? {\n                            footerComponent: optionalComponents.sideNavFooter,\n                            footerItems: undefined,\n                            hasCustomFooter: sideNavProps.hasCustomFooter,\n                          }\n                        : {\n                            footerItems: sideNavProps.footerItems,\n                            hasCustomFooter: false,\n                          }),\n                    }}\n                    isCollapsed={false}\n                    isCollapsible={false}\n                    isObtrusive\n                  />\n                </StyledSideNavContainer>\n              </ErrorBoundary>\n            )}\n          </StyledLeftSideContainer>\n\n          <StyledRightSideContainer\n            isOpen={isRightSideMenuOpen}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <StyledSideNavContainer>\n              {optionalComponents?.rightSideMenu}\n            </StyledSideNavContainer>\n          </StyledRightSideContainer>\n\n          <StyledAppContainer\n            appBackgroundColor={uiShellContext?.appBackgroundColor}\n            tabIndex={0}\n            ref={uiShellAppAreaRef}\n          />\n        </StyledAppContentArea>\n      </StyledUiShellContainer>\n    </>\n  );\n};\n\nconst MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);\nMemoizedNarrowUiShellContent.displayName = \"NarrowUiShellContent\";\n\nexport { MemoizedNarrowUiShellContent as NarrowUiShellContent };\n"],"mappings":"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","ignoreList":[]}

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

@@ -367,7 +367,7 @@ const SideNav = ({
     });
     updateSideNavItemsList(updatedSideNavItems);
     if (isCollapsed || isObtrusive) {
-      uiShellContext?.publishSideNavItemClicked();
+      uiShellContext?.closeSideNavMenu();
     }
   }, [isCollapsed, isObtrusive, sideNavItemsList, uiShellContext]);
   const processedSideNavItems = (0, _react.useMemo)(() => {
@@ -414,7 +414,7 @@ const SideNav = ({
   }, [sideNavExpandClickHandler]);
   (0, _react.useEffect)(() => {
     if (isCollapsed) {
-      const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {
+      const unsubscribe = uiShellContext?.subscribeToCloseSideNavMenu(() => {
         onCollapse?.();
         setIsSideNavCollapsed(true);
       });

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

@@ -1 +1 @@
-{"version":3,"file":"SideNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactI18next","_sortable","_reactErrorBoundary","_NavAccordion","_OdysseyDesignTokensContext","_OdysseyThemeProvider","_SideNavHeader","_SideNavItemContent","_SideNavFooterContent","_SideNavItemContentContext","_SideNavToggleButton","_SortableList","_Typography","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledCollapsibleContent","styled","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","SIDE_NAV_WIDTH","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNavContainer","backgroundColor","isAppContentWhiteBackground","HueNeutralWhite","width","borderRightWidth","BorderWidthMain","borderRightStyle","BorderStyleMain","borderRightColor","HueNeutral100","HueNeutral200","content","right","top","transform","Spacing2","zIndex","UI_SHELL_OVERLAY_Z_INDEX","Spacing3","SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","StyledSideNavHeaderContainer","borderColor","hasContentScrolled","flexShrink","borderBottomWidth","borderBottomStyle","borderBottomColor","concat","StyledSideNavListContainer","padding","listStyle","listStyleType","margin","StyledSideNavScrollableContainer","overflowY","paddingInline","StyledSectionHeaderContainer","contrastFontColor","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","StyledSideNavFooter","sideNavBackgroundColor","StyledPersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","UI_SHELL_BASE_Z_INDEX","boxShadow","StyledSideNavFooterItemsContainer","sideNavContrastColors","flexWrap","alignItems","fontSize","TypographySizeOverline","fontColor","textDecoration","HueNeutral900","StyledLoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","useOdysseyDesignTokens","jsxs","children","jsx","_Skeleton2","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCollapsed","isCompact","isLoading","isObtrusive","logoProps","onCollapse","onExpand","onSort","sideNavItems","setIsSideNavCollapsed","useState","setHasContentScrolled","setIsContentScrollable","sideNavItemsList","updateSideNavItemsList","uiShellContext","useUiShellContext","t","useTranslation","scrollableContentRef","useRef","resizeObserverRef","intersectionObserverRef","blankElement","useMemo","useEffect","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","useCallback","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","publishSideNavItemClicked","processedSideNavItems","childNavItems","childProps","isDisabled","isSortable","navItem","SideNavItemContentContext","Provider","value","SideNavItemContent","scrollRef","onItemSelected","translate","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","unsubscribe","subscribeSideNavItemClicked","setSortedItems","parentId","activeId","activeIndex","overIndex","sortedSideNavItems","arrayMove","appBackgroundColor","SideNavToggleButton","ariaControls","onClick","onKeyDown","OdysseyThemeProvider","SideNavHeader","role","ref","fill","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","ErrorBoundary","fallback","Overline","component","StyledSideNavListItem","disabled","NavAccordion","SortableList","items","onChange","renderItem","sortableItem","Item","createElement","SideNavFooterContent","MemoizedSideNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  KeyboardEventHandler,\n  CSSProperties,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Property } from \"csstype\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { NavAccordion } from \"./NavAccordion.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport type { SideNavProps } from \"./types.js\";\nimport { SideNavHeader } from \"./SideNavHeader.js\";\nimport {\n  SideNavItemContent,\n  StyledSideNavListItem,\n} from \"./SideNavItemContent.js\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent.js\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext.js\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton.js\";\nimport { SortableList } from \"./SortableList/SortableList.js\";\nimport { Overline } from \"../../Typography.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n  SIDE_NAV_WIDTH,\n  UI_SHELL_BASE_Z_INDEX,\n  UI_SHELL_OVERLAY_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSideNavCollapsed: boolean;\n}>(({ odysseyDesignTokens, isSideNavCollapsed }) => ({\n  position: \"relative\",\n  display: \"grid\",\n  gridTemplateColumns: SIDE_NAV_WIDTH,\n  height: \"100%\",\n  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  overflow: \"hidden\",\n\n  ...(isSideNavCollapsed &&\n    ({\n      gridTemplateColumns: 0,\n      opacity: 0,\n    } as CSSProperties)),\n}));\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    display: \"grid\",\n    gridTemplateRows: \"max-content 1fr max-content\",\n    height: \"100%\",\n    transition: `opacity 50ms`,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n    overflow: \"hidden\",\n\n    ...(isSideNavCollapsed &&\n      ({\n        opacity: 0,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledSideNavContainer = styled(\"nav\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"backgroundColor\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isAppContentWhiteBackground\" &&\n    prop !== \"isSideNavCollapsed\",\n})<{\n  isAppContentWhiteBackground: boolean;\n  backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    backgroundColor,\n    isAppContentWhiteBackground,\n    isSideNavCollapsed,\n    odysseyDesignTokens,\n  }) => ({\n    backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,\n    height: \"100%\",\n    position: \"relative\",\n    width: \"fit-content\",\n\n    ...(isAppContentWhiteBackground &&\n      ({\n        borderRightWidth: odysseyDesignTokens.BorderWidthMain,\n        borderRightStyle:\n          odysseyDesignTokens.BorderStyleMain as Property.BorderRightStyle,\n        borderRightColor: odysseyDesignTokens.HueNeutral100,\n      } as CSSProperties)),\n\n    \"&::after\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral200,\n      content: \"''\",\n      height: \"100%\",\n      opacity: 0,\n      position: \"absolute\",\n      right: 0,\n      top: 0,\n      transform: `translateX(0)`,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      width: odysseyDesignTokens.Spacing2,\n      zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n    },\n\n    \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n      {\n        ...(isSideNavCollapsed &&\n          ({\n            \"&::after\": {\n              opacity: 1,\n              transform: `translateX(100%)`,\n            } as CSSProperties,\n\n            \"[data-sidenav-toggle='true']\": {\n              transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n            } as CSSProperties,\n          } as CSSProperties)),\n      },\n\n    \"[data-sidenav-toggle='true']\": {\n      position: \"absolute\",\n      top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n      right: 0,\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      transform: `translate3d(100%, 0, 0)`,\n    },\n  }),\n);\n\nconst StyledSideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"borderColor\" &&\n    prop !== \"hasContentScrolled\" &&\n    prop !== \"odysseyDesignTokens\",\n})<{\n  borderColor: ContrastColors[\"fontColor\"];\n  hasContentScrolled: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ borderColor, hasContentScrolled, odysseyDesignTokens }) => ({\n  flexShrink: 0,\n  // The bottom border should appear only if the scrollable region has been scrolled\n  ...(hasContentScrolled &&\n    ({\n      borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n      borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n      borderBottomColor: odysseyDesignTokens.HueNeutral100,\n\n      ...(borderColor &&\n        ({\n          borderBottomColor: borderColor.concat(\"15\"),\n        } as CSSProperties)),\n    } as CSSProperties)),\n}));\n\nconst StyledSideNavListContainer = styled(\"ul\")(() => ({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n  margin: 0,\n}));\n\nconst StyledSideNavScrollableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"inline-grid\",\n  gridTemplateRows: \"1fr max-content\",\n  overflowY: \"auto\",\n  paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst StyledSectionHeaderContainer = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n  ({\n    contrastFontColor,\n    odysseyDesignTokens,\n  }: {\n    contrastFontColor: ContrastColors[\"fontColor\"];\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    paddingBlock: odysseyDesignTokens.Spacing1,\n    paddingInline: odysseyDesignTokens.Spacing4,\n    marginBlock: `${odysseyDesignTokens.Spacing3}`,\n    color: contrastFontColor || odysseyDesignTokens.HueNeutral600,\n  }),\n);\n\nconst StyledSideNavFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"sideNavBackgroundColor\",\n})(\n  ({\n    odysseyDesignTokens,\n    sideNavBackgroundColor,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  }) => ({\n    flexShrink: 0,\n    padding: odysseyDesignTokens.Spacing4,\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n    ...(sideNavBackgroundColor &&\n      ({\n        backgroundColor: sideNavBackgroundColor,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {\n  shouldForwardProp: (prop) =>\n    prop !== \"isContentScrollable\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavBackgroundColor\",\n})(\n  ({\n    isContentScrollable,\n    odysseyDesignTokens,\n    sideNavBackgroundColor,\n  }: {\n    isContentScrollable: boolean;\n    odysseyDesignTokens: DesignTokens;\n    sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  }) => ({\n    transitionProperty: \"box-shadow\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n    zIndex: UI_SHELL_BASE_Z_INDEX,\n\n    // The box shadow should appear above the footer only if the scrollable region has overflow\n    ...(isContentScrollable &&\n      ({\n        boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n      } as CSSProperties)),\n\n    ...(sideNavBackgroundColor &&\n      ({\n        backgroundColor: sideNavBackgroundColor,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledSideNavFooterItemsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"sideNavContrastColors\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, sideNavContrastColors }) => ({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n  \"a, span\": {\n    color: odysseyDesignTokens.HueNeutral600,\n    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    \"&:visited\": {\n      color: odysseyDesignTokens.HueNeutral600,\n\n      ...(sideNavContrastColors?.fontColor &&\n        ({\n          color: sideNavContrastColors?.fontColor,\n        } as CSSProperties)),\n    },\n\n    \"&:hover\": {\n      textDecoration: \"none\",\n      color: odysseyDesignTokens.HueNeutral900,\n\n      ...(sideNavContrastColors?.fontColor &&\n        ({\n          color: sideNavContrastColors?.fontColor,\n        } as CSSProperties)),\n    },\n\n    ...(sideNavContrastColors?.fontColor &&\n      ({\n        color: sideNavContrastColors?.fontColor,\n      } as CSSProperties)),\n  },\n}));\n\nconst StyledLoadingItemContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n  scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  return (\n    <StyledLoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Skeleton\n        variant=\"circular\"\n        width={odysseyDesignTokens.Spacing4}\n        height={odysseyDesignTokens.Spacing4}\n      />\n      <Skeleton variant=\"rounded\" width=\"100%\" />\n    </StyledLoadingItemContainer>\n  );\n};\n\nconst SideNav = ({\n  appName,\n  footerComponent,\n  footerItems,\n  hasCustomFooter,\n  isCollapsible,\n  isCollapsed = false,\n  isCompact,\n  isLoading,\n  isObtrusive,\n  logoProps,\n  onCollapse,\n  onExpand,\n  onSort,\n  sideNavItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setIsSideNavCollapsed] = useState(isCollapsed);\n  const [hasContentScrolled, setHasContentScrolled] = useState(false);\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n  const uiShellContext = useUiShellContext();\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const scrollableContentRef = useRef<HTMLUListElement>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n\n  const blankElement = useMemo(() => <div />, []);\n\n  // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n  // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n  // to update!\n  useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n  // update sidenav collapse status\n  useEffect(() => setIsSideNavCollapsed(isCollapsed), [isCollapsed]);\n\n  useEffect(() => {\n    // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n    const updateIsContentScrollable = () => {\n      if (\n        scrollableContentRef.current &&\n        scrollableContentRef.current.parentElement\n      ) {\n        setIsContentScrollable(\n          getHasScrollableContent(scrollableContentRef.current.parentElement),\n        );\n      }\n    };\n\n    // If the window is resized, we may need to re-determine if the scrollable container has overflow\n    // Setup a ResizeObserver to know if the size of the scrollableContent changes\n    let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n    if (!resizeObserverRef.current) {\n      resizeObserverRef.current = new ResizeObserver(() => {\n        cancelAnimationFrame(resizeObserverDebounceTimer);\n        resizeObserverDebounceTimer = requestAnimationFrame(\n          updateIsContentScrollable,\n        );\n      });\n    }\n\n    if (resizeObserverRef.current && scrollableContentRef.current) {\n      // Observe the <ul> itself (in case it changes size due to the content expanding)\n      resizeObserverRef.current.observe(scrollableContentRef.current);\n      if (scrollableContentRef.current.parentElement) {\n        // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n        resizeObserverRef.current.observe(\n          scrollableContentRef.current.parentElement,\n        );\n      }\n    }\n\n    // Determine if the scrollable container has overflow or not on load\n    updateIsContentScrollable();\n\n    // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n    // the scrollable container\n    if (!intersectionObserverRef.current && scrollableContentRef.current) {\n      intersectionObserverRef.current = new IntersectionObserver(\n        (entries) => {\n          // If isIntersecting is true, then we're at the top of the scroll container\n          // If isIntersecting is false, some scrolling has occurred.\n          // The entries must be sorted by time and we only really need to look at the latest one\n          const isIntersecting = entries\n            .slice()\n            .sort((a, b) => a.time - b.time)\n            .at(0)?.isIntersecting;\n          setHasContentScrolled(!isIntersecting);\n        },\n        {\n          root: scrollableContentRef.current.parentElement,\n          threshold: 1.0,\n        },\n      );\n    }\n\n    if (intersectionObserverRef.current && scrollableContentRef.current) {\n      const ulElement = scrollableContentRef.current;\n      const [liElement] = Array.from(ulElement?.children || []);\n\n      if (liElement) {\n        intersectionObserverRef.current.observe(liElement);\n      }\n    }\n\n    // Cleanup when unmounted:\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      if (intersectionObserverRef.current) {\n        intersectionObserverRef.current.disconnect();\n        intersectionObserverRef.current = null;\n      }\n      cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n    };\n  }, [sideNavItemsList]);\n\n  const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n  /**\n   * Look through the sideNavItems and determine which is the first node\n   * with isSelected. This should be the node we set a ref on in order to\n   * call scrollIntoView in the effect\n   */\n  const firstSideNavItemIdWithIsSelected = useMemo(() => {\n    const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n      sideNavItem.nestedNavItems\n        ? [sideNavItem, ...sideNavItem.nestedNavItems]\n        : sideNavItem,\n    );\n    const firstItemWithIsSelected = flattenedItems.find(\n      (sideNavItem) => sideNavItem.isSelected,\n    );\n    return firstItemWithIsSelected?.id;\n  }, [sideNavItemsList]);\n  /**\n   * Once we've rendered and if we have an item to scroll to, do the scroll action.\n   * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n   * once the actual ref is populated.\n   */\n  useEffect(() => {\n    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n      scrollIntoViewRef.current.scrollIntoView();\n    }\n  }, [firstSideNavItemIdWithIsSelected]);\n\n  /**\n   * We only want to put a ref on a node iff it is the first selected node.\n   * This function returns the ref only if the ID provided matches the first\n   * selected node, otherwise returns undefined (so that the node has no ref)\n   */\n  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n    (itemId: string) =>\n      itemId === firstSideNavItemIdWithIsSelected\n        ? scrollIntoViewRef\n        : undefined,\n    [firstSideNavItemIdWithIsSelected],\n  );\n\n  const sideNavItemContentProviderValue = useMemo(\n    () => ({ isCompact, depth: 1 }),\n    [isCompact],\n  );\n\n  const setSelectedItem = useCallback(\n    (selectedItemId: string) => {\n      const updatedSideNavItems = sideNavItemsList.map((item) => {\n        if (item.id === selectedItemId) {\n          item.isSelected = true;\n        } else if (item.isSelected) {\n          delete item.isSelected;\n        }\n\n        return item.nestedNavItems\n          ? {\n              ...item,\n              nestedNavItems: item.nestedNavItems.map((childItem) => {\n                if (childItem.id === selectedItemId) {\n                  childItem.isSelected = true;\n                } else if (childItem.isSelected) {\n                  delete childItem.isSelected;\n                }\n                return childItem;\n              }),\n            }\n          : item;\n      });\n      updateSideNavItemsList(updatedSideNavItems);\n\n      if (isCollapsed || isObtrusive) {\n        uiShellContext?.publishSideNavItemClicked();\n      }\n    },\n    [isCollapsed, isObtrusive, sideNavItemsList, uiShellContext],\n  );\n\n  const processedSideNavItems = useMemo(() => {\n    return sideNavItemsList?.map((item) => ({\n      ...item,\n      childNavItems: item.nestedNavItems?.map((childProps) => {\n        return {\n          id: childProps.id,\n          isSelected: childProps.isSelected,\n          isDisabled: childProps.isDisabled,\n          isSortable: childProps.isSortable,\n          navItem: (\n            <SideNavItemContentContext.Provider\n              value={{\n                ...sideNavItemContentProviderValue,\n                depth: 2,\n                isSortable: item.isSortable,\n              }}\n              key={childProps.id}\n            >\n              <SideNavItemContent\n                {...childProps}\n                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n                onItemSelected={setSelectedItem}\n                translate={childProps.translate}\n              />\n            </SideNavItemContentContext.Provider>\n          ),\n        };\n      }),\n    }));\n  }, [\n    getRefIfThisIsFirstNodeWithIsSelected,\n    sideNavItemsList,\n    sideNavItemContentProviderValue,\n    setSelectedItem,\n  ]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setIsSideNavCollapsed((isSideNavCollapsed) => {\n      if (isSideNavCollapsed) {\n        onExpand?.();\n      } else {\n        onCollapse?.();\n      }\n\n      return !isSideNavCollapsed;\n    });\n  }, [onExpand, onCollapse]);\n\n  const sideNavExpandKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        sideNavExpandClickHandler();\n      }\n    },\n    [sideNavExpandClickHandler],\n  );\n\n  useEffect(() => {\n    if (isCollapsed) {\n      const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {\n        onCollapse?.();\n        setIsSideNavCollapsed(true);\n      });\n\n      return () => {\n        unsubscribe?.();\n      };\n    }\n\n    return () => {};\n  }, [isCollapsed, onCollapse, uiShellContext]);\n\n  const setSortedItems = useCallback(\n    (\n      parentId: string,\n      activeId: UniqueIdentifier,\n      activeIndex: number,\n      overIndex: number,\n    ) => {\n      const sortedSideNavItems = sideNavItemsList.map((item) =>\n        item.id === parentId && item.nestedNavItems\n          ? {\n              ...item,\n              nestedNavItems: arrayMove(\n                item.nestedNavItems,\n                activeIndex,\n                overIndex,\n              ),\n            }\n          : item,\n      );\n      updateSideNavItemsList(sortedSideNavItems);\n      onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);\n    },\n    [onSort, sideNavItemsList],\n  );\n\n  return (\n    <StyledSideNavContainer\n      aria-label={t(\"navigation.label\")}\n      backgroundColor={uiShellContext?.sideNavBackgroundColor}\n      id=\"side-nav-expandable\"\n      isAppContentWhiteBackground={\n        uiShellContext?.appBackgroundColor ===\n        odysseyDesignTokens.HueNeutralWhite\n      }\n      isSideNavCollapsed={isSideNavCollapsed}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {isCollapsible && (\n        <SideNavToggleButton\n          ariaControls=\"side-nav-expandable\"\n          isSideNavCollapsed={isSideNavCollapsed}\n          onClick={sideNavExpandClickHandler}\n          onKeyDown={sideNavExpandKeyHandler}\n        />\n      )}\n\n      <OdysseyThemeProvider>\n        <StyledCollapsibleContent\n          data-se=\"collapsible-region\"\n          isSideNavCollapsed={isSideNavCollapsed}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <StyledOpacityTransitionContainer\n            isSideNavCollapsed={isSideNavCollapsed}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {appName || isLoading || logoProps ? (\n              <StyledSideNavHeaderContainer\n                hasContentScrolled={hasContentScrolled}\n                odysseyDesignTokens={odysseyDesignTokens}\n                borderColor={uiShellContext?.sideNavContrastColors?.fontColor}\n              >\n                {isLoading && !appName && !logoProps ? (\n                  <SideNavHeader isLoading={isLoading} />\n                ) : (\n                  <SideNavHeader\n                    appName={appName}\n                    isLoading={isLoading}\n                    logoProps={logoProps}\n                  />\n                )}\n              </StyledSideNavHeaderContainer>\n            ) : (\n              <div />\n            )}\n\n            <StyledSideNavScrollableContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              data-se=\"scrollable-region\"\n            >\n              <StyledSideNavListContainer\n                role=\"none\"\n                ref={scrollableContentRef}\n              >\n                {isLoading\n                  ? Array(6)\n                      .fill(null)\n                      .map((_, index) => <LoadingItem key={index} />)\n                  : processedSideNavItems?.map((item) => {\n                      const {\n                        id,\n                        label,\n                        isSectionHeader,\n                        startIcon,\n                        childNavItems,\n                        isSortable,\n                        isDefaultExpanded,\n                        isDisabled,\n                        isExpanded,\n                      } = item;\n\n                      if (isSectionHeader) {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <StyledSectionHeaderContainer\n                              contrastFontColor={\n                                uiShellContext?.sideNavContrastColors?.fontColor\n                              }\n                              id={id}\n                              key={id}\n                              odysseyDesignTokens={odysseyDesignTokens}\n                            >\n                              <Overline component=\"h3\">{label}</Overline>\n                            </StyledSectionHeaderContainer>\n                          </ErrorBoundary>\n                        );\n                      } else if (childNavItems) {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <StyledSideNavListItem\n                              id={id}\n                              key={id}\n                              odysseyDesignTokens={odysseyDesignTokens}\n                              disabled={isDisabled}\n                              aria-disabled={isDisabled}\n                            >\n                              <NavAccordion\n                                label={label}\n                                isCompact={isCompact}\n                                isDefaultExpanded={isDefaultExpanded}\n                                isExpanded={isExpanded}\n                                startIcon={startIcon}\n                                isDisabled={isDisabled}\n                              >\n                                <StyledSideNavListContainer role=\"none\">\n                                  {isSortable ? (\n                                    <SortableList\n                                      parentId={item.id}\n                                      items={childNavItems}\n                                      onChange={setSortedItems}\n                                      renderItem={(sortableItem) => (\n                                        <SortableList.Item\n                                          id={sortableItem.id}\n                                          isDisabled={sortableItem.isDisabled}\n                                          isSelected={sortableItem.isSelected}\n                                          isSortable={sortableItem.isSortable}\n                                        >\n                                          {sortableItem.navItem}\n                                        </SortableList.Item>\n                                      )}\n                                    />\n                                  ) : (\n                                    childNavItems.map((item) => item.navItem)\n                                  )}\n                                </StyledSideNavListContainer>\n                              </NavAccordion>\n                            </StyledSideNavListItem>\n                          </ErrorBoundary>\n                        );\n                      } else {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <SideNavItemContentContext.Provider\n                              key={item.id}\n                              value={sideNavItemContentProviderValue}\n                            >\n                              <SideNavItemContent\n                                {...item}\n                                key={item.id}\n                                onItemSelected={setSelectedItem}\n                                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n                                  item.id,\n                                )}\n                                startIcon={item.startIcon}\n                              />\n                            </SideNavItemContentContext.Provider>\n                          </ErrorBoundary>\n                        );\n                      }\n                    })}\n              </StyledSideNavListContainer>\n              {!isLoading && footerItems && !hasCustomFooter && (\n                <StyledSideNavFooter\n                  odysseyDesignTokens={odysseyDesignTokens}\n                  sideNavBackgroundColor={\n                    uiShellContext?.sideNavBackgroundColor\n                  }\n                >\n                  <StyledSideNavFooterItemsContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                    sideNavContrastColors={\n                      uiShellContext?.sideNavContrastColors\n                    }\n                  >\n                    <SideNavFooterContent footerItems={footerItems} />\n                  </StyledSideNavFooterItemsContainer>\n                </StyledSideNavFooter>\n              )}\n            </StyledSideNavScrollableContainer>\n            {!isLoading && !footerItems && hasCustomFooter && (\n              <StyledPersistentSideNavFooter\n                isContentScrollable={isContentScrollable}\n                odysseyDesignTokens={odysseyDesignTokens}\n                sideNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n              >\n                {footerComponent}\n              </StyledPersistentSideNavFooter>\n            )}\n          </StyledOpacityTransitionContainer>\n        </StyledCollapsibleContent>\n      </OdysseyThemeProvider>\n    </StyledSideNavContainer>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SideNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactI18next","_sortable","_reactErrorBoundary","_NavAccordion","_OdysseyDesignTokensContext","_OdysseyThemeProvider","_SideNavHeader","_SideNavItemContent","_SideNavFooterContent","_SideNavItemContentContext","_SideNavToggleButton","_SortableList","_Typography","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledCollapsibleContent","styled","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","SIDE_NAV_WIDTH","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNavContainer","backgroundColor","isAppContentWhiteBackground","HueNeutralWhite","width","borderRightWidth","BorderWidthMain","borderRightStyle","BorderStyleMain","borderRightColor","HueNeutral100","HueNeutral200","content","right","top","transform","Spacing2","zIndex","UI_SHELL_OVERLAY_Z_INDEX","Spacing3","SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","StyledSideNavHeaderContainer","borderColor","hasContentScrolled","flexShrink","borderBottomWidth","borderBottomStyle","borderBottomColor","concat","StyledSideNavListContainer","padding","listStyle","listStyleType","margin","StyledSideNavScrollableContainer","overflowY","paddingInline","StyledSectionHeaderContainer","contrastFontColor","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","StyledSideNavFooter","sideNavBackgroundColor","StyledPersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","UI_SHELL_BASE_Z_INDEX","boxShadow","StyledSideNavFooterItemsContainer","sideNavContrastColors","flexWrap","alignItems","fontSize","TypographySizeOverline","fontColor","textDecoration","HueNeutral900","StyledLoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","useOdysseyDesignTokens","jsxs","children","jsx","_Skeleton2","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCollapsed","isCompact","isLoading","isObtrusive","logoProps","onCollapse","onExpand","onSort","sideNavItems","setIsSideNavCollapsed","useState","setHasContentScrolled","setIsContentScrollable","sideNavItemsList","updateSideNavItemsList","uiShellContext","useUiShellContext","t","useTranslation","scrollableContentRef","useRef","resizeObserverRef","intersectionObserverRef","blankElement","useMemo","useEffect","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","useCallback","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","closeSideNavMenu","processedSideNavItems","childNavItems","childProps","isDisabled","isSortable","navItem","SideNavItemContentContext","Provider","value","SideNavItemContent","scrollRef","onItemSelected","translate","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","unsubscribe","subscribeToCloseSideNavMenu","setSortedItems","parentId","activeId","activeIndex","overIndex","sortedSideNavItems","arrayMove","appBackgroundColor","SideNavToggleButton","ariaControls","onClick","onKeyDown","OdysseyThemeProvider","SideNavHeader","role","ref","fill","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","ErrorBoundary","fallback","Overline","component","StyledSideNavListItem","disabled","NavAccordion","SortableList","items","onChange","renderItem","sortableItem","Item","createElement","SideNavFooterContent","MemoizedSideNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  KeyboardEventHandler,\n  CSSProperties,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Property } from \"csstype\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { NavAccordion } from \"./NavAccordion.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport type { SideNavProps } from \"./types.js\";\nimport { SideNavHeader } from \"./SideNavHeader.js\";\nimport {\n  SideNavItemContent,\n  StyledSideNavListItem,\n} from \"./SideNavItemContent.js\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent.js\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext.js\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton.js\";\nimport { SortableList } from \"./SortableList/SortableList.js\";\nimport { Overline } from \"../../Typography.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n  SIDE_NAV_WIDTH,\n  UI_SHELL_BASE_Z_INDEX,\n  UI_SHELL_OVERLAY_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSideNavCollapsed: boolean;\n}>(({ odysseyDesignTokens, isSideNavCollapsed }) => ({\n  position: \"relative\",\n  display: \"grid\",\n  gridTemplateColumns: SIDE_NAV_WIDTH,\n  height: \"100%\",\n  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  overflow: \"hidden\",\n\n  ...(isSideNavCollapsed &&\n    ({\n      gridTemplateColumns: 0,\n      opacity: 0,\n    } as CSSProperties)),\n}));\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    display: \"grid\",\n    gridTemplateRows: \"max-content 1fr max-content\",\n    height: \"100%\",\n    transition: `opacity 50ms`,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n    overflow: \"hidden\",\n\n    ...(isSideNavCollapsed &&\n      ({\n        opacity: 0,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledSideNavContainer = styled(\"nav\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"backgroundColor\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isAppContentWhiteBackground\" &&\n    prop !== \"isSideNavCollapsed\",\n})<{\n  isAppContentWhiteBackground: boolean;\n  backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    backgroundColor,\n    isAppContentWhiteBackground,\n    isSideNavCollapsed,\n    odysseyDesignTokens,\n  }) => ({\n    backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,\n    height: \"100%\",\n    position: \"relative\",\n    width: \"fit-content\",\n\n    ...(isAppContentWhiteBackground &&\n      ({\n        borderRightWidth: odysseyDesignTokens.BorderWidthMain,\n        borderRightStyle:\n          odysseyDesignTokens.BorderStyleMain as Property.BorderRightStyle,\n        borderRightColor: odysseyDesignTokens.HueNeutral100,\n      } as CSSProperties)),\n\n    \"&::after\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral200,\n      content: \"''\",\n      height: \"100%\",\n      opacity: 0,\n      position: \"absolute\",\n      right: 0,\n      top: 0,\n      transform: `translateX(0)`,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      width: odysseyDesignTokens.Spacing2,\n      zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n    },\n\n    \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n      {\n        ...(isSideNavCollapsed &&\n          ({\n            \"&::after\": {\n              opacity: 1,\n              transform: `translateX(100%)`,\n            } as CSSProperties,\n\n            \"[data-sidenav-toggle='true']\": {\n              transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n            } as CSSProperties,\n          } as CSSProperties)),\n      },\n\n    \"[data-sidenav-toggle='true']\": {\n      position: \"absolute\",\n      top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n      right: 0,\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      transform: `translate3d(100%, 0, 0)`,\n    },\n  }),\n);\n\nconst StyledSideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"borderColor\" &&\n    prop !== \"hasContentScrolled\" &&\n    prop !== \"odysseyDesignTokens\",\n})<{\n  borderColor: ContrastColors[\"fontColor\"];\n  hasContentScrolled: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ borderColor, hasContentScrolled, odysseyDesignTokens }) => ({\n  flexShrink: 0,\n  // The bottom border should appear only if the scrollable region has been scrolled\n  ...(hasContentScrolled &&\n    ({\n      borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n      borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n      borderBottomColor: odysseyDesignTokens.HueNeutral100,\n\n      ...(borderColor &&\n        ({\n          borderBottomColor: borderColor.concat(\"15\"),\n        } as CSSProperties)),\n    } as CSSProperties)),\n}));\n\nconst StyledSideNavListContainer = styled(\"ul\")(() => ({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n  margin: 0,\n}));\n\nconst StyledSideNavScrollableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"inline-grid\",\n  gridTemplateRows: \"1fr max-content\",\n  overflowY: \"auto\",\n  paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst StyledSectionHeaderContainer = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n  ({\n    contrastFontColor,\n    odysseyDesignTokens,\n  }: {\n    contrastFontColor: ContrastColors[\"fontColor\"];\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    paddingBlock: odysseyDesignTokens.Spacing1,\n    paddingInline: odysseyDesignTokens.Spacing4,\n    marginBlock: `${odysseyDesignTokens.Spacing3}`,\n    color: contrastFontColor || odysseyDesignTokens.HueNeutral600,\n  }),\n);\n\nconst StyledSideNavFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"sideNavBackgroundColor\",\n})(\n  ({\n    odysseyDesignTokens,\n    sideNavBackgroundColor,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  }) => ({\n    flexShrink: 0,\n    padding: odysseyDesignTokens.Spacing4,\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n    ...(sideNavBackgroundColor &&\n      ({\n        backgroundColor: sideNavBackgroundColor,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {\n  shouldForwardProp: (prop) =>\n    prop !== \"isContentScrollable\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavBackgroundColor\",\n})(\n  ({\n    isContentScrollable,\n    odysseyDesignTokens,\n    sideNavBackgroundColor,\n  }: {\n    isContentScrollable: boolean;\n    odysseyDesignTokens: DesignTokens;\n    sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  }) => ({\n    transitionProperty: \"box-shadow\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n    zIndex: UI_SHELL_BASE_Z_INDEX,\n\n    // The box shadow should appear above the footer only if the scrollable region has overflow\n    ...(isContentScrollable &&\n      ({\n        boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n      } as CSSProperties)),\n\n    ...(sideNavBackgroundColor &&\n      ({\n        backgroundColor: sideNavBackgroundColor,\n      } as CSSProperties)),\n  }),\n);\n\nconst StyledSideNavFooterItemsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"sideNavContrastColors\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, sideNavContrastColors }) => ({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n  \"a, span\": {\n    color: odysseyDesignTokens.HueNeutral600,\n    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    \"&:visited\": {\n      color: odysseyDesignTokens.HueNeutral600,\n\n      ...(sideNavContrastColors?.fontColor &&\n        ({\n          color: sideNavContrastColors?.fontColor,\n        } as CSSProperties)),\n    },\n\n    \"&:hover\": {\n      textDecoration: \"none\",\n      color: odysseyDesignTokens.HueNeutral900,\n\n      ...(sideNavContrastColors?.fontColor &&\n        ({\n          color: sideNavContrastColors?.fontColor,\n        } as CSSProperties)),\n    },\n\n    ...(sideNavContrastColors?.fontColor &&\n      ({\n        color: sideNavContrastColors?.fontColor,\n      } as CSSProperties)),\n  },\n}));\n\nconst StyledLoadingItemContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n  scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  return (\n    <StyledLoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Skeleton\n        variant=\"circular\"\n        width={odysseyDesignTokens.Spacing4}\n        height={odysseyDesignTokens.Spacing4}\n      />\n      <Skeleton variant=\"rounded\" width=\"100%\" />\n    </StyledLoadingItemContainer>\n  );\n};\n\nconst SideNav = ({\n  appName,\n  footerComponent,\n  footerItems,\n  hasCustomFooter,\n  isCollapsible,\n  isCollapsed = false,\n  isCompact,\n  isLoading,\n  isObtrusive,\n  logoProps,\n  onCollapse,\n  onExpand,\n  onSort,\n  sideNavItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setIsSideNavCollapsed] = useState(isCollapsed);\n  const [hasContentScrolled, setHasContentScrolled] = useState(false);\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n  const uiShellContext = useUiShellContext();\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const scrollableContentRef = useRef<HTMLUListElement>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n\n  const blankElement = useMemo(() => <div />, []);\n\n  // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n  // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n  // to update!\n  useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n  // update sidenav collapse status\n  useEffect(() => setIsSideNavCollapsed(isCollapsed), [isCollapsed]);\n\n  useEffect(() => {\n    // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n    const updateIsContentScrollable = () => {\n      if (\n        scrollableContentRef.current &&\n        scrollableContentRef.current.parentElement\n      ) {\n        setIsContentScrollable(\n          getHasScrollableContent(scrollableContentRef.current.parentElement),\n        );\n      }\n    };\n\n    // If the window is resized, we may need to re-determine if the scrollable container has overflow\n    // Setup a ResizeObserver to know if the size of the scrollableContent changes\n    let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n    if (!resizeObserverRef.current) {\n      resizeObserverRef.current = new ResizeObserver(() => {\n        cancelAnimationFrame(resizeObserverDebounceTimer);\n        resizeObserverDebounceTimer = requestAnimationFrame(\n          updateIsContentScrollable,\n        );\n      });\n    }\n\n    if (resizeObserverRef.current && scrollableContentRef.current) {\n      // Observe the <ul> itself (in case it changes size due to the content expanding)\n      resizeObserverRef.current.observe(scrollableContentRef.current);\n      if (scrollableContentRef.current.parentElement) {\n        // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n        resizeObserverRef.current.observe(\n          scrollableContentRef.current.parentElement,\n        );\n      }\n    }\n\n    // Determine if the scrollable container has overflow or not on load\n    updateIsContentScrollable();\n\n    // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n    // the scrollable container\n    if (!intersectionObserverRef.current && scrollableContentRef.current) {\n      intersectionObserverRef.current = new IntersectionObserver(\n        (entries) => {\n          // If isIntersecting is true, then we're at the top of the scroll container\n          // If isIntersecting is false, some scrolling has occurred.\n          // The entries must be sorted by time and we only really need to look at the latest one\n          const isIntersecting = entries\n            .slice()\n            .sort((a, b) => a.time - b.time)\n            .at(0)?.isIntersecting;\n          setHasContentScrolled(!isIntersecting);\n        },\n        {\n          root: scrollableContentRef.current.parentElement,\n          threshold: 1.0,\n        },\n      );\n    }\n\n    if (intersectionObserverRef.current && scrollableContentRef.current) {\n      const ulElement = scrollableContentRef.current;\n      const [liElement] = Array.from(ulElement?.children || []);\n\n      if (liElement) {\n        intersectionObserverRef.current.observe(liElement);\n      }\n    }\n\n    // Cleanup when unmounted:\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      if (intersectionObserverRef.current) {\n        intersectionObserverRef.current.disconnect();\n        intersectionObserverRef.current = null;\n      }\n      cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n    };\n  }, [sideNavItemsList]);\n\n  const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n  /**\n   * Look through the sideNavItems and determine which is the first node\n   * with isSelected. This should be the node we set a ref on in order to\n   * call scrollIntoView in the effect\n   */\n  const firstSideNavItemIdWithIsSelected = useMemo(() => {\n    const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n      sideNavItem.nestedNavItems\n        ? [sideNavItem, ...sideNavItem.nestedNavItems]\n        : sideNavItem,\n    );\n    const firstItemWithIsSelected = flattenedItems.find(\n      (sideNavItem) => sideNavItem.isSelected,\n    );\n    return firstItemWithIsSelected?.id;\n  }, [sideNavItemsList]);\n  /**\n   * Once we've rendered and if we have an item to scroll to, do the scroll action.\n   * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n   * once the actual ref is populated.\n   */\n  useEffect(() => {\n    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n      scrollIntoViewRef.current.scrollIntoView();\n    }\n  }, [firstSideNavItemIdWithIsSelected]);\n\n  /**\n   * We only want to put a ref on a node iff it is the first selected node.\n   * This function returns the ref only if the ID provided matches the first\n   * selected node, otherwise returns undefined (so that the node has no ref)\n   */\n  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n    (itemId: string) =>\n      itemId === firstSideNavItemIdWithIsSelected\n        ? scrollIntoViewRef\n        : undefined,\n    [firstSideNavItemIdWithIsSelected],\n  );\n\n  const sideNavItemContentProviderValue = useMemo(\n    () => ({ isCompact, depth: 1 }),\n    [isCompact],\n  );\n\n  const setSelectedItem = useCallback(\n    (selectedItemId: string) => {\n      const updatedSideNavItems = sideNavItemsList.map((item) => {\n        if (item.id === selectedItemId) {\n          item.isSelected = true;\n        } else if (item.isSelected) {\n          delete item.isSelected;\n        }\n\n        return item.nestedNavItems\n          ? {\n              ...item,\n              nestedNavItems: item.nestedNavItems.map((childItem) => {\n                if (childItem.id === selectedItemId) {\n                  childItem.isSelected = true;\n                } else if (childItem.isSelected) {\n                  delete childItem.isSelected;\n                }\n                return childItem;\n              }),\n            }\n          : item;\n      });\n      updateSideNavItemsList(updatedSideNavItems);\n\n      if (isCollapsed || isObtrusive) {\n        uiShellContext?.closeSideNavMenu();\n      }\n    },\n    [isCollapsed, isObtrusive, sideNavItemsList, uiShellContext],\n  );\n\n  const processedSideNavItems = useMemo(() => {\n    return sideNavItemsList?.map((item) => ({\n      ...item,\n      childNavItems: item.nestedNavItems?.map((childProps) => {\n        return {\n          id: childProps.id,\n          isSelected: childProps.isSelected,\n          isDisabled: childProps.isDisabled,\n          isSortable: childProps.isSortable,\n          navItem: (\n            <SideNavItemContentContext.Provider\n              value={{\n                ...sideNavItemContentProviderValue,\n                depth: 2,\n                isSortable: item.isSortable,\n              }}\n              key={childProps.id}\n            >\n              <SideNavItemContent\n                {...childProps}\n                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n                onItemSelected={setSelectedItem}\n                translate={childProps.translate}\n              />\n            </SideNavItemContentContext.Provider>\n          ),\n        };\n      }),\n    }));\n  }, [\n    getRefIfThisIsFirstNodeWithIsSelected,\n    sideNavItemsList,\n    sideNavItemContentProviderValue,\n    setSelectedItem,\n  ]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setIsSideNavCollapsed((isSideNavCollapsed) => {\n      if (isSideNavCollapsed) {\n        onExpand?.();\n      } else {\n        onCollapse?.();\n      }\n\n      return !isSideNavCollapsed;\n    });\n  }, [onExpand, onCollapse]);\n\n  const sideNavExpandKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        sideNavExpandClickHandler();\n      }\n    },\n    [sideNavExpandClickHandler],\n  );\n\n  useEffect(() => {\n    if (isCollapsed) {\n      const unsubscribe = uiShellContext?.subscribeToCloseSideNavMenu(() => {\n        onCollapse?.();\n        setIsSideNavCollapsed(true);\n      });\n\n      return () => {\n        unsubscribe?.();\n      };\n    }\n\n    return () => {};\n  }, [isCollapsed, onCollapse, uiShellContext]);\n\n  const setSortedItems = useCallback(\n    (\n      parentId: string,\n      activeId: UniqueIdentifier,\n      activeIndex: number,\n      overIndex: number,\n    ) => {\n      const sortedSideNavItems = sideNavItemsList.map((item) =>\n        item.id === parentId && item.nestedNavItems\n          ? {\n              ...item,\n              nestedNavItems: arrayMove(\n                item.nestedNavItems,\n                activeIndex,\n                overIndex,\n              ),\n            }\n          : item,\n      );\n      updateSideNavItemsList(sortedSideNavItems);\n      onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);\n    },\n    [onSort, sideNavItemsList],\n  );\n\n  return (\n    <StyledSideNavContainer\n      aria-label={t(\"navigation.label\")}\n      backgroundColor={uiShellContext?.sideNavBackgroundColor}\n      id=\"side-nav-expandable\"\n      isAppContentWhiteBackground={\n        uiShellContext?.appBackgroundColor ===\n        odysseyDesignTokens.HueNeutralWhite\n      }\n      isSideNavCollapsed={isSideNavCollapsed}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {isCollapsible && (\n        <SideNavToggleButton\n          ariaControls=\"side-nav-expandable\"\n          isSideNavCollapsed={isSideNavCollapsed}\n          onClick={sideNavExpandClickHandler}\n          onKeyDown={sideNavExpandKeyHandler}\n        />\n      )}\n\n      <OdysseyThemeProvider>\n        <StyledCollapsibleContent\n          data-se=\"collapsible-region\"\n          isSideNavCollapsed={isSideNavCollapsed}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <StyledOpacityTransitionContainer\n            isSideNavCollapsed={isSideNavCollapsed}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {appName || isLoading || logoProps ? (\n              <StyledSideNavHeaderContainer\n                hasContentScrolled={hasContentScrolled}\n                odysseyDesignTokens={odysseyDesignTokens}\n                borderColor={uiShellContext?.sideNavContrastColors?.fontColor}\n              >\n                {isLoading && !appName && !logoProps ? (\n                  <SideNavHeader isLoading={isLoading} />\n                ) : (\n                  <SideNavHeader\n                    appName={appName}\n                    isLoading={isLoading}\n                    logoProps={logoProps}\n                  />\n                )}\n              </StyledSideNavHeaderContainer>\n            ) : (\n              <div />\n            )}\n\n            <StyledSideNavScrollableContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              data-se=\"scrollable-region\"\n            >\n              <StyledSideNavListContainer\n                role=\"none\"\n                ref={scrollableContentRef}\n              >\n                {isLoading\n                  ? Array(6)\n                      .fill(null)\n                      .map((_, index) => <LoadingItem key={index} />)\n                  : processedSideNavItems?.map((item) => {\n                      const {\n                        id,\n                        label,\n                        isSectionHeader,\n                        startIcon,\n                        childNavItems,\n                        isSortable,\n                        isDefaultExpanded,\n                        isDisabled,\n                        isExpanded,\n                      } = item;\n\n                      if (isSectionHeader) {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <StyledSectionHeaderContainer\n                              contrastFontColor={\n                                uiShellContext?.sideNavContrastColors?.fontColor\n                              }\n                              id={id}\n                              key={id}\n                              odysseyDesignTokens={odysseyDesignTokens}\n                            >\n                              <Overline component=\"h3\">{label}</Overline>\n                            </StyledSectionHeaderContainer>\n                          </ErrorBoundary>\n                        );\n                      } else if (childNavItems) {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <StyledSideNavListItem\n                              id={id}\n                              key={id}\n                              odysseyDesignTokens={odysseyDesignTokens}\n                              disabled={isDisabled}\n                              aria-disabled={isDisabled}\n                            >\n                              <NavAccordion\n                                label={label}\n                                isCompact={isCompact}\n                                isDefaultExpanded={isDefaultExpanded}\n                                isExpanded={isExpanded}\n                                startIcon={startIcon}\n                                isDisabled={isDisabled}\n                              >\n                                <StyledSideNavListContainer role=\"none\">\n                                  {isSortable ? (\n                                    <SortableList\n                                      parentId={item.id}\n                                      items={childNavItems}\n                                      onChange={setSortedItems}\n                                      renderItem={(sortableItem) => (\n                                        <SortableList.Item\n                                          id={sortableItem.id}\n                                          isDisabled={sortableItem.isDisabled}\n                                          isSelected={sortableItem.isSelected}\n                                          isSortable={sortableItem.isSortable}\n                                        >\n                                          {sortableItem.navItem}\n                                        </SortableList.Item>\n                                      )}\n                                    />\n                                  ) : (\n                                    childNavItems.map((item) => item.navItem)\n                                  )}\n                                </StyledSideNavListContainer>\n                              </NavAccordion>\n                            </StyledSideNavListItem>\n                          </ErrorBoundary>\n                        );\n                      } else {\n                        return (\n                          <ErrorBoundary fallback={blankElement}>\n                            <SideNavItemContentContext.Provider\n                              key={item.id}\n                              value={sideNavItemContentProviderValue}\n                            >\n                              <SideNavItemContent\n                                {...item}\n                                key={item.id}\n                                onItemSelected={setSelectedItem}\n                                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n                                  item.id,\n                                )}\n                                startIcon={item.startIcon}\n                              />\n                            </SideNavItemContentContext.Provider>\n                          </ErrorBoundary>\n                        );\n                      }\n                    })}\n              </StyledSideNavListContainer>\n              {!isLoading && footerItems && !hasCustomFooter && (\n                <StyledSideNavFooter\n                  odysseyDesignTokens={odysseyDesignTokens}\n                  sideNavBackgroundColor={\n                    uiShellContext?.sideNavBackgroundColor\n                  }\n                >\n                  <StyledSideNavFooterItemsContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                    sideNavContrastColors={\n                      uiShellContext?.sideNavContrastColors\n                    }\n                  >\n                    <SideNavFooterContent footerItems={footerItems} />\n                  </StyledSideNavFooterItemsContainer>\n                </StyledSideNavFooter>\n              )}\n            </StyledSideNavScrollableContainer>\n            {!isLoading && !footerItems && hasCustomFooter && (\n              <StyledPersistentSideNavFooter\n                isContentScrollable={isContentScrollable}\n                odysseyDesignTokens={odysseyDesignTokens}\n                sideNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n              >\n                {footerComponent}\n              </StyledPersistentSideNavFooter>\n            )}\n          </StyledOpacityTransitionContainer>\n        </StyledCollapsibleContent>\n      </OdysseyThemeProvider>\n    </StyledSideNavContainer>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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","ignoreList":[]}

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

@@ -26,22 +26,22 @@ const StyledLogoContainer = (0, _styled.default)("div", {
 })(({
   isLogoInteractive
 }) => ({
-  display: "flex",
   alignItems: "center",
+  display: "flex",
   height: "100%",
   ...(isLogoInteractive && {
     cursor: "pointer"
   })
 }));
 const StyledLogoLink = (0, _styled.default)("a")(() => ({
-  display: "flex",
   alignItems: "center",
+  display: "flex",
   height: "100%"
 }));
 const SideNavLogo = ({
   imageAltText,
-  logoComponent,
   imageUrl,
+  logoComponent,
   ...optionalProps
 }) => {
   const logo = (0, _react.useMemo)(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavLogo.cjs","names":["_react","require","_styled","_interopRequireDefault","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","shouldForwardProp","prop","isLogoInteractive","display","alignItems","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","logoComponent","imageUrl","optionalProps","logo","useMemo","jsx","src","alt","OktaLogo","ariaLabel","href","onClick","children","Boolean","role","MemoizedSideNavLogo","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n  isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n  ...(isLogoInteractive && {\n    cursor: \"pointer\",\n  }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  logoComponent,\n  imageUrl,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n      onClick={optionalProps.onClick}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n      onClick={optionalProps.onClick}\n      role=\"presentation\"\n    >\n      {logo}\n    </StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,MAAMG,mBAAmB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACxCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,MAAM;EACd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAR,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCI,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACR,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIJ,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAID,YAAY,IAAIE,QAAQ,EAAE;MAC5B,OAAO,IAAAjB,WAAA,CAAAqB,GAAA;QAAKC,GAAG,EAAEL,QAAS;QAACM,GAAG,EAAER;MAAa,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAf,WAAA,CAAAqB,GAAA,EAACtB,SAAA,CAAAyB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEC,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIC,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAlB,WAAA,CAAAqB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IACzBC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAAAC,QAAA,EAE9BT;EAAI,CACS,CAAC,GAEjB,IAAAnB,WAAA,CAAAqB,GAAA,EAACjB,mBAAmB;IAClB,cAAYc,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BjB,iBAAiB,EAAEqB,OAAO,CAACX,aAAa,CAACS,OAAO,CAAC,IAAIT,aAAa,CAACQ,IAAK;IACxEC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBT;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMY,mBAAmB,GAAAC,OAAA,CAAAlB,WAAA,GAAG,IAAAmB,WAAI,EAACnB,WAAW,CAAC;AAC7CiB,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"file":"SideNavLogo.cjs","names":["_react","require","_styled","_interopRequireDefault","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","shouldForwardProp","prop","isLogoInteractive","alignItems","display","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","imageUrl","logoComponent","optionalProps","logo","useMemo","jsx","src","alt","OktaLogo","ariaLabel","href","onClick","children","Boolean","role","MemoizedSideNavLogo","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n  isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  height: \"100%\",\n\n  ...(isLogoInteractive && {\n    cursor: \"pointer\",\n  }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  imageUrl,\n  logoComponent,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n      onClick={optionalProps.onClick}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n      onClick={optionalProps.onClick}\n      role=\"presentation\"\n    >\n      {logo}\n    </StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,MAAMG,mBAAmB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACxCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,MAAM;EAEd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAR,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCI,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,QAAQ;EACRC,aAAa;EACb,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIH,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIC,QAAQ,EAAE;MAC5B,OAAO,IAAAhB,WAAA,CAAAqB,GAAA;QAAKC,GAAG,EAAEN,QAAS;QAACO,GAAG,EAAER;MAAa,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAf,WAAA,CAAAqB,GAAA,EAACtB,SAAA,CAAAyB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEE,aAAa,EAAED,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIE,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAlB,WAAA,CAAAqB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IACzBC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAAAC,QAAA,EAE9BT;EAAI,CACS,CAAC,GAEjB,IAAAnB,WAAA,CAAAqB,GAAA,EAACjB,mBAAmB;IAClB,cAAYc,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BjB,iBAAiB,EAAEqB,OAAO,CAACX,aAAa,CAACS,OAAO,CAAC,IAAIT,aAAa,CAACQ,IAAK;IACxEC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBT;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMY,mBAAmB,GAAAC,OAAA,CAAAlB,WAAA,GAAG,IAAAmB,WAAI,EAACnB,WAAW,CAAC;AAC7CiB,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}

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

@@ -37,12 +37,15 @@ const UiShell = ({
   appBackgroundContrastMode,
   appElement,
   appElementScrollingMode,
+  closeSideNavMenu,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   onSubscriptionCreated,
   optionalComponents,
   sideNavBackgroundColor,
+  subscribeToCloseRightSideMenu,
+  subscribeToCloseSideNavMenu,
   subscribeToPropChanges,
   topNavBackgroundColor,
   uiShellAppElement,
@@ -71,7 +74,10 @@ const UiShell = ({
         children: [(0, _jsxRuntime.jsx)(_CssBaseline.CssBaseline, {}), (0, _jsxRuntime.jsxs)(_UiShellProvider.UiShellProvider, {
           appBackgroundColor: appBackgroundColor,
           appBackgroundContrastMode: appBackgroundContrastMode,
+          closeSideNavMenu: closeSideNavMenu,
           sideNavBackgroundColor: sideNavBackgroundColor,
+          subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+          subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
           topNavBackgroundColor: topNavBackgroundColor,
           children: [activeBreakpoint === "constrained" && (0, _jsxRuntime.jsx)(_NarrowUiShellContent.NarrowUiShellContent, {
             ...componentProps,

package/dist/cjs/ui-shell/UiShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UiShell.cjs","names":["_react","require","_reactErrorBoundary","_CssBaseline","_NarrowUiShellContent","_OdysseyProvider","_UiShellProvider","_useUiShellBreakpoints","_WideUiShellContent","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","errorComponent","jsx","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","useState","activeBreakpoint","useUiShellBreakpoints","useEffect","unsubscribe","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","shadowRootElement","jsxs","CssBaseline","UiShellProvider","NarrowUiShellContent","WideUiShellContent","isCollapsed","isCollapsible","MemoizedUiShell","memo","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { UiShellProvider } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { useUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor?: string;\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor?: string;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor?: string;\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & Pick<\n  UiShellContentProps,\n  | \"appElement\"\n  | \"appElementScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"onError\"\n  | \"optionalComponents\"\n>;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"constrained\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"compact\" ||\n              activeBreakpoint === \"comfortable\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...(componentProps.sideNavProps\n                    ? {\n                        sideNavProps: {\n                          ...componentProps.sideNavProps,\n                          isCollapsed:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsed,\n                          isCollapsible:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsible,\n                          // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                        } as typeof componentProps.sideNavProps,\n                      }\n                    : {}),\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UiShell.cjs","names":["_react","require","_reactErrorBoundary","_CssBaseline","_NarrowUiShellContent","_OdysseyProvider","_UiShellProvider","_useUiShellBreakpoints","_WideUiShellContent","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","errorComponent","jsx","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","useState","activeBreakpoint","useUiShellBreakpoints","useEffect","unsubscribe","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","shadowRootElement","jsxs","CssBaseline","UiShellProvider","NarrowUiShellContent","WideUiShellContent","isCollapsed","isCollapsible","MemoizedUiShell","memo","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { useUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\nimport { MessageBus } from \"./createMessageBus.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: MessageBus<\n    SetStateAction<UiShellNavComponentProps>\n  >[\"subscribe\"];\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & UiShellProviderProps &\n  Pick<\n    UiShellContentProps,\n    | \"appElement\"\n    | \"appElementScrollingMode\"\n    | \"hasStandardAppContentPadding\"\n    | \"initialVisibleSections\"\n    | \"onError\"\n    | \"optionalComponents\"\n  >;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            closeSideNavMenu={closeSideNavMenu}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"constrained\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"compact\" ||\n              activeBreakpoint === \"comfortable\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...(componentProps.sideNavProps\n                    ? {\n                        sideNavProps: {\n                          ...componentProps.sideNavProps,\n                          isCollapsed:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsed,\n                          isCollapsible:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsible,\n                          // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                        } as typeof componentProps.sideNavProps,\n                      }\n                    : {}),\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}