@tamagui/use-controllable-state 1.0.1-beta.98 → 1.0.1-rc.0

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './useControllableState'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,mCAAd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,mCAAd;",
   "names": []
 }

package/dist/cjs/useControllableState.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -20,43 +21,47 @@ __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";
+  const [state, setState] = (0, import_react.useState)(prop ?? defaultProp);
+  const previous = (0, import_react.useRef)(state);
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
+  const onChangeCb = (0, import_use_event.useEvent)(onChange || idFn);
   (0, import_react.useEffect)(() => {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, handleChange);
-    });
-  }, [handleChange, prop]);
-  return [
-    val,
-    (0, import_react.useCallback)((next) => {
-      if (propWins && currentProp.current !== void 0) {
-        handleChange(next);
-        return;
-      }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
-      });
-    }, [propWins, handleChange])
-  ];
+    if (prop === void 0)
+      return;
+    previous.current = prop;
+    setState(prop);
+  }, [prop]);
+  (0, import_react.useEffect)(() => {
+    if (propWins)
+      return;
+    if (state !== previous.current) {
+      previous.current = state;
+      onChangeCb(state);
+    }
+  }, [onChangeCb, state, propWins]);
+  const setter = (0, import_use_event.useEvent)((next) => {
+    if (preventUpdate)
+      return;
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
-  if (prev === next || next === void 0) {
-    return prev;
-  }
-  handleChange(next);
-  return next;
+const idFn = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\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;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,8BACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;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,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\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 [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (prop === undefined) return\n    previous.current = prop\n    setState(prop)\n  }, [prop])\n\n  useEffect(() => {\n    if (propWins) return\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state, propWins])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAAgE;AAOzD,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAMiD;AAC/C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,QAAQ,WAAW;AACtD,QAAM,eAAW,qBAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,iBAAa,2BAAS,YAAY,IAAI;AAE5C,8BAAU,MAAM;AACd,QAAI,SAAS;AAAW;AACxB,aAAS,UAAU;AACnB,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,QAAI;AAAU;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,QAAQ,CAAC;AAEhC,QAAM,aAAS,2BAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/esm/index.js.map

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

package/dist/esm/useControllableState.js

@@ -1,40 +1,44 @@
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEvent } from "@tamagui/use-event";
+import { useEffect, 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 ?? defaultProp);
-  const propWins = strategy === "prop-wins";
+  const [state, setState] = useState(prop ?? defaultProp);
+  const previous = useRef(state);
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
+  const onChangeCb = useEvent(onChange || idFn);
   useEffect(() => {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, handleChange);
-    });
-  }, [handleChange, prop]);
-  return [
-    val,
-    useCallback((next) => {
-      if (propWins && currentProp.current !== void 0) {
-        handleChange(next);
-        return;
-      }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
-      });
-    }, [propWins, handleChange])
-  ];
+    if (prop === void 0)
+      return;
+    previous.current = prop;
+    setState(prop);
+  }, [prop]);
+  useEffect(() => {
+    if (propWins)
+      return;
+    if (state !== previous.current) {
+      previous.current = state;
+      onChangeCb(state);
+    }
+  }, [onChangeCb, state, propWins]);
+  const setter = useEvent((next) => {
+    if (preventUpdate)
+      return;
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
-  if (prev === next || next === void 0) {
-    return prev;
-  }
-  handleChange(next);
-  return next;
+const idFn = () => {
 };
 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) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\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,QAAQ,WAAW;AAClD,QAAM,WAAW,aAAa;AAE9B,YAAU,MAAM;AACd,gBAAY,UAAU;AACtB,WAAO,CAAC,SAAS;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;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,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\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 [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (prop === undefined) return\n    previous.current = prop\n    setState(prop)\n  }, [prop])\n\n  useEffect(() => {\n    if (propWins) return\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state, propWins])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAA6B,WAAW,QAAQ,gBAAgB;AAOzD,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAMiD;AAC/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,SAAS;AAAW;AACxB,aAAS,UAAU;AACnB,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI;AAAU;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,QAAQ,CAAC;AAEhC,QAAM,SAAS,SAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/jsx/index.js.map

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

package/dist/jsx/useControllableState.js

@@ -1,40 +1,44 @@
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEvent } from "@tamagui/use-event";
+import { useEffect, 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";
+  const [state, setState] = useState(prop ?? defaultProp);
+  const previous = useRef(state);
+  const propWins = strategy === "prop-wins" && prop !== void 0;
+  const value = propWins ? prop : state;
+  const onChangeCb = useEvent(onChange || idFn);
   useEffect(() => {
-    currentProp.current = prop;
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, handleChange);
-    });
-  }, [handleChange, prop]);
-  return [
-    val,
-    useCallback((next) => {
-      if (propWins && currentProp.current !== void 0) {
-        handleChange(next);
-        return;
-      }
-      setVal((prev) => {
-        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
-      });
-    }, [propWins, handleChange])
-  ];
+    if (prop === void 0)
+      return;
+    previous.current = prop;
+    setState(prop);
+  }, [prop]);
+  useEffect(() => {
+    if (propWins)
+      return;
+    if (state !== previous.current) {
+      previous.current = state;
+      onChangeCb(state);
+    }
+  }, [onChangeCb, state, propWins]);
+  const setter = useEvent((next) => {
+    if (preventUpdate)
+      return;
+    if (propWins) {
+      const nextValue = typeof next === "function" ? next(previous.current) : next;
+      onChangeCb(nextValue);
+    } else {
+      setState(next);
+    }
+  });
+  return [value, setter];
 }
-const getNextStateWithCallback = (prev, next, handleChange) => {
-  if (prev === next || next === void 0) {
-    return prev;
-  }
-  handleChange(next);
-  return next;
+const idFn = () => {
 };
 export {
   useControllableState

package/dist/jsx/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) => {\n      return getNextStateWithCallback(prev, prop, handleChange)\n    })\n  }, [handleChange, prop])\n\n  return [\n    val,\n    useCallback(\n      (next: unknown) => {\n        if (propWins && currentProp.current !== undefined) {\n          handleChange(next as T)\n          return\n        }\n        setVal((prev) => {\n          return getNextStateWithCallback(\n            prev,\n            typeof next === 'function' ? next(prev) : next,\n            handleChange\n          )\n        })\n      },\n      [propWins, handleChange]\n    ),\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;AACf,aAAO,yBAAyB,MAAM,MAAM,YAAY;AAAA,IAC1D,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA,YACE,CAAC,SAAkB;AACjB,UAAI,YAAY,YAAY,YAAY,QAAW;AACjD,qBAAa,IAAS;AACtB;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,UAAU,YAAY,CACzB;AAAA,EACF;AACF;AAEA,MAAM,2BAA2B,CAAC,MAAW,MAAW,iBAAsB;AAC5E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO;AAAA,EACT;AACA,eAAa,IAAI;AACjB,SAAO;AACT;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\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\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 [state, setState] = useState(prop ?? defaultProp)\n  const previous = useRef<any>(state)\n  const propWins = strategy === 'prop-wins' && prop !== undefined\n  const value = propWins ? prop : state\n  const onChangeCb = useEvent(onChange || idFn)\n\n  useEffect(() => {\n    if (prop === undefined) return\n    previous.current = prop\n    setState(prop)\n  }, [prop])\n\n  useEffect(() => {\n    if (propWins) return\n    if (state !== previous.current) {\n      previous.current = state\n      onChangeCb(state)\n    }\n  }, [onChangeCb, state, propWins])\n\n  const setter = useEvent((next) => {\n    if (preventUpdate) return\n    if (propWins) {\n      const nextValue = typeof next === 'function' ? next(previous.current) : next\n      onChangeCb(nextValue)\n    } else {\n      setState(next)\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAA6B,WAAW,QAAQ,gBAAgB;AAOzD,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAMiD;AAC/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ,WAAW;AACtD,QAAM,WAAW,OAAY,KAAK;AAClC,QAAM,WAAW,aAAa,eAAe,SAAS;AACtD,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,aAAa,SAAS,YAAY,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,SAAS;AAAW;AACxB,aAAS,UAAU;AACnB,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI;AAAU;AACd,QAAI,UAAU,SAAS,SAAS;AAC9B,eAAS,UAAU;AACnB,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,QAAQ,CAAC;AAEhC,QAAM,SAAS,SAAS,CAAC,SAAS;AAChC,QAAI;AAAe;AACnB,QAAI,UAAU;AACZ,YAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS,OAAO,IAAI;AACxE,iBAAW,SAAS;AAAA,IACtB,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.1-beta.98",
+  "version": "1.0.1-rc.0",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
-  "module:jsx": "dist/jsx",
   "files": [
     "src",
     "types",
@@ -15,20 +14,22 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
+    "lint": "eslint src",
+    "lint:fix": "yarn lint --fix",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@radix-ui/react-use-callback-ref": "^0.1.0"
+    "@tamagui/use-event": "^1.0.1-rc.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.98",
-    "react": "*",
-    "react-dom": "*"
+    "@tamagui/build": "^1.0.1-rc.0",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "publishConfig": {
     "access": "public"

package/src/useControllableState.ts

@@ -1,57 +1,55 @@
-import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
+import { useEvent } from '@tamagui/use-event'
 import React, { useCallback, 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?: ((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>>] {
-  const currentProp = useRef(prop)
-  const handleChange = useCallbackRef(onChange)
-  const [val, setVal] = useState(prop ?? defaultProp)
-  const propWins = strategy === 'prop-wins'
+  const [state, setState] = useState(prop ?? defaultProp)
+  const previous = useRef<any>(state)
+  const propWins = strategy === 'prop-wins' && prop !== undefined
+  const value = propWins ? prop : state
+  const onChangeCb = useEvent(onChange || idFn)
 
   useEffect(() => {
-    currentProp.current = prop
-    setVal((prev) => {
-      return getNextStateWithCallback(prev, prop, handleChange)
-    })
-  }, [handleChange, prop])
-
-  return [
-    val,
-    useCallback(
-      (next: unknown) => {
-        if (propWins && currentProp.current !== undefined) {
-          handleChange(next as T)
-          return
-        }
-        setVal((prev) => {
-          return getNextStateWithCallback(
-            prev,
-            typeof next === 'function' ? next(prev) : next,
-            handleChange
-          )
-        })
-      },
-      [propWins, handleChange]
-    ),
-  ]
-}
+    if (prop === undefined) return
+    previous.current = prop
+    setState(prop)
+  }, [prop])
+
+  useEffect(() => {
+    if (propWins) return
+    if (state !== previous.current) {
+      previous.current = state
+      onChangeCb(state)
+    }
+  }, [onChangeCb, state, propWins])
+
+  const setter = useEvent((next) => {
+    if (preventUpdate) return
+    if (propWins) {
+      const nextValue = typeof next === 'function' ? next(previous.current) : next
+      onChangeCb(nextValue)
+    } else {
+      setState(next)
+    }
+  })
 
-const getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {
-  if (prev === next || next === undefined) {
-    return prev
-  }
-  handleChange(next)
-  return next
+  return [value as T, setter]
 }
+
+const idFn = () => {}

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 +0,0 @@
-{"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,CAgC/C"}