@servicestack/react/dist/index.d.ts

ServiceStack's React Component Library - A comprehensive collection of React components for building modern web applications.

import { ApiResult as ApiResult_2 } from '@servicestack/client';
import { ComponentType } from 'react';
import { Context } from 'react';
import { CSSProperties } from 'react';
import { default as default_2 } from 'react';
import { JsonServiceClient } from '@servicestack/client';
import { JSX } from 'react/jsx-runtime';
import { MutableRefObject } from 'react';
import { ReactNode } from 'react';

declare const a: {
    blue: string;
    purple: string;
    red: string;
    green: string;
    sky: string;
    cyan: string;
    indigo: string;
};

export declare interface AdminDatabaseInfo {
    queryLimit: number;
    databases: DatabaseInfo[];
    meta: {
        [index: string]: string;
    };
}

export declare interface AdminRedisInfo {
    queryLimit: number;
    databases: number[];
    modifiableConnection?: boolean;
    endpoint: RedisEndpointInfo;
    meta: {
        [index: string]: string;
    };
}

export declare interface AdminUi {
    css: ApiCss;
}

export declare interface AdminUsersInfo {
    accessRole: string;
    enabled: string[];
    userAuth: MetadataType;
    allRoles: string[];
    allPermissions: string[];
    queryUserAuthProperties: string[];
    queryMediaRules: MediaRule[];
    formLayout: InputInfo[];
    css: ApiCss;
    meta: {
        [index: string]: string;
    };
}

export declare function Alert({ type, hideIcon, className, children, ...attrs }: AlertProps & default_2.HTMLAttributes<HTMLDivElement>): JSX.Element;

export declare interface AlertProps {
    type?: "warn" | "info" | "error" | "success";
    hideIcon?: boolean;
    className?: string;
    children?: ReactNode;
}

export declare function AlertSuccess({ message, className, children }: AlertSuccessProps & {
    children?: React.ReactNode;
}): JSX.Element;

export declare interface AlertSuccessProps {
    message?: string;
    className?: string;
}

export declare interface ApiCss {
    form: string;
    fieldset: string;
    field: string;
}

export declare interface ApiFormat {
    locale?: string;
    assumeUtc?: boolean;
    number?: FormatInfo;
    date?: FormatInfo;
}

/** Resolve Request DTO {MetadataOperationType} by name */
declare function apiOf(name: string): MetadataOperationType;

export declare type ApiPrefs = {
    take?: number;
    selectedColumns?: string[];
};

export declare interface ApiRequest {
    [k: string]: any;
    getTypeName(): string;
    getMethod(): string;
    createResponse(): any;
}

export declare interface ApiResponse {
    response?: any;
    error?: ResponseStatus;
    get completed(): boolean;
    get failed(): boolean;
    get succeeded(): boolean;
    get errorMessage(): string;
    get errorCode(): string;
    get errors(): ResponseError[];
    get errorSummary(): string;
}

export declare interface ApiResponseType {
    response?: any;
    error?: ResponseStatus;
}

export declare interface ApiResult<TResponse> extends ApiResponse {
    response?: TResponse;
    error?: ResponseStatus;
    get completed(): boolean;
    get failed(): boolean;
    get succeeded(): boolean;
    get errorMessage(): string;
    get errorCode(): string;
    get errors(): ResponseError[];
    get errorSummary(): string;
    fieldError(fieldName: string): ResponseError;
    fieldErrorMessage(fieldName: string): string;
    hasFieldError(fieldName: string): boolean;
    showSummary(exceptFields?: string[]): boolean;
    summaryMessage(exceptFields?: string[]): string;
    addFieldError(fieldName: string, message: string, errorCode?: string): void;
}

/** Capture AutoQuery APIs */
declare class Apis implements AutoQueryApis {
    Query?: MetadataOperationType;
    QueryInto?: MetadataOperationType;
    Create?: MetadataOperationType;
    Update?: MetadataOperationType;
    Patch?: MetadataOperationType;
    Delete?: MetadataOperationType;
    get AnyQuery(): MetadataOperationType;
    get AnyUpdate(): MetadataOperationType;
    get dataModel(): MetadataTypeName;
    toArray(): MetadataOperationType[];
    get empty(): boolean;
    add(op: MetadataOperationType): void;
    static from(ops: MetadataOperationType[]): Apis;
    static forType(type?: string | null, metaTypes?: MetadataTypes | null): Apis;
}

export declare type ApiState = {
    unRefs: <T extends Record<string, any>>(o: T) => T;
    setError: ({ message, errorCode, fieldName, errors }: IResponseStatus) => ResponseStatus;
    addFieldError: ({ fieldName, message, errorCode }: IResponseError) => void;
    clearErrors(): void;
    loading: boolean;
    error: ResponseStatus | undefined;
    api: <TResponse>(request: IReturn<TResponse> | ApiRequest, args?: any, method?: string) => Promise<ApiResult<TResponse>>;
    apiVoid: (request: IReturnVoid | ApiRequest, args?: any, method?: string) => Promise<ApiResult<EmptyResponse>>;
    apiForm: <TResponse>(request: ApiRequest | IReturn<TResponse>, body: FormData, args?: any, method?: string) => Promise<ApiResult<TResponse>>;
    apiFormVoid: (request: IReturnVoid | ApiRequest, body: FormData, args?: any, method?: string) => Promise<ApiResult<EmptyResponse>>;
    swr: <TResponse>(request: IReturn<TResponse> | ApiRequest, fn: (r: ApiResult<TResponse>) => void, args?: any, method?: string) => Promise<ApiResult<TResponse>>;
    swrEffect: <TResponse>(requestFn: () => IReturn<TResponse> | ApiRequest, options?: {
        args?: any;
        method?: string;
        delayMs?: number;
    }) => ApiResult<TResponse>;
};

export declare const ApiStateContext: Context<ApiState>;

export declare interface ApiUiInfo {
    locodeCss: ApiCss;
    explorerCss: ApiCss;
    formLayout: InputInfo[];
    meta: {
        [index: string]: string;
    };
}

/** Format an API Response value */
declare function apiValueFmt(o: any, format?: FormatInfo | null, attrs?: any): any;

export declare interface AppInfo {
    baseUrl: string;
    serviceStackVersion: string;
    serviceName: string;
    apiVersion: string;
    serviceDescription: string;
    serviceIconUrl: string;
    brandUrl: string;
    brandImageUrl: string;
    textColor: string;
    linkColor: string;
    backgroundColor: string;
    backgroundImageUrl: string;
    iconUrl: string;
    jsTextCase: string;
    meta: {
        [index: string]: string;
    };
}

export declare interface AppMetadata {
    date: string;
    app: AppInfo;
    ui: UiInfo;
    config: ConfigInfo;
    contentTypeFormats: {
        [index: string]: string;
    };
    httpHandlers: {
        [index: string]: string;
    };
    plugins: PluginInfo;
    customPlugins: {
        [index: string]: CustomPluginInfo;
    };
    api: MetadataTypes;
    meta: {
        [index: string]: string;
    };
}

export declare interface AppTags {
    default: string;
    other: string;
}

/** Convert string dictionary to [{ key:string, value:string }] */
declare function asKvps(options?: {
    [k: string]: string;
} | null): KeyValuePair<string, string>[];

declare function asOptions(all: string[], exclude?: null | string | string[]): {
    [k: string]: boolean;
};

/** Resolve Absolute URL to use for relative paths */
declare function assetsPathResolver(src?: string): string;

declare function asStrings(o?: string | string[] | null): string[];

/** Format File attachment URL as an Attachment */
declare function attachment(url: string, attrs?: any): string;

export declare function authContext(): {
    signIn: typeof signIn;
    signOut: typeof signOut;
    getAuth: typeof getAuth;
    hasRole: typeof hasRole;
    hasPermission: typeof hasPermission;
    isAdmin: typeof isAdmin;
    canAccess: typeof canAccess;
    invalidAccessMessage: typeof invalidAccessMessage;
};

export declare type AuthenticateResponse = {
    userId?: string;
    sessionId?: string;
    userName?: string;
    displayName?: string;
    referrerUrl?: string;
    bearerToken?: string;
    refreshToken?: string;
    profileUrl?: string;
    roles?: string[];
    permissions?: string[];
};

export declare interface AuthInfo {
    hasAuthSecret?: boolean;
    hasAuthRepository?: boolean;
    includesRoles?: boolean;
    includesOAuthTokens?: boolean;
    htmlRedirect: string;
    authProviders: MetaAuthProvider[];
    roleLinks: {
        [index: string]: LinkInfo[];
    };
    serviceRoutes: {
        [index: string]: string[];
    };
    meta: {
        [index: string]: string;
    };
}

/**
 * Autocomplete component with support for ApiStateContext.
 *
 * The component can access error state from either:
 * 1. The `status` prop (explicit ResponseStatus)
 * 2. The `ApiStateContext` (from parent AutoForm, AutoCreateForm, AutoEditForm, or SignIn)
 *
 * The `status` prop takes precedence over the context error.
 */
export declare const Autocomplete: default_2.ForwardRefExoticComponent<AutocompleteProps & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, keyof AutocompleteProps> & default_2.RefAttributes<AutocompleteRef>>;

export declare interface AutocompleteProps {
    status?: ResponseStatus | null;
    id: string;
    type?: string;
    label?: string;
    help?: string;
    placeholder?: string;
    multiple?: boolean;
    required?: boolean;
    options?: any[];
    value?: any;
    match: (item: any, value: string) => boolean;
    viewCount?: number;
    pageSize?: number;
    className?: string;
    onChange?: (value: any[] | any) => void;
    children?: ((item: any) => ReactNode) | ReactNode;
}

declare interface AutocompleteRef {
    toggle(expand: boolean): void;
}

/**
 * AutoCreateForm component for creating new entities with ServiceStack AutoQuery CRUD APIs.
 *
 * The form provides ApiStateContext to all child components, allowing them to access
 * the form's loading and error state using the `useApiState()` hook.
 *
 * @example
 * ```tsx
 * // In a child component within AutoCreateForm:
 * import { useApiState } from '@servicestack/react'
 *
 * function CustomFormField() {
 *   const apiState = useApiState()
 *
 *   if (apiState?.loading) {
 *     return <div>Saving...</div>
 *   }
 *
 *   if (apiState?.error) {
 *     return <div>Error: {apiState.error.message}</div>
 *   }
 *
 *   return <div>Form field content</div>
 * }
 * ```
 */
export declare const AutoCreateForm: default_2.ForwardRefExoticComponent<AutoCreateFormProps & AutoCreateFormSlots & default_2.RefAttributes<AutoCreateFormRef>>;

export declare interface AutoCreateFormProps extends AutoFormBaseProps {
}

declare interface AutoCreateFormRef {
    forceUpdate: () => void;
    props: AutoCreateFormProps;
    setModel: (args: any) => void;
    formFields: any;
    model: any;
}

declare interface AutoCreateFormSlots {
    heading?: ReactNode;
    subheading?: ReactNode;
    header?: (props: {
        formInstance: AutoCreateFormRef | null;
        model: any;
    }) => ReactNode;
    footer?: (props: {
        formInstance: AutoCreateFormRef | null;
        model: any;
    }) => ReactNode;
    children?: ReactNode;
}

/**
 * AutoEditForm component for editing existing entities with ServiceStack AutoQuery CRUD APIs.
 *
 * The form provides ApiStateContext to all child components, allowing them to access
 * the form's loading and error state using the `useApiState()` hook.
 *
 * @example
 * ```tsx
 * // In a child component within AutoEditForm:
 * import { useApiState } from '@servicestack/react'
 *
 * function CustomFormField() {
 *   const apiState = useApiState()
 *
 *   if (apiState?.loading) {
 *     return <div>Updating...</div>
 *   }
 *
 *   if (apiState?.error) {
 *     return <div>Error: {apiState.error.message}</div>
 *   }
 *
 *   return <div>Form field content</div>
 * }
 * ```
 */
export declare const AutoEditForm: default_2.ForwardRefExoticComponent<AutoEditFormProps & AutoEditFormSlots & default_2.RefAttributes<AutoEditFormRef>>;

export declare interface AutoEditFormProps extends AutoFormBaseProps {
    value: any;
    deleteType?: string | InstanceType<any> | Function;
    onDelete?: (response: any) => void;
}

declare interface AutoEditFormRef {
    forceUpdate: () => void;
    props: AutoEditFormProps;
    setModel: (args: any) => void;
    formFields: any;
    model: any;
}

declare interface AutoEditFormSlots {
    heading?: ReactNode;
    subheading?: ReactNode;
    header?: (props: {
        formInstance: AutoEditFormRef | null;
        model: any;
    }) => ReactNode;
    footer?: (props: {
        formInstance: AutoEditFormRef | null;
        model: any;
    }) => ReactNode;
    children?: ReactNode;
}

/**
 * AutoForm component that automatically generates a form from a ServiceStack DTO type.
 *
 * The form provides ApiStateContext to all child components, allowing them to access
 * the form's loading and error state using the `useApiState()` hook.
 *
 * @example
 * ```tsx
 * // In a child component within AutoForm:
 * import { useApiState } from '@servicestack/react'
 *
 * function CustomFormField() {
 *   const apiState = useApiState()
 *
 *   if (apiState?.loading) {
 *     return <div>Loading...</div>
 *   }
 *
 *   if (apiState?.error) {
 *     return <div>Error: {apiState.error.message}</div>
 *   }
 *
 *   return <div>Form field content</div>
 * }
 * ```
 */
export declare const AutoForm: default_2.ForwardRefExoticComponent<AutoFormProps & AutoFormSlots & default_2.RefAttributes<AutoFormRef>>;

export declare interface AutoFormBaseProps {
    type: string | InstanceType<any> | Function;
    formStyle?: "slideOver" | "card";
    className?: string;
    panelClass?: string;
    formClass?: string;
    headingClass?: string;
    subHeadingClass?: string;
    buttonsClass?: string;
    heading?: string;
    subHeading?: string;
    autosave?: boolean;
    showLoading?: boolean;
    showCancel?: boolean;
    configureField?: (field: InputProp) => void;
    configureFormLayout?: (field: InputProp[]) => void;
    onDone?: () => void;
    onSave?: (response: any) => void;
    onError?: (error: ResponseStatus) => void;
}

export declare const AutoFormFields: default_2.ForwardRefExoticComponent<AutoFormFieldsProps & default_2.RefAttributes<AutoFormFieldsRef>>;

export declare interface AutoFormFieldsProps {
    value: ApiRequest;
    type?: string;
    metaType?: MetadataType;
    api: {
        error?: ResponseStatus;
    } | null;
    formLayout?: InputInfo[];
    configureField?: (field: InputProp) => void;
    configureFormLayout?: (field: InputProp[]) => void;
    hideSummary?: boolean;
    flexClass?: string;
    divideClass?: string;
    spaceClass?: string;
    fieldsetClass?: string;
    onChange?: (value: any) => void;
}

declare interface AutoFormFieldsRef {
    forceUpdate: () => void;
    props: AutoFormFieldsProps;
    updateValue: (id: string, value: any) => void;
}

export declare interface AutoFormProps {
    type: string | InstanceType<any> | Function;
    value?: ApiRequest | any;
    heading?: string;
    subHeading?: string;
    showLoading?: boolean;
    jsconfig?: string;
    formStyle?: "slideOver" | "card";
    metaType?: MetadataType;
    configureField?: (field: InputProp) => void;
    configureFormLayout?: (field: InputProp[]) => void;
    className?: string;
    panelClass?: string;
    bodyClass?: string;
    formClass?: string;
    innerFormClass?: string;
    headerClass?: string;
    buttonsClass?: string;
    headingClass?: string;
    subHeadingClass?: string;
    submitLabel?: string;
    allowSubmit?: (model: any) => boolean;
    onSubmit?: (request: any) => Promise<ApiResult_2<any>>;
    onSuccess?: (response: any) => void;
    onError?: (error: ResponseStatus) => void;
    onDone?: () => void;
    onChange?: (value: any) => void;
    children?: ReactNode;
}

declare interface AutoFormRef {
    forceUpdate: () => void;
    props: AutoFormProps;
    setModel: (args: any) => Promise<void>;
    formFields: any;
    submit: () => Promise<void>;
    close: () => void;
    model: any;
}

declare interface AutoFormSlots {
    heading?: ReactNode;
    subheading?: ReactNode;
    header?: (props: {
        instance: AutoFormRef | null;
        model: any;
    }) => ReactNode;
    footer?: (props: {
        instance: AutoFormRef | null;
        model: any;
    }) => ReactNode;
    buttons?: ReactNode;
    leftbuttons?: (props: {
        instance: AutoFormRef | null;
        model: any;
    }) => ReactNode;
    rightbuttons?: (props: {
        instance: AutoFormRef | null;
        model: any;
    }) => ReactNode;
}

export declare interface AutoQueryApis {
    Query?: MetadataOperationType;
    QueryInto?: MetadataOperationType;
    Create?: MetadataOperationType;
    Update?: MetadataOperationType;
    Patch?: MetadataOperationType;
    Delete?: MetadataOperationType;
}

export declare interface AutoQueryConvention {
    name: string;
    value: string;
    types?: string;
    valueType?: string;
}

export declare const AutoQueryGrid: default_2.ForwardRefExoticComponent<AutoQueryGridProps & AutoQueryGridCallbacks & AutoQueryGridSlots & default_2.RefAttributes<AutoQueryGridRef>>;

declare interface AutoQueryGridCallbacks {
    onHeaderSelected?: (name: string, e: default_2.MouseEvent) => void;
    onRowSelected?: (item: any, ev: default_2.MouseEvent) => void;
    onNav?: (args: any) => void;
}

export declare type AutoQueryGridDefaults = {
    deny?: GridAllowOptions[];
    hide?: GridShowOptions[];
    toolbarButtonClass?: string;
    tableStyle?: TableStyleOptions;
    take?: number;
    maxFieldLength?: number;
};

export declare interface AutoQueryGridProps {
    filterDefinitions?: AutoQueryConvention[];
    id?: string;
    apis?: string | string[];
    type?: string | InstanceType<any> | Function;
    prefs?: ApiPrefs;
    deny?: string | GridAllowOptions | GridAllowOptions[];
    hide?: string | GridShowOptions | GridShowOptions[];
    selectedColumns?: string[] | string;
    toolbarButtonClass?: string;
    tableStyle?: TableStyleOptions;
    className?: string;
    gridClass?: string;
    grid2Class?: string;
    grid3Class?: string;
    grid4Class?: string;
    tableClass?: string;
    theadClass?: string;
    tbodyClass?: string;
    theadRowClass?: string;
    theadCellClass?: string;
    headerTitle?: (name: string) => string;
    headerTitles?: {
        [name: string]: string;
    };
    visibleFrom?: {
        [name: string]: Breakpoint | "never";
    };
    rowClass?: (model: any, i: number) => string;
    rowStyle?: (model: any, i: number) => CSSProperties | undefined;
    modelTitle?: string;
    newButtonLabel?: string;
    apiPrefs?: ApiPrefs;
    canFilter?: (column: string) => boolean;
    disableKeyBindings?: (column: string) => boolean;
    configureField?: (field: InputProp) => void;
    skip?: number;
    create?: boolean;
    edit?: string | number;
    filters?: any;
    onHeaderSelected?: (name: string, ev: React.MouseEvent) => void;
    onRowSelected?: (item: any, ev: React.MouseEvent) => void;
    onNav?: (args: any) => void;
}

declare interface AutoQueryGridRef {
    update: () => Promise<void>;
    search: (args: any) => Promise<void>;
    createRequestArgs: () => Record<string, any>;
    reset: () => void;
    createDone: () => void;
    createSave: () => Promise<void>;
    editDone: () => void;
    editSave: () => Promise<void>;
    forceUpdate: () => void;
    setEdit: (props: any) => void;
    edit: any;
    createForm: any;
    editForm: any;
    apiPrefs: ApiPrefs;
    results: any[];
    skip: number;
    take: number;
    total: number;
}

declare interface AutoQueryGridSlots {
    children?: ReactNode;
    toolbar?: ReactNode;
    toolbarButtons?: (props: {
        toolbarButtonClass: string;
    }) => ReactNode;
    createForm?: (props: {
        type: string;
        configure: (field: any) => void;
        done: () => void;
        save: () => Promise<void>;
    }) => ReactNode;
    editForm?: (props: {
        model: any;
        type: string;
        deleteType: string | null;
        configure: (field: any) => void;
        done: () => void;
        save: () => Promise<void>;
    }) => ReactNode;
    viewForm?: (props: {
        model: any;
        apis: Apis;
        done: () => void;
    }) => ReactNode;
    formHeader?: (props: {
        form: 'create' | 'edit';
        formInstance: any;
        apis: Apis;
        type?: string;
        model?: any;
        id?: any;
        updateModel: (props: any) => void;
    }) => ReactNode;
    formFooter?: (props: {
        form: 'create' | 'edit';
        formInstance: any;
        apis: Apis;
        type?: string;
        model?: any;
        id?: any;
        updateModel: (props: any) => void;
    }) => ReactNode;
    columnSlots?: Record<string, (props: any) => ReactNode>;
    headerSlots?: Record<string, (props: any) => ReactNode>;
}

export declare interface AutoQueryInfo {
    maxLimit?: number;
    untypedQueries?: boolean;
    rawSqlFilters?: boolean;
    autoQueryViewer?: boolean;
    async?: boolean;
    orderByPrimaryKey?: boolean;
    crudEvents?: boolean;
    crudEventsServices?: boolean;
    accessRole: string;
    namedConnection: string;
    viewerConventions: AutoQueryConvention[];
    meta: {
        [index: string]: string;
    };
}

export declare const AutoViewForm: default_2.FC<AutoViewFormProps & AutoViewFormSlots>;

export declare interface AutoViewFormProps {
    model: any;
    apis?: Apis;
    typeName?: string;
    done?: Function;
    formStyle?: "slideOver" | "card";
    className?: string;
    panelClass?: string;
    formClass?: string;
    headingClass?: string;
    subHeadingClass?: string;
    heading?: string;
    subHeading?: string;
    showLoading?: boolean;
    deleteType?: string | InstanceType<any> | Function;
    onDone?: () => void;
    onSave?: (response: any) => void;
    onDelete?: (response: any) => void;
    onError?: (error: ResponseStatus) => void;
}

declare interface AutoViewFormSlots {
    heading?: ReactNode;
    subheading?: ReactNode;
}

export declare function Breadcrumb({ href, title, className, children }: BreadcrumbProps): JSX.Element;

export declare interface BreadcrumbProps {
    href?: string;
    title?: string;
    className?: string;
    children?: ReactNode;
}

export declare function Breadcrumbs({ homeHref, homeLabel, className, children }: BreadcrumbsProps): JSX.Element;

export declare interface BreadcrumbsProps {
    homeHref?: string;
    homeLabel?: string;
    className?: string;
    children?: ReactNode;
}

export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

/** Format number in human readable disk size */
declare function bytes(val: number, attrs?: any): string;

/** Check if Auth Session has access to API */
declare function canAccess(op?: MetadataOperationType | null): boolean;

/** Check if path or URI is of a supported web image type */
declare function canPreview(path: string): boolean;

declare const card: {
    panelClass: string;
    formClass: string;
    headingClass: string;
    subHeadingClass: string;
};

export declare function CellFormat(props: CellFormatProps): JSX.Element;

export declare interface CellFormatProps {
    type: MetadataType;
    propType: MetadataPropertyType;
    value: Object;
}

/**
 * CheckboxInput component with support for ApiStateContext.
 *
 * The component can access error state from either:
 * 1. The `status` prop (explicit ResponseStatus)
 * 2. The `ApiStateContext` (from parent AutoForm, AutoCreateForm, AutoEditForm, or SignIn)
 *
 * The `status` prop takes precedence over the context error.
 */
export declare const CheckboxInput: default_2.FC<CheckboxInputProps & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'onChange'>>;

export declare interface CheckboxInputProps {
    value?: boolean;
    status?: ResponseStatus;
    id: string;
    inputClass?: string;
    filterClass?: (cls: string) => string;
    label?: string;
    labelClass?: string;
    help?: string;
    onChange?: (value: boolean) => void;
}

/** Delete AppMetadata and remove from storage */
declare function clearMetadata(): void;

export declare const ClientContext: Context<JsonServiceClient>;

export declare function CloseButton({ buttonClass, title, className, onClose }: CloseButtonProps): JSX.Element;

export declare interface CloseButtonProps {
    buttonClass?: string;
    title?: string;
    className?: string;
    onClose?: () => void;
}

export declare type Column = {
    name: string;
    type: string;
    meta: MetadataPropertyType;
    settings: ColumnSettings;
    fieldName?: string;
    headerClass?: string;
    cellClass?: string;
    title?: string;
    format?: string;
    visibleFrom?: Breakpoint;
};

export declare type ColumnSettings = {
    filters: Filter[];
    sort?: "ASC" | "DESC";
};

/**
 * Combobox component that wraps Autocomplete with key-value pair support.
 *
 * Error handling is delegated to the Autocomplete component, which supports ApiStateContext.
 * Pass the `status` prop to explicitly set errors, or let Autocomplete access errors from context.
 */
export declare const Combobox: default_2.ForwardRefExoticComponent<ComboboxProps & Omit<default_2.HTMLAttributes<HTMLDivElement>, keyof ComboboxProps> & default_2.RefAttributes<ComboboxRef>>;

export declare interface ComboboxProps {
    status?: ResponseStatus | null;
    id: string;
    value?: any;
    multiple?: boolean;
    options?: any;
    values?: string[];
    entries?: {
        key: string;
        value: string;
    }[];
    label?: string;
    help?: string;
    placeholder?: string;
    className?: string;
    onChange?: (value: any[] | any) => void;
    children?: ((item: any) => ReactNode) | ReactNode;
}

export declare interface ComboboxRef {
    toggle(expand: boolean): void;
}

export declare interface ConfigInfo {
    debugMode?: boolean;
    meta: {
        [index: string]: string;
    };
}

export declare const ConfirmDelete: default_2.FC<ConfirmDeleteComponentProps>;

declare interface ConfirmDeleteComponentProps extends ConfirmDeleteProps {
    children?: default_2.ReactNode;
    className?: string;
    [key: string]: any;
}

export declare interface ConfirmDeleteProps {
    onDelete?: () => void;
}

declare function copyText(text: string): void;

declare function createDebounce(fn: Function, delayMs?: number): (...args: any[]) => void;

/** Create a Request DTO instance for Request DTO name or MetadataOperationType */
declare function createDto(requestDto: string | MetadataOperationType, obj?: any): any;

/** Create Form Layout's {InputProp[]} from {MetadataType} */
declare function createFormLayout(metaType?: MetadataType | null): InputProp[];

declare namespace css {
    export {
        filterClass,
        a,
        input,
        card,
        slideOver,
        modal,
        form,
        grid,
        dummy
    }
}
export { css }

/** Format number as Currency */
declare function currency(val: number, attrs?: any): string;

export declare interface CustomPluginInfo {
    accessRole: string;
    serviceRoutes: {
        [index: string]: string[];
    };
    enabled: string[];
    meta: {
        [index: string]: string;
    };
}

export declare function DarkModeToggle({ className }: DarkModeToggleProps): JSX.Element;

export declare interface DarkModeToggleProps {
    className?: string;
}

export declare interface DatabaseInfo {
    alias: string;
    name: string;
    schemas: SchemaInfo[];
}

export declare function DataGrid({ id, items, tableStyle, type, selectedColumns, className, gridClass: gridClassProp, grid2Class: grid2ClassProp, grid3Class: grid3ClassProp, grid4Class: grid4ClassProp, tableClass: tableClassProp, theadClass: theadClassProp, tbodyClass: tbodyClassProp, theadRowClass: theadRowClassProp, theadCellClass: theadCellClassProp, isSelected, headerTitle, headerTitles, visibleFrom, rowClass, rowStyle, onHeaderSelected, onRowSelected, slots: slotsProp, children, }: DataGridProps & {
    children?: default_2.ReactNode;
}): JSX.Element;

export declare interface DataGridProps {
    items: any[];
    id?: string;
    type?: string | InstanceType<any> | Function;
    tableStyle?: TableStyleOptions;
    selectedColumns?: string[] | string;
    className?: string;
    gridClass?: string;
    grid2Class?: string;
    grid3Class?: string;
    grid4Class?: string;
    tableClass?: string;
    theadClass?: string;
    tbodyClass?: string;
    theadRowClass?: string;
    theadCellClass?: string;
    isSelected?: (row: any) => boolean;
    headerTitle?: (name: string) => string;
    headerTitles?: {
        [name: string]: string;
    };
    visibleFrom?: {
        [name: string]: Breakpoint | "never";
    };
    rowClass?: (model: any, i: number) => string;
    rowStyle?: (model: any, i: number) => CSSProperties | undefined;
    onHeaderSelected?: (name: string, ev: React.MouseEvent) => void;
    onRowSelected?: (item: any, ev: React.MouseEvent) => void;
    slots?: {
        [name: string]: React.ReactNode | ((props: any) => React.ReactNode);
    };
}

/** Format Date into required input[type=date] format */
declare function dateInputFormat(value: Date | string | Object): string;

declare function dateTimeInputFormat(value: Date | string | Object): string;

declare type DefaultFormats = ApiFormat & {
    maxFieldLength?: number;
    maxNestedFields?: number;
    maxNestedFieldLength?: number;
};

declare function delay(ms: number): Promise<unknown>;

declare const dummy: {
    colspans: string;
};

export declare function DynamicInput({ input, value: modelValue, onChange: onUpdateModelValue, api }: DynamicInputProps): JSX.Element;

export declare interface DynamicInputProps {
    input: InputProp | InputInfo;
    value: ApiRequest;
    api: ApiResponseType | null;
    onChange?: (value: any) => void;
}

export declare interface EmptyResponse {
    responseStatus?: ResponseStatus;
}

/** Encode SVG XML for usage in Data URIs */
declare function encodeSvg(s: string): string;

export declare function EnsureAccess({ invalidAccess, className, alertClass, children }: EnsureAccessProps): JSX.Element;

export declare function EnsureAccessDialog({ title, subtitle, invalidAccess, className, alertClass, onDone }: EnsureAccessDialogProps): JSX.Element;

export declare interface EnsureAccessDialogProps {
    title?: string;
    subtitle?: string;
    invalidAccess?: string;
    className?: string;
    alertClass?: string;
    onDone?: () => void;
}

export declare interface EnsureAccessProps {
    invalidAccess?: string;
    className?: string;
    alertClass?: string;
    children?: ReactNode;
    onDone?: () => void;
}

/** Format Enum Flags into expanded enum strings */
declare function enumFlags(value: number, options: any): string;

declare function enumFlagsConverter(type: string): (x: number | any) => any;

/** Resolve Enum entries for Enum Type by name */
declare function enumOptions(name: string): {
    [name: string]: string;
};

export declare interface ErrorResponse {
    responseStatus?: ResponseStatus;
}

export declare function ErrorSummary({ status, except, className }: ErrorSummaryProps): JSX.Element;

export declare interface ErrorSummaryProps {
    status?: ResponseStatus | undefined;
    except?: string | string[];
    className?: string;
}

declare function expandEnumFlags(value: number, options: any): any[];

export declare interface ExplorerUi {
    css: ApiCss;
    tags: AppTags;
}

/** Resolve SVG URI for file extension */
declare function extSrc(ext: string): string;

/** Resolve SVG XML for file extension */
declare function extSvg(ext: string): string;

/** Resolve fallback URL to use if primary URL fails */
declare function fallbackPathResolver(src?: string): string;

export declare interface FieldCss {
    field: string;
    input: string;
    label: string;
}

/** Resolve image preview URL for file */
declare function fileImageUri(file: any | {
    name: string;
}): string;

/**
 * FileInput component with support for ApiStateContext.
 *
 * The component can access error state from either:
 * 1. The `status` prop (explicit ResponseStatus)
 * 2. The `ApiStateContext` (from parent AutoForm, AutoCreateForm, AutoEditForm, or SignIn)
 *
 * The `status` prop takes precedence over the context error.
 */
export declare const FileInput: default_2.FC<FileInputProps & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, keyof FileInputProps>>;

export declare interface FileInputProps {
    multiple?: boolean;
    status?: ResponseStatus | null;
    id: string;
    inputClass?: string;
    filterClass?: (cls: string) => string;
    label?: string;
    labelClass?: string;
    imageClass?: string;
    help?: string;
    placeholder?: string;
    value?: string;
    values?: string[];
    files?: UploadedFile[];
    onChange?: (value: string) => void;
}

/** Resolve the Icon URI to use for file */
declare function filePathUri(path?: string): string;

export declare interface FilesUploadInfo {
    basePath: string;
    locations: FilesUploadLocation[];
    meta: {
        [index: string]: string;
    };
}

export declare interface FilesUploadLocation {
    name: string;
    readAccessRole: string;
    writeAccessRole: string;
    allowExtensions: string[];
    allowOperations: string;
    maxFileCount?: number;
    minFileBytes?: number;
    maxFileBytes?: number;
}

export declare type Filter = {
    key: string;
    name: string;
    value: string;
    values?: string[];
};

declare function filterClass(cls: (string | undefined)[], type: string, fn?: ((cls: string) => string)): string;

export declare function FilterColumn({ definitions, column, topLeft, onDone, onSave }: FilterColumnProps): JSX.Element;

export declare interface FilterColumnProps {
    definitions: AutoQueryConvention[];
    column: Column;
    topLeft: {
        x: number;
        y: number;
    };
    onDone?: () => void;
    onSave?: (settings: ColumnSettings) => void;
}

export declare function FilterViews({ definitions, columns, className, onDone, onChange }: FilterViewsProps_2): JSX.Element;

export declare interface FilterViewsProps {
    definitions?: any[];
    columns?: any[];
}

declare interface FilterViewsProps_2 {
    definitions: AutoQueryConvention[];
    columns: Column[];
    className?: string;
    onDone?: () => void;
    onChange?: (column: Column) => void;
}

/** Filter Apis by different filtering conditions */
declare function findApis({ dataModel }: {
    dataModel?: string | MetadataType;
}): MetadataOperationType[];

/** Release all tracked Object URLs */
declare function flush(): void;

/** Set focus to the next element inside a HTML Form */
declare function focusNextElement(opt?: {
    after?: HTMLInputElement;
}): void;

declare const form: {
    panelClass(style?: FormStyle): string;
    formClass(style?: FormStyle): string;
    headingClass(style?: FormStyle): string;
    subHeadingClass(style?: FormStyle): string;
    buttonsClass: string;
    legendClass: string;
};

/** Format file size in human readable bytes */
declare function formatBytes(bytes: number, d?: number): string;

/** Format as Date */
declare function formatDate(d: Date | string | number, attrs?: any): string;

export declare interface FormatInfo {
    method: string;
    options?: string;
    locale?: string;
}

/** Format as Number */
declare function formatNumber(n: number, attrs?: any): string;

/** Available format methods to use in <PreviewFormat /> */
declare class Formats {
    static currency: FormatInfo;
    static bytes: FormatInfo;
    static link: FormatInfo;
    static linkTel: FormatInfo;
    static linkMailTo: FormatInfo;
    static icon: FormatInfo;
    static iconRounded: FormatInfo;
    static attachment: FormatInfo;
    static time: FormatInfo;
    static relativeTime: FormatInfo;
    static relativeTimeFromMs: FormatInfo;
    static date: FormatInfo;
    static number: FormatInfo;
    static hidden: FormatInfo;
    static enumFlags: FormatInfo;
}

declare function formatter(format: FormatInfo): Function;

/** Format any value or object graph */
declare function formatValue(value: any, format?: FormatInfo | null, attrs?: any): any;

export declare const FormLoading: default_2.FC<FormLoadingProps>;

export declare interface FormLoadingProps {
    icon?: boolean;
    text?: string;
    className?: string;
}

export declare type FormStyle = "slideOver" | "card";

/** Convert HTML Input values to supported DTO values */
declare function formValues(form: HTMLFormElement, props?: MetadataPropertyType[]): {
    [k: string]: any;
};

declare function fromCache(key: string): any;

declare function getAuth(): AuthenticateResponse;

/** Resolve File extension from file name or path */
declare function getExt(path?: string | null): string;

/** Resolve file name from /file/path */
declare function getFileName(path?: string | null): string;

declare function getFormatters(): {
    [k: string]: Function;
};

/** Resolve Primary Key value from {MetadataType} and row instance  */
declare function getId(type: MetadataType, row: any): any;

/** Get get AppMetadata instance */
declare function getMetadata(opt?: {
    assert?: boolean;
}): any;

/** Resolve the MIME type for a file path name or extension */
declare function getMimeType(fileNameOrExt: string): string;

/** Resolve PrimaryKey {MetadataPropertyType} for {MetadataType} */
declare function getPrimaryKey(type?: MetadataType | null): MetadataPropertyType;

declare function getPrimaryKeyByProps(type: MetadataType, props: MetadataPropertyType[]): MetadataPropertyType | null;

/** Resolve Request DTO name from a Request DTO instance */
declare function getTypeName(type?: string | InstanceType<any> | Function): string;

declare const grid: {
    getGridClass(style?: TableStyleOptions): string;
    getGrid2Class(style?: TableStyleOptions): string;
    getGrid3Class(style?: TableStyleOptions): string;
    getGrid4Class(style?: TableStyleOptions): string;
    getTableClass(style?: TableStyleOptions): string;
    getTheadClass(style?: TableStyleOptions): string;
    getTheadRowClass(style?: TableStyleOptions): string;
    getTheadCellClass(style?: TableStyleOptions): string;
    getTbodyClass(style?: TableStyleOptions): string;
    getTableRowClass(style: TableStyleOptions, i: number, selected: boolean, allowSelection: boolean): string;
    gridClass: string;
    grid2Class: string;
    grid3Class: string;
    grid4Class: string;
    tableClass: string;
    theadClass: string;
    tableCellClass: string;
    theadRowClass: string;
    theadCellClass: string;
    toolbarButtonClass: string;
};

export declare type GridAllowOptions = "filtering" | "queryString" | "queryFilters";

export declare type GridShowOptions = "toolbar" | "preferences" | "pagingNav" | "pagingInfo" | "downloadCsv" | "refresh" | "copyApiUrl" | "resetPreferences" | "filtersView" | "newItem" | "forms";

/** Check if the Authenticated User has a specific permission */
declare function hasPermission(permission: string): boolean;

/** Check if the Authenticated User has a specific role */
declare function hasRole(role: string): boolean;

/** Format as empty string */
declare function hidden(o: any): string;

/** Convert object dictionary into encoded HTML attributes */
declare function htmlAttrs(attrs: any): string;

export declare function HtmlFormat(props: HtmlFormatProps): JSX.Element;

export declare interface HtmlFormatProps {
    value?: any;
    depth?: number;
    fieldAttrs?: (k: string) => any;
    classes?: (type: 'object' | 'array', tag: 'div' | 'table' | 'thead' | 'th' | 'tr' | 'td', depth: number, cls: string, index?: number) => string;
}

/** HTML Tag builder */
declare function htmlTag(tag: string, child?: string, attrs?: any): string;

/** Format human readable ms */
declare function humanifyMs(ms: number): string;

/** Format human readable number */
declare function humanifyNumber(n: number): string;

export declare function Icon({ image, svg, src, alt, type, className }: IconProps): JSX.Element;

/** Format Image URL as an Icon */
declare function icon(url: string, attrs?: any): string;

/** Resolve the fallback URL for a broken Image URL */
declare function iconFallbackSrc(src: string, fallbackSrc?: string): string;

/** Error handler for broken images to return a fallbackSrc */
declare function iconOnError(img: HTMLImageElement, fallbackSrc?: string): void;

export declare interface IconProps {
    image?: ImageInfo;
    svg?: string;
    src?: string;
    alt?: string;
    type?: string;
    className?: string;
}

/** Format Image URL as a full rounded Icon */
declare function iconRounded(url: string, attrs?: any): string;

export declare interface ImageInfo {
    svg?: string;
    uri?: string;
    alt?: string;
    cls?: string;
}

/** Only indent json */
declare function indentJson(o: any, space?: number): string;

declare const input: {
    base: string;
    invalid: string;
    valid: string;
};

export declare function InputDescription({ id, description, className }: InputDescriptionProps): JSX.Element;

export declare interface InputDescriptionProps {
    id: string;
    description: string;
    className?: string;
}

/** Resolve file metadata for all uploaded HTML file input files */
declare function inputFiles(input: HTMLInputElement): {
    fileName: string;
    contentLength: number;
    filePath: string;
}[];

export declare interface InputInfo {
    id: string;
    name?: string;
    type: string;
    value?: string;
    placeholder?: string;
    help?: string;
    label?: string;
    title?: string;
    size?: string;
    pattern?: string;
    readOnly?: boolean;
    required?: boolean;
    disabled?: boolean;
    autocomplete?: string;
    autofocus?: string;
    min?: string;
    max?: string;
    step?: number;
    minLength?: number;
    maxLength?: number;
    accept?: string;
    capture?: string;
    multiple?: boolean;
    allowableValues?: string[];
    allowableEntries?: KeyValuePair<string, string>[];
    options?: string;
    ignore?: boolean;
    css?: FieldCss;
    meta?: {
        [index: string]: string;
    };
}

export declare interface InputProp extends InputInfo {
    prop?: MetadataPropertyType;
    op?: MetadataOperationType;
}

declare interface InsertOptions {
    selectionAtEnd?: boolean;
    offsetStart?: number;
    offsetEnd?: number;
    filterValue?: (value: string, opt: any) => string;
    filterSelection?: (selection: string) => string;
}

/** Return error message if Authenticated User cannot access API */
declare function invalidAccessMessage(op: MetadataOperationType): string;

export declare interface IResponseError {
    errorCode?: string;
    fieldName?: string;
    message?: string;
}

export declare interface IResponseStatus extends IResponseError {
    errors?: ResponseError[];
}

export declare interface IReturn<T> {
    createResponse(): T;
}

export declare interface IReturnVoid {
    createResponse(): any;
}

/** Check if the Authenticated User has the Admin role */
declare function isAdmin(): boolean;

declare function isComplexProp(prop?: MetadataPropertyType): boolean;

/** Check if value is a non-scalar type */
declare function isComplexType(value: any): boolean;

/** Check if value is a scalar type */
declare function isPrimitive(value: any): boolean;

declare interface Item {
    value: string;
    selectionStart?: number;
    selectionEnd?: number;
}

export declare interface KeyValuePair<TKey, TValue> {
    key: TKey;
    value: TValue;
}

/** Format URL as <a> link */
declare function link(href: string, opt?: {
    cls?: string;
    target?: string;
    rel?: string;
}): string;

/** Convert HTML Anchor attributes into encoded HTML attributes */
declare function linkAttrs(attrs: {
    href: string;
    cls?: string;
    target?: string;
    rel?: string;
}): {
    target: string;
    rel: string;
    class: string;
} & {
    href: string;
    cls?: string;
    target?: string;
    rel?: string;
};

export declare interface LinkInfo {
    id: string;
    href: string;
    label: string;
    icon: ImageInfo;
    show: string;
    hide: string;
}

/** Format email as <a> mailto: link */
declare function linkMailTo(email: string, opt?: {
    subject?: string;
    body?: string;
    cls?: string;
    target?: string;
    rel?: string;
}): string;

/** Format Phone Number as <a> tel: link */
declare function linkTel(tel: string, opt?: {
    cls?: string;
    target?: string;
    rel?: string;
}): string;

export declare function Loading({ imageClass, className, children }: LoadingProps): JSX.Element;

export declare interface LoadingProps {
    imageClass?: string;
    className?: string;
    children?: ReactNode;
}

/** Wrapper around localStorage for browser environments */
export declare class LocalStore implements Storage {
    get length(): number;
    getItem(key: string): string;
    setItem(key: string, value: string): void;
    removeItem(key: string): void;
    clear(): void;
    key(index: number): string;
}

export declare interface LocodeUi {
    css: ApiCss;
    tags: AppTags;
    maxFieldLength: number;
    maxNestedFields: number;
    maxNestedFieldLength: number;
}

export declare const LookupInput: default_2.FC<LookupInputProps>;

export declare interface LookupInputProps {
    id?: string;
    status?: ResponseStatus | null;
    input: InputProp | InputInfo;
    metadataType: MetadataType;
    value: any;
    className?: string;
    label?: string;
    labelClass?: string;
    help?: string;
    onChange?: (value: any) => void;
}

/** Create a Request DTO instance for Request DTO name */
declare function makeDto(requestDto: string, obj?: any, ctx?: {
    createResponse?: () => any;
    method?: string;
}): any;

/**
 * MarkdownInput component with support for ApiStateContext.
 *
 * The component can access error state from either:
 * 1. The `status` prop (explicit ResponseStatus)
 * 2. The `ApiStateContext` (from parent AutoForm, AutoCreateForm, AutoEditForm, or SignIn)
 *
 * The `status` prop takes precedence over the context error.
 */
export declare const MarkdownInput: default_2.ForwardRefExoticComponent<MarkdownInputProps & default_2.RefAttributes<MarkdownInputRef>>;

export declare type MarkdownInputOptions = "bold" | "italics" | "link" | "image" | "blockquote" | "code" | "heading" | "orderedList" | "unorderedList" | "strikethrough" | "undo" | "redo" | "help";

export declare interface MarkdownInputProps {
    status?: ResponseStatus | null;
    id: string;
    className?: string;
    inputClass?: string;
    filterClass?: (cls: string) => string;
    label?: string;
    labelClass?: string;
    help?: string;
    placeholder?: string;
    value?: string;
    counter?: boolean;
    rows?: number;
    errorMessages?: string[];
    lang?: string;
    autoFocus?: boolean;
    disabled?: boolean;
    helpUrl?: string;
    hide?: string | MarkdownInputOptions | MarkdownInputOptions[];
    onChange?: (value: string) => void;
    onClose?: () => void;
}

declare interface MarkdownInputRef {
    textarea: default_2.RefObject<HTMLTextAreaElement>;
    updateModelValue: (value: string) => void;
    selection: () => string;
    hasSelection: () => boolean;
    selectionInfo: () => any;
    insert: (prefix: string, suffix: string, placeholder?: string, options?: InsertOptions) => void;
    replace: (item: Item) => void;
}

export declare function MarkupFormat(props: MarkupFormatProps): JSX.Element;

export declare interface MarkupFormatProps {
    value: any;
    imageClass?: string;
}

export declare function MarkupModel(props: MarkupModelProps): JSX.Element;

export declare interface MarkupModelProps {
    value: any;
    imageClass?: string;
    tableClass?: string;
    basicTrClass?: string;
    basicThClass?: string;
    basicTdClass?: string;
    complexTitleTrClass?: string;
    complexTitleTdClass?: string;
    complexBodyTrClass?: string;
    complexBodyTdClass?: string;
}

export declare interface MediaRule {
    size: string;
    rule: string;
    applyTo: string[];
    meta: {
        [index: string]: string;
    };
}

/**
 * In-memory storage implementation for Node.js/Server environments.
 * Automatically used when localStorage is not available (e.g., React Server Components, Node.js).
 * Implements the Web Storage API interface using a Map.
 */
export declare class MemoryStore implements Storage {
    private store;
    get length(): number;
    getItem(key: string): string | null;
    setItem(key: string, value: string): void;
    removeItem(ke