@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/useLocalStorage.d.ts

@@ -1,9 +1,9 @@
 import type { UseStateInitializer, UseStateSetter } from "./types.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type LocalStorageSerializer<T> = (value: T) => string;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type LocalStorageDeserializer<T> = (item: string) => T;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface LocalStorageHookOptions<T> {
     /**
      * The local storage key name to use.
@@ -54,10 +54,10 @@ export interface LocalStorageHookOptions<T> {
     deserializer?: LocalStorageDeserializer<T>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const defaultLocalStorageSerializer: <T>(value: T) => string;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface GetItemFromStorageOptions<T> {
     /**
      * The storage key to use
@@ -107,10 +107,10 @@ export interface GetItemFromStorageOptions<T> {
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const getItemFromStorage: <T>(options: GetItemFromStorageOptions<T>) => T;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SetItemInStorageOptions<T> {
     key: string;
     value: T;
@@ -148,11 +148,11 @@ export interface SetItemInStorageOptions<T> {
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const setItemInStorage: <T>(options: SetItemInStorageOptions<T>) => void;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 interface RemoveItemFromStorageOptions {
@@ -161,11 +161,11 @@ interface RemoveItemFromStorageOptions {
     storage?: Storage;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export declare const removeItemFromStorage: (options: RemoveItemFromStorageOptions) => void;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface LocalStorageHookReturnValue<T> {
     value: T;
     /**
@@ -182,8 +182,7 @@ export interface LocalStorageHookReturnValue<T> {
      * Manually persist the current {@link value} into local storage. This is only
      * useful if the {@link LocalStorageHookOptions.manual} option is `true`.
      *
-     * @example
-     * Manual Persisting
+     * @example Manual Persisting
      * ```tsx
      * import type { ReactElement } from "react";
      *
@@ -216,8 +215,7 @@ export interface LocalStorageHookReturnValue<T> {
     persist(): void;
 }
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { TextField, useLocalStorage } from "@react-md/core";
@@ -242,8 +240,7 @@ export interface LocalStorageHookReturnValue<T> {
  * }
  * ```
  *
- * @example
- * Type-safe Objects
+ * @example Type-safe Objects
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useLocalStorage } from "@react-md/core";
@@ -278,8 +275,7 @@ export interface LocalStorageHookReturnValue<T> {
  * }
  * ```
  *
- * @example
- * Manual Persistence
+ * @example Manual Persistence
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Button, Checkbox, Form, useLocalStorage } from "@react-md/core";
@@ -321,8 +317,7 @@ export interface LocalStorageHookReturnValue<T> {
  * was updated in a separate tab with the `"storage"` event. You must setup your
  * own context to share values or another state manager solution.
  *
- * @example
- * Shared Value
+ * @example Shared Value
  * ```tsx
  * const context = createContext(null);
  * const { Provider } = context;
@@ -367,7 +362,7 @@ export interface LocalStorageHookReturnValue<T> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useLocalStorage<T>(options: LocalStorageHookOptions<T>): LocalStorageHookReturnValue<T>;
 export {};

package/dist/useLocalStorage.js

@@ -4,7 +4,7 @@ import { useSsr } from "./SsrProvider.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { identity } from "./utils/identity.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const defaultLocalStorageSerializer = (value)=>typeof value === "string" ? value : `${value}`;
 /**
  * You'll most likely want to use {@link useLocalStorage} instead, but this is a
@@ -40,7 +40,7 @@ import { identity } from "./utils/identity.js";
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const getItemFromStorage = (options)=>{
     const { key, fallback, storage = localStorage, deserializer = JSON.parse } = options;
     if (!key) {
@@ -82,7 +82,7 @@ import { identity } from "./utils/identity.js";
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const setItemInStorage = (options)=>{
     const { key, value, storage = localStorage, serializer = JSON.stringify } = options;
     if (!key) {
@@ -95,7 +95,7 @@ import { identity } from "./utils/identity.js";
     }
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */ export const removeItemFromStorage = (options)=>{
     const { key, storage = localStorage } = options;
@@ -109,8 +109,7 @@ import { identity } from "./utils/identity.js";
     }
 };
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { TextField, useLocalStorage } from "@react-md/core";
@@ -135,8 +134,7 @@ import { identity } from "./utils/identity.js";
  * }
  * ```
  *
- * @example
- * Type-safe Objects
+ * @example Type-safe Objects
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useLocalStorage } from "@react-md/core";
@@ -171,8 +169,7 @@ import { identity } from "./utils/identity.js";
  * }
  * ```
  *
- * @example
- * Manual Persistence
+ * @example Manual Persistence
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Button, Checkbox, Form, useLocalStorage } from "@react-md/core";
@@ -214,8 +211,7 @@ import { identity } from "./utils/identity.js";
  * was updated in a separate tab with the `"storage"` event. You must setup your
  * own context to share values or another state manager solution.
  *
- * @example
- * Shared Value
+ * @example Shared Value
  * ```tsx
  * const context = createContext(null);
  * const { Provider } = context;
@@ -260,7 +256,7 @@ import { identity } from "./utils/identity.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useLocalStorage(options) {
     const { key, defaultValue, manual = false } = options;
     const [initialValue] = useState(defaultValue);

package/dist/useLocalStorage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useLocalStorage.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nimport { identity } from \"./utils/identity.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type LocalStorageSerializer<T> = (value: T) => string;\n/** @remarks \\@since 6.0.0 */\nexport type LocalStorageDeserializer<T> = (item: string) => T;\n\n/** @remarks \\@since 6.0.0 */\nexport interface LocalStorageHookOptions<T> {\n  /**\n   * The local storage key name to use.\n   *\n   * This can be set to an empty string for internal usage of conditionally\n   * saving items to local storage.\n   */\n  key: string;\n\n  /**\n   * The default value to use if an item does not exist in local storage.\n   */\n  defaultValue: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if the `value` should not persist to local storage\n   * immediately whenever it changes. You will manually need to call\n   * {@link LocalStorageHookReturnValue.persist} instead.\n   *\n   * @see {@link LocalStorageHookReturnValue.persist} for an example.\n   * @defaultValue `false`\n   */\n  manual?: boolean;\n\n  /**\n   * Set this to `true` to update:\n   *\n   * - the default {@link serializer} to be:\n   * ```\n   * typeof value === \"string\" ? value : `${value}`\n   * ```\n   * - the default {@link deserializer} to not call `JSON.parse` if the\n   *   {@link defaultValue} is a string.\n   *\n   * @defaultValue `typeof defaultValue === 'string'`\n   */\n  raw?: boolean;\n\n  /**\n   * An optional function to serialize the `value` before storing it in local\n   * storage.\n   *\n   * @defaultValue `JSON.stringify`\n   */\n  serializer?: LocalStorageSerializer<T>;\n\n  /**\n   * An optional function to deserialize the `value` if the item existed in\n   * local storage.\n   *\n   * @defaultValue `JSON.parse`\n   */\n  deserializer?: LocalStorageDeserializer<T>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const defaultLocalStorageSerializer = <T>(value: T): string =>\n  typeof value === \"string\" ? value : `${value}`;\n\n/** @remarks \\@since 6.0.0 */\nexport interface GetItemFromStorageOptions<T> {\n  /**\n   * The storage key to use\n   */\n  key: string;\n\n  /**\n   * A value to use when the {@link key} does not exist in storage or there is\n   * an error deserializing the value.\n   */\n  fallback: T;\n\n  /** @see {@link LocalStorageHookOptions.deserializer} */\n  deserializer?: LocalStorageDeserializer<T>;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * const item1 = getItemFromStorage({\n *   key: \"testKey\",\n *   fallback: values[0],\n *   deserializer(item) {\n *     if (!values.includes(item)) {\n *       return values[0]\n *     }\n *\n *     return item;\n *   },\n * });\n *\n * const item2 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n * });\n *\n * const item3 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const getItemFromStorage = <T>(\n  options: GetItemFromStorageOptions<T>\n): T => {\n  const {\n    key,\n    fallback,\n    storage = localStorage,\n    deserializer = JSON.parse,\n  } = options;\n  if (!key) {\n    return fallback;\n  }\n\n  try {\n    const value = storage.getItem(key);\n    return !value ? fallback : deserializer(value);\n  } catch (e) {\n    return fallback;\n  }\n};\n\n/** @remarks \\@since 6.0.0 */\nexport interface SetItemInStorageOptions<T> {\n  key: string;\n  value: T;\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n\n  /** @see {@link LocalStorageHookOptions.serializer} */\n  serializer?: LocalStorageSerializer<T>;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { identity, getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * setItemInStorage({\n *   key: \"testKey\",\n *   value: values[0],\n *   // store string value as-is\n *   serializer: identity,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const setItemInStorage = <T>(\n  options: SetItemInStorageOptions<T>\n): void => {\n  const {\n    key,\n    value,\n    storage = localStorage,\n    serializer = JSON.stringify,\n  } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.setItem(key, serializer(value));\n  } catch {\n    //\n  }\n};\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\ninterface RemoveItemFromStorageOptions {\n  key: string;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const removeItemFromStorage = (\n  options: RemoveItemFromStorageOptions\n): void => {\n  const { key, storage = localStorage } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.removeItem(key);\n  } catch {\n    // do nothing\n  }\n};\n\n/** @remarks \\@since 6.0.0 */\nexport interface LocalStorageHookReturnValue<T> {\n  value: T;\n\n  /**\n   * Updates the {@link value} in state. When the\n   * {@link LocalStorageHookOptions.manual} option is `false`, the value will\n   * also be updated in local storage immediately.\n   */\n  setValue: UseStateSetter<T>;\n\n  /**\n   * Remove the item from local storage.\n   */\n  remove(): void;\n\n  /**\n   * Manually persist the current {@link value} into local storage. This is only\n   * useful if the {@link LocalStorageHookOptions.manual} option is `true`.\n   *\n   * @example\n   * Manual Persisting\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { value, setValue, persist } = useLocalStorage({\n   *     key: \"someKey\",\n   *     manual: true,\n   *     defaultValue: \"\",\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button onClick={closeDialog}>\n   *         Cancel\n   *       </Button>\n   *       <Button\n   *         onClick={async () => {\n   *           await saveToDatabase(value);\n   *           persist();\n   *           closeDialog();\n   *         }}\n   *       >\n   *         Confirm\n   *       </Button>\n   *     </>\n   *   );\n   * }\n   * ```\n   */\n  persist(): void;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage({\n *     key: \"savedSearch\",\n *     defaultValue: \"\",\n *   });\n *\n *   return (\n *     <TextField\n *       label=\"Search\"\n *       placeholder=\"Search...\"\n *       type=\"search\"\n *       value={value}\n *       onChange={(event) => {\n *         setValue(event.currentTarget.value)\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example\n * Type-safe Objects\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useLocalStorage } from \"@react-md/core\";\n *\n * interface ExpectedSchema {\n *   label: string;\n *   value: string;\n *   // others\n * }\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage<ExpectedSchema | null>({\n *     key: \"someKey\",\n *     defaultValue: null,\n *\n *     // this is optional: you can create a custom deserializer to validate\n *     // the stored value to prevent people manually updating local storage in\n *     // the dev tools\n *     deserializer(item) {\n *       const parsed = JSON.parse(item):\n *       const { label, value } = parsed;\n *       if (typeof label !== 'string' || typeof value !== 'string') {\n *         return null;\n *       }\n *\n *       return { label, value };\n *     }\n *   });\n *\n *   // do something\n *   // value will be `ExpectedSchema | null`\n * }\n * ```\n *\n * @example\n * Manual Persistence\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Button, Checkbox, Form, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     manual: true,\n *     defaultValue: false,\n *   });\n *\n *   return (\n *     <Form\n *       onSubmit={() => {\n *         // current value will be saved into local storage\n *         persist();\n *       }}\n *       onReset={() => {\n *         // \"someKey\" will be removed from local storage\n *         remove();\n *       }}\n *     >\n *       <Checkbox\n *         label=\"Allow cookies\"\n *         checked={value}\n *         onChange={(event) =>\n *           setValue(event.currentTarget.checked);\n *         }\n *       />\n *       <Button type=\"reset\">Decline</Button>\n *       <Button type=\"submit\">Save</Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * Note: Using the same local storage key in multiple parts in your app will not\n * update all instances with that value. The value will only be updated if it\n * was updated in a separate tab with the `\"storage\"` event. You must setup your\n * own context to share values or another state manager solution.\n *\n * @example\n * Shared Value\n * ```tsx\n * const context = createContext(null);\n * const { Provider } = context;\n *\n * export function useSomeValue(): string {\n *   const value = useContext(context);\n *   if (!value) {\n *     throw new Error()\n *   }\n *\n *   return value;\n * }\n *\n * function Example({ children }: { children: ReactNode }) {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     defaultValue: \"\",\n *\n *     // optional\n *     manual: true,\n *   });\n *\n *   return (\n *     <Provider\n *       value={useMemo(() => ({\n *         value,\n *         setValue,\n *\n *         // remove and persist are optional\n *         remove,\n *         persist,\n *       }), [value, setValue, remove, persist])}\n *     >\n *       {children}\n *     </Provider>\n *   );\n * }\n *\n * function SomeChildComponent() {\n *   const { value, setValue } = useSomeValue();\n *   // do stuff\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useLocalStorage<T>(\n  options: LocalStorageHookOptions<T>\n): LocalStorageHookReturnValue<T> {\n  const { key, defaultValue, manual = false } = options;\n\n  const [initialValue] = useState(defaultValue);\n  // this allows for strings to automatically be stored as-is instead of adding\n  // additional quotes around then with JSON.stringify\n  const raw = options.raw ?? typeof initialValue === \"string\";\n  const serializer =\n    options.serializer ??\n    (raw ? defaultLocalStorageSerializer : JSON.stringify);\n  const deserializer =\n    options.deserializer ??\n    (raw && typeof initialValue === \"string\" ? identity : JSON.parse);\n\n  const ssr = useSsr();\n  const [value, setStoredValue] = useState<T>(() => {\n    if (ssr) {\n      return initialValue;\n    }\n\n    const value = getItemFromStorage({\n      key,\n      fallback: initialValue,\n      deserializer,\n    });\n    if (!manual) {\n      setItemInStorage({\n        key,\n        value,\n        serializer,\n      });\n    }\n\n    return value;\n  });\n  const config = useRef({\n    key,\n    value,\n    manual,\n    serializer,\n    deserializer,\n    defaultValue: initialValue,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    config.current = {\n      key,\n      value,\n      manual,\n      serializer,\n      deserializer,\n      defaultValue: initialValue,\n    };\n  });\n\n  const setValue = useCallback<UseStateSetter<T>>((valueOrDispatcher) => {\n    const { key, manual, serializer } = config.current;\n    setStoredValue((prevValue) => {\n      const nextValue =\n        valueOrDispatcher instanceof Function\n          ? valueOrDispatcher(prevValue)\n          : valueOrDispatcher;\n\n      if (!manual) {\n        setItemInStorage({\n          key,\n          value: nextValue,\n          serializer,\n        });\n      }\n\n      return nextValue;\n    });\n  }, []);\n\n  const remove = useCallback(() => {\n    removeItemFromStorage({\n      key: config.current.key,\n    });\n  }, []);\n\n  const persist = useCallback(() => {\n    const { key, value, serializer } = config.current;\n    setItemInStorage({\n      key,\n      value,\n      serializer,\n    });\n  }, []);\n\n  useEffect(() => {\n    const { defaultValue, deserializer, manual } = config.current;\n    if (manual || !ssr) {\n      return;\n    }\n\n    setValue(\n      getItemFromStorage({\n        key,\n        fallback: defaultValue,\n        deserializer,\n      })\n    );\n  }, [key, ssr, setValue]);\n\n  // update the value if another tab changed the local storage value\n  useEffect(() => {\n    if (!key) {\n      return;\n    }\n\n    const callback = (event: StorageEvent): void => {\n      const { defaultValue, deserializer } = config.current;\n      if (event.key === key) {\n        setStoredValue(\n          getItemFromStorage({\n            key,\n            fallback: defaultValue,\n            deserializer,\n          })\n        );\n      }\n    };\n\n    window.addEventListener(\"storage\", callback);\n    return () => {\n      window.removeEventListener(\"storage\", callback);\n    };\n  }, [key]);\n\n  return {\n    value,\n    setValue,\n    remove,\n    persist,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useSsr","useIsomorphicLayoutEffect","identity","defaultLocalStorageSerializer","value","getItemFromStorage","options","key","fallback","storage","localStorage","deserializer","JSON","parse","getItem","e","setItemInStorage","serializer","stringify","setItem","removeItemFromStorage","removeItem","useLocalStorage","defaultValue","manual","initialValue","raw","ssr","setStoredValue","config","current","setValue","valueOrDispatcher","prevValue","nextValue","Function","remove","persist","callback","event","window","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/useLocalStorage.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nimport { identity } from \"./utils/identity.js\";\n\n/** @since 6.0.0 */\nexport type LocalStorageSerializer<T> = (value: T) => string;\n/** @since 6.0.0 */\nexport type LocalStorageDeserializer<T> = (item: string) => T;\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookOptions<T> {\n  /**\n   * The local storage key name to use.\n   *\n   * This can be set to an empty string for internal usage of conditionally\n   * saving items to local storage.\n   */\n  key: string;\n\n  /**\n   * The default value to use if an item does not exist in local storage.\n   */\n  defaultValue: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if the `value` should not persist to local storage\n   * immediately whenever it changes. You will manually need to call\n   * {@link LocalStorageHookReturnValue.persist} instead.\n   *\n   * @see {@link LocalStorageHookReturnValue.persist} for an example.\n   * @defaultValue `false`\n   */\n  manual?: boolean;\n\n  /**\n   * Set this to `true` to update:\n   *\n   * - the default {@link serializer} to be:\n   * ```\n   * typeof value === \"string\" ? value : `${value}`\n   * ```\n   * - the default {@link deserializer} to not call `JSON.parse` if the\n   *   {@link defaultValue} is a string.\n   *\n   * @defaultValue `typeof defaultValue === 'string'`\n   */\n  raw?: boolean;\n\n  /**\n   * An optional function to serialize the `value` before storing it in local\n   * storage.\n   *\n   * @defaultValue `JSON.stringify`\n   */\n  serializer?: LocalStorageSerializer<T>;\n\n  /**\n   * An optional function to deserialize the `value` if the item existed in\n   * local storage.\n   *\n   * @defaultValue `JSON.parse`\n   */\n  deserializer?: LocalStorageDeserializer<T>;\n}\n\n/**\n * @since 6.0.0\n */\nexport const defaultLocalStorageSerializer = <T>(value: T): string =>\n  typeof value === \"string\" ? value : `${value}`;\n\n/** @since 6.0.0 */\nexport interface GetItemFromStorageOptions<T> {\n  /**\n   * The storage key to use\n   */\n  key: string;\n\n  /**\n   * A value to use when the {@link key} does not exist in storage or there is\n   * an error deserializing the value.\n   */\n  fallback: T;\n\n  /** @see {@link LocalStorageHookOptions.deserializer} */\n  deserializer?: LocalStorageDeserializer<T>;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * const item1 = getItemFromStorage({\n *   key: \"testKey\",\n *   fallback: values[0],\n *   deserializer(item) {\n *     if (!values.includes(item)) {\n *       return values[0]\n *     }\n *\n *     return item;\n *   },\n * });\n *\n * const item2 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n * });\n *\n * const item3 = getItemFromStorage({\n *   key: \"anotherKey\",\n *   fallback: -1,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const getItemFromStorage = <T>(\n  options: GetItemFromStorageOptions<T>\n): T => {\n  const {\n    key,\n    fallback,\n    storage = localStorage,\n    deserializer = JSON.parse,\n  } = options;\n  if (!key) {\n    return fallback;\n  }\n\n  try {\n    const value = storage.getItem(key);\n    return !value ? fallback : deserializer(value);\n  } catch (e) {\n    return fallback;\n  }\n};\n\n/** @since 6.0.0 */\nexport interface SetItemInStorageOptions<T> {\n  key: string;\n  value: T;\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n\n  /** @see {@link LocalStorageHookOptions.serializer} */\n  serializer?: LocalStorageSerializer<T>;\n}\n\n/**\n * You'll most likely want to use {@link useLocalStorage} instead, but this is a\n * low-level util to \"safely\" get an item from local storage.\n *\n * @example\n * ```ts\n * import { identity, getItemFromStorage } from \"@react-md/core\";\n *\n * const values = [\"a\", \"b\", \"c\", \"d\"] as const;\n *\n * setItemInStorage({\n *   key: \"testKey\",\n *   value: values[0],\n *   // store string value as-is\n *   serializer: identity,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n * });\n *\n * setItemInStorage({\n *   key: \"anotherKey\",\n *   value: 100,\n *   storage: sessionStorage,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const setItemInStorage = <T>(\n  options: SetItemInStorageOptions<T>\n): void => {\n  const {\n    key,\n    value,\n    storage = localStorage,\n    serializer = JSON.stringify,\n  } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.setItem(key, serializer(value));\n  } catch {\n    //\n  }\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface RemoveItemFromStorageOptions {\n  key: string;\n\n  /** @defaultValue `localStorage` */\n  storage?: Storage;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const removeItemFromStorage = (\n  options: RemoveItemFromStorageOptions\n): void => {\n  const { key, storage = localStorage } = options;\n  if (!key) {\n    return;\n  }\n\n  try {\n    storage.removeItem(key);\n  } catch {\n    // do nothing\n  }\n};\n\n/** @since 6.0.0 */\nexport interface LocalStorageHookReturnValue<T> {\n  value: T;\n\n  /**\n   * Updates the {@link value} in state. When the\n   * {@link LocalStorageHookOptions.manual} option is `false`, the value will\n   * also be updated in local storage immediately.\n   */\n  setValue: UseStateSetter<T>;\n\n  /**\n   * Remove the item from local storage.\n   */\n  remove(): void;\n\n  /**\n   * Manually persist the current {@link value} into local storage. This is only\n   * useful if the {@link LocalStorageHookOptions.manual} option is `true`.\n   *\n   * @example Manual Persisting\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { value, setValue, persist } = useLocalStorage({\n   *     key: \"someKey\",\n   *     manual: true,\n   *     defaultValue: \"\",\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button onClick={closeDialog}>\n   *         Cancel\n   *       </Button>\n   *       <Button\n   *         onClick={async () => {\n   *           await saveToDatabase(value);\n   *           persist();\n   *           closeDialog();\n   *         }}\n   *       >\n   *         Confirm\n   *       </Button>\n   *     </>\n   *   );\n   * }\n   * ```\n   */\n  persist(): void;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage({\n *     key: \"savedSearch\",\n *     defaultValue: \"\",\n *   });\n *\n *   return (\n *     <TextField\n *       label=\"Search\"\n *       placeholder=\"Search...\"\n *       type=\"search\"\n *       value={value}\n *       onChange={(event) => {\n *         setValue(event.currentTarget.value)\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example Type-safe Objects\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useLocalStorage } from \"@react-md/core\";\n *\n * interface ExpectedSchema {\n *   label: string;\n *   value: string;\n *   // others\n * }\n *\n * function Example(): ReactElement {\n *   const { value, setValue } = useLocalStorage<ExpectedSchema | null>({\n *     key: \"someKey\",\n *     defaultValue: null,\n *\n *     // this is optional: you can create a custom deserializer to validate\n *     // the stored value to prevent people manually updating local storage in\n *     // the dev tools\n *     deserializer(item) {\n *       const parsed = JSON.parse(item):\n *       const { label, value } = parsed;\n *       if (typeof label !== 'string' || typeof value !== 'string') {\n *         return null;\n *       }\n *\n *       return { label, value };\n *     }\n *   });\n *\n *   // do something\n *   // value will be `ExpectedSchema | null`\n * }\n * ```\n *\n * @example Manual Persistence\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Button, Checkbox, Form, useLocalStorage } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     manual: true,\n *     defaultValue: false,\n *   });\n *\n *   return (\n *     <Form\n *       onSubmit={() => {\n *         // current value will be saved into local storage\n *         persist();\n *       }}\n *       onReset={() => {\n *         // \"someKey\" will be removed from local storage\n *         remove();\n *       }}\n *     >\n *       <Checkbox\n *         label=\"Allow cookies\"\n *         checked={value}\n *         onChange={(event) =>\n *           setValue(event.currentTarget.checked);\n *         }\n *       />\n *       <Button type=\"reset\">Decline</Button>\n *       <Button type=\"submit\">Save</Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * Note: Using the same local storage key in multiple parts in your app will not\n * update all instances with that value. The value will only be updated if it\n * was updated in a separate tab with the `\"storage\"` event. You must setup your\n * own context to share values or another state manager solution.\n *\n * @example Shared Value\n * ```tsx\n * const context = createContext(null);\n * const { Provider } = context;\n *\n * export function useSomeValue(): string {\n *   const value = useContext(context);\n *   if (!value) {\n *     throw new Error()\n *   }\n *\n *   return value;\n * }\n *\n * function Example({ children }: { children: ReactNode }) {\n *   const { value, setValue, remove, persist } = useLocalStorage({\n *     key: \"someKey\",\n *     defaultValue: \"\",\n *\n *     // optional\n *     manual: true,\n *   });\n *\n *   return (\n *     <Provider\n *       value={useMemo(() => ({\n *         value,\n *         setValue,\n *\n *         // remove and persist are optional\n *         remove,\n *         persist,\n *       }), [value, setValue, remove, persist])}\n *     >\n *       {children}\n *     </Provider>\n *   );\n * }\n *\n * function SomeChildComponent() {\n *   const { value, setValue } = useSomeValue();\n *   // do stuff\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useLocalStorage<T>(\n  options: LocalStorageHookOptions<T>\n): LocalStorageHookReturnValue<T> {\n  const { key, defaultValue, manual = false } = options;\n\n  const [initialValue] = useState(defaultValue);\n  // this allows for strings to automatically be stored as-is instead of adding\n  // additional quotes around then with JSON.stringify\n  const raw = options.raw ?? typeof initialValue === \"string\";\n  const serializer =\n    options.serializer ??\n    (raw ? defaultLocalStorageSerializer : JSON.stringify);\n  const deserializer =\n    options.deserializer ??\n    (raw && typeof initialValue === \"string\" ? identity : JSON.parse);\n\n  const ssr = useSsr();\n  const [value, setStoredValue] = useState<T>(() => {\n    if (ssr) {\n      return initialValue;\n    }\n\n    const value = getItemFromStorage({\n      key,\n      fallback: initialValue,\n      deserializer,\n    });\n    if (!manual) {\n      setItemInStorage({\n        key,\n        value,\n        serializer,\n      });\n    }\n\n    return value;\n  });\n  const config = useRef({\n    key,\n    value,\n    manual,\n    serializer,\n    deserializer,\n    defaultValue: initialValue,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    config.current = {\n      key,\n      value,\n      manual,\n      serializer,\n      deserializer,\n      defaultValue: initialValue,\n    };\n  });\n\n  const setValue = useCallback<UseStateSetter<T>>((valueOrDispatcher) => {\n    const { key, manual, serializer } = config.current;\n    setStoredValue((prevValue) => {\n      const nextValue =\n        valueOrDispatcher instanceof Function\n          ? valueOrDispatcher(prevValue)\n          : valueOrDispatcher;\n\n      if (!manual) {\n        setItemInStorage({\n          key,\n          value: nextValue,\n          serializer,\n        });\n      }\n\n      return nextValue;\n    });\n  }, []);\n\n  const remove = useCallback(() => {\n    removeItemFromStorage({\n      key: config.current.key,\n    });\n  }, []);\n\n  const persist = useCallback(() => {\n    const { key, value, serializer } = config.current;\n    setItemInStorage({\n      key,\n      value,\n      serializer,\n    });\n  }, []);\n\n  useEffect(() => {\n    const { defaultValue, deserializer, manual } = config.current;\n    if (manual || !ssr) {\n      return;\n    }\n\n    setValue(\n      getItemFromStorage({\n        key,\n        fallback: defaultValue,\n        deserializer,\n      })\n    );\n  }, [key, ssr, setValue]);\n\n  // update the value if another tab changed the local storage value\n  useEffect(() => {\n    if (!key) {\n      return;\n    }\n\n    const callback = (event: StorageEvent): void => {\n      const { defaultValue, deserializer } = config.current;\n      if (event.key === key) {\n        setStoredValue(\n          getItemFromStorage({\n            key,\n            fallback: defaultValue,\n            deserializer,\n          })\n        );\n      }\n    };\n\n    window.addEventListener(\"storage\", callback);\n    return () => {\n      window.removeEventListener(\"storage\", callback);\n    };\n  }, [key]);\n\n  return {\n    value,\n    setValue,\n    remove,\n    persist,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useSsr","useIsomorphicLayoutEffect","identity","defaultLocalStorageSerializer","value","getItemFromStorage","options","key","fallback","storage","localStorage","deserializer","JSON","parse","getItem","e","setItemInStorage","serializer","stringify","setItem","removeItemFromStorage","removeItem","useLocalStorage","defaultValue","manual","initialValue","raw","ssr","setStoredValue","config","current","setValue","valueOrDispatcher","prevValue","nextValue","Function","remove","persist","callback","event","window","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/useMutationObserver.d.ts

@@ -0,0 +1,52 @@
+import { type RefCallback, type Ref } from "react";
+/**
+ * @since 6.0.0
+ */
+export interface MutationObserverHookOptions<E extends HTMLElement> extends MutationObserverInit {
+    ref?: Ref<E>;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options
+     * @defaultValue `!childList && !attributes && !characterData`
+     */
+    disabled?: boolean;
+    onObserved(mutation: MutationRecord): void;
+}
+/**
+ * The mutation observer is used to track the changes made to the DOM tree.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useMutationObserver } from "@react-md/core";
+ * import { useCallback, type HTMLAttributes, type ReactElement } from "react";
+ *
+ * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {
+ *   const { children, ...remaining } = props;
+ *
+ *   const targetRef = useMutationObserver({
+ *     subtree: true,
+ *     attributes: true,
+ *     childList: true,
+ *     onUpdate: useCallback((mutation) => {
+ *       switch (mutation.type) {
+ *         case "childList":
+ *           console.log("A child node has been added or removed");
+ *           break;
+ *         case "attributes":
+ *           console.log(`The ${mutation.attributeName} attribute was modified`);
+ *           break
+ *       }
+ *
+ *     }, []),
+ *   });
+ *
+ *   return (
+ *     <div {...remaining} ref={targetRef}>
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useMutationObserver<E extends HTMLElement>(options: MutationObserverHookOptions<E>): RefCallback<E>;

package/dist/useMutationObserver.js

@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { useEnsuredRef } from "./useEnsuredRef.js";
+/**
+ * The mutation observer is used to track the changes made to the DOM tree.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useMutationObserver } from "@react-md/core";
+ * import { useCallback, type HTMLAttributes, type ReactElement } from "react";
+ *
+ * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {
+ *   const { children, ...remaining } = props;
+ *
+ *   const targetRef = useMutationObserver({
+ *     subtree: true,
+ *     attributes: true,
+ *     childList: true,
+ *     onUpdate: useCallback((mutation) => {
+ *       switch (mutation.type) {
+ *         case "childList":
+ *           console.log("A child node has been added or removed");
+ *           break;
+ *         case "attributes":
+ *           console.log(`The ${mutation.attributeName} attribute was modified`);
+ *           break
+ *       }
+ *
+ *     }, []),
+ *   });
+ *
+ *   return (
+ *     <div {...remaining} ref={targetRef}>
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useMutationObserver(options) {
+    const { ref, onObserved, attributes, attributeFilter, attributeOldValue, subtree, childList, characterData, characterDataOldValue, disabled = !childList && !attributes && !characterData } = options;
+    const [targetNodeRef, refCallback] = useEnsuredRef(ref);
+    useEffect(()=>{
+        if (disabled) {
+            return;
+        }
+        const observerTarget = targetNodeRef.current;
+        if (!observerTarget) {
+            return;
+        }
+        const observer = new MutationObserver((records)=>{
+            const [entry] = records;
+            if (entry) {
+                onObserved(entry);
+            }
+        });
+        observer.observe(observerTarget, {
+            attributes,
+            attributeFilter,
+            attributeOldValue,
+            subtree,
+            childList,
+            characterData,
+            characterDataOldValue
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        attributeFilter,
+        attributeOldValue,
+        attributes,
+        characterData,
+        characterDataOldValue,
+        childList,
+        disabled,
+        onObserved,
+        subtree,
+        targetNodeRef
+    ]);
+    return refCallback;
+}
+
+//# sourceMappingURL=useMutationObserver.js.map

package/dist/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useMutationObserver.ts"],"sourcesContent":["import { useEffect, type RefCallback, type Ref } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MutationObserverHookOptions<E extends HTMLElement>\n  extends MutationObserverInit {\n  ref?: Ref<E>;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options\n   * @defaultValue `!childList && !attributes && !characterData`\n   */\n  disabled?: boolean;\n\n  onObserved(mutation: MutationRecord): void;\n}\n\n/**\n * The mutation observer is used to track the changes made to the DOM tree.\n *\n * @example Simple Example\n * ```tsx\n * import { useMutationObserver } from \"@react-md/core\";\n * import { useCallback, type HTMLAttributes, type ReactElement } from \"react\";\n *\n * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   const targetRef = useMutationObserver({\n *     subtree: true,\n *     attributes: true,\n *     childList: true,\n *     onUpdate: useCallback((mutation) => {\n *       switch (mutation.type) {\n *         case \"childList\":\n *           console.log(\"A child node has been added or removed\");\n *           break;\n *         case \"attributes\":\n *           console.log(`The ${mutation.attributeName} attribute was modified`);\n *           break\n *       }\n *\n *     }, []),\n *   });\n *\n *   return (\n *     <div {...remaining} ref={targetRef}>\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useMutationObserver<E extends HTMLElement>(\n  options: MutationObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onObserved,\n    attributes,\n    attributeFilter,\n    attributeOldValue,\n    subtree,\n    childList,\n    characterData,\n    characterDataOldValue,\n    disabled = !childList && !attributes && !characterData,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const observerTarget = targetNodeRef.current;\n    if (!observerTarget) {\n      return;\n    }\n\n    const observer = new MutationObserver((records) => {\n      const [entry] = records;\n      if (entry) {\n        onObserved(entry);\n      }\n    });\n\n    observer.observe(observerTarget, {\n      attributes,\n      attributeFilter,\n      attributeOldValue,\n      subtree,\n      childList,\n      characterData,\n      characterDataOldValue,\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    attributeFilter,\n    attributeOldValue,\n    attributes,\n    characterData,\n    characterDataOldValue,\n    childList,\n    disabled,\n    onObserved,\n    subtree,\n    targetNodeRef,\n  ]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","useMutationObserver","options","ref","onObserved","attributes","attributeFilter","attributeOldValue","subtree","childList","characterData","characterDataOldValue","disabled","targetNodeRef","refCallback","observerTarget","current","observer","MutationObserver","records","entry","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,SAAS,QAAoC,QAAQ;AAC9D,SAASC,aAAa,QAAQ,qBAAqB;AAkBnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,oBACdC,OAAuC;IAEvC,MAAM,EACJC,GAAG,EACHC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,qBAAqB,EACrBC,WAAW,CAACH,aAAa,CAACJ,cAAc,CAACK,aAAa,EACvD,GAAGR;IAEJ,MAAM,CAACW,eAAeC,YAAY,GAAGd,cAAcG;IACnDJ,UAAU;QACR,IAAIa,UAAU;YACZ;QACF;QAEA,MAAMG,iBAAiBF,cAAcG,OAAO;QAC5C,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,MAAM,CAACC,MAAM,GAAGD;YAChB,IAAIC,OAAO;gBACThB,WAAWgB;YACb;QACF;QAEAH,SAASI,OAAO,CAACN,gBAAgB;YAC/BV;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACA,OAAO;YACLM,SAASK,UAAU;QACrB;IACF,GAAG;QACDhB;QACAC;QACAF;QACAK;QACAC;QACAF;QACAG;QACAR;QACAI;QACAK;KACD;IAED,OAAOC;AACT"}

package/dist/usePageInactive.d.ts

@@ -6,11 +6,11 @@
  * browser is no longer partially visible or becomes partially visible.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type PageInactiveType = "focus" | "visibility";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface PageInactiveOptions {
     /**
@@ -68,6 +68,6 @@ export interface PageInactiveOptions {
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function usePageInactive(options: PageInactiveOptions): void;

package/dist/usePageInactive.js

@@ -33,7 +33,7 @@ const noop = ()=>{
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function usePageInactive(options) {
     const { type = "focus", disabled, onChange, onDisabledCleanup = noop } = options;
     useEffect(()=>{

package/dist/usePageInactive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/usePageInactive.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * When this is set to `\"focus\"`, the change handler will be fired whenever the\n * window gains or loses focus.\n *\n * When this is set to `visibility`, the change handler will be fired when the\n * browser is no longer partially visible or becomes partially visible.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState\n * @remarks \\@since 6.0.0\n */\nexport type PageInactiveType = \"focus\" | \"visibility\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface PageInactiveOptions {\n  /**\n   * @see {@link PageInactiveType}\n   * @defaultValue `\"focus\"`\n   */\n  type?: PageInactiveType;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will be called whenever the page activity changes based on the\n   * {@link PageInactiveType}.\n   */\n  onChange(active: boolean): void;\n\n  /**\n   * This will be fired whenever the {@link disabled} state is `true` which can\n   * be useful for clearing pending timers or resetting state.\n   *\n   * Since this is passed to a `useEffect` as a dependency, you might have to\n   * wrap this in a `useCallback` if unexpected re-rendering or errors occurs.\n   *\n   * @defaultValue `() => {}`\n   */\n  onDisabledCleanup?(): void;\n}\n\n/**\n * @example\n * ```ts\n * import { usePageInactive } from \"@react-md/core\";\n * import { useCallback, useEffect, useRef, useState } from \"react\";\n *\n * function Example(): null {\n *   const [visible, setVisible] = useState(false);\n *   const timeout = useRef<number | undefined>();\n *   const startTimeout = useCallback(() => {\n *     timeout.current = window.setTimeout(() => {\n *       setVisible(false);\n *     }, 10000);\n *   }, []);\n *\n *   usePageInactive({\n *     onChange(active) {\n *       if (!active) {\n *         window.clearTimeout(timeout.current);\n *         setVisible(false);\n *       } else {\n *         startTimeout();\n *       }\n *     }\n *   });\n *\n *   // pretend implementation\n *   return null;\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function usePageInactive(options: PageInactiveOptions): void {\n  const {\n    type = \"focus\",\n    disabled,\n    onChange,\n    onDisabledCleanup = noop,\n  } = options;\n  useEffect(() => {\n    if (disabled) {\n      onDisabledCleanup();\n      return;\n    }\n\n    const callback = (event: Event): void => {\n      let active = document.visibilityState === \"visible\";\n      if (event.type === \"blur\") {\n        active = false;\n      } else if (event.type === \"focus\") {\n        active = true;\n      }\n\n      onChange(active);\n    };\n\n    document.addEventListener(\"visibilitychange\", callback);\n    if (type === \"focus\") {\n      window.addEventListener(\"blur\", callback);\n      window.addEventListener(\"focus\", callback);\n    }\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", callback);\n      window.removeEventListener(\"blur\", callback);\n      window.removeEventListener(\"focus\", callback);\n    };\n  }, [disabled, onChange, onDisabledCleanup, type]);\n}\n"],"names":["useEffect","noop","usePageInactive","options","type","disabled","onChange","onDisabledCleanup","callback","event","active","document","visibilityState","addEventListener","window","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC,MAAMC,OAAO;AACX,aAAa;AACf;AA+CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,gBAAgBC,OAA4B;IAC1D,MAAM,EACJC,OAAO,OAAO,EACdC,QAAQ,EACRC,QAAQ,EACRC,oBAAoBN,IAAI,EACzB,GAAGE;IACJH,UAAU;QACR,IAAIK,UAAU;YACZE;YACA;QACF;QAEA,MAAMC,WAAW,CAACC;YAChB,IAAIC,SAASC,SAASC,eAAe,KAAK;YAC1C,IAAIH,MAAML,IAAI,KAAK,QAAQ;gBACzBM,SAAS;YACX,OAAO,IAAID,MAAML,IAAI,KAAK,SAAS;gBACjCM,SAAS;YACX;YAEAJ,SAASI;QACX;QAEAC,SAASE,gBAAgB,CAAC,oBAAoBL;QAC9C,IAAIJ,SAAS,SAAS;YACpBU,OAAOD,gBAAgB,CAAC,QAAQL;YAChCM,OAAOD,gBAAgB,CAAC,SAASL;QACnC;QAEA,OAAO;YACLG,SAASI,mBAAmB,CAAC,oBAAoBP;YACjDM,OAAOC,mBAAmB,CAAC,QAAQP;YACnCM,OAAOC,mBAAmB,CAAC,SAASP;QACtC;IACF,GAAG;QAACH;QAAUC;QAAUC;QAAmBH;KAAK;AAClD"}
+{"version":3,"sources":["../src/usePageInactive.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * When this is set to `\"focus\"`, the change handler will be fired whenever the\n * window gains or loses focus.\n *\n * When this is set to `visibility`, the change handler will be fired when the\n * browser is no longer partially visible or becomes partially visible.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState\n * @since 6.0.0\n */\nexport type PageInactiveType = \"focus\" | \"visibility\";\n\n/**\n * @since 6.0.0\n */\nexport interface PageInactiveOptions {\n  /**\n   * @see {@link PageInactiveType}\n   * @defaultValue `\"focus\"`\n   */\n  type?: PageInactiveType;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will be called whenever the page activity changes based on the\n   * {@link PageInactiveType}.\n   */\n  onChange(active: boolean): void;\n\n  /**\n   * This will be fired whenever the {@link disabled} state is `true` which can\n   * be useful for clearing pending timers or resetting state.\n   *\n   * Since this is passed to a `useEffect` as a dependency, you might have to\n   * wrap this in a `useCallback` if unexpected re-rendering or errors occurs.\n   *\n   * @defaultValue `() => {}`\n   */\n  onDisabledCleanup?(): void;\n}\n\n/**\n * @example\n * ```ts\n * import { usePageInactive } from \"@react-md/core\";\n * import { useCallback, useEffect, useRef, useState } from \"react\";\n *\n * function Example(): null {\n *   const [visible, setVisible] = useState(false);\n *   const timeout = useRef<number | undefined>();\n *   const startTimeout = useCallback(() => {\n *     timeout.current = window.setTimeout(() => {\n *       setVisible(false);\n *     }, 10000);\n *   }, []);\n *\n *   usePageInactive({\n *     onChange(active) {\n *       if (!active) {\n *         window.clearTimeout(timeout.current);\n *         setVisible(false);\n *       } else {\n *         startTimeout();\n *       }\n *     }\n *   });\n *\n *   // pretend implementation\n *   return null;\n * }\n * ```\n * @since 6.0.0\n */\nexport function usePageInactive(options: PageInactiveOptions): void {\n  const {\n    type = \"focus\",\n    disabled,\n    onChange,\n    onDisabledCleanup = noop,\n  } = options;\n  useEffect(() => {\n    if (disabled) {\n      onDisabledCleanup();\n      return;\n    }\n\n    const callback = (event: Event): void => {\n      let active = document.visibilityState === \"visible\";\n      if (event.type === \"blur\") {\n        active = false;\n      } else if (event.type === \"focus\") {\n        active = true;\n      }\n\n      onChange(active);\n    };\n\n    document.addEventListener(\"visibilitychange\", callback);\n    if (type === \"focus\") {\n      window.addEventListener(\"blur\", callback);\n      window.addEventListener(\"focus\", callback);\n    }\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", callback);\n      window.removeEventListener(\"blur\", callback);\n      window.removeEventListener(\"focus\", callback);\n    };\n  }, [disabled, onChange, onDisabledCleanup, type]);\n}\n"],"names":["useEffect","noop","usePageInactive","options","type","disabled","onChange","onDisabledCleanup","callback","event","active","document","visibilityState","addEventListener","window","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC,MAAMC,OAAO;AACX,aAAa;AACf;AA+CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,gBAAgBC,OAA4B;IAC1D,MAAM,EACJC,OAAO,OAAO,EACdC,QAAQ,EACRC,QAAQ,EACRC,oBAAoBN,IAAI,EACzB,GAAGE;IACJH,UAAU;QACR,IAAIK,UAAU;YACZE;YACA;QACF;QAEA,MAAMC,WAAW,CAACC;YAChB,IAAIC,SAASC,SAASC,eAAe,KAAK;YAC1C,IAAIH,MAAML,IAAI,KAAK,QAAQ;gBACzBM,SAAS;YACX,OAAO,IAAID,MAAML,IAAI,KAAK,SAAS;gBACjCM,SAAS;YACX;YAEAJ,SAASI;QACX;QAEAC,SAASE,gBAAgB,CAAC,oBAAoBL;QAC9C,IAAIJ,SAAS,SAAS;YACpBU,OAAOD,gBAAgB,CAAC,QAAQL;YAChCM,OAAOD,gBAAgB,CAAC,SAASL;QACnC;QAEA,OAAO;YACLG,SAASI,mBAAmB,CAAC,oBAAoBP;YACjDM,OAAOC,mBAAmB,CAAC,QAAQP;YACnCM,OAAOC,mBAAmB,CAAC,SAASP;QACtC;IACF,GAAG;QAACH;QAAUC;QAAUC;QAAmBH;KAAK;AAClD"}

package/dist/useResizeListener.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0  Updated the API
+ * @since 6.0.0  Updated the API
  */
 export interface ResizeListenerOptions extends AddEventListenerOptions {
     /**
@@ -26,8 +26,7 @@ export interface ResizeListenerOptions extends AddEventListenerOptions {
  * observe specific elements resizing, check out the {@link useResizeObserver}
  * hook instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useResizeListener } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -57,7 +56,7 @@ export interface ResizeListenerOptions extends AddEventListenerOptions {
  * }
  * ```
  *
- * @remarks \@since 6.0.0  Updated the API to match the `useResizeObserver` and
+ * @since 6.0.0  Updated the API to match the `useResizeObserver` and
  * `useIntersectionObserver` hooks by having an `onUpdate` callback and include
  * the `AddEventListenerOptions` as part of the hook options.
  */

package/dist/useResizeListener.js

@@ -6,8 +6,7 @@ import { delegateEvent } from "./delegateEvent.js";
  * observe specific elements resizing, check out the {@link useResizeObserver}
  * hook instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useResizeListener } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -37,7 +36,7 @@ import { delegateEvent } from "./delegateEvent.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0  Updated the API to match the `useResizeObserver` and
+ * @since 6.0.0  Updated the API to match the `useResizeObserver` and
  * `useIntersectionObserver` hooks by having an `onUpdate` callback and include
  * the `AddEventListenerOptions` as part of the hook options.
  */ export function useResizeListener(options) {

package/dist/useResizeListener.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useResizeListener.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { delegateEvent } from \"./delegateEvent.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { useResizeObserver } from \"./useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0  Updated the API\n */\nexport interface ResizeListenerOptions extends AddEventListenerOptions {\n  /**\n   * Set this to `false` to disable throttling with\n   * `window.requestAnimationFrame`.\n   *\n   * @defaultValue `true`\n   */\n  throttle?: boolean;\n\n  /**\n   * Set this to `true` to disable attaching the resize event handler.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This function will be called whenever the resize event is fired on the\n   * `window`. This should be wrapped in `useCallback`.\n   */\n  onUpdate(event: Event): void;\n}\n\n/**\n * This hook can be used to listen to the entire window resizing. If you need to\n * observe specific elements resizing, check out the {@link useResizeObserver}\n * hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useResizeListener } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [size, setSize] = useState({\n *     height: window.innerHeight,\n *     width: window.innerWidth,\n *   }):\n *\n *   useResizeListener({\n *     onUpdate(event) {\n *       setSize({\n *         height: window.innerHeight,\n *         width: window.innerWidth,\n *       });\n *     },\n *   });\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0  Updated the API to match the `useResizeObserver` and\n * `useIntersectionObserver` hooks by having an `onUpdate` callback and include\n * the `AddEventListenerOptions` as part of the hook options.\n */\nexport function useResizeListener(options: ResizeListenerOptions): void {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle = true,\n    disabled = false,\n    onUpdate,\n  } = options;\n\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const eventHandler = delegateEvent(\"resize\", window, throttle, {\n      once,\n      signal,\n      capture,\n      passive,\n    });\n    eventHandler.add(onUpdate);\n\n    window.dispatchEvent(new Event(\"resize\"));\n    return () => {\n      eventHandler.remove(onUpdate);\n    };\n  }, [capture, disabled, onUpdate, once, passive, signal, throttle]);\n}\n"],"names":["useEffect","delegateEvent","useResizeListener","options","once","signal","capture","passive","throttle","disabled","onUpdate","eventHandler","window","add","dispatchEvent","Event","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA8BnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASC,kBAAkBC,OAA8B;IAC9D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChBC,QAAQ,EACT,GAAGP;IAEJH,UAAU;QACR,IAAIS,UAAU;YACZ;QACF;QAEA,MAAME,eAAeV,cAAc,UAAUW,QAAQJ,UAAU;YAC7DJ;YACAC;YACAC;YACAC;QACF;QACAI,aAAaE,GAAG,CAACH;QAEjBE,OAAOE,aAAa,CAAC,IAAIC,MAAM;QAC/B,OAAO;YACLJ,aAAaK,MAAM,CAACN;QACtB;IACF,GAAG;QAACJ;QAASG;QAAUC;QAAUN;QAAMG;QAASF;QAAQG;KAAS;AACnE"}
+{"version":3,"sources":["../src/useResizeListener.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { delegateEvent } from \"./delegateEvent.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { useResizeObserver } from \"./useResizeObserver.js\";\n\n/**\n * @since 6.0.0  Updated the API\n */\nexport interface ResizeListenerOptions extends AddEventListenerOptions {\n  /**\n   * Set this to `false` to disable throttling with\n   * `window.requestAnimationFrame`.\n   *\n   * @defaultValue `true`\n   */\n  throttle?: boolean;\n\n  /**\n   * Set this to `true` to disable attaching the resize event handler.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This function will be called whenever the resize event is fired on the\n   * `window`. This should be wrapped in `useCallback`.\n   */\n  onUpdate(event: Event): void;\n}\n\n/**\n * This hook can be used to listen to the entire window resizing. If you need to\n * observe specific elements resizing, check out the {@link useResizeObserver}\n * hook instead.\n *\n * @example Simple Example\n * ```tsx\n * import { useResizeListener } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [size, setSize] = useState({\n *     height: window.innerHeight,\n *     width: window.innerWidth,\n *   }):\n *\n *   useResizeListener({\n *     onUpdate(event) {\n *       setSize({\n *         height: window.innerHeight,\n *         width: window.innerWidth,\n *       });\n *     },\n *   });\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0  Updated the API to match the `useResizeObserver` and\n * `useIntersectionObserver` hooks by having an `onUpdate` callback and include\n * the `AddEventListenerOptions` as part of the hook options.\n */\nexport function useResizeListener(options: ResizeListenerOptions): void {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle = true,\n    disabled = false,\n    onUpdate,\n  } = options;\n\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const eventHandler = delegateEvent(\"resize\", window, throttle, {\n      once,\n      signal,\n      capture,\n      passive,\n    });\n    eventHandler.add(onUpdate);\n\n    window.dispatchEvent(new Event(\"resize\"));\n    return () => {\n      eventHandler.remove(onUpdate);\n    };\n  }, [capture, disabled, onUpdate, once, passive, signal, throttle]);\n}\n"],"names":["useEffect","delegateEvent","useResizeListener","options","once","signal","capture","passive","throttle","disabled","onUpdate","eventHandler","window","add","dispatchEvent","Event","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA8BnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,kBAAkBC,OAA8B;IAC9D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChBC,QAAQ,EACT,GAAGP;IAEJH,UAAU;QACR,IAAIS,UAAU;YACZ;QACF;QAEA,MAAME,eAAeV,cAAc,UAAUW,QAAQJ,UAAU;YAC7DJ;YACAC;YACAC;YACAC;QACF;QACAI,aAAaE,GAAG,CAACH;QAEjBE,OAAOE,aAAa,CAAC,IAAIC,MAAM;QAC/B,OAAO;YACLJ,aAAaK,MAAM,CAACN;QACtB;IACF,GAAG;QAACJ;QAASG;QAAUC;QAAUN;QAAMG;QAASF;QAAQG;KAAS;AACnE"}

package/dist/useResizeObserver.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type RefCallback } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;
 /** @internal */
@@ -28,7 +28,7 @@ interface SubscribeOptions {
 }
 /**
  * @internal
- * @remarks \@since 6.0.0 This was added to help with testing. The
+ * @since 6.0.0 This was added to help with testing. The
  * `subscriptions` and `sharedObserver` used to be module-level variables but
  * moving to a class makes it easier to mock. Checkout the
  * `src/tests-utils/ResizeObserver.ts`
@@ -52,13 +52,12 @@ export declare class ResizeObserverManager {
 }
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const resizeObserverManager: ResizeObserverManager;
 /**
- * @remarks
- * \@since 2.3.0
- * \@since 6.0.0 Renamed from `UseResizeObserverOptions` and added
+ * @since 2.3.0
+ * @since 6.0.0 Renamed from `UseResizeObserverOptions` and added
  * `onUpdate`/`disabled` options.
  */
 export interface ResizeObserverHookOptions<E extends HTMLElement> {
@@ -76,7 +75,7 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
      */
     onUpdate: ResizeObserverEntryCallback;
     /**
-     * Set this to `true` to prevent observing the element's size changes. THis is
+     * Set this to `true` to prevent observing the element's size changes. This is
      * equivalent to not attaching the returned ref to any element.
      *
      * @defaultValue `false`
@@ -102,9 +101,8 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
  * For most cases you can use the {@link useElementSize} instead, but this hook
  * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
- * @remarks
- * \@since 2.3.0
- * \@since 6.0.0 The API was updated to match the `useIntersectionObserver`
+ * @since 2.3.0
+ * @since 6.0.0 The API was updated to match the `useIntersectionObserver`
  * implementation -- accepts only a single object parameter and returns a
  * {@link RefCallback} instead of `[nodeRef, refCallback]`
  */