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

package/dist/esm/types/components/dropdown-menu/dropdown-menu-content.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import type { HTMLQdsProps } from '../../types';
+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'];
+}
+export interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
+}
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu-divider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+export declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+export declare const DropdownMenuDivider: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/types/components/dropdown-menu/dropdown-menu-item.d.ts

@@ -0,0 +1,28 @@
+import type { ElementType } from 'react';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import type { IconProps } from '../icon';
+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>;
+}
+export interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
+}
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu-trigger.d.ts

@@ -0,0 +1,5 @@
+import type * as Polymorphic from '../../utils/polymorphic';
+declare type DropdownTriggerComponent = Polymorphic.ForwardRefComponent<'button'>;
+export declare type DropdownMenuTriggerProps = Polymorphic.PropsOf<DropdownTriggerComponent>;
+export declare const DropdownMenuTrigger: DropdownTriggerComponent;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type DropdownMenuContentProps } from './dropdown-menu-content';
+import { type DropdownMenuDividerProps } from './dropdown-menu-divider';
+import { type DropdownMenuItemProps } from './dropdown-menu-item';
+import type { DropdownMenuTriggerProps } from './dropdown-menu-trigger';
+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;
+export declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Trigger: import("../../utils/polymorphic").ForwardRefComponent<"button", {}>;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Divider: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps, };

package/dist/esm/types/components/dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './dropdown-menu';

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

@@ -5,7 +5,6 @@ export * from './heading';
 export * from './hint-box';
 export * from './icon';
 export * from './icon-button';
-export * from './image';
 export * from './text-field';
 export * from './label';
 export * from './link';

package/dist/index.d.ts

@@ -922,8 +922,8 @@ interface IconOptions {
      */
     color?: IconColor;
 }
-declare type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
+declare type OmittedProps$8 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
+interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$8>, IconOptions {
 }
 
 interface CreateIconOptions {
@@ -3806,19 +3806,6 @@ declare type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptio
 declare type IconButtonProps = PropsOf<IconButtonComponent>;
 declare const IconButton: IconButtonComponent;
 
-interface ImageOptions {
-    src?: string;
-    alt?: string;
-    width: string | number;
-    height: string | number;
-    loading?: 'eager' | 'lazy';
-    borderRadius?: keyof Theme['radii'];
-}
-declare type OmittedProps$8 = 'width' | 'height';
-interface ImageProps extends Omit<HTMLQdsProps<'img'>, OmittedProps$8>, ImageOptions {
-}
-declare function Image({ src, loading, width, height, borderRadius, ...restProps }: ImageProps): JSX.Element;
-
 interface InputBaseOptions {
     /**
      * If `true`, the input will be invalid
@@ -5519,4 +5506,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, Image, ImageIcon, ImageProps, 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, 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.0",
+  "version": "0.10.0-next.2",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -52,6 +52,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "^16.0.0",
     "@types/react": "^18.0.21",
@@ -103,6 +104,7 @@
     "node": ">=14"
   },
   "dependencies": {
-    "@radix-ui/react-radio-group": "^1.1.3"
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.6"
   }
 }

package/dist/cjs/types/components/image/image.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Theme } from '../../theme';
-import type { HTMLQdsProps } from '../../types';
-interface ImageOptions {
-    src?: string;
-    alt?: string;
-    width: string | number;
-    height: string | number;
-    loading?: 'eager' | 'lazy';
-    borderRadius?: keyof Theme['radii'];
-}
-declare type OmittedProps = 'width' | 'height';
-export interface ImageProps extends Omit<HTMLQdsProps<'img'>, OmittedProps>, ImageOptions {
-}
-export declare function Image({ src, loading, width, height, borderRadius, ...restProps }: ImageProps): JSX.Element;
-export {};

package/dist/cjs/types/components/image/index.d.ts

@@ -1 +0,0 @@
-export * from './image';

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Theme } from '../../theme';
-import type { HTMLQdsProps } from '../../types';
-interface ImageOptions {
-    src?: string;
-    alt?: string;
-    width: string | number;
-    height: string | number;
-    loading?: 'eager' | 'lazy';
-    borderRadius?: keyof Theme['radii'];
-}
-declare type OmittedProps = 'width' | 'height';
-export interface ImageProps extends Omit<HTMLQdsProps<'img'>, OmittedProps>, ImageOptions {
-}
-export declare function Image({ src, loading, width, height, borderRadius, ...restProps }: ImageProps): JSX.Element;
-export {};

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

@@ -1 +0,0 @@
-export * from './image';