@dreamtree-org/twreact-ui 1.1.1 → 1.1.3

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, memo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
+import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function _extends() {
@@ -3346,8 +3346,8 @@ function _defineProperty$4(e, r, t) {
 }
 
 var _excluded$l = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /**
  * Enhanced Select component (debounce removed)
@@ -3370,7 +3370,7 @@ var flattenGroups = function flattenGroups() {
   return groups.reduce(function (acc, g) {
     var groupLabel = g.label;
     g.options.forEach(function (opt) {
-      return acc.push(_objectSpread$b(_objectSpread$b({}, opt), {}, {
+      return acc.push(_objectSpread$a(_objectSpread$a({}, opt), {}, {
         _group: groupLabel
       }));
     });
@@ -3460,7 +3460,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   var flatOptions = useMemo(function () {
     if (grouped) return flattenGroups(options);
     return options.map(function (opt) {
-      return _objectSpread$b({}, opt);
+      return _objectSpread$a({}, opt);
     });
   }, [options, grouped]);
   var selectedValues = multiSelect ? Array.isArray(value) ? value : [] : value;
@@ -3487,7 +3487,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     }
     if (grouped) {
       return options.map(function (g) {
-        return _objectSpread$b(_objectSpread$b({}, g), {}, {
+        return _objectSpread$a(_objectSpread$a({}, g), {}, {
           options: g.options.filter(function (o) {
             return o.label.toLowerCase().includes(searchTerm.toLowerCase());
           })
@@ -3714,7 +3714,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100",
         onClick: function onClick() {
           return setCollapsedGroups(function (prev) {
-            return _objectSpread$b(_objectSpread$b({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
+            return _objectSpread$a(_objectSpread$a({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
           });
         }
       }, /*#__PURE__*/React__default.createElement(ChevronDown, {
@@ -4185,78 +4185,137 @@ function MobileFilters(_ref) {
   })));
 }
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
-/**
- * Action menu dropdown component for table row actions
- * Uses fixed positioning with smart placement above/below anchor
- */
-var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
+function ActionMenu(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
+    onClose = _ref.onClose,
     menuRef = _ref.menuRef,
-    anchorEl = _ref.anchorEl,
-    onClose = _ref.onClose;
+    anchorEl = _ref.anchorEl;
   var _useState = useState({
-      top: 0,
       left: 0,
-      visibility: "hidden"
+      top: 0,
+      transformOrigin: "top right",
+      maxHeight: 300,
+      width: 180,
+      opacity: 0
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    pos = _useState2[0],
-    setPos = _useState2[1];
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var menuWidth = 180;
+  var maxMenuHeight = 320;
+  var minMenuHeight = 80;
+  var margin = 8;
   useLayoutEffect(function () {
-    if (!anchorEl || !(menuRef !== null && menuRef !== void 0 && menuRef.current) || typeof window === "undefined") {
-      setPos(function (p) {
-        return _objectSpread$a(_objectSpread$a({}, p), {}, {
-          visibility: "hidden"
-        });
+    computePosition();
+    var handleResize = function handleResize() {
+      window.requestAnimationFrame(function () {
+        return computePosition();
       });
-      return;
-    }
-    var menu = menuRef.current;
+    };
+    var handleScroll = function handleScroll() {
+      onClose === null || onClose === void 0 || onClose();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [anchorEl, actions, menuRef, onClose]);
+  var computePosition = function computePosition() {
+    if (!anchorEl || typeof window === "undefined") return;
     var rect = anchorEl.getBoundingClientRect();
-    var menuWidth = menu.offsetWidth || 176;
-    var menuHeight = menu.offsetHeight || menu.scrollHeight || 200;
-    var viewportWidth = window.innerWidth;
-    var viewportHeight = window.innerHeight;
-    var scrollX = window.scrollX || window.pageXOffset || 0;
     var scrollY = window.scrollY || window.pageYOffset || 0;
-    var preferBelowTop = rect.bottom + scrollY + 6;
-    var preferAboveTop = rect.top + scrollY - menuHeight - 6;
+    var scrollX = window.scrollX || window.pageXOffset || 0;
+    var spaceBelow = window.innerHeight - rect.bottom;
+    var spaceAbove = rect.top;
 
-    // Calculate horizontal position
-    var left = rect.right + scrollX - menuWidth;
-    if (left < 8) left = 8;
-    if (left + menuWidth > viewportWidth - 8) {
-      left = Math.max(8, viewportWidth - menuWidth - 8);
+    // allowed max height based on available space
+    var allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, Math.max(spaceBelow - margin, spaceAbove - margin)));
+
+    // decide placement
+    var placement = "bottom";
+    if (spaceBelow < 160 && spaceAbove > spaceBelow) {
+      placement = "top";
+      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
+    } else {
+      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
+    }
+
+    // measure content height if available
+    var measuredMenuHeight = allowedMaxHeight;
+    var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
+    if (menuEl) {
+      var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
+      measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
     }
 
-    // Calculate vertical position
+    // compute top based on placement
     var top;
-    if (preferBelowTop + menuHeight <= scrollY + viewportHeight - 8) {
-      top = preferBelowTop;
-    } else if (preferAboveTop >= scrollY + 8) {
-      top = preferAboveTop;
+    if (placement === "top") {
+      top = rect.top + scrollY - measuredMenuHeight - margin;
     } else {
-      top = Math.max(scrollY + 8, Math.min(preferBelowTop, scrollY + viewportHeight - menuHeight - 8));
+      top = rect.bottom + scrollY + margin;
     }
-    setPos({
-      top: top,
+
+    // clamp top to viewport
+    var minTop = margin + scrollY;
+    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
+    if (top < minTop) top = minTop;
+    if (top > maxTop) top = maxTop;
+
+    // compute left and clamp horizontally (align right edge of menu to anchor right)
+    var left = rect.right + scrollX - menuWidth;
+    if (left < margin) left = margin;
+    if (left + menuWidth > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - menuWidth - margin);
+    }
+    var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
+
+    // Apply style (fade-in by setting opacity to 1)
+    setStyle({
       left: left,
-      visibility: "visible"
+      top: top,
+      transformOrigin: transformOrigin,
+      maxHeight: allowedMaxHeight,
+      width: menuWidth,
+      opacity: 1
     });
-  }, [anchorEl, menuRef, actions, row]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  };
+
+  // measure & position before paint
+  useLayoutEffect(function () {
+    computePosition();
+    var onScrollOrResize = function onScrollOrResize() {
+      window.requestAnimationFrame(function () {
+        return computePosition();
+      });
+    };
+    window.addEventListener("resize", onScrollOrResize);
+    window.addEventListener("scroll", onScrollOrResize, true);
+    return function () {
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
+    };
+    // recompute when anchor or actions change (content height may change)
+  }, [anchorEl, actions, menuRef]);
+
+  // Render into body
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
-    className: "absolute right-0 z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
     style: {
-      visibility: pos.visibility,
-      minWidth: 176
+      position: "absolute",
+      top: style.top,
+      left: style.left,
+      width: style.width,
+      maxHeight: style.maxHeight,
+      transformOrigin: style.transformOrigin,
+      opacity: style.opacity
     },
+    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4268,18 +4327,25 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: action.name,
       className: "px-1"
-    }, /*#__PURE__*/React__default.createElement("button", {
+    }, action.render ? /*#__PURE__*/React__default.createElement("button", {
       className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
         onClose === null || onClose === void 0 || onClose();
       }
-    }, action.render ? action.render(row) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, action.icon && /*#__PURE__*/React__default.createElement("span", {
+    }, action.render(row)) : /*#__PURE__*/React__default.createElement("button", {
+      className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onAction === null || onAction === void 0 || onAction(action, row);
+        onClose === null || onClose === void 0 || onClose();
+      }
+    }, action.icon && /*#__PURE__*/React__default.createElement("span", {
       className: "inline-flex"
-    }, action.icon), /*#__PURE__*/React__default.createElement("span", null, action.label))));
-  })));
-});
+    }, action.icon), /*#__PURE__*/React__default.createElement("span", null, action.label)));
+  }))), document.body);
+}
 
 /**
  * Desktop table row component
@@ -5264,29 +5330,23 @@ var isWeb = typeof window !== '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);
+        return new Date(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
-        (isArray || isObject$1(data))) {
-        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-        if (!isArray && !isPlainObject$3(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    copy[key] = cloneObject(data[key]);
-                }
-            }
-        }
+    const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
+    if (isWeb && (data instanceof Blob || isFileListInstance)) {
+        return data;
     }
-    else {
+    const isArray = Array.isArray(data);
+    if (!isArray && !(isObject$1(data) && isPlainObject$3(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;
 }
 
@@ -5312,6 +5372,8 @@ var get$1 = (object, path, defaultValue) => {
 
 var isBoolean$3 = (value) => typeof value === 'boolean';
 
+var isFunction$3 = (value) => typeof value === 'function';
+
 var set$1 = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -5359,73 +5421,16 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React__default.createContext(null);
-HookFormContext.displayName = 'HookFormContext';
 /**
- * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @returns return all useForm methods
- *
- * @example
- * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
- * ```
+ * Separate context for `control` to prevent unnecessary rerenders.
+ * Internal hooks that only need control use this instead of full form context.
  */
-const useFormContext = () => React__default.useContext(HookFormContext);
+const HookFormControlContext = React__default.createContext(null);
+HookFormControlContext.displayName = 'HookFormControlContext';
 /**
- * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @param props - all useForm methods
- *
- * @example
- * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
- * ```
+ * @internal Internal hook to access only control from context.
  */
-const FormProvider = (props) => {
-    const { children, ...data } = props;
-    return (React__default.createElement(HookFormContext.Provider, { value: data }, children));
-};
+const useFormControlContext = () => React__default.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -5479,8 +5484,8 @@ const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__defau
  * ```
  */
 function useFormState(props) {
-    const methods = useFormContext();
-    const { control = methods.control, disabled, name, exact } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React__default.useState(control._formState);
     const _localProxyFormState = React__default.useRef({
         isDirty: false,
@@ -5532,7 +5537,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
         return Object.is(object1, object2);
     }
     if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
+        return Object.is(object1.getTime(), object2.getTime());
     }
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
@@ -5580,8 +5585,8 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```
  */
 function useWatch(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React__default.useRef(defaultValue);
     const _compute = React__default.useRef(compute);
     const _computeFormValues = React__default.useRef(undefined);
@@ -5674,8 +5679,8 @@ function useWatch(props) {
  * ```
  */
 function useController(props) {
-    const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, exact = true, } = props;
+    const formControl = useFormControlContext();
+    const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React__default.useMemo(() => get$1(control._formValues, name, get$1(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
@@ -5735,12 +5740,12 @@ function useController(props) {
     }), [name, control._formValues]);
     const ref = React__default.useCallback((elm) => {
         const field = get$1(control._fields, name);
-        if (field && elm) {
+        if (field && field._f && elm) {
             field._f.ref = {
-                focus: () => elm.focus && elm.focus(),
-                select: () => elm.select && elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
+                focus: () => isFunction$3(elm.focus) && elm.focus(),
+                select: () => isFunction$3(elm.select) && elm.select(),
+                setCustomValidity: (message) => isFunction$3(elm.setCustomValidity) && elm.setCustomValidity(message),
+                reportValidity: () => isFunction$3(elm.reportValidity) && elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
@@ -5847,6 +5852,78 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const HookFormContext = React__default.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+/**
+ * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @param props - all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
+const FormProvider = (props) => {
+    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
+    return (React__default.createElement(HookFormContext.Provider, { value: React__default.useMemo(() => ({
+            watch,
+            getValues,
+            getFieldState,
+            setError,
+            clearErrors,
+            setValue,
+            trigger,
+            formState,
+            resetField,
+            reset,
+            handleSubmit,
+            unregister,
+            control,
+            register,
+            setFocus,
+            subscribe,
+        }), [
+            clearErrors,
+            control,
+            formState,
+            getFieldState,
+            getValues,
+            handleSubmit,
+            register,
+            reset,
+            resetField,
+            setError,
+            setFocus,
+            setValue,
+            subscribe,
+            trigger,
+            unregister,
+            watch,
+        ]) },
+        React__default.createElement(HookFormControlContext.Provider, { value: control }, children)));
+};
+
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? {
         ...errors[name],
@@ -5911,8 +5988,6 @@ var isEmptyObject$1 = (value) => isObject$1(value) && !Object.keys(value).length
 
 var isFileInput = (element) => element.type === 'file';
 
-var isFunction$3 = (value) => typeof value === 'function';
-
 var isHTMLElement = (value) => {
     if (!isWeb) {
         return false;
@@ -6480,6 +6555,7 @@ function createFormControl(props = {}) {
         action: false,
         mount: false,
         watch: false,
+        keepIsValid: false,
     };
     let _names = {
         mount: new Set(),
@@ -6490,7 +6566,7 @@ function createFormControl(props = {}) {
     };
     let delayErrorCallback;
     let timer = 0;
-    const _proxyFormState = {
+    const defaultProxyFormState = {
         isDirty: false,
         dirtyFields: false,
         validatingFields: false,
@@ -6499,6 +6575,9 @@ function createFormControl(props = {}) {
         isValid: false,
         errors: false,
     };
+    const _proxyFormState = {
+        ...defaultProxyFormState,
+    };
     let _proxySubscribeFormState = {
         ..._proxyFormState,
     };
@@ -6512,13 +6591,21 @@ 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$1((await _runSchema()).errors)
-                : await executeBuiltInValidation(_fields, true);
+            let isValid;
+            if (_options.resolver) {
+                isValid = isEmptyObject$1((await _runSchema()).errors);
+                _updateIsValidating();
+            }
+            else {
+                isValid = await executeBuiltInValidation(_fields, true);
+            }
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
                     isValid,
@@ -6681,11 +6768,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$1(errors, name);
@@ -6718,7 +6805,7 @@ function createFormControl(props = {}) {
                     }
                     if (fieldError[_f.name]) {
                         context.valid = false;
-                        if (shouldOnlyCheckValid) {
+                        if (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
                             break;
                         }
                     }
@@ -6853,11 +6940,19 @@ function createFormControl(props = {}) {
                 ? setValues(name, cloneValue, options)
                 : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({ ..._formState, name });
-        _subjects.state.next({
-            name: _state.mount ? name : undefined,
-            values: cloneObject(_formValues),
-        });
+        if (isWatched(name, _names)) {
+            _subjects.state.next({
+                ..._formState,
+                name,
+                values: cloneObject(_formValues),
+            });
+        }
+        else {
+            _subjects.state.next({
+                name: _state.mount ? name : undefined,
+                values: cloneObject(_formValues),
+            });
+        }
     };
     const onChange = async (event) => {
         _state.mount = true;
@@ -6921,6 +7016,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);
@@ -7066,7 +7162,10 @@ function createFormControl(props = {}) {
         };
         return _subscribe({
             ...props,
-            formState: _proxySubscribeFormState,
+            formState: {
+                ...defaultProxyFormState,
+                ...props.formState,
+            },
         });
     };
     const unregister = (name, options = {}) => {
@@ -7099,7 +7198,11 @@ function createFormControl(props = {}) {
         if ((isBoolean$3(disabled) && _state.mount) ||
             !!disabled ||
             _names.disabled.has(name)) {
+            const wasDisabled = _names.disabled.has(name);
+            const isDisabled = !!disabled;
+            const disabledStateChanged = wasDisabled !== isDisabled;
             disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+            disabledStateChanged && _state.mount && !_state.action && _setValid();
         }
     };
     const register = (name, options = {}) => {
@@ -7219,6 +7322,7 @@ function createFormControl(props = {}) {
         });
         if (_options.resolver) {
             const { errors, values } = await _runSchema();
+            _updateIsValidating();
             _formState.errors = errors;
             fieldValues = cloneObject(values);
         }
@@ -7300,9 +7404,15 @@ function createFormControl(props = {}) {
                     ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
                 ]);
                 for (const fieldName of Array.from(fieldsToCheck)) {
-                    get$1(_formState.dirtyFields, fieldName)
-                        ? set$1(values, fieldName, get$1(_formValues, fieldName))
-                        : setValue(fieldName, get$1(values, fieldName));
+                    const isDirty = get$1(_formState.dirtyFields, fieldName);
+                    const existingValue = get$1(_formValues, fieldName);
+                    const newValue = get$1(values, fieldName);
+                    if (isDirty && !isUndefined$1(existingValue)) {
+                        set$1(values, fieldName, existingValue);
+                    }
+                    else if (!isDirty && !isUndefined$1(newValue)) {
+                        setValue(fieldName, newValue);
+                    }
                 }
             }
             else {
@@ -7359,6 +7469,14 @@ function createFormControl(props = {}) {
                 !!keepStateOptions.keepDirtyValues ||
                 (!_options.shouldUnregister && !isEmptyObject$1(values));
         _state.watch = !!_options.shouldUnregister;
+        _state.keepIsValid = !!keepStateOptions.keepIsValid;
+        _state.action = false;
+        // Clear errors synchronously to prevent validation errors on subsequent submissions
+        // This fixes the issue where form.reset() causes validation errors on subsequent
+        // submissions in Next.js 16 with Server Actions
+        if (!keepStateOptions.keepErrors) {
+            _formState.errors = {};
+        }
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -7396,7 +7514,7 @@ function createFormControl(props = {}) {
     };
     const reset = (formValues, keepStateOptions) => _reset(isFunction$3(formValues)
         ? formValues(_formValues)
-        : formValues, keepStateOptions);
+        : formValues, { ..._options.resetOptions, ...keepStateOptions });
     const setFocus = (name, options = {}) => {
         const field = get$1(_fields, name);
         const fieldReference = field && field._f;
@@ -7405,10 +7523,14 @@ function createFormControl(props = {}) {
                 ? fieldReference.refs[0]
                 : fieldReference.ref;
             if (fieldRef.focus) {
-                fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$3(fieldRef.select) &&
-                    fieldRef.select();
+                // Use setTimeout to ensure focus happens after any pending state updates
+                // This fixes the issue where setFocus doesn't work immediately after setError
+                setTimeout(() => {
+                    fieldRef.focus();
+                    options.shouldSelect &&
+                        isFunction$3(fieldRef.select) &&
+                        fieldRef.select();
+                });
             }
         }
     };
@@ -7434,6 +7556,7 @@ function createFormControl(props = {}) {
             setError,
             _subscribe,
             _runSchema,
+            _updateIsValidating,
             _focusError,
             _getWatch,
             _getDirty,
@@ -7646,7 +7769,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    _formControl.current.formState = getProxyFormState(formState, control);
+    _formControl.current.formState = React__default.useMemo(() => getProxyFormState(formState, control), [control, formState]);
     return _formControl.current;
 }
 
@@ -18701,6 +18824,10 @@ var isSet = (target) => target instanceof Set;
 var isObjectish = (target) => typeof target === "object";
 var isFunction$2 = (target) => typeof target === "function";
 var isBoolean$2 = (target) => typeof target === "boolean";
+function isArrayIndex(value) {
+  const n = +value;
+  return Number.isInteger(n) && String(n) === value;
+}
 var latest = (state) => state.copy_ || state.base_;
 var getFinalValue = (state) => state.modified_ ? state.copy_ : state.base_;
 function shallowCopy(base, strict) {
@@ -18780,6 +18907,7 @@ function isFrozen(obj) {
 // src/utils/plugins.ts
 var PluginMapSet = "MapSet";
 var PluginPatches = "Patches";
+var PluginArrayMethods = "ArrayMethods";
 var plugins = {};
 function getPlugin(pluginKey) {
   const plugin = plugins[pluginKey];
@@ -18803,7 +18931,8 @@ var createScope = (parent_, immer_) => ({
   unfinalizedDrafts_: 0,
   handledSet_: /* @__PURE__ */ new Set(),
   processedForPatches_: /* @__PURE__ */ new Set(),
-  mapSetPlugin_: isPluginLoaded(PluginMapSet) ? getPlugin(PluginMapSet) : void 0
+  mapSetPlugin_: isPluginLoaded(PluginMapSet) ? getPlugin(PluginMapSet) : void 0,
+  arrayMethodsPlugin_: isPluginLoaded(PluginArrayMethods) ? getPlugin(PluginArrayMethods) : void 0
 });
 function usePatchesInScope(scope, patchListener) {
   if (patchListener) {
@@ -18938,7 +19067,7 @@ function registerChildFinalizationCallback(parent, child, key) {
   });
 }
 function generatePatchesAndFinalize(state, rootScope) {
-  const shouldFinalize = state.modified_ && !state.finalized_ && (state.type_ === 3 /* Set */ || (state.assigned_?.size ?? 0) > 0);
+  const shouldFinalize = state.modified_ && !state.finalized_ && (state.type_ === 3 /* Set */ || state.type_ === 1 /* Array */ && state.allIndicesReassigned_ || (state.assigned_?.size ?? 0) > 0);
   if (shouldFinalize) {
     const { patchPlugin_ } = rootScope;
     if (patchPlugin_) {
@@ -18964,13 +19093,19 @@ function handleCrossReference(target, key, value) {
   } else if (isDraftable(value)) {
     target.callbacks_.push(function nestedDraftCleanup() {
       const targetCopy = latest(target);
-      if (get(targetCopy, key, target.type_) === value) {
-        if (scope_.drafts_.length > 1 && (target.assigned_.get(key) ?? false) === true && target.copy_) {
-          handleValue(
-            get(target.copy_, key, target.type_),
-            scope_.handledSet_,
-            scope_
-          );
+      if (target.type_ === 3 /* Set */) {
+        if (targetCopy.has(value)) {
+          handleValue(value, scope_.handledSet_, scope_);
+        }
+      } else {
+        if (get(targetCopy, key, target.type_) === value) {
+          if (scope_.drafts_.length > 1 && (target.assigned_.get(key) ?? false) === true && target.copy_) {
+            handleValue(
+              get(target.copy_, key, target.type_),
+              scope_.handledSet_,
+              scope_
+            );
+          }
         }
       }
     });
@@ -19043,6 +19178,13 @@ var objectTraps = {
   get(state, prop) {
     if (prop === DRAFT_STATE)
       return state;
+    let arrayPlugin = state.scope_.arrayMethodsPlugin_;
+    const isArrayWithStringProp = state.type_ === 1 /* Array */ && typeof prop === "string";
+    if (isArrayWithStringProp) {
+      if (arrayPlugin?.isArrayOperationMethod(prop)) {
+        return arrayPlugin.createMethodInterceptor(state, prop);
+      }
+    }
     const source = latest(state);
     if (!has(source, prop, state.type_)) {
       return readPropFromProto(state, source, prop);
@@ -19051,6 +19193,11 @@ var objectTraps = {
     if (state.finalized_ || !isDraftable(value)) {
       return value;
     }
+    if (isArrayWithStringProp && state.operationMethod && arrayPlugin?.isMutatingArrayMethod(
+      state.operationMethod
+    ) && isArrayIndex(prop)) {
+      return value;
+    }
     if (value === peek(state.base_, prop)) {
       prepareCopy(state);
       const childKey = state.type_ === 1 /* Array */ ? +prop : prop;
@@ -19131,13 +19278,14 @@ var objectTraps = {
   }
 };
 var arrayTraps = {};
-each(objectTraps, (key, fn) => {
+for (let key in objectTraps) {
+  let fn = objectTraps[key];
   arrayTraps[key] = function() {
     const args = arguments;
     args[0] = args[0][0];
     return fn.apply(this, args);
   };
-});
+}
 arrayTraps.deleteProperty = function(state, prop) {
   if (process.env.NODE_ENV !== "production" && isNaN(parseInt(prop)))
     die(13);
@@ -20441,29 +20589,11 @@ var addAbortSignalListener = (abortSignal, callback) => {
   });
   return () => abortSignal.removeEventListener("abort", callback);
 };
-var abortControllerWithReason = (abortController, reason) => {
-  const signal = abortController.signal;
-  if (signal.aborted) {
-    return;
-  }
-  if (!("reason" in signal)) {
-    Object.defineProperty(signal, "reason", {
-      enumerable: true,
-      value: reason,
-      configurable: true,
-      writable: true
-    });
-  }
-  abortController.abort(reason);
-};
 
 // src/listenerMiddleware/task.ts
 var validateActive = (signal) => {
   if (signal.aborted) {
-    const {
-      reason
-    } = signal;
-    throw new TaskAbortError(reason);
+    throw new TaskAbortError(signal.reason);
   }
 };
 function raceWithSignal(signal, promise) {
@@ -20519,7 +20649,7 @@ var {
 var INTERNAL_NIL_TOKEN = {};
 var alm = "listenerMiddleware";
 var createFork = (parentAbortSignal, parentBlockingPromises) => {
-  const linkControllers = (controller) => addAbortSignalListener(parentAbortSignal, () => abortControllerWithReason(controller, parentAbortSignal.reason));
+  const linkControllers = (controller) => addAbortSignalListener(parentAbortSignal, () => controller.abort(parentAbortSignal.reason));
   return (taskExecutor, opts) => {
     assertFunction(taskExecutor, "taskExecutor");
     const childAbortController = new AbortController();
@@ -20534,14 +20664,14 @@ var createFork = (parentAbortSignal, parentBlockingPromises) => {
       });
       validateActive(childAbortController.signal);
       return result2;
-    }, () => abortControllerWithReason(childAbortController, taskCompleted));
+    }, () => childAbortController.abort(taskCompleted));
     if (opts?.autoJoin) {
       parentBlockingPromises.push(result.catch(noop2));
     }
     return {
       result: createPause(parentAbortSignal)(result),
       cancel() {
-        abortControllerWithReason(childAbortController, taskCancelled);
+        childAbortController.abort(taskCancelled);
       }
     };
   };
@@ -20636,7 +20766,7 @@ var findListenerEntry = (listenerMap, options) => {
 };
 var cancelActiveListeners = (entry) => {
   entry.pending.forEach((controller) => {
-    abortControllerWithReason(controller, listenerCancelled);
+    controller.abort(listenerCancelled);
   });
 };
 var createClearListenerMiddleware = (listenerMap, executingListeners) => {
@@ -20742,13 +20872,13 @@ var createListenerMiddleware = (middlewareOptions = {}) => {
           cancelActiveListeners: () => {
             entry.pending.forEach((controller, _, set) => {
               if (controller !== internalTaskController) {
-                abortControllerWithReason(controller, listenerCancelled);
+                controller.abort(listenerCancelled);
                 set.delete(controller);
               }
             });
           },
           cancel: () => {
-            abortControllerWithReason(internalTaskController, listenerCancelled);
+            internalTaskController.abort(listenerCancelled);
             entry.pending.delete(internalTaskController);
           },
           throwIfCancelled: () => {
@@ -20764,7 +20894,7 @@ var createListenerMiddleware = (middlewareOptions = {}) => {
       }
     } finally {
       await Promise.all(autoJoinPromises);
-      abortControllerWithReason(internalTaskController, listenerCompleted);
+      internalTaskController.abort(listenerCompleted);
       untrackExecutingListener(entry);
       entry.pending.delete(internalTaskController);
     }