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

package/eds-paginator/eds-paginator.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+import { EdsSelect } from '../eds-select/eds-select.js';
+/**
+ * `EdsPaginator` — pure React port of the Angular `eds-paginator`.
+ *
+ * ## What the Angular source is
+ * A pagination control: page-size selector (native `<select>` via `edsSelect`), first/previous/
+ * next/last icon-button navigation, optional page-number buttons, an optional compact range, and a
+ * basic (minimal) mode. It exposes `page` / `pageSize` / `length` as inputs synced to internal
+ * writable signals via `effect()`; user interaction mutates the internal signals and emits
+ * `(pageChange)`. Changing `length` resets to page 0 unless `hasDynamicLength`.
+ *
+ * ## React projection
+ * - Inputs → typed props with the same defaults. `page` / `pageSize` / `length` seed internal
+ *   `useState` (mirroring the Angular input → internal-signal `effect()`s). This is the React
+ *   equivalent of Angular's "controlled seed, internal state" pattern — the parent seeds the
+ *   values and observes changes through `onPageChange`.
+ * - `computed()` values (`nbPage`, `pageNumberNavigation`, `range`, disabled flags…) → derived
+ *   consts in render, matching the Angular formulas verbatim.
+ * - Sub-components compose the pure-React `EdsIconButton` (nav) and `EdsSelect` (page size),
+ *   matching the Angular template's `edsIconButton` / `edsSelect` usage. Page-number buttons are
+ *   plain `<button class="eds-paginator__page-number">` (the Angular `edsButton` tertiary is
+ *   styled via the ported CSS class).
+ * - Router-agnostic: no navigation links, only the `onPageChange` callback (guide rule 6).
+ * - `isHidden` reflects as the `eds-paginator--hidden` class (matches the Angular `hostClasses()`
+ *   BEM string — guide rule 9), `e2eAttr` as `data-e2e`.
+ */
+export const EdsPaginator = React.forwardRef(function EdsPaginator({ e2eAttr = 'eds-paginator', length = 0, pageSize = 10, page = 0, pageSizeOptions = [5, 10, 25, 50, 100], nbPageNumberNavigation = 5, isHidden = false, isBasicMode = false, hasPageNumberNavigation = false, hasPageNumberNavigationCompact = false, hasDynamicLength = false, hasPageSize = true, onPageChange, className, children: _children, ...rest }, ref) {
+    // Internal writable state (mirrors internalPage / internalPageSize / internalLength signals).
+    const [internalPage, setInternalPage] = useState(page);
+    const [internalPageSize, setInternalPageSize] = useState(pageSize);
+    const [internalLength, setInternalLength] = useState(length);
+    const prevLengthRef = useRef(length);
+    // effect: sync page input → internal signal.
+    useEffect(() => {
+        setInternalPage(page);
+    }, [page]);
+    // effect: sync pageSize input → internal signal.
+    useEffect(() => {
+        setInternalPageSize(pageSize);
+    }, [pageSize]);
+    // effect: sync length input → internal signal, resetting to page 0 unless dynamic length.
+    useEffect(() => {
+        const prevLen = prevLengthRef.current;
+        setInternalLength(length);
+        if (length !== prevLen && !hasDynamicLength) {
+            setInternalPage(0);
+        }
+        prevLengthRef.current = length;
+    }, [length, hasDynamicLength]);
+    // computed: nbPage.
+    const nbPage = internalPageSize > 0 ? Math.ceil(internalLength / internalPageSize) : 0;
+    // computed: effectiveNbPageNumberNav.
+    const effectiveNbPageNumberNav = nbPage < nbPageNumberNavigation ? nbPage : nbPageNumberNavigation;
+    // computed: pageNumberNavigation (verbatim from the Angular formula).
+    const pageNumberNavigation = (() => {
+        const total = nbPage;
+        const navCount = effectiveNbPageNumberNav;
+        const currentPage = internalPage;
+        if (navCount <= 0 || total <= 0) {
+            return [];
+        }
+        const delta = Math.floor(navCount / 2);
+        let start = currentPage - delta;
+        if (total - currentPage <= navCount - (delta + 1)) {
+            start = total - navCount;
+        }
+        if (start < 0) {
+            start = 0;
+        }
+        const end = start + navCount;
+        const pages = [];
+        for (let i = start; i < end && i < total; i++) {
+            pages.push(i);
+        }
+        return pages;
+    })();
+    // computed: range (e.g. "1–10").
+    const range = (() => {
+        if (internalLength <= 0) {
+            return '';
+        }
+        const from = internalPage * internalPageSize + 1;
+        const limit = internalPage * internalPageSize + internalPageSize;
+        const to = limit <= internalLength ? limit : internalLength;
+        return `${from}–${to}`;
+    })();
+    // computed: rangeLength.
+    const rangeLength = internalLength > 0 ? internalLength.toString() : '';
+    // computed: disabled flags.
+    const isPrevDisabled = internalPage === 0 || internalLength === 0;
+    const isNextDisabled = internalPage + 1 >= nbPage || internalLength === 0;
+    const emitPageChange = (nextPage, nextPageSize) => {
+        const nextNbPage = nextPageSize > 0 ? Math.ceil(internalLength / nextPageSize) : 0;
+        onPageChange?.({ page: nextPage, pageSize: nextPageSize, nbPage: nextNbPage });
+    };
+    const goFirstPage = () => {
+        setInternalPage(0);
+        emitPageChange(0, internalPageSize);
+    };
+    const goPreviousPage = () => {
+        if (internalPage <= 0) {
+            return;
+        }
+        const next = internalPage - 1;
+        setInternalPage(next);
+        emitPageChange(next, internalPageSize);
+    };
+    const goNextPage = () => {
+        if (internalPage + 1 >= nbPage) {
+            return;
+        }
+        const next = internalPage + 1;
+        setInternalPage(next);
+        emitPageChange(next, internalPageSize);
+    };
+    const goLastPage = () => {
+        const lastPage = Math.max(0, nbPage - 1);
+        setInternalPage(lastPage);
+        emitPageChange(lastPage, internalPageSize);
+    };
+    const goToPage = (targetPage) => {
+        const clamped = Math.max(0, Math.min(targetPage, nbPage - 1));
+        setInternalPage(clamped);
+        emitPageChange(clamped, internalPageSize);
+    };
+    const onPageSizeChange = (size) => {
+        const parsed = parseInt(size, 10);
+        setInternalPageSize(parsed);
+        setInternalPage(0);
+        emitPageChange(0, parsed);
+    };
+    const rootClass = ['eds-paginator', isHidden ? 'eds-paginator--hidden' : '', className ?? '']
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return (_jsxs("nav", { ref: ref, className: rootClass, "data-e2e": e2eAttr, ...rest, children: [_jsx("div", { className: "eds-paginator__page", children: !isBasicMode && hasPageSize && (_jsxs("div", { className: hasPageNumberNavigationCompact
+                        ? 'eds-paginator__page-selector-wrapper eds-paginator__page-selector-wrapper--compact'
+                        : 'eds-paginator__page-selector-wrapper', children: [_jsxs("div", { className: "eds-paginator__page-selector", children: [_jsx("span", { className: "eds-paginator__page-selector-label", children: "Items per page:" }), _jsx(EdsSelect, { className: "eds-paginator__page-size-select", ariaLabel: "Items per page", value: String(internalPageSize), onChange: (value) => onPageSizeChange(Array.isArray(value) ? value[0] : value), children: pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), internalLength > 0 && (_jsxs("div", { className: "eds-paginator__page-range-main", role: "status", children: [range, " of ", rangeLength] }))] })) }), _jsx("div", { className: "eds-paginator__navigation", "aria-label": `Pagination navigation, ${rangeLength} total items`, children: isBasicMode ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-left:core", ariaLabel: "Go to previous page", disabled: isPrevDisabled, onButtonClick: goPreviousPage }) }), _jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-right:core", ariaLabel: "Go to next page", disabled: isNextDisabled, onButtonClick: goNextPage }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-double-left:core", ariaLabel: "Go to first page", disabled: isPrevDisabled, onButtonClick: goFirstPage }) }), _jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-left:core", ariaLabel: "Go to previous page", disabled: isPrevDisabled, onButtonClick: goPreviousPage }) }), hasPageNumberNavigation && (_jsx("div", { className: "eds-paginator__navigation-numbers", children: pageNumberNavigation.map((pageNumber) => {
+                                const isActive = pageNumber === internalPage;
+                                return (_jsx("button", { type: "button", className: isActive
+                                        ? 'eds-paginator__page-number eds-paginator__page-number--active'
+                                        : 'eds-paginator__page-number', "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${pageNumber + 1}`, onClick: () => goToPage(pageNumber), children: pageNumber + 1 }, pageNumber));
+                            }) })), internalLength > 0 && (_jsxs("div", { className: "eds-paginator__page-range", role: "status", children: [range, " of ", rangeLength] })), _jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-right:core", ariaLabel: "Go to next page", disabled: isNextDisabled, onButtonClick: goNextPage }) }), _jsx("div", { className: "eds-paginator__navigation-item", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "caret-double-right:core", ariaLabel: "Go to last page", disabled: isNextDisabled, onButtonClick: goLastPage }) })] })) })] }));
+});
+//# sourceMappingURL=eds-paginator.js.map

package/eds-paginator/eds-paginator.js.map

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

package/eds-paginator/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsPaginator } from './eds-paginator.js';
+export type { EdsPaginatorProps, EdsPaginationEvent } from './eds-paginator.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-paginator/index.js

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

package/eds-paginator/index.js.map

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

package/eds-popover/eds-popover.css

@@ -0,0 +1,195 @@
+/* eds-popover — pure-React CSS port of eds-popover.scss (1:1).
+ *
+ * The Angular source is class-based (computed panel classes + .eds-popover-position--<side>
+ * modifiers), 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. */
+
+/* Optional backdrop (Angular hasBackdrop overlay). */
+.eds-popover-backdrop {
+    inset: 0;
+    position: fixed;
+    z-index: 1000;
+}
+
+/* Inline anchor wrapper for the `anchor` render slot. */
+.eds-popover-anchor {
+    display: inline-flex;
+}
+
+/* POSITION & ARROW STYLES (applied on the position wrapper) */
+.eds-popover-position {
+    z-index: 1001;
+}
+
+.eds-popover-position .eds-popover__arrow {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 8px;
+    color: var(--eds-c-border-divider);
+    display: none;
+    height: 0;
+    position: absolute;
+    width: 0;
+}
+
+.eds-popover-position .eds-popover__arrow-inner {
+    border-color: var(--eds-c-surface-elevation);
+    border-style: solid;
+    border-width: 7px;
+    content: " ";
+    display: block;
+    height: 0;
+    position: absolute;
+    width: 0;
+}
+
+.eds-popover-position--top .eds-popover__arrow,
+.eds-popover-position--bottom .eds-popover__arrow,
+.eds-popover-position--left .eds-popover__arrow,
+.eds-popover-position--right .eds-popover__arrow {
+    display: block;
+}
+
+.eds-popover-position--top .eds-popover__arrow,
+.eds-popover-position--bottom .eds-popover__arrow {
+    border-left-color: transparent;
+    border-right-color: transparent;
+    left: 50%;
+    transform: translateX(-8px);
+}
+
+.eds-popover-position--top .eds-popover__arrow-inner,
+.eds-popover-position--bottom .eds-popover__arrow-inner {
+    border-left-color: transparent;
+    border-right-color: transparent;
+    margin-left: -7px;
+}
+
+.eds-popover-position--top .eds-popover__arrow {
+    border-bottom-width: 0;
+    bottom: -7px;
+}
+
+.eds-popover-position--top .eds-popover__arrow-inner {
+    border-bottom-width: 0;
+    bottom: 2px;
+}
+
+.eds-popover-position--bottom .eds-popover__arrow {
+    border-top-width: 0;
+    top: -7px;
+}
+
+.eds-popover-position--bottom .eds-popover__arrow-inner {
+    border-top-width: 0;
+    top: 1px;
+}
+
+.eds-popover-position--left .eds-popover__arrow,
+.eds-popover-position--right .eds-popover__arrow {
+    border-bottom-color: transparent;
+    border-top-color: transparent;
+    top: 50%;
+    transform: translateY(-8px);
+}
+
+.eds-popover-position--left .eds-popover__arrow-inner,
+.eds-popover-position--right .eds-popover__arrow-inner {
+    border-bottom-color: transparent;
+    border-top-color: transparent;
+    top: -7px;
+}
+
+.eds-popover-position--left .eds-popover__arrow {
+    border-right-width: 0;
+    right: -7px;
+}
+
+.eds-popover-position--left .eds-popover__arrow-inner {
+    border-right-width: 0;
+    right: 2px;
+}
+
+.eds-popover-position--right .eds-popover__arrow {
+    border-left-width: 0;
+    left: -7px;
+}
+
+.eds-popover-position--right .eds-popover__arrow-inner {
+    border-left-width: 0;
+    border-right-color: var(--eds-c-surface-elevation);
+    left: 2px;
+}
+
+/* POPOVER PANEL STYLES */
+.eds-popover {
+    display: flex;
+    width: 25rem;
+}
+
+.eds-popover--has-custom-width {
+    width: auto !important;
+}
+
+.eds-popover--size-s {
+    max-width: 12rem;
+    width: 12rem;
+}
+
+.eds-popover--size-m {
+    max-width: 25rem;
+    width: 25rem;
+}
+
+.eds-popover--size-l {
+    max-width: 35rem;
+    width: 35rem;
+}
+
+.eds-popover--size-xl {
+    max-width: 50rem;
+    width: 50rem;
+}
+
+.eds-popover--size-2xl {
+    max-width: 75rem;
+    width: 75rem;
+}
+
+.eds-popover--size-auto {
+    max-width: none;
+    width: auto;
+}
+
+.eds-popover .eds-popover__container {
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-1);
+    width: 100%;
+}
+
+.eds-popover .eds-popover__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--eds-sp-s) var(--eds-sp-s) 0 var(--eds-sp-s);
+}
+
+.eds-popover .eds-popover__header--close-only {
+    justify-content: flex-end;
+}
+
+.eds-popover .eds-popover__header-title {
+    font: var(--eds-f-label-m-semi-bold);
+}
+
+.eds-popover .eds-popover__content {
+    padding: var(--eds-sp-s);
+}
+
+.eds-popover .eds-popover__content--no-padding {
+    padding: 0;
+}

package/eds-popover/eds-popover.d.ts

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { type EdsConnectedPlacement } from './use-eds-connected-position.js';
+/**
+ * Preferred placement of the popover relative to its anchor — ported verbatim from the Angular
+ * `EdsPopoverPosition` local union (`'top' | 'right' | 'bottom' | 'left'`). The popover falls
+ * back to alternative sides if the preferred one does not fit the viewport (see
+ * {@link useEdsConnectedPosition}).
+ */
+export type EdsPopoverPosition = EdsConnectedPlacement;
+/**
+ * Size variant of the popover panel — projected from the Angular host `EdsSizeDirective` inputs
+ * (`edsSizeS/M/L/XL/2XL/Auto`). Reflected as `data-size` and styled by
+ * `.eds-popover[data-size="…"]`. When a `width` is provided it overrides the size variant
+ * (Angular `eds-popover--has-custom-width`).
+ */
+export type EdsPopoverSize = 's' | 'm' | 'l' | 'xl' | '2xl' | 'auto';
+/**
+ * How the popover opens/closes when `isOpen` is not controlled by the consumer — the React
+ * analog of the Angular imperative `openPopover(origin)` / `closePopover()` API.
+ * - `'click'`  — toggles open on anchor click (default).
+ * - `'hover'`  — opens on anchor mouseenter, closes on mouseleave.
+ * - `'manual'` — never opens itself; the consumer drives `isOpen` (fully controlled).
+ * @default 'click'
+ */
+export type EdsPopoverTrigger = 'click' | 'hover' | 'manual';
+export interface EdsPopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * The anchor element the popover is positioned against (Angular `origin` passed to
+     * `openPopover`). Provide EITHER `anchorRef` OR `anchor` (a render function / element used as
+     * the trigger — see `anchor`). If both are omitted the popover cannot position itself.
+     */
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Optional trigger element rendered before the panel; its wrapping element becomes the
+     * positioning anchor and receives the `trigger` interaction handlers. Use this for the common
+     * "button that opens a popover" case without wiring an external ref.
+     */
+    anchor?: React.ReactNode;
+    /** Optional title text shown in the popover header. Angular `title`. @default undefined */
+    title?: string;
+    /**
+     * Preferred placement relative to the anchor; falls back if it doesn't fit. Angular
+     * `position`. @default 'bottom'
+     */
+    position?: EdsPopoverPosition;
+    /** Size variant of the panel (from the Angular host size directive). @default 'm' */
+    size?: EdsPopoverSize;
+    /**
+     * Custom width (any valid CSS length). When set, overrides the `size` variant width. Angular
+     * `width`. @default '' (use size variant)
+     */
+    width?: string;
+    /** Whether to render a semi-transparent backdrop behind the popover. Angular `hasBackDrop`. @default false */
+    hasBackDrop?: boolean;
+    /** Whether to show the close button in the header. Angular `hasCloseButton`. @default true */
+    hasCloseButton?: boolean;
+    /** Whether clicking outside the popover dismisses it. Angular `isDismissable`. @default true */
+    isDismissable?: boolean;
+    /** Whether to remove the default content padding. Angular `hasNoContentPadding`. @default false */
+    hasNoContentPadding?: boolean;
+    /**
+     * Controlled open state. When provided (not `undefined`) the popover is fully controlled and
+     * the consumer must react to `onPopoverOpen` / `onPopoverClose` / `onOpenChange`. When omitted
+     * the popover manages its own open state via `trigger`. The React analog of the Angular
+     * `isOpen` getter + imperative open/close.
+     */
+    isOpen?: boolean;
+    /** How the popover opens/closes when uncontrolled. @default 'click' */
+    trigger?: EdsPopoverTrigger;
+    /** Portal target for the panel. Defaults to `document.body`. */
+    container?: Element | null;
+    /** Emitted when a click occurs outside the popover boundaries. Angular `outsideClick` output. */
+    onOutsideClick?: () => void;
+    /** Emitted when the popover opens. Angular `popoverOpen` output. */
+    onPopoverOpen?: () => void;
+    /** Emitted when the popover closes. Angular `popoverClose` output. */
+    onPopoverClose?: () => void;
+    /** Emitted whenever the open state changes (convenience for controlled usage). */
+    onOpenChange?: (open: boolean) => void;
+    /** Popover body content (Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsPopover` — pure React port of the Angular `eds-popover`.
+ *
+ * A floating panel anchored to a trigger element, positioned by {@link useEdsConnectedPosition}
+ * (connected/anchor-relative placement with viewport flip/fallback), rendered through a portal
+ * (default `document.body`). It reproduces the Angular template structure verbatim: an arrow, an
+ * optional header (title + close button, or close-only), and a content region.
+ *
+ * ⛔ CDK layer dropped → React API chosen:
+ * The Angular component wrapped `@angular/cdk` `Overlay` + `FlexibleConnectedPositionStrategy` +
+ * `TemplatePortal` + `cdkTrapFocus` + `cdkObserveContent` + `ScrollDispatcher`, and exposed an
+ * imperative `openPopover(origin)` / `closePopover()` 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} (reusable by Batch C).
+ * - `cdkTrapFocus` + `cdkTrapFocusAutoCapture` → {@link useEdsFocusTrap} (reused from eds-overlay).
+ * - Imperative `openPopover(origin)` → a **controlled** `isOpen` prop OR a `trigger`
+ *   ('click' | 'hover' | 'manual') + `anchorRef`/`anchor` (uncontrolled). The Angular `origin`
+ *   `ElementRef` becomes `anchorRef` (or the `anchor` render slot).
+ * - Escape close (`onKeyDown` in the panel) and outside-click dismissal
+ *   (`overlayRef.outsidePointerEvents()` gated by `isDismissable`) → document key/pointer hooks.
+ * - `cdkObserveContent` (content-change re-measure) is not needed: the position hook re-measures
+ *   on layout, scroll, and resize; content changes that alter panel size flow through the next
+ *   scroll/resize or open transition. The scroll-away auto-close (`isVisible`/`ScrollDispatcher`)
+ *   is NOT ported — the connected reposition keeps the panel attached instead (flagged in hand-off).
+ */
+export declare const EdsPopover: React.ForwardRefExoticComponent<EdsPopoverProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-popover.d.ts","sourceRoot":"","sources":["../../src/eds-popover/eds-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEH,KAAK,qBAAqB,EAC7B,MAAM,iCAAiC,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAErE;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,qFAAqF;IACrF,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8GAA8G;IAC9G,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gGAAgG;IAChG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mGAAmG;IACnG,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kFAAkF;IAClF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,wFAwPrB,CAAC"}

package/eds-popover/eds-popover.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useEdsFocusTrap } from '../eds-overlay/use-eds-focus-trap.js';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+import { useEdsConnectedPosition, } from './use-eds-connected-position.js';
+/**
+ * `EdsPopover` — pure React port of the Angular `eds-popover`.
+ *
+ * A floating panel anchored to a trigger element, positioned by {@link useEdsConnectedPosition}
+ * (connected/anchor-relative placement with viewport flip/fallback), rendered through a portal
+ * (default `document.body`). It reproduces the Angular template structure verbatim: an arrow, an
+ * optional header (title + close button, or close-only), and a content region.
+ *
+ * ⛔ CDK layer dropped → React API chosen:
+ * The Angular component wrapped `@angular/cdk` `Overlay` + `FlexibleConnectedPositionStrategy` +
+ * `TemplatePortal` + `cdkTrapFocus` + `cdkObserveContent` + `ScrollDispatcher`, and exposed an
+ * imperative `openPopover(origin)` / `closePopover()` 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} (reusable by Batch C).
+ * - `cdkTrapFocus` + `cdkTrapFocusAutoCapture` → {@link useEdsFocusTrap} (reused from eds-overlay).
+ * - Imperative `openPopover(origin)` → a **controlled** `isOpen` prop OR a `trigger`
+ *   ('click' | 'hover' | 'manual') + `anchorRef`/`anchor` (uncontrolled). The Angular `origin`
+ *   `ElementRef` becomes `anchorRef` (or the `anchor` render slot).
+ * - Escape close (`onKeyDown` in the panel) and outside-click dismissal
+ *   (`overlayRef.outsidePointerEvents()` gated by `isDismissable`) → document key/pointer hooks.
+ * - `cdkObserveContent` (content-change re-measure) is not needed: the position hook re-measures
+ *   on layout, scroll, and resize; content changes that alter panel size flow through the next
+ *   scroll/resize or open transition. The scroll-away auto-close (`isVisible`/`ScrollDispatcher`)
+ *   is NOT ported — the connected reposition keeps the panel attached instead (flagged in hand-off).
+ */
+export const EdsPopover = React.forwardRef(function EdsPopover({ anchorRef, anchor, title, position = 'bottom', size = 'm', width = '', hasBackDrop = false, hasCloseButton = true, isDismissable = true, hasNoContentPadding = false, isOpen, trigger = 'click', container, onOutsideClick, onPopoverOpen, onPopoverClose, onOpenChange, children, className, ...rest }, ref) {
+    const isControlled = isOpen !== undefined;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = isControlled ? isOpen : internalOpen;
+    // Internal anchor ref used when the consumer passes the `anchor` render slot rather than a ref.
+    const internalAnchorRef = useRef(null);
+    const activeAnchorRef = (anchorRef ?? internalAnchorRef);
+    const panelRef = useRef(null);
+    const arrowRef = useRef(null);
+    const wasOpen = useRef(false);
+    useEdsFocusTrap(panelRef, open);
+    const { style: panelStyle, placement } = useEdsConnectedPosition(activeAnchorRef, panelRef, position, open);
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const closePopover = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    // Fire popoverOpen / popoverClose on open-state transitions (Angular outputs).
+    useEffect(() => {
+        if (open && !wasOpen.current) {
+            onPopoverOpen?.();
+        }
+        else if (!open && wasOpen.current) {
+            onPopoverClose?.();
+        }
+        wasOpen.current = open;
+    }, [open, onPopoverOpen, onPopoverClose]);
+    // Angular (keydown)="onKeyDown" on the panel — Escape closes.
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                closePopover();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, closePopover]);
+    // Angular overlayRef.outsidePointerEvents() gated by isDismissable — outside click dismisses.
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            const panel = panelRef.current;
+            const anchorEl = activeAnchorRef.current;
+            if (panel?.contains(target) || anchorEl?.contains(target)) {
+                return;
+            }
+            onOutsideClick?.();
+            if (isDismissable) {
+                closePopover();
+            }
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        return () => document.removeEventListener('pointerdown', onPointerDown, true);
+    }, [open, isDismissable, onOutsideClick, closePopover, activeAnchorRef]);
+    // Arrow nudge toward the anchor's center — ported from the Angular EdsPopoverArrowPosition
+    // directive. On top/bottom placements it shifts the arrow horizontally toward the anchor
+    // center; on left/right it shifts it vertically. Runs after positioning.
+    useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        const arrow = arrowRef.current;
+        const anchorEl = activeAnchorRef.current;
+        if (!arrow || !anchorEl) {
+            return;
+        }
+        // Reset before measuring so repeated recomputes are idempotent.
+        arrow.style.cssText = '';
+        const arrowRect = arrow.getBoundingClientRect();
+        const originRect = anchorEl.getBoundingClientRect();
+        const bodyWidth = document.body.clientWidth;
+        const bodyHeight = document.body.clientHeight;
+        if (placement === 'left' || placement === 'right') {
+            const verticalDiff = Math.floor(arrowRect.top + arrowRect.height / 2) -
+                Math.floor(originRect.top + originRect.height / 2);
+            if (verticalDiff > 0) {
+                arrow.style.top = `${originRect.top + originRect.height / 2}px`;
+            }
+            else if (verticalDiff < 0) {
+                arrow.style.bottom = `${bodyHeight - originRect.bottom + originRect.height / 2 - arrowRect.height}px`;
+            }
+        }
+        else {
+            const horizontalDiff = Math.floor(arrowRect.left + arrowRect.width / 2) -
+                Math.floor(originRect.left + originRect.width / 2);
+            if (horizontalDiff > 0) {
+                arrow.style.left = `${originRect.left + originRect.width / 2}px`;
+            }
+            else if (horizontalDiff < 0) {
+                arrow.style.right = `${bodyWidth - originRect.right + originRect.width / 2 - arrowRect.width}px`;
+            }
+        }
+    }, [open, placement, panelStyle, activeAnchorRef]);
+    // Trigger interaction handlers (uncontrolled modes).
+    const anchorHandlers = !isControlled && trigger !== 'manual'
+        ? trigger === 'click'
+            ? { onClick: () => setOpen(!open) }
+            : { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }
+        : {};
+    const hasCustomWidth = width !== '';
+    // .eds-popover-position wrapper carries the placement modifier that drives arrow display/orientation.
+    const positionClasses = `eds-popover-position eds-popover-position--${placement}`;
+    // .eds-popover panel classes (Angular getPanelClasses(): base + size + has-custom-width).
+    const panelClasses = ['eds-popover', `eds-popover--size-${size}`];
+    if (hasCustomWidth) {
+        panelClasses.push('eds-popover--has-custom-width');
+    }
+    if (className) {
+        panelClasses.push(className);
+    }
+    const panel = open ? (_jsxs(_Fragment, { children: [hasBackDrop && _jsx("div", { className: "eds-popover-backdrop" }), _jsx("div", { className: positionClasses, style: panelStyle, children: _jsx("div", { ref: ref, className: panelClasses.join(' '), style: width ? { width } : undefined, ...rest, children: _jsxs("div", { ref: panelRef, className: "eds-popover__container", style: width ? { width } : undefined, role: "dialog", "aria-labelledby": title ? 'eds-popover-title' : undefined, "aria-label": !title ? 'Popover' : undefined, children: [_jsx("div", { ref: arrowRef, className: "eds-popover__arrow", children: _jsx("div", { className: "eds-popover__arrow-inner" }) }), title ? (_jsxs("div", { className: "eds-popover__header", children: [_jsx("div", { className: "eds-popover__header-title", id: "eds-popover-title", children: title }), hasCloseButton && (_jsx(EdsIconButton, { size: "s", color: "neutral", icon: "x:core", ariaLabel: "Close popover", onButtonClick: closePopover }))] })) : (hasCloseButton && (_jsx("div", { className: "eds-popover__header eds-popover__header--close-only", children: _jsx(EdsIconButton, { size: "s", color: "neutral", icon: "x:core", ariaLabel: "Close popover", onButtonClick: closePopover }) }))), _jsx("div", { className: hasNoContentPadding
+                                    ? 'eds-popover__content eds-popover__content--no-padding'
+                                    : 'eds-popover__content', children: children })] }) }) })] })) : null;
+    const portalTarget = container ?? (typeof document !== 'undefined' ? document.body : null);
+    const portal = panel && portalTarget ? createPortal(panel, portalTarget) : panel;
+    // Render the anchor slot (if provided) inline; the panel is portaled.
+    if (anchor !== undefined && !anchorRef) {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { ref: internalAnchorRef, className: "eds-popover-anchor", ...anchorHandlers, children: anchor }), portal] }));
+    }
+    return portal;
+});
+//# sourceMappingURL=eds-popover.js.map