@okta/odyssey-react-mui 1.32.0 → 1.33.0

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

@@ -14,8 +14,8 @@ import styled from "@emotion/styled";
 import { memo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX } from "../uiShellSharedConstants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
 const StyledLeftSideContainer = styled("div")(() => ({
   flexGrow: 1
 }));
@@ -43,7 +43,7 @@ const StyledTopNavContainer = styled("div", {
   paddingInline: odysseyDesignTokens.Spacing8,
   position: "relative",
   transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
-  zIndex: 100,
+  zIndex: UI_SHELL_BASE_Z_INDEX,
   ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
     borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`
   })

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

@@ -1 +1 @@
-{"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","jsx","_jsx","jsxs","_jsxs","TOP_NAV_HEIGHT","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\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\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: 100,\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;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3C,OAAO,MAAMC,cAAc,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAE7C,MAAMC,uBAAuB,GAAGT,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDU,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGX,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDY,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC1Cc,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,EAAEtB,cAAc;EACzBuB,SAAS,EAAEvB,cAAc;EACzBwB,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,EAAE,GAAG;EAEX,IAAItB,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,GAAGd,sBAAsB,CAAC,CAAC;EACpD,MAAM+C,cAAc,GAAG9C,iBAAiB,CAAC,CAAC;EAE1C,OACEI,KAAA,CAACM,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,UAAU,EAAEA,UAAW;IACvBC,qBAAqB,EAAE+B,cAAc,EAAE/B,qBAAsB;IAAAgC,QAAA,GAE7D7C,IAAA,CAACI,uBAAuB;MAAAyC,QAAA,EACrBH,iBAAiB,IAAI1C,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACM,wBAAwB;MAAAuC,QAAA,EACtBF,kBAAkB,IAAI3C,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAM8C,cAAc,GAAGlD,IAAI,CAAC6C,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","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":[]}

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

@@ -13,32 +13,37 @@
 import { memo, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { CssBaseline } from "../CssBaseline.js";
+import { NarrowUiShellContent } from "./NarrowUiShellContent.js";
 import { OdysseyProvider } from "../OdysseyProvider.js";
-import { UiShellContent } from "./UiShellContent.js";
 import { UiShellProvider } from "./UiShellProvider.js";
+import { useUiShellBreakpoints } from "./useUiShellBreakpoints.js";
+import { WideUiShellContent } from "./WideUiShellContent.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const defaultComponentProps = {
   sideNavProps: undefined,
   topNavProps: undefined
 };
+const errorComponent = _jsx("div", {
+  "data-error": true
+});
 const UiShell = ({
   appBackgroundColor,
   appBackgroundContrastMode,
-  appComponent,
-  appRootElement,
-  appContainerElement,
-  appContainerScrollingMode,
+  appElement,
+  appElementScrollingMode,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   onSubscriptionCreated,
   optionalComponents,
   sideNavBackgroundColor,
-  stylesRootElement,
+  subscribeToPropChanges,
   topNavBackgroundColor,
-  subscribeToPropChanges
+  uiShellAppElement,
+  uiShellStylesElement
 }) => {
   const [componentProps, setComponentProps] = useState(defaultComponentProps);
+  const activeBreakpoint = useUiShellBreakpoints();
   useEffect(() => {
     const unsubscribe = subscribeToPropChanges(componentProps => {
       setComponentProps(componentProps || defaultComponentProps);
@@ -48,30 +53,44 @@ const UiShell = ({
       unsubscribe();
     };
   }, [onSubscriptionCreated, subscribeToPropChanges]);
-  return _jsx(ErrorBoundary, {
-    fallback: appComponent,
+  return activeBreakpoint === "none" ? null : _jsx(ErrorBoundary, {
+    fallback: errorComponent,
     onError: onError,
     children: _jsx(OdysseyProvider, {
-      emotionRootElement: stylesRootElement,
-      shadowRootElement: appRootElement,
-      hasScopedCssBaseline: false,
+      emotionRootElement: uiShellStylesElement,
+      shadowRootElement: uiShellAppElement,
       children: _jsxs(ErrorBoundary, {
-        fallback: appComponent,
+        fallback: errorComponent,
         onError: onError,
-        children: [_jsx(CssBaseline, {}), _jsx(UiShellProvider, {
+        children: [_jsx(CssBaseline, {}), _jsxs(UiShellProvider, {
           appBackgroundColor: appBackgroundColor,
           appBackgroundContrastMode: appBackgroundContrastMode,
           sideNavBackgroundColor: sideNavBackgroundColor,
           topNavBackgroundColor: topNavBackgroundColor,
-          children: _jsx(UiShellContent, {
+          children: [activeBreakpoint === "constrained" && _jsx(NarrowUiShellContent, {
             ...componentProps,
-            appContainerElement: appContainerElement,
-            appContainerScrollingMode: appContainerScrollingMode,
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
             hasStandardAppContentPadding: hasStandardAppContentPadding,
             initialVisibleSections: initialVisibleSections,
             onError: onError,
             optionalComponents: optionalComponents
-          })
+          }), (activeBreakpoint === "compact" || activeBreakpoint === "comfortable") && _jsx(WideUiShellContent, {
+            ...componentProps,
+            ...(componentProps.sideNavProps ? {
+              sideNavProps: {
+                ...componentProps.sideNavProps,
+                isCollapsed: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsed,
+                isCollapsible: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsible
+              }
+            } : {}),
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          })]
         })]
       })
     })

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

@@ -1 +1 @@
-{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","UiShellContent","UiShellProvider","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","UiShell","appBackgroundColor","appBackgroundContrastMode","appComponent","appRootElement","appContainerElement","appContainerScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","stylesRootElement","topNavBackgroundColor","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","hasScopedCssBaseline","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 {\n  memo,\n  ReactNode,\n  useEffect,\n  useState,\n  type SetStateAction,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent.js\";\nimport { type ReactRootElements } from \"../web-component/renderReactInWebComponent.js\";\nimport { UiShellProvider } from \"./UiShellProvider.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\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: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor?: string;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor?: string;\n  /**\n   * React app component that renders as children in the correct location of the shell. Only used as fallback for ErrorBoundary.\n   */\n  appComponent?: ReactNode;\n} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<\n    UiShellContentProps,\n    | \"appBackgroundColor\"\n    | \"appBackgroundContrastMode\"\n    | \"appContainerElement\"\n    | \"appContainerScrollingMode\"\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  appComponent,\n  appRootElement,\n  appContainerElement,\n  appContainerScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  stylesRootElement,\n  topNavBackgroundColor,\n  subscribeToPropChanges,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\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 (\n    <ErrorBoundary fallback={appComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={stylesRootElement}\n        shadowRootElement={appRootElement}\n        hasScopedCssBaseline={false}\n      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            <UiShellContent\n              {...componentProps}\n              appContainerElement={appContainerElement}\n              appContainerScrollingMode={appContainerScrollingMode}\n              hasStandardAppContentPadding={hasStandardAppContentPadding}\n              initialVisibleSections={initialVisibleSections}\n              onError={onError}\n              optionalComponents={optionalComponents}\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,IAAI,EAEJC,SAAS,EACTC,QAAQ,QAEH,OAAO;AACd,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SACEC,cAAc,QAGT,qBAAqB;AAE5B,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAEC,SAAS;EACvBC,WAAW,EAAED;AACf,CAAU;AAoDV,MAAME,OAAO,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,yBAAyB;EACzBC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,yBAAyB;EACzBC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,sBAAsB;EACtBC,iBAAiB;EACjBC,qBAAqB;EACrBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGjC,QAAQ,CAACU,qBAAqB,CAAC;EAE3EX,SAAS,CAAC,MAAM;IACd,MAAMmC,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAItB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFgB,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXQ,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACR,qBAAqB,EAAEK,sBAAsB,CAAC,CAAC;EAEnD,OACExB,IAAA,CAACN,aAAa;IAACkC,QAAQ,EAAElB,YAAa;IAACM,OAAO,EAAEA,OAAQ;IAAAa,QAAA,EACtD7B,IAAA,CAACJ,eAAe;MACdkC,kBAAkB,EAAER,iBAAkB;MACtCS,iBAAiB,EAAEpB,cAAe;MAClCqB,oBAAoB,EAAE,KAAM;MAAAH,QAAA,EAE5B3B,KAAA,CAACR,aAAa;QAACkC,QAAQ,EAAElB,YAAa;QAACM,OAAO,EAAEA,OAAQ;QAAAa,QAAA,GACtD7B,IAAA,CAACL,WAAW,IAAE,CAAC,EACfK,IAAA,CAACF,eAAe;UACdU,kBAAkB,EAAEA,kBAAmB;UACvCC,yBAAyB,EAAEA,yBAA0B;UACrDY,sBAAsB,EAAEA,sBAAuB;UAC/CE,qBAAqB,EAAEA,qBAAsB;UAAAM,QAAA,EAE7C7B,IAAA,CAACH,cAAc;YAAA,GACT4B,cAAc;YAClBb,mBAAmB,EAAEA,mBAAoB;YACzCC,yBAAyB,EAAEA,yBAA0B;YACrDC,4BAA4B,EAAEA,4BAA6B;YAC3DC,sBAAsB,EAAEA,sBAAuB;YAC/CC,OAAO,EAAEA,OAAQ;YACjBI,kBAAkB,EAAEA;UAAmB,CACxC;QAAC,CACa,CAAC;MAAA,CACL;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMa,eAAe,GAAG1C,IAAI,CAACgB,OAAO,CAAC;AACrC0B,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAI1B,OAAO","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","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","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 } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { useUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor?: string;\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor?: string;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor?: string;\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & Pick<\n  UiShellContentProps,\n  | \"appElement\"\n  | \"appElementScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"onError\"\n  | \"optionalComponents\"\n>;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"constrained\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"compact\" ||\n              activeBreakpoint === \"comfortable\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...(componentProps.sideNavProps\n                    ? {\n                        sideNavProps: {\n                          ...componentProps.sideNavProps,\n                          isCollapsed:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsed,\n                          isCollapsible:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsible,\n                          // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                        } as typeof componentProps.sideNavProps,\n                      }\n                    : {}),\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,6 +13,7 @@
 import { createContext, memo, useContext, useMemo } from "react";
 import { generateContrastColors } from "../createContrastColors.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { createMessageBus } from "./createMessageBus.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const UiShellContext = createContext(undefined);
 export const useUiShellContext = () => {
@@ -21,9 +22,9 @@ export const useUiShellContext = () => {
 const UiShellProvider = ({
   appBackgroundColor,
   appBackgroundContrastMode = "lowContrast",
+  children,
   sideNavBackgroundColor,
-  topNavBackgroundColor,
-  children
+  topNavBackgroundColor
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const defaultedSideNavBackgroundColor = sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;
@@ -32,12 +33,18 @@ const UiShellProvider = ({
   const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50;
   const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;
   const appContentBackgroundColor = appBackgroundColor || defaultTopAndAppBackgroundColor;
+  const {
+    publish: publishSideNavItemClicked,
+    subscribe: subscribeSideNavItemClicked
+  } = useMemo(() => createMessageBus(), []);
   const memoizedContextValue = useMemo(() => ({
     appBackgroundColor: appContentBackgroundColor,
+    publishSideNavItemClicked,
     sideNavBackgroundColor: sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,
     sideNavContrastColors,
+    subscribeSideNavItemClicked,
     topNavBackgroundColor: topNavColor
-  }), [appContentBackgroundColor, odysseyDesignTokens, sideNavBackgroundColor, sideNavContrastColors, topNavColor]);
+  }), [appContentBackgroundColor, odysseyDesignTokens, publishSideNavItemClicked, sideNavBackgroundColor, sideNavContrastColors, subscribeSideNavItemClicked, topNavColor]);
   return _jsx(UiShellContext.Provider, {
     value: memoizedContextValue,
     children: children

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

@@ -1 +1 @@
-{"version":3,"file":"UiShellProvider.js","names":["createContext","memo","useContext","useMemo","generateContrastColors","useOdysseyDesignTokens","jsx","_jsx","UiShellContext","undefined","useUiShellContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","sideNavBackgroundColor","topNavBackgroundColor","children","odysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","isAppBackgroundHightContrast","defaultTopAndAppBackgroundColor","HueNeutral50","topNavColor","appContentBackgroundColor","memoizedContextValue","Provider","value","MemoizedUiShellProvider"],"sources":["../../../src/ui-shell/UiShellProvider.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 {\n  createContext,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  generateContrastColors,\n  ContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\n\nexport type UiShellColors = {\n  appBackgroundColor: string;\n  sideNavBackgroundColor: string;\n  sideNavContrastColors?: ContrastColors | undefined;\n  topNavBackgroundColor: string;\n};\n\nconst UiShellContext = createContext<UiShellColors | undefined>(undefined);\n\nexport const useUiShellContext = () => {\n  return useContext(UiShellContext);\n};\n\nexport type UiShellProviderProps = {\n  appBackgroundColor?: string;\n  sideNavBackgroundColor?: string;\n  topNavBackgroundColor?: string;\n  appBackgroundContrastMode?: string;\n};\n\nconst UiShellProvider = ({\n  appBackgroundColor,\n  appBackgroundContrastMode = \"lowContrast\",\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n  children,\n}: PropsWithChildren<UiShellProviderProps>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const defaultedSideNavBackgroundColor =\n    sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;\n\n  const sideNavContrastColors =\n    defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite\n      ? generateContrastColors(\n          defaultedSideNavBackgroundColor,\n          odysseyDesignTokens,\n        )\n      : undefined;\n\n  const isAppBackgroundHightContrast =\n    appBackgroundContrastMode === \"highContrast\";\n\n  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast\n    ? odysseyDesignTokens.HueNeutralWhite\n    : odysseyDesignTokens.HueNeutral50;\n\n  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const appContentBackgroundColor =\n    appBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      appBackgroundColor: appContentBackgroundColor,\n      sideNavBackgroundColor:\n        sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,\n      sideNavContrastColors,\n      topNavBackgroundColor: topNavColor,\n    }),\n    [\n      appContentBackgroundColor,\n      odysseyDesignTokens,\n      sideNavBackgroundColor,\n      sideNavContrastColors,\n      topNavColor,\n    ],\n  );\n\n  return (\n    <UiShellContext.Provider value={memoizedContextValue}>\n      {children}\n    </UiShellContext.Provider>\n  );\n};\n\nconst MemoizedUiShellProvider = memo(UiShellProvider);\n\nexport { MemoizedUiShellProvider as UiShellProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SACEC,sBAAsB,QAEjB,4BAA4B;AACnC,SAASC,sBAAsB,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS1E,MAAMC,cAAc,GAAGR,aAAa,CAA4BS,SAAS,CAAC;AAE1E,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,OAAOR,UAAU,CAACM,cAAc,CAAC;AACnC,CAAC;AASD,MAAMG,eAAe,GAAGA,CAAC;EACvBC,kBAAkB;EAClBC,yBAAyB,GAAG,aAAa;EACzCC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAMa,+BAA+B,GACnCJ,sBAAsB,IAAIG,mBAAmB,CAACE,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKD,mBAAmB,CAACE,eAAe,GACnEf,sBAAsB,CACpBc,+BAA+B,EAC/BD,mBACF,CAAC,GACDR,SAAS;EAEf,MAAMY,4BAA4B,GAChCR,yBAAyB,KAAK,cAAc;EAE9C,MAAMS,+BAA+B,GAAGD,4BAA4B,GAChEJ,mBAAmB,CAACE,eAAe,GACnCF,mBAAmB,CAACM,YAAY;EAEpC,MAAMC,WAAW,GAAGT,qBAAqB,IAAIO,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7Bb,kBAAkB,IAAIU,+BAA+B;EAEvD,MAAMI,oBAAoB,GAAGvB,OAAO,CAClC,OAAO;IACLS,kBAAkB,EAAEa,yBAAyB;IAC7CX,sBAAsB,EACpBA,sBAAsB,IAAIG,mBAAmB,CAACE,eAAe;IAC/DC,qBAAqB;IACrBL,qBAAqB,EAAES;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBR,mBAAmB,EACnBH,sBAAsB,EACtBM,qBAAqB,EACrBI,WAAW,CAEf,CAAC;EAED,OACEjB,IAAA,CAACC,cAAc,CAACmB,QAAQ;IAACC,KAAK,EAAEF,oBAAqB;IAAAV,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMa,uBAAuB,GAAG5B,IAAI,CAACU,eAAe,CAAC;AAErD,SAASkB,uBAAuB,IAAIlB,eAAe","ignoreList":[]}
+{"version":3,"file":"UiShellProvider.js","names":["createContext","memo","useContext","useMemo","generateContrastColors","useOdysseyDesignTokens","createMessageBus","jsx","_jsx","UiShellContext","undefined","useUiShellContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","children","sideNavBackgroundColor","topNavBackgroundColor","odysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","isAppBackgroundHightContrast","defaultTopAndAppBackgroundColor","HueNeutral50","topNavColor","appContentBackgroundColor","publish","publishSideNavItemClicked","subscribe","subscribeSideNavItemClicked","memoizedContextValue","Provider","value","MemoizedUiShellProvider"],"sources":["../../../src/ui-shell/UiShellProvider.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 {\n  createContext,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  ContrastColors,\n  generateContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { createMessageBus, MessageBus } from \"./createMessageBus.js\";\n\nexport type UiShellColors = {\n  appBackgroundColor: string;\n  sideNavBackgroundColor: string;\n  sideNavContrastColors?: ContrastColors | undefined;\n  topNavBackgroundColor: string;\n};\n\nexport type UiShellContext = {\n  publishSideNavItemClicked: MessageBus<void>[\"publish\"];\n  subscribeSideNavItemClicked: MessageBus<void>[\"subscribe\"];\n} & UiShellColors;\n\nconst UiShellContext = createContext<UiShellContext | undefined>(undefined);\n\nexport const useUiShellContext = () => {\n  return useContext(UiShellContext);\n};\n\nexport type UiShellProviderProps = {\n  appBackgroundContrastMode?: string;\n} & Partial<\n  Pick<\n    UiShellColors,\n    \"appBackgroundColor\" | \"sideNavBackgroundColor\" | \"topNavBackgroundColor\"\n  >\n>;\n\nconst UiShellProvider = ({\n  appBackgroundColor,\n  appBackgroundContrastMode = \"lowContrast\",\n  children,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: PropsWithChildren<UiShellProviderProps>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const defaultedSideNavBackgroundColor =\n    sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;\n\n  const sideNavContrastColors =\n    defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite\n      ? generateContrastColors(\n          defaultedSideNavBackgroundColor,\n          odysseyDesignTokens,\n        )\n      : undefined;\n\n  const isAppBackgroundHightContrast =\n    appBackgroundContrastMode === \"highContrast\";\n\n  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast\n    ? odysseyDesignTokens.HueNeutralWhite\n    : odysseyDesignTokens.HueNeutral50;\n\n  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const appContentBackgroundColor =\n    appBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const {\n    publish: publishSideNavItemClicked,\n    subscribe: subscribeSideNavItemClicked,\n  } = useMemo(() => createMessageBus(), []);\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      appBackgroundColor: appContentBackgroundColor,\n      publishSideNavItemClicked,\n      sideNavBackgroundColor:\n        sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,\n      sideNavContrastColors,\n      subscribeSideNavItemClicked,\n      topNavBackgroundColor: topNavColor,\n    }),\n    [\n      appContentBackgroundColor,\n      odysseyDesignTokens,\n      publishSideNavItemClicked,\n      sideNavBackgroundColor,\n      sideNavContrastColors,\n      subscribeSideNavItemClicked,\n      topNavColor,\n    ],\n  );\n\n  return (\n    <UiShellContext.Provider value={memoizedContextValue}>\n      {children}\n    </UiShellContext.Provider>\n  );\n};\n\nconst MemoizedUiShellProvider = memo(UiShellProvider);\n\nexport { MemoizedUiShellProvider as UiShellProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SAEEC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,gBAAgB,QAAoB,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAcrE,MAAMC,cAAc,GAAGT,aAAa,CAA6BU,SAAS,CAAC;AAE3E,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,OAAOT,UAAU,CAACO,cAAc,CAAC;AACnC,CAAC;AAWD,MAAMG,eAAe,GAAGA,CAAC;EACvBC,kBAAkB;EAClBC,yBAAyB,GAAG,aAAa;EACzCC,QAAQ;EACRC,sBAAsB;EACtBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,+BAA+B,GACnCH,sBAAsB,IAAIE,mBAAmB,CAACE,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKD,mBAAmB,CAACE,eAAe,GACnEhB,sBAAsB,CACpBe,+BAA+B,EAC/BD,mBACF,CAAC,GACDR,SAAS;EAEf,MAAMY,4BAA4B,GAChCR,yBAAyB,KAAK,cAAc;EAE9C,MAAMS,+BAA+B,GAAGD,4BAA4B,GAChEJ,mBAAmB,CAACE,eAAe,GACnCF,mBAAmB,CAACM,YAAY;EAEpC,MAAMC,WAAW,GAAGR,qBAAqB,IAAIM,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7Bb,kBAAkB,IAAIU,+BAA+B;EAEvD,MAAM;IACJI,OAAO,EAAEC,yBAAyB;IAClCC,SAAS,EAAEC;EACb,CAAC,GAAG3B,OAAO,CAAC,MAAMG,gBAAgB,CAAC,CAAC,EAAE,EAAE,CAAC;EAEzC,MAAMyB,oBAAoB,GAAG5B,OAAO,CAClC,OAAO;IACLU,kBAAkB,EAAEa,yBAAyB;IAC7CE,yBAAyB;IACzBZ,sBAAsB,EACpBA,sBAAsB,IAAIE,mBAAmB,CAACE,eAAe;IAC/DC,qBAAqB;IACrBS,2BAA2B;IAC3Bb,qBAAqB,EAAEQ;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBR,mBAAmB,EACnBU,yBAAyB,EACzBZ,sBAAsB,EACtBK,qBAAqB,EACrBS,2BAA2B,EAC3BL,WAAW,CAEf,CAAC;EAED,OACEjB,IAAA,CAACC,cAAc,CAACuB,QAAQ;IAACC,KAAK,EAAEF,oBAAqB;IAAAhB,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMmB,uBAAuB,GAAGjC,IAAI,CAACW,eAAe,CAAC;AAErD,SAASsB,uBAAuB,IAAItB,eAAe","ignoreList":[]}

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

@@ -0,0 +1,165 @@
+/*!
+ * Copyright (c) 2024-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, useRef } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { AppSwitcher } from "./AppSwitcher/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { SideNav } from "./SideNav/index.js";
+import { TopNav } from "./TopNav/index.js";
+import { useScrollState } from "./useScrollState.js";
+import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
+import { useUiShellContext } from "./UiShellProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const emptySideNavItems = [];
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  gridArea: "app-content",
+  backgroundColor: appBackgroundColor
+}));
+const StyledAppSwitcherContainer = styled("div")({
+  gridArea: "app-switcher"
+});
+const StyledBannersContainer = styled("div")({
+  gridArea: "banners"
+});
+const StyledSideNavContainer = styled("div")({
+  gridArea: "side-nav"
+});
+const StyledShellContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  display: "grid",
+  gridGap: 0,
+  gridTemplateAreas: `
+    "banners banners banners"
+    "app-switcher side-nav top-nav"
+    "app-switcher side-nav app-content"
+  `,
+  gridTemplateColumns: "auto auto 1fr",
+  gridTemplateRows: "auto auto 1fr",
+  height: "100vh",
+  width: "100vw"
+}));
+const StyledTopNavContainer = styled("div")({
+  gridArea: "top-nav"
+});
+const WideUiShellContent = ({
+  appElement,
+  appElementScrollingMode,
+  appSwitcherProps,
+  hasStandardAppContentPadding = true,
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
+  onError = console.error,
+  optionalComponents,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  const {
+    isContentScrolled
+  } = useScrollState(appElement);
+  const sideNavContainerRef = useRef(null);
+  const topNavContainerRef = useRef(null);
+  const uiShellAppAreaRef = useRef(null);
+  const {
+    parentContainerRef
+  } = useMatchAppElementToUiShellAppArea({
+    appElement,
+    appElementScrollingMode,
+    paddingMode: hasStandardAppContentPadding ? "comfortable" : "none",
+    uiShellAppAreaRef,
+    uiShellResizableRefs: [sideNavContainerRef, topNavContainerRef, uiShellAppAreaRef]
+  });
+  return _jsxs(StyledShellContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    ref: parentContainerRef,
+    children: [_jsx(StyledBannersContainer, {
+      children: optionalComponents?.banners
+    }), _jsxs(StyledAppSwitcherContainer, {
+      children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(AppSwitcher, {
+          isLoading: true,
+          appIcons: [],
+          selectedAppName: ""
+        })
+      }), appSwitcherProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(AppSwitcher, {
+          ...appSwitcherProps
+        })
+      })]
+    }), _jsxs(StyledSideNavContainer, {
+      ref: sideNavContainerRef,
+      children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          isLoading: true,
+          sideNavItems: emptySideNavItems
+        })
+      }), sideNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          ...sideNavProps,
+          ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
+            footerComponent: optionalComponents.sideNavFooter,
+            footerItems: undefined,
+            hasCustomFooter: sideNavProps.hasCustomFooter
+          } : {
+            footerItems: sideNavProps.footerItems,
+            hasCustomFooter: false
+          })
+        })
+      })]
+    }), _jsxs(StyledTopNavContainer, {
+      ref: topNavContainerRef,
+      children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(TopNav, {
+          leftSideComponent: optionalComponents?.topNavLeftSide,
+          rightSideComponent: optionalComponents?.topNavRightSide
+        })
+      }), topNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(TopNav, {
+          ...topNavProps,
+          isScrolled: isContentScrolled,
+          leftSideComponent: optionalComponents?.topNavLeftSide,
+          rightSideComponent: optionalComponents?.topNavRightSide
+        })
+      })]
+    }), _jsx(StyledAppContainer, {
+      appBackgroundColor: uiShellContext?.appBackgroundColor,
+      tabIndex: 0,
+      ref: uiShellAppAreaRef
+    })]
+  });
+};
+const MemoizedWideUiShellContent = memo(WideUiShellContent);
+MemoizedWideUiShellContent.displayName = "WideUiShellContent";
+export { MemoizedWideUiShellContent as WideUiShellContent };
+//# sourceMappingURL=WideUiShellContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","jsx","_jsx","jsxs","_jsxs","emptySideNavItems","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, type SideNavProps } 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\";\n\nconst emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\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":[]}

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

@@ -11,10 +11,13 @@
  */
 
 export * from "./AppSwitcher/index.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 { UiShell } from "./UiShell.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 \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.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.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc","ignoreList":[]}
+{"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":[]}

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

@@ -14,11 +14,12 @@ import { ErrorBoundary } from "react-error-boundary";
 import { bufferLatest } from "./bufferLatest.js";
 import { createMessageBus } from "./createMessageBus.js";
 import { UiShell } from "./UiShell.js";
-import { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
 import { uiShellDataAttribute } from "./useHasUiShell.js";
+import { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const optionalComponentSlotNames = {
   banners: "banners",
+  rightSideMenu: "right-side-menu",
   sideNavFooter: "side-nav-footer",
   topNavLeftSide: "top-nav-left-side",
   topNavRightSide: "top-nav-right-side"
@@ -26,17 +27,17 @@ export const optionalComponentSlotNames = {
 export const renderUiShell = ({
   appBackgroundColor,
   appBackgroundContrastMode,
-  appContainerScrollingMode,
-  appRootElement: explicitAppRootElement,
+  appElement: providedAppElement,
+  appElementScrollingMode,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
+  parentElement,
   sideNavBackgroundColor,
-  topNavBackgroundColor,
-  uiShellRootElement
+  topNavBackgroundColor
 }) => {
-  const appRootElement = explicitAppRootElement || document.createElement("div");
-  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
+  const appElement = providedAppElement || document.createElement("div");
+  parentElement.setAttribute(uiShellDataAttribute, "");
   const {
     publish: publishPropChanges,
     subscribe: subscribeToPropChanges
@@ -54,21 +55,18 @@ export const renderUiShell = ({
     element.setAttribute("slot", slotName);
     return [optionalComponentKey, element];
   }));
-  const appContainerElement = document.createElement("div");
-  appContainerElement.appendChild(appRootElement);
   const webComponentChildren = Object.values(slottedElements);
-  const appComponent = _jsx("slot", {});
   const uiShellElement = renderReactInWebComponent({
     getReactComponent: reactRootElements => _jsx(ErrorBoundary, {
-      fallback: appComponent,
+      fallback: _jsx("div", {
+        "data-error": true
+      }),
       onError: onError,
       children: _jsx(UiShell, {
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
-        appComponent: appComponent,
-        appContainerElement: appContainerElement,
-        appContainerScrollingMode: appContainerScrollingMode,
-        appRootElement: reactRootElements.appRootElement,
+        appElement: appElement,
+        appElementScrollingMode: appElementScrollingMode,
         hasStandardAppContentPadding: hasStandardAppContentPadding,
         initialVisibleSections: initialVisibleSections,
         onError: onError,
@@ -77,17 +75,18 @@ export const renderUiShell = ({
           name: slotName
         })])),
         sideNavBackgroundColor: sideNavBackgroundColor,
-        stylesRootElement: reactRootElements.stylesRootElement,
         subscribeToPropChanges: subscribeToPropChanges,
-        topNavBackgroundColor: topNavBackgroundColor
+        topNavBackgroundColor: topNavBackgroundColor,
+        uiShellAppElement: reactRootElements.appRootElement,
+        uiShellStylesElement: reactRootElements.stylesRootElement
       })
     }),
-    webComponentRootElement: uiShellRootElement,
+    webComponentParentElement: parentElement,
     webComponentChildren
   });
-  uiShellRootElement.appendChild(appContainerElement);
+  parentElement.appendChild(appElement);
   return {
-    appRootElement,
+    appElement,
     setComponentProps: publishAfterReactAppReadyForProps,
     slottedElements,
     uiShellElement