You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
5.9 KiB
108 lines
5.9 KiB
/** @jsx jsx */
|
|
import { ReactElement, ReactNode, Ref } from 'react';
|
|
import { jsx } from '@emotion/react';
|
|
import { MenuPlacement, MenuPosition, CommonProps, GroupBase, CommonPropsAndClassName, CoercedMenuPlacement, CSSObjectWithLabel } from '../types';
|
|
interface CalculatedMenuPlacementAndHeight {
|
|
placement: CoercedMenuPlacement;
|
|
maxHeight: number;
|
|
}
|
|
interface PlacementArgs {
|
|
maxHeight: number;
|
|
menuEl: HTMLDivElement | null;
|
|
minHeight: number;
|
|
placement: MenuPlacement;
|
|
shouldScroll: boolean;
|
|
isFixedPosition: boolean;
|
|
controlHeight: number;
|
|
}
|
|
export declare function getMenuPlacement({ maxHeight: preferredMaxHeight, menuEl, minHeight, placement: preferredPlacement, shouldScroll, isFixedPosition, controlHeight, }: PlacementArgs): CalculatedMenuPlacementAndHeight;
|
|
export interface MenuPlacementProps {
|
|
/** Set the minimum height of the menu. */
|
|
minMenuHeight: number;
|
|
/** Set the maximum height of the menu. */
|
|
maxMenuHeight: number;
|
|
/** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
|
|
menuPlacement: MenuPlacement;
|
|
/** The CSS position value of the menu, when "fixed" extra layout management is required */
|
|
menuPosition: MenuPosition;
|
|
/** Set whether the page should scroll to show the menu. */
|
|
menuShouldScrollIntoView: boolean;
|
|
}
|
|
export interface MenuProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group>, MenuPlacementProps {
|
|
/** Reference to the internal element, consumed by the MenuPlacer component */
|
|
innerRef: Ref<HTMLDivElement>;
|
|
innerProps: JSX.IntrinsicElements['div'];
|
|
isLoading: boolean;
|
|
placement: CoercedMenuPlacement;
|
|
/** The children to be rendered. */
|
|
children: ReactNode;
|
|
}
|
|
interface PlacerProps {
|
|
placement: CoercedMenuPlacement;
|
|
maxHeight: number;
|
|
}
|
|
interface ChildrenProps {
|
|
ref: Ref<HTMLDivElement>;
|
|
placerProps: PlacerProps;
|
|
}
|
|
export interface MenuPlacerProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonProps<Option, IsMulti, Group>, MenuPlacementProps {
|
|
/** The children to be rendered. */
|
|
children: (childrenProps: ChildrenProps) => ReactElement;
|
|
}
|
|
export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ placement, theme: { borderRadius, spacing, colors }, }: MenuProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
|
|
export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
declare const Menu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => jsx.JSX.Element;
|
|
export default Menu;
|
|
export interface MenuListProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
/** Set the max height of the Menu component */
|
|
maxHeight: number;
|
|
/** The children to be rendered. */
|
|
children: ReactNode;
|
|
/** Inner ref to DOM ReactNode */
|
|
innerRef: Ref<HTMLDivElement>;
|
|
/** The currently focused option */
|
|
focusedOption: Option;
|
|
/** Props to be passed to the menu-list wrapper. */
|
|
innerProps: JSX.IntrinsicElements['div'];
|
|
}
|
|
export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, theme: { spacing: { baseUnit }, }, }: MenuListProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
|
|
export declare const MenuList: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuListProps<Option, IsMulti, Group>) => jsx.JSX.Element;
|
|
export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
|
|
export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
|
|
export interface NoticeProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
/** The children to be rendered. */
|
|
children: ReactNode;
|
|
/** Props to be passed on to the wrapper. */
|
|
innerProps: JSX.IntrinsicElements['div'];
|
|
}
|
|
export declare const NoOptionsMessage: {
|
|
<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: NoticeProps<Option, IsMulti, Group>): jsx.JSX.Element;
|
|
defaultProps: {
|
|
children: string;
|
|
};
|
|
};
|
|
export declare const LoadingMessage: {
|
|
<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: NoticeProps<Option, IsMulti, Group>): jsx.JSX.Element;
|
|
defaultProps: {
|
|
children: string;
|
|
};
|
|
};
|
|
export interface MenuPortalProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
appendTo: HTMLElement | undefined;
|
|
children: ReactNode;
|
|
controlElement: HTMLDivElement | null;
|
|
innerProps: JSX.IntrinsicElements['div'];
|
|
menuPlacement: MenuPlacement;
|
|
menuPosition: MenuPosition;
|
|
}
|
|
export interface PortalStyleArgs {
|
|
offset: number;
|
|
position: MenuPosition;
|
|
rect: {
|
|
left: number;
|
|
width: number;
|
|
};
|
|
}
|
|
export declare const menuPortalCSS: ({ rect, offset, position, }: PortalStyleArgs) => CSSObjectWithLabel;
|
|
export declare const MenuPortal: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPortalProps<Option, IsMulti, Group>) => jsx.JSX.Element | null;
|