@okta/odyssey-react-mui 1.32.4 → 1.34.0

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

@@ -8,8 +8,8 @@ var _reactErrorBoundary = require("react-error-boundary");
 var _bufferLatest = require("./bufferLatest.cjs");
 var _createMessageBus = require("./createMessageBus.cjs");
 var _UiShell = require("./UiShell.cjs");
-var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
 var _useHasUiShell = require("./useHasUiShell.cjs");
+var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 /*!
  * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
@@ -25,6 +25,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const optionalComponentSlotNames = exports.optionalComponentSlotNames = {
   banners: "banners",
+  rightSideMenu: "right-side-menu",
   sideNavFooter: "side-nav-footer",
   topNavLeftSide: "top-nav-left-side",
   topNavRightSide: "top-nav-right-side"
@@ -32,17 +33,17 @@ const optionalComponentSlotNames = exports.optionalComponentSlotNames = {
 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(_useHasUiShell.uiShellDataAttribute, "");
+  const appElement = providedAppElement || document.createElement("div");
+  parentElement.setAttribute(_useHasUiShell.uiShellDataAttribute, "");
   const {
     publish: publishPropChanges,
     subscribe: subscribeToPropChanges
@@ -55,26 +56,32 @@ const renderUiShell = ({
     publish: publishPropChanges,
     subscribe: subscribeToReactAppSubscribed
   });
+  const {
+    publish: closeRightSideMenu,
+    subscribe: subscribeToCloseRightSideMenu
+  } = (0, _createMessageBus.createMessageBus)();
+  const {
+    publish: closeSideNavMenu,
+    subscribe: subscribeToCloseSideNavMenu
+  } = (0, _createMessageBus.createMessageBus)();
   const slottedElements = Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => {
     const element = document.createElement("div");
     element.setAttribute("slot", slotName);
     return [optionalComponentKey, element];
   }));
-  const appContainerElement = document.createElement("div");
-  appContainerElement.appendChild(appRootElement);
   const webComponentChildren = Object.values(slottedElements);
-  const appComponent = (0, _jsxRuntime.jsx)("slot", {});
   const uiShellElement = (0, _renderReactInWebComponent.renderReactInWebComponent)({
     getReactComponent: reactRootElements => (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-      fallback: appComponent,
+      fallback: (0, _jsxRuntime.jsx)("div", {
+        "data-error": true
+      }),
       onError: onError,
       children: (0, _jsxRuntime.jsx)(_UiShell.UiShell, {
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
-        appComponent: appComponent,
-        appContainerElement: appContainerElement,
-        appContainerScrollingMode: appContainerScrollingMode,
-        appRootElement: reactRootElements.appRootElement,
+        appElement: appElement,
+        appElementScrollingMode: appElementScrollingMode,
+        closeSideNavMenu: closeSideNavMenu,
         hasStandardAppContentPadding: hasStandardAppContentPadding,
         initialVisibleSections: initialVisibleSections,
         onError: onError,
@@ -83,17 +90,22 @@ const renderUiShell = ({
           name: slotName
         })])),
         sideNavBackgroundColor: sideNavBackgroundColor,
-        stylesRootElement: reactRootElements.stylesRootElement,
+        subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+        subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
         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,
+    closeRightSideMenu,
+    closeSideNavMenu,
     setComponentProps: publishAfterReactAppReadyForProps,
     slottedElements,
     uiShellElement

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

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.cjs","names":["_reactErrorBoundary","require","_bufferLatest","_createMessageBus","_UiShell","_renderReactInWebComponent","_useHasUiShell","_jsxRuntime","optionalComponentSlotNames","exports","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appContainerScrollingMode","appRootElement","explicitAppRootElement","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","sideNavBackgroundColor","topNavBackgroundColor","uiShellRootElement","document","createElement","setAttribute","uiShellDataAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","createMessageBus","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","bufferLatest","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","appContainerElement","appendChild","webComponentChildren","values","appComponent","jsx","uiShellElement","renderReactInWebComponent","getReactComponent","reactRootElements","ErrorBoundary","fallback","children","UiShell","onSubscriptionCreated","optionalComponents","name","stylesRootElement","webComponentRootElement","setComponentProps"],"sources":["../../../src/ui-shell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * 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.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appContainerScrollingMode,\n  appRootElement: explicitAppRootElement,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n  uiShellRootElement,\n}: {\n  /**\n   * HTML element used as the root for a React app.\n   */\n  appRootElement?: HTMLDivElement;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the root for UI Shell.\n   */\n  uiShellRootElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appContainerScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n>) => {\n  const appRootElement =\n    explicitAppRootElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  uiShellRootElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const appContainerElement = document.createElement(\"div\");\n  appContainerElement.appendChild(appRootElement);\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const appComponent = <slot />;\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={appComponent} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appComponent={appComponent}\n          appContainerElement={appContainerElement}\n          appContainerScrollingMode={appContainerScrollingMode}\n          appRootElement={reactRootElements.appRootElement}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          stylesRootElement={reactRootElements.stylesRootElement}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentRootElement: uiShellRootElement,\n    webComponentChildren,\n  });\n  uiShellRootElement.appendChild(appContainerElement);\n\n  return {\n    appRootElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderUiShell.cjs","names":["_reactErrorBoundary","require","_bufferLatest","_createMessageBus","_UiShell","_useHasUiShell","_renderReactInWebComponent","_jsxRuntime","optionalComponentSlotNames","exports","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","uiShellDataAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","createMessageBus","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","bufferLatest","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","renderReactInWebComponent","getReactComponent","reactRootElements","jsx","ErrorBoundary","fallback","children","UiShell","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","appendChild","setComponentProps"],"sources":["../../../src/ui-shell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * 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.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  parentElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const {\n    publish: closeRightSideMenu,\n    subscribe: subscribeToCloseRightSideMenu,\n  } = createMessageBus();\n\n  const { publish: closeSideNavMenu, subscribe: subscribeToCloseSideNavMenu } =\n    createMessageBus();\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          closeSideNavMenu={closeSideNavMenu}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n          subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentParentElement: parentElement,\n    webComponentChildren,\n  });\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    closeRightSideMenu,\n    closeSideNavMenu,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subComponentNames = void 0;
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const subComponentNames = exports.subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
+//# sourceMappingURL=uiShellContentTypes.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellContentTypes.cjs","names":["subComponentNames","exports"],"sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactElement } from \"react\";\nimport { ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcherProps } from \"./AppSwitcher/AppSwitcher.js\";\nimport { SideNavProps } from \"./SideNav/types.js\";\nimport { TopNavProps } from \"./TopNav/TopNav.js\";\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   * **WARNING:** UI Shell will modify the styling of this element.\n   * HTML element where the app gets rendered. This typically called the React root element for your app.\n   *\n   * When passed, the app is expected to render into this element, not the Shadow DOM.\n   *\n   * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.\n   *\n   * 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.\n   * 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.\n   */\n  appElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app element area.\n   *\n   * In the case of an app wanting to control their own scrolling, use `\"none\"`.\n   *\n   * Most apps will want to use `\"vertical\"` and let UI Shell manage scrolling behavior.\n   */\n  appElementScrollingMode: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Defaults to `true`.\n   *\n   * 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.\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Parts of UI Shell that are visible when rendered.\n   *\n   * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?\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    /**\n     * Spot for banners to go at the top of the page.\n     */\n    banners?: ReactElement;\n    /**\n     * In narrow view, this is the right-side menu area.\n     */\n    rightSideMenu?: ReactElement;\n    /**\n     * Footer in the side nav.\n     */\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the left-aligned half.\n     */\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the right-aligned half.\n     */\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASO,MAAMA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptySideNavItems = exports.UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_BASE_Z_INDEX = exports.TOP_NAV_HEIGHT = exports.SIDE_NAV_WIDTH = exports.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = void 0;
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = exports.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = "77px";
+const SIDE_NAV_WIDTH = exports.SIDE_NAV_WIDTH = "300px";
+const TOP_NAV_HEIGHT = exports.TOP_NAV_HEIGHT = `${64 / 14}rem`;
+const UI_SHELL_BASE_Z_INDEX = exports.UI_SHELL_BASE_Z_INDEX = 100;
+const UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_OVERLAY_Z_INDEX = 200;
+const emptySideNavItems = exports.emptySideNavItems = [];
+//# sourceMappingURL=uiShellSharedConstants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellSharedConstants.cjs","names":["SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","exports","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","emptySideNavItems"],"sources":["../../../src/ui-shell/uiShellSharedConstants.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { SideNavProps } from \"./SideNav/types.js\";\n\n// It's important to bring all our constant values together, so we can change them in one location and ensure the values are all correct relative to each other.\n// This also lends us the capability of swapping these out for a more robust solution in the future.\n\n/* The side nav collapse icon is placed absolutely from the top (Logo container + nav header height) to align it in the middle of the nav header text */\nexport const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = \"77px\";\n\nexport const SIDE_NAV_WIDTH = \"300px\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nexport const UI_SHELL_BASE_Z_INDEX = 100;\n\nexport const UI_SHELL_OVERLAY_Z_INDEX = 200;\n\nexport const emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQO,MAAMA,wCAAwC,GAAAC,OAAA,CAAAD,wCAAA,GAAG,MAAM;AAEvD,MAAME,cAAc,GAAAD,OAAA,CAAAC,cAAA,GAAG,OAAO;AAE9B,MAAMC,cAAc,GAAAF,OAAA,CAAAE,cAAA,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAEtC,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAG,GAAG;AAEjC,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAG,GAAG;AAEpC,MAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAG,EAAyC","ignoreList":[]}

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

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMatchAppElementToUiShellAppArea = exports.setStylesToMatchElement = exports.convertCamelCaseToKebabCase = void 0;
+var _react = require("react");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
+exports.convertCamelCaseToKebabCase = convertCamelCaseToKebabCase;
+const setStylesToMatchElement = ({
+  additionalStyles,
+  appContainerElement,
+  appContentReferenceElement,
+  parentElement
+}) => {
+  const appContentReferenceRectangle = appContentReferenceElement.getBoundingClientRect();
+  const parentElementRectangle = parentElement.getBoundingClientRect();
+  appContainerElement.style.setProperty("position", "absolute");
+  appContainerElement.style.setProperty("top", `${appContentReferenceRectangle.top - parentElementRectangle.top}px`);
+  appContainerElement.style.setProperty("left", `${appContentReferenceRectangle.left - parentElementRectangle.left}px`);
+  appContainerElement.style.setProperty("width", `${appContentReferenceRectangle.width}px`);
+  appContainerElement.style.setProperty("height", `${appContentReferenceRectangle.height}px`);
+  appContainerElement.style.setProperty("z-index", "1");
+  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
+    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
+  });
+};
+exports.setStylesToMatchElement = setStylesToMatchElement;
+const useMatchAppElementToUiShellAppArea = ({
+  appElement,
+  appElementScrollingMode,
+  paddingMode,
+  uiShellAppAreaRef,
+  uiShellResizableRefs
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const parentContainerRef = (0, _react.useRef)(null);
+  const appContainerElementStyles = (0, _react.useMemo)(() => ({
+    ...(paddingMode === "comfortable" ? {
+      paddingBlock: odysseyDesignTokens.Spacing5,
+      paddingInline: odysseyDesignTokens.Spacing8
+    } : {}),
+    ...(paddingMode === "compact" ? {
+      paddingBlock: odysseyDesignTokens.Spacing5,
+      paddingInline: odysseyDesignTokens.Spacing5
+    } : {}),
+    ...(appElementScrollingMode === "horizontal" || appElementScrollingMode === "both" ? {
+      overflowX: "auto"
+    } : {
+      overflowX: "hidden"
+    }),
+    ...(appElementScrollingMode === "vertical" || appElementScrollingMode === "both" ? {
+      overflowY: "auto"
+    } : {
+      overflowY: "hidden"
+    })
+  }), [appElementScrollingMode, paddingMode, odysseyDesignTokens]);
+  (0, _react.useEffect)(() => {
+    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {
+      let animationFrameId;
+      const updateStyles = () => {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = requestAnimationFrame(() => {
+          if (uiShellAppAreaRef.current && parentContainerRef.current) {
+            setStylesToMatchElement({
+              additionalStyles: appContainerElementStyles,
+              appContentReferenceElement: uiShellAppAreaRef.current,
+              appContainerElement: appElement,
+              parentElement: parentContainerRef.current
+            });
+          }
+        });
+      };
+      const resizingElements = uiShellResizableRefs.map(resizingRef => resizingRef.current).filter(element => Boolean(element));
+      const observer = new ResizeObserver(updateStyles);
+      resizingElements.forEach(resizingElement => {
+        resizingElement.addEventListener("transitionend", updateStyles);
+        observer.observe(resizingElement);
+      });
+      updateStyles();
+      return () => {
+        observer.disconnect();
+        resizingElements.forEach(resizingElement => {
+          resizingElement.removeEventListener("transitionend", updateStyles);
+        });
+      };
+    }
+    return () => {};
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  return {
+    parentContainerRef
+  };
+};
+exports.useMatchAppElementToUiShellAppArea = useMatchAppElementToUiShellAppArea;
+//# sourceMappingURL=useMatchAppElementToUiShellAppArea.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.cjs","names":["_react","require","_OdysseyDesignTokensContext","convertCamelCaseToKebabCase","string","replace","toLowerCase","exports","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","useOdysseyDesignTokens","parentContainerRef","useRef","appContainerElementStyles","useMemo","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\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  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\n  appContainerElement.style.setProperty(\"z-index\", \"1\");\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\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,2BAAA,GAAAD,OAAA;AAdA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOO,MAAME,2BAA2B,GAAIC,MAAc,IACxDA,MAAM,CAACC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAACC,WAAW,CAAC,CAAC;AAACC,OAAA,CAAAJ,2BAAA,GAAAA,2BAAA;AAE3C,MAAMK,uBAAuB,GAAGA,CAAC;EACtCC,gBAAgB;EAChBC,mBAAmB;EACnBC,0BAA0B;EAC1BC;AAMF,CAAC,KAAK;EACJ,MAAMC,4BAA4B,GAChCF,0BAA0B,CAACG,qBAAqB,CAAC,CAAC;EACpD,MAAMC,sBAAsB,GAAGH,aAAa,CAACE,qBAAqB,CAAC,CAAC;EAEpEJ,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC;EAC7DP,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,KAAK,EACL,GAAGJ,4BAA4B,CAACK,GAAG,GAAGH,sBAAsB,CAACG,GAAG,IAClE,CAAC;EACDR,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,MAAM,EACN,GAAGJ,4BAA4B,CAACM,IAAI,GAAGJ,sBAAsB,CAACI,IAAI,IACpE,CAAC;EACDT,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,OAAO,EACP,GAAGJ,4BAA4B,CAACO,KAAK,IACvC,CAAC;EACDV,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,QAAQ,EACR,GAAGJ,4BAA4B,CAACQ,MAAM,IACxC,CAAC;EACDX,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC;EAGnDK,MAAM,CAACC,OAAO,CAACd,gBAAgB,CAAC,CAMhCe,OAAO,CAAC,CAAC,CAACC,eAAe,EAAEC,gBAAgB,CAAC,KAAK;IACjDhB,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnCd,2BAA2B,CAACsB,eAAe,CAAC,EAC5CE,MAAM,CAACD,gBAAgB,CACzB,CAAC;EACH,CAAC,CAAC;AACJ,CAAC;AAACnB,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAiBK,MAAMoB,kCAAkC,GAAGA,CAAC;EACjDC,UAAU;EACVC,uBAAuB;EACvBC,WAAW;EACXC,iBAAiB;EACjBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAG,IAAAC,kDAAsB,EAAC,CAAC;EAEpD,MAAMC,kBAAkB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAEvD,MAAMC,yBAAyB,GAAG,IAAAC,cAAO,EACvC,OAAO;IACL,IAAIR,WAAW,KAAK,aAAa,GAC7B;MACES,YAAY,EAAEN,mBAAmB,CAACO,QAAQ;MAC1CC,aAAa,EAAER,mBAAmB,CAACS;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IACP,IAAIZ,WAAW,KAAK,SAAS,GACzB;MACES,YAAY,EAAEN,mBAAmB,CAACO,QAAQ;MAC1CC,aAAa,EAAER,mBAAmB,CAACO;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IACP,IAAIX,uBAAuB,KAAK,YAAY,IAC5CA,uBAAuB,KAAK,MAAM,GAC9B;MACEc,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC,CAAC;IACN,IAAId,uBAAuB,KAAK,UAAU,IAC1CA,uBAAuB,KAAK,MAAM,GAC9B;MACEe,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC;EACP,CAAC,CAAC,EACF,CAACf,uBAAuB,EAAEC,WAAW,EAAEG,mBAAmB,CAC5D,CAAC;EAED,IAAAY,gBAAS,EAAC,MAAM;IAEd,IAAId,iBAAiB,CAACe,OAAO,IAAIlB,UAAU,IAAIO,kBAAkB,CAACW,OAAO,EAAE;MACzE,IAAIC,gBAAwB;MAE5B,MAAMC,YAAY,GAAGA,CAAA,KAAM;QACzBC,oBAAoB,CAACF,gBAAgB,CAAC;QAEtCA,gBAAgB,GAAGG,qBAAqB,CAAC,MAAM;UAC7C,IAAInB,iBAAiB,CAACe,OAAO,IAAIX,kBAAkB,CAACW,OAAO,EAAE;YAC3DvC,uBAAuB,CAAC;cACtBC,gBAAgB,EAAE6B,yBAAyB;cAC3C3B,0BAA0B,EAAEqB,iBAAiB,CAACe,OAAO;cACrDrC,mBAAmB,EAAEmB,UAAU;cAC/BjB,aAAa,EAAEwB,kBAAkB,CAACW;YACpC,CAAC,CAAC;UACJ;QACF,CAAC,CAAC;MACJ,CAAC;MAGD,MAAMK,gBAAgB,GAAGnB,oBAAoB,CAC1CoB,GAAG,CAAEC,WAAW,IAAKA,WAAW,CAACP,OAAO,CAAC,CACzCQ,MAAM,CAAEC,OAAO,IACdC,OAAO,CAACD,OAAO,CACjB,CAAC;MAGH,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAACV,YAAY,CAAC;MAIjDG,gBAAgB,CAAC5B,OAAO,CAAEoC,eAAe,IAAK;QAC5CA,eAAe,CAACC,gBAAgB,CAAC,eAAe,EAAEZ,YAAY,CAAC;QAE/DS,QAAQ,CAACI,OAAO,CAACF,eAAe,CAAC;MACnC,CAAC,CAAC;MAGFX,YAAY,CAAC,CAAC;MAEd,OAAO,MAAM;QACXS,QAAQ,CAACK,UAAU,CAAC,CAAC;QAErBX,gBAAgB,CAAC5B,OAAO,CAAEoC,eAAe,IAAK;UAC5CA,eAAe,CAACI,mBAAmB,CAAC,eAAe,EAAEf,YAAY,CAAC;QACpE,CAAC,CAAC;MACJ,CAAC;IACH;IACA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACpB,UAAU,EAAES,yBAAyB,EAAEN,iBAAiB,CAAC,CAAC;EAE9D,OAAO;IACLI;EACF,CAAC;AACH,CAAC;AAAC7B,OAAA,CAAAqB,kCAAA,GAAAA,kCAAA","ignoreList":[]}

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

@@ -19,8 +19,7 @@ var _react = require("react");
 
 const useScrollState = scrollableContentElement => {
   const [isContentScrolled, setIsContentScrolled] = (0, _react.useState)(false);
-  const scrollableContentRef = (0, _react.useRef)(null);
-  const scrollableElement = (0, _react.useMemo)(() => scrollableContentElement ?? scrollableContentRef.current, [scrollableContentElement, scrollableContentRef.current]);
+  const scrollableElement = (0, _react.useMemo)(() => scrollableContentElement, [scrollableContentElement]);
   (0, _react.useEffect)(() => {
     if (scrollableElement) {
       let requestedAnimationFrameId;
@@ -40,8 +39,7 @@ const useScrollState = scrollableContentElement => {
     return () => {};
   }, [scrollableElement]);
   return {
-    isContentScrolled,
-    scrollableContentRef
+    isContentScrolled
   };
 };
 exports.useScrollState = useScrollState;

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.cjs","names":["_react","require","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","useState","scrollableContentRef","useRef","scrollableElement","useMemo","current","useEffect","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener","exports"],"sources":["../../../src/ui-shell/useScrollState.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\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableContentRef = useRef<ScrollableContentElement>(null);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement ?? scrollableContentRef.current,\n    [scrollableContentElement, scrollableContentRef.current],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n    scrollableContentRef,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEjE,MAAMC,oBAAoB,GAAG,IAAAC,aAAM,EAA2B,IAAI,CAAC;EAEnE,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC/B,MAAMP,wBAAwB,IAAII,oBAAoB,CAACI,OAAO,EAC9D,CAACR,wBAAwB,EAAEI,oBAAoB,CAACI,OAAO,CACzD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIH,iBAAiB,EAAE;MACrB,IAAII,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDX,oBAAoB,CAACI,iBAAiB,CAACQ,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDR,iBAAiB,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXL,iBAAiB,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACJ,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLL,iBAAiB;IACjBG;EACF,CAAC;AACH,CAAC;AAACa,OAAA,CAAAlB,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"file":"useScrollState.cjs","names":["_react","require","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","useState","scrollableElement","useMemo","useEffect","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener","exports"],"sources":["../../../src/ui-shell/useScrollState.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\nimport { useEffect, useMemo, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement,\n    [scrollableContentElement],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEjE,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC/B,MAAML,wBAAwB,EAC9B,CAACA,wBAAwB,CAC3B,CAAC;EAED,IAAAM,gBAAS,EAAC,MAAM;IACd,IAAIF,iBAAiB,EAAE;MACrB,IAAIG,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDR,oBAAoB,CAACE,iBAAiB,CAACO,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDP,iBAAiB,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXJ,iBAAiB,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACH,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLH;EACF,CAAC;AACH,CAAC;AAACa,OAAA,CAAAf,cAAA,GAAAA,cAAA","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUiShellBreakpoints = exports.uiShellBreakpoint = void 0;
+var _useMediaQuery = require("../theme/useMediaQuery.cjs");
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const uiShellBreakpoint = exports.uiShellBreakpoint = {
+  comfortable: 800,
+  compact: 600,
+  constrained: 0
+};
+const useUiShellBreakpoints = () => {
+  const isConstrainedView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${uiShellBreakpoint.constrained}px)`);
+  const isCompactView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${uiShellBreakpoint.compact}px)`);
+  const isComfortableView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${uiShellBreakpoint.comfortable}px)`);
+  if (isComfortableView) {
+    return "comfortable";
+  }
+  if (isCompactView) {
+    return "compact";
+  }
+  if (isConstrainedView) {
+    return "constrained";
+  }
+  return "none";
+};
+exports.useUiShellBreakpoints = useUiShellBreakpoints;
+//# sourceMappingURL=useUiShellBreakpoints.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUiShellBreakpoints.cjs","names":["_useMediaQuery","require","uiShellBreakpoint","exports","comfortable","compact","constrained","useUiShellBreakpoints","isConstrainedView","useMediaQuery","isCompactView","isComfortableView"],"sources":["../../../src/ui-shell/useUiShellBreakpoints.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMediaQuery } from \"../theme/useMediaQuery.js\";\n\nexport const uiShellBreakpoint = {\n  comfortable: 800,\n  compact: 600,\n  constrained: 0,\n} as const;\n\nexport const useUiShellBreakpoints = ():\n  | keyof typeof uiShellBreakpoint\n  | \"none\" => {\n  const isConstrainedView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.constrained}px)`,\n  );\n\n  const isCompactView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.compact}px)`,\n  );\n\n  const isComfortableView = useMediaQuery(\n    `(min-width: ${uiShellBreakpoint.comfortable}px)`,\n  );\n\n  if (isComfortableView) {\n    return \"comfortable\";\n  }\n\n  if (isCompactView) {\n    return \"compact\";\n  }\n\n  if (isConstrainedView) {\n    return \"constrained\";\n  }\n\n  // For the initial page load as we don't have media queries until the page loads.\n  return \"none\";\n};\n"],"mappings":";;;;;;AAYA,IAAAA,cAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC/BE,WAAW,EAAE,GAAG;EAChBC,OAAO,EAAE,GAAG;EACZC,WAAW,EAAE;AACf,CAAU;AAEH,MAAMC,qBAAqB,GAAGA,CAAA,KAEvB;EACZ,MAAMC,iBAAiB,GAAG,IAAAC,4BAAa,EACrC,eAAeP,iBAAiB,CAACI,WAAW,KAC9C,CAAC;EAED,MAAMI,aAAa,GAAG,IAAAD,4BAAa,EACjC,eAAeP,iBAAiB,CAACG,OAAO,KAC1C,CAAC;EAED,MAAMM,iBAAiB,GAAG,IAAAF,4BAAa,EACrC,eAAeP,iBAAiB,CAACE,WAAW,KAC9C,CAAC;EAED,IAAIO,iBAAiB,EAAE;IACrB,OAAO,aAAa;EACtB;EAEA,IAAID,aAAa,EAAE;IACjB,OAAO,SAAS;EAClB;EAEA,IAAIF,iBAAiB,EAAE;IACrB,OAAO,aAAa;EACtB;EAGA,OAAO,MAAM;AACf,CAAC;AAACL,OAAA,CAAAI,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/cjs/web-component/createReactRootElements.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createReactRootElements.cjs","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce","exports"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    /**\n     * The element your React root component renders into.\n     * React has to render or portal somewhere, and this element can be used for that root element.\n     *\n     * In the case of a web component, there is no defined root element, so you have to define it yourself.\n     */\n    appRootElement,\n    /**\n     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n     *\n     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n     */\n    stylesRootElement,\n  };\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IAOLR,cAAc;IAMdG;EACF,CAAC;AACH,CAAC;AAACM,OAAA,CAAAV,uBAAA,GAAAA,uBAAA","ignoreList":[]}
+{"version":3,"file":"createReactRootElements.cjs","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce","exports"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type ReactRootElements = {\n  /**\n   * The element your root React component renders into.\n   * React has to render or portal somewhere, and this element can be used for that root element.\n   */\n  appRootElement: HTMLDivElement;\n  /**\n   * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n   *\n   * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n   */\n  stylesRootElement: HTMLDivElement | HTMLHeadElement;\n};\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    appRootElement,\n    stylesRootElement,\n  } satisfies ReactRootElements;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IACLR,cAAc;IACdG;EACF,CAAC;AACH,CAAC;AAACM,OAAA,CAAAV,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/cjs/web-component/renderReactInWebComponent.cjs

@@ -78,6 +78,7 @@ if ("customElements" in globalThis && !customElements.get(reactWebComponentEleme
 const renderReactInWebComponent = ({
   getReactComponent,
   webComponentChildren,
+  webComponentParentElement,
   webComponentRootElement
 }) => {
   const reactElement = new ReactInWebComponentElement(getReactComponent);
@@ -86,7 +87,11 @@ const renderReactInWebComponent = ({
       reactElement.appendChild(webComponentChild);
     });
   }
-  webComponentRootElement.appendChild(reactElement);
+  if (webComponentParentElement) {
+    webComponentParentElement.appendChild(reactElement);
+  } else if (webComponentRootElement) {
+    webComponentRootElement.appendChild(reactElement);
+  }
   return reactElement;
 };
 exports.renderReactInWebComponent = renderReactInWebComponent;

package/dist/cjs/web-component/renderReactInWebComponent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.cjs","names":["_createReactRootElements","require","_getRequireWildcardCache","e","WeakMap","r","t","_interopRequireWildcard","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","__transformExtension","filepath","extMapping","startsWith","idx","lastIndexOf","includes","newExt","origExt","entries","sort","b","length","endsWith","slice","reactWebComponentElementName","exports","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","createReactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","specifier","Promise","then","s","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.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\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport { createReactRootElements } from \"./createReactRootElements.js\";\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderReactInWebComponent.cjs","names":["_createReactRootElements","require","_getRequireWildcardCache","e","WeakMap","r","t","_interopRequireWildcard","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","__transformExtension","filepath","extMapping","startsWith","idx","lastIndexOf","includes","newExt","origExt","entries","sort","b","length","endsWith","slice","reactWebComponentElementName","exports","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","createReactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","specifier","Promise","then","s","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","define","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.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\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Autocomplete.js

@@ -120,7 +120,7 @@ const Autocomplete = ({
     fullWidth: isFullWidth,
     loading: isLoading,
     multiple: hasMultipleChoices,
-    noOptionsText: noOptionsText,
+    noOptionsText: noOptionsText || t("autocomplete.nooptions"),
     onBlur: onBlur,
     onChange: onChange,
     onInputChange: onInputChange,