@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/useIntersectionObserver.d.ts

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

package/dist/useIntersectionObserver.js

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

package/dist/useIntersectionObserver.js.map

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

package/dist/useIsomorphicLayoutEffect.js.map

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

package/dist/useMutationObserver.d.ts

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

package/dist/useMutationObserver.js

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

package/dist/useMutationObserver.js.map

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

package/dist/useOrientation.d.ts

@@ -14,7 +14,6 @@ export declare const getOrientationType: () => OrientationType;
  * support this API yet, it will polyfill that behavior using a resize handler
  * instead.
  *
- * @internal
  * @see {@link https://caniuse.com/screen-orientation}
  * @returns the current orientation type
  */

package/dist/useOrientation.js

@@ -27,13 +27,14 @@ import { useEffect, useState } from "react";
  * support this API yet, it will polyfill that behavior using a resize handler
  * instead.
  *
- * @internal
  * @see {@link https://caniuse.com/screen-orientation}
  * @returns the current orientation type
  */ export function useOrientation() {
     const [orientation, setOrientation] = useState(getOrientationType);
     useEffect(()=>{
-        const handler = ()=>setOrientation(getOrientationType());
+        const handler = ()=>{
+            setOrientation(getOrientationType());
+        };
         const { orientation } = window.screen;
         if (orientation) {
             orientation.addEventListener("change", handler);

package/dist/useOrientation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOrientation.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * An extremely simple \"polyfill\" for the `window.screen.orientation` just for\n * the `type` value that is required for the `useOrientation` hook.\n *\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the orientation type either from the `window.screen.orientation` or\n * by comparing the `availHeight` and `availWidth` on the `window.screen`\n * @internal\n */\nexport const getOrientationType = (): OrientationType => {\n  if (typeof window === \"undefined\") {\n    return \"landscape-primary\";\n  }\n\n  // Note: at the time of writing this, it looks like only Safari does not\n  // support it from my list of browsers\n  const screenOrientation = window.screen.orientation?.type;\n  if (typeof screenOrientation === \"string\") {\n    return screenOrientation;\n  }\n\n  const { availHeight, availWidth } = window.screen;\n\n  return availHeight > availWidth ? \"portrait-primary\" : \"landscape-primary\";\n};\n\n/**\n * This hook uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation} API\n * to determine if the screen is landscape or portrait. For browsers that do not\n * support this API yet, it will polyfill that behavior using a resize handler\n * instead.\n *\n * @internal\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the current orientation type\n */\nexport function useOrientation(): OrientationType {\n  const [orientation, setOrientation] = useState(getOrientationType);\n  useEffect(() => {\n    const handler = (): void => setOrientation(getOrientationType());\n\n    const { orientation } = window.screen;\n    if (orientation) {\n      orientation.addEventListener(\"change\", handler);\n    } else {\n      window.addEventListener(\"resize\", handler);\n    }\n\n    return () => {\n      if (orientation) {\n        orientation.removeEventListener(\"change\", handler);\n      } else {\n        window.removeEventListener(\"resize\", handler);\n      }\n    };\n  }, []);\n\n  return orientation;\n}\n"],"names":["useEffect","useState","getOrientationType","window","screenOrientation","screen","orientation","type","availHeight","availWidth","useOrientation","setOrientation","handler","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB;IAChC,IAAI,OAAOC,WAAW,aAAa;QACjC,OAAO;IACT;IAEA,wEAAwE;IACxE,sCAAsC;IACtC,MAAMC,oBAAoBD,OAAOE,MAAM,CAACC,WAAW,EAAEC;IACrD,IAAI,OAAOH,sBAAsB,UAAU;QACzC,OAAOA;IACT;IAEA,MAAM,EAAEI,WAAW,EAAEC,UAAU,EAAE,GAAGN,OAAOE,MAAM;IAEjD,OAAOG,cAAcC,aAAa,qBAAqB;AACzD,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,SAASC;IACd,MAAM,CAACJ,aAAaK,eAAe,GAAGV,SAASC;IAC/CF,UAAU;QACR,MAAMY,UAAU,IAAYD,eAAeT;QAE3C,MAAM,EAAEI,WAAW,EAAE,GAAGH,OAAOE,MAAM;QACrC,IAAIC,aAAa;YACfA,YAAYO,gBAAgB,CAAC,UAAUD;QACzC,OAAO;YACLT,OAAOU,gBAAgB,CAAC,UAAUD;QACpC;QAEA,OAAO;YACL,IAAIN,aAAa;gBACfA,YAAYQ,mBAAmB,CAAC,UAAUF;YAC5C,OAAO;gBACLT,OAAOW,mBAAmB,CAAC,UAAUF;YACvC;QACF;IACF,GAAG,EAAE;IAEL,OAAON;AACT"}
+{"version":3,"sources":["../src/useOrientation.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * An extremely simple \"polyfill\" for the `window.screen.orientation` just for\n * the `type` value that is required for the `useOrientation` hook.\n *\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the orientation type either from the `window.screen.orientation` or\n * by comparing the `availHeight` and `availWidth` on the `window.screen`\n * @internal\n */\nexport const getOrientationType = (): OrientationType => {\n  if (typeof window === \"undefined\") {\n    return \"landscape-primary\";\n  }\n\n  // Note: at the time of writing this, it looks like only Safari does not\n  // support it from my list of browsers\n  const screenOrientation = window.screen.orientation?.type;\n  if (typeof screenOrientation === \"string\") {\n    return screenOrientation;\n  }\n\n  const { availHeight, availWidth } = window.screen;\n\n  return availHeight > availWidth ? \"portrait-primary\" : \"landscape-primary\";\n};\n\n/**\n * This hook uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation} API\n * to determine if the screen is landscape or portrait. For browsers that do not\n * support this API yet, it will polyfill that behavior using a resize handler\n * instead.\n *\n * @see {@link https://caniuse.com/screen-orientation}\n * @returns the current orientation type\n */\nexport function useOrientation(): OrientationType {\n  const [orientation, setOrientation] = useState(getOrientationType);\n  useEffect(() => {\n    const handler = (): void => {\n      setOrientation(getOrientationType());\n    };\n\n    const { orientation } = window.screen;\n    if (orientation) {\n      orientation.addEventListener(\"change\", handler);\n    } else {\n      window.addEventListener(\"resize\", handler);\n    }\n\n    return () => {\n      if (orientation) {\n        orientation.removeEventListener(\"change\", handler);\n      } else {\n        window.removeEventListener(\"resize\", handler);\n      }\n    };\n  }, []);\n\n  return orientation;\n}\n"],"names":["useEffect","useState","getOrientationType","window","screenOrientation","screen","orientation","type","availHeight","availWidth","useOrientation","setOrientation","handler","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB;IAChC,IAAI,OAAOC,WAAW,aAAa;QACjC,OAAO;IACT;IAEA,wEAAwE;IACxE,sCAAsC;IACtC,MAAMC,oBAAoBD,OAAOE,MAAM,CAACC,WAAW,EAAEC;IACrD,IAAI,OAAOH,sBAAsB,UAAU;QACzC,OAAOA;IACT;IAEA,MAAM,EAAEI,WAAW,EAAEC,UAAU,EAAE,GAAGN,OAAOE,MAAM;IAEjD,OAAOG,cAAcC,aAAa,qBAAqB;AACzD,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAM,CAACJ,aAAaK,eAAe,GAAGV,SAASC;IAC/CF,UAAU;QACR,MAAMY,UAAU;YACdD,eAAeT;QACjB;QAEA,MAAM,EAAEI,WAAW,EAAE,GAAGH,OAAOE,MAAM;QACrC,IAAIC,aAAa;YACfA,YAAYO,gBAAgB,CAAC,UAAUD;QACzC,OAAO;YACLT,OAAOU,gBAAgB,CAAC,UAAUD;QACpC;QAEA,OAAO;YACL,IAAIN,aAAa;gBACfA,YAAYQ,mBAAmB,CAAC,UAAUF;YAC5C,OAAO;gBACLT,OAAOW,mBAAmB,CAAC,UAAUF;YACvC;QACF;IACF,GAAG,EAAE;IAEL,OAAON;AACT"}

package/dist/usePageInactive.d.ts

@@ -6,11 +6,11 @@
  * browser is no longer partially visible or becomes partially visible.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type PageInactiveType = "focus" | "visibility";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface PageInactiveOptions {
     /**
@@ -26,7 +26,7 @@ export interface PageInactiveOptions {
      * This will be called whenever the page activity changes based on the
      * {@link PageInactiveType}.
      */
-    onChange(active: boolean): void;
+    onChange: (active: boolean) => void;
     /**
      * This will be fired whenever the {@link disabled} state is `true` which can
      * be useful for clearing pending timers or resetting state.
@@ -36,12 +36,12 @@ export interface PageInactiveOptions {
      *
      * @defaultValue `() => {}`
      */
-    onDisabledCleanup?(): void;
+    onDisabledCleanup?: () => void;
 }
 /**
  * @example
  * ```ts
- * import { usePageInactive } from "@react-md/core";
+ * import { usePageInactive } from "@react-md/core/usePageInactive";
  * import { useCallback, useEffect, useRef, useState } from "react";
  *
  * function Example(): null {
@@ -52,6 +52,11 @@ export interface PageInactiveOptions {
  *       setVisible(false);
  *     }, 10000);
  *   }, []);
+ *   useEffect(() => {
+ *     return () => {
+ *       window.clearTimeout(timeout.current);
+ *     };
+ *   }, []);
  *
  *   usePageInactive({
  *     onChange(active) {
@@ -61,13 +66,13 @@ export interface PageInactiveOptions {
  *       } else {
  *         startTimeout();
  *       }
- *     }
+ *     },
  *   });
  *
  *   // pretend implementation
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function usePageInactive(options: PageInactiveOptions): void;

package/dist/usePageInactive.js

@@ -6,7 +6,7 @@ const noop = ()=>{
 /**
  * @example
  * ```ts
- * import { usePageInactive } from "@react-md/core";
+ * import { usePageInactive } from "@react-md/core/usePageInactive";
  * import { useCallback, useEffect, useRef, useState } from "react";
  *
  * function Example(): null {
@@ -17,6 +17,11 @@ const noop = ()=>{
  *       setVisible(false);
  *     }, 10000);
  *   }, []);
+ *   useEffect(() => {
+ *     return () => {
+ *       window.clearTimeout(timeout.current);
+ *     };
+ *   }, []);
  *
  *   usePageInactive({
  *     onChange(active) {
@@ -26,14 +31,14 @@ const noop = ()=>{
  *       } else {
  *         startTimeout();
  *       }
- *     }
+ *     },
  *   });
  *
  *   // pretend implementation
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function usePageInactive(options) {
     const { type = "focus", disabled, onChange, onDisabledCleanup = noop } = options;
     useEffect(()=>{

package/dist/usePageInactive.js.map

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

package/dist/useReadonlySet.d.ts

@@ -0,0 +1,77 @@
+import { type UseStateInitializer, type UseStateSetter } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface ReadonlySetOptions<T> {
+    /**
+     * Sets the behavior for when the
+     * {@link ReadonlySetImplementation.toggleValue} is triggered and mostly for
+     * internal usage. The default behavior (`"multiple"`) is to work how most
+     * would expect:
+     * - If the item does not exist in the set, add it.
+     * - If the item exists in the set, remove it.
+     *
+     * Setting this to `"single"` makes it so that only a single item can be in
+     * the set at once and will toggle like normal:
+     * - If the item does not exist in the set, return a new set only including
+     *   the item.
+     * - If the item exists in the set, return an empty set.
+     * An example usage is the `useExpansionPanels` to allow only a single panel
+     * to be expanded at a time.
+     *
+     * Setting this to `"single-select"` makes it so that only a single item can
+     * be in the set at once but will not toggle:
+     * - If the item does not exist in the set, return a new set only including
+     *   the item.
+     * - If the item exists in the set, do nothing
+     * An example usage is the `useTreeSelection` to always require at least one
+     * tree item to be selected. It is impossible to deselect an item.
+     *
+     * @defaultValue `"multiple"`
+     */
+    toggleType?: "single" | "multiple" | "single-select";
+    defaultValue?: UseStateInitializer<ReadonlySet<T> | readonly T[]>;
+}
+/**
+ * @since 6.0.0
+ */
+export interface ReadonlySetImplementation<T> {
+    value: ReadonlySet<T>;
+    setValue: UseStateSetter<ReadonlySet<T>>;
+    toggleValue: (item: T) => void;
+}
+/**
+ * The `useReadonlySet` hook is used to create a more performant lookup
+ * behavior for lists/arrays. This is most likely an internal only hook to
+ * manage state for a `ReadonlySet`. You most likely want to use one of the
+ * other hooks that leverage this instead:
+ *
+ * - `useCheckboxGroup`
+ * - `useExpansionPanels`
+ * - `useTreeSelection`
+ * - `useTreeExpansion`
+ * - etc
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { cnb } from "cnbuilder";
+ * import { useReadonlySet } from "@react-md/core/useReadonlySet";
+ *
+ * function Example() {
+ *   const { value, toggleValue } = useReadonlySet();
+ *
+ *   return (
+ *     <>
+ *       {someList.map((item) => (
+ *         <div key={item.id} className={cnb(value.has(item.id) && styles.selected)}>
+ *           {item.name}
+ *           <Button onClick={() => toggleValue(item.id)}>Button</Button>
+ *         </div>
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ * @since 6.0.0
+ */
+export declare function useReadonlySet<T>(options?: ReadonlySetOptions<T>): ReadonlySetImplementation<T>;