@okta/odyssey-react-mui 1.35.0 → 1.35.4

package/dist/cjs/theme/useMediaQuery.cjs

@@ -18,16 +18,16 @@ var _react = require("react");
  */
 
 const useMediaQuery = mediaQuery => {
-  const [hasMatches, setHasMatches] = (0, _react.useState)(false);
+  const mediaQueryList = (0, _react.useMemo)(() => window.matchMedia(mediaQuery), [mediaQuery]);
+  const [hasMatches, setHasMatches] = (0, _react.useState)(() => mediaQueryList.matches);
+  const updateHasMatches = (0, _react.useCallback)(event => setHasMatches(event.matches), []);
   (0, _react.useEffect)(() => {
-    const mediaQueryList = window.matchMedia(mediaQuery);
-    const updateHasMatches = event => setHasMatches(event.matches);
     mediaQueryList.addEventListener("change", updateHasMatches);
     updateHasMatches(mediaQueryList);
     return () => {
       mediaQueryList.removeEventListener("change", updateHasMatches);
     };
-  }, [hasMatches, mediaQuery]);
+  }, [mediaQueryList, updateHasMatches]);
   return hasMatches;
 };
 exports.useMediaQuery = useMediaQuery;

package/dist/cjs/theme/useMediaQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.cjs","names":["_react","require","useMediaQuery","mediaQuery","hasMatches","setHasMatches","useState","useEffect","mediaQueryList","window","matchMedia","updateHasMatches","event","matches","addEventListener","removeEventListener","exports"],"sources":["../../../src/theme/useMediaQuery.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { useEffect, useState } from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string) => {\n  const [hasMatches, setHasMatches] = useState(false);\n\n  useEffect(() => {\n    const mediaQueryList = window.matchMedia(mediaQuery);\n\n    const updateHasMatches = (event: MediaQueryListEvent | MediaQueryList) =>\n      setHasMatches(event.matches);\n\n    mediaQueryList.addEventListener(\"change\", updateHasMatches);\n\n    updateHasMatches(mediaQueryList);\n\n    return () => {\n      mediaQueryList.removeEventListener(\"change\", updateHasMatches);\n    };\n  }, [hasMatches, mediaQuery]);\n\n  return hasMatches;\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,aAAa,GAAIC,UAAkB,IAAK;EACnD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEnD,IAAAC,gBAAS,EAAC,MAAM;IACd,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAU,CAACP,UAAU,CAAC;IAEpD,MAAMQ,gBAAgB,GAAIC,KAA2C,IACnEP,aAAa,CAACO,KAAK,CAACC,OAAO,CAAC;IAE9BL,cAAc,CAACM,gBAAgB,CAAC,QAAQ,EAAEH,gBAAgB,CAAC;IAE3DA,gBAAgB,CAACH,cAAc,CAAC;IAEhC,OAAO,MAAM;MACXA,cAAc,CAACO,mBAAmB,CAAC,QAAQ,EAAEJ,gBAAgB,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACP,UAAU,EAAED,UAAU,CAAC,CAAC;EAE5B,OAAOC,UAAU;AACnB,CAAC;AAACY,OAAA,CAAAd,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"file":"useMediaQuery.cjs","names":["_react","require","useMediaQuery","mediaQuery","mediaQueryList","useMemo","window","matchMedia","hasMatches","setHasMatches","useState","matches","updateHasMatches","useCallback","event","useEffect","addEventListener","removeEventListener","exports"],"sources":["../../../src/theme/useMediaQuery.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { StringWithValue } from \"./StringWithValue.js\";\n\nexport const useMediaQuery = <MediaQuery extends string>(\n  mediaQuery: StringWithValue<MediaQuery>,\n) => {\n  const mediaQueryList = useMemo(\n    () => window.matchMedia(mediaQuery),\n    [mediaQuery],\n  );\n\n  const [hasMatches, setHasMatches] = useState(() => mediaQueryList.matches);\n\n  const updateHasMatches = useCallback(\n    (event: MediaQueryListEvent | MediaQueryList) =>\n      setHasMatches(event.matches),\n    [],\n  );\n\n  useEffect(() => {\n    mediaQueryList.addEventListener(\"change\", updateHasMatches);\n\n    updateHasMatches(mediaQueryList);\n\n    return () => {\n      mediaQueryList.removeEventListener(\"change\", updateHasMatches);\n    };\n  }, [mediaQueryList, updateHasMatches]);\n\n  return hasMatches;\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAMO,MAAMC,aAAa,GACxBC,UAAuC,IACpC;EACH,MAAMC,cAAc,GAAG,IAAAC,cAAO,EAC5B,MAAMC,MAAM,CAACC,UAAU,CAACJ,UAAU,CAAC,EACnC,CAACA,UAAU,CACb,CAAC;EAED,MAAM,CAACK,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAMN,cAAc,CAACO,OAAO,CAAC;EAE1E,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EACjCC,KAA2C,IAC1CL,aAAa,CAACK,KAAK,CAACH,OAAO,CAAC,EAC9B,EACF,CAAC;EAED,IAAAI,gBAAS,EAAC,MAAM;IACdX,cAAc,CAACY,gBAAgB,CAAC,QAAQ,EAAEJ,gBAAgB,CAAC;IAE3DA,gBAAgB,CAACR,cAAc,CAAC;IAEhC,OAAO,MAAM;MACXA,cAAc,CAACa,mBAAmB,CAAC,QAAQ,EAAEL,gBAAgB,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACR,cAAc,EAAEQ,gBAAgB,CAAC,CAAC;EAEtC,OAAOJ,UAAU;AACnB,CAAC;AAACU,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAppContainerShadow3 = exports.StyledAppContainerShadow2 = exports.StyledAppContainerShadow1 = exports.InnerAppContainer = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _uiShellSharedConstants = require("./uiShellSharedConstants.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const StyledAppContainerShadowShared = (0, _styled.default)("div")({
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100%",
+  zIndex: _uiShellSharedConstants.UI_SHELL_BASE_Z_INDEX
+});
+const StyledAppContainerShadow1 = exports.StyledAppContainerShadow1 = (0, _styled.default)(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.08) 0%,
+      transparent 100%
+    )`,
+  height: "4px"
+});
+const StyledAppContainerShadow2 = exports.StyledAppContainerShadow2 = (0, _styled.default)(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.01) 0%,
+      transparent 100%
+    )`,
+  height: "6px"
+});
+const StyledAppContainerShadow3 = exports.StyledAppContainerShadow3 = (0, _styled.default)(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.05) 0%,
+      transparent 100%
+    )`,
+  height: "15px"
+});
+const InnerAppContainer = ({
+  isContentScrolled
+}) => isContentScrolled ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  children: [(0, _jsxRuntime.jsx)(StyledAppContainerShadow1, {}), (0, _jsxRuntime.jsx)(StyledAppContainerShadow2, {}), (0, _jsxRuntime.jsx)(StyledAppContainerShadow3, {})]
+}) : null;
+const MemoizedInnerAppContainer = exports.InnerAppContainer = (0, _react.memo)(InnerAppContainer);
+MemoizedInnerAppContainer.displayName = "InnerAppContainer";
+//# sourceMappingURL=InnerAppContainer.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InnerAppContainer.cjs","names":["_styled","_interopRequireDefault","require","_react","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledAppContainerShadowShared","styled","left","position","top","width","zIndex","UI_SHELL_BASE_Z_INDEX","StyledAppContainerShadow1","exports","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","jsxs","Fragment","children","jsx","MemoizedInnerAppContainer","memo","displayName"],"sources":["../../../src/ui-shell/InnerAppContainer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { UI_SHELL_BASE_Z_INDEX } from \"./uiShellSharedConstants.js\";\n\n// Shared styles for fake inset shadow. Not rendered anywhere.\nconst StyledAppContainerShadowShared = styled(\"div\")({\n  left: 0,\n  position: \"absolute\",\n  top: 0,\n  width: \"100%\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nexport const StyledAppContainerShadow1 = styled(StyledAppContainerShadowShared)(\n  {\n    background: `linear-gradient(\n      to bottom,\n      rgba(39, 39, 39, 0.08) 0%,\n      transparent 100%\n    )`,\n    height: \"4px\",\n  },\n);\n\nexport const StyledAppContainerShadow2 = styled(StyledAppContainerShadowShared)(\n  {\n    background: `linear-gradient(\n      to bottom,\n      rgba(39, 39, 39, 0.01) 0%,\n      transparent 100%\n    )`,\n    height: \"6px\",\n  },\n);\n\nexport const StyledAppContainerShadow3 = styled(StyledAppContainerShadowShared)(\n  {\n    background: `linear-gradient(\n      to bottom,\n      rgba(39, 39, 39, 0.05) 0%,\n      transparent 100%\n    )`,\n    height: \"15px\",\n  },\n);\n\nexport type InnerAppContainerProps = {\n  isContentScrolled: boolean;\n};\n\nconst InnerAppContainer = ({ isContentScrolled }: InnerAppContainerProps) =>\n  isContentScrolled ? (\n    <>\n      <StyledAppContainerShadow1 />\n      <StyledAppContainerShadow2 />\n      <StyledAppContainerShadow3 />\n    </>\n  ) : null;\n\nconst MemoizedInnerAppContainer = memo(InnerAppContainer);\nMemoizedInnerAppContainer.displayName = \"InnerAppContainer\";\n\nexport { MemoizedInnerAppContainer as InnerAppContainer };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAoE,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAdpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,MAAMG,8BAA8B,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC;EACnDC,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAEC;AACV,CAAC,CAAC;AAEK,MAAMC,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAP,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEU,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAX,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEU,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAME,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,IAAAZ,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEU,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,GACf,IAAAnB,WAAA,CAAAoB,IAAA,EAAApB,WAAA,CAAAqB,QAAA;EAAAC,QAAA,GACE,IAAAtB,WAAA,CAAAuB,GAAA,EAACX,yBAAyB,IAAE,CAAC,EAC7B,IAAAZ,WAAA,CAAAuB,GAAA,EAACP,yBAAyB,IAAE,CAAC,EAC7B,IAAAhB,WAAA,CAAAuB,GAAA,EAACN,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMO,yBAAyB,GAAAX,OAAA,CAAAK,iBAAA,GAAG,IAAAO,WAAI,EAACP,iBAAiB,CAAC;AACzDM,yBAAyB,CAACE,WAAW,GAAG,mBAAmB","ignoreList":[]}

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

@@ -11,6 +11,7 @@ var _reactErrorBoundary = require("react-error-boundary");
 var _Button = require("../Buttons/Button.cjs");
 var _Close = require("../icons.generated/Close.cjs");
 var _More = require("../icons.generated/More.cjs");
+var _InnerAppContainer = require("./InnerAppContainer.cjs");
 var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
 var _SideNav = require("./SideNav/SideNav.cjs");
 var _SideNavLogo = require("./SideNav/SideNavLogo.cjs");
@@ -45,6 +46,7 @@ const StyledAppContentArea = (0, _styled.default)("div")({
   gridTemplateColumns: "auto 1fr auto",
   gridTemplateRows: "1fr",
   height: "100%",
+  pointerEvents: "none",
   width: "100%"
 });
 const StyledAppContainer = (0, _styled.default)("div", {
@@ -342,7 +344,10 @@ const NarrowUiShellContent = ({
         }), (0, _jsxRuntime.jsx)(StyledAppContainer, {
           appBackgroundColor: uiShellContext?.appBackgroundColor,
           tabIndex: 0,
-          ref: uiShellAppAreaRef
+          ref: uiShellAppAreaRef,
+          children: (0, _jsxRuntime.jsx)(_InnerAppContainer.InnerAppContainer, {
+            isContentScrolled: isContentScrolled
+          })
         })]
       })]
     })]

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNav = void 0;
+exports.SideNav = exports.SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = exports.SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = void 0;
 var _Skeleton2 = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
@@ -36,6 +36,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+const SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = exports.SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = 12;
+const SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = exports.SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = 2;
 const StyledCollapsibleContent = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
@@ -71,54 +73,62 @@ const StyledOpacityTransitionContainer = (0, _styled.default)("div", {
   })
 }));
 const StyledSideNavContainer = (0, _styled.default)("nav", {
-  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "odysseyDesignTokens" && prop !== "isAppContentWhiteBackground" && prop !== "isSideNavCollapsed"
+  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "hasNeighboringContent" && prop !== "isAppContentWhiteBackground" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
 })(({
   backgroundColor,
+  hasNeighboringContent,
   isAppContentWhiteBackground,
   isSideNavCollapsed,
+  isSideNavToggleHighlighted,
   odysseyDesignTokens
 }) => ({
   backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,
   height: "100%",
   position: "relative",
   width: "fit-content",
-  ...(isAppContentWhiteBackground && {
-    borderRightWidth: odysseyDesignTokens.BorderWidthMain,
-    borderRightStyle: odysseyDesignTokens.BorderStyleMain,
-    borderRightColor: odysseyDesignTokens.HueNeutral100
-  }),
-  "&::after": {
-    backgroundColor: odysseyDesignTokens.HueNeutral200,
+  "&::before, &::after": {
     content: "''",
     height: "100%",
-    opacity: 0,
+    pointerEvents: "none",
     position: "absolute",
-    right: 0,
+    right: `-${odysseyDesignTokens.BorderWidthMain}`,
     top: 0,
-    transform: `translateX(0)`,
-    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
-    width: odysseyDesignTokens.Spacing2,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}, width ${odysseyDesignTokens.TransitionDurationMain}`,
+    userSelect: "none",
     zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX
   },
-  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)": {
-    ...(isSideNavCollapsed && {
-      "&::after": {
-        opacity: 1,
-        transform: `translateX(100%)`
-      },
-      "[data-sidenav-toggle='true']": {
-        transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`
-      }
-    })
+  "&::before": {
+    backgroundColor: isSideNavToggleHighlighted ? odysseyDesignTokens.BorderColorPrimaryControl : odysseyDesignTokens.HueNeutral100,
+    opacity: isAppContentWhiteBackground || !isSideNavCollapsed && isSideNavToggleHighlighted ? 1 : 0,
+    width: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
   },
-  "[data-sidenav-toggle='true']": {
-    position: "absolute",
-    top: _uiShellSharedConstants.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
-    right: 0,
-    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
-    transform: `translate3d(100%, 0, 0)`
+  "&::after": {
+    backgroundColor: odysseyDesignTokens.HueNeutral200,
+    opacity: isSideNavCollapsed ? 1 : 0,
+    transform: isSideNavCollapsed && !hasNeighboringContent ? isSideNavToggleHighlighted ? `translateX(calc(100% - (${odysseyDesignTokens.BorderWidthMain} * 2)))` : `translateX(calc(100% - ${SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px))` : "translateX(0)",
+    width: hasNeighboringContent ? 0 : `calc(${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px + ${odysseyDesignTokens.BorderWidthMain} * 2)`,
+    ...(isSideNavCollapsed && isSideNavToggleHighlighted ? {
+      borderRightColor: odysseyDesignTokens.BorderColorPrimaryControl,
+      borderRightStyle: odysseyDesignTokens.BorderStyleMain,
+      borderRightWidth: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
+    } : {})
   }
 }));
+const StyledSideNavToggleButtonContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "hasNeighboringContent" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
+})(({
+  hasNeighboringContent,
+  isSideNavCollapsed,
+  isSideNavToggleHighlighted,
+  odysseyDesignTokens
+}) => ({
+  position: "absolute",
+  right: `${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE}px`,
+  top: _uiShellSharedConstants.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
+  transform: isSideNavCollapsed && !hasNeighboringContent ? isSideNavToggleHighlighted ? `translate3d(calc(100% + ${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px), 0, 0)` : `translate3d(calc(100% + ${_SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED}px), 0, 0)` : "translate3d(100%, 0, 0)",
+  transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+  zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX + 1
+}));
 const StyledSideNavHeaderContainer = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "borderColor" && prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
 })(({
@@ -158,10 +168,10 @@ const StyledSectionHeaderContainer = (0, _styled.default)("li", {
   contrastFontColor,
   odysseyDesignTokens
 }) => ({
-  paddingBlock: odysseyDesignTokens.Spacing1,
-  paddingInline: odysseyDesignTokens.Spacing4,
+  color: contrastFontColor || odysseyDesignTokens.HueNeutral600,
   marginBlock: `${odysseyDesignTokens.Spacing3}`,
-  color: contrastFontColor || odysseyDesignTokens.HueNeutral600
+  paddingBlock: odysseyDesignTokens.Spacing1,
+  paddingInline: odysseyDesignTokens.Spacing4
 }));
 const StyledSideNavFooter = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
@@ -169,9 +179,9 @@ const StyledSideNavFooter = (0, _styled.default)("div", {
   odysseyDesignTokens,
   sideNavBackgroundColor
 }) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   flexShrink: 0,
   padding: odysseyDesignTokens.Spacing4,
-  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   ...(sideNavBackgroundColor && {
     backgroundColor: sideNavBackgroundColor
   })
@@ -267,9 +277,11 @@ const SideNav = ({
   onSort,
   sideNavItems
 }) => {
-  const [isSideNavCollapsed, setIsSideNavCollapsed] = (0, _react.useState)(isCollapsed);
   const [hasContentScrolled, setHasContentScrolled] = (0, _react.useState)(false);
+  const [hasNeighboringContent, setHasNeighboringContent] = (0, _react.useState)(false);
   const [isContentScrollable, setIsContentScrollable] = (0, _react.useState)(false);
+  const [isSideNavCollapsed, setIsSideNavCollapsed] = (0, _react.useState)(isCollapsed);
+  const [isSideNavToggleHighlighted, setIsSideNavToggleHighlighted] = (0, _react.useState)(false);
   const [sideNavItemsList, updateSideNavItemsList] = (0, _react.useState)(sideNavItems);
   const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
@@ -279,9 +291,15 @@ const SideNav = ({
   const scrollableContentRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
   const intersectionObserverRef = (0, _react.useRef)(null);
+  const sideNavRef = (0, _react.useRef)(null);
   const blankElement = (0, _react.useMemo)(() => (0, _jsxRuntime.jsx)("div", {}), []);
   (0, _react.useEffect)(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);
-  (0, _react.useEffect)(() => setIsSideNavCollapsed(isCollapsed), [isCollapsed]);
+  (0, _react.useEffect)(() => {
+    setIsSideNavCollapsed(isCollapsed);
+    if (sideNavRef.current) {
+      setHasNeighboringContent(sideNavRef.current.getBoundingClientRect().x > 0);
+    }
+  }, [isCollapsed]);
   (0, _react.useEffect)(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -432,18 +450,32 @@ const SideNav = ({
     updateSideNavItemsList(sortedSideNavItems);
     onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);
   }, [onSort, sideNavItemsList]);
+  const onSideNavToggleButtonHighlight = (0, _react.useCallback)(isHighlighted => {
+    setIsSideNavToggleHighlighted(isHighlighted);
+  }, []);
   return (0, _jsxRuntime.jsxs)(StyledSideNavContainer, {
     "aria-label": t("navigation.label"),
     backgroundColor: uiShellContext?.sideNavBackgroundColor,
+    hasNeighboringContent: hasNeighboringContent,
     id: "side-nav-expandable",
     isAppContentWhiteBackground: uiShellContext?.appBackgroundColor === odysseyDesignTokens.HueNeutralWhite,
     isSideNavCollapsed: isSideNavCollapsed,
+    isSideNavToggleHighlighted: isSideNavToggleHighlighted,
     odysseyDesignTokens: odysseyDesignTokens,
-    children: [isCollapsible && (0, _jsxRuntime.jsx)(_SideNavToggleButton.SideNavToggleButton, {
-      ariaControls: "side-nav-expandable",
+    ref: sideNavRef,
+    children: [isCollapsible && (0, _jsxRuntime.jsx)(StyledSideNavToggleButtonContainer, {
+      hasNeighboringContent: hasNeighboringContent,
       isSideNavCollapsed: isSideNavCollapsed,
-      onClick: sideNavExpandClickHandler,
-      onKeyDown: sideNavExpandKeyHandler
+      isSideNavToggleHighlighted: isSideNavToggleHighlighted,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)(_SideNavToggleButton.SideNavToggleButton, {
+        clickAreaPadding: isSideNavCollapsed && !hasNeighboringContent ? _SideNavToggleButton.SIDE_NAV_TOGGLE_ICON_SIZE / 2 : 0,
+        ariaControls: "side-nav-expandable",
+        isSideNavCollapsed: isSideNavCollapsed,
+        onClick: sideNavExpandClickHandler,
+        onHighlight: onSideNavToggleButtonHighlight,
+        onKeyDown: sideNavExpandKeyHandler
+      })
     }), (0, _jsxRuntime.jsx)(_OdysseyThemeProvider.OdysseyThemeProvider, {
       children: (0, _jsxRuntime.jsx)(StyledCollapsibleContent, {
         "data-se": "collapsible-region",
@@ -492,8 +524,8 @@ const SideNav = ({
                         component: "h3",
                         children: label
                       })
-                    }, id)
-                  });
+                    })
+                  }, id);
                 } else if (childNavItems) {
                   return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
                     fallback: blankElement,
@@ -525,22 +557,21 @@ const SideNav = ({
                           }) : childNavItems.map(item => item.navItem)
                         })
                       })
-                    }, id)
-                  });
+                    })
+                  }, id);
                 } else {
                   return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
                     fallback: blankElement,
                     children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
                       value: sideNavItemContentProviderValue,
-                      children: (0, _react.createElement)(_SideNavItemContent.SideNavItemContent, {
+                      children: (0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
                         ...item,
-                        key: item.id,
                         onItemSelected: setSelectedItem,
                         scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
                         startIcon: item.startIcon
                       })
-                    }, item.id)
-                  });
+                    })
+                  }, item.id);
                 }
               })
             }), !isLoading && footerItems && !hasCustomFooter && (0, _jsxRuntime.jsx)(StyledSideNavFooter, {