@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-list/eds-list.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { EdsListContext } from './eds-list-context.js';
+/**
+ * `EdsList` — pure React port of the Angular `eds-list`.
+ *
+ * Vertical list container of `EdsListItem` rows separated by dividers. Two modes:
+ * - **Presentational** (default): a visual list layout, no ARIA roles or keyboard navigation.
+ * - **Interactive** (when `edsRole` is set, or `isInteractive`): adds WAI-ARIA list semantics
+ *   and roving-tabindex keyboard navigation, reimplementing the Angular `FocusKeyManager`
+ *   (Arrow Up/Down with wrap + type-ahead, Home/End, Enter/Space to activate, Arrow Left/Right
+ *   to traverse focusable rich content within the active item). Items register an imperative
+ *   handle via context (the React analog of Angular `contentChildren`).
+ *
+ * The list is router-agnostic — a `url` item renders as an anchor and delegates navigation to
+ * the consumer (see `EdsListItem`).
+ */
+export const EdsList = React.forwardRef(function EdsList({ edsRole, ariaLabel, isInteractive = false, children, className, onKeyDown, ...rest }, ref) {
+    const isInteractiveMode = !!edsRole || isInteractive;
+    // Registered item handles, kept in insertion order (mirrors Angular contentChildren order).
+    const itemsRef = useRef([]);
+    // Index of the currently active item in the roving-tabindex manager.
+    const activeIndexRef = useRef(-1);
+    // Type-ahead buffer for FocusKeyManager.withTypeAhead().
+    const typeaheadRef = useRef('');
+    const typeaheadTimerRef = useRef(null);
+    const [hostTabIndex, setHostTabIndex] = useState(undefined);
+    const register = useCallback((handle) => {
+        itemsRef.current.push(handle);
+        // Once any item has registered, the host becomes focusable (Angular sets tabIndex '0').
+        setHostTabIndex(0);
+        return () => {
+            itemsRef.current = itemsRef.current.filter((h) => h !== handle);
+        };
+    }, []);
+    // APG: when the list first becomes interactive, set the active item to the selected one
+    // (or the first). Runs after items have registered.
+    useEffect(() => {
+        if (!isInteractiveMode)
+            return;
+        const items = itemsRef.current;
+        if (!items.length)
+            return;
+        const selectedIndex = items.findIndex((it) => it.isActive());
+        activeIndexRef.current = selectedIndex >= 0 ? selectedIndex : -1;
+    }, [isInteractiveMode]);
+    const setActiveItem = useCallback((index) => {
+        const items = itemsRef.current;
+        if (index < 0 || index >= items.length)
+            return;
+        activeIndexRef.current = index;
+        items[index].focus();
+    }, []);
+    const setFirstActive = useCallback(() => {
+        const items = itemsRef.current;
+        const idx = items.findIndex((it) => !it.isDisabled());
+        if (idx >= 0)
+            setActiveItem(idx);
+    }, [setActiveItem]);
+    const setLastActive = useCallback(() => {
+        const items = itemsRef.current;
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (!items[i].isDisabled()) {
+                setActiveItem(i);
+                return;
+            }
+        }
+    }, [setActiveItem]);
+    // Move active item by delta with wrap, skipping disabled items (FocusKeyManager.withWrap()).
+    const moveActive = useCallback((delta) => {
+        const items = itemsRef.current;
+        if (!items.length)
+            return;
+        const count = items.length;
+        let idx = activeIndexRef.current;
+        for (let step = 0; step < count; step++) {
+            idx = (idx + delta + count) % count;
+            if (!items[idx].isDisabled()) {
+                setActiveItem(idx);
+                return;
+            }
+        }
+    }, [setActiveItem]);
+    // Type-ahead: focus the next item whose label starts with the accumulated buffer.
+    const handleTypeahead = useCallback((char) => {
+        const items = itemsRef.current;
+        if (!items.length)
+            return;
+        typeaheadRef.current += char.toLowerCase();
+        if (typeaheadTimerRef.current)
+            clearTimeout(typeaheadTimerRef.current);
+        typeaheadTimerRef.current = setTimeout(() => {
+            typeaheadRef.current = '';
+        }, 200);
+        const buffer = typeaheadRef.current;
+        const start = activeIndexRef.current + 1;
+        for (let i = 0; i < items.length; i++) {
+            const idx = (start + i) % items.length;
+            const item = items[idx];
+            if (!item.isDisabled() && item.getLabel().toLowerCase().startsWith(buffer)) {
+                setActiveItem(idx);
+                return;
+            }
+        }
+    }, [setActiveItem]);
+    // Arrow Left/Right traversal of focusable rich content within the active item
+    // (Angular navigateRichContent).
+    const navigateRichContent = useCallback((direction, activeIndex, elements) => {
+        const items = itemsRef.current;
+        const active = items[activeIndexRef.current];
+        if (direction === 'ArrowRight') {
+            const nextIndex = activeIndex + 1;
+            if (nextIndex < elements.length) {
+                elements[nextIndex].focus();
+            }
+            else {
+                active?.focus();
+            }
+        }
+        else {
+            if (activeIndex <= 0) {
+                if (activeIndex === -1) {
+                    elements[elements.length - 1].focus();
+                }
+                else {
+                    active?.focus();
+                }
+            }
+            else {
+                elements[activeIndex - 1].focus();
+            }
+        }
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (!isInteractiveMode)
+            return;
+        const items = itemsRef.current;
+        if (!items.length)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                items[activeIndexRef.current]?.click();
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                setFirstActive();
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                setLastActive();
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                moveActive(1);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                moveActive(-1);
+                break;
+            }
+            case 'ArrowRight':
+            case 'ArrowLeft': {
+                event.stopPropagation();
+                const activeEl = document.activeElement;
+                const activeItem = items.find((it) => it.getElement()?.contains(activeEl));
+                const focusables = activeItem?.getFocusableElements() ?? [];
+                if (activeItem && focusables.length) {
+                    event.preventDefault();
+                    const activeElIndex = focusables.findIndex((el) => el.contains(activeEl));
+                    activeIndexRef.current = items.indexOf(activeItem);
+                    navigateRichContent(event.key, activeElIndex, focusables);
+                }
+                break;
+            }
+            default: {
+                // Single printable characters drive type-ahead.
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    handleTypeahead(event.key);
+                }
+                break;
+            }
+        }
+    }, [isInteractiveMode, onKeyDown, setFirstActive, setLastActive, moveActive, handleTypeahead, navigateRichContent]);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimerRef.current)
+                clearTimeout(typeaheadTimerRef.current);
+        };
+    }, []);
+    // Angular hostClasses(): base + interactive modifier.
+    const classes = [
+        'eds-list',
+        isInteractiveMode ? 'eds-list--interactive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(EdsListContext.Provider, { value: { role: edsRole, isInteractive: isInteractiveMode, register }, children: _jsx("div", { ref: ref, className: className ? `${classes} ${className}` : classes, "data-e2e": "eds-list", role: edsRole || undefined, "aria-label": ariaLabel || undefined, "aria-orientation": edsRole ? 'vertical' : undefined, tabIndex: isInteractiveMode ? hostTabIndex : undefined, onKeyDown: handleKeyDown, ...rest, children: children }) }));
+});
+//# sourceMappingURL=eds-list.js.map

package/eds-list/eds-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-list.js","sourceRoot":"","sources":["../../src/eds-list/eds-list.tsx"],"names":[],"mappings":"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"}

package/eds-list/index.d.ts

@@ -0,0 +1,15 @@
+export { EdsList } from './eds-list.js';
+export type { EdsListProps, EdsListRole } from './eds-list.js';
+export { EdsListContext, useEdsList } from './eds-list-context.js';
+export type { EdsListContextValue, EdsListItemHandle } from './eds-list-context.js';
+export { EdsListItem } from './eds-list-item.js';
+export type { EdsListItemProps, EdsListItemColor } from './eds-list-item.js';
+export { EdsListItemStart } from './eds-list-item-start.js';
+export type { EdsListItemStartProps } from './eds-list-item-start.js';
+export { EdsListItemLabel } from './eds-list-item-label.js';
+export type { EdsListItemLabelProps } from './eds-list-item-label.js';
+export { EdsListItemContent } from './eds-list-item-content.js';
+export type { EdsListItemContentProps } from './eds-list-item-content.js';
+export { EdsListItemEnd } from './eds-list-item-end.js';
+export type { EdsListItemEndProps } from './eds-list-item-end.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEpF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/eds-list/index.js

@@ -0,0 +1,8 @@
+export { EdsList } from './eds-list.js';
+export { EdsListContext, useEdsList } from './eds-list-context.js';
+export { EdsListItem } from './eds-list-item.js';
+export { EdsListItemStart } from './eds-list-item-start.js';
+export { EdsListItemLabel } from './eds-list-item-label.js';
+export { EdsListItemContent } from './eds-list-item-content.js';
+export { EdsListItemEnd } from './eds-list-item-end.js';
+//# sourceMappingURL=index.js.map

package/eds-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/eds-message-box/eds-message-box.css

@@ -0,0 +1,207 @@
+/* EdsMessageBox — pure React port of the Angular eds-message-box (rendered through the shared
+ * eds-dialog-container). 1:1 translation of eds-dialog.scss (message-box-relevant branches):
+ *   :host / .eui-21 wrapper dropped (share-ready, light-DOM);
+ *   .eds-dialog--<color> variant classes -> .eds-dialog[data-color="<color>"];
+ *   .eds-dialog--no-padding -> .eds-dialog[data-no-padding];
+ *   base.media(mobile) -> the raw @media the mixin expands to (< 768px).
+ * The CDK overlay/backdrop is not available in pure React, so .eds-message-box__backdrop
+ * reproduces the overlay positioning (fixed, centered, subtle backdrop) the service provided. */
+
+/* BACKDROP / OVERLAY (was the CDK overlay + .eds-dialog__backdrop) */
+.eds-message-box__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--eds-c-alpha-backdrop-subtle);
+}
+
+/* VARS DEFS (color variant -> header title color) */
+.eds-dialog {
+    --_color: var(--eds-c-foreground);
+}
+
+.eds-dialog[data-color="info"] {
+    --_color: var(--eds-c-foreground-info);
+}
+
+.eds-dialog[data-color="success"] {
+    --_color: var(--eds-c-foreground-success);
+}
+
+.eds-dialog[data-color="warning"] {
+    --_color: var(--eds-c-foreground-warning);
+}
+
+.eds-dialog[data-color="critical"] {
+    --_color: var(--eds-c-foreground-critical);
+}
+
+.eds-dialog[data-color="neutral"] {
+    --_color: var(--eds-c-foreground-default);
+}
+
+.eds-dialog[data-color="primary"] {
+    --_color: var(--eds-c-foreground-primary);
+}
+
+/* COMPONENT STYLES */
+/* The CDK overlay used to size/center the panel. In pure React the backdrop flex-centers the
+ * container; the container fills the backdrop and centers the panel, and the panel's inline
+ * width (percentages resolve against the full-size container) applies while its height wraps
+ * its content — so the message box appears as a centered, content-sized box. */
+.eds-dialog-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.eds-dialog-container .eds-dialog {
+    background-color: var(--eds-c-surface-elevation);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-4);
+    display: flex;
+    height: auto;
+    max-height: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header {
+    align-items: center;
+    border-top-left-radius: var(--eds-br-m);
+    border-top-right-radius: var(--eds-br-m);
+    display: flex;
+    flex: 0 0 auto;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header .eds-dialog__header-icon {
+    margin-right: var(--eds-sp-s);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header .eds-dialog__header-title {
+    color: var(--_color);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--eds-f-heading-m);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header.eds-dialog__header--handle-disabled {
+    cursor: default !important;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body {
+    display: flex;
+    overflow: auto;
+    position: relative;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body .eds-dialog__body-content {
+    height: auto;
+    padding: var(--eds-sp-xs) var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-m);
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer {
+    align-items: center;
+    background-color: var(--eds-c-surface-elevation);
+    border-bottom-left-radius: var(--eds-br-m);
+    border-bottom-right-radius: var(--eds-br-m);
+    border-top: 1px solid var(--eds-c-border-divider);
+    display: flex;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer .eds-dialog__footer-content {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer .eds-dialog__footer-dismiss-button--with-accept-button {
+    margin-right: var(--eds-sp-s);
+}
+
+/* --no-padding -> [data-no-padding] */
+.eds-dialog-container .eds-dialog[data-no-padding] .eds-dialog__content .eds-dialog__body-content {
+    padding: 0;
+}
+
+/* MESSAGE BOX */
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body {
+    align-items: center;
+    display: flex;
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content {
+    height: auto;
+    padding: var(--eds-sp-m);
+    align-items: center;
+    display: flex;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content-icon-container {
+    align-self: flex-start;
+    padding: var(--eds-sp-m);
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content p {
+    margin-top: 0;
+}
+
+/* MEDIA QUERIES — base.media(base.$eds-bkp-mobile) expands to @media screen and (max-width: 767px) */
+@media screen and (max-width: 767px) {
+    .eds-dialog-container .eds-dialog {
+        left: 0;
+        position: fixed;
+        top: 0;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content {
+        height: 100vh;
+        height: calc(var(--eds-app-vh, 1vh) * 100);
+        width: 100vw;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        flex: 0 0 auto;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body {
+        flex: 1 1 auto;
+        height: 65vh !important;
+        max-height: 65vh !important;
+        max-width: 100vw !important;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 100vw !important;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body .eds-dialog__body-content {
+        flex: 1 1 auto;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        flex: 0 0 auto;
+        width: 100vw;
+    }
+}

package/eds-message-box/eds-message-box.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the message box's color contract.
+ *
+ * Ported from the Angular `eds-message-box`, which drives its variant through
+ * `EdsColorDirective` (`edsNeutral` / `edsSuccess` / `edsInfo` / `edsWarning` / `edsCritical`
+ * + `edsColorVariant`) and resolves to `info` when unset. The dialog container additionally
+ * styles a `primary` branch, so `primary` is accepted here for parity. Only the four
+ * status colors (`info` / `success` / `warning` / `critical`) render a leading status icon
+ * (`EdsIconState` supports exactly those); `neutral` / `primary` render no header icon,
+ * matching the Angular `<eds-icon-state [color]="variant" ... />` when `variant` is not a
+ * status color.
+ */
+export type EdsMessageBoxColor = 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'primary';
+export interface EdsMessageBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+    /**
+     * Controlled visibility. The Angular component is opened imperatively via
+     * `EdsMessageBoxService.openMessageBox()` / `closeMessageBox()` (which delegates to the
+     * `EdsDialogService` overlay). React has no DI/overlay service — this is a host-owned
+     * **controlled** component: pass `isOpen` and react to `onAccept` / `onDismiss` /
+     * `onMessageBoxClose`. @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Semantic color of the message box. Selects the leading status icon (for the four
+     * status colors) and the header title color. @default 'info'
+     */
+    color?: EdsMessageBoxColor;
+    /** Title text displayed in the message box header. */
+    title?: string;
+    /** Width of the message box. @default '33rem' */
+    width?: string;
+    /** Height of the message box body. @default 'auto' */
+    height?: string;
+    /** Controls visibility of the accept button. @default true */
+    hasAcceptButton?: boolean;
+    /** Controls visibility of the dismiss button. @default true */
+    hasDismissButton?: boolean;
+    /** Label for the accept button. @default 'OK' */
+    acceptLabel?: string;
+    /** Label for the dismiss button. @default 'Cancel' */
+    dismissLabel?: string;
+    /**
+     * Prevents automatic closure when the dismiss button is clicked (the host keeps
+     * `isOpen` true and closes it explicitly). @default false
+     */
+    isHandleCloseOnDismiss?: boolean;
+    /**
+     * Prevents automatic closure when close is triggered (currently only the dismiss path
+     * has an auto-close; kept for parity with the Angular input). @default false
+     */
+    isHandleCloseOnClose?: boolean;
+    /**
+     * Prevents automatic closure when the accept button is clicked. @default false
+     */
+    isHandleCloseOnAccept?: boolean;
+    /** Removes default padding from the body content area. @default false */
+    hasNoBodyPadding?: boolean;
+    /** Data attribute for e2e testing. @default 'eds-message-box' */
+    e2eAttr?: string;
+    /** Emitted when the message box opens. Maps to Angular `(messageBoxOpen)`. */
+    onMessageBoxOpen?: () => void;
+    /** Emitted when the message box closes. Maps to Angular `(messageBoxClose)`. */
+    onMessageBoxClose?: () => void;
+    /** Emitted when the dismiss button is clicked. Maps to Angular `(dismiss)`. */
+    onDismiss?: () => void;
+    /** Emitted when the accept button is clicked. Maps to Angular `(accept)`. */
+    onAccept?: () => void;
+    /** Message box body content (Angular default `<ng-content/>`). */
+    children?: React.ReactNode;
+    /**
+     * Optional custom footer content (Angular `<ng-content select="eds-message-box-footer">`).
+     * When provided, it replaces the default accept/dismiss button row.
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * `EdsMessageBox` — pure React port of the Angular `eds-message-box`.
+ *
+ * A modal message box (an `alertdialog`) for confirmations, alerts, and prompts. The Angular
+ * component is a thin, service-driven wrapper: it builds an `EdsDialogInterface` (message-box
+ * preset — no close button, no outside-click/escape close, always a footer) and hands it to
+ * `EdsMessageBoxService` → `EdsDialogService`, which renders the shared `eds-dialog-container`
+ * in a CDK overlay.
+ *
+ * React has no DI or overlay service, so this port is a **host-owned controlled component**
+ * (guide rule 6 — service-agnostic). It renders the ported dialog-container markup (backdrop
+ * + `alertdialog` panel: status-icon header, scrollable body, action footer) inline when
+ * `isOpen` is true, reproduces the message-box behavior faithfully with hooks (focus capture
+ * on open, focus trap, non-dismiss on backdrop/escape), and exposes the Angular outputs as
+ * `on*` callbacks. The dropped pieces (the imperative `EdsMessageBoxService`, the CDK
+ * overlay/portal, drag-and-drop) are host concerns — the consumer owns `isOpen`.
+ */
+export declare const EdsMessageBox: React.ForwardRefExoticComponent<EdsMessageBoxProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-message-box.d.ts.map

package/eds-message-box/eds-message-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-message-box.d.ts","sourceRoot":"","sources":["../../src/eds-message-box/eds-message-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAUrG,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrG;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,2FAsLxB,CAAC"}

package/eds-message-box/eds-message-box.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { EdsIconState } from '../eds-icon-state/eds-icon-state.js';
+import { EdsButton } from '../eds-button/eds-button.js';
+/** color → status icon support (the four EdsIconState colors show a leading icon). */
+const STATUS_COLORS = new Set([
+    'info',
+    'success',
+    'warning',
+    'critical',
+]);
+/**
+ * `EdsMessageBox` — pure React port of the Angular `eds-message-box`.
+ *
+ * A modal message box (an `alertdialog`) for confirmations, alerts, and prompts. The Angular
+ * component is a thin, service-driven wrapper: it builds an `EdsDialogInterface` (message-box
+ * preset — no close button, no outside-click/escape close, always a footer) and hands it to
+ * `EdsMessageBoxService` → `EdsDialogService`, which renders the shared `eds-dialog-container`
+ * in a CDK overlay.
+ *
+ * React has no DI or overlay service, so this port is a **host-owned controlled component**
+ * (guide rule 6 — service-agnostic). It renders the ported dialog-container markup (backdrop
+ * + `alertdialog` panel: status-icon header, scrollable body, action footer) inline when
+ * `isOpen` is true, reproduces the message-box behavior faithfully with hooks (focus capture
+ * on open, focus trap, non-dismiss on backdrop/escape), and exposes the Angular outputs as
+ * `on*` callbacks. The dropped pieces (the imperative `EdsMessageBoxService`, the CDK
+ * overlay/portal, drag-and-drop) are host concerns — the consumer owns `isOpen`.
+ */
+export const EdsMessageBox = React.forwardRef(function EdsMessageBox({ isOpen = false, color = 'info', title, width = '33rem', height = 'auto', hasAcceptButton = true, hasDismissButton = true, acceptLabel = 'OK', dismissLabel = 'Cancel', isHandleCloseOnDismiss = false, isHandleCloseOnClose: _isHandleCloseOnClose = false, isHandleCloseOnAccept = false, hasNoBodyPadding = false, e2eAttr = 'eds-message-box', onMessageBoxOpen, onMessageBoxClose, onDismiss, onAccept, children, footer, className, ...rest }, ref) {
+    const panelRef = useRef(null);
+    const previouslyFocused = useRef(null);
+    // Fire the open/close outputs on the isOpen transition (Angular: config.open()/close()).
+    const wasOpen = useRef(false);
+    useEffect(() => {
+        if (isOpen && !wasOpen.current) {
+            onMessageBoxOpen?.();
+        }
+        else if (!isOpen && wasOpen.current) {
+            onMessageBoxClose?.();
+        }
+        wasOpen.current = isOpen;
+    }, [isOpen, onMessageBoxOpen, onMessageBoxClose]);
+    // Auto-capture focus into the panel on open, restore it on close (CDK cdkTrapFocusAutoCapture).
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        previouslyFocused.current = document.activeElement;
+        panelRef.current?.focus();
+        return () => {
+            previouslyFocused.current?.focus?.();
+        };
+    }, [isOpen]);
+    const requestClose = useCallback(() => {
+        onMessageBoxClose?.();
+    }, [onMessageBoxClose]);
+    const handleDismiss = useCallback(() => {
+        onDismiss?.();
+        if (!isHandleCloseOnDismiss) {
+            requestClose();
+        }
+    }, [onDismiss, isHandleCloseOnDismiss, requestClose]);
+    const handleAccept = useCallback(() => {
+        onAccept?.();
+        if (!isHandleCloseOnAccept) {
+            requestClose();
+        }
+    }, [onAccept, isHandleCloseOnAccept, requestClose]);
+    // Focus trap — keep Tab focus inside the panel. Escape does NOT close (message-box preset:
+    // hasClosedOnEscape=false).
+    const onKeyDown = useCallback((event) => {
+        if (event.key !== 'Tab')
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const focusable = panel.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }, []);
+    if (!isOpen) {
+        return null;
+    }
+    const showIcon = STATUS_COLORS.has(color);
+    const contentId = 'eds-message-box-content';
+    return (_jsx("div", { ref: ref, className: className ? `eds-message-box__backdrop ${className}` : 'eds-message-box__backdrop', "data-e2e": `${e2eAttr}-backdrop`, ...rest, children: _jsx("div", { className: "eds-dialog-container", children: _jsx("div", { ref: panelRef, className: "eds-dialog eds-dialog--message-box", "data-color": color, "data-no-padding": hasNoBodyPadding ? '' : undefined, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "eds-message-box-title", "aria-describedby": contentId, tabIndex: -1, "data-e2e": e2eAttr, style: { width }, onKeyDown: onKeyDown, children: _jsxs("div", { className: "eds-dialog__content", role: "document", children: [_jsxs("div", { className: "eds-dialog__header eds-dialog__header--handle-disabled", children: [showIcon && (_jsx(EdsIconState, { className: "eds-dialog__header-icon", color: color, size: "xl" })), _jsx("h2", { id: "eds-message-box-title", className: "eds-dialog__header-title", "aria-level": 2, children: title })] }), _jsx("div", { className: "eds-dialog__body", style: { height, maxHeight: height }, children: _jsx("div", { id: contentId, className: "eds-dialog__body-content", children: children }) }), _jsx("div", { className: "eds-dialog__footer", children: footer ?? (_jsxs("div", { className: "eds-dialog__footer-content", children: [hasDismissButton && (_jsx(EdsButton, { type: "secondary", className: hasAcceptButton
+                                            ? 'eds-dialog__footer-dismiss-button eds-dialog__footer-dismiss-button--with-accept-button'
+                                            : 'eds-dialog__footer-dismiss-button', onClick: handleDismiss, children: dismissLabel })), hasAcceptButton && (_jsx(EdsButton, { className: "eds-dialog__footer-accept-button", onClick: handleAccept, children: acceptLabel }))] })) })] }) }) }) }));
+});
+//# sourceMappingURL=eds-message-box.js.map