cogsbox-state 0.5.424 → 0.5.425

package/dist/Functions.d.ts

@@ -17,10 +17,9 @@ interface FormControlComponentProps<TStateObject> {
     stateKey: string;
 }
 export declare const FormControlComponent: <TStateObject>({ setState, path, child, formOpts, stateKey, }: FormControlComponentProps<TStateObject>) => import("react/jsx-runtime").JSX.Element;
-export declare function ValidationWrapper({ formOpts, path, validationKey, stateKey, children, validIndices, }: {
+export declare function ValidationWrapper({ formOpts, path, stateKey, children, validIndices, }: {
     formOpts?: FormOptsType;
     path: string[];
-    validationKey: string;
     stateKey?: string;
     children: React.ReactNode;
     validIndices?: number[];

package/dist/Functions.jsx

@@ -1,13 +1,13 @@
 import { jsx as V, Fragment as M } from "react/jsx-runtime";
 import "./CogsState.jsx";
-import { getNestedValue as N, isFunction as U, updateNestedProperty as T } from "./utility.js";
-import I, { useRef as b, useState as z, useEffect as R } from "react";
-import { getGlobalStore as d, formRefStore as O } from "./store.js";
+import { getNestedValue as N, isFunction as O, updateNestedProperty as T } from "./utility.js";
+import I, { useRef as b, useState as U, useEffect as R } from "react";
+import { getGlobalStore as m, formRefStore as L } from "./store.js";
 import { validateZodPathFunc as W } from "./useValidateZodPath.js";
-function j(n, e, t, r) {
-  n(
+function j(r, e, t, n) {
+  r(
     (o) => {
-      if (U(e)) {
+      if (O(e)) {
         const u = e(N(o, t));
         let i = T(t, o, u);
         return typeof i == "string" && (i = i.trim()), i;
@@ -18,19 +18,19 @@ function j(n, e, t, r) {
     },
     t,
     { updateType: "update" },
-    r
+    n
   );
 }
-function p(n, e, t, r, o) {
-  const u = d.getState().getNestedState(r, t);
-  n(
+function p(r, e, t, n, o) {
+  const u = m.getState().getNestedState(n, t);
+  r(
     (i) => {
-      let s = !t || t.length == 0 ? i : N(i, [...t]), c = [...s];
-      return c.splice(
-        Number(o) == 0 ? o : s.length,
+      let c = !t || t.length == 0 ? i : N(i, [...t]), s = [...c];
+      return s.splice(
+        Number(o) == 0 ? o : c.length,
         0,
-        U(e) ? e(s) : e
-      ), t.length == 0 ? c : T([...t], i, c);
+        O(e) ? e(c) : e
+      ), t.length == 0 ? s : T([...t], i, s);
     },
     [
       ...t,
@@ -41,98 +41,98 @@ function p(n, e, t, r, o) {
     }
   );
 }
-function ee(n, e, t, r) {
-  const o = d.getState().getNestedState(t, e);
-  n(
+function ee(r, e, t, n) {
+  const o = m.getState().getNestedState(t, e);
+  r(
     (u) => {
       const i = N(u, [...e]);
-      if (r < 0 || r >= i?.length)
-        throw new Error(`Index ${r} does not exist in the array.`);
-      const s = r || Number(r) == 0 ? r : i.length - 1, c = [
-        ...i.slice(0, s),
-        ...i.slice(s + 1)
+      if (n < 0 || n >= i?.length)
+        throw new Error(`Index ${n} does not exist in the array.`);
+      const c = n || Number(n) == 0 ? n : i.length - 1, s = [
+        ...i.slice(0, c),
+        ...i.slice(c + 1)
       ];
-      return e.length == 0 ? c : T([...e], u, c);
+      return e.length == 0 ? s : T([...e], u, s);
     },
     [
       ...e,
-      r || r === 0 ? r?.toString() : (o.length - 1).toString()
+      n || n === 0 ? n?.toString() : (o.length - 1).toString()
     ],
     { updateType: "cut" }
   );
 }
-const w = (n, e, t = (r, o) => JSON.stringify(r) === JSON.stringify(o)) => {
-  const [r, o] = z(
-    () => e(d.getState(), n)
-  ), u = b(r), i = b(n);
+const w = (r, e, t = (n, o) => JSON.stringify(n) === JSON.stringify(o)) => {
+  const [n, o] = U(
+    () => e(m.getState(), r)
+  ), u = b(n), i = b(r);
   return R(() => {
-    i.current = n, o(e(d.getState(), n));
-    const s = (m) => {
-      const g = e(m, i.current);
+    i.current = r, o(e(m.getState(), r));
+    const c = (f) => {
+      const g = e(f, i.current);
       t(u.current, g) || (u.current = g, o(g));
-    }, c = d.subscribe(s);
+    }, s = m.subscribe(c);
     return () => {
-      c();
+      s();
     };
-  }, [n]), r;
-}, Z = (n, e, t) => {
-  const r = n + "." + (e.length > 0 ? [e.join(".")] : []) + (t && t.length > 0 ? "." + t : "");
+  }, [r]), n;
+}, Z = (r, e, t) => {
+  const n = r + "." + (e.length > 0 ? [e.join(".")] : []) + (t && t.length > 0 ? "." + t : "");
   return w(
-    r,
+    n,
     (u, i) => u.getValidationErrors(i) || []
   );
-}, q = (n, e) => {
-  const t = `${n}:${e.join(".")}`;
+}, q = (r, e) => {
+  const t = `${r}:${e.join(".")}`;
   return w(
     t,
-    (r, o) => r.getSyncInfo(o)
+    (n, o) => n.getSyncInfo(o)
   );
-}, H = (n, e) => w(
-  `${n}:${e.join(".")}`,
-  (t, r) => t.getNestedState(n, e)
+}, H = (r, e) => w(
+  `${r}:${e.join(".")}`,
+  (t, n) => t.getNestedState(r, e)
 ), te = ({
-  setState: n,
+  setState: r,
   // This is the real effectiveSetState from the hook
   path: e,
   child: t,
-  formOpts: r,
+  formOpts: n,
   stateKey: o
 }) => {
-  const { registerFormRef: u, getFormRef: i } = O.getState(), {
-    getValidationErrors: s,
-    addValidationError: c,
-    getInitialOptions: m,
+  const { registerFormRef: u, getFormRef: i } = L.getState(), {
+    getValidationErrors: c,
+    addValidationError: s,
+    getInitialOptions: f,
     removeValidationError: g
-  } = d.getState(), k = o + "." + e.join("."), C = b(null), $ = i(k);
-  $ || u(k, C);
-  const A = $ || C, y = H(o, e), [E, B] = z(y), S = b(!1), l = b(null);
+  } = m.getState(), C = o + "." + e.join("."), $ = b(null), k = i(C);
+  k || u(C, $);
+  const z = k || $, v = H(o, e), [E, B] = U(v), S = b(!1), l = b(null);
   R(() => {
-    !S.current && y !== E && B(y);
-  }, [y]), R(() => () => {
+    !S.current && v !== E && B(v);
+  }, [v]), R(() => () => {
     l.current && (clearTimeout(l.current), l.current = null, S.current = !1);
   }, []);
   const G = (a) => {
     if (B(a), S.current = !0, a === "") {
-      l.current && (clearTimeout(l.current), l.current = null), j(n, a, e, f), S.current = !1;
+      l.current && (clearTimeout(l.current), l.current = null), j(r, a, e, d), S.current = !1;
       return;
     }
     l.current && clearTimeout(l.current), l.current = setTimeout(
       () => {
-        S.current = !1, j(n, a, e, f);
+        S.current = !1, j(r, a, e, d);
       },
-      r?.debounceTime ?? (typeof y == "boolean" ? 20 : 200)
+      n?.debounceTime ?? (typeof v == "boolean" ? 20 : 200)
     );
-  }, v = m(o);
-  if (!v?.validation?.key)
+  }, y = f(o);
+  if (!y?.validation?.key)
     throw new Error("Validation key not found.");
-  const f = v.validation.key, D = v.validation.onBlur === !0, J = async () => {
-    if (l.current && (clearTimeout(l.current), l.current = null, S.current = !1, j(n, E, e, f)), !(!v.validation?.zodSchema || !D)) {
-      g(f + "." + e.join("."));
+  const d = y.validation.key, A = y.validation.onBlur === !0, D = async () => {
+    if (l.current && (clearTimeout(l.current), l.current = null, S.current = !1, j(r, E, e, d)), !(!y.validation?.zodSchema || !A)) {
+      g(d + "." + e.join("."));
       try {
-        const a = d.getState().getNestedState(o, e);
+        const a = m.getState().getNestedState(o, e);
         await W(
-          f,
-          v.validation.zodSchema,
+          d,
+          y.validation.zodSchema,
           e,
           a
         );
@@ -140,18 +140,18 @@ const w = (n, e, t = (r, o) => JSON.stringify(r) === JSON.stringify(o)) => {
         console.error("Validation error on blur:", a);
       }
     }
-  }, F = q(o, e), P = F ? { ...F, date: new Date(F.timeStamp) } : null, L = t({
+  }, F = q(o, e), J = F ? { ...F, date: new Date(F.timeStamp) } : null, P = t({
     // --- START CHANGES ---
     get: () => E,
     // Get should return the immediate local value
     set: G,
     // Use the new debounced updater
     // --- END CHANGES ---
-    syncStatus: P,
+    syncStatus: J,
     path: e,
-    validationErrors: () => s(f + "." + e.join(".")),
+    validationErrors: () => c(d + "." + e.join(".")),
     addValidationError: (a) => {
-      g(f + "." + e.join(".")), c(f + "." + e.join("."), a ?? "");
+      g(d + "." + e.join(".")), s(d + "." + e.join("."), a ?? "");
     },
     inputProps: {
       // --- START CHANGES ---
@@ -160,37 +160,34 @@ const w = (n, e, t = (r, o) => JSON.stringify(r) === JSON.stringify(o)) => {
       onChange: (a) => G(a.target.value),
       // Use debounced updater
       // --- END CHANGES ---
-      onBlur: J,
-      ref: A
+      onBlur: D,
+      ref: z
     }
   });
-  return /* @__PURE__ */ V(M, { children: /* @__PURE__ */ V(Q, { formOpts: r, path: e, validationKey: f, stateKey: o, children: L }) });
+  return /* @__PURE__ */ V(M, { children: /* @__PURE__ */ V(Q, { formOpts: n, path: e, stateKey: o, children: P }) });
 };
 function Q({
-  formOpts: n,
+  formOpts: r,
   path: e,
-  validationKey: t,
-  stateKey: r,
-  children: o,
-  validIndices: u
+  stateKey: t,
+  children: n,
+  validIndices: o
 }) {
-  const { getInitialOptions: i } = d.getState(), s = Z(
-    t,
+  const { getInitialOptions: u } = m.getState(), i = u(t), c = i?.validation?.key ?? t, s = Z(
+    c,
     e,
-    u
-  ), c = [];
+    o
+  ), f = [];
   if (s) {
     const g = s.join(", ");
-    c.includes(g) || c.push(g);
+    f.includes(g) || f.push(g);
   }
-  const m = i(r);
-  return /* @__PURE__ */ V(M, { children: m?.formElements?.validation && !n?.validation?.disable ? m.formElements.validation({
-    children: /* @__PURE__ */ V(I.Fragment, { children: o }, e.toString()),
+  return /* @__PURE__ */ V(M, { children: i?.formElements?.validation && !r?.validation?.disable ? i.formElements.validation({
+    children: /* @__PURE__ */ V(I.Fragment, { children: n }, e.toString()),
     active: s.length > 0,
-    message: n?.validation?.hideMessage ? "" : n?.validation?.message ? n?.validation?.message : c.map((g) => g).join(", "),
-    path: e,
-    ...n?.key && { key: n?.key }
-  }) : /* @__PURE__ */ V(I.Fragment, { children: o }, e.toString()) });
+    message: r?.validation?.hideMessage ? "" : r?.validation?.message ? r?.validation?.message : f.map((g) => g).join(", "),
+    path: e
+  }) : /* @__PURE__ */ V(I.Fragment, { children: n }, e.toString()) });
 }
 export {
   te as FormControlComponent,

package/dist/Functions.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Functions.jsx","sources":["../src/Functions.tsx"],"sourcesContent":["import {\r\n  notifyComponent,\r\n  type EffectiveSetState,\r\n  type FormElementParams,\r\n  type FormOptsType,\r\n  type UpdateArg,\r\n  type UpdateOpts,\r\n} from \"./CogsState\";\r\n\r\nimport { getNestedValue, isFunction, updateNestedProperty } from \"./utility\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport React from \"react\";\r\nimport { getGlobalStore, formRefStore } from \"./store\";\r\nimport { validateZodPathFunc } from \"./useValidateZodPath\";\r\n\r\nexport function updateFn<U>(\r\n  setState: EffectiveSetState<U>,\r\n  payload: UpdateArg<U>,\r\n  path: string[],\r\n  validationKey?: string\r\n): void {\r\n  setState(\r\n    (prevState) => {\r\n      if (isFunction<U>(payload)) {\r\n        const nestedValue = payload(getNestedValue(prevState, path));\r\n        let value = updateNestedProperty(path, prevState, nestedValue);\r\n        if (typeof value == \"string\") {\r\n          value = value.trim();\r\n        }\r\n        return value;\r\n      } else {\r\n        let value =\r\n          !path || path.length == 0\r\n            ? payload\r\n            : updateNestedProperty(path, prevState, payload);\r\n        if (typeof value == \"string\") {\r\n          value = value.trim();\r\n        }\r\n        return value;\r\n      }\r\n    },\r\n    path,\r\n    { updateType: \"update\" },\r\n    validationKey\r\n  );\r\n}\r\n\r\nexport function pushFunc<U>(\r\n  setState: EffectiveSetState<U>,\r\n  payload: UpdateArg<U>,\r\n  path: string[],\r\n  stateKey: string,\r\n  index?: number\r\n): void {\r\n  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];\r\n  setState(\r\n    (prevState) => {\r\n      let arrayToUpdate =\r\n        !path || path.length == 0\r\n          ? prevState\r\n          : getNestedValue(prevState, [...path]);\r\n      let returnedArray = [...arrayToUpdate];\r\n\r\n      returnedArray.splice(\r\n        index || Number(index) == 0 ? index : arrayToUpdate.length,\r\n        0,\r\n        isFunction<U>(payload)\r\n          ? payload(index == -1 ? undefined : arrayToUpdate)\r\n          : payload\r\n      );\r\n      const value =\r\n        path.length == 0\r\n          ? returnedArray\r\n          : updateNestedProperty([...path], prevState, returnedArray);\r\n\r\n      return value as U;\r\n    },\r\n    [\r\n      ...path,\r\n      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),\r\n    ],\r\n    {\r\n      updateType: \"insert\",\r\n    }\r\n  );\r\n}\r\n\r\nexport function cutFunc<U>(\r\n  setState: EffectiveSetState<U>,\r\n  path: string[],\r\n  stateKey: string,\r\n  index: number\r\n): void {\r\n  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];\r\n  setState(\r\n    (prevState) => {\r\n      const arrayToUpdate = getNestedValue(prevState, [...path]);\r\n      if (index < 0 || index >= arrayToUpdate?.length) {\r\n        throw new Error(`Index ${index} does not exist in the array.`);\r\n      }\r\n      const indexToCut =\r\n        index || Number(index) == 0 ? index : arrayToUpdate.length - 1;\r\n\r\n      const updatedArray = [\r\n        ...arrayToUpdate.slice(0, indexToCut),\r\n        ...arrayToUpdate.slice(indexToCut + 1),\r\n      ] as U;\r\n\r\n      return path.length == 0\r\n        ? updatedArray\r\n        : updateNestedProperty([...path], prevState, updatedArray);\r\n    },\r\n    [\r\n      ...path,\r\n      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),\r\n    ],\r\n    { updateType: \"cut\" }\r\n  );\r\n}\r\n\r\nexport const useStoreSubscription = <T,>(\r\n  fullPath: string,\r\n  selector: (\r\n    store: ReturnType<typeof getGlobalStore.getState>,\r\n    path: string\r\n  ) => T,\r\n  compare: (a: T, b: T) => boolean = (a, b) =>\r\n    JSON.stringify(a) === JSON.stringify(b)\r\n) => {\r\n  const [value, setValue] = useState<T>(() =>\r\n    selector(getGlobalStore.getState(), fullPath)\r\n  );\r\n  const previousValueRef = useRef<T>(value);\r\n  const fullPathRef = useRef(fullPath);\r\n  useEffect(() => {\r\n    fullPathRef.current = fullPath; // Ensure latest fullPath is always used\r\n\r\n    setValue(selector(getGlobalStore.getState(), fullPath));\r\n\r\n    const callback = (store: any) => {\r\n      const newValue = selector(store, fullPathRef.current);\r\n\r\n      if (!compare(previousValueRef.current, newValue)) {\r\n        previousValueRef.current = newValue;\r\n        setValue(newValue);\r\n      }\r\n    };\r\n    const unsubscribe = getGlobalStore.subscribe(callback);\r\n    return () => {\r\n      unsubscribe();\r\n    };\r\n  }, [fullPath]);\r\n  return value;\r\n};\r\nexport const useGetValidationErrors = (\r\n  validationKey: string,\r\n  path: string[],\r\n  validIndices?: number[]\r\n) => {\r\n  const fullPath =\r\n    validationKey +\r\n    \".\" +\r\n    (path.length > 0 ? [path.join(\".\")] : []) +\r\n    (validIndices && validIndices.length > 0 ? \".\" + validIndices : \"\");\r\n\r\n  const returnresult = useStoreSubscription(\r\n    fullPath,\r\n    (store, path) => store.getValidationErrors(path) || []\r\n  );\r\n\r\n  return returnresult;\r\n};\r\n\r\nexport const useGetSyncInfo = (key: string, path: string[]) => {\r\n  const syncKey = `${key}:${path.join(\".\")}`;\r\n  return useStoreSubscription(syncKey, (store, path) =>\r\n    store.getSyncInfo(path)\r\n  );\r\n};\r\nexport const useGetKeyState = (key: string, path: string[]) => {\r\n  return useStoreSubscription(`${key}:${path.join(\".\")}`, (store, fullPath) =>\r\n    store.getNestedState(key, path)\r\n  );\r\n};\r\ninterface FormControlComponentProps<TStateObject> {\r\n  setState: EffectiveSetState<TStateObject>;\r\n\r\n  path: string[];\r\n  child: (obj: FormElementParams<TStateObject>) => JSX.Element;\r\n  formOpts?: FormOptsType;\r\n  stateKey: string;\r\n}\r\n// Find FormControlComponent in your Functions.ts or equivalent file\r\n\r\nexport const FormControlComponent = <TStateObject,>({\r\n  setState, // This is the real effectiveSetState from the hook\r\n  path,\r\n  child,\r\n  formOpts,\r\n  stateKey,\r\n}: FormControlComponentProps<TStateObject>) => {\r\n  const { registerFormRef, getFormRef } = formRefStore.getState();\r\n  const {\r\n    getValidationErrors,\r\n    addValidationError,\r\n    getInitialOptions,\r\n    removeValidationError,\r\n  } = getGlobalStore.getState();\r\n\r\n  const refKey = stateKey + \".\" + path.join(\".\");\r\n  const localFormRef = useRef<HTMLInputElement>(null);\r\n  const existingRef = getFormRef(refKey);\r\n  if (!existingRef) {\r\n    registerFormRef(refKey, localFormRef);\r\n  }\r\n  const formRef = existingRef || localFormRef;\r\n\r\n  // --- START CHANGES ---\r\n\r\n  const globalStateValue = useGetKeyState(stateKey, path);\r\n  const [localValue, setLocalValue] = useState<any>(globalStateValue);\r\n  const isCurrentlyDebouncing = useRef(false);\r\n  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);\r\n\r\n  // Effect to sync local state if global state changes externally\r\n  useEffect(() => {\r\n    // Only update local if not actively debouncing a local change\r\n    if (!isCurrentlyDebouncing.current && globalStateValue !== localValue) {\r\n      setLocalValue(globalStateValue);\r\n    }\r\n  }, [globalStateValue]); // Removed localValue dependency\r\n\r\n  // Effect for cleanup\r\n  useEffect(() => {\r\n    return () => {\r\n      if (debounceTimeoutRef.current) {\r\n        clearTimeout(debounceTimeoutRef.current);\r\n        debounceTimeoutRef.current = null; // Explicitly nullify\r\n        isCurrentlyDebouncing.current = false;\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  const debouncedUpdater = (payload: UpdateArg<TStateObject>) => {\r\n    setLocalValue(payload); // Update local state immediately\r\n    isCurrentlyDebouncing.current = true;\r\n\r\n    if (payload === \"\") {\r\n      if (debounceTimeoutRef.current) {\r\n        clearTimeout(debounceTimeoutRef.current); // Clear pending timer\r\n        debounceTimeoutRef.current = null;\r\n      }\r\n      updateFn(setState, payload, path, validationKey); // Update global state NOW\r\n      isCurrentlyDebouncing.current = false; // No longer debouncing\r\n      return; // Don't proceed to set another timeout\r\n    }\r\n\r\n    // If not empty, proceed with normal debouncing\r\n    if (debounceTimeoutRef.current) {\r\n      clearTimeout(debounceTimeoutRef.current);\r\n    }\r\n\r\n    debounceTimeoutRef.current = setTimeout(\r\n      () => {\r\n        isCurrentlyDebouncing.current = false;\r\n        updateFn(setState, payload, path, validationKey);\r\n      },\r\n      formOpts?.debounceTime ??\r\n        (typeof globalStateValue == \"boolean\" ? 20 : 200)\r\n    );\r\n  };\r\n\r\n  const initialOptions = getInitialOptions(stateKey);\r\n  if (!initialOptions?.validation?.key) {\r\n    throw new Error(\"Validation key not found.\");\r\n  }\r\n  const validationKey = initialOptions.validation.key;\r\n  const validateOnBlur = initialOptions.validation.onBlur === true;\r\n\r\n  const handleBlur = async () => {\r\n    // --- Ensure latest value is flushed if debouncing ---\r\n    if (debounceTimeoutRef.current) {\r\n      clearTimeout(debounceTimeoutRef.current); // Clear pending timer\r\n      debounceTimeoutRef.current = null;\r\n      isCurrentlyDebouncing.current = false;\r\n      // Ensure the absolute latest local value is committed on blur\r\n      updateFn(setState, localValue, path, validationKey);\r\n    }\r\n    // --- End modification ---\r\n\r\n    if (!initialOptions.validation?.zodSchema || !validateOnBlur) return;\r\n    removeValidationError(validationKey + \".\" + path.join(\".\"));\r\n    try {\r\n      // Use the potentially just flushed value\r\n      const fieldValue = getGlobalStore\r\n        .getState()\r\n        .getNestedState(stateKey, path);\r\n      await validateZodPathFunc(\r\n        validationKey,\r\n        initialOptions.validation.zodSchema,\r\n        path,\r\n        fieldValue\r\n      );\r\n      // forceUpdate might be needed if validation state update doesn't trigger render\r\n      // Consider using useGetValidationErrors hook result directly for validation display\r\n    } catch (error) {\r\n      console.error(\"Validation error on blur:\", error);\r\n    }\r\n  };\r\n\r\n  const rawSyncStatus = useGetSyncInfo(stateKey, path);\r\n  const syncStatus = rawSyncStatus\r\n    ? { ...rawSyncStatus, date: new Date(rawSyncStatus.timeStamp) }\r\n    : null;\r\n\r\n  const childElement = child({\r\n    // --- START CHANGES ---\r\n    get: () => localValue, // Get should return the immediate local value\r\n    set: debouncedUpdater, // Use the new debounced updater\r\n    // --- END CHANGES ---\r\n    syncStatus,\r\n    path: path,\r\n    validationErrors: () =>\r\n      getValidationErrors(validationKey + \".\" + path.join(\".\")),\r\n    addValidationError: (message?: string) => {\r\n      removeValidationError(validationKey + \".\" + path.join(\".\"));\r\n      addValidationError(validationKey + \".\" + path.join(\".\"), message ?? \"\");\r\n    },\r\n    inputProps: {\r\n      // --- START CHANGES ---\r\n      value: localValue ?? \"\", // Input value is always the local state\r\n      onChange: (e: any) => debouncedUpdater(e.target.value), // Use debounced updater\r\n      // --- END CHANGES ---\r\n      onBlur: handleBlur,\r\n      ref: formRef,\r\n    },\r\n  });\r\n\r\n  return (\r\n    <>\r\n      <ValidationWrapper {...{ formOpts, path, validationKey, stateKey }}>\r\n        {childElement}\r\n      </ValidationWrapper>\r\n    </>\r\n  );\r\n};\r\nexport function ValidationWrapper({\r\n  formOpts,\r\n  path,\r\n  validationKey,\r\n  stateKey,\r\n  children,\r\n  validIndices,\r\n}: {\r\n  formOpts?: FormOptsType;\r\n  path: string[];\r\n  validationKey: string;\r\n  stateKey?: string;\r\n  children: React.ReactNode;\r\n  validIndices?: number[];\r\n}) {\r\n  const { getInitialOptions } = getGlobalStore.getState();\r\n\r\n  const validationErrors = useGetValidationErrors(\r\n    validationKey,\r\n    path,\r\n    validIndices\r\n  );\r\n  // console.log(\r\n  //   \"validationErrors ValidationWrapper\",\r\n  //   stateKey,\r\n  //   validationKey,\r\n  //   path,\r\n  //   validationErrors\r\n  // );\r\n  const thesMessages: string[] = [];\r\n\r\n  if (validationErrors) {\r\n    const newMessage = validationErrors!.join(\", \");\r\n    if (!thesMessages.includes(newMessage)) {\r\n      thesMessages.push(newMessage);\r\n    }\r\n  }\r\n  const thisStateOpts = getInitialOptions(stateKey!);\r\n\r\n  return (\r\n    <>\r\n      {thisStateOpts?.formElements?.validation &&\r\n      !formOpts?.validation?.disable ? (\r\n        thisStateOpts.formElements!.validation!({\r\n          children: (\r\n            <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n          ),\r\n          active: validationErrors.length > 0 ? true : false,\r\n          message: formOpts?.validation?.hideMessage\r\n            ? \"\"\r\n            : formOpts?.validation?.message\r\n              ? formOpts?.validation?.message\r\n              : thesMessages.map((m) => m).join(\", \"),\r\n          path: path,\r\n\r\n          ...(formOpts?.key && { key: formOpts?.key }),\r\n        })\r\n      ) : (\r\n        <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n"],"names":["updateFn","setState","payload","path","validationKey","prevState","isFunction","nestedValue","getNestedValue","value","updateNestedProperty","pushFunc","stateKey","index","array","getGlobalStore","arrayToUpdate","returnedArray","cutFunc","indexToCut","updatedArray","useStoreSubscription","fullPath","selector","compare","a","b","setValue","useState","previousValueRef","useRef","fullPathRef","useEffect","callback","store","newValue","unsubscribe","useGetValidationErrors","validIndices","useGetSyncInfo","key","syncKey","useGetKeyState","FormControlComponent","child","formOpts","registerFormRef","getFormRef","formRefStore","getValidationErrors","addValidationError","getInitialOptions","removeValidationError","refKey","localFormRef","existingRef","formRef","globalStateValue","localValue","setLocalValue","isCurrentlyDebouncing","debounceTimeoutRef","debouncedUpdater","initialOptions","validateOnBlur","handleBlur","fieldValue","validateZodPathFunc","error","rawSyncStatus","syncStatus","childElement","message","e","jsx","Fragment","ValidationWrapper","children","validationErrors","thesMessages","newMessage","thisStateOpts","React","m"],"mappings":"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"}
+{"version":3,"file":"Functions.jsx","sources":["../src/Functions.tsx"],"sourcesContent":["import {\r\n  notifyComponent,\r\n  type EffectiveSetState,\r\n  type FormElementParams,\r\n  type FormOptsType,\r\n  type UpdateArg,\r\n  type UpdateOpts,\r\n} from \"./CogsState\";\r\n\r\nimport { getNestedValue, isFunction, updateNestedProperty } from \"./utility\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport React from \"react\";\r\nimport { getGlobalStore, formRefStore } from \"./store\";\r\nimport { validateZodPathFunc } from \"./useValidateZodPath\";\r\n\r\nexport function updateFn<U>(\r\n  setState: EffectiveSetState<U>,\r\n  payload: UpdateArg<U>,\r\n  path: string[],\r\n  validationKey?: string\r\n): void {\r\n  setState(\r\n    (prevState) => {\r\n      if (isFunction<U>(payload)) {\r\n        const nestedValue = payload(getNestedValue(prevState, path));\r\n        let value = updateNestedProperty(path, prevState, nestedValue);\r\n        if (typeof value == \"string\") {\r\n          value = value.trim();\r\n        }\r\n        return value;\r\n      } else {\r\n        let value =\r\n          !path || path.length == 0\r\n            ? payload\r\n            : updateNestedProperty(path, prevState, payload);\r\n        if (typeof value == \"string\") {\r\n          value = value.trim();\r\n        }\r\n        return value;\r\n      }\r\n    },\r\n    path,\r\n    { updateType: \"update\" },\r\n    validationKey\r\n  );\r\n}\r\n\r\nexport function pushFunc<U>(\r\n  setState: EffectiveSetState<U>,\r\n  payload: UpdateArg<U>,\r\n  path: string[],\r\n  stateKey: string,\r\n  index?: number\r\n): void {\r\n  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];\r\n  setState(\r\n    (prevState) => {\r\n      let arrayToUpdate =\r\n        !path || path.length == 0\r\n          ? prevState\r\n          : getNestedValue(prevState, [...path]);\r\n      let returnedArray = [...arrayToUpdate];\r\n\r\n      returnedArray.splice(\r\n        index || Number(index) == 0 ? index : arrayToUpdate.length,\r\n        0,\r\n        isFunction<U>(payload)\r\n          ? payload(index == -1 ? undefined : arrayToUpdate)\r\n          : payload\r\n      );\r\n      const value =\r\n        path.length == 0\r\n          ? returnedArray\r\n          : updateNestedProperty([...path], prevState, returnedArray);\r\n\r\n      return value as U;\r\n    },\r\n    [\r\n      ...path,\r\n      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),\r\n    ],\r\n    {\r\n      updateType: \"insert\",\r\n    }\r\n  );\r\n}\r\n\r\nexport function cutFunc<U>(\r\n  setState: EffectiveSetState<U>,\r\n  path: string[],\r\n  stateKey: string,\r\n  index: number\r\n): void {\r\n  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];\r\n  setState(\r\n    (prevState) => {\r\n      const arrayToUpdate = getNestedValue(prevState, [...path]);\r\n      if (index < 0 || index >= arrayToUpdate?.length) {\r\n        throw new Error(`Index ${index} does not exist in the array.`);\r\n      }\r\n      const indexToCut =\r\n        index || Number(index) == 0 ? index : arrayToUpdate.length - 1;\r\n\r\n      const updatedArray = [\r\n        ...arrayToUpdate.slice(0, indexToCut),\r\n        ...arrayToUpdate.slice(indexToCut + 1),\r\n      ] as U;\r\n\r\n      return path.length == 0\r\n        ? updatedArray\r\n        : updateNestedProperty([...path], prevState, updatedArray);\r\n    },\r\n    [\r\n      ...path,\r\n      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),\r\n    ],\r\n    { updateType: \"cut\" }\r\n  );\r\n}\r\n\r\nexport const useStoreSubscription = <T,>(\r\n  fullPath: string,\r\n  selector: (\r\n    store: ReturnType<typeof getGlobalStore.getState>,\r\n    path: string\r\n  ) => T,\r\n  compare: (a: T, b: T) => boolean = (a, b) =>\r\n    JSON.stringify(a) === JSON.stringify(b)\r\n) => {\r\n  const [value, setValue] = useState<T>(() =>\r\n    selector(getGlobalStore.getState(), fullPath)\r\n  );\r\n  const previousValueRef = useRef<T>(value);\r\n  const fullPathRef = useRef(fullPath);\r\n  useEffect(() => {\r\n    fullPathRef.current = fullPath; // Ensure latest fullPath is always used\r\n\r\n    setValue(selector(getGlobalStore.getState(), fullPath));\r\n\r\n    const callback = (store: any) => {\r\n      const newValue = selector(store, fullPathRef.current);\r\n\r\n      if (!compare(previousValueRef.current, newValue)) {\r\n        previousValueRef.current = newValue;\r\n        setValue(newValue);\r\n      }\r\n    };\r\n    const unsubscribe = getGlobalStore.subscribe(callback);\r\n    return () => {\r\n      unsubscribe();\r\n    };\r\n  }, [fullPath]);\r\n  return value;\r\n};\r\nexport const useGetValidationErrors = (\r\n  validationKey: string,\r\n  path: string[],\r\n  validIndices?: number[]\r\n) => {\r\n  const fullPath =\r\n    validationKey +\r\n    \".\" +\r\n    (path.length > 0 ? [path.join(\".\")] : []) +\r\n    (validIndices && validIndices.length > 0 ? \".\" + validIndices : \"\");\r\n\r\n  const returnresult = useStoreSubscription(\r\n    fullPath,\r\n    (store, path) => store.getValidationErrors(path) || []\r\n  );\r\n\r\n  return returnresult;\r\n};\r\n\r\nexport const useGetSyncInfo = (key: string, path: string[]) => {\r\n  const syncKey = `${key}:${path.join(\".\")}`;\r\n  return useStoreSubscription(syncKey, (store, path) =>\r\n    store.getSyncInfo(path)\r\n  );\r\n};\r\nexport const useGetKeyState = (key: string, path: string[]) => {\r\n  return useStoreSubscription(`${key}:${path.join(\".\")}`, (store, fullPath) =>\r\n    store.getNestedState(key, path)\r\n  );\r\n};\r\ninterface FormControlComponentProps<TStateObject> {\r\n  setState: EffectiveSetState<TStateObject>;\r\n\r\n  path: string[];\r\n  child: (obj: FormElementParams<TStateObject>) => JSX.Element;\r\n  formOpts?: FormOptsType;\r\n  stateKey: string;\r\n}\r\n// Find FormControlComponent in your Functions.ts or equivalent file\r\n\r\nexport const FormControlComponent = <TStateObject,>({\r\n  setState, // This is the real effectiveSetState from the hook\r\n  path,\r\n  child,\r\n  formOpts,\r\n  stateKey,\r\n}: FormControlComponentProps<TStateObject>) => {\r\n  const { registerFormRef, getFormRef } = formRefStore.getState();\r\n  const {\r\n    getValidationErrors,\r\n    addValidationError,\r\n    getInitialOptions,\r\n    removeValidationError,\r\n  } = getGlobalStore.getState();\r\n\r\n  const refKey = stateKey + \".\" + path.join(\".\");\r\n  const localFormRef = useRef<HTMLInputElement>(null);\r\n  const existingRef = getFormRef(refKey);\r\n  if (!existingRef) {\r\n    registerFormRef(refKey, localFormRef);\r\n  }\r\n  const formRef = existingRef || localFormRef;\r\n\r\n  // --- START CHANGES ---\r\n\r\n  const globalStateValue = useGetKeyState(stateKey, path);\r\n  const [localValue, setLocalValue] = useState<any>(globalStateValue);\r\n  const isCurrentlyDebouncing = useRef(false);\r\n  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);\r\n\r\n  // Effect to sync local state if global state changes externally\r\n  useEffect(() => {\r\n    // Only update local if not actively debouncing a local change\r\n    if (!isCurrentlyDebouncing.current && globalStateValue !== localValue) {\r\n      setLocalValue(globalStateValue);\r\n    }\r\n  }, [globalStateValue]); // Removed localValue dependency\r\n\r\n  // Effect for cleanup\r\n  useEffect(() => {\r\n    return () => {\r\n      if (debounceTimeoutRef.current) {\r\n        clearTimeout(debounceTimeoutRef.current);\r\n        debounceTimeoutRef.current = null; // Explicitly nullify\r\n        isCurrentlyDebouncing.current = false;\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  const debouncedUpdater = (payload: UpdateArg<TStateObject>) => {\r\n    setLocalValue(payload); // Update local state immediately\r\n    isCurrentlyDebouncing.current = true;\r\n\r\n    if (payload === \"\") {\r\n      if (debounceTimeoutRef.current) {\r\n        clearTimeout(debounceTimeoutRef.current); // Clear pending timer\r\n        debounceTimeoutRef.current = null;\r\n      }\r\n      updateFn(setState, payload, path, validationKey); // Update global state NOW\r\n      isCurrentlyDebouncing.current = false; // No longer debouncing\r\n      return; // Don't proceed to set another timeout\r\n    }\r\n\r\n    // If not empty, proceed with normal debouncing\r\n    if (debounceTimeoutRef.current) {\r\n      clearTimeout(debounceTimeoutRef.current);\r\n    }\r\n\r\n    debounceTimeoutRef.current = setTimeout(\r\n      () => {\r\n        isCurrentlyDebouncing.current = false;\r\n        updateFn(setState, payload, path, validationKey);\r\n      },\r\n      formOpts?.debounceTime ??\r\n        (typeof globalStateValue == \"boolean\" ? 20 : 200)\r\n    );\r\n  };\r\n\r\n  const initialOptions = getInitialOptions(stateKey);\r\n  if (!initialOptions?.validation?.key) {\r\n    throw new Error(\"Validation key not found.\");\r\n  }\r\n  const validationKey = initialOptions.validation.key;\r\n  const validateOnBlur = initialOptions.validation.onBlur === true;\r\n\r\n  const handleBlur = async () => {\r\n    // --- Ensure latest value is flushed if debouncing ---\r\n    if (debounceTimeoutRef.current) {\r\n      clearTimeout(debounceTimeoutRef.current); // Clear pending timer\r\n      debounceTimeoutRef.current = null;\r\n      isCurrentlyDebouncing.current = false;\r\n      // Ensure the absolute latest local value is committed on blur\r\n      updateFn(setState, localValue, path, validationKey);\r\n    }\r\n    // --- End modification ---\r\n\r\n    if (!initialOptions.validation?.zodSchema || !validateOnBlur) return;\r\n    removeValidationError(validationKey + \".\" + path.join(\".\"));\r\n    try {\r\n      // Use the potentially just flushed value\r\n      const fieldValue = getGlobalStore\r\n        .getState()\r\n        .getNestedState(stateKey, path);\r\n      await validateZodPathFunc(\r\n        validationKey,\r\n        initialOptions.validation.zodSchema,\r\n        path,\r\n        fieldValue\r\n      );\r\n      // forceUpdate might be needed if validation state update doesn't trigger render\r\n      // Consider using useGetValidationErrors hook result directly for validation display\r\n    } catch (error) {\r\n      console.error(\"Validation error on blur:\", error);\r\n    }\r\n  };\r\n\r\n  const rawSyncStatus = useGetSyncInfo(stateKey, path);\r\n  const syncStatus = rawSyncStatus\r\n    ? { ...rawSyncStatus, date: new Date(rawSyncStatus.timeStamp) }\r\n    : null;\r\n\r\n  const childElement = child({\r\n    // --- START CHANGES ---\r\n    get: () => localValue, // Get should return the immediate local value\r\n    set: debouncedUpdater, // Use the new debounced updater\r\n    // --- END CHANGES ---\r\n    syncStatus,\r\n    path: path,\r\n    validationErrors: () =>\r\n      getValidationErrors(validationKey + \".\" + path.join(\".\")),\r\n    addValidationError: (message?: string) => {\r\n      removeValidationError(validationKey + \".\" + path.join(\".\"));\r\n      addValidationError(validationKey + \".\" + path.join(\".\"), message ?? \"\");\r\n    },\r\n    inputProps: {\r\n      // --- START CHANGES ---\r\n      value: localValue ?? \"\", // Input value is always the local state\r\n      onChange: (e: any) => debouncedUpdater(e.target.value), // Use debounced updater\r\n      // --- END CHANGES ---\r\n      onBlur: handleBlur,\r\n      ref: formRef,\r\n    },\r\n  });\r\n\r\n  return (\r\n    <>\r\n      <ValidationWrapper {...{ formOpts, path, stateKey }}>\r\n        {childElement}\r\n      </ValidationWrapper>\r\n    </>\r\n  );\r\n};\r\nexport function ValidationWrapper({\r\n  formOpts,\r\n  path,\r\n\r\n  stateKey,\r\n  children,\r\n  validIndices,\r\n}: {\r\n  formOpts?: FormOptsType;\r\n  path: string[];\r\n\r\n  stateKey?: string;\r\n  children: React.ReactNode;\r\n  validIndices?: number[];\r\n}) {\r\n  const { getInitialOptions } = getGlobalStore.getState();\r\n  const thisStateOpts = getInitialOptions(stateKey!);\r\n  const validationKey = thisStateOpts?.validation?.key ?? stateKey!;\r\n  const validationErrors = useGetValidationErrors(\r\n    validationKey,\r\n    path,\r\n    validIndices\r\n  );\r\n  // console.log(\r\n  //   \"validationErrors ValidationWrapper\",\r\n  //   stateKey,\r\n  //   validationKey,\r\n  //   path,\r\n  //   validationErrors\r\n  // );\r\n  const thesMessages: string[] = [];\r\n\r\n  if (validationErrors) {\r\n    const newMessage = validationErrors!.join(\", \");\r\n    if (!thesMessages.includes(newMessage)) {\r\n      thesMessages.push(newMessage);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {thisStateOpts?.formElements?.validation &&\r\n      !formOpts?.validation?.disable ? (\r\n        thisStateOpts.formElements!.validation!({\r\n          children: (\r\n            <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n          ),\r\n          active: validationErrors.length > 0 ? true : false,\r\n          message: formOpts?.validation?.hideMessage\r\n            ? \"\"\r\n            : formOpts?.validation?.message\r\n              ? formOpts?.validation?.message\r\n              : thesMessages.map((m) => m).join(\", \"),\r\n          path: path,\r\n        })\r\n      ) : (\r\n        <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n"],"names":["updateFn","setState","payload","path","validationKey","prevState","isFunction","nestedValue","getNestedValue","value","updateNestedProperty","pushFunc","stateKey","index","array","getGlobalStore","arrayToUpdate","returnedArray","cutFunc","indexToCut","updatedArray","useStoreSubscription","fullPath","selector","compare","a","b","setValue","useState","previousValueRef","useRef","fullPathRef","useEffect","callback","store","newValue","unsubscribe","useGetValidationErrors","validIndices","useGetSyncInfo","key","syncKey","useGetKeyState","FormControlComponent","child","formOpts","registerFormRef","getFormRef","formRefStore","getValidationErrors","addValidationError","getInitialOptions","removeValidationError","refKey","localFormRef","existingRef","formRef","globalStateValue","localValue","setLocalValue","isCurrentlyDebouncing","debounceTimeoutRef","debouncedUpdater","initialOptions","validateOnBlur","handleBlur","fieldValue","validateZodPathFunc","error","rawSyncStatus","syncStatus","childElement","message","e","jsx","Fragment","ValidationWrapper","children","thisStateOpts","validationErrors","thesMessages","newMessage","React","m"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.424",
+  "version": "0.5.425",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -229,7 +229,6 @@ export type ArrayEndType<TShape extends unknown> = {
 } & EndType<TShape>;
 
 export type FormOptsType = {
-  key?: string;
   validation?: {
     hideMessage?: boolean;
     message?: string;
@@ -237,9 +236,7 @@ export type FormOptsType = {
     props?: GenericObject;
     disable?: boolean;
   };
-  formElements?: boolean;
   debounceTime?: number;
-  stateServerDifferences?: string[][];
 };
 
 export type FormControl<T> = (obj: FormElementParams<T>) => JSX.Element;
@@ -2169,7 +2166,8 @@ function createProxyHandler<T>(
                 index: { localIndex: number; originalIndex: number },
                 array: T,
                 arraySetter: StateObject<T>
-              ) => any
+              ) => any,
+              formOpts?: FormOptsType
             ) => {
               const arrayToMap = getGlobalStore
                 .getState()
@@ -2196,6 +2194,7 @@ function createProxyHandler<T>(
                   key: originalIndex,
                   stateKey,
                   itemComponentId,
+                  formOpts,
                   itemPath: finalPath,
                   children: callbackfn(
                     item,
@@ -2732,10 +2731,6 @@ function createProxyHandler<T>(
                 hideMessage ? { validation: { message: "" } } : undefined
               }
               path={path}
-              validationKey={
-                getGlobalStore.getState().getInitialOptions(stateKey)
-                  ?.validation?.key || ""
-              }
               stateKey={stateKey}
               validIndices={meta?.validIndices}
             >
@@ -2952,11 +2947,13 @@ function CogsItemWrapper({
   stateKey,
   itemComponentId,
   itemPath,
+  formOpts,
   children,
 }: {
   stateKey: string;
   itemComponentId: string;
   itemPath: string[];
+  formOpts?: FormOptsType;
   children: React.ReactNode;
 }) {
   // This hook handles the re-rendering when the item's own data changes.
@@ -3022,5 +3019,9 @@ function CogsItemWrapper({
   }, [stateKey, itemComponentId, itemPath.join(".")]);
 
   // The rendered output is a simple div that gets measured.
-  return <div ref={setRefs}>{children}</div>;
+  return (
+    <ValidationWrapper {...{ formOpts, path: itemPath, stateKey }}>
+      {children}
+    </ValidationWrapper>
+  );
 }

package/src/Functions.tsx

@@ -338,7 +338,7 @@ export const FormControlComponent = <TStateObject,>({
 
   return (
     <>
-      <ValidationWrapper {...{ formOpts, path, validationKey, stateKey }}>
+      <ValidationWrapper {...{ formOpts, path, stateKey }}>
         {childElement}
       </ValidationWrapper>
     </>
@@ -347,20 +347,21 @@ export const FormControlComponent = <TStateObject,>({
 export function ValidationWrapper({
   formOpts,
   path,
-  validationKey,
+
   stateKey,
   children,
   validIndices,
 }: {
   formOpts?: FormOptsType;
   path: string[];
-  validationKey: string;
+
   stateKey?: string;
   children: React.ReactNode;
   validIndices?: number[];
 }) {
   const { getInitialOptions } = getGlobalStore.getState();
-
+  const thisStateOpts = getInitialOptions(stateKey!);
+  const validationKey = thisStateOpts?.validation?.key ?? stateKey!;
   const validationErrors = useGetValidationErrors(
     validationKey,
     path,
@@ -381,7 +382,6 @@ export function ValidationWrapper({
       thesMessages.push(newMessage);
     }
   }
-  const thisStateOpts = getInitialOptions(stateKey!);
 
   return (
     <>
@@ -398,8 +398,6 @@ export function ValidationWrapper({
               ? formOpts?.validation?.message
               : thesMessages.map((m) => m).join(", "),
           path: path,
-
-          ...(formOpts?.key && { key: formOpts?.key }),
         })
       ) : (
         <React.Fragment key={path.toString()}>{children}</React.Fragment>