@react-md/core 6.5.2 → 7.0.0

package/dist/useDropzone.js

@@ -79,7 +79,7 @@ const noop = ()=>{
     const { onDrop, onDragOver = noop, onDragEnter = noop, onDragLeave = noop, disableDragging = false } = options;
     const [isOver, setOver] = useState(false);
     const { toggled: isDragging, enable: startDragging, disable: stopDragging } = useToggle();
-    const draggingTimeout = useRef();
+    const draggingTimeout = useRef(undefined);
     // Browsers sometimes don't trigger a dragleave event for the entire
     // document, so we have to work around that by using the `dragover` event
     // instead. The `dragover` event will continually fire within the window

package/dist/useDropzone.js.map

@@ -1 +1 @@
-{"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 { 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 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<NodeJS.Timeout>();\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    globalThis.clearTimeout(draggingTimeout.current);\n    draggingTimeout.current = globalThis.setTimeout(() => {\n      stopDragging();\n    }, 100);\n  }, [stopDragging]);\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    globalThis.addEventListener(\"dragenter\", startDragging);\n    globalThis.addEventListener(\"dragover\", delayedStopDragging);\n    return () => {\n      globalThis.clearTimeout(draggingTimeout.current);\n      globalThis.removeEventListener(\"dragenter\", startDragging);\n      globalThis.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        globalThis.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        stopDragging();\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        globalThis.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","globalThis","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,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,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;QAC/CJ,gBAAgBI,OAAO,GAAGF,WAAWG,UAAU,CAAC;YAC9CN;QACF,GAAG;IACL,GAAG;QAACA;KAAa;IAEjBnB,UAAU;QACR,IAAIW,iBAAiB;YACnB;QACF;QAEAW,WAAWI,gBAAgB,CAAC,aAAaT;QACzCK,WAAWI,gBAAgB,CAAC,YAAYL;QACxC,OAAO;YACLC,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;YAC/CF,WAAWK,mBAAmB,CAAC,aAAaV;YAC5CK,WAAWK,mBAAmB,CAAC,YAAYN;QAC7C;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,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;gBAC/CjB,OAAOsB;gBACPhB,QAAQ;gBACRM;YACF;YACAX,YAAWqB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,WAAWC,YAAY,CAACH,gBAAgBI,OAAO;gBAC/ChB,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"}
+{"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 { 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 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<NodeJS.Timeout>(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    globalThis.clearTimeout(draggingTimeout.current);\n    draggingTimeout.current = globalThis.setTimeout(() => {\n      stopDragging();\n    }, 100);\n  }, [stopDragging]);\n\n  useEffect(() => {\n    if (disableDragging) {\n      return;\n    }\n\n    globalThis.addEventListener(\"dragenter\", startDragging);\n    globalThis.addEventListener(\"dragover\", delayedStopDragging);\n    return () => {\n      globalThis.clearTimeout(draggingTimeout.current);\n      globalThis.removeEventListener(\"dragenter\", startDragging);\n      globalThis.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        globalThis.clearTimeout(draggingTimeout.current);\n        onDrop(event);\n        setOver(false);\n        stopDragging();\n      },\n      onDragOver(event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        globalThis.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","undefined","delayedStopDragging","globalThis","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,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,OAAuBoB;IAE/C,oEAAoE;IACpE,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,MAAMC,sBAAsBvB,YAAY;QACtCwB,WAAWC,YAAY,CAACJ,gBAAgBK,OAAO;QAC/CL,gBAAgBK,OAAO,GAAGF,WAAWG,UAAU,CAAC;YAC9CP;QACF,GAAG;IACL,GAAG;QAACA;KAAa;IAEjBnB,UAAU;QACR,IAAIW,iBAAiB;YACnB;QACF;QAEAY,WAAWI,gBAAgB,CAAC,aAAaV;QACzCM,WAAWI,gBAAgB,CAAC,YAAYL;QACxC,OAAO;YACLC,WAAWC,YAAY,CAACJ,gBAAgBK,OAAO;YAC/CF,WAAWK,mBAAmB,CAAC,aAAaX;YAC5CM,WAAWK,mBAAmB,CAAC,YAAYN;QAC7C;IACF,GAAG;QAACA;QAAqBX;QAAiBM;KAAc;IAExD,OAAO;QACLL;QACAG;QACAc,kBAAkB;YAChB,mDAAmD;YACnD,sEAAsE;YACtE,uEAAuE;YACvE,iBAAiB;YACjB,EAAE;YACF,iEAAiE;YACjE,mDAAmD;YACnDtB,QAAOuB,KAAK;gBACVA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,WAAWC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC/ClB,OAAOuB;gBACPjB,QAAQ;gBACRM;YACF;YACAX,YAAWsB,KAAK;gBACdA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBT,WAAWC,YAAY,CAACJ,gBAAgBK,OAAO;gBAC/CjB,WAAWsB;gBACXjB,QAAQ;YACV;YACAJ,aAAYqB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBvB,YAAYqB;gBACZjB,QAAQ;YACV;YACAH,aAAYoB,KAAK;gBACfA,MAAMC,cAAc;gBACpBD,MAAME,eAAe;gBAErBtB,YAAYoB;gBACZjB,QAAQ;gBACR,iFAAiF;gBACjF,uCAAuC;gBACvCS;YACF;QACF;IACF;AACF"}

package/dist/useEnsuredRef.d.ts

@@ -1,16 +1,16 @@
-import type { MutableRefObject, Ref, RefCallback } from "react";
+import type { Ref, RefCallback, RefObject } from "react";
 /**
  * @since 2.3.0
  * @internal
  */
 export type EnsuredRefs<E extends HTMLElement> = readonly [
-    MutableRefObject<E | null>,
+    RefObject<E | null>,
     RefCallback<E | null>
 ];
 /**
  * This is mostly an internal hook that allows for an optional ref (normally
  * from props or hook options) to be merged with a hook's required `ref`. This
- * will return a MutableRefObject used for DOM manipulation in a custom hook
+ * will return a RefObject used for DOM manipulation in a custom hook
  * 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.
  *

package/dist/useEnsuredRef.js

@@ -4,7 +4,7 @@ import { applyRef } from "./utils/applyRef.js";
 /**
  * This is mostly an internal hook that allows for an optional ref (normally
  * from props or hook options) to be merged with a hook's required `ref`. This
- * will return a MutableRefObject used for DOM manipulation in a custom hook
+ * will return a RefObject used for DOM manipulation in a custom hook
  * 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.
  *

package/dist/useEnsuredRef.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/useEnsuredRef.ts"],"sourcesContent":["\"use client\";\n\nimport type { Ref, RefCallback, RefObject } 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  RefObject<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 RefObject 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/useThrottledFunction.js

@@ -78,9 +78,9 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
  * function only if it has not been called again for X milliseconds).
  * @since 6.0.0
  */ export function useThrottledFunction(func, wait) {
-    const args = useRef();
-    const result = useRef();
-    const timeout = useRef();
+    const args = useRef(undefined);
+    const result = useRef(undefined);
+    const timeout = useRef(undefined);
     const funcRef = useRef(func);
     const lastCalledTime = useRef(0);
     useIsomorphicLayoutEffect(()=>{

package/dist/useThrottledFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useThrottledFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { type AnyFunction, type ThrottledFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * Creates a function that will only be called once every X milliseconds.\n *\n * @example Throttling Search API Requests\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useThrottledFunction } from \"@react-md/core/useThrottledFunction\";\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useThrottledFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useDebouncedFunction` for debounce behavior instead. (Call a\n * function only if it has not been called again for X milliseconds).\n * @since 6.0.0\n */\nexport function useThrottledFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): ThrottledFunction<F> {\n  const args = useRef<Parameters<F>>();\n  const result = useRef<ReturnType<F>>();\n  const timeout = useRef<NodeJS.Timeout>();\n  const funcRef = useRef(func);\n  const lastCalledTime = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const throttled: ThrottledFunction<F> = (...nextArgs) => {\n      args.current = nextArgs;\n\n      const now = Date.now();\n      const remaining = wait - (now - lastCalledTime.current);\n      if (remaining <= 0 || remaining > wait) {\n        lastCalledTime.current = now;\n\n        result.current = funcRef.current(...args.current);\n      } else if (!timeout.current) {\n        timeout.current = globalThis.setTimeout(() => {\n          lastCalledTime.current = Date.now();\n          timeout.current = undefined;\n          // should exist by this time\n\n          result.current = funcRef.current(...(args.current as Parameters<F>));\n        }, remaining);\n      }\n\n      return result.current as ReturnType<F>;\n    };\n    throttled.cancel = () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n\n    return throttled;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useThrottledFunction","func","wait","args","result","timeout","funcRef","lastCalledTime","current","globalThis","clearTimeout","throttled","nextArgs","now","Date","remaining","setTimeout","undefined","cancel"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,OAAOL;IACb,MAAMM,SAASN;IACf,MAAMO,UAAUP;IAChB,MAAMQ,UAAUR,OAAOG;IACvB,MAAMM,iBAAiBT,OAAO;IAE9BC,0BAA0B;QACxBO,QAAQE,OAAO,GAAGP;IACpB;IAEAL,UAAU;QACR,OAAO;YACLa,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;IACF,GAAG,EAAE;IAEL,OAAOX,QAAQ;QACb,MAAMc,YAAkC,CAAC,GAAGC;YAC1CT,KAAKK,OAAO,GAAGI;YAEf,MAAMC,MAAMC,KAAKD,GAAG;YACpB,MAAME,YAAYb,OAAQW,CAAAA,MAAMN,eAAeC,OAAO,AAAD;YACrD,IAAIO,aAAa,KAAKA,YAAYb,MAAM;gBACtCK,eAAeC,OAAO,GAAGK;gBAEzBT,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAIL,KAAKK,OAAO;YAClD,OAAO,IAAI,CAACH,QAAQG,OAAO,EAAE;gBAC3BH,QAAQG,OAAO,GAAGC,WAAWO,UAAU,CAAC;oBACtCT,eAAeC,OAAO,GAAGM,KAAKD,GAAG;oBACjCR,QAAQG,OAAO,GAAGS;oBAClB,4BAA4B;oBAE5Bb,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAKL,KAAKK,OAAO;gBACnD,GAAGO;YACL;YAEA,OAAOX,OAAOI,OAAO;QACvB;QACAG,UAAUO,MAAM,GAAG;YACjBT,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;QAEA,OAAOG;IACT,GAAG;QAACT;KAAK;AACX"}
+{"version":3,"sources":["../src/useThrottledFunction.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { type AnyFunction, type ThrottledFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * Creates a function that will only be called once every X milliseconds.\n *\n * @example Throttling Search API Requests\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useThrottledFunction } from \"@react-md/core/useThrottledFunction\";\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\n * import { useState } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * interface State {\n *   error?: unknown\n *   loading: boolean;\n *   results?: {\n *     // pretend some search results\n *     id: string;\n *     name: string;\n *   }[];\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     loading: false,\n *   });\n *   // this is only required for async actions\n *   const unmounted = useUnmounted();\n *\n *   // A new search request will be fired once every 500ms as the user types.\n *   // can't use the event here since React uses synthetic events\n *   const search = useThrottledFunction(async (q: string) => {\n *     setState({\n *       loading: true,\n *       error: undefined,\n *       results: undefined,\n *     });\n *\n *     try {\n *       const response = await fetch('/search', {\n *         method: 'POST',\n *         headers: {\n *           'Content-Type': 'application/json',\n *         },\n *         body: JSON.stringify({ q }),\n *       });\n *       const json = await response.json();\n *\n *       if (!unmounted.current) {\n *         setState({\n *           loading: false,\n *           results: json,\n *         });\n *       }\n *     } catch (error) {\n *       if (!unmounted.current) {\n *         setState({\n *           error,\n *           loading: false,\n *         });\n *       }\n *     }\n *   }, 500);\n *\n *   return (\n *     <TextField\n *       type=\"search\"\n *       label=\"Search\"\n *       onChange={(event) => search(event.currentTarget.value)}\n *     />\n *   );\n * }\n * ```\n *\n * @see `useDebouncedFunction` for debounce behavior instead. (Call a\n * function only if it has not been called again for X milliseconds).\n * @since 6.0.0\n */\nexport function useThrottledFunction<F extends AnyFunction>(\n  func: F,\n  wait: number\n): ThrottledFunction<F> {\n  const args = useRef<Parameters<F>>(undefined);\n  const result = useRef<ReturnType<F>>(undefined);\n  const timeout = useRef<NodeJS.Timeout>(undefined);\n  const funcRef = useRef(func);\n  const lastCalledTime = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    funcRef.current = func;\n  });\n\n  useEffect(() => {\n    return () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useMemo(() => {\n    const throttled: ThrottledFunction<F> = (...nextArgs) => {\n      args.current = nextArgs;\n\n      const now = Date.now();\n      const remaining = wait - (now - lastCalledTime.current);\n      if (remaining <= 0 || remaining > wait) {\n        lastCalledTime.current = now;\n\n        result.current = funcRef.current(...args.current);\n      } else if (!timeout.current) {\n        timeout.current = globalThis.setTimeout(() => {\n          lastCalledTime.current = Date.now();\n          timeout.current = undefined;\n          // should exist by this time\n\n          result.current = funcRef.current(...(args.current as Parameters<F>));\n        }, remaining);\n      }\n\n      return result.current as ReturnType<F>;\n    };\n    throttled.cancel = () => {\n      globalThis.clearTimeout(timeout.current);\n    };\n\n    return throttled;\n  }, [wait]);\n}\n"],"names":["useEffect","useMemo","useRef","useIsomorphicLayoutEffect","useThrottledFunction","func","wait","args","undefined","result","timeout","funcRef","lastCalledTime","current","globalThis","clearTimeout","throttled","nextArgs","now","Date","remaining","setTimeout","cancel"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,yBAAyB,QAAQ,iCAAiC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASC,qBACdC,IAAO,EACPC,IAAY;IAEZ,MAAMC,OAAOL,OAAsBM;IACnC,MAAMC,SAASP,OAAsBM;IACrC,MAAME,UAAUR,OAAuBM;IACvC,MAAMG,UAAUT,OAAOG;IACvB,MAAMO,iBAAiBV,OAAO;IAE9BC,0BAA0B;QACxBQ,QAAQE,OAAO,GAAGR;IACpB;IAEAL,UAAU;QACR,OAAO;YACLc,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;IACF,GAAG,EAAE;IAEL,OAAOZ,QAAQ;QACb,MAAMe,YAAkC,CAAC,GAAGC;YAC1CV,KAAKM,OAAO,GAAGI;YAEf,MAAMC,MAAMC,KAAKD,GAAG;YACpB,MAAME,YAAYd,OAAQY,CAAAA,MAAMN,eAAeC,OAAO,AAAD;YACrD,IAAIO,aAAa,KAAKA,YAAYd,MAAM;gBACtCM,eAAeC,OAAO,GAAGK;gBAEzBT,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAIN,KAAKM,OAAO;YAClD,OAAO,IAAI,CAACH,QAAQG,OAAO,EAAE;gBAC3BH,QAAQG,OAAO,GAAGC,WAAWO,UAAU,CAAC;oBACtCT,eAAeC,OAAO,GAAGM,KAAKD,GAAG;oBACjCR,QAAQG,OAAO,GAAGL;oBAClB,4BAA4B;oBAE5BC,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAKN,KAAKM,OAAO;gBACnD,GAAGO;YACL;YAEA,OAAOX,OAAOI,OAAO;QACvB;QACAG,UAAUM,MAAM,GAAG;YACjBR,WAAWC,YAAY,CAACL,QAAQG,OAAO;QACzC;QAEA,OAAOG;IACT,GAAG;QAACV;KAAK;AACX"}

package/dist/useUnmounted.d.ts

@@ -1,4 +1,4 @@
-import type { NonNullRef } from "./types.js";
+import { type RefObject } from "react";
 /**
  * @example Simple Example
  * ```tsx
@@ -27,4 +27,4 @@ import type { NonNullRef } from "./types.js";
  * ```
  * @since 6.0.0
  */
-export declare function useUnmounted(): NonNullRef<boolean>;
+export declare function useUnmounted(): RefObject<boolean>;

package/dist/useUnmounted.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useUnmounted.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport type { NonNullRef } from \"./types.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\n * import { useEffect, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState({ loading: false });\n *   const unmounted = useUnmounted();\n *\n *   useEffect(() => {\n *     async function load(): void {\n *       const result = await fetch('/some-api');\n *       const json = await response.json();\n *       if (!unmounted.current) {\n *         setState({ loading: false, result: json });\n *       }\n *     }\n *\n *     setState({ loading: true });\n *     load();\n *   }, [unmounted]);\n *\n *   return null;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useUnmounted(): NonNullRef<boolean> {\n  const unmounted = useRef(false);\n  useEffect(() => {\n    unmounted.current = false;\n    return () => {\n      unmounted.current = true;\n    };\n  }, []);\n\n  return unmounted;\n}\n"],"names":["useEffect","useRef","useUnmounted","unmounted","current"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC;IACd,MAAMC,YAAYF,OAAO;IACzBD,UAAU;QACRG,UAAUC,OAAO,GAAG;QACpB,OAAO;YACLD,UAAUC,OAAO,GAAG;QACtB;IACF,GAAG,EAAE;IAEL,OAAOD;AACT"}
+{"version":3,"sources":["../src/useUnmounted.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect, useRef } from \"react\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\n * import { useEffect, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState({ loading: false });\n *   const unmounted = useUnmounted();\n *\n *   useEffect(() => {\n *     async function load(): void {\n *       const result = await fetch('/some-api');\n *       const json = await response.json();\n *       if (!unmounted.current) {\n *         setState({ loading: false, result: json });\n *       }\n *     }\n *\n *     setState({ loading: true });\n *     load();\n *   }, [unmounted]);\n *\n *   return null;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useUnmounted(): RefObject<boolean> {\n  const unmounted = useRef(false);\n  useEffect(() => {\n    unmounted.current = false;\n    return () => {\n      unmounted.current = true;\n    };\n  }, []);\n\n  return unmounted;\n}\n"],"names":["useEffect","useRef","useUnmounted","unmounted","current"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC;IACd,MAAMC,YAAYF,OAAO;IACzBD,UAAU;QACRG,UAAUC,OAAO,GAAG;QACpB,OAAO;YACLD,UAAUC,OAAO,GAAG;QACtB;IACF,GAAG,EAAE;IAEL,OAAOD;AACT"}

package/dist/utils/applyRef.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from "react";
+import { type Ref } from "react";
 /**
  * A small utility function that allows me to apply a passed in ref along with
  * my own custom ref logic.

package/dist/utils/applyRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/applyRef.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\n/**\n * A small utility function that allows me to apply a passed in ref along with\n * my own custom ref logic.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { applyRef } from \"@react-md/core/utils/applyRef\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const refHandler = useCallback((instance: HTMLDivElement | null) => {\n *     applyRef(instance, ref);\n *     if (!instance) {\n *       return;\n *     }\n *\n *     // do something with instance\n *   });\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @param instance - The DOM Node instance\n * @param ref - The prop ref\n * @internal\n */\nexport function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(instance);\n  } else if (typeof ref === \"object\") {\n    (ref as MutableRefObject<E | null>).current = instance;\n  }\n}\n"],"names":["applyRef","instance","ref","current"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASA,SAAYC,QAAkB,EAAEC,GAAuB;IACrE,IAAI,CAACA,KAAK;QACR;IACF;IAEA,IAAI,OAAOA,QAAQ,YAAY;QAC7BA,IAAID;IACN,OAAO,IAAI,OAAOC,QAAQ,UAAU;QACjCA,IAAmCC,OAAO,GAAGF;IAChD;AACF"}
+{"version":3,"sources":["../../src/utils/applyRef.ts"],"sourcesContent":["import { type Ref } from \"react\";\n\n/**\n * A small utility function that allows me to apply a passed in ref along with\n * my own custom ref logic.\n *\n * @example Simple Example\n * ```tsx\n * import { HTMLAttributes, forwardRef } from \"react\";\n * import { applyRef } from \"@react-md/core/utils/applyRef\";\n *\n * export type ExampleProps = HTMLAttributes<HTMLDivElement>;\n *\n * const Example = forwardRef<HTMLDivElement, ExampleProps>(function Example(props, ref) {\n *   const refHandler = useCallback((instance: HTMLDivElement | null) => {\n *     applyRef(instance, ref);\n *     if (!instance) {\n *       return;\n *     }\n *\n *     // do something with instance\n *   });\n *\n *   return <div ref={refHandler} />;\n * });\n * ```\n *\n * @param instance - The DOM Node instance\n * @param ref - The prop ref\n * @internal\n */\nexport function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === \"function\") {\n    ref(instance);\n  } else if (typeof ref === \"object\") {\n    ref.current = instance;\n  }\n}\n"],"names":["applyRef","instance","ref","current"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASA,SAAYC,QAAkB,EAAEC,GAAuB;IACrE,IAAI,CAACA,KAAK;QACR;IACF;IAEA,IAAI,OAAOA,QAAQ,YAAY;QAC7BA,IAAID;IACN,OAAO,IAAI,OAAOC,QAAQ,UAAU;QAClCA,IAAIC,OAAO,GAAGF;IAChB;AACF"}

package/dist/window-splitter/WindowSplitter.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type BaseWindowSplitterClassNameOptions } from "./styles.js";
 /**
@@ -8,6 +8,7 @@ import { type BaseWindowSplitterClassNameOptions } from "./styles.js";
  * module augmentation.
  */
 export interface BaseWindowSplitterProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">, BaseWindowSplitterClassNameOptions {
+    ref?: Ref<HTMLButtonElement>;
     /**
      * This will be provided by the {@link useWindowSplitter} hook.
      */
@@ -69,4 +70,4 @@ export type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;
  * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
  */
-export declare const WindowSplitter: import("react").ForwardRefExoticComponent<WindowSplitterProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function WindowSplitter(props: WindowSplitterProps): ReactElement;

package/dist/window-splitter/WindowSplitter.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { windowSplitter } from "./styles.js";
 /**
  * The `WindowSplitter` should be used with the `useWindowSplitter` hook to
@@ -44,8 +43,8 @@ import { windowSplitter } from "./styles.js";
  *
  * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
- */ export const WindowSplitter = /*#__PURE__*/ forwardRef(function WindowSplitter(props, ref) {
-    const { role = "separator", className, dragging, reversed, disableFixed, inactiveBackground, ...remaining } = props;
+ */ export function WindowSplitter(props) {
+    const { ref, role = "separator", className, dragging, reversed, disableFixed, inactiveBackground, ...remaining } = props;
     const vertical = props["aria-orientation"] === "vertical";
     return /*#__PURE__*/ _jsx("button", {
         ...remaining,
@@ -61,6 +60,6 @@ import { windowSplitter } from "./styles.js";
             inactiveBackground
         })
     });
-});
+}
 
 //# sourceMappingURL=WindowSplitter.js.map

package/dist/window-splitter/WindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  type BaseWindowSplitterClassNameOptions,\n  windowSplitter,\n} from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface BaseWindowSplitterProps\n  extends\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\">,\n    BaseWindowSplitterClassNameOptions {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\n * @since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed,\n    inactiveBackground,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n        inactiveBackground,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","inactiveBackground","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAEEC,cAAc,QACT,cAAc;AAmCrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,WAAWT,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACU;QACE,GAAGF,SAAS;QACbP,KAAKA;QACLU,MAAK;QACLT,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAK;YACAH;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  type BaseWindowSplitterClassNameOptions,\n  windowSplitter,\n} from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface BaseWindowSplitterProps\n  extends\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\">,\n    BaseWindowSplitterClassNameOptions {\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\n * @since 6.0.0\n */\nexport function WindowSplitter(props: WindowSplitterProps): ReactElement {\n  const {\n    ref,\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed,\n    inactiveBackground,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n        inactiveBackground,\n      })}\n    />\n  );\n}\n"],"names":["windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","inactiveBackground","remaining","vertical","button","type"],"mappings":";AAGA,SAEEA,cAAc,QACT,cAAc;AAqCrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,GAAG,EACHC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,WAAWT,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACU;QACE,GAAGF,SAAS;QACbP,KAAKA;QACLU,MAAK;QACLT,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAK;YACAH;YACAC;QACF;;AAGN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.5.2",
+  "version": "7.0.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -83,29 +83,29 @@
     "@jest/types": "^30.2.0",
     "@microsoft/api-extractor": "^7.55.2",
     "@swc/cli": "^0.7.9",
-    "@swc/core": "^1.15.7",
+    "@swc/core": "^1.15.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.1",
     "@types/lodash": "^4.17.21",
     "@types/node": "^24.10.4",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "@vitest/coverage-v8": "^3.2.4",
     "chokidar": "^5.0.0",
     "eslint": "^9.39.2",
     "filesize": "^11.0.13",
     "glob": "13.0.0",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all2": "^8.0.2",
     "prettier": "^3.7.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "stylelint": "^16.26.1",
     "ts-morph": "^27.0.2",
     "ts-node": "^10.9.2",
@@ -124,7 +124,7 @@
     "@testing-library/user-event": ">= 14",
     "react": ">= 18",
     "react-dom": ">= 18",
-    "vitest": ">= 2"
+    "vitest": ">= 3"
   },
   "peerDependenciesMeta": {
     "@jest/globals": {

package/src/app-bar/AppBar.tsx

@@ -1,8 +1,8 @@
 import {
   type ElementType,
   type HTMLAttributes,
+  type ReactElement,
   type Ref,
-  forwardRef,
 } from "react";
 
 import { type AppBarClassNameOptions, appBar } from "./styles.js";
@@ -28,6 +28,7 @@ export type CustomAppBarComponent = ElementType<
  */
 export interface AppBarProps
   extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
   /** @defaultValue `fixed ? "header" : "div"` */
   as?: CustomAppBarComponent;
 }
@@ -56,57 +57,56 @@ export interface AppBarProps
  * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */
-export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
-  function AppBar(props, ref) {
-    const {
-      className,
-      theme,
-      stacked,
-      height,
-      align,
-      grid,
-      gridName,
-      justify,
-      reversed,
-      gridColumns,
-      disableWrap,
-      disablePadding,
-      position,
-      pagePosition,
-      surfaceColor,
-      scrollbarOffset,
-      disableElevation,
-      as: Component = position ? "header" : "div",
-      children,
-      ...remaining
-    } = props;
+export function AppBar(props: AppBarProps): ReactElement {
+  const {
+    ref,
+    className,
+    theme,
+    stacked,
+    height,
+    align,
+    grid,
+    gridName,
+    justify,
+    reversed,
+    gridColumns,
+    disableWrap,
+    disablePadding,
+    position,
+    pagePosition,
+    surfaceColor,
+    scrollbarOffset,
+    disableElevation,
+    as: Component = position ? "header" : "div",
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <Component
-        {...remaining}
-        className={appBar({
-          className,
-          theme,
-          position,
-          pagePosition,
-          disableElevation,
-          scrollbarOffset,
-          height,
-          grid,
-          gridName,
-          gridColumns,
-          align,
-          stacked,
-          justify,
-          reversed,
-          surfaceColor,
-          disableWrap,
-          disablePadding,
-        })}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+  return (
+    <Component
+      {...remaining}
+      className={appBar({
+        className,
+        theme,
+        position,
+        pagePosition,
+        disableElevation,
+        scrollbarOffset,
+        height,
+        grid,
+        gridName,
+        gridColumns,
+        align,
+        stacked,
+        justify,
+        reversed,
+        surfaceColor,
+        disableWrap,
+        disablePadding,
+      })}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/app-bar/AppBarTitle.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { type TextOverflow } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
@@ -14,6 +14,8 @@ import { type AppBarTitleClassNameOptions, appBarTitle } from "./styles.js";
  */
 export interface AppBarTitleProps
   extends TypographyProps, AppBarTitleClassNameOptions {
+  ref?: Ref<HTMLHeadingElement>;
+
   /** @defaultValue `"headline-6"` */
   type?: TypographyType;
 
@@ -47,29 +49,29 @@ export interface AppBarTitleProps
  * prop inherited through the base `Typography` component. The `textOverflow`
  * will default to `"ellipsis"` which is new as well.
  */
-export const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(
-  function AppBarTitle(props, ref) {
-    const {
-      type = "headline-6",
-      keyline = "small",
-      children,
-      className,
-      textOverflow = "ellipsis",
-      ...remaining
-    } = props;
-    return (
-      <Typography
-        {...remaining}
-        ref={ref}
-        type={type}
-        className={appBarTitle({
-          keyline,
-          className,
-        })}
-        textOverflow={textOverflow}
-      >
-        {children}
-      </Typography>
-    );
-  }
-);
+export function AppBarTitle(props: AppBarTitleProps): ReactElement {
+  const {
+    ref,
+    type = "headline-6",
+    keyline = "small",
+    children,
+    className,
+    textOverflow = "ellipsis",
+    ...remaining
+  } = props;
+
+  return (
+    <Typography
+      {...remaining}
+      ref={ref}
+      type={type}
+      className={appBarTitle({
+        keyline,
+        className,
+      })}
+      textOverflow={textOverflow}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/autocomplete/AutocompleteChip.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { Chip } from "../chip/Chip.js";
 import { getIcon } from "../icon/config.js";
@@ -12,11 +12,9 @@ import { type AutocompleteChipProps } from "./types.js";
  * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
-export const AutocompleteChip = forwardRef<
-  HTMLButtonElement,
-  AutocompleteChipProps
->(function AutocompleteChip(props, ref) {
+export function AutocompleteChip(props: AutocompleteChipProps): ReactElement {
   const {
+    ref,
     "aria-description": propAriaDescription,
     children,
     className,
@@ -47,4 +45,4 @@ export const AutocompleteChip = forwardRef<
       {children}
     </Chip>
   );
-});
+}

package/src/autocomplete/types.ts

@@ -601,6 +601,8 @@ export interface AutocompleteCircularProgressProps extends CircularProgressProps
  * @since 6.0.0
  */
 export interface AutocompleteChipProps extends ChipProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /**
    * @defaultValue `typeof children === "string" ? \`Remove "${children}"\` : undefined`
    */

package/src/autocomplete/utils.ts

@@ -4,7 +4,7 @@ import {
   type EditableHTMLElement,
   triggerManualChangeEvent,
 } from "../form/utils.js";
-import { type NonNullMutableRef, type UseStateInitializer } from "../types.js";
+import { type UseStateInitializer } from "../types.js";
 import { noopAutocompleteFilter } from "./defaults.js";
 import {
   type AutocompleteFilterOptions,
@@ -130,10 +130,10 @@ export interface EnforceSelectedValueOptions<
   value: Option | readonly Option[] | null;
   visible: boolean;
   container: HTMLElement | null;
-  popupRef: RefObject<HTMLElement>;
-  comboboxRef: RefObject<EditableHTMLElement>;
+  popupRef: RefObject<HTMLElement | null>;
+  comboboxRef: RefObject<EditableHTMLElement | null>;
   availableOptions: readonly Option[];
-  prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;
+  prevAvailableOptions: RefObject<readonly Option[] | null>;
 }
 
 /**