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

package/eds-tabs/eds-tabs.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { EdsIconButton } from '../eds-icon-button/eds-icon-button.js';
+import { EdsTab } from './eds-tab.js';
+import { EdsTabBody } from './eds-tab-body.js';
+import { EdsTabHeader, renderTabHeaderContent } from './eds-tab-header.js';
+import { EdsTabsContext } from './eds-tabs-context.js';
+const STEP_MOVE = 400;
+const SCROLL_OFFSET = 40;
+/** Read the header + body slots and config from an `EdsTab` element's children. */
+function resolveTab(tabElement) {
+    let header = null;
+    let body = null;
+    let bodyProps = null;
+    React.Children.forEach(tabElement.props.children, (child) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        if (child.type === EdsTabHeader) {
+            header = child.props.children;
+        }
+        else if (child.type === EdsTabBody) {
+            bodyProps = child.props;
+            body = child.props.children;
+        }
+    });
+    return { props: tabElement.props, header, body, bodyProps };
+}
+/** Whether an element is (or contains) a natively focusable element (Angular `isFocusableElement`). */
+function containsFocusableElement(root) {
+    if (!root) {
+        return false;
+    }
+    return !!root.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+}
+/**
+ * `EdsTabs` — pure React port of the Angular `eds-tabs`.
+ *
+ * Renders a WAI-ARIA tabs pattern: a `role="tablist"` of `role="tab"` items and a single active
+ * `role="tabpanel"`. It reads its `EdsTab` children (the React analog of Angular's
+ * `@ContentChildren(EdsTab)`), extracting each tab's `EdsTabHeader` and `EdsTabBody` slots to
+ * build the bar and the active panel. Supports controlled selection (`activeTabIndex` +
+ * `onTabActivate`/`onTabClick`) and uncontrolled selection (`defaultActiveTabIndex`).
+ *
+ * Keyboard: roving `tabindex` (only the active tab is tabbable); Arrow Left/Right cycle focus,
+ * Home/End jump to first/last, Enter activates, Delete closes a closable tab — reimplemented with
+ * refs + a key handler (no CDK `FocusKeyManager`). Overflowing tab bars get left/right scroll
+ * buttons that translate the tab strip, matching the Angular scroll behavior.
+ */
+export const EdsTabs = React.forwardRef(function EdsTabs({ activeTabIndex: activeTabIndexProp, defaultActiveTabIndex = 0, ariaLabel = 'EDS Tabs', e2eAttr = 'eds-tabs', isMainNavigation = false, isFlat: _isFlat = false, isNavBar = false, color, onTabClose, onTabActivate, onTabClick, rightContent, children, className, ...rest }, ref) {
+    const tabId = useId().replace(/:/g, '');
+    // Resolve the EdsTab children into a flat list of { props, header, body }.
+    const allTabs = useMemo(() => {
+        const out = [];
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child) && child.type === EdsTab) {
+                out.push(resolveTab(child));
+            }
+        });
+        return out;
+    }, [children]);
+    // Controlled vs uncontrolled selection.
+    const isControlled = activeTabIndexProp !== undefined;
+    const [internalIndex, setInternalIndex] = useState(defaultActiveTabIndex);
+    const activeTabIndex = isControlled ? activeTabIndexProp : internalIndex;
+    // Refs to each rendered tab list item (roving focus + scroll measurement).
+    const tabItemRefs = useRef([]);
+    const headersRef = useRef(null);
+    const headersContainerRef = useRef(null);
+    const rightContentRef = useRef(null);
+    const panelRef = useRef(null);
+    // Scroll state (Angular scrolling / offset / nav-button-disabled).
+    const [scrolling, setScrolling] = useState(false);
+    const [currentOffset, setCurrentOffset] = useState(0);
+    const [navLeftDisabled, setNavLeftDisabled] = useState(true);
+    const [navRightDisabled, setNavRightDisabled] = useState(false);
+    const [panelTabIndex, setPanelTabIndex] = useState(0);
+    const activeTab = allTabs[activeTabIndex];
+    // ---- Selection helpers ----------------------------------------------------------------
+    const emit = useCallback((handler, index) => {
+        const tab = allTabs[index];
+        if (tab && handler) {
+            handler({ tab: tab.props, index });
+        }
+    }, [allTabs]);
+    const activateTab = useCallback((index) => {
+        const tab = allTabs[index];
+        if (!tab) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalIndex(index);
+        }
+        emit(onTabActivate, index);
+    }, [allTabs, isControlled, emit, onTabActivate]);
+    /** Angular `activate`: honours the `isHandleActivateTab` parity flag. */
+    const activate = useCallback((index) => {
+        const tab = allTabs[index];
+        if (tab && !tab.props.isHandleActivateTab) {
+            activateTab(index);
+        }
+    }, [allTabs, activateTab]);
+    const tabListItemClick = useCallback((index) => {
+        const tab = allTabs[index];
+        if (tab?.props.isDisabled) {
+            return;
+        }
+        emit(onTabClick, index);
+        activate(index);
+    }, [allTabs, emit, onTabClick, activate]);
+    /** Angular `close`: honours the `isHandleCloseOnClose` parity flag, then emits `tabClose`. */
+    const close = useCallback((index, event) => {
+        emit(onTabClose, index);
+        event.stopPropagation();
+    }, [emit, onTabClose]);
+    // ---- Keyboard (roving tabindex, no CDK FocusKeyManager) --------------------------------
+    const focusTab = useCallback((index) => {
+        tabItemRefs.current[index]?.focus();
+    }, []);
+    const onKeydown = useCallback((index, event) => {
+        const count = tabItemRefs.current.length;
+        switch (event.key) {
+            case 'Enter': {
+                if (!allTabs[index]?.props.isDisabled) {
+                    activate(index);
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                const next = index === count - 1 ? 0 : index + 1;
+                focusTab(next);
+                break;
+            }
+            case 'ArrowLeft': {
+                const prev = index === 0 ? count - 1 : index - 1;
+                focusTab(prev);
+                break;
+            }
+            case 'Home': {
+                focusTab(0);
+                event.preventDefault();
+                break;
+            }
+            case 'End': {
+                focusTab(count - 1);
+                event.preventDefault();
+                break;
+            }
+            case 'Delete': {
+                if (allTabs[index]?.props.isClosable) {
+                    if (index === count - 1) {
+                        focusTab(index - 1);
+                        close(index, event);
+                    }
+                    else {
+                        close(index, event);
+                        focusTab(index);
+                    }
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [allTabs, activate, focusTab, close]);
+    // ---- Scroll navigation -----------------------------------------------------------------
+    const headersContainerWidth = () => {
+        const container = headersContainerRef.current?.clientWidth ?? 0;
+        const right = rightContentRef.current?.offsetWidth ?? 0;
+        return container - right;
+    };
+    const headersWidth = () => headersRef.current?.clientWidth ?? 0;
+    const goToLeft = useCallback(() => {
+        setCurrentOffset((offset) => {
+            let scrollTo = offset + STEP_MOVE;
+            if (scrollTo > 0) {
+                scrollTo = 0;
+            }
+            setNavLeftDisabled(scrollTo === 0);
+            setNavRightDisabled(false);
+            return scrollTo;
+        });
+    }, []);
+    const goToRight = useCallback(() => {
+        const maxScrollable = headersWidth() - headersContainerWidth();
+        setCurrentOffset((offset) => {
+            let scrollTo = offset - STEP_MOVE;
+            if (Math.abs(scrollTo) > maxScrollable) {
+                scrollTo = -maxScrollable - SCROLL_OFFSET;
+            }
+            setNavLeftDisabled(false);
+            setNavRightDisabled(Math.abs(scrollTo) >= maxScrollable);
+            return scrollTo;
+        });
+    }, []);
+    /** Angular `tabsScrollingHandler`: detect overflow and toggle the nav buttons. */
+    const tabsScrollingHandler = useCallback(() => {
+        const containerWidth = headersContainerWidth();
+        const width = headersWidth();
+        if (!containerWidth || !width) {
+            return;
+        }
+        const isScrolling = width > containerWidth;
+        setScrolling(isScrolling);
+        if (!isScrolling) {
+            setCurrentOffset(0);
+            setNavLeftDisabled(true);
+            setNavRightDisabled(true);
+        }
+        else {
+            const maxScrollable = width - containerWidth;
+            setNavRightDisabled(Math.abs(currentOffset) >= maxScrollable);
+            setNavLeftDisabled(currentOffset >= 0);
+        }
+    }, [currentOffset]);
+    // Recompute scroll state after render / when the tab set changes / on window resize.
+    useLayoutEffect(() => {
+        tabsScrollingHandler();
+    }, [tabsScrollingHandler, allTabs.length]);
+    useEffect(() => {
+        const onResize = () => tabsScrollingHandler();
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, [tabsScrollingHandler]);
+    // ---- Panel roving tabindex (Angular onAttached) ----------------------------------------
+    useLayoutEffect(() => {
+        // If the panel content has a focusable element, the panel itself is not tabbable (-1);
+        // otherwise the panel receives focus (0) so keyboard users can reach the content.
+        setPanelTabIndex(containsFocusableElement(panelRef.current) ? -1 : 0);
+    }, [activeTabIndex, activeTab]);
+    // ---- Context ---------------------------------------------------------------------------
+    const contextValue = useMemo(() => ({ activeTabIndex, activate, close }), [activeTabIndex, activate, close]);
+    // ---- Render ----------------------------------------------------------------------------
+    const rootClass = [
+        'eds-tabs',
+        color === 'brand' ? 'eds-tabs--brand' : '',
+        color === 'neutral' ? 'eds-tabs--neutral' : '',
+        isNavBar ? 'eds-tabs--navbar' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(EdsTabsContext.Provider, { value: contextValue, children: _jsxs("div", { ref: ref, className: rootClass, "data-e2e": e2eAttr, "data-main-navigation": isMainNavigation ? '' : undefined, ...rest, children: [_jsxs("div", { ref: headersContainerRef, className: scrolling ? 'eds-tabs-wrapper eds-tabs-wrapper--scrolling' : 'eds-tabs-wrapper', children: [_jsxs("div", { className: "eds-tabs-navigation", children: [_jsx("div", { className: "eds-tabs-navigation__left-item", children: _jsx(EdsIconButton, { icon: "caret-left:core", ariaLabel: "Scroll left", disabled: navLeftDisabled, onButtonClick: goToLeft }) }), _jsx("ul", { ref: headersRef, className: "eds-tab-items", "data-offset": currentOffset, role: "tablist", "aria-label": ariaLabel, style: { marginLeft: `${currentOffset}px` }, children: allTabs.map((tab, i) => {
+                                        if (tab.props.isVisible === false) {
+                                            return null;
+                                        }
+                                        const isActive = i === activeTabIndex;
+                                        const isDisabled = tab.props.isDisabled ?? false;
+                                        const itemClass = [
+                                            'eds-tab-item',
+                                            isActive ? 'eds-tab-item--active' : '',
+                                            isDisabled ? 'eds-tab-item--disabled' : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ');
+                                        return (_jsxs("li", { ref: (el) => {
+                                                tabItemRefs.current[i] = el;
+                                            }, className: itemClass, id: `tab-${i + 1}-${tabId}`, tabIndex: isActive ? 0 : -1, role: "tab", "aria-controls": `tabpanel-${i + 1}-${tabId}`, "aria-selected": isActive, "aria-disabled": isDisabled, "data-e2e": tab.props.e2eAttr ?? 'eds-tab', title: tab.props.tooltip, onClick: () => tabListItemClick(i), onKeyDown: (event) => onKeydown(i, event), children: [renderTabHeaderContent(tab.header), tab.props.isClosable ? (_jsx(EdsIconButton, { className: "eds-tab-close-button", icon: "x:core", size: "s", rounded: true, ariaLabel: "Closable", tabIndex: -1, disabled: isDisabled, onButtonClick: (event) => close(i, event) })) : null] }, tab.props.id ?? i));
+                                    }) }), _jsx("div", { className: "eds-tabs-navigation__right-item", children: _jsx(EdsIconButton, { icon: "caret-right:core", ariaLabel: "Scroll right", disabled: navRightDisabled, onButtonClick: goToRight }) })] }), _jsx("div", { ref: rightContentRef, className: "eds-tabs-right-content-wrapper", children: rightContent })] }), activeTab && activeTab.props.isDisabled !== true && activeTab.body !== null ? (_jsx("div", { id: `tabpanel-${activeTabIndex + 1}-${tabId}`, className: "eds-tab-body-container", role: "tabpanel", "aria-labelledby": `tab-${activeTabIndex + 1}-${tabId}`, children: _jsx("div", { ref: panelRef, className: activeTab.bodyProps?.hasNoContentPadding
+                            ? 'eds-tab__body eds-tab__body--no-padding'
+                            : 'eds-tab__body', tabIndex: panelTabIndex, children: activeTab.body }) })) : null] }) }));
+});
+//# sourceMappingURL=eds-tabs.js.map

package/eds-tabs/eds-tabs.js.map

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

package/eds-tabs/index.d.ts

@@ -0,0 +1,13 @@
+export { EdsTabs } from './eds-tabs.js';
+export type { EdsTabsProps, EdsTabsColor, EdsTabsChangeEvent } from './eds-tabs.js';
+export { EdsTab } from './eds-tab.js';
+export type { EdsTabProps } from './eds-tab.js';
+export { EdsTabBody } from './eds-tab-body.js';
+export type { EdsTabBodyProps } from './eds-tab-body.js';
+export { EdsTabHeader, EdsTabHeaderLabel, EdsTabHeaderSublabel, EdsTabHeaderLeftContent, EdsTabHeaderRightContent, } from './eds-tab-header.js';
+export type { EdsTabHeaderProps, EdsTabHeaderLabelProps, EdsTabHeaderSublabelProps, EdsTabHeaderLeftContentProps, EdsTabHeaderRightContentProps, } from './eds-tab-header.js';
+export { EdsTabsRightContent } from './eds-tabs-right-content.js';
+export type { EdsTabsRightContentProps } from './eds-tabs-right-content.js';
+export { EdsTabsContext, useEdsTabs } from './eds-tabs-context.js';
+export type { EdsTabsContextValue } from './eds-tabs-context.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EACH,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,GAC3B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACR,iBAAiB,EACjB,sBAAsB,EACtB,yBAAyB,EACzB,4BAA4B,EAC5B,6BAA6B,GAChC,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,YAAY,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/eds-tabs/index.js

@@ -0,0 +1,7 @@
+export { EdsTabs } from './eds-tabs.js';
+export { EdsTab } from './eds-tab.js';
+export { EdsTabBody } from './eds-tab-body.js';
+export { EdsTabHeader, EdsTabHeaderLabel, EdsTabHeaderSublabel, EdsTabHeaderLeftContent, EdsTabHeaderRightContent, } from './eds-tab-header.js';
+export { EdsTabsRightContent } from './eds-tabs-right-content.js';
+export { EdsTabsContext, useEdsTabs } from './eds-tabs-context.js';
+//# sourceMappingURL=index.js.map

package/eds-tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EACH,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,GAC3B,MAAM,qBAAqB,CAAC;AAS7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/eds-tag-group/eds-tag-group.css

@@ -0,0 +1,66 @@
+/*
+ * eds-tag-group — pure React port of eds-tag-group.scss.
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host                       -> .eds-tag-group (root class on the rendered element)
+ *   :host([color="v"])          -> .eds-tag-group[data-color="v"]
+ *   ::ng-deep eds-tag           -> .eds-tag-group .eds-tag (the child EdsTag renders <span class="eds-tag">)
+ * The child-tag color propagation overrides EdsTag's internal --_eds-tag-* privates, which
+ * inherit down the light-DOM custom-property scope exactly like the Angular ::ng-deep override.
+ * Tokens cascade in from the .eui-21 context (required on an ancestor).
+ */
+
+.eds-tag-group {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    position: relative;
+}
+
+.eds-tag-group .eds-tag:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right: none;
+}
+
+.eds-tag-group .eds-tag:last-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.eds-tag-group .eds-tag:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    border-right: none;
+}
+
+/* Propagate color tokens from group to child tags by overriding their internal custom properties */
+
+.eds-tag-group[data-color="neutral"] .eds-tag {
+    --_eds-tag-bg-color: var(--eds-c-surface-elevation-sunken);
+    --_eds-tag-color-on-bg: var(--eds-c-foreground-subtle);
+    --_eds-tag-border-color: var(--eds-c-border-neutral-subtle);
+}
+
+.eds-tag-group[data-color="info"] .eds-tag {
+    --_eds-tag-bg-color: var(--eds-c-surface-info-subtler);
+    --_eds-tag-color-on-bg: var(--eds-c-on-surface-info-subtler);
+    --_eds-tag-border-color: var(--eds-c-border-info-subtle);
+}
+
+.eds-tag-group[data-color="success"] .eds-tag {
+    --_eds-tag-bg-color: var(--eds-c-surface-success-subtler);
+    --_eds-tag-color-on-bg: var(--eds-c-on-surface-success-subtler);
+    --_eds-tag-border-color: var(--eds-c-border-success-subtle);
+}
+
+.eds-tag-group[data-color="warning"] .eds-tag {
+    --_eds-tag-bg-color: var(--eds-c-surface-warning-subtler);
+    --_eds-tag-color-on-bg: var(--eds-c-on-surface-warning-subtler);
+    --_eds-tag-border-color: var(--eds-c-border-warning-subtle);
+}
+
+.eds-tag-group[data-color="critical"] .eds-tag {
+    --_eds-tag-bg-color: var(--eds-c-surface-critical-subtler);
+    --_eds-tag-color-on-bg: var(--eds-c-on-surface-critical-subtler);
+    --_eds-tag-border-color: var(--eds-c-border-critical-subtle);
+}

package/eds-tag-group/eds-tag-group.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the tag group's color contract (ported 1:1 from Angular `eds-tag-group`).
+ */
+export type EdsTagGroupColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+export interface EdsTagGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Semantic color of the tag group, propagated to the child tags. @default 'neutral' */
+    color?: EdsTagGroupColor;
+    /** Data attribute for e2e testing. @default 'eds-tag-group' */
+    e2eAttr?: string;
+    /**
+     * Accessible label for the tag group. Provides context to screen reader users about the
+     * purpose of the grouped tags (e.g. 'Status indicators', 'Category tags').
+     */
+    ariaLabel?: string | null;
+    /** Projected content — the `eds-tag` children (matches Angular `<ng-content/>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsTagGroup` — pure React port of the Angular `eds-tag-group`.
+ *
+ * Container component that groups multiple `EdsTag` elements into a connected pill strip.
+ * Removes border-radius on adjacent sides of first/last children to create a seamless visual
+ * connection between tags. The color variant is set on the group and automatically propagated
+ * to child tags via CSS custom properties (see `eds-tag-group.css`).
+ *
+ * The rendered element IS the component (no extra wrapper). It exposes `role="group"` to
+ * assistive technology. Requires `@eui/eds-styles` + the `eui-21` class on an ancestor for the
+ * `--eds-*` tokens to cascade in.
+ */
+export declare const EdsTagGroup: React.ForwardRefExoticComponent<EdsTagGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-tag-group.d.ts.map

package/eds-tag-group/eds-tag-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tag-group.d.ts","sourceRoot":"","sources":["../../src/eds-tag-group/eds-tag-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzF,wFAAwF;IACxF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,yFAwBtB,CAAC"}

package/eds-tag-group/eds-tag-group.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsTagGroup` — pure React port of the Angular `eds-tag-group`.
+ *
+ * Container component that groups multiple `EdsTag` elements into a connected pill strip.
+ * Removes border-radius on adjacent sides of first/last children to create a seamless visual
+ * connection between tags. The color variant is set on the group and automatically propagated
+ * to child tags via CSS custom properties (see `eds-tag-group.css`).
+ *
+ * The rendered element IS the component (no extra wrapper). It exposes `role="group"` to
+ * assistive technology. Requires `@eui/eds-styles` + the `eui-21` class on an ancestor for the
+ * `--eds-*` tokens to cascade in.
+ */
+export const EdsTagGroup = React.forwardRef(function EdsTagGroup({ color = 'neutral', e2eAttr = 'eds-tag-group', ariaLabel, children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-tag-group ${className}` : 'eds-tag-group', role: 'group', "data-color": color, "data-e2e": e2eAttr, "aria-label": ariaLabel ?? undefined, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-tag-group.js.map

package/eds-tag-group/eds-tag-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tag-group.js","sourceRoot":"","sources":["../../src/eds-tag-group/eds-tag-group.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,SAAS,WAAW,CAC9F,EACI,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,eAAe,EACzB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,EACrE,IAAI,EAAC,OAAO,gBACA,KAAK,cACP,OAAO,gBACL,SAAS,IAAI,SAAS,KAC9B,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-tag-group/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsTagGroup } from './eds-tag-group.js';
+export type { EdsTagGroupProps, EdsTagGroupColor } from './eds-tag-group.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-tag-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-tag-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/eds-tag-group/index.js

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

package/eds-tag-group/index.js.map

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

package/eds-textarea/eds-textarea.css

@@ -0,0 +1,83 @@
+/**
+ * eds-textarea.css — 1:1 pure-React port of eds-textarea.scss.
+ *
+ * The Angular file is `@include base.eds-input();` on `:host.eds-textarea` plus a
+ * `height/min-height/resize` block and a readonly override. The `eui-21` wrapper is dropped
+ * (share-ready). SCSS mixins are inlined per the guide's Part 2:
+ *   - base.eds-input()          -> the full input reset + focus-visible + placeholder + readonly +
+ *                                  disabled + invalid declarations
+ *   - base.eds-focus-visible()  (nested in eds-input) -> :focus-visible:not([readonly]) outline
+ *
+ * The Angular component is class-based, so variant/state selectors stay as BEM classes
+ * (`.eds-textarea--invalid`), not `data-*` (guide rule 9). Auto-resize (`EdsAutoResizeDirective`)
+ * toggles `overflow`/`resize`/`height` via inline styles from the React hook — no CSS needed for it.
+ */
+
+/* --- base.eds-input() on .eds-textarea --- */
+.eds-textarea {
+    font: var(--eds-f-paragraph-m);
+    appearance: none;
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    border-radius: var(--eds-br-s);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    min-height: var(--eds-si-3xl);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    width: 100%;
+
+    /* eds-textarea.scss overrides */
+    height: auto;
+    min-height: calc(var(--eds-si-3xl) * 2);
+    resize: vertical;
+}
+
+/* eds-focus-visible() (nested in eds-input mixin) */
+.eds-textarea:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+
+.eds-textarea:not([hidden]) {
+    display: block;
+}
+
+.eds-textarea::placeholder {
+    color: var(--eds-c-foreground-subtler);
+    opacity: 1;
+}
+
+/* Readonly (from eds-input mixin) */
+.eds-textarea[readonly] {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+    pointer-events: none;
+}
+
+/* Disabled (from eds-input mixin) */
+.eds-textarea:disabled:not([readonly]),
+.eds-textarea--disabled:not([readonly]) {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    color: var(--eds-c-foreground-subtler);
+    pointer-events: none;
+}
+
+/* Invalid (reflected as the --invalid class by hostClasses()) */
+.eds-textarea--invalid {
+    border-color: var(--eds-c-border-critical);
+}
+
+/* --- component-specific readonly overrides (from eds-textarea.scss) --- */
+.eds-textarea[readonly] {
+    pointer-events: auto;
+    resize: none;
+}
+
+.eds-textarea[readonly]::placeholder {
+    color: transparent;
+}

package/eds-textarea/eds-textarea.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+/**
+ * `EdsTextarea` — pure React port of the Angular `eds-textarea` (+ `EdsAutoResizeDirective`).
+ *
+ * The Angular source is a component on a native `<textarea>` (`selector: 'textarea[edsTextarea]'`,
+ * empty `template`) — so the rendered **root element IS a `<textarea>`**. It is a
+ * `ControlValueAccessor` (Angular forms). React has no CVA, so this exposes a standard React form
+ * API: **controlled** via `value` + `onChange`, or **uncontrolled** via `defaultValue`. There is no
+ * forms-integration shim — flagged for React forms-API design review.
+ *
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }`), so per the
+ * pure-React guide rule 9 the BEM classes are reproduced verbatim on the root `className`
+ * (`eds-textarea`, `eds-textarea--invalid`) and the ported CSS keeps those class selectors. Invalid
+ * state in Angular is `_ngControl.invalid && touched` when bound to a form control, or the
+ * `isInvalid` input otherwise; React has no NgControl, so `invalid` is the single input driving the
+ * `eds-textarea--invalid` class.
+ *
+ * The separate `EdsAutoResizeDirective` (`textarea[edsAutoResize]`, with `minRows` / `maxRows`) is
+ * reimplemented here as the `autoResize` / `minRows` / `maxRows` props + a `useLayoutEffect` that
+ * measures the scroll height and grows the textarea (clamped to `maxRows`), matching the directive's
+ * clone-measure/`overflow:hidden`/`resize:none` semantics. A `ResizeObserver` re-measures on width
+ * changes (the directive's `_setupResizeObserver`); a `MutationObserver` on the `readonly` attribute
+ * is unnecessary in React because `readonly` re-renders and re-runs the effect.
+ *
+ * @example Controlled
+ * ```tsx
+ * const [v, setV] = React.useState('');
+ * <EdsTextarea value={v} onChange={(e) => setV(e.target.value)} placeholder="Type…" />
+ * ```
+ *
+ * @example Uncontrolled, auto-resize
+ * ```tsx
+ * <EdsTextarea defaultValue="hello" autoResize minRows={2} maxRows={10} />
+ * ```
+ *
+ * @example Readonly / invalid / disabled
+ * ```tsx
+ * <EdsTextarea readonly value="Read only" />
+ * <EdsTextarea invalid />
+ * <EdsTextarea disabled />
+ * ```
+ */
+export interface EdsTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as `data-e2e`.
+     * @default 'eds-textarea'
+     */
+    e2eAttr?: string;
+    /**
+     * Controls whether the textarea is disabled. Reflected as the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the textarea is readonly. Reflected as the native `readonly` attribute.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Controls whether the textarea shows an invalid/error state. Reflected as the
+     * `eds-textarea--invalid` class (mirrors the Angular `isInvalid` input / NgControl state).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Enables auto-resize: the textarea height grows with its content (mirrors
+     * `EdsAutoResizeDirective`). When active the textarea gets `overflow:hidden` / `resize:none`.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Minimum number of rows when `autoResize` is active (mirrors the directive's `minRows`).
+     * @default 1
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows when `autoResize` is active (0 = unlimited; mirrors the directive's
+     * `maxRows`). Beyond this the textarea scrolls.
+     * @default 0
+     */
+    maxRows?: number;
+    /** Controlled value. When provided the textarea is controlled (React semantics). */
+    value?: string;
+    /** Initial value for an uncontrolled textarea. */
+    defaultValue?: string;
+    /** Fired on every keystroke (mirrors the Angular host `(input)` → CVA `onChange`). */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /** Fired when the textarea loses focus (mirrors the Angular host `(blur)` → CVA `onTouched`). */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+}
+export declare const EdsTextarea: React.ForwardRefExoticComponent<EdsTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=eds-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-textarea.d.ts","sourceRoot":"","sources":["../../src/eds-textarea/eds-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC3E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACzD,iGAAiG;IACjG,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,WAAW,8FAsJtB,CAAC"}