@ngrok/mantle 0.10.2 → 0.11.0

package/dist/hooks.d.ts

@@ -1,4 +1,14 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
+
+/**
+ * Returns a memoized callback that will always refer to the latest callback
+ * passed to the hook.
+ *
+ * This is useful when you want to pass a callback which may or may not be
+ * memoized (have a stable identity) to a child component that will be updated
+ * without causing the child component to re-render.
+ */
+declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T;
 
 /**
  * A hook that allows you to copy a string to the clipboard.
@@ -7,10 +17,28 @@ import { useLayoutEffect } from 'react';
  */
 declare function useCopyToClipboard(): readonly [string, (value: string) => void];
 
+type Options = {
+    /**
+     * The delay in milliseconds to wait before calling the callback.
+     */
+    waitMs: number;
+};
+/**
+ * Create a debounced version of a callback function.
+ *
+ * It allows you to delay the execution of a function until a certain period of
+ * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid
+ * invocations of a function (like in search inputs or button clicks)
+ *
+ * Note: The debounced callback will always refer to the latest callback passed
+ * even without memoization, so it's stable and safe to use in dependency arrays.
+ */
+declare function useDebouncedCallback<T extends (...args: any[]) => any>(callbackFn: T, options: Options): (...args: Parameters<T>) => void;
+
 /**
  * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.
  */
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 
 declare function useMatchesMediaQuery(query: string): boolean;
 
@@ -26,4 +54,4 @@ declare function usePrefersReducedMotion(): boolean;
  */
 declare const useRandomStableId: (prefix?: string) => string;
 
-export { useCopyToClipboard, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId };
+export { useCallbackRef, useCopyToClipboard, useDebouncedCallback, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId };

package/dist/hooks.js

@@ -1,2 +1,2 @@
-import{a as u}from"./chunk-D3XF6J5A.js";import{a as s}from"./chunk-IWKI4XHM.js";import{useEffect as i,useLayoutEffect as f}from"react";var c=typeof window<"u"?f:i;import{useEffect as d,useState as m}from"react";var a="(prefers-reduced-motion: no-preference)";function p(){let[e,t]=m(!0);return d(()=>{let o=window.matchMedia(a);t(!o.matches);function r(n){t(!n.matches)}return o.addEventListener("change",r),()=>{o.removeEventListener("change",r)}},[]),e}import{useMemo as x}from"react";var M=(e="mantle")=>x(()=>h(e),[e]);function h(e="mantle"){return[e.trim()||"mantle",y()].join("-")}function y(){return Math.random().toString(36).substring(2,9)}export{s as useCopyToClipboard,c as useIsomorphicLayoutEffect,u as useMatchesMediaQuery,p as usePrefersReducedMotion,M as useRandomStableId};
+import{a}from"./chunk-D3XF6J5A.js";import{a as u}from"./chunk-IWKI4XHM.js";import{useEffect as c,useMemo as f,useRef as i}from"react";function s(e){let t=i(e);return c(()=>{t.current=e}),f(()=>(...r)=>t.current?.(...r),[])}import{useCallback as m,useEffect as d,useRef as p}from"react";function l(e,t){let r=s(e),o=p(0);return d(()=>()=>window.clearTimeout(o.current),[]),m((...n)=>{window.clearTimeout(o.current),o.current=window.setTimeout(()=>r(...n),t.waitMs)},[r,t.waitMs])}import{useEffect as b,useLayoutEffect as x}from"react";var y=typeof window<"u"?x:b;import{useEffect as M,useState as w}from"react";var R="(prefers-reduced-motion: no-preference)";function T(){let[e,t]=w(!0);return M(()=>{let r=window.matchMedia(R);t(!r.matches);function o(n){t(!n.matches)}return r.addEventListener("change",o),()=>{r.removeEventListener("change",o)}},[]),e}import{useMemo as E}from"react";var h=(e="mantle")=>E(()=>C(e),[e]);function C(e="mantle"){return[e.trim()||"mantle",k()].join("-")}function k(){return Math.random().toString(36).substring(2,9)}export{s as useCallbackRef,u as useCopyToClipboard,l as useDebouncedCallback,y as useIsomorphicLayoutEffect,a as useMatchesMediaQuery,T as usePrefersReducedMotion,h as useRandomStableId};
 //# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"gFAAA,OAAS,aAAAA,EAAW,mBAAAC,MAAuB,QAKpC,IAAMC,EAA4B,OAAO,OAAW,IAAcD,EAAkBD,ECL3F,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAOpC,IAAMC,EAAQ,0CAKP,SAASC,GAA0B,CAEzC,GAAM,CAACC,EAAsBC,CAAuB,EAAIJ,EAAS,EAAI,EAErE,OAAAD,EAAU,IAAM,CACf,IAAMM,EAAiB,OAAO,WAAWJ,CAAK,EAG9CG,EAAwB,CAACC,EAAe,OAAO,EAG/C,SAASC,EAASC,EAA4B,CAC7CH,EAAwB,CAACG,EAAM,OAAO,CACvC,CAEA,OAAAF,EAAe,iBAAiB,SAAUC,CAAQ,EAE3C,IAAM,CACZD,EAAe,oBAAoB,SAAUC,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEEH,CACR,CCnCA,OAAS,WAAAK,MAAe,QAOxB,IAAMC,EAAoB,CAACC,EAAS,WAAaF,EAAQ,IAAMG,EAAeD,CAAM,EAAG,CAACA,CAAM,CAAC,EAO/F,SAASE,EAAeC,EAAS,SAAU,CAE1C,MAAO,CADSA,EAAO,KAAK,GAAK,SAChBC,EAAc,CAAC,EAAE,KAAK,GAAG,CAC3C,CAEA,SAASA,GAAgB,CACxB,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CACjD","names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}
+{"version":3,"sources":["../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: any[]) => any>(callbackFn: T, options: Options) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"2EAAA,OAAS,aAAAA,EAAW,WAAAC,EAAS,UAAAC,MAAc,QAU3C,SAASC,EAAkDC,EAA4B,CACtF,IAAMC,EAAcH,EAAOE,CAAQ,EAEnC,OAAAJ,EAAU,IAAM,CACfK,EAAY,QAAUD,CACvB,CAAC,EAEMH,EAAQ,IAAO,IAAIK,IAASD,EAAY,UAAU,GAAGC,CAAI,EAAS,CAAC,CAAC,CAC5E,CClBA,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,MAAc,QAoB/C,SAASC,EAAwDC,EAAeC,EAAkB,CACjG,IAAMC,EAAmBC,EAAeH,CAAU,EAC5CI,EAAmBC,EAAO,CAAC,EACjC,OAAAC,EAAU,IAAM,IAAM,OAAO,aAAaF,EAAiB,OAAO,EAAG,CAAC,CAAC,EAEhEG,EACN,IAAIC,IAAwB,CAC3B,OAAO,aAAaJ,EAAiB,OAAO,EAC5CA,EAAiB,QAAU,OAAO,WAAW,IAAMF,EAAiB,GAAGM,CAAI,EAAGP,EAAQ,MAAM,CAC7F,EACA,CAACC,EAAkBD,EAAQ,MAAM,CAClC,CACD,CChCA,OAAS,aAAAQ,EAAW,mBAAAC,MAAuB,QAKpC,IAAMC,EAA4B,OAAO,OAAW,IAAcD,EAAkBD,ECL3F,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAOpC,IAAMC,EAAQ,0CAKP,SAASC,GAA0B,CAEzC,GAAM,CAACC,EAAsBC,CAAuB,EAAIJ,EAAS,EAAI,EAErE,OAAAD,EAAU,IAAM,CACf,IAAMM,EAAiB,OAAO,WAAWJ,CAAK,EAG9CG,EAAwB,CAACC,EAAe,OAAO,EAG/C,SAASC,EAASC,EAA4B,CAC7CH,EAAwB,CAACG,EAAM,OAAO,CACvC,CAEA,OAAAF,EAAe,iBAAiB,SAAUC,CAAQ,EAE3C,IAAM,CACZD,EAAe,oBAAoB,SAAUC,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEEH,CACR,CCnCA,OAAS,WAAAK,MAAe,QAOxB,IAAMC,EAAoB,CAACC,EAAS,WAAaF,EAAQ,IAAMG,EAAeD,CAAM,EAAG,CAACA,CAAM,CAAC,EAO/F,SAASE,EAAeC,EAAS,SAAU,CAE1C,MAAO,CADSA,EAAO,KAAK,GAAK,SAChBC,EAAc,CAAC,EAAE,KAAK,GAAG,CAC3C,CAEA,SAASA,GAAgB,CACxB,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CACjD","names":["useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
@@ -50,32 +50,32 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.17.5",
+    "@types/node": "20.17.6",
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.3",
-    "@vitest/ui": "2.1.4",
+    "@vitest/ui": "2.1.5",
     "autoprefixer": "10.4.20",
     "browserslist": "4.24.2",
     "date-fns": "3.6.0",
     "jsdom": "25.0.1",
-    "postcss": "8.4.47",
+    "postcss": "8.4.49",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.28.0",
     "tailwindcss": "3.4.14",
     "tsup": "8.3.5",
     "typescript": "5.6.3",
-    "vite": "5.4.10",
-    "vitest": "2.1.4",
+    "vite": "5.4.11",
+    "vitest": "2.1.5",
     "zod": "3.23.8",
     "@cfg/tsconfig": "1.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "2.1.7",
     "date-fns": "^3.6.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.14",