@dxos/react-hooks 0.4.8-main.fff1521 → 0.4.8-next.2e7285f

package/dist/lib/browser/index.mjs

@@ -1,7 +1,19 @@
+// packages/ui/primitives/react-hooks/src/useDefaultValue.ts
+import { useEffect, useState, useMemo } from "react";
+var useDefaultValue = (reactiveValue, defaultValue) => {
+  const stableDefaultValue = useMemo(() => defaultValue, []);
+  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
+  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [
+    reactiveValue,
+    stableDefaultValue
+  ]);
+  return value;
+};
+
 // packages/ui/primitives/react-hooks/src/useFileDownload.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 var useFileDownload = () => {
-  return useMemo(() => (data, filename) => {
+  return useMemo2(() => (data, filename) => {
     const url = typeof data === "string" ? data : URL.createObjectURL(data);
     const element = document.createElement("a");
     element.setAttribute("href", url);
@@ -12,10 +24,10 @@ var useFileDownload = () => {
 };
 
 // packages/ui/primitives/react-hooks/src/useForwardedRef.ts
-import { useRef, useEffect } from "react";
+import { useRef, useEffect as useEffect2 } from "react";
 var useForwardedRef = (ref) => {
   const innerRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (!ref) {
       return;
     }
@@ -30,21 +42,21 @@ var useForwardedRef = (ref) => {
 
 // packages/ui/primitives/react-hooks/src/useId.ts
 import alea from "alea";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var Alea = alea;
 var prng = new Alea("@dxos/react-hooks");
 var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
-var useId = (namespace, propsId, opts) => useMemo2(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
+var useId = (namespace, propsId, opts) => useMemo3(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
   propsId
 ]);
 
 // packages/ui/primitives/react-hooks/src/useIsFocused.ts
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 var useIsFocused = (inputRef) => {
-  const [isFocused, setIsFocused] = useState(void 0);
+  const [isFocused, setIsFocused] = useState2(void 0);
   const isFocusedRef = useRef2(isFocused);
   isFocusedRef.current = isFocused;
-  useEffect2(() => {
+  useEffect3(() => {
     const input = inputRef.current;
     if (!input) {
       return;
@@ -68,7 +80,7 @@ var useIsFocused = (inputRef) => {
 };
 
 // packages/ui/primitives/react-hooks/src/useMediaQuery.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 var breakpointMediaQueries = {
   sm: "(min-width: 640px)",
   md: "(min-width: 768px)",
@@ -85,13 +97,13 @@ var useMediaQuery = (query, options = {}) => {
     fallback
   ];
   fallbackValues = fallbackValues.filter((v) => v != null);
-  const [value, setValue] = useState2(() => {
+  const [value, setValue] = useState3(() => {
     return queries.map((query2, index) => ({
       media: query2,
       matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
     }));
   });
-  useEffect3(() => {
+  useEffect4(() => {
     setValue(queries.map((query2) => ({
       media: query2,
       matches: document.defaultView?.matchMedia(query2).matches
@@ -132,24 +144,73 @@ var useMediaQuery = (query, options = {}) => {
   return value.map((item) => !!item.matches);
 };
 
-// packages/ui/primitives/react-hooks/src/useDefaultValue.ts
-import { useEffect as useEffect4, useState as useState3, useMemo as useMemo3 } from "react";
-var useDefaultValue = (reactiveValue, defaultValue) => {
-  const stableDefaultValue = useMemo3(() => defaultValue, []);
-  const [value, setValue] = useState3(reactiveValue ?? stableDefaultValue);
-  useEffect4(() => setValue(reactiveValue ?? stableDefaultValue), [
-    reactiveValue,
-    stableDefaultValue
+// packages/ui/primitives/react-hooks/src/useTransitions.ts
+import { useRef as useRef3, useEffect as useEffect5, useState as useState4 } from "react";
+var isFunction = (functionToCheck) => {
+  return functionToCheck instanceof Function;
+};
+var useDidTransition = (currentValue, fromValue, toValue) => {
+  const [hasTransitioned, setHasTransitioned] = useState4(false);
+  const previousValue = useRef3(currentValue);
+  useEffect5(() => {
+    const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
+    const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
+    const transitioned = fromValueValid && toValueValid;
+    if (transitioned) {
+      setHasTransitioned(true);
+    } else {
+      setHasTransitioned(false);
+    }
+    previousValue.current = currentValue;
+  }, [
+    currentValue,
+    fromValue,
+    toValue,
+    setHasTransitioned,
+    previousValue
   ]);
-  return value;
+  return hasTransitioned;
+};
+var useOnTransition = (currentValue, fromValue, toValue, callback) => {
+  const dirty = useRef3(false);
+  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
+  useEffect5(() => {
+    dirty.current = false;
+  }, [
+    currentValue,
+    dirty
+  ]);
+  useEffect5(() => {
+    if (hasTransitioned && !dirty.current) {
+      callback();
+      dirty.current = true;
+    }
+  }, [
+    hasTransitioned,
+    dirty,
+    callback
+  ]);
+};
+
+// packages/ui/primitives/react-hooks/src/useRefCallback.ts
+import { useState as useState5 } from "react";
+var useRefCallback = () => {
+  const [value, setValue] = useState5(null);
+  return {
+    refCallback: (value2) => setValue(value2),
+    value
+  };
 };
 export {
   randomString,
   useDefaultValue,
+  useDidTransition,
   useFileDownload,
   useForwardedRef,
   useId,
   useIsFocused,
-  useMediaQuery
+  useMediaQuery,
+  useOnTransition,
+  useRefCallback
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useDefaultValue.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n *   download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n  return useMemo(\n    () => (data: Blob | string, filename: string) => {\n      const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n      const element = document.createElement('a');\n      element.setAttribute('href', url);\n      element.setAttribute('download', filename);\n      element.setAttribute('target', 'download');\n      element.click();\n    },\n    [],\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n  const innerRef = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref) {\n      return;\n    }\n    if (typeof ref === 'function') {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n  new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n  prng()\n    .toString(16)\n    .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n  useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n  const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n  isFocusedRef.current = isFocused;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    const onFocus = () => setIsFocused(true);\n    const onBlur = () => setIsFocused(false);\n    input.addEventListener('focus', onFocus);\n    input.addEventListener('blur', onBlur);\n\n    if (isFocusedRef.current === undefined) {\n      setIsFocused(document.activeElement === input);\n    }\n\n    return () => {\n      input.removeEventListener('focus', onFocus);\n      input.removeEventListener('blur', onBlur);\n    };\n  }, [inputRef, setIsFocused]);\n\n  return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n  fallback?: boolean | boolean[];\n  ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n  sm: '(min-width: 640px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 1024px)',\n  xl: '(min-width: 1280px)',\n  '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n  const { ssr = true, fallback } = options;\n\n  const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n    query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n  );\n\n  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n  const [value, setValue] = useState(() => {\n    return queries.map((query, index) => ({\n      media: query,\n      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n    }));\n  });\n\n  useEffect(() => {\n    setValue(\n      queries.map((query) => ({\n        media: query,\n        matches: document.defaultView?.matchMedia(query).matches,\n      })),\n    );\n\n    const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n    const handler = (evt: MediaQueryListEvent) => {\n      setValue((prev) => {\n        return prev.slice().map((item) => {\n          if (item.media === evt.media) {\n            return { ...item, matches: evt.matches };\n          }\n          return item;\n        });\n      });\n    };\n\n    mql.forEach((mql) => {\n      if (typeof mql?.addListener === 'function') {\n        mql?.addListener(handler);\n      } else {\n        mql?.addEventListener('change', handler);\n      }\n    });\n\n    return () => {\n      mql.forEach((mql) => {\n        if (typeof mql?.removeListener === 'function') {\n          mql?.removeListener(handler);\n        } else {\n          mql?.removeEventListener('change', handler);\n        }\n      });\n    };\n  }, [document.defaultView]);\n\n  return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n  // Memoize defaultValue with an empty dependency array.\n  // This ensures that the defaultValue instance remains stable across all re-renders,\n  // regardless of whether the defaultValue changes.\n  const stableDefaultValue = useMemo(() => defaultValue, []);\n  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n  return value;\n};\n"],
-  "mappings": "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",
-  "names": ["useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect"]
+  "sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n  // Memoize defaultValue with an empty dependency array.\n  // This ensures that the defaultValue instance remains stable across all re-renders,\n  // regardless of whether the defaultValue changes.\n  const stableDefaultValue = useMemo(() => defaultValue, []);\n  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n  return value;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n *   download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n  return useMemo(\n    () => (data: Blob | string, filename: string) => {\n      const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n      const element = document.createElement('a');\n      element.setAttribute('href', url);\n      element.setAttribute('download', filename);\n      element.setAttribute('target', 'download');\n      element.click();\n    },\n    [],\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n  const innerRef = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref) {\n      return;\n    }\n    if (typeof ref === 'function') {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n  new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n  prng()\n    .toString(16)\n    .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n  useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n  const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n  isFocusedRef.current = isFocused;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    const onFocus = () => setIsFocused(true);\n    const onBlur = () => setIsFocused(false);\n    input.addEventListener('focus', onFocus);\n    input.addEventListener('blur', onBlur);\n\n    if (isFocusedRef.current === undefined) {\n      setIsFocused(document.activeElement === input);\n    }\n\n    return () => {\n      input.removeEventListener('focus', onFocus);\n      input.removeEventListener('blur', onBlur);\n    };\n  }, [inputRef, setIsFocused]);\n\n  return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n  fallback?: boolean | boolean[];\n  ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n  sm: '(min-width: 640px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 1024px)',\n  xl: '(min-width: 1280px)',\n  '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n  const { ssr = true, fallback } = options;\n\n  const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n    query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n  );\n\n  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n  const [value, setValue] = useState(() => {\n    return queries.map((query, index) => ({\n      media: query,\n      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n    }));\n  });\n\n  useEffect(() => {\n    setValue(\n      queries.map((query) => ({\n        media: query,\n        matches: document.defaultView?.matchMedia(query).matches,\n      })),\n    );\n\n    const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n    const handler = (evt: MediaQueryListEvent) => {\n      setValue((prev) => {\n        return prev.slice().map((item) => {\n          if (item.media === evt.media) {\n            return { ...item, matches: evt.matches };\n          }\n          return item;\n        });\n      });\n    };\n\n    mql.forEach((mql) => {\n      if (typeof mql?.addListener === 'function') {\n        mql?.addListener(handler);\n      } else {\n        mql?.addEventListener('change', handler);\n      }\n    });\n\n    return () => {\n      mql.forEach((mql) => {\n        if (typeof mql?.removeListener === 'function') {\n          mql?.removeListener(handler);\n        } else {\n          mql?.removeEventListener('change', handler);\n        }\n      });\n    };\n  }, [document.defaultView]);\n\n  return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n  return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: T | ((value: T) => boolean),\n) => {\n  const [hasTransitioned, setHasTransitioned] = useState(false);\n  const previousValue = useRef<T>(currentValue);\n\n  useEffect(() => {\n    const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n\n    const fromValueValid = isFunction<T>(fromValue)\n      ? fromValue(previousValue.current)\n      : fromValue === previousValue.current;\n\n    const transitioned = fromValueValid && toValueValid;\n\n    if (transitioned) {\n      setHasTransitioned(true);\n    } else {\n      setHasTransitioned(false);\n    }\n\n    previousValue.current = currentValue;\n  }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\n\n  return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: ((value: T) => boolean) | T,\n  callback: () => void,\n) => {\n  const dirty = useRef(false);\n  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n  useEffect(() => {\n    dirty.current = false;\n  }, [currentValue, dirty]);\n\n  useEffect(() => {\n    if (hasTransitioned && !dirty.current) {\n      callback();\n      dirty.current = true;\n    }\n  }, [hasTransitioned, dirty, callback]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n  const [value, setValue] = useState<T | null>(null);\n  return { refCallback: (value: T) => setValue(value), value };\n};\n"],
+  "mappings": "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",
+  "names": ["useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "transitioned", "useOnTransition", "callback", "dirty", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":993,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11749},"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":403},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":316},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":819},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":424}},"bytes":4745}}}
+{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1831,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1201,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16409},"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition","useRefCallback"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1384},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197}},"bytes":6505}}}

package/dist/lib/node/index.cjs

@@ -30,22 +30,36 @@ var node_exports = {};
 __export(node_exports, {
   randomString: () => randomString,
   useDefaultValue: () => useDefaultValue,
+  useDidTransition: () => useDidTransition,
   useFileDownload: () => useFileDownload,
   useForwardedRef: () => useForwardedRef,
   useId: () => useId,
   useIsFocused: () => useIsFocused,
-  useMediaQuery: () => useMediaQuery
+  useMediaQuery: () => useMediaQuery,
+  useOnTransition: () => useOnTransition,
+  useRefCallback: () => useRefCallback
 });
 module.exports = __toCommonJS(node_exports);
 var import_react = require("react");
 var import_react2 = require("react");
-var import_alea = __toESM(require("alea"));
 var import_react3 = require("react");
+var import_alea = __toESM(require("alea"));
 var import_react4 = require("react");
 var import_react5 = require("react");
 var import_react6 = require("react");
+var import_react7 = require("react");
+var import_react8 = require("react");
+var useDefaultValue = (reactiveValue, defaultValue) => {
+  const stableDefaultValue = (0, import_react.useMemo)(() => defaultValue, []);
+  const [value, setValue] = (0, import_react.useState)(reactiveValue ?? stableDefaultValue);
+  (0, import_react.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
+    reactiveValue,
+    stableDefaultValue
+  ]);
+  return value;
+};
 var useFileDownload = () => {
-  return (0, import_react.useMemo)(() => (data, filename) => {
+  return (0, import_react2.useMemo)(() => (data, filename) => {
     const url = typeof data === "string" ? data : URL.createObjectURL(data);
     const element = document.createElement("a");
     element.setAttribute("href", url);
@@ -55,8 +69,8 @@ var useFileDownload = () => {
   }, []);
 };
 var useForwardedRef = (ref) => {
-  const innerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     if (!ref) {
       return;
     }
@@ -71,14 +85,14 @@ var useForwardedRef = (ref) => {
 var Alea = import_alea.default;
 var prng = new Alea("@dxos/react-hooks");
 var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
-var useId = (namespace, propsId, opts) => (0, import_react3.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
+var useId = (namespace, propsId, opts) => (0, import_react4.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
   propsId
 ]);
 var useIsFocused = (inputRef) => {
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(void 0);
-  const isFocusedRef = (0, import_react4.useRef)(isFocused);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(void 0);
+  const isFocusedRef = (0, import_react5.useRef)(isFocused);
   isFocusedRef.current = isFocused;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const input = inputRef.current;
     if (!input) {
       return;
@@ -116,13 +130,13 @@ var useMediaQuery = (query, options = {}) => {
     fallback
   ];
   fallbackValues = fallbackValues.filter((v) => v != null);
-  const [value, setValue] = (0, import_react5.useState)(() => {
+  const [value, setValue] = (0, import_react6.useState)(() => {
     return queries.map((query2, index) => ({
       media: query2,
       matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
     }));
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setValue(queries.map((query2) => ({
       media: query2,
       matches: document.defaultView?.matchMedia(query2).matches
@@ -162,23 +176,69 @@ var useMediaQuery = (query, options = {}) => {
   ]);
   return value.map((item) => !!item.matches);
 };
-var useDefaultValue = (reactiveValue, defaultValue) => {
-  const stableDefaultValue = (0, import_react6.useMemo)(() => defaultValue, []);
-  const [value, setValue] = (0, import_react6.useState)(reactiveValue ?? stableDefaultValue);
-  (0, import_react6.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
-    reactiveValue,
-    stableDefaultValue
+var isFunction = (functionToCheck) => {
+  return functionToCheck instanceof Function;
+};
+var useDidTransition = (currentValue, fromValue, toValue) => {
+  const [hasTransitioned, setHasTransitioned] = (0, import_react7.useState)(false);
+  const previousValue = (0, import_react7.useRef)(currentValue);
+  (0, import_react7.useEffect)(() => {
+    const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
+    const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
+    const transitioned = fromValueValid && toValueValid;
+    if (transitioned) {
+      setHasTransitioned(true);
+    } else {
+      setHasTransitioned(false);
+    }
+    previousValue.current = currentValue;
+  }, [
+    currentValue,
+    fromValue,
+    toValue,
+    setHasTransitioned,
+    previousValue
   ]);
-  return value;
+  return hasTransitioned;
+};
+var useOnTransition = (currentValue, fromValue, toValue, callback) => {
+  const dirty = (0, import_react7.useRef)(false);
+  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
+  (0, import_react7.useEffect)(() => {
+    dirty.current = false;
+  }, [
+    currentValue,
+    dirty
+  ]);
+  (0, import_react7.useEffect)(() => {
+    if (hasTransitioned && !dirty.current) {
+      callback();
+      dirty.current = true;
+    }
+  }, [
+    hasTransitioned,
+    dirty,
+    callback
+  ]);
+};
+var useRefCallback = () => {
+  const [value, setValue] = (0, import_react8.useState)(null);
+  return {
+    refCallback: (value2) => setValue(value2),
+    value
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   randomString,
   useDefaultValue,
+  useDidTransition,
   useFileDownload,
   useForwardedRef,
   useId,
   useIsFocused,
-  useMediaQuery
+  useMediaQuery,
+  useOnTransition,
+  useRefCallback
 });
 //# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useDefaultValue.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n *   download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n  return useMemo(\n    () => (data: Blob | string, filename: string) => {\n      const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n      const element = document.createElement('a');\n      element.setAttribute('href', url);\n      element.setAttribute('download', filename);\n      element.setAttribute('target', 'download');\n      element.click();\n    },\n    [],\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n  const innerRef = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref) {\n      return;\n    }\n    if (typeof ref === 'function') {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n  new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n  prng()\n    .toString(16)\n    .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n  useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n  const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n  isFocusedRef.current = isFocused;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    const onFocus = () => setIsFocused(true);\n    const onBlur = () => setIsFocused(false);\n    input.addEventListener('focus', onFocus);\n    input.addEventListener('blur', onBlur);\n\n    if (isFocusedRef.current === undefined) {\n      setIsFocused(document.activeElement === input);\n    }\n\n    return () => {\n      input.removeEventListener('focus', onFocus);\n      input.removeEventListener('blur', onBlur);\n    };\n  }, [inputRef, setIsFocused]);\n\n  return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n  fallback?: boolean | boolean[];\n  ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n  sm: '(min-width: 640px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 1024px)',\n  xl: '(min-width: 1280px)',\n  '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n  const { ssr = true, fallback } = options;\n\n  const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n    query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n  );\n\n  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n  const [value, setValue] = useState(() => {\n    return queries.map((query, index) => ({\n      media: query,\n      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n    }));\n  });\n\n  useEffect(() => {\n    setValue(\n      queries.map((query) => ({\n        media: query,\n        matches: document.defaultView?.matchMedia(query).matches,\n      })),\n    );\n\n    const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n    const handler = (evt: MediaQueryListEvent) => {\n      setValue((prev) => {\n        return prev.slice().map((item) => {\n          if (item.media === evt.media) {\n            return { ...item, matches: evt.matches };\n          }\n          return item;\n        });\n      });\n    };\n\n    mql.forEach((mql) => {\n      if (typeof mql?.addListener === 'function') {\n        mql?.addListener(handler);\n      } else {\n        mql?.addEventListener('change', handler);\n      }\n    });\n\n    return () => {\n      mql.forEach((mql) => {\n        if (typeof mql?.removeListener === 'function') {\n          mql?.removeListener(handler);\n        } else {\n          mql?.removeEventListener('change', handler);\n        }\n      });\n    };\n  }, [document.defaultView]);\n\n  return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n  // Memoize defaultValue with an empty dependency array.\n  // This ensures that the defaultValue instance remains stable across all re-renders,\n  // regardless of whether the defaultValue changes.\n  const stableDefaultValue = useMemo(() => defaultValue, []);\n  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n  return value;\n};\n"],
-  "mappings": "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",
-  "names": ["import_react", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "input", "onFocus", "onBlur", "addEventListener", "activeElement", "removeEventListener", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "index", "media", "matches", "defaultView", "matchMedia", "mql", "handler", "evt", "prev", "item", "forEach", "addListener", "removeListener", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue"]
+  "sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n  // Memoize defaultValue with an empty dependency array.\n  // This ensures that the defaultValue instance remains stable across all re-renders,\n  // regardless of whether the defaultValue changes.\n  const stableDefaultValue = useMemo(() => defaultValue, []);\n  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n  return value;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n *   download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n  return useMemo(\n    () => (data: Blob | string, filename: string) => {\n      const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n      const element = document.createElement('a');\n      element.setAttribute('href', url);\n      element.setAttribute('download', filename);\n      element.setAttribute('target', 'download');\n      element.click();\n    },\n    [],\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n  const innerRef = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref) {\n      return;\n    }\n    if (typeof ref === 'function') {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n  new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n  prng()\n    .toString(16)\n    .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n  useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n  const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n  isFocusedRef.current = isFocused;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    const onFocus = () => setIsFocused(true);\n    const onBlur = () => setIsFocused(false);\n    input.addEventListener('focus', onFocus);\n    input.addEventListener('blur', onBlur);\n\n    if (isFocusedRef.current === undefined) {\n      setIsFocused(document.activeElement === input);\n    }\n\n    return () => {\n      input.removeEventListener('focus', onFocus);\n      input.removeEventListener('blur', onBlur);\n    };\n  }, [inputRef, setIsFocused]);\n\n  return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n  fallback?: boolean | boolean[];\n  ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n  sm: '(min-width: 640px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 1024px)',\n  xl: '(min-width: 1280px)',\n  '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n  const { ssr = true, fallback } = options;\n\n  const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n    query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n  );\n\n  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n  const [value, setValue] = useState(() => {\n    return queries.map((query, index) => ({\n      media: query,\n      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n    }));\n  });\n\n  useEffect(() => {\n    setValue(\n      queries.map((query) => ({\n        media: query,\n        matches: document.defaultView?.matchMedia(query).matches,\n      })),\n    );\n\n    const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n    const handler = (evt: MediaQueryListEvent) => {\n      setValue((prev) => {\n        return prev.slice().map((item) => {\n          if (item.media === evt.media) {\n            return { ...item, matches: evt.matches };\n          }\n          return item;\n        });\n      });\n    };\n\n    mql.forEach((mql) => {\n      if (typeof mql?.addListener === 'function') {\n        mql?.addListener(handler);\n      } else {\n        mql?.addEventListener('change', handler);\n      }\n    });\n\n    return () => {\n      mql.forEach((mql) => {\n        if (typeof mql?.removeListener === 'function') {\n          mql?.removeListener(handler);\n        } else {\n          mql?.removeEventListener('change', handler);\n        }\n      });\n    };\n  }, [document.defaultView]);\n\n  return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n  return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: T | ((value: T) => boolean),\n) => {\n  const [hasTransitioned, setHasTransitioned] = useState(false);\n  const previousValue = useRef<T>(currentValue);\n\n  useEffect(() => {\n    const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n\n    const fromValueValid = isFunction<T>(fromValue)\n      ? fromValue(previousValue.current)\n      : fromValue === previousValue.current;\n\n    const transitioned = fromValueValid && toValueValid;\n\n    if (transitioned) {\n      setHasTransitioned(true);\n    } else {\n      setHasTransitioned(false);\n    }\n\n    previousValue.current = currentValue;\n  }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\n\n  return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: ((value: T) => boolean) | T,\n  callback: () => void,\n) => {\n  const dirty = useRef(false);\n  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n  useEffect(() => {\n    dirty.current = false;\n  }, [currentValue, dirty]);\n\n  useEffect(() => {\n    if (hasTransitioned && !dirty.current) {\n      callback();\n      dirty.current = true;\n    }\n  }, [hasTransitioned, dirty, callback]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n  const [value, setValue] = useState<T | null>(null);\n  return { refCallback: (value: T) => setValue(value), value };\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAA6C;ACA7C,IAAAA,gBAAwB;ACAxB,IAAAA,gBAAkC;ACAlC,kBAAiB;AACjB,IAAAA,gBAAwB;ACExB,IAAAA,gBAA4D;ACD5D,IAAAA,gBAAoC;ACFpC,IAAAA,gBAA4C;ACA5C,IAAAA,gBAA2C;APapC,IAAMC,kBAAkB,CAAIC,eAAqCC,iBAAAA;AAItE,QAAMC,yBAAqBC,sBAAQ,MAAMF,cAAc,CAAA,CAAE;AACzD,QAAM,CAACG,OAAOC,QAAAA,QAAYC,uBAASN,iBAAiBE,kBAAAA;AAEpDK,8BAAU,MAAMF,SAASL,iBAAiBE,kBAAAA,GAAqB;IAACF;IAAeE;GAAmB;AAElG,SAAOE;AACT;ACXO,IAAMI,kBAAkB,MAAA;AAC7B,aAAOL,cAAAA,SACL,MAAM,CAACM,MAAqBC,aAAAA;AAC1B,UAAMC,MAAM,OAAOF,SAAS,WAAWA,OAAOG,IAAIC,gBAAgBJ,IAAAA;AAClE,UAAMK,UAAUC,SAASC,cAAc,GAAA;AACvCF,YAAQG,aAAa,QAAQN,GAAAA;AAC7BG,YAAQG,aAAa,YAAYP,QAAAA;AACjCI,YAAQG,aAAa,UAAU,UAAA;AAC/BH,YAAQI,MAAK;EACf,GACA,CAAA,CAAE;AAEN;ACtBO,IAAMC,kBAAkB,CAAIC,QAAAA;AACjC,QAAMC,eAAWC,sBAAU,IAAA;AAE3Bf,oBAAAA,WAAU,MAAA;AACR,QAAI,CAACa,KAAK;AACR;IACF;AACA,QAAI,OAAOA,QAAQ,YAAY;AAC7BA,UAAIC,SAASE,OAAO;IACtB,OAAO;AACLH,UAAIG,UAAUF,SAASE;IACzB;EACF,CAAA;AAEA,SAAOF;AACT;ACVA,IAAMG,OAAoBC,YAAAA;AAE1B,IAAMC,OAAO,IAAIF,KAAK,mBAAA;AAGf,IAAMG,eAAe,CAACC,IAAI,MAC/BF,KAAAA,EACGG,SAAS,EAAA,EACTC,MAAM,GAAGF,IAAI,CAAA;AAEX,IAAMG,QAAQ,CAACC,WAAmBC,SAAkBC,aACzD/B,cAAAA,SAAQ,MAAM8B,WAAW,GAAGD,SAAAA,IAAaL,aAAaO,MAAMN,KAAK,CAAA,CAAA,IAAM;EAACK;CAAQ;ACb3E,IAAME,eAAe,CAACC,aAAAA;AAC3B,QAAM,CAACC,WAAWC,YAAAA,QAAgBhC,cAAAA,UAA8BiC,MAAAA;AAChE,QAAMC,mBAAelB,cAAAA,QAA4Be,SAAAA;AAEjDG,eAAajB,UAAUc;AAEvB9B,oBAAAA,WAAU,MAAA;AACR,UAAMkC,QAAQL,SAASb;AACvB,QAAI,CAACkB,OAAO;AACV;IACF;AAEA,UAAMC,UAAU,MAAMJ,aAAa,IAAA;AACnC,UAAMK,SAAS,MAAML,aAAa,KAAA;AAClCG,UAAMG,iBAAiB,SAASF,OAAAA;AAChCD,UAAMG,iBAAiB,QAAQD,MAAAA;AAE/B,QAAIH,aAAajB,YAAYgB,QAAW;AACtCD,mBAAavB,SAAS8B,kBAAkBJ,KAAAA;IAC1C;AAEA,WAAO,MAAA;AACLA,YAAMK,oBAAoB,SAASJ,OAAAA;AACnCD,YAAMK,oBAAoB,QAAQH,MAAAA;IACpC;EACF,GAAG;IAACP;IAAUE;GAAa;AAE3B,SAAOD;AACT;ACvBA,IAAMU,yBAAiD;EACrDC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJ,OAAO;AACT;AAUO,IAAMC,gBAAgB,CAACC,OAA0BC,UAAgC,CAAC,MAAC;AACxF,QAAM,EAAEC,MAAM,MAAMC,SAAQ,IAAKF;AAEjC,QAAMG,WAAWC,MAAMC,QAAQN,KAAAA,IAASA,QAAQ;IAACA;KAAQO,IAAI,CAACP,WAC5DA,UAASN,yBAAyBA,uBAAuBM,MAAAA,IAASA,MAAAA;AAGpE,MAAIQ,iBAAiBH,MAAMC,QAAQH,QAAAA,IAAYA,WAAW;IAACA;;AAC3DK,mBAAiBA,eAAeC,OAAO,CAACC,MAAMA,KAAK,IAAA;AAEnD,QAAM,CAAC3D,OAAOC,QAAAA,QAAYC,cAAAA,UAAS,MAAA;AACjC,WAAOmD,QAAQG,IAAI,CAACP,QAAOW,WAAW;MACpCC,OAAOZ;MACPa,SAASX,MAAM,CAAC,CAACM,eAAeG,KAAAA,IAASjD,SAASoD,aAAaC,WAAWf,MAAAA,EAAOa;IACnF,EAAA;EACF,CAAA;AAEA3D,oBAAAA,WAAU,MAAA;AACRF,aACEoD,QAAQG,IAAI,CAACP,YAAW;MACtBY,OAAOZ;MACPa,SAASnD,SAASoD,aAAaC,WAAWf,MAAAA,EAAOa;IACnD,EAAA,CAAA;AAGF,UAAMG,MAAMZ,QAAQG,IAAI,CAACP,WAAUtC,SAASoD,aAAaC,WAAWf,MAAAA,CAAAA;AAEpE,UAAMiB,UAAU,CAACC,QAAAA;AACflE,eAAS,CAACmE,SAAAA;AACR,eAAOA,KAAK1C,MAAK,EAAG8B,IAAI,CAACa,SAAAA;AACvB,cAAIA,KAAKR,UAAUM,IAAIN,OAAO;AAC5B,mBAAO;cAAE,GAAGQ;cAAMP,SAASK,IAAIL;YAAQ;UACzC;AACA,iBAAOO;QACT,CAAA;MACF,CAAA;IACF;AAEAJ,QAAIK,QAAQ,CAACL,SAAAA;AACX,UAAI,OAAOA,MAAKM,gBAAgB,YAAY;AAC1CN,cAAKM,YAAYL,OAAAA;MACnB,OAAO;AACLD,cAAKzB,iBAAiB,UAAU0B,OAAAA;MAClC;IACF,CAAA;AAEA,WAAO,MAAA;AACLD,UAAIK,QAAQ,CAACL,SAAAA;AACX,YAAI,OAAOA,MAAKO,mBAAmB,YAAY;AAC7CP,gBAAKO,eAAeN,OAAAA;QACtB,OAAO;AACLD,gBAAKvB,oBAAoB,UAAUwB,OAAAA;QACrC;MACF,CAAA;IACF;EACF,GAAG;IAACvD,SAASoD;GAAY;AAEzB,SAAO/D,MAAMwD,IAAI,CAACa,SAAS,CAAC,CAACA,KAAKP,OAAO;AAC3C;AClFA,IAAMW,aAAa,CAAIC,oBAAAA;AACrB,SAAOA,2BAA2BC;AACpC;AAYO,IAAMC,mBAAmB,CAC9BC,cACAC,WACAC,YAAAA;AAEA,QAAM,CAACC,iBAAiBC,kBAAAA,QAAsB/E,cAAAA,UAAS,KAAA;AACvD,QAAMgF,oBAAgBhE,cAAAA,QAAU2D,YAAAA;AAEhC1E,oBAAAA,WAAU,MAAA;AACR,UAAMgF,eAAeV,WAAcM,OAAAA,IAAWA,QAAQF,YAAAA,IAAgBE,YAAYF;AAElF,UAAMO,iBAAiBX,WAAcK,SAAAA,IACjCA,UAAUI,cAAc/D,OAAO,IAC/B2D,cAAcI,cAAc/D;AAEhC,UAAMkE,eAAeD,kBAAkBD;AAEvC,QAAIE,cAAc;AAChBJ,yBAAmB,IAAA;IACrB,OAAO;AACLA,yBAAmB,KAAA;IACrB;AAEAC,kBAAc/D,UAAU0D;EAC1B,GAAG;IAACA;IAAcC;IAAWC;IAASE;IAAoBC;GAAc;AAExE,SAAOF;AACT;AAOO,IAAMM,kBAAkB,CAC7BT,cACAC,WACAC,SACAQ,aAAAA;AAEA,QAAMC,YAAQtE,cAAAA,QAAO,KAAA;AACrB,QAAM8D,kBAAkBJ,iBAAiBC,cAAcC,WAAWC,OAAAA;AAElE5E,oBAAAA,WAAU,MAAA;AACRqF,UAAMrE,UAAU;EAClB,GAAG;IAAC0D;IAAcW;GAAM;AAExBrF,oBAAAA,WAAU,MAAA;AACR,QAAI6E,mBAAmB,CAACQ,MAAMrE,SAAS;AACrCoE,eAAAA;AACAC,YAAMrE,UAAU;IAClB;EACF,GAAG;IAAC6D;IAAiBQ;IAAOD;GAAS;AACvC;AC7DO,IAAME,iBAAiB,MAAA;AAC5B,QAAM,CAACzF,OAAOC,QAAAA,QAAYC,cAAAA,UAAmB,IAAA;AAC7C,SAAO;IAAEwF,aAAa,CAAC1F,WAAaC,SAASD,MAAAA;IAAQA;EAAM;AAC7D;",
+  "names": ["import_react", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useFileDownload", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "ref", "innerRef", "useRef", "current", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "undefined", "isFocusedRef", "input", "onFocus", "onBlur", "addEventListener", "activeElement", "removeEventListener", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "index", "media", "matches", "defaultView", "matchMedia", "mql", "handler", "evt", "prev", "item", "forEach", "addListener", "removeListener", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "previousValue", "toValueValid", "fromValueValid", "transitioned", "useOnTransition", "callback", "dirty", "useRefCallback", "refCallback"]
 }

package/dist/lib/node/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":993,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11749},"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":403},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":316},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":819},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":424}},"bytes":4745}}}
+{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1831,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1201,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16409},"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition","useRefCallback"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1384},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197}},"bytes":6505}}}

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

@@ -1,7 +1,9 @@
+export * from './useDefaultValue';
 export * from './useFileDownload';
 export * from './useForwardedRef';
 export * from './useId';
 export * from './useIsFocused';
 export * from './useMediaQuery';
-export * from './useDefaultValue';
+export * from './useTransitions';
+export * from './useRefCallback';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/types/src/useRefCallback.d.ts

@@ -0,0 +1,12 @@
+import { type RefCallback } from 'react';
+/**
+ * Custom React Hook that creates a ref callback and a state variable.
+ * The ref callback sets the state variable when the ref changes.
+ *
+ * @returns An object containing the ref callback and the current value of the ref.
+ */
+export declare const useRefCallback: <T = any>() => {
+    refCallback: RefCallback<T>;
+    value: T | null;
+};
+//# sourceMappingURL=useRefCallback.d.ts.map

package/dist/types/src/useRefCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefCallback.d.ts","sourceRoot":"","sources":["../../../src/useRefCallback.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}

package/dist/types/src/useTransitions.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Executes a callback function when a specified transition occurs in a value.
+ *
+ * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
+ * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
+export declare const useOnTransition: <T>(currentValue: T, fromValue: T | ((value: T) => boolean), toValue: T | ((value: T) => boolean), callback: () => void) => void;
+//# sourceMappingURL=useTransitions.d.ts.map

package/dist/types/src/useTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitions.d.ts","sourceRoot":"","sources":["../../../src/useTransitions.ts"],"names":[],"mappings":"AAiDA;;;;kHAIkH;AAClH,eAAO,MAAM,eAAe,qDAEI,OAAO,+BACb,OAAO,aACrB,MAAM,IAAI,SAerB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.4.8-main.fff1521",
+  "version": "0.4.8-next.2e7285f",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",

package/src/index.ts

@@ -2,9 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './useDefaultValue';
 export * from './useFileDownload';
 export * from './useForwardedRef';
 export * from './useId';
 export * from './useIsFocused';
 export * from './useMediaQuery';
-export * from './useDefaultValue';
+export * from './useTransitions';
+export * from './useRefCallback';

package/src/useRefCallback.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type RefCallback, useState } from 'react';
+
+/**
+ * Custom React Hook that creates a ref callback and a state variable.
+ * The ref callback sets the state variable when the ref changes.
+ *
+ * @returns An object containing the ref callback and the current value of the ref.
+ */
+export const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {
+  const [value, setValue] = useState<T | null>(null);
+  return { refCallback: (value: T) => setValue(value), value };
+};

package/src/useTransitions.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useRef, useEffect, useState } from 'react';
+
+const isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {
+  return functionToCheck instanceof Function;
+};
+
+/**
+ * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.
+ *
+ * @param currentValue - The value that is being monitored for transitions.
+ * @param fromValue - The *from* value or a predicate function that determines the start of the transition.
+ * @param toValue - The *to* value or a predicate function that determines the end of the transition.
+ * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.
+ *
+ * @internal Consider using `useOnTransition` for handling transitions instead of this hook.
+ */
+export const useDidTransition = <T>(
+  currentValue: T,
+  fromValue: T | ((value: T) => boolean),
+  toValue: T | ((value: T) => boolean),
+) => {
+  const [hasTransitioned, setHasTransitioned] = useState(false);
+  const previousValue = useRef<T>(currentValue);
+
+  useEffect(() => {
+    const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;
+
+    const fromValueValid = isFunction<T>(fromValue)
+      ? fromValue(previousValue.current)
+      : fromValue === previousValue.current;
+
+    const transitioned = fromValueValid && toValueValid;
+
+    if (transitioned) {
+      setHasTransitioned(true);
+    } else {
+      setHasTransitioned(false);
+    }
+
+    previousValue.current = currentValue;
+  }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);
+
+  return hasTransitioned;
+};
+
+/**
+ * Executes a callback function when a specified transition occurs in a value.
+ *
+ * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
+ * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
+export const useOnTransition = <T>(
+  currentValue: T,
+  fromValue: T | ((value: T) => boolean),
+  toValue: ((value: T) => boolean) | T,
+  callback: () => void,
+) => {
+  const dirty = useRef(false);
+  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
+
+  useEffect(() => {
+    dirty.current = false;
+  }, [currentValue, dirty]);
+
+  useEffect(() => {
+    if (hasTransitioned && !dirty.current) {
+      callback();
+      dirty.current = true;
+    }
+  }, [hasTransitioned, dirty, callback]);
+};