@openmrs/esm-styleguide 8.0.1-pre.3545 → 8.0.1-pre.3549

package/package.json

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

package/src/components/_general.scss

@@ -47,6 +47,7 @@ body {
   height: calc(100vh - var(--omrs-navbar-height));
   top: var(--omrs-navbar-height);
   z-index: 9000;
+  will-change: contents;
 }
 
 #omrs-top-nav-app-container {

package/src/workspaces2/active-workspace-window.component.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import Parcel from 'single-spa-react/parcel';
 import { mountRootParcel, type ParcelConfig } from 'single-spa';
 import { InlineLoading } from '@carbon/react';
@@ -7,6 +8,7 @@ import { loadLifeCycles } from '@openmrs/esm-routes';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import { promptForClosingWorkspaces, useWorkspace2Store } from './workspace2';
 import { type Workspace2DefinitionProps } from './workspace2.component';
+import styles from './workspace2.module.scss';
 
 interface WorkspaceWindowProps {
   openedWindow: OpenedWindow;
@@ -110,11 +112,41 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
     [openedWorkspace, closeWorkspace, openedGroup, openedWindow],
   );
 
-  return lifeCycle ? (
-    <Parcel key={openedWorkspace.workspaceName} config={lifeCycle} mountParcel={mountRootParcel} {...props} />
-  ) : (
-    <InlineLoading description={`${getCoreTranslation('loading')} ...`} />
-  );
+  if (!lifeCycle) {
+    const { registeredWorkspacesByName } = workspace2Store.getState();
+    const workspaceDef = registeredWorkspacesByName[openedWorkspace.workspaceName];
+    const windowName = workspaceDef?.window;
+    const { registeredWindowsByName } = workspace2Store.getState();
+    const windowDef = registeredWindowsByName[windowName];
+    const width = windowDef?.width ?? 'narrow';
+
+    return (
+      <div
+        className={classNames(styles.workspaceOuterContainer, {
+          [styles.narrowWorkspace]: width === 'narrow',
+          [styles.widerWorkspace]: width === 'wider',
+          [styles.extraWideWorkspace]: width === 'extra-wide',
+        })}
+      >
+        <div className={styles.workspaceSpacer} />
+        <div
+          className={classNames(styles.workspaceMiddleContainer, {
+            [styles.isRootWorkspace]: isRootWorkspace,
+          })}
+        >
+          <div
+            className={classNames(styles.workspaceInnerContainer, {
+              [styles.isRootWorkspace]: isRootWorkspace,
+            })}
+          >
+            <InlineLoading className={styles.loader} description={`${getCoreTranslation('loading')} ...`} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <Parcel key={openedWorkspace.workspaceName} config={lifeCycle} mountParcel={mountRootParcel} {...props} />;
 };
 
 export default ActiveWorkspaceWindow;

package/src/workspaces2/workspace-windows-and-menu.module.scss

@@ -2,8 +2,10 @@
   position: relative;
   display: flex;
   height: 100%;
+  contain: content;
 
   &.overlay {
+    contain: none;
     position: absolute;
     right: 0;
     top: 0;

package/src/workspaces2/workspace2.module.scss

@@ -35,9 +35,10 @@ $extraWideWorkspaceWidth: 48.25rem;
     bottom: 0;
     inset-inline-end: var(--actionPanelOffset);
     z-index: 100;
+    will-change: transform;
 
     &.isRootWorkspace {
-      animation: growToWidth 0.5s ease-in-out;
+      animation: slideFromRight 0.5s ease-in-out;
     }
 
     transition: width 0.5s ease-in-out;
@@ -49,12 +50,12 @@ $extraWideWorkspaceWidth: 48.25rem;
       width: 0;
     }
 
-    @keyframes growToWidth {
+    @keyframes slideFromRight {
       from {
-        width: 0;
+        transform: translateX(100%);
       }
       to {
-        width: inherit;
+        transform: translateX(0);
       }
     }
   }
@@ -69,6 +70,7 @@ $extraWideWorkspaceWidth: 48.25rem;
     width: var(--workspaceWidth);
     border-inline-start: 1px solid $text-03;
     background-color: #fff;
+    will-change: width;
 
     transition: width 0.5s ease-in-out;
 
@@ -85,6 +87,7 @@ $extraWideWorkspaceWidth: 48.25rem;
   .workspaceSpacer {
     width: inherit;
     height: 100%;
+    will-change: width;
     animation: growToWidth 0.5s ease-in-out;
 
     &.hidden {
@@ -113,9 +116,9 @@ $extraWideWorkspaceWidth: 48.25rem;
 
 .loader {
   display: flex;
-  background-color: $openmrs-background-grey;
   justify-content: center;
-  min-height: layout.$spacing-09;
+  align-items: center;
+  min-height: 50%;
 }
 
 .hiddenExtraWorkspace {