@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/notifications/notification-settings/NotificationSettings.sty.js

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-10-4";
+var overlayText = "_1cohdty0-3-11-0";
 export {
   overlayText
 };

package/esm/notifications/notification-settings/NotificationSettings.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.css.ts"],
-  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-10-4';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

@@ -1,11 +1,11 @@
-._yjszxq0-3-10-4 {
+._yjszxq0-3-11-0 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-10-4 {
+._yjszxq1-3-11-0 {
   display: flex;
 }
-._yjszxq1-3-10-4._yjszxq1-3-10-4 {
+._yjszxq1-3-11-0._yjszxq1-3-11-0 {
   border: 0;
   border-radius: 0;
   padding-left: var(--dt-spacings-size-8, 8px);
@@ -13,14 +13,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-10-4 {
+._yjszxq2-3-11-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-10-4 {
+._yjszxq3-3-11-0 {
   max-width: 100%;
 }
-._yjszxq3-3-10-4._yjszxq3-3-10-4 {
+._yjszxq3-3-11-0._yjszxq3-3-11-0 {
   overflow-wrap: anywhere;
 }

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

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var flexContainer = "_yjszxq2-3-10-4";
-var icon = "_yjszxq1-3-10-4";
-var root = "_yjszxq0-3-10-4";
-var text = "_yjszxq3-3-10-4";
+var flexContainer = "_yjszxq2-3-11-0";
+var icon = "_yjszxq1-3-11-0";
+var root = "_yjszxq0-3-11-0";
+var text = "_yjszxq3-3-11-0";
 export {
   flexContainer,
   icon,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.css.ts"],
-  "sourcesContent": ["import './Toast.css';\nexport var flexContainer = '_yjszxq2-3-10-4';\nexport var icon = '_yjszxq1-3-10-4';\nexport var root = '_yjszxq0-3-10-4';\nexport var text = '_yjszxq3-3-10-4';"],
+  "sourcesContent": ["import './Toast.css';\nexport var flexContainer = '_yjszxq2-3-11-0';\nexport var icon = '_yjszxq1-3-11-0';\nexport var root = '_yjszxq0-3-11-0';\nexport var text = '_yjszxq3-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,OAAO;",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-10-4 {
+@keyframes _rxr5810-3-11-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-10-4 {
+@keyframes _rxr5811-3-11-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-10-4 {
+@keyframes _rxr5812-3-11-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,34 +22,34 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-10-4 {
+._rxr5813-3-11-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._rxr5813-3-10-4 .Toastify__toast-container {
+._rxr5813-3-11-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-10-4 .Toastify__toast-container--bottom-left {
+._rxr5813-3-11-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-._rxr5813-3-10-4 .Toastify__toast-container--bottom-right {
+._rxr5813-3-11-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-._rxr5813-3-10-4 .Toastify__toast-container--bottom-center {
+._rxr5813-3-11-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-._rxr5813-3-10-4 .Toastify__toast {
+._rxr5813-3-11-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-10-4 .Toastify__toast-body {
+._rxr5813-3-11-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-._rxr5813-3-10-4 .Toastify__toast-body > div {
+._rxr5813-3-11-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._rxr5813-3-10-4 .Toastify__toast-icon {
+._rxr5813-3-11-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-._rxr5813-3-10-4 .Toastify__progress-bar {
+._rxr5813-3-11-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -98,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-._rxr5813-3-10-4 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-10-4 1 forwards;
+._rxr5813-3-11-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-11-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-10-4;
+  animation-name: _rxr5810-3-11-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-10-4;
+  animation-name: _rxr5811-3-11-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-10-4";
+var root = "_rxr5813-3-11-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-10-4';"],
+  "sourcesContent": ["import './ToastContainer.css';\nexport var root = '_rxr5813-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-10-4 {
+._14971970-3-11-0 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -6,41 +6,45 @@
   top: 0;
   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);
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
 }
-._14971971-3-10-4 {
+._14971971-3-11-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-10-4 {
+._14971972-3-11-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-10-4 {
+._14971973-3-11-0 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-10-4 {
+._14971974-3-11-0 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-10-4 {
+._14971975-3-11-0 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-10-4 {
+._14971976-3-11-0 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-10-4 {
+._14971977-3-11-0 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-10-4 {
+._14971978-3-11-0 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.js

@@ -69,103 +69,103 @@ const fade = {
     }
   }
 };
-const Drawer = /* @__PURE__ */ forwardRef(
-  (props, forwardedRef) => {
-    const {
-      placement = "right",
-      width = "medium",
-      isDismissed,
-      onDismiss,
-      children,
-      className: consumerClassName,
-      style: consumerStyle,
-      modal = true,
-      "data-testid": dataTestId,
-      disableAnimations = false,
-      ...remainingProps
-    } = props;
-    const ref = useRef(null);
-    const { overlayProps } = useOverlay(
-      {
-        onClose: (reason) => {
-          onDismiss(true, reason);
-        },
-        isOpen: !isDismissed,
-        isDismissible: false,
-        isKeyboardDismissDisabled: false
+const Drawer = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const {
+    placement = "right",
+    width = "medium",
+    isDismissed,
+    onDismiss,
+    children,
+    className: consumerClassName,
+    style: consumerStyle,
+    modal = true,
+    "data-testid": dataTestId,
+    disableAnimations = false,
+    ...remainingProps
+  } = props;
+  const ref = useRef(null);
+  const { overlayProps } = useOverlay(
+    {
+      onClose: (reason) => {
+        onDismiss(true, reason);
+      },
+      isOpen: !isDismissed,
+      isDismissible: false,
+      isKeyboardDismissDisabled: false
+    },
+    ref
+  );
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const mergedRefs = useMergeRefs([ref, forwardedRef]);
+  const overlayContainerProps = useOverlayStacking(0, "overlay");
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: !isDismissed && /* @__PURE__ */ jsx(
+    OverlayContainer,
+    {
+      "data-testid": "drawer-container",
+      ...overlayContainerProps,
+      style: {
+        ...overlayContainerProps.style,
+        pointerEvents: modal ? void 0 : "none"
       },
-      ref
-    );
-    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
-    const mergedRefs = useMergeRefs([ref, forwardedRef]);
-    const overlayContainerProps = useOverlayStacking(0, "overlay");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: !isDismissed && /* @__PURE__ */ jsx(
-      OverlayContainer,
-      {
-        "data-testid": "drawer-container",
-        ...overlayContainerProps,
-        style: {
-          ...overlayContainerProps.style,
-          pointerEvents: modal ? void 0 : "none"
-        },
-        children: /* @__PURE__ */ jsx(
-          DrawerBackdrop,
-          {
-            modal,
-            overlayProps,
-            onDismiss,
-            disableAnimations,
-            children: /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                "data-testid": dataTestId,
-                ref: mergedRefs,
-                variants: disableAnimations ? {} : slideAnimation(placement),
-                initial: "hidden",
-                animate: "visible",
-                exit: "hidden",
-                onAnimationComplete: () => window.dispatchEvent(new Event("animationDone")),
-                tabIndex: -1,
-                className: clsx(
-                  consumerClassName,
-                  DrawerCSS,
-                  DrawerPlacementCSS[placement],
-                  {
-                    [DrawerWidthStyles.narrow]: width === "narrow",
-                    [DrawerWidthStyles.medium]: width === "medium",
-                    [DrawerWidthStyles.wide]: width === "wide",
-                    [DrawerWidthStyles.full]: width === "full"
-                  }
+      children: /* @__PURE__ */ jsx(
+        DrawerBackdrop,
+        {
+          modal,
+          overlayProps,
+          onDismiss,
+          disableAnimations,
+          children: /* @__PURE__ */ jsx(
+            motion.dialog,
+            {
+              "data-testid": dataTestId,
+              ref: mergedRefs,
+              variants: disableAnimations ? {} : slideAnimation(placement),
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              onAnimationComplete: () => window.dispatchEvent(new Event("animationDone")),
+              tabIndex: -1,
+              open: true,
+              className: clsx(
+                consumerClassName,
+                DrawerCSS,
+                DrawerPlacementCSS[placement],
+                {
+                  [DrawerWidthStyles.narrow]: width === "narrow",
+                  [DrawerWidthStyles.medium]: width === "medium",
+                  [DrawerWidthStyles.wide]: width === "wide",
+                  [DrawerWidthStyles.full]: width === "full"
+                }
+              ),
+              style: {
+                width: (
+                  // Avoid binding the predefined named widths to the style, but add any other values
+                  width !== "narrow" && width !== "medium" && width !== "wide" && width !== "full" ? width : void 0
                 ),
-                style: {
-                  width: (
-                    // Avoid binding the predefined named widths to the style, but add any other values
-                    width !== "narrow" && width !== "medium" && width !== "wide" && width !== "full" ? width : void 0
-                  ),
-                  ...consumerStyle
-                },
-                ...restProps,
-                ...behavioralTrackingProps,
-                "data-dt-component": COMPONENT_NAME,
-                children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: true, contain: modal, children: /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    variants: disableAnimations ? {} : fade,
-                    initial: "fadeOut",
-                    animate: "fadeIn",
-                    exit: "fadeOut",
-                    className: DrawerContentCSS,
-                    children: /* @__PURE__ */ jsx(OverlayStackingProvider, { children })
-                  }
-                ) })
-              }
-            )
-          }
-        )
-      }
-    ) });
-  }
-);
+                ...consumerStyle
+              },
+              ...restProps,
+              ...behavioralTrackingProps,
+              "aria-modal": modal,
+              "data-dt-component": COMPONENT_NAME,
+              children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: true, contain: modal, children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  variants: disableAnimations ? {} : fade,
+                  initial: "fadeOut",
+                  animate: "fadeIn",
+                  exit: "fadeOut",
+                  className: DrawerContentCSS,
+                  children: /* @__PURE__ */ jsx(OverlayStackingProvider, { children })
+                }
+              ) })
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
 const DrawerBackdrop = (props) => {
   const { children, modal, disableAnimations, onDismiss, overlayProps } = props;
   return /* @__PURE__ */ jsx(

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

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

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

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-10-4";
-var DrawerCSS = "_14971970-3-10-4";
-var DrawerContentCSS = "_14971978-3-10-4";
-var DrawerPlacementCSS = { left: "_14971971-3-10-4", right: "_14971972-3-10-4" };
-var DrawerWidthStyles = { narrow: "_14971973-3-10-4", medium: "_14971974-3-10-4", wide: "_14971975-3-10-4", full: "_14971976-3-10-4" };
+var DrawerBackdropCSS = "_14971977-3-11-0";
+var DrawerCSS = "_14971970-3-11-0";
+var DrawerContentCSS = "_14971978-3-11-0";
+var DrawerPlacementCSS = { left: "_14971971-3-11-0", right: "_14971972-3-11-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-11-0", medium: "_14971974-3-11-0", wide: "_14971975-3-11-0", full: "_14971976-3-11-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-10-4';\nexport var DrawerCSS = '_14971970-3-10-4';\nexport var DrawerContentCSS = '_14971978-3-10-4';\nexport var DrawerPlacementCSS = {left:'_14971971-3-10-4',right:'_14971972-3-10-4'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-10-4',medium:'_14971974-3-10-4',wide:'_14971975-3-10-4',full:'_14971976-3-10-4'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-11-0';\nexport var DrawerCSS = '_14971970-3-11-0';\nexport var DrawerContentCSS = '_14971978-3-11-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-11-0',right:'_14971972-3-11-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-11-0',medium:'_14971974-3-11-0',wide:'_14971975-3-11-0',full:'_14971976-3-11-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,qBAAqB,EAAC,MAAK,oBAAmB,OAAM,mBAAkB;AAC1E,IAAI,oBAAoB,EAAC,QAAO,oBAAmB,QAAO,oBAAmB,MAAK,oBAAmB,MAAK,mBAAkB;",
   "names": []
 }