@openmrs/esm-styleguide 11.0.1-pre.5825 → 11.0.1-pre.5830

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 117 files, copied 171 files with swc (257.79ms)
+[0] Successfully compiled: 117 files, copied 171 files with swc (326.45ms)
 [0] swc --strip-leading-paths --copy-files src -d dist && svgo -rf dist --quiet exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/workspaces2/action-menu2/action-menu-button2.component.d.ts

@@ -1,5 +1,6 @@
 /** @module @category Workspace */
 import React from 'react';
+import { type OpenedWindow } from '@openmrs/esm-extensions';
 export interface ActionMenuButtonProps2 {
     icon: (props: object) => JSX.Element;
     label: string;
@@ -18,6 +19,20 @@ export interface ActionMenuButtonProps2 {
      *
      */
     onBeforeWorkspaceLaunch?: () => Promise<boolean>;
+    /**
+     * An optional callback function to determine whether the action menu button
+     * should be disabled based on the openedWindows state of the workspace group
+     * @param openedWindows
+     * @returns true if the action menu button should be disabled and false if it should be enabled
+     */
+    disabled?: (openedWindows: Array<OpenedWindow>) => boolean;
+    /**
+     * An optional callback function to determine whether the action menu button
+     * should be hidden based on the openedWindows state of the workspace group
+     * @param openedWindows
+     * @returns true if the action menu button should be hidden and false if it should be shown
+     */
+    hidden?: (openedWindows: Array<OpenedWindow>) => boolean;
 }
 /**
  * The ActionMenuButton2 component is used to render a button in the action menu of a workspace group.

package/dist/workspaces2/action-menu2/action-menu-button2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu-button2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu-button2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAqB,MAAM,OAAO,CAAC;AA6B1C,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,iBAAiB,EAAE;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACnC,CAAC;IAEF;;;;;;;OAOG;IACH,uBAAuB,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6E9D,CAAC"}
+{"version":3,"file":"action-menu-button2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu-button2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAwB5D,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,iBAAiB,EAAE;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACnC,CAAC;IAEF;;;;;;;OAOG;IACH,uBAAuB,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,OAAO,CAAC;IAE3D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,OAAO,CAAC;CAC1D;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqF9D,CAAC"}

package/dist/workspaces2/action-menu2/action-menu-button2.component.js

@@ -34,7 +34,7 @@ function Tags({ getIcon, hasUnsavedChanges, tagContent }) {
  * 2. restores the workspace window if it is opened and unfocused; or
  * 3. launches a workspace from within that window, if the window is not opened.
  *
- */ export const ActionMenuButton2 = ({ icon: getIcon, label, tagContent, workspaceToLaunch, onBeforeWorkspaceLaunch })=>{
+ */ export const ActionMenuButton2 = ({ icon: getIcon, label, tagContent, workspaceToLaunch, onBeforeWorkspaceLaunch, hidden, disabled })=>{
     const layout = useLayoutType();
     const { openedWindows, restoreWindow, hideWindow, isMostRecentlyOpenedWindowHidden } = useWorkspace2Store();
     const { extension } = useContext(ComponentContext);
@@ -60,6 +60,9 @@ function Tags({ getIcon, hasUnsavedChanges, tagContent }) {
             }
         }
     };
+    if (hidden?.(openedWindows)) {
+        return null;
+    }
     if (layout === 'tablet' || layout === 'phone') {
         return /*#__PURE__*/ _jsxs(Button, {
             className: classNames(styles.container, {
@@ -72,6 +75,7 @@ function Tags({ getIcon, hasUnsavedChanges, tagContent }) {
             role: "button",
             tabIndex: 0,
             size: "md",
+            disabled: disabled?.(openedWindows),
             children: [
                 /*#__PURE__*/ _jsx("span", {
                     className: styles.elementContainer,
@@ -99,6 +103,7 @@ function Tags({ getIcon, hasUnsavedChanges, tagContent }) {
         label: label,
         onClick: onClick,
         size: "md",
+        disabled: disabled?.(openedWindows),
         children: /*#__PURE__*/ _jsx("div", {
             className: styles.elementContainer,
             children: /*#__PURE__*/ _jsx(Tags, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "11.0.1-pre.5825",
+  "version": "11.0.1-pre.5830",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "module": "dist/internal.js",
@@ -79,18 +79,18 @@
     "uuid": "^11.1.1"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "^11.0.1-pre.5825",
-    "@openmrs/esm-config": "^11.0.1-pre.5825",
-    "@openmrs/esm-emr-api": "^11.0.1-pre.5825",
-    "@openmrs/esm-error-handling": "^11.0.1-pre.5825",
-    "@openmrs/esm-extensions": "^11.0.1-pre.5825",
-    "@openmrs/esm-globals": "^11.0.1-pre.5825",
-    "@openmrs/esm-navigation": "^11.0.1-pre.5825",
-    "@openmrs/esm-react-utils": "^11.0.1-pre.5825",
-    "@openmrs/esm-routes": "^11.0.1-pre.5825",
-    "@openmrs/esm-state": "^11.0.1-pre.5825",
-    "@openmrs/esm-translations": "^11.0.1-pre.5825",
-    "@openmrs/esm-utils": "^11.0.1-pre.5825",
+    "@openmrs/esm-api": "^11.0.1-pre.5830",
+    "@openmrs/esm-config": "^11.0.1-pre.5830",
+    "@openmrs/esm-emr-api": "^11.0.1-pre.5830",
+    "@openmrs/esm-error-handling": "^11.0.1-pre.5830",
+    "@openmrs/esm-extensions": "^11.0.1-pre.5830",
+    "@openmrs/esm-globals": "^11.0.1-pre.5830",
+    "@openmrs/esm-navigation": "^11.0.1-pre.5830",
+    "@openmrs/esm-react-utils": "^11.0.1-pre.5830",
+    "@openmrs/esm-routes": "^11.0.1-pre.5830",
+    "@openmrs/esm-state": "^11.0.1-pre.5830",
+    "@openmrs/esm-translations": "^11.0.1-pre.5830",
+    "@openmrs/esm-utils": "^11.0.1-pre.5830",
     "dayjs": "1.x",
     "i18next": "25.x",
     "react": "18.x",
@@ -99,18 +99,18 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "11.0.1-pre.5825",
-    "@openmrs/esm-config": "11.0.1-pre.5825",
-    "@openmrs/esm-emr-api": "11.0.1-pre.5825",
-    "@openmrs/esm-error-handling": "11.0.1-pre.5825",
-    "@openmrs/esm-extensions": "11.0.1-pre.5825",
-    "@openmrs/esm-globals": "11.0.1-pre.5825",
-    "@openmrs/esm-navigation": "11.0.1-pre.5825",
-    "@openmrs/esm-react-utils": "11.0.1-pre.5825",
-    "@openmrs/esm-routes": "11.0.1-pre.5825",
-    "@openmrs/esm-state": "11.0.1-pre.5825",
-    "@openmrs/esm-translations": "11.0.1-pre.5825",
-    "@openmrs/esm-utils": "11.0.1-pre.5825",
+    "@openmrs/esm-api": "11.0.1-pre.5830",
+    "@openmrs/esm-config": "11.0.1-pre.5830",
+    "@openmrs/esm-emr-api": "11.0.1-pre.5830",
+    "@openmrs/esm-error-handling": "11.0.1-pre.5830",
+    "@openmrs/esm-extensions": "11.0.1-pre.5830",
+    "@openmrs/esm-globals": "11.0.1-pre.5830",
+    "@openmrs/esm-navigation": "11.0.1-pre.5830",
+    "@openmrs/esm-react-utils": "11.0.1-pre.5830",
+    "@openmrs/esm-routes": "11.0.1-pre.5830",
+    "@openmrs/esm-state": "11.0.1-pre.5830",
+    "@openmrs/esm-translations": "11.0.1-pre.5830",
+    "@openmrs/esm-utils": "11.0.1-pre.5830",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@types/geopattern": "^1.2.9",

package/src/workspaces2/action-menu2/action-menu-button2.component.tsx

@@ -47,6 +47,22 @@ export interface ActionMenuButtonProps2 {
    *
    */
   onBeforeWorkspaceLaunch?: () => Promise<boolean>;
+
+  /**
+   * An optional callback function to determine whether the action menu button
+   * should be disabled based on the openedWindows state of the workspace group
+   * @param openedWindows
+   * @returns true if the action menu button should be disabled and false if it should be enabled
+   */
+  disabled?: (openedWindows: Array<OpenedWindow>) => boolean;
+
+  /**
+   * An optional callback function to determine whether the action menu button
+   * should be hidden based on the openedWindows state of the workspace group
+   * @param openedWindows
+   * @returns true if the action menu button should be hidden and false if it should be shown
+   */
+  hidden?: (openedWindows: Array<OpenedWindow>) => boolean;
 }
 
 /**
@@ -69,6 +85,8 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
   tagContent,
   workspaceToLaunch,
   onBeforeWorkspaceLaunch,
+  hidden,
+  disabled,
 }) => {
   const layout = useLayoutType();
   const { openedWindows, restoreWindow, hideWindow, isMostRecentlyOpenedWindowHidden } = useWorkspace2Store();
@@ -99,6 +117,10 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
     }
   };
 
+  if (hidden?.(openedWindows)) {
+    return null;
+  }
+
   if (layout === 'tablet' || layout === 'phone') {
     return (
       <Button
@@ -112,6 +134,7 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
         role="button"
         tabIndex={0}
         size="md"
+        disabled={disabled?.(openedWindows)}
       >
         <span className={styles.elementContainer}>
           <Tags hasUnsavedChanges={hasUnsavedChanges} getIcon={getIcon} tagContent={tagContent} />
@@ -134,6 +157,7 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
       label={label}
       onClick={onClick}
       size="md"
+      disabled={disabled?.(openedWindows)}
     >
       <div className={styles.elementContainer}>
         <Tags hasUnsavedChanges={hasUnsavedChanges} getIcon={getIcon} tagContent={tagContent} />

package/src/workspaces2/action-menu2/action-menu-button2.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ComponentContext, useLayoutType } from '@openmrs/esm-react-utils';
+import { type OpenedWindow } from '@openmrs/esm-extensions';
+import { launchWorkspace2, useWorkspace2Store } from '../workspace2';
+import { ActionMenuButton2 } from './action-menu-button2.component';
+
+vi.mock('../workspace2', () => ({
+  launchWorkspace2: vi.fn(),
+  useWorkspace2Store: vi.fn(),
+}));
+
+vi.mock('@openmrs/esm-react-utils', async () => ({
+  ...(await vi.importActual<object>('@openmrs/esm-react-utils')),
+  useLayoutType: vi.fn(),
+}));
+
+const mockUseLayoutType = vi.mocked(useLayoutType);
+const mockUseWorkspace2Store = vi.mocked(useWorkspace2Store);
+const mockLaunchWorkspace2 = vi.mocked(launchWorkspace2);
+
+const mockHideWindow = vi.fn();
+
+const openedWindows = [{ windowName: 'test-window', openedWorkspaces: [] }] as unknown as Array<OpenedWindow>;
+
+function renderButton(props: Partial<React.ComponentProps<typeof ActionMenuButton2>> = {}) {
+  return render(
+    <ComponentContext.Provider value={{ extension: { extensionId: 'test-window' } } as any}>
+      <ActionMenuButton2
+        icon={() => <svg data-testid="icon" />}
+        label="Test button"
+        workspaceToLaunch={{ workspaceName: 'test-workspace' }}
+        {...props}
+      />
+    </ComponentContext.Provider>,
+  );
+}
+
+describe('ActionMenuButton2 hidden and disabled', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('small-desktop');
+    mockUseWorkspace2Store.mockReturnValue({
+      openedWindows,
+      restoreWindow: vi.fn(),
+      hideWindow: mockHideWindow,
+      isMostRecentlyOpenedWindowHidden: false,
+    } as any);
+  });
+
+  it('renders an enabled button by default', () => {
+    renderButton();
+    expect(screen.getByRole('button')).toBeEnabled();
+  });
+
+  it('renders nothing when hidden returns true, passing openedWindows', () => {
+    const hidden = vi.fn().mockReturnValue(true);
+    renderButton({ hidden });
+    expect(hidden).toHaveBeenCalledWith(openedWindows);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders the button when hidden returns false', () => {
+    renderButton({ hidden: () => false });
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('disables the button when disabled returns true, passing openedWindows', async () => {
+    const disabled = vi.fn().mockReturnValue(true);
+    renderButton({ disabled });
+    expect(disabled).toHaveBeenCalledWith(openedWindows);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(mockLaunchWorkspace2).not.toHaveBeenCalled();
+    expect(mockHideWindow).not.toHaveBeenCalled();
+  });
+
+  it('keeps the button enabled when disabled returns false', () => {
+    renderButton({ disabled: () => false });
+    expect(screen.getByRole('button')).toBeEnabled();
+  });
+
+  it('supports hidden and disabled on tablet layout', () => {
+    mockUseLayoutType.mockReturnValue('tablet');
+    const { unmount } = renderButton({ disabled: () => true });
+    expect(screen.getByRole('button')).toBeDisabled();
+    unmount();
+
+    renderButton({ hidden: () => true });
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});