@dynatrace/strato-components 3.0.1 → 3.1.1

package/forms/date-time-picker/DateTimePicker.sty.js

@@ -18,15 +18,15 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DateTimePicker_css_exports = {};
 __export(DateTimePicker_css_exports, {
-  dateSelectorCSS: () => dateSelectorCSS,
-  dateTimePickerCSS: () => dateTimePickerCSS,
-  dateTimePickerSpinButtonGroupCSS: () => dateTimePickerSpinButtonGroupCSS
+  dateSelector: () => dateSelector,
+  dateTimePicker: () => dateTimePicker,
+  dateTimePickerSpinButtonGroup: () => dateTimePickerSpinButtonGroup
 });
 module.exports = __toCommonJS(DateTimePicker_css_exports);
 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("./DateTimePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateSelectorCSS = "_1i883gjf-3-0-1";
-var dateTimePickerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj6-3-0-1", variantClassNames: { readOnly: { true: "_1i883gj7-3-0-1" }, showError: { true: "_1i883gj8-3-0-1" }, disabled: { true: "_1i883gj9-3-0-1" }, type: { date: "_1i883gja-3-0-1", time: "_1i883gjb-3-0-1", datetime: "_1i883gjc-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var dateTimePickerSpinButtonGroupCSS = "_1i883gje-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1 _1i883gjd-3-0-1";
+var dateSelector = "_1i883gje-3-1-1";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj6-3-1-1", variantClassNames: { readOnly: { true: "_1i883gj7-3-1-1" }, showError: { true: "_1i883gj8-3-1-1" }, disabled: { true: "_1i883gj9-3-1-1" }, type: { date: "_1i883gja-3-1-1", time: "_1i883gjb-3-1-1", datetime: "_1i883gjc-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimePickerSpinButtonGroup = "_1i883gjd-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1";

package/forms/date-time-picker/hooks/useDateTimeFormat.js

@@ -127,9 +127,9 @@ function useDateTimeFormat(type = "datetime", precision = "minutes") {
             if (dayPeriod) {
               date2 = (0, import_date_fns.setHours)(date2, intValue % 12);
               const dayPeriodValue = trimSpace(dayPeriod.value);
-              if (dayPeriodValue === trimSpace(dayPeriodValues[1])) {
+              if (dayPeriodValue === trimSpace(dayPeriodValues[1]) || dayPeriodValue === "PM") {
                 date2 = (0, import_date_fns.addHours)(date2, 12);
-              } else if (dayPeriodValue !== trimSpace(dayPeriodValues[0])) {
+              } else if (dayPeriodValue !== trimSpace(dayPeriodValues[0]) && dayPeriodValue !== "AM") {
                 date2 = INVALID_DATE;
               }
               return date2;

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

@@ -1,8 +1,8 @@
-._1uftu980-3-0-1 {
+._1uftu980-3-1-1 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1uftu981-3-0-1 {
+._1uftu981-3-1-1 {
   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;

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-0-1";
-var selector = "_1uftu981-3-0-1";
+var readOnly = "_1uftu980-3-1-1";
+var selector = "_1uftu981-3-1-1";

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

@@ -1,21 +1,21 @@
-._5u9o250-3-0-1 {
+._5u9o250-3-1-1 {
   outline: none;
 }
-._5u9o250-3-0-1:not(:focus-visible) {
+._5u9o250-3-1-1:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o250-3-0-1:empty::before {
+._5u9o250-3-1-1: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-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc21-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc22-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-0-1._1vlwkc21-3-0-1 ._5u9o250-3-0-1:empty::before {
+._1vlwkc22-3-1-1._1vlwkc21-3-1-1 ._5u9o250-3-1-1:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

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

@@ -241,7 +241,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_SpinButtonGroup.SpinButtonGroup,
             {
-              className: (0, import_clsx.default)(import_DateTimePicker_css.dateTimePickerSpinButtonGroupCSS, {
+              className: (0, import_clsx.default)(import_DateTimePicker_css.dateTimePickerSpinButtonGroup, {
                 [styles.visuallyHidden]: isExpressionInput
               }),
               valueOverflow: true,

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

@@ -24,4 +24,4 @@ module.exports = __toCommonJS(DateTimeInput_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var expressionCSS = "_5u9o250-3-0-1";
+var expressionCSS = "_5u9o250-3-1-1";

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

@@ -1,4 +1,4 @@
-._1vlwkc20-3-0-1 {
+._1vlwkc20-3-1-1 {
   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,16 +7,16 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-0-1);
-  background: var(--_bx32h3-3-0-1);
+  color: var(--_bx32h0-3-1-1);
+  background: var(--_bx32h3-3-1-1);
   flex: 1 1 auto;
 }
-._1vlwkc20-3-0-1._1vlwkc20-3-0-1 {
+._1vlwkc20-3-1-1._1vlwkc20-3-1-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc22-3-0-1 {
+._1vlwkc22-3-1-1 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-0-1 {
+._1vlwkc23-3-1-1 {
   cursor: not-allowed;
 }

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

@@ -129,6 +129,7 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
       open: () => dateRangeSelectorRef.current?.open(),
       close: () => dateRangeSelectorRef.current?.close(),
       focus: () => dateTimeFromRef.current?.focus?.(),
+      getCurrentValue: () => ({ from: value.from, to: value.to }),
       validate() {
         validate(value.from, value.to, true);
         formMessageDispatch?.({
@@ -187,7 +188,7 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
             ref: touchedContainerRef,
             className: (0, import_clsx.default)(
               import_InputGroup_css.inputGroupClassName,
-              (0, import_DateTimePicker_css.dateTimePickerCSS)({
+              (0, import_DateTimePicker_css.dateTimePicker)({
                 readOnly,
                 showError,
                 disabled,

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

@@ -24,4 +24,4 @@ module.exports = __toCommonJS(DateTimeRangePicker_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeRangeCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-0-1", variantClassNames: { showError: { true: "_1vlwkc21-3-0-1" }, disabled: { true: "_1vlwkc22-3-0-1" }, readOnly: { true: "_1vlwkc23-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimeRangeCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-1-1", variantClassNames: { showError: { true: "_1vlwkc21-3-1-1" }, disabled: { true: "_1vlwkc22-3-1-1" }, readOnly: { true: "_1vlwkc23-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/date-time-range-picker/hooks/useDateTimeIInputValidation.js

@@ -71,9 +71,11 @@ const useDateTimeInputValidation = (validationProps, parts, toDateTime) => {
         validateExpression(value, expressionValue);
       } else if (date !== null) {
         validateDate(value, date);
+      } else {
+        updateError(null);
       }
     },
-    [parts, toDateTime, validateDate, validateExpression]
+    [parts, toDateTime, updateError, validateDate, validateExpression]
   );
   return {
     validateTimeValue

package/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -172,7 +172,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
       setValueType("expression");
       setValue(null);
       setExpressionEmpty(true);
-      validateTimeValue((0, import_units.parseTimeAsTimeValue)(input));
+      validateTimeValue((0, import_units.parseTimeAsTimeValue)(input), input);
       return;
     }
     setExpressionEmpty(false);

package/forms/date-time-range-picker/hooks/useDateTimeRangePickerValidation.js

@@ -33,6 +33,10 @@ var import_helpers = require("../../forms-core/time/helpers.js");
 const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRef, valueFrom, valueTo, max, min, precision) => {
   const [errorFrom, setErrorFrom] = (0, import_react.useState)(null);
   const [errorTo, setErrorTo] = (0, import_react.useState)(null);
+  const errorFromRef = (0, import_react.useRef)(errorFrom);
+  errorFromRef.current = errorFrom;
+  const errorToRef = (0, import_react.useRef)(errorTo);
+  errorToRef.current = errorTo;
   const { dispatch: dispatchErrorMessage } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const timeframe = { from: valueFrom?.value, to: valueTo?.value };
   const { getErrorMessage } = (0, import_useDateTimeRangeErrorMessage.useDateTimeRangeErrorMessage)({
@@ -79,30 +83,39 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
         });
       }
       function validateFor(error) {
-        if (errorFrom === error || errorTo === error) {
+        if (errorFromRef.current === error || errorToRef.current === error) {
           pushError({
             error,
-            source: errorFrom === errorTo ? "both" : errorFrom === error ? "from" : "to"
+            source: errorFromRef.current === errorToRef.current ? "both" : errorFromRef.current === error ? "from" : "to"
           });
           return false;
         }
         return true;
       }
       function validateForBothValues() {
-        if (from && !to || to && !from) {
+        const isRequired = validationInputRef.current?.inputRef?.required;
+        const containsNowExpression = from?.value === "now()" || to?.value === "now()";
+        const fromOrToIsEmpty = from && !to || to && !from;
+        if (fromOrToIsEmpty && containsNowExpression) {
           pushError({
             error: "valueMissing",
             source: from ? "to" : "from"
           });
           return false;
         }
+        if (isRequired && !from && !to) {
+          pushError({
+            error: "valueMissing",
+            source: "both"
+          });
+          return false;
+        }
         return true;
       }
       const isValid = (
-        // If one of the field is invalid, this is always the error with the highest priority
-        validateFor("invalid") && // If on value is there, the one one has to be there as well
-        validateForBothValues() && // Next, prioritize if a value is missing
-        validateFor("valueMissing") && // Next, check if both values are within given boundaries
+        // If one of the fields is invalid, this is always the error with the highest priority
+        validateFor("invalid") && // If one value is there, the other one has to be there as well
+        validateForBothValues() && // Next, check if both values are within given boundaries
         validateFor("outsideRange")
       );
       if (!isValid) {
@@ -126,16 +139,13 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
     [
       dateTimeRangePickerErrorId,
       dispatchErrorMessage,
-      errorFrom,
-      errorTo,
       getErrorMessage,
       reevaluate
     ]
   );
   const onBlurTouched = (0, import_react.useCallback)(
     (e) => {
-      if (e.relatedTarget !== null && // otherwise on outside clicks, we would see validation errors briefly before closing the overlay
-      !touchedContainerRef.current?.contains(e.relatedTarget)) {
+      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {
         validate(valueFrom, valueTo);
         dispatchErrorMessage?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -149,7 +159,7 @@ const useDateTimeRangePickerValidation = (touchedContainerRef, validationInputRe
   );
   (0, import_react.useEffect)(() => {
     validate(valueFrom, valueTo);
-  }, [validate, valueFrom, valueTo]);
+  }, [validate, valueFrom, valueTo, errorFrom, errorTo]);
   (0, import_react.useEffect)(() => {
     const onInvalid = () => {
       dispatchErrorMessage?.({

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

@@ -59,6 +59,11 @@ export type DateTimeRangePickerRef = Omit<FormControlRef, 'inputRef'> & Pick<Tim
     readonly open: () => void;
     /** Close calendar widget.*/
     readonly close: () => void;
+    /** Returns the current internal from/to values, including when only one side is set. */
+    readonly getCurrentValue: () => {
+        from: TimeValue | null;
+        to: TimeValue | null;
+    };
 };
 /**
  * Possible DateTimeInput error states

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-0-1 {
+._1dphm0f0-3-1-1 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-0-1 {
+._1dphm0f1-3-1-1 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -23,5 +23,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-0-1";
-var legend = "_1dphm0f1-3-0-1";
+var fieldset = "_1dphm0f0-3-1-1";
+var legend = "_1dphm0f1-3-1-1";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -22,4 +22,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-0-1";
+var formField = "_mvcxum0-3-1-1";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-0-1 {
+._16z6rg10-3-1-1 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-0-1 {
+._16z6rg11-3-1-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-0-1 {
+._16z6rg12-3-1-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-0-1 {
+._16z6rg13-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-0-1 {
+._16z6rg14-3-1-1 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -24,5 +24,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-0-1", variantClassNames: { variant: { hint: "_16z6rg11-3-0-1", error: "_16z6rg12-3-0-1" }, disabled: { true: "_16z6rg13-3-0-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-0-1";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-1-1", variantClassNames: { variant: { hint: "_16z6rg11-3-1-1", error: "_16z6rg12-3-1-1" }, disabled: { true: "_16z6rg13-3-1-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-1-1";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -22,4 +22,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-0-1";
+var formFieldMessages = "_1l9bja60-3-1-1";

package/forms/forms-core/components/label/Label.css

@@ -1,9 +1,9 @@
-._1gxatyo0-3-0-1 {
+._1gxatyo0-3-1-1 {
   display: inline-block;
 }
-._1gxatyo1-3-0-1 {
+._1gxatyo1-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-0-1:after {
+._1gxatyo2-3-1-1:after {
   content: "*" / "";
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,4 +23,4 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-0-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-0-1" }, required: { true: "_1gxatyo2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-1-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-1-1" }, required: { true: "_1gxatyo2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/forms-core/hooks/useFormFieldValidation.d.ts

@@ -20,8 +20,14 @@ interface FormFieldValidationProps {
     onChange: (event?: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
     onBlur: (event?: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
 }
-/** @internal */
-export declare function useFormFieldValidation(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>, ariaLabelingProps?: AriaLabelingProps, controlId?: string): FormFieldValidationProps;
+/**
+ * @internal
+ * @param ref - Reference to the input element
+ * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).
+ * @param ariaLabelingProps - ARIA labeling properties
+ * @param controlId - Optional control ID for message management
+ */
+export declare function useFormFieldValidation(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>, validationDeps?: Record<string, string | number | boolean | undefined>, ariaLabelingProps?: AriaLabelingProps, controlId?: string): FormFieldValidationProps;
 export declare function getCombinedAriaProps(validationAriaProps: Pick<AriaAttributes, 'aria-errormessage' | 'aria-invalid' | 'aria-describedby'>, labelingProps: AriaLabelingProps): {
     'aria-describedby': string | undefined;
     "aria-errormessage"?: string | undefined | undefined;

package/forms/forms-core/hooks/useFormFieldValidation.js

@@ -108,10 +108,13 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.FormattedMessage,
         {
-          id: "mE/S6XqlsZc0mYiH",
-          defaultMessage: "Please provide a value in a multitude of {step}.",
-          description: "Error message for input that isn't a multitude of the provided step.",
-          values: { step: ref?.getAttribute("step") }
+          id: "MYfVMxPsAgOn8JSP",
+          defaultMessage: "Value must be a multiple of {step}, starting from {min}.",
+          description: "Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.",
+          values: {
+            step: ref?.getAttribute("step"),
+            min: ref?.getAttribute("min") ?? "0"
+          }
         }
       );
     case "tooLong":
@@ -159,7 +162,7 @@ function getI18nErrorMessage(key, ref) {
       return null;
   }
 }
-function useFormFieldValidation(ref, ariaLabelingProps = {}, controlId) {
+function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
   const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const errorId = (0, import_useId.useId)();
   const _ariaProps = (0, import_react2.useMemo)(() => {
@@ -177,38 +180,7 @@ function useFormFieldValidation(ref, ariaLabelingProps = {}, controlId) {
     };
   }, [state.customMessages, state.formControlMessages, state.showError]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
-  const onInvalid = (0, import_react2.useCallback)(
-    (event) => {
-      const errorType = getErrorType(ref.current?.validity);
-      if (errorType) {
-        dispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
-          payload: {
-            id: errorId,
-            message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", as: "p", children: getI18nErrorMessage(errorType, ref.current) }),
-            validityStateKey: errorType,
-            messageType: "formcontrol",
-            variant: "error",
-            controlId
-          }
-        });
-      }
-      dispatch?.({
-        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-        payload: { isTouched: true }
-      });
-      event.preventDefault();
-    },
-    [controlId, dispatch, errorId, ref]
-  );
-  const onBlur = (0, import_react2.useCallback)(() => {
-    ref.current?.reportValidity();
-    dispatch?.({
-      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-      payload: { isTouched: true }
-    });
-  }, [dispatch, ref]);
-  const onChange = (0, import_react2.useCallback)(() => {
+  const updateErrorMessages = (0, import_react2.useCallback)(() => {
     const errorType = getErrorType(ref.current?.validity);
     state.formControlMessages.forEach((message) => {
       if (message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
@@ -236,10 +208,32 @@ function useFormFieldValidation(ref, ariaLabelingProps = {}, controlId) {
       });
     }
   }, [controlId, dispatch, errorId, ref, state.formControlMessages]);
+  const onInvalid = (0, import_react2.useCallback)(
+    (event) => {
+      updateErrorMessages();
+      dispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: true }
+      });
+      event.preventDefault();
+    },
+    [dispatch, updateErrorMessages]
+  );
+  const onBlur = (0, import_react2.useCallback)(() => {
+    ref.current?.reportValidity();
+    dispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+  }, [dispatch, ref]);
+  const validationDepsKey = JSON.stringify(validationDeps);
+  (0, import_react2.useEffect)(() => {
+    updateErrorMessages();
+  }, [validationDepsKey, updateErrorMessages]);
   return {
     ariaProps,
     onInvalid,
-    onChange,
+    onChange: updateErrorMessages,
     onBlur
   };
 }

package/forms/forms-core/time/helpers.js

@@ -99,17 +99,15 @@ const getSafeRegionalFormat = () => {
     "ee",
     "ha",
     "hi",
-    "km",
     "kok",
     "mai",
-    "mi",
     "naq",
     "nus",
     "pt",
     "sq",
-    "ta",
     "ti",
     "to",
+    "yue",
     "zh",
     // Non gregorian calendars.
     "th"
@@ -228,7 +226,7 @@ const convertDateOnlyToDateTime = (isoString, type) => {
   return isoString ?? "";
 };
 function filterOutGrailLimit(value, limit) {
-  const isOutsideGrailLimit = (0, import_timeframe_selection._isOutsideRange)(
+  const isOutsideGrailLimit = (0, import_timeframe_selection.isOutsideRange)(
     value,
     import_date_time.GRAIL_MIN_DATE,
     import_date_time.GRAIL_MAX_DATE

package/forms/forms-core/time/timeParser.d.ts

@@ -1,7 +1,6 @@
 import { type IntlShape } from 'react-intl';
 import type { RequireAtLeastOne } from 'type-fest';
 import type { TimeValue, Timeframe } from '../../../core/types/time.js';
-import type { TimeframeSelectorPresetItemProps } from '../../../filters/timeframe-selector/Item.types.js';
 import type { TimeframeSelectorProps } from '../../../filters/timeframe-selector/TimeframeSelector.types.js';
 import { DateTimePickerType } from '../../date-time-picker/types.js';
 /** @internal */
@@ -221,7 +220,10 @@ export declare function getFromToValues(value?: Partial<{
  * Returns the display value string for a given timeframe.
  * @internal
  */
-export declare function formatTimeframe(value: Timeframe | TimeframeSelectorPresetItemProps['value'] | null, intl: IntlShape, precision?: 'minutes' | 'seconds' | 'milliseconds'): {
+export declare function formatTimeframe(value: Timeframe | {
+    from: string;
+    to: string;
+} | null, intl: IntlShape, precision?: 'minutes' | 'seconds' | 'milliseconds'): {
     displayValue: string;
     isInvalid: boolean;
     hint: string;

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-0-1 {
+@keyframes _yfwka31-3-1-1 {
 
 }
-@keyframes _yfwka32-3-0-1 {
+@keyframes _yfwka32-3-1-1 {
 
 }
-._yfwka33-3-0-1:-webkit-autofill:is(._yfwka33-3-0-1,:hover,:focus) {
+._yfwka33-3-1-1:-webkit-autofill:is(._yfwka33-3-1-1,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-0-1) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-1-1) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-0-1:-webkit-autofill {
-  animation-name: _yfwka31-3-0-1;
+._yfwka33-3-1-1:-webkit-autofill {
+  animation-name: _yfwka31-3-1-1;
   animation-duration: 0.001s;
 }
-._yfwka33-3-0-1:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-0-1;
+._yfwka33-3-1-1:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-1-1;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -25,7 +25,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-0-1)";
-var autofillCSS = "_yfwka33-3-0-1";
-var end = "_yfwka32-3-0-1";
-var start = "_yfwka31-3-0-1";
+var autofillBackground = "var(--_yfwka30-3-1-1)";
+var autofillCSS = "_yfwka33-3-1-1";
+var end = "_yfwka32-3-1-1";
+var start = "_yfwka31-3-1-1";

package/forms/index.d.ts

@@ -1,3 +1,5 @@
+export type { BaseInputButtonProps } from './_base-input/BaseInputButton.js';
+export type { BaseInputContentProps } from './_base-input/BaseInputContent.js';
 export type { BaseInputButtonProps as TextInputButtonProps } from './_base-input/BaseInputButton.js';
 export type { BaseInputProps } from './_base-input/base-input.types.js';
 export type { BaseInputContentProps as TextInputContentProps } from './_base-input/BaseInputContent.js';
@@ -29,6 +31,8 @@ export { Label } from './forms-core/components/label/Label.js';
 export type { LabelProps } from './forms-core/components/label/Label.js';
 export { NumberInput } from './number-input/NumberInput.js';
 export type { NumberInputProps } from './number-input/NumberInputBase.js';
+export { NumberInput as NumberInputV2 } from './number-input-v2/NumberInput.js';
+export type { NumberInputProps as NumberInputV2Props } from './number-input-v2/NumberInput.js';
 export { PasswordInput } from './password-input/PasswordInput.js';
 export type { PasswordInputProps } from './password-input/PasswordInput.js';
 export type { PasswordInputTooltipProps } from './password-input/PasswordInputTooltip.js';

package/forms/index.js

@@ -26,6 +26,7 @@ __export(forms_exports, {
   Hint: () => import_Hint.Hint,
   Label: () => import_Label.Label,
   NumberInput: () => import_NumberInput.NumberInput,
+  NumberInputV2: () => import_NumberInput2.NumberInput,
   PasswordInput: () => import_PasswordInput.PasswordInput,
   Radio: () => import_Radio.Radio,
   RadioGroup: () => import_RadioGroup.RadioGroup,
@@ -68,6 +69,7 @@ var import_FormFieldMessages = require("./forms-core/components/form-field-messa
 var import_Hint = require("./forms-core/components/hint/Hint.js");
 var import_Label = require("./forms-core/components/label/Label.js");
 var import_NumberInput = require("./number-input/NumberInput.js");
+var import_NumberInput2 = require("./number-input-v2/NumberInput.js");
 var import_PasswordInput = require("./password-input/PasswordInput.js");
 var import_Radio = require("./radio/Radio.js");
 var import_RadioGroup = require("./radio/RadioGroup.js");

package/forms/number-input/NumberInput.d.ts

@@ -3,5 +3,6 @@ import type { FormControlRef } from '../shared-types.js';
 /**
  * Number inputs let users enter and edit integers and floating-point numbers.
  * @public
+ * @deprecated This component is deprecated and will be removed in a future release. Please use the NumberInputV2 component instead.
  */
 export declare const NumberInput: (props: NumberInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => React.ReactElement | null;