@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-0-1 {
+@keyframes _rxr5810-3-1-1 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-0-1 {
+@keyframes _rxr5811-3-1-1 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-0-1 {
+@keyframes _rxr5812-3-1-1 {
   0% {
     transform: scaleX(1);
   }
@@ -22,7 +22,7 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-0-1 {
+._rxr5813-3-1-1 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
@@ -100,16 +100,16 @@
   opacity: 0;
 }
 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-0-1 1 forwards;
+  animation: _rxr5812-3-1-1 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-0-1;
+  animation-name: _rxr5810-3-1-1;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-0-1;
+  animation-name: _rxr5811-3-1-1;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/esm/notifications/toast/ToastContainer.js

@@ -17,7 +17,9 @@ import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/w
 import { XmarkIcon } from "@dynatrace/strato-icons";
 import { toastsCSS } from "./ToastContainer.sty.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { createStore } from "../../core/store/store.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useKeyboardFocusHandling } from "../../overlays/hooks/useKeyboardFocusHandling.js";
@@ -34,11 +36,13 @@ const ToastContainer = forwardRef(
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      "aria-label": ariaLabel,
       ...remainingProps
     } = props;
     const closeButtonRef = useRef(null);
     const containerRef = useRef(null);
+    const ariaLabelingProps = useAriaLabelingProps(remainingProps);
+    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
+    const { "aria-label": ariaLabel, ...remainingAriaLabelingProps } = ariaLabelingProps;
     const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(
       closeButtonRef,
       containerRef
@@ -123,13 +127,14 @@ const ToastContainer = forwardRef(
         "div",
         {
           ref: rootRef,
+          className: clsx(consumerClassName, toastsCSS),
+          style: consumerStyle,
           "data-toast-container": true,
           "data-testid": dataTestId,
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
-          className: clsx(consumerClassName, toastsCSS),
-          style: consumerStyle,
-          ...remainingProps,
+          ...remainingAriaLabelingProps,
+          ...forwardProps,
           "data-dt-component": COMPONENT_NAME,
           children: /* @__PURE__ */ jsx(
             ReactToastifyContainer,

package/esm/notifications/toast/ToastContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { toastsCSS } from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  Pick<AriaLabelingProps, 'aria-label'>;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-label': ariaLabel,\n      ...remainingProps\n    } = props;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          // Need to wait for one tick here, otherwise the now removed toast is still\n          // in the DOM and can be focused.\n          window.requestAnimationFrame(() => {\n            handleFocusOnKeydown();\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(consumerClassName, toastsCSS)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { toastsCSS } from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          // Need to wait for one tick here, otherwise the now removed toast is still\n          // in the DOM and can be focused.\n          window.requestAnimationFrame(() => {\n            handleFocusOnKeydown();\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        className={clsx(consumerClassName, toastsCSS)}\n        style={consumerStyle}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...remainingAriaLabelingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.sty.js

@@ -1,5 +1,5 @@
 import "./ToastContainer.css";
-var toastsCSS = "_rxr5813-3-0-1";
+var toastsCSS = "_rxr5813-3-1-1";
 export {
   toastsCSS
 };

package/esm/notifications/toast/ToastContainer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.css.ts"],
-  "sourcesContent": ["import './ToastContainer.css';\nexport var toastsCSS = '_rxr5813-3-0-1';"],
+  "sourcesContent": ["import './ToastContainer.css';\nexport var toastsCSS = '_rxr5813-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-0-1 {
+._14971970-3-1-1 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-0-1 {
+._14971971-3-1-1 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-0-1 {
+._14971972-3-1-1 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-0-1 {
+._14971973-3-1-1 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-0-1 {
+._14971974-3-1-1 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-0-1 {
+._14971975-3-1-1 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-0-1 {
+._14971976-3-1-1 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-0-1 {
+._14971977-3-1-1 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-0-1 {
+._14971978-3-1-1 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.sty.js

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-0-1";
-var DrawerCSS = "_14971970-3-0-1";
-var DrawerContentCSS = "_14971978-3-0-1";
-var DrawerPlacementCSS = { left: "_14971971-3-0-1", right: "_14971972-3-0-1" };
-var DrawerWidthStyles = { narrow: "_14971973-3-0-1", medium: "_14971974-3-0-1", wide: "_14971975-3-0-1", full: "_14971976-3-0-1" };
+var DrawerBackdropCSS = "_14971977-3-1-1";
+var DrawerCSS = "_14971970-3-1-1";
+var DrawerContentCSS = "_14971978-3-1-1";
+var DrawerPlacementCSS = { left: "_14971971-3-1-1", right: "_14971972-3-1-1" };
+var DrawerWidthStyles = { narrow: "_14971973-3-1-1", medium: "_14971974-3-1-1", wide: "_14971975-3-1-1", full: "_14971976-3-1-1" };
 export {
   DrawerBackdropCSS,
   DrawerCSS,

package/esm/overlays/drawer/Drawer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.css.ts"],
-  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-0-1';\nexport var DrawerCSS = '_14971970-3-0-1';\nexport var DrawerContentCSS = '_14971978-3-0-1';\nexport var DrawerPlacementCSS = {left:'_14971971-3-0-1',right:'_14971972-3-0-1'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-0-1',medium:'_14971974-3-0-1',wide:'_14971975-3-0-1',full:'_14971976-3-0-1'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-1-1';\nexport var DrawerCSS = '_14971970-3-1-1';\nexport var DrawerContentCSS = '_14971978-3-1-1';\nexport var DrawerPlacementCSS = {left:'_14971971-3-1-1',right:'_14971972-3-1-1'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-1-1',medium:'_14971974-3-1-1',wide:'_14971975-3-1-1',full:'_14971976-3-1-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,qBAAqB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB;AACxE,IAAI,oBAAoB,EAAC,QAAO,mBAAkB,QAAO,mBAAkB,MAAK,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }

package/esm/overlays/hooks/useOverlay.js

@@ -1,12 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import {
   useCallback,
+  useContext,
   useEffect,
   useRef
 } from "react";
 import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
+import { OverlayStackingContext } from "../../core/contexts/OverlayStacking.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 const visibleOverlays = [];
+function closeAllOverlays(level = 0) {
+  if (visibleOverlays.length === 0) {
+    return;
+  }
+  for (let i = visibleOverlays.length - 1; i >= 0; i--) {
+    const overlay = visibleOverlays[i];
+    if (overlay.stackingLevel >= level) {
+      overlay.close();
+    } else {
+      break;
+    }
+  }
+}
 function useOverlay(props, ref) {
   const {
     onClose,
@@ -16,30 +31,54 @@ function useOverlay(props, ref) {
     isKeyboardDismissDisabled = false,
     shouldCloseOnInteractOutside
   } = props;
+  const overlayStacking = useContext(OverlayStackingContext);
+  const hasPendingCloseRef = useRef(false);
   useEffect(() => {
-    if (isOpen) {
-      visibleOverlays.push(ref);
+    if (!isOpen) {
+      hasPendingCloseRef.current = false;
+    }
+  }, [isOpen]);
+  const requestClose = useCallback(
+    (reason, onlyIfTopMost = true) => {
+      if (!onClose || !isOpen || hasPendingCloseRef.current) {
+        return;
+      }
+      if (onlyIfTopMost) {
+        const topEntry = visibleOverlays[visibleOverlays.length - 1];
+        if (topEntry?.ref !== ref) {
+          return;
+        }
+      }
+      hasPendingCloseRef.current = true;
+      onClose(reason);
+    },
+    [isOpen, onClose, ref]
+  );
+  useEffect(() => {
+    if (isOpen && onClose) {
+      const entry = {
+        ref,
+        stackingLevel: overlayStacking,
+        close: () => requestClose("programmatic", false)
+      };
+      visibleOverlays.push(entry);
+      return () => {
+        const index = visibleOverlays.findIndex((e) => e.ref === ref);
+        if (index >= 0) {
+          visibleOverlays.splice(index, 1);
+        }
+      };
     }
     return () => {
-      const index = visibleOverlays.indexOf(ref);
+      const index = visibleOverlays.findIndex((e) => e.ref === ref);
       if (index >= 0) {
         visibleOverlays.splice(index, 1);
       }
     };
-  }, [isOpen, ref]);
-  const onHide = useCallback(
-    (reason) => {
-      if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
-        onClose(reason);
-      }
-    },
-    // the ref is excluded here because it's passed as a prop and won't change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onClose]
-  );
+  }, [isOpen, ref, onClose, overlayStacking, requestClose]);
   const onInteractOutside = (e) => {
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
-      onHide("backdrop");
+      requestClose("backdrop");
     }
   };
   const onInteractOutsideStart = (e) => {
@@ -47,18 +86,18 @@ function useOverlay(props, ref) {
       return;
     }
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
-      onHide("blur");
+      requestClose("blur");
     }
   };
   const onKeyDown = useCallback(
     (event) => {
       if (event.key === "Escape" && !isKeyboardDismissDisabled) {
         event.preventDefault();
-        onHide("escape");
+        requestClose("escape");
       }
       event.stopPropagation();
     },
-    [isKeyboardDismissDisabled, onHide]
+    [isKeyboardDismissDisabled, requestClose]
   );
   useInteractOutside({
     ref,
@@ -68,8 +107,8 @@ function useOverlay(props, ref) {
   const { focusWithinProps } = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
     onBlurWithin: (e) => {
-      if (onClose && (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget))) {
-        onClose("blur");
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) {
+        requestClose("blur");
       }
     }
   });
@@ -222,6 +261,7 @@ function DismissButton(props) {
 }
 export {
   DismissButton,
+  closeAllOverlays,
   useOverlay,
   useOverlayTriggerState
 };

package/esm/overlays/hooks/useOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/hooks/useOverlay.tsx"],
-  "sourcesContent": ["import {\n  type KeyboardEvent,\n  type RefObject,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\n\n/**\n * @public\n */\nexport interface OverlayTriggerState {\n  /** Whether the overlay is currently open. */\n  readonly isOpen: boolean;\n  /** Opens the overlay. */\n  open(): void;\n  /** Closes the overlay. */\n  close(): void;\n  /** Toggles the overlay's visibility. */\n  toggle(): void;\n}\n\nconst visibleOverlays: RefObject<HTMLElement | null>[] = [];\n\n/**\n * @public\n */\nexport type OverlayAria = {\n  /** Props to apply to the overlay container element. */\n  overlayProps: {\n    onKeyDown?: (e: KeyboardEvent) => void;\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n};\n\ntype FocusWithinResult = {\n  focusWithinProps: {\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n};\n\n/** @internal */\nexport interface UseOverlayProps {\n  /** Whether the overlay is currently open. */\n  isOpen?: boolean;\n  /** Handler that is called when the overlay should close. */\n  onClose?: (reason: string) => void;\n  /**\n   * Whether to close the overlay when the user interacts outside it.\n   * Known Issue: If set to true, clicking on some other overlays (e.g. Microguide)\n   * also closes this overlay. The issue is irrelevant for smaller overlays that usually\n   * don't contain a clickable overlay but might need some extra handling for bigger ones (e.g. Sheet).\n   * @defaultValue false\n   */\n  isDismissible?: boolean;\n  /** Whether the overlay should close when focus is lost or moves outside it. */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Whether pressing the escape key to close the overlay should be disabled.\n   * @defaultValue false\n   */\n  isKeyboardDismissDisabled?: boolean;\n  /**\n   * When user interacts with the argument element outside of the overlay ref,\n   * return true if onClose should be called. This gives you a chance to filter\n   * out interaction with elements that should not dismiss the overlay.\n   * By default, onClose will always be called on interaction outside the overlay ref.\n   */\n  shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean;\n}\n\ninterface OverlayTriggerProps {\n  /** Whether the overlay is open by default (controlled). */\n  isOpen?: boolean;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n * @internal\n */\nexport function useOverlay(\n  props: UseOverlayProps,\n  ref: RefObject<HTMLElement | null>,\n): OverlayAria {\n  const {\n    onClose,\n    shouldCloseOnBlur,\n    isOpen,\n    isDismissible = false,\n    isKeyboardDismissDisabled = false,\n    shouldCloseOnInteractOutside,\n  } = props;\n\n  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n  useEffect(() => {\n    if (isOpen) {\n      visibleOverlays.push(ref);\n    }\n\n    return () => {\n      const index = visibleOverlays.indexOf(ref);\n      if (index >= 0) {\n        visibleOverlays.splice(index, 1);\n      }\n    };\n  }, [isOpen, ref]);\n\n  // Only hide the overlay when it is the topmost visible overlay in the stack.\n  const onHide = useCallback(\n    (reason: string) => {\n      if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {\n        onClose(reason);\n      }\n    },\n    // the ref is excluded here because it's passed as a prop and won't change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose],\n  );\n\n  const onInteractOutside = (e: SyntheticEvent<Element>) => {\n    if (\n      !shouldCloseOnInteractOutside ||\n      shouldCloseOnInteractOutside(e.target as HTMLElement)\n    ) {\n      onHide('backdrop');\n    }\n  };\n\n  const onInteractOutsideStart = (e: SyntheticEvent<Element>) => {\n    if (!isDismissible || !shouldCloseOnBlur) {\n      return;\n    }\n\n    if (\n      !shouldCloseOnInteractOutside ||\n      shouldCloseOnInteractOutside(e.target as HTMLElement)\n    ) {\n      onHide('blur');\n    }\n  };\n\n  // Handle the escape key\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && !isKeyboardDismissDisabled) {\n        event.preventDefault();\n        onHide('escape');\n      }\n      // captures all keyboard events within the overlay to not affect underlaying elements.\n      event.stopPropagation();\n    },\n    [isKeyboardDismissDisabled, onHide],\n  );\n\n  // Handle clicking outside the overlay to close it\n  useInteractOutside({\n    ref,\n    onInteractOutside: isDismissible ? onInteractOutside : undefined,\n    onInteractOutsideStart,\n  });\n\n  const { focusWithinProps } = useFocusWithin({\n    isDisabled: !shouldCloseOnBlur,\n    onBlurWithin: (e) => {\n      if (\n        onClose &&\n        (!shouldCloseOnInteractOutside ||\n          shouldCloseOnInteractOutside(e.relatedTarget as HTMLElement))\n      ) {\n        onClose('blur');\n      }\n    },\n  });\n\n  return {\n    overlayProps: {\n      onKeyDown,\n      ...focusWithinProps,\n    },\n  };\n}\n\n/**\n * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides\n * methods to toggle this state.\n * @internal\n */\nexport function useOverlayTriggerState(\n  props: OverlayTriggerProps,\n): OverlayTriggerState {\n  const onOpenChange =\n    props.onOpenChange ??\n    ((isOpen: boolean) => {\n      /* empty */\n    });\n  const [isOpenValue, setOpen] = useControllableState({\n    defaultValue: props.defaultOpen || false,\n    value: props.isOpen,\n    onChange: onOpenChange,\n  });\n\n  const isOpen = isOpenValue ?? false;\n  return {\n    isOpen,\n    open: useCallback(() => setOpen(true), [setOpen]),\n    close: useCallback(() => setOpen(false), [setOpen]),\n    toggle: useCallback(() => setOpen(!isOpen), [isOpen, setOpen]),\n  };\n}\n\ninterface InteractOutsideProps {\n  ref: RefObject<Element | null>;\n  onInteractOutside?: (e: SyntheticEvent) => void;\n  onInteractOutsideStart?: (e: SyntheticEvent) => void;\n  /** Whether the interact outside events should be disabled. */\n  isDisabled?: boolean;\n}\n\n/**\n * Example, used in components like Dialogs and Popovers so they can close\n * when a user clicks outside them.\n */\nfunction useInteractOutside(props: InteractOutsideProps) {\n  const { ref, onInteractOutside, isDisabled, onInteractOutsideStart } = props;\n  const stateRef = useRef({\n    isPointerDown: false,\n    ignoreEmulatedMouseEvents: false,\n    onInteractOutside,\n    onInteractOutsideStart,\n  });\n  const state = stateRef.current;\n  state.onInteractOutside = onInteractOutside;\n  state.onInteractOutsideStart = onInteractOutsideStart;\n\n  useEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const onPointerDown = (e: MouseEvent | TouchEvent) => {\n      if (isValidEvent(e, ref) && state.onInteractOutside) {\n        if (state.onInteractOutsideStart) {\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutsideStart(e as unknown as SyntheticEvent);\n        }\n        state.isPointerDown = true;\n      }\n    };\n\n    // Use pointer events if available. Otherwise, fall back to mouse and touch events.\n    if (typeof PointerEvent !== 'undefined') {\n      const onPointerUp = (e: MouseEvent) => {\n        if (\n          state.isPointerDown &&\n          state.onInteractOutside &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      document.body.addEventListener('pointerdown', onPointerDown);\n      document.body.addEventListener('pointerup', onPointerUp);\n\n      return () => {\n        document.body.removeEventListener('pointerdown', onPointerDown);\n        document.body.removeEventListener('pointerup', onPointerUp);\n      };\n    } else {\n      const onMouseUp = (e: MouseEvent) => {\n        if (state.ignoreEmulatedMouseEvents) {\n          state.ignoreEmulatedMouseEvents = false;\n        } else if (\n          state.isPointerDown &&\n          state.onInteractOutside &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      const onTouchEnd = (e: TouchEvent) => {\n        state.ignoreEmulatedMouseEvents = true;\n        if (\n          state.onInteractOutside &&\n          state.isPointerDown &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      document.body.addEventListener('mousedown', onPointerDown);\n      document.body.addEventListener('mouseup', onMouseUp);\n      document.body.addEventListener('touchstart', onPointerDown);\n      document.body.addEventListener('touchend', onTouchEnd);\n\n      return () => {\n        document.body.removeEventListener('mousedown', onPointerDown);\n        document.body.removeEventListener('mouseup', onMouseUp);\n        document.body.removeEventListener('touchstart', onPointerDown);\n        document.body.removeEventListener('touchend', onTouchEnd);\n      };\n    }\n  }, [ref, state, isDisabled]);\n}\n\n/** Is the pointer event valid */\nfunction isValidEvent(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  event: any,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: any,\n) {\n  if (event.button > 0) {\n    return false;\n  }\n\n  // if the event target is no longer in the document\n  if (event.target) {\n    const ownerDocument = event.target.ownerDocument;\n    if (\n      !ownerDocument ||\n      !ownerDocument.documentElement.contains(event.target)\n    ) {\n      return false;\n    }\n  }\n\n  return !!ref.current && !ref.current.contains(event.target);\n}\n\ninterface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nfunction useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  const state = useRef({\n    isFocusWithin: false,\n  }).current;\n\n  if (props.isDisabled) {\n    return { focusWithinProps: {} };\n  }\n\n  const onFocus = (e: FocusEvent) => {\n    if (!state.isFocusWithin) {\n      if (props.onFocusWithin) {\n        props.onFocusWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(true);\n      }\n\n      state.isFocusWithin = true;\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    if (state.isFocusWithin && !currentTarget.contains(relatedTarget)) {\n      if (props.onBlurWithin) {\n        props.onBlurWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(false);\n      }\n\n      state.isFocusWithin = false;\n    }\n  };\n\n  return {\n    focusWithinProps: {\n      onFocus: onFocus,\n      onBlur: onBlur,\n    },\n  };\n}\n\n/**\n * @public\n */\nexport interface DismissButtonProps {\n  /** Called when the dismiss button is activated. */\n  onDismiss?: () => void;\n}\n\n/**\n * A visually hidden button that can be used to allow screen reader\n * users to dismiss a modal or popup when there is no visual\n * affordance to do so.\n\n* @public\n*/\nexport function DismissButton(props: Readonly<DismissButtonProps>) {\n  const { onDismiss } = props;\n  const onClick = () => {\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  return (\n    <VisuallyHidden>\n      <button tabIndex={-1} aria-label=\"dismiss\" onClick={onClick} />\n    </VisuallyHidden>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type KeyboardEvent,\n  type RefObject,\n  type SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { OverlayStackingContext } from '../../core/contexts/OverlayStacking.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\n\n/**\n * @public\n */\nexport interface OverlayTriggerState {\n  /** Whether the overlay is currently open. */\n  readonly isOpen: boolean;\n  /** Opens the overlay. */\n  open(): void;\n  /** Closes the overlay. */\n  close(): void;\n  /** Toggles the overlay's visibility. */\n  toggle(): void;\n}\n\ninterface VisibleOverlayEntry {\n  ref: RefObject<HTMLElement | null>;\n  stackingLevel: number;\n  close: () => void;\n}\n\nconst visibleOverlays: VisibleOverlayEntry[] = [];\n\n/**\n * Close all overlays with a stacking level equal to or higher than the\n * provided level, defaulting to 0 (close all other overlays).\n * @internal\n */\nexport function closeAllOverlays(level: number = 0): void {\n  if (visibleOverlays.length === 0) {\n    return;\n  }\n\n  // Close overlays from top to bottom\n  for (let i = visibleOverlays.length - 1; i >= 0; i--) {\n    const overlay = visibleOverlays[i];\n\n    if (overlay.stackingLevel >= level) {\n      overlay.close();\n    } else {\n      break;\n    }\n  }\n}\n\n/**\n * @public\n */\nexport type OverlayAria = {\n  /** Props to apply to the overlay container element. */\n  overlayProps: {\n    onKeyDown?: (e: KeyboardEvent) => void;\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n};\n\ntype FocusWithinResult = {\n  focusWithinProps: {\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n};\n\n/** @internal */\nexport interface UseOverlayProps {\n  /** Whether the overlay is currently open. */\n  isOpen?: boolean;\n  /** Handler that is called when the overlay should close. */\n  onClose?: (reason: string) => void;\n  /**\n   * Whether to close the overlay when the user interacts outside it.\n   * Known Issue: If set to true, clicking on some other overlays (e.g. Microguide)\n   * also closes this overlay. The issue is irrelevant for smaller overlays that usually\n   * don't contain a clickable overlay but might need some extra handling for bigger ones (e.g. Sheet).\n   * @defaultValue false\n   */\n  isDismissible?: boolean;\n  /** Whether the overlay should close when focus is lost or moves outside it. */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Whether pressing the escape key to close the overlay should be disabled.\n   * @defaultValue false\n   */\n  isKeyboardDismissDisabled?: boolean;\n  /**\n   * When user interacts with the argument element outside of the overlay ref,\n   * return true if onClose should be called. This gives you a chance to filter\n   * out interaction with elements that should not dismiss the overlay.\n   * By default, onClose will always be called on interaction outside the overlay ref.\n   */\n  shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean;\n}\n\ninterface OverlayTriggerProps {\n  /** Whether the overlay is open by default (controlled). */\n  isOpen?: boolean;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n * @internal\n */\nexport function useOverlay(\n  props: UseOverlayProps,\n  ref: RefObject<HTMLElement | null>,\n): OverlayAria {\n  const {\n    onClose,\n    shouldCloseOnBlur,\n    isOpen,\n    isDismissible = false,\n    isKeyboardDismissDisabled = false,\n    shouldCloseOnInteractOutside,\n  } = props;\n\n  const overlayStacking = useContext(OverlayStackingContext);\n  const hasPendingCloseRef = useRef(false);\n\n  // Reset the close lock once the overlay is actually closed.\n  useEffect(() => {\n    if (!isOpen) {\n      hasPendingCloseRef.current = false;\n    }\n  }, [isOpen]);\n\n  const requestClose = useCallback(\n    (reason: string, onlyIfTopMost = true) => {\n      if (!onClose || !isOpen || hasPendingCloseRef.current) {\n        return;\n      }\n\n      if (onlyIfTopMost) {\n        const topEntry = visibleOverlays[visibleOverlays.length - 1];\n        if (topEntry?.ref !== ref) {\n          return;\n        }\n      }\n\n      hasPendingCloseRef.current = true;\n      onClose(reason);\n    },\n    [isOpen, onClose, ref],\n  );\n\n  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n  useEffect(() => {\n    if (isOpen && onClose) {\n      const entry: VisibleOverlayEntry = {\n        ref,\n        stackingLevel: overlayStacking,\n        close: () => requestClose('programmatic', false),\n      };\n      visibleOverlays.push(entry);\n\n      return () => {\n        const index = visibleOverlays.findIndex((e) => e.ref === ref);\n        if (index >= 0) {\n          visibleOverlays.splice(index, 1);\n        }\n      };\n    }\n\n    return () => {\n      const index = visibleOverlays.findIndex((e) => e.ref === ref);\n      if (index >= 0) {\n        visibleOverlays.splice(index, 1);\n      }\n    };\n  }, [isOpen, ref, onClose, overlayStacking, requestClose]);\n\n  const onInteractOutside = (e: SyntheticEvent<Element>) => {\n    if (\n      !shouldCloseOnInteractOutside ||\n      shouldCloseOnInteractOutside(e.target as HTMLElement)\n    ) {\n      requestClose('backdrop');\n    }\n  };\n\n  const onInteractOutsideStart = (e: SyntheticEvent<Element>) => {\n    if (!isDismissible || !shouldCloseOnBlur) {\n      return;\n    }\n\n    if (\n      !shouldCloseOnInteractOutside ||\n      shouldCloseOnInteractOutside(e.target as HTMLElement)\n    ) {\n      requestClose('blur');\n    }\n  };\n\n  // Handle the escape key\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && !isKeyboardDismissDisabled) {\n        event.preventDefault();\n        requestClose('escape');\n      }\n      // captures all keyboard events within the overlay to not affect underlaying elements.\n      event.stopPropagation();\n    },\n    [isKeyboardDismissDisabled, requestClose],\n  );\n\n  // Handle clicking outside the overlay to close it\n  useInteractOutside({\n    ref,\n    onInteractOutside: isDismissible ? onInteractOutside : undefined,\n    onInteractOutsideStart,\n  });\n\n  const { focusWithinProps } = useFocusWithin({\n    isDisabled: !shouldCloseOnBlur,\n    onBlurWithin: (e) => {\n      if (\n        !shouldCloseOnInteractOutside ||\n        shouldCloseOnInteractOutside(e.relatedTarget as HTMLElement)\n      ) {\n        requestClose('blur');\n      }\n    },\n  });\n\n  return {\n    overlayProps: {\n      onKeyDown,\n      ...focusWithinProps,\n    },\n  };\n}\n\n/**\n * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides\n * methods to toggle this state.\n * @internal\n */\nexport function useOverlayTriggerState(\n  props: OverlayTriggerProps,\n): OverlayTriggerState {\n  const onOpenChange =\n    props.onOpenChange ??\n    ((isOpen: boolean) => {\n      /* empty */\n    });\n  const [isOpenValue, setOpen] = useControllableState({\n    defaultValue: props.defaultOpen || false,\n    value: props.isOpen,\n    onChange: onOpenChange,\n  });\n\n  const isOpen = isOpenValue ?? false;\n  return {\n    isOpen,\n    open: useCallback(() => setOpen(true), [setOpen]),\n    close: useCallback(() => setOpen(false), [setOpen]),\n    toggle: useCallback(() => setOpen(!isOpen), [isOpen, setOpen]),\n  };\n}\n\ninterface InteractOutsideProps {\n  ref: RefObject<Element | null>;\n  onInteractOutside?: (e: SyntheticEvent) => void;\n  onInteractOutsideStart?: (e: SyntheticEvent) => void;\n  /** Whether the interact outside events should be disabled. */\n  isDisabled?: boolean;\n}\n\n/**\n * Example, used in components like Dialogs and Popovers so they can close\n * when a user clicks outside them.\n */\nfunction useInteractOutside(props: InteractOutsideProps) {\n  const { ref, onInteractOutside, isDisabled, onInteractOutsideStart } = props;\n  const stateRef = useRef({\n    isPointerDown: false,\n    ignoreEmulatedMouseEvents: false,\n    onInteractOutside,\n    onInteractOutsideStart,\n  });\n  const state = stateRef.current;\n  state.onInteractOutside = onInteractOutside;\n  state.onInteractOutsideStart = onInteractOutsideStart;\n\n  useEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const onPointerDown = (e: MouseEvent | TouchEvent) => {\n      if (isValidEvent(e, ref) && state.onInteractOutside) {\n        if (state.onInteractOutsideStart) {\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutsideStart(e as unknown as SyntheticEvent);\n        }\n        state.isPointerDown = true;\n      }\n    };\n\n    // Use pointer events if available. Otherwise, fall back to mouse and touch events.\n    if (typeof PointerEvent !== 'undefined') {\n      const onPointerUp = (e: MouseEvent) => {\n        if (\n          state.isPointerDown &&\n          state.onInteractOutside &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      document.body.addEventListener('pointerdown', onPointerDown);\n      document.body.addEventListener('pointerup', onPointerUp);\n\n      return () => {\n        document.body.removeEventListener('pointerdown', onPointerDown);\n        document.body.removeEventListener('pointerup', onPointerUp);\n      };\n    } else {\n      const onMouseUp = (e: MouseEvent) => {\n        if (state.ignoreEmulatedMouseEvents) {\n          state.ignoreEmulatedMouseEvents = false;\n        } else if (\n          state.isPointerDown &&\n          state.onInteractOutside &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      const onTouchEnd = (e: TouchEvent) => {\n        state.ignoreEmulatedMouseEvents = true;\n        if (\n          state.onInteractOutside &&\n          state.isPointerDown &&\n          isValidEvent(e, ref)\n        ) {\n          state.isPointerDown = false;\n          // This is a direct copy from the react-aria useInteractOutside\n          // but they do not have strict mode enabled, which allows them\n          // to simply pass any event to the onInteractOutside,\n          // which expects a SyntheticEvent.\n          state.onInteractOutside(e as unknown as SyntheticEvent);\n        }\n      };\n\n      document.body.addEventListener('mousedown', onPointerDown);\n      document.body.addEventListener('mouseup', onMouseUp);\n      document.body.addEventListener('touchstart', onPointerDown);\n      document.body.addEventListener('touchend', onTouchEnd);\n\n      return () => {\n        document.body.removeEventListener('mousedown', onPointerDown);\n        document.body.removeEventListener('mouseup', onMouseUp);\n        document.body.removeEventListener('touchstart', onPointerDown);\n        document.body.removeEventListener('touchend', onTouchEnd);\n      };\n    }\n  }, [ref, state, isDisabled]);\n}\n\n/** Is the pointer event valid */\nfunction isValidEvent(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  event: any,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: any,\n) {\n  if (event.button > 0) {\n    return false;\n  }\n\n  // if the event target is no longer in the document\n  if (event.target) {\n    const ownerDocument = event.target.ownerDocument;\n    if (\n      !ownerDocument ||\n      !ownerDocument.documentElement.contains(event.target)\n    ) {\n      return false;\n    }\n  }\n\n  return !!ref.current && !ref.current.contains(event.target);\n}\n\ninterface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nfunction useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  const state = useRef({\n    isFocusWithin: false,\n  }).current;\n\n  if (props.isDisabled) {\n    return { focusWithinProps: {} };\n  }\n\n  const onFocus = (e: FocusEvent) => {\n    if (!state.isFocusWithin) {\n      if (props.onFocusWithin) {\n        props.onFocusWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(true);\n      }\n\n      state.isFocusWithin = true;\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    if (state.isFocusWithin && !currentTarget.contains(relatedTarget)) {\n      if (props.onBlurWithin) {\n        props.onBlurWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(false);\n      }\n\n      state.isFocusWithin = false;\n    }\n  };\n\n  return {\n    focusWithinProps: {\n      onFocus: onFocus,\n      onBlur: onBlur,\n    },\n  };\n}\n\n/**\n * @public\n */\nexport interface DismissButtonProps {\n  /** Called when the dismiss button is activated. */\n  onDismiss?: () => void;\n}\n\n/**\n * A visually hidden button that can be used to allow screen reader\n * users to dismiss a modal or popup when there is no visual\n * affordance to do so.\n\n * @public\n */\nexport function DismissButton(props: Readonly<DismissButtonProps>) {\n  const { onDismiss } = props;\n  const onClick = () => {\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  return (\n    <VisuallyHidden>\n      <button tabIndex={-1} aria-label=\"dismiss\" onClick={onClick} />\n    </VisuallyHidden>\n  );\n}\n"],
+  "mappings": "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",
   "names": ["isOpen"]
 }

package/esm/overlays/hooks/useOverlayWithTrigger.js

@@ -147,7 +147,8 @@ function useOverlayWithTrigger(props = {}) {
     },
     overlayRef
   );
-  const { dialogProps } = useDialog({ "aria-labelledby": ariaLabelledBy });
+  const { dialogProps } = useDialog({});
+  const { "aria-labelledby": _unused, ...dialogPropsWithoutLabelledBy } = dialogProps;
   useKeyboardInteractionOutside({
     ref: overlayRef,
     isDisabled: !isOpen,
@@ -178,7 +179,7 @@ function useOverlayWithTrigger(props = {}) {
     overlayProps: {
       ..._mergeProps(
         overlayProps,
-        dialogProps,
+        { ...dialogPropsWithoutLabelledBy, "aria-labelledby": ariaLabelledBy },
         // we also need to add the onKeyDown handler in here for closing overlays with interactive content when tabbing and shouldCloseOnBlur is false (default)
         // if shouldCloseOnBlur is set to true, the focus handlers from the returned useOverlay overlayProps take care of the closing
         // if there's no interactive content, the trigger keeps the focus, so the onKeyDown event from the triggerProps takes care of closing

package/esm/overlays/hooks/useOverlayWithTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/hooks/useOverlayWithTrigger.ts"],
-  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport {\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  useCallback,\n  type SetStateAction,\n  type Dispatch,\n  type DOMAttributes,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\n\n\nimport { useDialog } from './useDialog.js';\nimport { useKeyboardInteractionOutside } from './useKeyboardInteractionOutside.js';\nimport {\n  OverlayTriggerState,\n  useOverlay,\n  useOverlayTriggerState,\n} from './useOverlay.js';\nimport { usePress } from './usePress.js';\nimport { useStateRef } from './useStateRef.js';\nimport type {\n  AriaBaseButtonProps,\n  AriaButtonProps,\n  ButtonAria,\n} from '../../buttons/button/types/button-aria.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport {\n  Elevation,\n  useOverlayStacking,\n} from '../../core/hooks/useOverlayStacking.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { getLastFocusableChild as _getLastFocusableChild } from '../../core/utils/focus-management/get-last-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { FormControlRef } from '../../forms/shared-types.js';\nimport { isFormControlRef } from '../../forms/shared-types.js';\nimport type { HeightStrategy, WidthStrategy } from '../types/sizing.types.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n  overlayHeightStrategyHandling,\n  overlayWidthStrategyHandling,\n} from '../utils/popper-modifiers.js';\n\n//#region Typings\n/**\n * @public\n */\nexport type OverlayPlacement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerUncontrolledProps {\n  /**\n   * Whether the overlay is open by default.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open?: never;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerControlledProps {\n  /**\n   * Whether the overlay is open by default.\n   */\n  defaultOpen?: never;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open: boolean;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerBaseProps {\n  /**\n   * Placement of the overlay\n   * @defaultValue 'bottom'\n   */\n  placement?: OverlayPlacement;\n  /**\n   * Alternative positions that will be assumed if the original placement will not fit\n   * @defaultValue ['top']\n   */\n  placementFallbacks?: OverlayPlacement[];\n  /**\n   * Offset between overlay and target element\n   * @defaultValue 0\n   */\n  offset?: number;\n  /**\n   * Offset along the cross axis between the overlay and target element\n   * @defaultValue 0\n   */\n  crossOffset?: number;\n  /**\n   * An additional z-index elevation value to add to the one derived from the stacking order\n   */\n  additionalElevation?: Elevation;\n  /**\n   * Whether the trigger is disabled or not\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Defines which strategy to use for setting the overlay width\n   * @defaultValue 'content'\n   */\n  widthStrategy?: WidthStrategy;\n  /**\n   * Defines which strategy to use for setting the overlay height\n   * @defaultValue 'content'\n   */\n  heightStrategy?: HeightStrategy;\n  /**\n   * Whether the overlay should trap the focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean;\n  /**\n   * Callback fired when the open attribute changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Whether the overlay should close on blur.\n   * @defaultValue false\n   */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Id used for the accessible label of the overlay\n   */\n  'aria-labelledby'?: string;\n}\n\n/**\n * @public\n */\nexport type UseOverlayWithTriggerProps = UseOverlayWithTriggerBaseProps &\n  (\n    | UseOverlayWithTriggerUncontrolledProps\n    | UseOverlayWithTriggerControlledProps\n  );\n\n/**\n * @public\n */\nexport interface OverlayRefs {\n  /**\n   * Use this ref and attach it to the trigger element.\n   * State handling of opening and closing will be automatically attached\n   * to the trigger.\n   */\n  triggerRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n  /**\n   * Use this ref to attach it to the overlaying element. This is used\n   * to correctly position the overlay on the screen.\n   */\n  overlayRef: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Use this ref in order to give the overlay its anchoring element.\n   * The overlaying element will attach to the target element by following\n   * the provided placement and placementFallback strategies.\n   * If the triggerRef and targetRef should be on the same element, consider\n   * using the `useMergeRefs` from the package core to combine target and trigger\n   * refs.\n   */\n  targetRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n}\n\n/**\n * Type used for defining the 'data-ismodal' property, as well as modal accessibility and styling properties.\n * @public\n */\nexport interface ModalAriaProps extends HTMLAttributes<HTMLElement> {\n  /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n  'data-ismodal'?: boolean;\n}\n\n/**\n * @public\n */\nexport interface OverlayProps {\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps: ModalAriaProps & Pick<UseOverlayWithTriggerProps, 'trapFocus'>;\n  /**\n   * Overlay state, which contains information about the open/closed state of the overlay,\n   * as well as opening/closing/toggling methods.\n   */\n  overlayState: OverlayTriggerState;\n  /**\n   * Props for the OverlayContainer component, used in order to ensure correct\n   * zIndex stacking.\n   */\n  overlayContainerProps: Record<string, unknown>;\n}\n\n/**\n * @deprecated Will be removed. Use `OverlayWithTriggerReturnType` to access `overlayTriggerProps` instead. `hasError` was never set.\n * @public\n */\nexport interface OverlayTriggerProps {\n  /** Properties for the behavior and accessibility of the overlay trigger. */\n  overlayTriggerProps: ButtonAria<AnchorHTMLAttributes<HTMLElement>> &\n    AriaButtonProps;\n  /** Whether or not the trigger is used within a component in an error state. */\n  hasError?: boolean;\n}\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @deprecated Will be removed. Use `TriggerProps` instead\n * @public\n */\nexport type OverlayWithTriggerProps = OverlayRefs &\n  OverlayProps &\n  OverlayWithTriggerReturnType['overlayTriggerProps'];\n\n/**\n * Type reflecting the properties for the behavior and accessibility of the overlay trigger.\n * @public\n */\nexport type TriggerProps = Pick<\n  AriaBaseButtonProps,\n  'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'type'\n> &\n  Pick<\n    DOMAttributes<Element & HTMLOrSVGElement>,\n    | 'onKeyDown'\n    | 'onKeyUp'\n    | 'onClick'\n    | 'onMouseDown'\n    | 'onMouseUp'\n    | 'onPointerDown'\n    | 'onPointerUp'\n    | 'onDragStart'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onTouchStart'\n    | 'onTouchEnd'\n    | 'onTouchMove'\n    | 'onTouchCancel'\n  > & {\n    /** Whether the trigger is disabled. */\n    disabled?: boolean;\n  };\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @public\n */\nexport type OverlayWithTriggerReturnType = OverlayRefs &\n  OverlayProps & {\n    /** Properties for the behavior and accessibility of the overlay trigger. */\n    overlayTriggerProps: TriggerProps;\n  };\n//#endregion Typings\n\n/**\n * Returns the value for 'aria-haspopup' depending on the type.\n * @internal\n */\nfunction getAriaHasPopup(\n  type: string,\n): boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined {\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  if (type === 'menu') {\n    return true;\n  } else if (type === 'listbox') {\n    return 'listbox';\n  }\n  return undefined;\n}\n\n/**\n * Custom hook used for overlays with trigger.\n * @public\n */\nexport function useOverlayWithTrigger(\n  props: UseOverlayWithTriggerProps = {},\n): OverlayWithTriggerReturnType {\n  const {\n    placement = 'bottom',\n    placementFallbacks = ['top'],\n    offset = 0,\n    crossOffset = 0,\n    additionalElevation,\n    disabled = false,\n    widthStrategy = 'content',\n    heightStrategy = 'content',\n    trapFocus = false,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    shouldCloseOnBlur = false,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  // Create the refs needed for the overlay\n  const [targetElement, setTargetElement] = useStateRef<HTMLElement>();\n  const [overlayElement, setOverlayElement, overlayRef] =\n    useStateRef<HTMLElement>();\n  const [, setTriggerElement, triggerRef] = useStateRef<HTMLElement>();\n\n  const overlayContainerProps = useOverlayStacking(\n    undefined,\n    additionalElevation,\n  );\n\n  // Create state for handling opening/closing of the calendar overlay\n  const overlayState = useOverlayTriggerState({\n    defaultOpen,\n    isOpen: open,\n    onOpenChange,\n  });\n  const { isOpen, close, toggle } = overlayState;\n\n  const overlayId = useId();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && isOpen) {\n        const overlay = document.getElementById(`${overlayId}`);\n\n        if (overlay) {\n          const firstFocusableChild = _getFirstFocusableChild(overlay);\n          const lastFocusableChild = _getLastFocusableChild(overlay);\n\n          // No focusable children.\n          if (!firstFocusableChild) {\n            e.preventDefault();\n            close();\n            return;\n          }\n\n          const isFirstFocusable = firstFocusableChild === e.target;\n          const isLastFocusable = lastFocusableChild === e.target;\n\n          if (\n            !trapFocus &&\n            ((e.shiftKey && isFirstFocusable) ||\n              (!e.shiftKey && isLastFocusable))\n          ) {\n            e.preventDefault();\n            close();\n          }\n        }\n      }\n    },\n    [close, isOpen, overlayId, trapFocus],\n  );\n\n  // Initialize the trigger to get the correct aria props and connections\n  // between the trigger and the overlay.\n  const triggerProps = {\n    'aria-haspopup': getAriaHasPopup('dialog'),\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? overlayId : undefined,\n    onKeyDown,\n  };\n\n  // usePress ensures that focus management is handled correctly across all\n  // browsers. Focus is restored to the button once the popover closes.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { pressProps } = usePress({\n    onPress: toggle,\n    isDisabled: disabled,\n  });\n\n  const { styles: positioningStyles, attributes: positioningAttributes } =\n    usePopper(targetElement, overlayElement, {\n      placement: placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [crossOffset, offset],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [placement, ...placementFallbacks],\n          },\n        },\n        overlayWidthStrategyHandling,\n        {\n          name: 'overlayWidthStrategyHandling',\n          enabled: widthStrategy !== 'content',\n          options: { widthStrategy },\n        },\n        overlayHeightStrategyHandling,\n        {\n          name: 'overlayHeightStrategyHandling',\n          enabled: heightStrategy !== 'content',\n          options: { heightStrategy },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      isOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        const triggerElement = isFormControlRef(triggerRef)\n          ? triggerRef.element\n          : triggerRef;\n\n        // If there is no trigger element, skip trigger hit check\n        if (triggerElement === null) {\n          return true;\n        }\n\n        // Prevent the dismiss when clicking on the trigger itself.\n        // This enables the trigger to handle the toggling, instead of keeping\n        // it inside an endless loop.\n        return (\n          element !== triggerRef.current &&\n          triggerRef.current?.contains(element) === false\n        );\n      },\n      onClose: () => {\n        close();\n      },\n      shouldCloseOnBlur,\n    },\n    overlayRef,\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps } = useDialog({ 'aria-labelledby': ariaLabelledBy });\n\n  useKeyboardInteractionOutside({\n    ref: overlayRef,\n    isDisabled: !isOpen,\n    onInteractOutside: (event) => {\n      if ((event as unknown as KeyboardEvent).key === 'Escape') {\n        close();\n      }\n    },\n  });\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTriggerElement = useCallback(\n    (triggerRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTriggerElement = isFormControlRef(triggerRef)\n        ? triggerRef.element\n        : (triggerRef as HTMLElement | null);\n      setTriggerElement(newTriggerElement);\n    },\n    [setTriggerElement],\n  );\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTargetElement = useCallback(\n    (targetRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTargetElement = isFormControlRef(targetRef)\n        ? targetRef.element\n        : (targetRef as HTMLElement | null);\n      setTargetElement(newTargetElement);\n    },\n    [setTargetElement],\n  );\n\n  return {\n    triggerRef: updateTriggerElement,\n    targetRef: updateTargetElement,\n    overlayRef: setOverlayElement,\n    overlayProps: {\n      ..._mergeProps(\n        overlayProps,\n        dialogProps,\n        // we also need to add the onKeyDown handler in here for closing overlays with interactive content when tabbing and shouldCloseOnBlur is false (default)\n        // if shouldCloseOnBlur is set to true, the focus handlers from the returned useOverlay overlayProps take care of the closing\n        // if there's no interactive content, the trigger keeps the focus, so the onKeyDown event from the triggerProps takes care of closing\n        { onKeyDown: shouldCloseOnBlur ? undefined : onKeyDown },\n        { style: positioningStyles.popper, id: overlayId, trapFocus },\n        positioningAttributes.popper,\n      ),\n    },\n    overlayContainerProps,\n    overlayState,\n    overlayTriggerProps: _mergeProps(pressProps, triggerProps, {\n      type: 'button' as AriaBaseButtonProps['type'],\n      disabled,\n    }),\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAC/B;AAAA,EAGE;AAAA,OAIK;AACP,SAAS,iBAAiB;AAI1B,SAAS,iBAAiB;AAC1B,SAAS,qCAAqC;AAC9C;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAM5B,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,OACK;AACP,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,yBAAyB,8BAA8B;AAChE,SAAS,cAAc,mBAAmB;AAE1C,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAuPP,SAAS,gBACP,MACuE;AAKvE,MAAI,SAAS,QAAQ;AACnB,WAAO;AAAA,EACT,WAAW,SAAS,WAAW;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAMO,SAAS,sBACd,QAAoC,CAAC,GACP;AAC9B,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,qBAAqB,CAAC,KAAK;AAAA,IAC3B,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EACrB,IAAI;AAGJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,YAAyB;AACnE,QAAM,CAAC,gBAAgB,mBAAmB,UAAU,IAClD,YAAyB;AAC3B,QAAM,CAAC,EAAE,mBAAmB,UAAU,IAAI,YAAyB;AAEnE,QAAM,wBAAwB;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AAGA,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AACD,QAAM,EAAE,QAAQ,OAAO,OAAO,IAAI;AAElC,QAAM,YAAY,MAAM;AAExB,QAAM,YAAY;AAAA,IAChB,CAAC,MAAqB;AACpB,UAAI,EAAE,QAAQ,SAAS,QAAQ;AAC7B,cAAM,UAAU,SAAS,eAAe,GAAG,SAAS,EAAE;AAEtD,YAAI,SAAS;AACX,gBAAM,sBAAsB,wBAAwB,OAAO;AAC3D,gBAAM,qBAAqB,uBAAuB,OAAO;AAGzD,cAAI,CAAC,qBAAqB;AACxB,cAAE,eAAe;AACjB,kBAAM;AACN;AAAA,UACF;AAEA,gBAAM,mBAAmB,wBAAwB,EAAE;AACnD,gBAAM,kBAAkB,uBAAuB,EAAE;AAEjD,cACE,CAAC,cACC,EAAE,YAAY,oBACb,CAAC,EAAE,YAAY,kBAClB;AACA,cAAE,eAAe;AACjB,kBAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,WAAW,SAAS;AAAA,EACtC;AAIA,QAAM,eAAe;AAAA,IACnB,iBAAiB,gBAAgB,QAAQ;AAAA,IACzC,iBAAiB;AAAA,IACjB,iBAAiB,SAAS,YAAY;AAAA,IACtC;AAAA,EACF;AAKA,QAAM,EAAE,WAAW,IAAI,SAAS;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,EACd,CAAC;AAED,QAAM,EAAE,QAAQ,mBAAmB,YAAY,sBAAsB,IACnE,UAAU,eAAe,gBAAgB;AAAA,IACvC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ,CAAC,aAAa,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,oBAAoB,CAAC,WAAW,GAAG,kBAAkB;AAAA,QACvD;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS,kBAAkB;AAAA,QAC3B,SAAS,EAAE,cAAc;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS,mBAAmB;AAAA,QAC5B,SAAS,EAAE,eAAe;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAIH,QAAM,EAAE,aAAa,IAAI;AAAA,IACvB;AAAA,MACE;AAAA,MACA,eAAe;AAAA,MACf,8BAA8B,CAAC,YAAY;AACzC,cAAM,iBAAiB,iBAAiB,UAAU,IAC9C,WAAW,UACX;AAGJ,YAAI,mBAAmB,MAAM;AAC3B,iBAAO;AAAA,QACT;AAKA,eACE,YAAY,WAAW,WACvB,WAAW,SAAS,SAAS,OAAO,MAAM;AAAA,MAE9C;AAAA,MACA,SAAS,MAAM;AACb,cAAM;AAAA,MACR;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAGA,QAAM,EAAE,YAAY,IAAI,UAAU,EAAE,mBAAmB,eAAe,CAAC;AAEvE,gCAA8B;AAAA,IAC5B,KAAK;AAAA,IACL,YAAY,CAAC;AAAA,IACb,mBAAmB,CAAC,UAAU;AAC5B,UAAK,MAAmC,QAAQ,UAAU;AACxD,cAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF,CAAC;AAGD,QAAM,uBAAuB;AAAA,IAC3B,CAACA,gBAAoE;AACnE,YAAM,oBAAoB,iBAAiBA,WAAU,IACjDA,YAAW,UACVA;AACL,wBAAkB,iBAAiB;AAAA,IACrC;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAGA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,cAAmE;AAClE,YAAM,mBAAmB,iBAAiB,SAAS,IAC/C,UAAU,UACT;AACL,uBAAiB,gBAAgB;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,MACZ,GAAG;AAAA,QACD;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA,EAAE,WAAW,oBAAoB,SAAY,UAAU;AAAA,QACvD,EAAE,OAAO,kBAAkB,QAAQ,IAAI,WAAW,UAAU;AAAA,QAC5D,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB,YAAY,YAAY,cAAc;AAAA,MACzD,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport {\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  useCallback,\n  type SetStateAction,\n  type Dispatch,\n  type DOMAttributes,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useDialog } from './useDialog.js';\nimport { useKeyboardInteractionOutside } from './useKeyboardInteractionOutside.js';\nimport {\n  OverlayTriggerState,\n  useOverlay,\n  useOverlayTriggerState,\n} from './useOverlay.js';\nimport { usePress } from './usePress.js';\nimport { useStateRef } from './useStateRef.js';\nimport type {\n  AriaBaseButtonProps,\n  AriaButtonProps,\n  ButtonAria,\n} from '../../buttons/button/types/button-aria.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport {\n  Elevation,\n  useOverlayStacking,\n} from '../../core/hooks/useOverlayStacking.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { getLastFocusableChild as _getLastFocusableChild } from '../../core/utils/focus-management/get-last-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport type { FormControlRef } from '../../forms/shared-types.js';\nimport { isFormControlRef } from '../../forms/shared-types.js';\nimport type { HeightStrategy, WidthStrategy } from '../types/sizing.types.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n  overlayHeightStrategyHandling,\n  overlayWidthStrategyHandling,\n} from '../utils/popper-modifiers.js';\n\n//#region Typings\n/**\n * @public\n */\nexport type OverlayPlacement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end';\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerUncontrolledProps {\n  /**\n   * Whether the overlay is open by default.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open?: never;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerControlledProps {\n  /**\n   * Whether the overlay is open by default.\n   */\n  defaultOpen?: never;\n  /**\n   * Determines whether or not the overlay is open in a controlled scenario.\n   */\n  open: boolean;\n}\n\n/**\n * @public\n */\nexport interface UseOverlayWithTriggerBaseProps {\n  /**\n   * Placement of the overlay\n   * @defaultValue 'bottom'\n   */\n  placement?: OverlayPlacement;\n  /**\n   * Alternative positions that will be assumed if the original placement will not fit\n   * @defaultValue ['top']\n   */\n  placementFallbacks?: OverlayPlacement[];\n  /**\n   * Offset between overlay and target element\n   * @defaultValue 0\n   */\n  offset?: number;\n  /**\n   * Offset along the cross axis between the overlay and target element\n   * @defaultValue 0\n   */\n  crossOffset?: number;\n  /**\n   * An additional z-index elevation value to add to the one derived from the stacking order\n   */\n  additionalElevation?: Elevation;\n  /**\n   * Whether the trigger is disabled or not\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Defines which strategy to use for setting the overlay width\n   * @defaultValue 'content'\n   */\n  widthStrategy?: WidthStrategy;\n  /**\n   * Defines which strategy to use for setting the overlay height\n   * @defaultValue 'content'\n   */\n  heightStrategy?: HeightStrategy;\n  /**\n   * Whether the overlay should trap the focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean;\n  /**\n   * Callback fired when the open attribute changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Whether the overlay should close on blur.\n   * @defaultValue false\n   */\n  shouldCloseOnBlur?: boolean;\n  /**\n   * Id used for the accessible label of the overlay\n   */\n  'aria-labelledby'?: string;\n}\n\n/**\n * @public\n */\nexport type UseOverlayWithTriggerProps = UseOverlayWithTriggerBaseProps &\n  (\n    | UseOverlayWithTriggerUncontrolledProps\n    | UseOverlayWithTriggerControlledProps\n  );\n\n/**\n * @public\n */\nexport interface OverlayRefs {\n  /**\n   * Use this ref and attach it to the trigger element.\n   * State handling of opening and closing will be automatically attached\n   * to the trigger.\n   */\n  triggerRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n  /**\n   * Use this ref to attach it to the overlaying element. This is used\n   * to correctly position the overlay on the screen.\n   */\n  overlayRef: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Use this ref in order to give the overlay its anchoring element.\n   * The overlaying element will attach to the target element by following\n   * the provided placement and placementFallback strategies.\n   * If the triggerRef and targetRef should be on the same element, consider\n   * using the `useMergeRefs` from the package core to combine target and trigger\n   * refs.\n   */\n  targetRef: Dispatch<SetStateAction<HTMLElement | FormControlRef | null>>;\n}\n\n/**\n * Type used for defining the 'data-ismodal' property, as well as modal accessibility and styling properties.\n * @public\n */\nexport interface ModalAriaProps extends HTMLAttributes<HTMLElement> {\n  /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */\n  'data-ismodal'?: boolean;\n}\n\n/**\n * @public\n */\nexport interface OverlayProps {\n  /**\n   * Properties for connecting the overlay to the overlay trigger.\n   * Includes styles and accessibility attributes.\n   */\n  overlayProps: ModalAriaProps & Pick<UseOverlayWithTriggerProps, 'trapFocus'>;\n  /**\n   * Overlay state, which contains information about the open/closed state of the overlay,\n   * as well as opening/closing/toggling methods.\n   */\n  overlayState: OverlayTriggerState;\n  /**\n   * Props for the OverlayContainer component, used in order to ensure correct\n   * zIndex stacking.\n   */\n  overlayContainerProps: Record<string, unknown>;\n}\n\n/**\n * @deprecated Will be removed. Use `OverlayWithTriggerReturnType` to access `overlayTriggerProps` instead. `hasError` was never set.\n * @public\n */\nexport interface OverlayTriggerProps {\n  /** Properties for the behavior and accessibility of the overlay trigger. */\n  overlayTriggerProps: ButtonAria<AnchorHTMLAttributes<HTMLElement>> &\n    AriaButtonProps;\n  /** Whether or not the trigger is used within a component in an error state. */\n  hasError?: boolean;\n}\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @deprecated Will be removed. Use `TriggerProps` instead\n * @public\n */\nexport type OverlayWithTriggerProps = OverlayRefs &\n  OverlayProps &\n  OverlayWithTriggerReturnType['overlayTriggerProps'];\n\n/**\n * Type reflecting the properties for the behavior and accessibility of the overlay trigger.\n * @public\n */\nexport type TriggerProps = Pick<\n  AriaBaseButtonProps,\n  'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'type'\n> &\n  Pick<\n    DOMAttributes<Element & HTMLOrSVGElement>,\n    | 'onKeyDown'\n    | 'onKeyUp'\n    | 'onClick'\n    | 'onMouseDown'\n    | 'onMouseUp'\n    | 'onPointerDown'\n    | 'onPointerUp'\n    | 'onDragStart'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onTouchStart'\n    | 'onTouchEnd'\n    | 'onTouchMove'\n    | 'onTouchCancel'\n  > & {\n    /** Whether the trigger is disabled. */\n    disabled?: boolean;\n  };\n\n/**\n * Properties for spreading onto the trigger and overlay container, handling the\n * behavior and accessibility of the trigger and overlay.\n * @public\n */\nexport type OverlayWithTriggerReturnType = OverlayRefs &\n  OverlayProps & {\n    /** Properties for the behavior and accessibility of the overlay trigger. */\n    overlayTriggerProps: TriggerProps;\n  };\n//#endregion Typings\n\n/**\n * Returns the value for 'aria-haspopup' depending on the type.\n * @internal\n */\nfunction getAriaHasPopup(\n  type: string,\n): boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined {\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  if (type === 'menu') {\n    return true;\n  } else if (type === 'listbox') {\n    return 'listbox';\n  }\n  return undefined;\n}\n\n/**\n * Custom hook used for overlays with trigger.\n * @public\n */\nexport function useOverlayWithTrigger(\n  props: UseOverlayWithTriggerProps = {},\n): OverlayWithTriggerReturnType {\n  const {\n    placement = 'bottom',\n    placementFallbacks = ['top'],\n    offset = 0,\n    crossOffset = 0,\n    additionalElevation,\n    disabled = false,\n    widthStrategy = 'content',\n    heightStrategy = 'content',\n    trapFocus = false,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    shouldCloseOnBlur = false,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  // Create the refs needed for the overlay\n  const [targetElement, setTargetElement] = useStateRef<HTMLElement>();\n  const [overlayElement, setOverlayElement, overlayRef] =\n    useStateRef<HTMLElement>();\n  const [, setTriggerElement, triggerRef] = useStateRef<HTMLElement>();\n\n  const overlayContainerProps = useOverlayStacking(\n    undefined,\n    additionalElevation,\n  );\n\n  // Create state for handling opening/closing of the calendar overlay\n  const overlayState = useOverlayTriggerState({\n    defaultOpen,\n    isOpen: open,\n    onOpenChange,\n  });\n  const { isOpen, close, toggle } = overlayState;\n\n  const overlayId = useId();\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && isOpen) {\n        const overlay = document.getElementById(`${overlayId}`);\n\n        if (overlay) {\n          const firstFocusableChild = _getFirstFocusableChild(overlay);\n          const lastFocusableChild = _getLastFocusableChild(overlay);\n\n          // No focusable children.\n          if (!firstFocusableChild) {\n            e.preventDefault();\n            close();\n            return;\n          }\n\n          const isFirstFocusable = firstFocusableChild === e.target;\n          const isLastFocusable = lastFocusableChild === e.target;\n\n          if (\n            !trapFocus &&\n            ((e.shiftKey && isFirstFocusable) ||\n              (!e.shiftKey && isLastFocusable))\n          ) {\n            e.preventDefault();\n            close();\n          }\n        }\n      }\n    },\n    [close, isOpen, overlayId, trapFocus],\n  );\n\n  // Initialize the trigger to get the correct aria props and connections\n  // between the trigger and the overlay.\n  const triggerProps = {\n    'aria-haspopup': getAriaHasPopup('dialog'),\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? overlayId : undefined,\n    onKeyDown,\n  };\n\n  // usePress ensures that focus management is handled correctly across all\n  // browsers. Focus is restored to the button once the popover closes.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { pressProps } = usePress({\n    onPress: toggle,\n    isDisabled: disabled,\n  });\n\n  const { styles: positioningStyles, attributes: positioningAttributes } =\n    usePopper(targetElement, overlayElement, {\n      placement: placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [crossOffset, offset],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [placement, ...placementFallbacks],\n          },\n        },\n        overlayWidthStrategyHandling,\n        {\n          name: 'overlayWidthStrategyHandling',\n          enabled: widthStrategy !== 'content',\n          options: { widthStrategy },\n        },\n        overlayHeightStrategyHandling,\n        {\n          name: 'overlayHeightStrategyHandling',\n          enabled: heightStrategy !== 'content',\n          options: { heightStrategy },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps } = useOverlay(\n    {\n      isOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        const triggerElement = isFormControlRef(triggerRef)\n          ? triggerRef.element\n          : triggerRef;\n\n        // If there is no trigger element, skip trigger hit check\n        if (triggerElement === null) {\n          return true;\n        }\n\n        // Prevent the dismiss when clicking on the trigger itself.\n        // This enables the trigger to handle the toggling, instead of keeping\n        // it inside an endless loop.\n        return (\n          element !== triggerRef.current &&\n          triggerRef.current?.contains(element) === false\n        );\n      },\n      onClose: () => {\n        close();\n      },\n      shouldCloseOnBlur,\n    },\n    overlayRef,\n  );\n\n  // Get props for the dialog and its title.\n  // Strip the auto-generated aria-labelledby from useDialog to avoid a dangling\n  // reference to a non-existent element (WCAG violation). Only pass it through\n  // when the caller explicitly provides it.\n  const { dialogProps } = useDialog({});\n  const { 'aria-labelledby': _unused, ...dialogPropsWithoutLabelledBy } =\n    dialogProps;\n\n  useKeyboardInteractionOutside({\n    ref: overlayRef,\n    isDisabled: !isOpen,\n    onInteractOutside: (event) => {\n      if ((event as unknown as KeyboardEvent).key === 'Escape') {\n        close();\n      }\n    },\n  });\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTriggerElement = useCallback(\n    (triggerRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTriggerElement = isFormControlRef(triggerRef)\n        ? triggerRef.element\n        : (triggerRef as HTMLElement | null);\n      setTriggerElement(newTriggerElement);\n    },\n    [setTriggerElement],\n  );\n\n  // A passed ref could be a regular DOM ref or our newly introduced FormControlRef imperative handler\n  const updateTargetElement = useCallback(\n    (targetRef: SetStateAction<HTMLElement | FormControlRef | null>) => {\n      const newTargetElement = isFormControlRef(targetRef)\n        ? targetRef.element\n        : (targetRef as HTMLElement | null);\n      setTargetElement(newTargetElement);\n    },\n    [setTargetElement],\n  );\n\n  return {\n    triggerRef: updateTriggerElement,\n    targetRef: updateTargetElement,\n    overlayRef: setOverlayElement,\n    overlayProps: {\n      ..._mergeProps(\n        overlayProps,\n        { ...dialogPropsWithoutLabelledBy, 'aria-labelledby': ariaLabelledBy },\n        // we also need to add the onKeyDown handler in here for closing overlays with interactive content when tabbing and shouldCloseOnBlur is false (default)\n        // if shouldCloseOnBlur is set to true, the focus handlers from the returned useOverlay overlayProps take care of the closing\n        // if there's no interactive content, the trigger keeps the focus, so the onKeyDown event from the triggerProps takes care of closing\n        { onKeyDown: shouldCloseOnBlur ? undefined : onKeyDown },\n        { style: positioningStyles.popper, id: overlayId, trapFocus },\n        positioningAttributes.popper,\n      ),\n    },\n    overlayContainerProps,\n    overlayState,\n    overlayTriggerProps: _mergeProps(pressProps, triggerProps, {\n      type: 'button' as AriaBaseButtonProps['type'],\n      disabled,\n    }),\n  };\n}\n"],
+  "mappings": "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",
   "names": ["triggerRef"]
 }