@okta/odyssey-react-mui 1.32.4 → 1.33.0

package/dist/types/ui-shell/{UiShellContent.d.ts → uiShellContentTypes.d.ts}

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * 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.
@@ -9,12 +9,11 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { CSSProperties, type ReactElement } from "react";
+import { ReactElement } from "react";
 import { ErrorBoundaryProps } from "react-error-boundary";
-import { type AppSwitcherProps } from "./AppSwitcher/index.js";
-import { type SideNavProps } from "./SideNav/index.js";
-import { type TopNavProps } from "./TopNav/index.js";
-import { ContrastMode } from "../useContrastMode.js";
+import { AppSwitcherProps } from "./AppSwitcher/AppSwitcher.js";
+import { SideNavProps } from "./SideNav/types.js";
+import { TopNavProps } from "./TopNav/TopNav.js";
 export declare const subComponentNames: readonly ["TopNav", "SideNav", "AppSwitcher"];
 export type SubComponentName = (typeof subComponentNames)[number];
 export type UiShellNavComponentProps = {
@@ -33,28 +32,35 @@ export type UiShellNavComponentProps = {
 };
 export type UiShellContentProps = {
     /**
-     * Sets a custom background color for the app content area.
+     * **WARNING:** UI Shell will modify the styling of this element.
+     * HTML element where the app gets rendered. This typically called the React root element for your app.
+     *
+     * When passed, the app is expected to render into this element, not the Shadow DOM.
+     *
+     * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.
+     *
+     * A major benefit to having this element separate from UI Shell is related to encapsulation. UI Shell has the capability of rendering inside a web component, but in doing so, the app would be subject to the styles in the web component and not the page itself.
+     * The app should either be in its own web component or use the global styles, and having this separate element allows us to accomplish that goal.
      */
-    appBackgroundColor?: string;
+    appElement: HTMLDivElement;
     /**
-     * Sets either a gray or white background color for the app content area.
+     * Controls the scrolling behavior of the app element area.
+     *
+     * In the case of an app wanting to control their own scrolling, use `"none"`.
+     *
+     * Most apps will want to use `"vertical"` and let UI Shell manage scrolling behavior.
      */
-    appBackgroundContrastMode?: ContrastMode;
+    appElementScrollingMode: "none" | "horizontal" | "vertical" | "both";
     /**
-     * When passed, the app is expected to render into this element, not the Shadow DOM. UI Shell will position this element appropriately as if it was rendered in the app content area of the Shadow DOM.
-     */
-    appContainerElement: HTMLDivElement;
-    /**
-     * Controls the scrolling behavior of the app content area. Defaults to "vertical".
-     */
-    appContainerScrollingMode?: "none" | "horizontal" | "vertical" | "both";
-    /**
-     * defaults to `true`. If `false`, the content area will have no padding provided
+     * Defaults to `true`.
+     *
+     * If `false`, the content area will have no padding provided. This is for the case where an app wants to manage this separate from UI Shell.
      */
     hasStandardAppContentPadding?: boolean;
     /**
-     * Which parts of the UI Shell should be visible initially? For example,
-     * if sideNavProps is undefined, should the space for the sidenav be initially visible?
+     * Parts of UI Shell that are visible when rendered.
+     *
+     * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?
      */
     initialVisibleSections?: SubComponentName[];
     /**
@@ -65,18 +71,26 @@ export type UiShellContentProps = {
      * Components that will render as children of various other components such as the top nav or side nav.
      */
     optionalComponents?: {
+        /**
+         * Spot for banners to go at the top of the page.
+         */
         banners?: ReactElement;
+        /**
+         * In narrow view, this is the right-side menu area.
+         */
+        rightSideMenu?: ReactElement;
+        /**
+         * Footer in the side nav.
+         */
         sideNavFooter?: SideNavProps["footerComponent"];
+        /**
+         * Top nav is divided into 2 parts. This is the left-aligned half.
+         */
         topNavLeftSide?: TopNavProps["leftSideComponent"];
+        /**
+         * Top nav is divided into 2 parts. This is the right-aligned half.
+         */
         topNavRightSide?: TopNavProps["rightSideComponent"];
     };
-} & UiShellNavComponentProps;
-export declare const convertCamelCaseToKebabCase: (string: string) => string;
-export declare const setStylesToMatchElement: ({ additionalStyles, appContainerElement, appContentReferenceElement, }: {
-    additionalStyles: CSSProperties;
-    appContainerElement: HTMLElement;
-    appContentReferenceElement: HTMLElement;
-}) => void;
-declare const MemoizedUiShellContent: import("react").MemoExoticComponent<({ appContainerElement, hasStandardAppContentPadding, appContainerScrollingMode, initialVisibleSections, onError, optionalComponents, appSwitcherProps, sideNavProps, topNavProps, }: UiShellContentProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export { MemoizedUiShellContent as UiShellContent };
-//# sourceMappingURL=UiShellContent.d.ts.map
+};
+//# sourceMappingURL=uiShellContentTypes.d.ts.map

package/dist/types/ui-shell/uiShellContentTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellContentTypes.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,eAAO,MAAM,iBAAiB,+CAAgD,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,mBAAmB,GAAG,oBAAoB,CAC3C,GAAG,IAAI,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;;;;;;OAUG;IACH,UAAU,EAAE,cAAc,CAAC;IAC3B;;;;;;OAMG;IACH,uBAAuB,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACrE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC;;OAEG;IACH,kBAAkB,CAAC,EAAE;QACnB;;WAEG;QACH,OAAO,CAAC,EAAE,YAAY,CAAC;QACvB;;WAEG;QACH,aAAa,CAAC,EAAE,YAAY,CAAC;QAC7B;;WAEG;QACH,aAAa,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAChD;;WAEG;QACH,cAAc,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAC;QAClD;;WAEG;QACH,eAAe,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;KACrD,CAAC;CACH,CAAC"}

package/dist/types/ui-shell/uiShellSharedConstants.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * 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.
+ */
+export declare const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = "77px";
+export declare const SIDE_NAV_WIDTH = "300px";
+export declare const TOP_NAV_HEIGHT = "4.571428571428571rem";
+export declare const UI_SHELL_BASE_Z_INDEX = 100;
+export declare const UI_SHELL_OVERLAY_Z_INDEX = 200;
+//# sourceMappingURL=uiShellSharedConstants.d.ts.map

package/dist/types/ui-shell/uiShellSharedConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellSharedConstants.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/uiShellSharedConstants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,eAAO,MAAM,wCAAwC,SAAS,CAAC;AAE/D,eAAO,MAAM,cAAc,UAAU,CAAC;AAEtC,eAAO,MAAM,cAAc,yBAAkB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,wBAAwB,MAAM,CAAC"}

package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts

@@ -0,0 +1,38 @@
+/*!
+ * 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 { CSSProperties, RefObject } from "react";
+import { UiShellContentProps } from "./uiShellContentTypes.js";
+export declare const convertCamelCaseToKebabCase: (string: string) => string;
+export declare const setStylesToMatchElement: ({ additionalStyles, appContainerElement, appContentReferenceElement, parentElement, }: {
+    additionalStyles: CSSProperties;
+    appContainerElement: HTMLElement;
+    appContentReferenceElement: HTMLElement;
+    parentElement: HTMLElement;
+}) => void;
+export type UseMatchAppElementToUiShellAppAreaProps = {
+    /**
+     * Padding around the app area. "comfortable" is designed for wider views whereas "compact" is designed for narrower views.
+     */
+    paddingMode: "comfortable" | "compact" | "none";
+    /**
+     * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.
+     */
+    uiShellAppAreaRef: RefObject<HTMLDivElement>;
+    /**
+     * Array of refs of items that indirectly resize the app content area such as "side nav" and "top nav".
+     */
+    uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;
+} & Pick<UiShellContentProps, "appElement" | "appElementScrollingMode">;
+export declare const useMatchAppElementToUiShellAppArea: ({ appElement, appElementScrollingMode, paddingMode, uiShellAppAreaRef, uiShellResizableRefs, }: UseMatchAppElementToUiShellAppAreaProps) => {
+    parentContainerRef: RefObject<HTMLDivElement>;
+};
+//# sourceMappingURL=useMatchAppElementToUiShellAppArea.d.ts.map

package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,aAAa,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,eAAO,MAAM,2BAA2B,WAAY,MAAM,WACT,CAAC;AAElD,eAAO,MAAM,uBAAuB,0FAKjC;IACD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mBAAmB,EAAE,WAAW,CAAC;IACjC,0BAA0B,EAAE,WAAW,CAAC;IACxC,aAAa,EAAE,WAAW,CAAC;CAC5B,SAqCA,CAAC;AAEF,MAAM,MAAM,uCAAuC,GAAG;IACpD;;OAEG;IACH,WAAW,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,iBAAiB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;CACxD,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,yBAAyB,CAAC,CAAC;AAExE,eAAO,MAAM,kCAAkC,mGAM5C,uCAAuC;;CA8FzC,CAAC"}

package/dist/types/ui-shell/useScrollState.d.ts

@@ -11,6 +11,5 @@
  */
 export declare const useScrollState: <ScrollableContentElement extends HTMLElement = HTMLDivElement>(scrollableContentElement?: ScrollableContentElement) => {
     isContentScrolled: boolean;
-    scrollableContentRef: import("react").RefObject<ScrollableContentElement>;
 };
 //# sourceMappingURL=useScrollState.d.ts.map

package/dist/types/ui-shell/useScrollState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/useScrollState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,cAAc,GACzB,wBAAwB,SAAS,WAAW,8CAEjB,wBAAwB;;;CAyCpD,CAAC"}
+{"version":3,"file":"useScrollState.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/useScrollState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,cAAc,GACzB,wBAAwB,SAAS,WAAW,8CAEjB,wBAAwB;;CAsCpD,CAAC"}

package/dist/types/ui-shell/useUiShellBreakpoints.d.ts

@@ -0,0 +1,18 @@
+/*!
+ * 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.
+ */
+export declare const uiShellBreakpoint: {
+    readonly comfortable: 800;
+    readonly compact: 600;
+    readonly constrained: 0;
+};
+export declare const useUiShellBreakpoints: () => keyof typeof uiShellBreakpoint | "none";
+//# sourceMappingURL=useUiShellBreakpoints.d.ts.map

package/dist/types/ui-shell/useUiShellBreakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUiShellBreakpoints.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/useUiShellBreakpoints.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,eAAO,MAAM,qBAAqB,QAC9B,MAAM,OAAO,iBAAiB,GAC9B,MA2BH,CAAC"}

package/dist/types/web-component/createReactRootElements.d.ts

@@ -9,12 +9,10 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export declare const createReactRootElements: () => {
+export type ReactRootElements = {
     /**
-     * The element your React root component renders into.
+     * The element your root React component renders into.
      * React has to render or portal somewhere, and this element can be used for that root element.
-     *
-     * In the case of a web component, there is no defined root element, so you have to define it yourself.
      */
     appRootElement: HTMLDivElement;
     /**
@@ -22,6 +20,10 @@ export declare const createReactRootElements: () => {
      *
      * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
      */
+    stylesRootElement: HTMLDivElement | HTMLHeadElement;
+};
+export declare const createReactRootElements: () => {
+    appRootElement: HTMLDivElement;
     stylesRootElement: HTMLDivElement;
 };
 //# sourceMappingURL=createReactRootElements.d.ts.map

package/dist/types/web-component/createReactRootElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRootElements.d.ts","sourceRoot":"","sources":["../../../src/web-component/createReactRootElements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,uBAAuB;IAYhC;;;;;OAKG;;IAEH;;;;OAIG;;CAGN,CAAC"}
+{"version":3,"file":"createReactRootElements.d.ts","sourceRoot":"","sources":["../../../src/web-component/createReactRootElements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,cAAc,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,iBAAiB,EAAE,cAAc,GAAG,eAAe,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;CAenC,CAAC"}

package/dist/types/web-component/renderReactInWebComponent.d.ts

@@ -11,8 +11,7 @@
  */
 import { type ReactNode } from "react";
 import type { Root } from "react-dom/client";
-import { createReactRootElements } from "./createReactRootElements.js";
-export type ReactRootElements = ReturnType<typeof createReactRootElements>;
+import { type ReactRootElements } from "./createReactRootElements.js";
 export declare const reactWebComponentElementName = "odyssey-react-web-component";
 export type GetReactComponentInWebComponent = (reactRootElements: ReactRootElements) => ReactNode;
 declare const SsrFriendlyHtmlElementClass: {
@@ -45,18 +44,26 @@ export type RenderReactInWebComponentProps = {
      * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.
      */
     webComponentChildren?: HTMLElement | HTMLElement[];
+} & ({
     /**
-     * You React app renders in the web component, but the web component needs to be rendered in the document.
+     * The React app renders in the web component, but the web component needs to be rendered in the document.
      *
      * This is the element the web component is rendered into.
      */
+    webComponentParentElement: HTMLElement;
+    webComponentRootElement?: never;
+} | {
+    webComponentParentElement?: HTMLElement;
+    /**
+     * @deprecated Use `webComponentParentElement` instead.
+     */
     webComponentRootElement: HTMLElement;
-};
+});
 /**
  * Lets you render React apps or components in a Web Component.
  *
  * This is useful when global styles are causing conflicts with your React components.
  */
-export declare const renderReactInWebComponent: ({ getReactComponent, webComponentChildren, webComponentRootElement, }: RenderReactInWebComponentProps) => ReactInWebComponentElement;
+export declare const renderReactInWebComponent: ({ getReactComponent, webComponentChildren, webComponentParentElement, webComponentRootElement, }: RenderReactInWebComponentProps) => ReactInWebComponentElement;
 export {};
 //# sourceMappingURL=renderReactInWebComponent.d.ts.map

package/dist/types/web-component/renderReactInWebComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.d.ts","sourceRoot":"","sources":["../../../src/web-component/renderReactInWebComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE3E,eAAO,MAAM,4BAA4B,gCAAgC,CAAC;AAE1E,MAAM,MAAM,+BAA+B,GAAG,CAC5C,iBAAiB,EAAE,iBAAiB,KACjC,SAAS,CAAC;AAEf,QAAA,MAAM,2BAA2B;;;CAG2B,CAAC;AAE7D,qBAAa,0BAA2B,SAAQ,2BAA2B;IACzE,iBAAiB,EAAE,+BAA+B,CAAC;IACnD,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;gBAEpB,iBAAiB,EAAE,+BAA+B;IA4B9D,iBAAiB;IAMjB,oBAAoB;CAGrB;AAYD,MAAM,MAAM,8BAA8B,GAAG;IAC3C;;;;;;OAMG;IACH,iBAAiB,EAAE,+BAA+B,CAAC;IACnD;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;IACnD;;;;OAIG;IACH,uBAAuB,EAAE,WAAW,CAAC;CACtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,0EAInC,8BAA8B,+BAehC,CAAC"}
+{"version":3,"file":"renderReactInWebComponent.d.ts","sourceRoot":"","sources":["../../../src/web-component/renderReactInWebComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,4BAA4B,gCAAgC,CAAC;AAE1E,MAAM,MAAM,+BAA+B,GAAG,CAC5C,iBAAiB,EAAE,iBAAiB,KACjC,SAAS,CAAC;AAEf,QAAA,MAAM,2BAA2B;;;CAG2B,CAAC;AAE7D,qBAAa,0BAA2B,SAAQ,2BAA2B;IACzE,iBAAiB,EAAE,+BAA+B,CAAC;IACnD,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;gBAEpB,iBAAiB,EAAE,+BAA+B;IA4B9D,iBAAiB;IAMjB,oBAAoB;CAGrB;AAYD,MAAM,MAAM,8BAA8B,GAAG;IAC3C;;;;;;OAMG;IACH,iBAAiB,EAAE,+BAA+B,CAAC;IACnD;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;CACpD,GAAG,CACA;IACE;;;;OAIG;IACH,yBAAyB,EAAE,WAAW,CAAC;IACvC,uBAAuB,CAAC,EAAE,KAAK,CAAC;CACjC,GACD;IACE,yBAAyB,CAAC,EAAE,WAAW,CAAC;IACxC;;OAEG;IACH,uBAAuB,EAAE,WAAW,CAAC;CACtC,CACJ,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,qGAKnC,8BAA8B,+BAqBhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.32.4",
+  "version": "1.33.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -118,7 +118,7 @@
     "@mui/system": "^5.16.14",
     "@mui/utils": "^5.16.14",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "1.32.4",
+    "@okta/odyssey-design-tokens": "1.33.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -137,7 +137,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@happy-dom/jest-environment": "^15.7.4",
-    "@okta/browserslist-config-odyssey": "1.32.4",
+    "@okta/browserslist-config-odyssey": "1.33.0",
     "@okta/odyssey-icons": "workspace:*",
     "@okta/odyssey-typescript": "workspace:*",
     "@svgr/cli": "^7.0.0",
@@ -173,5 +173,5 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "d9474d8845b31b347f51af1154ac34c1fd1ccd45"
+  "gitHead": "30be01e7c5433d39285e55501fb689ae918f2eef"
 }

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

@@ -1,242 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.subComponentNames = exports.setStylesToMatchElement = exports.convertCamelCaseToKebabCase = exports.UiShellContent = void 0;
-var _ScopedCssBaseline2 = _interopRequireDefault(require("@mui/material/ScopedCssBaseline"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react = require("react");
-var _reactErrorBoundary = require("react-error-boundary");
-var _index = require("./AppSwitcher/index.cjs");
-var _index2 = require("./SideNav/index.cjs");
-var _index3 = require("./TopNav/index.cjs");
-var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
-var _useScrollState = require("./useScrollState.cjs");
-var _UiShellProvider = require("./UiShellProvider.cjs");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*!
- * 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.
- */
-
-const fullHeightStyles = {
-  height: "100%"
-};
-const emptySideNavItems = [];
-const StyledAppContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
-})(({
-  appBackgroundColor
-}) => ({
-  gridArea: "app-content",
-  backgroundColor: appBackgroundColor
-}));
-const StyledBannersContainer = (0, _styled.default)("div")({
-  gridArea: "banners"
-});
-const StyledAppSwitcherContainer = (0, _styled.default)("div")({
-  gridArea: "app-switcher"
-});
-const StyledSideNavContainer = (0, _styled.default)("div")({
-  gridArea: "side-nav"
-});
-const StyledShellContainer = (0, _styled.default)("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 = (0, _styled.default)("div")({
-  gridArea: "top-nav"
-});
-const subComponentNames = exports.subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
-const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
-exports.convertCamelCaseToKebabCase = convertCamelCaseToKebabCase;
-const setStylesToMatchElement = ({
-  additionalStyles,
-  appContainerElement,
-  appContentReferenceElement
-}) => {
-  const boundingRect = appContentReferenceElement.getBoundingClientRect();
-  appContainerElement.style.setProperty("position", "absolute");
-  appContainerElement.style.setProperty("top", `${boundingRect.y}px`);
-  appContainerElement.style.setProperty("left", `${boundingRect.x}px`);
-  appContainerElement.style.setProperty("width", `${boundingRect.width}px`);
-  appContainerElement.style.setProperty("height", `${boundingRect.height}px`);
-  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
-    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
-  });
-};
-exports.setStylesToMatchElement = setStylesToMatchElement;
-const UiShellContent = ({
-  appContainerElement,
-  hasStandardAppContentPadding = true,
-  appContainerScrollingMode = "vertical",
-  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
-  onError = console.error,
-  optionalComponents,
-  appSwitcherProps,
-  sideNavProps,
-  topNavProps
-}) => {
-  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
-  const {
-    isContentScrolled,
-    scrollableContentRef: appContainerRef
-  } = (0, _useScrollState.useScrollState)(appContainerElement);
-  const sideNavContainerRef = (0, _react.useRef)(null);
-  const topNavContainerRef = (0, _react.useRef)(null);
-  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
-  const appContainerElementStyles = (0, _react.useMemo)(() => ({
-    ...(hasStandardAppContentPadding ? {
-      paddingBlock: odysseyDesignTokens.Spacing5 ?? null,
-      paddingInline: odysseyDesignTokens.Spacing8 ?? null
-    } : {}),
-    ...(appContainerScrollingMode === "horizontal" || appContainerScrollingMode === "both" ? {
-      overflowX: "auto"
-    } : {
-      overflowX: "hidden"
-    }),
-    ...(appContainerScrollingMode === "vertical" || appContainerScrollingMode === "both" ? {
-      overflowY: "auto"
-    } : {
-      overflowY: "hidden"
-    })
-  }), [hasStandardAppContentPadding, appContainerScrollingMode, odysseyDesignTokens]);
-  (0, _react.useEffect)(() => {
-    if (appContainerRef.current && appContainerElement) {
-      let animationFrameId;
-      const updateStyles = () => {
-        cancelAnimationFrame(animationFrameId);
-        animationFrameId = requestAnimationFrame(() => {
-          if (appContainerRef.current) {
-            setStylesToMatchElement({
-              additionalStyles: appContainerElementStyles,
-              appContentReferenceElement: appContainerRef.current,
-              appContainerElement
-            });
-          }
-        });
-      };
-      const sideNavElement = sideNavContainerRef.current;
-      sideNavElement?.addEventListener("transitionend", updateStyles);
-      const observer = new ResizeObserver(updateStyles);
-      observer.observe(appContainerRef.current);
-      if (sideNavElement) {
-        observer.observe(sideNavElement);
-      }
-      if (topNavContainerRef.current) {
-        observer.observe(topNavContainerRef.current);
-      }
-      updateStyles();
-      return () => {
-        observer.disconnect();
-        sideNavElement?.removeEventListener("transitionend", updateStyles);
-      };
-    }
-    return () => {};
-  }, [appContainerElement, appContainerElementStyles, appContainerRef]);
-  return (0, _jsxRuntime.jsxs)(StyledShellContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [(0, _jsxRuntime.jsx)(StyledBannersContainer, {
-      children: optionalComponents?.banners
-    }), (0, _jsxRuntime.jsx)(StyledAppSwitcherContainer, {
-      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
-        sx: fullHeightStyles,
-        children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index.AppSwitcher, {
-            isLoading: true,
-            appIcons: [],
-            selectedAppName: ""
-          })
-        }), appSwitcherProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index.AppSwitcher, {
-            ...appSwitcherProps
-          })
-        })]
-      })
-    }), (0, _jsxRuntime.jsx)(StyledSideNavContainer, {
-      ref: sideNavContainerRef,
-      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
-        sx: fullHeightStyles,
-        children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index2.SideNav, {
-            isLoading: true,
-            appName: "",
-            sideNavItems: emptySideNavItems
-          })
-        }), sideNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index2.SideNav, {
-            ...sideNavProps,
-            ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
-              footerComponent: optionalComponents.sideNavFooter,
-              footerItems: undefined,
-              hasCustomFooter: sideNavProps.hasCustomFooter
-            } : {
-              footerItems: sideNavProps.footerItems,
-              hasCustomFooter: false
-            })
-          })
-        })]
-      })
-    }), (0, _jsxRuntime.jsx)(StyledTopNavContainer, {
-      ref: topNavContainerRef,
-      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
-        sx: fullHeightStyles,
-        children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index3.TopNav, {
-            leftSideComponent: optionalComponents?.topNavLeftSide,
-            rightSideComponent: optionalComponents?.topNavRightSide
-          })
-        }), topNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-          fallback: null,
-          onError: onError,
-          children: (0, _jsxRuntime.jsx)(_index3.TopNav, {
-            ...topNavProps,
-            isScrolled: isContentScrolled,
-            leftSideComponent: optionalComponents?.topNavLeftSide,
-            rightSideComponent: optionalComponents?.topNavRightSide
-          })
-        })]
-      })
-    }), (0, _jsxRuntime.jsx)(StyledAppContainer, {
-      appBackgroundColor: uiShellContext?.appBackgroundColor,
-      tabIndex: 0,
-      ref: appContainerRef
-    })]
-  });
-};
-const MemoizedUiShellContent = exports.UiShellContent = (0, _react.memo)(UiShellContent);
-MemoizedUiShellContent.displayName = "UiShellContent";
-//# sourceMappingURL=UiShellContent.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"UiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_index","_index2","_index3","_OdysseyDesignTokensContext","_useScrollState","_UiShellProvider","_jsxRuntime","e","__esModule","default","fullHeightStyles","height","emptySideNavItems","StyledAppContainer","styled","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","width","StyledTopNavContainer","subComponentNames","exports","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","boundingRect","getBoundingClientRect","style","setProperty","y","x","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","UiShellContent","hasStandardAppContentPadding","appContainerScrollingMode","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","useOdysseyDesignTokens","isContentScrolled","scrollableContentRef","appContainerRef","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellContext","useUiShellContext","appContainerElementStyles","useMemo","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","sideNavElement","addEventListener","observer","ResizeObserver","observe","disconnect","removeEventListener","jsxs","children","jsx","banners","_ScopedCssBaseline2","sx","includes","ErrorBoundary","fallback","AppSwitcher","isLoading","appIcons","selectedAppName","ref","undefined","SideNav","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","TopNav","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedUiShellContent","memo","displayName"],"sources":["../../../src/ui-shell/UiShellContent.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 {\n  CSSProperties,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactElement,\n} from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcher, type AppSwitcherProps } from \"./AppSwitcher/index.js\";\nimport { SideNav, type SideNavProps } from \"./SideNav/index.js\";\nimport { TopNav, type TopNavProps } from \"./TopNav/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nconst fullHeightStyles = { height: \"100%\" };\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 StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n});\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\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 const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\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   * When passed, the app is expected to render into this element, not the Shadow DOM. UI Shell will position this element appropriately as if it was rendered in the app content area of the Shadow DOM.\n   */\n  appContainerElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app content area. Defaults to \"vertical\".\n   */\n  appContainerScrollingMode?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * defaults to `true`. If `false`, the content area will have no padding provided\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Which parts of the UI Shell should be visible initially? For example,\n   * if sideNavProps is undefined, should the space for the sidenav be initially visible?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n}) => {\n  const boundingRect = appContentReferenceElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\"top\", `${boundingRect.y}px`);\n  appContainerElement.style.setProperty(\"left\", `${boundingRect.x}px`);\n  appContainerElement.style.setProperty(\"width\", `${boundingRect.width}px`);\n  appContainerElement.style.setProperty(\"height\", `${boundingRect.height}px`);\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\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 UiShellContent = ({\n  appContainerElement,\n  hasStandardAppContentPadding = true,\n  appContainerScrollingMode = \"vertical\",\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  appSwitcherProps,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef: appContainerRef } =\n    useScrollState(appContainerElement);\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellContext = useUiShellContext();\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(hasStandardAppContentPadding\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5 ?? null,\n            paddingInline: odysseyDesignTokens.Spacing8 ?? null,\n          }\n        : {}),\n      ...(appContainerScrollingMode === \"horizontal\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appContainerScrollingMode === \"vertical\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [\n      hasStandardAppContentPadding,\n      appContainerScrollingMode,\n      odysseyDesignTokens,\n    ],\n  );\n\n  useEffect(() => {\n    // Once appContainerRef is rendered, we can position appContainerElement on top\n    if (appContainerRef.current && appContainerElement) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n        animationFrameId = requestAnimationFrame(() => {\n          if (appContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: appContainerRef.current,\n              appContainerElement,\n            });\n          }\n        });\n      };\n\n      // This element might have changed from `.current`, so it's important to keep track of the old one when we attach event listeners.\n      const sideNavElement = sideNavContainerRef.current;\n\n      sideNavElement?.addEventListener(\"transitionend\", updateStyles);\n\n      // Setup a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n      observer.observe(appContainerRef.current);\n\n      if (sideNavElement) {\n        observer.observe(sideNavElement);\n      }\n\n      if (topNavContainerRef.current) {\n        observer.observe(topNavContainerRef.current);\n      }\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n        sideNavElement?.removeEventListener(\"transitionend\", updateStyles);\n      };\n    }\n    return () => {};\n  }, [appContainerElement, appContainerElementStyles, appContainerRef]);\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        <ScopedCssBaseline sx={fullHeightStyles}>\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          {appSwitcherProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <AppSwitcher {...appSwitcherProps} />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\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\n                    isLoading\n                    appName=\"\"\n                    sideNavItems={emptySideNavItems}\n                  />\n                </ErrorBoundary>\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        </ScopedCssBaseline>\n      </StyledSideNavContainer>\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\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          {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        </ScopedCssBaseline>\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={appContainerRef}\n      />\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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","ignoreList":[]}