@adaptabletools/adaptable/src/components/DropdownButton/index.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
import { NewTooltip } from '../NewTooltip';
import { cn } from '../../lib/utils';
import { ChevronDownIcon } from 'lucide-react';
import SimpleButton from '../SimpleButton';
export const NewDropdownButton = React.forwardRef((props, ref) => {
    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, id, 'data-id': dataId, 'data-value': dataValue, 'aria-label': ariaLabel, onMouseDown, } = props;
    const isHidden = accessLevel === 'Hidden';
    const isReadOnly = accessLevel === 'ReadOnly';
    const isDisabled = disabled || isHidden || isReadOnly;
    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName, id: id, "data-id": dataId, "data-value": dataValue, "aria-label": ariaLabel, onMouseDown: onMouseDown }), children: [children, showDivider && (_jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
    const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string'
        ? item.label.length
        : typeof item.tooltip === 'string'
            ? item.tooltip.length
            : 0), 0);
    return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
                    width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
                }, children: items.map((item, index) => {
                    if (item.separator) {
                        return _jsx(DropdownMenuSeparator, {}, index);
                    }
                    return (_jsxs(DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, closeOnClick: item.closeOnClick, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
                }) })] }));
});