@saas-ui/forms 2.7.0 → 2.8.0
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 +19 -0
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +34 -34
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -4
- package/dist/index.mjs.map +1 -1
- package/dist/zod/index.js +4 -1
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +4 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +3 -4
- package/src/array-field.tsx +2 -3
- package/src/form.tsx +6 -2
- package/src/select/select-context.tsx +1 -1
- package/src/types.ts +1 -1
- package/src/use-array-field.tsx +1 -1
- package/src/use-step-form.tsx +6 -6
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,24 @@
|
|
1
1
|
# @saas-ui/forms
|
2
2
|
|
3
|
+
## 2.8.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- fc799df: Removed deprecated Chakra UI dependency
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- Updated dependencies [fc799df]
|
12
|
+
- @saas-ui/core@2.7.0
|
13
|
+
|
14
|
+
## 2.7.1
|
15
|
+
|
16
|
+
### Patch Changes
|
17
|
+
|
18
|
+
- f0ee3db: Updated to Chakra 2.10
|
19
|
+
- Updated dependencies [f0ee3db]
|
20
|
+
- @saas-ui/core@2.6.1
|
21
|
+
|
3
22
|
## 2.7.0
|
4
23
|
|
5
24
|
### Minor Changes
|
package/dist/index.d.mts
CHANGED
@@ -7,8 +7,7 @@ export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFi
|
|
7
7
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
8
8
|
import { NumberInputProps as NumberInputProps$1, NumberInputFieldProps as NumberInputFieldProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ThemingProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps } from '@chakra-ui/react';
|
9
9
|
import { UseStepperReturn, UseStepperProps, StepsProps, StepsItemProps } from '@saas-ui/core';
|
10
|
-
import { FocusableElement } from '@chakra-ui/utils';
|
11
|
-
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
10
|
+
import { MaybeRenderProp, FocusableElement } from '@chakra-ui/utils';
|
12
11
|
|
13
12
|
interface NumberInputOptions {
|
14
13
|
/**
|
package/dist/index.d.ts
CHANGED
@@ -7,8 +7,7 @@ export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFi
|
|
7
7
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
8
8
|
import { NumberInputProps as NumberInputProps$1, NumberInputFieldProps as NumberInputFieldProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ThemingProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, ResponsiveValue, FormLabelProps, SimpleGridProps, FormControlProps, HTMLChakraProps } from '@chakra-ui/react';
|
9
9
|
import { UseStepperReturn, UseStepperProps, StepsProps, StepsItemProps } from '@saas-ui/core';
|
10
|
-
import { FocusableElement } from '@chakra-ui/utils';
|
11
|
-
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
10
|
+
import { MaybeRenderProp, FocusableElement } from '@chakra-ui/utils';
|
12
11
|
|
13
12
|
interface NumberInputOptions {
|
14
13
|
/**
|
package/dist/index.js
CHANGED
@@ -336,15 +336,15 @@ RadioInput.displayName = "RadioInput";
|
|
336
336
|
|
337
337
|
// src/select/select.tsx
|
338
338
|
var import_react10 = require("@chakra-ui/react");
|
339
|
-
var
|
339
|
+
var import_utils4 = require("@chakra-ui/utils");
|
340
340
|
var import_core2 = require("@saas-ui/core");
|
341
341
|
|
342
342
|
// src/select/select-context.tsx
|
343
343
|
var import_react8 = require("@chakra-ui/react");
|
344
|
-
var
|
344
|
+
var import_utils2 = require("@chakra-ui/utils");
|
345
345
|
var import_react9 = __toESM(require("react"));
|
346
346
|
var [SelectStylesProvider, useSelectStyles] = (0, import_react8.createStylesContext)("SuiSelect");
|
347
|
-
var [SelectProvider, useSelectContext] = (0,
|
347
|
+
var [SelectProvider, useSelectContext] = (0, import_utils2.createContext)({
|
348
348
|
strict: true
|
349
349
|
});
|
350
350
|
var useSelect = (props) => {
|
@@ -461,10 +461,10 @@ var SelectButton = (0, import_react10.forwardRef)(
|
|
461
461
|
onFocus,
|
462
462
|
onBlur,
|
463
463
|
isDisabled: isDisabled || isSelectDisabled,
|
464
|
-
"data-invalid": (0,
|
465
|
-
"data-read-only": (0,
|
466
|
-
"data-focus": (0,
|
467
|
-
"data-required": (0,
|
464
|
+
"data-invalid": (0, import_utils4.dataAttr)(isInvalid),
|
465
|
+
"data-read-only": (0, import_utils4.dataAttr)(isReadOnly),
|
466
|
+
"data-focus": (0, import_utils4.dataAttr)(isFocused),
|
467
|
+
"data-required": (0, import_utils4.dataAttr)(isRequired),
|
468
468
|
rightIcon,
|
469
469
|
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
470
470
|
import_react10.chakra.span,
|
@@ -491,7 +491,7 @@ var Select = (0, import_react10.forwardRef)((props, ref) => {
|
|
491
491
|
const menuProps = (0, import_react10.omitThemingProps)(rest);
|
492
492
|
const context = useSelect(props);
|
493
493
|
const { value, controlProps } = context;
|
494
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react10.chakra.div, { className: (0,
|
494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react10.chakra.div, { className: (0, import_utils4.cx)("sui-select"), children: [
|
495
495
|
children,
|
496
496
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
497
497
|
import_react10.chakra.input,
|
@@ -544,7 +544,7 @@ NativeSelect.displayName = "NativeSelect";
|
|
544
544
|
var React6 = __toESM(require("react"));
|
545
545
|
var import_react_hook_form3 = require("react-hook-form");
|
546
546
|
var import_react13 = require("@chakra-ui/react");
|
547
|
-
var
|
547
|
+
var import_utils5 = require("@chakra-ui/utils");
|
548
548
|
var import_core4 = require("@saas-ui/core");
|
549
549
|
|
550
550
|
// src/base-field.tsx
|
@@ -662,8 +662,8 @@ var withControlledInput = (InputComponent) => {
|
|
662
662
|
{
|
663
663
|
...field,
|
664
664
|
...inputProps,
|
665
|
-
onChange: (0,
|
666
|
-
onBlur: (0,
|
665
|
+
onChange: (0, import_utils5.callAllHandlers)(onChange, field.onChange),
|
666
|
+
onBlur: (0, import_utils5.callAllHandlers)(inputProps.onBlur, field.onBlur),
|
667
667
|
ref: (0, import_react13.useMergeRefs)(ref, _ref)
|
668
668
|
}
|
669
669
|
)
|
@@ -683,8 +683,8 @@ var withUncontrolledInput = (InputComponent) => {
|
|
683
683
|
{
|
684
684
|
...field,
|
685
685
|
...inputProps,
|
686
|
-
onChange: (0,
|
687
|
-
onBlur: (0,
|
686
|
+
onChange: (0, import_utils5.callAllHandlers)(onChange, field.onChange),
|
687
|
+
onBlur: (0, import_utils5.callAllHandlers)(inputProps.onBlur, field.onBlur),
|
688
688
|
ref: (0, import_react13.useMergeRefs)(ref, _ref)
|
689
689
|
}
|
690
690
|
);
|
@@ -819,7 +819,7 @@ var React10 = __toESM(require("react"));
|
|
819
819
|
|
820
820
|
// src/layout.tsx
|
821
821
|
var import_react15 = require("@chakra-ui/react");
|
822
|
-
var
|
822
|
+
var import_utils6 = require("@chakra-ui/utils");
|
823
823
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
824
824
|
var FormLayoutItem = ({ children }) => {
|
825
825
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.chakra.div, { children });
|
@@ -840,7 +840,7 @@ var FormLayout = ({ children, ...props }) => {
|
|
840
840
|
import_react15.SimpleGrid,
|
841
841
|
{
|
842
842
|
...gridProps,
|
843
|
-
className: (0,
|
843
|
+
className: (0, import_utils6.cx)("sui-form__layout", props.className),
|
844
844
|
sx: {
|
845
845
|
...styles,
|
846
846
|
...props.sx
|
@@ -859,11 +859,11 @@ var import_icons2 = require("@saas-ui/core/icons");
|
|
859
859
|
// src/use-array-field.tsx
|
860
860
|
var React8 = __toESM(require("react"));
|
861
861
|
var import_react_hook_form4 = require("react-hook-form");
|
862
|
-
var
|
863
|
-
var [ArrayFieldProvider, useArrayFieldContext] = (0,
|
862
|
+
var import_utils7 = require("@chakra-ui/utils");
|
863
|
+
var [ArrayFieldProvider, useArrayFieldContext] = (0, import_utils7.createContext)({
|
864
864
|
name: "ArrayFieldContext"
|
865
865
|
});
|
866
|
-
var [ArrayFieldRowProvider, useArrayFieldRowContext] = (0,
|
866
|
+
var [ArrayFieldRowProvider, useArrayFieldRowContext] = (0, import_utils7.createContext)({
|
867
867
|
name: "ArrayFieldRowContext"
|
868
868
|
});
|
869
869
|
var useArrayField = ({
|
@@ -925,7 +925,7 @@ var useArrayFieldAddButton = () => {
|
|
925
925
|
};
|
926
926
|
|
927
927
|
// src/array-field.tsx
|
928
|
-
var
|
928
|
+
var import_utils9 = require("@chakra-ui/utils");
|
929
929
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
930
930
|
var ArrayFieldRow = ({
|
931
931
|
children,
|
@@ -982,7 +982,7 @@ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
|
|
982
982
|
var ArrayField = (0, import_react16.forwardRef)(
|
983
983
|
(props, ref) => {
|
984
984
|
const { children, ...containerProps } = props;
|
985
|
-
const rowFn = (0,
|
985
|
+
const rowFn = (0, import_utils9.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
|
986
986
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ArrayFieldContainer, { ref, ...containerProps, children: [
|
987
987
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRows, { children: rowFn }),
|
988
988
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldAddButton, {})
|
@@ -1199,14 +1199,14 @@ DisplayIf.displayName = "DisplayIf";
|
|
1199
1199
|
// src/step-form.tsx
|
1200
1200
|
var React13 = __toESM(require("react"));
|
1201
1201
|
var import_react19 = require("@chakra-ui/react");
|
1202
|
-
var
|
1202
|
+
var import_utils12 = require("@chakra-ui/utils");
|
1203
1203
|
var import_core6 = require("@saas-ui/core");
|
1204
1204
|
|
1205
1205
|
// src/use-step-form.tsx
|
1206
1206
|
var React12 = __toESM(require("react"));
|
1207
|
-
var
|
1207
|
+
var import_utils11 = require("@chakra-ui/utils");
|
1208
1208
|
var import_core5 = require("@saas-ui/core");
|
1209
|
-
var [StepFormProvider, useStepFormContext] = (0,
|
1209
|
+
var [StepFormProvider, useStepFormContext] = (0, import_utils11.createContext)({
|
1210
1210
|
name: "StepFormContext",
|
1211
1211
|
errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
|
1212
1212
|
});
|
@@ -1347,7 +1347,7 @@ var FormStep = (props) => {
|
|
1347
1347
|
const { name, children, className, onSubmit, ...rest } = props;
|
1348
1348
|
const step = useFormStep({ name, onSubmit });
|
1349
1349
|
const { isActive } = step;
|
1350
|
-
return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0,
|
1350
|
+
return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils12.cx)("sui-form__step", className), children }) : null;
|
1351
1351
|
};
|
1352
1352
|
FormStep.displayName = "FormStep";
|
1353
1353
|
var PrevButton = (props) => {
|
@@ -1358,8 +1358,8 @@ var PrevButton = (props) => {
|
|
1358
1358
|
isDisabled: isFirstStep || isCompleted,
|
1359
1359
|
children: "Back",
|
1360
1360
|
...props,
|
1361
|
-
className: (0,
|
1362
|
-
onClick: (0,
|
1361
|
+
className: (0, import_utils12.cx)("sui-form__prev-button", props.className),
|
1362
|
+
onClick: (0, import_utils12.callAllHandlers)(props.onClick, prevStep)
|
1363
1363
|
}
|
1364
1364
|
);
|
1365
1365
|
};
|
@@ -1372,7 +1372,7 @@ var NextButton = (props) => {
|
|
1372
1372
|
{
|
1373
1373
|
...rest,
|
1374
1374
|
isDisabled: isCompleted,
|
1375
|
-
className: (0,
|
1375
|
+
className: (0, import_utils12.cx)("sui-form__next-button", props.className),
|
1376
1376
|
children: isLastStep || isCompleted ? submitLabel : label
|
1377
1377
|
}
|
1378
1378
|
);
|
@@ -1380,7 +1380,7 @@ var NextButton = (props) => {
|
|
1380
1380
|
NextButton.displayName = "NextButton";
|
1381
1381
|
|
1382
1382
|
// src/field-resolver.ts
|
1383
|
-
var
|
1383
|
+
var import_utils13 = require("@chakra-ui/utils");
|
1384
1384
|
var mapFields = (schema) => schema && Object.entries(schema).map(([name, props]) => {
|
1385
1385
|
const { items, label, title, ...field } = props;
|
1386
1386
|
return {
|
@@ -1396,7 +1396,7 @@ var objectFieldResolver = (schema) => {
|
|
1396
1396
|
};
|
1397
1397
|
const getNestedFields = (name) => {
|
1398
1398
|
var _a;
|
1399
|
-
const field = (0,
|
1399
|
+
const field = (0, import_utils13.get)(schema, name);
|
1400
1400
|
if (!field) return [];
|
1401
1401
|
if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
|
1402
1402
|
return mapFields(field.items.properties);
|
@@ -1429,7 +1429,7 @@ var import_react22 = require("@chakra-ui/react");
|
|
1429
1429
|
// src/form.tsx
|
1430
1430
|
var React14 = __toESM(require("react"));
|
1431
1431
|
var import_react20 = require("@chakra-ui/react");
|
1432
|
-
var
|
1432
|
+
var import_utils14 = require("@chakra-ui/utils");
|
1433
1433
|
var import_react_hook_form8 = require("react-hook-form");
|
1434
1434
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
1435
1435
|
var Form = (0, import_react20.forwardRef)(
|
@@ -1501,8 +1501,8 @@ var Form = (0, import_react20.forwardRef)(
|
|
1501
1501
|
ref,
|
1502
1502
|
onSubmit: handleSubmit(onSubmit, onError),
|
1503
1503
|
...rest,
|
1504
|
-
className: (0,
|
1505
|
-
children: (0,
|
1504
|
+
className: (0, import_utils14.cx)("sui-form", props.className),
|
1505
|
+
children: (0, import_utils14.runIfFn)(_children, {
|
1506
1506
|
Field,
|
1507
1507
|
DisplayIf,
|
1508
1508
|
ArrayField,
|
@@ -1560,7 +1560,7 @@ function createForm({
|
|
1560
1560
|
var import_react23 = require("react");
|
1561
1561
|
var import_react24 = require("@chakra-ui/react");
|
1562
1562
|
var import_core7 = require("@saas-ui/core");
|
1563
|
-
var
|
1563
|
+
var import_utils15 = require("@chakra-ui/utils");
|
1564
1564
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
1565
1565
|
function createStepForm({
|
1566
1566
|
fields,
|
@@ -1584,7 +1584,7 @@ function createStepForm({
|
|
1584
1584
|
},
|
1585
1585
|
getBaseField
|
1586
1586
|
};
|
1587
|
-
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core7.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0,
|
1587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core7.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils15.runIfFn)(children, {
|
1588
1588
|
...stepper,
|
1589
1589
|
Field,
|
1590
1590
|
FormStep,
|