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

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

package/eds-popover/eds-popover.js.map

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

package/eds-popover/index.d.ts

@@ -0,0 +1,5 @@
+export { EdsPopover } from './eds-popover.js';
+export type { EdsPopoverProps, EdsPopoverPosition, EdsPopoverSize, EdsPopoverTrigger, } from './eds-popover.js';
+export { useEdsConnectedPosition } from './use-eds-connected-position.js';
+export type { EdsConnectedPlacement, EdsConnectedAlign, EdsConnectedPositionResult, } from './use-eds-connected-position.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACR,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,iBAAiB,GACpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,YAAY,EACR,qBAAqB,EACrB,iBAAiB,EACjB,0BAA0B,GAC7B,MAAM,iCAAiC,CAAC"}

package/eds-popover/index.js

@@ -0,0 +1,3 @@
+export { EdsPopover } from './eds-popover.js';
+export { useEdsConnectedPosition } from './use-eds-connected-position.js';
+//# sourceMappingURL=index.js.map

package/eds-popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC"}

package/eds-popover/use-eds-connected-position.d.ts

@@ -0,0 +1,90 @@
+/**
+ * `useEdsConnectedPosition` — pure-React reimplementation of the Angular CDK
+ * `FlexibleConnectedPositionStrategy` used by `eds-popover` (and reusable by the Batch C
+ * connected-overlay components: dropdown / autocomplete / multiselect).
+ *
+ * ## What the Angular source did (and this replaces)
+ *
+ * The Angular `eds-popover` opened a CDK overlay with
+ * `overlay.position().flexibleConnectedTo(origin).withPositions(preferredPositions)`, where the
+ * preferred positions were four `ConnectionPositionPair`s (`TOP`, `BOTTOM`, `LEFT`, `RIGHT` in
+ * `eds-popover-position.ts`) and the preferred order rotated by the `position` input:
+ *
+ * | `position` input | preferred order (first that fits wins) |
+ * |------------------|----------------------------------------|
+ * | `'top'`          | `[TOP, BOTTOM, LEFT, RIGHT]`            |
+ * | `'right'`        | `[RIGHT, LEFT, TOP, BOTTOM]`            |
+ * | `'left'`         | `[LEFT, RIGHT, TOP, BOTTOM]`            |
+ * | `'bottom'` (def) | `[BOTTOM, TOP, LEFT, RIGHT]`            |
+ *
+ * Each `ConnectionPositionPair` anchored an origin point to an overlay point (the CDK
+ * `originX/originY` ↔ `overlayX/overlayY` contract), with `withFlexibleDimensions(false)` and
+ * `withLockedPosition(true)`. The four EDS pairs were:
+ *
+ * - `TOP`    — origin `center/top`    ↔ overlay `center/bottom` (panel above, centered).
+ * - `BOTTOM` — origin `center/bottom` ↔ overlay `center/top`    (panel below, centered).
+ * - `LEFT`   — origin `start/center`  ↔ overlay `end/center`    (panel to the left, centered).
+ * - `RIGHT`  — origin `end/center`    ↔ overlay `start/center`  (panel to the right, centered).
+ *
+ * The active pair reported back a resolved `EdsConnectedPlacement` (`top|bottom|left|right`),
+ * which the popover fed to the arrow-positioning logic. This hook reproduces all of that with
+ * `getBoundingClientRect` math and a viewport-fit fallback loop — no CDK.
+ *
+ * ## Placement union (⛔ preserved verbatim from the source for downstream reuse)
+ *
+ * The Angular `EdsPopoverPosition` union is exactly `'top' | 'right' | 'bottom' | 'left'` — four
+ * side placements, always center-aligned along the cross axis (the CDK pairs used `center` for
+ * the cross axis on every side). This hook exposes that same four-value union as
+ * {@link EdsConnectedPlacement}. Batch C components that need start/center/end cross-axis
+ * alignments should extend this union and the anchor-point map rather than redefine the math.
+ *
+ * ## Behavior
+ *
+ * - Computes fixed (viewport) coordinates for the panel from the anchor's
+ *   `getBoundingClientRect()` and the panel's own measured size.
+ * - Tries the preferred placement first, then the source's fallback order; the first placement
+ *   that fully fits in the viewport wins. If none fit, the preferred placement is used (locked,
+ *   matching `withLockedPosition(true)` — the panel is not squeezed/resized, mirroring
+ *   `withFlexibleDimensions(false)`).
+ * - Recomputes on `scroll` (capture, catches ancestor scrolls) and `resize` while `open`,
+ *   mirroring the CDK reposition scroll strategy.
+ *
+ * @param anchorRef ref to the trigger/origin element the panel is positioned against.
+ * @param panelRef  ref to the floating panel element being positioned.
+ * @param placement preferred side placement (default `'bottom'`, matching the Angular default).
+ * @param open      whether the panel is currently open (positioning + listeners are active only when true).
+ * @param offset    gap in px between the anchor and the panel (default `0`, matching the CDK pairs' `0,0` offsets).
+ * @returns `{ style, placement }` — `style` is a `position: fixed` style object to spread on the
+ *   panel; `placement` is the resolved side actually used (for arrow orientation).
+ */
+export type EdsConnectedPlacement = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Cross-axis alignment of the panel against the anchor — an EXTENSION over the popover's
+ * center-only pairs, added for `eds-dropdown`.
+ *
+ * The Angular `eds-dropdown` did NOT center the panel: for `top`/`bottom` placements it aligned
+ * the panel's horizontal edge to the trigger (CDK `originX/overlayX` = `start`/`start`, or
+ * `end`/`end` when `isDropDownRightAligned`), and for `left`/`right` it aligned the vertical
+ * center (`overlayY: center`). The popover only ever used `center`, so this hook gained an
+ * optional `align` parameter to reproduce the dropdown's edge alignment without forking the math:
+ *
+ * - `'start'`  — top/bottom: panel left edge on the anchor left edge. left/right: panel top edge
+ *   on the anchor top edge.
+ * - `'center'` — the original popover behavior (cross-axis centered). This is the default, so the
+ *   popover's calls are unchanged.
+ * - `'end'`    — top/bottom: panel right edge on the anchor right edge. left/right: panel bottom
+ *   edge on the anchor bottom edge.
+ */
+export type EdsConnectedAlign = 'start' | 'center' | 'end';
+export interface EdsConnectedPositionResult {
+    /** `position: fixed` style (top/left in px) to spread onto the panel element. */
+    style: {
+        position: 'fixed';
+        top: number;
+        left: number;
+    };
+    /** The side placement actually resolved after the viewport-fit fallback. */
+    placement: EdsConnectedPlacement;
+}
+export declare function useEdsConnectedPosition(anchorRef: React.RefObject<HTMLElement | null>, panelRef: React.RefObject<HTMLElement | null>, placement?: EdsConnectedPlacement, open?: boolean, offset?: number, align?: EdsConnectedAlign): EdsConnectedPositionResult;
+//# sourceMappingURL=use-eds-connected-position.d.ts.map

package/eds-popover/use-eds-connected-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-eds-connected-position.d.ts","sourceRoot":"","sources":["../../src/eds-popover/use-eds-connected-position.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE3D,MAAM,WAAW,0BAA0B;IACvC,iFAAiF;IACjF,KAAK,EAAE;QACH,QAAQ,EAAE,OAAO,CAAC;QAClB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,4EAA4E;IAC5E,SAAS,EAAE,qBAAqB,CAAC;CACpC;AAmFD,wBAAgB,uBAAuB,CACnC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,SAAS,GAAE,qBAAgC,EAC3C,IAAI,GAAE,OAAe,EACrB,MAAM,GAAE,MAAU,EAClB,KAAK,GAAE,iBAA4B,GACpC,0BAA0B,CA8D5B"}