opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-24 11:35:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

dbeaver/pro#7465 refactor: migrate context menu to ariakit (#3963)

Browse Source 
* dbeaver/pro#7465 refactor: migrate context menu to ariakit

* refactor: remove unused modal prop from ContextMenu and clean up schema name handling

* chore: add memoization to the base context menu components

* fix: menu issues

---------

Co-authored-by: sergeyteleshev <iamsergeyteleshev@gmail.com>
This commit is contained in:
Alexey Potsetsuev
2025-12-13 10:44:15 +08:00
committed by GitHub
co-authored by sergeyteleshev
parent dc97f315ab
commit cb23fda311
100 changed files with 1406 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.tsx
+30 -3
View File
@@ -7,6 +7,7 @@
*/
import {
Menubar as AriaMenubar,
MenuProvider as AriaMenuProvider,
Menu as AriaMenu,
MenuButton as AriaMenuButton,
@@ -20,6 +21,8 @@ import {
MenuGroupLabel as AriaMenuGroupLabel,
MenuItemCheckbox as AriaMenuItemCheckbox,
MenuItemRadio as AriaMenuItemRadio,
MenuList as AriaMenuList,
MenuItemCheck as AriaMenuItemCheck,
type MenuProviderProps,
type MenuProps,
type MenuButtonProps,
@@ -32,18 +35,38 @@ import {
type MenuGroupLabelProps,
type MenuItemCheckboxProps,
type MenuItemRadioProps,
type HovercardStoreState,
useMenuStore,
useMenuContext,
useStoreState,
useMenubarStore,
type MenuStoreProps,
type MenuArrowProps,
MenuItemCheck,
type MenuListProps,
type MenuBarProps,
type MenuItemCheckProps,
} from '@ariakit/react';
import clsx from 'clsx';
import './Menu.css';
import type { ReactElement } from 'react';
export function MenuList({ children, className, ...props }: MenuListProps): ReactElement {
return (
<AriaMenuList className={clsx('dbv-kit-menu__list', className)} {...props}>
{children}
</AriaMenuList>
);
}
export function Menubar({ children, className, ...props }: MenuBarProps): ReactElement {
return (
<AriaMenubar className={clsx('dbv-kit-menubar', className)} {...props}>
{children}
</AriaMenubar>
);
}
export function MenuProvider({ children, ...props }: MenuProviderProps): ReactElement {
return <AriaMenuProvider {...props}>{children}</AriaMenuProvider>;
}
@@ -115,16 +138,18 @@ export function MenuGroupLabel({ children, className, ...props }: MenuGroupLabel
export function MenuItemCheckbox({ children, className, ...props }: MenuItemCheckboxProps): ReactElement {
return (
<AriaMenuItemCheckbox className={clsx('dbv-kit-menu__item dbv-kit-menu__item--checkbox', className)} {...props}>
<MenuItemCheck />
{children}
</AriaMenuItemCheckbox>
);
}
export function MenuItemCheck({ className, ...props }: MenuItemCheckProps): ReactElement {
return <AriaMenuItemCheck className={clsx('dbv-kit-menu__item-check', className)} {...props} />;
}
export function MenuItemRadio({ children, className, ...props }: MenuItemRadioProps): ReactElement {
return (
<AriaMenuItemRadio className={clsx('dbv-kit-menu__item dbv-kit-menu__item--radio', className)} {...props}>
<MenuItemCheck />
{children}
</AriaMenuItemRadio>
);
@@ -134,6 +159,7 @@ export {
useMenuStore,
useStoreState,
useMenuContext,
useMenubarStore,
type MenuProviderProps,
type MenuProps,
type MenuButtonProps,
@@ -148,6 +174,7 @@ export {
type MenuItemRadioProps,
type MenuStoreProps,
type MenuArrowProps,
type HovercardStoreState,
};
Menu.Provider = MenuProvider;
webapp/common-react/@dbeaver/ui-kit/src/Menu/__base.css
+4 -4
View File
@@ -12,16 +12,16 @@
--dbv-kit-menu-hover-border-color: var(--dbv-kit-color-control-hover);
--dbv-kit-menu-font-weight: var(--tw-font-weight-normal);
--dbv-kit-menu-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);
--dbv-kit-menu-font-size: calc(var(--dbv-kit-font-size-base) * 0.85);
--dbv-kit-menu-popover-background: var(--dbv-kit-color-background);
--dbv-kit-menu-popover-foreground: var(--dbv-kit-color-foreground);
--dbv-kit-menu-popover-shadow: var(--tw-shadow-md);
--dbv-kit-menu-popover-max-height: 18rem;
--dbv-kit-menu-popover-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
--dbv-kit-menu-popover-max-height: calc(100vh - 4rem);
--dbv-kit-menu-popover-max-width: 20rem;
--dbv-kit-menu-item-padding-inline: calc(var(--tw-spacing) * 5);
--dbv-kit-menu-item-padding-block: calc(var(--tw-spacing) * 1.4);
--dbv-kit-menu-item-padding-block: calc(var(--tw-spacing) * 0);
--dbv-kit-menu-item-hover-background: var(--tw-color-gray-200);
--dbv-kit-menu-item-hover-foreground: var(--dbv-kit-menu-foreground);
--dbv-kit-menu-item-selected-background: var(--dbv-kit-color-primary-100);