@dynatrace/strato-components 1.17.0 → 3.0.1

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

@@ -0,0 +1,27 @@
+import { type PropsWithChildren, type ReactNode, type ReactElement } from 'react';
+import { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import { DataTestId } from '../../core/types/data-props.js';
+import { StylingProps } from '../../core/types/styling-props.js';
+/**
+ * @public
+ */
+export type TimeframeSelectorTriggerProps = PropsWithChildren & StylingProps & DataTestId & AriaLabelingProps & {
+    /**
+     * The placeholder text displayed in the TimeframeSelector.Trigger.
+     */
+    placeholder?: ReactNode;
+};
+/**
+ * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger
+ * @internal
+ */
+export declare function _isTimeframeSelectorTriggerElement(child: ReactNode): child is ReactElement<TimeframeSelectorTriggerProps>;
+/**
+ * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.
+ * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.
+ * @public
+ */
+export declare const Trigger: {
+    (props: TimeframeSelectorTriggerProps): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};

package/filters/timeframe-selector/Trigger.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Trigger_exports = {};
+__export(Trigger_exports, {
+  Trigger: () => Trigger,
+  _isTimeframeSelectorTriggerElement: () => _isTimeframeSelectorTriggerElement
+});
+module.exports = __toCommonJS(Trigger_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+var import_react2 = require("react");
+var import_react_is = require("react-is");
+var import_strato_icons = require("@dynatrace/strato-icons");
+var import_DisplayValue = require("./DisplayValue.js");
+var import_useInternalTimeframeSelectorContext = require("./hooks/useInternalTimeframeSelectorContext.js");
+var import_useTimeframeSelectorContext = require("./hooks/useTimeframeSelectorContext.js");
+var import_TimeframeSelector_css = require("./TimeframeSelector.sty.js");
+var import_Button = require("../../buttons/button/Button.js");
+var import_merge_props = require("../../core/utils/merge-props.js");
+function _isTimeframeSelectorTriggerElement(child) {
+  return (0, import_react_is.isElement)(child) && child.type === Trigger;
+}
+function getDisplayValueSlot(children) {
+  let displayValue = null;
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_DisplayValue._isTimeframeSelectorDisplayValueElement)(child)) {
+      displayValue = displayValue || [];
+      displayValue.push(child);
+    }
+  });
+  return displayValue;
+}
+const Trigger = (props) => {
+  const {
+    children,
+    placeholder,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    ...remainingProps
+  } = props;
+  const displayValueSlot = (0, import_react2.useMemo)(
+    () => getDisplayValueSlot(children),
+    [children]
+  );
+  const {
+    triggerProps,
+    displayValue: contextDisplayValue,
+    details
+  } = (0, import_useTimeframeSelectorContext.useTimeframeSelectorContext)();
+  const { readOnly, showError } = (0, import_useInternalTimeframeSelectorContext.useInternalTimeframeSelectorContext)();
+  const displayValue = displayValueSlot ?? contextDisplayValue;
+  const placeholderIfEmpty = placeholder ?? contextDisplayValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_Button.Button,
+    {
+      ...(0, import_merge_props.mergeProps)(triggerProps, remainingProps),
+      "data-testid": dataTestId,
+      variant: "emphasized",
+      color: showError ? "critical" : "neutral",
+      style: consumerStyle,
+      className: (0, import_clsx.default)(
+        consumerClassName,
+        readOnly && import_TimeframeSelector_css.timeframeSelectorTriggerReadOnlyCSS
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_strato_icons.ChevronDownSmallIcon,
+          {
+            className: (0, import_clsx.default)(
+              import_TimeframeSelector_css.timeframeSelectorSuffixCSS,
+              triggerProps?.["aria-expanded"] && import_TimeframeSelector_css.timeframeSelectorSuffixOpenCSS
+            )
+          }
+        ) }),
+        details ? displayValue : placeholderIfEmpty
+      ]
+    }
+  );
+};
+Trigger.displayName = "TimeframeSelector.Trigger";

package/filters/timeframe-selector/contexts/InternalTimeframeSelectorContext.d.ts

@@ -0,0 +1,22 @@
+import { type Context } from 'react';
+import type { TimeframeSelectorProps } from '../TimeframeSelector.types.js';
+/** @internal */
+export interface InternalTimeframeSelectorContextProps {
+    /** The ISODatetime string of the earliest datetime that can be configured. */
+    min?: string;
+    /** The ISODatetime string of the latest datetime that can be configured. */
+    max?: string;
+    /** Whether the element is in an error state. */
+    showError?: boolean;
+    /** Whether the element is required. */
+    required?: boolean;
+    /** Whether the element is readOnly. */
+    readOnly?: boolean;
+    /** The precision of the time shown in the display value. */
+    precision?: TimeframeSelectorProps['precision'];
+}
+/**
+ * Timeframe selector context, used to access the (input) value and onChange callback in other components.
+ * @internal
+ */
+export declare const InternalTimeframeSelectorContext: Context<InternalTimeframeSelectorContextProps>;

package/filters/timeframe-selector/contexts/InternalTimeframeSelectorContext.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var InternalTimeframeSelectorContext_exports = {};
+__export(InternalTimeframeSelectorContext_exports, {
+  InternalTimeframeSelectorContext: () => InternalTimeframeSelectorContext
+});
+module.exports = __toCommonJS(InternalTimeframeSelectorContext_exports);
+var import_react = require("react");
+const InternalTimeframeSelectorContext = (0, import_react.createContext)({
+  min: "",
+  max: "",
+  showError: false,
+  required: false,
+  readOnly: false,
+  precision: "minutes"
+});

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.d.ts

@@ -0,0 +1,20 @@
+import { AnchorHTMLAttributes, type ReactNode, type Context } from 'react';
+import type { RequireAtLeastOne } from 'type-fest';
+import type { AriaButtonProps, ButtonAria } from '../../../buttons/button/types/button-aria.js';
+import type { Timeframe } from '../../../core/types/time.js';
+export interface TimeframeSelectorContextProps {
+    /** Current value of the timeframe selector */
+    details: RequireAtLeastOne<Timeframe> | null;
+    /** Element displayed in the input field of the timeframe selector */
+    displayValue: ReactNode;
+    /** Necessary props for the trigger. */
+    triggerProps: (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> & AriaButtonProps) | null;
+    /** Callback triggered whenever the value of the timeframe selector changes */
+    onChange: (value: Timeframe | null) => void;
+    /** Hint representation for why it is invalid. */
+    hint: string;
+    /** The precision of the time shown in the display value. */
+    precision?: 'minutes' | 'seconds' | 'milliseconds';
+}
+/** Timeframe selector context, used to access the (input) value and onChange callback in other components. */
+export declare const TimeframeSelectorContext: Context<TimeframeSelectorContextProps>;

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TimeframeSelectorContext_exports = {};
+__export(TimeframeSelectorContext_exports, {
+  TimeframeSelectorContext: () => TimeframeSelectorContext
+});
+module.exports = __toCommonJS(TimeframeSelectorContext_exports);
+var import_react = require("react");
+const TimeframeSelectorContext = (0, import_react.createContext)({
+  details: null,
+  displayValue: null,
+  triggerProps: null,
+  onChange: () => null,
+  hint: "",
+  precision: "minutes"
+});

package/filters/timeframe-selector/hooks/useInternalTimeframeSelectorContext.d.ts

@@ -0,0 +1,6 @@
+import { type InternalTimeframeSelectorContextProps } from '../contexts/InternalTimeframeSelectorContext.js';
+/**
+ * Hook for accessing the _InternalTimeframeSelectorContext.
+ * @internal
+ */
+export declare const useInternalTimeframeSelectorContext: () => InternalTimeframeSelectorContextProps;

package/filters/timeframe-selector/hooks/useInternalTimeframeSelectorContext.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useInternalTimeframeSelectorContext_exports = {};
+__export(useInternalTimeframeSelectorContext_exports, {
+  useInternalTimeframeSelectorContext: () => useInternalTimeframeSelectorContext
+});
+module.exports = __toCommonJS(useInternalTimeframeSelectorContext_exports);
+var import_react = require("react");
+var import_InternalTimeframeSelectorContext = require("../contexts/InternalTimeframeSelectorContext.js");
+const useInternalTimeframeSelectorContext = () => (0, import_react.useContext)(import_InternalTimeframeSelectorContext.InternalTimeframeSelectorContext);

package/filters/timeframe-selector/hooks/useTimeframeSelectorContext.d.ts

@@ -0,0 +1,2 @@
+import { TimeframeSelectorContextProps } from '../contexts/TimeframeSelectorContext.js';
+export declare const useTimeframeSelectorContext: () => TimeframeSelectorContextProps;

package/filters/timeframe-selector/hooks/useTimeframeSelectorContext.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTimeframeSelectorContext_exports = {};
+__export(useTimeframeSelectorContext_exports, {
+  useTimeframeSelectorContext: () => useTimeframeSelectorContext
+});
+module.exports = __toCommonJS(useTimeframeSelectorContext_exports);
+var import_react = require("react");
+var import_TimeframeSelectorContext = require("../contexts/TimeframeSelectorContext.js");
+const useTimeframeSelectorContext = () => (0, import_react.useContext)(import_TimeframeSelectorContext.TimeframeSelectorContext);

package/filters/timeframe-selector/hooks/useTooltipMessages.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { RequireAtLeastOne } from 'type-fest';
+import type { Timeframe } from '../../../core/types/time.js';
+interface UseTooltipValues {
+    timeframeDisplayValue: ReactNode;
+    tooltipFormattedTimeValueStart: string;
+    tooltipFormattedTimeValueEnd: string;
+    formattedPresetItemValue: string;
+    timeframeDuration: string;
+    isAbsoluteTimeframe: boolean;
+    isInvalid: boolean;
+}
+/**
+ * Hook used to retrieve the formatted values shown in the Tooltips of the Button, stepper and PresetItems.
+ * @Internal
+ */
+export declare function useTooltipMessages(value: RequireAtLeastOne<{
+    from: string;
+    to: string;
+}> | RequireAtLeastOne<Timeframe> | null, precision?: 'minutes' | 'seconds' | 'milliseconds', children?: ReactNode): UseTooltipValues;
+export {};

package/filters/timeframe-selector/hooks/useTooltipMessages.js

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTooltipMessages_exports = {};
+__export(useTooltipMessages_exports, {
+  useTooltipMessages: () => useTooltipMessages
+});
+module.exports = __toCommonJS(useTooltipMessages_exports);
+var import_tz = require("@date-fns/tz");
+var import_date_fns = require("date-fns");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_SelectedOverCalendarContext = require("../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js");
+var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
+var import_getTextFromNode = require("../../filter/utils/getTextFromNode.js");
+var import_formatting = require("../utils/formatting.js");
+var import_timeframe_selection = require("../utils/timeframe-selection.js");
+var import_timeframeSelectorMessages = require("../utils/timeframeSelectorMessages.js");
+function useTooltipMessages(value, precision, children) {
+  const intl = (0, import_react_intl.useIntl)();
+  const { from, to } = (0, import_timeParser.parseValue)(value);
+  const isAbsoluteTimeframe = from?.type === "iso8601" && to?.type === "iso8601";
+  const startTime = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.startTime);
+  const endTime = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.endTime);
+  const duration = intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.duration);
+  const tooltipFormattedTimeValueStart = (0, import_react.useMemo)(
+    () => `${startTime}: ${(0, import_timeParser.getFormattedTimeValue)(from, precision)}`,
+    [from, precision, startTime]
+  );
+  const tooltipFormattedTimeValueEnd = (0, import_react.useMemo)(
+    () => `${endTime}: ${(0, import_timeParser.getFormattedTimeValue)(to, precision)}`,
+    [endTime, precision, to]
+  );
+  const formattedPresetItemValue = (0, import_react.useMemo)(
+    () => `${(0, import_timeParser.formatTimeValue)(from, precision)} \u2192 ${(0, import_timeParser.formatTimeValue)(to, precision)}`,
+    [precision, from, to]
+  );
+  const { displayValue, isInvalid } = (0, import_react.useMemo)(
+    () => (0, import_timeframe_selection.isTimeframeOrFromToString)(value) ? (0, import_timeParser.formatTimeframe)(value, intl, precision) : {
+      displayValue: "",
+      isInvalid: true
+    },
+    [value, intl, precision]
+  );
+  const timeframeDisplayValue = (0, import_react.useMemo)(
+    () => (0, import_getTextFromNode.getTextFromNode)(children, intl, "") || displayValue,
+    [children, displayValue, intl]
+  );
+  const { selectedOverCalendar } = (0, import_react.useContext)(import_SelectedOverCalendarContext.SelectedOverCalendarContext);
+  const adjustedTo = selectedOverCalendar && to?.absoluteDate ? (0, import_timeParser.getTimeValue)(
+    (0, import_date_fns.startOfDay)(
+      (0, import_date_fns.addDays)(new import_tz.TZDateMini(to.absoluteDate, (0, import_user_preferences.getTimezone)()), 1)
+    ).toISOString()
+  ) ?? to : to;
+  const timeframeDuration = (0, import_react.useMemo)(
+    () => `${duration}: ${(0, import_formatting.formatTimeframeDuration)(from, adjustedTo, intl)}`,
+    [duration, from, adjustedTo, intl]
+  );
+  return {
+    timeframeDisplayValue,
+    tooltipFormattedTimeValueStart,
+    tooltipFormattedTimeValueEnd,
+    formattedPresetItemValue,
+    timeframeDuration,
+    isAbsoluteTimeframe,
+    isInvalid
+  };
+}

package/filters/timeframe-selector/utils/formatting.d.ts

@@ -0,0 +1,7 @@
+import type { IntlShape } from 'react-intl';
+import type { TimeValue } from '../../../core/types/time.js';
+/**
+ * Formats and returns the duration of the timeframe.
+ * @internal
+ */
+export declare function formatTimeframeDuration(from: TimeValue | null, to: TimeValue | null, intl: IntlShape): string;

package/filters/timeframe-selector/utils/formatting.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var formatting_exports = {};
+__export(formatting_exports, {
+  formatTimeframeDuration: () => formatTimeframeDuration
+});
+module.exports = __toCommonJS(formatting_exports);
+var import_date_fns = require("date-fns");
+var import_timeframe_calculations = require("./timeframe-calculations.js");
+var import_timeframeSelectorMessages = require("./timeframeSelectorMessages.js");
+function formatTimeframeDuration(from, to, intl) {
+  if (from === null || to === null) {
+    return "";
+  }
+  if (from.type === "iso8601" || to.type === "iso8601") {
+    const difference2 = (0, import_date_fns.intervalToDuration)({
+      start: from.absoluteDate,
+      end: to.absoluteDate
+    });
+    const diffInMilliseconds = (0, import_date_fns.differenceInMilliseconds)(to.absoluteDate, from.absoluteDate) % 1e3;
+    return intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.absoluteDateDuration, {
+      years: Math.abs(difference2.years ?? 0),
+      months: Math.abs(difference2.months ?? 0),
+      days: Math.abs(difference2.days ?? 0),
+      hours: Math.abs(difference2.hours ?? 0),
+      minutes: Math.abs(difference2.minutes ?? 0),
+      seconds: Math.abs(difference2.seconds ?? 0),
+      milliseconds: Math.abs(diffInMilliseconds ?? 0)
+    }).trim();
+  }
+  const difference = (0, import_timeframe_calculations.getDifference)(from, to);
+  const offsetUnit = (0, import_timeframe_calculations.getSmallestCommonUnit)(from, to);
+  const timeExpression = import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES[`${offsetUnit}-duration`];
+  return intl.formatMessage(timeExpression, {
+    offset: Math.abs(difference === 0 ? 1 : difference)
+  }).trim();
+}

package/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { IntlShape } from 'react-intl';
+import type { RequireAtLeastOne } from 'type-fest';
+import type { Timeframe } from '../../../core/types/time.js';
+/**
+ * Converts the given timeframe into a human-readable display value string.
+ * @internal
+ */
+export declare function getTimeframeDisplayValueProps(value: RequireAtLeastOne<{
+    from: string;
+    to: string;
+}> | RequireAtLeastOne<Timeframe> | null, intl: IntlShape, placeholder?: string, precision?: 'minutes' | 'seconds' | 'milliseconds', presetItemLabel?: ReactNode, required?: boolean, min?: string, max?: string): {
+    displayValue: string;
+    isInvalid: boolean;
+    hint: string;
+} | {
+    displayValue: import("react/jsx-runtime.js").JSX.Element;
+    isInvalid: boolean;
+    hint: string;
+};

package/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.js

@@ -0,0 +1,110 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getTimeframeDisplayValueProps_exports = {};
+__export(getTimeframeDisplayValueProps_exports, {
+  getTimeframeDisplayValueProps: () => getTimeframeDisplayValueProps
+});
+module.exports = __toCommonJS(getTimeframeDisplayValueProps_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_timeframe_selection = require("./timeframe-selection.js");
+var import_helpers = require("../../../forms/forms-core/time/helpers.js");
+var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
+var import_Flex = require("../../../layouts/flex/Flex.js");
+var import_ellipsis_css = require("../../../styles/ellipsis.sty.js");
+var import_Text = require("../../../typography/text/Text.js");
+var import_getTextFromNode = require("../../filter/utils/getTextFromNode.js");
+var import_TimeframeSelector_css = require("../TimeframeSelector.sty.js");
+function getTimeframeDisplayValueProps(value, intl, placeholder, precision, presetItemLabel, required, min, max) {
+  if (!value) {
+    return {
+      displayValue: placeholder ?? "",
+      isInvalid: !!required,
+      hint: required ? intl.formatMessage(import_timeParser.messages.requiredTimeframe) : ""
+    };
+  }
+  if (presetItemLabel) {
+    return {
+      displayValue: (0, import_getTextFromNode.getTextFromNode)(presetItemLabel, intl, ""),
+      isInvalid: false,
+      hint: ""
+    };
+  }
+  const { from, to } = (0, import_timeParser.parseValue)(value);
+  const { valueFrom, valueTo } = (0, import_timeParser.getFromToValues)(value);
+  const { displayValue, hint, isInvalid } = (0, import_timeParser.extractDisplayValueFromTimeValues)(
+    from,
+    to,
+    intl,
+    precision,
+    valueFrom,
+    valueTo
+  );
+  if (isInvalid) {
+    return { displayValue, isInvalid, hint };
+  }
+  let hasError = false;
+  let displayValueHint = "";
+  if ((0, import_timeframe_selection._isOutsideRange)(value, min, max)) {
+    hasError = true;
+    displayValueHint = (0, import_timeParser.getOutsideRangeMessage)(
+      intl,
+      // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.
+      (0, import_helpers.filterOutGrailLimit)(value, min),
+      (0, import_helpers.filterOutGrailLimit)(value, max),
+      precision
+    );
+  }
+  const displayValueParts = displayValue.split(" \u2192 ");
+  const [displayValueFrom, displayValueTo] = displayValueParts.length === 2 ? displayValueParts : [];
+  if (!displayValueFrom || !displayValueTo) {
+    return { displayValue, isInvalid: hasError, hint: displayValueHint };
+  }
+  return {
+    displayValue: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { minWidth: 0, gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Text.Text,
+        {
+          className: (0, import_clsx.default)(import_TimeframeSelector_css.timeframeSelectorDisplayValuePartsCSS, import_ellipsis_css.ellipsis),
+          children: displayValueFrom
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { style: { minWidth: "unset" }, children: "\u2192" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Text.Text,
+        {
+          className: (0, import_clsx.default)(import_TimeframeSelector_css.timeframeSelectorDisplayValuePartsCSS, import_ellipsis_css.ellipsis),
+          children: displayValueTo
+        }
+      )
+    ] }),
+    isInvalid: hasError,
+    hint: displayValueHint
+  };
+}

package/filters/timeframe-selector/utils/stepper-helpers.d.ts

@@ -0,0 +1,19 @@
+import { type IntlShape } from 'react-intl';
+import type { Timeframe, TimeValue } from '../../../core/types/time.js';
+/**
+ * Formats and returns the display value for given time values, including relative expressions.
+ * @internal
+ */
+export declare function formatStepperValues(from: TimeValue | null, to: TimeValue | null, intl: IntlShape, direction: 'backward' | 'forward', selectedOverCalendar?: boolean): string;
+/**
+ * Adjusts the timeframe based on the direction ('backward' or 'forward').
+ * Handles different types of timeframes: ISO8601, expressions, and rounded timeframes.
+ * @internal
+ */
+export declare function getTimeShift(value: Timeframe, config: {
+    direction: 'backward' | 'forward';
+    min?: string;
+    max?: string;
+    selectedOverCalendar?: boolean;
+    precision?: 'minutes' | 'seconds' | 'milliseconds';
+}): Timeframe | undefined;