@dynatrace/strato-components 3.10.4 → 3.11.1

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

@@ -1,5 +1,5 @@
 import "./Overlay.css";
-var overlayCSS = "_1dhu6810-3-10-4";
+var overlayCSS = "_1dhu6810-3-11-1";
 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-10-4';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-10-4 {
+._d76u1n0-3-11-1 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-10-4 {
+._d76u1n1-3-11-1 {
   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-10-4:after {
+._d76u1n1-3-11-1:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-10-4 {
+._d76u1n2-3-11-1 {
   overflow: auto;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-10-4 {
+._d76u1n3-3-11-1 {
   height: 100vh;
   position: fixed;
   top: 0;
@@ -43,12 +43,12 @@
   z-index: var(--dt-elevations-overlay, 20);
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
 }
-._d76u1n4-3-10-4 {
+._d76u1n4-3-11-1 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
 @media screen and (min-width: 641px) {
-  ._d76u1n1-3-10-4 {
+  ._d76u1n1-3-11-1 {
     padding-left: var(--dt-spacings-size-24, 24px);
     padding-right: var(--dt-spacings-size-12, 12px);
   }

package/esm/overlays/sheet/Sheet.js

@@ -23,6 +23,7 @@ import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
 import { OverlayStackingProvider } from "../../core/providers/OverlayStackingProvider.js";
+import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
 import { attemptFocus as _attemptFocus } from "../../core/utils/focus-management/attempt-focus.js";
 import { getFirstFocusableChild as _getFirstFocusableChild } from "../../core/utils/focus-management/get-first-focusable-child.js";
 import {
@@ -217,7 +218,7 @@ const Sheet = /* @__PURE__ */ forwardRef(
                                   justifyContent: title ? "space-between" : "flex-end",
                                   alignItems: "flex-start",
                                   children: [
-                                    title && /* @__PURE__ */ jsx(
+                                    title && (_canReceiveDefaultTextFormat(title) ? /* @__PURE__ */ jsx(
                                       Heading,
                                       {
                                         level: 5,
@@ -226,7 +227,14 @@ const Sheet = /* @__PURE__ */ forwardRef(
                                         className: sheetHeadingCSS,
                                         children: title
                                       }
-                                    ),
+                                    ) : /* @__PURE__ */ jsx(
+                                      "div",
+                                      {
+                                        style: { display: "contents" },
+                                        id: headingId,
+                                        children: title
+                                      }
+                                    )),
                                     actions && /* @__PURE__ */ jsx(
                                       Flex,
                                       {

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 { 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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",
+  "sourcesContent": ["import { AnimatePresence, motion, Variants } from 'framer-motion';\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\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 { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.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 | ReactElement;\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                                (_canReceiveDefaultTextFormat(title) ? (\n                                  <Heading\n                                    level={5}\n                                    as=\"h2\"\n                                    id={headingId}\n                                    className={sheetHeadingCSS}\n                                  >\n                                    {title}\n                                  </Heading>\n                                ) : (\n                                  <div\n                                    style={{ display: 'contents' }}\n                                    id={headingId}\n                                  >\n                                    {title}\n                                  </div>\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": []
 }

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

@@ -1,9 +1,9 @@
 import "./Sheet.css";
-var sheetBackdropCSS = "_d76u1n0-3-10-4";
-var sheetCSS = "_d76u1n1-3-10-4";
-var sheetHeadingCSS = "_d76u1n4-3-10-4";
-var sheetScrollableContainerCSS = "_d76u1n2-3-10-4";
-var sheetWrapperCSS = "_d76u1n3-3-10-4";
+var sheetBackdropCSS = "_d76u1n0-3-11-1";
+var sheetCSS = "_d76u1n1-3-11-1";
+var sheetHeadingCSS = "_d76u1n4-3-11-1";
+var sheetScrollableContainerCSS = "_d76u1n2-3-11-1";
+var sheetWrapperCSS = "_d76u1n3-3-11-1";
 export {
   sheetBackdropCSS,
   sheetCSS,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/sheet/Sheet.css.ts"],
-  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-10-4';\nexport var sheetCSS = '_d76u1n1-3-10-4';\nexport var sheetHeadingCSS = '_d76u1n4-3-10-4';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-10-4';\nexport var sheetWrapperCSS = '_d76u1n3-3-10-4';"],
+  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-11-1';\nexport var sheetCSS = '_d76u1n1-3-11-1';\nexport var sheetHeadingCSS = '_d76u1n4-3-11-1';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-11-1';\nexport var sheetWrapperCSS = '_d76u1n3-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,8BAA8B;AAClC,IAAI,kBAAkB;",
   "names": []
 }

package/esm/overlays/tooltip/TooltipElement.js

@@ -97,6 +97,7 @@ const TooltipElement = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     "div",
     {
       ref: mergedTooltipRef,
+      id,
       style: {
         ...styles.popper,
         zIndex: stackingContext.style.zIndex,

package/esm/overlays/tooltip/TooltipElement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/TooltipElement.tsx"],
-  "sourcesContent": ["import { eventListeners, Placement } from '@popperjs/core';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport {\n  tooltipAnimationWrapperCSS,\n  tooltipElementCSS,\n  tooltipOffsetVar,\n} from './tooltip.sty.js';\nimport type { TooltipProps } from './tooltip.types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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 { Text } from '../../typography/text/Text.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\nconst TOOLTIP_OFFSET = 4;\n\ninterface TooltipElementProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    Pick<TooltipProps, 'placement' | 'fallbackPlacements' | 'id'> {\n  /** Reference to the trigger element */\n  triggerElement?: Element;\n  /** Callback triggered when the mouse leaves the tooltip element. */\n  onMouseLeave?: (e: ReactMouseEvent<HTMLDivElement>) => void;\n  /** Callback triggered when the tooltip hover state changes. */\n  onTooltipHovered?: (isTooltipHovered: boolean) => void;\n  /** Allows behavior tracking. */\n  'data-dt-component'?: string;\n}\n\n// #endregion\n\n/** The tooltip element / portal that is being rendered into the tooltip */\nexport const TooltipElement = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TooltipElementProps\n>((props: TooltipElementProps, forwardedRef) => {\n  const {\n    children,\n    placement,\n    triggerElement,\n    id,\n    fallbackPlacements: fallbackPlacementsProp,\n    onMouseLeave,\n    onTooltipHovered,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Overlay',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n\n  const [tooltipRef, setTooltipRef] = useState<HTMLDivElement | null>(null);\n\n  // Forwards the ref to the opened tooltip.\n  // DISCUSS: This stays on the tooltip element rather than the wrapping span\n  // in order to not break the behavior and api. We should definitely\n  // think about switching this up.\n  const mergedTooltipRef = useMergeRefs([forwardedRef, setTooltipRef]);\n\n  // Defines fallback placements. In order to flip _correctly_, we adjust\n  // the fallback list based on the desired positioning.\n  const fallbackPlacements = useMemo<Placement[] | undefined>(() => {\n    if (fallbackPlacementsProp) {\n      return fallbackPlacementsProp;\n    }\n\n    switch (placement) {\n      case 'top':\n        return ['bottom', 'left', 'right'];\n      case 'bottom':\n        return ['top', 'left', 'right'];\n      case 'left':\n        return ['right', 'top', 'bottom'];\n      case 'right':\n        return ['left', 'top', 'bottom'];\n    }\n  }, [placement, fallbackPlacementsProp]);\n\n  const { styles, attributes } = usePopper(triggerElement, tooltipRef, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, TOOLTIP_OFFSET],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements,\n        },\n      },\n      observeOverlaySize,\n      observeAnimationDone,\n      eventListeners,\n    ],\n  });\n\n  // Get the zIndex for the stacked overlay to apply to the tooltip\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const tooltipHovered = useRef(false);\n\n  const handleMouseLeaveTooltip = useCallback(\n    (e: ReactMouseEvent<HTMLDivElement>) => {\n      tooltipHovered.current = false;\n      onMouseLeave?.(e);\n      onTooltipHovered?.(tooltipHovered.current);\n    },\n    [onMouseLeave, onTooltipHovered],\n  );\n\n  return (\n    <div\n      ref={mergedTooltipRef}\n      style={{\n        ...styles.popper,\n        zIndex: stackingContext.style.zIndex,\n        ...consumerStyle,\n        ...assignInlineVars({ [tooltipOffsetVar]: `${TOOLTIP_OFFSET}px` }),\n      }}\n      className={clsx(tooltipElementCSS, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      role=\"tooltip\"\n      onMouseEnter={() => {\n        tooltipHovered.current = true;\n        onTooltipHovered?.(tooltipHovered.current);\n      }}\n      onMouseLeave={handleMouseLeaveTooltip}\n      {...attributes.popper}\n      {...remainingBehavioralTrackingProps}\n      data-dt-name={dataDtName}\n      data-dt-component={dataDtComponent}\n    >\n      <div className={tooltipAnimationWrapperCSS}>\n        {typeof children === 'string' ? (\n          <Text textStyle=\"small\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </div>\n  );\n});\n\n(\n  TooltipElement as typeof TooltipElement & { displayName: string }\n).displayName = 'TooltipElement';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { eventListeners, Placement } from '@popperjs/core';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport {\n  tooltipAnimationWrapperCSS,\n  tooltipElementCSS,\n  tooltipOffsetVar,\n} from './tooltip.sty.js';\nimport type { TooltipProps } from './tooltip.types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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 { Text } from '../../typography/text/Text.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../utils/popper-modifiers.js';\nimport { usePopper } from '../utils/use-popper-compat.js';\n\nconst TOOLTIP_OFFSET = 4;\n\ninterface TooltipElementProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    Pick<TooltipProps, 'placement' | 'fallbackPlacements' | 'id'> {\n  /** Reference to the trigger element */\n  triggerElement?: Element;\n  /** Callback triggered when the mouse leaves the tooltip element. */\n  onMouseLeave?: (e: ReactMouseEvent<HTMLDivElement>) => void;\n  /** Callback triggered when the tooltip hover state changes. */\n  onTooltipHovered?: (isTooltipHovered: boolean) => void;\n  /** Allows behavior tracking. */\n  'data-dt-component'?: string;\n}\n\n// #endregion\n\n/** The tooltip element / portal that is being rendered into the tooltip */\nexport const TooltipElement = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  TooltipElementProps\n>((props: TooltipElementProps, forwardedRef) => {\n  const {\n    children,\n    placement,\n    triggerElement,\n    id,\n    fallbackPlacements: fallbackPlacementsProp,\n    onMouseLeave,\n    onTooltipHovered,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Overlay',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n\n  const [tooltipRef, setTooltipRef] = useState<HTMLDivElement | null>(null);\n\n  // Forwards the ref to the opened tooltip.\n  // DISCUSS: This stays on the tooltip element rather than the wrapping span\n  // in order to not break the behavior and api. We should definitely\n  // think about switching this up.\n  const mergedTooltipRef = useMergeRefs([forwardedRef, setTooltipRef]);\n\n  // Defines fallback placements. In order to flip _correctly_, we adjust\n  // the fallback list based on the desired positioning.\n  const fallbackPlacements = useMemo<Placement[] | undefined>(() => {\n    if (fallbackPlacementsProp) {\n      return fallbackPlacementsProp;\n    }\n\n    switch (placement) {\n      case 'top':\n        return ['bottom', 'left', 'right'];\n      case 'bottom':\n        return ['top', 'left', 'right'];\n      case 'left':\n        return ['right', 'top', 'bottom'];\n      case 'right':\n        return ['left', 'top', 'bottom'];\n    }\n  }, [placement, fallbackPlacementsProp]);\n\n  const { styles, attributes } = usePopper(triggerElement, tooltipRef, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, TOOLTIP_OFFSET],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements,\n        },\n      },\n      observeOverlaySize,\n      observeAnimationDone,\n      eventListeners,\n    ],\n  });\n\n  // Get the zIndex for the stacked overlay to apply to the tooltip\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const tooltipHovered = useRef(false);\n\n  const handleMouseLeaveTooltip = useCallback(\n    (e: ReactMouseEvent<HTMLDivElement>) => {\n      tooltipHovered.current = false;\n      onMouseLeave?.(e);\n      onTooltipHovered?.(tooltipHovered.current);\n    },\n    [onMouseLeave, onTooltipHovered],\n  );\n\n  return (\n    <div\n      ref={mergedTooltipRef}\n      id={id}\n      style={{\n        ...styles.popper,\n        zIndex: stackingContext.style.zIndex,\n        ...consumerStyle,\n        ...assignInlineVars({ [tooltipOffsetVar]: `${TOOLTIP_OFFSET}px` }),\n      }}\n      className={clsx(tooltipElementCSS, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      role=\"tooltip\"\n      onMouseEnter={() => {\n        tooltipHovered.current = true;\n        onTooltipHovered?.(tooltipHovered.current);\n      }}\n      onMouseLeave={handleMouseLeaveTooltip}\n      {...attributes.popper}\n      {...remainingBehavioralTrackingProps}\n      data-dt-name={dataDtName}\n      data-dt-component={dataDtComponent}\n    >\n      <div className={tooltipAnimationWrapperCSS}>\n        {typeof children === 'string' ? (\n          <Text textStyle=\"small\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </div>\n  );\n});\n\n(\n  TooltipElement as typeof TooltipElement & { displayName: string }\n).displayName = 'TooltipElement';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/overlays/tooltip/tooltip.css

@@ -1,54 +1,54 @@
-._hplwyr1-3-10-4 {
+._hplwyr1-3-11-1 {
   max-width: 240px;
   word-break: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
 }
-._hplwyr1-3-10-4[data-popper-placement^="top"]::after {
+._hplwyr1-3-11-1[data-popper-placement^="top"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-10-4);
+  height: var(--_hplwyr0-3-11-1);
   left: 0;
-  bottom: calc(var(--_hplwyr0-3-10-4) * -1);
+  bottom: calc(var(--_hplwyr0-3-11-1) * -1);
 }
-._hplwyr1-3-10-4[data-popper-placement^="bottom"]::after {
+._hplwyr1-3-11-1[data-popper-placement^="bottom"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-10-4);
+  height: var(--_hplwyr0-3-11-1);
   left: 0;
-  top: calc(var(--_hplwyr0-3-10-4) * -1);
+  top: calc(var(--_hplwyr0-3-11-1) * -1);
 }
-._hplwyr1-3-10-4[data-popper-placement^="left"]::after {
+._hplwyr1-3-11-1[data-popper-placement^="left"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-10-4);
+  width: var(--_hplwyr0-3-11-1);
   top: 0;
-  right: calc(var(--_hplwyr0-3-10-4) * -1);
+  right: calc(var(--_hplwyr0-3-11-1) * -1);
 }
-._hplwyr1-3-10-4[data-popper-placement^="right"]::after {
+._hplwyr1-3-11-1[data-popper-placement^="right"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-10-4);
+  width: var(--_hplwyr0-3-11-1);
   top: 0;
-  left: calc(var(--_hplwyr0-3-10-4) * -1);
+  left: calc(var(--_hplwyr0-3-11-1) * -1);
 }
-._hplwyr1-3-10-4[data-popper-placement^="top"] > div {
+._hplwyr1-3-11-1[data-popper-placement^="top"] > div {
   transform-origin: center bottom;
 }
-._hplwyr1-3-10-4[data-popper-placement^="bottom"] > div {
+._hplwyr1-3-11-1[data-popper-placement^="bottom"] > div {
   transform-origin: center top;
 }
-._hplwyr1-3-10-4[data-popper-placement^="left"] > div {
+._hplwyr1-3-11-1[data-popper-placement^="left"] > div {
   transform-origin: right center;
 }
-._hplwyr1-3-10-4[data-popper-placement^="right"] > div {
+._hplwyr1-3-11-1[data-popper-placement^="right"] > div {
   transform-origin: left center;
 }
-._hplwyr2-3-10-4 {
+._hplwyr2-3-11-1 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);

package/esm/overlays/tooltip/tooltip.sty.js

@@ -1,7 +1,7 @@
 import "./tooltip.css";
-var tooltipAnimationWrapperCSS = "_hplwyr2-3-10-4";
-var tooltipElementCSS = "_hplwyr1-3-10-4";
-var tooltipOffsetVar = "var(--_hplwyr0-3-10-4)";
+var tooltipAnimationWrapperCSS = "_hplwyr2-3-11-1";
+var tooltipElementCSS = "_hplwyr1-3-11-1";
+var tooltipOffsetVar = "var(--_hplwyr0-3-11-1)";
 export {
   tooltipAnimationWrapperCSS,
   tooltipElementCSS,

package/esm/overlays/tooltip/tooltip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/tooltip.css.ts"],
-  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-10-4';\nexport var tooltipElementCSS = '_hplwyr1-3-10-4';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-10-4)';"],
+  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-11-1';\nexport var tooltipElementCSS = '_hplwyr1-3-11-1';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-11-1)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/overlays/utils/use-popper-compat.js

@@ -66,7 +66,7 @@ function usePopper(referenceElement, popperElement, options = {}) {
       phase: "write",
       fn: ({ state: popperState }) => {
         const elements = Object.keys(popperState.elements);
-        setState({
+        const nextState = {
           styles: fromEntries(
             elements.map((el) => [
               el,
@@ -79,7 +79,10 @@ function usePopper(referenceElement, popperElement, options = {}) {
               popperState.attributes[el] ?? {}
             ])
           )
-        });
+        };
+        setState(
+          (currentState) => deepEqual(currentState, nextState) ? currentState : nextState
+        );
       },
       requires: ["computeStyles"]
     }),
@@ -120,14 +123,18 @@ function usePopper(referenceElement, popperElement, options = {}) {
       return;
     }
     const createPopper = options.createPopper ?? defaultCreatePopper;
-    const popperInstance = createPopper(
-      referenceElement,
-      popperElement,
-      prevOptions.current
-    );
-    popperInstanceRef.current = popperInstance;
+    let popperInstance;
+    if (prevOptions.current) {
+      popperInstance = createPopper(
+        referenceElement,
+        popperElement,
+        prevOptions.current
+      );
+      popperInstanceRef.current = popperInstance;
+      popperInstance.forceUpdate();
+    }
     return () => {
-      popperInstance.destroy();
+      popperInstance?.destroy();
       popperInstanceRef.current = void 0;
     };
   }, [referenceElement, popperElement, options.createPopper]);

package/esm/overlays/utils/use-popper-compat.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/utils/use-popper-compat.ts"],
-  "sourcesContent": ["/**\n * Vendored React 19-compatible replacement for the `usePopper` hook from\n * the unmaintained `react-popper` package.\n *\n * Changes from the original:\n * - Ported to TypeScript (the original was Flow-typed)\n * - Replaced `ReactDOM.flushSync` with a plain `setState` call. In React 18+\n *   `flushSync` inside a `useLayoutEffect` callback causes a warning; in\n *   React 19 it throws. Batching the update is fine here because the overlay\n *   element is not visible until it is positioned.\n * - Inlined `fromEntries` and `isEqual` helpers to remove the\n *   `react-fast-compare` dependency.\n * - `useIsomorphicLayoutEffect` inlined: uses `useLayoutEffect` in browsers\n *   and `useEffect` as an SSR fallback to suppress the React warning.\n *\n * Source: https://github.com/floating-ui/react-popper/blob/master/src/usePopper.js\n */\nimport {\n  createPopper as defaultCreatePopper,\n  type Instance as PopperInstance,\n  type Options as PopperOptions,\n  type State as PopperState,\n  type VirtualElement,\n} from '@popperjs/core';\nimport {\n  type CSSProperties,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nconst useIsomorphicLayoutEffect =\n  typeof document !== 'undefined' ? useLayoutEffect : useEffect;\n\nfunction fromEntries<T>(entries: Array<[string, T]>): Record<string, T> {\n  return entries.reduce<Record<string, T>>((acc, [key, value]) => {\n    acc[key] = value;\n    return acc;\n  }, {});\n}\n\nfunction deepEqual(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) {\n    return true;\n  }\n  if (typeof a !== 'object' || typeof b !== 'object') {\n    return false;\n  }\n  if (a === null || b === null) {\n    return false;\n  }\n  const keysA = Object.keys(a as object);\n  const keysB = Object.keys(b as object);\n  if (keysA.length !== keysB.length) {\n    return false;\n  }\n  return keysA.every((key) =>\n    deepEqual(\n      (a as Record<string, unknown>)[key],\n      (b as Record<string, unknown>)[key],\n    ),\n  );\n}\n\ntype Styles = Record<string, CSSProperties>;\ntype Attributes = Record<string, Record<string, string | boolean>>;\n\ntype UsePopperState = {\n  styles: Styles;\n  attributes: Attributes;\n};\n\ntype UsePopperOptions = Partial<\n  PopperOptions & { createPopper: typeof defaultCreatePopper }\n>;\n\nexport type UsePopperResult = Readonly<{\n  state: PopperState | null;\n  styles: Styles;\n  attributes: Attributes;\n  update: PopperInstance['update'] | null;\n  forceUpdate: PopperInstance['forceUpdate'] | null;\n}>;\n\nconst EMPTY_MODIFIERS: PopperOptions['modifiers'] = [];\n\nexport function usePopper(\n  referenceElement: Element | VirtualElement | null | undefined,\n  popperElement: HTMLElement | null | undefined,\n  options: UsePopperOptions = {},\n): UsePopperResult {\n  const prevOptions = useRef<PopperOptions | null>(null);\n\n  const optionsWithDefaults = {\n    onFirstUpdate: options.onFirstUpdate,\n    placement: options.placement ?? 'bottom',\n    strategy: options.strategy ?? 'absolute',\n    modifiers: options.modifiers ?? EMPTY_MODIFIERS,\n  };\n\n  const [state, setState] = useState<UsePopperState>({\n    styles: {\n      popper: {\n        position: optionsWithDefaults.strategy,\n        left: '0',\n        top: '0',\n      },\n      arrow: {\n        position: 'absolute',\n      },\n    },\n    attributes: {},\n  });\n\n  const updateStateModifier = useMemo(\n    () => ({\n      name: 'updateState',\n      enabled: true,\n      phase: 'write' as const,\n      fn: ({ state: popperState }: { state: PopperState }) => {\n        const elements = Object.keys(popperState.elements) as Array<\n          keyof typeof popperState.elements\n        >;\n        // React 19 fix: removed ReactDOM.flushSync() wrapper. In React 18+\n        // calling flushSync inside useLayoutEffect throws. Plain setState is\n        // fine because the overlay starts hidden; there is no visible FOIP.\n        setState({\n          styles: fromEntries(\n            elements.map((el) => [\n              el as string,\n              (popperState.styles[el as string] as CSSProperties) ?? {},\n            ]),\n          ),\n          attributes: fromEntries(\n            elements.map((el) => [\n              el as string,\n              popperState.attributes[el as string] ?? {},\n            ]),\n          ),\n        });\n      },\n      requires: ['computeStyles'],\n    }),\n    [],\n  );\n\n  const popperOptions = useMemo(() => {\n    const newOptions: PopperOptions = {\n      onFirstUpdate: optionsWithDefaults.onFirstUpdate,\n      placement: optionsWithDefaults.placement,\n      strategy: optionsWithDefaults.strategy,\n      modifiers: [\n        ...optionsWithDefaults.modifiers,\n        updateStateModifier,\n        { name: 'applyStyles', enabled: false },\n      ],\n    };\n\n    if (deepEqual(prevOptions.current, newOptions)) {\n      return prevOptions.current ?? newOptions;\n    } else {\n      prevOptions.current = newOptions;\n      return newOptions;\n    }\n  }, [\n    optionsWithDefaults.onFirstUpdate,\n    optionsWithDefaults.placement,\n    optionsWithDefaults.strategy,\n    optionsWithDefaults.modifiers,\n    updateStateModifier,\n  ]);\n\n  const popperInstanceRef = useRef<PopperInstance | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (popperInstanceRef.current) {\n      void popperInstanceRef.current.setOptions(popperOptions);\n    }\n  }, [popperOptions]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      referenceElement === null ||\n      referenceElement === undefined ||\n      popperElement === null ||\n      popperElement === undefined\n    ) {\n      return;\n    }\n\n    const createPopper = options.createPopper ?? defaultCreatePopper;\n    const popperInstance = createPopper(\n      referenceElement,\n      popperElement,\n      prevOptions.current!,\n    );\n    popperInstanceRef.current = popperInstance;\n\n    return () => {\n      popperInstance.destroy();\n      popperInstanceRef.current = undefined;\n    };\n  }, [referenceElement, popperElement, options.createPopper]);\n\n  return {\n    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,\n    styles: state.styles,\n    attributes: state.attributes,\n    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,\n    forceUpdate: popperInstanceRef.current\n      ? popperInstanceRef.current.forceUpdate\n      : null,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Vendored React 19-compatible replacement for the `usePopper` hook from\n * the unmaintained `react-popper` package.\n *\n * Changes from the original:\n * - Ported to TypeScript (the original was Flow-typed)\n * - Replaced `ReactDOM.flushSync` with a plain `setState` call. In React 18+\n *   `flushSync` inside a `useLayoutEffect` callback causes a warning; in\n *   React 19 it throws. The first position is instead computed synchronously\n *   via `forceUpdate()` while still inside the layout effect, which React\n *   commits before the browser paints (see the effect below).\n * - Inlined `fromEntries` and `isEqual` helpers to remove the\n *   `react-fast-compare` dependency.\n * - `useIsomorphicLayoutEffect` inlined: uses `useLayoutEffect` in browsers\n *   and `useEffect` as an SSR fallback to suppress the React warning.\n *\n * Source: https://github.com/floating-ui/react-popper/blob/master/src/usePopper.js\n */\nimport {\n  createPopper as defaultCreatePopper,\n  type Instance as PopperInstance,\n  type Options as PopperOptions,\n  type State as PopperState,\n  type VirtualElement,\n} from '@popperjs/core';\nimport {\n  type CSSProperties,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nconst useIsomorphicLayoutEffect =\n  typeof document !== 'undefined' ? useLayoutEffect : useEffect;\n\nfunction fromEntries<T>(entries: Array<[string, T]>): Record<string, T> {\n  return entries.reduce<Record<string, T>>((acc, [key, value]) => {\n    acc[key] = value;\n    return acc;\n  }, {});\n}\n\nfunction deepEqual(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) {\n    return true;\n  }\n  if (typeof a !== 'object' || typeof b !== 'object') {\n    return false;\n  }\n  if (a === null || b === null) {\n    return false;\n  }\n  const keysA = Object.keys(a as object);\n  const keysB = Object.keys(b as object);\n  if (keysA.length !== keysB.length) {\n    return false;\n  }\n  return keysA.every((key) =>\n    deepEqual(\n      (a as Record<string, unknown>)[key],\n      (b as Record<string, unknown>)[key],\n    ),\n  );\n}\n\ntype Styles = Record<string, CSSProperties>;\ntype Attributes = Record<string, Record<string, string | boolean>>;\n\ntype UsePopperState = {\n  styles: Styles;\n  attributes: Attributes;\n};\n\ntype UsePopperOptions = Partial<\n  PopperOptions & { createPopper: typeof defaultCreatePopper }\n>;\n\nexport type UsePopperResult = Readonly<{\n  state: PopperState | null;\n  styles: Styles;\n  attributes: Attributes;\n  update: PopperInstance['update'] | null;\n  forceUpdate: PopperInstance['forceUpdate'] | null;\n}>;\n\nconst EMPTY_MODIFIERS: PopperOptions['modifiers'] = [];\n\nexport function usePopper(\n  referenceElement: Element | VirtualElement | null | undefined,\n  popperElement: HTMLElement | null | undefined,\n  options: UsePopperOptions = {},\n): UsePopperResult {\n  const prevOptions = useRef<PopperOptions | null>(null);\n\n  const optionsWithDefaults = {\n    onFirstUpdate: options.onFirstUpdate,\n    placement: options.placement ?? 'bottom',\n    strategy: options.strategy ?? 'absolute',\n    modifiers: options.modifiers ?? EMPTY_MODIFIERS,\n  };\n\n  const [state, setState] = useState<UsePopperState>({\n    styles: {\n      popper: {\n        position: optionsWithDefaults.strategy,\n        left: '0',\n        top: '0',\n      },\n      arrow: {\n        position: 'absolute',\n      },\n    },\n    attributes: {},\n  });\n\n  const updateStateModifier = useMemo(\n    () => ({\n      name: 'updateState',\n      enabled: true,\n      phase: 'write' as const,\n      fn: ({ state: popperState }: { state: PopperState }) => {\n        const elements = Object.keys(popperState.elements) as Array<\n          keyof typeof popperState.elements\n        >;\n        // React 19 fix: removed ReactDOM.flushSync() wrapper. In React 18+\n        // calling flushSync inside useLayoutEffect throws.\n        const nextState: UsePopperState = {\n          styles: fromEntries(\n            elements.map((el) => [\n              el as string,\n              (popperState.styles[el as string] as CSSProperties) ?? {},\n            ]),\n          ),\n          attributes: fromEntries(\n            elements.map((el) => [\n              el as string,\n              popperState.attributes[el as string] ?? {},\n            ]),\n          ),\n        };\n\n        // The eager forceUpdate() below and the update that `createPopper`\n        // queues itself both land here with identical results. Bailing out on\n        // an unchanged state keeps that from causing a second render.\n        setState((currentState) =>\n          deepEqual(currentState, nextState) ? currentState : nextState,\n        );\n      },\n      requires: ['computeStyles'],\n    }),\n    [],\n  );\n\n  const popperOptions = useMemo(() => {\n    const newOptions: PopperOptions = {\n      onFirstUpdate: optionsWithDefaults.onFirstUpdate,\n      placement: optionsWithDefaults.placement,\n      strategy: optionsWithDefaults.strategy,\n      modifiers: [\n        ...optionsWithDefaults.modifiers,\n        updateStateModifier,\n        { name: 'applyStyles', enabled: false },\n      ],\n    };\n\n    if (deepEqual(prevOptions.current, newOptions)) {\n      return prevOptions.current ?? newOptions;\n    } else {\n      prevOptions.current = newOptions;\n      return newOptions;\n    }\n  }, [\n    optionsWithDefaults.onFirstUpdate,\n    optionsWithDefaults.placement,\n    optionsWithDefaults.strategy,\n    optionsWithDefaults.modifiers,\n    updateStateModifier,\n  ]);\n\n  const popperInstanceRef = useRef<PopperInstance | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (popperInstanceRef.current) {\n      void popperInstanceRef.current.setOptions(popperOptions);\n    }\n  }, [popperOptions]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      referenceElement === null ||\n      referenceElement === undefined ||\n      popperElement === null ||\n      popperElement === undefined\n    ) {\n      return;\n    }\n\n    const createPopper = options.createPopper ?? defaultCreatePopper;\n    let popperInstance: PopperInstance | undefined;\n    if (prevOptions.current) {\n      popperInstance = createPopper(\n        referenceElement,\n        popperElement,\n        prevOptions.current,\n      );\n      popperInstanceRef.current = popperInstance;\n\n      // `createPopper` only schedules its first update, and popper debounces\n      // that onto a microtask. Because the state update is no longer flushed\n      // with flushSync, React can commit it after the browser has already\n      // painted the initial (0,0) position, which shows up as the overlay\n      // flashing in the top-left corner (APPDEV-19359). forceUpdate() is\n      // synchronous, so calling it here makes the positioned styles part of the\n      // render that React flushes before paint.\n      popperInstance.forceUpdate();\n    }\n\n    return () => {\n      popperInstance?.destroy();\n      popperInstanceRef.current = undefined;\n    };\n  }, [referenceElement, popperElement, options.createPopper]);\n\n  return {\n    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,\n    styles: state.styles,\n    attributes: state.attributes,\n    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,\n    forceUpdate: popperInstanceRef.current\n      ? popperInstanceRef.current.forceUpdate\n      : null,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }