@qasa/qds-ui 0.10.0-next.2 → 0.10.0-next.3

package/dist/esm/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './avatar';
 export * from './button';
 export * from './divider';
+export * from './dropdown-menu';
 export * from './heading';
 export * from './hint-box';
 export * from './icon';

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLay
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -2430,6 +2431,122 @@ interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+declare type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
+interface DropdownMenuContentOptions {
+    /**
+     * Event handler called when focus moves to the trigger after closing.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
+    /**
+     * Event handler called when the escape key is down.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
+    /**
+     * Event handler called when focus moves outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
+    /**
+     * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     *
+     * @default "bottom"
+     */
+    side?: PrimitiveContentProps['side'];
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 8
+     */
+    sideOffset?: PrimitiveContentProps['sideOffset'];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     *
+     * @default "center"
+     */
+    align?: PrimitiveContentProps['align'];
+    /**
+     * The element used as the collision boundary.
+     * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+     *
+     * @default []
+     */
+    collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
+}
+interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
+}
+
+declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+
+interface DropdownMenuItemOptions {
+    /**
+     * If `true`, the item will be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Event handler called when the user selects an item (via mouse or keyboard).
+     * Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Optional text used for typeahead purposes.
+     * By default the typeahead behavior will use the `.textContent` of the item.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+    /**
+     * Optional icon to display on the left side of the item content.
+     */
+    icon?: ElementType<IconProps>;
+}
+interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
+}
+
+declare type DropdownTriggerComponent = ForwardRefComponent<'button'>;
+declare type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
+
+interface DropdownMenuRootProps {
+    children: ReactNode;
+    /**
+     * If `true` the dropdown menu will be open
+     */
+    isOpen?: boolean;
+    /**
+     * The open state of the submenu when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback invoked open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
+declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Trigger: ForwardRefComponent<"button", {}>;
+    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    Divider: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
+};
+
 declare const getSizeStyles$4: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -5506,4 +5623,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.10.0-next.2",
+  "version": "0.10.0-next.3",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",