@coreui/react-pro
Version:
UI Components Library for React.js
90 lines (89 loc) • 3.66 kB
TypeScript
import React, { ElementType, HTMLAttributes, RefObject } from 'react';
import { PolymorphicRefForwardingComponent } from '../../helpers';
import type { Placements } from '../../types';
import type { Alignments } from './types';
export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
/**
* Set aligment of dropdown menu.
*
* @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
*/
alignment?: Alignments;
/**
* Component used for the root node. Either a string to use a HTML element or a component.
*/
as?: ElementType;
/**
* Configure the auto close behavior of the dropdown:
* - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
* - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
* - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
* - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
*/
autoClose?: 'inside' | 'outside' | boolean;
/**
* A string of all className you want applied to the base component.
*/
className?: string;
/**
* Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
*
* @since 4.11.0
*/
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null;
/**
* Sets a darker color scheme to match a dark navbar.
*/
dark?: boolean;
/**
* Sets a specified direction and location of the dropdown menu.
*/
direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
/**
* Offset of the dropdown menu relative to its target.
*/
offset?: [number, number];
/**
* Callback fired when the component requests to be hidden.
*
* @since 4.9.0
*/
onHide?: () => void;
/**
* Callback fired when the component requests to be shown.
*/
onShow?: () => void;
/**
* Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
*
* @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
*/
placement?: Placements;
/**
* If you want to disable dynamic positioning set this property to `true`.
*/
popper?: boolean;
/**
* Generates dropdown menu using createPortal.
*
* @since 4.8.0
*/
portal?: boolean;
/**
* Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
*/
variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
/**
* Toggle the visibility of dropdown menu component.
*/
visible?: boolean;
}
interface ContextProps extends CDropdownProps {
dropdownToggleRef: RefObject<any | undefined>;
dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>;
setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
portal: boolean;
}
export declare const CDropdownContext: React.Context<ContextProps>;
export declare const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>;
export {};