ui update menu component

webnext/src/shared/defguard-ui/components/Button/Button.tsx

@@ -20,17 +20,19 @@ export const Button = ({
   type = 'button',
   disabled = false,
   loading = false,
+  ...props
 }: ButtonProps) => {
   return (
     <button
+      {...props}
       data-variant={variant}
       data-testid={testId}
       ref={ref}
       type={type}
       disabled={disabled || loading}
-      onClick={() => {
+      onClick={(e) => {
         if (!disabled && !loading) {
-          onClick?.();
+          onClick?.(e);
         }
       }}
       className={clsx('btn', `variant-${variant}`, `size-${size}`, {

webnext/src/shared/defguard-ui/components/Button/types.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, Ref } from 'react';
+import type { ButtonHTMLAttributes, HTMLAttributes, Ref } from 'react';
 import type { Direction } from '../../types';
 import type { IconKindValue } from '../Icon/icon-types';
 
@@ -19,6 +19,5 @@ export type ButtonProps = {
   testId?: string;
   disabled?: boolean;
   loading?: boolean;
-  onClick?: () => void;
   ref?: Ref<HTMLButtonElement>;
-};
+} & HTMLAttributes<HTMLElement>;

webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx

@@ -0,0 +1,67 @@
+import {
+  autoUpdate,
+  FloatingPortal,
+  offset,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react';
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import type { ButtonProps } from '../Button/types';
+import { Menu } from '../Menu/Menu';
+import type { MenuItemsGroup } from '../Menu/types';
+
+export const ButtonMenu = ({
+  menuItems,
+  ...props
+}: Omit<ButtonProps, 'ref'> & {
+  menuItems: MenuItemsGroup[];
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const { refs, context, floatingStyles } = useFloating({
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setOpen,
+    open: isOpen,
+    middleware: [
+      offset(4),
+      size({
+        apply({ rects, elements }) {
+          const refWidth = `${rects.reference.width}px`;
+          elements.floating.style.minWidth = refWidth;
+        },
+      }),
+    ],
+  });
+
+  const click = useClick(context, {
+    toggle: true,
+  });
+
+  const dismiss = useDismiss(context, {
+    ancestorScroll: true,
+    escapeKey: true,
+    outsidePress: (event) => !(event.target as HTMLElement).closest('.menu'),
+  });
+
+  const { getFloatingProps, getReferenceProps } = useInteractions([click, dismiss]);
+
+  return (
+    <>
+      <Button ref={refs.setReference} {...props} {...getReferenceProps()} />
+      {isOpen && (
+        <FloatingPortal>
+          <Menu
+            itemGroups={menuItems}
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          />
+        </FloatingPortal>
+      )}
+    </>
+  );
+};

webnext/src/shared/defguard-ui/components/Menu/Menu.tsx

@@ -1,80 +1,24 @@
-import { Fragment, useEffect } from 'react';
+import { Fragment } from 'react';
 import { MenuItem } from './components/MenuItem';
 import './style.scss';
-import {
-  autoUpdate,
-  FloatingPortal,
-  offset,
-  size,
-  useDismiss,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react';
+import clsx from 'clsx';
 import { isPresent } from '../../utils/isPresent';
 import { MenuHeader } from './components/MenuHeader';
 import { MenuSpacer } from './components/MenuSpacer';
-
 import type { MenuProps } from './types';
 
-export const Menu = ({
-  itemGroups,
-  isOpen,
-  referenceRef,
-  setOpen,
-  placement,
-  floatingOffset = 5,
-}: MenuProps) => {
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    placement: placement ?? 'bottom-start',
-    middleware: [
-      offset(floatingOffset),
-      size({
-        apply({ rects, elements }) {
-          const w = `${rects.reference.width}px`;
-          (elements.floating as HTMLElement).style.minWidth = w;
-        },
-      }),
-    ],
-  });
-
-  const dismiss = useDismiss(context, {
-    ancestorScroll: true,
-    outsidePress: (event) => !(event.target as HTMLElement | null)?.closest('.menu'),
-  });
-
-  const { getFloatingProps } = useInteractions([dismiss]);
-
-  useEffect(() => {
-    if (referenceRef) {
-      refs.setReference(referenceRef.current);
-    }
-  }, [referenceRef, refs.setReference]);
-
-  if (!isOpen) return null;
-
+export const Menu = ({ itemGroups, ref, className, ...props }: MenuProps) => {
   return (
-    <FloatingPortal>
-      <div
-        className="menu"
-        {...getFloatingProps()}
-        ref={refs.setFloating}
-        style={{
-          ...floatingStyles,
-        }}
-      >
-        {itemGroups.map((group, groupIndex) => (
-          <Fragment key={group.header?.text ?? groupIndex}>
-            {isPresent(group.header) && <MenuHeader {...group.header} />}
-            {group.items.map((item) => (
-              <MenuItem key={item.text} {...item} />
-            ))}
-            {groupIndex !== 0 && groupIndex !== itemGroups.length - 1 && <MenuSpacer />}
-          </Fragment>
-        ))}
-      </div>
-    </FloatingPortal>
+    <div className={clsx('menu', className)} ref={ref} {...props}>
+      {itemGroups.map((group, groupIndex) => (
+        <Fragment key={group.header?.text ?? groupIndex}>
+          {isPresent(group.header) && <MenuHeader {...group.header} />}
+          {group.items.map((item) => (
+            <MenuItem key={item.text} {...item} />
+          ))}
+          {groupIndex !== 0 && groupIndex !== itemGroups.length - 1 && <MenuSpacer />}
+        </Fragment>
+      ))}
+    </div>
   );
 };

webnext/src/shared/defguard-ui/components/Menu/types.ts

@@ -1,14 +1,9 @@
-import type { Placement } from '@floating-ui/react';
-import type { RefObject } from 'react';
+import type { HTMLAttributes, Ref } from 'react';
 import type { IconKindValue } from '../Icon/icon-types';
 
-export interface MenuProps {
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   itemGroups: MenuItemsGroup[];
-  referenceRef: RefObject<HTMLElement | null>;
-  placement?: Placement;
-  isOpen: boolean;
-  setOpen: (val: boolean) => void;
-  floatingOffset?: number;
+  ref?: Ref<HTMLDivElement>;
 }
 
 export interface MenuItemsGroup {

webnext/src/test_components/page/TestPage.tsx

@@ -1,16 +1,16 @@
-import { type PropsWithChildren, useMemo, useRef, useState } from 'react';
+import { type PropsWithChildren, useMemo, useState } from 'react';
 import { Page } from '../../shared/components/Page/Page';
 import './style.scss';
 import { Avatar } from '../../shared/defguard-ui/components/Avatar/Avatar';
 import { Badge } from '../../shared/defguard-ui/components/Badge/Badge';
 import { Button } from '../../shared/defguard-ui/components/Button/Button';
+import { ButtonMenu } from '../../shared/defguard-ui/components/ButtonMenu/MenuButton';
 import { Checkbox } from '../../shared/defguard-ui/components/Checkbox/Checkbox';
 import { CounterLabel } from '../../shared/defguard-ui/components/CounterLabel/CounterLabel';
 import { Divider } from '../../shared/defguard-ui/components/Divider/Divider';
 import { EmptyState } from '../../shared/defguard-ui/components/EmptyState/EmptyState';
 import { IconButton } from '../../shared/defguard-ui/components/IconButton/IconButton';
 import { Input } from '../../shared/defguard-ui/components/Input/Input';
-import { Menu } from '../../shared/defguard-ui/components/Menu/Menu';
 import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types';
 import { Modal } from '../../shared/defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../shared/defguard-ui/components/ModalControls/ModalControls';
@@ -203,8 +203,6 @@ const TestModalButton = () => {
 };
 
 const TestMenu = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [menuOpen, setMenuOpen] = useState(false);
   const menuGroup = useMemo(() => {
     const res: MenuItemsGroup = {
       items: [
@@ -243,21 +241,12 @@ const TestMenu = () => {
   return (
     <>
       <TestRow>
-        <Button
-          ref={buttonRef}
+        <ButtonMenu
+          menuItems={[menuGroup]}
           text="Action menu test"
           iconRight="arrow-small"
           variant="outlined"
           iconRightRotation="down"
-          onClick={() => {
-            setMenuOpen((s) => !s);
-          }}
-        />
-        <Menu
-          itemGroups={[menuGroup]}
-          referenceRef={buttonRef}
-          isOpen={menuOpen}
-          setOpen={setMenuOpen}
         />
       </TestRow>
       <SizedBox height={500} />