@wix/editor-react-components 1.2440.0 → 1.2441.0

package/dist/site/components/Checkbox/component.js

@@ -6,8 +6,7 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants37.js";

package/dist/site/components/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -1,8 +1,9 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { FieldValidationProps } from '../../../utils/validation/types';
 import { CheckboxGroupOption } from './constants';
 export type { CheckboxGroupOption } from './constants';
-export type CheckboxGroupProps = SdkFunctionFocusableProps & {
+export type CheckboxGroupProps = SdkFunctionFocusableProps & FieldValidationProps<Array<string>> & {
     id: string;
     className: string;
     options: Array<CheckboxGroupOption>;

package/dist/site/components/CheckboxGroup/component.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { a as Fieldset, T as Tooltip, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, e as Checkbox } from "../chunks/index11.js";
-import "react";
+import { a as Fieldset, T as Tooltip, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, c as InfoCircle_default, e as Checkbox } from "../chunks/index11.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants36.js";
+import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants36.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__raraS";
 const fieldset = "fieldset__pDERL";
@@ -23,6 +23,7 @@ const control = "control__MMIkR";
 const indicator = "indicator__mDg93";
 const checkmark = "checkmark__YItvi";
 const label = "label__aznPH";
+const errorMessage = "errorMessage__tlSBa";
 const styles = {
   root,
   fieldset,
@@ -35,10 +36,12 @@ const styles = {
   control,
   indicator,
   checkmark,
-  label
+  label,
+  errorMessage
 };
 const noop = () => {
 };
+const arraysEqual = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
 const CheckmarkIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -68,6 +71,10 @@ function CheckboxGroupComponent(props) {
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange,
     wix
   } = props;
   const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
@@ -78,10 +85,46 @@ function CheckboxGroupComponent(props) {
   const allValues = options.map((option2) => option2.value);
   const keepKnownOptions = (values) => values.filter((optionValue) => allValues.includes(optionValue));
   const defaultChecked = options.filter((option2) => option2.checked).map((option2) => option2.value);
-  const valueProps = value !== void 0 ? { value: keepKnownOptions(value) } : { defaultValue: keepKnownOptions(defaultChecked) };
+  const controlledValues = value !== void 0 ? keepKnownOptions(value) : void 0;
+  const isControlled = controlledValues !== void 0;
+  const valueProps = controlledValues !== void 0 ? { value: controlledValues } : { defaultValue: keepKnownOptions(defaultChecked) };
+  const [uncontrolledValues, setUncontrolledValues] = useState(
+    keepKnownOptions(defaultChecked)
+  );
+  const rawValues = controlledValues ?? uncontrolledValues;
+  const stableValuesRef = useRef(rawValues);
+  if (!arraysEqual(stableValuesRef.current, rawValues)) {
+    stableValuesRef.current = rawValues;
+  }
+  const currentValues = stableValuesRef.current;
   const handleValueChange = (next) => {
+    if (!isControlled) {
+      setUncontrolledValues(next);
+    }
     onChange(next);
   };
+  const intrinsic = required && !disabled && !readOnly && currentValues.length === 0 ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: handleValidationBlur
+  } = useValidatedField({
+    value: currentValues,
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const showErrorMessage = isInvalid && !!validity.validationMessage;
+  const errorId = `${id}-error`;
+  const handleBlur = (event) => {
+    onBlur(event);
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleValidationBlur();
+    }
+  };
   const hasLegend = displayLabel && !!label2;
   const showLabelRow = hasLegend || !!tooltip2;
   const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
@@ -180,11 +223,13 @@ function CheckboxGroupComponent(props) {
             allValues,
             disabled,
             "aria-required": required || void 0,
+            "aria-invalid": isInvalid || void 0,
+            "aria-describedby": showErrorMessage ? errorId : void 0,
             "aria-label": ariaLabel,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
-            onBlur,
+            onBlur: handleBlur,
             children: [
               selectAll && /* @__PURE__ */ jsxs(
                 "label",
@@ -241,6 +286,21 @@ function CheckboxGroupComponent(props) {
               ))
             ]
           }
+        ),
+        showErrorMessage && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: errorId,
+            className: clsx(
+              styles.errorMessage,
+              formatClassNames(semanticClassNames.errorMessage)
+            ),
+            "data-testid": TestIds.errorMessage,
+            children: [
+              /* @__PURE__ */ jsx(InfoCircle_default, { "aria-hidden": "true" }),
+              validity.validationMessage
+            ]
+          }
         )
       ] })
     }

package/dist/site/components/CheckboxGroup/constants.d.ts

@@ -82,6 +82,7 @@ export declare const defaultValues: {
     readonly disabled: false;
     readonly selectAll: false;
 };
+export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const TestIds: {
     readonly root: "checkbox-group-root";
     readonly group: "checkbox-group-group";
@@ -93,6 +94,7 @@ export declare const TestIds: {
     readonly indicator: "checkbox-group-indicator";
     readonly optionLabel: "checkbox-group-option-label";
     readonly tooltipButton: "checkbox-group-tooltip-button";
+    readonly errorMessage: "checkbox-group-error-message";
 };
 export declare const selectors: {
     readonly root: "checkbox-group";
@@ -108,4 +110,5 @@ export declare const semanticClassNames: {
     readonly indicator: "checkbox-group__indicator";
     readonly label: "checkbox-group__label";
     readonly requiredIndicator: "checkbox-group__required-indicator";
+    readonly errorMessage: "checkbox-group__error-message";
 };

package/dist/site/components/CheckboxGroup/css.css

@@ -64,9 +64,9 @@
 .tooltip__xXd2k {
   max-width: 220px;
   padding: 6px 10px;
-  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
-  color: var(--wst-primary-background-color, #fff);
-  background: var(--wst-paragraph-2-color, #2b2b2b);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: #fff;
+  background: #2b2b2b;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }
@@ -164,14 +164,17 @@
 }
 
 .control__MMIkR:not([data-checked]):not([data-indeterminate])[data-invalid] .indicator__mDg93,
-.control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--invalid {
+.control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--invalid,
+.group__5et8j[aria-invalid=true] .control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93 {
   --indicator-border: var(--uncheckedBorderColor, #e62214);
 }
 
 .control__MMIkR[data-checked][data-invalid] .indicator__mDg93,
 .control__MMIkR[data-indeterminate][data-invalid] .indicator__mDg93,
 .control__MMIkR[data-checked] .indicator__mDg93.checkbox-group__indicator--invalid,
-.control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--invalid {
+.control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--invalid,
+.group__5et8j[aria-invalid=true] .control__MMIkR[data-checked] .indicator__mDg93,
+.group__5et8j[aria-invalid=true] .control__MMIkR[data-indeterminate] .indicator__mDg93 {
   --indicator-border: var(--checkedBorderColor, #e62214);
 }
 
@@ -207,6 +210,20 @@
 .label__aznPH {
   cursor: pointer;
   margin-bottom: 0;
+}
+
+.errorMessage__tlSBa {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: var(--errorTextColor, #ff4040);
+}
+.errorMessage__tlSBa svg {
+  flex: none;
+  width: 18px;
+  height: 18px;
 }.checkbox-group {
   --checkboxesSpacing: 6px;
   --labelSpacing: 16px;

package/dist/site/components/CheckboxGroup/manifest.js

@@ -3,6 +3,7 @@ import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selector
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "aa224b85-e2af-462b-9a15-5de3a753bea8",
   type: "wixEditorElements.CheckboxGroup__DEV__v3",
@@ -128,7 +129,21 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      // `item` is proto-correct for a function-param array but currently fails
+      // enrichment (SPI validates it with the data-field ArrayItems schema).
+      // Do NOT switch to `dataItem` — it is stripped in serialization and fails
+      // identically. Blocked on a component-protocol platform fix.
+      ...manifestValidation({
+        valueParameter: {
+          dataType: DATA.DATA_TYPE.arrayItems,
+          [DATA.DATA_TYPE.arrayItems]: {
+            item: {
+              dataType: DATA.DATA_TYPE.text
+            }
+          }
+        }
+      })
     },
     displayGroups: {
       optionsGroup: {

package/dist/site/components/DatePicker/component.js

@@ -16,8 +16,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator, u as useValidatedField } from "../chunks/RequiredIndicator.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 createContext(null);

package/dist/site/components/Dropdown/component.js

@@ -8,11 +8,10 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants33.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";

package/dist/site/components/RadioButtons/component.js

@@ -6,8 +6,7 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";

package/dist/site/components/TextBox/component.js

@@ -6,11 +6,10 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";

package/dist/site/components/TextInput/component.js

@@ -5,8 +5,7 @@ import { c as clsx } from "../chunks/clsx.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";

package/dist/site/components/TimePicker/component.js

@@ -13,8 +13,7 @@ import { g as getTranslation } from "../chunks/getTranslation.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dzkbY";

package/dist/site/components/chunks/RequiredIndicator.js

@@ -1,6 +1,83 @@
+import * as React from "react";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
-import * as React from "react";
+const sameValidity = (a, b) => a !== null && a.valid === b.valid && a.validationMessage === b.validationMessage;
+function useValidatedField({
+  value,
+  valueKey,
+  intrinsic,
+  fieldValidity,
+  showValidityIndication,
+  onValidate,
+  onValidityChange
+}) {
+  const isGateControlled = showValidityIndication !== void 0;
+  const [touched, setTouched] = useState(false);
+  const showIndication = isGateControlled ? Boolean(showValidityIndication) : touched;
+  const changeKey = valueKey === void 0 ? value : valueKey;
+  const customInvalid = (fieldValidity == null ? void 0 : fieldValidity.valid) === false;
+  const customMessage = (fieldValidity == null ? void 0 : fieldValidity.validationMessage) ?? "";
+  const validity = useMemo(() => {
+    const valid = intrinsic.valid && !customInvalid;
+    let validationMessage = "";
+    if (!intrinsic.valid) {
+      validationMessage = intrinsic.validationMessage;
+    } else if (customInvalid) {
+      validationMessage = customMessage;
+    }
+    return { valid, validationMessage };
+  }, [
+    intrinsic.valid,
+    intrinsic.validationMessage,
+    customInvalid,
+    customMessage
+  ]);
+  const onValidateRef = useRef(onValidate);
+  onValidateRef.current = onValidate;
+  const onValidityChangeRef = useRef(onValidityChange);
+  onValidityChangeRef.current = onValidityChange;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const lastEmittedRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (sameValidity(lastEmittedRef.current, validity)) {
+      return;
+    }
+    lastEmittedRef.current = validity;
+    (_a = onValidityChangeRef.current) == null ? void 0 : _a.call(onValidityChangeRef, validity);
+  }, [validity]);
+  const mountedRef = useRef(false);
+  const prevKeyRef = useRef(changeKey);
+  useEffect(() => {
+    var _a;
+    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "mount");
+    mountedRef.current = true;
+    prevKeyRef.current = changeKey;
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!mountedRef.current) {
+      return;
+    }
+    if (prevKeyRef.current === changeKey) {
+      return;
+    }
+    prevKeyRef.current = changeKey;
+    if (showIndication) {
+      (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "change");
+    }
+  }, [changeKey, showIndication]);
+  const handleBlur = useCallback(() => {
+    var _a;
+    if (!isGateControlled) {
+      setTouched(true);
+    }
+    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "blur");
+  }, [isGateControlled]);
+  return { validity, showValidityIndication: showIndication, handleBlur };
+}
 const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
 Asterisk.displayName = "Asterisk";
 var Asterisk_default = Asterisk;
@@ -21,5 +98,6 @@ const RequiredIndicator = ({
   }
 );
 export {
-  RequiredIndicator as R
+  RequiredIndicator as R,
+  useValidatedField as u
 };

package/dist/site/components/chunks/constants36.js

@@ -79,6 +79,7 @@ const defaultValues = {
   disabled: false,
   selectAll: false
 };
+const VALUE_MISSING_MESSAGE = "This field is required";
 const TestIds = {
   root: "checkbox-group-root",
   group: "checkbox-group-group",
@@ -89,7 +90,8 @@ const TestIds = {
   control: "checkbox-group-control",
   indicator: "checkbox-group-indicator",
   optionLabel: "checkbox-group-option-label",
-  tooltipButton: "checkbox-group-tooltip-button"
+  tooltipButton: "checkbox-group-tooltip-button",
+  errorMessage: "checkbox-group-error-message"
 };
 const selectors = {
   root: "checkbox-group",
@@ -103,11 +105,13 @@ const semanticClassNames = {
   control: "checkbox-group__control",
   indicator: "checkbox-group__indicator",
   label: "checkbox-group__label",
-  requiredIndicator: "checkbox-group__required-indicator"
+  requiredIndicator: "checkbox-group__required-indicator",
+  errorMessage: "checkbox-group__error-message"
 };
 export {
   DesignStates as D,
   TestIds as T,
+  VALUE_MISSING_MESSAGE as V,
   defaultOptions as a,
   semanticClassNames as b,
   DisplayNames as c,

package/dist/site/components/chunks/manifest2.js

@@ -9,12 +9,14 @@ const MANIFEST_DEFAULT_VALIDATION_DISPLAY_NAMES = {
 };
 function manifestValidation({
   valueDataType = DATA.DATA_TYPE.text,
+  valueParameter,
   displayNames = {}
 } = {}) {
   const names = {
     ...MANIFEST_DEFAULT_VALIDATION_DISPLAY_NAMES,
     ...displayNames
   };
+  const valueParam = valueParameter ?? { dataType: valueDataType };
   const fieldValidityItems = {
     valid: {
       dataType: DATA.DATA_TYPE.booleanValue,
@@ -46,7 +48,7 @@ function manifestValidation({
       displayName: names.onValidate,
       [DATA.DATA_TYPE.function]: {
         parameters: [
-          { dataType: valueDataType },
+          valueParam,
           // value
           {
             // cause: 'mount' | 'change' | 'blur'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2440.0",
+  "version": "1.2441.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "05bfdc5d1e1c70b3571049d1109e49b13806fb2867a2430442f10219"
+  "falconPackageHash": "46ae1fbe924e1d979e3e1f23fc20a16506c636ffa2f9b369b56f2aa3"
 }

package/dist/site/components/chunks/useValidatedField.js

@@ -1,80 +0,0 @@
-import { useState, useMemo, useRef, useEffect, useCallback } from "react";
-const sameValidity = (a, b) => a !== null && a.valid === b.valid && a.validationMessage === b.validationMessage;
-function useValidatedField({
-  value,
-  valueKey,
-  intrinsic,
-  fieldValidity,
-  showValidityIndication,
-  onValidate,
-  onValidityChange
-}) {
-  const isGateControlled = showValidityIndication !== void 0;
-  const [touched, setTouched] = useState(false);
-  const showIndication = isGateControlled ? Boolean(showValidityIndication) : touched;
-  const changeKey = valueKey === void 0 ? value : valueKey;
-  const customInvalid = (fieldValidity == null ? void 0 : fieldValidity.valid) === false;
-  const customMessage = (fieldValidity == null ? void 0 : fieldValidity.validationMessage) ?? "";
-  const validity = useMemo(() => {
-    const valid = intrinsic.valid && !customInvalid;
-    let validationMessage = "";
-    if (!intrinsic.valid) {
-      validationMessage = intrinsic.validationMessage;
-    } else if (customInvalid) {
-      validationMessage = customMessage;
-    }
-    return { valid, validationMessage };
-  }, [
-    intrinsic.valid,
-    intrinsic.validationMessage,
-    customInvalid,
-    customMessage
-  ]);
-  const onValidateRef = useRef(onValidate);
-  onValidateRef.current = onValidate;
-  const onValidityChangeRef = useRef(onValidityChange);
-  onValidityChangeRef.current = onValidityChange;
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  const lastEmittedRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (sameValidity(lastEmittedRef.current, validity)) {
-      return;
-    }
-    lastEmittedRef.current = validity;
-    (_a = onValidityChangeRef.current) == null ? void 0 : _a.call(onValidityChangeRef, validity);
-  }, [validity]);
-  const mountedRef = useRef(false);
-  const prevKeyRef = useRef(changeKey);
-  useEffect(() => {
-    var _a;
-    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "mount");
-    mountedRef.current = true;
-    prevKeyRef.current = changeKey;
-  }, []);
-  useEffect(() => {
-    var _a;
-    if (!mountedRef.current) {
-      return;
-    }
-    if (prevKeyRef.current === changeKey) {
-      return;
-    }
-    prevKeyRef.current = changeKey;
-    if (showIndication) {
-      (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "change");
-    }
-  }, [changeKey, showIndication]);
-  const handleBlur = useCallback(() => {
-    var _a;
-    if (!isGateControlled) {
-      setTouched(true);
-    }
-    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "blur");
-  }, [isGateControlled]);
-  return { validity, showValidityIndication: showIndication, handleBlur };
-}
-export {
-  useValidatedField as u
-};