@wix/form-public 0.96.0 → 0.98.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { initReactI18next } from 'react-i18next';
 import i18next from 'i18next';
 import * as React40 from 'react';
-import React40__default, { createContext, useRef, useMemo, useCallback, useState, useEffect, useLayoutEffect, Children, isValidElement, cloneElement, useContext, useImperativeHandle } from 'react';
+import React40__default, { createContext, useMemo, useRef, useCallback, useState, useEffect, useLayoutEffect, Children, isValidElement, cloneElement, useContext, useImperativeHandle } from 'react';
 import camelCase from 'lodash.camelcase';
 import mapKeys from 'lodash.mapkeys';
 import { jsx } from 'react/jsx-runtime';
@@ -25960,7 +25960,7 @@ function useFieldAttributes2() {
 
 // ../form-fields/dist/esm/ui/form/components/form/input-field.js
 var InputField = (_ref) => {
-  var _field$properties;
+  var _field$properties, _field$properties2;
   let {
     field,
     errors,
@@ -26032,6 +26032,7 @@ var InputField = (_ref) => {
   const FieldComponent = componentsById[field.fieldType];
   const fieldProps = {
     ...field.properties,
+    readOnly: Boolean((_field$properties2 = field.properties) == null ? void 0 : _field$properties2.readOnly),
     onChange: handleChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
@@ -32023,13 +32024,30 @@ RichLabel.Required = Required;
 
 // ../form-fields/dist/esm/ui/checkbox-field/checkbox-field-headless.js
 var Checkbox = (_ref) => {
+  let {
+    children
+  } = _ref;
+  const {
+    id,
+    FieldLayout
+  } = useFieldPropsV2();
+  const checkboxElement = findChildOfType(children, Checkbox.Checkbox);
+  const descriptionElement = findChildOfType(children, Checkbox.Description);
+  const errorElement = findChildOfType(children, Checkbox.Error);
+  return /* @__PURE__ */ React40__default.createElement(FieldLayout, {
+    fieldId: id,
+    renderLabel: () => null,
+    renderInput: () => checkboxElement,
+    renderDescription: () => /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, descriptionElement, errorElement)
+  });
+};
+var CheckboxContainer = (_ref2) => {
   let {
     children,
     className
-  } = _ref;
+  } = _ref2;
   const {
     id,
-    FieldLayout,
     value,
     onChange,
     disabled,
@@ -32046,42 +32064,36 @@ var Checkbox = (_ref) => {
     var _ref$current;
     (_ref$current = ref.current) == null || _ref$current.focus();
   }, id);
-  const labelElement = findChildOfType(children, Checkbox.Label);
-  const inputElement = findChildOfType(children, Checkbox.Input);
-  const descriptionElement = findChildOfType(children, Checkbox.Description);
-  const errorElement = findChildOfType(children, Checkbox.Error);
+  const labelElement = findChildOfType(children, CheckboxContainer.Label);
+  const inputElement = findChildOfType(children, CheckboxContainer.Input);
   const handleChange = useCallback((isSelected) => {
     onChange(isSelected);
   }, [onChange]);
-  return /* @__PURE__ */ React40__default.createElement(FieldLayout, {
-    fieldId: id,
-    renderLabel: () => null,
-    renderInput: () => /* @__PURE__ */ React40__default.createElement(Checkbox$1, {
-      ref,
-      id: inputId,
-      "aria-describedby": ariaDescribedBy,
-      isSelected: Boolean(value),
-      onChange: handleChange,
-      isDisabled: disabled,
-      isRequired: required,
-      onBlur,
-      onFocus,
-      className
-    }, () => /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, inputElement, labelElement)),
-    renderDescription: () => /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, descriptionElement, errorElement)
-  });
+  return /* @__PURE__ */ React40__default.createElement(Checkbox$1, {
+    ref,
+    id: inputId,
+    "aria-describedby": ariaDescribedBy,
+    isSelected: Boolean(value),
+    onChange: handleChange,
+    isDisabled: disabled,
+    isRequired: required,
+    onBlur,
+    onFocus,
+    className
+  }, () => /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, inputElement, labelElement));
 };
-var Input = (_ref2) => {
+var Input = (_ref3) => {
   let {
     className
-  } = _ref2;
+  } = _ref3;
   return /* @__PURE__ */ React40__default.createElement("div", {
     "aria-hidden": "true",
     className
   });
 };
-Checkbox.Label = RichLabel;
-Checkbox.Input = Input;
+CheckboxContainer.Label = RichLabel;
+CheckboxContainer.Input = Input;
+Checkbox.Checkbox = CheckboxContainer;
 Checkbox.Description = Description;
 Checkbox.Error = Error2;
 
@@ -32362,12 +32374,33 @@ var Options = (_ref2) => {
     isOther: true
   }));
 };
-var Option = (_ref3) => {
+var OptionInput = (_ref3) => {
+  let {
+    className
+  } = _ref3;
+  return /* @__PURE__ */ React40__default.createElement("div", {
+    "aria-hidden": "true",
+    className
+  });
+};
+var OptionLabel = (_ref4) => {
+  let {
+    className,
+    ...internal
+  } = _ref4;
+  const {
+    label
+  } = internal;
+  return /* @__PURE__ */ React40__default.createElement("span", {
+    className
+  }, label);
+};
+var Checkbox2 = (_ref5) => {
   let {
     children,
     className,
     ...internal
-  } = _ref3;
+  } = _ref5;
   const {
     value,
     label,
@@ -32382,9 +32415,7 @@ var Option = (_ref3) => {
     disabled,
     hasError,
     options,
-    addOtherLabel,
-    addOtherPlaceholder,
-    otherInputCharacterLimit
+    addOtherLabel
   } = props;
   const checkboxRef = useRef(null);
   useFocusFieldEvent(() => {
@@ -32395,17 +32426,9 @@ var Option = (_ref3) => {
       });
     }
   }, fieldId);
-  const labelElement = findChildOfType(children, Option.Label);
-  const inputElement = findChildOfType(children, Option.Input);
-  const otherInputElement = findChildOfType(children, Option.OtherInput);
+  const labelElement = findChildOfType(children, Checkbox2.Label);
+  const inputElement = findChildOfType(children, Checkbox2.Input);
   const _value = useMemo(() => fieldValue || [], [fieldValue]);
-  const isOtherSelected = useMemo(() => {
-    if (!isOther) {
-      return false;
-    }
-    const optionsValues = getOptionsValues(options || []);
-    return getIsOtherOptionSelected(_value, optionsValues);
-  }, [isOther, _value, options]);
   const actualValue = useMemo(() => {
     if (isOther) {
       return _value.find((val) => val === label || val.startsWith(`${addOtherLabel}: `)) || label;
@@ -32431,6 +32454,49 @@ var Option = (_ref3) => {
     "data-hook": `checkbox-${label}`
   }, inputElement, applyInternalProps(labelElement, {
     label
+  }));
+};
+Checkbox2.Label = OptionLabel;
+Checkbox2.Input = OptionInput;
+var Option = (_ref6) => {
+  let {
+    children,
+    ...internal
+  } = _ref6;
+  const {
+    value,
+    label,
+    isFirst = false,
+    isOther = false,
+    fieldId
+  } = internal;
+  const props = useFieldPropsV2();
+  const {
+    value: fieldValue,
+    onChange,
+    options,
+    addOtherLabel,
+    addOtherPlaceholder,
+    otherInputCharacterLimit,
+    disabled,
+    hasError
+  } = props;
+  const checkboxElement = findChildOfType(children, Checkbox2);
+  const otherInputElement = findChildOfType(children, OtherInput);
+  const _value = useMemo(() => fieldValue || [], [fieldValue]);
+  const isOtherSelected = useMemo(() => {
+    if (!isOther) {
+      return false;
+    }
+    const optionsValues = getOptionsValues(options || []);
+    return getIsOtherOptionSelected(_value, optionsValues);
+  }, [isOther, _value, options]);
+  return /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, applyInternalProps(checkboxElement, {
+    value,
+    label,
+    isFirst,
+    isOther,
+    fieldId
   }), isOther && isOtherSelected && applyInternalProps(otherInputElement, {
     fieldValue: _value,
     onChange,
@@ -32444,32 +32510,11 @@ var Option = (_ref3) => {
     options
   }));
 };
-var OptionInput = (_ref4) => {
-  let {
-    className
-  } = _ref4;
-  return /* @__PURE__ */ React40__default.createElement("div", {
-    "aria-hidden": "true",
-    className
-  });
-};
-var OptionLabel = (_ref5) => {
-  let {
-    className,
-    ...internal
-  } = _ref5;
-  const {
-    label
-  } = internal;
-  return /* @__PURE__ */ React40__default.createElement("span", {
-    className
-  }, label);
-};
-var OtherInput = (_ref6) => {
+var OtherInput = (_ref7) => {
   let {
     className,
     ...internal
-  } = _ref6;
+  } = _ref7;
   const {
     fieldValue,
     onChange,
@@ -32520,8 +32565,7 @@ var OtherInput = (_ref6) => {
 CheckboxGroup.Label = Label;
 CheckboxGroup.Options = Options;
 Options.Option = Option;
-Option.Label = OptionLabel;
-Option.Input = OptionInput;
+Option.Checkbox = Checkbox2;
 Option.OtherInput = OtherInput;
 CheckboxGroup.Description = Description;
 CheckboxGroup.Error = Error2;