@dynatrace/strato-components 3.8.0 → 3.9.0

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

@@ -22,5 +22,5 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-8-0";
-var root = "_1sqhmjg1-3-8-0";
+var displayValueParts = "_1sqhmjg0-3-9-0";
+var root = "_1sqhmjg1-3-9-0";

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

@@ -1,5 +1,8 @@
 import { type ReactElement } from 'react';
 import type { TimeframeSelectorProps } from './TimeframeSelector.types.js';
+import type { UseFormControlReturnType } from '../../forms/forms-core/hooks/useFormControl.js';
 import type { TimeRangePickerRef } from '../../forms/shared-types.js';
 /** @internal */
-export declare const TimeframeSelectorRoot: (props: TimeframeSelectorProps & import("react").RefAttributes<TimeRangePickerRef<HTMLDivElement>>) => import("react").ReactElement | null;
+export declare const TimeframeSelectorRoot: (props: Omit<TimeframeSelectorProps, "disabled" | "id" | "aria-disabled" | "required" | "readOnly" | "controlState"> & {
+    formControl: UseFormControlReturnType;
+} & import("react").RefAttributes<TimeRangePickerRef<HTMLDivElement>>) => import("react").ReactElement | null;

package/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -48,7 +48,6 @@ var import_getTimeframeDisplayValueProps = require("./utils/getTimeframeDisplayV
 var import_presets_helpers = require("./utils/presets-helpers.js");
 var import_TimeframePresetsClient = require("./utils/TimeframePresetsClient.js");
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
-var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
@@ -56,7 +55,6 @@ var import_validation = require("../../core/time/validation.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
 var import_logging = require("../../core/utils/logging.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
-var import_useFormFieldMessagesContext = require("../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
 var import_useMinMaxLogger = require("../../forms/forms-core/hooks/useMinMaxLogger.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
@@ -104,13 +102,10 @@ function getItemSlots(children, precision) {
 const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
   const {
-    disabled,
     value: propValue,
     defaultValue,
-    /* eslint-disable @typescript-eslint/no-deprecated */
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     clearable = false,
-    readOnly = false,
-    controlState,
     children,
     onChange,
     className: consumerClassName,
@@ -119,23 +114,33 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     name,
-    id,
     stepper = true,
     onValidityChange,
-    "aria-disabled": ariaDisabled,
     "aria-label": ariaLabelProp,
     "aria-labelledby": ariaLabelledByProp,
     "aria-describedby": ariaDescribedByProp,
     "aria-details": ariaDetailsProp,
+    formControl,
     ...remainingProps
   } = props;
+  const {
+    disabled,
+    required,
+    id,
+    ariaDisabled,
+    readOnly = false,
+    hint,
+    hintProps,
+    showError,
+    messageState: formFieldMessagesState,
+    messageDispatch: formFieldMessagesDispatch
+  } = formControl;
   const value = (0, import_useTimeframeStore.useTimeframeSelectorStore)(
     (state) => state.timeframeSelectorTimeframe
   );
   const precision = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.precision);
   const min = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.min);
   const max = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.max);
-  const required = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.required);
   const formatString = (0, import_useTimeframeStore.useTimeframeSelectorStore)((state) => state.formatString);
   const timeframeSelectorRef = (0, import_useTimeframeStore.useTimeframeSelectorStore)(
     (state) => state.timeframeSelectorRef
@@ -149,8 +154,6 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     description: "Placeholder shown for the timeframe selector."
   });
   (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "TimeframeSelector");
-  const [formControlStateError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
-  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
@@ -486,7 +489,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       triggerProps,
       hint: displayValueHint,
       readOnly,
-      showError: formControlStateError || formFieldMessagesState.showError,
+      showError,
       disabled
     }),
     [
@@ -496,8 +499,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       displayValue,
       triggerProps,
       displayValueHint,
-      formControlStateError,
-      formFieldMessagesState.showError
+      showError
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeframeSelectorContext.TimeframeSelectorContext.Provider, { value: timeframeSelectorContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -590,11 +592,12 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
             )
           ] })
         ] }),
-        controlState && hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_FormFieldMessageBaseItem.InternalBaseItem,
           {
-            variant: formControlStateError ? "error" : "hint",
+            variant: showError ? "error" : "hint",
             disabled: disabled || !!ariaDisabled,
+            ...hintProps,
             children: hint
           }
         ),

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

@@ -1,4 +1,4 @@
-._at2xro0-3-8-0 {
+._at2xro0-3-9-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-8-0 {
+._at2xro1-3-9-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-8-0 {
+._at2xro2-3-9-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-8-0 {
+  ._at2xro1-3-9-0 {
     flex-direction: row;
   }
 }

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

@@ -44,6 +44,7 @@ var import_FormFieldMessages = require("../../../../forms/forms-core/components/
 var import_Label = require("../../../../forms/forms-core/components/label/Label.js");
 var import_FormFieldContext = require("../../../../forms/forms-core/contexts/FormFieldContext.js");
 var import_FormFieldMessageContext = require("../../../../forms/forms-core/contexts/FormFieldMessageContext.js");
+var import_useFormControl = require("../../../../forms/forms-core/hooks/useFormControl.js");
 var import_useFormFieldContext = require("../../../../forms/forms-core/hooks/useFormFieldContext.js");
 var import_useFormFieldMessagesContext = require("../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
 var import_formfield_messages_state_reducer = require("../../../../forms/forms-core/state/formfield-messages-state-reducer.js");
@@ -55,6 +56,27 @@ var import_InputGroup = require("../../../../layouts/input-group/InputGroup.js")
 var import_timeframeSelectorMessages = require("../../constants/timeframeSelectorMessages.js");
 var import_presets_helpers = require("../../utils/presets-helpers.js");
 var import_timeframe_selection = require("../../utils/timeframe-selection.js");
+function CustomDateTimeRangePickerRoot({
+  pickerRef,
+  id,
+  required,
+  style,
+  onBlur
+}) {
+  const formControl = (0, import_useFormControl.useFormControl)({
+    propId: id,
+    propRequired: required
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DateTimeRangePickerRoot.DateTimeRangePickerRoot,
+    {
+      ref: pickerRef,
+      formControl,
+      style,
+      onBlur
+    }
+  );
+}
 const CustomTimeframeSelector = () => {
   const ref = (0, import_useTimeframeStore.useTimeframeSelectorStore)(
     (state2) => state2.dateTimeRangePickerRef
@@ -355,11 +377,11 @@ const CustomTimeframeSelector = () => {
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_InputGroup.InputGroup, { style: { gridAutoColumns: "1fr auto" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_DateTimeRangePickerRoot.DateTimeRangePickerRoot,
+                CustomDateTimeRangePickerRoot,
                 {
-                  ref,
+                  pickerRef: ref,
                   id: dateTimeRangePickerId,
-                  required: required || contextRequired,
+                  required: Boolean(required || contextRequired),
                   style: { gridTemplateColumns: "1fr auto" },
                   onBlur: (event) => {
                     const hasPresetItemSelected = event.relatedTarget?.getAttribute("role") === "option";

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

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

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

@@ -1,4 +1,4 @@
-._14xc6b0-3-8-0 {
+._14xc6b0-3-9-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-8-0 {
+._14xc6b1-3-9-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-8-0 {
+._14xc6b2-3-9-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-8-0 {
+._14xc6b3-3-9-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.sty.js

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

package/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-8-0 {
+._14rlfn30-3-9-0 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-8-0 {
+._14rlfn31-3-9-0 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-8-0 {
+._14rlfn32-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-8-0:hover {
+._14rlfn32-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-8-0:active {
+._14rlfn32-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-8-0 {
+._14rlfn33-3-9-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-8-0:hover {
+._14rlfn33-3-9-0:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-8-0:active {
+._14rlfn33-3-9-0:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-8-0 {
+._14rlfn34-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-8-0 {
+._14rlfn36-3-9-0 {
   min-width: 0;
 }
-._14rlfn37-3-8-0 {
+._14rlfn37-3-9-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-8-0 {
+._14rlfn38-3-9-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);
 }
-._14rlfn39-3-8-0::before {
+._14rlfn39-3-9-0::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-8-0::before {
+._14rlfn3a-3-9-0::before {
   content: "";
 }
-._14rlfn3b-3-8-0::before {
+._14rlfn3b-3-9-0::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-8-0::before {
+._14rlfn3c-3-9-0::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-8-0 {
+._14rlfn3e-3-9-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-8-0 {
+._14rlfn3f-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-8-0 {
+._14rlfn3g-3-9-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-8-0 {
+._14rlfn3h-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-8-0 {
+._14rlfn3i-3-9-0 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-8-0 {
+._14rlfn3j-3-9-0 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-8-0 {
+._14rlfn3k-3-9-0 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-8-0 {
+._14rlfn3l-3-9-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-8-0 {
+._14rlfn3m-3-9-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-8-0 {
+._14rlfn3n-3-9-0 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-8-0 {
+  ._14rlfn3d-3-9-0 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -32,14 +32,14 @@ __export(Presets_css_exports, {
 module.exports = __toCommonJS(Presets_css_exports);
 var import_Presets_css_ts_vanilla = require("./Presets.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var displayValueWrapper = "_14rlfn36-3-8-0";
-var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-8-0", variantClassNames: { state: { rest: "_14rlfn3f-3-8-0", selected: "_14rlfn3g-3-8-0", disabled: "_14rlfn3h-3-8-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-8-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-8-0", false: "_14rlfn3k-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-8-0", variantClassNames: { state: { rest: "_14rlfn32-3-8-0", selected: "_14rlfn33-3-8-0", disabled: "_14rlfn34-3-8-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-8-0";
-var listContainer = "_14rlfn3l-3-8-0";
-var mediaQuery = "_14rlfn3d-3-8-0";
-var recentHeading = "_14rlfn3m-3-8-0";
-var recentIcon = "_14rlfn3n-3-8-0";
-var timeframeDisplayValue = "_14rlfn37-3-8-0";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-8-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-8-0", false: "_14rlfn3a-3-8-0" }, isDisabled: { true: "_14rlfn3b-3-8-0", false: "_14rlfn3c-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-9-0";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-9-0", variantClassNames: { state: { rest: "_14rlfn3f-3-9-0", selected: "_14rlfn3g-3-9-0", disabled: "_14rlfn3h-3-9-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-9-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-9-0", false: "_14rlfn3k-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-9-0", variantClassNames: { state: { rest: "_14rlfn32-3-9-0", selected: "_14rlfn33-3-9-0", disabled: "_14rlfn34-3-9-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-9-0";
+var listContainer = "_14rlfn3l-3-9-0";
+var mediaQuery = "_14rlfn3d-3-9-0";
+var recentHeading = "_14rlfn3m-3-9-0";
+var recentIcon = "_14rlfn3n-3-9-0";
+var timeframeDisplayValue = "_14rlfn37-3-9-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-9-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-9-0", false: "_14rlfn3a-3-9-0" }, isDisabled: { true: "_14rlfn3b-3-9-0", false: "_14rlfn3c-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });

package/filters/timeframe-selector/components/stepper/StepperButton.js

@@ -82,7 +82,7 @@ const StepperButton = (props) => {
       direction,
       min,
       max,
-      selectedOverCalendar: isFullDay,
+      isFullDay,
       precision
     });
     if (newShiftValue) {
@@ -95,7 +95,7 @@ const StepperButton = (props) => {
       direction,
       min,
       max,
-      selectedOverCalendar: isFullDay,
+      isFullDay,
       precision
     });
     if (newShiftValue && !readOnly) {

package/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,24 +1,24 @@
-._attccb0-3-8-0 {
+._attccb0-3-9-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-8-0) ._attccb0-3-8-0 {
+:root:not(._1jgl8s50-3-9-0) ._attccb0-3-9-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._attccb1-3-8-0 {
+._attccb1-3-9-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb0-3-8-0 ._attccb1-3-8-0 {
+._attccb0-3-9-0 ._attccb1-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._attccb2-3-8-0 {
+._attccb2-3-9-0 {
   transform: rotate(180deg);
 }
-._1jgl8s50-3-8-0 ._attccb3-3-8-0:hover, ._1jgl8s50-3-8-0 ._attccb3-3-8-0:active {
-  --_bx32h3-3-8-0: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-9-0 ._attccb3-3-9-0:hover, ._1jgl8s50-3-9-0 ._attccb3-3-9-0:active {
+  --_bx32h3-3-9-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-9-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-8-0 ._attccb4-3-8-0:hover, ._1jgl8s50-3-8-0 ._attccb4-3-8-0:active {
-  --_bx32h3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_bx32h4-3-8-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-9-0 ._attccb4-3-9-0:hover, ._1jgl8s50-3-9-0 ._attccb4-3-9-0:active {
+  --_bx32h3-3-9-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_bx32h4-3-9-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }

package/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(Trigger_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_field_css_ts_vanilla = require("../../../../styles/field.css");
 var import_Trigger_css_ts_vanilla = require("./Trigger.css");
-var readOnly = "_attccb0-3-8-0";
-var readOnlyColor = { neutral: "_attccb3-3-8-0", critical: "_attccb4-3-8-0" };
-var suffix = "_attccb1-3-8-0";
-var suffixOpen = "_attccb2-3-8-0";
+var readOnly = "_attccb0-3-9-0";
+var readOnlyColor = { neutral: "_attccb3-3-9-0", critical: "_attccb4-3-9-0" };
+var suffix = "_attccb1-3-9-0";
+var suffixOpen = "_attccb2-3-9-0";

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

@@ -5,7 +5,7 @@ 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;
+export declare function formatStepperValues(from: TimeValue | null, to: TimeValue | null, intl: IntlShape, direction: 'backward' | 'forward', isFullDay?: boolean): string;
 /**
  * Adjusts the timeframe based on the direction ('backward' or 'forward').
  * Handles different types of timeframes: ISO8601, expressions, and rounded timeframes.
@@ -15,6 +15,6 @@ export declare function getTimeShift(value: Timeframe | null, config: {
     direction: 'backward' | 'forward';
     min?: string;
     max?: string;
-    selectedOverCalendar?: boolean;
+    isFullDay?: boolean;
     precision?: Precision;
 }): Timeframe | undefined;

package/filters/timeframe-selector/utils/stepper-helpers.js

@@ -30,8 +30,8 @@ var import_timeframe_calculations = require("./timeframe-calculations.js");
 var import_timeframe_selection = require("./timeframe-selection.js");
 var import_timeParser = require("../../../forms/forms-core/time/timeParser.js");
 var import_timeframeSelectorMessages = require("../constants/timeframeSelectorMessages.js");
-function formatStepperValues(from, to, intl, direction, selectedOverCalendar) {
-  const adjustedTo = selectedOverCalendar && to ? (0, import_timeParser.getTimeValue)(
+function formatStepperValues(from, to, intl, direction, isFullDay) {
+  const adjustedTo = isFullDay && to ? (0, import_timeParser.getTimeValue)(
     (0, import_date_fns.startOfHour)(
       (0, import_date_fns.addHours)(new import_tz.TZDateMini(to.absoluteDate, (0, import_user_preferences.getTimezone)()), 1)
     ).toISOString()
@@ -43,9 +43,9 @@ function formatStepperValues(from, to, intl, direction, selectedOverCalendar) {
   });
   return `${prefix}${duration}${suffix}`.trim();
 }
-const adjustDate = (date, difference, direction, selectedOverCalendar) => {
-  if (selectedOverCalendar) {
-    const daysDifference = Math.round(-difference / (1e3 * 60 * 60 * 24));
+const adjustDate = (date, difference, direction, isFullDay) => {
+  if (isFullDay) {
+    const daysDifference = Math.ceil(-difference / (1e3 * 60 * 60 * 24));
     date = (0, import_date_fns.addDays)(
       date,
       direction === "backward" ? -daysDifference : daysDifference
@@ -167,17 +167,17 @@ const clampToBoundaries = (min, max, from, to, precision) => {
   result = clampToMax(parsedMin, parsedMax, result.from, result.to, precision);
   return result;
 };
-const handleAbsolute = (originalValue, min, max, direction, selectedOverCalendar, precision) => {
+const handleAbsolute = (originalValue, min, max, direction, isFullDay, precision) => {
   const timezone = (0, import_user_preferences.getTimezone)();
   const from = new import_tz.TZDateMini(originalValue.from.absoluteDate, timezone);
   const to = new import_tz.TZDateMini(originalValue.to.absoluteDate, timezone);
   const difference = from.getTime() - to.getTime();
   const adjustedFrom = (0, import_timeParser.removePrecision)(
-    adjustDate(from, difference, direction, selectedOverCalendar),
+    adjustDate(from, difference, direction, isFullDay),
     precision
   );
   const adjustedTo = (0, import_timeParser.removePrecision)(
-    adjustDate(to, difference, direction, selectedOverCalendar),
+    adjustDate(to, difference, direction, isFullDay),
     precision
   );
   const newTimeframe = {
@@ -355,21 +355,14 @@ function handleRoundedTimeframe(value, min, max, direction, precision) {
   ) ?? value;
 }
 function getTimeShift(value, config) {
-  const { direction, min, max, selectedOverCalendar, precision } = config;
+  const { direction, min, max, isFullDay, precision } = config;
   const isISO8601 = (type) => type === "iso8601";
   const isExpression = (type) => type === "expression";
   if (!value?.from || !value?.to) {
     return void 0;
   }
   if (isISO8601(value.from.type) || isISO8601(value.to.type)) {
-    return handleAbsolute(
-      value,
-      min,
-      max,
-      direction,
-      selectedOverCalendar,
-      precision
-    );
+    return handleAbsolute(value, min, max, direction, isFullDay, precision);
   }
   if (isExpression(value.from.type) && isExpression(value.to.type)) {
     const newFrom = (0, import_units._parseTimeExpression)(value.from.value);