@saas-ui/forms 2.7.1 → 2.8.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +18 -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/package.json +2 -3
- 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,23 @@
|
|
1
1
|
# @saas-ui/forms
|
2
2
|
|
3
|
+
## 2.8.1
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- Updated dependencies [5e24ec4]
|
8
|
+
- @saas-ui/core@2.7.1
|
9
|
+
|
10
|
+
## 2.8.0
|
11
|
+
|
12
|
+
### Minor Changes
|
13
|
+
|
14
|
+
- fc799df: Removed deprecated Chakra UI dependency
|
15
|
+
|
16
|
+
### Patch Changes
|
17
|
+
|
18
|
+
- Updated dependencies [fc799df]
|
19
|
+
- @saas-ui/core@2.7.0
|
20
|
+
|
3
21
|
## 2.7.1
|
4
22
|
|
5
23
|
### Patch 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,
|