@neo4j-ndl/react/lib/types/spotlight/Spotlight.d.ts

React implementation of Neo4j Design System

/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import React from 'react';
import { type HtmlAttributes, type PolymorphicForwardRefExoticComponent, type PolymorphicPropsWithRef } from '../_common/types';
import { type EventTypeLabelProps } from '../label';
import { type PopoverProps } from '../popover';
export type SpotlightActionsProps = {
    label: string;
    isDisabled?: boolean;
    fill?: 'text' | 'outlined';
} & ({
    as: 'button';
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
} | {
    as?: 'a';
    href?: string;
    target?: React.ComponentPropsWithoutRef<'a'>['target'];
} | {
    as: React.ElementType;
});
declare const SpotlightActions: PolymorphicForwardRefExoticComponent<'button', SpotlightActionsProps>;
type SpotlightHeaderProps = {
    children?: React.ReactNode;
};
type SpotlightBodyProps = {
    children?: React.ReactNode;
};
type SpotlightLabelProps = Omit<EventTypeLabelProps, 'color' | 'fill'>;
type SpotlightImageProps = {
    src: string;
    alt: string;
    htmlAttributes?: HtmlAttributes<'img'>;
    className?: string;
    style?: React.CSSProperties;
};
type SpotlightIconWrapperProps = {
    children?: React.ReactNode;
};
export type SpotlightCloseAction = 'clickOutside' | 'escapeKeyDown';
export type SpotlightProps = {
    /** Id of the SpotlightTarget where the spotlight should be rendered */
    target: string;
    /** Action buttons in the footer */
    actions?: React.ComponentProps<typeof SpotlightActions>[];
    /** Left bottom corner content */
    beforeActions?: React.ReactNode;
    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
    onClose?: (action: SpotlightCloseAction) => void;
    /** Callback function called when the spotlight is opened */
    onOpen?: () => void;
    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
    hasAnchorPortal?: boolean;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    htmlAttributes?: HtmlAttributes<'div'>;
} & Pick<PopoverProps, 'placement' | 'initialFocus' | 'closeOnClickOutside' | 'strategy'>;
declare const Spotlight: Omit<React.ForwardRefExoticComponent<{
    /** Id of the SpotlightTarget where the spotlight should be rendered */
    target: string;
    /** Action buttons in the footer */
    actions?: React.ComponentProps<typeof SpotlightActions>[];
    /** Left bottom corner content */
    beforeActions?: React.ReactNode;
    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
    onClose?: (action: SpotlightCloseAction) => void;
    /** Callback function called when the spotlight is opened */
    onOpen?: () => void;
    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
    hasAnchorPortal?: boolean;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    htmlAttributes?: HtmlAttributes<"div">;
} & Pick<PopoverProps, "placement" | "strategy" | "initialFocus" | "closeOnClickOutside"> & {
    [key: string]: unknown;
}>, "$$typeof"> & Omit<React.ExoticComponent<{
    /** Id of the SpotlightTarget where the spotlight should be rendered */
    target: string;
    /** Action buttons in the footer */
    actions?: React.ComponentProps<typeof SpotlightActions>[];
    /** Left bottom corner content */
    beforeActions?: React.ReactNode;
    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
    onClose?: (action: SpotlightCloseAction) => void;
    /** Callback function called when the spotlight is opened */
    onOpen?: () => void;
    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
    hasAnchorPortal?: boolean;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    htmlAttributes?: HtmlAttributes<"div">;
} & Pick<PopoverProps, "placement" | "strategy" | "initialFocus" | "closeOnClickOutside"> & {
    [key: string]: unknown;
}>, never> & (<InstanceT extends React.ElementType = "div">(props: PolymorphicPropsWithRef<InstanceT, SpotlightProps>) => React.ReactElement | null) & {
    Actions: PolymorphicForwardRefExoticComponent<"button", SpotlightActionsProps>;
    Body: PolymorphicForwardRefExoticComponent<"div", SpotlightBodyProps>;
    Header: PolymorphicForwardRefExoticComponent<"div", SpotlightHeaderProps>;
    IconWrapper: PolymorphicForwardRefExoticComponent<"div", SpotlightIconWrapperProps>;
    Image: React.ForwardRefExoticComponent<SpotlightImageProps & React.RefAttributes<HTMLImageElement>>;
    Label: PolymorphicForwardRefExoticComponent<"div", SpotlightLabelProps>;
};
export { Spotlight };