Merge pull request #2849 from gulfaraz/fix.class-name

fix: do not exclude class name

apps/www/content/docs/components/changelog.mdx

@@ -8,6 +8,12 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## January 2024 #7
+
+### January 2 #7.1
+
+- `dropdown-menu` - fix: do not exclude `className` in `DropdownMenuContent`
+
 ## December 2023 #6
 
 ### December 27 #6.3

apps/www/public/registry/styles/default/dropdown-menu.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "dropdown-menu.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n  cn,\n  createPrimitiveElement,\n  withCn,\n  withProps,\n  withRef,\n  withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icons.chevronRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n  sideOffset: 4,\n  className: cn(\n    'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n  ),\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants ref={ref} {...props} />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  cn(\n    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n  ),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuItem = withVariants(\n  DropdownMenuPrimitive.Item,\n  menuItemVariants,\n  ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n  typeof DropdownMenuPrimitive.CheckboxItem\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icons.check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\n\nexport const DropdownMenuRadioItem = withRef<\n  typeof DropdownMenuPrimitive.RadioItem,\n  {\n    hideIcon?: boolean;\n  }\n>(({ className, children, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icons.check className=\"h-4 w-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn('select-none px-2 py-1.5 text-sm font-semibold'),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuLabel = withVariants(\n  DropdownMenuPrimitive.Label,\n  dropdownMenuLabelVariants,\n  ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n  DropdownMenuPrimitive.Separator,\n  '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (_value = !open) => {\n      setOpen(_value);\n    },\n    [open]\n  );\n\n  return {\n    open,\n    onOpenChange,\n  };\n};\n"
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n  cn,\n  createPrimitiveElement,\n  withCn,\n  withProps,\n  withRef,\n  withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icons.chevronRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n  sideOffset: 4,\n  className: cn(\n    'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n  ),\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants ref={ref} {...props} />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  cn(\n    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n  ),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuItem = withVariants(\n  DropdownMenuPrimitive.Item,\n  menuItemVariants,\n  ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n  typeof DropdownMenuPrimitive.CheckboxItem\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icons.check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\n\nexport const DropdownMenuRadioItem = withRef<\n  typeof DropdownMenuPrimitive.RadioItem,\n  {\n    hideIcon?: boolean;\n  }\n>(({ className, children, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icons.check className=\"h-4 w-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn('select-none px-2 py-1.5 text-sm font-semibold'),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuLabel = withVariants(\n  DropdownMenuPrimitive.Label,\n  dropdownMenuLabelVariants,\n  ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n  DropdownMenuPrimitive.Separator,\n  '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (_value = !open) => {\n      setOpen(_value);\n    },\n    [open]\n  );\n\n  return {\n    open,\n    onOpenChange,\n  };\n};\n"
     }
   ],
   "type": "components:plate-ui"

apps/www/src/registry/default/plate-ui/dropdown-menu.tsx

@@ -57,7 +57,7 @@ const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
 
 export const DropdownMenuContent = withRef<
   typeof DropdownMenuPrimitive.Content
->(({ className, ...props }, ref) => (
+>(({ ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuContentVariants ref={ref} {...props} />
   </DropdownMenuPrimitive.Portal>

templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx

@@ -57,7 +57,7 @@ const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
 
 export const DropdownMenuContent = withRef<
   typeof DropdownMenuPrimitive.Content
->(({ className, ...props }, ref) => (
+>(({ ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuContentVariants ref={ref} {...props} />
   </DropdownMenuPrimitive.Portal>