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

package/eds-dimmer/eds-dimmer.css

@@ -0,0 +1,43 @@
+.eds-dimmer {
+    animation: none;
+    background-color: rgba(0, 0, 0, 0.15);
+    height: 100vh;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    width: 0;
+    z-index: 10010;
+    pointer-events: none;
+}
+
+.eds-dimmer.eds-dimmer--active {
+    animation: eds-dimmer-fade-in 0.2s ease-out;
+    opacity: 1;
+    width: 100%;
+    pointer-events: all;
+}
+
+.eds-dimmer:not(.eds-dimmer--active) {
+    animation: eds-dimmer-fade-out 0.2s ease-in;
+}
+
+@keyframes eds-dimmer-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes eds-dimmer-fade-out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}

package/eds-dimmer/eds-dimmer.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface EdsDimmerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls whether the dimmer is active.
+     * When true, the semi-transparent backdrop overlay becomes visible.
+     *
+     * In Angular this state can also come from `EdsShellService.isDimmerActive()`
+     * (centralized app state) and is auto-deactivated on browser back/forward
+     * navigation via the Angular router. The pure-React library is
+     * service-agnostic and router-agnostic, so the active state is driven
+     * entirely by this prop — the host app owns any centralized/navigation state.
+     * @default false
+     */
+    isDimmerActive?: boolean;
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * @default 'eds-dimmer'
+     */
+    e2eAttr?: string;
+    children?: React.ReactNode;
+}
+export declare const EdsDimmer: React.ForwardRefExoticComponent<EdsDimmerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-dimmer.d.ts.map

package/eds-dimmer/eds-dimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dimmer.d.ts","sourceRoot":"","sources":["../../src/eds-dimmer/eds-dimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,uFAwBpB,CAAC"}

package/eds-dimmer/eds-dimmer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsDimmer = React.forwardRef(function EdsDimmer({ isDimmerActive = false, e2eAttr = 'eds-dimmer', className, children, ...rest }, ref) {
+    // Angular's `isActive` = `isDimmerActive() || shellService.isDimmerActive()`.
+    // No shell service exists in the pure-React library, so the active state is the
+    // `isDimmerActive` prop alone (the host app supplies centralized state through it).
+    // The Angular router-back auto-deactivation is likewise host-owned and dropped here.
+    const isActive = isDimmerActive;
+    // Mirrors the Angular `hostClasses()` computed: BEM base + `--active` modifier
+    // (rule 9 — class-based source keeps its BEM classes).
+    const hostClass = ['eds-dimmer', isActive ? 'eds-dimmer--active' : ''].join(' ').trim();
+    return (_jsx("div", { ref: ref, className: className ? `${hostClass} ${className}` : hostClass, "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-dimmer.js.map

package/eds-dimmer/eds-dimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dimmer.js","sourceRoot":"","sources":["../../src/eds-dimmer/eds-dimmer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,SAAS,CACxF,EAAE,cAAc,GAAG,KAAK,EAAE,OAAO,GAAG,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAChF,GAAG;IAEH,8EAA8E;IAC9E,gFAAgF;IAChF,oFAAoF;IACpF,qFAAqF;IACrF,MAAM,QAAQ,GAAG,cAAc,CAAC;IAEhC,+EAA+E;IAC/E,uDAAuD;IACvD,MAAM,SAAS,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAExF,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,cACpD,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-dimmer/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsDimmer } from './eds-dimmer.js';
+export type { EdsDimmerProps } from './eds-dimmer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-dimmer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-dimmer/index.js

@@ -0,0 +1,2 @@
+export { EdsDimmer } from './eds-dimmer.js';
+//# sourceMappingURL=index.js.map

package/eds-dimmer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-dimmer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-disable-content/eds-disable-content.css

@@ -0,0 +1,27 @@
+/* Pure-React port of eds-disable-content.scss (1:1). */
+
+.eds-disable-content {
+    display: block;
+    position: relative;
+}
+
+.eds-disable-content.eds-disable-content--disabled {
+    cursor: not-allowed;
+    z-index: 1;
+}
+
+.eds-disable-content.eds-disable-content--disabled::after {
+    background-color: rgba(255, 255, 255, 0.4);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.eds-disable-content.eds-disable-content--disabled > * {
+    pointer-events: none;
+}

package/eds-disable-content/eds-disable-content.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsDisableContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls whether the projected content is disabled.
+     * When true, a semi-transparent overlay is shown, pointer events are blocked,
+     * and the currently focused element inside is deactivated (disabled, tabindex=-1,
+     * aria-disabled=true); focus is restored when re-enabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+}
+export declare const EdsDisableContent: React.ForwardRefExoticComponent<EdsDisableContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-disable-content.d.ts.map

package/eds-disable-content/eds-disable-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-disable-content.d.ts","sourceRoot":"","sources":["../../src/eds-disable-content/eds-disable-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,+FA2D7B,CAAC"}

package/eds-disable-content/eds-disable-content.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
+export const EdsDisableContent = React.forwardRef(function EdsDisableContent({ isDisabled = false, children, className, ...rest }, ref) {
+    // The root element is the component; expose it via the forwarded ref while
+    // keeping an internal ref for the focus-management effect.
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    // Mirrors the Angular linkedSignal `isBlocking` (current && !previous) + effect:
+    // on the rising edge (false -> true) deactivate the focused element; when
+    // re-enabled restore it.
+    const previousDisabled = useRef(false);
+    const lastActiveElement = useRef(null);
+    useEffect(() => {
+        const host = rootRef.current;
+        if (!host)
+            return;
+        const isBlocking = isDisabled && !previousDisabled.current;
+        if (isBlocking) {
+            const activeElement = host.querySelector(':focus');
+            if (activeElement) {
+                activeElement.setAttribute('disabled', 'true');
+                activeElement.setAttribute('tabindex', '-1');
+                activeElement.setAttribute('aria-disabled', 'true');
+                lastActiveElement.current = activeElement;
+            }
+            else {
+                lastActiveElement.current = null;
+            }
+        }
+        else if (!isDisabled) {
+            const element = lastActiveElement.current;
+            if (element) {
+                element.removeAttribute('disabled');
+                element.setAttribute('tabindex', '0');
+                element.setAttribute('aria-disabled', 'false');
+                element.focus();
+            }
+        }
+        previousDisabled.current = isDisabled;
+    }, [isDisabled]);
+    const hostClass = ['eds-disable-content', isDisabled ? 'eds-disable-content--disabled' : '']
+        .join(' ')
+        .trim();
+    return (_jsx("div", { ref: rootRef, className: className ? `${hostClass} ${className}` : hostClass, "data-e2e": 'eds-disable-content', "aria-busy": isDisabled || undefined, inert: isDisabled || undefined, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-disable-content.js.map

package/eds-disable-content/eds-disable-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-disable-content.js","sourceRoot":"","sources":["../../src/eds-disable-content/eds-disable-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAc/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,iBAAiB,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAChF,2EAA2E;IAC3E,2DAA2D;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAyB,EAAE,EAAE,CAAC,CAAC;IAEtE,iFAAiF;IACjF,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,UAAU,GAAG,UAAU,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;QAE3D,IAAI,UAAU,EAAE,CAAC;YACb,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAc,QAAQ,CAAC,CAAC;YAChE,IAAI,aAAa,EAAE,CAAC;gBAChB,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gBAC/C,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC7C,aAAa,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACpD,iBAAiB,CAAC,OAAO,GAAG,aAAa,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACJ,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;YACrC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;YAC1C,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACpC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;gBACtC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC/C,OAAO,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC;QACL,CAAC;QAED,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1C,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,CAAC;SACvF,IAAI,CAAC,GAAG,CAAC;SACT,IAAI,EAAE,CAAC;IAEZ,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,cACrD,qBAAqB,eACnB,UAAU,IAAI,SAAS,EAClC,KAAK,EAAE,UAAU,IAAI,SAAS,KAC1B,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-disable-content/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsDisableContent } from './eds-disable-content.js';
+export type { EdsDisableContentProps } from './eds-disable-content.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-disable-content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-disable-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/eds-disable-content/index.js

@@ -0,0 +1,2 @@
+export { EdsDisableContent } from './eds-disable-content.js';
+//# sourceMappingURL=index.js.map

package/eds-disable-content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-disable-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/eds-dropdown/eds-dropdown-content.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface EdsDropdownContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Menu content (dropdown items or custom content). Angular `<ng-content/>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsDropdownContent` — pure React port of the Angular `eds-dropdown-content` directive.
+ *
+ * Marks the content area of an `EdsDropdown`; renders the projected menu content inside the
+ * floating panel with the ARIA `menu` role. In Angular this was an attribute directive that only
+ * set `role="menu"` + the `eds-dropdown-content` class; here it is a thin projection wrapper so
+ * the same markup contract holds (`.eds-dropdown-content` + `role="menu"`).
+ */
+export declare const EdsDropdownContent: React.ForwardRefExoticComponent<EdsDropdownContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-dropdown-content.d.ts.map

package/eds-dropdown/eds-dropdown-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dropdown-content.d.ts","sourceRoot":"","sources":["../../src/eds-dropdown/eds-dropdown-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,gGAa9B,CAAC"}

package/eds-dropdown/eds-dropdown-content.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsDropdownContent` — pure React port of the Angular `eds-dropdown-content` directive.
+ *
+ * Marks the content area of an `EdsDropdown`; renders the projected menu content inside the
+ * floating panel with the ARIA `menu` role. In Angular this was an attribute directive that only
+ * set `role="menu"` + the `eds-dropdown-content` class; here it is a thin projection wrapper so
+ * the same markup contract holds (`.eds-dropdown-content` + `role="menu"`).
+ */
+export const EdsDropdownContent = React.forwardRef(function EdsDropdownContent({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-dropdown-content ${className}` : 'eds-dropdown-content', role: "menu", ...rest, children: children }));
+});
+//# sourceMappingURL=eds-dropdown-content.js.map

package/eds-dropdown/eds-dropdown-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dropdown-content.js","sourceRoot":"","sources":["../../src/eds-dropdown/eds-dropdown-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAC9C,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC7D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,wBAAwB,SAAS,EAAE,CAAC,CAAC,CAAC,sBAAsB,EACnF,IAAI,EAAC,MAAM,KACP,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-dropdown/eds-dropdown-item.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export interface EdsDropdownItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Data attribute value for end-to-end testing identification. @default 'eds-dropdown-item' */
+    e2eAttr?: string;
+    /** Marks the item as currently selected/active within the dropdown. @default false */
+    isActive?: boolean;
+    /** Whether the item is disabled and not interactive. @default false */
+    edsDisabled?: boolean;
+    /**
+     * Marks this item as opening a nested submenu. When truthy a caret indicator is shown and the
+     * dropdown keyboard/hover logic treats the item as a submenu trigger. In React the actual
+     * nested panel is composed as `children` of this item (a nested `<EdsDropdown>`); pass the
+     * same nested dropdown reference (or simply `true`) so the caret + submenu semantics apply.
+     * (Angular `subDropdown` input.)
+     */
+    subDropdown?: unknown;
+    /**
+     * Internal focused state, driven by the parent `EdsDropdown` roving-tabindex key manager.
+     * Consumers do not normally set this. @default false
+     */
+    isFocused?: boolean;
+    /** Item label / content (Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsDropdownItem` — pure React port of the Angular `eds-dropdown-item` component.
+ *
+ * Renders a single selectable menu item: an inner container/content with an optional left/right
+ * caret icon when the item opens a submenu (`subDropdown`), and the label text. Reproduces the
+ * Angular `hostClasses()` BEM state classes (`--active`, `--focused`, `--disabled`,
+ * `--has-subdropdown`) and the `menuitem` role + roving `tabindex` host attributes.
+ *
+ * ⛔ CDK dropped → React API: the Angular item implemented the CDK `Highlightable` /
+ * `FocusableOption` interfaces (`setActiveStyles`/`setInactiveStyles`/`focus`/`click`/`mouseenter`)
+ * so the CDK `ActiveDescendantKeyManager` could drive it. React has no CDK — the parent
+ * `EdsDropdown` reimplements the roving key manager with refs + key handlers and passes the
+ * resulting `isFocused` down; DOM focus is moved by the parent via the item's ref. The item stays
+ * a presentational, focusable row.
+ *
+ * The source predates the String-Props model and styles off BEM modifier classes, so the React
+ * port keeps those classes (not `data-*`) to match the ported CSS 1:1.
+ */
+export declare const EdsDropdownItem: React.ForwardRefExoticComponent<EdsDropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-dropdown-item.d.ts.map

package/eds-dropdown/eds-dropdown-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dropdown-item.d.ts","sourceRoot":"","sources":["../../src/eds-dropdown/eds-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,6FAoD3B,CAAC"}

package/eds-dropdown/eds-dropdown-item.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/**
+ * `EdsDropdownItem` — pure React port of the Angular `eds-dropdown-item` component.
+ *
+ * Renders a single selectable menu item: an inner container/content with an optional left/right
+ * caret icon when the item opens a submenu (`subDropdown`), and the label text. Reproduces the
+ * Angular `hostClasses()` BEM state classes (`--active`, `--focused`, `--disabled`,
+ * `--has-subdropdown`) and the `menuitem` role + roving `tabindex` host attributes.
+ *
+ * ⛔ CDK dropped → React API: the Angular item implemented the CDK `Highlightable` /
+ * `FocusableOption` interfaces (`setActiveStyles`/`setInactiveStyles`/`focus`/`click`/`mouseenter`)
+ * so the CDK `ActiveDescendantKeyManager` could drive it. React has no CDK — the parent
+ * `EdsDropdown` reimplements the roving key manager with refs + key handlers and passes the
+ * resulting `isFocused` down; DOM focus is moved by the parent via the item's ref. The item stays
+ * a presentational, focusable row.
+ *
+ * The source predates the String-Props model and styles off BEM modifier classes, so the React
+ * port keeps those classes (not `data-*`) to match the ported CSS 1:1.
+ */
+export const EdsDropdownItem = React.forwardRef(function EdsDropdownItem({ e2eAttr = 'eds-dropdown-item', isActive = false, edsDisabled = false, subDropdown, isFocused = false, children, className, ...rest }, ref) {
+    const hasSub = !!subDropdown;
+    const hostClass = [
+        'eds-dropdown-item',
+        isActive ? 'eds-dropdown-item--active' : '',
+        isFocused ? 'eds-dropdown-item--focused' : '',
+        edsDisabled ? 'eds-dropdown-item--disabled' : '',
+        hasSub ? 'eds-dropdown-item--has-subdropdown' : '',
+        className || '',
+    ].join(' ').trim();
+    return (_jsx("div", { ref: ref, className: hostClass, role: "menuitem", tabIndex: isFocused ? 0 : -1, "aria-disabled": edsDisabled || undefined, "data-e2e": e2eAttr, ...rest, children: _jsx("div", { className: "eds-dropdown-item__container", children: _jsxs("div", { className: "eds-dropdown-item__content", children: [hasSub ? (_jsx("div", { className: "eds-dropdown-item__icon eds-dropdown-item__icon--left", children: _jsx(EdsIcon, { icon: "caret-left:core", size: "s" }) })) : null, _jsx("div", { className: "eds-dropdown-item__text", children: children }), hasSub ? (_jsx("div", { className: "eds-dropdown-item__icon eds-dropdown-item__icon--right", children: _jsx(EdsIcon, { icon: "caret-right:core", size: "s" }) })) : null] }) }) }));
+});
+//# sourceMappingURL=eds-dropdown-item.js.map

package/eds-dropdown/eds-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dropdown-item.js","sourceRoot":"","sources":["../../src/eds-dropdown/eds-dropdown-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AA0BlD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC3C,SAAS,eAAe,CACpB,EACI,OAAO,GAAG,mBAAmB,EAC7B,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,CAAC,CAAC,WAAW,CAAC;IAC7B,MAAM,SAAS,GAAG;QACd,mBAAmB;QACnB,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;QAC3C,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;QAC7C,WAAW,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE;QAChD,MAAM,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;QAClD,SAAS,IAAI,EAAE;KAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAEnB,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACb,WAAW,IAAI,SAAS,cAC7B,OAAO,KACb,IAAI,YAER,cAAK,SAAS,EAAC,8BAA8B,YACzC,eAAK,SAAS,EAAC,4BAA4B,aACtC,MAAM,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,uDAAuD,YAClE,KAAC,OAAO,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,GAAG,GAAG,GACzC,CACT,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO,EACxD,MAAM,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,wDAAwD,YACnE,KAAC,OAAO,IAAC,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,GAAG,GAAG,GAC1C,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACJ,GACJ,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-dropdown/eds-dropdown.css

@@ -0,0 +1,154 @@
+/* eds-dropdown — pure-React CSS port of eds-dropdown.scss + eds-dropdown-item.scss (1:1).
+ *
+ * The Angular source is class-based (BEM element/state classes + panel classes on the CDK
+ * overlay pane), NOT the String-Props reflected-attribute model, so per the pure-React guide the
+ * BEM class selectors are kept verbatim (the sanctioned class-based exception). The .eui-21
+ * wrapper is dropped (share-ready); --eds-* tokens flow in from the .eui-21 ancestor context.
+ * Requires the global tokens layer: import '@eui/eds-styles/dist/eds.css' first. */
+
+/* ── eds-dropdown.scss ─────────────────────────────────────────────────────── */
+
+.eds-dropdown {
+    /* Hides the spacing bug for nested sub-dropdowns */
+    .eds-dropdown {
+        display: none;
+    }
+
+    .eds-dropdown__trigger-container {
+        display: inherit;
+    }
+}
+
+/* Block variant — trigger takes full width */
+.eds-dropdown--block .eds-dropdown__trigger-container {
+    display: block;
+    width: 100%;
+}
+
+/* Panel class applied to the floating pane (portaled). */
+.eds-dropdown__panel {
+    position: inherit;
+}
+
+.eds-dropdown__panel .eds-dropdown-content {
+    display: block;
+}
+
+.eds-dropdown__panel.eds-dropdown--subdropdown-position-left
+    .eds-dropdown__panel-container
+    .eds-dropdown-item
+    .eds-dropdown-item__content
+    .eds-dropdown-item__icon.eds-dropdown-item__icon--right {
+    display: none;
+}
+
+.eds-dropdown__panel.eds-dropdown--subdropdown-position-right
+    .eds-dropdown__panel-container
+    .eds-dropdown-item
+    .eds-dropdown-item__content
+    .eds-dropdown-item__icon.eds-dropdown-item__icon--left {
+    display: none;
+}
+
+.eds-dropdown__panel-container {
+    background: var(--eds-c-surface-elevation);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-1);
+    display: block;
+    height: auto;
+    min-width: 8rem;
+    overflow: auto;
+    position: relative;
+}
+
+/* ── eds-dropdown-item.scss (:host → .eds-dropdown-item) ────────────────────── */
+
+.eds-dropdown-item {
+    background: none;
+    border: var(--eds-bw-none);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    cursor: pointer;
+    display: block;
+    outline: none;
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+    text-align: left;
+    text-decoration: none;
+    user-select: none;
+    width: 100%;
+    font: var(--eds-f-paragraph-m);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.eds-dropdown-item .eds-dropdown-item__container {
+    align-items: center;
+    display: flex;
+    min-height: 1.5rem;
+}
+
+.eds-dropdown-item .eds-dropdown-item__container .eds-dropdown-item__content {
+    align-items: center;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.eds-dropdown-item .eds-dropdown-item__content .eds-dropdown-item__text {
+    align-items: center;
+    display: flex;
+    width: 100%;
+    line-height: 1.1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.eds-dropdown-item .eds-dropdown-item__content .eds-dropdown-item__icon {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    color: var(--eds-c-foreground-subtler);
+}
+
+.eds-dropdown-item .eds-dropdown-item__content .eds-dropdown-item__icon--right {
+    margin-left: var(--eds-sp-s);
+}
+
+.eds-dropdown-item .eds-dropdown-item__content .eds-dropdown-item__icon--left {
+    margin-right: var(--eds-sp-s);
+}
+
+/* States */
+.eds-dropdown-item:hover {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-dropdown-item.eds-dropdown-item--disabled {
+    pointer-events: none;
+    color: var(--eds-c-foreground-disabled);
+}
+
+.eds-dropdown-item.eds-dropdown-item--disabled:hover {
+    background: none;
+}
+
+.eds-dropdown-item.eds-dropdown-item--active {
+    background-color: var(--eds-c-surface-selected);
+}
+
+.eds-dropdown-item.eds-dropdown-item--active.eds-dropdown-item--disabled {
+    background: none;
+}
+
+.eds-dropdown-item.eds-dropdown-item--focused {
+    outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);
+    outline-offset: -2px;
+}
+
+.eds-dropdown-item.eds-dropdown-item--focused.eds-dropdown-item--disabled {
+    background: none;
+}

package/eds-dropdown/eds-dropdown.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+/** Preferred placement of the dropdown panel relative to the trigger. Angular `position`. */
+export type EdsDropdownPosition = 'top' | 'right' | 'bottom' | 'left';
+/** Position of sub-dropdown panels for multi-level dropdowns. Angular `subDropdownPosition`. */
+export type EdsDropdownSubPosition = 'right' | 'left';
+export interface EdsDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * The trigger element (the button/anchor that opens the panel). Angular projected this as the
+     * first `<ng-content/>` inside the trigger container. In React it is a dedicated render slot.
+     */
+    trigger?: React.ReactNode;
+    /**
+     * The panel content — normally an `<EdsDropdownContent>` wrapping `<EdsDropdownItem>`s
+     * (Angular `<ng-content select="eds-dropdown-content"/>`). Rendered inside the floating panel.
+     */
+    children?: React.ReactNode;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-dropdown' */
+    e2eAttr?: string;
+    /** Tabindex for the dropdown panel. @default -1 */
+    panelTabIndex?: number;
+    /** Width for the dropdown panel (any valid CSS unit). @default 'auto' */
+    width?: string;
+    /** Max-height for the dropdown panel (any valid CSS unit). @default 'auto' */
+    height?: string;
+    /** Preferred position of the panel relative to the trigger. @default 'bottom' */
+    position?: EdsDropdownPosition;
+    /** Position of sub-dropdown panels for multi-level dropdowns. @default 'right' */
+    subDropdownPosition?: EdsDropdownSubPosition;
+    /** Whether the dropdown takes the full width of the parent container. @default false */
+    isBlock?: boolean;
+    /** Whether the menu panel is right-aligned to the trigger element. @default false */
+    isDropDownRightAligned?: boolean;
+    /** Whether the menu auto-closes when clicking inside on an item. @default true */
+    hasClosedOnClickInside?: boolean;
+    /** Whether the trigger label updates from the selected item text. @default false */
+    isLabelUpdatedFromSelectedItem?: boolean;
+    /** Whether sub-dropdowns open on hover instead of click. @default false */
+    isExpandOnHover?: boolean;
+    /** Whether tab-key navigation is allowed within dropdown content (disables auto-close). @default false */
+    hasTabNavigation?: boolean;
+    /** Whether the dropdown can be triggered with a right mouse click (context menu). @default false */
+    isRightClickEnabled?: boolean;
+    /** Whether the trigger acts as a toggle (click to open, click again to close). @default false */
+    isTriggerToggle?: boolean;
+    /** Whether the dropdown is disabled. @default false */
+    edsDisabled?: boolean;
+    /**
+     * Controlled open state. When provided (not `undefined`) the dropdown is fully controlled and
+     * the consumer reacts to `onDropdownOpenChange` / `onExpand`. When omitted the dropdown manages
+     * its own open state (trigger click / right-click / toggle). React analog of the Angular
+     * `isOpened` signal + imperative `openDropdown`/`closeDropdown`.
+     */
+    isOpen?: boolean;
+    /** Emitted when the dropdown expands (true) or collapses (false). Angular `expand` output. */
+    onExpand?: (expanded: boolean) => void;
+    /** Emitted when the open state changes. Angular `isDropdownOpen` output. */
+    onDropdownOpenChange?: (open: boolean) => void;
+    /**
+     * Emitted when a menu item is activated (click or Enter). The `element` is the activated
+     * `.eds-dropdown-item` node; `text` is its text content. Router-agnostic — url items should be
+     * rendered as `<a href>` inside items and navigation delegated to the consumer here.
+     */
+    onItemClick?: (detail: {
+        element: HTMLElement;
+        text: string;
+    }) => void;
+    /** Portal target for the panel. Defaults to `document.body`. */
+    container?: Element | null;
+}
+/**
+ * `EdsDropdown` — pure React port of the Angular `eds-dropdown`.
+ *
+ * A trigger element that opens a floating panel of `EdsDropdownItem`s (or custom content),
+ * positioned relative to the trigger, with roving-keyboard navigation, nested submenus,
+ * right-click (contextual) opening, hover-expand, block/right-aligned layout and click-outside /
+ * scroll-away dismissal. Rendered through a portal (default `document.body`).
+ *
+ * ⛔ CDK / service layer dropped → React API chosen:
+ * The Angular component wrapped `@angular/cdk` `Overlay` + `FlexibleConnectedPositionStrategy` +
+ * `GlobalPositionStrategy` (contextual menu at the pointer) + `TemplatePortal` + `cdkTrapFocus` +
+ * `cdkObserveContent` + `ScrollDispatcher` + `ActiveDescendantKeyManager`, plus RxJS
+ * `fromEvent`/`Subject`/`takeUntil` and an imperative `openDropdown(origin)`/`closeDropdown()` API.
+ * React has no CDK, so:
+ * - Overlay + portal → {@link createPortal} into `container` (default `document.body`).
+ * - `FlexibleConnectedPositionStrategy` (position pairs, flip/fallback, reposition scroll strategy)
+ *   → {@link useEdsConnectedPosition} with the new `align` extension (start/end edge alignment for
+ *   top/bottom, center for left/right — reproducing the dropdown's non-centered CDK pairs).
+ * - `GlobalPositionStrategy` (right-click contextual menu) → fixed positioning at the pointer
+ *   coordinates captured on `contextmenu`.
+ * - `ActiveDescendantKeyManager` (+ `Highlightable` items) → a roving-tabindex reimplementation
+ *   over the rendered `.eds-dropdown-item` nodes in the panel (Up/Down/Home/End with wrap, Enter to
+ *   activate, Escape/Tab to close, Arrow Left/Right for submenu per `subDropdownPosition`), toggling
+ *   the item's `--focused`/`--active` classes and moving DOM focus imperatively — matching the
+ *   Angular behavior.
+ * - RxJS keydown / outside-pointer / scroll subscriptions → document key + pointer listeners and a
+ *   scroll/resize reposition (the position hook), gated on open.
+ * - Imperative `openDropdown`/`closeDropdown` → a **controlled** `isOpen` prop OR an uncontrolled
+ *   trigger (click / right-click / toggle).
+ *
+ * The source is class-based (BEM), so the React port keeps the BEM classes (not `data-*`) to match
+ * the ported CSS 1:1.
+ */
+export declare const EdsDropdown: React.ForwardRefExoticComponent<EdsDropdownProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-dropdown.d.ts.map

package/eds-dropdown/eds-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-dropdown.d.ts","sourceRoot":"","sources":["../../src/eds-dropdown/eds-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,6FAA6F;AAC7F,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEtE,gGAAgG;AAChG,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,kFAAkF;IAClF,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;IAC7C,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,kFAAkF;IAClF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oFAAoF;IACpF,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0GAA0G;IAC1G,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oGAAoG;IACpG,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iGAAiG;IACjG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEvE,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9B;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,WAAW,yFAgWtB,CAAC"}