@linagora/twake-mui 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [10.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.3.0...@linagora/twake-mui@10.4.0) (2026-10-07)
+
+
+### Features
+
+* **twake-mui:** Add the TwakeSpace overlay for embedded apps ([97a8b50](https://github.com/linagora/twake-ui/commit/97a8b506c0c485fffaa71805e4c32c77bd6ff30d))
+
 # @linagora/twake-mui [10.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.2.0...@linagora/twake-mui@10.3.0) (2026-10-06)
 
 

package/README.md

@@ -54,6 +54,61 @@ function MyComponent() {
 }
 ```
 
+### Apps embedded in TwakeSpace
+
+TwakeSpace shows an app of a space's tab in a frame named `twake-embed-<app>`.
+Next to it, it puts an overlay over its whole page: a second frame, named
+`twake-embed-<app>:overlay`, on `<app origin>/embed/overlay.html`. The app
+renders its dialogs, drawers and docked windows into the overlay, so they sit
+on TwakeSpace's page instead of inside the app's frame, with no change to its
+`Dialog` or `Drawer` calls.
+
+The contract:
+
+- The app serves `/embed/overlay.html`: an empty page, no script, with
+  `html, body { background: transparent; color-scheme: normal }`.
+- The app reports the region it draws in with `overlayRegionMessage(region)`,
+  posted to TwakeSpace: `'full'` while something blocks the page (a dialog, a
+  menu), else the boxes it draws. TwakeSpace shows that region only, and the
+  rest of its page keeps its clicks.
+
+In the app:
+
+```tsx
+import {
+  connectSpaceOverlay,
+  overlayRegionMessage,
+  overlayThemeOptions,
+  OverlayPortal,
+  SpaceOverlayProvider,
+  TwakeMuiThemeProvider
+} from '@linagora/twake-mui'
+
+// Null outside TwakeSpace: everything renders in place
+const overlay = connectSpaceOverlay(region => {
+  window.parent.postMessage(overlayRegionMessage(region), SPACE_ORIGIN)
+})
+const themeOptions = overlay ? overlayThemeOptions(overlay) : {}
+
+function App() {
+  return (
+    <TwakeMuiThemeProvider themeOptions={themeOptions}>
+      <SpaceOverlayProvider overlay={overlay}>
+        {/* Dialogs and drawers go to the overlay through the theme */}
+        <OverlayPortal>{/* a docked window, such as a composer */}</OverlayPortal>
+      </SpaceOverlayProvider>
+    </TwakeMuiThemeProvider>
+  )
+}
+```
+
+What renders on the overlay lives in another document: use `ownerDocument`
+rather than `document`, and `nodeType` rather than `instanceof`.
+
+In TwakeSpace, `OverlayFrame` is the overlay: it takes the region from
+`parseOverlayRegionMessage`, checked to come from the app's frame, through
+`overlayClipPath`.
+
 ## Features
 
 - **Palette System**: Techno-independent color definitions

package/dist/components/SpaceOverlay/OverlayFrame.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+export interface OverlayFrameProps {
+    /** `<name of the app's frame>:overlay`, the name the app looks for */
+    name: string;
+    /** `/embed/overlay.html` on the app's origin */
+    src: string;
+    title: string;
+    /** The same as the app's frame */
+    sandbox: string;
+    allow: string;
+    /** From `overlayClipPath` */
+    clipPath: string;
+}
+export declare const OverlayFrame: FC<OverlayFrameProps>;

package/dist/components/SpaceOverlay/OverlayFrame.js

@@ -0,0 +1,24 @@
+import { Box } from '@mui/material';
+import React, { useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+export const OverlayFrame = ({ name, src, title, sandbox, allow, clipPath }) => {
+    const ref = useRef(null);
+    const empty = clipPath.startsWith('inset(');
+    // Set by hand: it changes with every move of a menu, a class per value
+    // would pile up.
+    useLayoutEffect(() => {
+        if (ref.current)
+            ref.current.style.clipPath = clipPath;
+    }, [clipPath, ref]);
+    return createPortal(React.createElement(Box, { component: "iframe", ref: ref, name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, sx: {
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            border: 0,
+            background: 'transparent',
+            // A frame whose colour scheme differs from the page is painted opaque
+            colorScheme: 'normal',
+            zIndex: theme => theme.zIndex.modal - 1
+        } }), document.body);
+};

package/dist/components/SpaceOverlay/SpaceOverlay.d.ts

@@ -0,0 +1,28 @@
+import type { ThemeOptions } from '@mui/material/styles';
+import { type FC, type ReactNode } from 'react';
+import type { SpaceOverlay } from './spaceOverlay';
+export interface SpaceOverlayProviderProps {
+    /** From `connectSpaceOverlay`, null outside TwakeSpace */
+    overlay: SpaceOverlay | null;
+    children?: ReactNode;
+}
+export declare const SpaceOverlayProvider: FC<SpaceOverlayProviderProps>;
+/**
+ * The window of the overlay of TwakeSpace once connected, else null: what
+ * renders there is laid out on its size, not on this frame's
+ */
+export declare function useOverlayWindow(): Window | null;
+/**
+ * Renders its children on the overlay of TwakeSpace when the app is framed
+ * there, in place otherwise. Menus and tooltips opened inside follow: MUI
+ * portals them into the document of their anchor.
+ */
+export declare const OverlayPortal: FC<{
+    children?: ReactNode;
+}>;
+/**
+ * Theme options sending every dialog and temporary drawer to the overlay, so
+ * they are centred on the window of TwakeSpace and dim all of it. Built once:
+ * the theme provider rebuilds the theme when they change.
+ */
+export declare function overlayThemeOptions(overlay: SpaceOverlay): ThemeOptions;

package/dist/components/SpaceOverlay/SpaceOverlay.js

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+const SpaceOverlayContext = createContext(null);
+export const SpaceOverlayProvider = ({ overlay, children }) => (React.createElement(SpaceOverlayContext.Provider, { value: overlay }, children));
+const NO_OVERLAY = () => () => undefined;
+function useOverlayStatus() {
+    const overlay = useContext(SpaceOverlayContext);
+    return useSyncExternalStore(overlay?.subscribe ?? NO_OVERLAY, () => overlay?.getStatus() ?? null);
+}
+/**
+ * The window of the overlay of TwakeSpace once connected, else null: what
+ * renders there is laid out on its size, not on this frame's
+ */
+export function useOverlayWindow() {
+    const overlay = useContext(SpaceOverlayContext);
+    const status = useOverlayStatus();
+    return status === 'connected'
+        ? (overlay?.getBody()?.ownerDocument.defaultView ?? null)
+        : null;
+}
+/**
+ * Renders its children on the overlay of TwakeSpace when the app is framed
+ * there, in place otherwise. Menus and tooltips opened inside follow: MUI
+ * portals them into the document of their anchor.
+ */
+export const OverlayPortal = ({ children }) => {
+    const overlay = useContext(SpaceOverlayContext);
+    const status = useOverlayStatus();
+    // Shown in place first, then moved, it would mount twice: a window being
+    // written in would lose what it holds
+    if (status === 'connecting')
+        return null;
+    const body = status === 'connected' ? (overlay?.getBody() ?? null) : null;
+    return React.createElement(React.Fragment, null, body === null ? children : createPortal(children, body));
+};
+/**
+ * Theme options sending every dialog and temporary drawer to the overlay, so
+ * they are centred on the window of TwakeSpace and dim all of it. Built once:
+ * the theme provider rebuilds the theme when they change.
+ */
+export function overlayThemeOptions(overlay) {
+    // Null before TwakeSpace answers: MUI then portals into the app's own body
+    const container = () => overlay.getBody();
+    return {
+        components: {
+            MuiDialog: { defaultProps: { container } },
+            // Its backdrop dims all of TwakeSpace: shown at once with its panel,
+            // not faded in over the whole page
+            MuiDrawer: {
+                defaultProps: {
+                    container,
+                    slotProps: { backdrop: { transitionDuration: 0 } }
+                }
+            }
+        }
+    };
+}

package/dist/components/SpaceOverlay/index.d.ts

@@ -0,0 +1,8 @@
+export { connectSpaceOverlay, computeOverlayRegion } from './spaceOverlay';
+export type { SpaceOverlay, SpaceOverlayStatus } from './spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './SpaceOverlay';
+export type { SpaceOverlayProviderProps } from './SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './region';
+export type { OverlayBox, OverlayRegion } from './region';
+export { OverlayFrame } from './OverlayFrame';
+export type { OverlayFrameProps } from './OverlayFrame';

package/dist/components/SpaceOverlay/index.js

@@ -0,0 +1,4 @@
+export { connectSpaceOverlay, computeOverlayRegion } from './spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './region';
+export { OverlayFrame } from './OverlayFrame';

package/dist/components/SpaceOverlay/region.d.ts

@@ -0,0 +1,25 @@
+/** A box the app draws on the overlay, in CSS px of the window */
+export interface OverlayBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * The part of the overlay TwakeSpace shows: `'full'` while something there
+ * blocks the page (a dialog, a menu, a fullscreen window), otherwise the
+ * boxes the app draws
+ */
+export type OverlayRegion = 'full' | readonly OverlayBox[];
+declare const OVERLAY_REGION = "twake-embed:overlay-region";
+export declare function parseOverlayRegion(value: unknown): OverlayRegion | null;
+/** The message an app posts to TwakeSpace with the region of its overlay */
+export declare function overlayRegionMessage(region: OverlayRegion): {
+    type: typeof OVERLAY_REGION;
+    region: OverlayRegion;
+};
+/** The region an app reports, from `overlayRegionMessage` */
+export declare function parseOverlayRegionMessage(data: unknown): OverlayRegion | null;
+/** The clip path of the overlay: nothing until the app says what it draws */
+export declare function overlayClipPath(region: OverlayRegion | null): string;
+export {};

package/dist/components/SpaceOverlay/region.js

@@ -0,0 +1,63 @@
+// The region of the overlay an embedded app draws on, over the whole page of
+// TwakeSpace. It is a frame on the app's origin: the app renders its docked
+// windows and dialogs into it, and TwakeSpace only shows the region the app
+// says it draws in (`twake-embed:overlay-region`), so the rest of the page
+// keeps its clicks.
+const OVERLAY_REGION = 'twake-embed:overlay-region';
+const MAX_BOXES = 32;
+const MAX_SIZE = 100000;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function isCoordinate(value) {
+    return (typeof value === 'number' &&
+        Number.isFinite(value) &&
+        Math.abs(value) <= MAX_SIZE);
+}
+function toBox(value) {
+    if (!isRecord(value))
+        return null;
+    const { x, y, width, height } = value;
+    if (!isCoordinate(x) ||
+        !isCoordinate(y) ||
+        !isCoordinate(width) ||
+        !isCoordinate(height)) {
+        return null;
+    }
+    if (width < 0 || height < 0)
+        return null;
+    return { x, y, width, height };
+}
+export function parseOverlayRegion(value) {
+    if (value === 'full')
+        return 'full';
+    if (!Array.isArray(value) || value.length > MAX_BOXES)
+        return null;
+    const boxes = [];
+    for (const item of value) {
+        const box = toBox(item);
+        if (box === null)
+            return null;
+        boxes.push(box);
+    }
+    return boxes;
+}
+/** The message an app posts to TwakeSpace with the region of its overlay */
+export function overlayRegionMessage(region) {
+    return { type: OVERLAY_REGION, region };
+}
+/** The region an app reports, from `overlayRegionMessage` */
+export function parseOverlayRegionMessage(data) {
+    if (!isRecord(data) || data.type !== OVERLAY_REGION)
+        return null;
+    return parseOverlayRegion(data.region);
+}
+/** The clip path of the overlay: nothing until the app says what it draws */
+export function overlayClipPath(region) {
+    if (region === 'full')
+        return 'none';
+    if (region === null || region.length === 0)
+        return 'inset(0 0 100% 0)';
+    const boxes = region.map(({ x, y, width, height }) => ['M', x, ' ', y, 'h', width, 'v', height, 'h', -width, 'Z'].join(''));
+    return `path('${boxes.join(' ')}')`;
+}

package/dist/components/SpaceOverlay/spaceOverlay.d.ts

@@ -0,0 +1,42 @@
+import type { OverlayRegion } from './region';
+/**
+ * Where the overlay stands: looked for (render nothing yet, so that what
+ * would render in place does not mount twice), there, or not coming (render
+ * in place)
+ */
+export type SpaceOverlayStatus = 'connecting' | 'connected' | 'unavailable';
+/**
+ * The overlay TwakeSpace frames over its whole window, on this app's origin:
+ * docked windows and dialogs render into its body with portals, so they sit
+ * on the page of TwakeSpace instead of inside the app's frame
+ */
+export interface SpaceOverlay {
+    getStatus: () => SpaceOverlayStatus;
+    /** The body to render into, null unless connected */
+    getBody: () => HTMLElement | null;
+    /** Called when the status changes */
+    subscribe: (listener: () => void) => () => void;
+}
+/**
+ * The overlay of this frame, found by name: TwakeSpace names it after the
+ * frame (`<frame name>:overlay`). Null outside a frame or in a frame without
+ * a name, where windows and dialogs stay in the app. `reportRegion` tells
+ * TwakeSpace the region of the overlay to show.
+ *
+ * Connected once per window: the app's styles are copied by wrapping the
+ * stylesheet methods of its window, so a later call returns the first
+ * connection, and its `reportRegion` is ignored.
+ */
+export declare function connectSpaceOverlay(reportRegion: (region: OverlayRegion) => void): SpaceOverlay | null;
+/**
+ * Copies every CSS rule of the app into the overlay, and again whenever the
+ * app adds some: Emotion and its global styles insert rules one by one
+ * (`insertRule`), other styles arrive as elements of the head
+ */
+export declare function mirrorStyles(source: Document, target: Document): void;
+/**
+ * What the overlay shows: everything while a modal (dialog, menu) or a
+ * backdrop is open, otherwise the boxes that paint something. A box that
+ * neither takes clicks nor paints (the dock line) is looked through.
+ */
+export declare function computeOverlayRegion(doc: Document): OverlayRegion;

package/dist/components/SpaceOverlay/spaceOverlay.js

@@ -0,0 +1,312 @@
+// The overlay TwakeSpace puts over its page for an embedded app (ADR 010 of
+// twake-space-architecture), from the side of the app.
+/** Room left around each box for its shadow, in px */
+const SHADOW_MARGIN = 16;
+/**
+ * How long a frame named by TwakeSpace waits for its overlay before showing
+ * its windows in place: the overlay loads in well under a second, and a
+ * TwakeSpace without overlay should not hold a composer back longer
+ */
+const CONNECT_TIMEOUT_MS = 5000;
+/** How often the overlay is looked for while TwakeSpace loads it */
+const LOOKUP_INTERVAL_MS = 100;
+/** Changes of the overlay sent together, about one frame */
+const REGION_DELAY_MS = 16;
+const FOCUS_RETRY_MS = 50;
+/** The overlay of this window, once looked for */
+let connection = null;
+/**
+ * The overlay of this frame, found by name: TwakeSpace names it after the
+ * frame (`<frame name>:overlay`). Null outside a frame or in a frame without
+ * a name, where windows and dialogs stay in the app. `reportRegion` tells
+ * TwakeSpace the region of the overlay to show.
+ *
+ * Connected once per window: the app's styles are copied by wrapping the
+ * stylesheet methods of its window, so a later call returns the first
+ * connection, and its `reportRegion` is ignored.
+ */
+export function connectSpaceOverlay(reportRegion) {
+    connection ?? (connection = { overlay: connect(reportRegion) });
+    return connection.overlay;
+}
+function connect(reportRegion) {
+    if (window.parent === window || window.name === '')
+        return null;
+    const name = `${window.name}:overlay`;
+    const listeners = new Set();
+    let status = 'connecting';
+    let body = null;
+    const settle = (next) => {
+        if (status !== 'connecting')
+            return;
+        status = next;
+        listeners.forEach(listener => {
+            listener();
+        });
+    };
+    const attach = (doc) => {
+        mirrorStyles(document, doc);
+        followRegion(doc, reportRegion, followFocus(document));
+        body = doc.body;
+        settle('connected');
+    };
+    const giveUp = setTimeout(() => {
+        settle('unavailable');
+    }, CONNECT_TIMEOUT_MS);
+    const find = () => {
+        if (status !== 'connecting')
+            return;
+        const overlay = findOverlay(name);
+        if (overlay !== null) {
+            clearTimeout(giveUp);
+            attach(overlay);
+            return;
+        }
+        setTimeout(find, LOOKUP_INTERVAL_MS);
+    };
+    find();
+    return {
+        getStatus: () => status,
+        getBody: () => body,
+        subscribe: listener => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        }
+    };
+}
+/**
+ * The element of the app that last had the focus: a dialog opened from it
+ * shows on the overlay, and closing it cannot give the focus back across
+ * frames (the focus event carries no `relatedTarget` there)
+ */
+function followFocus(app) {
+    let last = null;
+    app.addEventListener('focusin', event => {
+        if (event.target !== app.body)
+            last = event.target;
+    });
+    return () => (last?.isConnected ? last : null);
+}
+/**
+ * The document of the overlay once loaded: until then the frame holds the
+ * blank page of TwakeSpace, of another origin
+ */
+function findOverlay(name) {
+    const frames = Array.from({ length: window.parent.length }, (_, index) => window.parent[index]);
+    for (const frame of frames) {
+        try {
+            if (frame?.name === name &&
+                frame.location.href !== 'about:blank' &&
+                frame.document.readyState === 'complete') {
+                return frame.document;
+            }
+        }
+        catch {
+            // Another origin
+        }
+    }
+    return null;
+}
+/**
+ * Copies every CSS rule of the app into the overlay, and again whenever the
+ * app adds some: Emotion and its global styles insert rules one by one
+ * (`insertRule`), other styles arrive as elements of the head
+ */
+export function mirrorStyles(source, target) {
+    const sourceWindow = source.defaultView;
+    if (sourceWindow === null)
+        return;
+    const mirror = target.createElement('style');
+    mirror.dataset.mirror = '';
+    target.head.appendChild(mirror);
+    const linked = new Set();
+    const copy = () => {
+        const css = [];
+        for (const sheet of Array.from(source.styleSheets)) {
+            // A stylesheet file is loaded again: its relative URLs (fonts) resolve
+            // against it, and the rules of another origin cannot be read
+            if (sheet.href !== null) {
+                if (!linked.has(sheet.href)) {
+                    linked.add(sheet.href);
+                    const link = target.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = sheet.href;
+                    target.head.insertBefore(link, mirror);
+                }
+                continue;
+            }
+            try {
+                for (const rule of Array.from(sheet.cssRules))
+                    css.push(rule.cssText);
+            }
+            catch {
+                // Unreadable: nothing to copy
+            }
+        }
+        mirror.textContent = css.join('\n');
+        copyRootAttributes(source.documentElement, target.documentElement);
+    };
+    let scheduled = false;
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        sourceWindow.requestAnimationFrame(() => {
+            scheduled = false;
+            copy();
+        });
+    };
+    // A rule inserted in the app is in the overlay at once, before what it
+    // styles is laid out: a popover measures its paper as it mounts, and a
+    // paper without its rules spans the whole window. The copy that follows
+    // puts the rule back in its place.
+    const copyRule = (sheet, rule) => {
+        const copied = mirror.sheet;
+        // A stylesheet file is loaded again instead
+        if (Boolean(sheet.href) || copied === null || sheet === copied)
+            return;
+        try {
+            copied.insertRule(rule, copied.cssRules.length);
+        }
+        catch {
+            // Not allowed at the end of a sheet (`@import`): left to the copy
+        }
+    };
+    // Emotion inserts rules without touching the DOM: watch the CSSOM itself
+    const prototype = sourceWindow.CSSStyleSheet.prototype;
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- wrapped, called with its sheet
+    const insertRule = prototype.insertRule;
+    prototype.insertRule = function (...args) {
+        const index = insertRule.apply(this, args);
+        copyRule(this, args[0]);
+        schedule();
+        return index;
+    };
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- wrapped, called with its sheet
+    const deleteRule = prototype.deleteRule;
+    prototype.deleteRule = function (...args) {
+        schedule();
+        deleteRule.apply(this, args);
+    };
+    new MutationObserver(schedule).observe(source.head, {
+        childList: true,
+        subtree: true,
+        characterData: true
+    });
+    // The colour scheme and the language live on <html>
+    new MutationObserver(schedule).observe(source.documentElement, {
+        attributes: true
+    });
+    copy();
+}
+function copyRootAttributes(source, target) {
+    for (const { name, value } of Array.from(source.attributes)) {
+        if (name !== 'style' && target.getAttribute(name) !== value) {
+            target.setAttribute(name, value);
+        }
+    }
+}
+/**
+ * Gives the focus back to an element of the app, again for a moment: while
+ * the dialog was open TwakeSpace made its page inert, the app's frame
+ * included, and takes that back only once it reads the new region
+ */
+function restoreFocus(target, attempts = 10) {
+    target.focus();
+    if (target.ownerDocument.activeElement === target && document.hasFocus()) {
+        return;
+    }
+    if (attempts > 1) {
+        setTimeout(() => {
+            restoreFocus(target, attempts - 1);
+        }, FOCUS_RETRY_MS);
+    }
+}
+/**
+ * Sends TwakeSpace the region of the overlay to show, each time it changes.
+ * When a dialog closes and leaves the focus nowhere on the overlay, it goes
+ * back to the element of the app that had it.
+ */
+function followRegion(doc, reportRegion, lastAppFocus) {
+    const view = doc.defaultView;
+    if (view === null)
+        return;
+    let last = '';
+    let scheduled = false;
+    const send = () => {
+        scheduled = false;
+        const region = computeOverlayRegion(doc);
+        const key = JSON.stringify(region);
+        if (key === last)
+            return;
+        const wasBlocking = last === '"full"';
+        last = key;
+        reportRegion(region);
+        if (wasBlocking && region !== 'full' && doc.activeElement === doc.body) {
+            const target = lastAppFocus();
+            if (target !== null)
+                restoreFocus(target);
+        }
+    };
+    // Not the overlay's animation frames: the browser does not run them while
+    // the overlay shows nothing, which it does until it reports a region
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        setTimeout(send, REGION_DELAY_MS);
+    };
+    new MutationObserver(schedule).observe(doc.body, {
+        childList: true,
+        subtree: true,
+        attributes: true
+    });
+    for (const type of ['transitionend', 'transitioncancel', 'animationend']) {
+        doc.addEventListener(type, schedule, true);
+    }
+    view.addEventListener('resize', schedule);
+    schedule();
+}
+/**
+ * What the overlay shows: everything while a modal (dialog, menu) or a
+ * backdrop is open, otherwise the boxes that paint something. A box that
+ * neither takes clicks nor paints (the dock line) is looked through.
+ */
+export function computeOverlayRegion(doc) {
+    const view = doc.defaultView;
+    if (view === null)
+        return [];
+    const blocking = Array.from(doc.body.querySelectorAll('.MuiModal-root, .MuiBackdrop-root')).some(element => element.closest('.MuiModal-hidden') === null &&
+        view.getComputedStyle(element).visibility !== 'hidden');
+    if (blocking)
+        return 'full';
+    const boxes = [];
+    const visit = (element) => {
+        const style = view.getComputedStyle(element);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return;
+        if (style.pointerEvents === 'none' && !paints(style)) {
+            Array.from(element.children).forEach(visit);
+            return;
+        }
+        const box = element.getBoundingClientRect();
+        if (box.width > 0 && box.height > 0) {
+            boxes.push({
+                x: Math.floor(box.left - SHADOW_MARGIN),
+                y: Math.floor(box.top - SHADOW_MARGIN),
+                width: Math.ceil(box.width + 2 * SHADOW_MARGIN),
+                height: Math.ceil(box.height + 2 * SHADOW_MARGIN)
+            });
+        }
+    };
+    Array.from(doc.body.children).forEach(visit);
+    return boxes;
+}
+function paints(style) {
+    const transparent = (color) => color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+    return (!transparent(style.backgroundColor) ||
+        (style.boxShadow !== 'none' && style.boxShadow !== '') ||
+        (style.borderStyle !== 'none' &&
+            style.borderStyle !== '' &&
+            parseFloat(style.borderWidth) > 0));
+}

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export * from './components/SpaceOverlay';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';

package/dist/index.js

@@ -44,4 +44,5 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
+export * from './components/SpaceOverlay';
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';

package/dist/lib/overrides.js

@@ -45,10 +45,7 @@ const alertSeverityVariants = alertSeverities.flatMap(severity => [
                 backgroundColor: theme.alpha(theme.vars.palette[severity].main, 0.24)
             }),
             [`& .${alertClasses.icon}`]: { color: alertIconColor(severity, theme) },
-            // Alert renders its close button, titled with the translated
-            // `closeText`, as the only child of the action slot and only when no
-            // custom `action` is given: matching that structure, not the title,
-            // keeps the style in every language.
+            // targets close button
             [`& .${alertClasses.action} > .${iconButtonClasses.root}:only-child`]: {
                 color: theme.vars.palette.text.secondary
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "@storybook/builder-vite": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
+    "@testing-library/react": "^16.3.3",
     "@types/classnames": "^2.3.1",
     "@types/lodash": "4.17.24",
     "@types/react": "19.3.0",
@@ -87,6 +88,7 @@
     "eslint": "10.2.1",
     "eslint-config-cozy-app": "7.0.0",
     "eslint-plugin-storybook": "10.3.5",
+    "jsdom": "^30.1.2",
     "lodash": "4.18.1",
     "playwright": "1.60.0",
     "react": "^19.3.0",