Merge pull request #3928 from udecode/revert/dropdown-menu

Revert/dropdown menu

apps/www/public/r/index.json

@@ -346,7 +346,8 @@
   },
   {
     "dependencies": [
-      "@udecode/plate-math"
+      "@udecode/plate-math",
+      "react-textarea-autosize"
     ],
     "doc": {
       "description": "Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.",

apps/www/public/r/styles/default/color-dropdown-menu.json

@@ -43,7 +43,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport {\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n} from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Custom Colors</DropdownMenuLabel>\n          <ColorCustom\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Default Colors</DropdownMenuLabel>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem className=\"p-2\" onClick={clearColor}>\n              <EraserIcon />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup label=\"Custom Colors\">\n          <ColorCustom\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup label=\"Default Colors\">\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem className=\"p-2\" onClick={clearColor}>\n              <EraserIcon />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
       "path": "plate-ui/color-picker.tsx",
       "target": "components/plate-ui/color-picker.tsx",
       "type": "registry:ui"

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

@@ -10,7 +10,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\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';\nimport { Check, ChevronRight } from 'lucide-react';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = withCn(DropdownMenuPrimitive.Group, 'py-1.5');\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = React.forwardRef<\n  HTMLDivElement,\n  { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.RadioGroup\n  >\n>(({ label, ...props }, ref) => {\n  return (\n    <>\n      <DropdownMenuSeparator\n        className={cn(\n          'hidden',\n          'mb-0 shrink-0 peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'\n        )}\n      />\n\n      <DropdownMenuPrimitive.RadioGroup\n        ref={ref}\n        {...props}\n        className={cn(\n          'hidden',\n          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitemradio]]:block has-[[role=option]]:block',\n          props.className\n        )}\n      >\n        {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}\n        {props.children}\n      </DropdownMenuPrimitive.RadioGroup>\n    </>\n  );\n});\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ children, className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'mx-1 flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[state=open]:bg-accent data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-32 overflow-hidden rounded-md border bg-popover py-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  className: cn(\n    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover 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  sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants\n      ref={ref}\n      onCloseAutoFocus={(e) => {\n        e.preventDefault();\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\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>(({ children, className, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative mx-1 flex select-none items-center gap-2 rounded-sm py-1 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 [&_svg]:size-4 [&_svg]:shrink-0',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"size-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>(({ children, className, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=checked]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:size-4',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn(\n    'mx-1 select-none px-2 pb-2 pt-1.5 text-xs font-semibold text-muted-foreground'\n  ),\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';\n\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';\nimport { Check, ChevronRight } from 'lucide-react';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = React.forwardRef<\n  HTMLDivElement,\n  { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.Group\n  >\n>(({ label, ...props }, ref) => {\n  return (\n    <>\n      <DropdownMenuSeparator\n        className={cn(\n          'hidden',\n          'mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemcheckbox]]/menu-group:block peer-has-[[role=option]]/menu-group:block'\n        )}\n      />\n\n      <DropdownMenuPrimitive.Group\n        ref={ref}\n        {...props}\n        className={cn(\n          'hidden',\n          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemcheckbox]]:block has-[[role=option]]:block',\n          props.className\n        )}\n      >\n        {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}\n        {props.children}\n      </DropdownMenuPrimitive.Group>\n    </>\n  );\n});\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = React.forwardRef<\n  HTMLDivElement,\n  { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.RadioGroup\n  >\n>(({ label, ...props }, ref) => {\n  return (\n    <>\n      <DropdownMenuSeparator\n        className={cn(\n          'hidden',\n          'mb-0 shrink-0 peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'\n        )}\n      />\n\n      <DropdownMenuPrimitive.RadioGroup\n        ref={ref}\n        {...props}\n        className={cn(\n          'hidden',\n          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitemradio]]:block has-[[role=option]]:block',\n          props.className\n        )}\n      >\n        {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}\n        {props.children}\n      </DropdownMenuPrimitive.RadioGroup>\n    </>\n  );\n});\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ children, className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'mx-1 flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[state=open]:bg-accent data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-32 overflow-hidden rounded-md border bg-popover py-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  className: cn(\n    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover 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  sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants\n      ref={ref}\n      onCloseAutoFocus={(e) => {\n        e.preventDefault();\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\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>(({ children, className, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative mx-1 flex select-none items-center gap-2 rounded-sm py-1 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 [&_svg]:size-4 [&_svg]:shrink-0',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"size-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>(({ children, className, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=checked]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:size-4',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn(\n    'mx-1 select-none px-2 pb-2 pt-1.5 text-xs font-semibold text-muted-foreground'\n  ),\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",
       "path": "plate-ui/dropdown-menu.tsx",
       "target": "components/plate-ui/dropdown-menu.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/equation-element.json

@@ -1,6 +1,7 @@
 {
   "dependencies": [
-    "@udecode/plate-math"
+    "@udecode/plate-math",
+    "react-textarea-autosize"
   ],
   "doc": {
     "description": "Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.",