+const DivItem = ({ variant, ...props }: ContextMenuItemProps) => (
+
);
-const ItemInternals = ({ icon, label, rightArrow, keybind }: ItemProps) => {
+export const ItemInternals = ({
+ icon,
+ label,
+ rightArrow,
+ keybind,
+ iconProps
+}: ContextMenuItemProps) => {
const ItemIcon = icon;
return (
<>
- {ItemIcon &&
}
+ {ItemIcon &&
}
{label &&
{label}
}
{keybind && (
@@ -134,3 +143,10 @@ const ItemInternals = ({ icon, label, rightArrow, keybind }: ItemProps) => {
);
};
+
+export const ContextMenu = {
+ Root,
+ Item,
+ Separator,
+ SubMenu
+};
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index 41383429f..62eb61f25 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -2,7 +2,7 @@ import { ReactComponent as CaretDown } from '@sd/assets/svgs/caret.svg';
import { Menu, Transition } from '@headlessui/react';
import { VariantProps, cva } from 'class-variance-authority';
import clsx from 'clsx';
-import { Fragment, PropsWithChildren } from 'react';
+import { Fragment, PropsWithChildren, forwardRef } from 'react';
import { Link } from 'react-router-dom';
import * as UI from '.';
import { tw } from './utils';
@@ -60,18 +60,20 @@ export const Item = ({ to, className, icon: Icon, children, ...props }: Dropdown
);
};
-export const Button = ({ children, className, ...props }: UI.ButtonProps) => {
- return (
-
- {children}
-
-
-
- );
-};
+export const Button = forwardRef
(
+ ({ children, className, ...props }, ref) => {
+ return (
+
+ {children}
+
+
+
+ );
+ }
+);
export interface DropdownRootProps {
button: React.ReactNode;
diff --git a/packages/ui/src/DropdownMenu.tsx b/packages/ui/src/DropdownMenu.tsx
new file mode 100644
index 000000000..9340f51f8
--- /dev/null
+++ b/packages/ui/src/DropdownMenu.tsx
@@ -0,0 +1,162 @@
+import * as RadixDM from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+import React, { PropsWithChildren, Suspense, useCallback, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+ ContextMenuItemProps,
+ ItemInternals,
+ contextMenuClasses,
+ contextMenuItemStyles,
+ contextMenuSeparatorClassNames,
+ contextSubMenuTriggerClassNames
+} from './ContextMenu';
+
+interface DropdownMenuProps
+ extends RadixDM.MenuContentProps,
+ Pick {
+ trigger: React.ReactNode;
+ triggerClassName?: string;
+ alignToTrigger?: boolean;
+ animate?: boolean;
+}
+
+const Root = ({
+ trigger,
+ children,
+ className,
+ asChild = true,
+ triggerClassName,
+ alignToTrigger,
+ onOpenChange,
+ animate,
+ ...props
+}: PropsWithChildren) => {
+ const [width, setWidth] = useState();
+
+ const measureRef = useCallback((ref: HTMLButtonElement | null) => {
+ alignToTrigger && ref && setWidth(ref.getBoundingClientRect().width);
+ }, []);
+
+ return (
+
+
+ {trigger}
+
+
+
+
+
+ );
+};
+
+const Separator = (props: { className?: string }) => (
+
+);
+
+const SubMenu = ({
+ label,
+ icon,
+ className,
+ ...props
+}: RadixDM.MenuSubContentProps & ContextMenuItemProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+interface DropdownItemProps extends ContextMenuItemProps, RadixDM.MenuItemProps {
+ to?: string;
+ selected?: boolean;
+}
+
+const Item = ({
+ icon,
+ iconProps,
+ label,
+ rightArrow,
+ children,
+ keybind,
+ variant,
+ className,
+ selected,
+ to,
+ ...props
+}: DropdownItemProps) => {
+ const ref = useRef(null);
+
+ return (
+
+ {to ? (
+ ref.current?.click()}
+ >
+ {children ? (
+ {children}
+ ) : (
+
+ )}
+
+ ) : (
+
+ {children || }
+
+ )}
+
+ );
+};
+
+export const DropdownMenu = {
+ Root,
+ Item,
+ Separator,
+ SubMenu
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 953bde36f..04103c51e 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,7 +1,8 @@
export { cva, cx } from 'class-variance-authority';
export * from './Button';
export * from './CheckBox';
-export * as ContextMenu from './ContextMenu';
+export { ContextMenu } from './ContextMenu';
+export { DropdownMenu } from './DropdownMenu';
export * from './Dialog';
export * as Dropdown from './Dropdown';
export * from './Input';
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index 9d8b5b7d0..6bf664bde 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -162,6 +162,7 @@ module.exports = function (app, options) {
// addVariant('open', '&[data-state="open"]');
// addVariant('closed', '&[data-state="closed"]');
// }),
+ require('tailwindcss-animate'),
require('@headlessui/tailwindcss'),
require('tailwindcss-radix')()
]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8b3c4c5e7fcaefa39ae75e82e20ad1036d8e261..76e0ef5d3df32e65061e751ada1fa13734cc0ff3 100644
GIT binary patch
delta 253
zcmZ4a+Gz7TqYa1s`4jUpa}!HatrX%6^$he(H*fHd=aNj!%qh>zOGz#+)`iQ1r6*6c
zmYkevDAcSF)vgf52*gZ4%nZaVK+FonY(UHo#2i4(3B+966{5KRY4bwO(FYqd{lG~U
z^U%;xF
z+|nRdH^-=y+%R`jpMX?TS4(Hd;t~rJvtS=*lPptDRpqYa1sH$V0F;hKC>SFpJ>s=YLd5r~<9m>Gy!fS47C*?^cGh&h0m6NtIC
Umqu~_({5kU&b@s_J5RSh00pBTKL7v#