@dynatrace/strato-components 3.1.3 → 3.2.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  type ReactNode,\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  DrawerBackdropCSS,\n  DrawerCSS,\n  DrawerContentCSS,\n  DrawerPlacementCSS,\n  DrawerWidthStyles,\n} from './Drawer.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { type OverlayAria, useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Drawer';\n\n//#region Props\n\n/**\n * Props for the {@link _Drawer} component.\n * @internal\n */\nexport type DrawerProps = WithChildren &\n  StylingProps &\n  DataTestId & {\n    /** Handler that is called when the Drawer should be dismissed e.g. when pressing `ESC` or clicking on the backdrop. */\n    onDismiss: (state: boolean, reason: string) => void;\n    /** If the Drawer is currently dismissed or open. */\n    isDismissed: boolean;\n    /**\n     * The side from which the Drawer enters and takes up the most space.\n     * @defaultValue 'right'\n     */\n    placement?: 'left' | 'right';\n    /**\n     * The width of the Drawer. It supports predefined values and px, vw, rem and %.\n     * @defaultValue 'medium'\n     */\n    width?:\n      | 'narrow'\n      | 'medium'\n      | 'wide'\n      | 'full'\n      | `${number}px`\n      | `${number}vw`\n      | `${number}rem`\n      | `${number}%`;\n    /**\n     * The modality of the drawer.\n     * When set to true, interaction with outside elements will be disabled and\n     * only drawer content will be visible to screen readers.\n     * @defaultValue true\n     */\n    modal?: boolean;\n    /**\n     * Whether the animations should be disabled.\n     * @defaultValue false\n     */\n    disableAnimations?: boolean;\n  };\n\n//#endregion\n\n//#region animations\nconst slideAnimation = ($placement: 'left' | 'right') => ({\n  visible: {\n    x: '0',\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: slideInEasing,\n    },\n    // Workaround to fix remaining style (transform: translateX(0)) on Drawer\n    // as this breaks any child element with position: fixed\n    // https://github.com/framer/motion/issues/823\n    transitionEnd: {\n      x: 0,\n    },\n  },\n  hidden: {\n    x: $placement === 'left' ? '-100%' : '100%',\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: slideOutEasing,\n    },\n  },\n});\n\nconst fade = {\n  fadeIn: {\n    // For the opacity we need to use the default value here. Framer motion would complain\n    // about too complex values, when transitioning from two custom property values within\n    // an rgba value apparently.\n    opacity: 1,\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: fadeInEasing,\n    },\n  },\n  fadeOut: {\n    opacity: 0,\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: fadeOutEasing,\n    },\n  },\n};\n//#endregion\n\n/**\n * A drawer component that slides in from the side and displays additional content. Its presence is fully controlled by props.\n * @internal\n */\nexport const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(\n  (props, forwardedRef) => {\n    const {\n      placement = 'right',\n      width = 'medium',\n      isDismissed,\n      onDismiss,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      modal = true,\n      'data-testid': dataTestId,\n      disableAnimations = false,\n      ...remainingProps\n    }: DrawerProps = props;\n    const ref = useRef(null);\n    const { overlayProps } = useOverlay(\n      {\n        onClose: (reason) => {\n          onDismiss(true, reason);\n        },\n        isOpen: !isDismissed,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    const mergedRefs = useMergeRefs([ref, forwardedRef]);\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n\n    return (\n      <AnimatePresence>\n        {!isDismissed && (\n          <OverlayContainer\n            data-testid=\"drawer-container\"\n            {...overlayContainerProps}\n            style={{\n              ...overlayContainerProps.style,\n              pointerEvents: modal ? undefined : 'none',\n            }}\n          >\n            <DrawerBackdrop\n              modal={modal}\n              overlayProps={overlayProps}\n              onDismiss={onDismiss}\n              disableAnimations={disableAnimations}\n            >\n              <motion.div\n                data-testid={dataTestId}\n                ref={mergedRefs}\n                variants={disableAnimations ? {} : slideAnimation(placement)}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"hidden\"\n                onAnimationComplete={() =>\n                  window.dispatchEvent(new Event('animationDone'))\n                }\n                // Prevents that focus is lost when clicking on non-focusable items inside.\n                // Probably worth considering moving that to the focusScope when redoing the overlays.\n                tabIndex={-1}\n                className={clsx(\n                  consumerClassName,\n                  DrawerCSS,\n                  DrawerPlacementCSS[placement],\n                  {\n                    [DrawerWidthStyles.narrow]: width === 'narrow',\n                    [DrawerWidthStyles.medium]: width === 'medium',\n                    [DrawerWidthStyles.wide]: width === 'wide',\n                    [DrawerWidthStyles.full]: width === 'full',\n                  },\n                )}\n                style={{\n                  width:\n                    // Avoid binding the predefined named widths to the style, but add any other values\n                    width !== 'narrow' &&\n                    width !== 'medium' &&\n                    width !== 'wide' &&\n                    width !== 'full'\n                      ? width\n                      : undefined,\n                  ...consumerStyle,\n                }}\n                {...remainingProps}\n                data-dt-component={COMPONENT_NAME}\n              >\n                <FocusScope autoFocus contain={modal}>\n                  <motion.div\n                    variants={disableAnimations ? {} : fade}\n                    initial=\"fadeOut\"\n                    animate=\"fadeIn\"\n                    exit=\"fadeOut\"\n                    className={DrawerContentCSS}\n                  >\n                    <OverlayStackingProvider>\n                      {children}\n                    </OverlayStackingProvider>\n                  </motion.div>\n                </FocusScope>\n              </motion.div>\n            </DrawerBackdrop>\n          </OverlayContainer>\n        )}\n      </AnimatePresence>\n    );\n  },\n);\n\ntype DrawerBackdropProps = {\n  children: ReactNode;\n  modal: boolean;\n  onDismiss: (state: boolean, reason: string) => void;\n  overlayProps: OverlayAria['overlayProps'];\n  disableAnimations: boolean;\n};\n\nconst DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { children, modal, disableAnimations, onDismiss, overlayProps } = props;\n\n  return (\n    <motion.div\n      variants={disableAnimations ? {} : fade}\n      initial=\"fadeOut\"\n      animate=\"fadeIn\"\n      exit=\"fadeOut\"\n      data-testid=\"drawer-backdrop\"\n      className={DrawerBackdropCSS}\n      style={{\n        pointerEvents: modal\n          ? undefined\n          : ('none' as CSSProperties['pointerEvents']),\n        backgroundColor: modal ? Colors.Background.Surface.Backdrop : undefined,\n      }}\n      onPointerDown={(event: ReactMouseEvent) => {\n        if (modal === true && event.target === event.currentTarget) {\n          // The useOverlay hook keeps an internal state of the stacked overlays.\n          // However, some overlays don't rely on the hook; hence the list isn't complete\n          // and the overlay is dismissed when clicking on any not registered overlay.\n          // (e.g. Microguide would not influence the dismissing but can't be added to\n          // the list either, because it is always on top and shouldn't be closed)\n          // Therefore, the sheet is manually dismissed on backdrop click.\n          // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n          onDismiss(true, 'backdrop');\n        }\n      }}\n      {...(overlayProps as Record<string, unknown>)}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  type ReactNode,\n  forwardRef,\n  useRef,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  DrawerBackdropCSS,\n  DrawerCSS,\n  DrawerContentCSS,\n  DrawerPlacementCSS,\n  DrawerWidthStyles,\n} from './Drawer.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { type OverlayAria, useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Drawer';\n\n//#region Props\n\n/**\n * Props for the {@link _Drawer} component.\n * @internal\n */\nexport type DrawerProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /** Handler that is called when the Drawer should be dismissed e.g. when pressing `ESC` or clicking on the backdrop. */\n    onDismiss: (state: boolean, reason: string) => void;\n    /** If the Drawer is currently dismissed or open. */\n    isDismissed: boolean;\n    /**\n     * The side from which the Drawer enters and takes up the most space.\n     * @defaultValue 'right'\n     */\n    placement?: 'left' | 'right';\n    /**\n     * The width of the Drawer. It supports predefined values and px, vw, rem and %.\n     * @defaultValue 'medium'\n     */\n    width?:\n      | 'narrow'\n      | 'medium'\n      | 'wide'\n      | 'full'\n      | `${number}px`\n      | `${number}vw`\n      | `${number}rem`\n      | `${number}%`;\n    /**\n     * The modality of the drawer.\n     * When set to true, interaction with outside elements will be disabled and\n     * only drawer content will be visible to screen readers.\n     * @defaultValue true\n     */\n    modal?: boolean;\n    /**\n     * Whether the animations should be disabled.\n     * @defaultValue false\n     */\n    disableAnimations?: boolean;\n  };\n\n//#endregion\n\n//#region animations\nconst slideAnimation = ($placement: 'left' | 'right') => ({\n  visible: {\n    x: '0',\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: slideInEasing,\n    },\n    // Workaround to fix remaining style (transform: translateX(0)) on Drawer\n    // as this breaks any child element with position: fixed\n    // https://github.com/framer/motion/issues/823\n    transitionEnd: {\n      x: 0,\n    },\n  },\n  hidden: {\n    x: $placement === 'left' ? '-100%' : '100%',\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: slideOutEasing,\n    },\n  },\n});\n\nconst fade = {\n  fadeIn: {\n    // For the opacity we need to use the default value here. Framer motion would complain\n    // about too complex values, when transitioning from two custom property values within\n    // an rgba value apparently.\n    opacity: 1,\n    transition: {\n      duration: AnimationsJS.SlideIn.Duration.Slow,\n      ease: fadeInEasing,\n    },\n  },\n  fadeOut: {\n    opacity: 0,\n    transition: {\n      duration: AnimationsJS.SlideOut.Duration.Slow,\n      ease: fadeOutEasing,\n    },\n  },\n};\n//#endregion\n\n/**\n * A drawer component that slides in from the side and displays additional content. Its presence is fully controlled by props.\n * @internal\n */\nexport const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(\n  (props, forwardedRef) => {\n    const {\n      placement = 'right',\n      width = 'medium',\n      isDismissed,\n      onDismiss,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      modal = true,\n      'data-testid': dataTestId,\n      disableAnimations = false,\n      ...remainingProps\n    }: DrawerProps = props;\n    const ref = useRef(null);\n    const { overlayProps } = useOverlay(\n      {\n        onClose: (reason) => {\n          onDismiss(true, reason);\n        },\n        isOpen: !isDismissed,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const mergedRefs = useMergeRefs([ref, forwardedRef]);\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n\n    return (\n      <AnimatePresence>\n        {!isDismissed && (\n          <OverlayContainer\n            data-testid=\"drawer-container\"\n            {...overlayContainerProps}\n            style={{\n              ...overlayContainerProps.style,\n              pointerEvents: modal ? undefined : 'none',\n            }}\n          >\n            <DrawerBackdrop\n              modal={modal}\n              overlayProps={overlayProps}\n              onDismiss={onDismiss}\n              disableAnimations={disableAnimations}\n            >\n              <motion.div\n                data-testid={dataTestId}\n                ref={mergedRefs}\n                variants={disableAnimations ? {} : slideAnimation(placement)}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"hidden\"\n                onAnimationComplete={() =>\n                  window.dispatchEvent(new Event('animationDone'))\n                }\n                // Prevents that focus is lost when clicking on non-focusable items inside.\n                // Probably worth considering moving that to the focusScope when redoing the overlays.\n                tabIndex={-1}\n                className={clsx(\n                  consumerClassName,\n                  DrawerCSS,\n                  DrawerPlacementCSS[placement],\n                  {\n                    [DrawerWidthStyles.narrow]: width === 'narrow',\n                    [DrawerWidthStyles.medium]: width === 'medium',\n                    [DrawerWidthStyles.wide]: width === 'wide',\n                    [DrawerWidthStyles.full]: width === 'full',\n                  },\n                )}\n                style={{\n                  width:\n                    // Avoid binding the predefined named widths to the style, but add any other values\n                    width !== 'narrow' &&\n                    width !== 'medium' &&\n                    width !== 'wide' &&\n                    width !== 'full'\n                      ? width\n                      : undefined,\n                  ...consumerStyle,\n                }}\n                {...restProps}\n                {...behavioralTrackingProps}\n                data-dt-component={COMPONENT_NAME}\n              >\n                <FocusScope autoFocus contain={modal}>\n                  <motion.div\n                    variants={disableAnimations ? {} : fade}\n                    initial=\"fadeOut\"\n                    animate=\"fadeIn\"\n                    exit=\"fadeOut\"\n                    className={DrawerContentCSS}\n                  >\n                    <OverlayStackingProvider>\n                      {children}\n                    </OverlayStackingProvider>\n                  </motion.div>\n                </FocusScope>\n              </motion.div>\n            </DrawerBackdrop>\n          </OverlayContainer>\n        )}\n      </AnimatePresence>\n    );\n  },\n);\n\ntype DrawerBackdropProps = {\n  children: ReactNode;\n  modal: boolean;\n  onDismiss: (state: boolean, reason: string) => void;\n  overlayProps: OverlayAria['overlayProps'];\n  disableAnimations: boolean;\n};\n\nconst DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { children, modal, disableAnimations, onDismiss, overlayProps } = props;\n\n  return (\n    <motion.div\n      variants={disableAnimations ? {} : fade}\n      initial=\"fadeOut\"\n      animate=\"fadeIn\"\n      exit=\"fadeOut\"\n      data-testid=\"drawer-backdrop\"\n      className={DrawerBackdropCSS}\n      style={{\n        pointerEvents: modal\n          ? undefined\n          : ('none' as CSSProperties['pointerEvents']),\n        backgroundColor: modal ? Colors.Background.Surface.Backdrop : undefined,\n      }}\n      onPointerDown={(event: ReactMouseEvent) => {\n        if (modal === true && event.target === event.currentTarget) {\n          // The useOverlay hook keeps an internal state of the stacked overlays.\n          // However, some overlays don't rely on the hook; hence the list isn't complete\n          // and the overlay is dismissed when clicking on any not registered overlay.\n          // (e.g. Microguide would not influence the dismissing but can't be added to\n          // the list either, because it is always on top and shouldn't be closed)\n          // Therefore, the sheet is manually dismissed on backdrop click.\n          // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n          onDismiss(true, 'backdrop');\n        }\n      }}\n      {...(overlayProps as Record<string, unknown>)}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"],
+  "mappings": "AA2OoB;AA3OpB,OAAO,UAAU;AACjB,SAAS,iBAAiB,cAAc;AACxC;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,kBAAkB;AACzB,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAKxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAA2B,kBAAkB;AAE7C,MAAM,iBAAiB;AAmDvB,MAAM,iBAAiB,CAAC,gBAAkC;AAAA,EACxD,SAAS;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,MACV,UAAU,aAAa,QAAQ,SAAS;AAAA,MACxC,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,eAAe;AAAA,MACb,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,GAAG,eAAe,SAAS,UAAU;AAAA,IACrC,YAAY;AAAA,MACV,UAAU,aAAa,SAAS,SAAS;AAAA,MACzC,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU,aAAa,QAAQ,SAAS;AAAA,MACxC,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU,aAAa,SAAS,SAAS;AAAA,MACzC,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOO,MAAM,SAAyB;AAAA,EACpC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAiB;AACjB,UAAM,MAAM,OAAO,IAAI;AACvB,UAAM,EAAE,aAAa,IAAI;AAAA,MACvB;AAAA,QACE,SAAS,CAAC,WAAW;AACnB,oBAAU,MAAM,MAAM;AAAA,QACxB;AAAA,QACA,QAAQ,CAAC;AAAA,QACT,eAAe;AAAA,QACf,2BAA2B;AAAA,MAC7B;AAAA,MACA;AAAA,IACF;AAEA,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM,aAAa,aAAa,CAAC,KAAK,YAAY,CAAC;AACnD,UAAM,wBAAwB,mBAAmB,GAAG,SAAS;AAE7D,WACE,oBAAC,mBACE,WAAC,eACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACX,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,GAAG,sBAAsB;AAAA,UACzB,eAAe,QAAQ,SAAY;AAAA,QACrC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC,OAAO;AAAA,cAAP;AAAA,gBACC,eAAa;AAAA,gBACb,KAAK;AAAA,gBACL,UAAU,oBAAoB,CAAC,IAAI,eAAe,SAAS;AAAA,gBAC3D,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,qBAAqB,MACnB,OAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,gBAIjD,UAAU;AAAA,gBACV,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,mBAAmB,SAAS;AAAA,kBAC5B;AAAA,oBACE,CAAC,kBAAkB,MAAM,GAAG,UAAU;AAAA,oBACtC,CAAC,kBAAkB,MAAM,GAAG,UAAU;AAAA,oBACtC,CAAC,kBAAkB,IAAI,GAAG,UAAU;AAAA,oBACpC,CAAC,kBAAkB,IAAI,GAAG,UAAU;AAAA,kBACtC;AAAA,gBACF;AAAA,gBACA,OAAO;AAAA,kBACL;AAAA;AAAA,oBAEE,UAAU,YACV,UAAU,YACV,UAAU,UACV,UAAU,SACN,QACA;AAAA;AAAA,kBACN,GAAG;AAAA,gBACL;AAAA,gBACC,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,qBAAmB;AAAA,gBAEnB,8BAAC,cAAW,WAAS,MAAC,SAAS,OAC7B;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACC,UAAU,oBAAoB,CAAC,IAAI;AAAA,oBACnC,SAAQ;AAAA,oBACR,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,WAAW;AAAA,oBAEX,8BAAC,2BACE,UACH;AAAA;AAAA,gBACF,GACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GAEJ;AAAA,EAEJ;AACF;AAUA,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,mBAAmB,WAAW,aAAa,IAAI;AAExE,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,UAAU,oBAAoB,CAAC,IAAI;AAAA,MACnC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,QACL,eAAe,QACX,SACC;AAAA,QACL,iBAAiB,QAAQ,OAAO,WAAW,QAAQ,WAAW;AAAA,MAChE;AAAA,MACA,eAAe,CAAC,UAA2B;AACzC,YAAI,UAAU,QAAQ,MAAM,WAAW,MAAM,eAAe;AAQ1D,oBAAU,MAAM,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-1-3";
-var DrawerCSS = "_14971970-3-1-3";
-var DrawerContentCSS = "_14971978-3-1-3";
-var DrawerPlacementCSS = { left: "_14971971-3-1-3", right: "_14971972-3-1-3" };
-var DrawerWidthStyles = { narrow: "_14971973-3-1-3", medium: "_14971974-3-1-3", wide: "_14971975-3-1-3", full: "_14971976-3-1-3" };
+var DrawerBackdropCSS = "_14971977-3-2-0";
+var DrawerCSS = "_14971970-3-2-0";
+var DrawerContentCSS = "_14971978-3-2-0";
+var DrawerPlacementCSS = { left: "_14971971-3-2-0", right: "_14971972-3-2-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-2-0", medium: "_14971974-3-2-0", wide: "_14971975-3-2-0", full: "_14971976-3-2-0" };
 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-1-3';\nexport var DrawerCSS = '_14971970-3-1-3';\nexport var DrawerContentCSS = '_14971978-3-1-3';\nexport var DrawerPlacementCSS = {left:'_14971971-3-1-3',right:'_14971972-3-1-3'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-1-3',medium:'_14971974-3-1-3',wide:'_14971975-3-1-3',full:'_14971976-3-1-3'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-2-0';\nexport var DrawerCSS = '_14971970-3-2-0';\nexport var DrawerContentCSS = '_14971978-3-2-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-2-0',right:'_14971972-3-2-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-2-0',medium:'_14971974-3-2-0',wide:'_14971975-3-2-0',full:'_14971976-3-2-0'};"],
   "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

@@ -33,6 +33,10 @@ function useOverlay(props, ref) {
   } = props;
   const overlayStacking = useContext(OverlayStackingContext);
   const hasPendingCloseRef = useRef(false);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
   useEffect(() => {
     if (!isOpen) {
       hasPendingCloseRef.current = false;
@@ -40,7 +44,7 @@ function useOverlay(props, ref) {
   }, [isOpen]);
   const requestClose = useCallback(
     (reason, onlyIfTopMost = true) => {
-      if (!onClose || !isOpen || hasPendingCloseRef.current) {
+      if (!onCloseRef.current || !isOpen || hasPendingCloseRef.current) {
         return;
       }
       if (onlyIfTopMost) {
@@ -50,12 +54,12 @@ function useOverlay(props, ref) {
         }
       }
       hasPendingCloseRef.current = true;
-      onClose(reason);
+      onCloseRef.current(reason);
     },
-    [isOpen, onClose, ref]
+    [isOpen, ref]
   );
   useEffect(() => {
-    if (isOpen && onClose) {
+    if (isOpen && onCloseRef.current) {
       const entry = {
         ref,
         stackingLevel: overlayStacking,
@@ -75,7 +79,7 @@ function useOverlay(props, ref) {
         visibleOverlays.splice(index, 1);
       }
     };
-  }, [isOpen, ref, onClose, overlayStacking, requestClose]);
+  }, [isOpen, ref, overlayStacking, requestClose]);
   const onInteractOutside = (e) => {
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
       requestClose("backdrop");

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  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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",
+  "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  // Store onClose in a ref so that changes to the callback don't re-trigger\n  // the visibleOverlays effect, which would disrupt the stack ordering.\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\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 (!onCloseRef.current || !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      onCloseRef.current(reason);\n    },\n    [isOpen, 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 && onCloseRef.current) {\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, 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/modal/Modal.css

@@ -1,4 +1,4 @@
-._dmotjm0-3-1-3 {
+._dmotjm0-3-2-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -11,16 +11,16 @@
   background: var(--dt-colors-background-surface-default, #fff);
   overflow-y: auto;
 }
-._dmotjm1-3-1-3 {
+._dmotjm1-3-2-0 {
   max-width: 576px;
 }
-._dmotjm2-3-1-3 {
+._dmotjm2-3-2-0 {
   max-width: 768px;
 }
-._dmotjm3-3-1-3 {
+._dmotjm3-3-2-0 {
   max-width: 1280px;
 }
-._dmotjm4-3-1-3 {
+._dmotjm4-3-2-0 {
   position: fixed;
   top: 0;
   left: 0;
@@ -32,7 +32,7 @@
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
   z-index: var(--dt-elevations-default, 1);
 }
-._dmotjm5-3-1-3 {
+._dmotjm5-3-2-0 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -40,7 +40,7 @@
   padding: var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-24, 24px) var(--dt-spacings-size-8, 8px);
 }
 @supports not (height: 1dvh) {
-  ._dmotjm0-3-1-3 {
+  ._dmotjm0-3-2-0 {
     max-height: 96vh;
   }
 }

package/esm/overlays/modal/Modal.js

@@ -5,6 +5,7 @@ import { XmarkIcon } from "@dynatrace/strato-icons";
 import { BaseModal } from "./BaseModal.js";
 import * as styles from "./Modal.sty.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
 import { Divider } from "../../layouts/divider/Divider.js";
@@ -36,7 +37,8 @@ const Modal = /* @__PURE__ */ forwardRef(
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       className: consumerClassName,
-      style: consumerStyle
+      style: consumerStyle,
+      ...remainingProps
     } = props;
     const visualHeadingSize = getVisualHeadingLevelForSize(size);
     const intl = useIntl();
@@ -47,6 +49,7 @@ const Modal = /* @__PURE__ */ forwardRef(
       description: "Aria-label for close modal button."
     });
     const hasCustomTitle = !_canReceiveDefaultTextFormat(title);
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     return /* @__PURE__ */ jsxs(
       BaseModal,
       {
@@ -61,6 +64,8 @@ const Modal = /* @__PURE__ */ forwardRef(
         "data-dtrum-allow": dataDtrumAllow,
         className: consumerClassName,
         style: consumerStyle,
+        ...restProps,
+        ...behavioralTrackingProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
@@ -84,6 +89,7 @@ const Modal = /* @__PURE__ */ forwardRef(
                 onClick: onDismiss,
                 "aria-label": closeButtonLabel,
                 variant: "default",
+                "data-dt-name": "CloseModal",
                 children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
               }
             )

package/esm/overlays/modal/Modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/modal/Modal.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactNode, type ReactElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { BaseModalProps, BaseModal } from './BaseModal.js';\nimport * as styles from './Modal.sty.js';\nimport type { ModalSizeOptionsType } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { Heading } from '../../typography/heading/Heading.js';\n\nconst COMPONENT_NAME = 'Modal';\n\n/**\n * @public\n */\nexport interface ModalProps extends WithChildren, BaseModalProps {\n  /** Title of the modal, which is shown in the header section. */\n  title: string | ReactElement;\n  /** Footer section of the modal, where customized content can be added. */\n  footer?: ReactNode;\n}\n\n/** Determines the visual heading level for a modal size */\nfunction getVisualHeadingLevelForSize(\n  size: ModalSizeOptionsType,\n): 1 | 2 | 3 | 4 | 5 | 6 {\n  switch (size) {\n    case 'small':\n      return 5;\n    case 'medium':\n    case 'large':\n      return 4;\n    default:\n      return 4;\n  }\n}\n\n/**\n * The `Modal` component lets you show important, additional content in an overlay.\n * @public\n */\nexport const Modal = /* @__PURE__ */ forwardRef<HTMLDivElement, ModalProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      footer,\n      size = 'medium',\n      children,\n      onDismiss,\n      dismissible = true,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n    } = props;\n\n    const visualHeadingSize = getVisualHeadingLevelForSize(size);\n\n    const intl = useIntl();\n\n    const headerId = useId();\n\n    const closeButtonLabel = intl.formatMessage({\n      defaultMessage: 'Close modal',\n      id: 'aB3uCeB71q6UURBy',\n      description: 'Aria-label for close modal button.',\n    });\n\n    const hasCustomTitle = !_canReceiveDefaultTextFormat(title);\n\n    return (\n      <BaseModal\n        aria-labelledby={headerId}\n        show={show}\n        size={size}\n        onDismiss={onDismiss}\n        dismissible={dismissible}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <header className={styles.header}>\n          {hasCustomTitle ? (\n            <div style={{ display: 'contents' }} id={headerId}>\n              {title}\n            </div>\n          ) : (\n            <Heading\n              id={headerId}\n              level={visualHeadingSize}\n              as=\"h2\"\n              style={{\n                wordBreak: 'normal',\n                overflowWrap: 'anywhere',\n              }}\n            >\n              {title}\n            </Heading>\n          )}\n          {dismissible && (\n            <Button\n              style={{ alignSelf: 'start' }}\n              onClick={onDismiss}\n              aria-label={closeButtonLabel}\n              variant=\"default\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </header>\n        {(children || footer) && (\n          <div\n            className={globalSprinkles({\n              paddingBottom: 0,\n              paddingTop: 0,\n              paddingLeft: 24,\n              paddingRight: 24,\n            })}\n          >\n            <Divider />\n          </div>\n        )}\n        {children && (\n          <div\n            className={globalSprinkles({\n              paddingTop: 12,\n              paddingRight: 24,\n              paddingLeft: 24,\n              paddingBottom: footer !== undefined ? 12 : 24,\n            })}\n            style={{ overflowY: 'auto' }}\n          >\n            {children}\n          </div>\n        )}\n        {footer && (\n          <footer\n            className={globalSprinkles({\n              display: 'flex',\n              alignItems: 'flex-end',\n              justifyContent: 'flex-end',\n              paddingBottom: 24,\n              paddingTop: 12,\n              paddingLeft: 24,\n              paddingRight: 24,\n            })}\n          >\n            {footer}\n          </footer>\n        )}\n      </BaseModal>\n    );\n  },\n);\n(Modal as typeof Modal & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type ReactNode, type ReactElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { BaseModalProps, BaseModal } from './BaseModal.js';\nimport * as styles from './Modal.sty.js';\nimport type { ModalSizeOptionsType } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { Heading } from '../../typography/heading/Heading.js';\n\nconst COMPONENT_NAME = 'Modal';\n\n/**\n * @public\n */\nexport interface ModalProps\n  extends WithChildren,\n    BaseModalProps,\n    BehaviorTrackingProps {\n  /** Title of the modal, which is shown in the header section. */\n  title: string | ReactElement;\n  /** Footer section of the modal, where customized content can be added. */\n  footer?: ReactNode;\n}\n\n/** Determines the visual heading level for a modal size */\nfunction getVisualHeadingLevelForSize(\n  size: ModalSizeOptionsType,\n): 1 | 2 | 3 | 4 | 5 | 6 {\n  switch (size) {\n    case 'small':\n      return 5;\n    case 'medium':\n    case 'large':\n      return 4;\n    default:\n      return 4;\n  }\n}\n\n/**\n * The `Modal` component lets you show important, additional content in an overlay.\n * @public\n */\nexport const Modal = /* @__PURE__ */ forwardRef<HTMLDivElement, ModalProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      footer,\n      size = 'medium',\n      children,\n      onDismiss,\n      dismissible = true,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const visualHeadingSize = getVisualHeadingLevelForSize(size);\n\n    const intl = useIntl();\n\n    const headerId = useId();\n\n    const closeButtonLabel = intl.formatMessage({\n      defaultMessage: 'Close modal',\n      id: 'aB3uCeB71q6UURBy',\n      description: 'Aria-label for close modal button.',\n    });\n\n    const hasCustomTitle = !_canReceiveDefaultTextFormat(title);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <BaseModal\n        aria-labelledby={headerId}\n        show={show}\n        size={size}\n        onDismiss={onDismiss}\n        dismissible={dismissible}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...restProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <header className={styles.header}>\n          {hasCustomTitle ? (\n            <div style={{ display: 'contents' }} id={headerId}>\n              {title}\n            </div>\n          ) : (\n            <Heading\n              id={headerId}\n              level={visualHeadingSize}\n              as=\"h2\"\n              style={{\n                wordBreak: 'normal',\n                overflowWrap: 'anywhere',\n              }}\n            >\n              {title}\n            </Heading>\n          )}\n          {dismissible && (\n            <Button\n              style={{ alignSelf: 'start' }}\n              onClick={onDismiss}\n              aria-label={closeButtonLabel}\n              variant=\"default\"\n              data-dt-name=\"CloseModal\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </header>\n        {(children || footer) && (\n          <div\n            className={globalSprinkles({\n              paddingBottom: 0,\n              paddingTop: 0,\n              paddingLeft: 24,\n              paddingRight: 24,\n            })}\n          >\n            <Divider />\n          </div>\n        )}\n        {children && (\n          <div\n            className={globalSprinkles({\n              paddingTop: 12,\n              paddingRight: 24,\n              paddingLeft: 24,\n              paddingBottom: footer !== undefined ? 12 : 24,\n            })}\n            style={{ overflowY: 'auto' }}\n          >\n            {children}\n          </div>\n        )}\n        {footer && (\n          <footer\n            className={globalSprinkles({\n              display: 'flex',\n              alignItems: 'flex-end',\n              justifyContent: 'flex-end',\n              paddingBottom: 24,\n              paddingTop: 12,\n              paddingLeft: 24,\n              paddingRight: 24,\n            })}\n          >\n            {footer}\n          </footer>\n        )}\n      </BaseModal>\n    );\n  },\n);\n(Modal as typeof Modal & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/overlays/modal/Modal.sty.js

@@ -1,8 +1,8 @@
 import "./Modal.css";
-var backdrop = "_dmotjm4-3-1-3";
-var base = "_dmotjm0-3-1-3";
-var header = "_dmotjm5-3-1-3";
-var sizes = { small: "_dmotjm1-3-1-3", medium: "_dmotjm2-3-1-3", large: "_dmotjm3-3-1-3" };
+var backdrop = "_dmotjm4-3-2-0";
+var base = "_dmotjm0-3-2-0";
+var header = "_dmotjm5-3-2-0";
+var sizes = { small: "_dmotjm1-3-2-0", medium: "_dmotjm2-3-2-0", large: "_dmotjm3-3-2-0" };
 export {
   backdrop,
   base,

package/esm/overlays/modal/Modal.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/modal/Modal.css.ts"],
-  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-1-3';\nexport var base = '_dmotjm0-3-1-3';\nexport var header = '_dmotjm5-3-1-3';\nexport var sizes = {small:'_dmotjm1-3-1-3',medium:'_dmotjm2-3-1-3',large:'_dmotjm3-3-1-3'};"],
+  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-2-0';\nexport var base = '_dmotjm0-3-2-0';\nexport var header = '_dmotjm5-3-2-0';\nexport var sizes = {small:'_dmotjm1-3-2-0',medium:'_dmotjm2-3-2-0',large:'_dmotjm3-3-2-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,SAAS;AACb,IAAI,QAAQ,EAAC,OAAM,kBAAiB,QAAO,kBAAiB,OAAM,iBAAgB;",
   "names": []
 }

package/esm/overlays/overlay/Overlay.css

@@ -1,4 +1,4 @@
-._1dhu6810-3-1-3 {
+._1dhu6810-3-2-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);

package/esm/overlays/overlay/Overlay.sty.js

@@ -1,5 +1,5 @@
 import "./Overlay.css";
-var overlayCSS = "_1dhu6810-3-1-3";
+var overlayCSS = "_1dhu6810-3-2-0";
 export {
   overlayCSS
 };

package/esm/overlays/overlay/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/overlay/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-1-3';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-1-3 {
+._d76u1n0-3-2-0 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-1-3 {
+._d76u1n1-3-2-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -25,16 +25,16 @@
   padding-bottom: var(--dt-spacings-size-16, 16px);
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n1-3-1-3:after {
+._d76u1n1-3-2-0:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-1-3 {
+._d76u1n2-3-2-0 {
   overflow: auto;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-1-3 {
+._d76u1n3-3-2-0 {
   height: 100vh;
   position: fixed;
   top: 0;
@@ -43,7 +43,7 @@
   z-index: var(--dt-elevations-overlay, 20);
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
 }
-._d76u1n4-3-1-3 {
+._d76u1n4-3-2-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }

package/esm/overlays/sheet/Sheet.js

@@ -17,6 +17,7 @@ import {
 import { FocusScope } from "../../core/components/focus-scope/FocusScope.js";
 import { OverlayContainer } from "../../core/components/OverlayContainer.js";
 import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useContainerSize } from "../../core/hooks/useContainerSize.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -124,6 +125,7 @@ const Sheet = /* @__PURE__ */ forwardRef(
       },
       ref
     );
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const childrenScopeRef = useRef(null);
     const actionScopeRef = useRef(null);
     const focusFirstChildElement = () => {
@@ -154,6 +156,8 @@ const Sheet = /* @__PURE__ */ forwardRef(
         "data-dtrum-allow": dataDtrumAllow,
         style: { ...overlayContainerProps.style, ...consumerStyle },
         className: consumerClassName,
+        ...restProps,
+        ...behavioralTrackingProps,
         "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsx(
           motion.div,

package/esm/overlays/sheet/Sheet.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/sheet/Sheet.tsx"],
-  "sourcesContent": ["import { AnimatePresence, motion, Variants } from 'framer-motion';\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport { calculateBreakpointFromContainerSize } from './sheet-container-utils.js';\nimport {\n  sheetBackdropCSS,\n  sheetCSS,\n  sheetHeadingCSS,\n  sheetScrollableContainerCSS,\n  sheetWrapperCSS,\n} from './Sheet.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.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 { WithChildren } from '../../core/types/with-children.js';\nimport { attemptFocus as _attemptFocus } from '../../core/utils/focus-management/attempt-focus.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Heading } from '../../typography/heading/Heading.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Sheet';\n\n/**\n * @public\n */\nexport interface SheetProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The title which is displayed at the top of the sheet. */\n  title?: string;\n\n  /**\n   * Toggles the visibility of the sheet component.\n   * @defaultValue false\n   */\n  show?: boolean;\n\n  /**\n   * The offset to the top of the App which should not be covered.\n   * @defaultValue 28\n   */\n  topoffset?: number;\n\n  /**\n   * Actions will be rendered to the top right, next to the title.\n   * They usually contain buttons like 'Apply' or 'Cancel'.\n   */\n  actions?: ReactNode;\n\n  /** Handler that is only called if the sheet is closed with the Escape key. */\n  onDismiss?: () => void;\n}\n\n/** Animation variants */\nconst getAnimationVariants = (topOffset: number): Record<string, Variants> => ({\n  backdrop: {\n    enterBackdrop: {\n      // For the opacity we need to use the default value here. Framer motion would complain\n      // about too complex values, when transitioning from two custom property values within\n      // an rgba value apparently.\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.FadeIn.Duration.Fast,\n        ease: fadeInEasing,\n      },\n    },\n    exitBackdrop: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.FadeOut.Duration.Fast,\n        ease: fadeOutEasing,\n        delay: AnimationsJS.FadeOut.Duration.Base,\n      },\n    },\n  },\n  sheet: {\n    enterSlide: {\n      top: topOffset,\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: slideInEasing,\n      },\n    },\n    exitSlide: () => ({\n      top: `calc(${topOffset}px + 10%)`,\n      opacity: 0.3,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: slideOutEasing,\n      },\n    }),\n  },\n  content: {\n    enterFade: {\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: fadeInEasing,\n      },\n    },\n    exitFade: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: fadeOutEasing,\n      },\n    },\n  },\n});\n\n/**\n * The `Sheet` component allows you to show additional content in an overlay of your\n * application. It is essential to add at least one focusable element\n * inside the `Sheet` to be keyboard accessible. If none is available the\n * focus will be lost and given to the `window.document` when opening the\n * sheet.\n *\n * The developer is responsible for the sheet's visibility via\n * the `show` prop. This prop must be updated to false in the `onDismiss`\n * callback to ensure keyboard accessibility.\n * @public\n */\nexport const Sheet = /* @__PURE__ */ forwardRef<HTMLDivElement, SheetProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      children,\n      onDismiss,\n      actions,\n      topoffset = 28,\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 { 'aria-labelledby': ariaLabelledBy, ...ariaLabelingProps } =\n      _useAriaLabelingProps(remainingProps);\n\n    const ref = useRef(null);\n    const animationVariants = getAnimationVariants(topoffset);\n\n    // adds all aria labels to dialog as well as tabindex & role\n    const { dialogProps } = useDialog(remainingProps);\n\n    // Handle interacting outside the dialog and pressing the Escape key to\n    // close the sheet.\n    const { overlayProps } = useOverlay(\n      {\n        ...props,\n        onClose: () => {\n          onDismiss?.();\n        },\n        isOpen: show,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    // Scope the passed children to be able to focus the first element of children\n    const childrenScopeRef = useRef<HTMLDivElement>(null);\n    const actionScopeRef = useRef<HTMLDivElement>(null);\n\n    const focusFirstChildElement = () => {\n      if (childrenScopeRef.current && actionScopeRef.current) {\n        let firstFocusableChild = _getFirstFocusableChild(\n          childrenScopeRef.current,\n        );\n\n        // If we do not find an interactive element in the children\n        // search for one in the actions.\n        if (!firstFocusableChild) {\n          firstFocusableChild = _getFirstFocusableChild(actionScopeRef.current);\n        }\n\n        firstFocusableChild &&\n          _attemptFocus(firstFocusableChild as HTMLElement);\n      }\n    };\n\n    // Get the ref from the grid container to calculate its size.\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const containerSize = useContainerSize(containerRef);\n\n    const mergedRef = useMergeRefs([containerRef, forwardedRef]);\n\n    const breakpointStyle = useMemo<CSSProperties>(\n      () => calculateBreakpointFromContainerSize(containerSize),\n      [containerSize],\n    );\n\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n    const headingId = useId();\n\n    return (\n      <OverlayContainer\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={{ ...overlayContainerProps.style, ...consumerStyle }}\n        className={consumerClassName}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <AnimatePresence>\n          {show && (\n            <motion.div\n              // Within this container the animation is rendered. The applied\n              // style contains an important overflow: hidden which prevents\n              // ugly moving scrollbars during the animation.\n              variants={animationVariants.backdrop}\n              initial=\"exitBackdrop\"\n              animate=\"enterBackdrop\"\n              exit=\"exitBackdrop\"\n              className={sheetWrapperCSS}\n            >\n              <div\n                // Transparent div which prevents the user from clicking\n                // main page elements on the left or right of the sheet.\n                ref={mergedRef}\n                onPointerDown={(event: ReactMouseEvent) => {\n                  if (event.target === event.currentTarget) {\n                    // The useOverlay hook keeps an internal state of the stacked overlays.\n                    // However, some overlays don't rely on the hook; hence the list isn't complete\n                    // and the overlay is dismissed when clicking on any not registered overlay.\n                    // (e.g. Microguide would not influence the dismissing but can't be added to\n                    // the list either, because it is always on top and shouldn't be closed)\n                    // Therefore, the sheet is manually dismissed on backdrop click.\n                    // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n                    onDismiss?.();\n                  }\n                }}\n                className={sheetBackdropCSS}\n              >\n                <FocusScope\n                  // If no focusable children are provided the default focus\n                  // is on the actions. This makes sense anyways and more\n                  // importantly is needed to even make a sheet without\n                  // focusable children dismissible with the Escape key.\n                  contain\n                >\n                  <motion.div\n                    // The react-aria spread needs to be cast to Record<string, any> as there\n                    // is a mismatch between lib.dom HTMLElement and the\n                    // react-synthetic event and spreads can only be applied on objects.\n                    {...(_mergeProps(overlayProps, dialogProps, {\n                      style: breakpointStyle,\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    }) as Record<string, any>)}\n                    className={sheetCSS}\n                    data-ismodal={true}\n                    variants={animationVariants.sheet}\n                    initial=\"exitSlide\"\n                    animate=\"enterSlide\"\n                    exit=\"exitSlide\"\n                    onAnimationComplete={() => {\n                      show && focusFirstChildElement();\n                      window.dispatchEvent(new Event('animationDone'));\n                    }}\n                    ref={ref}\n                    aria-labelledby={ariaLabelledBy ?? headingId}\n                    {...ariaLabelingProps}\n                  >\n                    <motion.div\n                      className={sheetScrollableContainerCSS}\n                      style={{ height: `calc(100% - ${topoffset}px)` }}\n                      variants={animationVariants.content}\n                      initial=\"exitFade\"\n                      animate=\"enterFade\"\n                      exit=\"exitFade\"\n                    >\n                      <OverlayStackingProvider>\n                        <Flex gap={16} flexDirection=\"column\" height=\"100%\">\n                          {(title || actions) && (\n                            <Flex\n                              justifyContent={\n                                title ? 'space-between' : 'flex-end'\n                              }\n                              alignItems=\"flex-start\"\n                            >\n                              {title && (\n                                <Heading\n                                  level={5}\n                                  as=\"h2\"\n                                  id={headingId}\n                                  className={sheetHeadingCSS}\n                                >\n                                  {title}\n                                </Heading>\n                              )}\n                              {actions && (\n                                <Flex\n                                  flexWrap=\"wrap\"\n                                  justifyContent=\"flex-end\"\n                                  ref={actionScopeRef}\n                                >\n                                  {actions}\n                                </Flex>\n                              )}\n                            </Flex>\n                          )}\n                          <div\n                            ref={childrenScopeRef}\n                            style={{\n                              position: 'relative',\n                              height: '100%',\n                              minHeight: 0,\n                            }}\n                          >\n                            {children}\n                          </div>\n                        </Flex>\n                      </OverlayStackingProvider>\n                    </motion.div>\n                  </motion.div>\n                </FocusScope>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </OverlayContainer>\n    );\n  },\n);\n(Sheet as typeof Sheet & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAoT4B,SAOI,KAPJ;AApT5B,SAAS,iBAAiB,cAAwB;AAClD;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OAEK;AAEP,OAAO,kBAAkB;AAEzB,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAMxC,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,0BAA0B,+BAA+B;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAE3B,MAAM,iBAAiB;AAqCvB,MAAM,uBAAuB,CAAC,eAAiD;AAAA,EAC7E,UAAU;AAAA,IACR,eAAe;AAAA;AAAA;AAAA;AAAA,MAIb,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,OAAO,SAAS;AAAA,QACvC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,QAAQ,SAAS;AAAA,QACxC,MAAM;AAAA,QACN,OAAO,aAAa,QAAQ,SAAS;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,KAAK;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,QAAQ,SAAS;AAAA,QACxC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,WAAW,OAAO;AAAA,MAChB,KAAK,QAAQ,SAAS;AAAA,MACtB,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,SAAS,SAAS;AAAA,QACzC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,QAAQ,SAAS;AAAA,QACxC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,QACV,UAAU,aAAa,SAAS,SAAS;AAAA,QACzC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAcO,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,EAAE,mBAAmB,gBAAgB,GAAG,kBAAkB,IAC9D,sBAAsB,cAAc;AAEtC,UAAM,MAAM,OAAO,IAAI;AACvB,UAAM,oBAAoB,qBAAqB,SAAS;AAGxD,UAAM,EAAE,YAAY,IAAI,UAAU,cAAc;AAIhD,UAAM,EAAE,aAAa,IAAI;AAAA,MACvB;AAAA,QACE,GAAG;AAAA,QACH,SAAS,MAAM;AACb,sBAAY;AAAA,QACd;AAAA,QACA,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,2BAA2B;AAAA,MAC7B;AAAA,MACA;AAAA,IACF;AAGA,UAAM,mBAAmB,OAAuB,IAAI;AACpD,UAAM,iBAAiB,OAAuB,IAAI;AAElD,UAAM,yBAAyB,MAAM;AACnC,UAAI,iBAAiB,WAAW,eAAe,SAAS;AACtD,YAAI,sBAAsB;AAAA,UACxB,iBAAiB;AAAA,QACnB;AAIA,YAAI,CAAC,qBAAqB;AACxB,gCAAsB,wBAAwB,eAAe,OAAO;AAAA,QACtE;AAEA,+BACE,cAAc,mBAAkC;AAAA,MACpD;AAAA,IACF;AAGA,UAAM,eAAe,OAAuB,IAAI;AAEhD,UAAM,gBAAgB,iBAAiB,YAAY;AAEnD,UAAM,YAAY,aAAa,CAAC,cAAc,YAAY,CAAC;AAE3D,UAAM,kBAAkB;AAAA,MACtB,MAAM,qCAAqC,aAAa;AAAA,MACxD,CAAC,aAAa;AAAA,IAChB;AAEA,UAAM,wBAAwB,mBAAmB,GAAG,SAAS;AAC7D,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,OAAO,EAAE,GAAG,sBAAsB,OAAO,GAAG,cAAc;AAAA,QAC1D,WAAW;AAAA,QACX,qBAAmB;AAAA,QAEnB,8BAAC,mBACE,kBACC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAIC,UAAU,kBAAkB;AAAA,YAC5B,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAW;AAAA,YAEX;AAAA,cAAC;AAAA;AAAA,gBAGC,KAAK;AAAA,gBACL,eAAe,CAAC,UAA2B;AACzC,sBAAI,MAAM,WAAW,MAAM,eAAe;AAQxC,gCAAY;AAAA,kBACd;AAAA,gBACF;AAAA,gBACA,WAAW;AAAA,gBAEX;AAAA,kBAAC;AAAA;AAAA,oBAKC,SAAO;AAAA,oBAEP;AAAA,sBAAC,OAAO;AAAA,sBAAP;AAAA,wBAIE,GAAI,YAAY,cAAc,aAAa;AAAA,0BAC1C,OAAO;AAAA;AAAA,wBAET,CAAC;AAAA,wBACD,WAAW;AAAA,wBACX,gBAAc;AAAA,wBACd,UAAU,kBAAkB;AAAA,wBAC5B,SAAQ;AAAA,wBACR,SAAQ;AAAA,wBACR,MAAK;AAAA,wBACL,qBAAqB,MAAM;AACzB,kCAAQ,uBAAuB;AAC/B,iCAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,wBACjD;AAAA,wBACA;AAAA,wBACA,mBAAiB,kBAAkB;AAAA,wBAClC,GAAG;AAAA,wBAEJ;AAAA,0BAAC,OAAO;AAAA,0BAAP;AAAA,4BACC,WAAW;AAAA,4BACX,OAAO,EAAE,QAAQ,eAAe,SAAS,MAAM;AAAA,4BAC/C,UAAU,kBAAkB;AAAA,4BAC5B,SAAQ;AAAA,4BACR,SAAQ;AAAA,4BACR,MAAK;AAAA,4BAEL,8BAAC,2BACC,+BAAC,QAAK,KAAK,IAAI,eAAc,UAAS,QAAO,QACzC;AAAA,wCAAS,YACT;AAAA,gCAAC;AAAA;AAAA,kCACC,gBACE,QAAQ,kBAAkB;AAAA,kCAE5B,YAAW;AAAA,kCAEV;AAAA,6CACC;AAAA,sCAAC;AAAA;AAAA,wCACC,OAAO;AAAA,wCACP,IAAG;AAAA,wCACH,IAAI;AAAA,wCACJ,WAAW;AAAA,wCAEV;AAAA;AAAA,oCACH;AAAA,oCAED,WACC;AAAA,sCAAC;AAAA;AAAA,wCACC,UAAS;AAAA,wCACT,gBAAe;AAAA,wCACf,KAAK;AAAA,wCAEJ;AAAA;AAAA,oCACH;AAAA;AAAA;AAAA,8BAEJ;AAAA,8BAEF;AAAA,gCAAC;AAAA;AAAA,kCACC,KAAK;AAAA,kCACL,OAAO;AAAA,oCACL,UAAU;AAAA,oCACV,QAAQ;AAAA,oCACR,WAAW;AAAA,kCACb;AAAA,kCAEC;AAAA;AAAA,8BACH;AAAA,+BACF,GACF;AAAA;AAAA,wBACF;AAAA;AAAA,oBACF;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF,GAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACC,MAAiD,cAAc;",
+  "sourcesContent": ["import { AnimatePresence, motion, Variants } from 'framer-motion';\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport { calculateBreakpointFromContainerSize } from './sheet-container-utils.js';\nimport {\n  sheetBackdropCSS,\n  sheetCSS,\n  sheetHeadingCSS,\n  sheetScrollableContainerCSS,\n  sheetWrapperCSS,\n} from './Sheet.sty.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-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 { WithChildren } from '../../core/types/with-children.js';\nimport { attemptFocus as _attemptFocus } from '../../core/utils/focus-management/attempt-focus.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport {\n  fadeInEasing,\n  fadeOutEasing,\n  slideInEasing,\n  slideOutEasing,\n} from '../../core/utils/framer-motion-easings.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Heading } from '../../typography/heading/Heading.js';\nimport { useDialog } from '../hooks/useDialog.js';\nimport { useOverlay } from '../hooks/useOverlay.js';\n\nconst COMPONENT_NAME = 'Sheet';\n\n/**\n * @public\n */\nexport interface SheetProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The title which is displayed at the top of the sheet. */\n  title?: string;\n\n  /**\n   * Toggles the visibility of the sheet component.\n   * @defaultValue false\n   */\n  show?: boolean;\n\n  /**\n   * The offset to the top of the App which should not be covered.\n   * @defaultValue 28\n   */\n  topoffset?: number;\n\n  /**\n   * Actions will be rendered to the top right, next to the title.\n   * They usually contain buttons like 'Apply' or 'Cancel'.\n   */\n  actions?: ReactNode;\n\n  /** Handler that is only called if the sheet is closed with the Escape key. */\n  onDismiss?: () => void;\n}\n\n/** Animation variants */\nconst getAnimationVariants = (topOffset: number): Record<string, Variants> => ({\n  backdrop: {\n    enterBackdrop: {\n      // For the opacity we need to use the default value here. Framer motion would complain\n      // about too complex values, when transitioning from two custom property values within\n      // an rgba value apparently.\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.FadeIn.Duration.Fast,\n        ease: fadeInEasing,\n      },\n    },\n    exitBackdrop: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.FadeOut.Duration.Fast,\n        ease: fadeOutEasing,\n        delay: AnimationsJS.FadeOut.Duration.Base,\n      },\n    },\n  },\n  sheet: {\n    enterSlide: {\n      top: topOffset,\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: slideInEasing,\n      },\n    },\n    exitSlide: () => ({\n      top: `calc(${topOffset}px + 10%)`,\n      opacity: 0.3,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: slideOutEasing,\n      },\n    }),\n  },\n  content: {\n    enterFade: {\n      opacity: 1,\n      transition: {\n        duration: AnimationsJS.SlideIn.Duration.Slow,\n        ease: fadeInEasing,\n      },\n    },\n    exitFade: {\n      opacity: 0,\n      transition: {\n        duration: AnimationsJS.SlideOut.Duration.Slow,\n        ease: fadeOutEasing,\n      },\n    },\n  },\n});\n\n/**\n * The `Sheet` component allows you to show additional content in an overlay of your\n * application. It is essential to add at least one focusable element\n * inside the `Sheet` to be keyboard accessible. If none is available the\n * focus will be lost and given to the `window.document` when opening the\n * sheet.\n *\n * The developer is responsible for the sheet's visibility via\n * the `show` prop. This prop must be updated to false in the `onDismiss`\n * callback to ensure keyboard accessibility.\n * @public\n */\nexport const Sheet = /* @__PURE__ */ forwardRef<HTMLDivElement, SheetProps>(\n  (props, forwardedRef) => {\n    const {\n      show = false,\n      title,\n      children,\n      onDismiss,\n      actions,\n      topoffset = 28,\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 { 'aria-labelledby': ariaLabelledBy, ...ariaLabelingProps } =\n      _useAriaLabelingProps(remainingProps);\n\n    const ref = useRef(null);\n    const animationVariants = getAnimationVariants(topoffset);\n\n    // adds all aria labels to dialog as well as tabindex & role\n    const { dialogProps } = useDialog(remainingProps);\n\n    // Handle interacting outside the dialog and pressing the Escape key to\n    // close the sheet.\n    const { overlayProps } = useOverlay(\n      {\n        ...props,\n        onClose: () => {\n          onDismiss?.();\n        },\n        isOpen: show,\n        isDismissible: false,\n        isKeyboardDismissDisabled: false,\n      },\n      ref,\n    );\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    // Scope the passed children to be able to focus the first element of children\n    const childrenScopeRef = useRef<HTMLDivElement>(null);\n    const actionScopeRef = useRef<HTMLDivElement>(null);\n\n    const focusFirstChildElement = () => {\n      if (childrenScopeRef.current && actionScopeRef.current) {\n        let firstFocusableChild = _getFirstFocusableChild(\n          childrenScopeRef.current,\n        );\n\n        // If we do not find an interactive element in the children\n        // search for one in the actions.\n        if (!firstFocusableChild) {\n          firstFocusableChild = _getFirstFocusableChild(actionScopeRef.current);\n        }\n\n        firstFocusableChild &&\n          _attemptFocus(firstFocusableChild as HTMLElement);\n      }\n    };\n\n    // Get the ref from the grid container to calculate its size.\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const containerSize = useContainerSize(containerRef);\n\n    const mergedRef = useMergeRefs([containerRef, forwardedRef]);\n\n    const breakpointStyle = useMemo<CSSProperties>(\n      () => calculateBreakpointFromContainerSize(containerSize),\n      [containerSize],\n    );\n\n    const overlayContainerProps = useOverlayStacking(0, 'overlay');\n    const headingId = useId();\n\n    return (\n      <OverlayContainer\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={{ ...overlayContainerProps.style, ...consumerStyle }}\n        className={consumerClassName}\n        {...restProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <AnimatePresence>\n          {show && (\n            <motion.div\n              // Within this container the animation is rendered. The applied\n              // style contains an important overflow: hidden which prevents\n              // ugly moving scrollbars during the animation.\n              variants={animationVariants.backdrop}\n              initial=\"exitBackdrop\"\n              animate=\"enterBackdrop\"\n              exit=\"exitBackdrop\"\n              className={sheetWrapperCSS}\n            >\n              <div\n                // Transparent div which prevents the user from clicking\n                // main page elements on the left or right of the sheet.\n                ref={mergedRef}\n                onPointerDown={(event: ReactMouseEvent) => {\n                  if (event.target === event.currentTarget) {\n                    // The useOverlay hook keeps an internal state of the stacked overlays.\n                    // However, some overlays don't rely on the hook; hence the list isn't complete\n                    // and the overlay is dismissed when clicking on any not registered overlay.\n                    // (e.g. Microguide would not influence the dismissing but can't be added to\n                    // the list either, because it is always on top and shouldn't be closed)\n                    // Therefore, the sheet is manually dismissed on backdrop click.\n                    // This topic will be revisited and aligned with the Overlay Rework (APPDEV-3373).\n                    onDismiss?.();\n                  }\n                }}\n                className={sheetBackdropCSS}\n              >\n                <FocusScope\n                  // If no focusable children are provided the default focus\n                  // is on the actions. This makes sense anyways and more\n                  // importantly is needed to even make a sheet without\n                  // focusable children dismissible with the Escape key.\n                  contain\n                >\n                  <motion.div\n                    // The react-aria spread needs to be cast to Record<string, any> as there\n                    // is a mismatch between lib.dom HTMLElement and the\n                    // react-synthetic event and spreads can only be applied on objects.\n                    {...(_mergeProps(overlayProps, dialogProps, {\n                      style: breakpointStyle,\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    }) as Record<string, any>)}\n                    className={sheetCSS}\n                    data-ismodal={true}\n                    variants={animationVariants.sheet}\n                    initial=\"exitSlide\"\n                    animate=\"enterSlide\"\n                    exit=\"exitSlide\"\n                    onAnimationComplete={() => {\n                      show && focusFirstChildElement();\n                      window.dispatchEvent(new Event('animationDone'));\n                    }}\n                    ref={ref}\n                    aria-labelledby={ariaLabelledBy ?? headingId}\n                    {...ariaLabelingProps}\n                  >\n                    <motion.div\n                      className={sheetScrollableContainerCSS}\n                      style={{ height: `calc(100% - ${topoffset}px)` }}\n                      variants={animationVariants.content}\n                      initial=\"exitFade\"\n                      animate=\"enterFade\"\n                      exit=\"exitFade\"\n                    >\n                      <OverlayStackingProvider>\n                        <Flex gap={16} flexDirection=\"column\" height=\"100%\">\n                          {(title || actions) && (\n                            <Flex\n                              justifyContent={\n                                title ? 'space-between' : 'flex-end'\n                              }\n                              alignItems=\"flex-start\"\n                            >\n                              {title && (\n                                <Heading\n                                  level={5}\n                                  as=\"h2\"\n                                  id={headingId}\n                                  className={sheetHeadingCSS}\n                                >\n                                  {title}\n                                </Heading>\n                              )}\n                              {actions && (\n                                <Flex\n                                  flexWrap=\"wrap\"\n                                  justifyContent=\"flex-end\"\n                                  ref={actionScopeRef}\n                                >\n                                  {actions}\n                                </Flex>\n                              )}\n                            </Flex>\n                          )}\n                          <div\n                            ref={childrenScopeRef}\n                            style={{\n                              position: 'relative',\n                              height: '100%',\n                              minHeight: 0,\n                            }}\n                          >\n                            {children}\n                          </div>\n                        </Flex>\n                      </OverlayStackingProvider>\n                    </motion.div>\n                  </motion.div>\n                </FocusScope>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </OverlayContainer>\n    );\n  },\n);\n(Sheet as typeof Sheet & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }