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

package/src/suspense/CircularProgressSuspense.tsx

@@ -22,7 +22,7 @@ export interface CircularProgressSuspenseProps extends CircularProgressProps {
  *
  * @example Simple Example
  * ```tsx
- * import { CircularProgressSuspense } from "@react-md/core";
+ * import { CircularProgressSuspense } from "@react-md/core/suspense/CircularProgressSuspense";
  * import type { ReactElement } from "react";
  * import { lazy } from "react";
  *
@@ -37,6 +37,7 @@ export interface CircularProgressSuspenseProps extends CircularProgressProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/suspense | Suspense Demos}
  * @since 6.0.0
  */
 export function CircularProgressSuspense(

package/src/suspense/NullSuspense.tsx

@@ -12,7 +12,7 @@ export interface NullSuspenseProps {
  *
  * @example Simple Example
  * ```tsx
- * import { NullSuspense } from "@react-md/core";
+ * import { NullSuspense } from "@react-md/core/suspense/NullSuspense";
  * import type { ReactElement } from "react";
  * import { lazy } from "react";
  *
@@ -27,6 +27,7 @@ export interface NullSuspenseProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/suspense | Suspense Demos}
  * @since 6.0.0
  */
 export function NullSuspense(props: NullSuspenseProps): ReactElement {

package/src/table/StickyTableSection.tsx

@@ -35,6 +35,8 @@ export interface StickyTableSectionProps
  * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering
  * content in the table.
  *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
+ * @see {@link https://next.react-md.dev/components/table#sticky-tables | Sticky Table Demos}
  * @since 6.0.0
  */
 export const StickyTableSection = forwardRef<

package/src/table/Table.tsx

@@ -35,14 +35,12 @@ export interface TableProps
  *
  * @example Responsive Example
  * ```tsx
- * import {
- *   Table,
- *   TableBody,
- *   TableCell,
- *   TableContainer,
- *   TableHeader,
- *   TableRow,
- * } from "@react-md/core";
+ * import { Table } from "@react-md/core/table/Table";
+ * import { TableBody } from "@react-md/core/table/TableBody";
+ * import { TableCell } from "@react-md/core/table/TableCell";
+ * import { TableContainer } from "@react-md/core/table/TableContainer";
+ * import { TableHeader } from "@react-md/core/table/TableHeader";
+ * import { TableRow } from "@react-md/core/table/TableRow";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -78,6 +76,8 @@ export interface TableProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const Table = forwardRef<HTMLTableElement, TableProps>(
   function Table(props, ref) {

package/src/table/TableBody.tsx

@@ -18,6 +18,8 @@ export interface TableBodyProps
  *
  * Creates a `<tbody>` element that also allows for overriding all the child
  * `TableCell` components with additional styling behavior.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   function TableBody(props, ref) {

package/src/table/TableCell.tsx

@@ -149,8 +149,10 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
    *
    * @example
    * ```tsx
-   * import type { SortOrder } from "@react-md/core";
-   * import { Button, Dialog, TableCell } from "@react-md/core";
+   * import { Button } from "@react-md/core/button/Button";
+   * import { Dialog } from "@react-md/core/dialog/Dialog";
+   * import { TableCell } from "@react-md/core/table/TableCell";
+   * import { type SortOrder } from "@react-md/core/table/types";
    * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
    * import type { ReactElement } from "react";
    * import { useState } from "react";
@@ -211,6 +213,8 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
  * labels, you will need to manually set the `header={false}` prop for that cell
  * since it is invalid to have a `<th>` without any readable content for screen
  * readers.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   function TableCell(props, ref) {

package/src/table/TableCheckbox.tsx

@@ -44,7 +44,7 @@ export type TableCheckboxSupportedCheckboxProps = Pick<
  * will automatically be generated as `"checkbox" + useId()`. Use the {@link checkboxProps}
  * to set an `id` manually for the checkbox.
  * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.
- * @since 6,0.0 The default `aria-label` was changed from
+ * @since 6.0.0 The default `aria-label` was changed from
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
 export interface TableCheckboxProps
@@ -83,16 +83,14 @@ export interface TableCheckboxProps
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Table,
- *   TableBody,
- *   TableCell,
- *   TableCheckbox,
- *   TableContainer,
- *   TableHeader,
- *   TableRow,
- *   useCheckboxGroup
- * } from "@react-md/core";
+ * import { useCheckboxGroup } from "@react-md/core/form/useCheckboxGroup";
+ * import { Table } from "@react-md/core/table/Table";
+ * import { TableBody } from "@react-md/core/table/TableBody";
+ * import { TableCell } from "@react-md/core/table/TableCell";
+ * import { TableCheckbox } from "@react-md/core/table/TableCheckbox";
+ * import { TableContainer } from "@react-md/core/table/TableContainer";
+ * import { TableHeader } from "@react-md/core/table/TableHeader";
+ * import { TableRow } from "@react-md/core/table/TableRow";
  * import { type ReactElement } from "react";
  *
  * const rows = [
@@ -142,11 +140,12 @@ export interface TableCheckboxProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  * @since 6.0.0 The `id` prop is no longer required since the checkbox's id
  * will automatically be generated as `"checkbox" + useId()`. Use the {@link checkboxProps}
  * to set an `id` manually for the checkbox.
  * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.
- * @since 6,0.0 The default `aria-label` was changed from
+ * @since 6.0.0 The default `aria-label` was changed from
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
 export const TableCheckbox = forwardRef<

package/src/table/TableContainer.tsx

@@ -18,6 +18,8 @@ export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
  * component if you want to make a responsive table within the page. If you
  * don't want to use this component, you can just apply `overflow: auto` to a
  * parent element of the table.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
   function TableContainer(props, ref) {

package/src/table/TableFooter.tsx

@@ -29,6 +29,8 @@ export interface TableFooterProps
  * disable the hover effect and line wrapping by default, but the hover effect
  * and line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableFooter = forwardRef<
   HTMLTableSectionElement,

package/src/table/TableHeader.tsx

@@ -31,6 +31,8 @@ export interface TableHeaderProps
  * disabling the hover effect and line wrapping. The hover effect and
  * line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableHeader = forwardRef<
   HTMLTableSectionElement,

package/src/table/TableRadio.tsx

@@ -54,14 +54,14 @@ export interface TableRadioProps
   sticky?: boolean;
 
   /**
-   * This allows you to override any props for the checkbox that are not
+   * This allows you to override any props for the radio that are not
    * configurable as top-level props.
    *
    * @example Simple Example
    * ```tsx
-   * checkboxProps={{
+   * radioProps={{
    *   id: "some-custom-id",
-   *   ref: checkboxRef,
+   *   ref: radioRef,
    * }}
    * ```
    *
@@ -78,16 +78,14 @@ export interface TableRadioProps
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Table,
- *   TableBody,
- *   TableCell,
- *   TableRadio,
- *   TableContainer,
- *   TableHeader,
- *   TableRow,
- *   useRadioGroup,
- * } from "@react-md/core";
+ * import { useRadioGroup } from "@react-md/core/form/useRadioGroup";
+ * import { Table } from "@react-md/core/table/Table";
+ * import { TableBody } from "@react-md/core/table/TableBody";
+ * import { TableCell } from "@react-md/core/table/TableCell";
+ * import { TableContainer } from "@react-md/core/table/TableContainer";
+ * import { TableHeader } from "@react-md/core/table/TableHeader";
+ * import { TableRadio } from "@react-md/core/table/TableRadio";
+ * import { TableRow } from "@react-md/core/table/TableRow";
  * import type { ReactElement } from "react";
  *
  * const rows = [
@@ -135,6 +133,8 @@ export interface TableRadioProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  * @since 6.0.0
  */
 export const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(

package/src/table/TableRow.tsx

@@ -31,6 +31,8 @@ export interface TableRowProps
  *
  * Creates a `<tr>` element with some general styles that are inherited from the
  * base table configuration.
+ *
+ * @see {@link https://next.react-md.dev/components/table | Table Demos}
  */
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   function TableRow(props, ref) {

package/src/table/tableCellStyles.ts

@@ -77,11 +77,11 @@ export function tableCell(options: TableCellClassNameOptions = {}): string {
     sticky && isInTableHeader && `${p}sticky-header`,
     sticky && isInTableHeader && inputToggle && `${p}header-cell`,
     vAlign && vAlign !== "middle" && `${p}${vAlign}`,
-    !lineWrap && `${p}no-wrap`,
     padding === "vertical" && `${p}v-padding`,
     padding === "none" && `${p}no-padding`,
     cssUtils({
       textAlign: hAlign,
+      textOverflow: lineWrap ? undefined : "ellipsis",
     }),
     className
   );

package/src/tabs/SimpleTabPanel.tsx

@@ -19,6 +19,8 @@ export interface SimpleTabPanelProps
  *
  * This should generally be used along with the `SimpleTabPanels` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
 export const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(

package/src/tabs/SimpleTabPanels.tsx

@@ -17,6 +17,8 @@ export interface SimpleTabPanelsProps
  *
  * This should be normally be used along with the `SimpleTabPanel` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
 export const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(

package/src/tabs/Tab.tsx

@@ -19,6 +19,26 @@ import { tab } from "./tabStyles.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-tab-color"?: string;
+    "--rmd-tab-active-color"?: string;
+    "--rmd-tab-inactive-color"?: string;
+    "--rmd-tab-disabled-color"?: string;
+
+    "--rmd-tab-size"?: string;
+    "--rmd-tab-offset"?: string | number;
+    "--rmd-tab-min-width"?: string;
+    "--rmd-tab-max-width"?: string;
+    "--rmd-tab-min-height"?: string;
+    "--rmd-tab-stacked-height"?: string;
+    "--rmd-tab-stacked-width"?: string;
+    "--rmd-tab-padding"?: string | number;
+    "--rmd-tab-stacked-padding"?: string | number;
+    "--rmd-tab-indicator-background"?: string;
+  }
+}
+
 /**
  * @since 6.0.0
  */
@@ -101,8 +121,8 @@ export type TabProps = TabButtonProps | TabLinkProps;
  * This component should usually be used with the `TabsList` component and
  * `useTabs` hook.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs}
- *
  * @since 6.0.0
  */
 export function Tab(props: TabProps): ReactElement {

package/src/tabs/TabList.tsx

@@ -114,8 +114,8 @@ export interface TabListProps
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs} for example usage.
- *
  * @since 6.0.0
  */
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(

package/src/tabs/TabListScrollButton.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
-import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
+import { type ButtonClassNameThemeOptions } from "../button/styles.js";
 import { getIcon } from "../icon/config.js";
 import { type PropsWithRef } from "../types.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";

package/src/tabs/tabStyles.ts

@@ -4,26 +4,6 @@ import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 import { tabIndicator } from "./tabIndicatorStyles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tab-color"?: string;
-    "--rmd-tab-active-color"?: string;
-    "--rmd-tab-inactive-color"?: string;
-    "--rmd-tab-disabled-color"?: string;
-
-    "--rmd-tab-size"?: string;
-    "--rmd-tab-offset"?: string | number;
-    "--rmd-tab-min-width"?: string;
-    "--rmd-tab-max-width"?: string;
-    "--rmd-tab-min-height"?: string;
-    "--rmd-tab-stacked-height"?: string;
-    "--rmd-tab-stacked-width"?: string;
-    "--rmd-tab-padding"?: string | number;
-    "--rmd-tab-stacked-padding"?: string | number;
-    "--rmd-tab-indicator-background"?: string;
-  }
-}
-
 const styles = bem("rmd-tab");
 
 /**

package/src/tabs/useTabs.ts

@@ -181,6 +181,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export function useTabs(): TabsImplementation & {
@@ -234,6 +235,7 @@ export function useTabs(): TabsImplementation & {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export function useTabs<TabValue extends number>(
@@ -301,6 +303,7 @@ export function useTabs<TabValue extends number>(
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export function useTabs<TabValue extends string>(
@@ -410,6 +413,7 @@ export function useTabs<TabValue extends string>(
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export function useTabs<TabValue extends string>(
@@ -424,6 +428,7 @@ export function useTabs<TabValue extends string>(
  * This hook can be uncontrolled/controlled and supports strongly typing the tab
  * values if needed. Check out the overloads for examples.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export function useTabs<TabValue extends string | number>(
@@ -443,7 +448,7 @@ export function useTabs<TabValue extends string | number>(
   } = options;
 
   const baseId = useEnsuredId(propBaseId, "tab");
-  const [direction, setDirection] = useState<SlideDirection>("left");
+  const [direction, setDirection] = useState<SlideDirection>("forward");
 
   const [activeTab, setActiveTab] = useEnsuredState({
     value: propActiveTab,
@@ -489,7 +494,7 @@ export function useTabs<TabValue extends string | number>(
       return {
         activeIndex,
         setActiveIndex: (nextActiveIndex) => {
-          setDirection(activeIndex < nextActiveIndex ? "left" : "right");
+          setDirection(activeIndex < nextActiveIndex ? "forward" : "backward");
           if (typeof activeTab === "string" || tabs.length > 0) {
             setActiveTab(tabs[nextActiveIndex]);
           } else {

package/src/test-utils/jest-globals/match-media.ts

@@ -2,9 +2,10 @@ import { jest } from "@jest/globals";
 
 import {
   type MatchMediaChangeViewport,
-  createMatchMediaSpy,
-} from "../mocks/match-media-implementation.js";
-import { type MatchMediaMatcher, matchDesktop } from "../mocks/match-media.js";
+  type MatchMediaMatcher,
+  matchDesktop,
+} from "../mocks/match-media.js";
+import { createMatchMediaSpy } from "../utils/createMatchMediaSpy.js";
 
 /**
  * @example Default Behavior

package/src/test-utils/jest-globals/resize-observer.ts

@@ -1,11 +1,11 @@
 import { afterEach, jest } from "@jest/globals";
 
-import { cleanupResizeObserverAfterEach as cleanup } from "../mocks/ResizeObserver.js";
+import { cleanupRO } from "../mocks/ResizeObserver.js";
 
 /**
  * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being
  * called.
  */
 export function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {
-  cleanup(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);
+  cleanupRO(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);
 }

package/src/test-utils/mocks/ResizeObserver.ts

@@ -42,18 +42,17 @@ export class ResizeObserverMock implements ResizeObserver {
    * @example Main Usage
    * ```tsx
    * import {
-   *   cleanupResizeObserverAfterEach,
    *   setupResizeObserverMock,
    * } from "@react-md/core/test-utils";
-   * import { useResizeObserver } from "@react-md/core";
+   * import { useResizeObserver } from "@react-md/core/useResizeObserver";
    * import { ExampleComponent } from "../ExampleComponent.js";
    *
    * // choose your test framework
-   * import { afterEach, jest } from "@jest/globals";
-   * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+   * import { afterEach, cleanupResizeObserverAfterEach, jest } from "@jest/globals";
+   * cleanupResizeObserverAfterEach();
    *
-   * import { afterEach, vitest } from "vitest";
-   * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
+   * import { afterEach, cleanupResizeObserverAfterEach, vitest } from "vitest";
+   * cleanupResizeObserverAfterEach();
    *
    * describe("ExampleComponent", () => {
    *   it("should do stuff", () => {
@@ -269,8 +268,9 @@ export function setupResizeObserverMock(
 /**
  * @see {@link setupResizeObserverMock}
  * @since 6.0.0
+ * @internal
  */
-export function cleanupResizeObserverAfterEach(
+export function cleanupRO(
   afterEach: (callback: () => void) => void,
   restoreAllMocks: () => void = () => {}
 ): void {

package/src/test-utils/mocks/match-media.ts

@@ -5,6 +5,38 @@ import {
   DEFAULT_TABLET_MIN_WIDTH,
 } from "../../media-queries/appSize.js";
 
+/**
+ * @since 6.0.0
+ */
+export interface MatchMediaChangeViewport {
+  /**
+   * @example Default Behavior
+   * ```tsx
+   * const matchMedia = spyOnMatchMedia();
+   * render(<Test />);
+   *
+   * // expect desktop results
+   *
+   * matchMedia.changeViewport(matchPhone);
+   * // expect phone results
+   * ```
+   *
+   * @example Custom Act Behavior
+   * ```tsx
+   * const matchMedia = spyOnMatchMedia();
+   * const { rerender } = render(<Test />);
+   *
+   * // expect desktop results
+   *
+   * matchMedia.changeViewport(matchPhone, false);
+   * rerender(<Test key="new-key" />);
+   *
+   * // expect phone results
+   * ```
+   */
+  changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
+}
+
 const noop = (): void => {
   // do nothing
 };

package/src/test-utils/{mocks/match-media-implementation.ts → utils/createMatchMediaSpy.ts}

@@ -2,41 +2,10 @@ import { act } from "@testing-library/react";
 
 import {
   BASE_MEDIA_QUERY_LIST,
+  type MatchMediaChangeViewport,
   type MatchMediaMatcher,
   matchDesktop,
-} from "./match-media.js";
-
-/**
- * @since 6.0.0
- */
-export interface MatchMediaChangeViewport {
-  /**
-   * @example Default Behavior
-   * ```tsx
-   * const matchMedia = spyOnMatchMedia();
-   * render(<Test />);
-   *
-   * // expect desktop results
-   *
-   * matchMedia.changeViewport(matchPhone);
-   * // expect phone results
-   * ```
-   *
-   * @example Custom Act Behavior
-   * ```tsx
-   * const matchMedia = spyOnMatchMedia();
-   * const { rerender } = render(<Test />);
-   *
-   * // expect desktop results
-   *
-   * matchMedia.changeViewport(matchPhone, false);
-   * rerender(<Test key="new-key" />);
-   *
-   * // expect phone results
-   * ```
-   */
-  changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
-}
+} from "../mocks/match-media.js";
 
 /**
  * @since 6.0.0
@@ -46,12 +15,41 @@ export interface MatchMediaMockFunction {
 }
 
 /**
+ * Used to create a `spyOn(window, "matchMedia")` without knowing the test
+ * framework.
+ *
+ * @example Setup Test Framework
+ * ```tsx
+ * export function spyOnMatchMedia(
+ *   defaultMatch: MatchMediaMatcher = matchDesktop
+ * ): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {
+ *   return createMatchMediaSpy(jest.spyOn(window, "matchMedia"), defaultMatch);
+ * }
+ * ```
+ *
+ * NOTE: The `spyOnMatchMedia` function **must** not call the `.spyOn`
+ * immediately to work correctly. The spy needs to be invoked whenever this is
+ * called instead. For example, this is bad and will fail:
+ *
+ * @example Bad Example
+ * ```tsx
+ * export const spyOnMatchMedia = createMatchMediaSpy.bind(null, jest.spy(window, "matchMedia"));
+ * ```
+ *
+ * This is mostly a reminder to myself since I wanted something like the
+ * following code, but failed:
+ *
+ * ```ts
+ * export const spyOnMatchMedia = createMatchMediaSpy(jest.spyOn(window, "matchMedia"));
+ * ```
+ *
  * @since 6.0.0
+ * @internal
  */
-export const createMatchMediaSpy = <SpyFunction extends MatchMediaMockFunction>(
+export function createMatchMediaSpy<SpyFunction extends MatchMediaMockFunction>(
   matchMediaSpy: SpyFunction,
   defaultMatch: MatchMediaMatcher = matchDesktop
-): SpyFunction & MatchMediaChangeViewport => {
+): SpyFunction & MatchMediaChangeViewport {
   type Listener = (event: MediaQueryListEvent) => void;
 
   const listeners = new Map<string, Listener>();
@@ -108,4 +106,4 @@ export const createMatchMediaSpy = <SpyFunction extends MatchMediaMockFunction>(
   mock.changeViewport = changeViewport;
 
   return mock;
-};
+}

package/src/test-utils/vitest/match-media.ts

@@ -2,9 +2,10 @@ import { type MockInstance, vi } from "vitest";
 
 import {
   type MatchMediaChangeViewport,
-  createMatchMediaSpy,
-} from "../mocks/match-media-implementation.js";
-import { type MatchMediaMatcher, matchDesktop } from "../mocks/match-media.js";
+  type MatchMediaMatcher,
+  matchDesktop,
+} from "../mocks/match-media.js";
+import { createMatchMediaSpy } from "../utils/createMatchMediaSpy.js";
 
 /**
  * @example Default Behavior

package/src/test-utils/vitest/resize-observer.ts

@@ -1,11 +1,11 @@
 import { afterEach, vi } from "vitest";
 
-import { cleanupResizeObserverAfterEach as cleanup } from "../mocks/ResizeObserver.js";
+import { cleanupRO } from "../mocks/ResizeObserver.js";
 
 /**
  * @param restoreAllMocks - Set to `false` to prevent `vi.restoreAllMocks()` from being
  * called.
  */
 export function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {
-  cleanup(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);
+  cleanupRO(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);
 }