@react-fabric/form 1.0.0-beta.9 → 1.0.1

package/dist/cjs/builder/components/SchemaField.js

@@ -0,0 +1,423 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var sortable = require('@dnd-kit/react/sortable');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var Controller = require('../../form/Controller.js');
+var ArrayInput = require('../../input/ArrayInput.js');
+var Checkbox = require('../../input/Checkbox.js');
+var DateInput = require('../../input/DateInput.js');
+var Field = require('../../input/Field.js');
+var Hidden = require('../../input/Hidden.js');
+var Input = require('../../input/Input.js');
+var Number = require('../../input/Number.js');
+var Select = require('../../select/Select.js');
+var schema = require('../../types/schema.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["field"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function SortableItem(_ref) {
+  var id = _ref.id,
+    index = _ref.index,
+    dynamic = _ref.dynamic,
+    children = _ref.children,
+    className = _ref.className;
+  var _useSortable = sortable.useSortable({
+      id: id,
+      index: index,
+      disabled: !dynamic
+    }),
+    ref = _useSortable.ref,
+    handleRef = _useSortable.handleRef,
+    isDragging = _useSortable.isDragging;
+  if (dynamic) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: handleRef,
+        className: utilities.cn("invisible group-hover/field:visible my-2 w-4", isDragging ? "cursor-grabbing bg-default" : "cursor-grab"),
+        style: {
+          backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='4' width='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%238888' /%3E%3C/svg%3E \")"
+        }
+      }), children]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: className,
+    children: children
+  });
+}
+function OptionModal(_ref2) {
+  var field = _ref2.field,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Content, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+        name: "".concat(field, ".options"),
+        onAdd: function onAdd() {
+          return String("");
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {})
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+      flex: true,
+      justify: "end",
+      className: "sticky bottom-0 border-t bg-default px-6 py-2",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        variant: "link",
+        onClick: props.onClose,
+        children: "Close"
+      })
+    })]
+  }));
+}
+function SchemaField(_ref3) {
+  var id = _ref3.id,
+    index = _ref3.index,
+    field = _ref3.field,
+    fieldId = _ref3.fieldId,
+    getModel = _ref3.getModel,
+    onRemove = _ref3.onRemove,
+    _ref3$defaultOpen = _ref3.defaultOpen,
+    defaultOpen = _ref3$defaultOpen === void 0 ? true : _ref3$defaultOpen,
+    _ref3$optionLists = _ref3.optionLists,
+    optionLists = _ref3$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref3$optionLists,
+    dynamic = _ref3.dynamic,
+    onTypeChange = _ref3.onTypeChange,
+    acceptableTypes = _ref3.acceptableTypes;
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multiple = _useState4[0],
+    setMultiple = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasOptions = _useState6[0],
+    setHasOptions = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customOptions = _useState8[0],
+    setCustomOptions = _useState8[1];
+  var _useOverlayService = core.useOverlayService(OptionModal),
+    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
+    renderOptionModal = _useOverlayService2[0],
+    openOptionModal = _useOverlayService2[1];
+  react.useEffect(function () {
+    var tmr = setTimeout(function () {
+      var model = getModel();
+      setType(model.datatype);
+      setMultiple(!!model.multiple);
+      if ("optionList" in model) {
+        setHasOptions(!!model.optionList);
+        setCustomOptions(model.optionList === schema.SCHEMA_CUSTOM_LIST);
+      }
+    }, 10);
+    return function () {
+      clearTimeout(tmr);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+  var handleTypeChange = react.useCallback(function (type) {
+    if (type) {
+      var modelRef = getModel();
+      var reset = {
+        datatype: type,
+        id: id,
+        label: modelRef.label,
+        defaultValue: modelRef.defaultValue,
+        required: modelRef.required,
+        multiple: type === schema.DATA_TYPES.AVATAR ? false : modelRef.multiple,
+        minItems: modelRef.minItems,
+        maxItems: modelRef.maxItems
+      };
+      if (type === schema.DATA_TYPES.STRING) {
+        reset = Object.assign(reset, {
+          optionList: modelRef.optionList,
+          options: modelRef.options,
+          regex: modelRef.regex
+        });
+      } else if (type === schema.DATA_TYPES.DATE) {
+        reset = Object.assign(reset, {
+          min: modelRef.min,
+          max: modelRef.max
+        });
+      } else if (type === schema.DATA_TYPES.NUMBER || type === schema.DATA_TYPES.RANGE) {
+        reset = Object.assign(reset, {
+          min: modelRef.min,
+          max: modelRef.max,
+          step: modelRef.step
+        });
+      }
+      if (type === schema.DATA_TYPES.AVATAR) {
+        setMultiple(false);
+      }
+      onTypeChange(reset);
+      setType(type);
+    }
+  },
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  [id]);
+  return /*#__PURE__*/jsxRuntime.jsx(SortableItem, {
+    id: fieldId,
+    index: index,
+    dynamic: !!dynamic,
+    className: "flex flex-nowrap gap-1 group/field",
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Collapsable, {
+      open: defaultOpen,
+      className: "flex-1",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-nowrap items-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "flex-1 truncate",
+          children: id
+        }), dynamic && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          color: "danger",
+          variant: "link",
+          "aria-label": "Delete",
+          icon: "icon-[mdi--trash-can-outline]",
+          onClick: onRemove,
+          className: "invisible group-hover/field:visible"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-1 pb-4",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".id"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, {
+            hiddenValue: id
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".datatype"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Select.Select, {
+            inline: true,
+            label: "Type",
+            placeholder: "Data type",
+            options: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : utilities.EMPTY_ARRAY,
+            onChange: function onChange(val) {
+              return handleTypeChange(val);
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".label"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+            inline: true,
+            label: "Label",
+            allowClear: true,
+            placeholder: "Label...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-tint-300 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), type === schema.DATA_TYPES.STRING && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".regex"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+              inline: true,
+              label: "Regex validation",
+              allowClear: true,
+              placeholder: "Regex value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+            inline: true,
+            label: "Option list",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+              name: "".concat(field, ".optionList"),
+              children: /*#__PURE__*/jsxRuntime.jsx(Select.Select, {
+                allowClear: true,
+                options: [schema.SCHEMA_CUSTOM_LIST].concat(_toConsumableArray(optionLists)),
+                onChange: function onChange(v) {
+                  return setCustomOptions(v === schema.SCHEMA_CUSTOM_LIST);
+                }
+              })
+            }), customOptions && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+              icon: "icon-[mdi--list-box-outline]",
+              "aria-label": "Custom options",
+              onClick: function onClick() {
+                void openOptionModal({
+                  field: field,
+                  title: "".concat(id, " Options")
+                });
+              }
+            })]
+          }), renderOptionModal()]
+        }), type === schema.DATA_TYPES.FILE && /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".accept"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+              inline: true,
+              label: "Accept types",
+              allowClear: true,
+              placeholder: "Accept value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })
+        }), [schema.DATA_TYPES.NUMBER, schema.DATA_TYPES.RANGE].includes(type) && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".min"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+              inline: true,
+              label: "Min value",
+              allowClear: true,
+              placeholder: "Minimum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".max"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+              inline: true,
+              label: "Max value",
+              allowClear: true,
+              placeholder: "Maximum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".step"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+              inline: true,
+              label: "Step value",
+              allowClear: true,
+              placeholder: "Step value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        }), type === schema.DATA_TYPES.DATE && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Field.Field, {
+            inline: true,
+            label: "Type",
+            plain: true,
+            children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+              name: "".concat(field, ".type"),
+              children: /*#__PURE__*/jsxRuntime.jsxs(core.ToggleButtonGroup, {
+                value: "",
+                fullWidth: true,
+                className: "flex-1",
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                  className: "flex-1",
+                  value: "date",
+                  children: "Date"
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                  className: "flex-1",
+                  value: "datetime",
+                  children: "Date Time"
+                })]
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".min"),
+            children: /*#__PURE__*/jsxRuntime.jsx(DateInput.DateInput, {
+              inline: true,
+              label: "Min value",
+              allowClear: true,
+              placeholder: "Minimum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".max"),
+            children: /*#__PURE__*/jsxRuntime.jsx(DateInput.DateInput, {
+              inline: true,
+              label: "Max value",
+              allowClear: true,
+              placeholder: "Maximum value...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+          label: " ",
+          inline: true,
+          plain: true,
+          children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".required"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+              label: "Required"
+            })
+          }), type !== schema.DATA_TYPES.AVATAR && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".multiple"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+              label: "Multiple",
+              onChange: setMultiple
+            })
+          }), hasOptions && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".allowCustom"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+              label: "Allow custom value"
+            })
+          })]
+        }), multiple && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".minItems"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+              inline: true,
+              label: "Min items",
+              allowClear: true,
+              placeholder: "Minimum items...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none",
+                children: "OPTIONAL"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".maxItems"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+              inline: true,
+              label: "Max items",
+              allowClear: true,
+              placeholder: "Maximum items...",
+              decorateEndShowWhenEmpty: true,
+              decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        })]
+      })]
+    }, fieldId)
+  });
+}
+
+exports.SchemaField = SchemaField;

package/dist/cjs/form/Controller.js

@@ -9,29 +9,75 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["name", "children"],
   _excluded2 = ["ref", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Controller = function Controller(_ref) {
-  var name = _ref.name,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * This component is used to wrap form controls
+ * and provide them with the necessary props and state management.
+ *
+ * It uses the `Controller` component from `react-hook-form`
+ * to manage the form state and validation.
+ *
+ * It accepts a `name` prop to identify the form control,
+ * and a `children` prop which can either be a React element
+ * or a function that receives the necessary props to render the control.
+ *
+ * The component will pass down the following props to the child:
+ * - `name`: the name of the form control
+ * - `error`: any validation error message
+ * - `checked`: whether the control is checked (for checkboxes/radios)
+ * - `value`: the current value of the control
+ * - `invalid`: whether the control is invalid
+ * - `readOnly`: whether the control is read-only (disabled during submission)
+ * - `disabled`: whether the control is disabled
+ * - `onBlur`: function to call when the control loses focus
+ * - `onChange`: function to call when the control value changes
+ * - `ref`: a ref to the control element
+ * * The component also handles the `ref` prop to ensure that it is passed correctly
+ * to the child component, allowing for proper focus management and DOM access.
+ *
+ * @example
+ * ```jsx
+ * <Controller
+ *   name="username"
+ *   children={({ name, error, checked, value, invalid, readOnly, onChange }) => (
+ *     <input
+ *       type="text"
+ *       name={name}
+ *       onChange={onChange}
+ *       readOnly={readOnly}
+ *       aria-invalid={invalid}
+ *       value={value}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+function Controller(props) {
+  var name = props.name,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
   if (!name) throw Error("Form Controller missing `name` prop");
   return /*#__PURE__*/jsxRuntime.jsx(reactHookForm.Controller, {
     name: name,
-    render: function render(_ref2) {
+    render: function render(_ref) {
       var _error$message;
-      var _ref2$field = _ref2.field,
-        _ref3 = _ref2$field.ref,
-        _onChange = _ref2$field.onChange,
-        field = _objectWithoutProperties(_ref2$field, _excluded2),
-        error = _ref2.fieldState.error,
-        isSubmitting = _ref2.formState.isSubmitting;
-      return /*#__PURE__*/react.isValidElement(children) ? /*#__PURE__*/react.cloneElement(react.Children.only(children), _objectSpread(_objectSpread(_objectSpread({}, field), rest), {}, {
+      var _ref$field = _ref.field,
+        _ref2 = _ref$field.ref,
+        _onChange = _ref$field.onChange,
+        field = _objectWithoutProperties(_ref$field, _excluded2),
+        error = _ref.fieldState.error,
+        isSubmitting = _ref.formState.isSubmitting;
+      return /*#__PURE__*/react.isValidElement(children) ?
+      /*#__PURE__*/
+      // eslint-disable-next-line @eslint-react/no-children-only
+      react.cloneElement(react.Children.only(children), _objectSpread(_objectSpread(_objectSpread({}, field), rest), {}, {
         ref: function ref(el) {
-          el && _ref3(el);
+          if (el) _ref2(el);
           try {
-            var _children$props$ref;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             if (children.props.ref && "current" in children.props.ref) children.props.ref.current = el;
-            if ((_children$props$ref = children.props.ref) !== null && _children$props$ref !== void 0 && _children$props$ref.prototype) children.props.ref(el);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            if (typeof children.props.ref === "function") children.props.ref(el);
           } catch (_) {
             //
           }
@@ -43,11 +89,12 @@ var Controller = function Controller(_ref) {
         onChange: function onChange(v) {
           var _children$props$onCha, _children$props;
           _onChange(v);
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           (_children$props$onCha = (_children$props = children.props).onChange) === null || _children$props$onCha === void 0 || _children$props$onCha.call(_children$props, v);
         }
       })) : children(_objectSpread(_objectSpread(_objectSpread({}, field), rest), {}, {
-        inputRef: function inputRef(el) {
-          el && _ref3(el);
+        ref: function ref(el) {
+          if (el) _ref2(el);
         },
         readOnly: isSubmitting,
         invalid: !!(error !== null && error !== void 0 && error.message),
@@ -59,6 +106,6 @@ var Controller = function Controller(_ref) {
       }));
     }
   });
-};
+}
 
 exports.Controller = Controller;