@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/dist/labs/SideNav/SideNav.js

@@ -23,6 +23,7 @@ import { SideNavFooterContent } from "./SideNavFooterContent.js";
 import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
 import { SideNavToggleButton } from "./SideNavToggleButton.js";
 import { SortableList } from "./SortableList/SortableList.js";
+import { Overline } from "../../Typography.js";
 import { arrayMove } from "@dnd-kit/sortable";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -86,7 +87,7 @@ const StyledSideNav = styled("nav", {
     width: odysseyDesignTokens.Spacing2,
     zIndex: 2
   },
-  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)": {
+  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)": {
     ...(isSideNavCollapsed && {
       "&::after": {
         opacity: 1,
@@ -119,15 +120,18 @@ const SideNavHeaderContainer = styled("div", {
 const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
-  listStyleType: "none"
+  listStyleType: "none",
+  margin: 0
 }));
 const SideNavScrollableContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
+  display: "grid",
+  gridTemplateRows: "1fr max-content",
   flex: "1 1 100%",
-  overflowY: "auto",
+  overflowY: "scroll",
   paddingInline: odysseyDesignTokens.Spacing2
 }));
 const SectionHeaderContainer = styled("li", {
@@ -136,30 +140,29 @@ const SectionHeaderContainer = styled("li", {
   odysseyDesignTokens
 }) => ({
   paddingBlock: odysseyDesignTokens.Spacing1,
-  paddingInline: odysseyDesignTokens.Spacing4
+  paddingInline: odysseyDesignTokens.Spacing4,
+  marginBlock: `${odysseyDesignTokens.Spacing3}`,
+  color: odysseyDesignTokens.HueNeutral600
 }));
-const SectionHeader = styled("h3", {
+const SideNavFooter = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
-  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
-  color: odysseyDesignTokens.HueNeutral600,
-  textTransform: "uppercase"
+  flexShrink: 0,
+  padding: odysseyDesignTokens.Spacing4,
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite
 }));
-const SideNavFooter = styled("div", {
+const PersistentSideNavFooter = styled(SideNavFooter, {
   shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens"
 })(({
   isContentScrollable,
   odysseyDesignTokens
 }) => ({
-  flexShrink: 0,
   transitionProperty: "box-shadow",
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
   transitionTiming: odysseyDesignTokens.TransitionTimingMain,
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  zIndex: 2,
   ...(isContentScrollable && {
     boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
   })
@@ -169,19 +172,19 @@ const SideNavFooterItemsContainer = styled("div", {
 })(({
   odysseyDesignTokens
 }) => ({
-  paddingBlock: odysseyDesignTokens.Spacing4,
-  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  a: {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:hover": {
-      textDecoration: "none"
-    },
+  "a, span": {
+    color: odysseyDesignTokens.HueNeutral600,
+    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,
     "&:visited": {
-      color: odysseyDesignTokens.TypographyColorHeading
+      color: odysseyDesignTokens.HueNeutral600
+    },
+    "&:hover": {
+      textDecoration: "none",
+      color: odysseyDesignTokens.HueNeutral900
     }
   }
 }));
@@ -226,8 +229,8 @@ const SideNav = ({
   sideNavItems
 }) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const scrollableContentRef = useRef(null);
   const resizeObserverRef = useRef(null);
   const intersectionObserverRef = useRef(null);
@@ -236,6 +239,7 @@ const SideNav = ({
     t
   } = useTranslation();
   const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);
+  useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);
   useEffect(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -283,18 +287,18 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer);
     };
-  }, [sideNavItems]);
+  }, [sideNavItemsList]);
   const scrollIntoViewRef = useRef(null);
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
-    const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.nestedNavItems ? [sideNavItem, ...sideNavItem.nestedNavItems] : sideNavItem);
+    const flattenedItems = sideNavItemsList.flatMap(sideNavItem => sideNavItem.nestedNavItems ? [sideNavItem, ...sideNavItem.nestedNavItems] : sideNavItem);
     const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
     return firstItemWithIsSelected?.id;
-  }, [sideNavItems]);
+  }, [sideNavItemsList]);
   useEffect(() => {
     if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {
       scrollIntoViewRef.current.scrollIntoView();
     }
-  }, [firstSideNavItemIdWithIsSelected, scrollIntoViewRef]);
+  }, [firstSideNavItemIdWithIsSelected]);
   const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
   const sideNavItemContentProviderValue = useMemo(() => ({
     isCompact,
@@ -389,10 +393,10 @@ const SideNav = ({
               isLoading: isLoading,
               logoProps: logoProps
             })
-          }), _jsx(SideNavScrollableContainer, {
+          }), _jsxs(SideNavScrollableContainer, {
             odysseyDesignTokens: odysseyDesignTokens,
             "data-se": "scrollable-region",
-            children: _jsx(SideNavListContainer, {
+            children: [_jsx(SideNavListContainer, {
               role: "none",
               ref: scrollableContentRef,
               children: isLoading ? [...Array(6)].map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
@@ -411,8 +415,8 @@ const SideNav = ({
                   return _jsx(SectionHeaderContainer, {
                     id: id,
                     odysseyDesignTokens: odysseyDesignTokens,
-                    children: _jsx(SectionHeader, {
-                      odysseyDesignTokens: odysseyDesignTokens,
+                    children: _jsx(Overline, {
+                      component: "h3",
                       children: label
                     })
                   }, id);
@@ -457,16 +461,19 @@ const SideNav = ({
                   }, item.id);
                 }
               })
-            })
-          }), !isLoading && (footerItems || hasCustomFooter) && _jsx(SideNavFooter, {
-            odysseyDesignTokens: odysseyDesignTokens,
-            isContentScrollable: isContentScrollable,
-            children: hasCustomFooter ? footerComponent : footerItems && _jsx(SideNavFooterItemsContainer, {
+            }), !isLoading && footerItems && !hasCustomFooter && _jsx(SideNavFooter, {
               odysseyDesignTokens: odysseyDesignTokens,
-              children: _jsx(SideNavFooterContent, {
-                footerItems: footerItems
+              children: _jsx(SideNavFooterItemsContainer, {
+                odysseyDesignTokens: odysseyDesignTokens,
+                children: _jsx(SideNavFooterContent, {
+                  footerItems: footerItems
+                })
               })
-            })
+            })]
+          }), !isLoading && !footerItems && hasCustomFooter && _jsx(PersistentSideNavFooter, {
+            isContentScrollable: isContentScrollable,
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: footerComponent
           })]
         })
       })

package/dist/labs/SideNav/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","useTranslation","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","arrayMove","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","DEFAULT_SIDE_NAV_WIDTH","SIDENAV_COLLAPSE_ICON_POSITION","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNav","backgroundColor","HueNeutralWhite","HueNeutral200","content","right","top","transform","width","Spacing2","zIndex","Spacing3","SideNavHeaderContainer","hasContentScrolled","flexShrink","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral50","SideNavListContainer","padding","listStyle","listStyleType","SideNavScrollableContainer","flex","overflowY","paddingInline","SectionHeaderContainer","paddingBlock","Spacing1","Spacing4","SectionHeader","fontFamily","TypographyFamilyHeading","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","color","HueNeutral600","textTransform","SideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","SideNavFooterItemsContainer","Spacing5","flexWrap","alignItems","a","TypographyColorHeading","textDecoration","LoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCompact","isLoading","logoProps","onCollapse","onExpand","onSort","sideNavItems","setSideNavCollapsed","setIsContentScrollable","setHasContentScrolled","scrollableContentRef","resizeObserverRef","intersectionObserverRef","t","sideNavItemsList","updateSideNavItemsList","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","processedSideNavItems","childNavItems","childProps","isDisabled","navItem","Provider","value","isSortable","scrollRef","onItemSelected","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","setSortedItems","parentId","activeIndex","overIndex","sortedSideNavItems","ariaControls","onClick","onKeyDown","role","ref","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../src/labs/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, { CSSObject } from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  KeyboardEventHandler,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { NavAccordion } from \"./NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n  SideNavItemContent,\n  StyledSideNavListItem,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton\";\nimport { SortableList } from \"./SortableList/SortableList\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { arrayMove } from \"@dnd-kit/sortable\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\n// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)\n// to align it in the middle of the nav header text\nexport const SIDENAV_COLLAPSE_ICON_POSITION = \"77px\";\n\nconst StyledCollapsibleContent = 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    position: \"relative\",\n    display: \"inline-grid\",\n    gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,\n    // gridTemplateRows: \"max-content 1fr max-content\",\n    height: \"100%\",\n    transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n    overflow: \"hidden\",\n\n    ...(isSideNavCollapsed && {\n      gridTemplateColumns: 0,\n      opacity: 0,\n    }),\n  }),\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: \"inline-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      opacity: 0,\n    }),\n  }),\n);\n\nconst StyledSideNav = styled(\"nav\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    position: \"relative\",\n    display: \"inline-block\",\n    height: \"100%\",\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\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: 2,\n    },\n\n    \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)\":\n      {\n        ...(isSideNavCollapsed && {\n          \"&::after\": {\n            opacity: 1,\n            transform: `translateX(100%)`,\n          },\n\n          \"[data-sidenav-toggle='true']\": {\n            transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n          },\n        }),\n      },\n\n    \"[data-sidenav-toggle='true']\": {\n      position: \"absolute\",\n      top: SIDENAV_COLLAPSE_ICON_POSITION,\n      right: 0,\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      transform: `translate3d(100%, 0, 0)`,\n    },\n  }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"hasContentScrolled\" && prop !== \"odysseyDesignTokens\",\n})(\n  ({\n    hasContentScrolled,\n    odysseyDesignTokens,\n  }: {\n    hasContentScrolled: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    flexShrink: 0,\n    // The bottom border should appear only if the scrollable region has been scrolled\n    ...(hasContentScrolled &&\n      ({\n        borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\n      } satisfies CSSObject)),\n  }),\n);\n\nconst SideNavListContainer = styled(\"ul\")(() => ({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n}));\n\nconst SideNavScrollableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  flex: \"1 1 100%\",\n  overflowY: \"auto\",\n  paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst SectionHeaderContainer = styled(\"li\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing1,\n  paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst SectionHeader = styled(\"h3\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,\n  color: odysseyDesignTokens.HueNeutral600,\n  textTransform: \"uppercase\",\n}));\n\nconst SideNavFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isContentScrollable\" && prop !== \"odysseyDesignTokens\",\n})(\n  ({\n    isContentScrollable,\n    odysseyDesignTokens,\n  }: {\n    isContentScrollable: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    flexShrink: 0,\n    transitionProperty: \"box-shadow\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    // The box shadow should appear above the footer only if the scrollable region has overflow\n    ...(isContentScrollable && {\n      boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n    }),\n  }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing4,\n  // paddingBlockEnd: odysseyDesignTokens.Spacing4,\n  paddingInline: odysseyDesignTokens.Spacing5,\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n  a: {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n\n    \"&:hover\": {\n      textDecoration: \"none\",\n    },\n    \"&:visited\": {\n      color: odysseyDesignTokens.TypographyColorHeading,\n    },\n  },\n}));\n\nconst LoadingItemContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\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    <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Skeleton\n        variant=\"circular\"\n        width={odysseyDesignTokens.Spacing4}\n        height={odysseyDesignTokens.Spacing4}\n      />\n      <Skeleton variant=\"rounded\" width=\"100%\" />\n    </LoadingItemContainer>\n  );\n};\n\nconst SideNav = ({\n  appName,\n  footerComponent,\n  footerItems,\n  hasCustomFooter,\n  isCollapsible,\n  isCompact,\n  isLoading,\n  logoProps,\n  onCollapse,\n  onExpand,\n  onSort,\n  sideNavItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const [hasContentScrolled, setHasContentScrolled] = useState(false);\n  const scrollableContentRef = useRef<HTMLUListElement>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n  useEffect(() => {\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  }, [sideNavItems]);\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 = sideNavItems.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  }, [sideNavItems]);\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, scrollIntoViewRef]);\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    [sideNavItemsList],\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          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              />\n            </SideNavItemContentContext.Provider>\n          ),\n        };\n      }),\n    }));\n  }, [\n    getRefIfThisIsFirstNodeWithIsSelected,\n    sideNavItemsList,\n    sideNavItemContentProviderValue,\n    setSelectedItem,\n  ]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    isSideNavCollapsed ? onExpand?.() : onCollapse?.();\n    setSideNavCollapsed(!isSideNavCollapsed);\n  }, [isSideNavCollapsed, setSideNavCollapsed, 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  const setSortedItems = useCallback(\n    (parentId: string, activeIndex: number, overIndex: number) => {\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);\n    },\n    [onSort, sideNavItemsList],\n  );\n\n  return (\n    <StyledSideNav\n      aria-label={t(\"navigation.label\")}\n      id=\"side-nav-expandable\"\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      <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            <SideNavHeaderContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasContentScrolled={hasContentScrolled}\n            >\n              <SideNavHeader\n                appName={appName}\n                isLoading={isLoading}\n                logoProps={logoProps}\n              />\n            </SideNavHeaderContainer>\n            <SideNavScrollableContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              data-se=\"scrollable-region\"\n            >\n              <SideNavListContainer role=\"none\" ref={scrollableContentRef}>\n                {isLoading\n                  ? [...Array(6)].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                          <SectionHeaderContainer\n                            id={id}\n                            key={id}\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          >\n                            <SectionHeader\n                              odysseyDesignTokens={odysseyDesignTokens}\n                            >\n                              {label}\n                            </SectionHeader>\n                          </SectionHeaderContainer>\n                        );\n                      } else if (childNavItems) {\n                        return (\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                              <SideNavListContainer 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                                      >\n                                        {sortableItem.navItem}\n                                      </SortableList.Item>\n                                    )}\n                                  />\n                                ) : (\n                                  childNavItems.map((item) => item.navItem)\n                                )}\n                              </SideNavListContainer>\n                            </NavAccordion>\n                          </StyledSideNavListItem>\n                        );\n                      } else {\n                        return (\n                          <SideNavItemContentContext.Provider\n                            key={item.id}\n                            value={sideNavItemContentProviderValue}\n                          >\n                            <SideNavItemContent\n                              {...item}\n                              key={item.id}\n                              scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n                                item.id,\n                              )}\n                              onItemSelected={setSelectedItem}\n                            />\n                          </SideNavItemContentContext.Provider>\n                        );\n                      }\n                    })}\n              </SideNavListContainer>\n            </SideNavScrollableContainer>\n            {!isLoading && (footerItems || hasCustomFooter) && (\n              <SideNavFooter\n                odysseyDesignTokens={odysseyDesignTokens}\n                isContentScrollable={isContentScrollable}\n              >\n                {hasCustomFooter\n                  ? footerComponent\n                  : footerItems && (\n                      <SideNavFooterItemsContainer\n                        odysseyDesignTokens={odysseyDesignTokens}\n                      >\n                        <SideNavFooterContent footerItems={footerItems} />\n                      </SideNavFooterItemsContainer>\n                    )}\n              </SideNavFooter>\n            )}\n          </StyledOpacityTransitionContainer>\n        </StyledCollapsibleContent>\n      </OdysseyThemeProvider>\n    </StyledSideNav>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}
+{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","useTranslation","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","Overline","arrayMove","jsx","_jsx","jsxs","_jsxs","createElement","_createElement","DEFAULT_SIDE_NAV_WIDTH","SIDENAV_COLLAPSE_ICON_POSITION","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNav","backgroundColor","HueNeutralWhite","HueNeutral200","content","right","top","transform","width","Spacing2","zIndex","Spacing3","SideNavHeaderContainer","hasContentScrolled","flexShrink","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral50","SideNavListContainer","padding","listStyle","listStyleType","margin","SideNavScrollableContainer","flex","overflowY","paddingInline","SectionHeaderContainer","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","SideNavFooter","PersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","SideNavFooterItemsContainer","flexWrap","alignItems","fontSize","TypographySizeOverline","textDecoration","HueNeutral900","LoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCompact","isLoading","logoProps","onCollapse","onExpand","onSort","sideNavItems","setSideNavCollapsed","setHasContentScrolled","setIsContentScrollable","scrollableContentRef","resizeObserverRef","intersectionObserverRef","t","sideNavItemsList","updateSideNavItemsList","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","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","processedSideNavItems","childNavItems","childProps","isDisabled","navItem","Provider","value","isSortable","scrollRef","onItemSelected","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","setSortedItems","parentId","activeIndex","overIndex","sortedSideNavItems","ariaControls","onClick","onKeyDown","role","ref","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","component","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../src/labs/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, { CSSObject } from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  KeyboardEventHandler,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { NavAccordion } from \"./NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n  SideNavItemContent,\n  StyledSideNavListItem,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton\";\nimport { SortableList } from \"./SortableList/SortableList\";\nimport { Overline } from \"../../Typography\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { arrayMove } from \"@dnd-kit/sortable\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\n// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)\n// to align it in the middle of the nav header text\nexport const SIDENAV_COLLAPSE_ICON_POSITION = \"77px\";\n\nconst StyledCollapsibleContent = 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    position: \"relative\",\n    display: \"inline-grid\",\n    gridTemplateColumns: DEFAULT_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      gridTemplateColumns: 0,\n      opacity: 0,\n    }),\n  }),\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: \"inline-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      opacity: 0,\n    }),\n  }),\n);\n\nconst StyledSideNav = styled(\"nav\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    position: \"relative\",\n    display: \"inline-block\",\n    height: \"100%\",\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\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: 2,\n    },\n\n    \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n      {\n        ...(isSideNavCollapsed && {\n          \"&::after\": {\n            opacity: 1,\n            transform: `translateX(100%)`,\n          },\n\n          \"[data-sidenav-toggle='true']\": {\n            transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n          },\n        }),\n      },\n\n    \"[data-sidenav-toggle='true']\": {\n      position: \"absolute\",\n      top: SIDENAV_COLLAPSE_ICON_POSITION,\n      right: 0,\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n      transform: `translate3d(100%, 0, 0)`,\n    },\n  }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"hasContentScrolled\" && prop !== \"odysseyDesignTokens\",\n})(\n  ({\n    hasContentScrolled,\n    odysseyDesignTokens,\n  }: {\n    hasContentScrolled: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    flexShrink: 0,\n    // The bottom border should appear only if the scrollable region has been scrolled\n    ...(hasContentScrolled &&\n      ({\n        borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\n      } satisfies CSSObject)),\n  }),\n);\n\nconst SideNavListContainer = styled(\"ul\")(() => ({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n  margin: 0,\n}));\n\nconst SideNavScrollableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"grid\",\n  gridTemplateRows: \"1fr max-content\",\n  flex: \"1 1 100%\",\n  overflowY: \"scroll\",\n  paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst SectionHeaderContainer = styled(\"li\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing1,\n  paddingInline: odysseyDesignTokens.Spacing4,\n  marginBlock: `${odysseyDesignTokens.Spacing3}`,\n  color: odysseyDesignTokens.HueNeutral600,\n}));\n\nconst SideNavFooter = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  flexShrink: 0,\n  padding: odysseyDesignTokens.Spacing4,\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n}));\n\nconst PersistentSideNavFooter = styled(SideNavFooter, {\n  shouldForwardProp: (prop) =>\n    prop !== \"isContentScrollable\" && prop !== \"odysseyDesignTokens\",\n})(\n  ({\n    isContentScrollable,\n    odysseyDesignTokens,\n  }: {\n    isContentScrollable: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    transitionProperty: \"box-shadow\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n    zIndex: 2,\n    // The box shadow should appear above the footer only if the scrollable region has overflow\n    ...(isContentScrollable && {\n      boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n    }),\n  }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\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\n    \"&:hover\": {\n      textDecoration: \"none\",\n      color: odysseyDesignTokens.HueNeutral900,\n    },\n  },\n}));\n\nconst LoadingItemContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\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    <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Skeleton\n        variant=\"circular\"\n        width={odysseyDesignTokens.Spacing4}\n        height={odysseyDesignTokens.Spacing4}\n      />\n      <Skeleton variant=\"rounded\" width=\"100%\" />\n    </LoadingItemContainer>\n  );\n};\n\nconst SideNav = ({\n  appName,\n  footerComponent,\n  footerItems,\n  hasCustomFooter,\n  isCollapsible,\n  isCompact,\n  isLoading,\n  logoProps,\n  onCollapse,\n  onExpand,\n  onSort,\n  sideNavItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const [hasContentScrolled, setHasContentScrolled] = useState(false);\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const scrollableContentRef = useRef<HTMLUListElement>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\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  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    [sideNavItemsList],\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          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              />\n            </SideNavItemContentContext.Provider>\n          ),\n        };\n      }),\n    }));\n  }, [\n    getRefIfThisIsFirstNodeWithIsSelected,\n    sideNavItemsList,\n    sideNavItemContentProviderValue,\n    setSelectedItem,\n  ]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    isSideNavCollapsed ? onExpand?.() : onCollapse?.();\n    setSideNavCollapsed(!isSideNavCollapsed);\n  }, [isSideNavCollapsed, setSideNavCollapsed, 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  const setSortedItems = useCallback(\n    (parentId: string, activeIndex: number, overIndex: number) => {\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);\n    },\n    [onSort, sideNavItemsList],\n  );\n\n  return (\n    <StyledSideNav\n      aria-label={t(\"navigation.label\")}\n      id=\"side-nav-expandable\"\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      <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            <SideNavHeaderContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasContentScrolled={hasContentScrolled}\n            >\n              <SideNavHeader\n                appName={appName}\n                isLoading={isLoading}\n                logoProps={logoProps}\n              />\n            </SideNavHeaderContainer>\n            <SideNavScrollableContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              data-se=\"scrollable-region\"\n            >\n              <SideNavListContainer role=\"none\" ref={scrollableContentRef}>\n                {isLoading\n                  ? [...Array(6)].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                          <SectionHeaderContainer\n                            id={id}\n                            key={id}\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          >\n                            <Overline component=\"h3\">{label}</Overline>\n                          </SectionHeaderContainer>\n                        );\n                      } else if (childNavItems) {\n                        return (\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                              <SideNavListContainer 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                                      >\n                                        {sortableItem.navItem}\n                                      </SortableList.Item>\n                                    )}\n                                  />\n                                ) : (\n                                  childNavItems.map((item) => item.navItem)\n                                )}\n                              </SideNavListContainer>\n                            </NavAccordion>\n                          </StyledSideNavListItem>\n                        );\n                      } else {\n                        return (\n                          <SideNavItemContentContext.Provider\n                            key={item.id}\n                            value={sideNavItemContentProviderValue}\n                          >\n                            <SideNavItemContent\n                              {...item}\n                              key={item.id}\n                              scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n                                item.id,\n                              )}\n                              onItemSelected={setSelectedItem}\n                            />\n                          </SideNavItemContentContext.Provider>\n                        );\n                      }\n                    })}\n              </SideNavListContainer>\n              {!isLoading && footerItems && !hasCustomFooter && (\n                <SideNavFooter odysseyDesignTokens={odysseyDesignTokens}>\n                  <SideNavFooterItemsContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    <SideNavFooterContent footerItems={footerItems} />\n                  </SideNavFooterItemsContainer>\n                </SideNavFooter>\n              )}\n            </SideNavScrollableContainer>\n            {!isLoading && !footerItems && hasCustomFooter && (\n              <PersistentSideNavFooter\n                isContentScrollable={isContentScrollable}\n                odysseyDesignTokens={odysseyDesignTokens}\n              >\n                {footerComponent}\n              </PersistentSideNavFooter>\n            )}\n          </StyledOpacityTransitionContainer>\n        </StyledCollapsibleContent>\n      </OdysseyThemeProvider>\n    </StyledSideNav>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}

package/dist/labs/SideNav/SideNavHeader.js

@@ -15,7 +15,7 @@ import styled from "@emotion/styled";
 import { memo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { SideNavLogo } from "./SideNavLogo.js";
-import { Heading6 } from "../../Typography.js";
+import { Heading5 } from "../../Typography.js";
 import { TOP_NAV_HEIGHT } from "../TopNav/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,7 +38,8 @@ const SideNavLogoContainer = styled("div", {
   display: "flex",
   alignItems: "center",
   height: TOP_NAV_HEIGHT,
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   "svg, img": {
     maxHeight: "100%",
     width: "auto",
@@ -53,7 +54,8 @@ const SideNavHeadingContainer = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   width: "100%",
   ["& .MuiTypography-root"]: {
     margin: 0,
@@ -79,7 +81,7 @@ const SideNavHeader = ({
       })
     }), _jsx(SideNavHeadingContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: _jsx(Heading6, {
+      children: _jsx(Heading5, {
         component: "h2",
         children: isLoading ? _jsx(_Skeleton, {}) : appName
       })

package/dist/labs/SideNav/SideNavHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useOdysseyDesignTokens","SideNavLogo","Heading6","TOP_NAV_HEIGHT","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","shouldForwardProp","prop","odysseyDesignTokens","position","display","flexDirection","backgroundColor","HueNeutralWhite","zIndex","SideNavLogoContainer","alignItems","height","padding","Spacing4","maxHeight","width","maxWidth","SideNavHeadingContainer","justifyContent","margin","SideNavHeader","appName","isLoading","logoProps","children","_Skeleton","variant","component","MemoizedSideNavHeader","displayName"],"sources":["../../../src/labs/SideNav/SideNavHeader.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 styled from \"@emotion/styled\";\nimport { memo } from \"react\";\nimport { Skeleton } from \"@mui/material\";\n\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { SideNavLogo } from \"./SideNavLogo\";\nimport { SideNavProps } from \"./types\";\nimport { Heading6 } from \"../../Typography\";\nimport { TOP_NAV_HEIGHT } from \"../TopNav\";\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n  zIndex: 1,\n}));\n\nconst SideNavLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: TOP_NAV_HEIGHT,\n  padding: odysseyDesignTokens.Spacing4,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst SideNavHeadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  padding: odysseyDesignTokens.Spacing4,\n  width: \"100%\",\n\n  [\"& .MuiTypography-root\"]: {\n    margin: 0,\n    width: \"100%\",\n  },\n}));\n\nexport type SideNavHeaderProps = {\n  /**\n   * The app's name.\n   */\n  appName: string;\n  /**\n   * If the side nav currently has no items, it will be loading.\n   */\n  isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n  appName,\n  isLoading,\n  logoProps,\n}: SideNavHeaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {isLoading ? (\n          //  The skeleton takes the hardcoded dimensions of the Okta logo\n          <Skeleton variant=\"rounded\" height={24} width={67} />\n        ) : (\n          <SideNavLogo {...logoProps} />\n        )}\n      </SideNavLogoContainer>\n\n      <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"h2\">{isLoading ? <Skeleton /> : appName}</Heading6>\n      </SideNavHeadingContainer>\n    </SideNavHeaderContainer>\n  );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAQ,OAAO;AAAC,SAK3BC,sBAAsB;AAAA,SAEfC,WAAW;AAAA,SAEXC,QAAQ;AAAA,SACRC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEvB,MAAMC,sBAAsB,GAAGV,MAAM,CAAC,KAAK,EAAE;EAC3CW,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,QAAQ,EAAE,UAAU;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,eAAe,EAAEJ,mBAAmB,CAACK,eAAe;EACpDC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,oBAAoB,GAAGpB,MAAM,CAAC,KAAK,EAAE;EACzCW,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEE,OAAO,EAAE,MAAM;EACfM,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAEjB,cAAc;EACtBkB,OAAO,EAAEV,mBAAmB,CAACW,QAAQ;EAErC,UAAU,EAAE;IACVC,SAAS,EAAE,MAAM;IACjBC,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,uBAAuB,GAAG5B,MAAM,CAAC,KAAK,EAAE;EAC5CW,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEE,OAAO,EAAE,MAAM;EACfc,cAAc,EAAE,eAAe;EAC/BR,UAAU,EAAE,QAAQ;EACpBE,OAAO,EAAEV,mBAAmB,CAACW,QAAQ;EACrCE,KAAK,EAAE,MAAM;EAEb,CAAC,uBAAuB,GAAG;IACzBI,MAAM,EAAE,CAAC;IACTJ,KAAK,EAAE;EACT;AACF,CAAC,CAAC,CAAC;AAaH,MAAMK,aAAa,GAAGA,CAAC;EACrBC,OAAO;EACPC,SAAS;EACTC;AACkB,CAAC,KAAK;EACxB,MAAMrB,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,OACEO,KAAA,CAACC,sBAAsB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAsB,QAAA,GAC/D5B,IAAA,CAACa,oBAAoB;MAACP,mBAAmB,EAAEA,mBAAoB;MAAAsB,QAAA,EAC5DF,SAAS,GAER1B,IAAA,CAAA6B,SAAA;QAAUC,OAAO,EAAC,SAAS;QAACf,MAAM,EAAE,EAAG;QAACI,KAAK,EAAE;MAAG,CAAE,CAAC,GAErDnB,IAAA,CAACJ,WAAW;QAAA,GAAK+B;MAAS,CAAG;IAC9B,CACmB,CAAC,EAEvB3B,IAAA,CAACqB,uBAAuB;MAACf,mBAAmB,EAAEA,mBAAoB;MAAAsB,QAAA,EAChE5B,IAAA,CAACH,QAAQ;QAACkC,SAAS,EAAC,IAAI;QAAAH,QAAA,EAAEF,SAAS,GAAG1B,IAAA,CAAA6B,SAAA,IAAW,CAAC,GAAGJ;MAAO,CAAW;IAAC,CACjD,CAAC;EAAA,CACJ,CAAC;AAE7B,CAAC;AAED,MAAMO,qBAAqB,GAAGtC,IAAI,CAAC8B,aAAa,CAAC;AACjDQ,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIR,aAAa"}
+{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useOdysseyDesignTokens","SideNavLogo","Heading5","TOP_NAV_HEIGHT","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","shouldForwardProp","prop","odysseyDesignTokens","position","display","flexDirection","backgroundColor","HueNeutralWhite","zIndex","SideNavLogoContainer","alignItems","height","paddingBlock","Spacing4","paddingInline","Spacing5","maxHeight","width","maxWidth","SideNavHeadingContainer","justifyContent","margin","SideNavHeader","appName","isLoading","logoProps","children","_Skeleton","variant","component","MemoizedSideNavHeader","displayName"],"sources":["../../../src/labs/SideNav/SideNavHeader.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 styled from \"@emotion/styled\";\nimport { memo } from \"react\";\nimport { Skeleton } from \"@mui/material\";\n\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { SideNavLogo } from \"./SideNavLogo\";\nimport { SideNavProps } from \"./types\";\nimport { Heading5 } from \"../../Typography\";\nimport { TOP_NAV_HEIGHT } from \"../TopNav\";\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n  zIndex: 1,\n}));\n\nconst SideNavLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing4,\n  paddingInline: odysseyDesignTokens.Spacing5,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst SideNavHeadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  paddingBlock: odysseyDesignTokens.Spacing4,\n  paddingInline: odysseyDesignTokens.Spacing5,\n  width: \"100%\",\n\n  [\"& .MuiTypography-root\"]: {\n    margin: 0,\n    width: \"100%\",\n  },\n}));\n\nexport type SideNavHeaderProps = {\n  /**\n   * The app's name.\n   */\n  appName: string;\n  /**\n   * If the side nav currently has no items, it will be loading.\n   */\n  isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n  appName,\n  isLoading,\n  logoProps,\n}: SideNavHeaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {isLoading ? (\n          //  The skeleton takes the hardcoded dimensions of the Okta logo\n          <Skeleton variant=\"rounded\" height={24} width={67} />\n        ) : (\n          <SideNavLogo {...logoProps} />\n        )}\n      </SideNavLogoContainer>\n\n      <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading5 component=\"h2\">{isLoading ? <Skeleton /> : appName}</Heading5>\n      </SideNavHeadingContainer>\n    </SideNavHeaderContainer>\n  );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":"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"}

package/dist/labs/SideNav/SideNavItemContent.js

@@ -12,7 +12,7 @@ import _Link from "@mui/material/Link";
  */
 
 import styled from "@emotion/styled";
-import { useRef, useImperativeHandle, useCallback, memo, useMemo } from "react";
+import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
 import { useSideNavItemContent } from "./SideNavItemContentContext.js";
@@ -79,7 +79,7 @@ export const getBaseNavItemContentStyles = ({
     cursor: "default",
     color: `${odysseyDesignTokens.TypographyColorDisabled} !important`
   }),
-  "&:focus-visible, &:focus": {
+  "&:focus-visible": {
     outline: "none",
     boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`
   }
@@ -159,19 +159,19 @@ const SideNavItemContent = ({
       }
     };
   }, []);
-  const itemClickHandler = useCallback(id => {
+  const itemClickHandler = useCallback(event => {
     return () => {
       onItemSelected?.(id);
-      onClick?.();
+      onClick?.(event);
     };
-  }, [onClick, onItemSelected]);
-  const sideNavItemContentKeyHandler = useCallback((id, event) => {
+  }, [id, onClick, onItemSelected]);
+  const sideNavItemContentKeyHandler = useCallback(event => {
     if (event?.key === "Enter") {
       event.preventDefault();
       onItemSelected?.(id);
-      onClick?.();
+      onClick?.(event);
     }
-  }, [onClick, onItemSelected]);
+  }, [id, onClick, onItemSelected]);
   return _jsx(StyledSideNavListItem, {
     ref: localScrollRef,
     id: id,
@@ -199,8 +199,8 @@ const SideNavItemContent = ({
       isDisabled: isDisabled,
       tabIndex: 0,
       role: "button",
-      onClick: itemClickHandler(id),
-      onKeyDown: event => sideNavItemContentKeyHandler(id, event),
+      onClick: itemClickHandler,
+      onKeyDown: sideNavItemContentKeyHandler,
       isSelected: isSelected,
       children: _jsx(SideNavItemLinkContent, {
         count: count,
@@ -217,7 +217,7 @@ const SideNavItemContent = ({
       isSelected: isSelected,
       href: href,
       target: target,
-      onClick: itemClickHandler(id),
+      onClick: itemClickHandler,
       children: [_jsx(SideNavItemLinkContent, {
         count: count,
         label: label,