@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/tabs/useTabList.d.ts

@@ -2,14 +2,14 @@ import type { CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEvent
 import type { KeyboardMovementContext, KeyboardMovementProps } from "../movement/types.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-tab-width"?: string;
+        "--rmd-tab-size"?: string;
         "--rmd-tab-offset"?: string | number;
         "--rmd-tab-indicator-background"?: string;
     }
 }
-declare const TAB_WIDTH_VAR = "--rmd-tab-width";
+declare const TAB_SIZE_VAR = "--rmd-tab-size";
 declare const TAB_OFFSET_VAR = "--rmd-tab-offset";
-export type TabWidthVar = typeof TAB_WIDTH_VAR;
+export type TabWidthVar = typeof TAB_SIZE_VAR;
 export type TabOffsetVar = typeof TAB_OFFSET_VAR;
 export type IndicatorCSSProperties = CSSProperties & Record<TabWidthVar | TabOffsetVar, string>;
 export interface TabListHookOptions {

package/dist/tabs/useTabList.js

@@ -5,7 +5,7 @@ import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 import { getTabRoleOnly, scrollTabIntoView } from "./utils.js";
-const TAB_WIDTH_VAR = "--rmd-tab-width";
+const TAB_SIZE_VAR = "--rmd-tab-size";
 const TAB_OFFSET_VAR = "--rmd-tab-offset";
 const noop = ()=>{
 // do nothing
@@ -18,7 +18,7 @@ const noop = ()=>{
     const [indicatorStyles, setIndicatorStyles] = useState(()=>{
         const tabWidth = `${100 / 3}%`;
         return {
-            [TAB_WIDTH_VAR]: tabWidth,
+            [TAB_SIZE_VAR]: tabWidth,
             [TAB_OFFSET_VAR]: "0px"
         };
     });
@@ -35,19 +35,22 @@ const noop = ()=>{
             if (!activeTab) {
                 return;
             }
+            const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;
+            const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;
             const cssVars = {
-                [TAB_WIDTH_VAR]: `${activeTab.offsetWidth}px`,
-                [TAB_OFFSET_VAR]: `${activeTab.offsetLeft}px`
+                [TAB_SIZE_VAR]: `${size}px`,
+                [TAB_OFFSET_VAR]: `${offset}px`
             };
             setIndicatorStyles((prevStyles)=>{
-                if (prevStyles && prevStyles[TAB_WIDTH_VAR] === cssVars[TAB_WIDTH_VAR] && prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]) {
+                if (prevStyles && prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] && prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]) {
                     return prevStyles;
                 }
                 return cssVars;
             });
         }, [
             activeIndex,
-            isRTL
+            isRTL,
+            vertical
         ])
     });
     const forwardRef = useRef(null);

package/dist/tabs/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-width\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst TAB_WIDTH_VAR = \"--rmd-tab-width\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_WIDTH_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_WIDTH_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_WIDTH_VAR]: `${activeTab.offsetWidth}px`,\n          [TAB_OFFSET_VAR]: `${activeTab.offsetLeft}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_WIDTH_VAR] === cssVars[TAB_WIDTH_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_WIDTH_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","cssVars","offsetWidth","offsetLeft","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}
+{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL, vertical]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","size","offsetHeight","offsetWidth","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}

package/dist/test-utils/IntersectionObserver.d.ts

@@ -0,0 +1,12 @@
+export declare class IntersectionObserverMock implements IntersectionObserver {
+    callback: IntersectionObserverCallback;
+    root: Document | Element | null;
+    rootMargin: string;
+    thresholds: readonly number[];
+    elements: Set<Element>;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    observe(target: Element): void;
+    unobserve(target: Element): void;
+    takeRecords(): IntersectionObserverEntry[];
+    disconnect(): void;
+}

package/dist/test-utils/ResizeObserver.d.ts

@@ -0,0 +1,214 @@
+import { type ResizeObserverManager } from "../useResizeObserver.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ResizeObserverEntrySize {
+    height?: number;
+    width?: number;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type GetResizeObserverEntryMock = (target: Element, size?: ResizeObserverEntrySize) => ResizeObserverEntry;
+/**
+ * This is mostly an internal function to be used with the {@link ResizeObserverMock}
+ * and {@link setupResizeObserverMock}
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const createResizeObserverEntry: GetResizeObserverEntryMock;
+/**
+ * This is the default ResizeObserver implementation if it does not already
+ * exist in jsdom. You normally should not use this directly and instead use the
+ * {@link setupResizeObserverMock} instead.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare class ResizeObserverMock implements ResizeObserver {
+    callback: ResizeObserverCallback;
+    elements: Set<Element>;
+    constructor(callback: ResizeObserverCallback);
+    observe: (target: Element) => void;
+    unobserve: (target: Element) => void;
+    disconnect: () => void;
+    /**
+     * Triggers the resize event for a specific element. This must be wrapped in
+     * `act`.
+     *
+     * @example
+     * Main Usage
+     * ```tsx
+     * import {
+     *   cleanupResizeObserverAfterEach,
+     *   setupResizeObserverMock,
+     * } from "@react-md/core/test-utils";
+     * import { useResizeObserver } from "@react-md/core";
+     * import { ExampleComponent } from "../ExampleComponent.js";
+     *
+     * cleanupResizeObserverAfterEach();
+     *
+     * describe("ExampleComponent", () => {
+     *   it("should do stuff", () => {
+     *     const observer = setupResizeObserverMock();
+     *     render(<ExampleComponent />)
+     *
+     *     const resizeTarget = screen.getByTestId("resize-target")
+     *
+     *     // you can trigger with a custom change
+     *     act(() => {
+     *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });
+     *     });
+     *     // expect resize changes
+     *   });
+     * })
+     * ```
+     */
+    resizeElement: (target: Element, changesOrGetEntry?: GetResizeObserverEntryMock | ResizeObserverEntrySize | ResizeObserverEntry) => void;
+    /**
+     * You'll normally want to use {@link resizeElement} instead, but this can be
+     * used to resize all the watched elements at once.
+     *
+     * @example
+     * ```tsx
+     * import {
+     *   act,
+     *   createResizeObserverEntry,
+     *   render,
+     *   screen,
+     *   setupResizeObserverMock,
+     * } from "@react-md/core/test-utils";
+     *
+     * const observer = setupResizeObserverMock();
+     * const { container } = render(<Test />)
+     * expect(container).toMatchSnapshot()
+     *
+     * const target1 = screen.getByTestId('target-1');
+     * const target2 = screen.getByTestId('target-2');
+     * const target3 = screen.getByTestId('target-3');
+     *
+     * act(() => {
+     *   observer.resizeAllElements((element) => {
+     *     let height: number | undefined;
+     *     let width: number | undefined;
+     *     switch (element) {
+     *       case target1:
+     *         height = 400;
+     *         width = 250;
+     *         break;
+     *       case target2:
+     *         height = 100;
+     *         width = 380;
+     *         break;
+     *       case target3:
+     *         height = 24;
+     *         width = 24;
+     *         break;
+     *     }
+     *
+     *     return createResizeObserverEntry(element, { height, width });
+     *   });
+     * });
+     * expect(container).toMatchSnapshot()
+     * ```
+     */
+    resizeAllElements: (getEntry?: GetResizeObserverEntryMock) => void;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SetupResizeObserverMockOptions {
+    /**
+     * Set this to `true` to mimic the real `ResizeObserver` behavior where the
+     * updates occur after an animation frame instead of invoking immediately.
+     *
+     * Keeping this as `false` is recommended since this option was only added to
+     * make testing this function itself easier.
+     *
+     * @defaultValue `false`
+     */
+    raf?: boolean;
+    /**
+     * Keeping this as the `resizeObserverManager` is recommended since this
+     * option was only added to make testing this function easier itself.
+     *
+     * @defaultValue `resizeObserverManager`
+     */
+    manager?: ResizeObserverManager;
+}
+/**
+ * Initializes the `ResizeObserverMock` to be used for tests.
+ *
+ * @example
+ * Main Usage
+ * ```tsx
+ * import { useCallback, useState } from "react";
+ * import {
+ *   cleanupResizeObserverAfterEach,
+ *   render,
+ *   screen,
+ *   setupResizeObserverMock,
+ * } from "@react-md/core/test-utils";
+ * import { useResizeObserver } from "@react-md/core";
+ *
+ * function ExampleComponent() {
+ *   const [size, setSize] = useState({ height: 0, width: 0 });
+ *   const ref = useResizeObserver({
+ *     onUpdate: useCallback((entry) => {
+ *       setSize({
+ *         height: entry.contentRect.height,
+ *         width: entry.contentRect.width,
+ *       });
+ *     });
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <div data-testid="size">{JSON.stringify(size)}</div>
+ *       <div data-testid="resize-target" ref={ref} />
+ *     </>
+ *   );
+ * }
+ *
+ * cleanupResizeObserverAfterEach();
+ *
+ * describe("ExampleComponent", () => {
+ *   it("should do stuff", () => {
+ *     const observer = setupResizeObserverMock();
+ *     render(<ExampleComponent />)
+ *
+ *     const size = screen.getByTestId("size");
+ *     const resizeTarget = screen.getByTestId("resize-target")
+ *
+ *     // jsdom sets all element sizes to 0 by default
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));
+ *
+ *     // you can trigger with a custom change
+ *     act(() => {
+ *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });
+ *     });
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));
+ *
+ *     // or you can mock the `getBoundingClientRect` result
+ *     jest.spyOn(resizeTarget, "getBoundingClientRect")
+ *       .mockReturnValue({
+ *         ...document.body.getBoundingClientRect(),
+ *         height: 200,
+ *         width: 200,
+ *       }):
+ *
+ *     act(() => {
+ *       observer.resizeElement(resizeTarget);
+ *     });
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));
+ *   });
+ * })
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function setupResizeObserverMock(options?: SetupResizeObserverMockOptions): ResizeObserverMock;
+/**
+ * @see {@link setupResizeObserverMock}
+ * @remarks \@since 6.0.0
+ */
+export declare function cleanupResizeObserverAfterEach(restoreAllMocks?: boolean): void;

package/dist/test-utils/ResizeObserver.js

@@ -62,33 +62,12 @@ import { resizeObserverManager } from "../useResizeObserver.js";
    * @example
    * Main Usage
    * ```tsx
-   * import { useCallback, useState } from "react";
    * import {
    *   cleanupResizeObserverAfterEach,
-   *   render,
-   *   screen,
    *   setupResizeObserverMock,
    * } from "@react-md/core/test-utils";
    * import { useResizeObserver } from "@react-md/core";
-   *
-   * function ExampleComponent() {
-   *   const [size, setSize] = useState({ height: 0, width: 0 });
-   *   const ref = useResizeObserver({
-   *     onUpdate: useCallback((entry) => {
-   *       setSize({
-   *         height: entry.contentRect.height,
-   *         width: entry.contentRect.width,
-   *       });
-   *     });
-   *   });
-   *
-   *   return (
-   *     <>
-   *       <div data-testid="size">{JSON.stringify(size)}</div>
-   *       <div data-testid="resize-target" ref={ref} />
-   *     </>
-   *   );
-   * }
+   * import { ExampleComponent } from "../ExampleComponent.js";
    *
    * cleanupResizeObserverAfterEach();
    *
@@ -97,30 +76,13 @@ import { resizeObserverManager } from "../useResizeObserver.js";
    *     const observer = setupResizeObserverMock();
    *     render(<ExampleComponent />)
    *
-   *     const size = screen.getByTestId("size");
    *     const resizeTarget = screen.getByTestId("resize-target")
    *
-   *     // jsdom sets all element sizes to 0 by default
-   *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));
-   *
    *     // you can trigger with a custom change
    *     act(() => {
    *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });
    *     });
-   *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));
-   *
-   *     // or you can mock the `getBoundingClientRect` result
-   *     jest.spyOn(resizeTarget, "getBoundingClientRect")
-   *       .mockReturnValue({
-   *         ...document.body.getBoundingClientRect(),
-   *         height: 200,
-   *         width: 200,
-   *       }):
-   *
-   *     act(() => {
-   *       observer.resizeElement(resizeTarget);
-   *     });
-   *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));
+   *     // expect resize changes
    *   });
    * })
    * ```
@@ -211,17 +173,75 @@ import { resizeObserverManager } from "../useResizeObserver.js";
 /**
  * Initializes the `ResizeObserverMock` to be used for tests.
  *
- * @see {@link ResizeObserverMock.resizeElement} for example usage.
+ * @example
+ * Main Usage
+ * ```tsx
+ * import { useCallback, useState } from "react";
+ * import {
+ *   cleanupResizeObserverAfterEach,
+ *   render,
+ *   screen,
+ *   setupResizeObserverMock,
+ * } from "@react-md/core/test-utils";
+ * import { useResizeObserver } from "@react-md/core";
  *
- * @param raf - set this to `true` to mimic the real ResizeObserver behavior
- * where the updates occur after an animation frame instead of invoking
- * immediately
- * @param manager - a custom {@link resizeObserverManager} to use for your
- * tests. You most likely should **not** use this option since it was added to
- * help testing this function itself.
+ * function ExampleComponent() {
+ *   const [size, setSize] = useState({ height: 0, width: 0 });
+ *   const ref = useResizeObserver({
+ *     onUpdate: useCallback((entry) => {
+ *       setSize({
+ *         height: entry.contentRect.height,
+ *         width: entry.contentRect.width,
+ *       });
+ *     });
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <div data-testid="size">{JSON.stringify(size)}</div>
+ *       <div data-testid="resize-target" ref={ref} />
+ *     </>
+ *   );
+ * }
+ *
+ * cleanupResizeObserverAfterEach();
+ *
+ * describe("ExampleComponent", () => {
+ *   it("should do stuff", () => {
+ *     const observer = setupResizeObserverMock();
+ *     render(<ExampleComponent />)
+ *
+ *     const size = screen.getByTestId("size");
+ *     const resizeTarget = screen.getByTestId("resize-target")
+ *
+ *     // jsdom sets all element sizes to 0 by default
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));
+ *
+ *     // you can trigger with a custom change
+ *     act(() => {
+ *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });
+ *     });
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));
+ *
+ *     // or you can mock the `getBoundingClientRect` result
+ *     jest.spyOn(resizeTarget, "getBoundingClientRect")
+ *       .mockReturnValue({
+ *         ...document.body.getBoundingClientRect(),
+ *         height: 200,
+ *         width: 200,
+ *       }):
+ *
+ *     act(() => {
+ *       observer.resizeElement(resizeTarget);
+ *     });
+ *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));
+ *   });
+ * })
+ * ```
  *
  * @remarks \@since 6.0.0
- */ export const setupResizeObserverMock = (raf = false, manager = resizeObserverManager)=>{
+ */ export function setupResizeObserverMock(options = {}) {
+    const { raf, manager = resizeObserverManager } = options;
     const resizeObserver = new ResizeObserverMock((entries)=>{
         if (raf) {
             window.cancelAnimationFrame(manager.frame);
@@ -234,7 +254,7 @@ import { resizeObserverManager } from "../useResizeObserver.js";
     });
     manager.sharedObserver = resizeObserver;
     return resizeObserver;
-};
+}
 /**
  * @see {@link setupResizeObserverMock}
  * @remarks \@since 6.0.0

package/dist/test-utils/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/ResizeObserver.ts"],"sourcesContent":["import { afterEach, jest } from \"@jest/globals\";\nimport { resizeObserverManager } from \"../useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ResizeObserverEntrySize {\n  height?: number;\n  width?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type GetResizeObserverEntryMock = (\n  target: Element,\n  size?: ResizeObserverEntrySize\n) => ResizeObserverEntry;\n\n/**\n * This is mostly an internal function to be used with the {@link ResizeObserverMock}\n * and {@link setupResizeObserverMock}\n *\n * @remarks \\@since 6.0.0\n */\nexport const createResizeObserverEntry: GetResizeObserverEntryMock = (\n  target,\n  size\n) => {\n  const contentRect = target.getBoundingClientRect();\n  if (typeof size?.height === \"number\") {\n    contentRect.height = size.height;\n  }\n  if (typeof size?.width === \"number\") {\n    contentRect.width = size.width;\n  }\n\n  const boxSize: ResizeObserverSize = {\n    blockSize: contentRect.height,\n    inlineSize: contentRect.width,\n  };\n\n  return {\n    target,\n    contentRect,\n    borderBoxSize: [boxSize],\n    contentBoxSize: [boxSize],\n    devicePixelContentBoxSize: [],\n  };\n};\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @remarks \\@since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example\n   * Main Usage\n   * ```tsx\n   * import { useCallback, useState } from \"react\";\n   * import {\n   *   cleanupResizeObserverAfterEach,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core\";\n   *\n   * function ExampleComponent() {\n   *   const [size, setSize] = useState({ height: 0, width: 0 });\n   *   const ref = useResizeObserver({\n   *     onUpdate: useCallback((entry) => {\n   *       setSize({\n   *         height: entry.contentRect.height,\n   *         width: entry.contentRect.width,\n   *       });\n   *     });\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n   *       <div data-testid=\"resize-target\" ref={ref} />\n   *     </>\n   *   );\n   * }\n   *\n   * cleanupResizeObserverAfterEach();\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const size = screen.getByTestId(\"size\");\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // jsdom sets all element sizes to 0 by default\n   *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n   *\n   *     // or you can mock the `getBoundingClientRect` result\n   *     jest.spyOn(resizeTarget, \"getBoundingClientRect\")\n   *       .mockReturnValue({\n   *         ...document.body.getBoundingClientRect(),\n   *         height: 200,\n   *         width: 200,\n   *       }):\n   *\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget);\n   *     });\n   *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @see {@link ResizeObserverMock.resizeElement} for example usage.\n *\n * @param raf - set this to `true` to mimic the real ResizeObserver behavior\n * where the updates occur after an animation frame instead of invoking\n * immediately\n * @param manager - a custom {@link resizeObserverManager} to use for your\n * tests. You most likely should **not** use this option since it was added to\n * help testing this function itself.\n *\n * @remarks \\@since 6.0.0\n */\nexport const setupResizeObserverMock = (\n  raf = false,\n  manager = resizeObserverManager\n): ResizeObserverMock => {\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n};\n\n/**\n * @see {@link setupResizeObserverMock}\n * @remarks \\@since 6.0.0\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n\n    if (restoreAllMocks) {\n      jest.restoreAllMocks();\n    }\n  });\n}\n"],"names":["afterEach","jest","resizeObserverManager","createResizeObserverEntry","target","size","contentRect","getBoundingClientRect","height","width","boxSize","blockSize","inlineSize","borderBoxSize","contentBoxSize","devicePixelContentBoxSize","ResizeObserverMock","constructor","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupResizeObserverAfterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../src/test-utils/ResizeObserver.ts"],"sourcesContent":["import { afterEach, jest } from \"@jest/globals\";\nimport {\n  resizeObserverManager,\n  type ResizeObserverManager,\n} from \"../useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ResizeObserverEntrySize {\n  height?: number;\n  width?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type GetResizeObserverEntryMock = (\n  target: Element,\n  size?: ResizeObserverEntrySize\n) => ResizeObserverEntry;\n\n/**\n * This is mostly an internal function to be used with the {@link ResizeObserverMock}\n * and {@link setupResizeObserverMock}\n *\n * @remarks \\@since 6.0.0\n */\nexport const createResizeObserverEntry: GetResizeObserverEntryMock = (\n  target,\n  size\n) => {\n  const contentRect = target.getBoundingClientRect();\n  if (typeof size?.height === \"number\") {\n    contentRect.height = size.height;\n  }\n  if (typeof size?.width === \"number\") {\n    contentRect.width = size.width;\n  }\n\n  const boxSize: ResizeObserverSize = {\n    blockSize: contentRect.height,\n    inlineSize: contentRect.width,\n  };\n\n  return {\n    target,\n    contentRect,\n    borderBoxSize: [boxSize],\n    contentBoxSize: [boxSize],\n    devicePixelContentBoxSize: [],\n  };\n};\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @remarks \\@since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example\n   * Main Usage\n   * ```tsx\n   * import {\n   *   cleanupResizeObserverAfterEach,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core\";\n   * import { ExampleComponent } from \"../ExampleComponent.js\";\n   *\n   * cleanupResizeObserverAfterEach();\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     // expect resize changes\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SetupResizeObserverMockOptions {\n  /**\n   * Set this to `true` to mimic the real `ResizeObserver` behavior where the\n   * updates occur after an animation frame instead of invoking immediately.\n   *\n   * Keeping this as `false` is recommended since this option was only added to\n   * make testing this function itself easier.\n   *\n   * @defaultValue `false`\n   */\n  raf?: boolean;\n\n  /**\n   * Keeping this as the `resizeObserverManager` is recommended since this\n   * option was only added to make testing this function easier itself.\n   *\n   * @defaultValue `resizeObserverManager`\n   */\n  manager?: ResizeObserverManager;\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @example\n * Main Usage\n * ```tsx\n * import { useCallback, useState } from \"react\";\n * import {\n *   cleanupResizeObserverAfterEach,\n *   render,\n *   screen,\n *   setupResizeObserverMock,\n * } from \"@react-md/core/test-utils\";\n * import { useResizeObserver } from \"@react-md/core\";\n *\n * function ExampleComponent() {\n *   const [size, setSize] = useState({ height: 0, width: 0 });\n *   const ref = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       setSize({\n *         height: entry.contentRect.height,\n *         width: entry.contentRect.width,\n *       });\n *     });\n *   });\n *\n *   return (\n *     <>\n *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n *       <div data-testid=\"resize-target\" ref={ref} />\n *     </>\n *   );\n * }\n *\n * cleanupResizeObserverAfterEach();\n *\n * describe(\"ExampleComponent\", () => {\n *   it(\"should do stuff\", () => {\n *     const observer = setupResizeObserverMock();\n *     render(<ExampleComponent />)\n *\n *     const size = screen.getByTestId(\"size\");\n *     const resizeTarget = screen.getByTestId(\"resize-target\")\n *\n *     // jsdom sets all element sizes to 0 by default\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n *\n *     // you can trigger with a custom change\n *     act(() => {\n *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n *\n *     // or you can mock the `getBoundingClientRect` result\n *     jest.spyOn(resizeTarget, \"getBoundingClientRect\")\n *       .mockReturnValue({\n *         ...document.body.getBoundingClientRect(),\n *         height: 200,\n *         width: 200,\n *       }):\n *\n *     act(() => {\n *       observer.resizeElement(resizeTarget);\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n *   });\n * })\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function setupResizeObserverMock(\n  options: SetupResizeObserverMockOptions = {}\n): ResizeObserverMock {\n  const { raf, manager = resizeObserverManager } = options;\n\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n}\n\n/**\n * @see {@link setupResizeObserverMock}\n * @remarks \\@since 6.0.0\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n\n    if (restoreAllMocks) {\n      jest.restoreAllMocks();\n    }\n  });\n}\n"],"names":["afterEach","jest","resizeObserverManager","createResizeObserverEntry","target","size","contentRect","getBoundingClientRect","height","width","boxSize","blockSize","inlineSize","borderBoxSize","contentBoxSize","devicePixelContentBoxSize","ResizeObserverMock","constructor","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","options","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupResizeObserverAfterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":"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"}

package/dist/test-utils/data-testid.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare module "react" {
+    interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
+        "data-testid"?: string | number;
+    }
+}
+export {};

package/dist/test-utils/data-testid.js

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+
+//# sourceMappingURL=data-testid.js.map

package/dist/test-utils/data-testid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/test-utils/data-testid.ts"],"sourcesContent":["/// <reference types=\"react\" />\n\ndeclare module \"react\" {\n  interface HTMLAttributes<T>\n    extends React.AriaAttributes,\n      React.DOMAttributes<T> {\n    \"data-testid\"?: string | number;\n  }\n}\n"],"names":[],"mappings":"AAAA,+BAA+B"}

package/dist/test-utils/drag.d.ts

@@ -0,0 +1,26 @@
+interface XYCoords {
+    x: number;
+    y: number;
+}
+interface BaseDragOptions {
+    to?: XYCoords | Element;
+    delta?: XYCoords;
+    steps?: number;
+    duration?: number;
+}
+type DragOptions = BaseDragOptions & ({
+    to: XYCoords | Element;
+    delta?: never;
+} | {
+    delta: XYCoords;
+    to?: never;
+});
+/**
+ * This is internal for now. No idea if it's actually worthwhile though since
+ * you have to mock the `getBoundingClientRect()` to work.
+ *
+ * @internal
+ * @see https://github.com/testing-library/testing-library-docs/blob/c20f8a8931e9f0a158fda9f01bbea8cb45ed1651/docs/example-drag.mdx
+ */
+export declare function drag(element: Element, options: DragOptions): Promise<void>;
+export {};

package/dist/test-utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from "@testing-library/react";
+export * from "@testing-library/user-event";
+export * from "./IntersectionObserver.js";
+export * from "./ResizeObserver.js";
+export * from "./matchMedia.js";
+export * from "./render.js";
+export * from "./timers.js";

package/dist/test-utils/jest-setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-utils/jest-setup.js

@@ -1,10 +1,13 @@
 import { beforeEach } from "@jest/globals";
 import { INTERACTION_CONFIG } from "../interaction/config.js";
+import { TRANSITION_CONFIG } from "../transition/config.js";
 beforeEach(()=>{
     // set the mode to `none` in tests since ripples require
     // `getBoundingClientRect()` to create correct CSS. You'll either see warnings
     // in the console around invalid css values or `NaN`.
     INTERACTION_CONFIG.mode = "none";
+    // disable transitions in tests since it just makes it more difficult
+    TRANSITION_CONFIG.disabled = true;
 });
 
 //# sourceMappingURL=jest-setup.js.map

package/dist/test-utils/jest-setup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/jest-setup.ts"],"sourcesContent":["import { beforeEach } from \"@jest/globals\";\nimport { INTERACTION_CONFIG } from \"../interaction/config.js\";\n\nbeforeEach(() => {\n  // set the mode to `none` in tests since ripples require\n  // `getBoundingClientRect()` to create correct CSS. You'll either see warnings\n  // in the console around invalid css values or `NaN`.\n  INTERACTION_CONFIG.mode = \"none\";\n});\n"],"names":["beforeEach","INTERACTION_CONFIG","mode"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,kBAAkB,QAAQ,2BAA2B;AAE9DD,WAAW;IACT,wDAAwD;IACxD,8EAA8E;IAC9E,qDAAqD;IACrDC,mBAAmBC,IAAI,GAAG;AAC5B"}
+{"version":3,"sources":["../../src/test-utils/jest-setup.ts"],"sourcesContent":["import { beforeEach } from \"@jest/globals\";\nimport { INTERACTION_CONFIG } from \"../interaction/config.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\n\nbeforeEach(() => {\n  // set the mode to `none` in tests since ripples require\n  // `getBoundingClientRect()` to create correct CSS. You'll either see warnings\n  // in the console around invalid css values or `NaN`.\n  INTERACTION_CONFIG.mode = \"none\";\n\n  // disable transitions in tests since it just makes it more difficult\n  TRANSITION_CONFIG.disabled = true;\n});\n"],"names":["beforeEach","INTERACTION_CONFIG","TRANSITION_CONFIG","mode","disabled"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5DF,WAAW;IACT,wDAAwD;IACxD,8EAA8E;IAC9E,qDAAqD;IACrDC,mBAAmBE,IAAI,GAAG;IAE1B,qEAAqE;IACrED,kBAAkBE,QAAQ,GAAG;AAC/B"}