@okta/odyssey-react-mui 1.41.1 → 1.42.0

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","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onRender","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","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 \"./bufferLatest.js\";\nimport { createMessageBus, PublishMessage } 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\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  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   * 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  | \"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          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    webComponentChildren,\n    webComponentParentElement: parentElement,\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":[]}
+{"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","onRender","parentElement","sideNavBackgroundColor","sideNavBackgroundContrastColor","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","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 \"./bufferLatest.js\";\nimport { createMessageBus, PublishMessage } 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\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}: {\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          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          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  });\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/cjs/ui-shell/useElementAtContainerEdge.cjs

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useElementAtContainerEdge = useElementAtContainerEdge;
+var _react = require("react");
+var _getLogicalBoundaries = require("../getLogicalBoundaries.cjs");
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const defaultEdgeState = {
+  isAtContainerInlineStart: null,
+  isAtContainerInlineEnd: null,
+  isAtContainerBlockStart: null,
+  isAtContainerBlockEnd: null
+};
+function useElementAtContainerEdge({
+  containerElement,
+  element,
+  monitoringElement
+}) {
+  const [edgeState, setEdgeState] = (0, _react.useState)(defaultEdgeState);
+  const requestedAnimationFrameIdRef = (0, _react.useRef)(0);
+  const resolvedMonitoringElement = monitoringElement ?? element?.parentElement;
+  const updateEdgeState = (0, _react.useCallback)(() => {
+    cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      if (element) {
+        const elementBoundaries = (0, _getLogicalBoundaries.getLogicalBoundaries)(element);
+        const containerBoundaries = (0, _getLogicalBoundaries.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]);
+  (0, _react.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.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElementAtContainerEdge.cjs","names":["_react","require","_getLogicalBoundaries","defaultEdgeState","isAtContainerInlineStart","isAtContainerInlineEnd","isAtContainerBlockStart","isAtContainerBlockEnd","useElementAtContainerEdge","containerElement","element","monitoringElement","edgeState","setEdgeState","useState","requestedAnimationFrameIdRef","useRef","resolvedMonitoringElement","parentElement","updateEdgeState","useCallback","cancelAnimationFrame","current","requestAnimationFrame","elementBoundaries","getLogicalBoundaries","containerBoundaries","document","body","left","right","top","bottom","useEffect","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 { useEffect, useState, useRef, useCallback } from \"react\";\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      isAtContainerInlineStart: null;\n      isAtContainerInlineEnd: null;\n      isAtContainerBlockStart: null;\n      isAtContainerBlockEnd: null;\n    }\n  | {\n      isAtContainerInlineStart: boolean;\n      isAtContainerInlineEnd: boolean;\n      isAtContainerBlockStart: boolean;\n      isAtContainerBlockEnd: 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":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AAbA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,MAAME,gBAAgB,GAAG;EACvBC,wBAAwB,EAAE,IAAI;EAC9BC,sBAAsB,EAAE,IAAI;EAC5BC,uBAAuB,EAAE,IAAI;EAC7BC,qBAAqB,EAAE;AACzB,CAAC;AAqBM,SAASC,yBAAyBA,CAAC;EACxCC,gBAAgB;EAChBC,OAAO;EACPC;AAcF,CAAC,EAAE;EACD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAYX,gBAAgB,CAAC;EAEvE,MAAMY,4BAA4B,GAAG,IAAAC,aAAM,EAAC,CAAC,CAAC;EAE9C,MAAMC,yBAAyB,GAAGN,iBAAiB,IAAID,OAAO,EAAEQ,aAAa;EAG7E,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACxCC,oBAAoB,CAACN,4BAA4B,CAACO,OAAO,CAAC;IAE1DP,4BAA4B,CAACO,OAAO,GAAGC,qBAAqB,CAAC,MAAM;MACjE,IAAIb,OAAO,EAAE;QACX,MAAMc,iBAAiB,GAAG,IAAAC,0CAAoB,EAACf,OAAO,CAAC;QACvD,MAAMgB,mBAAmB,GAAG,IAAAD,0CAAoB,EAC9ChB,gBAAgB,IAAIkB,QAAQ,CAACC,IAC/B,CAAC;QAEDf,YAAY,CAAC;UACXT,wBAAwB,EACtBoB,iBAAiB,CAACK,IAAI,KAAKH,mBAAmB,CAACG,IAAI;UACrDxB,sBAAsB,EACpBmB,iBAAiB,CAACM,KAAK,KAAKJ,mBAAmB,CAACI,KAAK;UACvDxB,uBAAuB,EACrBkB,iBAAiB,CAACO,GAAG,KAAKL,mBAAmB,CAACK,GAAG;UACnDxB,qBAAqB,EACnBiB,iBAAiB,CAACQ,MAAM,KAAKN,mBAAmB,CAACM;QACrD,CAAC,CAAC;MACJ,CAAC,MAAM;QACLnB,YAAY,CAACV,gBAAgB,CAAC;MAChC;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACM,gBAAgB,EAAEC,OAAO,CAAC,CAAC;EAE/B,IAAAuB,gBAAS,EAAC,MAAM;IAEd,MAAMC,gBAAgB,GAAG,IAAIC,gBAAgB,CAAC,MAAM;MAClDhB,eAAe,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,IAAIF,yBAAyB,EAAE;MAC7BiB,gBAAgB,CAACE,OAAO,CAACnB,yBAAyB,EAAE;QAClDoB,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,EAAEvB,eAAe,CAAC;IAGlDA,eAAe,CAAC,CAAC;IAGjB,OAAO,MAAM;MACXE,oBAAoB,CAACN,4BAA4B,CAACO,OAAO,CAAC;MAC1DY,gBAAgB,CAACS,UAAU,CAAC,CAAC;MAC7BF,MAAM,CAACG,mBAAmB,CAAC,QAAQ,EAAEzB,eAAe,CAAC;IACvD,CAAC;EACH,CAAC,EAAE,CAACF,yBAAyB,EAAEE,eAAe,CAAC,CAAC;EAEhD,OAAOP,SAAS;AAClB","ignoreList":[]}

package/dist/cjs/useMountLifecycleEffect.cjs

@@ -21,13 +21,13 @@ const useMountLifecycleEffect = ({
   onMount,
   onUpdate
 }) => {
-  const hasSetSessionStorageRef = (0, _react.useRef)(false);
+  const isMounted = (0, _react.useRef)(false);
   const onMountRef = (0, _react.useRef)(onMount);
   (0, _react.useEffect)(() => {
-    if (hasSetSessionStorageRef.current) {
+    if (isMounted.current) {
       onUpdate?.();
     } else {
-      hasSetSessionStorageRef.current = true;
+      isMounted.current = true;
       onMountRef.current?.();
     }
   }, [onUpdate]);

package/dist/cjs/useMountLifecycleEffect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMountLifecycleEffect.cjs","names":["_react","require","useMountLifecycleEffect","onMount","onUpdate","hasSetSessionStorageRef","useRef","onMountRef","useEffect","current","exports"],"sources":["../../src/useMountLifecycleEffect.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 { useEffect, useRef } from \"react\";\n\nexport const useMountLifecycleEffect = ({\n  onMount,\n  onUpdate,\n}: {\n  onMount?: () => void;\n  onUpdate?: () => void;\n}) => {\n  const hasSetSessionStorageRef = useRef(false);\n  const onMountRef = useRef(onMount);\n\n  useEffect(() => {\n    if (hasSetSessionStorageRef.current) {\n      onUpdate?.();\n    } else {\n      hasSetSessionStorageRef.current = true;\n      onMountRef.current?.();\n    }\n  }, [onUpdate]);\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,OAAO;EACPC;AAIF,CAAC,KAAK;EACJ,MAAMC,uBAAuB,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAC7C,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAACH,OAAO,CAAC;EAElC,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAIH,uBAAuB,CAACI,OAAO,EAAE;MACnCL,QAAQ,GAAG,CAAC;IACd,CAAC,MAAM;MACLC,uBAAuB,CAACI,OAAO,GAAG,IAAI;MACtCF,UAAU,CAACE,OAAO,GAAG,CAAC;IACxB;EACF,CAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAChB,CAAC;AAACM,OAAA,CAAAR,uBAAA,GAAAA,uBAAA","ignoreList":[]}
+{"version":3,"file":"useMountLifecycleEffect.cjs","names":["_react","require","useMountLifecycleEffect","onMount","onUpdate","isMounted","useRef","onMountRef","useEffect","current","exports"],"sources":["../../src/useMountLifecycleEffect.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 { useEffect, useRef } from \"react\";\n\nexport const useMountLifecycleEffect = ({\n  onMount,\n  onUpdate,\n}: {\n  onMount?: () => void;\n  onUpdate?: () => void;\n}) => {\n  const isMounted = useRef(false);\n  const onMountRef = useRef(onMount);\n\n  useEffect(() => {\n    if (isMounted.current) {\n      onUpdate?.();\n    } else {\n      isMounted.current = true;\n      onMountRef.current?.();\n    }\n  }, [onUpdate]);\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,OAAO;EACPC;AAIF,CAAC,KAAK;EACJ,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAC/B,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAACH,OAAO,CAAC;EAElC,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAIH,SAAS,CAACI,OAAO,EAAE;MACrBL,QAAQ,GAAG,CAAC;IACd,CAAC,MAAM;MACLC,SAAS,CAACI,OAAO,GAAG,IAAI;MACxBF,UAAU,CAACE,OAAO,GAAG,CAAC;IACxB;EACF,CAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAChB,CAAC;AAACM,OAAA,CAAAR,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/cjs/web-component/odysseyWebComponentVersion.generated.cjs

@@ -15,5 +15,5 @@ exports.default = void 0;
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-var _default = exports.default = "1-41-1";
+var _default = exports.default = "1-42-0";
 //# sourceMappingURL=odysseyWebComponentVersion.generated.cjs.map

package/dist/cjs/web-component/odysseyWebComponentVersion.generated.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"odysseyWebComponentVersion.generated.cjs","names":["_default","exports","default"],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-41-1\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAAAA,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAkBe,QAAQ","ignoreList":[]}
+{"version":3,"file":"odysseyWebComponentVersion.generated.cjs","names":["_default","exports","default"],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-42-0\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAAAA,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAkBe,QAAQ","ignoreList":[]}

package/dist/esm/Select.js

@@ -224,7 +224,7 @@ const Select = ({
     isReadOnly
   }) => {
     const stopPropagation = event => event.stopPropagation();
-    const hasNonInteractiveIcon = !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
+    const hasNonInteractiveIcon = !isInteractive && !isReadOnly && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
     return Array.isArray(internalSelectedValues) && _jsx(ChipsInnerContainer, {
       isInteractive: isInteractive,
       isReadOnly: isReadOnly,

package/dist/esm/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","styled","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","useOdysseyDesignTokens","normalizedKey","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","lang","language","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../../src/Select.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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated/index.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\nimport { normalizedKey } from \"./useNormalizedKey.js\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n  language?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n          lang: option.language,\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n            lang={option.lang}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","styled","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","useOdysseyDesignTokens","normalizedKey","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","lang","language","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../../src/Select.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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated/index.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\nimport { normalizedKey } from \"./useNormalizedKey.js\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n  language?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n          lang: option.language,\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        !isReadOnly &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n            lang={option.lang}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/createContrastColors.js

@@ -16,7 +16,11 @@ const LUMINANCE_EDGE_MIN = 108;
 const LUMINANCE_EDGE_MAX = 142;
 const BLACK_FONT_COLOR = "#000000";
 const WHITE_FONT_COLOR = "#FFFFFF";
-export const generateContrastColors = (backgroundColor, odysseyDesignTokens) => {
+export const generateContrastColors = ({
+  backgroundColor,
+  backgroundContrastColor,
+  odysseyDesignTokens
+}) => {
   const rgbFromHex = isValidHexString(backgroundColor) ? hexToRgb(backgroundColor) : hexToRgb(odysseyDesignTokens.HueNeutralWhite);
   const {
     red,
@@ -26,7 +30,7 @@ export const generateContrastColors = (backgroundColor, odysseyDesignTokens) =>
   const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
   const luminanceValueInEdgeRange = luminance > LUMINANCE_EDGE_MIN && luminance < LUMINANCE_EDGE_MAX;
   const isLight = luminance > LUMINANCE_THRESHOLD;
-  const fontColor = luminanceValueInEdgeRange ? BLACK_FONT_COLOR : isLight ? odysseyDesignTokens.TypographyColorBody : WHITE_FONT_COLOR;
+  const fontColor = backgroundContrastColor || (luminanceValueInEdgeRange ? BLACK_FONT_COLOR : isLight ? odysseyDesignTokens.TypographyColorBody : WHITE_FONT_COLOR);
   const calculatedFontColorInRgb = hexToRgb(fontColor);
   const lightFontColorInRgb = hexToRgb(WHITE_FONT_COLOR);
   const darkFontColorInRgb = hexToRgb(luminanceValueInEdgeRange ? BLACK_FONT_COLOR : odysseyDesignTokens.TypographyColorBody);

package/dist/esm/createContrastColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"createContrastColors.js","names":["hexToRgb","isValidHexString","rgbComponentsToString","LUMINANCE_THRESHOLD","LUMINANCE_EDGE_MIN","LUMINANCE_EDGE_MAX","BLACK_FONT_COLOR","WHITE_FONT_COLOR","generateContrastColors","backgroundColor","odysseyDesignTokens","rgbFromHex","HueNeutralWhite","red","green","blue","luminance","luminanceValueInEdgeRange","isLight","fontColor","TypographyColorBody","calculatedFontColorInRgb","lightFontColorInRgb","darkFontColorInRgb","calculatedFontRgbComponentsString","lightFontRgbComponentsString","darkFontRgbComponentsString","getHighlightColor","focusRingColor","itemDisabledFontColor","itemHoverBackgroundColor","itemSelectedBackgroundColor"],"sources":["../../src/createContrastColors.ts"],"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 {\n  hexToRgb,\n  isValidHexString,\n  rgbComponentsToString,\n} from \"./hexToRgb.js\";\nimport { DesignTokens } from \"./OdysseyDesignTokensContext.js\";\n\nexport type ContrastColors = {\n  focusRingColor: string | undefined;\n  fontColor: string | undefined;\n  itemDisabledFontColor: string | undefined;\n  itemHoverBackgroundColor: string | undefined;\n  itemSelectedBackgroundColor: string | undefined;\n};\n\n// 128 is a magic number. This feels like roughly where we should switch from dark to light.\nconst LUMINANCE_THRESHOLD = 128;\nconst LUMINANCE_EDGE_MIN = 108;\nconst LUMINANCE_EDGE_MAX = 142;\n\nconst BLACK_FONT_COLOR = \"#000000\";\nconst WHITE_FONT_COLOR = \"#FFFFFF\";\n\nexport const generateContrastColors = (\n  backgroundColor: string,\n  odysseyDesignTokens: DesignTokens,\n) => {\n  // Convert hex to RGB\n  const rgbFromHex = isValidHexString(backgroundColor)\n    ? hexToRgb(backgroundColor)\n    : hexToRgb(odysseyDesignTokens.HueNeutralWhite);\n\n  const { red, green, blue } = rgbFromHex;\n\n  // Calculate relative luminance\n  // @see https://contrastchecker.online/color-relative-luminance-calculator#:~:text=For%20the%20sRGB%20colorspace%2C%20the,%2B0.055)%2F1.055)%20%5E%202.4\n  // returns a number between 0(black) and 255(white)\n  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n\n  // Luminance values between LUMINANCE_EDGE_MIN-LUMINANCE_EDGE_MAX can cause contrast ration issues\n  // Using #000000 helps in these cases\n  const luminanceValueInEdgeRange =\n    luminance > LUMINANCE_EDGE_MIN && luminance < LUMINANCE_EDGE_MAX;\n\n  // Determine if the color is light or dark.\n  const isLight = luminance > LUMINANCE_THRESHOLD;\n\n  const fontColor = luminanceValueInEdgeRange\n    ? BLACK_FONT_COLOR\n    : isLight\n      ? odysseyDesignTokens.TypographyColorBody\n      : WHITE_FONT_COLOR;\n\n  const calculatedFontColorInRgb = hexToRgb(fontColor);\n  const lightFontColorInRgb = hexToRgb(WHITE_FONT_COLOR);\n  const darkFontColorInRgb = hexToRgb(\n    luminanceValueInEdgeRange\n      ? BLACK_FONT_COLOR\n      : odysseyDesignTokens.TypographyColorBody,\n  );\n\n  const calculatedFontRgbComponentsString = rgbComponentsToString({\n    red: calculatedFontColorInRgb?.red,\n    green: calculatedFontColorInRgb?.green,\n    blue: calculatedFontColorInRgb?.blue,\n  });\n\n  const lightFontRgbComponentsString = rgbComponentsToString({\n    red: lightFontColorInRgb?.red,\n    green: lightFontColorInRgb?.green,\n    blue: lightFontColorInRgb?.blue,\n  });\n\n  const darkFontRgbComponentsString = rgbComponentsToString({\n    red: darkFontColorInRgb?.red,\n    green: darkFontColorInRgb?.green,\n    blue: darkFontColorInRgb?.blue,\n  });\n\n  const getHighlightColor: (\n    luminanceValueInEdgeRange: boolean,\n    isLight: boolean,\n  ) => string = (luminanceValueInEdgeRange, isLight) => {\n    if (luminanceValueInEdgeRange) {\n      return isLight\n        ? darkFontRgbComponentsString\n        : lightFontRgbComponentsString;\n    }\n\n    return calculatedFontRgbComponentsString;\n  };\n\n  return {\n    fontColor,\n    focusRingColor: `rgba(${calculatedFontRgbComponentsString}, .8)`,\n    itemDisabledFontColor: `rgba(${calculatedFontRgbComponentsString}, .4)`,\n    itemHoverBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .1)`,\n    itemSelectedBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .15)`,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,QAAQ,EACRC,gBAAgB,EAChBC,qBAAqB,QAChB,eAAe;AAYtB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,MAAMC,gBAAgB,GAAG,SAAS;AAClC,MAAMC,gBAAgB,GAAG,SAAS;AAElC,OAAO,MAAMC,sBAAsB,GAAGA,CACpCC,eAAuB,EACvBC,mBAAiC,KAC9B;EAEH,MAAMC,UAAU,GAAGV,gBAAgB,CAACQ,eAAe,CAAC,GAChDT,QAAQ,CAACS,eAAe,CAAC,GACzBT,QAAQ,CAACU,mBAAmB,CAACE,eAAe,CAAC;EAEjD,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGJ,UAAU;EAKvC,MAAMK,SAAS,GAAG,MAAM,GAAGH,GAAG,GAAG,MAAM,GAAGC,KAAK,GAAG,MAAM,GAAGC,IAAI;EAI/D,MAAME,yBAAyB,GAC7BD,SAAS,GAAGZ,kBAAkB,IAAIY,SAAS,GAAGX,kBAAkB;EAGlE,MAAMa,OAAO,GAAGF,SAAS,GAAGb,mBAAmB;EAE/C,MAAMgB,SAAS,GAAGF,yBAAyB,GACvCX,gBAAgB,GAChBY,OAAO,GACLR,mBAAmB,CAACU,mBAAmB,GACvCb,gBAAgB;EAEtB,MAAMc,wBAAwB,GAAGrB,QAAQ,CAACmB,SAAS,CAAC;EACpD,MAAMG,mBAAmB,GAAGtB,QAAQ,CAACO,gBAAgB,CAAC;EACtD,MAAMgB,kBAAkB,GAAGvB,QAAQ,CACjCiB,yBAAyB,GACrBX,gBAAgB,GAChBI,mBAAmB,CAACU,mBAC1B,CAAC;EAED,MAAMI,iCAAiC,GAAGtB,qBAAqB,CAAC;IAC9DW,GAAG,EAAEQ,wBAAwB,EAAER,GAAG;IAClCC,KAAK,EAAEO,wBAAwB,EAAEP,KAAK;IACtCC,IAAI,EAAEM,wBAAwB,EAAEN;EAClC,CAAC,CAAC;EAEF,MAAMU,4BAA4B,GAAGvB,qBAAqB,CAAC;IACzDW,GAAG,EAAES,mBAAmB,EAAET,GAAG;IAC7BC,KAAK,EAAEQ,mBAAmB,EAAER,KAAK;IACjCC,IAAI,EAAEO,mBAAmB,EAAEP;EAC7B,CAAC,CAAC;EAEF,MAAMW,2BAA2B,GAAGxB,qBAAqB,CAAC;IACxDW,GAAG,EAAEU,kBAAkB,EAAEV,GAAG;IAC5BC,KAAK,EAAES,kBAAkB,EAAET,KAAK;IAChCC,IAAI,EAAEQ,kBAAkB,EAAER;EAC5B,CAAC,CAAC;EAEF,MAAMY,iBAGK,GAAGA,CAACV,yBAAyB,EAAEC,OAAO,KAAK;IACpD,IAAID,yBAAyB,EAAE;MAC7B,OAAOC,OAAO,GACVQ,2BAA2B,GAC3BD,4BAA4B;IAClC;IAEA,OAAOD,iCAAiC;EAC1C,CAAC;EAED,OAAO;IACLL,SAAS;IACTS,cAAc,EAAE,QAAQJ,iCAAiC,OAAO;IAChEK,qBAAqB,EAAE,QAAQL,iCAAiC,OAAO;IACvEM,wBAAwB,EAAE,QAAQH,iBAAiB,CAACV,yBAAyB,EAAEC,OAAO,CAAC,OAAO;IAC9Fa,2BAA2B,EAAE,QAAQJ,iBAAiB,CAACV,yBAAyB,EAAEC,OAAO,CAAC;EAC5F,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"createContrastColors.js","names":["hexToRgb","isValidHexString","rgbComponentsToString","LUMINANCE_THRESHOLD","LUMINANCE_EDGE_MIN","LUMINANCE_EDGE_MAX","BLACK_FONT_COLOR","WHITE_FONT_COLOR","generateContrastColors","backgroundColor","backgroundContrastColor","odysseyDesignTokens","rgbFromHex","HueNeutralWhite","red","green","blue","luminance","luminanceValueInEdgeRange","isLight","fontColor","TypographyColorBody","calculatedFontColorInRgb","lightFontColorInRgb","darkFontColorInRgb","calculatedFontRgbComponentsString","lightFontRgbComponentsString","darkFontRgbComponentsString","getHighlightColor","focusRingColor","itemDisabledFontColor","itemHoverBackgroundColor","itemSelectedBackgroundColor"],"sources":["../../src/createContrastColors.ts"],"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 {\n  hexToRgb,\n  isValidHexString,\n  rgbComponentsToString,\n} from \"./hexToRgb.js\";\nimport { DesignTokens } from \"./OdysseyDesignTokensContext.js\";\n\nexport type ContrastColors = {\n  focusRingColor: string | undefined;\n  fontColor: string | undefined;\n  itemDisabledFontColor: string | undefined;\n  itemHoverBackgroundColor: string | undefined;\n  itemSelectedBackgroundColor: string | undefined;\n};\n\n// 128 is a magic number. This feels like roughly where we should switch from dark to light.\nconst LUMINANCE_THRESHOLD = 128;\nconst LUMINANCE_EDGE_MIN = 108;\nconst LUMINANCE_EDGE_MAX = 142;\n\nconst BLACK_FONT_COLOR = \"#000000\";\nconst WHITE_FONT_COLOR = \"#FFFFFF\";\n\nexport const generateContrastColors = ({\n  backgroundColor,\n  backgroundContrastColor,\n  odysseyDesignTokens,\n}: {\n  backgroundColor: string;\n  backgroundContrastColor?: string;\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  // Convert hex to RGB\n  const rgbFromHex = isValidHexString(backgroundColor)\n    ? hexToRgb(backgroundColor)\n    : hexToRgb(odysseyDesignTokens.HueNeutralWhite);\n\n  const { red, green, blue } = rgbFromHex;\n\n  // Calculate relative luminance\n  // @see https://contrastchecker.online/color-relative-luminance-calculator#:~:text=For%20the%20sRGB%20colorspace%2C%20the,%2B0.055)%2F1.055)%20%5E%202.4\n  // returns a number between 0(black) and 255(white)\n  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n\n  // Luminance values between LUMINANCE_EDGE_MIN-LUMINANCE_EDGE_MAX can cause contrast ration issues\n  // Using #000000 helps in these cases\n  const luminanceValueInEdgeRange =\n    luminance > LUMINANCE_EDGE_MIN && luminance < LUMINANCE_EDGE_MAX;\n\n  // Determine if the color is light or dark.\n  const isLight = luminance > LUMINANCE_THRESHOLD;\n\n  const fontColor =\n    backgroundContrastColor ||\n    (luminanceValueInEdgeRange\n      ? BLACK_FONT_COLOR\n      : isLight\n        ? odysseyDesignTokens.TypographyColorBody\n        : WHITE_FONT_COLOR);\n\n  const calculatedFontColorInRgb = hexToRgb(fontColor);\n  const lightFontColorInRgb = hexToRgb(WHITE_FONT_COLOR);\n  const darkFontColorInRgb = hexToRgb(\n    luminanceValueInEdgeRange\n      ? BLACK_FONT_COLOR\n      : odysseyDesignTokens.TypographyColorBody,\n  );\n\n  const calculatedFontRgbComponentsString = rgbComponentsToString({\n    red: calculatedFontColorInRgb?.red,\n    green: calculatedFontColorInRgb?.green,\n    blue: calculatedFontColorInRgb?.blue,\n  });\n\n  const lightFontRgbComponentsString = rgbComponentsToString({\n    red: lightFontColorInRgb?.red,\n    green: lightFontColorInRgb?.green,\n    blue: lightFontColorInRgb?.blue,\n  });\n\n  const darkFontRgbComponentsString = rgbComponentsToString({\n    red: darkFontColorInRgb?.red,\n    green: darkFontColorInRgb?.green,\n    blue: darkFontColorInRgb?.blue,\n  });\n\n  const getHighlightColor: (\n    luminanceValueInEdgeRange: boolean,\n    isLight: boolean,\n  ) => string = (luminanceValueInEdgeRange, isLight) => {\n    if (luminanceValueInEdgeRange) {\n      return isLight\n        ? darkFontRgbComponentsString\n        : lightFontRgbComponentsString;\n    }\n\n    return calculatedFontRgbComponentsString;\n  };\n\n  return {\n    fontColor,\n    focusRingColor: `rgba(${calculatedFontRgbComponentsString}, .8)`,\n    itemDisabledFontColor: `rgba(${calculatedFontRgbComponentsString}, .4)`,\n    itemHoverBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .1)`,\n    itemSelectedBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .15)`,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,QAAQ,EACRC,gBAAgB,EAChBC,qBAAqB,QAChB,eAAe;AAYtB,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,MAAMC,gBAAgB,GAAG,SAAS;AAClC,MAAMC,gBAAgB,GAAG,SAAS;AAElC,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,eAAe;EACfC,uBAAuB;EACvBC;AAKF,CAAC,KAAK;EAEJ,MAAMC,UAAU,GAAGX,gBAAgB,CAACQ,eAAe,CAAC,GAChDT,QAAQ,CAACS,eAAe,CAAC,GACzBT,QAAQ,CAACW,mBAAmB,CAACE,eAAe,CAAC;EAEjD,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGJ,UAAU;EAKvC,MAAMK,SAAS,GAAG,MAAM,GAAGH,GAAG,GAAG,MAAM,GAAGC,KAAK,GAAG,MAAM,GAAGC,IAAI;EAI/D,MAAME,yBAAyB,GAC7BD,SAAS,GAAGb,kBAAkB,IAAIa,SAAS,GAAGZ,kBAAkB;EAGlE,MAAMc,OAAO,GAAGF,SAAS,GAAGd,mBAAmB;EAE/C,MAAMiB,SAAS,GACbV,uBAAuB,KACtBQ,yBAAyB,GACtBZ,gBAAgB,GAChBa,OAAO,GACLR,mBAAmB,CAACU,mBAAmB,GACvCd,gBAAgB,CAAC;EAEzB,MAAMe,wBAAwB,GAAGtB,QAAQ,CAACoB,SAAS,CAAC;EACpD,MAAMG,mBAAmB,GAAGvB,QAAQ,CAACO,gBAAgB,CAAC;EACtD,MAAMiB,kBAAkB,GAAGxB,QAAQ,CACjCkB,yBAAyB,GACrBZ,gBAAgB,GAChBK,mBAAmB,CAACU,mBAC1B,CAAC;EAED,MAAMI,iCAAiC,GAAGvB,qBAAqB,CAAC;IAC9DY,GAAG,EAAEQ,wBAAwB,EAAER,GAAG;IAClCC,KAAK,EAAEO,wBAAwB,EAAEP,KAAK;IACtCC,IAAI,EAAEM,wBAAwB,EAAEN;EAClC,CAAC,CAAC;EAEF,MAAMU,4BAA4B,GAAGxB,qBAAqB,CAAC;IACzDY,GAAG,EAAES,mBAAmB,EAAET,GAAG;IAC7BC,KAAK,EAAEQ,mBAAmB,EAAER,KAAK;IACjCC,IAAI,EAAEO,mBAAmB,EAAEP;EAC7B,CAAC,CAAC;EAEF,MAAMW,2BAA2B,GAAGzB,qBAAqB,CAAC;IACxDY,GAAG,EAAEU,kBAAkB,EAAEV,GAAG;IAC5BC,KAAK,EAAES,kBAAkB,EAAET,KAAK;IAChCC,IAAI,EAAEQ,kBAAkB,EAAER;EAC5B,CAAC,CAAC;EAEF,MAAMY,iBAGK,GAAGA,CAACV,yBAAyB,EAAEC,OAAO,KAAK;IACpD,IAAID,yBAAyB,EAAE;MAC7B,OAAOC,OAAO,GACVQ,2BAA2B,GAC3BD,4BAA4B;IAClC;IAEA,OAAOD,iCAAiC;EAC1C,CAAC;EAED,OAAO;IACLL,SAAS;IACTS,cAAc,EAAE,QAAQJ,iCAAiC,OAAO;IAChEK,qBAAqB,EAAE,QAAQL,iCAAiC,OAAO;IACvEM,wBAAwB,EAAE,QAAQH,iBAAiB,CAACV,yBAAyB,EAAEC,OAAO,CAAC,OAAO;IAC9Fa,2BAA2B,EAAE,QAAQJ,iBAAiB,CAACV,yBAAyB,EAAEC,OAAO,CAAC;EAC5F,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/getLogicalBoundaries.js

@@ -0,0 +1,26 @@
+/*!
+ * 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 getLogicalBoundaries = element => {
+  const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+  const {
+    top,
+    bottom,
+    left,
+    right
+  } = element.getBoundingClientRect();
+  return {
+    top,
+    bottom,
+    left: isRTL ? right : left,
+    right: isRTL ? left : right
+  };
+};
+//# sourceMappingURL=getLogicalBoundaries.js.map

package/dist/esm/getLogicalBoundaries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLogicalBoundaries.js","names":["getLogicalBoundaries","element","isRTL","document","documentElement","getAttribute","top","bottom","left","right","getBoundingClientRect"],"sources":["../../src/getLogicalBoundaries.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n/**\n * Retrieves the logical boundaries (top, bottom, left, right) of a given HTML element.\n *\n * The function considers the document's text direction (`dir` attribute) to determine\n * whether the left and right boundaries should be swapped.\n */\nexport const getLogicalBoundaries = (element: HTMLElement) => {\n  const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n\n  const { top, bottom, left, right } = element.getBoundingClientRect();\n\n  return {\n    top,\n    bottom,\n    // left and right are swapped for RTL\n    left: isRTL ? right : left,\n    right: isRTL ? left : right,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQA,OAAO,MAAMA,oBAAoB,GAAIC,OAAoB,IAAK;EAC5D,MAAMC,KAAK,GAAGC,QAAQ,CAACC,eAAe,CAACC,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK;EAEpE,MAAM;IAAEC,GAAG;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGR,OAAO,CAACS,qBAAqB,CAAC,CAAC;EAEpE,OAAO;IACLJ,GAAG;IACHC,MAAM;IAENC,IAAI,EAAEN,KAAK,GAAGO,KAAK,GAAGD,IAAI;IAC1BC,KAAK,EAAEP,KAAK,GAAGM,IAAI,GAAGC;EACxB,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/labs/PageTemplate/PageTemplate.js

@@ -11,12 +11,13 @@
  */
 
 import styled from "@emotion/styled";
-import { memo } from "react";
+import { memo, useCallback, useRef } from "react";
 import { DocumentationIcon } from "../../icons.generated/index.js";
 import { DocumentationLink } from "./DocumentationLink.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Heading4, Paragraph } from "../../Typography.js";
 import { useHasUiShell } from "../../ui-shell/useHasUiShell.js";
+import { useMountLifecycleEffect } from "../../useMountLifecycleEffect.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TemplateContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasUiShell" && prop !== "isFullWidth"
@@ -71,11 +72,12 @@ const TemplateHeaderButtons = styled("div", {
   gap: odysseyDesignTokens.Spacing2
 }));
 const TemplateContent = styled("div", {
-  shouldForwardProp: prop => !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop)
+  shouldForwardProp: prop => !["drawerVariant", "isDrawerOpen", "isFirstRender", "odysseyDesignTokens"].includes(prop)
 })(({
-  odysseyDesignTokens,
+  drawerVariant,
   isDrawerOpen,
-  drawerVariant
+  isFirstRender,
+  odysseyDesignTokens
 }) => ({
   "@keyframes animate-drawer-open": {
     "0%": {
@@ -98,7 +100,7 @@ const TemplateContent = styled("div", {
   gap: drawerVariant === "persistent" && !isDrawerOpen ? 0 : odysseyDesignTokens.Spacing4,
   marginBlock: odysseyDesignTokens.Spacing4,
   gridTemplateColumns: drawerVariant === "persistent" ? isDrawerOpen ? "minmax(0, 1fr) 360px" : "minmax(0, 1fr) 0" : "minmax(0, 1fr)",
-  animation: drawerVariant === "persistent" && isDrawerOpen ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)" : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)"
+  animation: drawerVariant === "persistent" && (!isFirstRender || isDrawerOpen) ? `animate-drawer-${isDrawerOpen ? "open" : "close"} 225ms cubic-bezier(0, 0, 0.2, 1)` : undefined
 }));
 const PageTemplate = ({
   children,
@@ -118,6 +120,14 @@ const PageTemplate = ({
     variant: drawerVariant
   } = drawer?.props ?? {};
   const hasUiShell = useHasUiShell();
+  const firstRenderRef = useRef(true);
+  const isFirstRender = firstRenderRef.current;
+  const onMount = useCallback(() => {
+    firstRenderRef.current = false;
+  }, []);
+  useMountLifecycleEffect({
+    onMount
+  });
   return _jsxs(TemplateContainer, {
     hasUiShell: hasUiShell,
     isFullWidth: isFullWidth,
@@ -147,6 +157,7 @@ const PageTemplate = ({
       odysseyDesignTokens: odysseyDesignTokens,
       isDrawerOpen: isDrawerOpen,
       drawerVariant: drawerVariant,
+      isFirstRender: isFirstRender,
       children: [children, drawer]
     })]
   });

package/dist/esm/labs/PageTemplate/PageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.js","names":["styled","memo","DocumentationIcon","DocumentationLink","useOdysseyDesignTokens","Heading4","Paragraph","useHasUiShell","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","hasUiShell","isFullWidth","odysseyDesignTokens","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","gap","Spacing4","TemplateHeaderPrimaryContent","TypographyLineLengthMax","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","minHeight","Spacing7","whiteSpace","TemplateHeaderButtons","Spacing2","TemplateContent","includes","isDrawerOpen","drawerVariant","gridTemplateColumns","gridGap","marginBlock","animation","PageTemplate","children","description","documentationLink","documentationText","drawer","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","title","isOpen","variant","props","href","icon","target","MemoizedPageTemplate","displayName"],"sources":["../../../../src/labs/PageTemplate/PageTemplate.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 styled from \"@emotion/styled\";\nimport { memo, ReactElement, ReactNode } from \"react\";\n\nimport { DrawerProps } from \"../../Drawer.js\";\nimport { DocumentationIcon } from \"../../icons.generated/index.js\";\nimport { DocumentationLink } from \"./DocumentationLink.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading4, Paragraph } from \"../../Typography.js\";\nimport { useHasUiShell } from \"../../ui-shell/useHasUiShell.js\";\n\nexport type PageTemplateProps = {\n  /**\n   * The title of the layout to be situated in the layout header\n   */\n  title?: string;\n  /**\n   * A supplementary description to be situated in the layout header\n   */\n  description?: string;\n  /**\n   * The destination for a documentation `Link` to be situated in the layout header\n   */\n  documentationLink?: string;\n  /**\n   * The text for a documentation `Link` to be situated in the layout header\n   */\n  documentationText?: string;\n  /**\n   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n   */\n  drawer?: ReactElement<DrawerProps>;\n  /**\n   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement;\n  /**\n   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n   */\n  isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n  odysseyDesignTokens: DesignTokens;\n  isDrawerOpen?: boolean;\n  drawerVariant?: string;\n};\n\nconst TemplateContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasUiShell\" &&\n    prop !== \"isFullWidth\",\n})<{\n  hasUiShell: boolean;\n  isFullWidth: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({\n  maxWidth: isFullWidth\n    ? \"100%\"\n    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n  marginInline:\n    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : \"auto\",\n  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"space-between\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n  [\".MuiTypography-root:last-child\"]: {\n    marginBlockEnd: \"0\",\n  },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"flex-end\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n  minHeight: odysseyDesignTokens.Spacing7,\n  justifyContent: \"center\",\n  whiteSpace: \"nowrap\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\"odysseyDesignTokens\", \"isDrawerOpen\", \"drawerVariant\"].includes(prop),\n})<TemplateContentProps>(\n  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({\n    \"@keyframes animate-drawer-open\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n    },\n    \"@keyframes animate-drawer-close\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n    },\n    display: \"grid\",\n    gridGap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    gap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    marginBlock: odysseyDesignTokens.Spacing4,\n    gridTemplateColumns:\n      drawerVariant === \"persistent\"\n        ? isDrawerOpen\n          ? \"minmax(0, 1fr) 360px\"\n          : \"minmax(0, 1fr) 0\"\n        : \"minmax(0, 1fr)\",\n    animation:\n      drawerVariant === \"persistent\" && isDrawerOpen\n        ? \"animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)\"\n        : \"animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)\",\n  }),\n);\n\nconst PageTemplate = ({\n  children,\n  description,\n  documentationLink,\n  documentationText,\n  drawer,\n  isFullWidth = false,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  title,\n}: PageTemplateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n  const hasUiShell = useHasUiShell();\n\n  return (\n    <TemplateContainer\n      hasUiShell={hasUiShell}\n      isFullWidth={isFullWidth}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <TemplateHeader odysseyDesignTokens={odysseyDesignTokens}>\n        <TemplateHeaderPrimaryContent odysseyDesignTokens={odysseyDesignTokens}>\n          {title && <Heading4>{title}</Heading4>}\n          {description && <Paragraph>{description}</Paragraph>}\n        </TemplateHeaderPrimaryContent>\n\n        <TemplateHeaderSecondaryContent\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {documentationLink && (\n            <DocumentationLink\n              href={documentationLink}\n              icon={<DocumentationIcon />}\n              target=\"_blank\"\n            >\n              {documentationText}\n            </DocumentationLink>\n          )}\n          {(primaryCallToActionComponent ||\n            secondaryCallToActionComponent ||\n            tertiaryCallToActionComponent) && (\n            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </TemplateHeaderButtons>\n          )}\n        </TemplateHeaderSecondaryContent>\n      </TemplateHeader>\n      <TemplateContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        isDrawerOpen={isDrawerOpen}\n        drawerVariant={drawerVariant}\n      >\n        {children}\n        {drawer}\n      </TemplateContent>\n    </TemplateContainer>\n  );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PageTemplate.js","names":["styled","memo","useCallback","useRef","DocumentationIcon","DocumentationLink","useOdysseyDesignTokens","Heading4","Paragraph","useHasUiShell","useMountLifecycleEffect","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","hasUiShell","isFullWidth","odysseyDesignTokens","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","gap","Spacing4","TemplateHeaderPrimaryContent","TypographyLineLengthMax","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","minHeight","Spacing7","whiteSpace","TemplateHeaderButtons","Spacing2","TemplateContent","includes","drawerVariant","isDrawerOpen","isFirstRender","gridTemplateColumns","gridGap","marginBlock","animation","undefined","PageTemplate","children","description","documentationLink","documentationText","drawer","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","title","isOpen","variant","props","firstRenderRef","current","onMount","href","icon","target","MemoizedPageTemplate","displayName"],"sources":["../../../../src/labs/PageTemplate/PageTemplate.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 styled from \"@emotion/styled\";\nimport { memo, ReactElement, ReactNode, useCallback, useRef } from \"react\";\n\nimport { DrawerProps } from \"../../Drawer.js\";\nimport { DocumentationIcon } from \"../../icons.generated/index.js\";\nimport { DocumentationLink } from \"./DocumentationLink.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading4, Paragraph } from \"../../Typography.js\";\nimport { useHasUiShell } from \"../../ui-shell/useHasUiShell.js\";\nimport { useMountLifecycleEffect } from \"../../useMountLifecycleEffect.js\";\n\nexport type PageTemplateProps = {\n  /**\n   * The title of the layout to be situated in the layout header\n   */\n  title?: string;\n  /**\n   * A supplementary description to be situated in the layout header\n   */\n  description?: string;\n  /**\n   * The destination for a documentation `Link` to be situated in the layout header\n   */\n  documentationLink?: string;\n  /**\n   * The text for a documentation `Link` to be situated in the layout header\n   */\n  documentationText?: string;\n  /**\n   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n   */\n  drawer?: ReactElement<DrawerProps>;\n  /**\n   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement;\n  /**\n   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n   */\n  isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n  drawerVariant?: string;\n  isDrawerOpen?: boolean;\n  isFirstRender: boolean;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst TemplateContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasUiShell\" &&\n    prop !== \"isFullWidth\",\n})<{\n  hasUiShell: boolean;\n  isFullWidth: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({\n  maxWidth: isFullWidth\n    ? \"100%\"\n    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n  marginInline:\n    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : \"auto\",\n  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"space-between\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n  [\".MuiTypography-root:last-child\"]: {\n    marginBlockEnd: \"0\",\n  },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"flex-end\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n  minHeight: odysseyDesignTokens.Spacing7,\n  justifyContent: \"center\",\n  whiteSpace: \"nowrap\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\n      \"drawerVariant\",\n      \"isDrawerOpen\",\n      \"isFirstRender\",\n      \"odysseyDesignTokens\",\n    ].includes(prop),\n})<TemplateContentProps>(\n  ({ drawerVariant, isDrawerOpen, isFirstRender, odysseyDesignTokens }) => ({\n    \"@keyframes animate-drawer-open\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n    },\n    \"@keyframes animate-drawer-close\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n    },\n    display: \"grid\",\n    gridGap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    gap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    marginBlock: odysseyDesignTokens.Spacing4,\n    gridTemplateColumns:\n      drawerVariant === \"persistent\"\n        ? isDrawerOpen\n          ? \"minmax(0, 1fr) 360px\"\n          : \"minmax(0, 1fr) 0\"\n        : \"minmax(0, 1fr)\",\n    animation:\n      drawerVariant === \"persistent\" && (!isFirstRender || isDrawerOpen)\n        ? `animate-drawer-${isDrawerOpen ? \"open\" : \"close\"} 225ms cubic-bezier(0, 0, 0.2, 1)`\n        : undefined,\n  }),\n);\n\nconst PageTemplate = ({\n  children,\n  description,\n  documentationLink,\n  documentationText,\n  drawer,\n  isFullWidth = false,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  title,\n}: PageTemplateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n  const hasUiShell = useHasUiShell();\n\n  const firstRenderRef = useRef(true);\n\n  const isFirstRender = firstRenderRef.current;\n\n  const onMount = useCallback(() => {\n    firstRenderRef.current = false;\n  }, []);\n\n  useMountLifecycleEffect({\n    onMount,\n  });\n\n  return (\n    <TemplateContainer\n      hasUiShell={hasUiShell}\n      isFullWidth={isFullWidth}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <TemplateHeader odysseyDesignTokens={odysseyDesignTokens}>\n        <TemplateHeaderPrimaryContent odysseyDesignTokens={odysseyDesignTokens}>\n          {title && <Heading4>{title}</Heading4>}\n          {description && <Paragraph>{description}</Paragraph>}\n        </TemplateHeaderPrimaryContent>\n\n        <TemplateHeaderSecondaryContent\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {documentationLink && (\n            <DocumentationLink\n              href={documentationLink}\n              icon={<DocumentationIcon />}\n              target=\"_blank\"\n            >\n              {documentationText}\n            </DocumentationLink>\n          )}\n          {(primaryCallToActionComponent ||\n            secondaryCallToActionComponent ||\n            tertiaryCallToActionComponent) && (\n            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </TemplateHeaderButtons>\n          )}\n        </TemplateHeaderSecondaryContent>\n      </TemplateHeader>\n      <TemplateContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        isDrawerOpen={isDrawerOpen}\n        drawerVariant={drawerVariant}\n        isFirstRender={isFirstRender}\n      >\n        {children}\n        {drawer}\n      </TemplateContent>\n    </TemplateContainer>\n  );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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","ignoreList":[]}