@neo4j-ndl/react/lib/types/spotlight/SpotlightTarget.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 PolymorphicCommonProps } from '../_common/types';
import { type IndicatorPlacement, type IndicatorVariant } from './use-indicator';
type SpotlightTargetProps = {
    /** The id of the wrapper. This should match a `target` prop in a `Spotlight`, to indicate that this is where it should be rendered when open */
    id: string;
    /** A boolean that controls if the pulse animation should be used or not */
    hasPulse?: boolean;
    /** A string that controls the style of the indicator. It can be either "point" or "border" */
    indicatorVariant?: IndicatorVariant;
    /** A string that controls the placement of the indicator. A combination of "middle", "top", "right", "bottom" and "left" separated by a dash, e.g. "top-right" */
    indicatorPlacement?: IndicatorPlacement;
    /** An inline style CSS property to control the border radius of the wrapper */
    borderRadius?: React.CSSProperties['borderRadius'];
    /** The content to wrap */
    children?: React.ReactNode;
    /** Fit the target size to the children. */
    shouldFitToChildren?: boolean;
    /**
     * When true, merges the spotlight target props directly with the child element instead of wrapping it in a div.
     *
     * This is useful for applying spotlight functionality to existing interactive elements (buttons, links, etc.)
     * while preserving their original behavior, styling, and accessibility attributes.
     *
     * @example
     * ```tsx
     * <SpotlightTarget id="my-button" asChild>
     *   <FilledButton>Click me</FilledButton>
     * </SpotlightTarget>
     * ```
     *
     * @warning Only use with interactive elements that can receive focus and handle click events
     * @warning The child element's `id` will be overridden with the target's `id`
     */
    asChild?: boolean;
};
export declare const SpotlightTarget: ({ id, hasPulse, indicatorVariant, indicatorPlacement, borderRadius, shouldFitToChildren, children, className, htmlAttributes, style, as, ref, asChild, ...restProps }: PolymorphicCommonProps<"div", SpotlightTargetProps>) => import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=SpotlightTarget.d.ts.map