@tamagui/use-controllable-state 1.0.0-beta.0

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./useControllableState"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/useControllableState.js

@@ -0,0 +1,64 @@
+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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useControllableState_exports = {};
+__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_react = require("react");
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = "prop-wins"
+}) {
+  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)(() => {
+    currentProp.current = prop;
+    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
+  }, [prop]);
+  return [
+    val,
+    (0, import_react.useCallback)((next) => {
+      if (propWins && currentProp.current !== void 0) {
+        return;
+      }
+      setVal((prev) => {
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+      });
+    }, [setVal, propWins])
+  ];
+}
+__name(useControllableState, "useControllableState");
+const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+  if (prev === next || next === void 0) {
+    return prev;
+  }
+  handleChange(next);
+  return next;
+}, "getNextStateWithCallback");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useControllableState
+});
+//# sourceMappingURL=useControllableState.js.map

package/dist/cjs/useControllableState.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

package/dist/esm/useControllableState.js

@@ -0,0 +1,42 @@
+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";
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = "prop-wins"
+}) {
+  const currentProp = useRef(prop);
+  const handleChange = useCallbackRef(onChange);
+  const [val, setVal] = useState(prop != null ? prop : defaultProp);
+  const propWins = strategy === "prop-wins";
+  useEffect(() => {
+    currentProp.current = prop;
+    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
+  }, [prop]);
+  return [
+    val,
+    useCallback((next) => {
+      if (propWins && currentProp.current !== void 0) {
+        return;
+      }
+      setVal((prev) => {
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+      });
+    }, [setVal, propWins])
+  ];
+}
+__name(useControllableState, "useControllableState");
+const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+  if (prev === next || next === void 0) {
+    return prev;
+  }
+  handleChange(next);
+  return next;
+}, "getNextStateWithCallback");
+export {
+  useControllableState
+};
+//# sourceMappingURL=useControllableState.js.map

package/dist/esm/useControllableState.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/dist/jsx/index.js

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

package/dist/jsx/useControllableState.js

@@ -0,0 +1,41 @@
+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";
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = "prop-wins"
+}) {
+  const currentProp = useRef(prop);
+  const handleChange = useCallbackRef(onChange);
+  const [val, setVal] = useState(prop != null ? prop : defaultProp);
+  const propWins = strategy === "prop-wins";
+  useEffect(() => {
+    currentProp.current = prop;
+    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange));
+  }, [prop]);
+  return [
+    val,
+    useCallback((next) => {
+      if (propWins && currentProp.current !== void 0) {
+        return;
+      }
+      setVal((prev) => {
+        return getNextStateWithCallback(prev, typeof next === "function" ? next(prev) : next, handleChange);
+      });
+    }, [setVal, propWins])
+  ];
+}
+__name(useControllableState, "useControllableState");
+const getNextStateWithCallback = /* @__PURE__ */ __name((prev, next, handleChange) => {
+  if (prev === next || next === void 0) {
+    return prev;
+  }
+  handleChange(next);
+  return next;
+}, "getNextStateWithCallback");
+export {
+  useControllableState
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tamagui/use-controllable-state",
+  "version": "1.0.0-beta.0",
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "typings": "types",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@radix-ui/react-use-callback-ref": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.0-beta.0",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useControllableState';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/types/useControllableState.d.ts

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

package/types/useControllableState.d.ts.map

@@ -0,0 +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"}