@snowball-tech/fractal/dist/Dropdown/Dropdown.types.d.ts

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

import { DropdownMenuItem, DropdownMenuContentProps, Root, Sub, DropdownMenuSubContentProps, SubTrigger } from '@radix-ui/react-dropdown-menu';
import { AllHTMLAttributes, ComponentProps, ReactNode, CSSProperties, MouseEvent, ForwardedRef } from 'react';
import { InputRadioGroupProps, InputRadioProps } from '../InputRadio/InputRadio.types.js';
import { Elevations } from '../Paper/Paper.constants.js';
import '@radix-ui/react-radio-group';
import '../InputRadio/InputRadio.constants.js';

type CombinedRefs = {
    container: HTMLDivElement | null;
    dropdown: HTMLDivElement | null;
    trigger: HTMLElement | null;
};
type SubDropdownCombinedRefs = {
    content: HTMLDivElement | null;
    trigger: HTMLElement | null;
};
interface DropdownProps extends Omit<AllHTMLAttributes<HTMLDivElement>, 'onClick'> {
    children: ReactNode;
    align?: DropdownMenuContentProps['align'];
    asSelect?: boolean;
    condensed?: boolean;
    defaultOpen?: boolean;
    disabled?: boolean;
    dropdown?: Partial<{
        className?: string;
        style?: CSSProperties;
    } & Omit<DropdownMenuContentProps, 'align' | 'asChild' | 'onInteractOutside' | 'side'>>;
    elevation?: `${Elevations}`;
    fullWidth?: boolean;
    open?: boolean;
    rainbow?: boolean;
    side?: DropdownMenuContentProps['side'];
    toggleOnTriggerClick?: boolean;
    trigger?: ReactNode;
    triggerAsButton?: boolean;
    width?: number | string | 'auto' | 'fit' | 'full' | 'trigger';
    withIndicator?: boolean;
    withScroll?: boolean;
    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
    onClose?: () => void;
    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
    onMenuOpenChange?: ComponentProps<typeof Root>['onOpenChange'];
    onOpen?: () => void;
}
interface DropdownItemProps extends Omit<AllHTMLAttributes<HTMLAnchorElement> & ComponentProps<typeof DropdownMenuItem>, 'asChild' | 'onClick' | 'onSelect'> {
    active?: boolean;
    children?: ReactNode;
    condensed?: boolean;
    disabled?: boolean;
    href?: string;
    icon?: ReactNode;
    label?: string;
    rainbow?: boolean;
    target?: HTMLAnchorElement['target'];
    value?: string;
    onClick?: ComponentProps<typeof DropdownMenuItem>['onSelect'];
    onSelect?: ComponentProps<typeof DropdownMenuItem>['onSelect'];
}
interface DropdownItemGroupProps extends AllHTMLAttributes<HTMLDivElement> {
    children: ReactNode;
    label: string;
    condensed?: boolean;
    disabled?: boolean;
    rainbow?: boolean;
}
interface SubDropdownProps extends Omit<AllHTMLAttributes<HTMLDivElement> & ComponentProps<typeof Sub>, 'asChild' | 'content' | 'onClick'> {
    children: ReactNode;
    condensed?: boolean;
    condensedItems?: boolean;
    content?: Partial<{
        className?: string;
        style?: CSSProperties;
    } & Omit<DropdownMenuSubContentProps, 'asChild' | 'onInteractOutside'>>;
    defaultOpen?: boolean;
    disabled?: boolean;
    icon?: ReactNode;
    open?: boolean;
    rainbow?: boolean;
    withIndicator?: boolean;
    withScroll?: boolean;
    onClick?: ComponentProps<typeof SubTrigger>['onSelect'];
    onClose?: () => void;
    onInteractOutside?: DropdownMenuSubContentProps['onInteractOutside'];
    onOpen?: () => void;
    onSubMenuOpenChange?: ComponentProps<typeof Sub>['onOpenChange'];
}
type DropdownRadioGroupProps = {
    condensed?: boolean;
    rainbow?: boolean;
    ref?: ForwardedRef<HTMLElement>;
} & Omit<InputRadioGroupProps, 'fullWidth' | 'orientation' | 'variant'>;
type DropdownRadioItemProps = {
    condensed?: boolean;
    rainbow?: boolean;
    ref?: ForwardedRef<HTMLButtonElement>;
} & Omit<InputRadioProps, 'fullWidth'>;
type DropdownItemSeparatorProps = AllHTMLAttributes<HTMLDivElement>;

export type { CombinedRefs, DropdownItemGroupProps, DropdownItemProps, DropdownItemSeparatorProps, DropdownProps, DropdownRadioGroupProps, DropdownRadioItemProps, SubDropdownCombinedRefs, SubDropdownProps };