@tanstack/router-devtools 0.0.1-beta.98 → 1.0.0

package/build/types/Explorer.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export declare const Entry: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-export declare const LabelButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
-export declare const ExpandButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+export declare const LabelButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const Value: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 export declare const SubEntries: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const Info: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
@@ -10,7 +10,7 @@ type ExpanderProps = {
     expanded: boolean;
     style?: React.CSSProperties;
 };
-export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
+export declare const Expander: ({ expanded, style }: ExpanderProps) => React.JSX.Element;
 type Entry = {
     label: string;
 };
@@ -25,6 +25,7 @@ type RendererProps = {
     toggleExpanded: () => void;
     pageSize: number;
     renderer?: Renderer;
+    filterSubEntries?: (subEntries: Property[]) => Property[];
 };
 /**
  * Chunk elements in the array by size
@@ -43,5 +44,10 @@ type ExplorerProps = Partial<RendererProps> & {
     renderer?: Renderer;
     defaultExpanded?: true | Record<string, boolean>;
 };
-export default function Explorer({ value, defaultExpanded, renderer, pageSize, ...rest }: ExplorerProps): JSX.Element;
+type Property = {
+    defaultExpanded?: boolean | Record<string, boolean>;
+    label: string;
+    value: unknown;
+};
+export default function Explorer({ value, defaultExpanded, renderer, pageSize, filterSubEntries, ...rest }: ExplorerProps): JSX.Element;
 export {};

package/build/types/devtools.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnyRouter } from '@tanstack/router';
+import { AnyRouter } from '@tanstack/react-router';
 export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 interface DevtoolsOptions {
     /**

package/build/types/index.d.ts

@@ -1 +1,77 @@
-export * from './devtools';
+/**
+ * @tanstack/router-devtools/src/index.tsx
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import React from 'react';
+import { AnyRouter } from '@tanstack/react-router';
+
+type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+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.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * 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.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * 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.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * 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 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+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;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+}
+declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
+declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
+
+export { type PartialKeys, TanStackRouterDevtools, TanStackRouterDevtoolsPanel };

package/build/types/styledComponents.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ActivePanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Button: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const Code: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Select: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "key" | keyof import("react").SelectHTMLAttributes<HTMLSelectElement>> & import("react").RefAttributes<HTMLSelectElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/build/types/theme.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 export declare const defaultTheme: {
-    readonly background: "#0b1521";
-    readonly backgroundAlt: "#132337";
+    readonly background: "#222222";
+    readonly backgroundAlt: "#292929";
     readonly foreground: "white";
-    readonly gray: "#3f4e60";
-    readonly grayAlt: "#222e3e";
+    readonly gray: "#444";
+    readonly grayAlt: "#444";
     readonly inputBackgroundColor: "#fff";
     readonly inputTextColor: "#000";
-    readonly success: "#00ab52";
+    readonly success: "#80cb00";
     readonly danger: "#ff0085";
-    readonly active: "#006bff";
+    readonly active: "#0099ff";
     readonly warning: "#ffb200";
 };
 export type Theme = typeof defaultTheme;
@@ -17,18 +17,18 @@ interface ProviderProps {
     theme: Theme;
     children?: React.ReactNode;
 }
-export declare function ThemeProvider({ theme, ...rest }: ProviderProps): JSX.Element;
+export declare function ThemeProvider({ theme, ...rest }: ProviderProps): React.JSX.Element;
 export declare function useTheme(): {
-    readonly background: "#0b1521";
-    readonly backgroundAlt: "#132337";
+    readonly background: "#222222";
+    readonly backgroundAlt: "#292929";
     readonly foreground: "white";
-    readonly gray: "#3f4e60";
-    readonly grayAlt: "#222e3e";
+    readonly gray: "#444";
+    readonly grayAlt: "#444";
     readonly inputBackgroundColor: "#fff";
     readonly inputTextColor: "#000";
-    readonly success: "#00ab52";
+    readonly success: "#80cb00";
     readonly danger: "#ff0085";
-    readonly active: "#006bff";
+    readonly active: "#0099ff";
     readonly warning: "#ffb200";
 };
 export {};

package/build/types/utils.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { AnyRouteMatch } from '@tanstack/router';
+import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router';
 import { Theme } from './theme';
 export declare const isServer: boolean;
 type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
-export declare function getStatusColor(match: AnyRouteMatch, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff";
+export declare function getStatusColor(match: AnyRouteMatch, theme: Theme): "#444" | "#80cb00" | "#ff0085" | "#0099ff";
+export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme): "#444" | "#80cb00" | "#ff0085" | "#0099ff";
 type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
 export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
 export declare function useIsMounted(): () => boolean;