@okta/odyssey-react-mui 1.32.4 → 1.34.0

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

@@ -11,7 +11,7 @@
  */
 import { type SetStateAction } from "react";
 import { UiShellProps } from "./UiShell.js";
-import { type UiShellNavComponentProps } from "./UiShellContent.js";
+import { UiShellNavComponentProps } from "./uiShellContentTypes.js";
 export declare const optionalComponentSlotNames: Record<keyof Required<UiShellProps>["optionalComponents"], string>;
 /**
  * This function renders UI Shell in a web component.
@@ -22,23 +22,21 @@ export declare const optionalComponentSlotNames: Record<keyof Required<UiShellPr
  * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.
  * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**
  */
-export declare const renderUiShell: ({ appBackgroundColor, appBackgroundContrastMode, appContainerScrollingMode, appRootElement: explicitAppRootElement, hasStandardAppContentPadding, initialVisibleSections, onError, sideNavBackgroundColor, topNavBackgroundColor, uiShellRootElement, }: {
-    /**
-     * HTML element used as the root for a React app.
-     */
-    appRootElement?: HTMLDivElement;
+export declare const renderUiShell: ({ appBackgroundColor, appBackgroundContrastMode, appElement: providedAppElement, appElementScrollingMode, hasStandardAppContentPadding, initialVisibleSections, onError, parentElement, sideNavBackgroundColor, topNavBackgroundColor, }: {
     /**
      * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.
      */
     onError?: () => void;
     /**
-     * HTML element used as the root for UI Shell.
+     * HTML element used as the container for UI Shell and the App. They're siblings inside this element.
      */
-    uiShellRootElement: HTMLElement;
-} & Pick<UiShellProps, "appBackgroundColor" | "appBackgroundContrastMode" | "appContainerScrollingMode" | "hasStandardAppContentPadding" | "initialVisibleSections" | "sideNavBackgroundColor" | "topNavBackgroundColor">) => {
-    appRootElement: HTMLDivElement;
+    parentElement: HTMLElement;
+} & Pick<UiShellProps, "appBackgroundColor" | "appBackgroundContrastMode" | "appElementScrollingMode" | "hasStandardAppContentPadding" | "initialVisibleSections" | "sideNavBackgroundColor" | "topNavBackgroundColor"> & Partial<Pick<UiShellProps, "appElement">>) => {
+    appElement: HTMLDivElement;
+    closeRightSideMenu: import("./createMessageBus.js").PublishMessage<void>;
+    closeSideNavMenu: import("./createMessageBus.js").PublishMessage<void>;
     setComponentProps: (value: SetStateAction<UiShellNavComponentProps>) => void;
-    slottedElements: Record<"banners" | "sideNavFooter" | "topNavLeftSide" | "topNavRightSide", HTMLDivElement>;
+    slottedElements: Record<"banners" | "topNavLeftSide" | "sideNavFooter" | "rightSideMenu" | "topNavRightSide", HTMLDivElement>;
     uiShellElement: import("../web-component/renderReactInWebComponent.js").ReactInWebComponentElement;
 };
 //# sourceMappingURL=renderUiShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/renderUiShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAW,YAAY,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGpE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAC7C,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,oBAAoB,CAAC,EAClD,MAAM,CAMP,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,4PAWvB;IACD;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,kBAAkB,EAAE,WAAW,CAAC;CACjC,GAAG,IAAI,CACN,YAAY,EACV,oBAAoB,GACpB,2BAA2B,GAC3B,2BAA2B,GAC3B,8BAA8B,GAC9B,wBAAwB,GACxB,wBAAwB,GACxB,uBAAuB,CAC1B;;;;;CAmFA,CAAC"}
+{"version":3,"file":"renderUiShell.d.ts","sourceRoot":"","sources":["../../../src/ui-shell/renderUiShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAW,YAAY,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAIpE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAC7C,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,oBAAoB,CAAC,EAClD,MAAM,CAOP,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,6OAWvB;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,WAAW,CAAC;CAC5B,GAAG,IAAI,CACN,YAAY,EACV,oBAAoB,GACpB,2BAA2B,GAC3B,yBAAyB,GACzB,8BAA8B,GAC9B,wBAAwB,GACxB,wBAAwB,GACxB,uBAAuB,CAC1B,GACC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;;;;;;;CA0F1C,CAAC"}

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,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 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;
+export declare const emptySideNavItems: never[];
+//# 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;AAQH,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;AAE5C,eAAO,MAAM,iBAAiB,SAA4C,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.34.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.34.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -136,8 +136,7 @@
     "@babel/preset-env": "^7.26.0",
     "@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.34.0",
     "@okta/odyssey-icons": "workspace:*",
     "@okta/odyssey-typescript": "workspace:*",
     "@svgr/cli": "^7.0.0",
@@ -157,6 +156,7 @@
     "babel-plugin-replace-import-extension": "^1.1.4",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
+    "happy-dom": "^17.1.9",
     "jest-axe": "^5.0.1",
     "properties": "1.2.1",
     "react": "^18.3.1",
@@ -166,12 +166,12 @@
     "tsd": "^0.31.2",
     "tsx": "^4.7.3",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.5",
+    "vitest": "^3.0.7",
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "d9474d8845b31b347f51af1154ac34c1fd1ccd45"
+  "gitHead": "6d4e5829cb460ed369d9009ec805a18014683a50"
 }

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