@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 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 import_utils3 = require("@chakra-ui/utils");
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 import_react_utils = require("@chakra-ui/react-utils");
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, import_react_utils.createContext)({
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, import_utils3.dataAttr)(isInvalid),
465
- "data-read-only": (0, import_utils3.dataAttr)(isReadOnly),
466
- "data-focus": (0, import_utils3.dataAttr)(isFocused),
467
- "data-required": (0, import_utils3.dataAttr)(isRequired),
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, import_utils3.cx)("sui-select"), children: [
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 import_utils4 = require("@chakra-ui/utils");
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, import_utils4.callAllHandlers)(onChange, field.onChange),
666
- onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
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, import_utils4.callAllHandlers)(onChange, field.onChange),
687
- onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
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 import_utils5 = require("@chakra-ui/utils");
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, import_utils5.cx)("sui-form__layout", props.className),
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 import_react_utils2 = require("@chakra-ui/react-utils");
863
- var [ArrayFieldProvider, useArrayFieldContext] = (0, import_react_utils2.createContext)({
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, import_react_utils2.createContext)({
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 import_utils7 = require("@chakra-ui/utils");
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, import_utils7.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 });
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 import_utils9 = require("@chakra-ui/utils");
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 import_react_utils3 = require("@chakra-ui/react-utils");
1207
+ var import_utils11 = require("@chakra-ui/utils");
1208
1208
  var import_core5 = require("@saas-ui/core");
1209
- var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
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, import_utils9.cx)("sui-form__step", className), children }) : null;
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, import_utils9.cx)("sui-form__prev-button", props.className),
1362
- onClick: (0, import_utils9.callAllHandlers)(props.onClick, prevStep)
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, import_utils9.cx)("sui-form__next-button", props.className),
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 import_utils10 = require("@chakra-ui/utils");
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, import_utils10.get)(schema, name);
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 import_utils11 = require("@chakra-ui/utils");
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, import_utils11.cx)("sui-form", props.className),
1505
- children: (0, import_utils11.runIfFn)(_children, {
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 import_utils12 = require("@chakra-ui/utils");
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, import_utils12.runIfFn)(children, {
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,