@openmrs/esm-styleguide 8.0.1-pre.3758 → 8.0.1-pre.3762

package/.turbo/turbo-build.log

@@ -13,6 +13,6 @@
 [0]   │ You can limit the size of your bundles by using import() to lazy load some parts of your application.
 [0]   │ For more info visit https://www.rspack.dev/guide/optimization/code-splitting
 [0] 
-[0] Rspack compiled with 3 warnings in 9.66 s
+[0] Rspack compiled with 3 warnings in 9.39 s
 [0] rspack --mode=production exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/custom-overflow-menu/custom-overflow-menu.component.d.ts

@@ -9,6 +9,12 @@ interface CustomOverflowMenuProps {
     menuTitle: React.ReactNode;
     children: React.ReactNode;
 }
+/**
+ * A custom overflow menu that supports a text/icon trigger button instead of
+ * Carbon's icon-only OverflowMenu trigger. Uses CSS-based show/hide rather
+ * than Carbon's FloatingMenu portal, so keyboard behavior (Escape, arrow keys,
+ * auto-focus) is implemented here to match the WAI-ARIA menu button pattern.
+ */
 export declare function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuProps): React.JSX.Element;
 type OverflowMenuItemProps = ComponentProps<typeof OverflowMenuItem>;
 export declare function CustomOverflowMenuItem(props: Omit<OverflowMenuItemProps, 'closeMenu'>): React.JSX.Element;

package/dist/custom-overflow-menu/custom-overflow-menu.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-overflow-menu.component.d.ts","sourceRoot":"","sources":["../../src/custom-overflow-menu/custom-overflow-menu.component.tsx"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,KAAK,EAAE,EAAmD,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAIjD,UAAU,8BAA8B;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,qBAAqB,mCAMpC;AAED,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,uBAAuB,qBA6ClF;AAED,KAAK,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC,qBAGrF"}
+{"version":3,"file":"custom-overflow-menu.component.d.ts","sourceRoot":"","sources":["../../src/custom-overflow-menu/custom-overflow-menu.component.tsx"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,KAAK,EAAE,EAWZ,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAIjD,UAAU,8BAA8B;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,qBAAqB,mCAMpC;AAED,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,uBAAuB,qBAiHlF;AAED,KAAK,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC,qBAGrF"}

package/dist/patient-banner/actions-menu/patient-banner-actions-menu.component.d.ts

@@ -10,5 +10,11 @@ export interface PatientBannerActionsMenuProps {
      */
     additionalActionsSlotState?: object;
 }
-export declare function PatientBannerActionsMenu({ patient, patientUuid, actionsSlotName, additionalActionsSlotState, }: PatientBannerActionsMenuProps): React.JSX.Element;
+/**
+ * Overflow menu for the patient banner whose items come from an ExtensionSlot
+ * rather than direct React children. Because cloneElement cannot inject props
+ * into extension-rendered components, arrow key navigation is handled at the
+ * container level via onKeyDown instead of delegating to Carbon's OverflowMenuItem.
+ */
+export declare function PatientBannerActionsMenu({ patient, patientUuid, actionsSlotName, additionalActionsSlotState, }: PatientBannerActionsMenuProps): React.JSX.Element | null;
 //# sourceMappingURL=patient-banner-actions-menu.component.d.ts.map

package/dist/patient-banner/actions-menu/patient-banner-actions-menu.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"patient-banner-actions-menu.component.d.ts","sourceRoot":"","sources":["../../../src/patient-banner/actions-menu/patient-banner-actions-menu.component.tsx"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,WAAW,EACX,eAAe,EACf,0BAA0B,GAC3B,EAAE,6BAA6B,qBAqE/B"}
+{"version":3,"file":"patient-banner-actions-menu.component.d.ts","sourceRoot":"","sources":["../../../src/patient-banner/actions-menu/patient-banner-actions-menu.component.tsx"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,WAAW,EACX,eAAe,EACf,0BAA0B,GAC3B,EAAE,6BAA6B,4BA0H/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3758",
+  "version": "8.0.1-pre.3762",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3758",
-    "@openmrs/esm-config": "8.0.1-pre.3758",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3758",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3758",
-    "@openmrs/esm-extensions": "8.0.1-pre.3758",
-    "@openmrs/esm-globals": "8.0.1-pre.3758",
-    "@openmrs/esm-navigation": "8.0.1-pre.3758",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3758",
-    "@openmrs/esm-state": "8.0.1-pre.3758",
-    "@openmrs/esm-translations": "8.0.1-pre.3758",
-    "@openmrs/esm-utils": "8.0.1-pre.3758",
+    "@openmrs/esm-api": "8.0.1-pre.3762",
+    "@openmrs/esm-config": "8.0.1-pre.3762",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3762",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3762",
+    "@openmrs/esm-extensions": "8.0.1-pre.3762",
+    "@openmrs/esm-globals": "8.0.1-pre.3762",
+    "@openmrs/esm-navigation": "8.0.1-pre.3762",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3762",
+    "@openmrs/esm-state": "8.0.1-pre.3762",
+    "@openmrs/esm-translations": "8.0.1-pre.3762",
+    "@openmrs/esm-utils": "8.0.1-pre.3762",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/custom-overflow-menu/custom-overflow-menu.component.tsx

@@ -1,5 +1,17 @@
 /** @module @category UI */
-import React, { createContext, useCallback, useContext, useMemo, type ComponentProps } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  type ComponentProps,
+} from 'react';
 import classNames from 'classnames';
 import { OverflowMenuItem } from '@carbon/react';
 import { useLayoutType, useOnClickOutside } from '@openmrs/esm-react-utils';
@@ -24,13 +36,81 @@ interface CustomOverflowMenuProps {
   children: React.ReactNode;
 }
 
+/**
+ * A custom overflow menu that supports a text/icon trigger button instead of
+ * Carbon's icon-only OverflowMenu trigger. Uses CSS-based show/hide rather
+ * than Carbon's FloatingMenu portal, so keyboard behavior (Escape, arrow keys,
+ * auto-focus) is implemented here to match the WAI-ARIA menu button pattern.
+ */
 export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuProps) {
   const [menuIsOpen, setMenuIsOpen] = React.useState(false);
   const ref = useOnClickOutside<HTMLDivElement>(() => setMenuIsOpen(false), menuIsOpen);
   const isTablet = useLayoutType() === 'tablet';
   const toggleShowMenu = useCallback(() => setMenuIsOpen((state) => !state), []);
-  const closeMenu = useCallback(() => setMenuIsOpen(false), []);
-  const contextValue = useMemo(() => ({ closeMenu }), [closeMenu]);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const uniqueId = useId();
+  const triggerId = `custom-overflow-menu-trigger-${uniqueId}`;
+  const menuId = `custom-overflow-menu-${uniqueId}`;
+
+  const closeMenuAndFocusTrigger = useCallback(() => {
+    setMenuIsOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  const contextValue = useMemo(() => ({ closeMenu: closeMenuAndFocusTrigger }), [closeMenuAndFocusTrigger]);
+
+  const handleEscapeKey = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape' && menuIsOpen) {
+        e.stopPropagation();
+        closeMenuAndFocusTrigger();
+      }
+    },
+    [closeMenuAndFocusTrigger, menuIsOpen],
+  );
+
+  const childArray = Children.toArray(children);
+
+  useEffect(() => {
+    if (menuIsOpen && menuRef.current) {
+      const firstItem = menuRef.current.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])');
+      firstItem?.focus();
+    }
+  }, [menuIsOpen]);
+
+  const handleOverflowMenuItemFocus = useCallback(
+    ({ currentIndex, direction }: { currentIndex?: number; direction: number }) => {
+      const enabledItems = menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])');
+      if (!enabledItems?.length) {
+        return;
+      }
+
+      const activeItem =
+        (document.activeElement?.closest?.('[role="menuitem"]') as HTMLElement) ?? document.activeElement;
+      const currentPos = Array.from(enabledItems).indexOf(activeItem as HTMLElement);
+      if (currentPos === -1) {
+        enabledItems[direction > 0 ? 0 : enabledItems.length - 1]?.focus();
+        return;
+      }
+
+      const nextPos = currentPos + direction;
+      const wrappedPos = nextPos < 0 ? enabledItems.length - 1 : nextPos >= enabledItems.length ? 0 : nextPos;
+      enabledItems[wrappedPos]?.focus();
+    },
+    [],
+  );
+
+  const enrichedChildren = childArray.map((child, index) => {
+    if (isValidElement(child)) {
+      return cloneElement(child as React.ReactElement<any>, {
+        closeMenu: closeMenuAndFocusTrigger,
+        handleOverflowMenuItemFocus,
+        index,
+      });
+    }
+    return child;
+  });
 
   return (
     <div data-overflow-menu className={classNames('cds--overflow-menu', styles.container)} ref={ref}>
@@ -42,11 +122,13 @@ export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuPr
           { 'cds--overflow-menu--open': menuIsOpen },
           styles.overflowMenuButton,
         )}
-        aria-haspopup="true"
+        aria-controls={menuId}
         aria-expanded={menuIsOpen}
-        id="custom-actions-overflow-menu-trigger"
-        aria-controls="custom-actions-overflow-menu"
+        aria-haspopup="true"
+        id={triggerId}
         onClick={toggleShowMenu}
+        onKeyDown={handleEscapeKey}
+        ref={triggerRef}
       >
         {menuTitle}
       </button>
@@ -54,16 +136,20 @@ export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuPr
         className={classNames('cds--overflow-menu-options', 'cds--overflow-menu--flip', styles.menu, {
           [styles.show]: menuIsOpen,
         })}
-        tabIndex={0}
+        aria-labelledby={triggerId}
         data-floating-menu-direction="bottom"
+        id={menuId}
+        onKeyDown={handleEscapeKey}
+        ref={menuRef}
         role="menu"
-        aria-labelledby="custom-actions-overflow-menu-trigger"
-        id="custom-actions-overflow-menu"
+        tabIndex={-1}
       >
         <ul
           className={classNames('cds--overflow-menu-options__content', { 'cds--overflow-menu-options--lg': isTablet })}
         >
-          <CustomOverflowMenuContext.Provider value={contextValue}>{children}</CustomOverflowMenuContext.Provider>
+          <CustomOverflowMenuContext.Provider value={contextValue}>
+            {enrichedChildren}
+          </CustomOverflowMenuContext.Provider>
         </ul>
         <span />
       </div>

package/src/custom-overflow-menu/custom-overflow-menu.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom/vitest';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { useLayoutType } from '@openmrs/esm-react-utils';
 import { CustomOverflowMenu, CustomOverflowMenuItem, useCustomOverflowMenu } from './custom-overflow-menu.component';
 
@@ -79,8 +79,61 @@ describe('CustomOverflowMenu', () => {
 
     expect(trigger).toHaveAttribute('aria-haspopup', 'true');
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(trigger).toHaveAttribute('aria-controls', 'custom-actions-overflow-menu');
-    expect(menu).toHaveAttribute('aria-labelledby', 'custom-actions-overflow-menu-trigger');
+
+    const menuId = trigger.getAttribute('aria-controls');
+    expect(menuId).toBeTruthy();
+    expect(menu).toHaveAttribute('id', menuId);
+    expect(menu).toHaveAttribute('aria-labelledby', trigger.id);
+  });
+
+  it('should generate unique IDs for multiple instances', () => {
+    render(
+      <>
+        <CustomOverflowMenu menuTitle="Menu A">
+          <li>Option 1</li>
+        </CustomOverflowMenu>
+        <CustomOverflowMenu menuTitle="Menu B">
+          <li>Option 2</li>
+        </CustomOverflowMenu>
+      </>,
+    );
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[0].id).not.toBe(buttons[1].id);
+  });
+
+  it('should close menu and return focus to trigger on Escape key', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <CustomOverflowMenuItem itemText="Option 1" />
+      </CustomOverflowMenu>,
+    );
+
+    const trigger = screen.getByRole('button', { name: /menu/i });
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveFocus();
+  });
+
+  it('should focus the first enabled menu item when opened', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <CustomOverflowMenuItem itemText="Disabled Item" disabled />
+        <CustomOverflowMenuItem itemText="Enabled Item" />
+      </CustomOverflowMenu>,
+    );
+
+    await user.click(screen.getByRole('button', { name: /menu/i }));
+
+    const menuItems = screen.getAllByRole('menuitem');
+    await waitFor(() => expect(menuItems[1]).toHaveFocus());
   });
 
   it('should have correct menu positioning attributes', () => {

package/src/patient-banner/actions-menu/patient-banner-actions-menu.component.tsx

@@ -1,5 +1,5 @@
 /** @module @category UI */
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { OverflowMenuVertical } from '@carbon/react/icons';
 import { ExtensionSlot, useExtensionSlot, useLayoutType, useOnClickOutside } from '@openmrs/esm-react-utils';
@@ -18,6 +18,12 @@ export interface PatientBannerActionsMenuProps {
   additionalActionsSlotState?: object;
 }
 
+/**
+ * Overflow menu for the patient banner whose items come from an ExtensionSlot
+ * rather than direct React children. Because cloneElement cannot inject props
+ * into extension-rendered components, arrow key navigation is handled at the
+ * container level via onKeyDown instead of delegating to Carbon's OverflowMenuItem.
+ */
 export function PatientBannerActionsMenu({
   patient,
   patientUuid,
@@ -28,68 +34,121 @@ export function PatientBannerActionsMenu({
   const { extensions: patientActions } = useExtensionSlot(actionsSlotName);
   const isTablet = useLayoutType() === 'tablet';
   const ref = useOnClickOutside<HTMLDivElement>(() => setMenuIsOpen(false), menuIsOpen);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const uniqueId = useId();
+  const triggerId = `patient-actions-menu-trigger-${uniqueId}`;
+  const menuId = `patient-actions-menu-${uniqueId}`;
 
   const toggleShowMenu = useCallback(() => setMenuIsOpen((state) => !state), []);
-  const closeMenu = useCallback(() => setMenuIsOpen(false), []);
+
+  const closeMenuAndFocusTrigger = useCallback(() => {
+    setMenuIsOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  const handleMenuKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape' && menuIsOpen) {
+        e.stopPropagation();
+        closeMenuAndFocusTrigger();
+        return;
+      }
+
+      if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && menuIsOpen) {
+        e.preventDefault();
+        const enabledItems = menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])');
+        if (!enabledItems?.length) {
+          return;
+        }
+
+        const activeItem =
+          (document.activeElement?.closest?.('[role="menuitem"]') as HTMLElement) ?? document.activeElement;
+        const currentPos = Array.from(enabledItems).indexOf(activeItem as HTMLElement);
+
+        if (currentPos === -1) {
+          enabledItems[e.key === 'ArrowDown' ? 0 : enabledItems.length - 1]?.focus();
+          return;
+        }
+
+        const direction = e.key === 'ArrowDown' ? 1 : -1;
+        const nextPos = currentPos + direction;
+        const wrappedPos = nextPos < 0 ? enabledItems.length - 1 : nextPos >= enabledItems.length ? 0 : nextPos;
+        enabledItems[wrappedPos]?.focus();
+      }
+    },
+    [closeMenuAndFocusTrigger, menuIsOpen],
+  );
+
+  useEffect(() => {
+    if (menuIsOpen && menuRef.current) {
+      const firstItem = menuRef.current.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])');
+      firstItem?.focus();
+    }
+  }, [menuIsOpen]);
 
   const patientActionsSlotState = useMemo(
-    () => ({ patientUuid, patient, closeMenu, ...additionalActionsSlotState }),
-    [patientUuid, patient, closeMenu, additionalActionsSlotState],
+    () => ({ patientUuid, patient, closeMenu: closeMenuAndFocusTrigger, ...additionalActionsSlotState }),
+    [patientUuid, patient, closeMenuAndFocusTrigger, additionalActionsSlotState],
   );
 
+  if (patientActions.length === 0) {
+    return null;
+  }
+
   return (
-    <>
-      {patientActions.length > 0 ? (
-        <div className={styles.overflowMenuContainer}>
-          <div
-            data-overflow-menu
-            className={classNames('cds--overflow-menu', customOverflowMenuStyles.container)}
-            ref={ref}
+    <div className={styles.overflowMenuContainer}>
+      <div
+        data-overflow-menu
+        className={classNames('cds--overflow-menu', customOverflowMenuStyles.container)}
+        ref={ref}
+      >
+        <button
+          className={classNames(
+            'cds--btn',
+            'cds--btn--ghost',
+            'cds--overflow-menu__trigger',
+            { 'cds--overflow-menu--open': menuIsOpen },
+            customOverflowMenuStyles.overflowMenuButton,
+          )}
+          aria-controls={menuId}
+          aria-expanded={menuIsOpen}
+          aria-haspopup="true"
+          id={triggerId}
+          onClick={toggleShowMenu}
+          onKeyDown={handleMenuKeyDown}
+          ref={triggerRef}
+        >
+          <span className={styles.actionsButtonText}>{getCoreTranslation('actions', 'Actions')}</span>{' '}
+          <OverflowMenuVertical size={16} style={{ marginLeft: '0.5rem', fill: '#78A9FF' }} />
+        </button>
+        <div
+          className={classNames(
+            'cds--overflow-menu-options',
+            'cds--overflow-menu--flip',
+            customOverflowMenuStyles.menu,
+            {
+              [customOverflowMenuStyles.show]: menuIsOpen,
+            },
+          )}
+          aria-labelledby={triggerId}
+          data-floating-menu-direction="bottom"
+          id={menuId}
+          onKeyDown={handleMenuKeyDown}
+          ref={menuRef}
+          role="menu"
+          tabIndex={-1}
+        >
+          <ul
+            className={classNames('cds--overflow-menu-options__content', {
+              'cds--overflow-menu-options--lg': isTablet,
+            })}
           >
-            <button
-              className={classNames(
-                'cds--btn',
-                'cds--btn--ghost',
-                'cds--overflow-menu__trigger',
-                { 'cds--overflow-menu--open': menuIsOpen },
-                customOverflowMenuStyles.overflowMenuButton,
-              )}
-              aria-haspopup="true"
-              aria-expanded={menuIsOpen}
-              id="custom-actions-overflow-menu-trigger"
-              aria-controls="custom-actions-overflow-menu"
-              onClick={toggleShowMenu}
-            >
-              <span className={styles.actionsButtonText}>{getCoreTranslation('actions', 'Actions')}</span>{' '}
-              <OverflowMenuVertical size={16} style={{ marginLeft: '0.5rem', fill: '#78A9FF' }} />
-            </button>
-            <div
-              className={classNames(
-                'cds--overflow-menu-options',
-                'cds--overflow-menu--flip',
-                customOverflowMenuStyles.menu,
-                {
-                  [customOverflowMenuStyles.show]: menuIsOpen,
-                },
-              )}
-              tabIndex={0}
-              data-floating-menu-direction="bottom"
-              role="menu"
-              aria-labelledby="custom-actions-overflow-menu-trigger"
-              id="custom-actions-overflow-menu"
-            >
-              <ul
-                className={classNames('cds--overflow-menu-options__content', {
-                  'cds--overflow-menu-options--lg': isTablet,
-                })}
-              >
-                <ExtensionSlot name={actionsSlotName} key={actionsSlotName} state={patientActionsSlotState} />
-              </ul>
-              <span />
-            </div>
-          </div>
+            <ExtensionSlot name={actionsSlotName} key={actionsSlotName} state={patientActionsSlotState} />
+          </ul>
+          <span />
         </div>
-      ) : null}
-    </>
+      </div>
+    </div>
   );
 }