@okta/odyssey-react-mui 1.32.0 → 1.33.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_index","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_renderUiShell","_index2","_index3","_useHasUiShell","_renderReactInWebComponent","_UiShell"],"sources":["../../../src/ui-shell/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport * from \"./AppSwitcher/index.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_index","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_NarrowUiShellContent","_renderUiShell","_index2","_index3","_uiShellContentTypes","_useHasUiShell","_renderReactInWebComponent","_WideUiShellContent","_UiShell"],"sources":["../../../src/ui-shell/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport * from \"./AppSwitcher/index.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\nexport * from \"./WideUiShellContent.js\";\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\n"],"mappings":"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","ignoreList":[]}

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
@@ -60,21 +61,18 @@ const renderUiShell = ({
     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,
         hasStandardAppContentPadding: hasStandardAppContentPadding,
         initialVisibleSections: initialVisibleSections,
         onError: onError,
@@ -83,17 +81,18 @@ const renderUiShell = ({
           name: slotName
         })])),
         sideNavBackgroundColor: sideNavBackgroundColor,
-        stylesRootElement: reactRootElements.stylesRootElement,
         subscribeToPropChanges: subscribeToPropChanges,
-        topNavBackgroundColor: topNavBackgroundColor
+        topNavBackgroundColor: topNavBackgroundColor,
+        uiShellAppElement: reactRootElements.appRootElement,
+        uiShellStylesElement: reactRootElements.stylesRootElement
       })
     }),
-    webComponentRootElement: uiShellRootElement,
+    webComponentParentElement: parentElement,
     webComponentChildren
   });
-  uiShellRootElement.appendChild(appContainerElement);
+  parentElement.appendChild(appElement);
   return {
-    appRootElement,
+    appElement,
     setComponentProps: publishAfterReactAppReadyForProps,
     slottedElements,
     uiShellElement

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","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 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          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          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    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/{src/TagListContext.tsx → dist/cjs/ui-shell/uiShellContentTypes.cjs}

@@ -1,5 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subComponentNames = void 0;
 /*!
- * Copyright (c) 2022-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.
@@ -10,14 +16,5 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext } from "react";
-
-export type ChipElementType = "li" | "div";
-
-export type TagListContextType = {
-  chipElementType: ChipElementType;
-};
-
-export const TagListContext = createContext<TagListContextType>({
-  chipElementType: "div",
-});
+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,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+//# 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"],"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\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"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAMO,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","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":"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","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/useContrastMode.cjs

@@ -70,7 +70,7 @@ const useContrastMode = ({
       setContrastMode(newBgColor === Tokens.HueNeutral50 ? "highContrast" : "lowContrast");
     }
   }, [explicitContrastMode]);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _react.useEffect)(() => {
     const observer = new MutationObserver(updateBackgroundColor);
     observer.observe(document.querySelector("html"), {
       attributes: true,

package/dist/cjs/useContrastMode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useContrastMode.cjs","names":["_react","require","Tokens","_interopRequireWildcard","_hexToRgb","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContrastModeContext","exports","createContext","contrastMode","defaultContrast","useContrastModeContext","useContext","hueNeutral50Rgb","hexToRgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","useRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","useState","setContrastMode","updateBackgroundColor","useCallback","newBgColor","current","useLayoutEffect","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useContext,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useContrastMode.cjs","names":["_react","require","Tokens","_interopRequireWildcard","_hexToRgb","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContrastModeContext","exports","createContext","contrastMode","defaultContrast","useContrastModeContext","useContext","hueNeutral50Rgb","hexToRgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","useRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","useState","setContrastMode","updateBackgroundColor","useCallback","newBgColor","current","useEffect","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"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","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;