@saas-ui/forms 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @saas-ui/forms
 
+## 2.3.0
+
+### Minor Changes
+
+- 68995558: Added new onToggle prop to DisplayIf
+- a3180b02: Removed all Component.defaultProps definitions
+
+### Patch Changes
+
+- Updated dependencies [31d05ed5]
+- Updated dependencies [dddb3d1a]
+- Updated dependencies [ebba8404]
+- Updated dependencies [91412d77]
+- Updated dependencies [a3180b02]
+- Updated dependencies [91412d77]
+  - @saas-ui/core@2.2.0
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -534,6 +534,7 @@ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName e
     isDisabled?: boolean;
     isExact?: boolean;
     condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
+    onToggle?: (conditionMatched: boolean, context: UseFormReturn$1<TFieldValues>) => void;
 }
 /**
  * Conditionally render parts of a form.
@@ -541,7 +542,7 @@ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName e
  * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
 declare const DisplayIf: {
-    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, onToggle, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
     displayName: string;
 };
 

package/dist/index.js

@@ -169,7 +169,7 @@ var import_core = require("@saas-ui/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var NumberInput = (0, import_react2.forwardRef)((props, ref) => {
   const {
-    hideStepper,
+    hideStepper = false,
     incrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronUpIcon, {}),
     decrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronDownIcon, {}),
     placeholder,
@@ -185,9 +185,6 @@ var NumberInput = (0, import_react2.forwardRef)((props, ref) => {
     ] })
   ] });
 });
-NumberInput.defaultProps = {
-  hideStepper: false
-};
 NumberInput.displayName = "NumberInput";
 
 // src/password-input/password-input.tsx
@@ -1082,9 +1079,10 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 var SubmitButton = (0, import_react18.forwardRef)(
   (props, ref) => {
     const {
+      variant = "primary",
       children = "Submit",
-      disableIfUntouched,
-      disableIfInvalid,
+      disableIfUntouched = false,
+      disableIfInvalid = false,
       isDisabled: isDisabledProp,
       isLoading,
       ...rest
@@ -1096,6 +1094,7 @@ var SubmitButton = (0, import_react18.forwardRef)(
       {
         ...rest,
         ref,
+        variant,
         type: "submit",
         isLoading: formState.isSubmitting || isLoading,
         isDisabled,
@@ -1104,14 +1103,10 @@ var SubmitButton = (0, import_react18.forwardRef)(
     );
   }
 );
-SubmitButton.defaultProps = {
-  variant: "primary",
-  disableIfUntouched: false,
-  disableIfInvalid: false
-};
 SubmitButton.displayName = "SubmitButton";
 
 // src/display-if.tsx
+var React10 = __toESM(require("react"));
 var import_react_hook_form6 = require("react-hook-form");
 var DisplayIf = ({
   children,
@@ -1119,8 +1114,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 = (0, import_react_hook_form6.useWatch)({
     name,
     defaultValue,
@@ -1128,18 +1126,29 @@ 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
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react19 = require("@chakra-ui/react");
 var import_utils9 = require("@chakra-ui/utils");
 var import_core4 = require("@saas-ui/core");
 
 // src/use-step-form.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react_utils3 = require("@chakra-ui/react-utils");
 var import_core3 = require("@saas-ui/core");
 var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
@@ -1155,11 +1164,11 @@ function useStepForm(props) {
     ...rest
   } = props;
   const stepper = (0, import_core3.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 {
@@ -1184,7 +1193,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep, mergedData]
   );
-  const getFormProps = React10.useCallback(() => {
+  const getFormProps = React11.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1196,7 +1205,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) => {
@@ -1222,7 +1231,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = (0, import_core3.useStep)({ name });
   const { steps, updateStep } = useStepFormContext();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1245,8 +1254,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__ */ (0, import_jsx_runtime19.jsx)(
         import_core4.StepsItem,
@@ -1262,7 +1271,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React11.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
@@ -1359,7 +1368,7 @@ var WatchField = (props) => {
 };
 
 // src/form.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react20 = require("@chakra-ui/react");
 var import_utils11 = require("@chakra-ui/utils");
 var import_react_hook_form8 = require("react-hook-form");
@@ -1405,8 +1414,8 @@ var Form = (0, import_react20.forwardRef)(
     };
     const methods = (0, import_react_hook_form8.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);