@okta/odyssey-react-mui 1.32.4 → 1.33.0

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.cjs","names":["_react","require","_OdysseyDesignTokensContext","convertCamelCaseToKebabCase","string","replace","toLowerCase","exports","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","useOdysseyDesignTokens","parentContainerRef","useRef","appContainerElementStyles","useMemo","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\n  appContainerElement.style.setProperty(\"z-index\", \"1\");\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.cjs","names":["_react","require","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","useState","scrollableContentRef","useRef","scrollableElement","useMemo","current","useEffect","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener","exports"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableContentRef = useRef<ScrollableContentElement>(null);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement ?? scrollableContentRef.current,\n    [scrollableContentElement, scrollableContentRef.current],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n    scrollableContentRef,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEjE,MAAMC,oBAAoB,GAAG,IAAAC,aAAM,EAA2B,IAAI,CAAC;EAEnE,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC/B,MAAMP,wBAAwB,IAAII,oBAAoB,CAACI,OAAO,EAC9D,CAACR,wBAAwB,EAAEI,oBAAoB,CAACI,OAAO,CACzD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIH,iBAAiB,EAAE;MACrB,IAAII,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDX,oBAAoB,CAACI,iBAAiB,CAACQ,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDR,iBAAiB,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXL,iBAAiB,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACJ,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLL,iBAAiB;IACjBG;EACF,CAAC;AACH,CAAC;AAACa,OAAA,CAAAlB,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"file":"useScrollState.cjs","names":["_react","require","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","useState","scrollableElement","useMemo","useEffect","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener","exports"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement,\n    [scrollableContentElement],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEjE,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC/B,MAAML,wBAAwB,EAC9B,CAACA,wBAAwB,CAC3B,CAAC;EAED,IAAAM,gBAAS,EAAC,MAAM;IACd,IAAIF,iBAAiB,EAAE;MACrB,IAAIG,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDR,oBAAoB,CAACE,iBAAiB,CAACO,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDP,iBAAiB,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXJ,iBAAiB,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACH,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLH;EACF,CAAC;AACH,CAAC;AAACa,OAAA,CAAAf,cAAA,GAAAA,cAAA","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.cjs","names":["_createReactRootElements","require","_getRequireWildcardCache","e","WeakMap","r","t","_interopRequireWildcard","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","__transformExtension","filepath","extMapping","startsWith","idx","lastIndexOf","includes","newExt","origExt","entries","sort","b","length","endsWith","slice","reactWebComponentElementName","exports","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","createReactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","specifier","Promise","then","s","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport { createReactRootElements } from \"./createReactRootElements.js\";\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderReactInWebComponent.cjs","names":["_createReactRootElements","require","_getRequireWildcardCache","e","WeakMap","r","t","_interopRequireWildcard","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","__transformExtension","filepath","extMapping","startsWith","idx","lastIndexOf","includes","newExt","origExt","entries","sort","b","length","endsWith","slice","reactWebComponentElementName","exports","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","constructor","getReactComponent","reactRootElements","createReactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRootPromise","specifier","Promise","then","s","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","define","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":";;;;;;AAeA,IAAAA,wBAAA,GAAAC,OAAA;AAGsC,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAI,wBAAAJ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAM,OAAA,EAAAN,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAI,GAAA,CAAAP,CAAA,UAAAG,CAAA,CAAAK,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAN,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAlBrC,SAASW,oBAAoBA,CAACC,QAAQ,EAAEC,UAAU,EAAE;EACnD,IAAG,CAACD,QAAQ,CAACE,UAAU,CAAC,IAAI,CAAC,IAAI,CAACF,QAAQ,CAACE,UAAU,CAAC,KAAK,CAAC,EAAE;IAE5D,OAAOF,QAAQ;EACjB;EAEA,MAAMG,GAAG,GAAGH,QAAQ,CAACI,WAAW,CAAC,GAAG,CAAC;EACrC,IAAGD,GAAG,KAAK,CAAC,CAAC,IAAIH,QAAQ,CAACK,QAAQ,CAAC,GAAG,EAAEF,GAAG,CAAC,EAAE;IAE5C,MAAMG,MAAM,GAAGL,UAAU,CAAC,EAAE,CAAC;IAC7B,IAAGK,MAAM,EAAE;MACT,OAAON,QAAQ,GAAGM,MAAM;IAC1B;IACA,OAAON,QAAQ;EACjB;EAEA,KAAI,IAAI,CAACO,OAAO,EAAED,MAAM,CAAC,IAAIf,MAAM,CAACiB,OAAO,CAACP,UAAU,CAAC,CAACQ,IAAI,CAC1D,CAACnB,CAAC,EAAEoB,CAAC,KAAKA,CAAC,CAAC,CAAC,CAAC,CAACC,MAAM,GAAGrB,CAAC,CAAC,CAAC,CAAC,CAACqB,MAC/B,CAAC,EAAE;IACD,IAAGX,QAAQ,CAACY,QAAQ,CAACL,OAAO,CAAC,EAAE;MAC7B,OAAOP,QAAQ,CAACa,KAAK,CAAC,CAAC,EAAE,CAACN,OAAO,CAACI,MAAM,CAAC,GAAGL,MAAM;IACpD;EACF;EACA,OAAON,QAAQ;AACjB,CAAC,CAxBD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUO,MAAMc,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,6BAA6B;AAMzE,MAAME,2BAA2B,GAC/B,aAAa,IAAIC,UAAU,GACvBC,WAAW,GACV,MAAM,EAA+C;AAErD,MAAMC,0BAA0B,SAASH,2BAA2B,CAAC;EAK1EI,WAAWA,CAACC,iBAAkD,EAAE;IAC9D,KAAK,CAAC,CAAC;IAEP,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,iBAAiB,GAAG,IAAAC,gDAAuB,EAAC,CAAC;IAElD,MAAMC,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IACpD,MAAMC,UAAU,GAAG,IAAI,CAACC,YAAY,CAAC;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC;IAEtDL,YAAY,CAACM,SAAS,GAAG;AAC7B;AACA;AACA;AACA;AACA,KAAK;IAEDN,YAAY,CAACO,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;IAEnD,IAAI,CAACX,iBAAiB,CAACY,iBAAiB,CAACC,WAAW,CAACX,YAAY,CAAC;IAClEG,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACb,iBAAiB,CAACY,iBAAiB,CAAC;IAChEP,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACb,iBAAiB,CAACc,cAAc,CAAC;IAG7D,IAAI,CAACC,gBAAgB,GAAG,CAAAC,SAAA,QAAAC,OAAA,CAAA1D,CAAA,IAAAA,CAAA,IAAAyD,SAAA,KAAAE,IAAA,CAAAC,CAAA,IAAA1D,uBAAA,CAAAN,OAAA,CAAAgE,CAAA,KAAA1C,oBAAA,CAAO,kBAAkB;MAAA;IAAA,IAAEyC,IAAI,CAAC,CAAC;MAAEE;IAAW,CAAC,KACrEA,UAAU,CAAC,IAAI,CAACpB,iBAAiB,CAACc,cAAc,CAClD,CAAC;EACH;EAEAO,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACN,gBAAgB,CAACG,IAAI,CAAEI,SAAS,IACnCA,SAAS,CAACC,MAAM,CAAC,IAAI,CAACxB,iBAAiB,CAAC,IAAI,CAACC,iBAAiB,CAAC,CACjE,CAAC;EACH;EAEAwB,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACT,gBAAgB,CAACG,IAAI,CAAEI,SAAS,IAAKA,SAAS,CAACG,OAAO,CAAC,CAAC,CAAC;EAChE;AACF;AAAChC,OAAA,CAAAI,0BAAA,GAAAA,0BAAA;AAED,IACE,gBAAgB,IAAIF,UAAU,IAC9B,CAAC+B,cAAc,CAAC7D,GAAG,CAAC2B,4BAA4B,CAAC,EACjD;EACAkC,cAAc,CAACC,MAAM,CACnBnC,4BAA4B,EAC5BK,0BACF,CAAC;AACH;AA4CO,MAAM+B,yBAAyB,GAAGA,CAAC;EACxC7B,iBAAiB;EACjB8B,oBAAoB;EACpBC,yBAAyB;EACzBC;AAC8B,CAAC,KAAK;EACpC,MAAMC,YAAY,GAAG,IAAInC,0BAA0B,CAACE,iBAAiB,CAAC;EAEtE,IAAI8B,oBAAoB,EAAE;IACxB,CAACI,KAAK,CAACC,OAAO,CAACL,oBAAoB,CAAC,GAChCA,oBAAoB,GACpB,CAACA,oBAAoB,CAAC,EACxBM,OAAO,CAAEC,iBAAiB,IAAK;MAC/BJ,YAAY,CAACnB,WAAW,CAACuB,iBAAiB,CAAC;IAC7C,CAAC,CAAC;EACJ;EAEA,IAAIN,yBAAyB,EAAE;IAC7BA,yBAAyB,CAACjB,WAAW,CAACmB,YAAY,CAAC;EACrD,CAAC,MAEI,IAAID,uBAAuB,EAAE;IAChCA,uBAAuB,CAAClB,WAAW,CAACmB,YAAY,CAAC;EACnD;EAEA,OAAOA,YAAY;AACrB,CAAC;AAACvC,OAAA,CAAAmC,yBAAA,GAAAA,yBAAA","ignoreList":[]}

package/dist/esm/Autocomplete.js

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

package/dist/esm/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useTranslation","PickerVirtualizationListBox","useAutocomplete","jsx","_jsx","AutocompleteTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","Autocomplete","ariaDescribedBy","defaultValue","errorMessageList","getOptionLabel","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","HintLinkComponent","name","nameOverride","noOptionsText","onBlur","onChange","onInputChange","onFocus","value","getIsOptionEqualToValue","testId","translate","t","inputValueProp","isVirtualizedRef","renderInput","valueProps","_Autocomplete","current","ListboxComponent","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  UseAutocompleteProps as MuiUseAutocompleteProps,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { PickerVirtualizationListBox } from \"./labs/OdysseyPickers/PickerVirtualizationListBox.js\";\nimport { useAutocomplete } from \"./useAutocomplete.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\n\nexport const AutocompleteTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      children: {\n        listItem: {\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// type SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.\n   *\n   * `function(option: Value) => string`\n   */\n  getOptionLabel?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  /** Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getOptionLabel,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      getOptionLabel={getOptionLabel}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Autocomplete.js","names":["memo","useTranslation","PickerVirtualizationListBox","useAutocomplete","jsx","_jsx","AutocompleteTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","Autocomplete","ariaDescribedBy","defaultValue","errorMessageList","getOptionLabel","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","HintLinkComponent","name","nameOverride","noOptionsText","onBlur","onChange","onInputChange","onFocus","value","getIsOptionEqualToValue","testId","translate","t","inputValueProp","isVirtualizedRef","renderInput","valueProps","_Autocomplete","current","ListboxComponent","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  UseAutocompleteProps as MuiUseAutocompleteProps,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { PickerVirtualizationListBox } from \"./labs/OdysseyPickers/PickerVirtualizationListBox.js\";\nimport { useAutocomplete } from \"./useAutocomplete.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\n\nexport const AutocompleteTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      children: {\n        listItem: {\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// type SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.\n   *\n   * `function(option: Value) => string`\n   */\n  getOptionLabel?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  /** Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getOptionLabel,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      getOptionLabel={getOptionLabel}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText || t(\"autocomplete.nooptions\")}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAS9C,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvD,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,cAAc,EAAE;IACdC,YAAY,EAAE,cAAc;IAC5BC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE;EACT,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJD,QAAQ,EAAE;QACRE,QAAQ,EAAE;UACRC,eAAe,EAAE;YACfC,MAAM,EAAE,QAAQ;YAChBC,OAAO,EAAE;cACPN,KAAK,EAAE;YACT,CAAC;YACDO,IAAI,EAAE;UACR;QACF;MACF,CAAC;MACDC,mBAAmB,EAAE;IACvB;EACF,CAAC;EACDJ,eAAe,EAAE;IACfC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;MACPN,KAAK,EAAE;IACT,CAAC;IACDO,IAAI,EAAE;EACR;AACF,CAAiC;AAyKjC,MAAME,YAAY,GAAGA,CAInB;EACAC,eAAe;EACfC,YAAY;EACZb,YAAY;EACZc,gBAAgB;EAChBC,cAAc;EACdC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,GAAG,KAAK;EACrBzB,IAAI;EACJ0B,iBAAiB;EACjBzB,KAAK;EACL0B,IAAI,EAAEC,YAAY;EAClBC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACP1B,OAAO;EACP2B,KAAK;EACLC,uBAAuB;EACvBC,MAAM;EACNC;AACuE,CAAC,KAAK;EAC7E,MAAM;IAAEC;EAAE,CAAC,GAAG9C,cAAc,CAAC,CAAC;EAC9B,MAAM;IAAE+C,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjEhD,eAAe,CAAuD;IACpEiB,eAAe;IACfC,YAAY;IACZb,YAAY;IACZc,gBAAgB;IAChBE,kBAAkB;IAClBf,IAAI;IACJ0B,iBAAiB;IACjBR,UAAU;IACVG,WAAW;IACXE,UAAU;IACVE,aAAa;IACbxB,KAAK;IACL0B,IAAI,EAAEC,YAAY;IAClBQ,MAAM;IACNF;EACF,CAAC,CAAC;EAEJ,OACEtC,IAAA,CAAA+C,aAAA;IAAA,GACMD,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACI,OAAO,IAAI;MAC/BC,gBAAgB,EAAEpD;IACpB,CAAC;IAED,iBAAe2B,UAAW;IAC1B0B,SAAS,EAAER,CAAC,CAAC,YAAY,CAAE;IAC3BS,SAAS,EAAET,CAAC,CAAC,YAAY,CAAE;IAC3BU,oBAAoB,EAAEjC,kBAAmB;IACzCkC,QAAQ,EAAE7B,UAAW;IACrB8B,QAAQ,EAAE/B,oBAAqB;IAC/BgC,qBAAqB,EAAE,IAAK;IAC5BrC,cAAc,EAAEA,cAAe;IAC/BE,EAAE,EAAEC,UAAW;IACfmC,SAAS,EAAE/B,WAAY;IACvBgC,OAAO,EAAE/B,SAAU;IACnBgC,QAAQ,EAAEvC,kBAAmB;IAC7Bc,aAAa,EAAEA,aAAa,IAAIS,CAAC,CAAC,wBAAwB,CAAE;IAC5DR,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBsB,QAAQ,EAAEjB,CAAC,CAAC,WAAW,CAAE;IACzB/B,OAAO,EAAEA,OAAQ;IACjBiD,QAAQ,EAAEhC,UAAW;IACrBiB,WAAW,EAAEA,WAAY;IACzBgB,oBAAoB,EAAEtB,uBAAwB;IAC9CE,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMqB,oBAAoB,GAAGnE,IAAI,CAACmB,YAAY,CAAwB;AAEtEgD,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAIhD,YAAY","ignoreList":[]}

package/dist/esm/Breadcrumbs.js

@@ -31,18 +31,33 @@ const BreadcrumbContent = styled.span`
 export const Breadcrumb = ({
   children,
   href,
-  iconName
+  iconName,
+  onClick
 }) => {
   const {
     breadcrumbType
   } = useContext(BreadcrumbContext);
+  const onClickHandler = useCallback(event => {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
   const breadcrumbContent = _jsxs(_Fragment, {
     children: [iconName === "group" ? _jsx(GroupIcon, {}) : iconName === "user" ? _jsx(UserIcon, {}) : null, _jsx(BreadcrumbContent, {
       children: children
     })]
   });
+  if (!href) {
+    return _jsx(Subordinate, {
+      color: "textPrimary",
+      children: breadcrumbContent
+    });
+  }
   if (breadcrumbType === "menuItem") {
     return _jsx(_MenuItem, {
+      onClick: onClickHandler,
       href: href,
       children: breadcrumbContent
     });
@@ -55,6 +70,7 @@ export const Breadcrumb = ({
     });
   }
   return _jsx(_ButtonBase, {
+    onClick: onClickHandler,
     href: href,
     children: breadcrumbContent
   });
@@ -113,10 +129,10 @@ const BreadcrumbList = ({
       href: homeHref,
       "aria-label": t("breadcrumbs.home.text"),
       children: _jsx(HomeIcon, {})
-    }), breadcrumbSections.beforeMenu.map(breadcrumb => _jsx(BreadcrumbContext.Provider, {
+    }), breadcrumbSections.beforeMenu.map((breadcrumb, index) => _jsx(BreadcrumbContext.Provider, {
       value: breadcrumbProviderValue.listItem,
       children: breadcrumb
-    })), breadcrumbSections.insideMenu.length > 0 && _jsxs(_Fragment, {
+    }, index)), breadcrumbSections.insideMenu.length > 0 && _jsxs(_Fragment, {
       children: [_jsx(_ButtonBase, {
         onClick: onMenuButtonClick,
         children: "..."
@@ -138,17 +154,17 @@ const BreadcrumbList = ({
           children: breadcrumbSections.insideMenu
         })
       })]
-    }), breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {
-      if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {
+    }), breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, index) => {
+      if (index === breadcrumbSections.remainingBreadcrumbs.length - 1) {
         return _jsx(BreadcrumbContext.Provider, {
           value: breadcrumbProviderValue.currentPage,
           children: breadcrumb
-        });
+        }, index);
       }
       return _jsx(BreadcrumbContext.Provider, {
         value: breadcrumbProviderValue.listItem,
         children: breadcrumb
-      });
+      }, index);
     })]
   });
 };

package/dist/esm/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","styled","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","BreadcrumbContent","span","Breadcrumb","children","href","iconName","breadcrumbContent","_MenuItem","ariaCurrent","color","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","anchorEl","setAnchorEl","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated/index.js\";\nimport { Subordinate } from \"./Typography.js\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport styled from \"@emotion/styled\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nconst BreadcrumbContent = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 10rem;\n  text-overflow: ellipsis;\n`;\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      <BreadcrumbContent>{children}</BreadcrumbContent>\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return (\n      <Subordinate ariaCurrent=\"page\" color=\"textPrimary\">\n        {breadcrumbContent}\n      </Subordinate>\n    );\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","styled","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","BreadcrumbContent","span","Breadcrumb","children","href","iconName","onClick","onClickHandler","event","preventDefault","stopPropagation","breadcrumbContent","color","_MenuItem","ariaCurrent","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","anchorEl","setAnchorEl","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","index","Provider","value","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","MemoizedBreadcrumbList","displayName"],"sources":["../../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated/index.js\";\nimport { Subordinate } from \"./Typography.js\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport styled from \"@emotion/styled\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href?: string;\n  iconName?: \"user\" | \"group\";\n  onClick?: MouseEventHandler;\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nconst BreadcrumbContent = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 10rem;\n  text-overflow: ellipsis;\n`;\n\nexport const Breadcrumb = ({\n  children,\n  href,\n  iconName,\n  onClick,\n}: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const onClickHandler = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n    (event) => {\n      if (onClick) {\n        event.preventDefault();\n        event.stopPropagation();\n        onClick(event);\n      }\n    },\n    [onClick],\n  );\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      <BreadcrumbContent>{children}</BreadcrumbContent>\n    </>\n  );\n\n  if (!href) {\n    return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n  }\n\n  if (breadcrumbType === \"menuItem\") {\n    return (\n      <MenuItem onClick={onClickHandler} href={href}>\n        {breadcrumbContent}\n      </MenuItem>\n    );\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return (\n      <Subordinate ariaCurrent=\"page\" color=\"textPrimary\">\n        {breadcrumbContent}\n      </Subordinate>\n    );\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return (\n    <ButtonBase onClick={onClickHandler} href={href}>\n      {breadcrumbContent}\n    </ButtonBase>\n  );\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb, index) => (\n        <BreadcrumbContext.Provider\n          key={index}\n          value={breadcrumbProviderValue.listItem}\n        >\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, index) => {\n        if (index === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              key={index}\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider\n            key={index}\n            value={breadcrumbProviderValue.listItem}\n          >\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/DatePickers/datePickerTheme.js

@@ -345,7 +345,7 @@ export const datePickerTheme = {
         paper: ({
           theme
         }) => ({
-          boxShadow: `0 ${1 / 16 * (16 / 14)}rem ${4 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${4 / 16 * (16 / 14)}rem ${10 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${8 / 16 * (16 / 14)}rem ${30 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.1)`,
+          boxShadow: `0 ${1 / 14}rem ${4 / 14}rem rgba(29, 29, 33, 0.08), 0 ${4 / 14}rem ${10 / 14}rem rgba(29, 29, 33, 0.08), 0 ${8 / 14}rem ${30 / 14}rem rgba(29, 29, 33, 0.1)`,
           marginTop: theme.spacing(1)
         })
       }