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

package/dist/useResizeObserver.d.ts

@@ -1,6 +1,6 @@
-import type { Ref, RefCallback } from "react";
+import { type Ref, type RefCallback } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;
 /** @internal */
@@ -14,9 +14,9 @@ interface TargetSize {
 }
 /** @internal */
 interface TargetSubscription {
-    readonly onUpdate: ResizeObserverEntryCallback;
-    readonly disableHeight: boolean;
-    readonly disableWidth: boolean;
+    onUpdate: ResizeObserverEntryCallback;
+    disableHeight: boolean;
+    disableWidth: boolean;
     size?: TargetSize;
 }
 /** @internal */
@@ -28,7 +28,7 @@ interface SubscribeOptions {
 }
 /**
  * @internal
- * @remarks \@since 6.0.0 This was added to help with testing. The
+ * @since 6.0.0 This was added to help with testing. The
  * `subscriptions` and `sharedObserver` used to be module-level variables but
  * moving to a class makes it easier to mock. Checkout the
  * `src/tests-utils/ResizeObserver.ts`
@@ -52,13 +52,12 @@ export declare class ResizeObserverManager {
 }
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const resizeObserverManager: ResizeObserverManager;
 /**
- * @remarks
- * \@since 2.3.0
- * \@since 6.0.0 Renamed from `UseResizeObserverOptions` and added
+ * @since 2.3.0
+ * @since 6.0.0 Renamed from `UseResizeObserverOptions` and added
  * `onUpdate`/`disabled` options.
  */
 export interface ResizeObserverHookOptions<E extends HTMLElement> {
@@ -76,7 +75,7 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
      */
     onUpdate: ResizeObserverEntryCallback;
     /**
-     * Set this to `true` to prevent observing the element's size changes. THis is
+     * Set this to `true` to prevent observing the element's size changes. This is
      * equivalent to not attaching the returned ref to any element.
      *
      * @defaultValue `false`
@@ -98,52 +97,31 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
     disableWidth?: boolean;
 }
 /**
- * @example
- * Simple Example
- * ```tsx
- * import { useResizeObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
+ * The resize observer is used to track the size changes of a specific element.
+ * For most cases you can use the {@link useElementSize} instead, but this hook
+ * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
- * interface Size {
- *   height: number;
- *   width: number;
- * }
+ * @example Simple Example
+ * ```tsx
+ * import { useResizeObserver } from "@react-md/core/useResizeObserver";
+ * import { useCallback, useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   const [{ height, width }, setSize] = useState<Size>({
- *     height: 0,
- *     width: 0,
- *   });
- *   const targetRef = useResizeObserver({
- *     onResize: useCallback((entry) => {
- *       const { height, width } = entry.borderBox;
- *       setSize({ height, width });
+ *   const elementRef = useResizeObserver({
+ *     onUpdate: useCallback((entry) => {
+ *       const element = entry.target;
+ *       const { height, width } = entry.contentRect;
+ *       const { inlineSize, blockSize } = entry.borderBoxSize[0];
+ *       // do something
  *     }, []),
  *   });
  *
- *   return (
- *     <div ref={targetRef}>
- *       <table>
- *         <tbody>
- *           <tr>
- *             <th scope="col">Height:</th>
- *             <td>{height}</td>
- *           </tr>
- *           <tr>
- *             <th scope="col">Width:</th>
- *             <td>{width}</td>
- *           </tr>
- *         </tbody>
- *       </table>
- *     </div>
- *   );
+ *   return <div ref={elementRef}>{...whatever...}</div>
  * }
  * ```
  *
- * @remarks
- * \@since 2.3.0
- * \@since 6.0.0 The API was updated to match the `useIntersectionObserver`
+ * @since 2.3.0
+ * @since 6.0.0 The API was updated to match the `useIntersectionObserver`
  * implementation -- accepts only a single object parameter and returns a
  * {@link RefCallback} instead of `[nodeRef, refCallback]`
  */

package/dist/useResizeObserver.js

@@ -16,7 +16,7 @@ import { useEffect } from "react";
 import { useEnsuredRef } from "./useEnsuredRef.js";
 /**
  * @internal
- * @remarks \@since 6.0.0 This was added to help with testing. The
+ * @since 6.0.0 This was added to help with testing. The
  * `subscriptions` and `sharedObserver` used to be module-level variables but
  * moving to a class makes it easier to mock. Checkout the
  * `src/tests-utils/ResizeObserver.ts`
@@ -67,7 +67,7 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
                 /* c8 ignore start */ if (!targetSubscriptions) {
                     continue;
                 }
-                /* c8 ignore end */ const entries = targetSubscriptions.values();
+                /* c8 ignore stop */ const entries = targetSubscriptions.values();
                 for (const subscription of entries){
                     const { height, width } = entry.contentRect;
                     const { scrollHeight, scrollWidth } = entry.target;
@@ -92,55 +92,34 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
 }
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const resizeObserverManager = new ResizeObserverManager();
 /**
- * @example
- * Simple Example
- * ```tsx
- * import { useResizeObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
+ * The resize observer is used to track the size changes of a specific element.
+ * For most cases you can use the {@link useElementSize} instead, but this hook
+ * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
- * interface Size {
- *   height: number;
- *   width: number;
- * }
+ * @example Simple Example
+ * ```tsx
+ * import { useResizeObserver } from "@react-md/core/useResizeObserver";
+ * import { useCallback, useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   const [{ height, width }, setSize] = useState<Size>({
- *     height: 0,
- *     width: 0,
- *   });
- *   const targetRef = useResizeObserver({
- *     onResize: useCallback((entry) => {
- *       const { height, width } = entry.borderBox;
- *       setSize({ height, width });
+ *   const elementRef = useResizeObserver({
+ *     onUpdate: useCallback((entry) => {
+ *       const element = entry.target;
+ *       const { height, width } = entry.contentRect;
+ *       const { inlineSize, blockSize } = entry.borderBoxSize[0];
+ *       // do something
  *     }, []),
  *   });
  *
- *   return (
- *     <div ref={targetRef}>
- *       <table>
- *         <tbody>
- *           <tr>
- *             <th scope="col">Height:</th>
- *             <td>{height}</td>
- *           </tr>
- *           <tr>
- *             <th scope="col">Width:</th>
- *             <td>{width}</td>
- *           </tr>
- *         </tbody>
- *       </table>
- *     </div>
- *   );
+ *   return <div ref={elementRef}>{...whatever...}</div>
  * }
  * ```
  *
- * @remarks
- * \@since 2.3.0
- * \@since 6.0.0 The API was updated to match the `useIntersectionObserver`
+ * @since 2.3.0
+ * @since 6.0.0 The API was updated to match the `useIntersectionObserver`
  * implementation -- accepts only a single object parameter and returns a
  * {@link RefCallback} instead of `[nodeRef, refCallback]`
  */ export function useResizeObserver(options) {

package/dist/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useResizeObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;\n\n/** @internal */\ntype Unsubscribe = () => void;\n\n/** @internal */\ninterface TargetSize {\n  height: number;\n  width: number;\n  scrollHeight: number;\n  scrollWidth: number;\n}\n\n/** @internal */\ninterface TargetSubscription {\n  readonly onUpdate: ResizeObserverEntryCallback;\n  readonly disableHeight: boolean;\n  readonly disableWidth: boolean;\n\n  size?: TargetSize;\n}\n\n/** @internal */\ninterface SubscribeOptions {\n  element: Element;\n  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  disableWidth: boolean;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0 This was added to help with testing. The\n * `subscriptions` and `sharedObserver` used to be module-level variables but\n * moving to a class makes it easier to mock. Checkout the\n * `src/tests-utils/ResizeObserver.ts`\n */\nexport class ResizeObserverManager {\n  frame: number;\n  subscriptions: Map<Element, Set<TargetSubscription>>;\n\n  /**\n   * Why is there a single shared observer instead of multiple and a\n   * \"subscription\" model?\n   *\n   * Note: Probably a bit of a premature optimization right now...\n   *\n   * @see https://github.com/WICG/resize-observer/issues/59\n   * @internal\n   */\n  sharedObserver: ResizeObserver | undefined;\n\n  constructor() {\n    this.frame = 0;\n    this.subscriptions = new Map();\n  }\n\n  subscribe = (options: SubscribeOptions): Unsubscribe => {\n    const { element, onUpdate, disableHeight, disableWidth } = options;\n\n    // lazy initialize the observer\n    const observer =\n      this.sharedObserver ||\n      new ResizeObserver((entries) => {\n        // this prevents the `ResizeObserver loop limit exceeded`\n        window.cancelAnimationFrame(this.frame);\n        this.frame = window.requestAnimationFrame(() => {\n          this.handleResizeEntries(entries);\n        });\n      });\n    this.sharedObserver = observer;\n\n    const updates = this.subscriptions.get(element) || new Set();\n    const subscription: TargetSubscription = {\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    };\n    updates.add(subscription);\n    if (!this.subscriptions.has(element)) {\n      this.subscriptions.set(element, updates);\n    }\n\n    observer.observe(element);\n\n    return () => {\n      observer.unobserve(element);\n      updates.delete(subscription);\n    };\n  };\n\n  handleResizeEntries = (entries: ResizeObserverEntry[]): void => {\n    for (const entry of entries) {\n      const targetSubscriptions = this.subscriptions.get(entry.target);\n      // shouldn't really happen\n      /* c8 ignore start */\n      if (!targetSubscriptions) {\n        continue;\n      }\n      /* c8 ignore end */\n\n      const entries = targetSubscriptions.values();\n      for (const subscription of entries) {\n        const { height, width } = entry.contentRect;\n        const { scrollHeight, scrollWidth } = entry.target;\n        const { onUpdate, size, disableHeight, disableWidth } = subscription;\n        const isHeightChange =\n          !disableHeight &&\n          (!size ||\n            size.height !== height ||\n            size.scrollHeight !== scrollHeight);\n        const isWidthChange =\n          !disableWidth &&\n          (!size || size.width !== width || size.scrollWidth !== scrollWidth);\n\n        subscription.size = {\n          height,\n          width,\n          scrollHeight,\n          scrollWidth,\n        };\n        if (isHeightChange || isWidthChange) {\n          onUpdate(entry);\n        }\n      }\n    }\n  };\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 Renamed from `UseResizeObserverOptions` and added\n * `onUpdate`/`disabled` options.\n */\nexport interface ResizeObserverHookOptions<E extends HTMLElement> {\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   * ResizeObserver each render.**\n   *\n   * This function will be called whenever the target element resizes.\n   *\n   * @see {@link useResizeObserver} for an example.\n   */\n  onUpdate: ResizeObserverEntryCallback;\n\n  /**\n   * Set this to `true` to prevent observing the element's size changes. THis is\n   * equivalent to not attaching the returned ref to any element.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for height\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for width\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useResizeObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * interface Size {\n *   height: number;\n *   width: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [{ height, width }, setSize] = useState<Size>({\n *     height: 0,\n *     width: 0,\n *   });\n *   const targetRef = useResizeObserver({\n *     onResize: useCallback((entry) => {\n *       const { height, width } = entry.borderBox;\n *       setSize({ height, width });\n *     }, []),\n *   });\n *\n *   return (\n *     <div ref={targetRef}>\n *       <table>\n *         <tbody>\n *           <tr>\n *             <th scope=\"col\">Height:</th>\n *             <td>{height}</td>\n *           </tr>\n *           <tr>\n *             <th scope=\"col\">Width:</th>\n *             <td>{width}</td>\n *           </tr>\n *         </tbody>\n *       </table>\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 The API was updated to match the `useIntersectionObserver`\n * implementation -- accepts only a single object parameter and returns a\n * {@link RefCallback} instead of `[nodeRef, refCallback]`\n */\nexport function useResizeObserver<E extends HTMLElement>(\n  options: ResizeObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onUpdate,\n    disabled,\n    disableHeight = false,\n    disableWidth = false,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    if (disabled || (disableHeight && disableWidth) || !element) {\n      return;\n    }\n\n    const unsubscribe = resizeObserverManager.subscribe({\n      element,\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [disableHeight, disableWidth, disabled, onUpdate, targetNodeRef]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","ResizeObserverManager","constructor","frame","subscriptions","sharedObserver","subscribe","options","element","onUpdate","disableHeight","disableWidth","observer","ResizeObserver","entries","window","cancelAnimationFrame","requestAnimationFrame","handleResizeEntries","updates","get","Set","subscription","add","has","set","observe","unobserve","delete","entry","targetSubscriptions","target","values","height","width","contentRect","scrollHeight","scrollWidth","size","isHeightChange","isWidthChange","Map","resizeObserverManager","useResizeObserver","ref","disabled","targetNodeRef","refCallback","current","unsubscribe"],"mappings":"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"}
+{"version":3,"sources":["../src/useResizeObserver.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback, useEffect } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useElementSize } from \"./useElementSize.js\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @since 6.0.0\n */\nexport type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;\n\n/** @internal */\ntype Unsubscribe = () => void;\n\n/** @internal */\ninterface TargetSize {\n  height: number;\n  width: number;\n  scrollHeight: number;\n  scrollWidth: number;\n}\n\n/** @internal */\ninterface TargetSubscription {\n  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  disableWidth: boolean;\n\n  size?: TargetSize;\n}\n\n/** @internal */\ninterface SubscribeOptions {\n  element: Element;\n  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  disableWidth: boolean;\n}\n\n/**\n * @internal\n * @since 6.0.0 This was added to help with testing. The\n * `subscriptions` and `sharedObserver` used to be module-level variables but\n * moving to a class makes it easier to mock. Checkout the\n * `src/tests-utils/ResizeObserver.ts`\n */\nexport class ResizeObserverManager {\n  frame: number;\n  subscriptions: Map<Element, Set<TargetSubscription>>;\n\n  /**\n   * Why is there a single shared observer instead of multiple and a\n   * \"subscription\" model?\n   *\n   * Note: Probably a bit of a premature optimization right now...\n   *\n   * @see https://github.com/WICG/resize-observer/issues/59\n   * @internal\n   */\n  sharedObserver: ResizeObserver | undefined;\n\n  constructor() {\n    this.frame = 0;\n    this.subscriptions = new Map();\n  }\n\n  subscribe = (options: SubscribeOptions): Unsubscribe => {\n    const { element, onUpdate, disableHeight, disableWidth } = options;\n\n    // lazy initialize the observer\n    const observer =\n      this.sharedObserver ||\n      new ResizeObserver((entries) => {\n        // this prevents the `ResizeObserver loop limit exceeded`\n        window.cancelAnimationFrame(this.frame);\n        this.frame = window.requestAnimationFrame(() => {\n          this.handleResizeEntries(entries);\n        });\n      });\n    this.sharedObserver = observer;\n\n    const updates = this.subscriptions.get(element) || new Set();\n    const subscription: TargetSubscription = {\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    };\n    updates.add(subscription);\n    if (!this.subscriptions.has(element)) {\n      this.subscriptions.set(element, updates);\n    }\n\n    observer.observe(element);\n\n    return () => {\n      observer.unobserve(element);\n      updates.delete(subscription);\n    };\n  };\n\n  handleResizeEntries = (entries: ResizeObserverEntry[]): void => {\n    for (const entry of entries) {\n      const targetSubscriptions = this.subscriptions.get(entry.target);\n      // shouldn't really happen\n      /* c8 ignore start */\n      if (!targetSubscriptions) {\n        continue;\n      }\n      /* c8 ignore stop */\n\n      const entries = targetSubscriptions.values();\n      for (const subscription of entries) {\n        const { height, width } = entry.contentRect;\n        const { scrollHeight, scrollWidth } = entry.target;\n        const { onUpdate, size, disableHeight, disableWidth } = subscription;\n        const isHeightChange =\n          !disableHeight &&\n          (!size ||\n            size.height !== height ||\n            size.scrollHeight !== scrollHeight);\n        const isWidthChange =\n          !disableWidth &&\n          (!size || size.width !== width || size.scrollWidth !== scrollWidth);\n\n        subscription.size = {\n          height,\n          width,\n          scrollHeight,\n          scrollWidth,\n        };\n        if (isHeightChange || isWidthChange) {\n          onUpdate(entry);\n        }\n      }\n    }\n  };\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\n * @since 2.3.0\n * @since 6.0.0 Renamed from `UseResizeObserverOptions` and added\n * `onUpdate`/`disabled` options.\n */\nexport interface ResizeObserverHookOptions<E extends HTMLElement> {\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   * ResizeObserver each render.**\n   *\n   * This function will be called whenever the target element resizes.\n   *\n   * @see {@link useResizeObserver} for an example.\n   */\n  onUpdate: ResizeObserverEntryCallback;\n\n  /**\n   * Set this to `true` to prevent observing the element's size changes. This is\n   * equivalent to not attaching the returned ref to any element.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for height\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for width\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * The resize observer is used to track the size changes of a specific element.\n * For most cases you can use the {@link useElementSize} instead, but this hook\n * can be used for more complex behavior with the {@link ResizeObserverEntry}.\n *\n * @example Simple Example\n * ```tsx\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const elementRef = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       const element = entry.target;\n *       const { height, width } = entry.contentRect;\n *       const { inlineSize, blockSize } = entry.borderBoxSize[0];\n *       // do something\n *     }, []),\n *   });\n *\n *   return <div ref={elementRef}>{...whatever...}</div>\n * }\n * ```\n *\n * @since 2.3.0\n * @since 6.0.0 The API was updated to match the `useIntersectionObserver`\n * implementation -- accepts only a single object parameter and returns a\n * {@link RefCallback} instead of `[nodeRef, refCallback]`\n */\nexport function useResizeObserver<E extends HTMLElement>(\n  options: ResizeObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onUpdate,\n    disabled,\n    disableHeight = false,\n    disableWidth = false,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    if (disabled || (disableHeight && disableWidth) || !element) {\n      return;\n    }\n\n    const unsubscribe = resizeObserverManager.subscribe({\n      element,\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [disableHeight, disableWidth, disabled, onUpdate, targetNodeRef]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","ResizeObserverManager","constructor","frame","subscriptions","sharedObserver","subscribe","options","element","onUpdate","disableHeight","disableWidth","observer","ResizeObserver","entries","window","cancelAnimationFrame","requestAnimationFrame","handleResizeEntries","updates","get","Set","subscription","add","has","set","observe","unobserve","delete","entry","targetSubscriptions","target","values","height","width","contentRect","scrollHeight","scrollWidth","size","isHeightChange","isWidthChange","Map","resizeObserverManager","useResizeObserver","ref","disabled","targetNodeRef","refCallback","current","unsubscribe"],"mappings":"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"}

package/dist/useThrottledFunction.d.ts

@@ -1,13 +1,8 @@
-import type { AnyFunction } from "./types.js";
-/**
- * @remarks \@since 6.0.0
- */
-export type ThrottledFunction<F extends AnyFunction> = (...args: Parameters<F>) => ReturnType<F>;
+import { type AnyFunction, type ThrottledFunction } from "./types.js";
 /**
  * Creates a function that will only be called once every X milliseconds.
  *
- * @example
- * Throttling Search API Requests
+ * @example Throttling Search API Requests
  * ```tsx
  * import { TextField, useThrottledFunction, useUnmounted } from "@react-md/core";
  * import { useState } from "react";
@@ -77,6 +72,6 @@ export type ThrottledFunction<F extends AnyFunction> = (...args: Parameters<F>)
  *
  * @see `useDebouncedFunction` for debounce behavior instead. (Call a
  * function only if it has not been called again for X milliseconds).
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useThrottledFunction<F extends AnyFunction>(func: F, wait: number): ThrottledFunction<F>;

package/dist/useThrottledFunction.js

@@ -1,11 +1,10 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 /**
  * Creates a function that will only be called once every X milliseconds.
  *
- * @example
- * Throttling Search API Requests
+ * @example Throttling Search API Requests
  * ```tsx
  * import { TextField, useThrottledFunction, useUnmounted } from "@react-md/core";
  * import { useState } from "react";
@@ -75,7 +74,7 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
  *
  * @see `useDebouncedFunction` for debounce behavior instead. (Call a
  * function only if it has not been called again for X milliseconds).
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useThrottledFunction(func, wait) {
     const args = useRef();
     const result = useRef();
@@ -90,22 +89,28 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
             window.clearTimeout(timeout.current);
         };
     }, []);
-    return useCallback((...nextArgs)=>{
-        args.current = nextArgs;
-        const now = Date.now();
-        const remaining = wait - (now - lastCalledTime.current);
-        if (remaining <= 0 || remaining > wait) {
-            lastCalledTime.current = now;
-            result.current = funcRef.current(...args.current);
-        } else if (!timeout.current) {
-            timeout.current = window.setTimeout(()=>{
-                lastCalledTime.current = Date.now();
-                timeout.current = undefined;
-                // should exist by this time
+    return useMemo(()=>{
+        const throttled = (...nextArgs)=>{
+            args.current = nextArgs;
+            const now = Date.now();
+            const remaining = wait - (now - lastCalledTime.current);
+            if (remaining <= 0 || remaining > wait) {
+                lastCalledTime.current = now;
                 result.current = funcRef.current(...args.current);
-            }, remaining);
-        }
-        return result.current;
+            } else if (!timeout.current) {
+                timeout.current = window.setTimeout(()=>{
+                    lastCalledTime.current = Date.now();
+                    timeout.current = undefined;
+                    // should exist by this time
+                    result.current = funcRef.current(...args.current);
+                }, remaining);
+            }
+            return result.current;
+        };
+        throttled.cancel = ()=>{
+            window.clearTimeout(timeout.current);
+        };
+        return throttled;
     }, [
         wait
     ]);

package/dist/useThrottledFunction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useThrottledFunction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { AnyFunction } from \"./types.js\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = (\n  ...args: Parameters<F>\n) => ReturnType<F>;\n\n/**\n * Creates a function that will only be called once every X milliseconds.\n *\n * @example\n * Throttling Search API Requests\n * ```tsx\n * import { TextField, useThrottledFunction, useUnmounted } from \"@react-md/core\";\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 * @remarks \\@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<number | 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      window.clearTimeout(timeout.current);\n    };\n  }, []);\n\n  return useCallback(\n    (...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        result.current = funcRef.current(...args.current);\n      } else if (!timeout.current) {\n        timeout.current = window.setTimeout(() => {\n          lastCalledTime.current = Date.now();\n          timeout.current = undefined;\n          // should exist by this time\n          result.current = funcRef.current(...(args.current as Parameters<F>));\n        }, remaining);\n      }\n\n      return result.current as ReturnType<F>;\n    },\n    [wait]\n  );\n}\n"],"names":["useCallback","useEffect","useRef","useIsomorphicLayoutEffect","useThrottledFunction","func","wait","args","result","timeout","funcRef","lastCalledTime","current","window","clearTimeout","nextArgs","now","Date","remaining","setTimeout","undefined"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAEvD,SAASC,yBAAyB,QAAQ,iCAAiC;AAS3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,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;IAEAJ,UAAU;QACR,OAAO;YACLY,OAAOC,YAAY,CAACL,QAAQG,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,OAAOZ,YACL,CAAC,GAAGe;QACFR,KAAKK,OAAO,GAAGG;QAEf,MAAMC,MAAMC,KAAKD,GAAG;QACpB,MAAME,YAAYZ,OAAQU,CAAAA,MAAML,eAAeC,OAAO,AAAD;QACrD,IAAIM,aAAa,KAAKA,YAAYZ,MAAM;YACtCK,eAAeC,OAAO,GAAGI;YACzBR,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAIL,KAAKK,OAAO;QAClD,OAAO,IAAI,CAACH,QAAQG,OAAO,EAAE;YAC3BH,QAAQG,OAAO,GAAGC,OAAOM,UAAU,CAAC;gBAClCR,eAAeC,OAAO,GAAGK,KAAKD,GAAG;gBACjCP,QAAQG,OAAO,GAAGQ;gBAClB,4BAA4B;gBAC5BZ,OAAOI,OAAO,GAAGF,QAAQE,OAAO,IAAKL,KAAKK,OAAO;YACnD,GAAGM;QACL;QAEA,OAAOV,OAAOI,OAAO;IACvB,GACA;QAACN;KAAK;AAEV"}
+{"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, useThrottledFunction, useUnmounted } from \"@react-md/core\";\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<number | 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      window.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 = window.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      window.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","window","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EC,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,OAAOC,YAAY,CAACL,QAAQG,OAAO;QACrC;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,OAAOO,UAAU,CAAC;oBAClCT,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,OAAOC,YAAY,CAACL,QAAQG,OAAO;QACrC;QAEA,OAAOG;IACT,GAAG;QAACT;KAAK;AACX"}

package/dist/useToggle.d.ts

@@ -1,28 +1,27 @@
-import type { UseStateInitializer, UseStateSetter } from "./types.js";
+import { type UseStateInitializer, type UseStateSetter } from "./types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface ToggleHookReturnValue {
+export interface ToggleImplementation {
     toggled: boolean;
     setToggled: UseStateSetter<boolean>;
-    toggle(): void;
-    enable(): void;
-    disable(): void;
+    toggle: () => void;
+    enable: () => void;
+    disable: () => void;
 }
 /**
- *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Button, useToggle } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const { toggled, toggle } = useToggle();
  *
  *   return (
  *     <>
- *       <Button onClick=[toggle]>Toggle</Button>
+ *       <Button onClick={toggle}>Toggle</Button>
  *       {`Toggled: ${toggled}`}
  *     </>
  *   );
@@ -31,4 +30,4 @@ export interface ToggleHookReturnValue {
  *
  * @param defaultValue - `false`
  */
-export declare function useToggle(defaultValue?: UseStateInitializer<boolean>): Readonly<ToggleHookReturnValue>;
+export declare function useToggle(defaultValue?: UseStateInitializer<boolean>): ToggleImplementation;

package/dist/useToggle.js

@@ -1,19 +1,18 @@
 "use client";
 import { useCallback, useState } from "react";
 /**
- *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Button, useToggle } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const { toggled, toggle } = useToggle();
  *
  *   return (
  *     <>
- *       <Button onClick=[toggle]>Toggle</Button>
+ *       <Button onClick={toggle}>Toggle</Button>
  *       {`Toggled: ${toggled}`}
  *     </>
  *   );

package/dist/useToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useToggle.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ToggleHookReturnValue {\n  toggled: boolean;\n  setToggled: UseStateSetter<boolean>;\n  toggle(): void;\n  enable(): void;\n  disable(): void;\n}\n\n/**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button, useToggle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, toggle } = useToggle();\n *\n *   return (\n *     <>\n *       <Button onClick=[toggle]>Toggle</Button>\n *       {`Toggled: ${toggled}`}\n *     </>\n *   );\n * }\n * ```\n *\n * @param defaultValue - `false`\n */\nexport function useToggle(\n  defaultValue: UseStateInitializer<boolean> = false\n): Readonly<ToggleHookReturnValue> {\n  const [toggled, setToggled] = useState(defaultValue);\n\n  return {\n    toggled,\n    setToggled,\n    toggle: useCallback(() => {\n      setToggled((prevToggled) => !prevToggled);\n    }, []),\n    enable: useCallback(() => {\n      setToggled(true);\n    }, []),\n    disable: useCallback(() => {\n      setToggled(false);\n    }, []),\n  };\n}\n"],"names":["useCallback","useState","useToggle","defaultValue","toggled","setToggled","toggle","prevToggled","enable","disable"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAc9C;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,UACdC,eAA6C,KAAK;IAElD,MAAM,CAACC,SAASC,WAAW,GAAGJ,SAASE;IAEvC,OAAO;QACLC;QACAC;QACAC,QAAQN,YAAY;YAClBK,WAAW,CAACE,cAAgB,CAACA;QAC/B,GAAG,EAAE;QACLC,QAAQR,YAAY;YAClBK,WAAW;QACb,GAAG,EAAE;QACLI,SAAST,YAAY;YACnBK,WAAW;QACb,GAAG,EAAE;IACP;AACF"}
+{"version":3,"sources":["../src/useToggle.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ToggleImplementation {\n  toggled: boolean;\n  setToggled: UseStateSetter<boolean>;\n  toggle: () => void;\n  enable: () => void;\n  disable: () => void;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, toggle } = useToggle();\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       {`Toggled: ${toggled}`}\n *     </>\n *   );\n * }\n * ```\n *\n * @param defaultValue - `false`\n */\nexport function useToggle(\n  defaultValue: UseStateInitializer<boolean> = false\n): ToggleImplementation {\n  const [toggled, setToggled] = useState(defaultValue);\n\n  return {\n    toggled,\n    setToggled,\n    toggle: useCallback(() => {\n      setToggled((prevToggled) => !prevToggled);\n    }, []),\n    enable: useCallback(() => {\n      setToggled(true);\n    }, []),\n    disable: useCallback(() => {\n      setToggled(false);\n    }, []),\n  };\n}\n"],"names":["useCallback","useState","useToggle","defaultValue","toggled","setToggled","toggle","prevToggled","enable","disable"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAe9C;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,UACdC,eAA6C,KAAK;IAElD,MAAM,CAACC,SAASC,WAAW,GAAGJ,SAASE;IAEvC,OAAO;QACLC;QACAC;QACAC,QAAQN,YAAY;YAClBK,WAAW,CAACE,cAAgB,CAACA;QAC/B,GAAG,EAAE;QACLC,QAAQR,YAAY;YAClBK,WAAW;QACb,GAAG,EAAE;QACLI,SAAST,YAAY;YACnBK,WAAW;QACb,GAAG,EAAE;IACP;AACF"}

package/dist/useUnmounted.d.ts

@@ -1,7 +1,6 @@
 import type { NonNullRef } from "./types.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useUnmounted } from "@react-md/core";
  * import { useEffect, useState } from "react";
@@ -26,6 +25,6 @@ import type { NonNullRef } from "./types.js";
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useUnmounted(): NonNullRef<boolean>;

package/dist/useUnmounted.js

@@ -1,8 +1,7 @@
 "use client";
 import { useEffect, useRef } from "react";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useUnmounted } from "@react-md/core";
  * import { useEffect, useState } from "react";
@@ -27,7 +26,7 @@ import { useEffect, useRef } from "react";
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useUnmounted() {
     const unmounted = useRef(false);
     useEffect(()=>{

package/dist/useUnmounted.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useUnmounted.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef } from \"react\";\nimport type { NonNullRef } from \"./types.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useUnmounted } from \"@react-md/core\";\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 * @remarks \\@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;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,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 { 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\";\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"}

package/dist/useWindowSize.d.ts

@@ -1,18 +1,21 @@
+import { type ElementSize } from "./types.js";
+import { type ResizeListenerOptions } from "./useResizeListener.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface WindowSize {
-    height: number;
-    width: number;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export interface WindowSizeOptions extends AddEventListenerOptions {
+export interface WindowSizeOptions extends Omit<ResizeListenerOptions, "disabled" | "onUpdate"> {
     /**
-     * @defaultValue `true`
+     * The default value to use in SSR environments for the window's height.
+     *
+     * @defaultValue `0`
+     */
+    ssrHeight?: number;
+    /**
+     * The default value to use in SSR environments for the window's width.
+     *
+     * @defaultValue `0`
      */
-    throttle?: boolean;
+    ssrWidth?: number;
     /**
      * Set this to `true` to ignore resize events that only updated the height.
      * The hook can be disabled by setting this and {@link disableWidth} to
@@ -33,10 +36,9 @@ export interface WindowSizeOptions extends AddEventListenerOptions {
 /**
  * This is just a convenience wrapper around the {@link useResizeListener}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useWindowSize } from "@react-md/core";
+ * import { useWindowSize } from "@react-md/core/useWindowSize";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -52,6 +54,6 @@ export interface WindowSizeOptions extends AddEventListenerOptions {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export declare function useWindowSize(options?: WindowSizeOptions): WindowSize;
+export declare function useWindowSize(options?: WindowSizeOptions): ElementSize;

package/dist/useWindowSize.js

@@ -1,13 +1,13 @@
 "use client";
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import { useSsr } from "./SsrProvider.js";
 import { useResizeListener } from "./useResizeListener.js";
 /**
  * This is just a convenience wrapper around the {@link useResizeListener}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useWindowSize } from "@react-md/core";
+ * import { useWindowSize } from "@react-md/core/useWindowSize";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -23,14 +23,15 @@ import { useResizeListener } from "./useResizeListener.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useWindowSize(options = {}) {
-    const { once, signal, capture, passive, throttle, disableWidth, disableHeight } = options;
+    const { once, signal, capture, passive, throttle, ssrHeight = 0, ssrWidth = 0, disableWidth, disableHeight } = options;
+    const ssr = useSsr();
     const [size, setSize] = useState(()=>{
-        if (typeof window === "undefined") {
+        if (typeof window === "undefined" || ssr) {
             return {
-                height: 0,
-                width: 0
+                height: ssrHeight,
+                width: ssrWidth
             };
         }
         return {
@@ -45,7 +46,7 @@ import { useResizeListener } from "./useResizeListener.js";
         passive,
         throttle,
         disabled: disableHeight && disableWidth,
-        onUpdate () {
+        onUpdate: useCallback(()=>{
             setSize((prevSize)=>{
                 const nextSize = {
                     height: window.innerHeight,
@@ -55,7 +56,10 @@ import { useResizeListener } from "./useResizeListener.js";
                 const isWidthChange = !disableWidth && prevSize.width !== nextSize.width;
                 return isHeightChange || isWidthChange ? nextSize : prevSize;
             });
-        }
+        }, [
+            disableHeight,
+            disableWidth
+        ])
     });
     return size;
 }