@openmrs/esm-styleguide 10.0.1-pre.5702 → 10.0.1-pre.5707

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 115 files, copied 169 files with swc (258.34ms)
+[0] Successfully compiled: 117 files, copied 170 files with swc (252.19ms)
 [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/config-schema.js

@@ -4,7 +4,7 @@ const diagnosisTagConfigSchema = {
     primaryColor: {
         _type: Type.String,
         _description: 'The color for displaying primary diagnoses tags',
-        _default: 'red',
+        _default: 'blue',
         _validators: [
             validators.oneOf(carbonTagColors)
         ]
@@ -12,7 +12,7 @@ const diagnosisTagConfigSchema = {
     secondaryColor: {
         _type: Type.String,
         _description: 'The color for displaying secondary diagnoses tags',
-        _default: 'blue',
+        _default: 'gray',
         _validators: [
             validators.oneOf(carbonTagColors)
         ]

package/dist/diagnosis-tags/diagnosis-tags.component.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import { type Diagnosis } from '@openmrs/esm-emr-api';
-interface DiagnosisTagsProps {
-    diagnoses: Array<Diagnosis>;
+import type { Diagnosis } from '@openmrs/esm-emr-api';
+export interface DiagnosisTagsProps {
+    diagnoses: Array<Pick<Diagnosis, 'uuid' | 'display' | 'rank' | 'certainty'>>;
+    /**
+     * Mark provisional diagnoses with a leading "?". Confirmed diagnoses, and any with missing or
+     * unknown certainty, show just the name. Off by default because diagnoses saved before
+     * certainty was captured are stored as provisional.
+     */
+    showCertainty?: boolean;
 }
-/**
- * This component takes a list of diagnoses and displays them as
- * Carbon tags, with colors configured base on whether the diagnoses are primary
- * or secondary.
- */
+/** Displays diagnoses with configured rank colours, optionally marking provisional ones. */
 export declare const DiagnosisTags: React.FC<DiagnosisTagsProps>;
-export {};
 //# sourceMappingURL=diagnosis-tags.component.d.ts.map

package/dist/diagnosis-tags/diagnosis-tags.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diagnosis-tags.component.d.ts","sourceRoot":"","sources":["../../src/diagnosis-tags/diagnosis-tags.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAC"}
+{"version":3,"file":"diagnosis-tags.component.d.ts","sourceRoot":"","sources":["../../src/diagnosis-tags/diagnosis-tags.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAKjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtD,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC;IAC7E;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,4FAA4F;AAC5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgBtD,CAAC"}

package/dist/diagnosis-tags/diagnosis-tags.component.js

@@ -1,28 +1,107 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { Tag } from "@carbon/react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { Button, Tooltip, TooltipTrigger } from "react-aria-components";
+import classNames from "classnames";
+import { getCoreTranslation } from "@openmrs/esm-translations";
 import { useConfig } from "@openmrs/esm-react-utils";
 import styles from "./diagnosis-tags.module.scss";
-/**
- * This component takes a list of diagnoses and displays them as
- * Carbon tags, with colors configured base on whether the diagnoses are primary
- * or secondary.
- */ export const DiagnosisTags = ({ diagnoses })=>{
+/** Displays diagnoses with configured rank colours, optionally marking provisional ones. */ export const DiagnosisTags = ({ diagnoses, showCertainty = false })=>{
     const { diagnosisTags } = useConfig({
         externalModuleName: '@openmrs/esm-styleguide'
     });
     return /*#__PURE__*/ _jsx("div", {
         className: styles.container,
         children: diagnoses.map((diagnosis)=>{
-            const { rank, uuid, display } = diagnosis;
-            // technically rank can be any integer, but we only use 1 for primary
-            // and 2 for secondary
-            const key = rank === 1 ? 'primaryColor' : 'secondaryColor';
-            const color = diagnosisTags[key];
-            return /*#__PURE__*/ _jsx(Tag, {
-                type: color,
-                children: display
-            }, uuid);
+            const isProvisional = showCertainty && diagnosis.certainty === 'PROVISIONAL';
+            const color = diagnosis.rank === 1 ? diagnosisTags?.primaryColor ?? 'blue' : diagnosisTags?.secondaryColor ?? 'gray';
+            return /*#__PURE__*/ _jsx(DiagnosisPill, {
+                color: color,
+                isProvisional: isProvisional,
+                name: diagnosis.display
+            }, diagnosis.uuid);
         })
     });
 };
+function DiagnosisPill({ color, isProvisional, name }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const isInteractive = isTruncated || isFocused;
+    const labelRef = useRef(null);
+    useLayoutEffect(()=>{
+        const label = labelRef.current;
+        if (!label) {
+            return;
+        }
+        const measure = ()=>{
+            const truncated = label.scrollWidth > label.clientWidth;
+            setIsTruncated(truncated);
+            if (!truncated) {
+                setIsOpen(false);
+            }
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(label);
+        return ()=>observer.disconnect();
+    }, [
+        name,
+        isProvisional,
+        isInteractive
+    ]);
+    const className = classNames('cds--tag', 'cds--tag--md', 'cds--layout--size-md', `cds--tag--${color}`, styles.diagnosisTag);
+    const content = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isProvisional && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": "true",
+                        className: styles.provisionalMark,
+                        children: "?"
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "cds--visually-hidden",
+                        children: [
+                            getCoreTranslation('provisional', 'Provisional'),
+                            " "
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                ref: labelRef,
+                className: "cds--tag__label",
+                children: name
+            })
+        ]
+    });
+    if (!isInteractive) {
+        return /*#__PURE__*/ _jsx("span", {
+            className: className,
+            "data-testid": "diagnosis-tag",
+            children: content
+        });
+    }
+    return /*#__PURE__*/ _jsxs(TooltipTrigger, {
+        delay: 0,
+        closeDelay: 150,
+        isOpen: isOpen,
+        onOpenChange: setIsOpen,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                className: className,
+                "data-testid": "diagnosis-tag",
+                onFocusChange: setIsFocused,
+                onPress: ()=>setIsOpen(true),
+                children: content
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                className: styles.tagTooltip,
+                placement: "bottom",
+                offset: 4,
+                containerPadding: 8,
+                children: name
+            })
+        ]
+    });
+}

package/dist/diagnosis-tags/diagnosis-tags.module.scss

@@ -1,8 +1,32 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
   display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
   align-items: center;
   gap: layout.$spacing-02;
 }
+
+.diagnosisTag:focus-visible {
+  outline: 2px solid colors.$blue-60;
+  outline-offset: 1px;
+}
+
+.tagTooltip {
+  @include type.type-style('body-compact-01');
+  max-width: min(18rem, calc(100vw - 1rem));
+  overflow-wrap: anywhere;
+  padding: layout.$spacing-01 layout.$spacing-03;
+  border-radius: 2px;
+  background-color: colors.$gray-80;
+  color: colors.$white-0;
+}
+
+// The name truncates; the "?" marking a provisional diagnosis must stay fully visible inside the tag
+.provisionalMark {
+  margin-inline-end: layout.$spacing-01;
+  font-weight: 600;
+  flex-shrink: 0;
+}

package/dist/diagnosis-tags/diagnosis-tags.stories.js

@@ -71,3 +71,27 @@ export const MultipleDiagnoses = {
         ]
     }
 };
+export const WithCertainty = {
+    args: {
+        showCertainty: true,
+        diagnoses: [
+            {
+                uuid: '1',
+                display: 'Extrinsic Asthma with Asthma Attack',
+                rank: 1,
+                certainty: 'CONFIRMED'
+            },
+            {
+                uuid: '2',
+                display: 'Malaria due to Plasmodium falciparum',
+                rank: 2,
+                certainty: 'PROVISIONAL'
+            },
+            {
+                uuid: '3',
+                display: 'Anemia',
+                rank: 2
+            }
+        ]
+    }
+};

package/dist/public.d.ts

@@ -23,5 +23,5 @@ export * from './pictograms/pictograms';
 export * from './responsive-wrapper';
 export { showSnackbar, type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars';
 export { showToast, type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts';
-export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2, type Workspace2Definition, type Workspace2DefinitionProps, } from './workspaces2';
+export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2, type Workspace2Definition, type Workspace2DefinitionProps, ExportedWorkspace, type ExportedWorkspaceProps, type ExportedWorkspaceWindowInfo, } from './workspaces2';
 //# sourceMappingURL=public.d.ts.map

package/dist/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../src/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,KAAK,gCAAgC,EACrC,KAAK,0BAA0B,GAChC,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAClH,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1G,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACvG,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,4BAA4B,EAC5B,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,GAC/B,MAAM,eAAe,CAAC"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../src/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,KAAK,gCAAgC,EACrC,KAAK,0BAA0B,GAChC,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAClH,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1G,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACvG,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,4BAA4B,EAC5B,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,GACjC,MAAM,eAAe,CAAC"}

package/dist/public.js

@@ -20,4 +20,4 @@ export * from "./pictograms/pictograms.js";
 export * from "./responsive-wrapper/index.js";
 export { showSnackbar } from "./snackbars/index.js";
 export { showToast } from "./toasts/index.js";
-export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2 } from "./workspaces2/index.js";
+export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2, ExportedWorkspace } from "./workspaces2/index.js";

package/dist/workspaces2/active-workspace-window.component.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
 import { type OpenedWindow } from '@openmrs/esm-extensions';
+import { type WorkspaceWindowActions } from './workspace-window-actions';
 interface WorkspaceWindowProps {
     openedWindow: OpenedWindow;
+    groupProps: Record<string, any> | null;
+    actions: WorkspaceWindowActions;
+    /**
+     * Whether to render the workspace window "chrome" (containers, title bar, maximize / hide / close).
+     * Only the global workspace window system renders it; an `<ExportedWorkspace>` renders the bare
+     * workspace content.
+     */
+    renderChrome: boolean;
     showActionMenu: boolean;
 }
 /**
- * Renders an opened workspace window.
+ * Renders an opened workspace window. `actions` determines which store the window's workspaces
+ * navigate within: the global workspace window system, or an `<ExportedWorkspace>`'s local store.
  */
 declare const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps>;
 export default ActiveWorkspaceWindow;

package/dist/workspaces2/active-workspace-window.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,YAAY,EAA8D,MAAM,yBAAyB,CAAC;AAOxH,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4CzD,CAAC;AA4IF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAM5E,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGzE,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,sBAAsB,CAAC;IAChC;;;;OAIG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;CACzB;AAKD;;;GAGG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4DzD,CAAC;AAoRF,eAAe,qBAAqB,CAAC"}

package/dist/workspaces2/active-workspace-window.component.js

@@ -2,15 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import Parcel from "single-spa-react/parcel";
-import { InlineLoading } from "@carbon/react";
+import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName, InlineLoading } from "@carbon/react";
+import { DownToBottom, Maximize, Minimize } from "@carbon/react/icons";
 import { createParcelMounter, workspace2Store } from "@openmrs/esm-extensions";
+import { isDesktop, useLayoutType, useStore } from "@openmrs/esm-react-utils";
 import { loadLifeCycles } from "@openmrs/esm-routes";
 import { getCoreTranslation } from "@openmrs/esm-translations";
-import { promptForClosingWorkspaces, useWorkspace2Store } from "./workspace2.js";
+import { ArrowRightIcon, CloseIcon } from "../icons/index.js";
+import { closeWorkspaceGroup2, useWorkspace2Store } from "./workspace2.js";
 import styles from "./workspace2.module.scss";
+// module-level so the store subscription's snapshot getter stays stable across renders
+const selectRegisteredWorkspacesByName = (state)=>state.registeredWorkspacesByName;
 /**
- * Renders an opened workspace window.
- */ const ActiveWorkspaceWindow = ({ openedWindow, showActionMenu })=>{
+ * Renders an opened workspace window. `actions` determines which store the window's workspaces
+ * navigate within: the global workspace window system, or an `<ExportedWorkspace>`'s local store.
+ */ const ActiveWorkspaceWindow = ({ openedWindow, groupProps, actions, renderChrome, showActionMenu })=>{
     const { openedWorkspaces } = openedWindow;
     // Keyed by opened workspace uuid rather than stack index. The lifecycles load
     // asynchronously, so when the stack changes (a workspace at some position is
@@ -20,30 +26,39 @@ import styles from "./workspace2.module.scss";
     // mounts whatever config it first receives, so the wrong component would then
     // render with the new workspace's props.
     const [lifeCyclesByUuid, setLifeCyclesByUuid] = useState({});
-    const { registeredWorkspacesByName } = workspace2Store.getState();
+    // Reactive so the effect retries when a workspace registers after mount.
+    const registeredWorkspacesByName = useStore(workspace2Store, selectRegisteredWorkspacesByName);
     useEffect(()=>{
         let cancelled = false;
         Promise.all(openedWorkspaces.map(async (openedWorkspace)=>{
-            const { moduleName, component } = registeredWorkspacesByName[openedWorkspace.workspaceName];
+            const workspaceDef = registeredWorkspacesByName[openedWorkspace.workspaceName];
+            if (!workspaceDef) {
+                return null;
+            }
+            const { moduleName, component } = workspaceDef;
             return [
                 openedWorkspace.uuid,
                 await loadLifeCycles(moduleName, component)
             ];
         })).then((entries)=>{
             if (!cancelled) {
-                setLifeCyclesByUuid(Object.fromEntries(entries));
+                setLifeCyclesByUuid(Object.fromEntries(entries.filter((entry)=>entry != null)));
             }
         });
         return ()=>{
             cancelled = true;
         };
     }, [
-        openedWorkspaces
+        openedWorkspaces,
+        registeredWorkspacesByName
     ]);
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: openedWorkspaces.map((openedWorkspace, i)=>/*#__PURE__*/ _jsx(ActiveWorkspace, {
                 openedWorkspace: openedWorkspace,
                 openedWindow: openedWindow,
+                groupProps: groupProps,
+                actions: actions,
+                renderChrome: renderChrome,
                 lifeCycle: lifeCyclesByUuid[openedWorkspace.uuid],
                 isRootWorkspace: i === 0,
                 isLeafWorkspace: i === openedWorkspaces.length - 1,
@@ -52,31 +67,21 @@ import styles from "./workspace2.module.scss";
     });
 };
 const mountParcel = createParcelMounter();
-const ActiveWorkspace = ({ lifeCycle, openedWorkspace, openedWindow, isRootWorkspace, isLeafWorkspace, showActionMenu })=>{
-    const { openedGroup, closeWorkspace, openChildWorkspace } = useWorkspace2Store();
+const ActiveWorkspace = ({ lifeCycle, openedWorkspace, openedWindow, groupProps, actions, renderChrome, isRootWorkspace, isLeafWorkspace, showActionMenu })=>{
     const props = useMemo(()=>openedWorkspace && {
             closeWorkspace: async (options = {})=>{
                 const { closeWindow = false, discardUnsavedChanges = false } = options;
                 if (closeWindow) {
-                    const okToCloseWorkspaces = discardUnsavedChanges || await promptForClosingWorkspaces({
-                        reason: 'CLOSE_WINDOW',
-                        explicit: true,
-                        windowName: openedWindow.windowName
-                    });
+                    const okToCloseWorkspaces = discardUnsavedChanges || await actions.promptForClosingWorkspaces();
                     if (okToCloseWorkspaces) {
-                        closeWorkspace(openedWindow.openedWorkspaces[0].workspaceName);
+                        actions.closeWorkspace(openedWindow.openedWorkspaces[0].workspaceName);
                         return true;
                     }
                     return false;
                 } else {
-                    const okToCloseWorkspaces = discardUnsavedChanges || await promptForClosingWorkspaces({
-                        reason: 'CLOSE_WORKSPACE',
-                        explicit: true,
-                        windowName: openedWindow.windowName,
-                        workspaceName: openedWorkspace.workspaceName
-                    });
+                    const okToCloseWorkspaces = discardUnsavedChanges || await actions.promptForClosingWorkspaces(openedWorkspace.workspaceName);
                     if (okToCloseWorkspaces) {
-                        closeWorkspace(openedWorkspace.workspaceName);
+                        actions.closeWorkspace(openedWorkspace.workspaceName);
                         return true;
                     }
                     return false;
@@ -95,23 +100,20 @@ const ActiveWorkspace = ({ lifeCycle, openedWorkspace, openedWindow, isRootWorks
                     // Prompt if any of them have unsaved changes.
                     const workspacesAboveParent = openedWorkspaces.slice(parentIndex + 1);
                     if (workspacesAboveParent.some((w)=>w.hasUnsavedChanges)) {
-                        const okToClose = await promptForClosingWorkspaces({
-                            reason: 'CLOSE_WORKSPACE',
-                            explicit: true,
-                            windowName: openedWindow.windowName,
-                            workspaceName: openedWorkspaces[parentIndex + 1].workspaceName
-                        });
+                        const okToClose = await actions.promptForClosingWorkspaces(openedWorkspaces[parentIndex + 1].workspaceName);
                         if (!okToClose) {
                             return;
                         }
                     }
                 }
-                openChildWorkspace(parentWorkspaceName, childWorkspaceName, childWorkspaceProps || {});
+                actions.openChildWorkspace(parentWorkspaceName, childWorkspaceName, childWorkspaceProps || {});
             },
+            setWorkspaceTitle: (title)=>actions.setWorkspaceTitle(openedWorkspace.uuid, title),
+            setHasUnsavedChanges: (hasUnsavedChanges)=>actions.setHasUnsavedChanges(openedWorkspace.uuid, hasUnsavedChanges),
             workspaceName: openedWorkspace.workspaceName,
             workspaceProps: openedWorkspace.props,
             windowProps: openedWindow.props,
-            groupProps: openedGroup && openedGroup.props ? openedGroup.props : null,
+            groupProps,
             workspaceMeta: workspace2Store.getState().registeredWorkspacesByName[openedWorkspace.workspaceName]?.meta ?? {},
             isRootWorkspace,
             isLeafWorkspace,
@@ -119,51 +121,160 @@ const ActiveWorkspace = ({ lifeCycle, openedWorkspace, openedWindow, isRootWorks
             showActionMenu
         }, [
         openedWorkspace,
-        closeWorkspace,
-        openedGroup,
-        openedWindow
+        openedWindow,
+        groupProps,
+        actions,
+        isRootWorkspace,
+        isLeafWorkspace,
+        showActionMenu
+    ]);
+    // In bare mode (<ExportedWorkspace>) there is no chrome to stack workspaces, so every non-leaf
+    // workspace is hidden (not unmounted, so it keeps its state) and the leaf covers them. In chrome
+    // mode the absolute-positioned WorkspaceChrome containers handle stacking, so this class is not
+    // applied there.
+    const hideBehindLeaf = !renderChrome && !isLeafWorkspace;
+    const content = useMemo(()=>lifeCycle ? /*#__PURE__*/ _jsx(Parcel, {
+            config: lifeCycle,
+            mountParcel: mountParcel,
+            wrapWith: "div",
+            wrapClassName: classNames(styles.workspaceContent, {
+                [styles.hiddenExtraWorkspace]: hideBehindLeaf
+            }),
+            ...props
+        }, openedWorkspace.workspaceName) : null, [
+        lifeCycle,
+        openedWorkspace.workspaceName,
+        props,
+        hideBehindLeaf
     ]);
-    if (!lifeCycle) {
-        const { registeredWorkspacesByName } = workspace2Store.getState();
-        const workspaceDef = registeredWorkspacesByName[openedWorkspace.workspaceName];
-        const windowName = workspaceDef && workspaceDef.window ? workspaceDef.window : undefined;
-        const { registeredWindowsByName } = workspace2Store.getState();
-        const windowDef = windowName ? registeredWindowsByName[windowName] : undefined;
-        const width = windowDef && windowDef.width ? windowDef.width : 'narrow';
-        const isActionMenuOpened = Object.values(registeredWindowsByName).some((window)=>window.group === openedGroup?.groupName && window.icon !== undefined);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classNames(styles.workspaceOuterContainer, {
-                [styles.narrowWorkspace]: width === 'narrow',
-                [styles.widerWorkspace]: width === 'wider',
-                [styles.extraWideWorkspace]: width === 'extra-wide',
-                [styles.isActionMenuOpened]: isActionMenuOpened
+    if (!renderChrome) {
+        return content ?? /*#__PURE__*/ _jsx(InlineLoading, {
+            className: classNames(styles.loader, {
+                [styles.hiddenExtraWorkspace]: hideBehindLeaf
+            }),
+            description: `${getCoreTranslation('loading')}`
+        });
+    }
+    return /*#__PURE__*/ _jsx(WorkspaceChrome, {
+        openedWorkspace: openedWorkspace,
+        openedWindow: openedWindow,
+        isRootWorkspace: isRootWorkspace,
+        showActionMenu: showActionMenu,
+        closeWindow: ()=>props.closeWorkspace({
+                closeWindow: true
+            }),
+        children: content
+    });
+};
+/**
+ * Renders the containers, title bar and window buttons around a workspace in the global workspace
+ * window system.
+ */ const WorkspaceChrome = ({ openedWorkspace, openedWindow, isRootWorkspace, showActionMenu, closeWindow, children })=>{
+    const layout = useLayoutType();
+    const { openedGroup, openedWindows, registeredWindowsByName, registeredGroupsByName, isMostRecentlyOpenedWindowHidden, setWindowMaximized, hideWindow } = useWorkspace2Store();
+    const windowName = openedWindow.windowName;
+    const { maximized } = openedWindow;
+    const title = openedWorkspace.title ?? '';
+    const windowDef = registeredWindowsByName[windowName];
+    const width = windowDef?.width ?? 'narrow';
+    const icon = windowDef?.icon;
+    const canMaximize = windowDef?.canMaximize;
+    const canCloseGroup = openedGroup ? registeredGroupsByName[openedGroup.groupName]?.persistence === 'closable' : false;
+    const canHide = !!icon && !canCloseGroup;
+    const openedWindowIndex = openedWindows.findIndex((w)=>w.windowName === windowName);
+    const isWindowHidden = openedWindowIndex < openedWindows.length - 1 || isMostRecentlyOpenedWindowHidden;
+    const isActionMenuOpened = Object.values(registeredWindowsByName).some((window)=>window.group === openedGroup?.groupName && window.icon !== undefined);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames(styles.workspaceOuterContainer, {
+            [styles.narrowWorkspace]: width === 'narrow',
+            [styles.widerWorkspace]: width === 'wider',
+            [styles.extraWideWorkspace]: width === 'extra-wide',
+            [styles.isActionMenuOpened]: isActionMenuOpened
+        }),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles.workspaceSpacer, {
+                    [styles.hidden]: isWindowHidden
+                })
             }),
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: styles.workspaceSpacer
+            /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles.workspaceMiddleContainer, {
+                    [styles.maximized]: maximized,
+                    [styles.hidden]: isWindowHidden,
+                    [styles.isRootWorkspace]: isRootWorkspace,
+                    [styles.showActionMenu]: showActionMenu
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classNames(styles.workspaceMiddleContainer, {
-                        [styles.isRootWorkspace]: isRootWorkspace,
-                        [styles.showActionMenu]: showActionMenu
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: classNames(styles.workspaceInnerContainer, {
+                        [styles.maximized]: maximized,
+                        [styles.hidden]: isWindowHidden,
+                        [styles.isRootWorkspace]: isRootWorkspace
                     }),
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: classNames(styles.workspaceInnerContainer, {
-                            [styles.isRootWorkspace]: isRootWorkspace
-                        }),
-                        children: /*#__PURE__*/ _jsx(InlineLoading, {
-                            className: styles.loader,
-                            description: `${getCoreTranslation('loading')} ...`
-                        })
+                    children: children ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Header, {
+                                "aria-label": getCoreTranslation('workspaceHeader'),
+                                className: styles.header,
+                                children: [
+                                    /*#__PURE__*/ _jsx(HeaderName, {
+                                        prefix: "",
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: styles.overlayHeaderSpacer
+                                    }),
+                                    /*#__PURE__*/ _jsx(HeaderGlobalBar, {
+                                        className: styles.headerButtons,
+                                        children: isDesktop(layout) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                (canMaximize || maximized) && /*#__PURE__*/ _jsx(HeaderGlobalAction, {
+                                                    "aria-label": maximized ? getCoreTranslation('minimize') : getCoreTranslation('maximize'),
+                                                    onClick: ()=>setWindowMaximized(windowName, !maximized),
+                                                    children: maximized ? /*#__PURE__*/ _jsx(Minimize, {}) : /*#__PURE__*/ _jsx(Maximize, {})
+                                                }),
+                                                canHide && /*#__PURE__*/ _jsx(HeaderGlobalAction, {
+                                                    "aria-label": getCoreTranslation('hide'),
+                                                    onClick: ()=>hideWindow(),
+                                                    children: /*#__PURE__*/ _jsx(ArrowRightIcon, {})
+                                                }),
+                                                !canCloseGroup && /*#__PURE__*/ _jsx(HeaderGlobalAction, {
+                                                    "aria-label": getCoreTranslation('close'),
+                                                    onClick: closeWindow,
+                                                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                                                })
+                                            ]
+                                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                canHide && /*#__PURE__*/ _jsx(HeaderGlobalAction, {
+                                                    "aria-label": getCoreTranslation('hide'),
+                                                    onClick: ()=>hideWindow(),
+                                                    children: /*#__PURE__*/ _jsx(DownToBottom, {})
+                                                }),
+                                                /*#__PURE__*/ _jsx(HeaderGlobalAction, {
+                                                    "aria-label": getCoreTranslation('close'),
+                                                    onClick: ()=>{
+                                                        if (canCloseGroup) {
+                                                            void closeWorkspaceGroup2();
+                                                        } else {
+                                                            closeWindow();
+                                                        }
+                                                    },
+                                                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            children
+                        ]
+                    }) : /*#__PURE__*/ _jsx(InlineLoading, {
+                        className: styles.loader,
+                        description: `${getCoreTranslation('loading')} ...`
                     })
                 })
-            ]
-        });
-    }
-    return /*#__PURE__*/ _jsx(Parcel, {
-        config: lifeCycle,
-        mountParcel: mountParcel,
-        ...props
-    }, openedWorkspace.workspaceName);
+            })
+        ]
+    });
 };
 export default ActiveWorkspaceWindow;