@openmrs/esm-styleguide 8.0.1-pre.3537 → 8.0.1-pre.3547

package/dist/pictograms/pictogram-registration.d.ts

@@ -0,0 +1 @@
+export declare function setupPictograms(): void;

package/dist/pictograms/pictograms.d.ts

@@ -0,0 +1,64 @@
+/** @category Pictograms */
+import React from 'react';
+import { type Argument } from 'classnames';
+export declare const pictogramIds: readonly ["omrs-pict-appointments", "omrs-pict-assessment-1", "omrs-pict-assessment-2", "omrs-pict-blood-bank", "omrs-pict-cardiology", "omrs-pict-ct-scan", "omrs-pict-dentistry", "omrs-pict-emergency-department", "omrs-pict-facility", "omrs-pict-geriatrics", "omrs-pict-gynaecology", "omrs-pict-in-patient", "omrs-pict-laboratory", "omrs-pict-labs-2", "omrs-pict-obstetrics", "omrs-pict-patient-search", "omrs-pict-patients", "omrs-pict-payments-desk", "omrs-pict-pharmacy", "omrs-pict-pharmacy-2", "omrs-pict-registration", "omrs-pict-service-queues", "omrs-pict-stock-management", "omrs-pict-transfer", "omrs-pict-triage", "omrs-pict-x-ray"];
+export type PictogramId = (typeof pictogramIds)[number];
+export type PictogramProps = {
+    className?: Argument;
+    size?: number;
+};
+export declare const AppointmentsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+/**
+ * @deprecated use AppointmentsPictogram instead
+ */
+export declare const AppointmentsAltPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Assessment1Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Assessment2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const BloodBankPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const CardiologyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const CtScanPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const DentistryPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const EmergencyDepartmentPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const FacilityPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const GeriatricsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const GynaecologyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const InPatientPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const LaboratoryPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Labs2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const ObstetricsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientSearchPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PaymentsDeskPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PharmacyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Pharmacy2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const RegistrationPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const ServiceQueuesPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const StockManagementPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const TransferPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const TriagePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const XrayPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const HomePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientListsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+/**
+ * This is a utility component that takes an `pictogram` and render it if the sprite for the pictogram
+ * is available. The goal is to make it easier to conditionally render configuration-specified pictograms.
+ *
+ * @example
+ * ```tsx
+ *   <MaybePictogram pictogram='omrs-icon-baby' className={styles.myPictogramStyles} />
+ * ```
+ */
+export declare const MaybePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    pictogram: string;
+    fallback?: React.ReactNode;
+} & PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export type SvgPictogramProps = {
+    /** the id of the pictogram  */
+    pictogram: PictogramId;
+    /** properties when using the pictogram  */
+    pictogramProps: PictogramProps;
+};
+/**
+ * This is a utility type for custom pictograms. Please maintain alphabetical order when adding new pictograms for readability.
+ */
+export declare const Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<SvgPictogramProps & React.RefAttributes<SVGSVGElement>>>;

package/dist/svg-utils.d.ts

@@ -0,0 +1 @@
+export declare function addSvg(htmlId: string, svgString: string): void;

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Array of valid values for Carbon tag's "type" attribute.
+ * Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview
+ */
+export declare const carbonTagColors: readonly ["red", "magenta", "purple", "blue", "teal", "cyan", "gray", "green", "warm-gray", "cool-gray", "high-contrast", "outline"];
+export type CarbonTagColor = (typeof carbonTagColors)[number];

package/dist/workspaces2/workspace2-close-prompt.modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface WorkspaceUnsavedChangesModal {
+    onConfirm: () => void;
+    onCancel: () => void;
+    affectedWorkspaceTitles: string[];
+}
+/**
+ * This modal is used for prompting user to confirm closing currently opened workspace.
+ */
+declare const Workspace2ClosePromptModal: React.FC<WorkspaceUnsavedChangesModal>;
+export default Workspace2ClosePromptModal;

package/package.json

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

package/src/components/_general.scss

@@ -47,6 +47,8 @@ body {
   height: calc(100vh - var(--omrs-navbar-height));
   top: var(--omrs-navbar-height);
   z-index: 9000;
+  contain: layout style paint;
+  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/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 {