@tamagui/use-controllable-state 1.0.0-beta.9 → 1.0.1-beta.101

package/dist/cjs/useControllableState.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -21,42 +20,46 @@ __export(useControllableState_exports, {
   useControllableState: () => useControllableState
 });
 module.exports = __toCommonJS(useControllableState_exports);
-var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_use_event = require("@tamagui/use-event");
 var import_react = require("react");
 function useControllableState({
   prop,
   defaultProp,
   onChange,
-  strategy = "prop-wins"
+  strategy = "prop-wins",
+  preventUpdate
 }) {
   const currentProp = (0, import_react.useRef)(prop);
-  const handleChange = (0, import_react_use_callback_ref.useCallbackRef)(onChange);
   const [val, setVal] = (0, import_react.useState)(prop ?? defaultProp);
   const propWins = strategy === "prop-wins";
-  (0, import_react.useEffect)(() => {
+  if (currentProp.current !== prop && !preventUpdate) {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, onChange);
+    });
+  }
   return [
     val,
-    (0, import_react.useCallback)((next) => {
+    (0, import_use_event.useEvent)((next) => {
+      if (preventUpdate)
+        return;
       if (propWins && currentProp.current !== void 0) {
+        onChange == null ? void 0 : onChange(next);
         return;
       }
       setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
       });
-    }, [setVal, propWins])
+    })
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange(next);
+  handleChange == null ? void 0 : handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useControllableState

package/dist/cjs/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange))\n  }, [prop])\n\n  return [\n    val,\n    useCallback(\n      (next: any) => {\n        if (propWins && currentProp.current !== undefined) {\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [setVal, propWins]\n    ) as any,\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA+B;AAC/B,mBAAgE;AAKzD,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,yBAAO,IAAI;AAC/B,QAAM,eAAe,kDAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,8BAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS,yBAAyB,MAAM,MAAM,YAAY,CAAC;AAAA,EACrE,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AAAA,IACL;AAAA,IACA,8BACE,CAAC,SAAc;AACb,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,QAAQ,QAAQ,CACnB;AAAA,EACF;AACF;AAvCgB;AAyChB,MAAM,2BAA2B,wBAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT,GANiC;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange?.(next)\n  return next\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAAmD;AAO5C,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,cAAc,yBAAO,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,2BAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,+BAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
   "names": []
 }

package/dist/esm/useControllableState.js

@@ -1,41 +1,43 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEvent } from "@tamagui/use-event";
+import { useRef, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
   onChange,
-  strategy = "prop-wins"
+  strategy = "prop-wins",
+  preventUpdate
 }) {
   const currentProp = useRef(prop);
-  const handleChange = useCallbackRef(onChange);
-  const [val, setVal] = useState(prop != null ? prop : defaultProp);
+  const [val, setVal] = useState(prop ?? defaultProp);
   const propWins = strategy === "prop-wins";
-  useEffect(() => {
+  if (currentProp.current !== prop && !preventUpdate) {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, onChange);
+    });
+  }
   return [
     val,
-    useCallback((next) => {
+    useEvent((next) => {
+      if (preventUpdate)
+        return;
       if (propWins && currentProp.current !== void 0) {
+        onChange == null ? void 0 : onChange(next);
         return;
       }
       setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
       });
-    }, [setVal, propWins])
+    })
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange(next);
+  handleChange == null ? void 0 : handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 export {
   useControllableState
 };

package/dist/esm/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const handleChange = useCallbackRef(onChange)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  useEffect(() => {\n    currentProp.current = prop\n    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange))\n  }, [prop])\n\n  return [\n    val,\n    useCallback(\n      (next: any) => {\n        if (propWins && currentProp.current !== undefined) {\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [setVal, propWins]\n    ) as any,\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange(next)\n  return next\n}\n"],
-  "mappings": ";;AAAA;AACA;AAKO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,GAMoC;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,eAAe,eAAe,QAAQ;AAC5C,QAAM,CAAC,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,YAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS,yBAAyB,MAAM,MAAM,YAAY,CAAC;AAAA,EACrE,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAc;AACb,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,YACF;AAAA,MACF,CAAC;AAAA,IACH,GACA,CAAC,QAAQ,QAAQ,CACnB;AAAA,EACF;AACF;AAvCgB;AAyChB,MAAM,2BAA2B,wBAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT,GANiC;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange?.(next)\n  return next\n}\n"],
+  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,SAAS,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
   "names": []
 }

package/dist/jsx/index.js

@@ -1 +1,2 @@
 export * from "./useControllableState";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './useControllableState'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/useControllableState.js

@@ -1,41 +1,44 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEvent } from "@tamagui/use-event";
+import { useRef, useState } from "react";
 function useControllableState({
   prop,
   defaultProp,
   onChange,
-  strategy = "prop-wins"
+  strategy = "prop-wins",
+  preventUpdate
 }) {
   const currentProp = useRef(prop);
-  const handleChange = useCallbackRef(onChange);
   const [val, setVal] = useState(prop != null ? prop : defaultProp);
   const propWins = strategy === "prop-wins";
-  useEffect(() => {
+  if (currentProp.current !== prop && !preventUpdate) {
     currentProp.current = prop;
-    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
-  }, [prop]);
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, onChange);
+    });
+  }
   return [
     val,
-    useCallback((next) => {
+    useEvent((next) => {
+      if (preventUpdate)
+        return;
       if (propWins && currentProp.current !== void 0) {
+        onChange == null ? void 0 : onChange(next);
         return;
       }
       setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, onChange);
       });
-    }, [setVal, propWins])
+    })
   ];
 }
-__name(useControllableState, "useControllableState");
-const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+const getNextStateWithCallback = (prev, next, handleChange) => {
   if (prev === next || next === void 0) {
     return prev;
   }
-  handleChange(next);
+  handleChange == null ? void 0 : handleChange(next);
   return next;
-}, "getNextStateWithCallback");
+};
 export {
   useControllableState
 };
+//# sourceMappingURL=useControllableState.js.map

package/dist/jsx/useControllableState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useControllableState.ts"],
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, { useEffect, useRef, useState } from 'react'\n\n// can configure to allow most-recent-wins or prop-wins\n// defaults to prop-wins\n\ntype ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n}): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const currentProp = useRef(prop)\n  const [val, setVal] = useState(prop ?? defaultProp)\n  const propWins = strategy === 'prop-wins'\n\n  // TODO can try no useEffect here right? just if()\n  if (currentProp.current !== prop && !preventUpdate) {\n    currentProp.current = prop\n    setVal((prev) => {\n      return getNextStateWithCallback(prev, prop, onChange)\n    })\n  }\n\n  return [\n    val,\n    useEvent((next: unknown) => {\n      if (preventUpdate) return\n      if (propWins && currentProp.current !== undefined) {\n        onChange?.(next as T)\n        return\n      }\n      setVal((prev) => {\n        return getNextStateWithCallback(\n          prev,\n          typeof next === 'function' ? next(prev) : next,\n          onChange\n        )\n      })\n    }),\n  ]\n}\n\nconst getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {\n  if (prev === next || next === undefined) {\n    return prev\n  }\n  handleChange?.(next)\n  return next\n}\n"],
+  "mappings": "AAAA;AACA;AAOO,8BAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,GAO+C;AAC/C,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,CAAC,KAAK,UAAU,SAAS,sBAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAG9B,MAAI,YAAY,YAAY,QAAQ,CAAC,eAAe;AAClD,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,QAAQ;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,CAAC,SAAkB;AAC1B,UAAI;AAAe;AACnB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,6CAAW;AACX;AAAA,MACF;AACA,aAAO,CAAC,SAAS;AACf,eAAO,yBACL,MACA,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI,MAC1C,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAiC;AACvF,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,+CAAe;AACf,SAAO;AACT;",
+  "names": []
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.1-beta.101",
   "sideEffects": false,
   "source": "src/index.ts",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,14 +19,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@radix-ui/react-use-callback-ref": "^0.1.0"
+    "@tamagui/use-event": "^1.0.1-beta.101"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.9",
+    "@tamagui/build": "^1.0.1-beta.101",
     "react": "*",
     "react-dom": "*"
   },

package/src/index.ts

@@ -0,0 +1 @@
+export * from './useControllableState'

package/src/useControllableState.ts

@@ -0,0 +1,59 @@
+import { useEvent } from '@tamagui/use-event'
+import React, { useEffect, useRef, useState } from 'react'
+
+// can configure to allow most-recent-wins or prop-wins
+// defaults to prop-wins
+
+type ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>
+
+export function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = 'prop-wins',
+  preventUpdate,
+}: {
+  prop?: T | undefined
+  defaultProp: T
+  onChange?: ChangeCb<T>
+  strategy?: 'prop-wins' | 'most-recent-wins'
+  preventUpdate?: boolean
+}): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const currentProp = useRef(prop)
+  const [val, setVal] = useState(prop ?? defaultProp)
+  const propWins = strategy === 'prop-wins'
+
+  // TODO can try no useEffect here right? just if()
+  if (currentProp.current !== prop && !preventUpdate) {
+    currentProp.current = prop
+    setVal((prev) => {
+      return getNextStateWithCallback(prev, prop, onChange)
+    })
+  }
+
+  return [
+    val,
+    useEvent((next: unknown) => {
+      if (preventUpdate) return
+      if (propWins && currentProp.current !== undefined) {
+        onChange?.(next as T)
+        return
+      }
+      setVal((prev) => {
+        return getNextStateWithCallback(
+          prev,
+          typeof next === 'function' ? next(prev) : next,
+          onChange
+        )
+      })
+    }),
+  ]
+}
+
+const getNextStateWithCallback = (prev: any, next: any, handleChange?: ChangeCb<any>) => {
+  if (prev === next || next === undefined) {
+    return prev
+  }
+  handleChange?.(next)
+  return next
+}

package/types/useControllableState.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-export declare function useControllableState<T>({ prop, defaultProp, onChange, strategy, }: {
+declare type ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>;
+export declare function useControllableState<T>({ prop, defaultProp, onChange, strategy, preventUpdate, }: {
     prop?: T | undefined;
     defaultProp: T;
-    onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>;
+    onChange?: ChangeCb<T>;
     strategy?: 'prop-wins' | 'most-recent-wins';
+    preventUpdate?: boolean;
 }): [T, React.Dispatch<React.SetStateAction<T>>];
+export {};
 //# sourceMappingURL=useControllableState.d.ts.map

package/types/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,GACvB,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IACpB,WAAW,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAA;CAC5C,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA6B/C"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../src/useControllableState.ts"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAEhF,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,EACtB,aAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IACpB,WAAW,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAA;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA8B/C"}