@@ -108,14 +131,27 @@ function ActionDropdownItem(props: TActionDropdownItemProps) {
}
export function ActionDropdown(props: IActionDropdownProps) {
- const { button, buttonClassName, className, disabled = false, items, menuClassName, onOpenChange, placement, portalElement } = props;
+ const {
+ button,
+ buttonAsChild = false,
+ buttonClassName,
+ className,
+ disabled = false,
+ items,
+ menuContent,
+ menuClassName,
+ onOpenChange,
+ placement,
+ portalElement,
+ } = props;
const dropdownRef = React.useRef
(null);
const [referenceElement, setReferenceElement] = React.useState(null);
const [popperElement, setPopperElement] = React.useState(null);
const [isOpen, setIsOpen] = React.useState(false);
const renderedItems = items.filter((item) => item.shouldRender !== false);
- const isDropdownDisabled = disabled || renderedItems.length === 0;
+ const hasMenuContent = menuContent !== undefined && menuContent !== null;
+ const isDropdownDisabled = disabled || (!hasMenuContent && renderedItems.length === 0);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-end",
@@ -172,9 +208,13 @@ export function ActionDropdown(props: IActionDropdownProps) {
useOutsideClickDetector(dropdownRef, closeDropdown);
+ const setReferenceNode = React.useCallback((node: HTMLElement | null) => {
+ setReferenceElement(node);
+ }, []);
+
const defaultButton = (
);
+ const asChildButton =
+ buttonAsChild && React.isValidElement(button) && button.type !== React.Fragment
+ ? React.cloneElement(button, {
+ ref: (node: HTMLElement | null) => {
+ setReferenceNode(node);
+ assignRef((button as React.ReactElement & { ref?: React.Ref }).ref, node);
+ },
+ className: cn((button.props as { className?: string }).className, buttonClassName),
+ disabled: isDropdownDisabled || (button.props as { disabled?: boolean }).disabled,
+ onClick: composeEventHandlers(
+ (button.props as { onClick?: (event: React.MouseEvent) => void }).onClick,
+ handleTriggerClick
+ ),
+ onKeyDown: composeEventHandlers(
+ (button.props as { onKeyDown?: (event: React.KeyboardEvent) => void }).onKeyDown,
+ handleKeyDown
+ ),
+ type: (button.props as { type?: string }).type ?? "button",
+ "aria-haspopup": "menu",
+ "aria-expanded": isOpen,
+ "aria-label": (button.props as { ["aria-label"]?: string })["aria-label"] ?? "Work item actions",
+ "data-action-dropdown-trigger": "true",
+ })
+ : null;
+
const customButton = button ? (