@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
71 lines (70 loc) • 3.9 kB
TypeScript
/**
*
* 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 OffsetOptions, type Placement } from '@floating-ui/react';
import React from 'react';
import { type PolymorphicForwardRefExoticComponent } from '../_common/types';
export type PlacementOptions = 'bottom-end-top-end' | 'bottom-start-top-start' | 'bottom-middle-top-middle' | 'top-end-bottom-end' | 'top-start-bottom-start' | 'top-middle-bottom-middle' | 'bottom-start-bottom-end' | 'top-start-top-end' | 'middle-start-middle-end' | 'bottom-end-bottom-start' | 'top-end-top-start' | 'middle-end-middle-start';
export declare const placementTranslation: Record<PlacementOptions, Placement>;
export interface PopoverProps {
/** if the popover is open */
isOpen?: boolean;
children: React.ReactNode;
/** Can be used if the anchor should be separated from the trigger */
anchorElement?: Element | null;
/** If the anchorPosition is provided the anchorElement will be ignored */
anchorPosition?: {
x: number;
y: number;
};
/** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/
placement?: PlacementOptions;
/** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */
offset?: OffsetOptions;
/** Called when the floating element is opened or closed */
onOpenChange?: (isOpen: boolean, event?: Event) => void;
/** Use anchorEl for portal's container. Should be used if the popover is inside an Dialog */
hasAnchorPortal?: boolean;
/** If the popover should constrain the focus inside the popover while open */
shouldCaptureFocus?: boolean;
/** Which element to initially focus. **/
initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
/** The role of the popover */
role?: 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
/** If the popover should close when the user clicks outside of it */
closeOnClickOutside?: boolean;
/** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */
strategy?: 'fixed' | 'absolute';
}
export declare const usePopoverContext: () => import("./use-popover").UsePopoverReturn;
export declare const Popover: {
({ children, anchorElement, placement, isOpen, offset, anchorPosition, hasAnchorPortal: hasAnchorPortalProp, shouldCaptureFocus, initialFocus, onOpenChange, role, closeOnClickOutside, strategy: strategyProp, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLElement>>;
Content: PolymorphicForwardRefExoticComponent<"div", PopoverContentProps>;
};
export interface PopoverTriggerProps {
children: React.ReactNode;
hasButtonWrapper?: boolean;
}
export interface PopoverContentProps {
children: React.ReactNode;
className?: string;
style?: React.CSSProperties;
}