@tanstack/react-query-devtools 5.0.0-alpha.5 → 5.0.0-alpha.50

package/build/lib/__tests__/devtools.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+//# sourceMappingURL=devtools.test.d.ts.map

package/build/lib/__tests__/devtools.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/devtools.test.tsx"],"names":[],"mappings":""}

package/build/lib/__tests__/utils.d.ts

@@ -12,7 +12,7 @@ export declare function sleep(timeout: number): Promise<void>;
  * @param textToMatch The string that needs to be matched
  * @reference https://stackoverflow.com/a/56859650/8252081
  */
-declare type MatcherFunction = (content: string, element: Element | null) => boolean;
+type MatcherFunction = (content: string, element: Element | null) => boolean;
 export declare const getByTextContent: (textToMatch: string) => MatcherFunction;
 interface CreateQueryClientResponse {
     queryClient: QueryClient;
@@ -20,3 +20,4 @@ interface CreateQueryClientResponse {
 }
 export declare const createQueryClient: () => CreateQueryClientResponse;
 export {};
+//# sourceMappingURL=utils.d.ts.map

package/build/lib/__tests__/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/__tests__/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,EACL,WAAW,EAEX,UAAU,EACX,MAAM,uBAAuB,CAAA;AAE9B,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,eAAe,GAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAM,EACnE,aAAa,CAAC,EAAE,aAAa,GAC5B,UAAU,CAAC,OAAO,MAAM,CAAC,CAkB3B;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD;AAED;;;;;;;GAOG;AAEH,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,OAAO,CAAA;AAE5E,eAAO,MAAM,gBAAgB,gBACb,MAAM,KAAG,eAatB,CAAA;AAEH,UAAU,yBAAyB;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;CACvB;AAED,eAAO,MAAM,iBAAiB,QAAO,yBAWpC,CAAA"}

package/build/lib/devtools.d.ts

@@ -1,95 +1,31 @@
-import * as React from 'react';
 import type { QueryClient } from '@tanstack/react-query';
-import type { Corner, Side } from './utils';
+import type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
+import React from 'react';
 export interface DevtoolsOptions {
     /**
      * Set this true if you want the dev tools to default to being open
      */
     initialIsOpen?: boolean;
-    /**
-     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
-     */
-    panelProps?: React.ComponentPropsWithoutRef<'div'>;
-    /**
-     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /**
-     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>;
     /**
      * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
      * Defaults to 'bottom-left'.
      */
-    position?: Corner;
+    buttonPosition?: DevtoolsButtonPosition;
     /**
      * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
      * Defaults to 'bottom'.
      */
-    panelPosition?: Side;
-    /**
-     * Use this to render the devtools inside a different type of container element for a11y purposes.
-     * Any string which corresponds to a valid intrinsic JSX element is allowed.
-     * Defaults to 'aside'.
-     */
-    containerElement?: string | any;
-    /**
-     * nonce for style element for CSP
-     */
-    styleNonce?: string;
+    position?: DevtoolsPosition;
     /**
      * Custom instance of QueryClient
      */
-    queryClient?: QueryClient;
-}
-interface DevtoolsPanelOptions {
-    /**
-     * The standard React style object used to style a component with inline styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * The standard React className property used to style a component with classes
-     */
-    className?: string;
-    /**
-     * A boolean variable indicating whether the panel is open or closed
-     */
-    isOpen?: boolean;
+    client?: QueryClient;
     /**
-     * nonce for style element for CSP
-     */
-    styleNonce?: string;
-    /**
-     * A function that toggles the open and close state of the panel
-     */
-    setIsOpen: (isOpen: boolean) => void;
-    /**
-     * Handles the opening and closing the devtools panel
-     */
-    onDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * The position of the React Query devtools panel.
-     * Defaults to 'bottom'.
-     */
-    position?: Side;
-    /**
-     * Handles the panel position select change
-     */
-    onPositionChange?: (side: Side) => void;
-    /**
-     * Show a close button inside the panel
-     */
-    showCloseButton?: boolean;
-    /**
-     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /**
-     * Custom instance of QueryClient
+     * Use this so you can define custom errors that can be shown in the devtools.
      */
-    queryClient?: QueryClient;
+    errorTypes?: DevToolsErrorType[];
 }
-export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, queryClient, styleNonce, panelPosition: initialPanelPosition, }: DevtoolsOptions): React.ReactElement | null;
-export declare const ReactQueryDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+//# sourceMappingURL=devtools.d.ts.map

package/build/lib/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/devtools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACjC;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,eAAe,GACrB,KAAK,CAAC,YAAY,GAAG,IAAI,CAqD3B"}