@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
102 lines (99 loc) • 4.07 kB
TypeScript
import { DropdownMenuItem, DropdownMenuContentProps, Root, Sub, DropdownMenuSubContentProps, SubTrigger } from '@radix-ui/react-dropdown-menu';
import { AllHTMLAttributes, ComponentProps, ReactNode, CSSProperties, MouseEvent } from 'react';
import { InputRadioGroupProps, InputRadioProps } from '../InputRadio/InputRadio.types.js';
import { PaperProps } from '../Paper/Paper.types.js';
import '@radix-ui/react-radio-group';
import '../InputRadio/InputRadio.constants.js';
import '../constants-QFINMz1u.js';
import '../Paper/Paper.constants.js';
import '../Typography/Typography.constants.js';
type CombinedRefs = {
container: HTMLDivElement | null;
dropdown: HTMLDivElement | null;
trigger: HTMLButtonElement | null;
};
type SubDropdownCombinedRefs = {
content: HTMLDivElement | null;
trigger: HTMLDivElement | 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?: PaperProps['elevation'];
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' | 'label' | 'onClick' | 'onSelect'> {
active?: boolean;
children?: ReactNode;
condensed?: boolean;
disabled?: boolean;
href?: string;
icon?: ReactNode;
label?: ReactNode;
rainbow?: boolean;
target?: HTMLAnchorElement['target'];
value?: string;
onClick?: ComponentProps<typeof DropdownMenuItem>['onSelect'];
onSelect?: ComponentProps<typeof DropdownMenuItem>['onSelect'];
}
interface DropdownItemGroupProps extends Omit<AllHTMLAttributes<HTMLDivElement>, 'label'> {
children: ReactNode;
label: ReactNode;
condensed?: boolean;
disabled?: boolean;
labelElement?: keyof HTMLElementTagNameMap;
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;
} & Omit<InputRadioGroupProps, 'fullWidth' | 'orientation' | 'variant'>;
type DropdownRadioItemProps = {
condensed?: boolean;
rainbow?: boolean;
} & Omit<InputRadioProps, 'fullWidth'>;
type DropdownItemSeparatorProps = AllHTMLAttributes<HTMLDivElement>;
export type { CombinedRefs, DropdownItemGroupProps, DropdownItemProps, DropdownItemSeparatorProps, DropdownProps, DropdownRadioGroupProps, DropdownRadioItemProps, SubDropdownCombinedRefs, SubDropdownProps };