@openmrs/esm-styleguide 8.0.1-pre.3615 → 8.0.1-pre.3634

package/dist/workspaces2/workspace2.d.ts

@@ -94,7 +94,7 @@ type PromptReason = {
 export declare function promptForClosingWorkspaces(promptReason: PromptReason): Promise<boolean>;
 export declare function useWorkspace2Store(): WorkspaceStoreState2 & {
     setWindowMaximized: (windowName: string, maximized: boolean) => void;
-    hideWindow: (windowName: string) => void;
+    hideWindow: () => void;
     restoreWindow: (windowName: string) => void;
     closeWorkspace: (workspaceName: string) => void;
     openChildWorkspace: (parentWorkspaceName: string, childWorkspaceName: string, childWorkspaceProps: Record<string, any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3615",
+  "version": "8.0.1-pre.3634",
   "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.3615",
-    "@openmrs/esm-config": "8.0.1-pre.3615",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3615",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3615",
-    "@openmrs/esm-extensions": "8.0.1-pre.3615",
-    "@openmrs/esm-globals": "8.0.1-pre.3615",
-    "@openmrs/esm-navigation": "8.0.1-pre.3615",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3615",
-    "@openmrs/esm-state": "8.0.1-pre.3615",
-    "@openmrs/esm-translations": "8.0.1-pre.3615",
-    "@openmrs/esm-utils": "8.0.1-pre.3615",
+    "@openmrs/esm-api": "8.0.1-pre.3634",
+    "@openmrs/esm-config": "8.0.1-pre.3634",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3634",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3634",
+    "@openmrs/esm-extensions": "8.0.1-pre.3634",
+    "@openmrs/esm-globals": "8.0.1-pre.3634",
+    "@openmrs/esm-navigation": "8.0.1-pre.3634",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3634",
+    "@openmrs/esm-state": "8.0.1-pre.3634",
+    "@openmrs/esm-translations": "8.0.1-pre.3634",
+    "@openmrs/esm-utils": "8.0.1-pre.3634",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

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

@@ -70,21 +70,21 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
   onBeforeWorkspaceLaunch,
 }) => {
   const layout = useLayoutType();
-  const { openedWindows, restoreWindow } = useWorkspace2Store();
+  const { openedWindows, restoreWindow, isMostRecentlyOpenedWindowHidden } = useWorkspace2Store();
 
   // name of the window that the button is associated with
   const { windowName } = useContext(SingleSpaContext);
 
+  const openedWindowIndex = openedWindows.findIndex((w) => w.windowName === windowName);
   // can be undefined if the window is not opened
-  const window = openedWindows.find((w) => w.windowName === windowName);
-
+  const window: OpenedWindow | undefined = openedWindows[openedWindowIndex];
   const isWindowOpened = window != null;
-  const isWindowHidden = window?.hidden ?? false;
-  const isFocused = isCurrentWindowFocused(openedWindows, window);
+  const isWindowHidden =
+    isWindowOpened && (openedWindowIndex < openedWindows.length - 1 || isMostRecentlyOpenedWindowHidden);
 
   const onClick = async () => {
     if (isWindowOpened) {
-      if (!isFocused) {
+      if (isWindowHidden) {
         restoreWindow(window.windowName);
       }
     } else {
@@ -121,7 +121,6 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
       aria-label={label}
       className={classNames(styles.container, {
         [styles.active]: isWindowOpened,
-        [styles.focused]: isFocused,
       })}
       enterDelayMs={300}
       kind="ghost"
@@ -135,15 +134,3 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
     </IconButton>
   );
 };
-
-function isCurrentWindowFocused(openedWindows: Array<OpenedWindow>, currentWindow: OpenedWindow | undefined): boolean {
-  // openedWindows array is sorted with most recently opened window appearing last.
-  // We check if the current window is the last one in the array that is not hidden.
-  for (let i = openedWindows.length - 1; i >= 0; i--) {
-    const win = openedWindows[i];
-    if (!win.hidden) {
-      return win.windowName === currentWindow?.windowName;
-    }
-  }
-  return false;
-}

package/src/workspaces2/action-menu2/action-menu-button2.module.scss

@@ -14,10 +14,6 @@
     color: $text-02;
   }
 
-  &:focus {
-    border-color: $interactive-01;
-  }
-
   & > span {
     margin-top: layout.$spacing-02;
     @include type.type-style('body-compact-01');
@@ -63,11 +59,6 @@
     @include brand-03(border-color);
     border-radius: 50%;
     background-color: $ui-02;
-
-    &.focused {
-      border-color: var(--brand-03) !important;
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-03) 80%, black 20%) !important;
-    }
   }
 
   .container {

package/src/workspaces2/workspace2.component.tsx

@@ -77,6 +77,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
     registeredWorkspacesByName,
     workspaceTitleByWorkspaceName,
     setWorkspaceTitle,
+    isMostRecentlyOpenedWindowHidden,
   } = useWorkspace2Store();
   const { workspaceName, isRootWorkspace, closeWorkspace } = useWorkspace2Context();
 
@@ -122,6 +123,8 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
     (window) => window.group === openedGroup.groupName && window.icon !== undefined,
   );
 
+  const isWindowHidden = openedWindowIndex < openedWindows.length - 1 || isMostRecentlyOpenedWindowHidden;
+
   return (
     <div
       className={classNames(styles.workspaceOuterContainer, {
@@ -133,20 +136,20 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
     >
       <div
         className={classNames(styles.workspaceSpacer, {
-          [styles.hidden]: openedWindow.hidden,
+          [styles.hidden]: isWindowHidden,
         })}
       />
       <div
         className={classNames(styles.workspaceMiddleContainer, {
           [styles.maximized]: maximized,
-          [styles.hidden]: openedWindow.hidden,
+          [styles.hidden]: isWindowHidden,
           [styles.isRootWorkspace]: isRootWorkspace,
         })}
       >
         <div
           className={classNames(styles.workspaceInnerContainer, {
             [styles.maximized]: maximized,
-            [styles.hidden]: openedWindow.hidden,
+            [styles.hidden]: isWindowHidden,
             [styles.isRootWorkspace]: isRootWorkspace,
           })}
         >
@@ -166,10 +169,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
                       </HeaderGlobalAction>
                     )}
                     {canHide ? (
-                      <HeaderGlobalAction
-                        aria-label={getCoreTranslation('hide')}
-                        onClick={() => hideWindow(windowName)}
-                      >
+                      <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
                         <ArrowRightIcon />
                       </HeaderGlobalAction>
                     ) : (
@@ -184,10 +184,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
                 ) : (
                   <>
                     {canHide && (
-                      <HeaderGlobalAction
-                        aria-label={getCoreTranslation('hide')}
-                        onClick={() => hideWindow(windowName)}
-                      >
+                      <HeaderGlobalAction aria-label={getCoreTranslation('hide')} onClick={() => hideWindow()}>
                         <DownToBottom />
                       </HeaderGlobalAction>
                     )}

package/src/workspaces2/workspace2.module.scss

@@ -35,11 +35,6 @@ $extraWideWorkspaceWidth: 48.25rem;
     bottom: 0;
     inset-inline-end: var(--actionPanelOffset);
     z-index: 100;
-    will-change: transform;
-
-    &.isRootWorkspace {
-      animation: slideFromRight 0.5s ease-in-out;
-    }
 
     &.maximized {
       position: fixed !important;
@@ -55,20 +50,10 @@ $extraWideWorkspaceWidth: 48.25rem;
     &.hidden {
       width: 0;
     }
-
-    @keyframes slideFromRight {
-      from {
-        transform: translateX(100%);
-      }
-      to {
-        transform: translateX(0);
-      }
-    }
   }
 
   // This container contains the actual workspace content
-  // it has sliding transitions when hidden / restored, and
-  // changes size (width) when maximized
+  // and changes size (width) when maximized
   .workspaceInnerContainer {
     display: flex;
     flex-direction: column;
@@ -93,29 +78,9 @@ $extraWideWorkspaceWidth: 48.25rem;
   .workspaceSpacer {
     width: inherit;
     height: 100%;
-    will-change: width;
-    animation: growToWidth 0.5s ease-in-out;
 
     &.hidden {
-      animation: shrinkWidth 0.5s ease-in-out forwards;
-    }
-
-    @keyframes growToWidth {
-      from {
-        width: 0;
-      }
-      to {
-        width: inherit;
-      }
-    }
-
-    @keyframes shrinkWidth {
-      from {
-        width: inherit;
-      }
-      to {
-        width: 0;
-      }
+      width: 0;
     }
   }
 }
@@ -214,35 +179,11 @@ $extraWideWorkspaceWidth: 48.25rem;
 
   .workspaceInnerContainer {
     width: 100vw !important;
-
-    &.isRootWorkspace {
-      animation: slideFromBottom 0.5s ease-in-out;
-    }
   }
 
   .marginWorkspaceContent {
     margin-bottom: var(--bottom-nav-height);
   }
-
-  @keyframes slideFromBottom {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0%);
-    }
-  }
-
-  @keyframes slideToBottom {
-    from {
-      transform: translateX(0%);
-      width: $narrowWorkspaceWidth;
-    }
-    to {
-      transform: translateX($narrowWorkspaceWidth);
-      width: 0;
-    }
-  }
 }
 
 // Overriding styles for RTL support

package/src/workspaces2/workspace2.ts

@@ -182,9 +182,9 @@ export async function launchWorkspace2<
             openedWorkspaces: [newOpenedWorkspace(workspaceName, workspaceProps)], // root workspace at index 0
             props: windowProps,
             maximized: false,
-            hidden: false,
           },
         ],
+        isMostRecentlyOpenedWindowHidden: false,
       });
       return true;
     } else {
@@ -193,6 +193,7 @@ export async function launchWorkspace2<
   } else if (isWindowAlreadyOpened) {
     const openedWindow = storeState.openedWindows[openedWindowIndex];
     const groupProps = storeState.openedGroup?.props ?? {};
+    const isMostRecentlyOpenedWindowHidden = storeState.isMostRecentlyOpenedWindowHidden;
     const { openedWorkspaces } = openedWindow;
 
     if (arePropsCompatible(openedWindow.props, windowProps)) {
@@ -204,7 +205,7 @@ export async function launchWorkspace2<
       const openedWorkspace = openedWorkspaces.find((w) => w.workspaceName === workspaceName);
       if (openedWorkspace && arePropsCompatible(openedWorkspace.props, workspaceProps)) {
         // restore the window if it is hidden or not the most recently opened one
-        if (openedWindow.hidden || openedWindowIndex !== storeState.openedWindows.length - 1) {
+        if (isMostRecentlyOpenedWindowHidden || openedWindowIndex !== storeState.openedWindows.length - 1) {
           workspace2Store.setState(workspace2StoreActions.restoreWindow(storeState, windowName));
         }
         return true;
@@ -230,9 +231,9 @@ export async function launchWorkspace2<
                 openedWorkspaces: [newOpenedWorkspace(workspaceName, workspaceProps)],
                 props: openedWindow?.props ?? windowProps,
                 maximized: false,
-                hidden: false,
               },
             ],
+            isMostRecentlyOpenedWindowHidden: false,
           });
           return true;
         } else {
@@ -262,9 +263,9 @@ export async function launchWorkspace2<
               openedWorkspaces: [newOpenedWorkspace(workspaceName, workspaceProps)],
               props: windowProps,
               maximized: false,
-              hidden: false,
             },
           ],
+          isMostRecentlyOpenedWindowHidden: false,
         });
         return true;
       } else {
@@ -286,9 +287,9 @@ export async function launchWorkspace2<
           openedWorkspaces: [newOpenedWorkspace(workspaceName, workspaceProps)], // root workspace at index 0
           props: windowProps,
           maximized: false,
-          hidden: false,
         },
       ],
+      isMostRecentlyOpenedWindowHidden: false,
     });
     return true;
   }
@@ -407,25 +408,21 @@ const workspace2StoreActions = {
       openedWindows,
     };
   },
-  hideWindow(state: WorkspaceStoreState2, windowName: string) {
-    const openedWindowIndex = state.openedWindows.findIndex((a) => a.windowName === windowName);
-    const openedWindows = [...state.openedWindows];
-    const currentWindow = { ...openedWindows[openedWindowIndex], hidden: true };
-
-    openedWindows[openedWindowIndex] = currentWindow;
-
+  // hides the most recently opened window (all other opened windows are implicitly hidden)
+  hideWindow(state: WorkspaceStoreState2) {
     return {
       ...state,
-      openedWindows,
+      isMostRecentlyOpenedWindowHidden: true,
     };
   },
   restoreWindow(state: WorkspaceStoreState2, windowName: string) {
     const openedWindowIndex = state.openedWindows.findIndex((a) => a.windowName === windowName);
-    const currentWindow = { ...state.openedWindows[openedWindowIndex], hidden: false };
+    const currentWindow = state.openedWindows[openedWindowIndex];
     const openedWindows = [...state.openedWindows.filter((_, i) => i !== openedWindowIndex), currentWindow];
     return {
       ...state,
       openedWindows,
+      isMostRecentlyOpenedWindowHidden: false,
     };
   },
   closeWorkspace(state, workspaceName: string) {
@@ -440,9 +437,16 @@ const workspace2StoreActions = {
     // close all children of the input workspace as well
     window.openedWorkspaces = window.openedWorkspaces.slice(0, workspaceIndex);
 
+    let hidden = state.isMostRecentlyOpenedWindowHidden;
     if (window.openedWorkspaces.length === 0) {
+      const wasMostRecentWindow = openedWindowIndex === state.openedWindows.length - 1;
       // if no workspaces left, remove the window
       openedWindows.splice(openedWindowIndex, 1);
+      // If we removed the most recent window and there are still windows left,
+      // the new most recent window should be shown
+      if (wasMostRecentWindow && openedWindows.length > 0) {
+        hidden = false;
+      }
     } else {
       // if there are still workspaces left, just update the window
       openedWindows[openedWindowIndex] = window;
@@ -451,6 +455,7 @@ const workspace2StoreActions = {
     return {
       ...state,
       openedWindows,
+      isMostRecentlyOpenedWindowHidden: hidden,
     };
   },
   openChildWorkspace(