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

package/eds-table/eds-table-sticky-col.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsTableStickyCol` — pure React port of the Angular `th[edsStickyCol], td[edsStickyCol]`
+ * directive. Marks a column cell as sticky by adding the `eds-table__col--sticky` class (the
+ * directive's sole behavior — `host: { class: 'eds-table__col--sticky' }`). Only first or last
+ * columns can be sticky. The sticky offset / shadow classes are applied at runtime by the
+ * enclosing `EdsTable` sticky handler (mirrors the Angular `stickyFeatureHandler`).
+ *
+ * @example
+ * ```tsx
+ * <EdsTableStickyCol as="th">Name</EdsTableStickyCol>
+ * <EdsTableStickyCol as="td">{row.name}</EdsTableStickyCol>
+ * ```
+ */
+export const EdsTableStickyCol = React.forwardRef(function EdsTableStickyCol({ as = 'td', className, children, ...rest }, ref) {
+    const Cell = as;
+    const rootClass = className
+        ? `eds-table__col--sticky ${className}`
+        : 'eds-table__col--sticky';
+    return (_jsx(Cell, { ref: ref, className: rootClass, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-table-sticky-col.js.map

package/eds-table/eds-table-sticky-col.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-table-sticky-col.js","sourceRoot":"","sources":["../../src/eds-table/eds-table-sticky-col.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,iBAAiB,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACvE,MAAM,IAAI,GAAG,EAAE,CAAC;IAChB,MAAM,SAAS,GAAG,SAAS;QACvB,CAAC,CAAC,0BAA0B,SAAS,EAAE;QACvC,CAAC,CAAC,wBAAwB,CAAC;IAC/B,OAAO,CACH,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,YACzC,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-table/eds-table.css

@@ -0,0 +1,410 @@
+/* eds-table — 1:1 pure-React port of eds-table.scss (+ eds-table-filter.scss, sortable-col, states, mq).
+ * Authored against bare classes (no .eui-21 wrapper, no :host); --eds-* tokens copied verbatim.
+ * base.media(base.$eds-bkp-mobile) → @media (max-width: 767px). */
+
+/* === table.scss === */
+.eds-table {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.eds-table .eds-table__scroll-viewport {
+    min-height: 100%;
+    width: 100%;
+}
+
+.eds-table .eds-table__scrollable-wrapper {
+    overflow: auto;
+}
+
+.eds-table .eds-table__orderable-cols-preview,
+.eds-table .eds-table__orderable-rows-preview {
+    display: none;
+}
+
+.eds-table tr[edshighlighted] {
+    background-color: var(--eds-c-border-divider) !important;
+    position: relative;
+    z-index: 2;
+}
+
+.eds-table caption {
+    text-align: start;
+    font-style: italic;
+}
+
+.eds-table .eds-table__cell-select {
+    width: 48px;
+    text-align: center;
+    padding: var(--eds-sp-xs);
+}
+
+.eds-table .eds-table__cell-select-checkbox-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.eds-table .eds-table__loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    z-index: 10;
+}
+
+.eds-table .eds-table__loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--eds-c-border-divider);
+    border-top-color: var(--eds-c-border-primary);
+    border-radius: 50%;
+    animation: eds-table-spin 0.8s linear infinite;
+}
+
+.eds-table .eds-table__skeleton-line {
+    height: 16px;
+    background: var(--eds-c-surface-hover);
+    border-radius: var(--eds-br-s);
+    /* animation: eds-table-pulse 1.5s ease-in-out infinite; */
+}
+
+.eds-table .eds-table__expandable-row td {
+    background-color: var(--eds-c-surface-default);
+}
+
+/* === table-filter.scss === */
+.eds-table .eds-table-filter {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
+}
+
+.eds-table .eds-table-filter--responsive {
+    width: 100%;
+}
+
+.eds-table .eds-table-filter__input {
+    padding-left: var(--eds-sp-2xl) !important;
+}
+
+.eds-table .eds-table-filter__icon {
+    left: var(--eds-sp-xs);
+    position: absolute;
+    top: var(--eds-sp-xs);
+}
+
+/* Standalone eds-table-filter host (rendered outside the table too) */
+.eds-table-filter {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.eds-table-filter .eds-table-filter__form {
+    width: 100%;
+    max-width: 320px;
+}
+
+/* === table-sortable-col.scss === */
+.eds-table .eds-table__sortable-col {
+    cursor: pointer;
+    user-select: none;
+}
+
+.eds-table .eds-table__sortable-col--disabled {
+    cursor: default;
+}
+
+.eds-table .eds-table__sortable-col-multisort-index {
+    font: var(--eds-f-paragraph-xs);
+    color: var(--eds-c-foreground-subtler);
+    margin-left: var(--eds-sp-3xs);
+}
+
+.eds-table .eds-table__sortable-col .eds-table__sortable-col-content {
+    align-items: center;
+    display: flex;
+    vertical-align: middle;
+    white-space: nowrap;
+    justify-content: space-between;
+}
+
+.eds-table .eds-table__sortable-col .eds-table__sortable-col-content .eds-table__sortable-col-content-label {
+    align-items: center;
+    display: flex;
+    user-select: none;
+    gap: var(--eds-sp-2xs);
+}
+
+/* === table.states.scss === */
+.eds-table .eds-table__row--selected td {
+    background-color: var(--eds-c-surface-selected);
+}
+
+.eds-table .eds-table__row--selectable {
+    cursor: pointer;
+}
+
+.eds-table .eds-table__col--sticky {
+    position: sticky;
+    z-index: 1;
+    background-color: inherit;
+}
+
+.eds-table .eds-table__col--sticky-shadowed-first {
+    box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);
+}
+
+.eds-table .eds-table__col--sticky-shadowed-last {
+    box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);
+}
+
+.eds-table--virtual-scroll {
+    width: 100%;
+    height: 100%;
+}
+
+.eds-table--fixed-layout {
+    table-layout: fixed;
+    width: 100%;
+}
+
+.eds-table--bordered td,
+.eds-table--bordered th {
+    border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-table--compact thead tr th {
+    padding: var(--eds-sp-3xs) var(--eds-sp-s);
+}
+
+.eds-table--compact tbody tr {
+    height: calc(2 * var(--eds-sp-m));
+}
+
+.eds-table--compact tbody tr td {
+    padding: 0 var(--eds-sp-s);
+}
+
+.eds-table--flat thead tr th {
+    background-color: transparent;
+    border: none;
+}
+
+.eds-table--flat tbody tr {
+    border: none;
+}
+
+.eds-table--flat tbody tr td {
+    background-color: transparent;
+    border: none;
+}
+
+.eds-table--flat tbody tr:hover td {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-table--flat tfoot tr {
+    border: none;
+}
+
+.eds-table--flat tfoot tr td {
+    background-color: transparent;
+    border: none;
+}
+
+.eds-table--flat tr {
+    border: none;
+}
+
+.eds-table--loading {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.eds-table--cols-orderable .cdk-drag-placeholder {
+    background-color: var(--eds-c-surface-elevation);
+    color: var(--eds-c-foreground-default);
+    cursor: move;
+    opacity: 1;
+}
+
+.eds-table--cols-orderable tr {
+    display: table-row;
+}
+
+.eds-table--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled) {
+    cursor: move;
+}
+
+.eds-table--sticky {
+    max-width: none !important;
+}
+
+.eds-table--sticky tbody tr:nth-of-type(odd) td {
+    background-color: var(--eds-c-surface-default);
+}
+
+.eds-table--sticky tbody tr:nth-of-type(odd):hover td {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-table--sticky tbody tr:nth-of-type(even) td {
+    background-color: var(--eds-c-surface-elevation);
+}
+
+.eds-table--sticky tbody tr:nth-of-type(even):hover td {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-table--sticky-header thead {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+}
+
+.eds-table--sticky-header thead th,
+.eds-table--sticky-header thead td {
+    background-color: inherit;
+}
+
+.eds-table--sticky-header.eds-table--sticky-cols thead {
+    z-index: 9;
+}
+
+.eds-table--sticky-footer tfoot {
+    position: sticky;
+    bottom: -1px;
+    z-index: 8;
+}
+
+.eds-table--sticky-footer tfoot tr td {
+    background-color: inherit;
+}
+
+.eds-table--sticky-cols .eds-table__col--sticky {
+    position: sticky;
+    z-index: 1;
+}
+
+.eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,
+.eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first,
+.eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-first {
+    box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);
+}
+
+.eds-table--sticky-cols th.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,
+.eds-table--sticky-cols tbody td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last,
+.eds-table--sticky-cols tfoot td.eds-table__col--sticky.eds-table__col--sticky-shadowed-last {
+    box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);
+}
+
+/* === table.mq.scss — base.media(base.$eds-bkp-mobile) === */
+@media (max-width: 767px) {
+    .eds-table--responsive {
+        width: 100% !important;
+    }
+
+    .eds-table--responsive thead,
+    .eds-table--responsive tbody,
+    .eds-table--responsive tfoot,
+    .eds-table--responsive th,
+    .eds-table--responsive td,
+    .eds-table--responsive tr {
+        display: block;
+    }
+
+    .eds-table--responsive thead tr {
+        left: -9999px;
+        position: absolute;
+        top: -9999px;
+    }
+
+    .eds-table--responsive tr {
+        height: auto;
+    }
+
+    .eds-table--responsive td {
+        border: none;
+        border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider);
+        padding-left: 50%;
+        position: relative;
+        text-align: left !important;
+        left: unset !important;
+        right: unset !important;
+    }
+
+    .eds-table--responsive td::before {
+        color: var(--eds-c-foreground-subtler);
+        content: attr(data-col-label);
+        left: var(--eds-sp-xs);
+        padding-right: var(--eds-sp-xs);
+        position: absolute;
+        width: 45%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: var(--eds-f-label-m-semi-bold);
+    }
+
+    .eds-table--responsive tfoot tr td:empty {
+        display: none !important;
+    }
+
+    .eds-table--responsive .actionsColumn,
+    .eds-table--responsive .actions-column {
+        justify-content: flex-start;
+        text-align: left;
+        width: 100%;
+    }
+
+    /* Sticky table mobile reset */
+    .eds-table .eds-table__sticky-container {
+        height: auto;
+        width: auto !important;
+    }
+
+    .eds-table--sticky-cols th,
+    .eds-table--sticky-cols td {
+        width: auto;
+        z-index: auto;
+    }
+
+    .eds-table--sticky-cols th .eds-table__col--sticky,
+    .eds-table--sticky-cols td .eds-table__col--sticky {
+        width: auto;
+        z-index: auto;
+    }
+
+    .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,
+    .eds-table--sticky-cols th .eds-table__col--sticky.eds-table__col--sticky-shadowed-last,
+    .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-first,
+    .eds-table--sticky-cols td .eds-table__col--sticky.eds-table__col--sticky-shadowed-last {
+        box-shadow: none !important;
+    }
+
+    .eds-table--sticky-cols tfoot tr td:empty {
+        display: none !important;
+    }
+}
+
+@keyframes eds-table-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes eds-table-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}

package/eds-table/eds-table.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { EdsTableSort } from './eds-table-sort.model.js';
+/** Scroll direction reported during async virtual scroll (mirrors the Angular type). */
+export type EdsTableScrollDirection = 'UP' | 'DOWN';
+/** Render-slot context passed to `renderBody` for each row. */
+export interface EdsTableRowContext<DATA = unknown> {
+    /** The row data (`$implicit` in the Angular body template). */
+    row: DATA;
+    /** The row index (`index` in the Angular body template). */
+    index: number;
+}
+export interface EdsTableProps<DATA = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'> {
+    /** Data to display in the table. @default [] */
+    data?: DATA[];
+    /** Unique property identifier for rows. @default 'id' */
+    propId?: string;
+    /** Row height used by virtual scroll calculation. @default 41 */
+    itemSize?: number;
+    /** Rows to be pre-selected. @default [] */
+    preselectedRows?: DATA[];
+    /** Whether the table uses virtual scroll. @default false */
+    isVirtualScroll?: boolean;
+    /** Whether to cache data when scrolling (virtual scroll). @default false */
+    isVirtualScrollCache?: boolean;
+    /** Whether the table header is sticky. @default false */
+    hasStickyHeader?: boolean;
+    /** Whether the table footer is sticky. @default false */
+    hasStickyFooter?: boolean;
+    /** Whether columns are sticky. @default false */
+    hasStickyCols?: boolean;
+    /** Whether the table is responsive (cards layout on mobile). @default true */
+    edsTableResponsive?: boolean;
+    /** Whether the table uses async data (server-side pagination/sorting/filtering). @default false */
+    isAsync?: boolean;
+    /** Total length of async virtual scroll items. @default 0 */
+    virtualScrollAsyncItemsLength?: number;
+    /** Number of rows to load per virtual scroll batch. @default 50 */
+    virtualScrollNbRows?: number;
+    /** Whether a loading state is displayed. @default false */
+    isLoading?: boolean;
+    /** Whether 'select all' only selects visible rows (current page). @default true */
+    isSelectOnlyVisibleRows?: boolean;
+    /** Whether the table uses bordered styles. @default false */
+    edsTableBordered?: boolean;
+    /** Whether the table uses a fixed layout. @default false */
+    edsTableFixedLayout?: boolean;
+    /** Whether the table uses compact styling. @default false */
+    edsTableCompact?: boolean;
+    /** Whether the table uses flat styling. @default false */
+    isFlat?: boolean;
+    /** Emitted on virtual scroll changes (mirrors `scrollChange`). */
+    onScrollChange?: (event: {
+        start: number;
+        end: number;
+    }) => void;
+    /** Emitted when the row selection changes (mirrors `rowsSelect`). */
+    onRowsSelect?: (rows: DATA[]) => void;
+    /** Emitted when sort changes (mirrors `sortChange`). */
+    onSortChange?: (sorts: EdsTableSort[]) => void;
+    /** Header slot — renders inside `<thead>` (mirrors `edsTableTemplate="header"`). */
+    renderHeader?: () => React.ReactNode;
+    /** Body row slot — rendered once per row inside `<tbody>` (mirrors `edsTableTemplate="body"`). */
+    renderBody?: (ctx: EdsTableRowContext<DATA>) => React.ReactNode;
+    /** Footer slot — renders inside `<tfoot>` (mirrors `edsTableTemplate="footer"`). */
+    renderFooter?: () => React.ReactNode;
+    /** No-data slot — rendered inside `<tbody>` when there are no rows (mirrors `edsTableTemplate="noData"`). */
+    renderNoData?: () => React.ReactNode;
+    /** Caption slot — renders inside `<caption>` (mirrors `edsTableTemplate="caption"`). */
+    renderCaption?: () => React.ReactNode;
+}
+/**
+ * `edsTableFilterData` — pure React port of the Angular `EdsTable.filterData()` method. Returns the
+ * rows whose (deeply-walked) property values contain the filter string (case-insensitive). Use it to
+ * client-side filter the `data` you pass to `EdsTable` in response to `EdsTableFilter`'s
+ * `onFilterChange` (the Angular component filtered internally; React keeps `data` consumer-owned).
+ *
+ * @example
+ * ```tsx
+ * const [filter, setFilter] = useState('');
+ * const rows = useMemo(() => edsTableFilterData(filter, allRows), [filter, allRows]);
+ * <EdsTableFilter onFilterChange={setFilter} />
+ * <EdsTable data={rows} renderBody={…} />
+ * ```
+ */
+export declare function edsTableFilterData<DATA>(filter: string, rows: DATA[]): DATA[];
+/**
+ * Generic `forwardRef` wrapper preserving the `<DATA>` type parameter (which `forwardRef` erases).
+ */
+export declare const EdsTable: <DATA = unknown>(props: EdsTableProps<DATA> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+//# sourceMappingURL=eds-table.d.ts.map

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

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