@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/esm/ui-shell/renderUiShell.js

@@ -0,0 +1,126 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ErrorBoundary } from "react-error-boundary";
+import { bufferLatest } from "../tools/bufferLatest.js";
+import { createMessageBus } from "../tools/createMessageBus.js";
+import { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
+import { UiShell } from "./UiShell.js";
+import { uiShellDataAttribute } from "./useHasUiShell.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const optionalComponentSlotNames = {
+  banners: "banners",
+  rightSideMenu: "right-side-menu",
+  sideNavFooter: "side-nav-footer",
+  topNavLeftSide: "top-nav-left-side",
+  topNavRightSide: "top-nav-right-side"
+};
+export const renderUiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appElement: providedAppElement,
+  appElementScrollingMode,
+  breakpointConfig,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  onRender,
+  parentElement,
+  sideNavBackgroundColor,
+  sideNavBackgroundContrastColor,
+  topNavBackgroundColor,
+  nonce = window.cspNonce
+}) => {
+  const appElement = providedAppElement || document.createElement("div");
+  parentElement.setAttribute(uiShellDataAttribute, "");
+  const {
+    publish: publishPropChanges,
+    subscribe: subscribeToPropChanges
+  } = createMessageBus();
+  const {
+    publish: publishSubscriptionCreated,
+    subscribe: subscribeToReactAppSubscribed
+  } = createMessageBus();
+  const publishAfterReactAppReadyForProps = bufferLatest({
+    publish: publishPropChanges,
+    subscribe: subscribeToReactAppSubscribed
+  });
+  const {
+    publish: closeRightSideMenu,
+    subscribe: subscribeToCloseRightSideMenu
+  } = createMessageBus();
+  const {
+    publish: closeSideNavMenu,
+    subscribe: subscribeToCloseSideNavMenu
+  } = createMessageBus();
+  const slottedElements = Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => {
+    const element = document.createElement("div");
+    element.setAttribute("slot", slotName);
+    return [optionalComponentKey, element];
+  }));
+  const webComponentChildren = Object.values(slottedElements);
+  const uiShellElement = renderReactInWebComponent({
+    getReactComponent: reactRootElements => _jsx(ErrorBoundary, {
+      fallback: _jsx("div", {
+        "data-error": true
+      }),
+      onError: onError,
+      children: _jsx(UiShell, {
+        appBackgroundColor: appBackgroundColor,
+        appBackgroundContrastMode: appBackgroundContrastMode,
+        appElement: appElement,
+        appElementScrollingMode: appElementScrollingMode,
+        breakpointConfig: breakpointConfig,
+        closeSideNavMenu: closeSideNavMenu,
+        hasStandardAppContentPadding: hasStandardAppContentPadding,
+        initialVisibleSections: initialVisibleSections,
+        onError: onError,
+        onSubscriptionCreated: publishSubscriptionCreated,
+        optionalComponents: Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => [optionalComponentKey, _jsx("slot", {
+          name: slotName
+        })])),
+        sideNavBackgroundColor: sideNavBackgroundColor,
+        sideNavBackgroundContrastColor: sideNavBackgroundContrastColor,
+        subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+        subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
+        subscribeToPropChanges: subscribeToPropChanges,
+        topNavBackgroundColor: topNavBackgroundColor,
+        uiShellAppElement: reactRootElements.appRootElement,
+        uiShellStylesElement: reactRootElements.stylesRootElement
+      })
+    }),
+    webComponentChildren,
+    webComponentParentElement: parentElement,
+    nonce
+  });
+  const unsubscribeFromUnifiedUiShellRendered = subscribeToReactAppSubscribed(() => {
+    unsubscribeFromUnifiedUiShellRendered();
+    onRender?.({
+      appElement,
+      closeRightSideMenu,
+      closeSideNavMenu,
+      setComponentProps: publishAfterReactAppReadyForProps,
+      slottedElements,
+      uiShellElement
+    });
+  });
+  parentElement.appendChild(appElement);
+  return {
+    appElement,
+    closeRightSideMenu,
+    closeSideNavMenu,
+    setComponentProps: publishAfterReactAppReadyForProps,
+    slottedElements,
+    uiShellElement
+  };
+};
+//# sourceMappingURL=renderUiShell.js.map

package/dist/esm/ui-shell/renderUiShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","renderReactInWebComponent","UiShell","uiShellDataAttribute","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onRender","parentElement","sideNavBackgroundColor","sideNavBackgroundContrastColor","topNavBackgroundColor","nonce","window","cspNonce","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","unsubscribeFromUnifiedUiShellRendered","setComponentProps","appendChild"],"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 \"../tools/bufferLatest.js\";\nimport { createMessageBus, PublishMessage } from \"../tools/createMessageBus.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.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\nexport type SlottedElements = Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  HTMLDivElement\n>;\n\nexport type RenderedUiShell = {\n  closeRightSideMenu: PublishMessage<void>;\n  closeSideNavMenu: PublishMessage<void>;\n  setComponentProps: ReturnType<\n    typeof bufferLatest<SetStateAction<UiShellNavComponentProps>>\n  >;\n  slottedElements: SlottedElements;\n  uiShellElement: ReturnType<typeof renderReactInWebComponent>;\n} & Partial<Pick<UiShellProps, \"appElement\">>;\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  onRender,\n  parentElement,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  topNavBackgroundColor,\n  nonce = window.cspNonce,\n}: {\n  /**\n   * Optional nonce for CSP compliance.\n   */\n  nonce?: string;\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   * Notify once when React has rendered UI Shell the first time.\n   */\n  onRender?: (renderedUiShell: RenderedUiShell) => 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  | \"sideNavBackgroundContrastColor\"\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 SlottedElements;\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          breakpointConfig={breakpointConfig}\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          sideNavBackgroundContrastColor={sideNavBackgroundContrastColor}\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    webComponentChildren,\n    webComponentParentElement: parentElement,\n    nonce,\n  });\n\n  const unsubscribeFromUnifiedUiShellRendered = subscribeToReactAppSubscribed(\n    () => {\n      unsubscribeFromUnifiedUiShellRendered();\n\n      onRender?.({\n        appElement,\n        closeRightSideMenu,\n        closeSideNavMenu,\n        setComponentProps: publishAfterReactAppReadyForProps,\n        slottedElements,\n        uiShellElement,\n      });\n    },\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/esm/ui-shell/uiShellContentTypes.js

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

package/dist/esm/ui-shell/uiShellContentTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellContentTypes.js","names":["subComponentNames","TURN_OFF_APP_SWITCHER","Symbol"],"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 const TURN_OFF_APP_SWITCHER = Symbol(\n  \"Turn off AppSwitcher in the event of an error.\",\n);\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   *\n   * In this special case, a value of `TURN_OFF_APP_SWITCHER` tells the `appSwitcher` to not appear. This can occur if there's an error loading the items. In that case, we don't want it to appear.\n   */\n  appSwitcherProps?: AppSwitcherProps | typeof TURN_OFF_APP_SWITCHER;\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   * Says if `sideNavProps` has been passed in. This is important for rendering as we will override `sideNavProps` internally, but we need to know if they were passed in for showing the loading state.\n   */\n  hasSideNavProps: boolean;\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;;AASA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU;AAG9E,OAAO,MAAMC,qBAAqB,GAAGC,MAAM,CACzC,gDACF,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/uiShellSharedConstants.js

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

package/dist/esm/ui-shell/uiShellSharedConstants.js.map

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

package/dist/esm/ui-shell/useElementAtContainerEdge.js

@@ -0,0 +1,68 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getLogicalBoundaries } from "../getLogicalBoundaries.js";
+const defaultEdgeState = {
+  isAtContainerInlineStart: null,
+  isAtContainerInlineEnd: null,
+  isAtContainerBlockStart: null,
+  isAtContainerBlockEnd: null
+};
+export function useElementAtContainerEdge({
+  containerElement,
+  element,
+  monitoringElement
+}) {
+  const [edgeState, setEdgeState] = useState(defaultEdgeState);
+  const requestedAnimationFrameIdRef = useRef(0);
+  const resolvedMonitoringElement = monitoringElement ?? element?.parentElement;
+  const updateEdgeState = useCallback(() => {
+    cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      if (element) {
+        const elementBoundaries = getLogicalBoundaries(element);
+        const containerBoundaries = getLogicalBoundaries(containerElement ?? document.body);
+        setEdgeState({
+          isAtContainerInlineStart: elementBoundaries.left === containerBoundaries.left,
+          isAtContainerInlineEnd: elementBoundaries.right === containerBoundaries.right,
+          isAtContainerBlockStart: elementBoundaries.top === containerBoundaries.top,
+          isAtContainerBlockEnd: elementBoundaries.bottom === containerBoundaries.bottom
+        });
+      } else {
+        setEdgeState(defaultEdgeState);
+      }
+    });
+  }, [containerElement, element]);
+  useEffect(() => {
+    const mutationObserver = new MutationObserver(() => {
+      updateEdgeState();
+    });
+    if (resolvedMonitoringElement) {
+      mutationObserver.observe(resolvedMonitoringElement, {
+        attributes: true,
+        attributeFilter: ["style"],
+        childList: true,
+        subtree: true
+      });
+    }
+    window.addEventListener("resize", updateEdgeState);
+    updateEdgeState();
+    return () => {
+      cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+      mutationObserver.disconnect();
+      window.removeEventListener("resize", updateEdgeState);
+    };
+  }, [resolvedMonitoringElement, updateEdgeState]);
+  return edgeState;
+}
+//# sourceMappingURL=useElementAtContainerEdge.js.map

package/dist/esm/ui-shell/useElementAtContainerEdge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementAtContainerEdge.js","names":["useCallback","useEffect","useRef","useState","getLogicalBoundaries","defaultEdgeState","isAtContainerInlineStart","isAtContainerInlineEnd","isAtContainerBlockStart","isAtContainerBlockEnd","useElementAtContainerEdge","containerElement","element","monitoringElement","edgeState","setEdgeState","requestedAnimationFrameIdRef","resolvedMonitoringElement","parentElement","updateEdgeState","cancelAnimationFrame","current","requestAnimationFrame","elementBoundaries","containerBoundaries","document","body","left","right","top","bottom","mutationObserver","MutationObserver","observe","attributes","attributeFilter","childList","subtree","window","addEventListener","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useElementAtContainerEdge.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 { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { getLogicalBoundaries } from \"../getLogicalBoundaries.js\";\n\nconst defaultEdgeState = {\n  isAtContainerInlineStart: null,\n  isAtContainerInlineEnd: null,\n  isAtContainerBlockStart: null,\n  isAtContainerBlockEnd: null,\n};\n\ntype EdgeState =\n  | {\n      isAtContainerBlockEnd: null;\n      isAtContainerBlockStart: null;\n      isAtContainerInlineEnd: null;\n      isAtContainerInlineStart: null;\n    }\n  | {\n      isAtContainerBlockEnd: boolean;\n      isAtContainerBlockStart: boolean;\n      isAtContainerInlineEnd: boolean;\n      isAtContainerInlineStart: boolean;\n    };\n\n/**\n * Determines if an element is at the edge of its container.\n *\n * If `element` is `null`, all returned edge state values will be `null`.\n */\nexport function useElementAtContainerEdge({\n  containerElement,\n  element,\n  monitoringElement,\n}: {\n  /**\n   * The container element against which the edges are checked. If not provided, it defaults to the document body.\n   */\n  containerElement?: HTMLElement | null;\n  /**\n   * The element whose edges you want to track.\n   */\n  element?: HTMLElement | null;\n  /**\n   * The element whose mutations you want to track. If not provided, it defaults to the parent element of the `element`.\n   */\n  monitoringElement?: HTMLElement | null;\n}) {\n  const [edgeState, setEdgeState] = useState<EdgeState>(defaultEdgeState);\n\n  const requestedAnimationFrameIdRef = useRef(0);\n\n  const resolvedMonitoringElement = monitoringElement ?? element?.parentElement;\n\n  // will check the position of the element and update state accordingly\n  const updateEdgeState = useCallback(() => {\n    cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n\n    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {\n      if (element) {\n        const elementBoundaries = getLogicalBoundaries(element);\n        const containerBoundaries = getLogicalBoundaries(\n          containerElement ?? document.body,\n        );\n\n        setEdgeState({\n          isAtContainerInlineStart:\n            elementBoundaries.left === containerBoundaries.left,\n          isAtContainerInlineEnd:\n            elementBoundaries.right === containerBoundaries.right,\n          isAtContainerBlockStart:\n            elementBoundaries.top === containerBoundaries.top,\n          isAtContainerBlockEnd:\n            elementBoundaries.bottom === containerBoundaries.bottom,\n        });\n      } else {\n        setEdgeState(defaultEdgeState);\n      }\n    });\n  }, [containerElement, element]);\n\n  useEffect(() => {\n    // Listen for mutations that might affect position\n    const mutationObserver = new MutationObserver(() => {\n      updateEdgeState();\n    });\n\n    if (resolvedMonitoringElement) {\n      mutationObserver.observe(resolvedMonitoringElement, {\n        attributes: true,\n        attributeFilter: [\"style\"],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    // Listen for window resize, which can affect position\n    window.addEventListener(\"resize\", updateEdgeState);\n\n    // Initial check\n    updateEdgeState();\n\n    // cleanup function to remove listeners and observer\n    return () => {\n      cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n      mutationObserver.disconnect();\n      window.removeEventListener(\"resize\", updateEdgeState);\n    };\n  }, [resolvedMonitoringElement, updateEdgeState]);\n\n  return edgeState;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEhE,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE,MAAMC,gBAAgB,GAAG;EACvBC,wBAAwB,EAAE,IAAI;EAC9BC,sBAAsB,EAAE,IAAI;EAC5BC,uBAAuB,EAAE,IAAI;EAC7BC,qBAAqB,EAAE;AACzB,CAAC;AAqBD,OAAO,SAASC,yBAAyBA,CAAC;EACxCC,gBAAgB;EAChBC,OAAO;EACPC;AAcF,CAAC,EAAE;EACD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAYE,gBAAgB,CAAC;EAEvE,MAAMW,4BAA4B,GAAGd,MAAM,CAAC,CAAC,CAAC;EAE9C,MAAMe,yBAAyB,GAAGJ,iBAAiB,IAAID,OAAO,EAAEM,aAAa;EAG7E,MAAMC,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACxCoB,oBAAoB,CAACJ,4BAA4B,CAACK,OAAO,CAAC;IAE1DL,4BAA4B,CAACK,OAAO,GAAGC,qBAAqB,CAAC,MAAM;MACjE,IAAIV,OAAO,EAAE;QACX,MAAMW,iBAAiB,GAAGnB,oBAAoB,CAACQ,OAAO,CAAC;QACvD,MAAMY,mBAAmB,GAAGpB,oBAAoB,CAC9CO,gBAAgB,IAAIc,QAAQ,CAACC,IAC/B,CAAC;QAEDX,YAAY,CAAC;UACXT,wBAAwB,EACtBiB,iBAAiB,CAACI,IAAI,KAAKH,mBAAmB,CAACG,IAAI;UACrDpB,sBAAsB,EACpBgB,iBAAiB,CAACK,KAAK,KAAKJ,mBAAmB,CAACI,KAAK;UACvDpB,uBAAuB,EACrBe,iBAAiB,CAACM,GAAG,KAAKL,mBAAmB,CAACK,GAAG;UACnDpB,qBAAqB,EACnBc,iBAAiB,CAACO,MAAM,KAAKN,mBAAmB,CAACM;QACrD,CAAC,CAAC;MACJ,CAAC,MAAM;QACLf,YAAY,CAACV,gBAAgB,CAAC;MAChC;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACM,gBAAgB,EAAEC,OAAO,CAAC,CAAC;EAE/BX,SAAS,CAAC,MAAM;IAEd,MAAM8B,gBAAgB,GAAG,IAAIC,gBAAgB,CAAC,MAAM;MAClDb,eAAe,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,IAAIF,yBAAyB,EAAE;MAC7Bc,gBAAgB,CAACE,OAAO,CAAChB,yBAAyB,EAAE;QAClDiB,UAAU,EAAE,IAAI;QAChBC,eAAe,EAAE,CAAC,OAAO,CAAC;QAC1BC,SAAS,EAAE,IAAI;QACfC,OAAO,EAAE;MACX,CAAC,CAAC;IACJ;IAGAC,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEpB,eAAe,CAAC;IAGlDA,eAAe,CAAC,CAAC;IAGjB,OAAO,MAAM;MACXC,oBAAoB,CAACJ,4BAA4B,CAACK,OAAO,CAAC;MAC1DU,gBAAgB,CAACS,UAAU,CAAC,CAAC;MAC7BF,MAAM,CAACG,mBAAmB,CAAC,QAAQ,EAAEtB,eAAe,CAAC;IACvD,CAAC;EACH,CAAC,EAAE,CAACF,yBAAyB,EAAEE,eAAe,CAAC,CAAC;EAEhD,OAAOL,SAAS;AAClB","ignoreList":[]}

package/dist/esm/ui-shell/useHasUiShell.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+export const uiShellDataAttribute = "data-unified-ui-shell";
+export const useHasUiShell = () => {
+  const [hasUiShell, setHasUiShell] = useState(false);
+  useEffect(() => {
+    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));
+  }, []);
+  return hasUiShell;
+};
+//# sourceMappingURL=useHasUiShell.js.map

package/dist/esm/ui-shell/useHasUiShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHasUiShell.js","names":["useEffect","useState","uiShellDataAttribute","useHasUiShell","hasUiShell","setHasUiShell","Boolean","document","querySelector"],"sources":["../../../src/ui-shell/useHasUiShell.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, useState } from \"react\";\n\nexport const uiShellDataAttribute = \"data-unified-ui-shell\";\n\nexport const useHasUiShell = () => {\n  const [hasUiShell, setHasUiShell] = useState(false);\n\n  useEffect(() => {\n    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));\n  }, []);\n\n  return hasUiShell;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,oBAAoB,GAAG,uBAAuB;AAE3D,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACdK,aAAa,CAACC,OAAO,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAIN,oBAAoB,GAAG,CAAC,CAAC,CAAC;EAC7E,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOE,UAAU;AACnB,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js

@@ -0,0 +1,100 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useMemo, useRef } from "react";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+export const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
+export 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`);
+  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
+    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
+  });
+};
+export const useMatchAppElementToUiShellAppArea = ({
+  appElement,
+  appElementScrollingMode,
+  paddingMode,
+  uiShellAppAreaRef,
+  uiShellResizableRefs
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const parentContainerRef = useRef(null);
+  const appContainerElementStyles = useMemo(() => ({
+    boxSizing: "border-box",
+    zIndex: 1,
+    ...(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]);
+  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, uiShellResizableRefs]);
+  return {
+    parentContainerRef
+  };
+};
+//# sourceMappingURL=useMatchAppElementToUiShellAppArea.js.map

package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","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","parentContainerRef","appContainerElementStyles","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","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  }, [\n    appElement,\n    appContainerElementStyles,\n    uiShellAppAreaRef,\n    uiShellResizableRefs,\n  ]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE5E,SAASC,sBAAsB,QAAQ,kCAAkC;AAGzE,OAAO,MAAMC,2BAA2B,GAAIC,MAAc,IACxDA,MAAM,CAACC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAACC,WAAW,CAAC,CAAC;AAEjD,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,gBAAgB;EAChBC,mBAAmB;EACnBC,0BAA0B;EAC1BC;AAMF,CAAC,KAAK;EACJ,MAAMC,4BAA4B,GAChCF,0BAA0B,CAACG,qBAAqB,CAAC,CAAC;EACpD,MAAMC,sBAAsB,GAAGH,aAAa,CAACE,qBAAqB,CAAC,CAAC;EAEpEJ,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC;EAC7DP,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,KAAK,EACL,GAAGJ,4BAA4B,CAACK,GAAG,GAAGH,sBAAsB,CAACG,GAAG,IAClE,CAAC;EACDR,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,MAAM,EACN,GAAGJ,4BAA4B,CAACM,IAAI,GAAGJ,sBAAsB,CAACI,IAAI,IACpE,CAAC;EACDT,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,OAAO,EACP,GAAGJ,4BAA4B,CAACO,KAAK,IACvC,CAAC;EACDV,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,QAAQ,EACR,GAAGJ,4BAA4B,CAACQ,MAAM,IACxC,CAAC;EAGCC,MAAM,CAACC,OAAO,CAACd,gBAAgB,CAAC,CAMhCe,OAAO,CAAC,CAAC,CAACC,eAAe,EAAEC,gBAAgB,CAAC,KAAK;IACjDhB,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnCb,2BAA2B,CAACqB,eAAe,CAAC,EAC5CE,MAAM,CAACD,gBAAgB,CACzB,CAAC;EACH,CAAC,CAAC;AACJ,CAAC;AAiBD,OAAO,MAAME,kCAAkC,GAAGA,CAAC;EACjDC,UAAU;EACVC,uBAAuB;EACvBC,WAAW;EACXC,iBAAiB;EACjBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAG/B,sBAAsB,CAAC,CAAC;EAEpD,MAAMgC,kBAAkB,GAAGjC,MAAM,CAAiB,IAAI,CAAC;EAEvD,MAAMkC,yBAAyB,GAAGnC,OAAO,CACvC,OAAO;IACLoC,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAE,CAAC;IACT,IAAIP,WAAW,KAAK,aAAa,GAC7B;MACEQ,YAAY,EAAEL,mBAAmB,CAACM,QAAQ;MAC1CC,aAAa,EAAEP,mBAAmB,CAACQ;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IAEP,IAAIX,WAAW,KAAK,SAAS,GACzB;MACEQ,YAAY,EAAEL,mBAAmB,CAACM,QAAQ;MAC1CC,aAAa,EAAEP,mBAAmB,CAACM;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IAEP,IAAIV,uBAAuB,KAAK,YAAY,IAC5CA,uBAAuB,KAAK,MAAM,GAC9B;MACEa,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC,CAAC;IAEN,IAAIb,uBAAuB,KAAK,UAAU,IAC1CA,uBAAuB,KAAK,MAAM,GAC9B;MACEc,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC;EACP,CAAC,CAAC,EACF,CAACd,uBAAuB,EAAEC,WAAW,EAAEG,mBAAmB,CAC5D,CAAC;EAEDlC,SAAS,CAAC,MAAM;IAEd,IAAIgC,iBAAiB,CAACa,OAAO,IAAIhB,UAAU,IAAIM,kBAAkB,CAACU,OAAO,EAAE;MACzE,IAAIC,gBAAwB;MAE5B,MAAMC,YAAY,GAAGA,CAAA,KAAM;QACzBC,oBAAoB,CAACF,gBAAgB,CAAC;QAEtCA,gBAAgB,GAAGG,qBAAqB,CAAC,MAAM;UAC7C,IAAIjB,iBAAiB,CAACa,OAAO,IAAIV,kBAAkB,CAACU,OAAO,EAAE;YAC3DrC,uBAAuB,CAAC;cACtBC,gBAAgB,EAAE2B,yBAAyB;cAC3CzB,0BAA0B,EAAEqB,iBAAiB,CAACa,OAAO;cACrDnC,mBAAmB,EAAEmB,UAAU;cAC/BjB,aAAa,EAAEuB,kBAAkB,CAACU;YACpC,CAAC,CAAC;UACJ;QACF,CAAC,CAAC;MACJ,CAAC;MAGD,MAAMK,gBAAgB,GAAGjB,oBAAoB,CAC1CkB,GAAG,CAAEC,WAAW,IAAKA,WAAW,CAACP,OAAO,CAAC,CACzCQ,MAAM,CAAEC,OAAO,IACdC,OAAO,CAACD,OAAO,CACjB,CAAC;MAGH,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAACV,YAAY,CAAC;MAIjDG,gBAAgB,CAAC1B,OAAO,CAAEkC,eAAe,IAAK;QAC5CA,eAAe,CAACC,gBAAgB,CAAC,eAAe,EAAEZ,YAAY,CAAC;QAE/DS,QAAQ,CAACI,OAAO,CAACF,eAAe,CAAC;MACnC,CAAC,CAAC;MAGFX,YAAY,CAAC,CAAC;MAEd,OAAO,MAAM;QACXS,QAAQ,CAACK,UAAU,CAAC,CAAC;QAErBX,gBAAgB,CAAC1B,OAAO,CAAEkC,eAAe,IAAK;UAC5CA,eAAe,CAACI,mBAAmB,CAAC,eAAe,EAAEf,YAAY,CAAC;QACpE,CAAC,CAAC;MACJ,CAAC;IACH;IACA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CACDlB,UAAU,EACVO,yBAAyB,EACzBJ,iBAAiB,EACjBC,oBAAoB,CACrB,CAAC;EAEF,OAAO;IACLE;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/useScrollState.js

@@ -0,0 +1,87 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+export const getIsScrollHeightElement = ({
+  containerElement,
+  element
+}) => {
+  const containerElementHeight = containerElement.getBoundingClientRect().height;
+  const elementHeight = element.getBoundingClientRect().height;
+  return elementHeight - containerElementHeight >= 0;
+};
+export const getIsYAxisScrollContainer = element => {
+  const overflowY = window.getComputedStyle(element).overflowY;
+  return overflowY === "auto" || overflowY === "scroll";
+};
+export const getIsYAxisScrolling = element => element.scrollHeight > element.clientHeight ? getIsYAxisScrollContainer(element) : false;
+export const getNestedScrollContainers = containerElement => Array.from(containerElement.querySelectorAll("*")).filter(element => getIsScrollHeightElement({
+  containerElement,
+  element
+})).filter(scrollHeightElement => getIsYAxisScrollContainer(scrollHeightElement));
+export const fakeDefaultContainerElement = typeof window === "undefined" ? null : document.createElement("div");
+export const useScrollState = containerElement => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const requestedAnimationFrameIdRef = useRef(0);
+  const scrollableElementsRef = useRef([]);
+  const updateScrollState = useCallback(() => {
+    cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      setIsScrolled(scrollableElementsRef.current.reduce((isScrolled, scrollableElement) => isScrolled || scrollableElement.scrollTop > 0, false));
+    });
+  }, []);
+  const addScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
+      scrollableElement.addEventListener("scroll", updateScrollState);
+    });
+  }, [updateScrollState]);
+  const removeScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
+      scrollableElement.removeEventListener("scroll", updateScrollState);
+    });
+  }, [updateScrollState]);
+  const updateScrollableElements = useCallback(() => {
+    const computedContainerElement = containerElement || fakeDefaultContainerElement;
+    if (computedContainerElement) {
+      scrollableElementsRef.current = getNestedScrollContainers(computedContainerElement).concat(computedContainerElement);
+    }
+  }, [containerElement]);
+  const updateScrollListeners = useCallback(() => {
+    removeScrollEventListeners();
+    updateScrollableElements();
+    addScrollEventListeners();
+    updateScrollState();
+  }, [addScrollEventListeners, removeScrollEventListeners, updateScrollableElements, updateScrollState]);
+  useEffect(() => {
+    const mutationObserver = new MutationObserver(() => {
+      updateScrollListeners();
+    });
+    if (containerElement) {
+      mutationObserver.observe(containerElement, {
+        attributes: true,
+        attributeFilter: ["style"],
+        childList: true,
+        subtree: true
+      });
+    }
+    updateScrollListeners();
+    return () => {
+      cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+      removeScrollEventListeners();
+      mutationObserver.disconnect();
+    };
+  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);
+  return {
+    isContentScrolled: isScrolled
+  };
+};
+//# sourceMappingURL=useScrollState.js.map

package/dist/esm/ui-shell/useScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollState.js","names":["useCallback","useEffect","useRef","useState","getIsScrollHeightElement","containerElement","element","containerElementHeight","getBoundingClientRect","height","elementHeight","getIsYAxisScrollContainer","overflowY","window","getComputedStyle","getIsYAxisScrolling","scrollHeight","clientHeight","getNestedScrollContainers","Array","from","querySelectorAll","filter","scrollHeightElement","fakeDefaultContainerElement","document","createElement","useScrollState","isScrolled","setIsScrolled","requestedAnimationFrameIdRef","scrollableElementsRef","updateScrollState","cancelAnimationFrame","current","requestAnimationFrame","reduce","scrollableElement","scrollTop","addScrollEventListeners","forEach","addEventListener","removeScrollEventListeners","removeEventListener","updateScrollableElements","computedContainerElement","concat","updateScrollListeners","mutationObserver","MutationObserver","observe","attributes","attributeFilter","childList","subtree","disconnect","isContentScrolled"],"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 { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport const getIsScrollHeightElement = ({\n  containerElement,\n  element,\n}: {\n  containerElement: HTMLElement;\n  element: HTMLElement;\n}) => {\n  const containerElementHeight =\n    containerElement.getBoundingClientRect().height;\n  const elementHeight = element.getBoundingClientRect().height;\n\n  return elementHeight - containerElementHeight >= 0;\n};\n\nexport const getIsYAxisScrollContainer = (element: HTMLElement) => {\n  const overflowY = window.getComputedStyle(element).overflowY;\n\n  return overflowY === \"auto\" || overflowY === \"scroll\";\n};\n\nexport const getIsYAxisScrolling = (element: HTMLElement) =>\n  element.scrollHeight > element.clientHeight\n    ? getIsYAxisScrollContainer(element)\n    : false;\n\nexport const getNestedScrollContainers = (containerElement: HTMLElement) =>\n  Array.from(containerElement.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) =>\n      getIsScrollHeightElement({\n        containerElement,\n        element,\n      }),\n    )\n    .filter((scrollHeightElement) =>\n      getIsYAxisScrollContainer(scrollHeightElement),\n    );\n\nexport const fakeDefaultContainerElement =\n  typeof window === \"undefined\" ? null : document.createElement(\"div\");\n\nexport const useScrollState = <\n  ContainerElement extends HTMLElement = HTMLDivElement,\n>(\n  /**\n   * The element containing a scroll area.\n   */\n  containerElement: ContainerElement | null,\n) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n\n  const requestedAnimationFrameIdRef = useRef(0);\n  const scrollableElementsRef = useRef<HTMLElement[]>([]);\n\n  const updateScrollState = useCallback(() => {\n    cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n\n    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {\n      setIsScrolled(\n        scrollableElementsRef.current.reduce(\n          (isScrolled, scrollableElement) =>\n            isScrolled || scrollableElement.scrollTop > 0,\n          false,\n        ),\n      );\n    });\n  }, []);\n\n  const addScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const removeScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const updateScrollableElements = useCallback(() => {\n    const computedContainerElement =\n      containerElement || fakeDefaultContainerElement;\n\n    if (computedContainerElement) {\n      scrollableElementsRef.current = getNestedScrollContainers(\n        computedContainerElement,\n      ).concat(computedContainerElement);\n    }\n  }, [containerElement]);\n\n  const updateScrollListeners = useCallback(() => {\n    removeScrollEventListeners();\n    updateScrollableElements();\n    addScrollEventListeners();\n    updateScrollState();\n  }, [\n    addScrollEventListeners,\n    removeScrollEventListeners,\n    updateScrollableElements,\n    updateScrollState,\n  ]);\n\n  useEffect(() => {\n    const mutationObserver = new MutationObserver(() => {\n      updateScrollListeners();\n    });\n\n    if (containerElement) {\n      mutationObserver.observe(containerElement, {\n        attributes: true,\n        attributeFilter: [\"style\"],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    updateScrollListeners();\n\n    return () => {\n      cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n      removeScrollEventListeners();\n      mutationObserver.disconnect();\n    };\n  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);\n\n  return {\n    isContentScrolled: isScrolled,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/useUiShellBreakpoints.js

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMediaQuery } from "../theme/useMediaQuery.js";
+export const defaultUiShellBreakpointConfig = {
+  narrow: 0,
+  medium: 600,
+  wide: 800
+};
+export const adminAppUiShellBreakpoints = {
+  narrow: 0,
+  medium: 600,
+  wide: 1304
+};
+export const useUiShellBreakpoints = (breakpointConfig = defaultUiShellBreakpointConfig) => {
+  const isNarrowView = useMediaQuery(`(min-width: ${breakpointConfig.narrow}px)`);
+  const isMediumView = useMediaQuery(`(min-width: ${breakpointConfig.medium}px)`);
+  const isWideView = useMediaQuery(`(min-width: ${breakpointConfig.wide}px)`);
+  if (isWideView) {
+    return "wide";
+  }
+  if (isMediumView) {
+    return "medium";
+  }
+  if (isNarrowView) {
+    return "narrow";
+  }
+  return "none";
+};
+//# sourceMappingURL=useUiShellBreakpoints.js.map

package/dist/esm/ui-shell/useUiShellBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUiShellBreakpoints.js","names":["useMediaQuery","defaultUiShellBreakpointConfig","narrow","medium","wide","adminAppUiShellBreakpoints","useUiShellBreakpoints","breakpointConfig","isNarrowView","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  medium: number;\n  narrow: 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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,2BAA2B;AAQzD,OAAO,MAAMC,8BAA8B,GAAG;EAC5CC,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAA4C;AAE5C,OAAO,MAAMC,0BAA0B,GAAG;EACxCH,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAA4C;AAE5C,OAAO,MAAME,qBAAqB,GAAGA,CACnCC,gBAAyC,GAAGN,8BAA8B,KAC/B;EAC3C,MAAMO,YAAY,GAAGR,aAAa,CAChC,eAAeO,gBAAgB,CAACL,MAAM,KACxC,CAAC;EAED,MAAMO,YAAY,GAAGT,aAAa,CAChC,eAAeO,gBAAgB,CAACJ,MAAM,KACxC,CAAC;EAED,MAAMO,UAAU,GAAGV,aAAa,CAAC,eAAeO,gBAAgB,CAACH,IAAI,KAAK,CAAC;EAE3E,IAAIM,UAAU,EAAE;IACd,OAAO,MAAM;EACf;EAEA,IAAID,YAAY,EAAE;IAChB,OAAO,QAAQ;EACjB;EAEA,IAAID,YAAY,EAAE;IAChB,OAAO,QAAQ;EACjB;EAGA,OAAO,MAAM;AACf,CAAC","ignoreList":[]}