@etsoo/toolpad 1.0.12 → 1.0.13

package/build/mjs/Account/AccountPreview.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { AvatarProps } from "@mui/material/Avatar";
+import { IconButtonProps } from "@mui/material/IconButton";
+export type AccountPreviewVariant = "condensed" | "expanded";
+export interface AccountPreviewSlots {
+    /**
+     * The component used for the Avatar
+     * @default Avatar
+     */
+    avatar?: React.ElementType;
+    /**
+     * The component used for the overflow icon button in the expanded variant
+     * @default IconButton
+     */
+    moreIconButton?: React.ElementType;
+    /**
+     * The component used for the avatar icon button in the condensed variant
+     * @default IconButton
+     */
+    avatarIconButton?: React.ElementType;
+}
+export interface AccountPreviewProps {
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: AccountPreviewSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: {
+        avatar?: AvatarProps;
+        moreIconButton?: IconButtonProps;
+        avatarIconButton?: IconButtonProps;
+    };
+    /**
+     * The type of account details to display.
+     * @property {'condensed'} condensed - Shows only the user's avatar.
+     * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+     * @default 'condensed'
+     */
+    variant?: AccountPreviewVariant;
+    /**
+     * The handler used when the preview is expanded
+     */
+    handleClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * The state of the Account popover
+     * @default false
+     */
+    open?: boolean;
+}
+/**
+ * The AccountPreview component displays user account information.
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
+ */
+declare function AccountPreview(props: AccountPreviewProps): import("react/jsx-runtime").JSX.Element | null;
+export { AccountPreview };

package/build/mjs/Account/AccountPreview.test.d.ts

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

package/build/mjs/Account/SignInButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@mui/material/Button";
+export declare function SignInButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/mjs/Account/SignOutButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "@mui/material/Button";
+export type SignOutButtonProps = ButtonProps;
+export declare function SignOutButton(props: SignOutButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/mjs/Account/index.js

@@ -0,0 +1,6 @@
+export * from "./Account";
+export * from "./AccountPreview";
+export * from "./AccountPopoverHeader";
+export * from "./AccountPopoverFooter";
+export * from "./SignOutButton";
+export * from "./SignInButton";

package/build/mjs/AppProvider/AppProvider.d.ts

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { Theme } from "@mui/material/styles";
+import { LocaleContextType } from "../shared/locales/LocaleContext";
+export interface NavigateOptions {
+    history?: "auto" | "push" | "replace";
+}
+export interface Navigate {
+    (url: string | URL, options?: NavigateOptions): void;
+}
+/**
+ * Abstract router used by Toolpad components.
+ */
+export interface Router {
+    pathname: string;
+    searchParams: URLSearchParams;
+    navigate: Navigate;
+}
+export interface Branding {
+    title?: React.ReactNode | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
+    logo?: React.ReactNode;
+}
+export interface NavigationPageItem {
+    kind?: "page";
+    segment?: string;
+    title?: string;
+    icon?: React.ReactNode;
+    pattern?: string;
+    action?: React.ReactNode;
+    children?: Navigation;
+    subs?: string[];
+}
+export interface NavigationSubheaderItem {
+    kind: "header";
+    title: string;
+}
+export interface NavigationDividerItem {
+    kind: "divider";
+}
+export type NavigationItem = NavigationPageItem | NavigationSubheaderItem | NavigationDividerItem;
+export type Navigation = NavigationItem[];
+export interface Session {
+    user?: {
+        id?: string | null;
+        name?: string | null;
+        latinName?: string | null;
+        image?: string | null;
+        email?: string | null;
+    };
+}
+export interface Authentication {
+    signIn: () => void;
+    signOut: () => void;
+}
+export declare const AuthenticationContext: React.Context<Authentication | null>;
+export declare const SessionContext: React.Context<Session | null>;
+export type AppTheme = Theme | {
+    light: Theme;
+    dark: Theme;
+};
+export interface AppProviderProps {
+    /**
+     * The content of the app provider.
+     */
+    children: React.ReactNode;
+    /**
+     * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
+     * @default createTheme()
+     */
+    theme?: AppTheme;
+    /**
+     * Branding options for the app.
+     * @default null
+     */
+    branding?: Branding | null;
+    /**
+     * The labels for the component.
+     */
+    localeText?: Partial<LocaleContextType>;
+    /**
+     * Navigation definition for the app.
+     * @default []
+     */
+    navigation?: Navigation;
+    /**
+     * Router implementation used inside Toolpad components.
+     * @default null
+     */
+    router?: Router;
+    /**
+     * Session info about the current user.
+     * @default null
+     */
+    session?: Session | null;
+    /**
+     * Authentication methods.
+     * @default null
+     */
+    authentication?: Authentication | null;
+    /**
+     * The window where the application is rendered.
+     * This is needed when rendering the app inside an iframe, for example.
+     * @default window
+     */
+    window?: Window;
+}

package/build/mjs/AppProvider/AppProvider.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment jsdom
+ */
+export {};

package/build/mjs/AppProvider/AppProviderComponent.d.ts

@@ -0,0 +1,14 @@
+import { AppProviderProps } from "./AppProvider";
+/**
+ *
+ * Demos:
+ *
+ * - [App Provider](https://mui.com/toolpad/core/react-app-provider/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
+ */
+declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AppProvider };

package/build/mjs/AppProvider/AppThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { AppTheme } from "./AppProvider";
+interface AppThemeProviderProps {
+    children: React.ReactNode;
+    theme: AppTheme;
+    window?: Window;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function AppThemeProvider(props: AppThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AppThemeProvider };

package/build/mjs/DashboardLayout/DashboardLayout.d.ts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { type Theme, SxProps } from "@mui/material";
+import { type AccountProps } from "../Account";
+export interface SidebarFooterProps {
+    mini: boolean;
+}
+export interface DashboardLayoutSlotProps {
+    titlebar?: {};
+    toolbarActions?: {};
+    toolbarAccount?: AccountProps;
+    sidebarFooter?: SidebarFooterProps;
+}
+export interface DashboardLayoutSlots {
+    /**
+     * The title bar component used in the layout header.
+     * @default TitleBar
+     */
+    titlebar?: React.JSXElementConstructor<{}>;
+    /**
+     * The toolbar actions component used in the layout header.
+     * @default ToolbarActions
+     */
+    toolbarActions?: React.JSXElementConstructor<{}>;
+    /**
+     * The toolbar account component used in the layout header.
+     * @default Account
+     */
+    toolbarAccount?: React.JSXElementConstructor<AccountProps>;
+    /**
+     * Optional footer component used in the layout sidebar.
+     * @default null
+     */
+    sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
+}
+export interface DashboardLayoutProps {
+    /**
+     * The content of the dashboard.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
+     * @default false
+     */
+    disableCollapsibleSidebar?: boolean;
+    /**
+     * Whether the sidebar should start collapsed in desktop size screens.
+     * @default false
+     */
+    defaultSidebarCollapsed?: boolean;
+    /**
+     * Whether the navigation bar and menu icon should be hidden
+     * @default false
+     */
+    hideNavigation?: boolean;
+    /**
+     * Whether the theme switcher should be shown in the toolbar.
+     * @default false
+     */
+    showThemeSwitcher?: boolean;
+    /**
+     * Width of the sidebar when expanded.
+     * @default 320
+     */
+    sidebarExpandedWidth?: number | string;
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: DashboardLayoutSlots;
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: DashboardLayoutSlotProps;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
+ */
+declare function DashboardLayout(props: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardLayout };

package/build/{DashboardLayout → mjs/DashboardLayout}/DashboardLayout.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { styled, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -20,14 +20,6 @@ import { ThemeSwitcher } from "./ThemeSwitcher";
 import { getDrawerSxTransitionMixin, getDrawerWidthTransitionMixin } from "./utils";
 import { TitleBar } from "./TitleBar";
 import { useLocaleText } from "../shared/locales/LocaleContext";
-const AppBar = styled(MuiAppBar)(({ theme }) => ({
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderStyle: "solid",
-    borderColor: (theme.vars ?? theme).palette.divider,
-    boxShadow: "none",
-    zIndex: theme.zIndex.drawer + 1
-}));
 /**
  *
  * Demos:
@@ -147,7 +139,14 @@ function DashboardLayout(props) {
             height: "100vh",
             width: "100vw",
             ...sx
-        }, children: [_jsx(AppBar, { color: "inherit", position: "absolute", children: _jsxs(Toolbar, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1.5 } }, children: [!hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Box, { sx: {
+        }, children: [_jsx(MuiAppBar, { color: "inherit", position: "absolute", sx: (theme) => ({
+                    borderWidth: 0,
+                    borderBottomWidth: 1,
+                    borderStyle: "solid",
+                    borderColor: theme.palette.divider,
+                    boxShadow: "none",
+                    zIndex: theme.zIndex.drawer + 1
+                }), children: _jsxs(Toolbar, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1.5 } }, children: [!hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Box, { sx: {
                                         mr: { sm: disableCollapsibleSidebar ? 0 : 1 },
                                         display: { md: "none" }
                                     }, children: getMenuIcon(isMobileNavigationExpanded) }), _jsx(Box, { sx: {

package/build/mjs/DashboardLayout/DashboardLayout.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/build/mjs/DashboardLayout/DashboardSidebarSubNavigation.d.ts

@@ -0,0 +1,16 @@
+import type { Navigation } from "../AppProvider";
+interface DashboardSidebarSubNavigationProps {
+    subNavigation: Navigation;
+    basePath?: string;
+    depth?: number;
+    onLinkClick: () => void;
+    isMini?: boolean;
+    isFullyExpanded?: boolean;
+    hasDrawerTransitions?: boolean;
+    selectedItemId: string;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function DashboardSidebarSubNavigation({ subNavigation, basePath, depth, onLinkClick, isMini, isFullyExpanded, hasDrawerTransitions, selectedItemId }: DashboardSidebarSubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardSidebarSubNavigation };

package/build/mjs/DashboardLayout/ThemeSwitcher.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare function ThemeSwitcher(): import("react/jsx-runtime").JSX.Element | null;
+export { ThemeSwitcher };

package/build/mjs/DashboardLayout/TitleBar.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function TitleBar(): number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | undefined;

package/build/mjs/DashboardLayout/ToolbarActions.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare function ToolbarActions(): null;
+export { ToolbarActions };

package/build/mjs/DashboardLayout/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DashboardLayout";
+export * from "./ToolbarActions";

package/build/mjs/DashboardLayout/utils.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from "@mui/material";
+export declare function getDrawerSxTransitionMixin(isExpanded: boolean, property: string): {
+    transition: (theme: Theme) => string;
+};
+export declare function getDrawerWidthTransitionMixin(isExpanded: boolean): {
+    overflowX: string;
+    transition: (theme: Theme) => string;
+};

package/build/mjs/PageContainer/PageContainer.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { ContainerProps } from "@mui/material/Container";
+import { PageContainerToolbarProps } from "./PageContainerToolbar";
+export interface PageContainerSlotProps {
+    toolbar: PageContainerToolbarProps;
+}
+export interface PageContainerSlots {
+    /**
+     * The component that renders the actions toolbar.
+     * @default Snackbar
+     */
+    toolbar: React.ElementType;
+}
+export interface Breadcrumb {
+    /**
+     * The title of the breadcrumb segment.
+     */
+    title: string;
+    /**
+     * The path the breadcrumb links to.
+     */
+    path: string;
+}
+export type PageData = {
+    title?: string;
+    page?: string;
+    breadcrumbs?: Breadcrumb[];
+};
+type PageDataAction = PageData | true;
+export declare const PageDataContext: React.Context<{
+    state: PageData;
+    dispatch: React.Dispatch<PageDataAction>;
+}>;
+export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
+export type PageContainerProps = React.PropsWithChildren<ContainerProps & {
+    /**
+     * The default title of the page.
+     */
+    defaultTitle?: string;
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: PageContainerSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: PageContainerSlotProps;
+}>;
+/**
+ * A container component to provide a title and breadcrumbs for your pages.
+ *
+ * Demos:
+ *
+ * - [Page Container](https://mui.com/toolpad/core/react-page-container/)
+ *
+ * API:
+ *
+ * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
+ */
+declare function PageContainer(props: PageContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PageContainer };

package/build/{PageContainer → mjs/PageContainer}/PageContainer.js

@@ -35,9 +35,13 @@ function reducer(state, action) {
 }
 export function PageDataContextProvider(props) {
     // Destruct
-    const { title, breadcrumbs, ...rest } = props;
+    const { title, page, breadcrumbs, ...rest } = props;
     // useReducer hook to manage state with our reducer function and initial state
-    const [state, dispatch] = React.useReducer(reducer, { title, breadcrumbs });
+    const [state, dispatch] = React.useReducer(reducer, {
+        title,
+        page,
+        breadcrumbs
+    });
     // Provide the state and dispatch function to the context value
     return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
 }
@@ -53,7 +57,7 @@ export function PageDataContextProvider(props) {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, slots, slotProps, ...rest } = props;
+    const { children, defaultTitle, slots, slotProps, ...rest } = props;
     const loaded = React.useRef(false);
     const { state, dispatch } = React.useContext(PageDataContext);
     const activePage = useActivePage();
@@ -66,7 +70,7 @@ function PageContainer(props) {
         }
     }, [activePage?.sourcePath]);
     let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
-    const title = state.title ?? activePage?.title ?? "";
+    const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
     if (state.page) {
         resolvedBreadcrumbs = [
             ...resolvedBreadcrumbs,

package/build/mjs/PageContainer/PageContainer.test.d.ts

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

package/build/mjs/PageContainer/PageContainerToolbar.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PageContainerToolbarProps {
+    children?: React.ReactNode;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Page Container](https://mui.com/toolpad/core/react-page-container/)
+ *
+ * API:
+ *
+ * - [PageContainerToolbar API](https://mui.com/toolpad/core/api/page-container-toolbar)
+ */
+declare function PageContainerToolbar(props: PageContainerToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { PageContainerToolbar };

package/build/mjs/PageContainer/PageContainerToolbar.test.d.ts

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

package/build/mjs/PageContainer/index.js

@@ -0,0 +1,2 @@
+export * from "./PageContainer";
+export * from "./PageContainerToolbar";

package/build/mjs/index.js

@@ -0,0 +1,8 @@
+export * from "./AppProvider";
+export * from "./DashboardLayout";
+export * from "./Account";
+export * from "./PageContainer";
+export * from "./useActivePage";
+export * from "./useLocalStorageState";
+export * from "./useSessionStorageState";
+export * from "./persistence/codec";

package/build/mjs/nextjs/AppProvider.d.ts

@@ -0,0 +1,6 @@
+import type { AppProviderProps } from "../AppProvider";
+/**
+ * @ignore - internal component.
+ */
+declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AppProvider };

package/build/mjs/nextjs/AppProvider.test.d.ts

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

package/build/mjs/nextjs/AppProviderNextApp.d.ts

@@ -0,0 +1,5 @@
+import type { AppProviderProps } from "../AppProvider";
+/**
+ * @ignore - internal component.
+ */
+export declare function AppProviderNextApp(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;

package/build/mjs/nextjs/AppProviderNextPages.d.ts

@@ -0,0 +1,5 @@
+import type { AppProviderProps } from "../AppProvider";
+/**
+ * @ignore - internal component.
+ */
+export declare function AppProviderNextPages(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;

package/build/mjs/nextjs/index.js

@@ -0,0 +1 @@
+export * from "./AppProvider";

package/build/mjs/persistence/codec.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A codec that can encode and decode values of type V to and from strings.
+ * @typeParam V The type of values that can be encoded and decoded.
+ */
+export interface Codec<V> {
+    /**
+     * Decodes a string value into a value of type V.
+     * @param value The value to decode.
+     * @returns The decoded value.
+     */
+    parse: (value: string) => V;
+    /**
+     * Encodes a value of type V into a string.
+     * @param value The value to encode.
+     * @returns The encoded value.
+     */
+    stringify: (value: V) => string;
+}
+/**
+ * A codec that can encode and decode Date objects to and from strings.
+ */
+export declare const CODEC_DATE: Codec<Date>;
+/**
+ * A codec that can encode and decode Date objects to and from strings, but only the date part.
+ */
+export declare const CODEC_DATE_ONLY: Codec<Date>;
+/**
+ * A codec that can encode and decode numbers to and from strings.
+ */
+export declare const CODEC_NUMBER: Codec<number>;
+/**
+ * A codec that can encode and decode boolean values to and from strings.
+ */
+export declare const CODE_BOOLEAN: Codec<boolean>;
+/**
+ * A codec that can encode and decode JSON values to and from strings.
+ */
+export declare const CODEC_JSON: Codec<unknown>;
+/**
+ * A codec that can encode and decode JSON values to and from strings.
+ * If the JSON value is invalid, parsing will fail.
+ */
+export declare const CODEC_JSON_STRICT: Codec<unknown>;
+/**
+ * A codec that can encode and decode strings to and from strings.
+ */
+export declare const CODEC_STRING: Codec<string>;

package/build/mjs/persistence/index.js

@@ -0,0 +1 @@
+export * from "./useStorageState";