@dynatrace/strato-components 3.1.1 → 3.2.0

package/filters/segment-selector/parts/Overlay.js

@@ -247,6 +247,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         }),
                         variant: "emphasized",
                         ref: addButtonRef,
+                        "data-dt-name": "Add",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                             import_Button.Button.Prefix,
@@ -271,6 +272,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         },
                         type: "reset",
                         form: formId,
+                        "data-dt-name": "ClearAll",
                         children: intl.formatMessage(import_segmentMessages.SEGMENTSELECTOR_MESSAGES.clearAll)
                       }
                     ),
@@ -281,6 +283,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         form: formId,
                         color: "primary",
                         variant: "accent",
+                        "data-dt-name": "Apply",
                         onClick: () => clearPlaceholder(),
                         children: intl.formatMessage(import_segmentMessages.SEGMENTSELECTOR_MESSAGES.applyButton)
                       }

package/filters/segment-selector/parts/Overlay.sty.js

@@ -29,11 +29,11 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var divider = "_bqi6d90-3-1-1";
-var fieldSet = "_bqi6d97-3-1-1";
-var isAnimating = "_bqi6d94-3-1-1";
-var legend = "_bqi6d96-3-1-1";
-var link = "_bqi6d95-3-1-1";
-var menuLink = "_bqi6d91-3-1-1";
-var overlayDefaultWidth = "_bqi6d92-3-1-1";
-var scrollContainer = "_bqi6d93-3-1-1";
+var divider = "_bqi6d90-3-2-0";
+var fieldSet = "_bqi6d97-3-2-0";
+var isAnimating = "_bqi6d94-3-2-0";
+var legend = "_bqi6d96-3-2-0";
+var link = "_bqi6d95-3-2-0";
+var menuLink = "_bqi6d91-3-2-0";
+var overlayDefaultWidth = "_bqi6d92-3-2-0";
+var scrollContainer = "_bqi6d93-3-2-0";

package/filters/segment-selector/parts/SegmentFooter.js

@@ -77,6 +77,7 @@ const SegmentFooter = () => {
                 "aria-label": intl.formatMessage(
                   import_segmentMessages.SEGMENTSELECTOR_MESSAGES.manageSegments
                 ),
+                "data-dt-name": "ManageSegments",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.SettingIcon, {})
               }
             )
@@ -87,6 +88,7 @@ const SegmentFooter = () => {
           {
             href: "https://dt-url.net/segments-documentation",
             className: styles.link,
+            "data-dt-name": "LearnMoreSegments",
             children: intl.formatMessage(import_segmentMessages.SEGMENTSELECTOR_MESSAGES.docsLinkText)
           }
         )

package/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-1-1 {
+._7mq3is0-3-2-0 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-1-1 {
+._7mq3is1-3-2-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-1-1 {
+._7mq3is2-3-2-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-1-1 {
+._7mq3is3-3-2-0 {
   all: unset;
 }

package/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.js

@@ -78,6 +78,7 @@ const ShowMorePanelRoot = ({ children }) => {
     return primaryContent;
   }
   const icon = isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ChevronUpSmallIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ChevronDownSmallIcon, {});
+  const dataDtName = isExpanded ? "ShowLessSegments" : "ShowMoreSegments";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: styles.list, children: primaryContent }),
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -101,6 +102,7 @@ const ShowMorePanelRoot = ({ children }) => {
           transitionDuration: "0s",
           transition: "none"
         },
+        "data-dt-name": dataDtName,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 2, as: "span", paddingLeft: 4, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_react_intl.FormattedMessage,

package/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -25,7 +25,7 @@ __export(ShowMorePanel_css_exports, {
 });
 module.exports = __toCommonJS(ShowMorePanel_css_exports);
 var import_ShowMorePanel_css_ts_vanilla = require("./ShowMorePanel.css");
-var expandableWrapper = "_7mq3is0-3-1-1";
-var expandableWrapperCollapsed = "_7mq3is1-3-1-1";
-var expandableWrapperExpanded = "_7mq3is2-3-1-1";
-var list = "_7mq3is3-3-1-1";
+var expandableWrapper = "_7mq3is0-3-2-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-2-0";
+var expandableWrapperExpanded = "_7mq3is2-3-2-0";
+var list = "_7mq3is3-3-2-0";

package/filters/segment-selector/parts/noAccessRights/CopyPermissionsButton.d.ts

@@ -4,4 +4,4 @@ import { ButtonProps } from '../../../../buttons/button/Button.js';
  * The copy permissions button shown in the SegmentSelector if the user doesn't have permissions to read segments.
  * @internal
  */
-export declare const CopyPermissionsButton: (props: Pick<ButtonProps<ElementType>, "color" | "variant"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const CopyPermissionsButton: (props: Pick<ButtonProps<ElementType>, "color" | "variant"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;

package/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.js

@@ -279,6 +279,7 @@ const SegmentsPreset = (props) => {
   const color = isSelected ? "primary" : "neutral";
   const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);
   const icon = isPinned ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {});
+  const pinButtonDataDtName = isPinned ? "Unpin" : "Pin";
   const onClick = () => isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);
   const labelRef = (0, import_react.useRef)(null);
   const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
@@ -359,6 +360,7 @@ const SegmentsPreset = (props) => {
                     onClick,
                     disabled: pinLimitReached && !isPinned,
                     "aria-label": pinningTooltipText,
+                    "data-dt-name": pinButtonDataDtName,
                     children: icon
                   }
                 )

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-1-1 {
+._1oehqvw3-3-2-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-1-1 {
+._1oehqvw4-3-2-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-1-1._1oehqvw5-3-1-1 {
-  color: var(--_1oehqvw2-3-1-1);
+._1oehqvw5-3-2-0._1oehqvw5-3-2-0 {
+  color: var(--_1oehqvw2-3-2-0);
 }
-._1oehqvw6-3-1-1 {
+._1oehqvw6-3-2-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-1-1._1oehqvw7-3-1-1 {
+._1oehqvw7-3-2-0._1oehqvw7-3-2-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-1-1::before {
+._1oehqvw8-3-2-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,38 +32,38 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-1-1 {
-  --_1oehqvw0-3-1-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-1-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-1-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-2-0 {
+  --_1oehqvw0-3-2-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-2-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-2-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1oehqvwa-3-1-1 {
-  --_1oehqvw0-3-1-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-1-1: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-1-1: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-2-0 {
+  --_1oehqvw0-3-2-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-2-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-2-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1oehqvwb-3-1-1:hover._1oehqvwb-3-1-1:hover, ._1oehqvwb-3-1-1:focus-visible._1oehqvwb-3-1-1:focus-visible {
-  background-color: var(--_1oehqvw1-3-1-1);
+._1oehqvwb-3-2-0:hover._1oehqvwb-3-2-0:hover, ._1oehqvwb-3-2-0:focus-visible._1oehqvwb-3-2-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-2-0);
 }
-._1oehqvwc-3-1-1._1oehqvwc-3-1-1 {
+._1oehqvwc-3-2-0._1oehqvwc-3-2-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-1-1);
+  background-color: var(--_1oehqvw0-3-2-0);
 }
-._1oehqvwc-3-1-1:hover._1oehqvwc-3-1-1:hover, ._1oehqvwc-3-1-1:focus-visible._1oehqvwc-3-1-1:focus-visible {
-  background-color: var(--_1oehqvw1-3-1-1);
+._1oehqvwc-3-2-0:hover._1oehqvwc-3-2-0:hover, ._1oehqvwc-3-2-0:focus-visible._1oehqvwc-3-2-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-2-0);
 }
-._1oehqvwc-3-1-1:disabled, ._1oehqvwc-3-1-1:disabled:hover._1oehqvwc-3-1-1:disabled:hover {
+._1oehqvwc-3-2-0:disabled, ._1oehqvwc-3-2-0:disabled:hover._1oehqvwc-3-2-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1oehqvw9-3-1-1:has(button:focus-visible) ._1oehqvwc-3-1-1, ._1oehqvw9-3-1-1:hover ._1oehqvwc-3-1-1 {
+._1oehqvw9-3-2-0:has(button:focus-visible) ._1oehqvwc-3-2-0, ._1oehqvw9-3-2-0:hover ._1oehqvwc-3-2-0 {
   opacity: 1;
 }
-._1oehqvw9-3-1-1:has(._1oehqvwc-3-1-1:focus-visible) ._1oehqvwb-3-1-1, ._1oehqvw9-3-1-1:hover ._1oehqvwb-3-1-1:not(:hover) {
-  background-color: var(--_1oehqvw0-3-1-1);
+._1oehqvw9-3-2-0:has(._1oehqvwc-3-2-0:focus-visible) ._1oehqvwb-3-2-0, ._1oehqvw9-3-2-0:hover ._1oehqvwb-3-2-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-2-0);
 }
-._1oehqvw9-3-1-1 button, ._1oehqvw9-3-1-1:hover button {
+._1oehqvw9-3-2-0 button, ._1oehqvw9-3-2-0:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -31,13 +31,13 @@ __export(SegmentsPresets_css_exports, {
 });
 module.exports = __toCommonJS(SegmentsPresets_css_exports);
 var import_SegmentsPresets_css_ts_vanilla = require("./SegmentsPresets.css");
-var and = "_1oehqvw5-3-1-1";
-var buttonLabel = "_1oehqvw6-3-1-1";
-var inputGroup = "_1oehqvw9-3-1-1";
-var inputGroupSelected = "_1oehqvwa-3-1-1";
-var list = "_1oehqvw3-3-1-1";
-var listItem = "_1oehqvw4-3-1-1";
-var presetButton = "_1oehqvwb-3-1-1";
-var sectionHeadline = "_1oehqvw7-3-1-1";
-var selectionMark = "_1oehqvw8-3-1-1";
-var suffixButton = "_1oehqvwc-3-1-1";
+var and = "_1oehqvw5-3-2-0";
+var buttonLabel = "_1oehqvw6-3-2-0";
+var inputGroup = "_1oehqvw9-3-2-0";
+var inputGroupSelected = "_1oehqvwa-3-2-0";
+var list = "_1oehqvw3-3-2-0";
+var listItem = "_1oehqvw4-3-2-0";
+var presetButton = "_1oehqvwb-3-2-0";
+var sectionHeadline = "_1oehqvw7-3-2-0";
+var selectionMark = "_1oehqvw8-3-2-0";
+var suffixButton = "_1oehqvwc-3-2-0";

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresetsList.js

@@ -68,18 +68,26 @@ const SegmentsPresetList = ({
     return null;
   }
   const pinLimitReached = data.pinnedPresets.length >= PIN_LIMIT;
-  const recentPresets = data.recentPresets?.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: styles.listItem, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_SegmentsPreset.SegmentsPreset,
+  const recentPresets = data.recentPresets?.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "li",
     {
-      uiPreset: preset,
-      id: preset.id,
-      pinLimitReached,
-      isPinned: data.pinnedPresets.some(
-        (pinnedPreset) => preset.id === pinnedPreset.id
-      ),
-      isSelected: (0, import_isSelectedPreset.isSelectedPreset)(segments, preset.segments)
-    }
-  ) }, `recent-${preset.id}`));
+      className: styles.listItem,
+      "data-dt-name": "Recent",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_SegmentsPreset.SegmentsPreset,
+        {
+          uiPreset: preset,
+          id: preset.id,
+          pinLimitReached,
+          isPinned: data.pinnedPresets.some(
+            (pinnedPreset) => preset.id === pinnedPreset.id
+          ),
+          isSelected: (0, import_isSelectedPreset.isSelectedPreset)(segments, preset.segments)
+        }
+      )
+    },
+    `recent-${preset.id}`
+  ));
   const primaryContent = recentPresets.length > 3 ? recentPresets.slice(0, 2) : recentPresets;
   const extendedContent = recentPresets.length > 3 ? recentPresets.slice(2) : null;
   const showRecent = data.recentPresets.length > 0;
@@ -153,16 +161,24 @@ const SegmentsPresetList = ({
                   },
                   "pinned-header"
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: styles.list, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: data.pinnedPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: styles.listItem, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_SegmentsPreset.SegmentsPreset,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: styles.list, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: data.pinnedPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "li",
                   {
-                    uiPreset: preset,
-                    id: preset.id,
-                    pinLimitReached,
-                    isPinned: true,
-                    isSelected: (0, import_isSelectedPreset.isSelectedPreset)(segments, preset.segments)
-                  }
-                ) }, `pinned-${preset.id}`)) }, "pinned-presets-list") })
+                    className: styles.listItem,
+                    "data-dt-name": "Pinned",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_SegmentsPreset.SegmentsPreset,
+                      {
+                        uiPreset: preset,
+                        id: preset.id,
+                        pinLimitReached,
+                        isPinned: true,
+                        isSelected: (0, import_isSelectedPreset.isSelectedPreset)(segments, preset.segments)
+                      }
+                    )
+                  },
+                  `pinned-${preset.id}`
+                )) }, "pinned-presets-list") })
               ]
             }
           ) }, "pinned-presets")

package/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,47 +1,47 @@
-._1fuxi5m0-3-1-1 {
+._1fuxi5m0-3-2-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-1-1._1fuxi5m2-3-1-1 {
+._1fuxi5m2-3-2-0._1fuxi5m2-3-2-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-1-1 {
+._1fuxi5m3-3-2-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-1-1._1fuxi5m3-3-1-1 {
+._1fuxi5m3-3-2-0._1fuxi5m3-3-2-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-1-1 {
+._1fuxi5m4-3-2-0 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-1-1 {
+._1fuxi5m5-3-2-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-1-1 {
+._1fuxi5m6-3-2-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-1-1 {
+._1fuxi5m7-3-2-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-1-1 {
+._1fuxi5m8-3-2-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-1-1 {
+  ._1fuxi5m0-3-2-0 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-1-1 {
+  ._1fuxi5m1-3-2-0 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-1-1 {
+  ._1fuxi5m5-3-2-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelect.d.ts

@@ -14,5 +14,5 @@ type SegmentsSelectProps = {
  * SegmentsSelect component
  * @internal
  */
-export declare const SegmentSelect: (props: SegmentsSelectProps & import("react").RefAttributes<FormControlWithOverlayRef<HTMLDivElement>>) => React.ReactElement | null;
+export declare const SegmentSelect: (props: SegmentsSelectProps & import("react").RefAttributes<FormControlWithOverlayRef<HTMLDivElement>>) => import("react").ReactElement | null;
 export {};

package/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -27,8 +27,8 @@ __export(SegmentSelect_css_exports, {
 module.exports = __toCommonJS(SegmentSelect_css_exports);
 var import_SegmentSelect_css_ts_vanilla = require("./SegmentSelect.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearButtonCSS = "_1fuxi5m3-3-1-1";
-var noBorderRadiusRight = "_1fuxi5m2-3-1-1";
-var segmentsSelectCSS = "_1fuxi5m1-3-1-1";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m4-3-1-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-1-1", "full-readonly": "_1fuxi5m6-3-1-1", "no-variables": "_1fuxi5m7-3-1-1", "no-variables-readonly": "_1fuxi5m8-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-1-1";
+var clearButtonCSS = "_1fuxi5m3-3-2-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-2-0";
+var segmentsSelectCSS = "_1fuxi5m1-3-2-0";
+var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m4-3-2-0", variantClassNames: { layout: { full: "_1fuxi5m5-3-2-0", "full-readonly": "_1fuxi5m6-3-2-0", "no-variables": "_1fuxi5m7-3-2-0", "no-variables-readonly": "_1fuxi5m8-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-2-0";

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-1-1 {
+._1e5el1o0-3-2-0 {
   max-width: 400px;
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -22,4 +22,4 @@ __export(SegmentSelectorTrigger_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelectorTrigger_css_exports);
 var import_SegmentSelectorTrigger_css_ts_vanilla = require("./SegmentSelectorTrigger.css");
-var trigger = "_1e5el1o0-3-1-1";
+var trigger = "_1e5el1o0-3-2-0";

package/filters/segment-selector/parts/selectionBar/SelectionBar.js

@@ -245,6 +245,7 @@ const SelectionBar = (props) => {
                   "aria-label": intl.formatMessage(
                     import_segmentMessages.SEGMENTSELECTOR_MESSAGES.removeSegmentButton
                   ),
+                  "data-dt-name": "Remove",
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {}) })
                 }
               )

package/filters/timeframe-selector/TimeframeSelector.css

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-1-1 {
+._1sqhmjg0-3-2-0 {
   min-width: 0;
   box-sizing: border-box;
 }

package/filters/timeframe-selector/TimeframeSelector.d.ts

@@ -8,7 +8,7 @@ import type { TimeRangePickerRef } from '../../forms/shared-types.js';
 
 * @public
 */
-export declare const TimeframeSelector: ((props: TimeframeSelectorProps & import("react").RefAttributes<TimeRangePickerRef<HTMLDivElement>>) => React.ReactElement | null) & {
+export declare const TimeframeSelector: ((props: TimeframeSelectorProps & import("react").RefAttributes<TimeRangePickerRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
     Trigger: {
         (props: TimeframeSelectorTriggerProps): import("react/jsx-runtime.js").JSX.Element;
         displayName: string;

package/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -22,4 +22,4 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-1-1";
+var displayValueParts = "_1sqhmjg0-3-2-0";

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-1-1 {
+._at2xro0-3-2-0 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-1-1 {
+._at2xro1-3-2-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-1-1 {
+._at2xro2-3-2-0 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-1-1 {
+  ._at2xro1-3-2-0 {
     flex-direction: row;
   }
 }

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.js

@@ -82,6 +82,7 @@ const CustomTimeframeSelector = () => {
     showError: false,
     isTouched: false
   });
+  const applyButtonDataDtName = "Apply";
   const handleApply = (0, import_react.useCallback)(() => {
     if (!state.isValid) {
       return;
@@ -237,6 +238,7 @@ const CustomTimeframeSelector = () => {
                     borderTopLeftRadius: 0,
                     borderBottomLeftRadius: 0
                   },
+                  "data-dt-name": applyButtonDataDtName,
                   children: intl.formatMessage(
                     import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.applyButton
                   )
@@ -256,6 +258,7 @@ const CustomTimeframeSelector = () => {
         type: "submit",
         style: { alignSelf: "end" },
         onClick: handleApply,
+        "data-dt-name": applyButtonDataDtName,
         children: intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.applyButton)
       }
     )

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -24,6 +24,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-1-1";
-var overlayRoot = "_at2xro1-3-1-1";
-var wrapper = "_at2xro2-3-1-1";
+var fieldset = "_at2xro0-3-2-0";
+var overlayRoot = "_at2xro1-3-2-0";
+var wrapper = "_at2xro2-3-2-0";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -1,4 +1,4 @@
-._14xc6b0-3-1-1 {
+._14xc6b0-3-2-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-1-1 {
+._14xc6b1-3-2-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-1-1 {
+._14xc6b2-3-2-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-1-1 {
+._14xc6b3-3-2-0 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.d.ts

@@ -12,5 +12,5 @@ interface TimeframeSelectorOverlayProps extends WithChildren, MaskingProps, Pick
 /**
  * Relative Timeframe Selector Overlay component
  */
-export declare const TimeframeSelectorOverlay: (props: TimeframeSelectorOverlayProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const TimeframeSelectorOverlay: (props: TimeframeSelectorOverlayProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 export {};

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -25,7 +25,7 @@ __export(TimeframeSelectorOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorOverlay_css_exports);
 var import_TimeframeSelectorOverlay_css_ts_vanilla = require("./TimeframeSelectorOverlay.css");
-var footer = "_14xc6b2-3-1-1";
-var hint = "_14xc6b3-3-1-1";
-var scrollContainer = "_14xc6b1-3-1-1";
-var wrapper = "_14xc6b0-3-1-1";
+var footer = "_14xc6b2-3-2-0";
+var hint = "_14xc6b3-3-2-0";
+var scrollContainer = "_14xc6b1-3-2-0";
+var wrapper = "_14xc6b0-3-2-0";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js

@@ -102,6 +102,7 @@ const TimeframeSelectorOverlayFooter = (props) => {
                     href: "https://dt-url.net/timeframe-selector",
                     textStyle: "small",
                     style: { paddingRight: import_spacings.default.Size6 },
+                    "data-dt-name": "LearnMore",
                     children: intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)
                   }
                 )