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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @saas-ui/forms
2
2
 
3
+ ## 2.0.0-next.8
4
+
5
+ ### Patch Changes
6
+
7
+ - 6d3f5717: Fix React import
8
+
9
+ ## 2.0.0-next.7
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [7052dad3]
14
+ - @saas-ui/core@2.0.0-next.6
15
+
3
16
  ## 2.0.0-next.6
4
17
 
5
18
  ### Major Changes
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var React11 = 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 React11__namespace = /*#__PURE__*/_interopNamespace(React11);
30
+ var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
31
31
 
32
32
  // src/form-context.tsx
33
- var FormContext = React11.createContext(null);
33
+ var FormContext = React13__namespace.createContext(null);
34
34
  var useFormContext = () => {
35
- const context = React11.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] = React11.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 React11__namespace.Children.map(children, (child) => {
151
- if (React11__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 React11__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 = React11__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 = React11__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 = React11__namespace.default.useMemo(
239
+ const displayValue = React13__namespace.default.useMemo(
240
240
  () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
241
241
  getDisplayValue
242
242
  ) : [],
@@ -265,6 +265,7 @@ var SelectButton = react.forwardRef(
265
265
  placeholder,
266
266
  isDisabled: isSelectDisabled
267
267
  } = useSelectContext();
268
+ const context = react.useFormControlContext();
268
269
  const {
269
270
  isInvalid,
270
271
  isReadOnly,
@@ -274,7 +275,7 @@ var SelectButton = react.forwardRef(
274
275
  id,
275
276
  onBlur,
276
277
  onFocus
277
- } = react.useFormControlContext();
278
+ } = context || {};
278
279
  const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
279
280
  const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
280
281
  const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
@@ -299,7 +300,7 @@ var SelectButton = react.forwardRef(
299
300
  react.MenuButton,
300
301
  {
301
302
  as: react.Button,
302
- id,
303
+ id: id || React13__namespace.useId(),
303
304
  ...rest,
304
305
  onFocus,
305
306
  onBlur,
@@ -572,7 +573,7 @@ var defaultFieldTypes = {
572
573
  pin: PinField,
573
574
  "native-select": NativeSelectField
574
575
  };
575
- var FieldsContext = React11__namespace.default.createContext(
576
+ var FieldsContext = React13__namespace.default.createContext(
576
577
  null
577
578
  );
578
579
  var FieldsProvider = (props) => {
@@ -580,11 +581,11 @@ var FieldsProvider = (props) => {
580
581
  return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
581
582
  };
582
583
  var useField = (type) => {
583
- const context = React11__namespace.default.useContext(FieldsContext);
584
+ const context = React13__namespace.default.useContext(FieldsContext);
584
585
  return (context == null ? void 0 : context[type]) || InputField;
585
586
  };
586
587
  var defaultInputType = "text";
587
- var Field = React11__namespace.forwardRef(
588
+ var Field = React13__namespace.forwardRef(
588
589
  (props, ref) => {
589
590
  const { type = defaultInputType, name } = props;
590
591
  const overrides = useFieldProps(name);
@@ -611,8 +612,8 @@ var FormLayout = ({ children, ...props }) => {
611
612
  {
612
613
  ...gridProps,
613
614
  className: utils.cx("sui-form__layout", props.className),
614
- children: React11__namespace.Children.map(children, (child) => {
615
- if (React11__namespace.isValidElement(child)) {
615
+ children: React13__namespace.Children.map(children, (child) => {
616
+ if (React13__namespace.isValidElement(child)) {
616
617
  return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
617
618
  }
618
619
  return child;
@@ -651,7 +652,7 @@ var useArrayField = ({
651
652
  var useArrayFieldRow = ({ index }) => {
652
653
  const { clearErrors } = useFormContext();
653
654
  const { name, remove, fields } = useArrayFieldContext();
654
- React11__namespace.useEffect(() => {
655
+ React13__namespace.useEffect(() => {
655
656
  clearErrors(name);
656
657
  }, []);
657
658
  return {
@@ -659,7 +660,7 @@ var useArrayFieldRow = ({ index }) => {
659
660
  isFirst: index === 0,
660
661
  isLast: index === fields.length - 1,
661
662
  name: `${name}.${index}`,
662
- remove: React11__namespace.useCallback(() => {
663
+ remove: React13__namespace.useCallback(() => {
663
664
  clearErrors(name);
664
665
  remove(index);
665
666
  }, [index])
@@ -754,7 +755,7 @@ var ArrayFieldRows = ({
754
755
  return children(fields);
755
756
  };
756
757
  ArrayFieldRows.displayName = "ArrayFieldRows";
757
- var ArrayFieldContainer = React11__namespace.forwardRef(
758
+ var ArrayFieldContainer = React13__namespace.forwardRef(
758
759
  ({
759
760
  name,
760
761
  defaultValue,
@@ -771,7 +772,7 @@ var ArrayFieldContainer = React11__namespace.forwardRef(
771
772
  min,
772
773
  max
773
774
  });
774
- React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
775
+ React13__namespace.useImperativeHandle(ref, () => context, [ref, context]);
775
776
  return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
776
777
  }
777
778
  );
@@ -811,10 +812,10 @@ var AutoFields = ({
811
812
  const context = useFormContext();
812
813
  const schema = schemaProp || context.schema;
813
814
  const fieldResolver = fieldResolverProp || context.fieldResolver;
814
- const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
815
- const fields = React11__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]);
816
817
  const form = useFormContext();
817
- React11__namespace.useEffect(() => {
818
+ React13__namespace.useEffect(() => {
818
819
  var _a;
819
820
  if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
820
821
  form.setFocus(fields[0].name);
@@ -930,8 +931,8 @@ var Form = react.forwardRef(
930
931
  };
931
932
  const methods = reactHookForm.useForm(form);
932
933
  const { handleSubmit } = methods;
933
- React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
934
- React11__namespace.useEffect(() => {
934
+ React13__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
935
+ React13__namespace.useEffect(() => {
935
936
  let subscription;
936
937
  if (onChange) {
937
938
  subscription = methods.watch(onChange);
@@ -981,8 +982,8 @@ function useStepForm(props) {
981
982
  const { onChange, ...rest } = props;
982
983
  const stepper = core.useStepper(rest);
983
984
  const { activeStep, isLastStep, nextStep } = stepper;
984
- const [steps, updateSteps] = React11__namespace.useState({});
985
- const onSubmitStep = React11__namespace.useCallback(
985
+ const [steps, updateSteps] = React13__namespace.useState({});
986
+ const onSubmitStep = React13__namespace.useCallback(
986
987
  async (data) => {
987
988
  var _a, _b;
988
989
  try {
@@ -1003,7 +1004,7 @@ function useStepForm(props) {
1003
1004
  },
1004
1005
  [steps, activeStep, isLastStep]
1005
1006
  );
1006
- const getFormProps = React11__namespace.useCallback(() => {
1007
+ const getFormProps = React13__namespace.useCallback(() => {
1007
1008
  const step = steps[activeStep];
1008
1009
  return {
1009
1010
  onSubmit: onSubmitStep,
@@ -1011,7 +1012,7 @@ function useStepForm(props) {
1011
1012
  resolver: step == null ? void 0 : step.resolver
1012
1013
  };
1013
1014
  }, [steps, onSubmitStep, activeStep]);
1014
- const updateStep = React11__namespace.useCallback(
1015
+ const updateStep = React13__namespace.useCallback(
1015
1016
  (step) => {
1016
1017
  updateSteps((steps2) => {
1017
1018
  return {
@@ -1033,7 +1034,7 @@ function useFormStep(props) {
1033
1034
  const { name, schema, resolver, onSubmit } = props;
1034
1035
  const step = core.useStep({ name });
1035
1036
  const { steps, updateStep } = useStepFormContext();
1036
- React11__namespace.useEffect(() => {
1037
+ React13__namespace.useEffect(() => {
1037
1038
  updateStep({ name, schema, resolver, onSubmit });
1038
1039
  }, [name, schema]);
1039
1040
  return {
@@ -1041,20 +1042,20 @@ function useFormStep(props) {
1041
1042
  ...steps[name] || { name, schema }
1042
1043
  };
1043
1044
  }
1044
- var StepForm = React11__namespace.forwardRef(
1045
+ var StepForm = React13__namespace.forwardRef(
1045
1046
  (props, ref) => {
1046
1047
  const { children, ...rest } = props;
1047
1048
  const stepper = useStepForm(props);
1048
1049
  const { getFormProps, ...ctx } = stepper;
1049
- const context = React11__namespace.useMemo(() => ctx, [ctx]);
1050
+ const context = React13__namespace.useMemo(() => ctx, [ctx]);
1050
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) }) }) });
1051
1052
  }
1052
1053
  );
1053
1054
  var FormStepper = (props) => {
1054
1055
  const { activeIndex, setIndex } = core.useStepperContext();
1055
1056
  const { children, orientation, variant, colorScheme, size, ...rest } = props;
1056
- const elements = React11__namespace.Children.map(children, (child) => {
1057
- if (React11__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) {
1058
1059
  const { isCompleted } = useFormStep(child.props);
1059
1060
  return /* @__PURE__ */ jsxRuntime.jsx(
1060
1061
  core.StepperStep,
@@ -1069,7 +1070,7 @@ var FormStepper = (props) => {
1069
1070
  }
1070
1071
  return child;
1071
1072
  });
1072
- const onChange = React11__namespace.useCallback((i) => {
1073
+ const onChange = React13__namespace.useCallback((i) => {
1073
1074
  setIndex(i);
1074
1075
  }, []);
1075
1076
  return /* @__PURE__ */ jsxRuntime.jsx(