@okta/odyssey-react-mui 1.34.0 → 1.35.2

package/dist/esm/theme/useMediaQuery.js

@@ -10,18 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 export const useMediaQuery = mediaQuery => {
-  const [hasMatches, setHasMatches] = useState(false);
+  const mediaQueryList = useMemo(() => window.matchMedia(mediaQuery), [mediaQuery]);
+  const [hasMatches, setHasMatches] = useState(() => mediaQueryList.matches);
+  const updateHasMatches = useCallback(event => setHasMatches(event.matches), []);
   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]);
   return hasMatches;
 };
 //# sourceMappingURL=useMediaQuery.js.map

package/dist/esm/theme/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.js","names":["useEffect","useState","useMediaQuery","mediaQuery","hasMatches","setHasMatches","mediaQueryList","window","matchMedia","updateHasMatches","event","matches","addEventListener","removeEventListener"],"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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,aAAa,GAAIC,UAAkB,IAAK;EACnD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACd,MAAMM,cAAc,GAAGC,MAAM,CAACC,UAAU,CAACL,UAAU,CAAC;IAEpD,MAAMM,gBAAgB,GAAIC,KAA2C,IACnEL,aAAa,CAACK,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,CAACL,UAAU,EAAED,UAAU,CAAC,CAAC;EAE5B,OAAOC,UAAU;AACnB,CAAC","ignoreList":[]}
+{"version":3,"file":"useMediaQuery.js","names":["useCallback","useEffect","useMemo","useState","useMediaQuery","mediaQuery","mediaQueryList","window","matchMedia","hasMatches","setHasMatches","matches","updateHasMatches","event","addEventListener","removeEventListener"],"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]);\n\n  return hasMatches;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAIjE,OAAO,MAAMC,aAAa,GACxBC,UAAuC,IACpC;EACH,MAAMC,cAAc,GAAGJ,OAAO,CAC5B,MAAMK,MAAM,CAACC,UAAU,CAACH,UAAU,CAAC,EACnC,CAACA,UAAU,CACb,CAAC;EAED,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGP,QAAQ,CAAC,MAAMG,cAAc,CAACK,OAAO,CAAC;EAE1E,MAAMC,gBAAgB,GAAGZ,WAAW,CACjCa,KAA2C,IAC1CH,aAAa,CAACG,KAAK,CAACF,OAAO,CAAC,EAC9B,EACF,CAAC;EAEDV,SAAS,CAAC,MAAM;IACdK,cAAc,CAACQ,gBAAgB,CAAC,QAAQ,EAAEF,gBAAgB,CAAC;IAE3DA,gBAAgB,CAACN,cAAc,CAAC;IAEhC,OAAO,MAAM;MACXA,cAAc,CAACS,mBAAmB,CAAC,QAAQ,EAAEH,gBAAgB,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EAEpB,OAAOG,UAAU;AACnB,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/InnerAppContainer.js

@@ -0,0 +1,56 @@
+/*!
+ * 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.
+ */
+
+import styled from "@emotion/styled";
+import { memo } from "react";
+import { UI_SHELL_BASE_Z_INDEX } from "./uiShellSharedConstants.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAppContainerShadowShared = styled("div")({
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100%",
+  zIndex: UI_SHELL_BASE_Z_INDEX
+});
+export const StyledAppContainerShadow1 = styled(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.08) 0%,
+      transparent 100%
+    )`,
+  height: "4px"
+});
+export const StyledAppContainerShadow2 = styled(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.01) 0%,
+      transparent 100%
+    )`,
+  height: "6px"
+});
+export const StyledAppContainerShadow3 = styled(StyledAppContainerShadowShared)({
+  background: `linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.05) 0%,
+      transparent 100%
+    )`,
+  height: "15px"
+});
+const InnerAppContainer = ({
+  isContentScrolled
+}) => isContentScrolled ? _jsxs(_Fragment, {
+  children: [_jsx(StyledAppContainerShadow1, {}), _jsx(StyledAppContainerShadow2, {}), _jsx(StyledAppContainerShadow3, {})]
+}) : null;
+const MemoizedInnerAppContainer = memo(InnerAppContainer);
+MemoizedInnerAppContainer.displayName = "InnerAppContainer";
+export { MemoizedInnerAppContainer as InnerAppContainer };
+//# sourceMappingURL=InnerAppContainer.js.map

package/dist/esm/ui-shell/InnerAppContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InnerAppContainer.js","names":["styled","memo","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","StyledAppContainerShadowShared","left","position","top","width","zIndex","StyledAppContainerShadow1","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","children","MemoizedInnerAppContainer","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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,qBAAqB,QAAQ,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpE,MAAMC,8BAA8B,GAAGT,MAAM,CAAC,KAAK,CAAC,CAAC;EACnDU,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAEZ;AACV,CAAC,CAAC;AAEF,OAAO,MAAMa,yBAAyB,GAAGf,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEO,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGlB,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEO,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGnB,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEO,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,GACfb,KAAA,CAAAF,SAAA;EAAAgB,QAAA,GACElB,IAAA,CAACW,yBAAyB,IAAE,CAAC,EAC7BX,IAAA,CAACc,yBAAyB,IAAE,CAAC,EAC7Bd,IAAA,CAACe,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMI,yBAAyB,GAAGtB,IAAI,CAACmB,iBAAiB,CAAC;AACzDG,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIH,iBAAiB","ignoreList":[]}

package/dist/esm/ui-shell/NarrowUiShellContent.js

@@ -17,6 +17,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { Button } from "../Buttons/Button.js";
 import { CloseIcon } from "../icons.generated/Close.js";
 import { MoreIcon } from "../icons.generated/More.js";
+import { InnerAppContainer } from "./InnerAppContainer.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { SideNav } from "./SideNav/SideNav.js";
 import { SideNavLogo } from "./SideNav/SideNavLogo.js";
@@ -38,6 +39,7 @@ const StyledAppContentArea = styled("div")({
   gridTemplateColumns: "auto 1fr auto",
   gridTemplateRows: "1fr",
   height: "100%",
+  pointerEvents: "none",
   width: "100%"
 });
 const StyledAppContainer = styled("div", {
@@ -335,7 +337,10 @@ const NarrowUiShellContent = ({
         }), _jsx(StyledAppContainer, {
           appBackgroundColor: uiShellContext?.appBackgroundColor,
           tabIndex: 0,
-          ref: uiShellAppAreaRef
+          ref: uiShellAppAreaRef,
+          children: _jsx(InnerAppContainer, {
+            isContentScrolled: isContentScrolled
+          })
         })]
       })]
     })]

package/dist/esm/ui-shell/NarrowUiShellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","CloseIcon","MoreIcon","useOdysseyDesignTokens","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","useScrollState","useMatchAppElementToUiShellAppArea","hexToRgb","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","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","uiShellContext","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","paddingMode","uiShellResizableRefs","children","onClick","ref","banners","includes","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","startIcon","testId","variant","isLoading","_Skeleton","logoProps","rightSideMenu","topNavLeftSide","sideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","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.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","CloseIcon","MoreIcon","InnerAppContainer","useOdysseyDesignTokens","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","useScrollState","useMatchAppElementToUiShellAppArea","hexToRgb","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","pointerEvents","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","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","uiShellContext","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","paddingMode","uiShellResizableRefs","children","onClick","ref","banners","includes","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","startIcon","testId","variant","isLoading","_Skeleton","logoProps","rightSideMenu","topNavLeftSide","sideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","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/esm/ui-shell/TopNav/TopNav.js

@@ -23,16 +23,13 @@ const StyledRightSideContainer = styled("div")(() => ({
   flexShrink: 0
 }));
 const StyledTopNavContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrolled" && prop !== "topNavBackgroundColor"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "topNavBackgroundColor"
 })(({
   odysseyDesignTokens,
-  isScrolled,
   topNavBackgroundColor
 }) => ({
   alignItems: "center",
   backgroundColor: topNavBackgroundColor,
-  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
-  clipPath: "inset(0 0 -100vh 0)",
   display: "flex",
   gap: odysseyDesignTokens.Spacing4,
   height: "100%",
@@ -49,7 +46,6 @@ const StyledTopNavContainer = styled("div", {
   })
 }));
 const TopNav = ({
-  isScrolled,
   leftSideComponent,
   rightSideComponent
 }) => {
@@ -57,7 +53,6 @@ const TopNav = ({
   const uiShellContext = useUiShellContext();
   return _jsxs(StyledTopNavContainer, {
     odysseyDesignTokens: odysseyDesignTokens,
-    isScrolled: isScrolled,
     topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
     children: [_jsx(StyledLeftSideContainer, {
       children: leftSideComponent ?? _jsx("div", {})

package/dist/esm/ui-shell/TopNav/TopNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","jsxs","_jsxs","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","topNavBackgroundColor","alignItems","backgroundColor","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","uiShellContext","children","MemoizedTopNav","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  backgroundColor: topNavBackgroundColor,\n  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({\n  isScrolled,\n  leftSideComponent,\n  rightSideComponent,\n}: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isScrolled={isScrolled}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAG/C,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAEEC,iBAAiB,QACZ,mCAAmC;AAC1C,SACEC,cAAc,EACdC,qBAAqB,QAChB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,uBAAuB,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDW,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGZ,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDa,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGd,MAAM,CAAC,KAAK,EAAE;EAC1Ce,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,KAAK,YAAY,IACrBA,IAAI,KAAK;AACb,CAAC,CAAC,CAIC,CAAC;EAAEC,mBAAmB;EAAEC,UAAU;EAAEC;AAAsB,CAAC,MAAM;EAClEC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,SAAS,EAAEJ,UAAU,GAAGD,mBAAmB,CAACM,WAAW,GAAGC,SAAS;EACnEC,QAAQ,EAAE,qBAAqB;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEV,mBAAmB,CAACW,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAE3B,cAAc;EACzB4B,SAAS,EAAE5B,cAAc;EACzB6B,YAAY,EAAEhB,mBAAmB,CAACiB,QAAQ;EAC1CC,aAAa,EAAElB,mBAAmB,CAACmB,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAcrB,mBAAmB,CAACsB,sBAAsB,IAAItB,mBAAmB,CAACuB,oBAAoB,EAAE;EAClHC,MAAM,EAAEpC,qBAAqB;EAE7B,IAAIc,qBAAqB,KAAKF,mBAAmB,CAACyB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAG1B,mBAAmB,CAAC2B,eAAe,IAAI3B,mBAAmB,CAAC4B,eAAe,IAAI5B,mBAAmB,CAAC6B,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EACd7B,UAAU;EACV8B,iBAAiB;EACjBC;AACW,CAAC,KAAK;EACjB,MAAMhC,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EACpD,MAAMgD,cAAc,GAAG/C,iBAAiB,CAAC,CAAC;EAE1C,OACEM,KAAA,CAACK,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,UAAU,EAAEA,UAAW;IACvBC,qBAAqB,EAAE+B,cAAc,EAAE/B,qBAAsB;IAAAgC,QAAA,GAE7D5C,IAAA,CAACG,uBAAuB;MAAAyC,QAAA,EACrBH,iBAAiB,IAAIzC,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACK,wBAAwB;MAAAuC,QAAA,EACtBF,kBAAkB,IAAI1C,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAM6C,cAAc,GAAGnD,IAAI,CAAC8C,MAAM,CAAC;AACnCK,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIL,MAAM","ignoreList":[]}
+{"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","jsxs","_jsxs","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","topNavBackgroundColor","alignItems","backgroundColor","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","uiShellContext","children","MemoizedTopNav","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = 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  backgroundColor: topNavBackgroundColor,\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({ leftSideComponent, rightSideComponent }: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAG/C,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAEEC,iBAAiB,QACZ,mCAAmC;AAC1C,SACEC,cAAc,EACdC,qBAAqB,QAChB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,uBAAuB,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDW,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGZ,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDa,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGd,MAAM,CAAC,KAAK,EAAE;EAC1Ce,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAsB,CAAC,MAAM;EACtDC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEL,mBAAmB,CAACM,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEtB,cAAc;EACzBuB,SAAS,EAAEvB,cAAc;EACzBwB,YAAY,EAAEX,mBAAmB,CAACY,QAAQ;EAC1CC,aAAa,EAAEb,mBAAmB,CAACc,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAchB,mBAAmB,CAACiB,sBAAsB,IAAIjB,mBAAmB,CAACkB,oBAAoB,EAAE;EAClHC,MAAM,EAAE/B,qBAAqB;EAE7B,IAAIa,qBAAqB,KAAKD,mBAAmB,CAACoB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAGrB,mBAAmB,CAACsB,eAAe,IAAItB,mBAAmB,CAACuB,eAAe,IAAIvB,mBAAmB,CAACwB,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EAAEC,iBAAiB;EAAEC;AAAgC,CAAC,KAAK;EACzE,MAAM3B,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EACpD,MAAM2C,cAAc,GAAG1C,iBAAiB,CAAC,CAAC;EAE1C,OACEM,KAAA,CAACK,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,qBAAqB,EAAE2B,cAAc,EAAE3B,qBAAsB;IAAA4B,QAAA,GAE7DvC,IAAA,CAACG,uBAAuB;MAAAoC,QAAA,EACrBH,iBAAiB,IAAIpC,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACK,wBAAwB;MAAAkC,QAAA,EACtBF,kBAAkB,IAAIrC,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAMwC,cAAc,GAAG9C,IAAI,CAACyC,MAAM,CAAC;AACnCK,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIL,MAAM","ignoreList":[]}

package/dist/esm/ui-shell/UiShell.js

@@ -31,6 +31,7 @@ const UiShell = ({
   appBackgroundContrastMode,
   appElement,
   appElementScrollingMode,
+  breakpointConfig,
   closeSideNavMenu,
   hasStandardAppContentPadding,
   initialVisibleSections,
@@ -46,7 +47,7 @@ const UiShell = ({
   uiShellStylesElement
 }) => {
   const [componentProps, setComponentProps] = useState(defaultComponentProps);
-  const activeBreakpoint = useUiShellBreakpoints();
+  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);
   useEffect(() => {
     const unsubscribe = subscribeToPropChanges(componentProps => {
       setComponentProps(componentProps || defaultComponentProps);
@@ -73,7 +74,7 @@ const UiShell = ({
           subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
           subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
           topNavBackgroundColor: topNavBackgroundColor,
-          children: [activeBreakpoint === "constrained" && _jsx(NarrowUiShellContent, {
+          children: [activeBreakpoint === "narrow" && _jsx(NarrowUiShellContent, {
             ...componentProps,
             appElement: appElement,
             appElementScrollingMode: appElementScrollingMode,
@@ -81,13 +82,13 @@ const UiShell = ({
             initialVisibleSections: initialVisibleSections,
             onError: onError,
             optionalComponents: optionalComponents
-          }), (activeBreakpoint === "compact" || activeBreakpoint === "comfortable") && _jsx(WideUiShellContent, {
+          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && _jsx(WideUiShellContent, {
             ...componentProps,
             ...(componentProps.sideNavProps ? {
               sideNavProps: {
                 ...componentProps.sideNavProps,
-                isCollapsed: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsed,
-                isCollapsible: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsible
+                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
+                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible
               }
             } : {}),
             appElement: appElement,

package/dist/esm/ui-shell/UiShell.js.map

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

package/dist/esm/ui-shell/WideUiShellContent.js

@@ -14,6 +14,7 @@ import styled from "@emotion/styled";
 import { memo, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { AppSwitcher } from "./AppSwitcher/index.js";
+import { InnerAppContainer } from "./InnerAppContainer.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { SideNav } from "./SideNav/index.js";
 import { TopNav } from "./TopNav/index.js";
@@ -27,8 +28,10 @@ const StyledAppContainer = styled("div", {
 })(({
   appBackgroundColor
 }) => ({
+  backgroundColor: appBackgroundColor,
   gridArea: "app-content",
-  backgroundColor: appBackgroundColor
+  pointerEvents: "none",
+  position: "relative"
 }));
 const StyledAppSwitcherContainer = styled("div")({
   gridArea: "app-switcher"
@@ -147,7 +150,6 @@ const WideUiShellContent = ({
         onError: onError,
         children: _jsx(TopNav, {
           ...topNavProps,
-          isScrolled: isContentScrolled,
           leftSideComponent: optionalComponents?.topNavLeftSide,
           rightSideComponent: optionalComponents?.topNavRightSide
         })
@@ -155,7 +157,10 @@ const WideUiShellContent = ({
     }), _jsx(StyledAppContainer, {
       appBackgroundColor: uiShellContext?.appBackgroundColor,
       tabIndex: 0,
-      ref: uiShellAppAreaRef
+      ref: uiShellAppAreaRef,
+      children: _jsx(InnerAppContainer, {
+        isContentScrolled: isContentScrolled
+      })
     })]
   });
 };

package/dist/esm/ui-shell/WideUiShellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","emptySideNavItems","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","isLoading","appIcons","selectedAppName","undefined","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.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, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  gridArea: \"app-content\",\n  backgroundColor: appBackgroundColor,\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\n});\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n});\n\nconst StyledSideNavContainer = styled(\"div\")({\n  gridArea: \"side-nav\",\n});\n\nconst StyledShellContainer = 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 banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")({\n  gridArea: \"top-nav\",\n});\n\nexport type WideUiShellContentProps = UiShellNavComponentProps &\n  UiShellContentProps;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst WideUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  appSwitcherProps,\n  hasStandardAppContentPadding = true,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: WideUiShellContentProps) => {\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 { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"comfortable\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <StyledShellContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={parentContainerRef}\n    >\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        {\n          /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n          initialVisibleSections?.includes(\"AppSwitcher\") &&\n            !appSwitcherProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n              </ErrorBoundary>\n            )\n        }\n\n        {appSwitcherProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <AppSwitcher {...appSwitcherProps} />\n          </ErrorBoundary>\n        )}\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\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            <SideNav\n              {...{\n                ...sideNavProps,\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            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        {\n          /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n          initialVisibleSections?.includes(\"TopNav\") &&\n            topNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <TopNav\n                  leftSideComponent={optionalComponents?.topNavLeftSide}\n                  rightSideComponent={optionalComponents?.topNavRightSide}\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              isScrolled={isContentScrolled}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={uiShellAppAreaRef}\n      />\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedWideUiShellContent = memo(WideUiShellContent);\nMemoizedWideUiShellContent.displayName = \"WideUiShellContent\";\n\nexport { MemoizedWideUiShellContent as WideUiShellContent };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","InnerAppContainer","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","emptySideNavItems","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","gridArea","pointerEvents","position","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","isLoading","appIcons","selectedAppName","undefined","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.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, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  gridArea: \"app-content\",\n  pointerEvents: \"none\",\n  position: \"relative\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\n});\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n});\n\nconst StyledSideNavContainer = styled(\"div\")({\n  gridArea: \"side-nav\",\n});\n\nconst StyledShellContainer = 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 banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")({\n  gridArea: \"top-nav\",\n});\n\nexport type WideUiShellContentProps = UiShellNavComponentProps &\n  UiShellContentProps;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst WideUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  appSwitcherProps,\n  hasStandardAppContentPadding = true,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: WideUiShellContentProps) => {\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 { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"comfortable\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <StyledShellContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={parentContainerRef}\n    >\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        {\n          /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n          initialVisibleSections?.includes(\"AppSwitcher\") &&\n            !appSwitcherProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n              </ErrorBoundary>\n            )\n        }\n\n        {appSwitcherProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <AppSwitcher {...appSwitcherProps} />\n          </ErrorBoundary>\n        )}\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\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            <SideNav\n              {...{\n                ...sideNavProps,\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            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        {\n          /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n          initialVisibleSections?.includes(\"TopNav\") &&\n            topNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <TopNav\n                  leftSideComponent={optionalComponents?.topNavLeftSide}\n                  rightSideComponent={optionalComponents?.topNavRightSide}\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={uiShellAppAreaRef}\n      >\n        <InnerAppContainer isContentScrolled={isContentScrolled} />\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedWideUiShellContent = memo(WideUiShellContent);\nMemoizedWideUiShellContent.displayName = \"WideUiShellContent\";\n\nexport { MemoizedWideUiShellContent as WideUiShellContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/index.js

@@ -11,13 +11,15 @@
  */
 
 export * from "./AppSwitcher/index.js";
+export * from "./InnerAppContainer.js";
 export * from "./NarrowUiShellContent.js";
 export * from "./renderUiShell.js";
 export * from "./SideNav/index.js";
 export * from "./TopNav/index.js";
 export * from "./uiShellContentTypes.js";
 export * from "./useHasUiShell.js";
-export * from "../web-component/renderReactInWebComponent.js";
 export * from "./WideUiShellContent.js";
+export * from "../web-component/renderReactInWebComponent.js";
 export { UiShell } from "./UiShell.js";
+export { adminAppUiShellBreakpoints } from "./useUiShellBreakpoints.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui-shell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["UiShell"],"sources":["../../../src/ui-shell/index.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\nexport * from \"./AppSwitcher/index.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\nexport * from \"./WideUiShellContent.js\";\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,+CAA+C;AAC7D,cAAc,yBAAyB;AAEvC,SAASA,OAAO,QAA2B,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","names":["UiShell","adminAppUiShellBreakpoints"],"sources":["../../../src/ui-shell/index.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\nexport * from \"./AppSwitcher/index.js\";\nexport * from \"./InnerAppContainer.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"./WideUiShellContent.js\";\n\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport { adminAppUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AAEvC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc;AACzD,SAASC,0BAA0B,QAAQ,4BAA4B","ignoreList":[]}