@tamagui/use-controllable-state 1.0.1-rc.5.1 → 1.0.1-rc.6

package/dist/cjs/useControllableState.js

@@ -23,23 +23,28 @@ __export(useControllableState_exports, {
 module.exports = __toCommonJS(useControllableState_exports);
 var import_use_event = require("@tamagui/use-event");
 var import_react = require("react");
+const emptyCallbackFn = (_) => _();
 function useControllableState({
   prop,
   defaultProp,
   onChange,
   strategy = "prop-wins",
-  preventUpdate
+  preventUpdate,
+  transition
 }) {
   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);
+  const transitionFn = transition ? import_react.startTransition : emptyCallbackFn;
   (0, import_react.useEffect)(() => {
     if (prop === void 0)
       return;
     previous.current = prop;
-    setState(prop);
+    transitionFn(() => {
+      setState(prop);
+    });
   }, [prop]);
   (0, import_react.useEffect)(() => {
     if (propWins)
@@ -56,7 +61,9 @@ function useControllableState({
       const nextValue = typeof next === "function" ? next(previous.current) : next;
       onChangeCb(nextValue);
     } else {
-      setState(next);
+      transitionFn(() => {
+        setState(next);
+      });
     }
   });
   return [value, setter];

package/dist/cjs/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "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;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, {\n  startTransition,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} 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\nconst emptyCallbackFn = (_) => _()\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n  transition,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n  transition?: 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  const transitionFn = transition ? startTransition : emptyCallbackFn\n\n  useEffect(() => {\n    if (prop === undefined) return\n    previous.current = prop\n    transitionFn(() => {\n      setState(prop)\n    })\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      transitionFn(() => {\n        setState(next)\n      })\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,mBAMO;AAOP,MAAM,kBAAkB,CAAC,MAAM,EAAE;AAE1B,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAOiD;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,QAAM,eAAe,aAAa,+BAAkB;AAEpD,8BAAU,MAAM;AACd,QAAI,SAAS;AAAW;AACxB,aAAS,UAAU;AACnB,iBAAa,MAAM;AACjB,eAAS,IAAI;AAAA,IACf,CAAC;AAAA,EACH,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,mBAAa,MAAM;AACjB,iBAAS,IAAI;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/dist/esm/useControllableState.js

@@ -1,22 +1,32 @@
 import { useEvent } from "@tamagui/use-event";
-import { useEffect, useRef, useState } from "react";
+import {
+  startTransition,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+const emptyCallbackFn = (_) => _();
 function useControllableState({
   prop,
   defaultProp,
   onChange,
   strategy = "prop-wins",
-  preventUpdate
+  preventUpdate,
+  transition
 }) {
   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);
+  const transitionFn = transition ? startTransition : emptyCallbackFn;
   useEffect(() => {
     if (prop === void 0)
       return;
     previous.current = prop;
-    setState(prop);
+    transitionFn(() => {
+      setState(prop);
+    });
   }, [prop]);
   useEffect(() => {
     if (propWins)
@@ -33,7 +43,9 @@ function useControllableState({
       const nextValue = typeof next === "function" ? next(previous.current) : next;
       onChangeCb(nextValue);
     } else {
-      setState(next);
+      transitionFn(() => {
+        setState(next);
+      });
     }
   });
   return [value, setter];

package/dist/esm/useControllableState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useControllableState.ts"],
-  "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;",
+  "sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport React, {\n  startTransition,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} 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\nconst emptyCallbackFn = (_) => _()\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange,\n  strategy = 'prop-wins',\n  preventUpdate,\n  transition,\n}: {\n  prop?: T | undefined\n  defaultProp: T\n  onChange?: ChangeCb<T>\n  strategy?: 'prop-wins' | 'most-recent-wins'\n  preventUpdate?: boolean\n  transition?: 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  const transitionFn = transition ? startTransition : emptyCallbackFn\n\n  useEffect(() => {\n    if (prop === undefined) return\n    previous.current = prop\n    transitionFn(() => {\n      setState(prop)\n    })\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      transitionFn(() => {\n        setState(next)\n      })\n    }\n  })\n\n  return [value as T, setter]\n}\n\nconst idFn = () => {}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP,MAAM,kBAAkB,CAAC,MAAM,EAAE;AAE1B,SAAS,qBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAOiD;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,QAAM,eAAe,aAAa,kBAAkB;AAEpD,YAAU,MAAM;AACd,QAAI,SAAS;AAAW;AACxB,aAAS,UAAU;AACnB,iBAAa,MAAM;AACjB,eAAS,IAAI;AAAA,IACf,CAAC;AAAA,EACH,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,mBAAa,MAAM;AACjB,iBAAS,IAAI;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,CAAC,OAAY,MAAM;AAC5B;AAEA,MAAM,OAAO,MAAM;AAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.1-rc.5.1",
+  "version": "1.0.1-rc.6",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -14,20 +14,20 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
-    "lint": "eslint src",
-    "lint:fix": "yarn lint --fix",
+    "lint": "../../node_modules/.bin/rome check src",
+    "lint:fix": "../../node_modules/.bin/rome check --apply-suggested src",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/use-event": "^1.0.1-rc.5.1"
+    "@tamagui/use-event": "^1.0.1-rc.6"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.5.1",
+    "@tamagui/build": "^1.0.1-rc.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/useControllableState.ts

@@ -1,23 +1,33 @@
 import { useEvent } from '@tamagui/use-event'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, {
+  startTransition,
+  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>>
 
+const emptyCallbackFn = (_) => _()
+
 export function useControllableState<T>({
   prop,
   defaultProp,
   onChange,
   strategy = 'prop-wins',
   preventUpdate,
+  transition,
 }: {
   prop?: T | undefined
   defaultProp: T
   onChange?: ChangeCb<T>
   strategy?: 'prop-wins' | 'most-recent-wins'
   preventUpdate?: boolean
+  transition?: boolean
 }): [T, React.Dispatch<React.SetStateAction<T>>] {
   const [state, setState] = useState(prop ?? defaultProp)
   const previous = useRef<any>(state)
@@ -25,10 +35,14 @@ export function useControllableState<T>({
   const value = propWins ? prop : state
   const onChangeCb = useEvent(onChange || idFn)
 
+  const transitionFn = transition ? startTransition : emptyCallbackFn
+
   useEffect(() => {
     if (prop === undefined) return
     previous.current = prop
-    setState(prop)
+    transitionFn(() => {
+      setState(prop)
+    })
   }, [prop])
 
   useEffect(() => {
@@ -45,7 +59,9 @@ export function useControllableState<T>({
       const nextValue = typeof next === 'function' ? next(previous.current) : next
       onChangeCb(nextValue)
     } else {
-      setState(next)
+      transitionFn(() => {
+        setState(next)
+      })
     }
   })
 

package/types/useControllableState.d.ts

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