@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/dist/labs/SideNav/SideNav.js

@@ -12,15 +12,26 @@
 
 import styled from "@emotion/styled";
 import { memo, useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { Box } from "../../Box.js";
 import { ExpandLeftIcon } from "../../icons.generated/index.js";
 import { NavAccordion } from "../NavAccordion.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { OktaLogo } from "./OktaLogo.js";
 import { SideNavHeader } from "./SideNavHeader.js";
 import { SideNavItemContent, SideNavListItemContainer } from "./SideNavItemContent.js";
 import { SideNavFooterContent } from "./SideNavFooterContent.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DEFAULT_SIDE_NAV_WIDTH = "300px";
+const SideNavContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "expandedWidth"
+})(({
+  expandedWidth
+}) => ({
+  display: "flex",
+  height: "100%",
+  maxWidth: expandedWidth,
+  overflow: "hidden"
+}));
 const SideNavCollapsedContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
@@ -37,32 +48,51 @@ const SideNavCollapsedContainer = styled("div", {
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
   transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
 }));
-const SideNavExpandContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+const SideNavExpandContainer = styled("nav", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed" && prop !== "expandedWidth"
 })(({
   odysseyDesignTokens,
-  isSideNavCollapsed
+  isSideNavCollapsed,
+  expandedWidth
 }) => ({
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   flexDirection: "column",
   display: "flex",
   opacity: isSideNavCollapsed ? 0 : 1,
   visibility: isSideNavCollapsed ? "hidden" : "visible",
-  width: isSideNavCollapsed ? "0" : "100%",
+  width: isSideNavCollapsed ? "0" : expandedWidth,
   transitionProperty: "opacity, width",
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
+}));
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
+})(({
+  hasContentScrolled,
+  odysseyDesignTokens
+}) => ({
+  position: "sticky",
+  top: 0,
+  ...(hasContentScrolled && {
+    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
+  })
 }));
 const SideNavListContainer = styled.ul({
   padding: 0,
   listStyle: "none",
   listStyleType: "none"
 });
+const SideNavScrollableContainer = styled.div({
+  flex: 1,
+  overflowY: "auto"
+});
 const SectionHeader = styled("li", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
+  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
@@ -71,7 +101,23 @@ const SectionHeader = styled("li", {
   paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase"
 }));
-const SideNavFooterContainer = styled("div", {
+const SideNavFooter = styled("div", {
+  shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens"
+})(({
+  isContentScrollable,
+  odysseyDesignTokens
+}) => ({
+  position: "sticky",
+  bottom: 0,
+  paddingTop: odysseyDesignTokens.Spacing2,
+  transitionProperty: "box-shadow",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+  ...(isContentScrollable && {
+    boxShadow: odysseyDesignTokens.DepthHigh
+  })
+}));
+const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
@@ -93,16 +139,71 @@ const SideNavFooterContainer = styled("div", {
     color: odysseyDesignTokens.TypographyColorHeading
   }
 }));
+const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
 const SideNav = ({
   navHeaderText,
   isCollapsible,
   onCollapse,
   onExpand,
   sideNavItems,
-  footerItems
+  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
+  footerItems,
+  footerComponent,
+  logo
 }) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const [hasContentScrolled, setHasContentScrolled] = useState(false);
+  const scrollableContentRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  const intersectionObserverRef = useRef(null);
+  useEffect(() => {
+    const updateIsContentScrollable = () => {
+      if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
+        setIsContentScrollable(getHasScrollableContent(scrollableContentRef.current.parentElement));
+      }
+    };
+    let resizeObserverDebounceTimer;
+    if (!resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        cancelAnimationFrame(resizeObserverDebounceTimer);
+        resizeObserverDebounceTimer = requestAnimationFrame(updateIsContentScrollable);
+      });
+    }
+    if (resizeObserverRef.current && scrollableContentRef.current) {
+      resizeObserverRef.current.observe(scrollableContentRef.current);
+      if (scrollableContentRef.current.parentElement) {
+        resizeObserverRef.current.observe(scrollableContentRef.current.parentElement);
+      }
+    }
+    updateIsContentScrollable();
+    if (!intersectionObserverRef.current && scrollableContentRef.current) {
+      intersectionObserverRef.current = new IntersectionObserver(entries => {
+        const isIntersecting = entries.slice().sort((a, b) => a.time - b.time).at(0)?.isIntersecting;
+        setHasContentScrolled(!isIntersecting);
+      }, {
+        root: scrollableContentRef.current.parentElement,
+        threshold: 1.0
+      });
+    }
+    if (intersectionObserverRef.current && scrollableContentRef.current) {
+      const ul = scrollableContentRef.current;
+      const li = ul?.firstChild;
+      intersectionObserverRef.current.observe(li);
+    }
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (intersectionObserverRef.current) {
+        intersectionObserverRef.current.disconnect();
+        intersectionObserverRef.current = null;
+      }
+      cancelAnimationFrame(resizeObserverDebounceTimer);
+    };
+  }, []);
   const scrollIntoViewRef = useRef(null);
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
     const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.children ? [sideNavItem, ...sideNavItem.children] : sideNavItem);
@@ -137,29 +238,12 @@ const SideNav = ({
       onExpand?.();
     }
   }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
-  const sideNavStyles = useMemo(() => ({
-    display: "flex",
-    height: "100vh"
-  }), []);
-  const sideNavHeaderContainerStyles = useMemo(() => ({
-    position: "sticky",
-    top: 0
-  }), []);
-  const sideNavListContainerStyles = useMemo(() => ({
-    flex: 1,
-    overflowY: "auto"
-  }), []);
-  const sideNavFooterContainerStyles = useMemo(() => ({
-    position: "sticky",
-    bottom: 0,
-    paddingTop: odysseyDesignTokens.Spacing2
-  }), [odysseyDesignTokens]);
   const expandLeftIconStyles = useMemo(() => ({
     fontSize: "1em",
     margin: `0 ${odysseyDesignTokens.Spacing1}`
   }), [odysseyDesignTokens]);
-  return _jsxs(Box, {
-    sx: sideNavStyles,
+  return _jsxs(SideNavContainer, {
+    expandedWidth: expandedWidth,
     children: [_jsx(SideNavCollapsedContainer, {
       tabIndex: 0,
       role: "button",
@@ -176,17 +260,21 @@ const SideNav = ({
       odysseyDesignTokens: odysseyDesignTokens,
       isSideNavCollapsed: isSideNavCollapsed,
       "data-se": "expanded-region",
-      children: [_jsx(Box, {
-        sx: sideNavHeaderContainerStyles,
+      expandedWidth: expandedWidth,
+      "aria-label": navHeaderText,
+      children: [_jsx(SideNavHeaderContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        hasContentScrolled: hasContentScrolled,
         children: _jsx(SideNavHeader, {
+          logo: logo || _jsx(OktaLogo, {}),
           navHeaderText: navHeaderText,
           isCollapsible: isCollapsible,
           onCollapse: sideNavCollapseHandler
         })
-      }), _jsx(Box, {
-        sx: sideNavListContainerStyles,
-        testId: "scrollable-region",
+      }), _jsx(SideNavScrollableContainer, {
+        "data-se": "scrollable-region",
         children: _jsx(SideNavListContainer, {
+          ref: scrollableContentRef,
           children: processedSideNavItems?.map(item => {
             const {
               id,
@@ -228,14 +316,15 @@ const SideNav = ({
             }
           })
         })
-      }), footerItems && _jsx(Box, {
-        sx: sideNavFooterContainerStyles,
-        children: _jsx(SideNavFooterContainer, {
+      }), (footerItems || footerComponent) && _jsxs(SideNavFooter, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        isContentScrollable: isContentScrollable,
+        children: [footerComponent, footerItems && !footerComponent && _jsx(SideNavFooterItemsContainer, {
           odysseyDesignTokens: odysseyDesignTokens,
           children: _jsx(SideNavFooterContent, {
             footerItems: footerItems
           })
-        })
+        })]
       })]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","Box","ExpandLeftIcon","NavAccordion","useOdysseyDesignTokens","SideNavHeader","SideNavItemContent","SideNavListItemContainer","SideNavFooterContent","jsx","_jsx","jsxs","_jsxs","SideNavCollapsedContainer","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","backgroundColor","HueNeutral300","paddingTop","Spacing5","cursor","width","opacity","visibility","transitionProperty","transitionDuration","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","SideNavExpandContainer","HueNeutralWhite","flexDirection","display","SideNavListContainer","ul","padding","listStyle","listStyleType","SectionHeader","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","color","HueNeutral600","Spacing3","paddingBottom","paddingLeft","Spacing4","textTransform","SideNavFooterContainer","Spacing2","justifyContent","flexWrap","alignItems","TypographyColorHeading","textDecoration","SideNav","navHeaderText","isCollapsible","onCollapse","onExpand","sideNavItems","footerItems","setSideNavCollapsed","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","children","firstItemWithIsSelected","find","isSelected","id","current","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","processedSideNavItems","map","item","childProps","scrollRef","sideNavCollapseHandler","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","sideNavStyles","height","sideNavHeaderContainerStyles","position","top","sideNavListContainerStyles","flex","overflowY","sideNavFooterContainerStyles","bottom","expandLeftIconStyles","margin","Spacing1","sx","tabIndex","role","onClick","onKeyDown","testId","label","isSectionHeader","startIcon","isDefaultExpanded","isDisabled","isExpanded","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 from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from \"react\";\n\nimport { Box } from \"../../Box\";\nimport { ExpandLeftIcon } from \"../../icons.generated\";\nimport { NavAccordion } from \"../NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n  SideNavItemContent,\n  SideNavListItemContainer,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\n\nconst SideNavCollapsedContainer = 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    backgroundColor: odysseyDesignTokens.HueNeutral300,\n    paddingTop: odysseyDesignTokens.Spacing5,\n    cursor: \"pointer\",\n    width: isSideNavCollapsed ? \"auto\" : 0,\n    opacity: isSideNavCollapsed ? 1 : 0,\n    visibility: isSideNavCollapsed ? \"visible\" : \"hidden\",\n    transitionProperty: \"opacity\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavExpandContainer = 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    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    flexDirection: \"column\",\n    display: \"flex\",\n    opacity: isSideNavCollapsed ? 0 : 1,\n    visibility: isSideNavCollapsed ? \"hidden\" : \"visible\",\n    width: isSideNavCollapsed ? \"0\" : \"100%\",\n    transitionProperty: \"opacity, width\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavListContainer = styled.ul({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n});\n\nconst SectionHeader = styled(\"li\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,\n  color: odysseyDesignTokens.HueNeutral600,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  textTransform: \"uppercase\",\n}));\n\nconst SideNavFooterContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingTop: odysseyDesignTokens.Spacing2,\n  paddingBottom: odysseyDesignTokens.Spacing2,\n  display: \"flex\",\n  justifyContent: \"center\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n  },\n  \"& a:visited\": {\n    color: odysseyDesignTokens.TypographyColorHeading,\n  },\n}));\n\nconst SideNav = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n  onExpand,\n  sideNavItems,\n  footerItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\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.children\n        ? [sideNavItem, ...sideNavItem.children]\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 processedSideNavItems = useMemo(\n    () =>\n      sideNavItems.map((item) => ({\n        ...item,\n        children: item.children?.map((childProps) => (\n          <SideNavItemContent\n            key={childProps.id}\n            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n            {...childProps}\n          />\n        )),\n      })),\n    [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems],\n  );\n\n  const sideNavCollapseHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onCollapse?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onExpand?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);\n\n  const sideNavExpandKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        setSideNavCollapsed(!isSideNavCollapsed);\n        onExpand?.();\n      }\n    },\n    [isSideNavCollapsed, setSideNavCollapsed, onExpand],\n  );\n\n  const sideNavStyles = useMemo(\n    () => ({\n      display: \"flex\",\n      height: \"100vh\",\n    }),\n    [],\n  );\n\n  const sideNavHeaderContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      top: 0,\n    }),\n    [],\n  );\n\n  const sideNavListContainerStyles = useMemo(\n    () => ({\n      flex: 1,\n      overflowY: \"auto\",\n    }),\n    [],\n  );\n\n  const sideNavFooterContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      bottom: 0,\n      paddingTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  const expandLeftIconStyles = useMemo(\n    () => ({\n      fontSize: \"1em\",\n      margin: `0 ${odysseyDesignTokens.Spacing1}`,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box sx={sideNavStyles}>\n      <SideNavCollapsedContainer\n        tabIndex={0}\n        role=\"button\"\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        onClick={sideNavExpandClickHandler}\n        onKeyDown={sideNavExpandKeyHandler}\n        data-se=\"collapsed-region\"\n        data-aria-label=\"expand side navigation\"\n      >\n        <ExpandLeftIcon sx={expandLeftIconStyles} />\n      </SideNavCollapsedContainer>\n      <SideNavExpandContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        data-se=\"expanded-region\"\n      >\n        <Box sx={sideNavHeaderContainerStyles}>\n          <SideNavHeader\n            navHeaderText={navHeaderText}\n            isCollapsible={isCollapsible}\n            onCollapse={sideNavCollapseHandler}\n          />\n        </Box>\n        <Box sx={sideNavListContainerStyles} testId=\"scrollable-region\">\n          <SideNavListContainer>\n            {processedSideNavItems?.map((item) => {\n              const {\n                id,\n                label,\n                isSectionHeader,\n                startIcon,\n                children,\n                isDefaultExpanded,\n                isDisabled,\n                isExpanded,\n              } = item;\n\n              if (isSectionHeader) {\n                return (\n                  <SectionHeader\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {label}\n                  </SectionHeader>\n                );\n              } else if (children) {\n                return (\n                  <SideNavListItemContainer\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    <NavAccordion\n                      label={label}\n                      isDefaultExpanded={isDefaultExpanded}\n                      isExpanded={isExpanded}\n                      startIcon={startIcon}\n                      isDisabled={isDisabled}\n                    >\n                      <SideNavListContainer id={`${id}-list`}>\n                        {children}\n                      </SideNavListContainer>\n                    </NavAccordion>\n                  </SideNavListItemContainer>\n                );\n              } else {\n                return (\n                  <SideNavItemContent\n                    key={item.id}\n                    scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}\n                    {...item}\n                  />\n                );\n              }\n            })}\n          </SideNavListContainer>\n        </Box>\n        {footerItems && (\n          <Box sx={sideNavFooterContainerStyles}>\n            <SideNavFooterContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <SideNavFooterContent footerItems={footerItems} />\n            </SideNavFooterContainer>\n          </Box>\n        )}\n      </SideNavExpandContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SACEC,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,WAAW,EAEXC,MAAM,EACNC,SAAS,QACJ,OAAO;AAAC,SAENC,GAAG;AAAA,SACHC,cAAc;AAAA,SACdC,YAAY;AAAA,SAGnBC,sBAAsB;AAAA,SAGfC,aAAa;AAAA,SAEpBC,kBAAkB,EAClBC,wBAAwB;AAAA,SAEjBC,oBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE7B,MAAMC,yBAAyB,GAAGnB,MAAM,CAAC,KAAK,EAAE;EAC9CoB,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCC,mBAAmB;EACnBC;AAIF,CAAC,MAAM;EACLC,eAAe,EAAEF,mBAAmB,CAACG,aAAa;EAClDC,UAAU,EAAEJ,mBAAmB,CAACK,QAAQ;EACxCC,MAAM,EAAE,SAAS;EACjBC,KAAK,EAAEN,kBAAkB,GAAG,MAAM,GAAG,CAAC;EACtCO,OAAO,EAAEP,kBAAkB,GAAG,CAAC,GAAG,CAAC;EACnCQ,UAAU,EAAER,kBAAkB,GAAG,SAAS,GAAG,QAAQ;EACrDS,kBAAkB,EAAE,SAAS;EAC7BC,kBAAkB,EAAEX,mBAAmB,CAACY,sBAAsB;EAC9DC,wBAAwB,EAAEb,mBAAmB,CAACc;AAChD,CAAC,CACH,CAAC;AAED,MAAMC,sBAAsB,GAAGrC,MAAM,CAAC,KAAK,EAAE;EAC3CoB,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCC,mBAAmB;EACnBC;AAIF,CAAC,MAAM;EACLC,eAAe,EAAEF,mBAAmB,CAACgB,eAAe;EACpDC,aAAa,EAAE,QAAQ;EACvBC,OAAO,EAAE,MAAM;EACfV,OAAO,EAAEP,kBAAkB,GAAG,CAAC,GAAG,CAAC;EACnCQ,UAAU,EAAER,kBAAkB,GAAG,QAAQ,GAAG,SAAS;EACrDM,KAAK,EAAEN,kBAAkB,GAAG,GAAG,GAAG,MAAM;EACxCS,kBAAkB,EAAE,gBAAgB;EACpCC,kBAAkB,EAAEX,mBAAmB,CAACY,sBAAsB;EAC9DC,wBAAwB,EAAEb,mBAAmB,CAACc;AAChD,CAAC,CACH,CAAC;AAED,MAAMK,oBAAoB,GAAGzC,MAAM,CAAC0C,EAAE,CAAC;EACrCC,OAAO,EAAE,CAAC;EACVC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE;AACjB,CAAC,CAAC;AAEF,MAAMC,aAAa,GAAG9C,MAAM,CAAC,IAAI,EAAE;EACjCoB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEyB,QAAQ,EAAEzB,mBAAmB,CAAC0B,sBAAsB;EACpDC,UAAU,EAAE3B,mBAAmB,CAAC4B,2BAA2B;EAC3DC,KAAK,EAAE7B,mBAAmB,CAAC8B,aAAa;EACxC1B,UAAU,EAAEJ,mBAAmB,CAAC+B,QAAQ;EACxCC,aAAa,EAAEhC,mBAAmB,CAAC+B,QAAQ;EAC3CE,WAAW,EAAEjC,mBAAmB,CAACkC,QAAQ;EACzCC,aAAa,EAAE;AACjB,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAG1D,MAAM,CAAC,KAAK,EAAE;EAC3CoB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEI,UAAU,EAAEJ,mBAAmB,CAACqC,QAAQ;EACxCL,aAAa,EAAEhC,mBAAmB,CAACqC,QAAQ;EAC3CnB,OAAO,EAAE,MAAM;EACfoB,cAAc,EAAE,QAAQ;EACxBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBf,QAAQ,EAAEzB,mBAAmB,CAAC0B,sBAAsB;EACpD,KAAK,EAAE;IACLG,KAAK,EAAG,GAAE7B,mBAAmB,CAACyC,sBAAuB;EACvD,CAAC;EACD,WAAW,EAAE;IACXC,cAAc,EAAE;EAClB,CAAC;EACD,aAAa,EAAE;IACbb,KAAK,EAAE7B,mBAAmB,CAACyC;EAC7B;AACF,CAAC,CAAC,CAAC;AAEH,MAAME,OAAO,GAAGA,CAAC;EACfC,aAAa;EACbC,aAAa;EACbC,UAAU;EACVC,QAAQ;EACRC,YAAY;EACZC;AACY,CAAC,KAAK;EAClB,MAAM,CAAChD,kBAAkB,EAAEiD,mBAAmB,CAAC,GAAGrE,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAMmB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EAEpD,MAAM+D,iBAAiB,GAAGpE,MAAM,CAAgB,IAAI,CAAC;EAMrD,MAAMqE,gCAAgC,GAAGxE,OAAO,CAAC,MAAM;IACrD,MAAMyE,cAAc,GAAGL,YAAY,CAACM,OAAO,CAAEC,WAAW,IACtDA,WAAW,CAACC,QAAQ,GAChB,CAACD,WAAW,EAAE,GAAGA,WAAW,CAACC,QAAQ,CAAC,GACtCD,WACN,CAAC;IACD,MAAME,uBAAuB,GAAGJ,cAAc,CAACK,IAAI,CAChDH,WAAW,IAAKA,WAAW,CAACI,UAC/B,CAAC;IACD,OAAOF,uBAAuB,EAAEG,EAAE;EACpC,CAAC,EAAE,CAACZ,YAAY,CAAC,CAAC;EAMlBhE,SAAS,CAAC,MAAM;IACd,IAAIoE,gCAAgC,IAAID,iBAAiB,CAACU,OAAO,EAAE;MACjEV,iBAAiB,CAACU,OAAO,CAACC,cAAc,CAAC,CAAC;IAC5C;EACF,CAAC,EAAE,CAACV,gCAAgC,EAAED,iBAAiB,CAAC,CAAC;EAOzD,MAAMY,qCAAqC,GAAGjF,WAAW,CACtDkF,MAAc,IACbA,MAAM,KAAKZ,gCAAgC,GACvCD,iBAAiB,GACjBc,SAAS,EACf,CAACb,gCAAgC,CACnC,CAAC;EAED,MAAMc,qBAAqB,GAAGtF,OAAO,CACnC,MACEoE,YAAY,CAACmB,GAAG,CAAEC,IAAI,KAAM;IAC1B,GAAGA,IAAI;IACPZ,QAAQ,EAAEY,IAAI,CAACZ,QAAQ,EAAEW,GAAG,CAAEE,UAAU,IACtC3E,IAAA,CAACJ,kBAAkB;MAEjBgF,SAAS,EAAEP,qCAAqC,CAACM,UAAU,CAACT,EAAE,CAAE;MAAA,GAC5DS;IAAU,GAFTA,UAAU,CAACT,EAGjB,CACF;EACH,CAAC,CAAC,CAAC,EACL,CAACG,qCAAqC,EAAEf,YAAY,CACtD,CAAC;EAED,MAAMuB,sBAAsB,GAAGzF,WAAW,CAAC,MAAM;IAC/CoE,mBAAmB,CAAC,CAACjD,kBAAkB,CAAC;IACxC6C,UAAU,GAAG,CAAC;EAChB,CAAC,EAAE,CAAC7C,kBAAkB,EAAEiD,mBAAmB,EAAEJ,UAAU,CAAC,CAAC;EAEzD,MAAM0B,yBAAyB,GAAG1F,WAAW,CAAC,MAAM;IAClDoE,mBAAmB,CAAC,CAACjD,kBAAkB,CAAC;IACxC8C,QAAQ,GAAG,CAAC;EACd,CAAC,EAAE,CAAC9C,kBAAkB,EAAEiD,mBAAmB,EAAEH,QAAQ,CAAC,CAAC;EAEvD,MAAM0B,uBAAuB,GAAG3F,WAAW,CACxC4F,KAAoC,IAAK;IACxC,IAAIA,KAAK,EAAEC,GAAG,KAAK,OAAO,IAAID,KAAK,EAAEE,IAAI,KAAK,OAAO,EAAE;MACrDF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtB3B,mBAAmB,CAAC,CAACjD,kBAAkB,CAAC;MACxC8C,QAAQ,GAAG,CAAC;IACd;EACF,CAAC,EACD,CAAC9C,kBAAkB,EAAEiD,mBAAmB,EAAEH,QAAQ,CACpD,CAAC;EAED,MAAM+B,aAAa,GAAGlG,OAAO,CAC3B,OAAO;IACLsC,OAAO,EAAE,MAAM;IACf6D,MAAM,EAAE;EACV,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMC,4BAA4B,GAAGpG,OAAO,CAC1C,OAAO;IACLqG,QAAQ,EAAE,QAAQ;IAClBC,GAAG,EAAE;EACP,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMC,0BAA0B,GAAGvG,OAAO,CACxC,OAAO;IACLwG,IAAI,EAAE,CAAC;IACPC,SAAS,EAAE;EACb,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMC,4BAA4B,GAAG1G,OAAO,CAC1C,OAAO;IACLqG,QAAQ,EAAE,QAAQ;IAClBM,MAAM,EAAE,CAAC;IACTnF,UAAU,EAAEJ,mBAAmB,CAACqC;EAClC,CAAC,CAAC,EACF,CAACrC,mBAAmB,CACtB,CAAC;EAED,MAAMwF,oBAAoB,GAAG5G,OAAO,CAClC,OAAO;IACL6C,QAAQ,EAAE,KAAK;IACfgE,MAAM,EAAG,KAAIzF,mBAAmB,CAAC0F,QAAS;EAC5C,CAAC,CAAC,EACF,CAAC1F,mBAAmB,CACtB,CAAC;EAED,OACEJ,KAAA,CAACX,GAAG;IAAC0G,EAAE,EAAEb,aAAc;IAAAtB,QAAA,GACrB9D,IAAA,CAACG,yBAAyB;MACxB+F,QAAQ,EAAE,CAAE;MACZC,IAAI,EAAC,QAAQ;MACb7F,mBAAmB,EAAEA,mBAAoB;MACzCC,kBAAkB,EAAEA,kBAAmB;MACvC6F,OAAO,EAAEtB,yBAA0B;MACnCuB,SAAS,EAAEtB,uBAAwB;MACnC,WAAQ,kBAAkB;MAC1B,mBAAgB,wBAAwB;MAAAjB,QAAA,EAExC9D,IAAA,CAACR,cAAc;QAACyG,EAAE,EAAEH;MAAqB,CAAE;IAAC,CACnB,CAAC,EAC5B5F,KAAA,CAACmB,sBAAsB;MACrBf,mBAAmB,EAAEA,mBAAoB;MACzCC,kBAAkB,EAAEA,kBAAmB;MACvC,WAAQ,iBAAiB;MAAAuD,QAAA,GAEzB9D,IAAA,CAACT,GAAG;QAAC0G,EAAE,EAAEX,4BAA6B;QAAAxB,QAAA,EACpC9D,IAAA,CAACL,aAAa;UACZuD,aAAa,EAAEA,aAAc;UAC7BC,aAAa,EAAEA,aAAc;UAC7BC,UAAU,EAAEyB;QAAuB,CACpC;MAAC,CACC,CAAC,EACN7E,IAAA,CAACT,GAAG;QAAC0G,EAAE,EAAER,0BAA2B;QAACa,MAAM,EAAC,mBAAmB;QAAAxC,QAAA,EAC7D9D,IAAA,CAACyB,oBAAoB;UAAAqC,QAAA,EAClBU,qBAAqB,EAAEC,GAAG,CAAEC,IAAI,IAAK;YACpC,MAAM;cACJR,EAAE;cACFqC,KAAK;cACLC,eAAe;cACfC,SAAS;cACT3C,QAAQ;cACR4C,iBAAiB;cACjBC,UAAU;cACVC;YACF,CAAC,GAAGlC,IAAI;YAER,IAAI8B,eAAe,EAAE;cACnB,OACExG,IAAA,CAAC8B,aAAa;gBACZoC,EAAE,EAAEA,EAAG;gBAEP5D,mBAAmB,EAAEA,mBAAoB;gBAAAwD,QAAA,EAExCyC;cAAK,GAHDrC,EAIQ,CAAC;YAEpB,CAAC,MAAM,IAAIJ,QAAQ,EAAE;cACnB,OACE9D,IAAA,CAACH,wBAAwB;gBACvBqE,EAAE,EAAEA,EAAG;gBAEP5D,mBAAmB,EAAEA,mBAAoB;gBAAAwD,QAAA,EAEzC9D,IAAA,CAACP,YAAY;kBACX8G,KAAK,EAAEA,KAAM;kBACbG,iBAAiB,EAAEA,iBAAkB;kBACrCE,UAAU,EAAEA,UAAW;kBACvBH,SAAS,EAAEA,SAAU;kBACrBE,UAAU,EAAEA,UAAW;kBAAA7C,QAAA,EAEvB9D,IAAA,CAACyB,oBAAoB;oBAACyC,EAAE,EAAG,GAAEA,EAAG,OAAO;oBAAAJ,QAAA,EACpCA;kBAAQ,CACW;gBAAC,CACX;cAAC,GAbVI,EAcmB,CAAC;YAE/B,CAAC,MAAM;cACL,OACElE,IAAA,CAACJ,kBAAkB;gBAEjBgF,SAAS,EAAEP,qCAAqC,CAACK,IAAI,CAACR,EAAE,CAAE;gBAAA,GACtDQ;cAAI,GAFHA,IAAI,CAACR,EAGX,CAAC;YAEN;UACF,CAAC;QAAC,CACkB;MAAC,CACpB,CAAC,EACLX,WAAW,IACVvD,IAAA,CAACT,GAAG;QAAC0G,EAAE,EAAEL,4BAA6B;QAAA9B,QAAA,EACpC9D,IAAA,CAAC0C,sBAAsB;UAACpC,mBAAmB,EAAEA,mBAAoB;UAAAwD,QAAA,EAC/D9D,IAAA,CAACF,oBAAoB;YAACyD,WAAW,EAAEA;UAAY,CAAE;QAAC,CAC5B;MAAC,CACtB,CACN;IAAA,CACqB,CAAC;EAAA,CACtB,CAAC;AAEV,CAAC;AAED,MAAMsD,eAAe,GAAG5H,IAAI,CAACgE,OAAO,CAAC;AACrC4D,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAI5D,OAAO"}
+{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","ExpandLeftIcon","NavAccordion","useOdysseyDesignTokens","OktaLogo","SideNavHeader","SideNavItemContent","SideNavListItemContainer","SideNavFooterContent","jsx","_jsx","jsxs","_jsxs","DEFAULT_SIDE_NAV_WIDTH","SideNavContainer","shouldForwardProp","prop","expandedWidth","display","height","maxWidth","overflow","SideNavCollapsedContainer","odysseyDesignTokens","isSideNavCollapsed","backgroundColor","HueNeutral300","paddingTop","Spacing5","cursor","width","opacity","visibility","transitionProperty","transitionDuration","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","SideNavExpandContainer","HueNeutralWhite","flexDirection","borderRight","BorderWidthMain","BorderStyleMain","HueNeutral50","SideNavHeaderContainer","hasContentScrolled","position","top","borderBottom","SideNavListContainer","ul","padding","listStyle","listStyleType","SideNavScrollableContainer","div","flex","overflowY","SectionHeader","fontFamily","TypographyFamilyHeading","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","color","HueNeutral600","Spacing3","paddingBottom","paddingLeft","Spacing4","textTransform","SideNavFooter","isContentScrollable","bottom","Spacing2","transitionTiming","boxShadow","DepthHigh","SideNavFooterItemsContainer","justifyContent","flexWrap","alignItems","TypographyColorHeading","textDecoration","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","SideNav","navHeaderText","isCollapsible","onCollapse","onExpand","sideNavItems","footerItems","footerComponent","logo","setSideNavCollapsed","setIsContentScrollable","setHasContentScrolled","scrollableContentRef","resizeObserverRef","intersectionObserverRef","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","li","firstChild","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","children","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","processedSideNavItems","map","item","childProps","scrollRef","sideNavCollapseHandler","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","expandLeftIconStyles","margin","Spacing1","tabIndex","role","onClick","onKeyDown","sx","ref","label","isSectionHeader","startIcon","isDefaultExpanded","isDisabled","isExpanded","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 from \"@emotion/styled\";\nimport {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from \"react\";\n\nimport { ExpandLeftIcon } from \"../../icons.generated\";\nimport { NavAccordion } from \"../NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport type { SideNavProps } from \"./types\";\nimport { OktaLogo } from \"./OktaLogo\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n  SideNavItemContent,\n  SideNavListItemContainer,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\nconst SideNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"expandedWidth\",\n})(({ expandedWidth }: { expandedWidth: SideNavProps[\"expandedWidth\"] }) => ({\n  display: \"flex\",\n  height: \"100%\",\n  maxWidth: expandedWidth,\n  overflow: \"hidden\",\n}));\n\nconst SideNavCollapsedContainer = 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    backgroundColor: odysseyDesignTokens.HueNeutral300,\n    paddingTop: odysseyDesignTokens.Spacing5,\n    cursor: \"pointer\",\n    width: isSideNavCollapsed ? \"auto\" : 0,\n    opacity: isSideNavCollapsed ? 1 : 0,\n    visibility: isSideNavCollapsed ? \"visible\" : \"hidden\",\n    transitionProperty: \"opacity\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavExpandContainer = styled(\"nav\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSideNavCollapsed\" &&\n    prop !== \"expandedWidth\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n    expandedWidth,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n    expandedWidth: string;\n  }) => ({\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    flexDirection: \"column\",\n    display: \"flex\",\n    opacity: isSideNavCollapsed ? 0 : 1,\n    visibility: isSideNavCollapsed ? \"hidden\" : \"visible\",\n    width: isSideNavCollapsed ? \"0\" : expandedWidth,\n    transitionProperty: \"opacity, width\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n    borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\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    position: \"sticky\",\n    top: 0,\n    // The bottom border should appear only if the scrollable region has been scrolled\n    ...(hasContentScrolled && {\n      borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,\n    }),\n  }),\n);\n\nconst SideNavListContainer = styled.ul({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n});\n\nconst SideNavScrollableContainer = styled.div({\n  flex: 1,\n  overflowY: \"auto\",\n});\n\nconst SectionHeader = styled(\"li\", {\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  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n  paddingLeft: odysseyDesignTokens.Spacing4,\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    position: \"sticky\",\n    bottom: 0,\n    paddingTop: odysseyDesignTokens.Spacing2,\n    transitionProperty: \"box-shadow\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n    // The box shadow should appear above the footer only if the scrollable region has overflow\n    ...(isContentScrollable && {\n      boxShadow: odysseyDesignTokens.DepthHigh,\n    }),\n  }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingTop: odysseyDesignTokens.Spacing2,\n  paddingBottom: odysseyDesignTokens.Spacing2,\n  display: \"flex\",\n  justifyContent: \"center\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n  },\n  \"& a:visited\": {\n    color: odysseyDesignTokens.TypographyColorHeading,\n  },\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n  scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst SideNav = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n  onExpand,\n  sideNavItems,\n  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,\n  footerItems,\n  footerComponent,\n  logo,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\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\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    if (intersectionObserverRef.current && scrollableContentRef.current) {\n      const ul = scrollableContentRef.current;\n      const li = ul?.firstChild;\n      intersectionObserverRef.current.observe(li as HTMLElement);\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  }, []);\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.children\n        ? [sideNavItem, ...sideNavItem.children]\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 processedSideNavItems = useMemo(\n    () =>\n      sideNavItems.map((item) => ({\n        ...item,\n        children: item.children?.map((childProps) => (\n          <SideNavItemContent\n            key={childProps.id}\n            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n            {...childProps}\n          />\n        )),\n      })),\n    [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems],\n  );\n\n  const sideNavCollapseHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onCollapse?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onExpand?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);\n\n  const sideNavExpandKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        setSideNavCollapsed(!isSideNavCollapsed);\n        onExpand?.();\n      }\n    },\n    [isSideNavCollapsed, setSideNavCollapsed, onExpand],\n  );\n\n  const expandLeftIconStyles = useMemo(\n    () => ({\n      fontSize: \"1em\",\n      margin: `0 ${odysseyDesignTokens.Spacing1}`,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <SideNavContainer expandedWidth={expandedWidth}>\n      <SideNavCollapsedContainer\n        tabIndex={0}\n        role=\"button\"\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        onClick={sideNavExpandClickHandler}\n        onKeyDown={sideNavExpandKeyHandler}\n        data-se=\"collapsed-region\"\n        data-aria-label=\"expand side navigation\"\n      >\n        <ExpandLeftIcon sx={expandLeftIconStyles} />\n      </SideNavCollapsedContainer>\n      <SideNavExpandContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        data-se=\"expanded-region\"\n        expandedWidth={expandedWidth}\n        aria-label={navHeaderText}\n      >\n        <SideNavHeaderContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          hasContentScrolled={hasContentScrolled}\n        >\n          <SideNavHeader\n            logo={logo || <OktaLogo />}\n            navHeaderText={navHeaderText}\n            isCollapsible={isCollapsible}\n            onCollapse={sideNavCollapseHandler}\n          />\n        </SideNavHeaderContainer>\n        <SideNavScrollableContainer data-se=\"scrollable-region\">\n          <SideNavListContainer ref={scrollableContentRef}>\n            {processedSideNavItems?.map((item) => {\n              const {\n                id,\n                label,\n                isSectionHeader,\n                startIcon,\n                children,\n                isDefaultExpanded,\n                isDisabled,\n                isExpanded,\n              } = item;\n\n              if (isSectionHeader) {\n                return (\n                  <SectionHeader\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {label}\n                  </SectionHeader>\n                );\n              } else if (children) {\n                return (\n                  <SideNavListItemContainer\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    <NavAccordion\n                      label={label}\n                      isDefaultExpanded={isDefaultExpanded}\n                      isExpanded={isExpanded}\n                      startIcon={startIcon}\n                      isDisabled={isDisabled}\n                    >\n                      <SideNavListContainer id={`${id}-list`}>\n                        {children}\n                      </SideNavListContainer>\n                    </NavAccordion>\n                  </SideNavListItemContainer>\n                );\n              } else {\n                return (\n                  <SideNavItemContent\n                    key={item.id}\n                    scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}\n                    {...item}\n                  />\n                );\n              }\n            })}\n          </SideNavListContainer>\n        </SideNavScrollableContainer>\n        {(footerItems || footerComponent) && (\n          <SideNavFooter\n            odysseyDesignTokens={odysseyDesignTokens}\n            isContentScrollable={isContentScrollable}\n          >\n            {footerComponent}\n            {footerItems && !footerComponent && (\n              <SideNavFooterItemsContainer\n                odysseyDesignTokens={odysseyDesignTokens}\n              >\n                <SideNavFooterContent footerItems={footerItems} />\n              </SideNavFooterItemsContainer>\n            )}\n          </SideNavFooter>\n        )}\n      </SideNavExpandContainer>\n    </SideNavContainer>\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

@@ -16,8 +16,21 @@ import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Box } from "../../Box.js";
 import { Heading6 } from "../../Typography.js";
 import { CollapseIcon } from "./CollapseIcon.js";
+import { TOP_NAV_HEIGHT_TOKEN } from "../TopNav.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavLogoContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],
+  padding: odysseyDesignTokens.Spacing3,
+  borderColor: odysseyDesignTokens.HueNeutral50,
+  borderStyle: odysseyDesignTokens.BorderStyleMain,
+  borderWidth: 0,
+  borderBottomWidth: odysseyDesignTokens.BorderWidthMain
+}));
 const SideNavHeaderContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
@@ -34,21 +47,31 @@ const SideNavHeaderContainer = styled("div", {
 const SideNavHeader = ({
   navHeaderText,
   isCollapsible,
-  onCollapse
+  onCollapse,
+  logo
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const sideNavHeaderStyles = useMemo(() => ({
     marginTop: odysseyDesignTokens.Spacing2
   }), [odysseyDesignTokens]);
-  return _jsxs(SideNavHeaderContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [_jsx(Box, {
-      sx: sideNavHeaderStyles,
-      children: _jsx(Heading6, {
-        children: navHeaderText
-      })
-    }), isCollapsible && _jsx(CollapseIcon, {
-      onClick: onCollapse
+  return _jsxs(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [_jsx(SideNavLogoContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: logo
+    }), _jsxs(SideNavHeaderContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Box, {
+        sx: sideNavHeaderStyles,
+        children: _jsx(Heading6, {
+          children: navHeaderText
+        })
+      }), isCollapsible && _jsx(CollapseIcon, {
+        onClick: onCollapse
+      })]
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useMemo","useOdysseyDesignTokens","Box","Heading6","CollapseIcon","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","shouldForwardProp","prop","odysseyDesignTokens","display","justifyContent","alignItems","paddingLeft","Spacing4","paddingRight","paddingTop","Spacing3","paddingBottom","SideNavHeader","navHeaderText","isCollapsible","onCollapse","sideNavHeaderStyles","marginTop","Spacing2","children","sx","onClick","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, ReactNode, useMemo } from \"react\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Box } from \"../../Box\";\nimport { Heading6 } from \"../../Typography\";\nimport { CollapseIcon } from \"./CollapseIcon\";\nimport type { SideNavProps } from \"./types\";\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  paddingRight: odysseyDesignTokens.Spacing4,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n}));\n\nconst SideNavHeader = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n}: Pick<\n  SideNavProps,\n  \"navHeaderText\" | \"isCollapsible\" | \"onCollapse\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavHeaderStyles = useMemo(\n    () => ({\n      marginTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Box sx={sideNavHeaderStyles}>\n        <Heading6>{navHeaderText}</Heading6>\n      </Box>\n      {isCollapsible && <CollapseIcon onClick={onCollapse} />}\n    </SideNavHeaderContainer>\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,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAG/CC,sBAAsB;AAAA,SAEfC,GAAG;AAAA,SACHC,QAAQ;AAAA,SACRC,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGrB,MAAMC,sBAAsB,GAAGX,MAAM,CAAC,KAAK,EAAE;EAC3CY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,UAAU,EAAE,QAAQ;EACpBC,WAAW,EAAEJ,mBAAmB,CAACK,QAAQ;EACzCC,YAAY,EAAEN,mBAAmB,CAACK,QAAQ;EAC1CE,UAAU,EAAEP,mBAAmB,CAACQ,QAAQ;EACxCC,aAAa,EAAET,mBAAmB,CAACQ;AACrC,CAAC,CAAC,CAAC;AAEH,MAAME,aAAa,GAAGA,CAAC;EACrBC,aAAa;EACbC,aAAa;EACbC;AAIF,CAAC,KAAgB;EACf,MAAMb,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,MAAMyB,mBAAmB,GAAG1B,OAAO,CACjC,OAAO;IACL2B,SAAS,EAAEf,mBAAmB,CAACgB;EACjC,CAAC,CAAC,EACF,CAAChB,mBAAmB,CACtB,CAAC;EAED,OACEJ,KAAA,CAACC,sBAAsB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAiB,QAAA,GAC/DvB,IAAA,CAACJ,GAAG;MAAC4B,EAAE,EAAEJ,mBAAoB;MAAAG,QAAA,EAC3BvB,IAAA,CAACH,QAAQ;QAAA0B,QAAA,EAAEN;MAAa,CAAW;IAAC,CACjC,CAAC,EACLC,aAAa,IAAIlB,IAAA,CAACF,YAAY;MAAC2B,OAAO,EAAEN;IAAW,CAAE,CAAC;EAAA,CACjC,CAAC;AAE7B,CAAC;AACD,MAAMO,qBAAqB,GAAGjC,IAAI,CAACuB,aAAa,CAAC;AACjDU,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIV,aAAa"}
+{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useMemo","useOdysseyDesignTokens","Box","Heading6","CollapseIcon","TOP_NAV_HEIGHT_TOKEN","jsx","_jsx","jsxs","_jsxs","SideNavLogoContainer","shouldForwardProp","prop","odysseyDesignTokens","height","padding","Spacing3","borderColor","HueNeutral50","borderStyle","BorderStyleMain","borderWidth","borderBottomWidth","BorderWidthMain","SideNavHeaderContainer","display","justifyContent","alignItems","paddingLeft","Spacing4","paddingRight","paddingTop","paddingBottom","SideNavHeader","navHeaderText","isCollapsible","onCollapse","logo","sideNavHeaderStyles","marginTop","Spacing2","sx","flexDirection","children","onClick","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, ReactNode, useMemo } from \"react\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Box } from \"../../Box\";\nimport { Heading6 } from \"../../Typography\";\nimport { CollapseIcon } from \"./CollapseIcon\";\nimport type { SideNavProps } from \"./types\";\nimport { TOP_NAV_HEIGHT_TOKEN } from \"../TopNav\";\n\nconst SideNavLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],\n  padding: odysseyDesignTokens.Spacing3,\n  borderColor: odysseyDesignTokens.HueNeutral50,\n  borderStyle: odysseyDesignTokens.BorderStyleMain,\n  borderWidth: 0,\n  borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n}));\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  paddingRight: odysseyDesignTokens.Spacing4,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n}));\n\nconst SideNavHeader = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n  logo,\n}: Pick<\n  SideNavProps,\n  \"navHeaderText\" | \"isCollapsible\" | \"onCollapse\" | \"logo\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavHeaderStyles = useMemo(\n    () => ({\n      marginTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {logo}\n      </SideNavLogoContainer>\n      <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Box sx={sideNavHeaderStyles}>\n          <Heading6>{navHeaderText}</Heading6>\n        </Box>\n        {isCollapsible && <CollapseIcon onClick={onCollapse} />}\n      </SideNavHeaderContainer>\n    </Box>\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,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAG/CC,sBAAsB;AAAA,SAEfC,GAAG;AAAA,SACHC,QAAQ;AAAA,SACRC,YAAY;AAAA,SAEZC,oBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE7B,MAAMC,oBAAoB,GAAGZ,MAAM,CAAC,KAAK,EAAE;EACzCa,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,MAAM,EAAED,mBAAmB,CAACR,oBAAoB,CAAC;EACjDU,OAAO,EAAEF,mBAAmB,CAACG,QAAQ;EACrCC,WAAW,EAAEJ,mBAAmB,CAACK,YAAY;EAC7CC,WAAW,EAAEN,mBAAmB,CAACO,eAAe;EAChDC,WAAW,EAAE,CAAC;EACdC,iBAAiB,EAAET,mBAAmB,CAACU;AACzC,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAG1B,MAAM,CAAC,KAAK,EAAE;EAC3Ca,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEY,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,UAAU,EAAE,QAAQ;EACpBC,WAAW,EAAEf,mBAAmB,CAACgB,QAAQ;EACzCC,YAAY,EAAEjB,mBAAmB,CAACgB,QAAQ;EAC1CE,UAAU,EAAElB,mBAAmB,CAACG,QAAQ;EACxCgB,aAAa,EAAEnB,mBAAmB,CAACG;AACrC,CAAC,CAAC,CAAC;AAEH,MAAMiB,aAAa,GAAGA,CAAC;EACrBC,aAAa;EACbC,aAAa;EACbC,UAAU;EACVC;AAIF,CAAC,KAAgB;EACf,MAAMxB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EAEpD,MAAMqC,mBAAmB,GAAGtC,OAAO,CACjC,OAAO;IACLuC,SAAS,EAAE1B,mBAAmB,CAAC2B;EACjC,CAAC,CAAC,EACF,CAAC3B,mBAAmB,CACtB,CAAC;EAED,OACEJ,KAAA,CAACP,GAAG;IACFuC,EAAE,EAAE;MACFhB,OAAO,EAAE,MAAM;MACfiB,aAAa,EAAE;IACjB,CAAE;IAAAC,QAAA,GAEFpC,IAAA,CAACG,oBAAoB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAA8B,QAAA,EAC5DN;IAAI,CACe,CAAC,EACvB5B,KAAA,CAACe,sBAAsB;MAACX,mBAAmB,EAAEA,mBAAoB;MAAA8B,QAAA,GAC/DpC,IAAA,CAACL,GAAG;QAACuC,EAAE,EAAEH,mBAAoB;QAAAK,QAAA,EAC3BpC,IAAA,CAACJ,QAAQ;UAAAwC,QAAA,EAAET;QAAa,CAAW;MAAC,CACjC,CAAC,EACLC,aAAa,IAAI5B,IAAA,CAACH,YAAY;QAACwC,OAAO,EAAER;MAAW,CAAE,CAAC;IAAA,CACjC,CAAC;EAAA,CACtB,CAAC;AAEV,CAAC;AACD,MAAMS,qBAAqB,GAAG9C,IAAI,CAACkC,aAAa,CAAC;AACjDY,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIZ,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/SideNav/types.ts"],"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 type { ReactElement } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  navHeaderText: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   * Footer items in the side nav\n   */\n  footerItems?: SideNavFooterItem[];\n  /**\n   *  Triggers when the side nav is collapsed\n   */\n  onCollapse?(): void;\n  /**\n   *  Triggers when the side nav is expanded\n   */\n  onExpand?(): void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n} & Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  id: string;\n  label: string;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\n  /**\n   * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n   * the link/item is not clickable, and item with children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactElement;\n  /**\n   * The label to display inside the status\n   */\n  statusLabel?: string;\n  /**\n   * The link target prop. e.g., \"_blank\"\n   */\n  target?: string;\n} & (\n  | {\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      href?: never;\n      children?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * link added to the nav item. if it is undefined, static text will be displayed.\n       * fires onClick event when it is passed\n       */\n      href: string;\n      children?: never;\n      isSectionHeader?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as children within Accordion\n       */\n      children?: SideNavItem[];\n      /**\n       * Whether the accordion (nav item with children) is expanded by default\n       */\n      isDefaultExpanded?: boolean;\n      /**\n       * If true, expands the accordion, otherwise collapse it.\n       * Setting this prop enables control over the accordion.\n       */\n      isExpanded?: boolean;\n      isSectionHeader?: never;\n      href?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/SideNav/types.ts"],"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 type { ReactElement } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  navHeaderText: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   *  Triggers when the side nav is collapsed\n   */\n  onCollapse?(): void;\n  /**\n   *  Triggers when the side nav is expanded\n   */\n  onExpand?(): void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n  /**\n   * A CSS length string indicating the customizable expanded width of the SideNav container.\n   * (it will be smaller if isCollapsible and collapsed)\n   */\n  expandedWidth?: string;\n  /**\n   * An optional logo to display in the header. If not provided, will default to the Okta logo\n   */\n  logo?: ReactElement;\n} & (\n  | {\n      /**\n       * Footer items in the side nav\n       */\n      footerItems?: SideNavFooterItem[];\n      /**\n       * footerComponent cannot be used if footerItems are defined\n       */\n      footerComponent?: never;\n    }\n  | {\n      /**\n       * footerItems cannot be used if footerComponent is defined\n       */\n      footerItems?: never;\n      /**\n       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n       */\n      footerComponent?: ReactElement;\n    }\n) &\n  Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  id: string;\n  label: string;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\n  /**\n   * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n   * the link/item is not clickable, and item with children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactElement;\n  /**\n   * The label to display inside the status\n   */\n  statusLabel?: string;\n  /**\n   * The link target prop. e.g., \"_blank\"\n   */\n  target?: string;\n} & (\n  | {\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      href?: never;\n      children?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * link added to the nav item. if it is undefined, static text will be displayed.\n       * fires onClick event when it is passed\n       */\n      href: string;\n      children?: never;\n      isSectionHeader?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as children within Accordion\n       */\n      children?: SideNavItem[];\n      /**\n       * Whether the accordion (nav item with children) is expanded by default\n       */\n      isDefaultExpanded?: boolean;\n      /**\n       * If true, expands the accordion, otherwise collapse it.\n       * Setting this prop enables control over the accordion.\n       */\n      isExpanded?: boolean;\n      isSectionHeader?: never;\n      href?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}

package/dist/labs/TopNav.js

@@ -19,6 +19,7 @@ import { Subordinate } from "../Typography.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+export const TOP_NAV_HEIGHT_TOKEN = "Spacing9";
 const UserProfileContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
@@ -210,7 +211,7 @@ const TopNavContainer = styled("div", {
   display: "flex",
   alignItems: "center",
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  height: odysseyDesignTokens.Spacing9
+  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN]
 }));
 const SearchFieldContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"