feat: add component dropdown menu

Author: Ohh-889

packages/ui/package.json

@@ -11,9 +11,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -31,6 +29,7 @@
     "@radix-ui/react-checkbox": "1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-popover": "1.1.14",
     "@radix-ui/react-scroll-area": "1.2.9",

packages/ui/src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,36 @@
+import { Root, Trigger } from '@radix-ui/react-dropdown-menu';
+
+import DropdownMenuOption from './DropdownMenuOption';
+import DropdownMenuPortalContent from './DropdownMenuPortalContent';
+import type { DropdownMenuProps } from './types';
+
+const DropdownMenu = (props: DropdownMenuProps) => {
+  const { children, classNames, contentProps, defaultOpen, dir, items, modal, onOpenChange, open, size } = props;
+
+  return (
+    <Root
+      defaultOpen={defaultOpen}
+      dir={dir}
+      modal={modal}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <Trigger asChild>{children}</Trigger>
+
+      <DropdownMenuPortalContent {...contentProps}>
+        {items.map((item, index) => {
+          return (
+            <DropdownMenuOption
+              classNames={classNames}
+              item={item}
+              key={String(index)}
+              size={size}
+            />
+          );
+        })}
+      </DropdownMenuPortalContent>
+    </Root>
+  );
+};
+
+export default DropdownMenu;

packages/ui/src/components/dropdown-menu/DropdownMenuArrow.tsx

@@ -0,0 +1,28 @@
+import { Arrow } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuArrowProps } from './types';
+
+const DropdownMenuArrow = forwardRef<ComponentRef<typeof Arrow>, DropdownMenuArrowProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { arrow } = menuVariants();
+
+  const mergedCls = cn(arrow(), className);
+
+  return (
+    <Arrow
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+DropdownMenuArrow.displayName = 'DropdownMenuArrow';
+
+export default DropdownMenuArrow;

packages/ui/src/components/dropdown-menu/DropdownMenuContent.tsx

@@ -0,0 +1,28 @@
+import { Content } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuContentProps } from './types';
+
+const DropdownMenuContent = forwardRef<ComponentRef<typeof Content>, DropdownMenuContentProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { content } = menuVariants({ size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <Content
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export default DropdownMenuContent;

packages/ui/src/components/dropdown-menu/DropdownMenuItem.tsx

@@ -0,0 +1,43 @@
+import { Item } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import DropdownMenuShortcut from './DropdownMenuShortcut';
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuItemProps } from './types';
+
+const DropdownMenuItem = forwardRef<ComponentRef<typeof Item>, DropdownMenuItemProps>((props, ref) => {
+  const { children, className, classNames, leading, shortcut, size, trailing, ...rest } = props;
+
+  const { item } = menuVariants({ size });
+
+  const mergedCls = cn(item(), className);
+
+  return (
+    <Item
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    >
+      {leading}
+
+      <span>{children}</span>
+
+      {trailing}
+
+      {shortcut && (
+        <DropdownMenuShortcut
+          className={classNames?.shortcut}
+          size={size}
+          value={shortcut}
+        />
+      )}
+    </Item>
+  );
+});
+
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export default DropdownMenuItem;

packages/ui/src/components/dropdown-menu/DropdownMenuItemIndicator.tsx

@@ -0,0 +1,30 @@
+import { ItemIndicator } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuItemIndicatorProps } from './types';
+
+const DropdownMenuItemIndicator = forwardRef<ComponentRef<typeof ItemIndicator>, DropdownMenuItemIndicatorProps>(
+  (props, ref) => {
+    const { className, size, ...rest } = props;
+
+    const { itemIndicator } = menuVariants({ size });
+
+    const mergedCls = cn(itemIndicator, className);
+
+    return (
+      <ItemIndicator
+        className={mergedCls}
+        ref={ref}
+        {...rest}
+      />
+    );
+  }
+);
+
+DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
+
+export default DropdownMenuItemIndicator;

packages/ui/src/components/dropdown-menu/DropdownMenuLabel.tsx

@@ -0,0 +1,34 @@
+import { Label } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuLabelProps } from './types';
+
+const DropdownMenuLabel = forwardRef<ComponentRef<typeof Label>, DropdownMenuLabelProps>((props, ref) => {
+  const { children, className, classNames, leading, size, trailing, ...rest } = props;
+
+  const { label } = menuVariants({ size });
+
+  const mergedCls = cn(label(), className || classNames?.label);
+
+  return (
+    <Label
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    >
+      {leading}
+
+      {children}
+
+      {trailing}
+    </Label>
+  );
+});
+
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+
+export default DropdownMenuLabel;

packages/ui/src/components/dropdown-menu/DropdownMenuOption.tsx

@@ -0,0 +1,95 @@
+import { Group, Portal, Sub } from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '@/lib';
+
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenuLabel from './DropdownMenuLabel';
+import DropdownMenuSeparator from './DropdownMenuSeparator';
+import DropdownMenuSubContent from './DropdownMenuSubContent';
+import DropdownMenuSubTrigger from './DropdownMenuSubTrigger';
+import type {
+  DropdownMenuLabelOption,
+  DropdownMenuOptionData,
+  DropdownMenuOptionProps,
+  DropdownMenuSeparatorOption,
+  DropdownMenuSubOption
+} from './types';
+
+function isLabel(opt: DropdownMenuOptionData): opt is DropdownMenuLabelOption {
+  return opt.type === 'label';
+}
+function isSeparator(opt: DropdownMenuOptionData): opt is DropdownMenuSeparatorOption {
+  return opt.type === 'separator';
+}
+
+function isSub(opt: DropdownMenuOptionData): opt is DropdownMenuSubOption {
+  return opt.type === 'sub';
+}
+
+const DropdownMenuOption = (props: DropdownMenuOptionProps) => {
+  const { classNames, item, size } = props;
+
+  if (isSeparator(item)) {
+    return (
+      <DropdownMenuSeparator
+        {...item}
+        className={classNames?.separator}
+        size={size}
+      />
+    );
+  }
+
+  if (isLabel(item)) {
+    return (
+      <DropdownMenuLabel
+        classNames={classNames}
+        size={size}
+        {...item}
+      >
+        {item.label}
+      </DropdownMenuLabel>
+    );
+  }
+
+  if (isSub(item)) {
+    const { label, subContentProps, subProps, ...subTriggerProps } = item;
+    return (
+      <Sub {...subProps}>
+        <DropdownMenuSubTrigger {...subTriggerProps}>{label}</DropdownMenuSubTrigger>
+
+        <Portal>
+          <DropdownMenuSubContent
+            {...subContentProps}
+            className={classNames?.subContent}
+            size={size}
+          >
+            <Group className={cn(classNames?.subContent)}>
+              {item.children.map((child, index) => {
+                return (
+                  <DropdownMenuOption
+                    item={child}
+                    key={String(index)}
+                  />
+                );
+              })}
+            </Group>
+          </DropdownMenuSubContent>
+        </Portal>
+      </Sub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      classNames={classNames}
+      size={size}
+      {...item}
+    >
+      {item.label}
+    </DropdownMenuItem>
+  );
+};
+
+DropdownMenuOption.displayName = 'DropdownMenuOption';
+
+export default DropdownMenuOption;

packages/ui/src/components/dropdown-menu/DropdownMenuPortalContent.tsx

@@ -0,0 +1,29 @@
+import { Portal } from '@radix-ui/react-dropdown-menu';
+
+import DropdownMenuArrow from './DropdownMenuArrow';
+import DropdownMenuContent from './DropdownMenuContent';
+import type { DropdownMenuPortalContentProps } from './types';
+
+const DropdownMenuPortalContent = (props: DropdownMenuPortalContentProps) => {
+  const { children, container, forceMountContent, forceMountPortal, showArrow, ...rest } = props;
+
+  return (
+    <Portal
+      container={container}
+      forceMount={forceMountPortal}
+    >
+      <DropdownMenuContent
+        forceMount={forceMountContent}
+        {...rest}
+      >
+        {children}
+
+        {showArrow && <DropdownMenuArrow />}
+      </DropdownMenuContent>
+    </Portal>
+  );
+};
+
+DropdownMenuPortalContent.displayName = 'DropdownMenuPortalContent';
+
+export default DropdownMenuPortalContent;

packages/ui/src/components/dropdown-menu/DropdownMenuSeparator.tsx

@@ -0,0 +1,28 @@
+import { Separator } from '@radix-ui/react-dropdown-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib';
+
+import { menuVariants } from './dropdown-menu-variants';
+import type { DropdownMenuSeparatorProps } from './types';
+
+const DropdownMenuSeparator = forwardRef<ComponentRef<typeof Separator>, DropdownMenuSeparatorProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { separator } = menuVariants({ size });
+
+  const mergedCls = cn(separator(), className);
+
+  return (
+    <Separator
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export default DropdownMenuSeparator;