@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/useDropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\nimport type { DragEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks\n * \\@since 5.1.3\n * \\@since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;\n  onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * Set this to `true` if you do not need to capture drag events from outside\n   * the window. i.e. Dragging files into the dropzone.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneHookReturnValue.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.9.0\n * \\@since 6.0.0 Returns an object instead of an ordered array of\n * `[isOver: boolean, dropzoneHandlers: DropzoneHandlers]`. Also returns a new\n * `isDragging` state.\n */\nexport interface DropzoneHookReturnValue {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.9.0\n * \\@since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const [isDragging, setDragging] = useState(false);\n  const draggingTimeout = useRef<number | undefined>();\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    const startDragging = (): void => {\n      setDragging(true);\n    };\n\n    // Browsers sometimes don't trigger a dragleave event for the entire\n    // document, so we have to work around that by using the `dragover` event\n    // instead. The `dragover` event will continually fire within the window\n    // until the user drops the file or moves the file outside of the window.\n    //\n    // So we can consider the\n    const handler = (): void => {\n      window.clearTimeout(draggingTimeout.current);\n      draggingTimeout.current = window.setTimeout(() => {\n        setDragging(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", handler);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", handler);\n    };\n  }, [disableDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        setDragging(false);\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","isDragging","setDragging","draggingTimeout","startDragging","handler","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AA2DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGV,SAAS;IACnC,MAAM,CAACW,YAAYC,YAAY,GAAGZ,SAAS;IAC3C,MAAMa,kBAAkBd;IAExBD,UAAU;QACR,IAAIU,iBAAiB;YACnB;QACF;QAEA,MAAMM,gBAAgB;YACpBF,YAAY;QACd;QAEA,oEAAoE;QACpE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,EAAE;QACF,yBAAyB;QACzB,MAAMG,UAAU;YACdC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CL,gBAAgBK,OAAO,GAAGF,OAAOG,UAAU,CAAC;gBAC1CP,YAAY;YACd,GAAG;QACL;QAEAI,OAAOI,gBAAgB,CAAC,aAAaN;QACrCE,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaP;YACxCE,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACP;KAAgB;IAEpB,OAAO;QACLC;QACAE;QACAW,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDlB,QAAOmB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cd,OAAOmB;gBACPb,QAAQ;gBACRE,YAAY;YACd;YACAP,YAAWkB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC3Cb,WAAWkB;gBACXb,QAAQ;YACV;YACAJ,aAAYiB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBnB,YAAYiB;gBACZb,QAAQ;YACV;YACAH,aAAYgB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBlB,YAAYgB;gBACZb,QAAQ;YACV;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/useDropzone.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useToggle } from \"./useToggle.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 5.1.3\n * @since 6.0.0 The element type is dynamically inferred on each handler\n * instead of the `DropzoneHandlers` type.\n */\nexport interface DropzoneHandlers {\n  onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n  onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface DropzoneOptions extends DropzoneHandlers {\n  /**\n   * By default, the `useDropzone` hook will listen to any `dragenter`/`dragover`\n   * events on the page and enabling the {@link DragHookReturnValue.isDragging}\n   * flag to show that the user is dragging _something_ and they might want to\n   * drag that something into the dropzone.\n   *\n   * So set this option to `true` if that behavior is not required and only\n   * drag events on the dropzone element need to be captured.\n   *\n   * @defaultValue `false`\n   * @see {@link DropzoneImplementation.isDragging}\n   */\n  disableDragging?: boolean;\n}\n\n/**\n * @since 2.9.0\n * @since 6.0.0 Renamed from `DropzoneHookReturnValue` to\n * `DropzoneImplementation` to match other naming conventions. Returns an\n * object instead of an ordered array of `[isOver: boolean, dropzoneHandlers:\n * DropzoneHandlers]`. Also returns a new `isDragging` state.\n */\nexport interface DropzoneImplementation {\n  /**\n   * This will be `true` when the user is dragging something over the dropzone\n   * target.\n   */\n  isOver: boolean;\n\n  /**\n   * This will be `true` when the user is dragging anything within the document.\n   * The main use case for this is detecting when a user is dragging a file into\n   * the document so you can help highlight the dropzone area.\n   *\n   * This will always be `false` if {@link DropzoneOptions.disableDragging} is\n   * `true`.\n   */\n  isDragging: boolean;\n\n  /**\n   * The event handlers that should be passed to the dropzone target.\n   */\n  dropzoneHandlers: Required<DropzoneHandlers>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { useDropzone } from \"@react-md/core/useDropzone\";\n * import { type CSSProperties, type ReactElement } from \"react\";\n *\n * const style: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *     disableDragging: true,\n *   });\n *\n *   return (\n *     <div {...dropzoneHandlers} style={isOver ? style : {}}>\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Dragging Example\n * ```tsx\n * import { useDropzone, useFileUpload } from \"@react-md/core\"\n * import type { CSSProperties, ReactElement } from \"react\";\n *\n * const draggingStyle: CSSProperties = {\n *   backgroundColor: \"orange\",\n * };\n * const overStyle: CSSProperties = {\n *   border: '1px solid blue',\n * };\n *\n * function Example(): ReactElement {\n *   const { onDrop } = useFileUpload()\n *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({\n *     onDrop(event) {\n *       // normally use the `onDrop` behavior from `useFileUpload` to upload\n *       // files:\n *       // onDrop(event);\n *     },\n *   });\n *\n *   return (\n *     <div\n *       {...dropzoneHandlers}\n *       style={{\n *         ...(isDragging && draggingStyle),\n *         ...(isOver && overStyle),\n *       }}\n *     >\n *       Drag and drop some files!\n *       {isOver && <UploadSVGIcon />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 2.9.0\n * @since 6.0.0 Supports document-level dragging flag;\n */\nexport function useDropzone(options: DropzoneOptions): DropzoneImplementation {\n  const {\n    onDrop,\n    onDragOver = noop,\n    onDragEnter = noop,\n    onDragLeave = noop,\n    disableDragging = false,\n  } = options;\n\n  const [isOver, setOver] = useState(false);\n  const {\n    toggled: isDragging,\n    enable: startDragging,\n    disable: stopDragging,\n  } = useToggle();\n  const draggingTimeout = useRef<number | undefined>();\n\n  // Browsers sometimes don't trigger a dragleave event for the entire\n  // document, so we have to work around that by using the `dragover` event\n  // instead. The `dragover` event will continually fire within the window\n  // until the user drops the file or moves the file outside of the window.\n  const delayedStopDragging = useCallback(() => {\n    window.clearTimeout(draggingTimeout.current);\n    draggingTimeout.current = window.setTimeout(() => {\n      stopDragging();\n    }, 100);\n  }, [stopDragging]);\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    window.addEventListener(\"dragenter\", startDragging);\n    window.addEventListener(\"dragover\", delayedStopDragging);\n    return () => {\n      window.clearTimeout(draggingTimeout.current);\n      window.removeEventListener(\"dragenter\", startDragging);\n      window.removeEventListener(\"dragover\", delayedStopDragging);\n    };\n  }, [delayedStopDragging, disableDragging, startDragging]);\n\n  return {\n    isOver,\n    isDragging,\n    dropzoneHandlers: {\n      // Note: need to call `event.stopPropagation()` and\n      // `event.preventDefault())` for each of these handlers to prevent the\n      // default browser behavior when dropping. Only calling within `onDrop`\n      // does not work.\n      //\n      // i.e. dropping an image would preview that image in the current\n      // window/tab instead of triggering the drop event.\n      onDrop(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        stopDragging();\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        window.clearTimeout(draggingTimeout.current);\n        onDragOver(event);\n        setOver(true);\n      },\n      onDragEnter(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragEnter(event);\n        setOver(true);\n      },\n      onDragLeave(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        onDragLeave(event);\n        setOver(false);\n        // this stops dragging if the user's File Explorer is somewhat above the dropzone\n        // and drags out into the File Explorer\n        delayedStopDragging();\n      },\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useToggle","noop","useDropzone","options","onDrop","onDragOver","onDragEnter","onDragLeave","disableDragging","isOver","setOver","toggled","isDragging","enable","startDragging","disable","stopDragging","draggingTimeout","delayedStopDragging","window","clearTimeout","current","setTimeout","addEventListener","removeEventListener","dropzoneHandlers","event","preventDefault","stopPropagation"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EACJC,MAAM,EACNC,aAAaJ,IAAI,EACjBK,cAAcL,IAAI,EAClBM,cAAcN,IAAI,EAClBO,kBAAkB,KAAK,EACxB,GAAGL;IAEJ,MAAM,CAACM,QAAQC,QAAQ,GAAGX,SAAS;IACnC,MAAM,EACJY,SAASC,UAAU,EACnBC,QAAQC,aAAa,EACrBC,SAASC,YAAY,EACtB,GAAGhB;IACJ,MAAMiB,kBAAkBnB;IAExB,oEAAoE;IACpE,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,MAAMoB,sBAAsBtB,YAAY;QACtCuB,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;QAC3CJ,gBAAgBI,OAAO,GAAGF,OAAOG,UAAU,CAAC;YAC1CN;QACF,GAAG;IACL,GAAG;QAACA;KAAa;IAEjBnB,UAAU;QACR,IAAIW,iBAAiB;YACnB;QACF;QAEAW,OAAOI,gBAAgB,CAAC,aAAaT;QACrCK,OAAOI,gBAAgB,CAAC,YAAYL;QACpC,OAAO;YACLC,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;YAC3CF,OAAOK,mBAAmB,CAAC,aAAaV;YACxCK,OAAOK,mBAAmB,CAAC,YAAYN;QACzC;IACF,GAAG;QAACA;QAAqBV;QAAiBM;KAAc;IAExD,OAAO;QACLL;QACAG;QACAa,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDrB,QAAOsB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;gBAC3CjB,OAAOsB;gBACPhB,QAAQ;gBACRM;YACF;YACAX,YAAWqB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,OAAOC,YAAY,CAACH,gBAAgBI,OAAO;gBAC3ChB,WAAWqB;gBACXhB,QAAQ;YACV;YACAJ,aAAYoB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBtB,YAAYoB;gBACZhB,QAAQ;YACV;YACAH,aAAYmB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBrB,YAAYmB;gBACZhB,QAAQ;gBACR,iFAAiF;gBACjF,uCAAuC;gBACvCQ;YACF;QACF;IACF;AACF"}

package/dist/useElementSize.d.ts

@@ -0,0 +1,61 @@
+import { type RefCallback } from "react";
+import { type ElementSize, type UseStateInitializer } from "./types.js";
+import { type ResizeObserverHookOptions } from "./useResizeObserver.js";
+/**
+ * @since 6.0.0
+ */
+export interface ElementSizeOptions<E extends HTMLElement> extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
+    /** @defaultValue `{ height: 0, width: 0 }` */
+    defaultValue?: UseStateInitializer<ElementSize>;
+}
+/**
+ * @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
+ * ```tsx
+ * import { useElementSize } from "@react-md/core/useElementSize";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { height, width, elementRef } = useElementSize();
+ *
+ *   return (
+ *     <div ref={elementRef}>
+ *       {`height: ${height}, width: ${width}`}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useElementSize<E extends HTMLElement>(options?: ElementSizeOptions<E>): ElementSizeImplementation<E>;

package/dist/useElementSize.js

@@ -0,0 +1,55 @@
+"use client";
+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
+ * ```tsx
+ * import { useElementSize } from "@react-md/core/useElementSize";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { height, width, elementRef } = useElementSize();
+ *
+ *   return (
+ *     <div ref={elementRef}>
+ *       {`height: ${height}, width: ${width}`}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @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();
+        }
+        return defaultValue ?? {
+            height: 0,
+            width: 0
+        };
+    });
+    const elementRef = useResizeObserver({
+        ...options,
+        onUpdate: useCallback((entry)=>{
+            observedOnce.current = true;
+            const size = entry.borderBoxSize[0];
+            setSize({
+                height: size.blockSize,
+                width: size.inlineSize
+            });
+        }, [])
+    });
+    return {
+        ...size,
+        elementRef,
+        observedOnce: observedOnce.current
+    };
+}
+
+//# sourceMappingURL=useElementSize.js.map

package/dist/useElementSize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefCallback, useCallback, useRef, useState } from \"react\";\n\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  type ResizeObserverHookOptions,\n  useResizeObserver,\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/useElementSize\";\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"],"mappings":"AAAA;AAEA,SAA2BA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGxE,SAEEC,iBAAiB,QACZ,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,11 +2,10 @@
  * 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";
+ * import { useEnsuredId } from "@react-md/core/useEnsuredId";
  *
  * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {
  *   const id = useEnsuredId(props.id, "component-name");
@@ -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,11 +3,10 @@ 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";
+ * import { useEnsuredId } from "@react-md/core/useEnsuredId";
  *
  * export function MaterialDesignComponent(props: HTMLAttributes<HTMLDivElement>): ReactElement {
  *   const id = useEnsuredId(props.id, "component-name");
@@ -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"],"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/useEnsuredId\";\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"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAE9B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,aACdC,MAA0B,EAC1BC,MAAc;IAEd,MAAMC,KAAKJ;IAEX,OAAOE,UAAU,GAAGC,OAAO,CAAC,EAAEC,IAAI;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,11 +14,10 @@ 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 { useEnsuredRef } from "@react-md/core/useEnsuredRef";
  * import { HTMLAttributes, forwardRef } from "react";
- * import { useEnsuredRef } from "@react-md/core";
  *
  * export type ExampleProps = HTMLAttributes<HTMLDivElement>;
  *
@@ -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,11 +8,10 @@ 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 { useEnsuredRef } from "@react-md/core/useEnsuredRef";
  * import { HTMLAttributes, forwardRef } from "react";
- * import { useEnsuredRef } from "@react-md/core";
  *
  * export type ExampleProps = HTMLAttributes<HTMLDivElement>;
  *
@@ -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"],"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\";\n\nimport type { MutableRefObject, Ref, RefCallback } from \"react\";\nimport { useCallback, useRef } from \"react\";\n\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 { useEnsuredRef } from \"@react-md/core/useEnsuredRef\";\n * import { HTMLAttributes, forwardRef } from \"react\";\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"],"mappings":"AAAA;AAGA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAE5C,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,9 +2,9 @@ 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>> {
+export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>> {
     value?: V;
     setValue?: Setter;
     defaultValue?: UseStateInitializer<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>,\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"],"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\";\n\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"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAiBjC;;;;;;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,15 @@
 /**
- * @remarks \@since 6.0.0
+ * This hook can be used to dynamically apply a single className to the
+ * `document.documentElement` (`<html>`) using the `classList` API.
+ *
+ * @example Main Usage
+ * ```tsx
+ * function Example() {
+ *   useHtmlClassName("my-class-name");
+ *   return null;
+ * }
+ * ```
+ *
+ * @since 6.0.0
  */
 export declare function useHtmlClassName(className: string): void;

package/dist/useHtmlClassName.js

@@ -1,7 +1,18 @@
 "use client";
 import { useEffect } from "react";
 /**
- * @remarks \@since 6.0.0
+ * This hook can be used to dynamically apply a single className to the
+ * `document.documentElement` (`<html>`) using the `classList` API.
+ *
+ * @example Main Usage
+ * ```tsx
+ * function Example() {
+ *   useHtmlClassName("my-class-name");
+ *   return null;
+ * }
+ * ```
+ *
+ * @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"],"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\";\n\nimport { useEffect } from \"react\";\n\n/**\n * This hook can be used to dynamically apply a single className to the\n * `document.documentElement` (`<html>`) using the `classList` API.\n *\n * @example Main Usage\n * ```tsx\n * function Example() {\n *   useHtmlClassName(\"my-class-name\");\n *   return null;\n * }\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"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;;;;;;;;;;;;CAaC,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 */
+import { type Ref, type RefCallback, type RefObject } from "react";
+/** @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,15 +71,14 @@ 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(() => {
      *     // pretend some expensive computation
      *     return [0, 0.25, 0.5, 0.75, 1];
      *   }, []),
-     *   OnUpdate: useCallback(() => {
+     *   onUpdate: useCallback(() => {
      *     // do something
      *   }, []),
      * });
@@ -89,7 +86,7 @@ export interface BaseIntersectionObserverHookOptions {
      *
      * If this option is provided, {@link threshold}'s value will be ignored.
      */
-    getThreshold?(): IntersectionObserverThreshold;
+    getThreshold?: () => IntersectionObserverThreshold;
     /**
      * **Must be wrapped in `useCallback` to prevent re-creating the
      * IntersectionObserver each render.**
@@ -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({
@@ -113,11 +109,11 @@ export interface BaseIntersectionObserverHookOptions {
      *
      * Note: If this option is provided, {@link rootMargin} will be ignored.
      */
-    getRootMargin?(): IntersectionObserverRootMargin;
+    getRootMargin?: () => IntersectionObserverRootMargin;
 }
 /**
  * @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];
      *
@@ -146,7 +141,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
      * }
      * ```
      */
-    onUpdate(entries: readonly IntersectionObserverEntry[]): void;
+    onUpdate: (entries: readonly IntersectionObserverEntry[]) => void;
     /**
      * **Must be wrapped in `useCallback` to prevent re-creating the
      * IntersectionObserver each render.**
@@ -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({
@@ -175,16 +169,15 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement> extends
      * }
      * ```
      */
-    getTargets?(): readonly Element[];
+    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
  *
- * import { useIntersectionObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useIntersectionObserver } from "@react-md/core/useIntersectionObserver";
+ * import { type ReactElement } from "react";
  * import { useState } from "react";
  *
  * import styles from "./Example.module.scss";
@@ -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,13 +2,12 @@
 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
  *
- * import { useIntersectionObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useIntersectionObserver } from "@react-md/core/useIntersectionObserver";
+ * import { type ReactElement } from "react";
  * import { useState } from "react";
  *
  * import styles from "./Example.module.scss";
@@ -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"],"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\";\n\nimport { type Ref, type RefCallback, type RefObject } from \"react\";\nimport { useEffect } from \"react\";\n\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/useIntersectionObserver\";\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"],"mappings":"AAAA;AAGA,SAASA,SAAS,QAAQ,QAAQ;AAElC,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/useIsomorphicLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * This is copy/pasted from react-redux which has some more information about\n * this and how to fix \"invalid\" warnings while running tests.\n *\n * @see {@link https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js}\n */\nexport const useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" &&\n  typeof window.document !== \"undefined\" &&\n  typeof window.document.createElement !== \"undefined\"\n    ? useLayoutEffect\n    : useEffect;\n"],"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window","document","createElement"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,eAAe,QAAQ,QAAQ;AAEnD;;;;;CAKC,GACD,OAAO,MAAMC,4BACX,OAAOC,WAAW,eAClB,OAAOA,OAAOC,QAAQ,KAAK,eAC3B,OAAOD,OAAOC,QAAQ,CAACC,aAAa,KAAK,cACrCJ,kBACAD,UAAU"}
+{"version":3,"sources":["../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * This is copy/pasted from react-redux which has some more information about\n * this and how to fix \"invalid\" warnings while running tests.\n *\n * @see {@link https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js}\n */\nexport const useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" &&\n  typeof window.document !== \"undefined\" &&\n  typeof window.document.createElement !== \"undefined\"\n    ? useLayoutEffect\n    : useEffect;\n"],"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window","document","createElement"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,eAAe,QAAQ,QAAQ;AAEnD;;;;;CAKC,GACD,OAAO,MAAMC,4BACX,OAAOC,WAAW,eAClB,OAAOA,OAAOC,QAAQ,KAAK,eAC3B,OAAOD,OAAOC,QAAQ,CAACC,aAAa,KAAK,cACrCJ,kBACAD,UAAU"}