@okta/odyssey-react-mui 1.34.0 → 1.35.2

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  UiShell: true
+  UiShell: true,
+  adminAppUiShellBreakpoints: true
 };
 Object.defineProperty(exports, "UiShell", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "UiShell", {
     return _UiShell.UiShell;
   }
 });
+Object.defineProperty(exports, "adminAppUiShellBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _useUiShellBreakpoints.adminAppUiShellBreakpoints;
+  }
+});
 var _index = require("./AppSwitcher/index.cjs");
 Object.keys(_index).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,6 +31,18 @@ Object.keys(_index).forEach(function (key) {
     }
   });
 });
+var _InnerAppContainer = require("./InnerAppContainer.cjs");
+Object.keys(_InnerAppContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InnerAppContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InnerAppContainer[key];
+    }
+  });
+});
 var _NarrowUiShellContent = require("./NarrowUiShellContent.cjs");
 Object.keys(_NarrowUiShellContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -96,29 +115,30 @@ Object.keys(_useHasUiShell).forEach(function (key) {
     }
   });
 });
-var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
-Object.keys(_renderReactInWebComponent).forEach(function (key) {
+var _WideUiShellContent = require("./WideUiShellContent.cjs");
+Object.keys(_WideUiShellContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _renderReactInWebComponent[key]) return;
+  if (key in exports && exports[key] === _WideUiShellContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _renderReactInWebComponent[key];
+      return _WideUiShellContent[key];
     }
   });
 });
-var _WideUiShellContent = require("./WideUiShellContent.cjs");
-Object.keys(_WideUiShellContent).forEach(function (key) {
+var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
+Object.keys(_renderReactInWebComponent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _WideUiShellContent[key]) return;
+  if (key in exports && exports[key] === _renderReactInWebComponent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _WideUiShellContent[key];
+      return _renderReactInWebComponent[key];
     }
   });
 });
 var _UiShell = require("./UiShell.cjs");
+var _useUiShellBreakpoints = require("./useUiShellBreakpoints.cjs");
 //# sourceMappingURL=index.cjs.map

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","_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":[]}
+{"version":3,"file":"index.cjs","names":["_index","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_InnerAppContainer","_NarrowUiShellContent","_renderUiShell","_index2","_index3","_uiShellContentTypes","_useHasUiShell","_WideUiShellContent","_renderReactInWebComponent","_UiShell","_useUiShellBreakpoints"],"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 \"./InnerAppContainer.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 \"./WideUiShellContent.js\";\n\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 { adminAppUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\n"],"mappings":"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","ignoreList":[]}

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

@@ -35,6 +35,7 @@ const renderUiShell = ({
   appBackgroundContrastMode,
   appElement: providedAppElement,
   appElementScrollingMode,
+  breakpointConfig,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
@@ -77,6 +78,7 @@ const renderUiShell = ({
       }),
       onError: onError,
       children: (0, _jsxRuntime.jsx)(_UiShell.UiShell, {
+        breakpointConfig: breakpointConfig,
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
         appElement: appElement,

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

@@ -1 +1 @@
-{"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":[]}
+{"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","breakpointConfig","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  breakpointConfig,\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  | \"breakpointConfig\"\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          breakpointConfig={breakpointConfig}\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/useMatchAppElementToUiShellAppArea.cjs

@@ -33,7 +33,6 @@ const setStylesToMatchElement = ({
   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));
   });
@@ -49,6 +48,8 @@ const useMatchAppElementToUiShellAppArea = ({
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
   const parentContainerRef = (0, _react.useRef)(null);
   const appContainerElementStyles = (0, _react.useMemo)(() => ({
+    boxSizing: "border-box",
+    zIndex: 1,
     ...(paddingMode === "comfortable" ? {
       paddingBlock: odysseyDesignTokens.Spacing5,
       paddingInline: odysseyDesignTokens.Spacing8

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

@@ -1 +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":[]}
+{"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","boxSizing","zIndex","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\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      boxSizing: \"border-box\",\n      zIndex: 1,\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\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/useUiShellBreakpoints.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUiShellBreakpoints = exports.uiShellBreakpoint = void 0;
+exports.useUiShellBreakpoints = exports.defaultUiShellBreakpointConfig = exports.adminAppUiShellBreakpoints = void 0;
 var _useMediaQuery = require("../theme/useMediaQuery.cjs");
 /*!
  * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
@@ -17,23 +17,28 @@ var _useMediaQuery = require("../theme/useMediaQuery.cjs");
  * 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 defaultUiShellBreakpointConfig = exports.defaultUiShellBreakpointConfig = {
+  narrow: 0,
+  medium: 600,
+  wide: 800
 };
-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";
+const adminAppUiShellBreakpoints = exports.adminAppUiShellBreakpoints = {
+  narrow: 0,
+  medium: 600,
+  wide: 1304
+};
+const useUiShellBreakpoints = (breakpointConfig = defaultUiShellBreakpointConfig) => {
+  const isNarrowView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${breakpointConfig.narrow}px)`);
+  const isMediumView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${breakpointConfig.medium}px)`);
+  const isWideView = (0, _useMediaQuery.useMediaQuery)(`(min-width: ${breakpointConfig.wide}px)`);
+  if (isWideView) {
+    return "wide";
   }
-  if (isCompactView) {
-    return "compact";
+  if (isMediumView) {
+    return "medium";
   }
-  if (isConstrainedView) {
-    return "constrained";
+  if (isNarrowView) {
+    return "narrow";
   }
   return "none";
 };

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

@@ -1 +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":[]}
+{"version":3,"file":"useUiShellBreakpoints.cjs","names":["_useMediaQuery","require","defaultUiShellBreakpointConfig","exports","narrow","medium","wide","adminAppUiShellBreakpoints","useUiShellBreakpoints","breakpointConfig","isNarrowView","useMediaQuery","isMediumView","isWideView"],"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 type UiShellBreakpointConfig = {\n  narrow: number;\n  medium: number;\n  wide: number;\n};\n\nexport const defaultUiShellBreakpointConfig = {\n  narrow: 0,\n  medium: 600,\n  wide: 800,\n} as const satisfies UiShellBreakpointConfig;\n\nexport const adminAppUiShellBreakpoints = {\n  narrow: 0,\n  medium: 600,\n  wide: 1304,\n} as const satisfies UiShellBreakpointConfig;\n\nexport const useUiShellBreakpoints = (\n  breakpointConfig: UiShellBreakpointConfig = defaultUiShellBreakpointConfig,\n): keyof UiShellBreakpointConfig | \"none\" => {\n  const isNarrowView = useMediaQuery(\n    `(min-width: ${breakpointConfig.narrow}px)`,\n  );\n\n  const isMediumView = useMediaQuery(\n    `(min-width: ${breakpointConfig.medium}px)`,\n  );\n\n  const isWideView = useMediaQuery(`(min-width: ${breakpointConfig.wide}px)`);\n\n  if (isWideView) {\n    return \"wide\";\n  }\n\n  if (isMediumView) {\n    return \"medium\";\n  }\n\n  if (isNarrowView) {\n    return \"narrow\";\n  }\n\n  // This is a failsafe in case we don't have any media queries on page load or if media queries were improperly defined (no `0` case). With the default breakpoints, it will never be `\"none\"`.\n  return \"none\";\n};\n"],"mappings":";;;;;;AAYA,IAAAA,cAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUO,MAAMC,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAG;EAC5CE,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAA4C;AAErC,MAAMC,0BAA0B,GAAAJ,OAAA,CAAAI,0BAAA,GAAG;EACxCH,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAA4C;AAErC,MAAME,qBAAqB,GAAGA,CACnCC,gBAAyC,GAAGP,8BAA8B,KAC/B;EAC3C,MAAMQ,YAAY,GAAG,IAAAC,4BAAa,EAChC,eAAeF,gBAAgB,CAACL,MAAM,KACxC,CAAC;EAED,MAAMQ,YAAY,GAAG,IAAAD,4BAAa,EAChC,eAAeF,gBAAgB,CAACJ,MAAM,KACxC,CAAC;EAED,MAAMQ,UAAU,GAAG,IAAAF,4BAAa,EAAC,eAAeF,gBAAgB,CAACH,IAAI,KAAK,CAAC;EAE3E,IAAIO,UAAU,EAAE;IACd,OAAO,MAAM;EACf;EAEA,IAAID,YAAY,EAAE;IAChB,OAAO,QAAQ;EACjB;EAEA,IAAIF,YAAY,EAAE;IAChB,OAAO,QAAQ;EACjB;EAGA,OAAO,MAAM;AACf,CAAC;AAACP,OAAA,CAAAK,qBAAA,GAAAA,qBAAA","ignoreList":[]}

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

@@ -40,6 +40,7 @@ function __transformExtension(filepath, extMapping) {
 const reactWebComponentElementName = exports.reactWebComponentElementName = "odyssey-react-web-component";
 const SsrFriendlyHtmlElementClass = "HTMLElement" in globalThis ? HTMLElement : class {};
 class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
+  reactRootPromise = Promise.resolve(null);
   constructor(getReactComponent) {
     super();
     this.getReactComponent = getReactComponent;
@@ -58,17 +59,30 @@ class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
     this.reactRootElements.stylesRootElement.appendChild(styleElement);
     shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
     shadowRoot.appendChild(this.reactRootElements.appRootElement);
-    this.reactRootPromise = (specifier => new Promise(r => r(`${specifier}`)).then(s => _interopRequireWildcard(require(s))))(__transformExtension("react-dom/client", {
-      ".js": ".cjs"
-    })).then(({
-      createRoot
-    }) => createRoot(this.reactRootElements.appRootElement));
   }
   connectedCallback() {
-    this.reactRootPromise.then(reactRoot => reactRoot.render(this.getReactComponent(this.reactRootElements)));
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      if (reactRoot) {
+        throw new Error(`connectedCallback fired when reactRoot is already mounted.`);
+      }
+      return (specifier => new Promise(r => r(`${specifier}`)).then(s => _interopRequireWildcard(require(s))))(__transformExtension("react-dom/client", {
+        ".js": ".cjs"
+      })).then(({
+        createRoot
+      }) => createRoot(this.reactRootElements.appRootElement));
+    }).then(reactRoot => {
+      reactRoot.render(this.getReactComponent(this.reactRootElements));
+      return reactRoot;
+    });
   }
   disconnectedCallback() {
-    this.reactRootPromise.then(reactRoot => reactRoot.unmount());
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      if (!reactRoot) {
+        throw new Error(`disconnectedCallback fired when reactRoot is already unmounted.`);
+      }
+      reactRoot.unmount();
+      return null;
+    });
   }
 }
 exports.ReactInWebComponentElement = ReactInWebComponentElement;

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","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":[]}
+{"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","reactRootPromise","Promise","resolve","constructor","getReactComponent","reactRootElements","createReactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","connectedCallback","then","reactRoot","Error","specifier","s","createRoot","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 | null> = Promise.resolve(null);\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\n  connectedCallback() {\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\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        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        reactRoot.render(this.getReactComponent(this.reactRootElements));\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\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/Dialog.js

@@ -19,6 +19,7 @@ import { useTranslation } from "react-i18next";
 import { Button } from "./Buttons/index.js";
 import { CloseIcon } from "./icons.generated/index.js";
 import { cloneElement, memo, useState, useEffect, useRef } from "react";
+import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Dialog = ({
   primaryCallToActionComponent,
@@ -39,6 +40,8 @@ const Dialog = ({
   } = useTranslation();
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const dialogContentRef = useRef(null);
+  const dialogTitleId = useUniqueId();
+  const dialogLabelId = useUniqueId();
   useEffect(() => {
     let frameId;
     const handleContentScroll = () => {
@@ -64,9 +67,14 @@ const Dialog = ({
     "data-se": testId,
     open: isOpen,
     onClose: onClose,
+    "aria-labelledby": dialogLabelId,
     children: [_jsxs(_DialogTitle, {
+      id: dialogTitleId,
       translate: translate,
-      children: [title, _jsx(Button, {
+      children: [_jsx("span", {
+        id: dialogLabelId,
+        children: title
+      }), _jsx(Button, {
         ariaLabel: t("close.text"),
         onClick: onClose,
         size: "small",

package/dist/esm/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["useTranslation","Button","CloseIcon","cloneElement","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","_Dialog","open","_DialogTitle","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Dialog as MuiDialog,\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Buttons/index.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  cloneElement,\n  memo,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: () => void;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  return (\n    <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>\n      <DialogTitle translate={translate}>\n        {title}\n        <Button\n          ariaLabel={t(\"close.text\")}\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent\n        {...(isContentScrollable && {\n          // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        dividers={isContentScrollable}\n        ref={dialogContentRef}\n      >\n        {content}\n      </DialogContent>\n\n      {actionButtons.length > 0 && (\n        <DialogActions>\n          {actionButtons.map((actionButton, index) =>\n            actionButton ? cloneElement(actionButton, { key: index }) : null,\n          )}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAQ9C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SACEC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,MAAM,QAGD,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuDf,MAAMC,MAAM,GAAGA,CAAC;EACdC,4BAA4B;EAC5BC,8BAA8B;EAC9BC,6BAA6B;EAC7BC,0BAA0B;EAC1BC,2BAA2B;EAC3BC,yBAAyB;EACzBC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGzB,cAAc,CAAC,CAAC;EAC9B,MAAM,CAAC0B,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMuB,gBAAgB,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAErDD,SAAS,CAAC,MAAM;IACd,IAAIuB,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBE,oBAAoB,CAACJ,OAAO,CAAC;QAC7BF,sBAAsB,CACpBI,oBAAoB,CAACG,YAAY,GAAGH,oBAAoB,CAACI,YAC3D,CAAC;MACH;MACAN,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIV,MAAM,EAAE;MACVS,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXG,oBAAoB,CAACJ,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACT,MAAM,CAAC,CAAC;EAEZ,MAAMiB,OAAO,GACX,OAAOlB,QAAQ,KAAK,QAAQ,GAC1BV,IAAA,CAAA6B,kBAAA;IAAAnB,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAGH,MAAMoB,aAAa,GAAG,CACpBxB,6BAA6B,IAAIG,yBAAyB,EAC1DJ,8BAA8B,IAAIG,2BAA2B,EAC7DJ,4BAA4B,IAAIG,0BAA0B,CAC3D,CAACwB,MAAM,CAACC,OAAO,CAAC;EAEjB,OACE9B,KAAA,CAAA+B,OAAA;IAAW,WAASpB,MAAO;IAACqB,IAAI,EAAEvB,MAAO;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,GACzDR,KAAA,CAAAiC,YAAA;MAAapB,SAAS,EAAEA,SAAU;MAAAL,QAAA,GAC/BI,KAAK,EACNd,IAAA,CAACR,MAAM;QACL4C,SAAS,EAAEpB,CAAC,CAAC,YAAY,CAAE;QAC3BqB,OAAO,EAAEzB,OAAQ;QACjB0B,IAAI,EAAC,OAAO;QACZC,SAAS,EAAEvC,IAAA,CAACP,SAAS,IAAE,CAAE;QACzB+C,OAAO,EAAC;MAAU,CACnB,CAAC;IAAA,CACS,CAAC,EACdxC,IAAA,CAAAyC,cAAA;MAAA,IACOxB,mBAAmB,IAAI;QAE1ByB,QAAQ,EAAE;MACZ,CAAC;MACDC,QAAQ,EAAE1B,mBAAoB;MAC9B2B,GAAG,EAAEzB,gBAAiB;MAAAT,QAAA,EAErBkB;IAAO,CACK,CAAC,EAEfE,aAAa,CAACe,MAAM,GAAG,CAAC,IACvB7C,IAAA,CAAA8C,cAAA;MAAApC,QAAA,EACGoB,aAAa,CAACiB,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KACrCD,YAAY,GAAGtD,YAAY,CAACsD,YAAY,EAAE;QAAEE,GAAG,EAAED;MAAM,CAAC,CAAC,GAAG,IAC9D;IAAC,CACY,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAME,cAAc,GAAGxD,IAAI,CAACQ,MAAM,CAAC;AACnCgD,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIhD,MAAM","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["useTranslation","Button","CloseIcon","cloneElement","memo","useState","useEffect","useRef","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Dialog as MuiDialog,\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Buttons/index.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  cloneElement,\n  memo,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: () => void;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  return (\n    <MuiDialog\n      data-se={testId}\n      open={isOpen}\n      onClose={onClose}\n      aria-labelledby={dialogLabelId}\n    >\n      <DialogTitle\n        id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n        translate={translate}\n      >\n        <span id={dialogLabelId}>{title}</span>\n        <Button\n          ariaLabel={t(\"close.text\")}\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent\n        {...(isContentScrollable && {\n          // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        dividers={isContentScrollable}\n        ref={dialogContentRef}\n      >\n        {content}\n      </DialogContent>\n\n      {actionButtons.length > 0 && (\n        <DialogActions>\n          {actionButtons.map((actionButton, index) =>\n            actionButton ? cloneElement(actionButton, { key: index }) : null,\n          )}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Select.js

@@ -195,7 +195,8 @@ const Select = ({
         return {
           text: option.text,
           value,
-          type: option.type === "heading" ? "heading" : "option"
+          type: option.type === "heading" ? "heading" : "option",
+          lang: option.language
         };
       }
       return {
@@ -256,6 +257,7 @@ const Select = ({
       "data-empty": !option.text,
       value: option.value,
       selected: isSelected,
+      lang: option.lang,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
         checked: isSelected
       }), option.text, !hasMultipleChoices && internalSelectedValues === option.value && _jsx(_ListItemSecondaryAction, {