@dxos/react-hooks 0.6.9 → 0.6.10-main.e92b5eb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,24 @@
1
+ // packages/ui/primitives/react-hooks/src/useControlledValue.ts
2
+ import { useEffect, useState } from "react";
3
+ var useControlledValue = (controlledValue) => {
4
+ const [value, setValue] = useState(controlledValue);
5
+ useEffect(() => {
6
+ setValue(controlledValue);
7
+ }, [
8
+ controlledValue
9
+ ]);
10
+ return [
11
+ value,
12
+ setValue
13
+ ];
14
+ };
15
+
1
16
  // packages/ui/primitives/react-hooks/src/useDefaultValue.ts
2
- import { useEffect, useState, useMemo } from "react";
17
+ import { useEffect as useEffect2, useState as useState2, useMemo } from "react";
3
18
  var useDefaultValue = (reactiveValue, defaultValue) => {
4
19
  const stableDefaultValue = useMemo(() => defaultValue, []);
5
- const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
6
- useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [
20
+ const [value, setValue] = useState2(reactiveValue ?? stableDefaultValue);
21
+ useEffect2(() => setValue(reactiveValue ?? stableDefaultValue), [
7
22
  reactiveValue,
8
23
  stableDefaultValue
9
24
  ]);
@@ -24,10 +39,10 @@ var useFileDownload = () => {
24
39
  };
25
40
 
26
41
  // packages/ui/primitives/react-hooks/src/useForwardedRef.ts
27
- import { useRef, useEffect as useEffect2 } from "react";
42
+ import { useRef, useEffect as useEffect3 } from "react";
28
43
  var useForwardedRef = (ref) => {
29
44
  const innerRef = useRef(null);
30
- useEffect2(() => {
45
+ useEffect3(() => {
31
46
  if (!ref) {
32
47
  return;
33
48
  }
@@ -51,12 +66,12 @@ var useId = (namespace, propsId, opts) => useMemo3(() => propsId ?? `${namespace
51
66
  ]);
52
67
 
53
68
  // packages/ui/primitives/react-hooks/src/useIsFocused.ts
54
- import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
69
+ import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
55
70
  var useIsFocused = (inputRef) => {
56
- const [isFocused, setIsFocused] = useState2(void 0);
71
+ const [isFocused, setIsFocused] = useState3(void 0);
57
72
  const isFocusedRef = useRef2(isFocused);
58
73
  isFocusedRef.current = isFocused;
59
- useEffect3(() => {
74
+ useEffect4(() => {
60
75
  const input = inputRef.current;
61
76
  if (!input) {
62
77
  return;
@@ -80,7 +95,7 @@ var useIsFocused = (inputRef) => {
80
95
  };
81
96
 
82
97
  // packages/ui/primitives/react-hooks/src/useMediaQuery.ts
83
- import { useEffect as useEffect4, useState as useState3 } from "react";
98
+ import { useEffect as useEffect5, useState as useState4 } from "react";
84
99
  var breakpointMediaQueries = {
85
100
  sm: "(min-width: 640px)",
86
101
  md: "(min-width: 768px)",
@@ -97,13 +112,13 @@ var useMediaQuery = (query, options = {}) => {
97
112
  fallback
98
113
  ];
99
114
  fallbackValues = fallbackValues.filter((v) => v != null);
100
- const [value, setValue] = useState3(() => {
115
+ const [value, setValue] = useState4(() => {
101
116
  return queries.map((query2, index) => ({
102
117
  media: query2,
103
118
  matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
104
119
  }));
105
120
  });
106
- useEffect4(() => {
121
+ useEffect5(() => {
107
122
  setValue(queries.map((query2) => ({
108
123
  media: query2,
109
124
  matches: document.defaultView?.matchMedia(query2).matches
@@ -145,14 +160,14 @@ var useMediaQuery = (query, options = {}) => {
145
160
  };
146
161
 
147
162
  // packages/ui/primitives/react-hooks/src/useTransitions.ts
148
- import { useRef as useRef3, useEffect as useEffect5, useState as useState4 } from "react";
163
+ import { useRef as useRef3, useEffect as useEffect6, useState as useState5 } from "react";
149
164
  var isFunction = (functionToCheck) => {
150
165
  return functionToCheck instanceof Function;
151
166
  };
152
167
  var useDidTransition = (currentValue, fromValue, toValue) => {
153
- const [hasTransitioned, setHasTransitioned] = useState4(false);
168
+ const [hasTransitioned, setHasTransitioned] = useState5(false);
154
169
  const previousValue = useRef3(currentValue);
155
- useEffect5(() => {
170
+ useEffect6(() => {
156
171
  const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
157
172
  const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
158
173
  const transitioned = fromValueValid && toValueValid;
@@ -174,13 +189,13 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
174
189
  var useOnTransition = (currentValue, fromValue, toValue, callback) => {
175
190
  const dirty = useRef3(false);
176
191
  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
177
- useEffect5(() => {
192
+ useEffect6(() => {
178
193
  dirty.current = false;
179
194
  }, [
180
195
  currentValue,
181
196
  dirty
182
197
  ]);
183
- useEffect5(() => {
198
+ useEffect6(() => {
184
199
  if (hasTransitioned && !dirty.current) {
185
200
  callback();
186
201
  dirty.current = true;
@@ -193,9 +208,9 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
193
208
  };
194
209
 
195
210
  // packages/ui/primitives/react-hooks/src/useRefCallback.ts
196
- import { useState as useState5 } from "react";
211
+ import { useState as useState6 } from "react";
197
212
  var useRefCallback = () => {
198
- const [value, setValue] = useState5(null);
213
+ const [value, setValue] = useState6(null);
199
214
  return {
200
215
  refCallback: (value2) => setValue(value2),
201
216
  value
@@ -203,6 +218,7 @@ var useRefCallback = () => {
203
218
  };
204
219
  export {
205
220
  randomString,
221
+ useControlledValue,
206
222
  useDefaultValue,
207
223
  useDidTransition,
208
224
  useFileDownload,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "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"],
4
- "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 { type ForwardedRef, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\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"],
5
- "mappings": "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",
6
- "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"]
3
+ "sources": ["../../../src/useControlledValue.ts", "../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n setValue(controlledValue);\n }, [controlledValue]);\n\n return [value, setValue];\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", "//\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 { type ForwardedRef, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\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"],
5
+ "mappings": "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",
6
+ "names": ["useEffect", "useState", "useControlledValue", "controlledValue", "value", "setValue", "useState", "useEffect", "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"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4059,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1783,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"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":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7797,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1241,"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":16425},"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}}}
1
+ {"inputs":{"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytes":1787,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4059,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1783,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"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":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7797,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1355,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useControlledValue.ts","kind":"import-statement","original":"./useControlledValue"},{"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":17264},"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":"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","useControlledValue","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/useControlledValue.ts":{"bytesInOutput":275},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":411},"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":6896}}}
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
29
29
  var node_exports = {};
30
30
  __export(node_exports, {
31
31
  randomString: () => randomString,
32
+ useControlledValue: () => useControlledValue,
32
33
  useDefaultValue: () => useDefaultValue,
33
34
  useDidTransition: () => useDidTransition,
34
35
  useFileDownload: () => useFileDownload,
@@ -43,23 +44,36 @@ module.exports = __toCommonJS(node_exports);
43
44
  var import_react = require("react");
44
45
  var import_react2 = require("react");
45
46
  var import_react3 = require("react");
46
- var import_alea = __toESM(require("alea"));
47
47
  var import_react4 = require("react");
48
+ var import_alea = __toESM(require("alea"));
48
49
  var import_react5 = require("react");
49
50
  var import_react6 = require("react");
50
51
  var import_react7 = require("react");
51
52
  var import_react8 = require("react");
53
+ var import_react9 = require("react");
54
+ var useControlledValue = (controlledValue) => {
55
+ const [value, setValue] = (0, import_react.useState)(controlledValue);
56
+ (0, import_react.useEffect)(() => {
57
+ setValue(controlledValue);
58
+ }, [
59
+ controlledValue
60
+ ]);
61
+ return [
62
+ value,
63
+ setValue
64
+ ];
65
+ };
52
66
  var useDefaultValue = (reactiveValue, defaultValue) => {
53
- const stableDefaultValue = (0, import_react.useMemo)(() => defaultValue, []);
54
- const [value, setValue] = (0, import_react.useState)(reactiveValue ?? stableDefaultValue);
55
- (0, import_react.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
67
+ const stableDefaultValue = (0, import_react2.useMemo)(() => defaultValue, []);
68
+ const [value, setValue] = (0, import_react2.useState)(reactiveValue ?? stableDefaultValue);
69
+ (0, import_react2.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
56
70
  reactiveValue,
57
71
  stableDefaultValue
58
72
  ]);
59
73
  return value;
60
74
  };
61
75
  var useFileDownload = () => {
62
- return (0, import_react2.useMemo)(() => (data, filename) => {
76
+ return (0, import_react3.useMemo)(() => (data, filename) => {
63
77
  const url = typeof data === "string" ? data : URL.createObjectURL(data);
64
78
  const element = document.createElement("a");
65
79
  element.setAttribute("href", url);
@@ -69,8 +83,8 @@ var useFileDownload = () => {
69
83
  }, []);
70
84
  };
71
85
  var useForwardedRef = (ref) => {
72
- const innerRef = (0, import_react3.useRef)(null);
73
- (0, import_react3.useEffect)(() => {
86
+ const innerRef = (0, import_react4.useRef)(null);
87
+ (0, import_react4.useEffect)(() => {
74
88
  if (!ref) {
75
89
  return;
76
90
  }
@@ -85,14 +99,14 @@ var useForwardedRef = (ref) => {
85
99
  var Alea = import_alea.default;
86
100
  var prng = new Alea("@dxos/react-hooks");
87
101
  var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
88
- var useId = (namespace, propsId, opts) => (0, import_react4.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
102
+ var useId = (namespace, propsId, opts) => (0, import_react5.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
89
103
  propsId
90
104
  ]);
91
105
  var useIsFocused = (inputRef) => {
92
- const [isFocused, setIsFocused] = (0, import_react5.useState)(void 0);
93
- const isFocusedRef = (0, import_react5.useRef)(isFocused);
106
+ const [isFocused, setIsFocused] = (0, import_react6.useState)(void 0);
107
+ const isFocusedRef = (0, import_react6.useRef)(isFocused);
94
108
  isFocusedRef.current = isFocused;
95
- (0, import_react5.useEffect)(() => {
109
+ (0, import_react6.useEffect)(() => {
96
110
  const input = inputRef.current;
97
111
  if (!input) {
98
112
  return;
@@ -130,13 +144,13 @@ var useMediaQuery = (query, options = {}) => {
130
144
  fallback
131
145
  ];
132
146
  fallbackValues = fallbackValues.filter((v) => v != null);
133
- const [value, setValue] = (0, import_react6.useState)(() => {
147
+ const [value, setValue] = (0, import_react7.useState)(() => {
134
148
  return queries.map((query2, index) => ({
135
149
  media: query2,
136
150
  matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
137
151
  }));
138
152
  });
139
- (0, import_react6.useEffect)(() => {
153
+ (0, import_react7.useEffect)(() => {
140
154
  setValue(queries.map((query2) => ({
141
155
  media: query2,
142
156
  matches: document.defaultView?.matchMedia(query2).matches
@@ -180,9 +194,9 @@ var isFunction = (functionToCheck) => {
180
194
  return functionToCheck instanceof Function;
181
195
  };
182
196
  var useDidTransition = (currentValue, fromValue, toValue) => {
183
- const [hasTransitioned, setHasTransitioned] = (0, import_react7.useState)(false);
184
- const previousValue = (0, import_react7.useRef)(currentValue);
185
- (0, import_react7.useEffect)(() => {
197
+ const [hasTransitioned, setHasTransitioned] = (0, import_react8.useState)(false);
198
+ const previousValue = (0, import_react8.useRef)(currentValue);
199
+ (0, import_react8.useEffect)(() => {
186
200
  const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
187
201
  const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
188
202
  const transitioned = fromValueValid && toValueValid;
@@ -202,15 +216,15 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
202
216
  return hasTransitioned;
203
217
  };
204
218
  var useOnTransition = (currentValue, fromValue, toValue, callback) => {
205
- const dirty = (0, import_react7.useRef)(false);
219
+ const dirty = (0, import_react8.useRef)(false);
206
220
  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
207
- (0, import_react7.useEffect)(() => {
221
+ (0, import_react8.useEffect)(() => {
208
222
  dirty.current = false;
209
223
  }, [
210
224
  currentValue,
211
225
  dirty
212
226
  ]);
213
- (0, import_react7.useEffect)(() => {
227
+ (0, import_react8.useEffect)(() => {
214
228
  if (hasTransitioned && !dirty.current) {
215
229
  callback();
216
230
  dirty.current = true;
@@ -222,7 +236,7 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
222
236
  ]);
223
237
  };
224
238
  var useRefCallback = () => {
225
- const [value, setValue] = (0, import_react8.useState)(null);
239
+ const [value, setValue] = (0, import_react9.useState)(null);
226
240
  return {
227
241
  refCallback: (value2) => setValue(value2),
228
242
  value
@@ -231,6 +245,7 @@ var useRefCallback = () => {
231
245
  // Annotate the CommonJS export names for ESM import in node:
232
246
  0 && (module.exports = {
233
247
  randomString,
248
+ useControlledValue,
234
249
  useDefaultValue,
235
250
  useDidTransition,
236
251
  useFileDownload,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "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"],
4
- "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 { type ForwardedRef, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\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"],
5
- "mappings": "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",
6
- "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"]
3
+ "sources": ["../../../src/useControlledValue.ts", "../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n setValue(controlledValue);\n }, [controlledValue]);\n\n return [value, setValue];\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", "//\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 { type ForwardedRef, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\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"],
5
+ "mappings": "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",
6
+ "names": ["import_react", "useControlledValue", "controlledValue", "value", "setValue", "useState", "useEffect", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "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"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4059,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1783,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"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":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7797,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1241,"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":16425},"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}}}
1
+ {"inputs":{"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytes":1787,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4059,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1783,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"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":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7797,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1355,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useControlledValue.ts","kind":"import-statement","original":"./useControlledValue"},{"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":17264},"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":"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","useControlledValue","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/useControlledValue.ts":{"bytesInOutput":275},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":411},"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":6896}}}
@@ -1,3 +1,4 @@
1
+ export * from './useControlledValue';
1
2
  export * from './useDefaultValue';
2
3
  export * from './useFileDownload';
3
4
  export * from './useForwardedRef';
@@ -1 +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,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,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"}
@@ -0,0 +1,6 @@
1
+ import { type Dispatch, type SetStateAction } from 'react';
2
+ /**
3
+ * A stateful hook with a controlled value.
4
+ */
5
+ export declare const useControlledValue: <TValue>(controlledValue: TValue) => [TValue, Dispatch<SetStateAction<TValue>>];
6
+ //# sourceMappingURL=useControlledValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useControlledValue.d.ts","sourceRoot":"","sources":["../../../src/useControlledValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,mBAAmB,MAAM,KAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAO7G,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-hooks",
3
- "version": "0.6.9",
3
+ "version": "0.6.10-main.e92b5eb",
4
4
  "description": "React hooks supporting DXOS React primitives.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
package/src/index.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  // Copyright 2022 DXOS.org
3
3
  //
4
4
 
5
+ export * from './useControlledValue';
5
6
  export * from './useDefaultValue';
6
7
  export * from './useFileDownload';
7
8
  export * from './useForwardedRef';
@@ -0,0 +1,17 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
6
+
7
+ /**
8
+ * A stateful hook with a controlled value.
9
+ */
10
+ export const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {
11
+ const [value, setValue] = useState<TValue>(controlledValue);
12
+ useEffect(() => {
13
+ setValue(controlledValue);
14
+ }, [controlledValue]);
15
+
16
+ return [value, setValue];
17
+ };