@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
52 lines (51 loc) • 1.66 kB
TypeScript
import { ReactNode, MouseEventHandler } from 'react';
import { StackProps } from '@mui/material/Stack';
import { IconButtonProps } from '@mui/material/IconButton';
import { TooltipProps } from '@mui/material/Tooltip';
export type ActionItem = {
label: string;
icon: ReactNode;
inactiveIcon?: ReactNode;
active?: boolean;
onClick: MouseEventHandler<HTMLElement>;
'data-testid'?: string;
className?: string;
};
/** The props type of [[`ActionGroupContainer`]]. */
export interface IActionGroup extends StackProps {
/**
* List of action icons to include. Each action can be configured as a toggle to switch between icons based on active/inactive state.
*
* ```
* export type ActionItem = {
* label: string;
* icon: ReactNode;
* inactiveIcon?: ReactNode;
* active?: boolean;
* onClick: () => void;
* }
* ```
* @default []
*/
actions: ReadonlyArray<ActionItem>;
/**
* Maximum number of icons to display. If the number of actions exceeds this number, the overflow will be displayed in a dropdown menu.
*
* @default 3
*/
max?: number;
/**
* Size for the IconButton elements.
* @default 'medium'
*/
size?: IconButtonProps['size'];
/**
* Props to pass through to the IconButton Tooltip element.
*/
TooltipProps?: Partial<TooltipProps>;
/**
* Props to pass through to the more action IconButton Tooltip element.
*/
moreActionsTooltipProps?: Partial<TooltipProps>;
}
export declare const ActionGroup: (props: IActionGroup) => import("react/jsx-runtime").JSX.Element;