@kit-data-manager/react-search-component/dist/components/ReactSearchComponent.d.ts

All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.

import type { SearchConfig } from "../lib/config/SearchConfig";
import { OptionViewProps } from "../components/search/DefaultFacet";
import { ResultViewProps } from "@elastic/react-search-ui-views";
import { ComponentType } from "react";
import "../index.css";
import "../elastic-ui.css";
import { NodeTypes } from "@xyflow/react";
/**
 * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
 * an interactive graph of related records. Pass in a config object ({@link SearchConfig}) to configure the search.
 *
 * #### ⚠️ Warning
 *
 * Make sure your configuration is memoized or defined outside any components
 *
 *
 * #### 🖌️ Customization
 * You can customize the default behaviour by overriding the default result view (resultView) or the views of the facet
 * options (facetOptionView).
 *
 * You can also specify your own graph nodes to dynamically render any relationships between objects. ([Package Docs](https://reactflow.dev/learn/customization/custom-nodes))
 */
export declare function ReactSearchComponent({ config: rawConfig, resultView, resultViewPerIndex, facetOptionView, dark, graphNodeTypes }: {
    /**
     * Make sure the config is either memoized or constant (defined outside any components)
     */
    config: SearchConfig;
    /**
     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`.
     * You can set custom result views per view using the `resultViewPerIndex` prop. Will be used as the result view
     * for all indices that have no override configured in `resultViewPerIndex`
     * @optional Can be omitted when `resultViewPerIndex` is specified for each index
     * @example
     * resultView={ ({ result }) => <GenericResultView result={result} ... /> }
     */
    resultView?: ComponentType<ResultViewProps>;
    /**
     * React Component that will be used to render the results from the current search. Consider using the `GenericResultView`.
     * In this prop you have to additionally specify which index the result view should be used for. If you want to use
     * the same result view for all indices, use `resultView`.
     * @optional can be omitted when `resultView` is set
     * @example
     * resultViewPerIndex={{
     *     "my-index-1": ({ result }) => <GenericResultView result={result} ... />
     *     "my-index-2": OtherResultView
     * }}
     */
    resultViewPerIndex?: Record<string, ComponentType<ResultViewProps>>;
    /**
     * React Component that will be used to render the individual options (text right of the checkboxes) in a facet.
     */
    facetOptionView?: ComponentType<OptionViewProps>;
    /**
     * Specify additional node types to render in the relations graph. Optional. The "result" node type is present by default
     * and can be overwritten here.
     * > **⚠ Important**: Make sure to memoize the object passed to this prop, or pass a constant object.
     *
     * Consult the [React Flow Documentation](https://reactflow.dev/learn/customization/custom-nodes) on how to specify nodes. **Make sure your node has one `target` and one `source` Handle.**
     */
    graphNodeTypes?: NodeTypes;
    /**
     * Setting this to true will add the `dark` class to the root element of the document (typically `<html/>`). This will enable dark mode.
     * @deprecated This property is deprecated and will be removed in the future. Dark mode is automatically enabled when any parent element has the `dark` class.
     */
    dark?: boolean;
}): import("react/jsx-runtime").JSX.Element;