@saas-ui/forms 3.0.0-alpha.2 → 3.0.0-alpha.20

package/dist/index.js

@@ -82,10 +82,11 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/create-form.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/default-fields.tsx
-var import_react4 = require("@chakra-ui/react");
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
 var import_checkbox = require("@saas-ui/react/checkbox");
 var import_input_group = require("@saas-ui/react/input-group");
 var import_number_input = require("@saas-ui/react/number-input");
@@ -138,35 +139,38 @@ var isTouched = (name, formState) => {
   return (0, import_react_hook_form2.get)(formState.touchedFields, name);
 };
 var useBaseField = (props) => {
-  const [fieldProps] = (0, import_utils.splitProps)(props, ["name", "label", "help", "hideLabel"]);
-  const [controlProps] = (0, import_utils.splitProps)(props, [
-    // 'id',
-    // 'orientation',
-    // 'disabled',
-    // 'invalid',
-    // 'readOnly',
-    // 'required',
+  const [fieldProps, rootProps] = (0, import_utils.splitProps)(props, [
+    "name",
+    "label",
+    "help",
+    "hideLabel",
+    "placeholder",
+    "rules",
+    "type",
+    "children"
   ]);
   const { formState } = useFormContext();
   const error = getError(fieldProps.name, formState);
   const touched = isTouched(fieldProps.name, formState);
   return {
     ...fieldProps,
-    controlProps,
+    rootProps,
     error,
     touched
   };
 };
 var BaseField = (props) => {
-  const { label, help, hideLabel, error } = useBaseField(props);
+  const { rootProps, label, hideLabel, help, error } = useBaseField(props);
   const isInvalid = !!error;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Root, { invalid: isInvalid, ...props, children: [
-    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.Label, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Box, { width: "full", children: [
-      props.children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.ErrorText, { children: error == null ? void 0 : error.message })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Root, { invalid: isInvalid, ...rootProps, children: [
+    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Label, { children: [
+      label,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.RequiredIndicator, {})
+    ] }) : null,
+    props.children,
+    help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.ErrorText, { children: error == null ? void 0 : error.message })
   ] });
 };
 BaseField.displayName = "BaseField";
@@ -192,37 +196,34 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field3 = (0, import_react3.forwardRef)((props, ref) => {
     var _a;
-    const { id, name, label, isRequired, rules } = props;
+    const { id, label, required, rules } = props;
     const inputRules = {
-      required: isRequired,
+      required,
       ...rules
     };
     const fieldContext = useFieldsContext();
     const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
-    const { extraProps, BaseField: BaseField2 } = import_react3.default.useMemo(
+    const { props: extraProps, Component } = import_react3.default.useMemo(
       () => getBaseField(),
       [getBaseField]
     );
-    const [, inputProps] = (0, import_utils2.splitProps)(
+    const rootProps = {
+      name: props.name,
+      label: props.label,
+      disabled: props.disabled,
+      invalid: props.invalid,
+      readOnly: props.readOnly,
+      required: props.required
+    };
+    const [baseFieldProps, inputProps] = (0, import_utils2.splitProps)(
       props,
-      [
-        "children",
-        "name",
-        "label",
-        "required",
-        "disabled",
-        "invalid",
-        "readOnly",
-        "help",
-        "hideLabel"
-      ].concat(extraProps)
+      ["orientation", "help", "hideLabel"].concat(extraProps)
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BaseField2, { name, hideLabel, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       InputComponent,
       {
         ref,
         id,
-        name,
         label: hideLabel ? label : void 0,
         ...inputProps,
         rules: inputRules
@@ -288,8 +289,8 @@ var createField = (component, options) => {
     displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
     getBaseField: () => ({
-      extraProps: [],
-      BaseField
+      props: [],
+      Component: BaseField
     })
   });
   return Field3;
@@ -299,14 +300,22 @@ var createField = (component, options) => {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputField = createField(
   ({ type = "text", startElement, endElement, size, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_input_group.InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Input, { type, size, ...rest, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_input_group.InputGroup,
+      {
+        startElement,
+        endElement,
+        width: "full",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Input, { type, size, ...rest, ref })
+      }
+    );
   }
 );
 var NumberInputField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_number_input.NumberInput, { ...props, ref }), {
   isControlled: true
 });
 var PasswordInputField = createField(({ type = "password", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_password_input.PasswordInput, { ref, ...props }));
-var TextareaField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Textarea, { ...props, ref }));
+var TextareaField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Textarea, { ...props, ref }));
 var SwitchField = createField(
   ({ type, value, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_switch.Switch, { checked: !!value, ...rest, ref });
@@ -323,22 +332,28 @@ var SelectField = createField(
       options,
       placeholder,
       onChange,
-      onValueChange,
       onBlur,
+      multiple = false,
+      value: valueProp,
       ...rest
     } = props;
-    const collection = (0, import_react4.createListCollection)({
-      items: options
-    });
+    const collection = (0, import_react4.useMemo)(
+      () => (0, import_react5.createListCollection)({
+        items: options
+      }),
+      [options]
+    );
+    const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_select.Select.Root,
       {
         ref,
         collection,
         onValueChange: (details) => {
-          onChange(details.value);
+          onChange(multiple ? details.value : details.value[0]);
         },
         onInteractOutside: () => onBlur(),
+        value,
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select.Select.Trigger, { ...triggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select.Select.ValueText, { placeholder }) }),
@@ -370,7 +385,7 @@ var RadioField = createField(
           onChange == null ? void 0 : onChange(value);
         },
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radio.Radio, { value: option.value, children: option.label || option.value }, option.value)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radio.Radio, { value: option.value, children: option.label || option.value }, option.value)) })
       }
     );
   },
@@ -445,37 +460,37 @@ var objectFieldResolver = (schema) => {
 };
 
 // src/form.tsx
-var import_react11 = __toESM(require("react"));
-var import_react12 = require("@chakra-ui/react");
+var import_react12 = __toESM(require("react"));
+var import_react13 = require("@chakra-ui/react");
 var import_utils9 = require("@saas-ui/core/utils");
 var import_react_hook_form7 = require("react-hook-form");
 
 // src/array-field.tsx
-var import_react7 = __toESM(require("react"));
-var import_react8 = require("@chakra-ui/react");
+var import_react8 = __toESM(require("react"));
+var import_react9 = require("@chakra-ui/react");
 var import_icons = require("@saas-ui/react/icons");
 
 // src/form-layout.tsx
-var import_react5 = require("react");
-var import_react6 = require("@chakra-ui/react");
+var import_react6 = require("react");
+var import_react7 = require("@chakra-ui/react");
 var import_utils4 = require("@saas-ui/core/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormLayout = (0, import_react5.forwardRef)(
-  ({ children, rowGap = 4, ...props }, ref) => {
-    const recipe = (0, import_react6.useRecipe)({
-      key: "formLayout"
+var FormLayout = (0, import_react6.forwardRef)(
+  ({ children, gap = 4, ...props }, ref) => {
+    const recipe = (0, import_react7.useRecipe)({
+      key: "suiFormLayout"
     });
     const [variantProps, gridProps] = recipe.splitVariantProps(props);
     const styles = recipe(variantProps);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react6.SimpleGrid,
+      import_react7.SimpleGrid,
       {
         ref,
         ...gridProps,
         className: (0, import_utils4.cx)("sui-form-layout", props.className),
         css: [
           {
-            rowGap
+            gap
           },
           styles,
           props.css
@@ -488,7 +503,7 @@ var FormLayout = (0, import_react5.forwardRef)(
 FormLayout.displayName = "FormLayout";
 
 // src/use-array-field.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_utils5 = require("@saas-ui/core/utils");
 var import_react_hook_form4 = require("react-hook-form");
 var [ArrayFieldProvider, useArrayFieldContext] = (0, import_utils5.createContext)({
@@ -521,7 +536,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -529,7 +544,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React4.useCallback(() => {
+    remove: React5.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -556,17 +571,17 @@ var useArrayFieldAddButton = () => {
 };
 
 // src/utils.ts
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var mapNestedFields = (name, children) => {
-  return React5.Children.map(children, (child) => {
-    if (React5.isValidElement(child) && child.props.name) {
+  return React6.Children.map(children, (child) => {
+    if (React6.isValidElement(child) && child.props.name) {
       let childName = child.props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
-      return React5.cloneElement(child, {
+      return React6.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -609,16 +624,16 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.chakra.div, { ...rest, css: styles, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.chakra.div, { ...rest, css: styles, children }) });
 };
 ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.MinusIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.MinusIcon, {}) });
 };
 ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react8.Button,
+    import_react9.Button,
     {
       "aria-label": "Add row",
       float: "right",
@@ -629,7 +644,7 @@ var ArrayFieldAddButton = (props) => {
   );
 };
 ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
-var ArrayField = (0, import_react7.forwardRef)(
+var ArrayField = (0, import_react8.forwardRef)(
   (props, ref) => {
     const { children, ...containerProps } = props;
     const rowFn = typeof children === "function" ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRow, { index, children }, id)) || null });
@@ -647,7 +662,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = import_react7.default.forwardRef(
+var ArrayFieldContainer = import_react8.default.forwardRef(
   ({
     name,
     defaultValue,
@@ -665,14 +680,14 @@ var ArrayFieldContainer = import_react7.default.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    import_react7.default.useImperativeHandle(ref, () => context, [ref, context]);
+    import_react8.default.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
 
 // src/display-if.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_react_hook_form5 = require("react-hook-form");
 var DisplayIf = ({
   children,
@@ -683,8 +698,8 @@ var DisplayIf = ({
   condition = (value) => !!value,
   onToggle
 }) => {
-  const initializedRef = React7.useRef(false);
-  const matchesRef = React7.useRef(false);
+  const initializedRef = React8.useRef(false);
+  const matchesRef = React8.useRef(false);
   const value = (0, import_react_hook_form5.useWatch)({
     name,
     defaultValue,
@@ -693,7 +708,7 @@ var DisplayIf = ({
   });
   const context = useFormContext();
   const matches = condition(value, context);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!initializedRef.current) {
       initializedRef.current = true;
       return;
@@ -707,10 +722,10 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/field.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultInputType = "text";
-var Field2 = React8.forwardRef(
+var Field2 = React9.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -720,14 +735,14 @@ var Field2 = React8.forwardRef(
 );
 
 // src/fields.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/object-field.tsx
-var import_react9 = require("@chakra-ui/react");
+var import_react10 = require("@chakra-ui/react");
 var import_utils7 = require("@saas-ui/core/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormLegend = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react9.Field.Label, { as: "legend", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react10.Field.Label, { as: "legend", ...props });
 };
 var ObjectField = (props) => {
   const {
@@ -741,7 +756,7 @@ var ObjectField = (props) => {
   } = props;
   const { hideLabel, columns, gap, ...overrides } = useFieldProps(name);
   const hidden = hideLabelProp || hideLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react9.Field.Root, { as: "fieldset", ...fieldProps, ...overrides, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react10.Field.Root, { as: "fieldset", ...fieldProps, ...overrides, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLegend, { "data-hidden": (0, import_utils7.dataAttr)(hidden), children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLayout, { columns: columnsProp || columns, gridGap: gapProp || gap, children: mapNestedFields(name, children) })
   ] });
@@ -773,10 +788,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React9.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React9.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -807,11 +822,11 @@ var AutoFields = ({
 AutoFields.displayName = "Fields";
 
 // src/submit-button.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_button = require("@saas-ui/react/button");
 var import_react_hook_form6 = require("react-hook-form");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var SubmitButton = (0, import_react10.forwardRef)(
+var SubmitButton = (0, import_react11.forwardRef)(
   (props, ref) => {
     const {
       variant = "glass",
@@ -853,7 +868,7 @@ SubmitButton.displayName = "SubmitButton";
 
 // src/form.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Form = (0, import_react11.forwardRef)(
+var Form = (0, import_react12.forwardRef)(
   (props, ref) => {
     const {
       mode = "all",
@@ -894,8 +909,8 @@ var Form = (0, import_react11.forwardRef)(
     };
     const methods = (0, import_react_hook_form7.useForm)(form);
     const { handleSubmit } = methods;
-    import_react11.default.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    import_react11.default.useEffect(() => {
+    import_react12.default.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    import_react12.default.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -917,7 +932,7 @@ var Form = (0, import_react11.forwardRef)(
         fieldResolver,
         fields,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react12.chakra.form,
+          import_react13.chakra.form,
           {
             ref,
             onSubmit: handleSubmit(onSubmit, onError),
@@ -946,7 +961,7 @@ function createForm({
   fields,
   getBaseField
 } = {}) {
-  const DefaultForm = (0, import_react13.forwardRef)(
+  const DefaultForm = (0, import_react14.forwardRef)(
     (props, ref) => {
       const {
         schema,
@@ -954,7 +969,7 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      const fieldsContext = (0, import_react13.useMemo)(
+      const fieldsContext = (0, import_react14.useMemo)(
         () => ({
           fields: { ...defaultFieldTypes, ...fields },
           getBaseField
@@ -978,16 +993,16 @@ function createForm({
 }
 
 // src/display-field.tsx
-var import_react14 = require("@chakra-ui/react");
+var import_react15 = require("@chakra-ui/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DisplayField = ({
   name,
   label,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.Field.Root, { ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Field.Label, { htmlFor: name, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormValue, { name }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react15.Field.Root, { ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Field.Label, { htmlFor: name, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormValue, { name }) })
   ] });
 };
 DisplayField.displayName = "DisplayField";