@wix/editor-react-components 1.2356.0 → 1.2357.0

package/dist/site/components/RadioButtons/RadioButtons.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 { RadioButtonsDefaultSelection, RadioButtonsOption } from './constants';
 export type { RadioButtonsOption } from './constants';
-export type RadioButtonsProps = SdkFunctionFocusableProps & {
+export type RadioButtonsProps = SdkFunctionFocusableProps & FieldValidationProps<string> & {
     id: string;
     className: string;
     options: Array<RadioButtonsOption>;

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

@@ -1,15 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio } from "../chunks/index10.js";
-import "react";
 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, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.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/constants24.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";
 const root = "root__4SkBh";
 const fieldset = "fieldset__2OxuS";
 const labelRow = "labelRow__xKUgE";
@@ -21,6 +22,7 @@ const option = "option__hEAm9";
 const control = "control__w6l6-";
 const indicator = "indicator__m9-hW";
 const label = "label__bJi-o";
+const errorMessage = "errorMessage__F6jDK";
 const styles = {
   root,
   fieldset,
@@ -32,7 +34,8 @@ const styles = {
   option,
   control,
   indicator,
-  label
+  label,
+  errorMessage
 };
 const noop = () => {
 };
@@ -49,6 +52,10 @@ function RadioButtonsComponent(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;
@@ -63,12 +70,37 @@ function RadioButtonsComponent(props) {
   const required = props.required ?? defaultValues.required;
   const disabled = props.disabled ?? defaultValues.disabled;
   const isControlled = props.value !== void 0;
-  const selectionProps = isControlled ? { value: props.value } : {
-    defaultValue: firstSelectedByDefault === "first" ? (_a = options[0]) == null ? void 0 : _a.value : void 0
-  };
+  const defaultSelectedValue = firstSelectedByDefault === "first" ? (_a = options[0]) == null ? void 0 : _a.value : void 0;
+  const selectionProps = isControlled ? { value: props.value } : { defaultValue: defaultSelectedValue };
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultSelectedValue);
+  const currentValue = isControlled ? props.value : uncontrolledValue;
+  const intrinsic = required && !disabled && !readOnly && !currentValue ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: handleValidationBlur
+  } = useValidatedField({
+    value: currentValue ?? "",
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const errorId = useId();
   const handleValueChange = (next) => {
+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
     onChange(next);
   };
+  const handleBlur = (event) => {
+    onBlur(event);
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleValidationBlur();
+    }
+  };
   const hasLegend = !!label2;
   const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
@@ -134,11 +166,13 @@ function RadioButtonsComponent(props) {
             disabled,
             readOnly,
             "aria-required": required || void 0,
+            "aria-invalid": isInvalid || void 0,
+            "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
             "aria-label": ariaLabel,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
-            onBlur,
+            onBlur: handleBlur,
             children: options.map((option2, index) => /* @__PURE__ */ jsxs(
               "label",
               {
@@ -154,6 +188,7 @@ function RadioButtonsComponent(props) {
                       value: option2.value,
                       readOnly,
                       disabled: disabled || !!option2.disabled,
+                      "data-invalid": isInvalid || void 0,
                       className: clsx(
                         styles.control,
                         selectors.radio,
@@ -191,6 +226,18 @@ function RadioButtonsComponent(props) {
               option2.value || index
             ))
           }
+        ),
+        isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: errorId,
+            className: clsx(
+              styles.errorMessage,
+              formatClassNames(semanticClassNames.errorMessage)
+            ),
+            "data-testid": TestIds.errorMessage,
+            children: validity.validationMessage
+          }
         )
       ] })
     }

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

@@ -79,6 +79,7 @@ export declare const defaultValues: {
     readonly readOnly: false;
     readonly disabled: false;
 };
+export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const TestIds: {
     readonly root: "radio-buttons-root";
     readonly group: "radio-buttons-group";
@@ -89,6 +90,7 @@ export declare const TestIds: {
     readonly control: "radio-buttons-control";
     readonly indicator: "radio-buttons-indicator";
     readonly optionLabel: "radio-buttons-option-label";
+    readonly errorMessage: "radio-buttons-error-message";
 };
 export declare const selectors: {
     readonly root: "radio-buttons";
@@ -105,4 +107,5 @@ export declare const semanticClassNames: {
     readonly radio: "radio-buttons__radio";
     readonly indicator: "radio-buttons__indicator";
     readonly label: "radio-buttons__label";
+    readonly errorMessage: "radio-buttons__error-message";
 };

package/dist/site/components/RadioButtons/css.css

@@ -160,6 +160,12 @@
 .label__bJi-o {
   cursor: pointer;
   margin-bottom: 0;
+}
+
+.errorMessage__F6jDK {
+  align-self: var(--alignment, flex-start);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: var(--errorTextColor, #e62214);
 }.radio-buttons {
   --radiosSpacing: 6px;
   --labelSpacing: 16px;

package/dist/site/components/RadioButtons/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: "01a3965d-95d7-49e2-903a-3a496de97054",
   type: "wixEditorElements.RadioButtons__DEV__v3",
@@ -119,7 +120,8 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     displayGroups: {
       optionsGroup: {

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

@@ -70,6 +70,7 @@ const defaultValues = {
   readOnly: false,
   disabled: false
 };
+const VALUE_MISSING_MESSAGE = "This field is required";
 const TestIds = {
   root: "radio-buttons-root",
   group: "radio-buttons-group",
@@ -79,7 +80,8 @@ const TestIds = {
   option: "radio-buttons-option",
   control: "radio-buttons-control",
   indicator: "radio-buttons-indicator",
-  optionLabel: "radio-buttons-option-label"
+  optionLabel: "radio-buttons-option-label",
+  errorMessage: "radio-buttons-error-message"
 };
 const selectors = {
   root: "radio-buttons",
@@ -94,11 +96,13 @@ const semanticClassNames = {
   option: "radio-buttons__option",
   radio: "radio-buttons__radio",
   indicator: "radio-buttons__indicator",
-  label: "radio-buttons__label"
+  label: "radio-buttons__label",
+  errorMessage: "radio-buttons__error-message"
 };
 export {
   DesignStates as D,
   TestIds as T,
+  VALUE_MISSING_MESSAGE as V,
   defaultOptions as a,
   semanticClassNames as b,
   DisplayNames as c,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2356.0",
+  "version": "1.2357.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "c933b35458ec28142d198d9bafec750fd29593d7bbe5fcd7f6570b9d"
+  "falconPackageHash": "d4bfc9da268b29efe1ddb1073eee5deb49e827b001018a694cf859ad"
 }