@saas-ui/forms 3.0.0-next.0 → 3.0.0-next.10

package/dist/index.mjs

@@ -12,13 +12,14 @@ import {
   createListCollection
 } from "@chakra-ui/react";
 import { Checkbox } from "@saas-ui/react/checkbox";
-import { InputGroup } from "@saas-ui/react/input-group";
+import { InputGroup } from "@saas-ui/react/input";
 import { NumberInput } from "@saas-ui/react/number-input";
 import {
   PasswordInput
 } from "@saas-ui/react/password-input";
 import { PinInput } from "@saas-ui/react/pin-input";
-import { Radio, RadioGroup } from "@saas-ui/react/radio";
+import { Radio } from "@saas-ui/react/radio";
+import { RadioGroup } from "@saas-ui/react/radio-group";
 import { Select } from "@saas-ui/react/select";
 import { Switch } from "@saas-ui/react/switch";
 
@@ -51,10 +52,9 @@ var useFormContext = () => {
   };
 };
 var useFieldProps = (name) => {
-  var _a;
-  const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
+  const parsedName = name?.replace(/\.[0-9]/g, ".$");
   const context = useFormContext();
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName]) || {};
+  return context?.fields?.[parsedName] || {};
 };
 var FormProvider = (props) => {
   const { children, fieldResolver, schema, fields, ...rest } = props;
@@ -100,8 +100,8 @@ var BaseField = (props) => {
       /* @__PURE__ */ jsx2(Field.RequiredIndicator, {})
     ] }) : null,
     props.children,
-    help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
-    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx2(Field.ErrorText, { children: error == null ? void 0 : error.message })
+    help && !error?.message ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
+    error?.message && /* @__PURE__ */ jsx2(Field.ErrorText, { children: error?.message })
   ] });
 };
 BaseField.displayName = "BaseField";
@@ -117,23 +117,21 @@ var useFieldsContext = () => {
   return React2.useContext(FieldsContext);
 };
 var useField = (type, fallback) => {
-  var _a;
   const context = React2.useContext(FieldsContext);
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || fallback;
+  return context?.fields?.[type] || fallback;
 };
 
 // src/create-field.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field3 = forwardRef((props, ref) => {
-    var _a;
     const { id, label, required, rules } = props;
     const inputRules = {
       required,
       ...rules
     };
     const fieldContext = useFieldsContext();
-    const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
+    const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp;
     const { props: extraProps, Component } = React3.useMemo(
       () => getBaseField(),
       [getBaseField]
@@ -209,16 +207,15 @@ var withUncontrolledInput = (InputComponent) => {
   );
 };
 var createField = (component, options) => {
-  var _a;
   let InputComponent;
-  if (options == null ? void 0 : options.isControlled) {
+  if (options?.isControlled) {
     InputComponent = withControlledInput(forwardRef(component));
   } else {
     InputComponent = withUncontrolledInput(forwardRef(component));
   }
   const Field3 = _createField(InputComponent, {
-    displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
-    hideLabel: options == null ? void 0 : options.hideLabel,
+    displayName: `${component.displayName ?? "Custom"}Field`,
+    hideLabel: options?.hideLabel,
     getBaseField: () => ({
       props: [],
       Component: BaseField
@@ -274,7 +271,7 @@ var SelectField = createField(
       }),
       [options]
     );
-    const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
+    const value = multiple ? [...valueProp ?? []] : valueProp ? [valueProp] : [];
     return /* @__PURE__ */ jsxs2(
       Select.Root,
       {
@@ -309,11 +306,11 @@ var RadioField = createField(
   (props, ref) => {
     const { options, onChange, flexDirection = "column", gap, ...rest } = props;
     return /* @__PURE__ */ jsx5(
-      RadioGroup,
+      RadioGroup.Root,
       {
         ref,
         onValueChange: ({ value }) => {
-          onChange == null ? void 0 : onChange(value);
+          onChange?.(value);
         },
         ...rest,
         children: /* @__PURE__ */ jsx5(Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ jsx5(Radio, { value: option.value, children: option.label || option.value }, option.value)) })
@@ -327,7 +324,7 @@ var RadioField = createField(
 var PinField = createField(
   (props, ref) => {
     const { pinType, value: valueProp, onChange, ...inputProps } = props;
-    const value = (valueProp == null ? void 0 : valueProp.split("")) || [];
+    const value = valueProp?.split("") || [];
     return /* @__PURE__ */ jsx5(
       PinInput,
       {
@@ -377,10 +374,9 @@ var objectFieldResolver = (schema) => {
     return mapFields(schema);
   };
   const getNestedFields = (name) => {
-    var _a;
     const field = get2(schema, name);
     if (!field) return [];
-    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+    if (field.items?.type === "object") {
       return mapFields(field.items.properties);
     } else if (field.type === "object") {
       return mapFields(field.properties);
@@ -512,15 +508,19 @@ var useArrayFieldAddButton = () => {
 import * as React6 from "react";
 var mapNestedFields = (name, children) => {
   return React6.Children.map(children, (child) => {
-    if (React6.isValidElement(child) && child.props.name) {
-      let childName = child.props.name;
+    if (React6.isValidElement(child)) {
+      const props = child.props;
+      if (!props.name) {
+        return child;
+      }
+      let childName = props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
       return React6.cloneElement(child, {
-        ...child.props,
+        ...props,
         name: `${name}.${childName}`
       });
     }
@@ -615,8 +615,8 @@ var ArrayFieldContainer = React7.forwardRef(
       name,
       defaultValue,
       keyName,
-      min: min || (overrides == null ? void 0 : overrides.min),
-      max: max || (overrides == null ? void 0 : overrides.max)
+      min: min || overrides?.min,
+      max: max || overrides?.max
     });
     React7.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx7(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx7(BaseField, { name, ...fieldProps, ...overrides, children }) });
@@ -655,7 +655,7 @@ var DisplayIf = ({
     }
     if (matchesRef.current === matches) return;
     matchesRef.current = matches;
-    onToggle == null ? void 0 : onToggle(matches, context);
+    onToggle?.(matches, context);
   }, [value]);
   return matches ? children : null;
 };
@@ -669,7 +669,7 @@ var Field2 = React9.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
-    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type, InputField);
+    const InputComponent = useField(overrides?.type || type, InputField);
     return /* @__PURE__ */ jsx8(InputComponent, { ref, ...props, ...overrides });
   }
 );
@@ -706,8 +706,7 @@ ObjectField.displayName = "ObjectField";
 // src/fields.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var mapNestedFields2 = (resolver, name) => {
-  var _a;
-  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
+  return resolver.getNestedFields(name)?.map(
     ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsx10(
       Field2,
       {
@@ -729,18 +728,17 @@ var AutoFields = ({
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
   const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const fields = React10.useMemo(() => resolver?.getFields(), [resolver]);
   const form = useFormContext();
   React10.useEffect(() => {
-    var _a;
-    if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
+    if (focusFirstField && fields?.[0]?.name) {
       form.setFocus(fields[0].name);
     }
   }, [schema, fieldResolver, focusFirstField]);
   if (!resolver) {
     return null;
   }
-  return /* @__PURE__ */ jsx10(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
+  return /* @__PURE__ */ jsx10(FormLayout, { ...props, children: fields?.map(
     ({ name, type, ...fieldProps }) => {
       if (type === "array") {
         return /* @__PURE__ */ jsx10(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
@@ -785,8 +783,8 @@ var SubmitButton = forwardRef5(
       disableIfInvalid: disableIfInvalidOverride,
       ...fieldProps
     } = field;
-    const disableIfUntouched = disableIfUntouchedOverride != null ? disableIfUntouchedOverride : disableIfUntouchedProp;
-    const disableIfInvalid = disableIfInvalidOverride != null ? disableIfInvalidOverride : disableIfInvalidProp;
+    const disableIfUntouched = disableIfUntouchedOverride ?? disableIfUntouchedProp;
+    const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp;
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || disabledProp;
     return /* @__PURE__ */ jsx11(
       Button2,
@@ -855,13 +853,13 @@ var Form = forwardRef6(
       if (onChange) {
         subscription = methods.watch(onChange);
       }
-      return () => subscription == null ? void 0 : subscription.unsubscribe();
+      return () => subscription?.unsubscribe();
     }, [methods, onChange]);
     let _children = children;
     if (!_children && fieldResolver) {
       _children = /* @__PURE__ */ jsxs5(FormLayout, { children: [
         /* @__PURE__ */ jsx12(AutoFields, {}),
-        /* @__PURE__ */ jsx12(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+        /* @__PURE__ */ jsx12(SubmitButton, { ...fields?.submit })
       ] });
     }
     return /* @__PURE__ */ jsx12(
@@ -920,8 +918,8 @@ function createForm({
         Form,
         {
           ref,
-          resolver: resolverProp != null ? resolverProp : resolver == null ? void 0 : resolver(props.schema),
-          fieldResolver: fieldResolverProp != null ? fieldResolverProp : fieldResolver == null ? void 0 : fieldResolver(schema),
+          resolver: resolverProp ?? resolver?.(props.schema),
+          fieldResolver: fieldResolverProp ?? fieldResolver?.(schema),
           ...rest
         }
       ) });