@tailor-platform/app-shell 1.11.0 → 1.13.0

package/dist/testing.d.ts

@@ -0,0 +1,1140 @@
+import { FC } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { LoaderFunctionArgs } from 'react-router';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+declare type AppInfo = {
+    /** Additional app-defined rows shown on the built-in "/__appinfo" page. */
+    metadata?: readonly AppInfoEntry[];
+};
+
+declare type AppInfoEntry = {
+    /** Display label shown on the built-in "/__appinfo" page. */
+    label: string;
+    /** Primitive value rendered as text. Format complex values before passing them in. */
+    value: string | number | boolean | null | undefined;
+};
+
+export declare const AppShell: {
+    (props: TestAppShellProps): JSX.Element | null;
+    WithPages(pages: PageEntry[]): FC<AppShellProps>;
+};
+
+/**
+ * Props that can be attached to a page component via static field.
+ *
+ * @example
+ * ```tsx
+ * const DashboardPage = () => <div>Dashboard</div>;
+ *
+ * DashboardPage.appShellPageProps = {
+ *   meta: { title: "Dashboard", icon: <DashboardIcon /> },
+ *   guards: [authGuard],
+ * } satisfies AppShellPageProps;
+ *
+ * export default DashboardPage;
+ * ```
+ */
+declare type AppShellPageProps = {
+    /**
+     * Metadata for the page used in navigation and breadcrumbs.
+     */
+    meta?: {
+        /**
+         * Title of the page displayed in navigation and breadcrumbs.
+         * Supports localized strings with translations.
+         */
+        title?: LocalizedString;
+        /**
+         * Icon displayed alongside the title in navigation.
+         */
+        icon?: ReactNode;
+        /**
+         * Custom breadcrumb segment title for this page.
+         * Can be a static string or a function that receives the URL segment.
+         */
+        breadcrumbTitle?: string | ((segment: string) => string);
+    };
+    /**
+     * Guards to control access to this page.
+     * Guards are executed in order. Each page must define its own guards explicitly.
+     *
+     * @example
+     * ```tsx
+     * guards: [authGuard, adminGuard]
+     * ```
+     */
+    guards?: Guard[];
+};
+
+/**
+ * Props for AppShell component.
+ *
+ * Routes can be configured in two ways:
+ * 1. **Automatic (recommended)**: Use the vite-plugin which automatically
+ *    configures pages via `AppShell.WithPages()`.
+ * 2. **Explicit modules**: Pass the `modules` prop for manual configuration.
+ *
+ * @example
+ * ```tsx
+ * // Automatic mode (configured by vite-plugin)
+ * import { AppShell } from "@tailor-platform/app-shell";
+ *
+ * <AppShell title="My App">
+ *   <SidebarLayout />
+ * </AppShell>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Explicit modules mode
+ * import { AppShell, defineModule } from "@tailor-platform/app-shell";
+ *
+ * <AppShell title="My App" modules={[...]}>
+ *   <SidebarLayout />
+ * </AppShell>
+ * ```
+ */
+declare type AppShellProps = SharedAppShellProps & {
+    /**
+     * Navigation configuration.
+     *
+     * When using vite-plugin, this is automatically set via `AppShell.WithPages()`.
+     * For manual configuration, pass modules directly.
+     */
+    modules?: Modules;
+};
+
+/**
+ * Empty interface for module augmentation.
+ * Users can extend this to define their own context data type and route parameters.
+ *
+ * @example
+ * ```typescript
+ * declare module "@tailor-platform/app-shell" {
+ *   interface AppShellRegister {
+ *     contextData: {
+ *       apiClient: ApiClient;
+ *       currentUser: User;
+ *     };
+ *     routeParams: {
+ *       "/": {};
+ *       "/dashboard": {};
+ *       "/orders/:id": { id: string };
+ *     };
+ *   }
+ * }
+ * ```
+ */
+declare interface AppShellRegister {
+}
+
+/**
+ * Color theme — the end-user accessibility preference. `system` follows the OS
+ * light/dark setting. Applied to `<html>` as the `.light` / `.dark` class.
+ */
+declare type ColorTheme = "light" | "dark" | "system";
+
+/**
+ * A single search result returned by a `SearchSource`.
+ *
+ * Selecting a result navigates to `path`.
+ */
+declare type CommandPaletteSearchResult = {
+    /** Unique key for React reconciliation */
+    key: string;
+    /** Visible label shown in the palette (e.g. "Order #ORD-1234") */
+    label: string;
+    /** Optional secondary text (e.g. "山田太郎 - 2024/01/15") */
+    description?: string;
+    /** Optional icon for this specific result */
+    icon?: ReactNode;
+    /** Resolved navigation path (e.g. "/orders/abc-123") */
+    path: string;
+};
+
+declare type CommonPageResource = {
+    path: string;
+    type: "component";
+    meta: {
+        title: LocalizedString;
+        icon?: ReactNode;
+        breadcrumbTitle?: string | ((segment: string) => string);
+    };
+};
+
+/**
+ * Context data type inferred from AppShellRegister.
+ * Falls back to Record<string, unknown> if not augmented.
+ */
+declare type ContextData = AppShellRegister extends {
+    contextData: infer T;
+} ? T : Record<string, unknown>;
+
+/**
+ * Error boundary element type for route error handling.
+ *
+ * Pass a JSX element that will render when an error occurs.
+ * Use the `useRouteError` hook from react-router to access the error.
+ *
+ * @example
+ * ```tsx
+ * import { useRouteError } from "@tailor-platform/app-shell";
+ *
+ * const MyErrorBoundary = () => {
+ *   const error = useRouteError() as Error;
+ *   return <div>Error: {error.message}</div>;
+ * };
+ *
+ * // In config:
+ * errorBoundary: <MyErrorBoundary />
+ * // Or with props:
+ * errorBoundary: <MyErrorBoundary theme="dark" onReport={handleReport} />
+ * ```
+ */
+declare type ErrorBoundaryComponent = ReactNode;
+
+/**
+ * Guard function type.
+ * Guards are executed in order and stop on the first non-pass result.
+ */
+declare type Guard = (ctx: GuardContext) => Promise<GuardResult> | GuardResult;
+
+/**
+ * Context provided to guard functions
+ */
+declare type GuardContext = {
+    context: ContextData;
+};
+
+/**
+ * Result of guard evaluation.
+ * Guards can only return one of these constrained result types.
+ */
+declare type GuardResult = 
+/** Allow access and render the component */
+    {
+    type: "pass";
+}
+/** Deny access and show 404 */
+| {
+    type: "hidden";
+}
+/** Redirect to another path */
+| {
+    type: "redirect";
+    to: string;
+};
+
+declare type LoaderHandler = (args: LoaderFunctionArgs) => Promise<unknown> | unknown;
+
+declare type LocalizedString = string | ((locale: string) => string);
+
+/**
+ * A resource that can be included in the root-level content in the navigation.
+ */
+declare type Module = Omit<CommonPageResource, "meta"> & {
+    _type: "module";
+    component?: () => ReactNode;
+    meta: CommonPageResource["meta"] & {
+        icon?: ReactNode;
+        menuItemClickable: boolean;
+    };
+    resources: Array<Resource>;
+    errorBoundary: ErrorBoundaryComponent;
+    guards?: Guard[];
+    loader?: LoaderHandler;
+};
+
+declare type Modules = Array<Module>;
+
+/**
+ * A React component that can be used as a page in file-based routing.
+ *
+ * The component can optionally have an `appShellPageProps` static field
+ * for configuring navigation metadata and guards.
+ */
+declare type PageComponent = FC & {
+    appShellPageProps?: AppShellPageProps;
+};
+
+/**
+ * A page entry generated by the Vite plugin from file system.
+ */
+declare type PageEntry = {
+    /**
+     * The resolved path for this page (e.g., "/dashboard/orders/:id")
+     */
+    path: string;
+    /**
+     * The page component with optional appShellProps
+     */
+    component: PageComponent;
+};
+
+/**
+ * A resource that can be included in the sub-content in the root resource.
+ *
+ * This resource does not have `category` metadata.
+ */
+declare type Resource = CommonPageResource & {
+    _type: "resource";
+    component?: () => ReactNode;
+    subResources?: Array<Resource>;
+    errorBoundary: ErrorBoundaryComponent;
+    guards?: Guard[];
+    loader?: LoaderHandler;
+};
+
+declare type RouterContainerProps = {
+    memory?: false;
+} | {
+    memory: true;
+    initialEntries: Array<string>;
+};
+
+/**
+ * An async search source that can be plugged into the CommandPalette.
+ *
+ * Each source is activated by typing its `prefix` followed by `:` in the
+ * search input (e.g. `PO:` for Purchase Orders). The prefix match is
+ * case-sensitive.
+ */
+declare type SearchSource = {
+    /** Mode-switching prefix (e.g. "PO"). Case-sensitive, alphanumeric only. */
+    prefix: string;
+    /** Heading shown above search results (e.g. "Purchase Orders") */
+    title: string;
+    /** Optional icon shown next to each result that lacks its own icon */
+    icon?: ReactNode;
+    /** Async search function. Receives the query after the prefix and an AbortSignal. */
+    search: (query: string, options: {
+        signal: AbortSignal;
+    }) => Promise<CommandPaletteSearchResult[]>;
+};
+
+/**
+ * Shared props between `AppShellProps` and the internal `WithPages` wrapper.
+ *
+ * These props are available regardless of whether routes are configured
+ * automatically (via vite-plugin) or manually (via `modules` prop).
+ */
+declare type SharedAppShellProps = React.PropsWithChildren<{
+    /**
+     * App shell title.
+     *
+     * Also used as the suffix of the browser tab title: AppShell keeps
+     * `document.title` in sync with the active page as `"<page> · <title>"`
+     * (the page part is the current breadcrumb leaf, including any
+     * {@link useOverrideBreadcrumb} override). When omitted, the tab shows just
+     * the page title.
+     */
+    title?: string;
+    /**
+     * App shell icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Browser-tab favicon href. Accepts anything valid on `<link rel="icon">` —
+     * a public-path URL (e.g. `/favicon.ico`) or a data URI. AppShell renders the
+     * `<link rel="icon">` for you (React hoists it into `<head>`). When omitted,
+     * AppShell preserves any favicon link already declared by the host page and
+     * only falls back to the bundled Tailor favicon when none exists.
+     *
+     * If you pass this prop, prefer not to also declare a static
+     * `<link rel="icon">` in `index.html`.
+     */
+    favicon?: string;
+    /**
+     * Additional application metadata shown on the built-in `/__appinfo` page.
+     *
+     * AppShell always includes its own version there; use this prop to append
+     * app-defined rows such as environment, release, or commit.
+     */
+    appInfo?: AppInfo;
+    /**
+     * Base path for the app shell
+     */
+    basePath?: string;
+    /**
+     * A component to be rendered at the root level of AppShell.
+     * Use guards with redirectTo() for redirects.
+     *
+     * @example
+     * ```tsx
+     * rootComponent: () => <DashboardHome />
+     * ```
+     */
+    rootComponent?: () => React.ReactNode;
+    /**
+     * Guards for the root route.
+     *
+     * When using file-based routing, this is automatically set from
+     * the root page's guards via `AppShell.WithPages()`.
+     *
+     * @example
+     * ```tsx
+     * import { redirectTo } from "@tailor-platform/app-shell";
+     *
+     * <AppShell
+     *   modules={[...]}
+     *   rootGuards={[() => redirectTo("/dashboard")]}
+     * />
+     * ```
+     */
+    rootGuards?: Guard[];
+    /**
+     * Settings resources to be included in the settings menu
+     */
+    settingsResources?: Array<Resource>;
+    /**
+     * Locale code used for built-in UI strings.
+     *
+     * If not provided, auto-detects from browser preferences.
+     * No browser locale information avilable, "en" used as default.
+     */
+    locale?: string;
+    /**
+     * IANA timezone (e.g. "America/Los_Angeles") used by date/time components
+     * as the default for resolving "today" and for `ZonedDateTime` values.
+     *
+     * If not provided, date/time components fall back to the user's local timezone.
+     */
+    timeZone?: string;
+    /**
+     * Global error boundary component applied to all routes.
+     *
+     * When an error occurs in any route component, this component will render.
+     * Module and resource-level error boundaries take precedence over this.
+     * Use the `useRouteError` hook to access error details within the component.
+     *
+     * @example
+     * ```tsx
+     * import { useRouteError } from "@tailor-platform/app-shell";
+     *
+     * const GlobalErrorBoundary = () => {
+     *   const error = useRouteError() as Error;
+     *   return (
+     *     <div>
+     *       <h1>Something went wrong</h1>
+     *       <p>{error.message}</p>
+     *     </div>
+     *   );
+     * };
+     *
+     * <AppShell
+     *   modules: [...],
+     *   errorBoundary: <GlobalErrorBoundary />,
+     * />
+     * ```
+     */
+    errorBoundary?: ErrorBoundaryComponent;
+    /**
+     * Custom context data accessible from guards and components.
+     *
+     * Use module augmentation to define the type of context data:
+     *
+     * @example
+     * ```typescript
+     * // types.d.ts
+     * declare module "@tailor-platform/app-shell" {
+     *   interface AppShellRegister {
+     *     contextData: {
+     *       apiClient: ApiClient;
+     *       currentUser: User;
+     *     };
+     *   }
+     * }
+     *
+     * // App.tsx
+     * <AppShell
+     *   modules={modules}
+     *   contextData={{ apiClient, currentUser }}
+     * />
+     * ```
+     */
+    contextData?: ContextData;
+    /**
+     * Async search sources for the built-in CommandPalette.
+     *
+     * The CommandPalette (opened via Cmd+K / Ctrl+K, or the sidebar Search
+     * button) always searches pages and contextual actions. When
+     * `searchSources` is also provided, those async sources are available
+     * as prefix-activated search modes.
+     *
+     * Note: `DefaultSidebar` always renders a Search entry at the top of
+     * the navigation menu, regardless of whether this prop is supplied.
+     *
+     * @example
+     * ```tsx
+     * <AppShell
+     *   modules={modules}
+     *   searchSources={[
+     *     {
+     *       prefix: "PO",
+     *       title: "Purchase Orders",
+     *       search: async (query, { signal }) => {
+     *         const results = await api.searchOrders(query, { signal });
+     *         return results.map((o) => ({
+     *           key: o.id,
+     *           label: o.number,
+     *           path: `/orders/${o.id}`,
+     *         }));
+     *       },
+     *     },
+     *   ]}
+     * />
+     * ```
+     */
+    searchSources?: readonly SearchSource[];
+    /**
+     * Initial color mode before any value is loaded from localStorage (`appshell-ui-theme`).
+     * This is the end-user accessibility preference; does not replace a stored preference.
+     *
+     * One of **`light`**, **`dark`**, or **`system`** (follows the OS).
+     *
+     * @default "system"
+     */
+    defaultColorTheme?: ColorTheme;
+}>;
+
+/**
+ * AppShell's props plus the routing mode. Memory routing is absent from the
+ * public {@link AppShellProps} so it cannot be shipped by accident; tests reach
+ * it via `@tailor-platform/app-shell/testing`, which re-exports this as
+ * `TestAppShellProps`.
+ */
+export declare type TestAppShellProps = AppShellProps & RouterContainerProps;
+
+/**
+ * Router context for unit-testing a single component, without booting the whole
+ * shell. For a page or integration test, mount `AppShell` with `memory`
+ * instead, so the test exercises AppShell's own router.
+ *
+ * ```tsx
+ * render(
+ *   <TestRouter path="/orders/:id" initialEntries={["/orders/A42"]}>
+ *     <OrderBadge />
+ *   </TestRouter>,
+ * );
+ * ```
+ */
+export declare const TestRouter: ({ children, initialEntries, initialIndex, path, }: TestRouterProps) => JSX.Element;
+
+export declare type TestRouterProps = PropsWithChildren<{
+    /** History stack; the last entry is the current location. Defaults to `["/"]`. */
+    initialEntries?: Array<string>;
+    /** Index into `initialEntries` to start at. Defaults to the last entry. */
+    initialIndex?: number;
+    /**
+     * Route pattern to match the children against, e.g. `"/orders/:id"`.
+     *
+     * Required for `useParams`, `useMatch`, or relative `<Link>` targets: a router
+     * on its own matches nothing, so without this `useParams()` is `{}` even when
+     * `initialEntries` holds a URL that looks like it should match.
+     */
+    path?: string;
+}>;
+
+export { }
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Title {
+    var displayName: string;
+}
+
+
+declare namespace Description {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Image {
+    var displayName: string;
+}
+
+
+declare namespace Fallback {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Viewport {
+    var displayName: string;
+}
+
+
+declare namespace Row {
+    var displayName: string;
+}
+
+
+declare namespace Interval {
+    var displayName: string;
+}
+
+
+declare namespace TimelineLink {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace Item {
+    var displayName: string;
+}
+
+
+declare namespace LinkItem {
+    var displayName: string;
+}
+
+
+declare namespace CheckboxItem {
+    var displayName: string;
+}
+
+
+declare namespace CheckboxItemIndicator {
+    var displayName: string;
+}
+
+
+declare namespace RadioItem {
+    var displayName: string;
+}
+
+
+declare namespace RadioItemIndicator {
+    var displayName: string;
+}
+
+
+declare namespace RadioGroup {
+    var displayName: string;
+}
+
+
+declare namespace Group {
+    var displayName: string;
+}
+
+
+declare namespace GroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace MenuSeparator {
+    var displayName: string;
+}
+
+
+declare namespace SubmenuRoot {
+    var displayName: string;
+}
+
+
+declare namespace SubmenuTrigger {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace List {
+    var displayName: string;
+}
+
+
+declare namespace Tab {
+    var displayName: string;
+}
+
+
+declare namespace Panel {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Close {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace Header {
+    var displayName: string;
+}
+
+
+declare namespace Footer {
+    var displayName: string;
+}
+
+
+declare namespace Title {
+    var displayName: string;
+}
+
+
+declare namespace Description {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Header {
+    var displayName: string;
+}
+
+
+declare namespace Body {
+    var displayName: string;
+}
+
+
+declare namespace Footer {
+    var displayName: string;
+}
+
+
+declare namespace Row {
+    var displayName: string;
+}
+
+
+declare namespace Head {
+    var displayName: string;
+}
+
+
+declare namespace Cell {
+    var displayName: string;
+}
+
+
+declare namespace Caption {
+    var displayName: string;
+}
+
+
+declare namespace Provider {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Header {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace SelectRoot {
+    var displayName: string;
+}
+
+
+declare namespace SelectTrigger {
+    var displayName: string;
+}
+
+
+declare namespace SelectValue {
+    var displayName: string;
+}
+
+
+declare namespace SelectContent {
+    var displayName: string;
+}
+
+
+declare namespace SelectItem {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Close {
+    var displayName: string;
+}
+
+
+declare namespace Content {
+    var displayName: string;
+}
+
+
+declare namespace Header {
+    var displayName: string;
+}
+
+
+declare namespace Footer {
+    var displayName: string;
+}
+
+
+declare namespace Title {
+    var displayName: string;
+}
+
+
+declare namespace Description {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxRoot {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxInput {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxTrigger {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxInputGroup {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxContent {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxList {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxItem {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxEmpty {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxGroup {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxClear {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxChips {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxChip {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxChipRemove {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxValue {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxStatus {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxCollection {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Label {
+    var displayName: string;
+}
+
+
+declare namespace Control {
+    var displayName: string;
+}
+
+
+declare namespace Description {
+    var displayName: string;
+}
+
+
+declare namespace Error {
+    var displayName: string;
+}
+
+
+declare namespace Validity {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteRoot {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteValue {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteInput {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteTrigger {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteInputGroup {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteContent {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteList {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteItem {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteEmpty {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteClear {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteGroup {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteCollection {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteStatus {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Legend {
+    var displayName: string;
+}
+
+
+declare namespace DataTableRoot {
+    var displayName: string;
+}
+
+
+declare namespace DataTableTable {
+    var displayName: string;
+}
+
+
+declare namespace DataTableFooter {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace Items {
+    var displayName: string;
+}
+
+
+declare namespace Item {
+    var displayName: string;
+}
+
+
+declare namespace DataTableToolbar {
+    var displayName: string;
+}
+
+
+declare namespace DataTableFilters {
+    var displayName: string;
+}
+
+
+declare namespace AsyncErrorState {
+    var displayName: string;
+}
+
+
+declare namespace DataTableColumnSettings {
+    var displayName: string;
+}