@openmrs/esm-styleguide 8.0.1-pre.3735 → 8.0.1-pre.3744

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,KAAkB,MAAM,OAAO,CAAC;AAOvC,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,qBAyB/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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3735",
+  "version": "8.0.1-pre.3744",
   "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.3735",
-    "@openmrs/esm-config": "8.0.1-pre.3735",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3735",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3735",
-    "@openmrs/esm-extensions": "8.0.1-pre.3735",
-    "@openmrs/esm-globals": "8.0.1-pre.3735",
-    "@openmrs/esm-navigation": "8.0.1-pre.3735",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3735",
-    "@openmrs/esm-state": "8.0.1-pre.3735",
-    "@openmrs/esm-translations": "8.0.1-pre.3735",
-    "@openmrs/esm-utils": "8.0.1-pre.3735",
+    "@openmrs/esm-api": "8.0.1-pre.3744",
+    "@openmrs/esm-config": "8.0.1-pre.3744",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3744",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3744",
+    "@openmrs/esm-extensions": "8.0.1-pre.3744",
+    "@openmrs/esm-globals": "8.0.1-pre.3744",
+    "@openmrs/esm-navigation": "8.0.1-pre.3744",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3744",
+    "@openmrs/esm-state": "8.0.1-pre.3744",
+    "@openmrs/esm-translations": "8.0.1-pre.3744",
+    "@openmrs/esm-utils": "8.0.1-pre.3744",
     "@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,9 +1,24 @@
 /** @module @category UI */
-import React, { useCallback } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, type ComponentProps } from 'react';
 import classNames from 'classnames';
+import { OverflowMenuItem } from '@carbon/react';
 import { useLayoutType, useOnClickOutside } from '@openmrs/esm-react-utils';
 import styles from './custom-overflow-menu.module.scss';
 
+interface CustomOverflowMenuContextValue {
+  closeMenu: () => void;
+}
+
+const CustomOverflowMenuContext = createContext<CustomOverflowMenuContextValue | null>(null);
+
+export function useCustomOverflowMenu() {
+  const context = useContext(CustomOverflowMenuContext);
+  if (!context) {
+    throw new Error('useCustomOverflowMenu must be used within a CustomOverflowMenu');
+  }
+  return context;
+}
+
 interface CustomOverflowMenuProps {
   menuTitle: React.ReactNode;
   children: React.ReactNode;
@@ -14,6 +29,8 @@ export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuPr
   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]);
 
   return (
     <div data-overflow-menu className={classNames('cds--overflow-menu', styles.container)} ref={ref}>
@@ -46,10 +63,17 @@ export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuPr
         <ul
           className={classNames('cds--overflow-menu-options__content', { 'cds--overflow-menu-options--lg': isTablet })}
         >
-          {children}
+          <CustomOverflowMenuContext.Provider value={contextValue}>{children}</CustomOverflowMenuContext.Provider>
         </ul>
         <span />
       </div>
     </div>
   );
 }
+
+type OverflowMenuItemProps = ComponentProps<typeof OverflowMenuItem>;
+
+export function CustomOverflowMenuItem(props: Omit<OverflowMenuItemProps, 'closeMenu'>) {
+  const context = useContext(CustomOverflowMenuContext);
+  return <OverflowMenuItem {...props} closeMenu={context?.closeMenu} />;
+}

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

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom/vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { useLayoutType } from '@openmrs/esm-react-utils';
-import { CustomOverflowMenu } from './custom-overflow-menu.component';
+import { CustomOverflowMenu, CustomOverflowMenuItem, useCustomOverflowMenu } from './custom-overflow-menu.component';
 
 const mockUseLayoutType = vi.mocked(useLayoutType);
 
@@ -94,3 +94,50 @@ describe('CustomOverflowMenu', () => {
     expect(menu).toHaveAttribute('data-floating-menu-direction', 'bottom');
   });
 });
+
+describe('CustomOverflowMenuItem', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('small-desktop');
+  });
+
+  it('should render within CustomOverflowMenu', async () => {
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <CustomOverflowMenuItem itemText="Test Item" />
+      </CustomOverflowMenu>,
+    );
+
+    expect(screen.getByText('Test Item')).toBeInTheDocument();
+  });
+
+  it('should close menu when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <CustomOverflowMenuItem itemText="Click Me" />
+      </CustomOverflowMenu>,
+    );
+
+    const triggerButton = screen.getByRole('button', { name: /menu/i });
+
+    // Open the menu
+    await user.click(triggerButton);
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'true');
+
+    // Click the menu item
+    await user.click(screen.getByText('Click Me'));
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+describe('useCustomOverflowMenu', () => {
+  it('should throw error when used outside CustomOverflowMenu', () => {
+    const TestComponent = () => {
+      useCustomOverflowMenu();
+      return null;
+    };
+
+    expect(() => render(<TestComponent />)).toThrow('useCustomOverflowMenu must be used within a CustomOverflowMenu');
+  });
+});

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

@@ -1,9 +1,10 @@
 /** @module @category UI */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { ExtensionSlot, useExtensionSlot } from '@openmrs/esm-react-utils';
+import { ExtensionSlot, useExtensionSlot, useLayoutType, useOnClickOutside } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { CustomOverflowMenu } from '../../custom-overflow-menu/custom-overflow-menu.component';
+import customOverflowMenuStyles from '../../custom-overflow-menu/custom-overflow-menu.module.scss';
 import styles from './patient-banner-actions-menu.module.scss';
 
 export interface PatientBannerActionsMenuProps {
@@ -23,26 +24,70 @@ export function PatientBannerActionsMenu({
   actionsSlotName,
   additionalActionsSlotState,
 }: PatientBannerActionsMenuProps) {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { extensions: patientActions } = useExtensionSlot(actionsSlotName);
+  const isTablet = useLayoutType() === 'tablet';
+  const ref = useOnClickOutside<HTMLDivElement>(() => setMenuIsOpen(false), menuIsOpen);
+
+  const toggleShowMenu = useCallback(() => setMenuIsOpen((state) => !state), []);
+  const closeMenu = useCallback(() => setMenuIsOpen(false), []);
+
   const patientActionsSlotState = useMemo(
-    () => ({ patientUuid, patient, ...additionalActionsSlotState }),
-    [patientUuid, additionalActionsSlotState],
+    () => ({ patientUuid, patient, closeMenu, ...additionalActionsSlotState }),
+    [patientUuid, patient, closeMenu, additionalActionsSlotState],
   );
 
   return (
     <>
       {patientActions.length > 0 ? (
         <div className={styles.overflowMenuContainer}>
-          <CustomOverflowMenu
-            menuTitle={
-              <>
-                <span className={styles.actionsButtonText}>{getCoreTranslation('actions', 'Actions')}</span>{' '}
-                <OverflowMenuVertical size={16} style={{ marginLeft: '0.5rem', fill: '#78A9FF' }} />
-              </>
-            }
+          <div
+            data-overflow-menu
+            className={classNames('cds--overflow-menu', customOverflowMenuStyles.container)}
+            ref={ref}
           >
-            <ExtensionSlot name={actionsSlotName} key={actionsSlotName} state={patientActionsSlotState} />
-          </CustomOverflowMenu>
+            <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>
         </div>
       ) : null}
     </>