@saas-ui/forms 3.0.0-alpha.12 → 3.0.0-alpha.14

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/dist/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
1
  'use client'
2
2
 
3
3
  // src/create-form.tsx
4
- import { forwardRef as forwardRef7, useMemo as useMemo2 } from "react";
4
+ import { forwardRef as forwardRef7, useMemo as useMemo3 } from "react";
5
5
 
6
6
  // src/default-fields.tsx
7
+ import { useMemo } from "react";
7
8
  import {
8
9
  Input,
9
10
  Stack,
@@ -69,30 +70,35 @@ var isTouched = (name, formState) => {
69
70
  return get(formState.touchedFields, name);
70
71
  };
71
72
  var useBaseField = (props) => {
72
- const [fieldProps] = splitProps(props, ["name", "label", "help", "hideLabel"]);
73
- const [controlProps] = splitProps(props, [
74
- // 'id',
75
- // 'orientation',
76
- // 'disabled',
77
- // 'invalid',
78
- // 'readOnly',
79
- // 'required',
73
+ const [fieldProps, rootProps] = splitProps(props, [
74
+ "name",
75
+ "label",
76
+ "help",
77
+ "hideLabel",
78
+ "placeholder",
79
+ "rules",
80
+ "type",
81
+ "children"
80
82
  ]);
81
83
  const { formState } = useFormContext();
82
84
  const error = getError(fieldProps.name, formState);
83
85
  const touched = isTouched(fieldProps.name, formState);
84
86
  return {
85
87
  ...fieldProps,
86
- controlProps,
88
+ rootProps,
87
89
  error,
88
90
  touched
89
91
  };
90
92
  };
91
93
  var BaseField = (props) => {
92
- const { label, help, hideLabel, error } = useBaseField(props);
94
+ const { rootProps, label, hideLabel, help, error } = useBaseField(props);
93
95
  const isInvalid = !!error;
94
- return /* @__PURE__ */ jsxs(Field.Root, { invalid: isInvalid, ...props, children: [
95
- label && !hideLabel ? /* @__PURE__ */ jsx2(Field.Label, { children: label }) : null,
96
+ return /* @__PURE__ */ jsxs(Field.Root, { invalid: isInvalid, ...rootProps, children: [
97
+ label && !hideLabel ? /* @__PURE__ */ jsxs(Field.Label, { children: [
98
+ label,
99
+ " ",
100
+ /* @__PURE__ */ jsx2(Field.RequiredIndicator, {})
101
+ ] }) : null,
96
102
  /* @__PURE__ */ jsxs(Box, { width: "full", children: [
97
103
  props.children,
98
104
  help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
@@ -123,37 +129,34 @@ import { jsx as jsx4 } from "react/jsx-runtime";
123
129
  var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
124
130
  const Field3 = forwardRef((props, ref) => {
125
131
  var _a;
126
- const { id, name, label, isRequired, rules } = props;
132
+ const { id, label, required, rules } = props;
127
133
  const inputRules = {
128
- required: isRequired,
134
+ required,
129
135
  ...rules
130
136
  };
131
137
  const fieldContext = useFieldsContext();
132
138
  const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
133
- const { extraProps, BaseField: BaseField2 } = React3.useMemo(
139
+ const { props: extraProps, Component } = React3.useMemo(
134
140
  () => getBaseField(),
135
141
  [getBaseField]
136
142
  );
137
- const [, inputProps] = splitProps2(
143
+ const rootProps = {
144
+ name: props.name,
145
+ label: props.label,
146
+ disabled: props.disabled,
147
+ invalid: props.invalid,
148
+ readOnly: props.readOnly,
149
+ required: props.required
150
+ };
151
+ const [baseFieldProps, inputProps] = splitProps2(
138
152
  props,
139
- [
140
- "children",
141
- "name",
142
- "label",
143
- "required",
144
- "disabled",
145
- "invalid",
146
- "readOnly",
147
- "help",
148
- "hideLabel"
149
- ].concat(extraProps)
153
+ ["orientation", "help", "hideLabel"].concat(extraProps)
150
154
  );
151
- return /* @__PURE__ */ jsx4(BaseField2, { name, hideLabel, ...props, children: /* @__PURE__ */ jsx4(
155
+ return /* @__PURE__ */ jsx4(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ jsx4(
152
156
  InputComponent,
153
157
  {
154
158
  ref,
155
159
  id,
156
- name,
157
160
  label: hideLabel ? label : void 0,
158
161
  ...inputProps,
159
162
  rules: inputRules
@@ -219,8 +222,8 @@ var createField = (component, options) => {
219
222
  displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
220
223
  hideLabel: options == null ? void 0 : options.hideLabel,
221
224
  getBaseField: () => ({
222
- extraProps: [],
223
- BaseField
225
+ props: [],
226
+ Component: BaseField
224
227
  })
225
228
  });
226
229
  return Field3;
@@ -254,22 +257,28 @@ var SelectField = createField(
254
257
  options,
255
258
  placeholder,
256
259
  onChange,
257
- onValueChange,
258
260
  onBlur,
261
+ multiple = false,
262
+ value: valueProp,
259
263
  ...rest
260
264
  } = props;
261
- const collection = createListCollection({
262
- items: options
263
- });
265
+ const collection = useMemo(
266
+ () => createListCollection({
267
+ items: options
268
+ }),
269
+ [options]
270
+ );
271
+ const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
264
272
  return /* @__PURE__ */ jsxs2(
265
273
  Select.Root,
266
274
  {
267
275
  ref,
268
276
  collection,
269
277
  onValueChange: (details) => {
270
- onChange(details.value);
278
+ onChange(multiple ? details.value : details.value[0]);
271
279
  },
272
280
  onInteractOutside: () => onBlur(),
281
+ value,
273
282
  ...rest,
274
283
  children: [
275
284
  /* @__PURE__ */ jsx5(Select.Trigger, { ...triggerProps, children: /* @__PURE__ */ jsx5(Select.ValueText, { placeholder }) }),
@@ -376,7 +385,7 @@ var objectFieldResolver = (schema) => {
376
385
  };
377
386
 
378
387
  // src/form.tsx
379
- import React10, { forwardRef as forwardRef6 } from "react";
388
+ import React11, { forwardRef as forwardRef6 } from "react";
380
389
  import { chakra as chakra2 } from "@chakra-ui/react";
381
390
  import { cx as cx2, runIfFn } from "@saas-ui/core/utils";
382
391
  import {
@@ -384,7 +393,7 @@ import {
384
393
  } from "react-hook-form";
385
394
 
386
395
  // src/array-field.tsx
387
- import React6, { forwardRef as forwardRef3 } from "react";
396
+ import React7, { forwardRef as forwardRef3 } from "react";
388
397
  import { Button, chakra } from "@chakra-ui/react";
389
398
  import { MinusIcon, PlusIcon } from "@saas-ui/react/icons";
390
399
 
@@ -397,7 +406,7 @@ import {
397
406
  import { cx } from "@saas-ui/core/utils";
398
407
  import { jsx as jsx6 } from "react/jsx-runtime";
399
408
  var FormLayout = forwardRef2(
400
- ({ children, rowGap = 4, ...props }, ref) => {
409
+ ({ children, gap = 4, ...props }, ref) => {
401
410
  const recipe = useRecipe({
402
411
  key: "formLayout"
403
412
  });
@@ -411,7 +420,7 @@ var FormLayout = forwardRef2(
411
420
  className: cx("sui-form-layout", props.className),
412
421
  css: [
413
422
  {
414
- rowGap
423
+ gap
415
424
  },
416
425
  styles,
417
426
  props.css
@@ -424,7 +433,7 @@ var FormLayout = forwardRef2(
424
433
  FormLayout.displayName = "FormLayout";
425
434
 
426
435
  // src/use-array-field.tsx
427
- import * as React4 from "react";
436
+ import * as React5 from "react";
428
437
  import { createContext as createContext2 } from "@saas-ui/core/utils";
429
438
  import {
430
439
  useFieldArray
@@ -459,7 +468,7 @@ var useArrayField = ({
459
468
  var useArrayFieldRow = ({ index }) => {
460
469
  const { clearErrors } = useFormContext();
461
470
  const { name, remove, fields } = useArrayFieldContext();
462
- React4.useEffect(() => {
471
+ React5.useEffect(() => {
463
472
  clearErrors(name);
464
473
  }, []);
465
474
  return {
@@ -467,7 +476,7 @@ var useArrayFieldRow = ({ index }) => {
467
476
  isFirst: index === 0,
468
477
  isLast: index === fields.length - 1,
469
478
  name: `${name}.${index}`,
470
- remove: React4.useCallback(() => {
479
+ remove: React5.useCallback(() => {
471
480
  clearErrors(name);
472
481
  remove(index);
473
482
  }, [index])
@@ -494,17 +503,17 @@ var useArrayFieldAddButton = () => {
494
503
  };
495
504
 
496
505
  // src/utils.ts
497
- import * as React5 from "react";
506
+ import * as React6 from "react";
498
507
  var mapNestedFields = (name, children) => {
499
- return React5.Children.map(children, (child) => {
500
- if (React5.isValidElement(child) && child.props.name) {
508
+ return React6.Children.map(children, (child) => {
509
+ if (React6.isValidElement(child) && child.props.name) {
501
510
  let childName = child.props.name;
502
511
  if (childName.includes(".")) {
503
512
  childName = childName.replace(/^.*\.(.*)/, "$1");
504
513
  } else if (childName.includes(".$")) {
505
514
  childName = childName.replace(/^.*\.\$(.*)/, "$1");
506
515
  }
507
- return React5.cloneElement(child, {
516
+ return React6.cloneElement(child, {
508
517
  ...child.props,
509
518
  name: `${name}.${childName}`
510
519
  });
@@ -585,7 +594,7 @@ var ArrayFieldRows = ({
585
594
  return children(fields);
586
595
  };
587
596
  ArrayFieldRows.displayName = "ArrayFieldRows";
588
- var ArrayFieldContainer = React6.forwardRef(
597
+ var ArrayFieldContainer = React7.forwardRef(
589
598
  ({
590
599
  name,
591
600
  defaultValue,
@@ -603,14 +612,14 @@ var ArrayFieldContainer = React6.forwardRef(
603
612
  min: min || (overrides == null ? void 0 : overrides.min),
604
613
  max: max || (overrides == null ? void 0 : overrides.max)
605
614
  });
606
- React6.useImperativeHandle(ref, () => context, [ref, context]);
615
+ React7.useImperativeHandle(ref, () => context, [ref, context]);
607
616
  return /* @__PURE__ */ jsx7(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx7(BaseField, { name, ...fieldProps, ...overrides, children }) });
608
617
  }
609
618
  );
610
619
  ArrayFieldContainer.displayName = "ArrayFieldContainer";
611
620
 
612
621
  // src/display-if.tsx
613
- import * as React7 from "react";
622
+ import * as React8 from "react";
614
623
  import {
615
624
  useWatch
616
625
  } from "react-hook-form";
@@ -623,8 +632,8 @@ var DisplayIf = ({
623
632
  condition = (value) => !!value,
624
633
  onToggle
625
634
  }) => {
626
- const initializedRef = React7.useRef(false);
627
- const matchesRef = React7.useRef(false);
635
+ const initializedRef = React8.useRef(false);
636
+ const matchesRef = React8.useRef(false);
628
637
  const value = useWatch({
629
638
  name,
630
639
  defaultValue,
@@ -633,7 +642,7 @@ var DisplayIf = ({
633
642
  });
634
643
  const context = useFormContext();
635
644
  const matches = condition(value, context);
636
- React7.useEffect(() => {
645
+ React8.useEffect(() => {
637
646
  if (!initializedRef.current) {
638
647
  initializedRef.current = true;
639
648
  return;
@@ -647,10 +656,10 @@ var DisplayIf = ({
647
656
  DisplayIf.displayName = "DisplayIf";
648
657
 
649
658
  // src/field.tsx
650
- import * as React8 from "react";
659
+ import * as React9 from "react";
651
660
  import { jsx as jsx8 } from "react/jsx-runtime";
652
661
  var defaultInputType = "text";
653
- var Field2 = React8.forwardRef(
662
+ var Field2 = React9.forwardRef(
654
663
  (props, ref) => {
655
664
  const { type = defaultInputType, name } = props;
656
665
  const overrides = useFieldProps(name);
@@ -660,7 +669,7 @@ var Field2 = React8.forwardRef(
660
669
  );
661
670
 
662
671
  // src/fields.tsx
663
- import * as React9 from "react";
672
+ import * as React10 from "react";
664
673
 
665
674
  // src/object-field.tsx
666
675
  import { Field as FieldPrimivite } from "@chakra-ui/react";
@@ -713,10 +722,10 @@ var AutoFields = ({
713
722
  const context = useFormContext();
714
723
  const schema = schemaProp || context.schema;
715
724
  const fieldResolver = fieldResolverProp || context.fieldResolver;
716
- const resolver = React9.useMemo(() => fieldResolver, [schema, fieldResolver]);
717
- const fields = React9.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
725
+ const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
726
+ const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
718
727
  const form = useFormContext();
719
- React9.useEffect(() => {
728
+ React10.useEffect(() => {
720
729
  var _a;
721
730
  if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
722
731
  form.setFocus(fields[0].name);
@@ -834,8 +843,8 @@ var Form = forwardRef6(
834
843
  };
835
844
  const methods = useForm(form);
836
845
  const { handleSubmit } = methods;
837
- React10.useImperativeHandle(formRef, () => methods, [formRef, methods]);
838
- React10.useEffect(() => {
846
+ React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
847
+ React11.useEffect(() => {
839
848
  let subscription;
840
849
  if (onChange) {
841
850
  subscription = methods.watch(onChange);
@@ -894,7 +903,7 @@ function createForm({
894
903
  fieldResolver: fieldResolverProp,
895
904
  ...rest
896
905
  } = props;
897
- const fieldsContext = useMemo2(
906
+ const fieldsContext = useMemo3(
898
907
  () => ({
899
908
  fields: { ...defaultFieldTypes, ...fields },
900
909
  getBaseField