@fluentui/react-northstar
Version:
A themable React component library.
71 lines (70 loc) • 3.71 kB
TypeScript
import { Accessibility } from '@fluentui/accessibility';
import { AutoFocusZoneProps, FocusTrapZoneProps } from '@fluentui/react-bindings';
import * as PopperJs from '@popperjs/core';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, ChildrenComponentProps, ContentComponentProps } from '../../utils';
import { PopperChildrenProps, AutoSize } from '../../utils/positioner';
export interface PopupContentSlotClassNames {
content: string;
}
export interface PopupContentProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<never>;
/**
* Called after user's mouse enter.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onMouseEnter?: ComponentEventHandler<PopupContentProps>;
/**
* Called after user's mouse leave.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onMouseLeave?: ComponentEventHandler<PopupContentProps>;
/** An actual placement value from Popper. */
placement?: PopperChildrenProps['placement'];
/** A popup can show a pointer to trigger. */
pointing?: boolean;
/** A ref to a pointer element. */
pointerRef?: React.Ref<HTMLDivElement>;
/** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value. */
trapFocus?: boolean | FocusTrapZoneProps;
/** Controls whether or not auto focus should be applied, using boolean or AutoFocusZoneProps type value. */
autoFocus?: boolean | AutoFocusZoneProps;
/**
* Applies max-height and max-width on popper to fit it within the available space in viewport.
* true enables this for both width and height when overflow happens. 'always' applies `max-height`/`max-width` regardless of overflow.
* 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
*/
autoSize?: AutoSize;
}
export declare type PopupContentStylesProps = Required<Pick<PopupContentProps, 'pointing'>> & {
basePlacement: PopperJs.BasePlacement;
autoSize?: AutoSize;
};
export declare const popupContentClassName = "ui-popup__content";
export declare const popupContentSlotClassNames: PopupContentSlotClassNames;
/**
* A PopupContent displays the content of a Popup component.
*/
export declare const PopupContent: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof PopupContentProps> & {
as?: TExtendedElementType;
} & PopupContentProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<PopupContentProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<PopupContentProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof PopupContentProps> & {
as?: "div";
} & PopupContentProps;
} & FluentComponentStaticProps<PopupContentProps>;