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

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @saas-ui/forms
2
2
 
3
+ ## 2.0.0-next.8
4
+
5
+ ### Patch Changes
6
+
7
+ - 6d3f5717: Fix React import
8
+
3
9
  ## 2.0.0-next.7
4
10
 
5
11
  ### Patch Changes
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var React12 = require('react');
3
+ var React13 = require('react');
4
4
  var reactHookForm = require('react-hook-form');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('@chakra-ui/react');
@@ -27,12 +27,12 @@ function _interopNamespace(e) {
27
27
  return Object.freeze(n);
28
28
  }
29
29
 
30
- var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
30
+ var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
31
31
 
32
32
  // src/form-context.tsx
33
- var FormContext = React12.createContext(null);
33
+ var FormContext = React13__namespace.createContext(null);
34
34
  var useFormContext = () => {
35
- const context = React12.useContext(FormContext);
35
+ const context = React13__namespace.useContext(FormContext);
36
36
  const hookContext = reactHookForm.useFormContext();
37
37
  if (!context) {
38
38
  throw new Error("FormProvider must be used within a Form component");
@@ -108,7 +108,7 @@ var PasswordInput = react.forwardRef(
108
108
  leftAddon,
109
109
  ...inputProps
110
110
  } = props;
111
- const [show, setShow] = React12.useState(false);
111
+ const [show, setShow] = React13.useState(false);
112
112
  const handleClick = () => setShow(!show);
113
113
  const label = show ? "Hide password" : "Show password";
114
114
  let icon;
@@ -147,15 +147,15 @@ var PasswordInput = react.forwardRef(
147
147
  );
148
148
  PasswordInput.displayName = "PasswordInput";
149
149
  var mapNestedFields = (name, children) => {
150
- return React12__namespace.Children.map(children, (child) => {
151
- if (React12__namespace.isValidElement(child) && child.props.name) {
150
+ return React13__namespace.Children.map(children, (child) => {
151
+ if (React13__namespace.isValidElement(child) && child.props.name) {
152
152
  let childName = child.props.name;
153
153
  if (childName.includes(".")) {
154
154
  childName = childName.replace(/^.*\.(.*)/, "$1");
155
155
  } else if (childName.includes(".$")) {
156
156
  childName = childName.replace(/^.*\.\$(.*)/, "$1");
157
157
  }
158
- return React12__namespace.cloneElement(child, {
158
+ return React13__namespace.cloneElement(child, {
159
159
  ...child.props,
160
160
  name: `${name}.${childName}`
161
161
  });
@@ -215,14 +215,14 @@ var useSelect = (props) => {
215
215
  onChange
216
216
  });
217
217
  const controlProps = react.useFormControl({ name });
218
- const options = React12__namespace.default.useMemo(
218
+ const options = React13__namespace.default.useMemo(
219
219
  () => optionsProp && mapOptions(optionsProp),
220
220
  [optionsProp]
221
221
  );
222
222
  const handleChange = (value2) => {
223
223
  setCurrentValue(value2);
224
224
  };
225
- const getDisplayValue = React12__namespace.default.useCallback(
225
+ const getDisplayValue = React13__namespace.default.useCallback(
226
226
  (value2) => {
227
227
  if (!options) {
228
228
  return value2;
@@ -236,7 +236,7 @@ var useSelect = (props) => {
236
236
  },
237
237
  [options]
238
238
  );
239
- const displayValue = React12__namespace.default.useMemo(
239
+ const displayValue = React13__namespace.default.useMemo(
240
240
  () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
241
241
  getDisplayValue
242
242
  ) : [],
@@ -300,7 +300,7 @@ var SelectButton = react.forwardRef(
300
300
  react.MenuButton,
301
301
  {
302
302
  as: react.Button,
303
- id: id || React12__namespace.useId(),
303
+ id: id || React13__namespace.useId(),
304
304
  ...rest,
305
305
  onFocus,
306
306
  onBlur,
@@ -573,7 +573,7 @@ var defaultFieldTypes = {
573
573
  pin: PinField,
574
574
  "native-select": NativeSelectField
575
575
  };
576
- var FieldsContext = React12__namespace.default.createContext(
576
+ var FieldsContext = React13__namespace.default.createContext(
577
577
  null
578
578
  );
579
579
  var FieldsProvider = (props) => {
@@ -581,11 +581,11 @@ var FieldsProvider = (props) => {
581
581
  return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
582
582
  };
583
583
  var useField = (type) => {
584
- const context = React12__namespace.default.useContext(FieldsContext);
584
+ const context = React13__namespace.default.useContext(FieldsContext);
585
585
  return (context == null ? void 0 : context[type]) || InputField;
586
586
  };
587
587
  var defaultInputType = "text";
588
- var Field = React12__namespace.forwardRef(
588
+ var Field = React13__namespace.forwardRef(
589
589
  (props, ref) => {
590
590
  const { type = defaultInputType, name } = props;
591
591
  const overrides = useFieldProps(name);
@@ -612,8 +612,8 @@ var FormLayout = ({ children, ...props }) => {
612
612
  {
613
613
  ...gridProps,
614
614
  className: utils.cx("sui-form__layout", props.className),
615
- children: React12__namespace.Children.map(children, (child) => {
616
- if (React12__namespace.isValidElement(child)) {
615
+ children: React13__namespace.Children.map(children, (child) => {
616
+ if (React13__namespace.isValidElement(child)) {
617
617
  return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
618
618
  }
619
619
  return child;
@@ -652,7 +652,7 @@ var useArrayField = ({
652
652
  var useArrayFieldRow = ({ index }) => {
653
653
  const { clearErrors } = useFormContext();
654
654
  const { name, remove, fields } = useArrayFieldContext();
655
- React12__namespace.useEffect(() => {
655
+ React13__namespace.useEffect(() => {
656
656
  clearErrors(name);
657
657
  }, []);
658
658
  return {
@@ -660,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
660
660
  isFirst: index === 0,
661
661
  isLast: index === fields.length - 1,
662
662
  name: `${name}.${index}`,
663
- remove: React12__namespace.useCallback(() => {
663
+ remove: React13__namespace.useCallback(() => {
664
664
  clearErrors(name);
665
665
  remove(index);
666
666
  }, [index])
@@ -755,7 +755,7 @@ var ArrayFieldRows = ({
755
755
  return children(fields);
756
756
  };
757
757
  ArrayFieldRows.displayName = "ArrayFieldRows";
758
- var ArrayFieldContainer = React12__namespace.forwardRef(
758
+ var ArrayFieldContainer = React13__namespace.forwardRef(
759
759
  ({
760
760
  name,
761
761
  defaultValue,
@@ -772,7 +772,7 @@ var ArrayFieldContainer = React12__namespace.forwardRef(
772
772
  min,
773
773
  max
774
774
  });
775
- React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
775
+ React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
776
776
  return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
777
777
  }
778
778
  );
@@ -812,10 +812,10 @@ var AutoFields = ({
812
812
  const context = useFormContext();
813
813
  const schema = schemaProp || context.schema;
814
814
  const fieldResolver = fieldResolverProp || context.fieldResolver;
815
- const resolver = React12__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
816
- const fields = React12__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
815
+ const resolver = React13__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
816
+ const fields = React13__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
817
817
  const form = useFormContext();
818
- React12__namespace.useEffect(() => {
818
+ React13__namespace.useEffect(() => {
819
819
  var _a;
820
820
  if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
821
821
  form.setFocus(fields[0].name);
@@ -931,8 +931,8 @@ var Form = react.forwardRef(
931
931
  };
932
932
  const methods = reactHookForm.useForm(form);
933
933
  const { handleSubmit } = methods;
934
- React12__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
935
- React12__namespace.useEffect(() => {
934
+ React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
935
+ React13__namespace.useEffect(() => {
936
936
  let subscription;
937
937
  if (onChange) {
938
938
  subscription = methods.watch(onChange);
@@ -982,8 +982,8 @@ function useStepForm(props) {
982
982
  const { onChange, ...rest } = props;
983
983
  const stepper = core.useStepper(rest);
984
984
  const { activeStep, isLastStep, nextStep } = stepper;
985
- const [steps, updateSteps] = React12__namespace.useState({});
986
- const onSubmitStep = React12__namespace.useCallback(
985
+ const [steps, updateSteps] = React13__namespace.useState({});
986
+ const onSubmitStep = React13__namespace.useCallback(
987
987
  async (data) => {
988
988
  var _a, _b;
989
989
  try {
@@ -1004,7 +1004,7 @@ function useStepForm(props) {
1004
1004
  },
1005
1005
  [steps, activeStep, isLastStep]
1006
1006
  );
1007
- const getFormProps = React12__namespace.useCallback(() => {
1007
+ const getFormProps = React13__namespace.useCallback(() => {
1008
1008
  const step = steps[activeStep];
1009
1009
  return {
1010
1010
  onSubmit: onSubmitStep,
@@ -1012,7 +1012,7 @@ function useStepForm(props) {
1012
1012
  resolver: step == null ? void 0 : step.resolver
1013
1013
  };
1014
1014
  }, [steps, onSubmitStep, activeStep]);
1015
- const updateStep = React12__namespace.useCallback(
1015
+ const updateStep = React13__namespace.useCallback(
1016
1016
  (step) => {
1017
1017
  updateSteps((steps2) => {
1018
1018
  return {
@@ -1034,7 +1034,7 @@ function useFormStep(props) {
1034
1034
  const { name, schema, resolver, onSubmit } = props;
1035
1035
  const step = core.useStep({ name });
1036
1036
  const { steps, updateStep } = useStepFormContext();
1037
- React12__namespace.useEffect(() => {
1037
+ React13__namespace.useEffect(() => {
1038
1038
  updateStep({ name, schema, resolver, onSubmit });
1039
1039
  }, [name, schema]);
1040
1040
  return {
@@ -1042,20 +1042,20 @@ function useFormStep(props) {
1042
1042
  ...steps[name] || { name, schema }
1043
1043
  };
1044
1044
  }
1045
- var StepForm = React12__namespace.forwardRef(
1045
+ var StepForm = React13__namespace.forwardRef(
1046
1046
  (props, ref) => {
1047
1047
  const { children, ...rest } = props;
1048
1048
  const stepper = useStepForm(props);
1049
1049
  const { getFormProps, ...ctx } = stepper;
1050
- const context = React12__namespace.useMemo(() => ctx, [ctx]);
1050
+ const context = React13__namespace.useMemo(() => ctx, [ctx]);
1051
1051
  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) }) }) });
1052
1052
  }
1053
1053
  );
1054
1054
  var FormStepper = (props) => {
1055
1055
  const { activeIndex, setIndex } = core.useStepperContext();
1056
1056
  const { children, orientation, variant, colorScheme, size, ...rest } = props;
1057
- const elements = React12__namespace.Children.map(children, (child) => {
1058
- if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
1057
+ const elements = React13__namespace.Children.map(children, (child) => {
1058
+ if (React13__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
1059
1059
  const { isCompleted } = useFormStep(child.props);
1060
1060
  return /* @__PURE__ */ jsxRuntime.jsx(
1061
1061
  core.StepperStep,
@@ -1070,7 +1070,7 @@ var FormStepper = (props) => {
1070
1070
  }
1071
1071
  return child;
1072
1072
  });
1073
- const onChange = React12__namespace.useCallback((i) => {
1073
+ const onChange = React13__namespace.useCallback((i) => {
1074
1074
  setIndex(i);
1075
1075
  }, []);
1076
1076
  return /* @__PURE__ */ jsxRuntime.jsx(