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

package/dist/useElementSize.d.ts

@@ -2,24 +2,45 @@ import { type RefCallback } from "react";
 import { type ElementSize, type UseStateInitializer } from "./types.js";
 import { type ResizeObserverHookOptions } from "./useResizeObserver.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ElementSizeOptions<E extends HTMLElement> extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
     /** @defaultValue `{ height: 0, width: 0 }` */
     defaultValue?: UseStateInitializer<ElementSize>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ElementSizeImplementation<E extends HTMLElement> extends ElementSize {
     elementRef: RefCallback<E>;
+    /**
+     * This will be `true` once the resize observer's callback is triggered at
+     * least once.
+     *
+     * This was added so that generating custom properties that have a reasonable
+     * default value set in css don't cause major layout shifts when a default
+     * value cannot be provided.
+     *
+     * @example
+     * ```tsx
+     * const { height, width, observedOnce }` = useElementSize();
+     * useCSSVariables(useMemo(() => {
+     *   if (!observedOnce) {
+     *     return []
+     *   }
+     *
+     *   // something that uses the element's height, width, or both
+     *   return [{ var: "--something", value: height / width * 0.5 }];
+     * }, [height, width, observedOnce]))
+     * ```
+     */
+    observedOnce: boolean;
 }
 /**
  * A small wrapper around the {@link useResizeObserver} hook to calculate the
  * element's size.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useElementSize } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -35,6 +56,6 @@ export interface ElementSizeImplementation<E extends HTMLElement> extends Elemen
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useElementSize<E extends HTMLElement>(options?: ElementSizeOptions<E>): ElementSizeImplementation<E>;

package/dist/useElementSize.js

@@ -1,12 +1,11 @@
 "use client";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useResizeObserver } from "./useResizeObserver.js";
 /**
  * A small wrapper around the {@link useResizeObserver} hook to calculate the
  * element's size.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useElementSize } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -22,9 +21,10 @@ import { useResizeObserver } from "./useResizeObserver.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useElementSize(options = {}) {
     const { defaultValue } = options;
+    const observedOnce = useRef(false);
     const [size, setSize] = useState(()=>{
         if (typeof defaultValue === "function") {
             return defaultValue();
@@ -37,6 +37,7 @@ import { useResizeObserver } from "./useResizeObserver.js";
     const elementRef = useResizeObserver({
         ...options,
         onUpdate: useCallback((entry)=>{
+            observedOnce.current = true;
             const size = entry.borderBoxSize[0];
             setSize({
                 height: size.blockSize,
@@ -46,7 +47,8 @@ import { useResizeObserver } from "./useResizeObserver.js";
     });
     return {
         ...size,
-        elementRef
+        elementRef,
+        observedOnce: observedOnce.current
     };
 }
 

package/dist/useElementSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState, type RefCallback } from \"react\";\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  useResizeObserver,\n  type ResizeObserverHookOptions,\n} from \"./useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSizeOptions<E extends HTMLElement>\n  extends Omit<ResizeObserverHookOptions<E>, \"onUpdate\"> {\n  /** @defaultValue `{ height: 0, width: 0 }` */\n  defaultValue?: UseStateInitializer<ElementSize>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSizeImplementation<E extends HTMLElement>\n  extends ElementSize {\n  elementRef: RefCallback<E>;\n}\n\n/**\n * A small wrapper around the {@link useResizeObserver} hook to calculate the\n * element's size.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useElementSize } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width, elementRef } = useElementSize();\n *\n *   return (\n *     <div ref={elementRef}>\n *       {`height: ${height}, width: ${width}`}\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useElementSize<E extends HTMLElement>(\n  options: ElementSizeOptions<E> = {}\n): ElementSizeImplementation<E> {\n  const { defaultValue } = options;\n\n  const [size, setSize] = useState<ElementSize>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return (\n      defaultValue ?? {\n        height: 0,\n        width: 0,\n      }\n    );\n  });\n\n  const elementRef = useResizeObserver({\n    ...options,\n    onUpdate: useCallback((entry) => {\n      const size = entry.borderBoxSize[0];\n\n      setSize({\n        height: size.blockSize,\n        width: size.inlineSize,\n      });\n    }, []),\n  });\n\n  return {\n    ...size,\n    elementRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","useElementSize","options","defaultValue","size","setSize","height","width","elementRef","onUpdate","entry","borderBoxSize","blockSize","inlineSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAA0B,QAAQ;AAEhE,SACEC,iBAAiB,QAEZ,yBAAyB;AAmBhC;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,eACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAM,CAACE,MAAMC,QAAQ,GAAGN,SAAsB;QAC5C,IAAI,OAAOI,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OACEA,gBAAgB;YACdG,QAAQ;YACRC,OAAO;QACT;IAEJ;IAEA,MAAMC,aAAaR,kBAAkB;QACnC,GAAGE,OAAO;QACVO,UAAUX,YAAY,CAACY;YACrB,MAAMN,OAAOM,MAAMC,aAAa,CAAC,EAAE;YAEnCN,QAAQ;gBACNC,QAAQF,KAAKQ,SAAS;gBACtBL,OAAOH,KAAKS,UAAU;YACxB;QACF,GAAG,EAAE;IACP;IAEA,OAAO;QACL,GAAGT,IAAI;QACPI;IACF;AACF"}
+{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState, type RefCallback } from \"react\";\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  useResizeObserver,\n  type ResizeObserverHookOptions,\n} from \"./useResizeObserver.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeOptions<E extends HTMLElement>\n  extends Omit<ResizeObserverHookOptions<E>, \"onUpdate\"> {\n  /** @defaultValue `{ height: 0, width: 0 }` */\n  defaultValue?: UseStateInitializer<ElementSize>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSizeImplementation<E extends HTMLElement>\n  extends ElementSize {\n  elementRef: RefCallback<E>;\n\n  /**\n   * This will be `true` once the resize observer's callback is triggered at\n   * least once.\n   *\n   * This was added so that generating custom properties that have a reasonable\n   * default value set in css don't cause major layout shifts when a default\n   * value cannot be provided.\n   *\n   * @example\n   * ```tsx\n   * const { height, width, observedOnce }` = useElementSize();\n   * useCSSVariables(useMemo(() => {\n   *   if (!observedOnce) {\n   *     return []\n   *   }\n   *\n   *   // something that uses the element's height, width, or both\n   *   return [{ var: \"--something\", value: height / width * 0.5 }];\n   * }, [height, width, observedOnce]))\n   * ```\n   */\n  observedOnce: boolean;\n}\n\n/**\n * A small wrapper around the {@link useResizeObserver} hook to calculate the\n * element's size.\n *\n * @example Simple Example\n * ```tsx\n * import { useElementSize } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width, elementRef } = useElementSize();\n *\n *   return (\n *     <div ref={elementRef}>\n *       {`height: ${height}, width: ${width}`}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useElementSize<E extends HTMLElement>(\n  options: ElementSizeOptions<E> = {}\n): ElementSizeImplementation<E> {\n  const { defaultValue } = options;\n\n  const observedOnce = useRef(false);\n  const [size, setSize] = useState<ElementSize>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return (\n      defaultValue ?? {\n        height: 0,\n        width: 0,\n      }\n    );\n  });\n\n  const elementRef = useResizeObserver({\n    ...options,\n    onUpdate: useCallback((entry) => {\n      observedOnce.current = true;\n      const size = entry.borderBoxSize[0];\n\n      setSize({\n        height: size.blockSize,\n        width: size.inlineSize,\n      });\n    }, []),\n  });\n\n  return {\n    ...size,\n    elementRef,\n    observedOnce: observedOnce.current,\n  };\n}\n"],"names":["useCallback","useRef","useState","useResizeObserver","useElementSize","options","defaultValue","observedOnce","size","setSize","height","width","elementRef","onUpdate","entry","current","borderBoxSize","blockSize","inlineSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAA0B,QAAQ;AAExE,SACEC,iBAAiB,QAEZ,yBAAyB;AA0ChC;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,eACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAME,eAAeN,OAAO;IAC5B,MAAM,CAACO,MAAMC,QAAQ,GAAGP,SAAsB;QAC5C,IAAI,OAAOI,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OACEA,gBAAgB;YACdI,QAAQ;YACRC,OAAO;QACT;IAEJ;IAEA,MAAMC,aAAaT,kBAAkB;QACnC,GAAGE,OAAO;QACVQ,UAAUb,YAAY,CAACc;YACrBP,aAAaQ,OAAO,GAAG;YACvB,MAAMP,OAAOM,MAAME,aAAa,CAAC,EAAE;YAEnCP,QAAQ;gBACNC,QAAQF,KAAKS,SAAS;gBACtBN,OAAOH,KAAKU,UAAU;YACxB;QACF,GAAG,EAAE;IACP;IAEA,OAAO;QACL,GAAGV,IAAI;QACPI;QACAL,cAAcA,aAAaQ,OAAO;IACpC;AACF"}

package/dist/useEnsuredId.d.ts

@@ -2,8 +2,7 @@
  * This hook is used to ensure that an `id` has been provided to a component
  * either through props or use the `useId` hook.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { HTMLAttributes, ReactElement } from "react";
  * import { useEnsuredId } from "@react-md/core";
@@ -15,7 +14,7 @@
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export declare function useEnsuredId(propId: string | undefined, prefix: string): string;

package/dist/useEnsuredId.js

@@ -3,8 +3,7 @@ import { useId } from "react";
  * This hook is used to ensure that an `id` has been provided to a component
  * either through props or use the `useId` hook.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { HTMLAttributes, ReactElement } from "react";
  * import { useEnsuredId } from "@react-md/core";
@@ -16,7 +15,7 @@ import { useId } from "react";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */ export function useEnsuredId(propId, prefix) {
     const id = useId();

package/dist/useEnsuredId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,GAAG,CAAC;AACpC"}
+{"version":3,"sources":["../src/useEnsuredId.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/**\n * This hook is used to ensure that an `id` has been provided to a component\n * either through props or use the `useId` hook.\n *\n * @example Simple Example\n * ```tsx\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import { useEnsuredId } from \"@react-md/core\";\n *\n * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {\n *   const id = useEnsuredId(props.id, \"component-name\");\n *\n *   return <div {...props} id={id} />;\n * }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function useEnsuredId(\n  propId: string | undefined,\n  prefix: string\n): string {\n  const id = useId();\n\n  return propId ?? `${prefix}-${id}`;\n}\n"],"names":["useId","useEnsuredId","propId","prefix","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,GAAG,CAAC;AACpC"}

package/dist/useEnsuredRef.d.ts

@@ -1,6 +1,6 @@
 import type { MutableRefObject, Ref, RefCallback } from "react";
 /**
- * @remarks \@since 2.3.0
+ * @since 2.3.0
  * @internal
  */
 export type EnsuredRefs<E extends HTMLElement> = readonly [
@@ -14,8 +14,7 @@ export type EnsuredRefs<E extends HTMLElement> = readonly [
  * followed by a ref callback function that should be passed to the DOM node
  * that will ensure that both the optional `propRef` and hook ref are updated.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { HTMLAttributes, forwardRef } from "react";
  * import { useEnsuredRef } from "@react-md/core";
@@ -32,7 +31,7 @@ export type EnsuredRefs<E extends HTMLElement> = readonly [
  * });
  * ```
  *
- * @remarks \@since 2.3.0
+ * @since 2.3.0
  * @internal
  */
 export declare function useEnsuredRef<E extends HTMLElement>(propRef?: Ref<E | null>): EnsuredRefs<E>;

package/dist/useEnsuredRef.js

@@ -8,8 +8,7 @@ import { applyRef } from "./utils/applyRef.js";
  * followed by a ref callback function that should be passed to the DOM node
  * that will ensure that both the optional `propRef` and hook ref are updated.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { HTMLAttributes, forwardRef } from "react";
  * import { useEnsuredRef } from "@react-md/core";
@@ -26,7 +25,7 @@ import { applyRef } from "./utils/applyRef.js";
  * });
  * ```
  *
- * @remarks \@since 2.3.0
+ * @since 2.3.0
  * @internal
  */ export function useEnsuredRef(propRef) {
     const ref = useRef(null);

package/dist/useEnsuredRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredRef.ts"],"sourcesContent":["\"use client\";\nimport type { MutableRefObject, Ref, RefCallback } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { applyRef } from \"./utils/applyRef.js\";\n\n/**\n * @remarks \\@since 2.3.0\n * @internal\n */\nexport type EnsuredRefs<E extends HTMLElement> = readonly [\n  MutableRefObject<E | null>,\n  RefCallback<E | null>,\n];\n\n/**\n * This is mostly an internal hook that allows for an optional ref (normally\n * from props or hook options) to be merged with a hook's required `ref`. This\n * will return a MutableRefObject used for DOM manipulation in a custom hook\n * followed by a ref callback function that should be passed to the DOM node\n * that will ensure that both the optional `propRef` and hook ref are updated.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { useEnsuredRef } from \"@react-md/core\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * export const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const [nodeRef, refHandler] = useEnsuredRef(ref);\n *   useEffect(() => {\n *     // do something with nodeRef.current\n *   }, [nodeRef])\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @remarks \\@since 2.3.0\n * @internal\n */\nexport function useEnsuredRef<E extends HTMLElement>(\n  propRef?: Ref<E | null>\n): EnsuredRefs<E> {\n  const ref = useRef<E | null>(null);\n  const refHandler = useCallback(\n    (instance: E | null) => {\n      applyRef(instance, propRef);\n      ref.current = instance;\n    },\n    [propRef]\n  );\n\n  return [ref, refHandler];\n}\n"],"names":["useCallback","useRef","applyRef","useEnsuredRef","propRef","ref","refHandler","instance","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,cACdC,OAAuB;IAEvB,MAAMC,MAAMJ,OAAiB;IAC7B,MAAMK,aAAaN,YACjB,CAACO;QACCL,SAASK,UAAUH;QACnBC,IAAIG,OAAO,GAAGD;IAChB,GACA;QAACH;KAAQ;IAGX,OAAO;QAACC;QAAKC;KAAW;AAC1B"}
+{"version":3,"sources":["../src/useEnsuredRef.ts"],"sourcesContent":["\"use client\";\nimport type { MutableRefObject, Ref, RefCallback } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { applyRef } from \"./utils/applyRef.js\";\n\n/**\n * @since 2.3.0\n * @internal\n */\nexport type EnsuredRefs<E extends HTMLElement> = readonly [\n  MutableRefObject<E | null>,\n  RefCallback<E | null>,\n];\n\n/**\n * This is mostly an internal hook that allows for an optional ref (normally\n * from props or hook options) to be merged with a hook's required `ref`. This\n * will return a MutableRefObject used for DOM manipulation in a custom hook\n * followed by a ref callback function that should be passed to the DOM node\n * that will ensure that both the optional `propRef` and hook ref are updated.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { useEnsuredRef } from \"@react-md/core\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * export const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const [nodeRef, refHandler] = useEnsuredRef(ref);\n *   useEffect(() => {\n *     // do something with nodeRef.current\n *   }, [nodeRef])\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @since 2.3.0\n * @internal\n */\nexport function useEnsuredRef<E extends HTMLElement>(\n  propRef?: Ref<E | null>\n): EnsuredRefs<E> {\n  const ref = useRef<E | null>(null);\n  const refHandler = useCallback(\n    (instance: E | null) => {\n      applyRef(instance, propRef);\n      ref.current = instance;\n    },\n    [propRef]\n  );\n\n  return [ref, refHandler];\n}\n"],"names":["useCallback","useRef","applyRef","useEnsuredRef","propRef","ref","refHandler","instance","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,cACdC,OAAuB;IAEvB,MAAMC,MAAMJ,OAAiB;IAC7B,MAAMK,aAAaN,YACjB,CAACO;QACCL,SAASK,UAAUH;QACnBC,IAAIG,OAAO,GAAGD;IAChB,GACA;QAACH;KAAQ;IAGX,OAAO;QAACC;QAAKC;KAAW;AAC1B"}

package/dist/useEnsuredState.d.ts

@@ -2,7 +2,7 @@ import type { Dispatch } from "react";
 import type { UseStateInitializer, UseStateSetter } from "./types.js";
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>> {
     value?: V;
@@ -14,6 +14,6 @@ export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSet
  * `setValue` or defaulting to uncontrolled behavior with local state.
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useEnsuredState<V, Setter extends Dispatch<V> | UseStateSetter<V>>(options: EnsuredStateOptions<V, Setter>): readonly [value: V, setValue: Setter];

package/dist/useEnsuredState.js

@@ -4,7 +4,7 @@
  * `setValue` or defaulting to uncontrolled behavior with local state.
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useEnsuredState(options) {
     const { value, setValue, defaultValue } = options;
     if (typeof value !== "undefined" && typeof setValue !== "undefined") {

package/dist/useEnsuredState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}
+{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}

package/dist/useHtmlClassName.d.ts

@@ -1,4 +1,4 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useHtmlClassName(className: string): void;

package/dist/useHtmlClassName.js

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useHtmlClassName(className) {
     useEffect(()=>{
         if (!className) {

package/dist/useHtmlClassName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useHtmlClassName.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useHtmlClassName(className: string): void {\n  useEffect(() => {\n    if (!className) {\n      return;\n    }\n\n    const html = document.documentElement;\n    html.classList.add(className);\n    return () => {\n      html.classList.remove(className);\n    };\n  }, [className]);\n}\n"],"names":["useEffect","useHtmlClassName","className","html","document","documentElement","classList","add","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;CAEC,GACD,OAAO,SAASC,iBAAiBC,SAAiB;IAChDF,UAAU;QACR,IAAI,CAACE,WAAW;YACd;QACF;QAEA,MAAMC,OAAOC,SAASC,eAAe;QACrCF,KAAKG,SAAS,CAACC,GAAG,CAACL;QACnB,OAAO;YACLC,KAAKG,SAAS,CAACE,MAAM,CAACN;QACxB;IACF,GAAG;QAACA;KAAU;AAChB"}
+{"version":3,"sources":["../src/useHtmlClassName.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport function useHtmlClassName(className: string): void {\n  useEffect(() => {\n    if (!className) {\n      return;\n    }\n\n    const html = document.documentElement;\n    html.classList.add(className);\n    return () => {\n      html.classList.remove(className);\n    };\n  }, [className]);\n}\n"],"names":["useEffect","useHtmlClassName","className","html","document","documentElement","classList","add","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;CAEC,GACD,OAAO,SAASC,iBAAiBC,SAAiB;IAChDF,UAAU;QACR,IAAI,CAACE,WAAW;YACd;QACF;QAEA,MAAMC,OAAOC,SAASC,eAAe;QACrCF,KAAKG,SAAS,CAACC,GAAG,CAACL;QACnB,OAAO;YACLC,KAAKG,SAAS,CAACE,MAAM,CAACN;QACxB;IACF,GAAG;QAACA;KAAU;AAChB"}

package/dist/useIntersectionObserver.d.ts

@@ -1,13 +1,13 @@
 import type { Ref, RefCallback, RefObject } from "react";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type IntersectionObserverRoot = IntersectionObserverInit["root"];
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type IntersectionObserverThreshold = IntersectionObserverInit["threshold"];
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type IntersectionObserverRootMargin = IntersectionObserverInit["rootMargin"];
 /**
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BaseIntersectionObserverHookOptions {
     /**
@@ -27,8 +27,7 @@ export interface BaseIntersectionObserverHookOptions {
      * the component or wrapped in a `useMemo` to prevent the IntersectionObserver
      * from being re-created each render.**
      *
-     * @example
-     * Moving Out of Render
+     * @example Moving Out of Render
      * ```tsx
      * const threshold = [0, 0.25, 0.5, 0.75, 1];
      *
@@ -42,8 +41,7 @@ export interface BaseIntersectionObserverHookOptions {
      * }
      * ```
      *
-     * @example
-     * Wrapping in useMemo
+     * @example Wrapping in useMemo
      * ```tsx
      * interface ExampleProps {
      *   min: number;
@@ -73,8 +71,7 @@ export interface BaseIntersectionObserverHookOptions {
      * generally useful if you need access to the DOM or do some expensive
      * computation.
      *
-     * @example
-     * Simple Example
+     * @example Simple Example
      * ```tsx
      * const targetRef = useIntersectionObserver({
      *   getThreshold: useCallback(() => {
@@ -97,8 +94,7 @@ export interface BaseIntersectionObserverHookOptions {
      * This can be used to dynamically generate the {@link rootMargin} which is
      * generally useful if you need access to the DOM.
      *
-     * @example
-     * Simple Example
+     * @example Simple Example
      * ```tsx
      * const nodeRef = useRef<HTMLElement>();
      * const targetRef = useIntersectionObserver({
@@ -117,7 +113,7 @@ export interface BaseIntersectionObserverHookOptions {
 }
 /**
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface IntersectionObserverHookOptions<E extends HTMLElement> extends BaseIntersectionObserverHookOptions {
     /**
@@ -128,8 +124,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
      * **Must be wrapped in `useCallback` to prevent re-creating the
      * IntersectionObserver each render.**
      *
-     * @example
-     * Simple Example
+     * @example Simple Example
      * ```tsx
      * const threshold = [0, 0.25, 0.5, 0.75, 1];
      *
@@ -154,8 +149,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
      * If this is defined, the {@link ref} will be ignored along with the returned
      * ref.
      *
-     * @example
-     * Watching Queried Elements
+     * @example Watching Queried Elements
      * ```tsx
      * function Example(): ReactElement {
      *   useIntersectionObserver({
@@ -178,8 +172,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
     getTargets?(): readonly Element[];
 }
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example
  *
@@ -235,7 +228,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  */
 export declare function useIntersectionObserver<E extends HTMLElement>(options: IntersectionObserverHookOptions<E>): RefCallback<E>;

package/dist/useIntersectionObserver.js

@@ -2,8 +2,7 @@
 import { useEffect } from "react";
 import { useEnsuredRef } from "./useEnsuredRef.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example
  *
@@ -59,7 +58,7 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  */ export function useIntersectionObserver(options) {
     const { ref, root, disabled = false, onUpdate, threshold, rootMargin, getTargets, getThreshold, getRootMargin } = options;

package/dist/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIntersectionObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback, RefObject } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type IntersectionObserverRoot = IntersectionObserverInit[\"root\"];\n/** @remarks \\@since 6.0.0 */\nexport type IntersectionObserverThreshold =\n  IntersectionObserverInit[\"threshold\"];\n/** @remarks \\@since 6.0.0 */\nexport type IntersectionObserverRootMargin =\n  IntersectionObserverInit[\"rootMargin\"];\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @remarks \\@since 6.0.0\n */\nexport interface BaseIntersectionObserverHookOptions {\n  /**\n   * This is the same as the normal `root` for an IntersectionObserverInit, but\n   * also supports refs.\n   */\n  root?: RefObject<IntersectionObserverRoot> | IntersectionObserverRoot;\n\n  /**\n   * Set this to `true` if the intersection observer behavior should be\n   * disabled.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * **When using a list of thresholds, they must either be defined outside of\n   * the component or wrapped in a `useMemo` to prevent the IntersectionObserver\n   * from being re-created each render.**\n   *\n   * @example\n   * Moving Out of Render\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example() {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   })\n   * }\n   * ```\n   *\n   * @example\n   * Wrapping in useMemo\n   * ```tsx\n   * interface ExampleProps {\n   *   min: number;\n   *   max: number;\n   * }\n   *\n   * function Example({ min, max }: ExampleProps): ReactElement {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold: useMemo(() => [min, max], [min, max]),\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   });\n   * }\n   * ```\n   *\n   * @see {@link getThreshold}\n   */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link getRootMargin} */\n  rootMargin?: IntersectionObserverRootMargin;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link threshold} which is\n   * generally useful if you need access to the DOM or do some expensive\n   * computation.\n   *\n   * @example\n   * Simple Example\n   * ```tsx\n   * const targetRef = useIntersectionObserver({\n   *   getThreshold: useCallback(() => {\n   *     // pretend some expensive computation\n   *     return [0, 0.25, 0.5, 0.75, 1];\n   *   }, []),\n   *   OnUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * If this option is provided, {@link threshold}'s value will be ignored.\n   */\n  getThreshold?(): IntersectionObserverThreshold;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link rootMargin} which is\n   * generally useful if you need access to the DOM.\n   *\n   * @example\n   * Simple Example\n   * ```tsx\n   * const nodeRef = useRef<HTMLElement>();\n   * const targetRef = useIntersectionObserver({\n   *   getRootMargin: useCallback(() => {\n   *     return `-${nodeRef.current.offsetHeight - 1}px 0px 0px`;\n   *   }, []),\n   *   onUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * Note: If this option is provided, {@link rootMargin} will be ignored.\n   */\n  getRootMargin?(): IntersectionObserverRootMargin;\n}\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @remarks \\@since 6.0.0\n */\nexport interface IntersectionObserverHookOptions<E extends HTMLElement>\n  extends BaseIntersectionObserverHookOptions {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * @example\n   * Simple Example\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example(): ReactElement {\n   *   const [intersecting, setIntersecting] = useState(false);\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) {\n   *       setIntersecting(entry.isIntersecting);\n   *     }, []),\n   *   });\n   *\n   *   // implementation\n   * }\n   * ```\n   */\n  onUpdate(entries: readonly IntersectionObserverEntry[]): void;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * If this is defined, the {@link ref} will be ignored along with the returned\n   * ref.\n   *\n   * @example\n   * Watching Queried Elements\n   * ```tsx\n   * function Example(): ReactElement {\n   *   useIntersectionObserver({\n   *     onUpdate: useCallback((entries) => {\n   *       entries.forEach((entry) => {\n   *         // do stuff\n   *       });\n   *\n   *       setIntersectingIds(intersecting);\n   *     }, []),\n   *     getTargets: useCallback(() => {\n   *       return document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n   *     }, []),\n   *   }),\n   *\n   *   return <div {...props} />;\n   * }\n   * ```\n   */\n  getTargets?(): readonly Element[];\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example\n *\n * import { useIntersectionObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n *\n * const numSteps = 20;\n * const thresholds = Array.from({ length: numSteps }, (_, i) => i / numSteps);\n * thresholds.push(0);\n *\n * const INCREASING = \"rgba(40, 40, 190, ratio)\";\n * const DECREASING = \"rgba(190, 40, 40, ratio)\";\n *\n * export default function Example(): ReactElement {\n *   const [{ ratio, increasing }, setState] = useState({\n *     ratio: 0.0,\n *     increasing: true,\n *   });\n *\n *   const targetRef = useIntersectionObserver({\n *     threshold: thresholds,\n *     rootMargin: \"0px\",\n *     onUpdate: useCallback(([entry]) => {\n *       const { intersectionRatio } = entry;\n *       setState((prevState) => {\n *         return {\n *           ratio: intersectionRatio,\n *           increasing: intersectionRatio > prevState.ratio,\n *         };\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <div\n *       ref={targetRef}\n *       className={styles.box}\n *       style={{\n *         backgroundColor: (increasing ? INCREASING : DECREASING).replace(\n *           \"ratio\",\n *           `${ratio}`\n *         ),\n *       }}\n *     >\n *       <div className={styles.vertical}>\n *         Welcome to <strong>The Box!</strong>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n */\nexport function useIntersectionObserver<E extends HTMLElement>(\n  options: IntersectionObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    root,\n    disabled = false,\n    onUpdate,\n    threshold,\n    rootMargin,\n    getTargets,\n    getThreshold,\n    getRootMargin,\n  } = options;\n\n  const [targetNodeRef, targetRef] = useEnsuredRef(ref);\n\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    let targets: readonly Element[] = [];\n    if (getTargets) {\n      targets = getTargets();\n    } else if (element) {\n      targets = [element];\n    }\n\n    if (disabled || !targets.length) {\n      return;\n    }\n\n    let resolvedRoot: IntersectionObserverRoot;\n    if (root && \"current\" in root) {\n      resolvedRoot = root.current;\n    } else {\n      resolvedRoot = root;\n    }\n\n    const options: IntersectionObserverInit = {\n      root: resolvedRoot,\n      threshold: (getThreshold || (() => threshold))(),\n      rootMargin: (getRootMargin || (() => rootMargin))(),\n    };\n\n    // Just like the ResizeObserver, you can see performance improvements by\n    // sharing a single intersection observer but I don't think it's worth the\n    // effort to implement here since I'd need to:\n    // - check if there is an observer with the same options\n    //   - if there is, add the callback to that existing observer\n    //   - if there isn't, create a new observer\n    // - when cleaning up, check if there are any other existing callbacks\n    //   - disconnect and remove the observer if there are none left\n    const observer = new IntersectionObserver(onUpdate, options);\n    targets.forEach((target) => {\n      observer.observe(target);\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    disabled,\n    getRootMargin,\n    getTargets,\n    getThreshold,\n    onUpdate,\n    root,\n    rootMargin,\n    targetNodeRef,\n    threshold,\n  ]);\n\n  return targetRef;\n}\n"],"names":["useEffect","useEnsuredRef","useIntersectionObserver","options","ref","root","disabled","onUpdate","threshold","rootMargin","getTargets","getThreshold","getRootMargin","targetNodeRef","targetRef","element","current","targets","length","resolvedRoot","observer","IntersectionObserver","forEach","target","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AAiMnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASC,wBACdC,OAA2C;IAE3C,MAAM,EACJC,GAAG,EACHC,IAAI,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAM,CAACU,eAAeC,UAAU,GAAGb,cAAcG;IAEjDJ,UAAU;QACR,MAAMe,UAAUF,cAAcG,OAAO;QACrC,IAAIC,UAA8B,EAAE;QACpC,IAAIP,YAAY;YACdO,UAAUP;QACZ,OAAO,IAAIK,SAAS;YAClBE,UAAU;gBAACF;aAAQ;QACrB;QAEA,IAAIT,YAAY,CAACW,QAAQC,MAAM,EAAE;YAC/B;QACF;QAEA,IAAIC;QACJ,IAAId,QAAQ,aAAaA,MAAM;YAC7Bc,eAAed,KAAKW,OAAO;QAC7B,OAAO;YACLG,eAAed;QACjB;QAEA,MAAMF,UAAoC;YACxCE,MAAMc;YACNX,WAAW,AAACG,CAAAA,gBAAiB,CAAA,IAAMH,SAAQ,CAAC;YAC5CC,YAAY,AAACG,CAAAA,iBAAkB,CAAA,IAAMH,UAAS,CAAC;QACjD;QAEA,wEAAwE;QACxE,0EAA0E;QAC1E,8CAA8C;QAC9C,wDAAwD;QACxD,8DAA8D;QAC9D,4CAA4C;QAC5C,sEAAsE;QACtE,gEAAgE;QAChE,MAAMW,WAAW,IAAIC,qBAAqBd,UAAUJ;QACpDc,QAAQK,OAAO,CAAC,CAACC;YACfH,SAASI,OAAO,CAACD;QACnB;QAEA,OAAO;YACLH,SAASK,UAAU;QACrB;IACF,GAAG;QACDnB;QACAM;QACAF;QACAC;QACAJ;QACAF;QACAI;QACAI;QACAL;KACD;IAED,OAAOM;AACT"}
+{"version":3,"sources":["../src/useIntersectionObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback, RefObject } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/** @since 6.0.0 */\nexport type IntersectionObserverRoot = IntersectionObserverInit[\"root\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverThreshold =\n  IntersectionObserverInit[\"threshold\"];\n/** @since 6.0.0 */\nexport type IntersectionObserverRootMargin =\n  IntersectionObserverInit[\"rootMargin\"];\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface BaseIntersectionObserverHookOptions {\n  /**\n   * This is the same as the normal `root` for an IntersectionObserverInit, but\n   * also supports refs.\n   */\n  root?: RefObject<IntersectionObserverRoot> | IntersectionObserverRoot;\n\n  /**\n   * Set this to `true` if the intersection observer behavior should be\n   * disabled.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * **When using a list of thresholds, they must either be defined outside of\n   * the component or wrapped in a `useMemo` to prevent the IntersectionObserver\n   * from being re-created each render.**\n   *\n   * @example Moving Out of Render\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example() {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   })\n   * }\n   * ```\n   *\n   * @example Wrapping in useMemo\n   * ```tsx\n   * interface ExampleProps {\n   *   min: number;\n   *   max: number;\n   * }\n   *\n   * function Example({ min, max }: ExampleProps): ReactElement {\n   *   const targetRef = useIntersectionObserver({\n   *     threshold: useMemo(() => [min, max], [min, max]),\n   *     onUpdate: useCallback(([entry]) => {\n   *       // do something\n   *     }, []),\n   *   });\n   * }\n   * ```\n   *\n   * @see {@link getThreshold}\n   */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link getRootMargin} */\n  rootMargin?: IntersectionObserverRootMargin;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link threshold} which is\n   * generally useful if you need access to the DOM or do some expensive\n   * computation.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const targetRef = useIntersectionObserver({\n   *   getThreshold: useCallback(() => {\n   *     // pretend some expensive computation\n   *     return [0, 0.25, 0.5, 0.75, 1];\n   *   }, []),\n   *   OnUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * If this option is provided, {@link threshold}'s value will be ignored.\n   */\n  getThreshold?(): IntersectionObserverThreshold;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * This can be used to dynamically generate the {@link rootMargin} which is\n   * generally useful if you need access to the DOM.\n   *\n   * @example Simple Example\n   * ```tsx\n   * const nodeRef = useRef<HTMLElement>();\n   * const targetRef = useIntersectionObserver({\n   *   getRootMargin: useCallback(() => {\n   *     return `-${nodeRef.current.offsetHeight - 1}px 0px 0px`;\n   *   }, []),\n   *   onUpdate: useCallback(() => {\n   *     // do something\n   *   }, []),\n   * });\n   * ```\n   *\n   * Note: If this option is provided, {@link rootMargin} will be ignored.\n   */\n  getRootMargin?(): IntersectionObserverRootMargin;\n}\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}\n * @since 6.0.0\n */\nexport interface IntersectionObserverHookOptions<E extends HTMLElement>\n  extends BaseIntersectionObserverHookOptions {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * @example Simple Example\n   * ```tsx\n   * const threshold = [0, 0.25, 0.5, 0.75, 1];\n   *\n   * function Example(): ReactElement {\n   *   const [intersecting, setIntersecting] = useState(false);\n   *   const targetRef = useIntersectionObserver({\n   *     threshold,\n   *     onUpdate: useCallback(([entry]) {\n   *       setIntersecting(entry.isIntersecting);\n   *     }, []),\n   *   });\n   *\n   *   // implementation\n   * }\n   * ```\n   */\n  onUpdate(entries: readonly IntersectionObserverEntry[]): void;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * IntersectionObserver each render.**\n   *\n   * If this is defined, the {@link ref} will be ignored along with the returned\n   * ref.\n   *\n   * @example Watching Queried Elements\n   * ```tsx\n   * function Example(): ReactElement {\n   *   useIntersectionObserver({\n   *     onUpdate: useCallback((entries) => {\n   *       entries.forEach((entry) => {\n   *         // do stuff\n   *       });\n   *\n   *       setIntersectingIds(intersecting);\n   *     }, []),\n   *     getTargets: useCallback(() => {\n   *       return document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n   *     }, []),\n   *   }),\n   *\n   *   return <div {...props} />;\n   * }\n   * ```\n   */\n  getTargets?(): readonly Element[];\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example\n *\n * import { useIntersectionObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n *\n * const numSteps = 20;\n * const thresholds = Array.from({ length: numSteps }, (_, i) => i / numSteps);\n * thresholds.push(0);\n *\n * const INCREASING = \"rgba(40, 40, 190, ratio)\";\n * const DECREASING = \"rgba(190, 40, 40, ratio)\";\n *\n * export default function Example(): ReactElement {\n *   const [{ ratio, increasing }, setState] = useState({\n *     ratio: 0.0,\n *     increasing: true,\n *   });\n *\n *   const targetRef = useIntersectionObserver({\n *     threshold: thresholds,\n *     rootMargin: \"0px\",\n *     onUpdate: useCallback(([entry]) => {\n *       const { intersectionRatio } = entry;\n *       setState((prevState) => {\n *         return {\n *           ratio: intersectionRatio,\n *           increasing: intersectionRatio > prevState.ratio,\n *         };\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <div\n *       ref={targetRef}\n *       className={styles.box}\n *       style={{\n *         backgroundColor: (increasing ? INCREASING : DECREASING).replace(\n *           \"ratio\",\n *           `${ratio}`\n *         ),\n *       }}\n *     >\n *       <div className={styles.vertical}>\n *         Welcome to <strong>The Box!</strong>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n */\nexport function useIntersectionObserver<E extends HTMLElement>(\n  options: IntersectionObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    root,\n    disabled = false,\n    onUpdate,\n    threshold,\n    rootMargin,\n    getTargets,\n    getThreshold,\n    getRootMargin,\n  } = options;\n\n  const [targetNodeRef, targetRef] = useEnsuredRef(ref);\n\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    let targets: readonly Element[] = [];\n    if (getTargets) {\n      targets = getTargets();\n    } else if (element) {\n      targets = [element];\n    }\n\n    if (disabled || !targets.length) {\n      return;\n    }\n\n    let resolvedRoot: IntersectionObserverRoot;\n    if (root && \"current\" in root) {\n      resolvedRoot = root.current;\n    } else {\n      resolvedRoot = root;\n    }\n\n    const options: IntersectionObserverInit = {\n      root: resolvedRoot,\n      threshold: (getThreshold || (() => threshold))(),\n      rootMargin: (getRootMargin || (() => rootMargin))(),\n    };\n\n    // Just like the ResizeObserver, you can see performance improvements by\n    // sharing a single intersection observer but I don't think it's worth the\n    // effort to implement here since I'd need to:\n    // - check if there is an observer with the same options\n    //   - if there is, add the callback to that existing observer\n    //   - if there isn't, create a new observer\n    // - when cleaning up, check if there are any other existing callbacks\n    //   - disconnect and remove the observer if there are none left\n    const observer = new IntersectionObserver(onUpdate, options);\n    targets.forEach((target) => {\n      observer.observe(target);\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    disabled,\n    getRootMargin,\n    getTargets,\n    getThreshold,\n    onUpdate,\n    root,\n    rootMargin,\n    targetNodeRef,\n    threshold,\n  ]);\n\n  return targetRef;\n}\n"],"names":["useEffect","useEnsuredRef","useIntersectionObserver","options","ref","root","disabled","onUpdate","threshold","rootMargin","getTargets","getThreshold","getRootMargin","targetNodeRef","targetRef","element","current","targets","length","resolvedRoot","observer","IntersectionObserver","forEach","target","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA2LnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,wBACdC,OAA2C;IAE3C,MAAM,EACJC,GAAG,EACHC,IAAI,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAM,CAACU,eAAeC,UAAU,GAAGb,cAAcG;IAEjDJ,UAAU;QACR,MAAMe,UAAUF,cAAcG,OAAO;QACrC,IAAIC,UAA8B,EAAE;QACpC,IAAIP,YAAY;YACdO,UAAUP;QACZ,OAAO,IAAIK,SAAS;YAClBE,UAAU;gBAACF;aAAQ;QACrB;QAEA,IAAIT,YAAY,CAACW,QAAQC,MAAM,EAAE;YAC/B;QACF;QAEA,IAAIC;QACJ,IAAId,QAAQ,aAAaA,MAAM;YAC7Bc,eAAed,KAAKW,OAAO;QAC7B,OAAO;YACLG,eAAed;QACjB;QAEA,MAAMF,UAAoC;YACxCE,MAAMc;YACNX,WAAW,AAACG,CAAAA,gBAAiB,CAAA,IAAMH,SAAQ,CAAC;YAC5CC,YAAY,AAACG,CAAAA,iBAAkB,CAAA,IAAMH,UAAS,CAAC;QACjD;QAEA,wEAAwE;QACxE,0EAA0E;QAC1E,8CAA8C;QAC9C,wDAAwD;QACxD,8DAA8D;QAC9D,4CAA4C;QAC5C,sEAAsE;QACtE,gEAAgE;QAChE,MAAMW,WAAW,IAAIC,qBAAqBd,UAAUJ;QACpDc,QAAQK,OAAO,CAAC,CAACC;YACfH,SAASI,OAAO,CAACD;QACnB;QAEA,OAAO;YACLH,SAASK,UAAU;QACrB;IACF,GAAG;QACDnB;QACAM;QACAF;QACAC;QACAJ;QACAF;QACAI;QACAI;QACAL;KACD;IAED,OAAOM;AACT"}

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 {};