@saas-ui/forms 2.2.1 → 2.3.0

package/dist/index.mjs

@@ -87,7 +87,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "@saas-ui/core";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var NumberInput = forwardRef((props, ref) => {
   const {
-    hideStepper,
+    hideStepper = false,
     incrementIcon = /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
     decrementIcon = /* @__PURE__ */ jsx3(ChevronDownIcon, {}),
     placeholder,
@@ -103,9 +103,6 @@ var NumberInput = forwardRef((props, ref) => {
     ] })
   ] });
 });
-NumberInput.defaultProps = {
-  hideStepper: false
-};
 NumberInput.displayName = "NumberInput";
 
 // src/password-input/password-input.tsx
@@ -1044,9 +1041,10 @@ import { jsx as jsx18 } from "react/jsx-runtime";
 var SubmitButton = forwardRef12(
   (props, ref) => {
     const {
+      variant = "primary",
       children = "Submit",
-      disableIfUntouched,
-      disableIfInvalid,
+      disableIfUntouched = false,
+      disableIfInvalid = false,
       isDisabled: isDisabledProp,
       isLoading,
       ...rest
@@ -1058,6 +1056,7 @@ var SubmitButton = forwardRef12(
       {
         ...rest,
         ref,
+        variant,
         type: "submit",
         isLoading: formState.isSubmitting || isLoading,
         isDisabled,
@@ -1066,14 +1065,10 @@ var SubmitButton = forwardRef12(
     );
   }
 );
-SubmitButton.defaultProps = {
-  variant: "primary",
-  disableIfUntouched: false,
-  disableIfInvalid: false
-};
 SubmitButton.displayName = "SubmitButton";
 
 // src/display-if.tsx
+import * as React10 from "react";
 import {
   useWatch
 } from "react-hook-form";
@@ -1083,8 +1078,11 @@ var DisplayIf = ({
   defaultValue,
   isDisabled,
   isExact,
-  condition = (value) => !!value
+  condition = (value) => !!value,
+  onToggle
 }) => {
+  const initializedRef = React10.useRef(false);
+  const matchesRef = React10.useRef(false);
   const value = useWatch({
     name,
     defaultValue,
@@ -1092,12 +1090,23 @@ var DisplayIf = ({
     exact: isExact
   });
   const context = useFormContext();
-  return condition(value, context) ? children : null;
+  const matches = condition(value, context);
+  React10.useEffect(() => {
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      return;
+    }
+    if (matchesRef.current === matches)
+      return;
+    matchesRef.current = matches;
+    onToggle == null ? void 0 : onToggle(matches, context);
+  }, [value]);
+  return matches ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
 
 // src/step-form.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import {
   chakra as chakra4,
   Button as Button5
@@ -1110,7 +1119,7 @@ import {
 } from "@saas-ui/core";
 
 // src/use-step-form.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { createContext as createContext4 } from "@chakra-ui/react-utils";
 import {
   useStepper,
@@ -1129,11 +1138,11 @@ function useStepForm(props) {
     ...rest
   } = props;
   const stepper = useStepper(rest);
-  const [options, setOptions] = React10.useState(stepsOptions);
+  const [options, setOptions] = React11.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React10.useState({});
-  const mergedData = React10.useRef({});
-  const onSubmitStep = React10.useCallback(
+  const [steps, updateSteps] = React11.useState({});
+  const mergedData = React11.useRef({});
+  const onSubmitStep = React11.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -1158,7 +1167,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep, mergedData]
   );
-  const getFormProps = React10.useCallback(() => {
+  const getFormProps = React11.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1170,7 +1179,7 @@ function useStepForm(props) {
       fieldResolver: (step == null ? void 0 : step.schema) ? fieldResolver == null ? void 0 : fieldResolver(step.schema) : void 0
     };
   }, [steps, onSubmitStep, activeStep, resolver, fieldResolver]);
-  const updateStep = React10.useCallback(
+  const updateStep = React11.useCallback(
     (step) => {
       const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
@@ -1196,7 +1205,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1219,8 +1228,8 @@ var FormStepper = (props) => {
     render,
     ...rest
   } = props;
-  const elements = React11.Children.map(children, (child) => {
-    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React12.Children.map(children, (child) => {
+    if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx19(
         StepsItem,
@@ -1236,7 +1245,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React11.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1333,7 +1342,7 @@ var WatchField = (props) => {
 };
 
 // src/form.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
 import { cx as cx4, runIfFn } from "@chakra-ui/utils";
 import {
@@ -1381,8 +1390,8 @@ var Form = forwardRef13(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React12.useEffect(() => {
+    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React13.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);