UNPKG

@neo4j-ndl/react

Version:

React implementation of Neo4j Design System

86 lines (85 loc) 4.35 kB
/** * * 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 type React from 'react'; import { type CommonProps, type PolymorphicCommonProps } from '../_common/types'; import { type Popover } from '../popover'; import { StatusLabel } from '../status-label'; type SpotlightHeaderProps = { /** The spotlight header content */ children?: React.ReactNode; }; type SpotlightBodyProps = { /** The spotlight body content */ children?: React.ReactNode; }; type SpotlightLabelProps = Omit<React.ComponentProps<typeof StatusLabel>, 'color' | 'fill'>; type SpotlightImageProps = { /** A string that represents the URL of the image */ src: string; /** A string that represents the alt text of the image */ alt: string; }; type SpotlightIconWrapperProps = { /** Content displayed in the icon wrapper */ children?: React.ReactNode; }; export type SpotlightCloseAction = 'clickOutside' | 'escapeKeyDown'; export type SpotlightProps = { /** The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to */ target: string; /** The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. */ actions?: React.ReactNode; /** A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour */ beforeActions?: React.ReactNode; /** A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either "clickOutside" or "escapeKeyDown") */ onClose?: (action: SpotlightCloseAction) => void; /** Callback function called when the spotlight is opened */ onOpen?: () => void; /** Children should be Spotlight subcomponents */ children?: React.ReactNode; } & Pick<React.ComponentProps<typeof Popover>, 'placement' | 'initialFocus' | 'closeOnClickOutside'>; declare const Spotlight: { ({ target, beforeActions, actions, initialFocus, onClose, placement, children, className, style, htmlAttributes, closeOnClickOutside, onOpen, ref, ...restProps }: CommonProps<"div", SpotlightProps>): import("react/jsx-runtime").JSX.Element | null; displayName: string; } & { Body: { <T extends React.ElementType = "div">({ children, className, as, style, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, SpotlightBodyProps>): import("react/jsx-runtime").JSX.Element; displayName: string; }; Header: { <T extends React.ElementType = "div">({ children, className, as, style, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, SpotlightHeaderProps>): import("react/jsx-runtime").JSX.Element; displayName: string; }; IconWrapper: { <T extends React.ElementType = "div">({ children, className, as, style, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, SpotlightIconWrapperProps>): import("react/jsx-runtime").JSX.Element; displayName: string; }; Image: { ({ src, alt, className, style, htmlAttributes, ref, ...restProps }: CommonProps<"img", SpotlightImageProps>): import("react/jsx-runtime").JSX.Element; displayName: string; }; Label: { <T extends React.ElementType = "div">({ className, children, hasIcon, as, style, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, SpotlightLabelProps>): import("react/jsx-runtime").JSX.Element; displayName: string; }; }; export { Spotlight }; //# sourceMappingURL=Spotlight.d.ts.map