@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
85 lines (84 loc) • 3.99 kB
TypeScript
import { PopoverProps } from './Popover';
/**
* Popover hook for managing popover state and behavior.
* @param PopoverProps Popover props
* @returns Popover state and actions
*/
export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, showArrow, variant, defaultAnchorButtonProps, onOpenChange: setControlledOpen, }?: PopoverProps) => {
placement: import('@floating-ui/utils').Placement;
strategy: import('@floating-ui/utils').Strategy;
middlewareData: import('@floating-ui/core').MiddlewareData;
x: number;
y: number;
isPositioned: boolean;
update: () => void;
floatingStyles: React.CSSProperties;
refs: {
reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
floating: React.MutableRefObject<HTMLElement | null>;
setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
setFloating: (node: HTMLElement | null) => void;
} & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
elements: {
reference: import('@floating-ui/react-dom').ReferenceType | null;
floating: HTMLElement | null;
} & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
context: {
x: number;
y: number;
placement: import('@floating-ui/utils').Placement;
strategy: import('@floating-ui/utils').Strategy;
middlewareData: import('@floating-ui/core').MiddlewareData;
isPositioned: boolean;
update: () => void;
floatingStyles: React.CSSProperties;
open: boolean;
onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
events: import('@floating-ui/react').FloatingEvents;
dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
nodeId: string | undefined;
floatingId: string | undefined;
refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
};
getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
active?: boolean;
selected?: boolean;
}) => Record<string, unknown>;
open: boolean;
popoverOffset: number;
setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
arrowRef: import('react').RefObject<SVGSVGElement | null>;
showArrow: boolean;
defaultAnchorButtonProps: {
[key: `data-${string}`]: string | undefined;
label?: string;
} | undefined;
variant: "default" | "grey";
};
/**
* Validates the children of the Popover component in development environment.
* - Check for children presence
* - Validate that <DSPopover.Anchor> and <DSPopover.Content> are used together.
*
* @param {Object} childrenObject
* @param {React.ReactNode} childrenObject.children - The Popover children.
* @param {boolean} childrenObject.hasContent - Whether <DSPopover.Content> is present.
* @param {boolean} childrenObject.hasAnchor - Whether <DSPopover.Anchor> is present.
* @returns {void}
*/
export declare const validatePopoverChildren: ({ children, hasContent, hasAnchor, }: {
children: React.ReactNode;
hasContent: boolean;
hasAnchor: boolean;
}) => void;
type ValidationProps = Pick<PopoverProps, 'showArrow' | 'variant'>;
/**
* Validates Popover props in development environment.
*
* @param props Popover props to validate
*/
export declare const validatePopoverProps: ({ showArrow, variant, }: ValidationProps) => void;
export {};