@underverse-ui/underverse 0.2.18 → 0.2.20

package/dist/index.js

@@ -2251,29 +2251,28 @@ var useToast = () => {
   }
   return context;
 };
-var ToastProvider = ({
-  children,
-  position = "top-right",
-  maxToasts = 5
-}) => {
+var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   const [toasts, setToasts] = useState8([]);
   const idRef = useRef2(0);
   const removeToast = useCallback2((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
-  const addToast = useCallback2((toast) => {
-    const id = `toast-${++idRef.current}`;
-    const newToast = { ...toast, id };
-    setToasts((prev) => {
-      const updated = [newToast, ...prev];
-      return updated.slice(0, maxToasts);
-    });
-    if (toast.duration !== 0) {
-      setTimeout(() => {
-        removeToast(id);
-      }, toast.duration || 5e3);
-    }
-  }, [maxToasts, removeToast]);
+  const addToast = useCallback2(
+    (toast) => {
+      const id = `toast-${++idRef.current}`;
+      const newToast = { ...toast, id };
+      setToasts((prev) => {
+        const updated = [newToast, ...prev];
+        return updated.slice(0, maxToasts);
+      });
+      if (toast.duration !== 0) {
+        setTimeout(() => {
+          removeToast(id);
+        }, toast.duration || 5e3);
+      }
+    },
+    [maxToasts, removeToast]
+  );
   const positionClasses = {
     "top-right": "top-4 right-4",
     "top-left": "top-4 left-4",
@@ -2284,7 +2283,7 @@ var ToastProvider = ({
   };
   return /* @__PURE__ */ jsxs12(ToastContext.Provider, { value: { addToast, removeToast, toasts }, children: [
     children,
-    /* @__PURE__ */ jsx14("div", { className: cn("fixed z-50 flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ jsx14(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
+    /* @__PURE__ */ jsx14("div", { className: cn("fixed z-[99999] flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ jsx14(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
   ] });
 };
 var ToastComponent = ({ toast, onRemove }) => {
@@ -3725,36 +3724,34 @@ var DropdownMenu = ({
     if (open && triggerRef.current && contentRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const menuRect = contentRef.current.getBoundingClientRect();
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
       const viewportHeight = window.innerHeight;
-      let top = rect.bottom + scrollTop + 4;
-      let left = rect.left + scrollLeft;
+      let top = rect.bottom + 4;
+      let left = rect.left;
       if (rect.bottom + menuRect.height > viewportHeight && rect.top > menuRect.height) {
-        top = rect.top + scrollTop - menuRect.height - 4;
+        top = rect.top - menuRect.height - 4;
       }
       switch (placement) {
         case "top":
         case "top-start":
-          top = rect.top + scrollTop - menuRect.height - 4;
+          top = rect.top - menuRect.height - 4;
           break;
         case "top-end":
-          top = rect.top + scrollTop - menuRect.height - 4;
-          left = rect.right + scrollLeft - menuRect.width;
+          top = rect.top - menuRect.height - 4;
+          left = rect.right - menuRect.width;
           break;
         case "bottom":
         case "bottom-start":
           break;
         case "bottom-end":
-          left = rect.right + scrollLeft - menuRect.width;
+          left = rect.right - menuRect.width;
           break;
         case "left":
-          top = rect.top + scrollTop;
-          left = rect.left + scrollLeft - menuRect.width - 4;
+          top = rect.top;
+          left = rect.left - menuRect.width - 4;
           break;
         case "right":
-          top = rect.top + scrollTop;
-          left = rect.right + scrollLeft + 4;
+          top = rect.top;
+          left = rect.right + 4;
           break;
       }
       setPosition({ top, left });
@@ -3828,7 +3825,7 @@ var DropdownMenu = ({
       "data-combobox-dropdown": true,
       ref: contentRef,
       style: {
-        position: "absolute",
+        position: "fixed",
         top: position?.top ?? -9999,
         left: position?.left ?? -9999,
         zIndex: 9999,
@@ -10315,25 +10312,23 @@ var isPlainObject = (tempObject) => {
 };
 var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
 function cloneObject(data) {
-  let copy;
-  const isArray = Array.isArray(data);
-  const isFileListInstance = typeof FileList !== "undefined" ? data instanceof FileList : false;
   if (data instanceof Date) {
-    copy = new Date(data);
-  } else if (!(isWeb && (data instanceof Blob || isFileListInstance)) && (isArray || isObject(data))) {
-    copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-    if (!isArray && !isPlainObject(data)) {
-      copy = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
+    return new Date(data);
+  }
+  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
+  if (isWeb && (data instanceof Blob || isFileListInstance)) {
     return data;
   }
+  const isArray = Array.isArray(data);
+  if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    return data;
+  }
+  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      copy[key] = cloneObject(data[key]);
+    }
+  }
   return copy;
 }
 var isKey = (value) => /^\w*$/.test(value);
@@ -10348,6 +10343,7 @@ var get = (object, path, defaultValue) => {
   return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
 var isBoolean = (value) => typeof value === "boolean";
+var isFunction = (value) => typeof value === "function";
 var set = (object, path, value) => {
   let index = -1;
   const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -10459,7 +10455,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
   if (isPrimitive(object1) || isPrimitive(object2)) {
-    return object1 === object2;
+    return Object.is(object1, object2);
   }
   if (isDateObject(object1) && isDateObject(object2)) {
     return object1.getTime() === object2.getTime();
@@ -10481,7 +10477,7 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
     }
     if (key !== "ref") {
       const val2 = object2[key];
-      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
+      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : !Object.is(val1, val2)) {
         return false;
       }
     }
@@ -10494,48 +10490,76 @@ function useWatch(props) {
   const _defaultValue = React38.useRef(defaultValue);
   const _compute = React38.useRef(compute);
   const _computeFormValues = React38.useRef(void 0);
+  const _prevControl = React38.useRef(control);
+  const _prevName = React38.useRef(name);
   _compute.current = compute;
-  const defaultValueMemo = React38.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = React38.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-  useIsomorphicLayoutEffect(() => control._subscribe({
-    name,
-    formState: {
-      values: true
-    },
-    exact,
-    callback: (formState) => {
-      if (!disabled) {
-        const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
-        if (_compute.current) {
-          const computedFormValues = _compute.current(formValues);
-          if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-            updateValue(computedFormValues);
-            _computeFormValues.current = computedFormValues;
-          }
-        } else {
-          updateValue(formValues);
+  const [value, updateValue] = React38.useState(() => {
+    const defaultValue2 = control._getWatch(name, _defaultValue.current);
+    return _compute.current ? _compute.current(defaultValue2) : defaultValue2;
+  });
+  const getCurrentOutput = React38.useCallback((values) => {
+    const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+    return _compute.current ? _compute.current(formValues) : formValues;
+  }, [control._formValues, control._names, name]);
+  const refreshValue = React38.useCallback((values) => {
+    if (!disabled) {
+      const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+      if (_compute.current) {
+        const computedFormValues = _compute.current(formValues);
+        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+          updateValue(computedFormValues);
+          _computeFormValues.current = computedFormValues;
         }
+      } else {
+        updateValue(formValues);
       }
     }
-  }), [control, disabled, name, exact]);
+  }, [control._formValues, control._names, disabled, name]);
+  useIsomorphicLayoutEffect(() => {
+    if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+      _prevControl.current = control;
+      _prevName.current = name;
+      refreshValue();
+    }
+    return control._subscribe({
+      name,
+      formState: {
+        values: true
+      },
+      exact,
+      callback: (formState) => {
+        refreshValue(formState.values);
+      }
+    });
+  }, [control, exact, name, refreshValue]);
   React38.useEffect(() => control._removeUnmounted());
-  return value;
+  const controlChanged = _prevControl.current !== control;
+  const prevName = _prevName.current;
+  const computedOutput = React38.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    const nameChanged = !controlChanged && !deepEqual(prevName, name);
+    const shouldReturnImmediate = controlChanged || nameChanged;
+    return shouldReturnImmediate ? getCurrentOutput() : null;
+  }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+  return computedOutput !== null ? computedOutput : value;
 }
 function useController(props) {
   const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
+  const { name, disabled, control = methods.control, shouldUnregister, defaultValue, exact = true } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
   const defaultValueMemo = React38.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
     defaultValue: defaultValueMemo,
-    exact: true
+    exact
   });
   const formState = useFormState({
     control,
     name,
-    exact: true
+    exact
   });
   const _props = React38.useRef(props);
   const _previousNameRef = React38.useRef(void 0);
@@ -10583,12 +10607,12 @@ function useController(props) {
   }), [name, control._formValues]);
   const ref = React38.useCallback((elm) => {
     const field2 = get(control._fields, name);
-    if (field2 && elm) {
+    if (field2 && field2._f && elm) {
       field2._f.ref = {
-        focus: () => elm.focus && elm.focus(),
-        select: () => elm.select && elm.select(),
-        setCustomValidity: (message) => elm.setCustomValidity(message),
-        reportValidity: () => elm.reportValidity()
+        focus: () => isFunction(elm.focus) && elm.focus(),
+        select: () => isFunction(elm.select) && elm.select(),
+        setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+        reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity()
       };
     }
   }, [control._fields, name]);
@@ -10698,7 +10722,6 @@ function extractFormValues(fieldsState, formValues) {
 }
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 var isFileInput = (element) => element.type === "file";
-var isFunction = (value) => typeof value === "function";
 var isHTMLElement = (value) => {
   if (!isWeb) {
     return false;
@@ -10752,10 +10775,11 @@ function isTraversable(value) {
 }
 function markFieldsDirty(data, fields = {}) {
   for (const key in data) {
-    if (isTraversable(data[key])) {
-      fields[key] = Array.isArray(data[key]) ? [] : {};
-      markFieldsDirty(data[key], fields[key]);
-    } else if (!isUndefined(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
+      fields[key] = Array.isArray(value) ? [] : {};
+      markFieldsDirty(value, fields[key]);
+    } else if (!isUndefined(value)) {
       fields[key] = true;
     }
   }
@@ -10766,14 +10790,16 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
     dirtyFieldsFromValues = markFieldsDirty(formValues);
   }
   for (const key in data) {
-    if (isTraversable(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
       if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-        dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
+        dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
       } else {
-        getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+        getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
       }
     } else {
-      dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+      const formValue = formValues[key];
+      dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
     }
   }
   return dirtyFieldsFromValues;
@@ -11125,7 +11151,8 @@ function createFormControl(props = {}) {
   let _state = {
     action: false,
     mount: false,
-    watch: false
+    watch: false,
+    keepIsValid: false
   };
   let _names = {
     mount: /* @__PURE__ */ new Set(),
@@ -11136,7 +11163,7 @@ function createFormControl(props = {}) {
   };
   let delayErrorCallback;
   let timer = 0;
-  const _proxyFormState = {
+  const defaultProxyFormState = {
     isDirty: false,
     dirtyFields: false,
     validatingFields: false,
@@ -11145,6 +11172,9 @@ function createFormControl(props = {}) {
     isValid: false,
     errors: false
   };
+  const _proxyFormState = {
+    ...defaultProxyFormState
+  };
   let _proxySubscribeFormState = {
     ..._proxyFormState
   };
@@ -11158,8 +11188,17 @@ function createFormControl(props = {}) {
     timer = setTimeout(callback, wait);
   };
   const _setValid = async (shouldUpdateValid) => {
+    if (_state.keepIsValid) {
+      return;
+    }
     if (!_options.disabled && (_proxyFormState.isValid || _proxySubscribeFormState.isValid || shouldUpdateValid)) {
-      const isValid = _options.resolver ? isEmptyObject((await _runSchema()).errors) : await executeBuiltInValidation(_fields, true);
+      let isValid;
+      if (_options.resolver) {
+        isValid = isEmptyObject((await _runSchema()).errors);
+        _updateIsValidating();
+      } else {
+        isValid = await executeBuiltInValidation(_fields, true);
+      }
       if (isValid !== _formState.isValid) {
         _subjects.state.next({
           isValid
@@ -11228,7 +11267,7 @@ function createFormControl(props = {}) {
     if (field) {
       const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
       isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-      _state.mount && _setValid();
+      _state.mount && !_state.action && _setValid();
     }
   };
   const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -11290,11 +11329,11 @@ function createFormControl(props = {}) {
   const _runSchema = async (name) => {
     _updateIsValidating(name, true);
     const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-    _updateIsValidating(name);
     return result;
   };
   const executeSchemaAndUpdateState = async (names) => {
     const { errors } = await _runSchema(names);
+    _updateIsValidating(names);
     if (names) {
       for (const name of names) {
         const error = get(errors, name);
@@ -11473,6 +11512,7 @@ function createFormControl(props = {}) {
       !isBlurEvent && watched && _subjects.state.next({ ..._formState });
       if (_options.resolver) {
         const { errors } = await _runSchema([name]);
+        _updateIsValidating([name]);
         _updateIsFieldValueUpdated(fieldValue);
         if (isFieldValueUpdated) {
           const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -11593,7 +11633,10 @@ function createFormControl(props = {}) {
     };
     return _subscribe({
       ...props2,
-      formState: _proxySubscribeFormState
+      formState: {
+        ...defaultProxyFormState,
+        ...props2.formState
+      }
     });
   };
   const unregister = (name, options = {}) => {
@@ -11721,6 +11764,7 @@ function createFormControl(props = {}) {
     });
     if (_options.resolver) {
       const { errors, values } = await _runSchema();
+      _updateIsValidating();
       _formState.errors = errors;
       fieldValues = cloneObject(values);
     } else {
@@ -11839,8 +11883,13 @@ function createFormControl(props = {}) {
       watchAll: false,
       focus: ""
     };
-    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues;
+    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues || !_options.shouldUnregister && !isEmptyObject(values);
     _state.watch = !!_options.shouldUnregister;
+    _state.keepIsValid = !!keepStateOptions.keepIsValid;
+    _state.action = false;
+    if (!keepStateOptions.keepErrors) {
+      _formState.errors = {};
+    }
     _subjects.state.next({
       submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
       isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
@@ -11853,15 +11902,17 @@ function createFormControl(props = {}) {
       defaultValues: _defaultValues
     });
   };
-  const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
+  const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, { ..._options.resetOptions, ...keepStateOptions });
   const setFocus = (name, options = {}) => {
     const field = get(_fields, name);
     const fieldReference = field && field._f;
     if (fieldReference) {
       const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
       if (fieldRef.focus) {
-        fieldRef.focus();
-        options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
+        setTimeout(() => {
+          fieldRef.focus();
+          options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
+        });
       }
     }
   };
@@ -11886,6 +11937,7 @@ function createFormControl(props = {}) {
       setError,
       _subscribe,
       _runSchema,
+      _updateIsValidating,
       _focusError,
       _getWatch,
       _getDirty,
@@ -12037,11 +12089,15 @@ function useForm(props = {}) {
     }
   }, [control, formState.isDirty]);
   React38.useEffect(() => {
+    var _a;
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
         ...control._options.resetOptions
       });
+      if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+        control._setValid();
+      }
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
     } else {