@telegraph/helpers 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @telegraph/helpers
 
+## 0.0.6
+
+### Patch Changes
+
+- [#221](https://github.com/knocklabs/telegraph/pull/221) [`1b0bb33`](https://github.com/knocklabs/telegraph/commit/1b0bb333d6ca1664971d19d48d3b036c6711d554) Thanks [@kylemcd](https://github.com/kylemcd)! - useDeterminateState + button integration
+
+## 0.0.5
+
+### Patch Changes
+
+- [#192](https://github.com/knocklabs/telegraph/pull/192) [`661854e`](https://github.com/knocklabs/telegraph/commit/661854eba8553eb7a112d1f3f5f5555a27729581) Thanks [@connorlindsey](https://github.com/connorlindsey)! - feat: add popover component. Pass ref through RefToTgphRef.
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("@radix-ui/react-slot"),c=require("react"),f=c.forwardRef((e,t)=>r.jsx(o.Slot,{...e,tgphRef:t}));exports.RefToTgphRef=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),T=require("@radix-ui/react-slot"),r=require("react"),m=r.forwardRef((e,t)=>R.jsx(T.Slot,{...e,ref:t,tgphRef:t})),S=({value:e,determinateValue:t,minDurationMs:u=1e3})=>{const[f,s]=r.useState(e),c=r.useRef(null),n=r.useRef(null),o=()=>{c.current&&(clearTimeout(c.current),c.current=null)},i=r.useCallback(()=>{if(e===t)o(),s(t),n.current=Date.now();else if(n.current!==null){const a=Date.now()-n.current,l=u-a;l>0?(o(),c.current=setTimeout(()=>{s(e),n.current=null},l)):(s(e),n.current=null)}else s(e)},[e,t,u]);return r.useEffect(()=>(i(),o),[e,i]),f};exports.RefToTgphRef=m;exports.useDeterminateState=S;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n"],"names":["RefToTgphRef","React","props","ref","jsx","Slot"],"mappings":"0KAcMA,EAAeC,EAAM,WAAqB,CAACC,EAAOC,IAC9CC,EAAAA,IAAAC,EAAAA,KAAA,CAAM,GAAGH,EAAO,QAASC,CAAK,CAAA,CACvC"}
+{"version":3,"file":"index.js","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} ref={ref} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["RefToTgphRef","React","props","ref","Slot","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":"0KAcMA,EAAeC,EAAM,WAAqB,CAACC,EAAOC,UAC9CC,EAAM,KAAA,CAAA,GAAGF,EAAO,IAAAC,EAAU,QAASA,CAAK,CAAA,CACjD,ECCKE,EAAsB,CAAI,CAC9B,MAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,GAClB,IAAuC,CACrC,KAAM,CAACC,EAAOC,CAAQ,EAAIT,EAAM,SAAYK,CAAK,EAC3CK,EAAaV,EAAM,OAA8B,IAAI,EACrDW,EAAeX,EAAM,OAAsB,IAAI,EAE/CY,EAAuB,IAAM,CAC7BF,EAAW,UACb,aAAaA,EAAW,OAAO,EAC/BA,EAAW,QAAU,KACvB,EAGIG,EAAmBb,EAAM,YAAY,IAAM,CAC/C,GAAIK,IAAUC,EACSM,IACrBH,EAASH,CAAgB,EACZK,EAAA,QAAU,KAAK,cACnBA,EAAa,UAAY,KAAM,CACxC,MAAMG,EAAc,KAAK,IAAI,EAAIH,EAAa,QACxCI,EAAgBR,EAAgBO,EAElCC,EAAgB,GACGH,IACVF,EAAA,QAAU,WAAW,IAAM,CACpCD,EAASJ,CAAK,EACdM,EAAa,QAAU,MACtBI,CAAa,IAEhBN,EAASJ,CAAK,EACdM,EAAa,QAAU,KACzB,MAEAF,EAASJ,CAAK,CAEf,EAAA,CAACA,EAAOC,EAAkBC,CAAa,CAAC,EAE3C,OAAAP,EAAM,UAAU,KACGa,IACVD,GACN,CAACP,EAAOQ,CAAgB,CAAC,EAErBL,CACT"}

package/dist/esm/index.mjs

@@ -1,8 +1,28 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Slot as f } from "@radix-ui/react-slot";
-import e from "react";
-const i = e.forwardRef((o, r) => /* @__PURE__ */ t(f, { ...o, tgphRef: r }));
+import { jsx as R } from "react/jsx-runtime";
+import { Slot as T } from "@radix-ui/react-slot";
+import r from "react";
+const S = r.forwardRef((t, e) => /* @__PURE__ */ R(T, { ...t, ref: e, tgphRef: e })), h = ({
+  value: t,
+  determinateValue: e,
+  minDurationMs: u = 1e3
+}) => {
+  const [l, o] = r.useState(t), s = r.useRef(null), n = r.useRef(null), c = () => {
+    s.current && (clearTimeout(s.current), s.current = null);
+  }, f = r.useCallback(() => {
+    if (t === e)
+      c(), o(e), n.current = Date.now();
+    else if (n.current !== null) {
+      const m = Date.now() - n.current, i = u - m;
+      i > 0 ? (c(), s.current = setTimeout(() => {
+        o(t), n.current = null;
+      }, i)) : (o(t), n.current = null);
+    } else
+      o(t);
+  }, [t, e, u]);
+  return r.useEffect(() => (f(), c), [t, f]), l;
+};
 export {
-  i as RefToTgphRef
+  S as RefToTgphRef,
+  h as useDeterminateState
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n"],"names":["RefToTgphRef","React","props","ref","jsx","Slot"],"mappings":";;;AAcA,MAAMA,IAAeC,EAAM,WAAqB,CAACC,GAAOC,MAC9C,gBAAAC,EAAAC,GAAA,EAAM,GAAGH,GAAO,SAASC,EAAK,CAAA,CACvC;"}
+{"version":3,"file":"index.mjs","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} ref={ref} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["RefToTgphRef","React","props","ref","Slot","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":";;;AAcA,MAAMA,IAAeC,EAAM,WAAqB,CAACC,GAAOC,wBAC9CC,GAAM,EAAA,GAAGF,GAAO,KAAAC,GAAU,SAASA,EAAK,CAAA,CACjD,GCCKE,IAAsB,CAAI;AAAA,EAC9B,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAuC;AACrC,QAAM,CAACC,GAAOC,CAAQ,IAAIT,EAAM,SAAYK,CAAK,GAC3CK,IAAaV,EAAM,OAA8B,IAAI,GACrDW,IAAeX,EAAM,OAAsB,IAAI,GAE/CY,IAAuB,MAAM;AACjC,IAAIF,EAAW,YACb,aAAaA,EAAW,OAAO,GAC/BA,EAAW,UAAU;AAAA,EACvB,GAGIG,IAAmBb,EAAM,YAAY,MAAM;AAC/C,QAAIK,MAAUC;AACS,MAAAM,KACrBH,EAASH,CAAgB,GACZK,EAAA,UAAU,KAAK;aACnBA,EAAa,YAAY,MAAM;AACxC,YAAMG,IAAc,KAAK,IAAI,IAAIH,EAAa,SACxCI,IAAgBR,IAAgBO;AAEtC,MAAIC,IAAgB,KACGH,KACVF,EAAA,UAAU,WAAW,MAAM;AACpC,QAAAD,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,SACtBI,CAAa,MAEhBN,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,IACzB;AAEA,MAAAF,EAASJ,CAAK;AAAA,EAEf,GAAA,CAACA,GAAOC,GAAkBC,CAAa,CAAC;AAE3C,SAAAP,EAAM,UAAU,OACGa,KACVD,IACN,CAACP,GAAOQ,CAAgB,CAAC,GAErBL;AACT;"}

package/dist/types/hooks/useDeterminateState.d.ts

@@ -0,0 +1,8 @@
+type UseDeterminateStateParams<T> = {
+    value: T;
+    determinateValue: T;
+    minDurationMs?: number;
+};
+declare const useDeterminateState: <T>({ value, determinateValue, minDurationMs, }: UseDeterminateStateParams<T>) => T;
+export { useDeterminateState };
+//# sourceMappingURL=useDeterminateState.d.ts.map

package/dist/types/hooks/useDeterminateState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeterminateState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDeterminateState.ts"],"names":[],"mappings":"AAWA,KAAK,yBAAyB,CAAC,CAAC,IAAI;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB,EAAE,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,mBAAmB,mDAItB,0BAA0B,CAAC,CAAC,KAAG,CA0CjC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export type { Required, AsProp, PropsWithAs, Optional, PolymorphicProps, PolymorphicPropsWithTgphRef, TgphElement, TgphComponentProps, OptionalAsPropConfig, } from './types/utility';
 export { RefToTgphRef } from './components/RefToTgphRef';
+export { useDeterminateState } from './hooks/useDeterminateState';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,2BAA2B,EAC3B,WAAW,EACX,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,2BAA2B,EAC3B,WAAW,EACX,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/helpers",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/helpers",
   "author": "@knocklabs",
   "license": "MIT",
@@ -39,12 +39,12 @@
     "@types/react": "^18.2.48",
     "eslint": "^8.56.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "typescript": "^5.3.3",
-    "vite": "^5.3.0"
+    "vite": "^5.3.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.3.1"
   }
 }