@saas-ui/forms 2.0.0-next.6 → 2.0.0-next.8

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React11 from 'react';
-import React11__default, { createContext, useState, useContext } from 'react';
+import * as React13 from 'react';
+import React13__default, { useState } from 'react';
 import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvider$1, useFieldArray, useWatch, get, Controller } from 'react-hook-form';
 export { Controller, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -7,12 +7,12 @@ import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInput
 import { StepperProvider, ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps } from '@saas-ui/core';
 import { ViewIcon, ViewOffIcon, MinusIcon, PlusIcon } from '@saas-ui/core/icons';
 import { dataAttr, cx, isFunction, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
-import { createContext as createContext$1 } from '@chakra-ui/react-utils';
+import { createContext } from '@chakra-ui/react-utils';
 
 // src/form-context.tsx
-var FormContext = createContext(null);
+var FormContext = React13.createContext(null);
 var useFormContext = () => {
-  const context = useContext(FormContext);
+  const context = React13.useContext(FormContext);
   const hookContext = useFormContext$1();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -127,15 +127,15 @@ var PasswordInput = forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React11.Children.map(children, (child) => {
-    if (React11.isValidElement(child) && child.props.name) {
+  return React13.Children.map(children, (child) => {
+    if (React13.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 React11.cloneElement(child, {
+      return React13.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -174,7 +174,7 @@ var RadioInput = forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
-var [SelectProvider, useSelectContext] = createContext$1({
+var [SelectProvider, useSelectContext] = createContext({
   strict: true
 });
 var useSelect = (props) => {
@@ -195,14 +195,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = useFormControl({ name });
-  const options = React11__default.useMemo(
+  const options = React13__default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React11__default.useCallback(
+  const getDisplayValue = React13__default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -216,7 +216,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React11__default.useMemo(
+  const displayValue = React13__default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -245,6 +245,7 @@ var SelectButton = forwardRef(
       placeholder,
       isDisabled: isSelectDisabled
     } = useSelectContext();
+    const context = useFormControlContext();
     const {
       isInvalid,
       isReadOnly,
@@ -254,7 +255,7 @@ var SelectButton = forwardRef(
       id,
       onBlur,
       onFocus
-    } = useFormControlContext();
+    } = context || {};
     const { rightIcon = /* @__PURE__ */ jsx(ChevronDownIcon, {}), ...rest } = props;
     const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
     const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
@@ -279,7 +280,7 @@ var SelectButton = forwardRef(
       MenuButton,
       {
         as: Button,
-        id,
+        id: id || React13.useId(),
         ...rest,
         onFocus,
         onBlur,
@@ -552,7 +553,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React11__default.createContext(
+var FieldsContext = React13__default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -560,11 +561,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React11__default.useContext(FieldsContext);
+  const context = React13__default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React11.forwardRef(
+var Field = React13.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -591,8 +592,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: cx("sui-form__layout", props.className),
-      children: React11.Children.map(children, (child) => {
-        if (React11.isValidElement(child)) {
+      children: React13.Children.map(children, (child) => {
+        if (React13.isValidElement(child)) {
           return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -601,10 +602,10 @@ var FormLayout = ({ children, ...props }) => {
   );
 };
 FormLayout.displayName = "FormLayout";
-var [ArrayFieldProvider, useArrayFieldContext] = createContext$1({
+var [ArrayFieldProvider, useArrayFieldContext] = createContext({
   name: "ArrayFieldContext"
 });
-var [ArrayFieldRowProvider, useArrayFieldRowContext] = createContext$1({
+var [ArrayFieldRowProvider, useArrayFieldRowContext] = createContext({
   name: "ArrayFieldRowContext"
 });
 var useArrayField = ({
@@ -631,7 +632,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -639,7 +640,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React11.useCallback(() => {
+    remove: React13.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -734,7 +735,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React11.forwardRef(
+var ArrayFieldContainer = React13.forwardRef(
   ({
     name,
     defaultValue,
@@ -751,7 +752,7 @@ var ArrayFieldContainer = React11.forwardRef(
       min,
       max
     });
-    React11.useImperativeHandle(ref, () => context, [ref, context]);
+    React13.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
@@ -791,10 +792,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React11.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React11.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React13.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React13.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -910,8 +911,8 @@ var Form = forwardRef(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React11.useEffect(() => {
+    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React13.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -953,7 +954,7 @@ var Form = forwardRef(
   }
 );
 Form.displayName = "Form";
-var [StepFormProvider, useStepFormContext] = createContext$1({
+var [StepFormProvider, useStepFormContext] = createContext({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
 });
@@ -961,8 +962,8 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React11.useState({});
-  const onSubmitStep = React11.useCallback(
+  const [steps, updateSteps] = React13.useState({});
+  const onSubmitStep = React13.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -983,7 +984,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React11.useCallback(() => {
+  const getFormProps = React13.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -991,7 +992,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React11.useCallback(
+  const updateStep = React13.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1013,7 +1014,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1021,20 +1022,20 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React11.forwardRef(
+var StepForm = React13.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React11.useMemo(() => ctx, [ctx]);
+    const context = React13.useMemo(() => ctx, [ctx]);
     return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(Form, { ref, ...rest, ...getFormProps(), children: runIfFn(children, stepper) }) }) });
   }
 );
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
   const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React11.Children.map(children, (child) => {
-    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React13.Children.map(children, (child) => {
+    if (React13.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx(
         StepperStep,
@@ -1049,7 +1050,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React11.useCallback((i) => {
+  const onChange = React13.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsx(