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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @saas-ui/forms
 
+## 2.0.0-next.8
+
+### Patch Changes
+
+- 6d3f5717: Fix React import
+
+## 2.0.0-next.7
+
+### Patch Changes
+
+- Updated dependencies [7052dad3]
+  - @saas-ui/core@2.0.0-next.6
+
 ## 2.0.0-next.6
 
 ### Major Changes

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React13 = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
@@ -27,12 +27,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
 
 // src/form-context.tsx
-var FormContext = React11.createContext(null);
+var FormContext = React13__namespace.createContext(null);
 var useFormContext = () => {
-  const context = React11.useContext(FormContext);
+  const context = React13__namespace.useContext(FormContext);
   const hookContext = reactHookForm.useFormContext();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
@@ -108,7 +108,7 @@ var PasswordInput = react.forwardRef(
       leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = React11.useState(false);
+    const [show, setShow] = React13.useState(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
@@ -147,15 +147,15 @@ var PasswordInput = react.forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React11__namespace.Children.map(children, (child) => {
-    if (React11__namespace.isValidElement(child) && child.props.name) {
+  return React13__namespace.Children.map(children, (child) => {
+    if (React13__namespace.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__namespace.cloneElement(child, {
+      return React13__namespace.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -215,14 +215,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = react.useFormControl({ name });
-  const options = React11__namespace.default.useMemo(
+  const options = React13__namespace.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React11__namespace.default.useCallback(
+  const getDisplayValue = React13__namespace.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -236,7 +236,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React11__namespace.default.useMemo(
+  const displayValue = React13__namespace.default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -265,6 +265,7 @@ var SelectButton = react.forwardRef(
       placeholder,
       isDisabled: isSelectDisabled
     } = useSelectContext();
+    const context = react.useFormControlContext();
     const {
       isInvalid,
       isReadOnly,
@@ -274,7 +275,7 @@ var SelectButton = react.forwardRef(
       id,
       onBlur,
       onFocus
-    } = react.useFormControlContext();
+    } = context || {};
     const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
     const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
     const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
@@ -299,7 +300,7 @@ var SelectButton = react.forwardRef(
       react.MenuButton,
       {
         as: react.Button,
-        id,
+        id: id || React13__namespace.useId(),
         ...rest,
         onFocus,
         onBlur,
@@ -572,7 +573,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React11__namespace.default.createContext(
+var FieldsContext = React13__namespace.default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -580,11 +581,11 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React11__namespace.default.useContext(FieldsContext);
+  const context = React13__namespace.default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React11__namespace.forwardRef(
+var Field = React13__namespace.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -611,8 +612,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: utils.cx("sui-form__layout", props.className),
-      children: React11__namespace.Children.map(children, (child) => {
-        if (React11__namespace.isValidElement(child)) {
+      children: React13__namespace.Children.map(children, (child) => {
+        if (React13__namespace.isValidElement(child)) {
           return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -651,7 +652,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React11__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -659,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React11__namespace.useCallback(() => {
+    remove: React13__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -754,7 +755,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React11__namespace.forwardRef(
+var ArrayFieldContainer = React13__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -771,7 +772,7 @@ var ArrayFieldContainer = React11__namespace.forwardRef(
       min,
       max
     });
-    React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
@@ -811,10 +812,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React11__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React13__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React13__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React11__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -930,8 +931,8 @@ var Form = react.forwardRef(
     };
     const methods = reactHookForm.useForm(form);
     const { handleSubmit } = methods;
-    React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React11__namespace.useEffect(() => {
+    React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React13__namespace.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -981,8 +982,8 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = core.useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React11__namespace.useState({});
-  const onSubmitStep = React11__namespace.useCallback(
+  const [steps, updateSteps] = React13__namespace.useState({});
+  const onSubmitStep = React13__namespace.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -1003,7 +1004,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React11__namespace.useCallback(() => {
+  const getFormProps = React13__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1011,7 +1012,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React11__namespace.useCallback(
+  const updateStep = React13__namespace.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1033,7 +1034,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React11__namespace.useEffect(() => {
+  React13__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1041,20 +1042,20 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React11__namespace.forwardRef(
+var StepForm = React13__namespace.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React11__namespace.useMemo(() => ctx, [ctx]);
+    const context = React13__namespace.useMemo(() => ctx, [ctx]);
     return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, stepper) }) }) });
   }
 );
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = core.useStepperContext();
   const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React11__namespace.Children.map(children, (child) => {
-    if (React11__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React13__namespace.Children.map(children, (child) => {
+    if (React13__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
         core.StepperStep,
@@ -1069,7 +1070,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React11__namespace.useCallback((i) => {
+  const onChange = React13__namespace.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(