@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TZDateMini } from "@date-fns/tz";
+import { forwardRef } from "react";
+import { useIntl } from "react-intl";
+import * as styles from "./TimeframeSelectorOverlay.sty.js";
+import { TimeframeSelectorOverlayFooter } from "./TimeframeSelectorOverlayFooter.js";
+import { FocusScope } from "../../../../core/components/focus-scope/FocusScope.js";
+import { OverlayContainer } from "../../../../core/components/OverlayContainer.js";
+import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
+import { useRovingFocus } from "../../../../core/hooks/useRovingFocus.js";
+import { OverlayStackingProvider } from "../../../../core/providers/OverlayStackingProvider.js";
+import { useDateTimeFormat } from "../../../../forms/date-time-picker/hooks/useDateTimeFormat.js";
+import { Flex } from "../../../../layouts/flex/Flex.js";
+import { DismissButton } from "../../../../overlays/hooks/useOverlay.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+import { CustomTimeframeSelector } from "../custom-timeframe-selector/CustomTimeframeSelector.js";
+import { Presets } from "../presets/Presets.js";
+import { RecentTimeframes } from "../presets/RecentTimeframes.js";
+function getMaxWidth(toParts) {
+  const placeholderFromOrToParts = toParts(new TZDateMini()).map(
+    (part) => part.value
+  );
+  const placeholderFromOrTo = placeholderFromOrToParts.join("");
+  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;
+  const surroundingSpace = 22;
+  return `${placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for "0" instead of a placeholder char, which needs slightly more width
+  surroundingSpace}ch`;
+}
+const TimeframeSelectorOverlay = forwardRef((props, forwardedRef) => {
+  const {
+    overlayProps,
+    clearable,
+    precision,
+    children,
+    overlayClose,
+    onChange,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow
+  } = props;
+  const intl = useIntl();
+  const {
+    trapFocus,
+    style: overlayPropsStyle,
+    ...remainingOverlayProps
+  } = overlayProps;
+  const overlayContainerProps = useOverlayStacking(void 0, "overlay");
+  const { toParts } = useDateTimeFormat("datetime", precision);
+  const { containerRef } = useRovingFocus({
+    initialIndex: 0,
+    direction: "vertical",
+    focusableChildrenSelector: "[role='option'][aria-disabled='false']"
+  });
+  return /* @__PURE__ */ jsx(
+    OverlayContainer,
+    {
+      ...overlayContainerProps,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      children: /* @__PURE__ */ jsx(OverlayStackingProvider, { children: /* @__PURE__ */ jsxs(FocusScope, { autoFocus: true, children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            ref: forwardedRef,
+            gap: 4,
+            flexDirection: "column",
+            padding: 4,
+            className: styles.wrapper,
+            style: {
+              ...overlayPropsStyle,
+              width: getMaxWidth(toParts),
+              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`
+            },
+            "aria-label": intl.formatMessage(
+              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer
+            ),
+            ...remainingOverlayProps,
+            children: [
+              /* @__PURE__ */ jsx(CustomTimeframeSelector, {}),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  ref: containerRef,
+                  gap: 4,
+                  paddingLeft: 0,
+                  paddingRight: 0,
+                  flexDirection: "column",
+                  className: styles.scrollContainer,
+                  children: [
+                    children ?? /* @__PURE__ */ jsx(Presets, {}),
+                    /* @__PURE__ */ jsx(RecentTimeframes, {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TimeframeSelectorOverlayFooter,
+                {
+                  clearable,
+                  onChange
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DismissButton, { onDismiss: overlayClose })
+      ] }) })
+    }
+  );
+});
+TimeframeSelectorOverlay.displayName = "TimeframeSelectorOverlay";
+export {
+  TimeframeSelectorOverlay
+};
+//# sourceMappingURL=TimeframeSelectorOverlay.js.map

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.tsx"],
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { TimeframeSelectorOverlayFooter } from './TimeframeSelectorOverlayFooter.js';\nimport { FocusScope } from '../../../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { useRovingFocus } from '../../../../core/hooks/useRovingFocus.js';\nimport { OverlayStackingProvider } from '../../../../core/providers/OverlayStackingProvider.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { useDateTimeFormat } from '../../../../forms/date-time-picker/hooks/useDateTimeFormat.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { DismissButton } from '../../../../overlays/hooks/useOverlay.js';\nimport type { OverlayProps } from '../../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\nimport { CustomTimeframeSelector } from '../custom-timeframe-selector/CustomTimeframeSelector.js';\nimport { Presets } from '../presets/Presets.js';\nimport { RecentTimeframes } from '../presets/RecentTimeframes.js';\n\n//#region Typings\ninterface TimeframeSelectorOverlayProps\n  extends WithChildren,\n    MaskingProps,\n    Pick<TimeframeSelectorProps, 'onChange' | 'clearable' | 'precision'> {\n  /** The props of the overlay. */\n  overlayProps: OverlayProps['overlayProps'];\n  /** The state of the overlay. */\n  overlayClose: OverlayTriggerState['close'];\n}\n//#endregion\n\nfunction getMaxWidth(toParts: (date: Date) => Intl.DateTimeFormatPart[]) {\n  const placeholderFromOrToParts = toParts(new TZDateMini()).map(\n    (part: Intl.DateTimeFormatPart) => part.value,\n  );\n  const placeholderFromOrTo = placeholderFromOrToParts.join('');\n  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;\n  const surroundingSpace = 22; // this is an approximation in ch units of the space around the placeholders (including the inline padding inside each placeholder part)\n\n  return `${\n    placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for \"0\" instead of a placeholder char, which needs slightly more width\n    surroundingSpace\n  }ch`;\n}\n\n/**\n * Relative Timeframe Selector Overlay component\n */\nexport const TimeframeSelectorOverlay = forwardRef<\n  HTMLDivElement,\n  TimeframeSelectorOverlayProps\n>((props, forwardedRef) => {\n  const {\n    overlayProps,\n    clearable,\n    precision,\n    children,\n    overlayClose,\n    onChange,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n  const {\n    trapFocus,\n    style: overlayPropsStyle,\n    ...remainingOverlayProps\n  } = overlayProps;\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const { toParts } = useDateTimeFormat('datetime', precision);\n\n  const { containerRef } = useRovingFocus<HTMLDivElement>({\n    initialIndex: 0,\n    direction: 'vertical',\n    focusableChildrenSelector: \"[role='option'][aria-disabled='false']\",\n  });\n\n  return (\n    <OverlayContainer\n      {...overlayContainerProps}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <OverlayStackingProvider>\n        <FocusScope autoFocus>\n          <Flex\n            ref={forwardedRef}\n            gap={4}\n            flexDirection=\"column\"\n            padding={4}\n            className={styles.wrapper}\n            style={{\n              ...overlayPropsStyle,\n              width: getMaxWidth(toParts),\n              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`,\n            }}\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer,\n            )}\n            {...remainingOverlayProps}\n          >\n            <CustomTimeframeSelector />\n            <Flex\n              ref={containerRef}\n              gap={4}\n              paddingLeft={0}\n              paddingRight={0}\n              flexDirection=\"column\"\n              className={styles.scrollContainer}\n            >\n              {children ?? <Presets />}\n              <RecentTimeframes />\n            </Flex>\n            <TimeframeSelectorOverlayFooter\n              clearable={clearable}\n              onChange={onChange}\n            />\n          </Flex>\n          <DismissButton onDismiss={overlayClose} />\n        </FocusScope>\n      </OverlayStackingProvider>\n    </OverlayContainer>\n  );\n});\n\n(\n  TimeframeSelectorOverlay as typeof TimeframeSelectorOverlay & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlay';\n"],
+  "mappings": "AA2GY,cACA,YADA;AA3GZ,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAGxC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAE9B,SAAS,mCAAmC;AAE5C,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAcjC,SAAS,YAAY,SAAoD;AACvE,QAAM,2BAA2B,QAAQ,IAAI,WAAW,CAAC,EAAE;AAAA,IACzD,CAAC,SAAkC,KAAK;AAAA,EAC1C;AACA,QAAM,sBAAsB,yBAAyB,KAAK,EAAE;AAC5D,QAAM,4BAA4B,IAAI,oBAAoB;AAC1D,QAAM,mBAAmB;AAEzB,SAAO,GACL,4BAA4B;AAAA,EAC5B,gBACF;AACF;AAKO,MAAM,2BAA2B,WAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,wBAAwB,mBAAmB,QAAW,SAAS;AAErE,QAAM,EAAE,QAAQ,IAAI,kBAAkB,YAAY,SAAS;AAE3D,QAAM,EAAE,aAAa,IAAI,eAA+B;AAAA,IACtD,cAAc;AAAA,IACd,WAAW;AAAA,IACX,2BAA2B;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,2BACC,+BAAC,cAAW,WAAS,MACnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,eAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,GAAG;AAAA,cACH,OAAO,YAAY,OAAO;AAAA,cAC1B,WAAW,OAAO,mBAAmB,SAAS;AAAA,YAChD;AAAA,YACA,cAAY,KAAK;AAAA,cACf,4BAA4B;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,2BAAwB;AAAA,cACzB;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,eAAc;AAAA,kBACd,WAAW,OAAO;AAAA,kBAEjB;AAAA,gCAAY,oBAAC,WAAQ;AAAA,oBACtB,oBAAC,oBAAiB;AAAA;AAAA;AAAA,cACpB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAc,WAAW,cAAc;AAAA,SAC1C,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,yBAGA,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+import "./TimeframeSelectorOverlay.css";
+var footer = "_14xc6b2-3-1-0";
+var hint = "_14xc6b3-3-1-0";
+var scrollContainer = "_14xc6b1-3-1-0";
+var wrapper = "_14xc6b0-3-1-0";
+export {
+  footer,
+  hint,
+  scrollContainer,
+  wrapper
+};
+//# sourceMappingURL=TimeframeSelectorOverlay.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css.ts"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-1-0';\nexport var hint = '_14xc6b3-3-1-0';\nexport var scrollContainer = '_14xc6b1-3-1-0';\nexport var wrapper = '_14xc6b0-3-1-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,kBAAkB;AACtB,IAAI,UAAU;",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TZDateMini } from "@date-fns/tz";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import {
+  getRegionalFormat,
+  getTimezone
+} from "@dynatrace-sdk/user-preferences";
+import * as styles from "./TimeframeSelectorOverlay.sty.js";
+import { Button } from "../../../../buttons/button/Button.js";
+import { Divider } from "../../../../layouts/divider/Divider.js";
+import { Flex } from "../../../../layouts/flex/Flex.js";
+import { globalSprinkles } from "../../../../styles/safe-sprinkles.js";
+import { ExternalLink } from "../../../../typography/external-link/ExternalLink.js";
+import { Text } from "../../../../typography/text/Text.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+const TimeframeSelectorOverlayFooter = (props) => {
+  const { clearable, onChange } = props;
+  const intl = useIntl();
+  const timeZoneWithOffset = useMemo(() => {
+    const timeZone = getTimezone();
+    const parts = new Intl.DateTimeFormat(getRegionalFormat(), {
+      timeZone,
+      timeZoneName: "shortOffset"
+    }).formatToParts(TZDateMini.tz(timeZone));
+    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {
+      timeZone,
+      timeZoneName: "short"
+    }).formatToParts(TZDateMini.tz(timeZone));
+    const timeZonePart = parts?.find((part) => part.type === "timeZoneName")?.value.replace("GMT", "UTC");
+    const timeZoneInfo = timeZonePart === "UTC" ? "UTC+0" : timeZonePart;
+    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : "";
+    const timeZoneShortName = partsShortName?.find(
+      (part) => part.type === "timeZoneName"
+    )?.value;
+    return `${timeZoneShortName}${timezoneDetails}`;
+  }, []);
+  function handleClearSelection() {
+    onChange?.(null);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexWrap: "wrap-reverse",
+        flex: 1,
+        gap: 4,
+        className: styles.footer,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justifyContent: clearable ? "flex-start" : "space-between",
+              alignItems: "center",
+              flexShrink: 1,
+              flexGrow: 1,
+              className: clsx(globalSprinkles({ paddingLeft: 6 }), {
+                [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable
+              }),
+              children: [
+                /* @__PURE__ */ jsx(Text, { className: styles.hint, children: timeZoneWithOffset }),
+                clearable && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: ExternalLink,
+                    href: "https://dt-url.net/timeframe-selector",
+                    textStyle: "small",
+                    style: { paddingRight: Spacings.Size6 },
+                    children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)
+                  }
+                )
+              ]
+            }
+          ),
+          clearable && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "reset",
+              onPointerDown: handleClearSelection,
+              size: "condensed",
+              children: intl.formatMessage(
+                TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+TimeframeSelectorOverlayFooter.displayName = "TimeframeSelectorOverlayFooter";
+export {
+  TimeframeSelectorOverlayFooter
+};
+//# sourceMappingURL=TimeframeSelectorOverlayFooter.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.tsx"],
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport {\n  getRegionalFormat,\n  getTimezone,\n} from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { globalSprinkles } from '../../../../styles/safe-sprinkles.js';\nimport { ExternalLink } from '../../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\n\nexport const TimeframeSelectorOverlayFooter = (\n  props: Pick<TimeframeSelectorProps, 'onChange' | 'clearable'>,\n) => {\n  const { clearable, onChange } = props;\n  const intl = useIntl();\n\n  const timeZoneWithOffset = useMemo(() => {\n    const timeZone = getTimezone();\n\n    const parts = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'short',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const timeZonePart = parts\n      ?.find((part) => part.type === 'timeZoneName')\n      ?.value.replace('GMT', 'UTC');\n    const timeZoneInfo = timeZonePart === 'UTC' ? 'UTC+0' : timeZonePart;\n    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : '';\n    const timeZoneShortName = partsShortName?.find(\n      (part) => part.type === 'timeZoneName',\n    )?.value;\n\n    return `${timeZoneShortName}${timezoneDetails}`;\n  }, []);\n\n  /** Handles the clear selection. Uses the pointerDown event to circumvent triggering the validation onBlur first. */\n  function handleClearSelection() {\n    onChange?.(null); // calls onChange only if it's not required\n  }\n\n  return (\n    <>\n      <Divider />\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        flexWrap=\"wrap-reverse\"\n        flex={1}\n        gap={4}\n        className={styles.footer}\n      >\n        <Flex\n          justifyContent={clearable ? 'flex-start' : 'space-between'}\n          alignItems=\"center\"\n          flexShrink={1}\n          flexGrow={1}\n          className={clsx(globalSprinkles({ paddingLeft: 6 }), {\n            [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable,\n          })}\n        >\n          <Text className={styles.hint}>{timeZoneWithOffset}</Text>\n          {clearable && <Divider orientation=\"vertical\" />}\n          <Text\n            as={ExternalLink}\n            href=\"https://dt-url.net/timeframe-selector\"\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)}\n          </Text>\n        </Flex>\n        {clearable && (\n          <Button\n            type=\"reset\"\n            onPointerDown={handleClearSelection}\n            size=\"condensed\"\n          >\n            {intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton,\n            )}\n          </Button>\n        )}\n      </Flex>\n    </>\n  );\n};\n\n(\n  TimeframeSelectorOverlayFooter as typeof TimeframeSelectorOverlayFooter & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlayFooter';\n"],
+  "mappings": "AAwDI,mBACE,KASE,YAVJ;AAxDJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAGrC,MAAM,iCAAiC,CAC5C,UACG;AACH,QAAM,EAAE,WAAW,SAAS,IAAI;AAChC,QAAM,OAAO,QAAQ;AAErB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,WAAW,YAAY;AAE7B,UAAM,QAAQ,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MACzD;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MAClE;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,eAAe,OACjB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc,GAC3C,MAAM,QAAQ,OAAO,KAAK;AAC9B,UAAM,eAAe,iBAAiB,QAAQ,UAAU;AACxD,UAAM,kBAAkB,eAAe,KAAK,YAAY,MAAM;AAC9D,UAAM,oBAAoB,gBAAgB;AAAA,MACxC,CAAC,SAAS,KAAK,SAAS;AAAA,IAC1B,GAAG;AAEH,WAAO,GAAG,iBAAiB,GAAG,eAAe;AAAA,EAC/C,GAAG,CAAC,CAAC;AAGL,WAAS,uBAAuB;AAC9B,eAAW,IAAI;AAAA,EACjB;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ;AAAA,IACT;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,YAAY,eAAe;AAAA,cAC3C,YAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW,KAAK,gBAAgB,EAAE,aAAa,EAAE,CAAC,GAAG;AAAA,gBACnD,CAAC,gBAAgB,EAAE,YAAY,GAAG,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC;AAAA,cAC3D,CAAC;AAAA,cAED;AAAA,oCAAC,QAAK,WAAW,OAAO,MAAO,8BAAmB;AAAA,gBACjD,aAAa,oBAAC,WAAQ,aAAY,YAAW;AAAA,gBAC9C;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBAErC,eAAK,cAAc,4BAA4B,YAAY;AAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAe;AAAA,cACf,MAAK;AAAA,cAEJ,eAAK;AAAA,gBACJ,4BAA4B;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAGE,+BAGA,cAAc;",
+  "names": []
+}

package/esm/filters/timeframe-selector/components/presets/PresetItem.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useIntl } from "react-intl";
+import { HistoryIcon } from "@dynatrace/strato-icons";
+import * as styles from "./Presets.sty.js";
+import { useId } from "../../../../core/hooks/useId.js";
+import { useFocusRing } from "../../../../core/styles/useFocusRing.js";
+import { mergeProps } from "../../../../core/utils/merge-props.js";
+import { SelectedOverCalendarContext } from "../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js";
+import { removePrecisionFromTimeValue } from "../../../../forms/date-time-range-picker/helpers.js";
+import { parseValue } from "../../../../forms/forms-core/time/timeParser.js";
+import { Flex } from "../../../../layouts/flex/Flex.js";
+import { Grid } from "../../../../layouts/grid/Grid.js";
+import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
+import { Text } from "../../../../typography/text/Text.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
+import { usePresetItemContext } from "../../hooks/usePresetItemContext.js";
+import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
+import { useTooltipMessages } from "../../hooks/useTooltipMessages.js";
+import {
+  isPresetSelected,
+  saveRecentTimeframe
+} from "../../utils/presets-helpers.js";
+import { isOutsideRange } from "../../utils/timeframe-selection.js";
+const PresetItem = (props) => {
+  const {
+    children,
+    value,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    ...remainingProps
+  } = props;
+  const intl = useIntl();
+  const [openTooltip, setOpenTooltip] = useState(false);
+  const { onChange, details } = useTimeframeSelectorContext();
+  const { min, max, precision } = useInternalTimeframeSelectorContext();
+  const { isRecent } = usePresetItemContext();
+  const isSelected = isPresetSelected(value, details, precision, isRecent);
+  const isDisabled = isOutsideRange(value, min, max);
+  const tooltipId = useId();
+  const tooltipFocusProps = {
+    onFocus: useCallback(
+      () => !isDisabled && setOpenTooltip(true),
+      [isDisabled]
+    ),
+    onBlur: useCallback(() => setOpenTooltip(false), [])
+  };
+  const { focusProps, focusClassName } = useFocusRing({
+    color: isSelected && !isDisabled ? "primary" : "neutral",
+    disabled: isDisabled
+  });
+  let state = isSelected ? "selected" : "rest";
+  if (isDisabled) {
+    state = "disabled";
+  }
+  const {
+    timeframeDisplayValue,
+    formattedPresetItemValue,
+    tooltipFormattedTimeValueStart,
+    tooltipFormattedTimeValueEnd,
+    isAbsoluteTimeframe,
+    isInvalid
+  } = useTooltipMessages(value, precision, children);
+  const { setSelectedOverCalendar } = useContext(SelectedOverCalendarContext);
+  const handleItemClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    const { from, to } = parseValue(value);
+    if (from && to) {
+      setSelectedOverCalendar?.(false);
+      const timeframe = {
+        from: removePrecisionFromTimeValue(from, precision) ?? from,
+        to: removePrecisionFromTimeValue(to, precision) ?? to
+      };
+      onChange(timeframe);
+      saveRecentTimeframe(timeframe);
+    }
+  }, [isDisabled, value, setSelectedOverCalendar, onChange, precision]);
+  const handleItemKeyDown = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      if (event.code === "Enter" || event.code === "NumpadEnter" || event.code === "Space") {
+        handleItemClick();
+      }
+    },
+    [handleItemClick, isDisabled]
+  );
+  const liRef = useRef(null);
+  useEffect(() => {
+    if (isSelected) {
+      liRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, []);
+  if (isInvalid) {
+    return null;
+  }
+  const tooltipContent = isDisabled ? /* @__PURE__ */ jsx(Text, { textStyle: "small", children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip) }) : /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 0, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Text, { textStyle: "base-emphasized", children: timeframeDisplayValue }),
+      /* @__PURE__ */ jsx(Text, { textStyle: "small", children: formattedPresetItemValue })
+    ] }),
+    !isAbsoluteTimeframe && /* @__PURE__ */ jsxs(Flex, { gap: 0, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Text, { textStyle: "small", children: tooltipFormattedTimeValueStart }),
+      /* @__PURE__ */ jsx(Text, { textStyle: "small", children: tooltipFormattedTimeValueEnd })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: liRef,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled,
+      className: clsx([
+        focusClassName,
+        styles.item({
+          state
+        }),
+        consumerClassName
+      ]),
+      onPointerDown: handleItemClick,
+      onKeyDown: handleItemKeyDown,
+      "data-testid": dataTestId,
+      style: consumerStyle,
+      ...mergeProps(remainingProps, focusProps, tooltipFocusProps),
+      children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          id: tooltipId,
+          text: tooltipContent,
+          placement: "right",
+          fallbackPlacements: [
+            "right-end",
+            "bottom-end",
+            "bottom",
+            "bottom-start",
+            "left-end",
+            "left",
+            "left-start"
+          ],
+          open: openTooltip,
+          onOpenChange: setOpenTooltip,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.wrapper({ isSelected, isDisabled }),
+              "aria-describedby": tooltipId,
+              children: /* @__PURE__ */ jsxs(Grid, { className: styles.itemContainer, children: [
+                /* @__PURE__ */ jsxs(Flex, { alignItems: "center", className: styles.displayValueWrapper, children: [
+                  isRecent && /* @__PURE__ */ jsx(HistoryIcon, { className: styles.recentIcon }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      textStyle: "base-emphasized",
+                      as: "div",
+                      className: styles.timeframeDisplayValue,
+                      children: timeframeDisplayValue
+                    }
+                  )
+                ] }),
+                (!isRecent || !isAbsoluteTimeframe) && /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: Flex,
+                    textStyle: "small",
+                    className: clsx(
+                      styles.mediaQuery,
+                      styles.formattedPresetValue({
+                        state
+                      })
+                    ),
+                    children: formattedPresetItemValue
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+PresetItem.displayName = "TimeframeSelector.PresetItem";
+export {
+  PresetItem
+};
+//# sourceMappingURL=PresetItem.js.map

package/esm/filters/timeframe-selector/components/presets/PresetItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/PresetItem.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { SelectedOverCalendarContext } from '../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js';\nimport { removePrecisionFromTimeValue } from '../../../../forms/date-time-range-picker/helpers.js';\nimport { parseValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { onChange, details } = useTimeframeSelectorContext();\n  const { min, max, precision } = useInternalTimeframeSelectorContext();\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, precision, isRecent);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, precision, children);\n\n  const { setSelectedOverCalendar } = useContext(SelectedOverCalendarContext);\n\n  /** Handle clicking on the timeframe selector preset item. Uses pointerdown event so that the validation on blur doesn't trigger first. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      // should set selectedOverCalendar when a preset is selected.\n      setSelectedOverCalendar?.(false);\n\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, setSelectedOverCalendar, onChange, precision]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onPointerDown={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={tooltipId}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
+  "mappings": "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",
+  "names": []
+}

package/{filters/timeframe-selector/TimeframeSelectorPresets.css → esm/filters/timeframe-selector/components/presets/Presets.css}

@@ -1,11 +1,11 @@
-._1href790-3-0-1 {
+._14rlfn30-3-1-0 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
-  grid-template-columns: auto fit-content(262px);
+  grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._1href791-3-0-1 {
+._14rlfn31-3-1-0 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,42 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._1href792-3-0-1 {
+._14rlfn32-3-1-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1href792-3-0-1:hover {
+._14rlfn32-3-1-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1href792-3-0-1:active {
+._14rlfn32-3-1-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1href793-3-0-1 {
+._14rlfn33-3-1-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1href793-3-0-1:hover {
+._14rlfn33-3-1-0:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._1href793-3-0-1:active {
+._14rlfn33-3-1-0:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._1href794-3-0-1 {
+._14rlfn34-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._1href796-3-0-1 {
+._14rlfn36-3-1-0 {
+  min-width: 0;
+}
+._14rlfn37-3-1-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._1href797-3-0-1 {
+._14rlfn38-3-1-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._1href798-3-0-1::before {
+._14rlfn39-3-1-0::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -59,52 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1href799-3-0-1::before {
+._14rlfn3a-3-1-0::before {
   content: "";
 }
-._1href79a-3-0-1::before {
+._14rlfn3b-3-1-0::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1href79b-3-0-1::before {
+._14rlfn3c-3-1-0::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._1href79d-3-0-1 {
+._14rlfn3e-3-1-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
+  text-align: right;
 }
-._1href79e-3-0-1 {
+._14rlfn3f-3-1-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1href79f-3-0-1 {
+._14rlfn3g-3-1-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1href79g-3-0-1 {
+._14rlfn3h-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1href79h-3-0-1 {
+._14rlfn3i-3-1-0 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1href79i-3-0-1 {
+._14rlfn3j-3-1-0 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1href79j-3-0-1 {
+._14rlfn3k-3-1-0 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._1href79k-3-0-1 {
+._14rlfn3l-3-1-0 {
   position: relative;
-  max-height: 320px;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
+._14rlfn3m-3-1-0 {
+  padding-top: var(--dt-spacings-size-12, 12px);
+  padding-right: var(--dt-spacings-size-12, 12px);
+  padding-bottom: var(--dt-spacings-size-4, 4px);
+  padding-left: var(--dt-spacings-size-12, 12px);
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+._14rlfn3n-3-1-0 {
+  flex-shrink: 0;
+}
 @media screen and (max-width: 470px) {
-  ._1href79c-3-0-1 {
+  ._14rlfn3d-3-1-0 {
     display: none;
   }
 }