@mantine/spotlight/lib/Spotlight.d.ts

Command center components for react and Mantine

import { Factory, ScrollAreaAutosizeProps } from '@mantine/core';
import { spotlight } from './spotlight.store';
import { SpotlightAction, SpotlightActionProps, type SpotlightActionStylesNames } from './SpotlightAction';
import { SpotlightActionsGroup, type SpotlightActionsGroupProps, type SpotlightActionsGroupStylesNames } from './SpotlightActionsGroup';
import { SpotlightActionsList, type SpotlightActionsListProps, type SpotlightActionsListStylesNames } from './SpotlightActionsList';
import { SpotlightEmpty, type SpotlightEmptyProps, type SpotlightEmptyStylesNames } from './SpotlightEmpty';
import { SpotlightFooter, type SpotlightFooterProps, type SpotlightFooterStylesNames } from './SpotlightFooter';
import { SpotlightRoot, SpotlightRootProps, SpotlightRootStylesNames } from './SpotlightRoot';
import { SpotlightSearch, SpotlightSearchProps, type SpotlightSearchStylesNames } from './SpotlightSearch';
export type SpotlightFilterFunction = (query: string, actions: SpotlightActions[]) => SpotlightActions[];
export interface SpotlightActionData extends SpotlightActionProps {
    id: string;
    group?: string;
}
export interface SpotlightActionGroupData {
    group: string;
    actions: SpotlightActionData[];
}
export type SpotlightActions = SpotlightActionData | SpotlightActionGroupData;
export type SpotlightStylesNames = SpotlightRootStylesNames;
export interface SpotlightProps extends SpotlightRootProps {
    /** Props passed down to the `Spotlight.Search` */
    searchProps?: SpotlightSearchProps;
    /** Actions data, passed down to `Spotlight.Action` component */
    actions: SpotlightActions[];
    /** Function to filter actions data based on search query, by default actions are filtered by title, description and keywords */
    filter?: SpotlightFilterFunction;
    /** Message displayed when none of the actions match given `filter` */
    nothingFound?: React.ReactNode;
    /** Determines whether search query should be highlighted in action label @default false */
    highlightQuery?: boolean;
    /** Maximum number of actions displayed at a time @default Infinity */
    limit?: number;
    /** Props passed down to the `ScrollArea` component */
    scrollAreaProps?: Partial<ScrollAreaAutosizeProps>;
}
export type SpotlightFactory = Factory<{
    props: SpotlightProps;
    ref: HTMLDivElement;
    stylesNames: SpotlightStylesNames;
    staticComponents: {
        Search: typeof SpotlightSearch;
        ActionsList: typeof SpotlightActionsList;
        Action: typeof SpotlightAction;
        Empty: typeof SpotlightEmpty;
        Footer: typeof SpotlightFooter;
        ActionsGroup: typeof SpotlightActionsGroup;
        Root: typeof SpotlightRoot;
        open: typeof spotlight.open;
        close: typeof spotlight.close;
        toggle: typeof spotlight.toggle;
    };
}>;
export declare const Spotlight: import("@mantine/core").MantineComponent<{
    props: SpotlightProps;
    ref: HTMLDivElement;
    stylesNames: SpotlightStylesNames;
    staticComponents: {
        Search: typeof SpotlightSearch;
        ActionsList: typeof SpotlightActionsList;
        Action: typeof SpotlightAction;
        Empty: typeof SpotlightEmpty;
        Footer: typeof SpotlightFooter;
        ActionsGroup: typeof SpotlightActionsGroup;
        Root: typeof SpotlightRoot;
        open: typeof spotlight.open;
        close: typeof spotlight.close;
        toggle: typeof spotlight.toggle;
    };
}>;
export declare namespace Spotlight {
    type Props = SpotlightProps;
    type StylesNames = SpotlightStylesNames;
    type Factory = SpotlightFactory;
    type FilterFunction = SpotlightFilterFunction;
    type ActionData = SpotlightActionData;
    type ActionGroupData = SpotlightActionGroupData;
    namespace Action {
        type Props = SpotlightActionProps;
        type StylesNames = SpotlightActionStylesNames;
    }
    namespace ActionsGroup {
        type Props = SpotlightActionsGroupProps;
        type StylesNames = SpotlightActionsGroupStylesNames;
    }
    namespace ActionsList {
        type Props = SpotlightActionsListProps;
        type StylesNames = SpotlightActionsListStylesNames;
    }
    namespace Empty {
        type Props = SpotlightEmptyProps;
        type StylesNames = SpotlightEmptyStylesNames;
    }
    namespace Footer {
        type Props = SpotlightFooterProps;
        type StylesNames = SpotlightFooterStylesNames;
    }
    namespace Search {
        type Props = SpotlightSearchProps;
        type StylesNames = SpotlightSearchStylesNames;
    }
    namespace Root {
        type Props = SpotlightRootProps;
        type StylesNames = SpotlightRootStylesNames;
    }
}