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

package/dist/searching/utils.js

@@ -0,0 +1,28 @@
+import { toSearchQuery } from "./toSearchQuery.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const defaultExtractor = (name)=>(item)=>{
+        if (typeof item === "string") {
+            return item;
+        }
+        throw new Error(`A \`TextExtractor\` must be provided to \`${name}\` for lists that do not contain strings`);
+    };
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function search(options) {
+    const { list, type, query, filter, extractor, whitespace = "keep" } = options;
+    const fallback = type === "search" ? undefined : list;
+    if (!list.length) {
+        return fallback;
+    }
+    const q = toSearchQuery(query, whitespace);
+    if (!q) {
+        return fallback;
+    }
+    const fn = type === "search" ? "find" : "filter";
+    return list[fn]((item)=>filter(q, toSearchQuery(extractor(item), whitespace)));
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/searching/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n  <T>(name: string) =>\n  (item: T): string => {\n    if (typeof item === \"string\") {\n      return item;\n    }\n\n    throw new Error(\n      `A \\`TextExtractor\\` must be provided to \\`${name}\\` for lists that do not contain strings`\n    );\n  };\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n  type: \"search\" | \"filter\";\n  filter(query: string, value: string): boolean;\n  extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function search<T>(\n  options: SearchOptions<T>\n): readonly T[] | T | undefined {\n  const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n  const fallback = type === \"search\" ? undefined : list;\n  if (!list.length) {\n    return fallback;\n  }\n\n  const q = toSearchQuery(query, whitespace);\n  if (!q) {\n    return fallback;\n  }\n\n  const fn = type === \"search\" ? \"find\" : \"filter\";\n\n  return list[fn]((item) =>\n    filter(q, toSearchQuery(extractor(item), whitespace))\n  );\n}\n"],"names":["toSearchQuery","defaultExtractor","name","item","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;CAGC,GACD,OAAO,MAAMC,mBACX,CAAIC,OACJ,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,MAAM,IAAIC,MACR,CAAC,0CAA0C,EAAEF,KAAK,wCAAwC,CAAC;IAE/F,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASG,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAIhB,cAAcS,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IAExC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAACd,OACfO,OAAOM,GAAGhB,cAAcW,UAAUR,OAAOS;AAE7C"}

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,172 @@
+/**
+ * @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 { 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 }));
+     *   });
+     * })
+     * ```
+     */
+    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;
+}
+/**
+ * Initializes the `ResizeObserverMock` to be used for tests.
+ *
+ * @see {@link ResizeObserverMock.resizeElement} for example usage.
+ *
+ * @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.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const setupResizeObserverMock: (raf?: boolean, manager?: import("../useResizeObserver.js").ResizeObserverManager) => ResizeObserverMock;
+/**
+ * @see {@link setupResizeObserverMock}
+ * @remarks \@since 6.0.0
+ */
+export declare function cleanupResizeObserverAfterEach(restoreAllMocks?: boolean): void;

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/data-testid.ts"],"names":[],"mappings":""}
+{"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/matchMedia.d.ts

@@ -0,0 +1,101 @@
+import { jest } from "@jest/globals";
+/**
+ * @see {@link spyOnMatchMedia} instead
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare const BASE_MEDIA_QUERY_LIST: MediaQueryList;
+/** @remarks \@since 6.0.0 */
+export type MatchMediaMatcher = (query: string) => boolean;
+/**
+ * @see {@link spyOnMatchMedia} for usage
+ * @remarks \@since 6.0.0
+ * @returns `true` for phone media queries
+ */
+export declare const matchPhone: MatchMediaMatcher;
+/**
+ * @see {@link spyOnMatchMedia} for usage
+ * @remarks \@since 6.0.0
+ * @returns `true` for tablet media queries
+ */
+export declare const matchTablet: MatchMediaMatcher;
+/**
+ * @see {@link spyOnMatchMedia} for usage
+ * @remarks \@since 6.0.0
+ * @returns `true` for desktop media queries
+ */
+export declare const matchDesktop: MatchMediaMatcher;
+/**
+ * @see {@link spyOnMatchMedia} for usage
+ * @remarks \@since 6.0.0
+ * @returns `true` for large desktop media queries
+ */
+export declare const matchLargeDesktop: MatchMediaMatcher;
+/**
+ * @see {@link spyOnMatchMedia} for usage
+ * @remarks \@since 6.0.0
+ * @returns `true` for both desktop and large desktop media queries
+ */
+export declare const matchAnyDesktop: MatchMediaMatcher;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type MatchMediaSpiedFunction = jest.SpiedFunction<typeof window.matchMedia> & {
+    /**
+     * @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;
+};
+/**
+ * @example
+ * Default Behavior
+ * ```tsx
+ * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
+ *
+ * const matchMedia = spyOnMatchMedia();
+ * render(<Test />);
+ *
+ * // expect desktop results
+ *
+ * matchMedia.changeViewport(matchPhone);
+ * // expect phone results
+ * ```
+ *
+ * @example
+ * Set Default Media
+ * ```tsx
+ * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
+ *
+ * const matchMedia = spyOnMatchMedia(matchPhone);
+ * render(<Test />);
+ *
+ * // expect phone results
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function spyOnMatchMedia(defaultMatch?: MatchMediaMatcher): MatchMediaSpiedFunction;

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

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

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

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

package/dist/test-utils/polyfills/TextDecoder.d.ts

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

package/dist/test-utils/polyfills/TextDecoder.js

@@ -0,0 +1,8 @@
+import { TextDecoder } from "node:util";
+if (typeof global.TextDecoder === "undefined") {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does
+    global.TextDecoder = TextDecoder;
+}
+
+//# sourceMappingURL=TextDecoder.js.map

package/dist/test-utils/polyfills/TextDecoder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/polyfills/TextDecoder.ts"],"sourcesContent":["import { TextDecoder } from \"node:util\";\n\nif (typeof global.TextDecoder === \"undefined\") {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does\n  global.TextDecoder = TextDecoder;\n}\n"],"names":["TextDecoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7C,6DAA6D;IAC7D,sFAAsF;IACtFC,OAAOD,WAAW,GAAGA;AACvB"}

package/dist/test-utils/polyfills/TextEncoder.d.ts

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

package/dist/test-utils/polyfills/TextEncoder.js

@@ -0,0 +1,6 @@
+import { TextEncoder } from "node:util";
+if (typeof global.TextEncoder === "undefined") {
+    global.TextEncoder = TextEncoder;
+}
+
+//# sourceMappingURL=TextEncoder.js.map

package/dist/test-utils/polyfills/TextEncoder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/polyfills/TextEncoder.ts"],"sourcesContent":["import { TextEncoder } from \"node:util\";\n\nif (typeof global.TextEncoder === \"undefined\") {\n  global.TextEncoder = TextEncoder;\n}\n"],"names":["TextEncoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7CC,OAAOD,WAAW,GAAGA;AACvB"}

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

@@ -0,0 +1,7 @@
+import "./IntersectionObserver.js";
+import "./ResizeObserver.js";
+import "./TextDecoder.js";
+import "./TextEncoder.js";
+import "./matchMedia.js";
+import "./offsetParent.js";
+import "./scrollIntoView.js";

package/dist/test-utils/polyfills/index.js

@@ -1,5 +1,7 @@
 import "./IntersectionObserver.js";
 import "./ResizeObserver.js";
+import "./TextDecoder.js";
+import "./TextEncoder.js";
 import "./matchMedia.js";
 import "./offsetParent.js";
 import "./scrollIntoView.js";

package/dist/test-utils/polyfills/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/polyfills/index.ts"],"sourcesContent":["import \"./IntersectionObserver.js\";\nimport \"./ResizeObserver.js\";\nimport \"./matchMedia.js\";\nimport \"./offsetParent.js\";\nimport \"./scrollIntoView.js\";\n"],"names":[],"mappings":"AAAA,OAAO,4BAA4B;AACnC,OAAO,sBAAsB;AAC7B,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB"}
+{"version":3,"sources":["../../../src/test-utils/polyfills/index.ts"],"sourcesContent":["import \"./IntersectionObserver.js\";\nimport \"./ResizeObserver.js\";\nimport \"./TextDecoder.js\";\nimport \"./TextEncoder.js\";\nimport \"./matchMedia.js\";\nimport \"./offsetParent.js\";\nimport \"./scrollIntoView.js\";\n"],"names":[],"mappings":"AAAA,OAAO,4BAA4B;AACnC,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB"}

package/dist/test-utils/polyfills/matchMedia.d.ts

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

package/dist/test-utils/polyfills/offsetParent.d.ts

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

package/dist/test-utils/polyfills/scrollIntoView.d.ts

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

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

@@ -0,0 +1,13 @@
+import { type Queries, type RenderOptions, type RenderResult, type queries } from "@testing-library/react";
+import { type ReactElement } from "react";
+import { type CoreProvidersProps } from "../CoreProviders.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ReactMDRenderOptions<Q extends Queries = typeof queries, Container extends Element | DocumentFragment = HTMLElement, BaseElement extends Element | DocumentFragment = Container> extends RenderOptions<Q, Container, BaseElement> {
+    rmdConfig?: Omit<CoreProvidersProps, "children">;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function rmdRender<Q extends Queries = typeof queries, Container extends Element | DocumentFragment = HTMLElement, BaseElement extends Element | DocumentFragment = Container>(ui: ReactElement, options?: ReactMDRenderOptions<Q, Container, BaseElement>): RenderResult<Q, Container, BaseElement>;

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

@@ -0,0 +1,39 @@
+import { jest } from "@jest/globals";
+/**
+ * @example
+ * ```ts
+ * import { useImmediateRaf } from "@react-md/core/test-utils";
+ *
+ * describe("some test suite", () => {
+ *   it("should test something with requestAnimationFrame", () => {
+ *     const raf = useImmediateRaf();
+ *
+ *     // do some testing with requestAnimationFrame
+ *
+ *     // reset to original at the end of the test
+ *     raf.mockRestore()
+ *   });
+ * });
+ * ```
+ *
+ * @example
+ * Automatic Cleanup
+ * ```ts
+ * import { useImmediateRaf } from "@react-md/core/test-utils";
+ *
+ * afterEach(() => {
+ *   jest.restoreAllMocks();
+ * });
+ *
+ * describe("some test suite", () => {
+ *   it("should test something with requestAnimationFrame", () => {
+ *     const raf = useImmediateRaf();
+ *
+ *     // do some testing with requestAnimationFrame
+ *   });
+ * });
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const useImmediateRaf: () => jest.SpiedFunction<typeof requestAnimationFrame>;