@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-4-0 {
+@keyframes _rxr5810-3-5-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-4-0 {
+@keyframes _rxr5811-3-5-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-4-0 {
+@keyframes _rxr5812-3-5-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,34 +22,34 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-4-0 {
+._rxr5813-3-5-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._rxr5813-3-4-0 .Toastify__toast-container {
+._rxr5813-3-5-0 .Toastify__toast-container {
   z-index: 9999;
   position: fixed;
   max-width: 400px;
   width: calc(100% - var(--dt-spacings-size-32, 32px));
   box-sizing: border-box;
 }
-._rxr5813-3-4-0 .Toastify__toast-container--bottom-left {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-._rxr5813-3-4-0 .Toastify__toast-container--bottom-right {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-._rxr5813-3-4-0 .Toastify__toast-container--bottom-center {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-._rxr5813-3-4-0 .Toastify__toast {
+._rxr5813-3-5-0 .Toastify__toast {
   margin: 0;
   align-items: start;
   border: none;
@@ -72,24 +72,24 @@
   margin-top: var(--dt-spacings-size-8, 8px);
   max-width: 100%;
 }
-._rxr5813-3-4-0 .Toastify__toast-body {
+._rxr5813-3-5-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-._rxr5813-3-4-0 .Toastify__toast-body > div {
+._rxr5813-3-5-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._rxr5813-3-4-0 .Toastify__toast-icon {
+._rxr5813-3-5-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-._rxr5813-3-4-0 .Toastify__progress-bar {
+._rxr5813-3-5-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -98,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-._rxr5813-3-4-0 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-4-0 1 forwards;
+._rxr5813-3-5-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-5-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-4-0;
+  animation-name: _rxr5810-3-5-0;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-4-0;
+  animation-name: _rxr5811-3-5-0;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

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

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

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

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

package/esm/overlays/drawer/Drawer.css

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

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

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

@@ -1,4 +1,4 @@
-._dmotjm0-3-4-0 {
+._dmotjm0-3-5-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-4-0 {
+._dmotjm1-3-5-0 {
   max-width: 576px;
 }
-._dmotjm2-3-4-0 {
+._dmotjm2-3-5-0 {
   max-width: 768px;
 }
-._dmotjm3-3-4-0 {
+._dmotjm3-3-5-0 {
   max-width: 1280px;
 }
-._dmotjm4-3-4-0 {
+._dmotjm4-3-5-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-4-0 {
+._dmotjm5-3-5-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-4-0 {
+  ._dmotjm0-3-5-0 {
     max-height: 96vh;
   }
 }

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

@@ -1,8 +1,8 @@
 import "./Modal.css";
-var backdrop = "_dmotjm4-3-4-0";
-var base = "_dmotjm0-3-4-0";
-var header = "_dmotjm5-3-4-0";
-var sizes = { small: "_dmotjm1-3-4-0", medium: "_dmotjm2-3-4-0", large: "_dmotjm3-3-4-0" };
+var backdrop = "_dmotjm4-3-5-0";
+var base = "_dmotjm0-3-5-0";
+var header = "_dmotjm5-3-5-0";
+var sizes = { small: "_dmotjm1-3-5-0", medium: "_dmotjm2-3-5-0", large: "_dmotjm3-3-5-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-4-0';\nexport var base = '_dmotjm0-3-4-0';\nexport var header = '_dmotjm5-3-4-0';\nexport var sizes = {small:'_dmotjm1-3-4-0',medium:'_dmotjm2-3-4-0',large:'_dmotjm3-3-4-0'};"],
+  "sourcesContent": ["import './Modal.css';\nexport var backdrop = '_dmotjm4-3-5-0';\nexport var base = '_dmotjm0-3-5-0';\nexport var header = '_dmotjm5-3-5-0';\nexport var sizes = {small:'_dmotjm1-3-5-0',medium:'_dmotjm2-3-5-0',large:'_dmotjm3-3-5-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-4-0 {
+._1dhu6810-3-5-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-4-0";
+var overlayCSS = "_1dhu6810-3-5-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-4-0';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var overlayCSS = '_1dhu6810-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-4-0 {
+._d76u1n0-3-5-0 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-4-0 {
+._d76u1n1-3-5-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-4-0:after {
+._d76u1n1-3-5-0:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-4-0 {
+._d76u1n2-3-5-0 {
   overflow: auto;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-4-0 {
+._d76u1n3-3-5-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-4-0 {
+._d76u1n4-3-5-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }

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

@@ -1,9 +1,9 @@
 import "./Sheet.css";
-var sheetBackdropCSS = "_d76u1n0-3-4-0";
-var sheetCSS = "_d76u1n1-3-4-0";
-var sheetHeadingCSS = "_d76u1n4-3-4-0";
-var sheetScrollableContainerCSS = "_d76u1n2-3-4-0";
-var sheetWrapperCSS = "_d76u1n3-3-4-0";
+var sheetBackdropCSS = "_d76u1n0-3-5-0";
+var sheetCSS = "_d76u1n1-3-5-0";
+var sheetHeadingCSS = "_d76u1n4-3-5-0";
+var sheetScrollableContainerCSS = "_d76u1n2-3-5-0";
+var sheetWrapperCSS = "_d76u1n3-3-5-0";
 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-4-0';\nexport var sheetCSS = '_d76u1n1-3-4-0';\nexport var sheetHeadingCSS = '_d76u1n4-3-4-0';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-4-0';\nexport var sheetWrapperCSS = '_d76u1n3-3-4-0';"],
+  "sourcesContent": ["import './Sheet.css';\nexport var sheetBackdropCSS = '_d76u1n0-3-5-0';\nexport var sheetCSS = '_d76u1n1-3-5-0';\nexport var sheetHeadingCSS = '_d76u1n4-3-5-0';\nexport var sheetScrollableContainerCSS = '_d76u1n2-3-5-0';\nexport var sheetWrapperCSS = '_d76u1n3-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,8BAA8B;AAClC,IAAI,kBAAkB;",
   "names": []
 }

package/esm/overlays/tooltip/Tooltip.js

@@ -3,8 +3,8 @@ import { useReducedMotion } from "framer-motion";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { TooltipElement } from "./TooltipElement.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
-import { useFocusContext as _useFocusContext } from "../../core/hooks/useFocusContext.js";
 import { useId } from "../../core/hooks/useId.js";
+import { useModality } from "../../core/hooks/useModality.js";
 import { usePoliteContainer } from "../hooks/usePoliteContainer.js";
 import { useTooltipState } from "../hooks/useTooltipState.js";
 const COMPONENT_NAME = "Tooltip";
@@ -92,7 +92,7 @@ const Tooltip = /* @__PURE__ */ forwardRef(
       };
     }, [handleKeyDown]);
     const PoliteContainer = usePoliteContainer();
-    const { modality } = _useFocusContext();
+    const modality = useModality();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "span",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/tooltip/Tooltip.tsx"],
-  "sourcesContent": ["import { useReducedMotion } from 'framer-motion';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { TooltipProps } from './tooltip.types.js';\nimport { TooltipElement } from './TooltipElement.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusContext as _useFocusContext } from '../../core/hooks/useFocusContext.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { usePoliteContainer } from '../hooks/usePoliteContainer.js';\nimport { useTooltipState } from '../hooks/useTooltipState.js';\n\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Use the `Tooltip` component to display extra information when users hover on a trigger element.\n * @public\n */\nexport const Tooltip = /* @__PURE__ */ forwardRef<HTMLDivElement, TooltipProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      text,\n      placement = 'top',\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay = 'default',\n      disabled,\n      id: propId,\n      fallbackPlacements,\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Trigger',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n    const shouldReduceMotion = useReducedMotion();\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay: shouldReduceMotion || delay === 'none' ? 0 : undefined,\n    });\n\n    const tooltipWrapperRef = useRef<HTMLSpanElement | null>(null);\n    const [tooltipReferenceElement, setTooltipReferenceElement] = useState<\n      Element | undefined\n    >(undefined);\n\n    /**\n     * The tooltip/popper needs a reference element for positioning. As display contents on the span wrapper is necessary\n     * to not interfere with flow content of any layout parent, this will invalidate any getBoundingClientRect() results on\n     * the wrapping span. That is why we pass the first child element instead. Since the first child element could change\n     * dynamically, we need to watch for changes in the DOM, to ensure the tooltip always has a reference element.\n     */\n    const mutationObserverRef = useRef(\n      new MutationObserver((entries) => {\n        for (const entry of entries) {\n          const firstNode = entry.addedNodes.item(0);\n          if (\n            entry.type === 'childList' &&\n            firstNode !== null &&\n            firstNode instanceof Element &&\n            firstNode !== tooltipReferenceElement\n          ) {\n            setTooltipReferenceElement(firstNode);\n          }\n        }\n      }),\n    );\n\n    useEffect(\n      () => {\n        if (tooltipWrapperRef.current) {\n          setTooltipReferenceElement(tooltipWrapperRef.current?.children?.[0]);\n          mutationObserverRef.current.observe(tooltipWrapperRef.current, {\n            childList: true,\n            subtree: false, // only observe changes in the direct children of the wrapper, not deeper in the DOM\n          });\n        }\n\n        return () => closeTooltip();\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // If disabled switches to true at runtime and a tooltip is shown, it should\n    // close immediately\n    useEffect(() => {\n      if (disabled) {\n        closeTooltip();\n      }\n    }, [closeTooltip, disabled]);\n\n    const isTooltipHovered = useRef(false);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => e.code === 'Escape' && closeTooltip(),\n      [closeTooltip],\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', handleKeyDown);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [handleKeyDown]);\n\n    // Create a singleton container with live region attribute to read the contents\n    // of the tooltip when it pops up\n    const PoliteContainer = usePoliteContainer();\n\n    const { modality } = _useFocusContext();\n\n    return (\n      <>\n        <span\n          style={{\n            // Safari has currently an outstanding issue that results in content\n            // being inaccessible, when rendered within a display: contents.\n            display: 'contents',\n          }}\n          ref={tooltipWrapperRef}\n          onMouseEnter={() => !disabled && openTooltip()}\n          onMouseLeave={() =>\n            // we need to wrap this in a requestAnimationFrame to be able to first set the isTooltipHovered state correctly in case the TooltipElement (including the gap) is hovered\n            // if we don't, the tooltip is closed before the onMouseOver event of the TooltipElement is triggered (to set the right state), as the onMouseLeave of the tooltip trigger would be queued up afterwards\n            requestAnimationFrame(() => {\n              if (!disabled && !isTooltipHovered.current) {\n                closeTooltip();\n              }\n            })\n          }\n          onFocus={() =>\n            !disabled &&\n            modality !== 'pointer' &&\n            modality !== 'touch' &&\n            openTooltip(true)\n          }\n          onBlur={\n            () => !disabled && !isTooltipHovered.current && closeTooltip() // prevent closing when clicking on the gap\n          }\n          data-dt-name={dataDtName}\n          {...remainingBehavioralTrackingProps}\n          {...restProps}\n          data-dt-component={dataDtComponent}\n        >\n          {children}\n        </span>\n        <PoliteContainer>\n          {isOpen && (\n            <TooltipElement\n              ref={forwardedRef}\n              triggerElement={tooltipReferenceElement}\n              placement={placement}\n              fallbackPlacements={fallbackPlacements}\n              id={id}\n              data-testid={dataTestId}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              className={consumerClassName}\n              style={consumerStyle}\n              onMouseLeave={(event) =>\n                !disabled &&\n                // only close the tooltip if the mouse isn't over the trigger element\n                event.relatedTarget !== tooltipReferenceElement &&\n                closeTooltip()\n              }\n              onTooltipHovered={(isHovered: boolean) =>\n                (isTooltipHovered.current = isHovered)\n              }\n              {...behavioralTrackingProps}\n              data-dt-component={dataDtComponent}\n            >\n              {text}\n            </TooltipElement>\n          )}\n        </PoliteContainer>\n      </>\n    );\n  },\n);\n(Tooltip as typeof Tooltip & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useReducedMotion } from 'framer-motion';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { TooltipProps } from './tooltip.types.js';\nimport { TooltipElement } from './TooltipElement.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useModality } from '../../core/hooks/useModality.js';\nimport { usePoliteContainer } from '../hooks/usePoliteContainer.js';\nimport { useTooltipState } from '../hooks/useTooltipState.js';\n\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Use the `Tooltip` component to display extra information when users hover on a trigger element.\n * @public\n */\nexport const Tooltip = /* @__PURE__ */ forwardRef<HTMLDivElement, TooltipProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      text,\n      placement = 'top',\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay = 'default',\n      disabled,\n      id: propId,\n      fallbackPlacements,\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Trigger',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n    const shouldReduceMotion = useReducedMotion();\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      open,\n      defaultOpen,\n      onOpenChange,\n      delay: shouldReduceMotion || delay === 'none' ? 0 : undefined,\n    });\n\n    const tooltipWrapperRef = useRef<HTMLSpanElement | null>(null);\n    const [tooltipReferenceElement, setTooltipReferenceElement] = useState<\n      Element | undefined\n    >(undefined);\n\n    /**\n     * The tooltip/popper needs a reference element for positioning. As display contents on the span wrapper is necessary\n     * to not interfere with flow content of any layout parent, this will invalidate any getBoundingClientRect() results on\n     * the wrapping span. That is why we pass the first child element instead. Since the first child element could change\n     * dynamically, we need to watch for changes in the DOM, to ensure the tooltip always has a reference element.\n     */\n    const mutationObserverRef = useRef(\n      new MutationObserver((entries) => {\n        for (const entry of entries) {\n          const firstNode = entry.addedNodes.item(0);\n          if (\n            entry.type === 'childList' &&\n            firstNode !== null &&\n            firstNode instanceof Element &&\n            firstNode !== tooltipReferenceElement\n          ) {\n            setTooltipReferenceElement(firstNode);\n          }\n        }\n      }),\n    );\n\n    useEffect(\n      () => {\n        if (tooltipWrapperRef.current) {\n          setTooltipReferenceElement(tooltipWrapperRef.current?.children?.[0]);\n          mutationObserverRef.current.observe(tooltipWrapperRef.current, {\n            childList: true,\n            subtree: false, // only observe changes in the direct children of the wrapper, not deeper in the DOM\n          });\n        }\n\n        return () => closeTooltip();\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // If disabled switches to true at runtime and a tooltip is shown, it should\n    // close immediately\n    useEffect(() => {\n      if (disabled) {\n        closeTooltip();\n      }\n    }, [closeTooltip, disabled]);\n\n    const isTooltipHovered = useRef(false);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => e.code === 'Escape' && closeTooltip(),\n      [closeTooltip],\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', handleKeyDown);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [handleKeyDown]);\n\n    // Create a singleton container with live region attribute to read the contents\n    // of the tooltip when it pops up\n    const PoliteContainer = usePoliteContainer();\n\n    const modality = useModality();\n\n    return (\n      <>\n        <span\n          style={{\n            // Safari has currently an outstanding issue that results in content\n            // being inaccessible, when rendered within a display: contents.\n            display: 'contents',\n          }}\n          ref={tooltipWrapperRef}\n          onMouseEnter={() => !disabled && openTooltip()}\n          onMouseLeave={() =>\n            // we need to wrap this in a requestAnimationFrame to be able to first set the isTooltipHovered state correctly in case the TooltipElement (including the gap) is hovered\n            // if we don't, the tooltip is closed before the onMouseOver event of the TooltipElement is triggered (to set the right state), as the onMouseLeave of the tooltip trigger would be queued up afterwards\n            requestAnimationFrame(() => {\n              if (!disabled && !isTooltipHovered.current) {\n                closeTooltip();\n              }\n            })\n          }\n          onFocus={() =>\n            !disabled &&\n            modality !== 'pointer' &&\n            modality !== 'touch' &&\n            openTooltip(true)\n          }\n          onBlur={\n            () => !disabled && !isTooltipHovered.current && closeTooltip() // prevent closing when clicking on the gap\n          }\n          data-dt-name={dataDtName}\n          {...remainingBehavioralTrackingProps}\n          {...restProps}\n          data-dt-component={dataDtComponent}\n        >\n          {children}\n        </span>\n        <PoliteContainer>\n          {isOpen && (\n            <TooltipElement\n              ref={forwardedRef}\n              triggerElement={tooltipReferenceElement}\n              placement={placement}\n              fallbackPlacements={fallbackPlacements}\n              id={id}\n              data-testid={dataTestId}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              className={consumerClassName}\n              style={consumerStyle}\n              onMouseLeave={(event) =>\n                !disabled &&\n                // only close the tooltip if the mouse isn't over the trigger element\n                event.relatedTarget !== tooltipReferenceElement &&\n                closeTooltip()\n              }\n              onTooltipHovered={(isHovered: boolean) =>\n                (isTooltipHovered.current = isHovered)\n              }\n              {...behavioralTrackingProps}\n              data-dt-component={dataDtComponent}\n            >\n              {text}\n            </TooltipElement>\n          )}\n        </PoliteContainer>\n      </>\n    );\n  },\n);\n(Tooltip as typeof Tooltip & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/overlays/tooltip/tooltip.css

@@ -1,54 +1,54 @@
-._hplwyr1-3-4-0 {
+._hplwyr1-3-5-0 {
   max-width: 240px;
   word-break: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
 }
-._hplwyr1-3-4-0[data-popper-placement^="top"]::after {
+._hplwyr1-3-5-0[data-popper-placement^="top"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-4-0);
+  height: var(--_hplwyr0-3-5-0);
   left: 0;
-  bottom: calc(var(--_hplwyr0-3-4-0) * -1);
+  bottom: calc(var(--_hplwyr0-3-5-0) * -1);
 }
-._hplwyr1-3-4-0[data-popper-placement^="bottom"]::after {
+._hplwyr1-3-5-0[data-popper-placement^="bottom"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-4-0);
+  height: var(--_hplwyr0-3-5-0);
   left: 0;
-  top: calc(var(--_hplwyr0-3-4-0) * -1);
+  top: calc(var(--_hplwyr0-3-5-0) * -1);
 }
-._hplwyr1-3-4-0[data-popper-placement^="left"]::after {
+._hplwyr1-3-5-0[data-popper-placement^="left"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-4-0);
+  width: var(--_hplwyr0-3-5-0);
   top: 0;
-  right: calc(var(--_hplwyr0-3-4-0) * -1);
+  right: calc(var(--_hplwyr0-3-5-0) * -1);
 }
-._hplwyr1-3-4-0[data-popper-placement^="right"]::after {
+._hplwyr1-3-5-0[data-popper-placement^="right"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-4-0);
+  width: var(--_hplwyr0-3-5-0);
   top: 0;
-  left: calc(var(--_hplwyr0-3-4-0) * -1);
+  left: calc(var(--_hplwyr0-3-5-0) * -1);
 }
-._hplwyr1-3-4-0[data-popper-placement^="top"] > div {
+._hplwyr1-3-5-0[data-popper-placement^="top"] > div {
   transform-origin: center bottom;
 }
-._hplwyr1-3-4-0[data-popper-placement^="bottom"] > div {
+._hplwyr1-3-5-0[data-popper-placement^="bottom"] > div {
   transform-origin: center top;
 }
-._hplwyr1-3-4-0[data-popper-placement^="left"] > div {
+._hplwyr1-3-5-0[data-popper-placement^="left"] > div {
   transform-origin: right center;
 }
-._hplwyr1-3-4-0[data-popper-placement^="right"] > div {
+._hplwyr1-3-5-0[data-popper-placement^="right"] > div {
   transform-origin: left center;
 }
-._hplwyr2-3-4-0 {
+._hplwyr2-3-5-0 {
   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-4-0";
-var tooltipElementCSS = "_hplwyr1-3-4-0";
-var tooltipOffsetVar = "var(--_hplwyr0-3-4-0)";
+var tooltipAnimationWrapperCSS = "_hplwyr2-3-5-0";
+var tooltipElementCSS = "_hplwyr1-3-5-0";
+var tooltipOffsetVar = "var(--_hplwyr0-3-5-0)";
 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-4-0';\nexport var tooltipElementCSS = '_hplwyr1-3-4-0';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-4-0)';"],
+  "sourcesContent": ["import './tooltip.css';\nexport var tooltipAnimationWrapperCSS = '_hplwyr2-3-5-0';\nexport var tooltipElementCSS = '_hplwyr1-3-5-0';\nexport var tooltipOffsetVar = 'var(--_hplwyr0-3-5-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }