@devopness/ui-react
Version:
Devopness Design System React Components - Painless essential DevOps to everyone
173 lines (172 loc) • 4.51 kB
TypeScript
import { default as React } from 'react';
import { PopoverOrigin } from '@mui/material/Popover';
import { InjectedProps as PopupStateProps } from 'material-ui-popup-state';
import { Color } from '../../../colors';
import { ButtonProps } from '../../Buttons';
import { IconProps } from '../Icon';
import { LinkProps } from '../Link';
import { TooltipProps } from '../Tooltip';
import { Unwrap } from '../../types';
type DropdownOptionIcon = Unwrap<IconProps & Pick<React.CSSProperties, 'backgroundColor'>> & {
icon: true;
};
type DropdownOptionLetter = Unwrap<Pick<React.CSSProperties, 'backgroundColor' | 'color'>> & {
icon?: never;
};
type DropdownOption = {
/**
* Background Color to use when option is active
*/
activeBackgroundColor?: Color;
/**
* Option Badge configuration
*
* An option badge can be an icon or the label's first letter
*/
badge?: DropdownOptionIcon | DropdownOptionLetter;
/**
* Add separator from previous options
*/
brokenSequence?: boolean;
/**
* Label text color
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
*/
color?: Color;
/**
* Highlight option
*/
isActive?: boolean;
/**
* Disables option
*/
isDisabled?: boolean;
/**
* Option description
*/
label?: string;
/**
* Link properties
*
* @see {Link}
*/
linkProps?: LinkProps;
/**
* Event handler called when this option is clicked.
*/
onClick?: () => null;
/**
* Tooltip's title
*
* @see {Tooltip}
*/
tooltip?: TooltipProps['title'];
/**
* Transforms label to a Link and point user to this url
*
* @see {Link}
*/
url?: string;
};
type DropdownSharedProps = {
/**
* This is the point on the anchor where the popover's
* `anchorEl` will attach to. This is not used when the
* anchorReference is 'anchorPosition'.
*
* Options:
* vertical: [top, center, bottom];
* horizontal: [left, center, right].
*
* help: https://mui.com/material-ui/react-popover/#anchor-playground
*/
anchorOrigin?: PopoverOrigin;
/**
* The unique id to identify the dropdown anchor element.
*/
id: string;
/**
* Event handler called when a dropdown option is selected.
*
* This prop can be overriden using option.onClick
*
* @see {DropdownOption}
*/
onSelect?: (itemClicked: DropdownOption) => void;
/**
* Event handler called when the dropdown is opened or closed.
*/
onToggle?: (popupState: PopupStateProps) => void;
/**
* Options listed in the Dropdown menu popup.
*
* @see {DropdownOption}
*/
options: DropdownOption[] | undefined;
/**
* Tooltip's title
*
* @see {Tooltip}
*/
tooltip?: TooltipProps['title'];
/**
* This is the point on the popover which
* will attach to the anchor's origin.
*
* Options:
* vertical: [top, center, bottom, x(px)];
* horizontal: [left, center, right, x(px)].
*
* @see {@link https://mui.com/material-ui/react-popover/#anchor-playground}
*/
transformOrigin?: PopoverOrigin;
};
type DropdownVariationButtonProps = DropdownSharedProps & {
/**
* Anchors dropdown to Button
*
* @see {Button}
*/
anchorType: 'button';
/**
* Button properties
*
* @see {Button}
*/
buttonProps?: ButtonProps;
content?: never;
/**
* Hide dropdown arrow icon
*/
hideDropdownIcon?: boolean;
/**
* Hide dropdown label text
*/
hideLabel?: boolean;
/**
* Button label
*
* Default value: 'Open Popover'
*/
label?: string | React.JSX.Element;
};
type DropdownVariationContainerProps = DropdownSharedProps & {
/**
* Anchors dropdown to React.ReactNode content element
*
* @see {React.ReactNode}
*/
anchorType: 'content';
/**
* Element to be used as anchor, to toggle dropdown when clicked.
*/
content: React.ReactNode;
};
type DropdownProps = DropdownVariationContainerProps | DropdownVariationButtonProps;
/**
* Display a menu with a list of options
*/
declare const Dropdown: ({ anchorType, content, onSelect, onToggle, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
export type { DropdownOption, DropdownProps };
export { Dropdown };