@dynatrace/strato-components 3.2.0 → 3.3.0

package/forms/date-time-range-picker/DateRangeSelector.js

@@ -32,30 +32,22 @@ __export(DateRangeSelector_exports, {
 });
 module.exports = __toCommonJS(DateRangeSelector_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_tz = require("@date-fns/tz");
 var import_clsx = __toESM(require("clsx"));
-var import_date_fns = require("date-fns");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
-var import_user_preferences = require("@dynatrace-sdk/user-preferences");
-var import_SelectedOverCalendarContext = require("./contexts/SelectedOverCalendarContext.js");
 var styles = __toESM(require("./DateRangeSelector.sty.js"));
-var import_helpers = require("./helpers.js");
 var import_Button = require("../../buttons/button/Button.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_useOverlayWithTrigger = require("../../overlays/hooks/useOverlayWithTrigger.js");
 var import_Overlay = require("../../overlays/overlay/Overlay.js");
 var import_safe_sprinkles = require("../../styles/safe-sprinkles.js");
-var import_Calendar = require("../calendar/Calendar.js");
+var import_CalendarRoot = require("../calendar/CalendarRoot.js");
 var import_FormFieldMessageContext = require("../forms-core/contexts/FormFieldMessageContext.js");
-var import_timeParser = require("../forms-core/time/timeParser.js");
 const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
-    value,
-    onChange,
     disabled,
     readOnly,
     error,
@@ -64,77 +56,16 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    min,
-    max,
-    errorFrom,
-    errorTo,
     "aria-disabled": ariaDisabledProp,
-    precision,
     ...remainingProps
   } = props;
   const [open, setOpen] = (0, import_react.useState)(false);
-  const [calendarValue, setCalendarValue] = (0, import_react.useState)(value);
   const intl = (0, import_react_intl.useIntl)();
   const calendarTriggerLabel = intl.formatMessage({
     defaultMessage: "DateRangePicker calendar trigger",
     id: "K2M82PM/gcTo3fjq",
     description: "Text shown for the datetimerangepicker calendar trigger."
   });
-  const { setCalendarOnChangeFlag, setSelectedOverCalendar } = (0, import_react.useContext)(
-    import_SelectedOverCalendarContext.SelectedOverCalendarContext
-  );
-  const updateCalendarValue = (0, import_react.useCallback)(
-    (newInternalValue) => {
-      if (readOnly) {
-        return;
-      }
-      if (!newInternalValue) {
-        onChange(null);
-      } else if (newInternalValue.from && newInternalValue.to) {
-        const timeZone = (0, import_user_preferences.getTimezone)();
-        const to = new import_tz.TZDateMini(newInternalValue.to.absoluteDate, timeZone);
-        const from = new import_tz.TZDateMini(
-          newInternalValue.from.absoluteDate,
-          timeZone
-        );
-        const isToAtEndOfDay = (0, import_timeParser.removePrecision)((0, import_date_fns.endOfDay)(to).toISOString(), precision) === (0, import_timeParser.removePrecision)(newInternalValue.to.absoluteDate, precision);
-        const isToAtMax = max === to.toISOString();
-        const isFromAtStartOfDay = (0, import_timeParser.removePrecision)((0, import_date_fns.startOfDay)(from).toISOString(), precision) === (0, import_timeParser.removePrecision)(newInternalValue.from.absoluteDate, precision);
-        const isFromAtMin = min === from.toISOString();
-        if ((isToAtEndOfDay || isToAtMax) && (isFromAtStartOfDay || isFromAtMin)) {
-          setCalendarOnChangeFlag?.(true);
-          setSelectedOverCalendar?.(true);
-        }
-        setOpen(false);
-        !(0, import_helpers.isEqualRangeSelection)(newInternalValue, value) && onChange(newInternalValue);
-      }
-      setCalendarValue(newInternalValue);
-    },
-    [
-      readOnly,
-      onChange,
-      precision,
-      value,
-      setCalendarOnChangeFlag,
-      setSelectedOverCalendar,
-      max,
-      min
-    ]
-  );
-  (0, import_react.useEffect)(() => {
-    setCalendarValue((prevValue) => {
-      if (errorTo === "invalid" && errorFrom === "invalid") {
-        return { from: null, to: null };
-      }
-      if (errorFrom === "invalid") {
-        return { from: null, to: value?.to || null };
-      }
-      if (errorTo === "invalid") {
-        return { from: value?.from || null, to: null };
-      }
-      return (0, import_helpers.isEqualRangeSelection)(prevValue, value) ? prevValue : value;
-    });
-  }, [errorFrom, errorTo, value]);
   const {
     targetRef,
     triggerRef,
@@ -217,19 +148,7 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
         }),
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessageContext.FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Calendar.Calendar,
-          {
-            value: calendarValue?.from || calendarValue?.to ? calendarValue : null,
-            type: "range",
-            onChange: updateCalendarValue,
-            required: false,
-            min,
-            max,
-            "aria-disabled": ariaDisabledProp,
-            precision
-          }
-        ) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessageContext.FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarRoot.CalendarRoot, { type: "range", "aria-disabled": ariaDisabledProp }) })
       }
     )
   ] });

package/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -23,5 +23,5 @@ __export(DateRangeSelector_css_exports, {
 });
 module.exports = __toCommonJS(DateRangeSelector_css_exports);
 var import_DateRangeSelector_css_ts_vanilla = require("./DateRangeSelector.css");
-var readOnly = "_1uftu980-3-2-0";
-var selector = "_1uftu981-3-2-0";
+var readOnly = "_1uftu980-3-3-0";
+var selector = "_1uftu981-3-3-0";

package/forms/date-time-range-picker/DateTimeInput.css

@@ -1,21 +1,29 @@
-._5u9o251-3-2-0 {
+._5u9o250-3-3-0 {
+  min-width: 0;
+  overflow: hidden;
+}
+._5u9o252-3-3-0 {
   outline: none;
 }
-._5u9o251-3-2-0:not(:focus-visible) {
+._5u9o252-3-3-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o251-3-2-0:empty::before {
+._5u9o252-3-3-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-2-0 ._5u9o251-3-2-0:empty::before {
+._1vlwkc21-3-3-0 ._5u9o252-3-3-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-2-0 ._5u9o251-3-2-0:empty::before {
+._1vlwkc22-3-3-0 ._5u9o252-3-3-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-2-0._1vlwkc21-3-2-0 ._5u9o251-3-2-0:empty::before {
+._1vlwkc22-3-3-0._1vlwkc21-3-3-0 ._5u9o252-3-3-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
+}
+._5u9o252-3-3-0::selection {
+  color: var(--_1i883gj4-3-3-0);
+  background-color: var(--_1i883gj5-3-3-0);
 }

package/forms/date-time-range-picker/DateTimeInput.d.ts

@@ -1,5 +1,5 @@
 import type { DateTimeInputProps, DateTimeInputRef } from './types.js';
-/** DateTimeRangePicker component
+/** Date & Time Input used in DateTimeRangePicker and DateTimePicker components
  * @internal
  */
 export declare const DateTimeInput: (props: DateTimeInputProps & import("react").RefAttributes<DateTimeInputRef>) => import("react").ReactElement | null;

package/forms/date-time-range-picker/DateTimeInput.js

@@ -42,6 +42,8 @@ var visuallyHiddenStyles = __toESM(require("../../core/components/visually-hidde
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
+var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
+var import_validation = require("../../core/time/validation.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var dataTimePickerStyles = __toESM(require("../date-time-picker/DateTimePicker.sty.js"));
@@ -58,6 +60,10 @@ const DateTimeInput = (0, import_react.forwardRef)(
     const rootRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
     const expressionInputRef = (0, import_react.useRef)(null);
+    const min = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.min);
+    const max = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.max);
+    const precision = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.precision);
+    const formatString = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.formatString);
     const intl = (0, import_react_intl.useIntl)();
     const {
       ariaProps: ariaFormProps,
@@ -77,7 +83,11 @@ const DateTimeInput = (0, import_react.forwardRef)(
       controlId,
       required,
       type = "datetime",
-      controlState
+      controlState,
+      validationValueMode,
+      onLeadingEdge,
+      onTrailingEdge,
+      onTrailingOverflow
     } = props;
     const dateTimePlaceholder = intl.formatMessage({
       defaultMessage: "Date time",
@@ -120,13 +130,15 @@ const DateTimeInput = (0, import_react.forwardRef)(
       expressionOnBlurHandler,
       expressionOnKeyDownHandler,
       onPaste,
+      onPasteUndoKeyDown,
       value,
       valueType,
       spinButtons,
       spinButtonHandlers,
       inputValue,
       focus,
-      validateTimeValue
+      switchToExpression,
+      setInputValue
     } = (0, import_useDateTimeInput.useDateTimeInput)(props, expressionInputRef);
     const isExpressionInput = valueType === "expression";
     const { dispatch: formMessageDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
@@ -138,11 +150,37 @@ const DateTimeInput = (0, import_react.forwardRef)(
         expressionInputRef: expressionInputRef.current,
         spinButtonHandlers,
         focus,
+        focusLast() {
+          if (valueType === "expression") {
+            expressionInputRef.current?.focus();
+          } else {
+            const handlers = Array.from(spinButtonHandlers.values()).filter(
+              (h) => h !== null
+            );
+            const lastHandler = handlers[handlers.length - 1];
+            lastHandler.element.current?.focus();
+            lastHandler.selectAll();
+          }
+        },
+        switchToExpression,
         validate() {
-          validateTimeValue(
-            value,
-            expressionInputRef.current?.textContent ?? void 0
-          );
+          const textContent = expressionInputRef.current?.textContent;
+          if (valueType === "expression" && !textContent) {
+            setInputValue("");
+          }
+          (0, import_validation.validate)(value ?? null, min, max, {
+            formMessageDispatch,
+            precision,
+            showError: true,
+            checkOrder: true,
+            ref: rootRef,
+            expectedFormat: formatString,
+            valueMode: validationValueMode,
+            // In single mode, required validation is handled by core time validation
+            // (singleValueMissing). Keeping native `required` here would add a second
+            // browser `valueMissing` message with identical text.
+            required: validationValueMode === "single" ? false : required
+          });
           formMessageDispatch?.({
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
@@ -150,11 +188,19 @@ const DateTimeInput = (0, import_react.forwardRef)(
         }
       }),
       [
+        spinButtonHandlers,
         focus,
+        switchToExpression,
+        setInputValue,
+        value,
+        valueType,
+        min,
+        max,
         formMessageDispatch,
-        spinButtonHandlers,
-        validateTimeValue,
-        value
+        precision,
+        formatString,
+        validationValueMode,
+        required
       ]
     );
     const expressionLabel = intl.formatMessage(
@@ -175,10 +221,15 @@ const DateTimeInput = (0, import_react.forwardRef)(
       {
         ref: rootRef,
         as: "span",
-        className: (0, import_clsx.default)(styles.dateTimeInput, consumerClassName),
+        className: (0, import_clsx.default)(
+          import_DateTimeInput_css.dateTimeInputRoot,
+          styles.dateTimeInput,
+          consumerClassName
+        ),
         style: consumerStyle,
         "data-testid": dataTestId,
         onPaste,
+        onKeyDown: onPasteUndoKeyDown,
         gap: 0,
         "data-valuetype": valueType,
         children: [
@@ -188,7 +239,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
               id: controlId,
               ref: inputRef,
               name,
-              value: inputValue,
+              value: inputValue ?? "",
               onChange: () => {
               },
               onFocus: focus,
@@ -209,7 +260,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
             {
-              className: (0, import_clsx.default)(import_DateTimeInput_css.expressionCSS, {
+              className: (0, import_clsx.default)(import_DateTimeInput_css.expression, {
                 [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput
               }),
               role: "textbox",
@@ -248,6 +299,9 @@ const DateTimeInput = (0, import_react.forwardRef)(
                 [visuallyHiddenStyles.visuallyHidden]: isExpressionInput
               }),
               valueOverflow: true,
+              onLeadingEdge,
+              onTrailingEdge,
+              onTrailingOverflow,
               children: spinButtons
             }
           )

package/forms/date-time-range-picker/DateTimeInput.sty.d.ts

@@ -1,2 +1,3 @@
+export declare const dateTimeInputRoot: string;
 export declare const dateTimeInput: string;
-export declare const expressionCSS: string;
+export declare const expression: string;

package/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -19,11 +19,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DateTimeInput_css_exports = {};
 __export(DateTimeInput_css_exports, {
   dateTimeInput: () => dateTimeInput,
-  expressionCSS: () => expressionCSS
+  dateTimeInputRoot: () => dateTimeInputRoot,
+  expression: () => expression
 });
 module.exports = __toCommonJS(DateTimeInput_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
+var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
+var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css");
+var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var dateTimeInput = "_5u9o250-3-2-0";
-var expressionCSS = "_5u9o251-3-2-0";
+var dateTimeInput = "_5u9o251-3-3-0";
+var dateTimeInputRoot = "_5u9o250-3-3-0";
+var expression = "_5u9o252-3-3-0";

package/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,4 +1,4 @@
-._1vlwkc20-3-2-0 {
+._1vlwkc20-3-3-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
@@ -7,19 +7,29 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-2-0);
-  background: var(--_bx32h3-3-2-0);
+  color: var(--_bx32h0-3-3-0);
+  background: var(--_bx32h3-3-3-0);
   flex: 1 1 auto;
+  position: relative;
 }
-._1vlwkc20-3-2-0._1vlwkc20-3-2-0 {
+._1vlwkc20-3-3-0._1vlwkc20-3-3-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc22-3-2-0 {
+._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0) {
+  padding-inline-end: var(--dt-spacings-size-32, 32px);
+}
+._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0:hover) {
+  --_bx32h3-3-3-0: var(--_bx32h2-3-3-0);
+}
+._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0:focus-visible) {
+  box-shadow: none;
+}
+._1vlwkc22-3-3-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-2-0 {
+._1vlwkc23-3-3-0 {
   cursor: not-allowed;
 }
-._1vlwkc24-3-2-0::selection {
+._1vlwkc24-3-3-0::selection {
   background: transparent;
 }