@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.2

package/components/table/Table.types.d.ts

@@ -1,11 +1,68 @@
-import { CSSProperties, ReactNode } from 'react';
+import { MotionProps } from 'motion/react';
+import { HTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 export type TableHorizontalAlign = 'left' | 'center' | 'right';
 export type TableVerticalAlign = 'top' | 'middle' | 'bottom';
-export type TableCellOverflow = 'hidden' | 'visible' | 'ellipsis';
+export type TableCellOverflow = 'hidden' | 'visible' | 'ellipsis' | 'ellipsis-2' | 'ellipsis-3';
 export type TableViewType = 'TABLE' | 'SINGLE_CARD' | 'MULTI_CARDS';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableRowId = string | number;
-export type TableColumnDefinition<RowType extends Record<string, unknown>> = {
+export type TableRowData = Record<string, unknown>;
+export type TableCardsStyleSettings = {
+    /**
+     * Minimum card width for `MULTI_CARDS` view.
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum card width for `MULTI_CARDS` view.
+     */
+    maxWidth?: number | string;
+    /**
+     * Additional classes for each card row in card views.
+     */
+    className?: string;
+    /**
+     * Additional classes for each card cell in card views.
+     */
+    rowClassName?: string;
+    /**
+     * Additional classes for each card label in card views.
+     */
+    labelClassName?: string;
+    /**
+     * Additional classes for each card content in card views.
+     */
+    contentClassName?: string;
+};
+/**
+ * High-level animation settings for expanded table rows.
+ *
+ * Use `false` to disable built-in expanded-row animations entirely.
+ * Use `duration` to keep the default expanded-row animation behavior
+ * while making it faster or slower.
+ */
+export type TableExpandedRowAnimation = false | {
+    duration?: number;
+};
+export type TableHtmlAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children' | 'className' | 'onClick' | 'onKeyDown' | 'onDrag' | 'onDragCapture' | 'onDragEnd' | 'onDragEndCapture' | 'onDragEnter' | 'onDragEnterCapture' | 'onDragExit' | 'onDragExitCapture' | 'onDragLeave' | 'onDragLeaveCapture' | 'onDragOver' | 'onDragOverCapture' | 'onDragStart' | 'onDragStartCapture' | 'onDrop' | 'onDropCapture' | 'role'>;
+export type TableStickyColumns = {
+    /**
+     * Number of currently leftmost visible data columns to keep sticky in `TABLE` view.
+     *
+     * This is position-based and follows column reordering.
+     * Selection columns and group rows are ignored.
+     *
+     * The public API currently supports `1`.
+     */
+    left?: 1;
+    /**
+     * Aligns footer cells with the sticky left column behavior.
+     *
+     * By default, the footer stays independent so it can still span the selection column
+     * or the full table width for summary and batch-action use cases.
+     */
+    footer?: boolean;
+};
+export type TableColumnDefinition<RowType extends TableRowData> = {
     /**
      * Unique key of the column.
      */
@@ -54,11 +111,23 @@ export type TableColumnDefinition<RowType extends Record<string, unknown>> = {
      */
     maxResizeWidth?: number;
     /**
-     * Disables column drag-reordering for this column when `draggableColumns` is enabled on the table.
+     * Enables drag-reordering for this column in `TABLE` view.
      *
-     * @default true
+     * When `columnOrder` and `onColumnOrderChange` are provided, reordering is controlled from the outside.
+     * When they are omitted, the table keeps the reordered state internally.
+     *
+     * @default false
      */
     draggable?: boolean;
+    /**
+     * Enables resize handles for this column in `TABLE` view.
+     *
+     * When `onColumnResize` is provided, resized widths are controlled from the outside.
+     * When it is omitted, the table keeps resized widths internally.
+     *
+     * @default false
+     */
+    resizeable?: boolean;
     /**
      * Horizontal alignment of body cells in this column.
      *
@@ -88,120 +157,223 @@ export type TableColumnDefinition<RowType extends Record<string, unknown>> = {
      */
     sortable?: boolean;
 };
-export type TableColumn<RowType extends Record<string, unknown>> = TableColumnDefinition<RowType>;
-export type TableRowClassName<RowType extends Record<string, unknown>> = string | ((row: RowType, rowIndex: number) => string);
-export type TableCellClassName<RowType extends Record<string, unknown>> = (row: RowType, column: TableColumnDefinition<RowType>, rowIndex: number, columnIndex: number) => string;
-export type TableStyle = CSSProperties & {
-    '--table-columns'?: string;
-    '--table-areas'?: string;
-    '--table-cards-min'?: string;
-    '--table-cards-max'?: string;
-    '--table-column-count'?: string;
-    '--table-width'?: string;
-};
-/**
- * Internal parser-stage table types.
- *
- * These `TableParsed*` types represent the normalized intermediate structure
- * that is produced after reading the declarative JSX API (`TableHeader`,
- * `TableHeaderColumn`, `TableBody`, `TableRow`, `TableColumn`, etc.) but
- * before building the final render/view model.
- *
- * Pipeline overview:
- * 1. Public declarative components define the table structure as JSX children.
- * 2. The parse layer (`parseHeaders`, `parseRows`, `parseFooter`, ...) turns
- *    these children into a predictable internal data shape.
- * 3. `buildTableViewModel` enriches that parsed data with render-specific
- *    information such as column layout, selection state, active state, card
- *    metadata, and resolved class names.
- *
- * These types are intentionally separate from the public component props and
- * from the final `TableView*` types:
- * - public props describe authoring-time input
- * - `TableParsed*` describes normalized parser output
- * - `TableView*` describes render-ready output
- *
- * Keeping this intermediate layer explicit makes the parsing and rendering
- * stages easier to reason about and allows the render model to evolve without
- * coupling it directly to the external JSX API.
- */
-export type TableParsedHeaderColumn = {
-    key: string | number;
-    columnKey?: string;
-    label: ReactNode;
-    icon?: string;
-    filter?: ReactNode;
-    hideLabel?: boolean;
-    row: number;
-    colSpan: number;
-    rowSpan: number;
-    horizontalAlign?: TableHorizontalAlign;
-    verticalAlign?: TableVerticalAlign;
-    className?: string;
-    headerClassName?: string;
-    hideOnMobile?: boolean;
-    draggable?: boolean;
-    resizeable?: boolean;
-    sortable?: boolean;
-};
-export type TableParsedCell = {
-    key?: string | number;
-    columnKey?: string;
-    content: ReactNode;
-    horizontalAlign?: TableHorizontalAlign;
-    verticalAlign?: TableVerticalAlign;
-    className?: string;
-    contentClassName?: string;
-    colSpan?: number;
-    preventRowClick?: boolean;
-};
-export type TableParsedCells = {
-    cellsByKey?: Record<string, TableParsedCell>;
-    cellsByIndex?: TableParsedCell[];
-};
-export type TableParsedFooterCell = TableParsedCell & {
-    key: string | number;
-    colSpan: number;
-};
-type TableParsedBaseRow = {
-    className?: string;
-    noHover?: boolean;
-};
-type TableParsedKeyedRow = TableParsedBaseRow & {
-    key: string | number;
-};
-type TableParsedContentRowBase = TableParsedKeyedRow & {
-    content: ReactNode;
-};
-type TableParsedDataLikeRow<RowType extends Record<string, unknown>, Kind extends 'data' | 'expanded'> = TableParsedCells & TableParsedBaseRow & {
-    kind: Kind;
-    data: RowType;
-    parentKey?: string | number;
-} & {
-    disabled?: boolean;
-};
-export type TableParsedDataRow<RowType extends Record<string, unknown>> = Omit<TableParsedDataLikeRow<RowType, 'data'>, 'parentKey'>;
-export type TableParsedExpandedDataRow<RowType extends Record<string, unknown>> = TableParsedDataLikeRow<RowType, 'expanded'>;
-export type TableParsedSpacerRow = TableParsedKeyedRow & {
-    kind: 'spacer';
-};
-export type TableParsedExpandedContentRow = TableParsedContentRowBase & {
-    kind: 'expanded-full-width';
-    parentKey?: string | number;
-};
-export type TableParsedGroupRow = TableParsedContentRowBase & {
-    kind: 'group';
-    sticky?: boolean;
-};
-export type TableParsedGroupFooterRow = TableParsedContentRowBase & {
-    kind: 'group-footer';
-};
-type TableParsedFooterBase = TableParsedCells & {
-    className?: string;
-    content?: ReactNode;
-};
-export type TableParsedRow<RowType extends Record<string, unknown>> = TableParsedDataRow<RowType> | TableParsedExpandedDataRow<RowType> | TableParsedSpacerRow | TableParsedExpandedContentRow | TableParsedGroupRow | TableParsedGroupFooterRow;
-export type TableParsedFooter = TableParsedFooterBase & {
-    cells?: TableParsedFooterCell[];
+export type TableColumn<RowType extends TableRowData> = TableColumnDefinition<RowType>;
+export type TableRowClassName<RowType extends TableRowData> = string | ((row: RowType, rowIndex: number) => string);
+export type TableCellClassName<RowType extends TableRowData> = (row: RowType, column: TableColumnDefinition<RowType>, rowIndex: number, columnIndex: number) => string;
+export type TableRowAnimationProps<RowType extends TableRowData> = MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
+export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLDivElement>, 'draggable' | 'onClick'> & {
+    /**
+     * Row key accessor for resolving a stable unique row id.
+     *
+     * This is recommended whenever rows have their own identifier such as `id`, `vehicleId`, or `uuid`, especially
+     * when using selection, active rows, expanded rows, or virtualization.
+     *
+     * If omitted, the row index is used as a fallback.
+     *
+     * @default row index
+     */
+    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);
+    /**
+     * Controls table or card rendering modes.
+     *
+     * @default 'TABLE'
+     */
+    viewType?: TableViewType;
+    /**
+     * Card width configuration for `MULTI_CARDS` view.
+     */
+    cardsStyle?: TableCardsStyleSettings;
+    /**
+     * Compact row/cell spacing like old `table-condensed`.
+     *
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Zebra rows like old `table-striped`.
+     *
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Hover effect like old `table-hover`.
+     *
+     * @default false
+     */
+    hover?: boolean;
+    /**
+     * Apply table shadow.
+     *
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Simple outer border on table wrapper and card variants.
+     *
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Rounded table corners and card variants.
+     * Top corners are applied to header or body (if no header),
+     * bottom corners are applied to footer or body (if no footer).
+     *
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Show vertical and header row grid lines.
+     *
+     * @default false
+     */
+    gridLines?: boolean;
+    /**
+     * Optional classes for rows.
+     *
+     * Accepts either a static class string for all rows or a callback that resolves
+     * row-specific classes from the current row data and row index.
+     *
+     * @example
+     * rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
+     */
+    rowClassName?: TableRowClassName<RowType>;
+    /**
+     * Width of the separator between regular body rows in table view.
+     *
+     * This affects normal data rows and expanded child rows.
+     * Group rows, group footers, footer rows, and full-width expanded rows keep their own fixed separators.
+     *
+     * @default '1px'
+     */
+    rowSeparatorWidth?: number | string;
+    /**
+     * Sticky column behavior in `TABLE` view.
+     *
+     * `left` is position-based and follows column reordering.
+     * Selection columns and group rows are ignored.
+     *
+     * The public API currently supports `left: 1`.
+     *
+     * @example
+     * stickyColumns={{ left: 1, footer: true }}
+     */
+    stickyColumns?: TableStickyColumns;
+    /**
+     * Current active row key for detail context or external side panels.
+     */
+    activeRowId?: TableRowId;
+    /**
+     * Called when a row is activated or deactivated by row click.
+     */
+    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;
+    /**
+     * Optional low-level motion props applied to data rows for enter, exit, and layout animations.
+     *
+     * This is intended as an advanced escape hatch when the built-in row animation behavior is not sufficient.
+     * Can be defined once for all rows or resolved per row.
+     * A stable `rowKey` is recommended so animations keep working predictably across inserts, removals, and reordering.
+     * Ignored when `virtualizedRows` is enabled.
+     */
+    rowAnimationProps?: TableRowAnimationProps<RowType>;
+    /**
+     * High-level animation settings for expanded rows.
+     *
+     * Pass `false` to disable expanded-row animations entirely.
+     * Pass a `duration` to keep the built-in expanded-row animations but make them faster or slower.
+     */
+    expandedRowAnimation?: TableExpandedRowAnimation;
+    /**
+     * Current sorted column key.
+     */
+    sortBy?: string | string[];
+    /**
+     * Current sort direction for `sortBy`.
+     */
+    sortDirection?: TableSortDirection;
+    /**
+     * Called when a sortable header is clicked.
+     *
+     * Sorting itself remains controlled outside the table.
+     * The click event is passed through as an optional third argument for modifier-key scenarios such as shift-click.
+     */
+    onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional classes for each cell.
+     *
+     * The callback is resolved per rendered body cell and receives the current
+     * row data, the resolved column definition, the row index, and the column index.
+     *
+     * @example
+     * cellClassName={(row, column) => (column.key === 'status' && row.disabled ? 'text-color-muted' : '')}
+     */
+    cellClassName?: TableCellClassName<RowType>;
+    /**
+     * Row click callback. Adds keyboard support and pointer cursor.
+     */
+    onRowClick?: (row: RowType, rowIndex: number) => void;
+    /**
+     * Called when checkbox selection changes.
+     */
+    onSelectionChange?: (rowIds: TableRowId[]) => void;
+    /**
+     * Currently selected row keys for multi-selection use cases.
+     */
+    selectedRowIds?: TableRowId[];
+    /**
+     * Optional custom header content for the selection column.
+     * If omitted, the header renders the default select-all checkbox.
+     */
+    selectionHeaderContent?: ReactNode;
+    /**
+     * Controlled column order for drag-reordering.
+     *
+     * Reordering interactions are enabled when reorderable header columns set `draggable`
+     * and the table is in `TABLE` view.
+     *
+     * Keys not present in the current table columns are ignored.
+     */
+    columnOrder?: string[];
+    /**
+     * Called while a column is resized via the header handle.
+     *
+     * Resize handles are shown only for header columns that set `resizeable`.
+     *
+     * When omitted, the table keeps resized widths internally.
+     * Pass `undefined` to clear a previously configured width.
+     *
+     * Drag-resizing emits pixel widths as numbers. A reset can restore the original
+     * configured width, which may also be a string such as `'20%'`.
+     */
+    onColumnResize?: (columnKey: string, width?: number | string) => void;
+    /**
+     * Called when drag-reordering produces a new column order.
+     *
+     * When omitted, the table keeps the reordered column state internally.
+     * Drag interactions are enabled only for header columns that set `draggable`.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    /**
+     * Render a selection checkbox column as the first column.
+     */
+    showSelectionColumn?: boolean;
+    /**
+     * Fallback content when there are no rows.
+     *
+     * @default 'No data available'
+     */
+    noRowsState?: ReactNode;
+    /**
+     * Enables table-specific row virtualization for vertically scrolling table bodies.
+     *
+     * Virtualization is currently only active in `TABLE` view with `bodyMaxHeight`.
+     *
+     * @default false
+     */
+    virtualizedRows?: boolean;
+    /**
+     * Extra row count rendered above and below the visible area when virtualization is enabled.
+     *
+     * @default 5
+     */
+    virtualizationOverscan?: number;
 };
-export {};

package/components/table/TableBody.d.ts

@@ -1,10 +1,70 @@
-import { PropsWithChildren } from 'react';
-export type TableBodyProps = PropsWithChildren<{
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableBodyProps = TableHtmlAttributes & {
+    /**
+     * Body sections are expected to render row components such as `TableRow`,
+     * `TableExpandedRow`, `TableExpandedContentRow`, `TableGroupRow`,
+     * `TableGroupFooterRow`, or `TableSpacerRow`.
+     *
+     * Rows may be wrapped by custom React components, but direct `TableColumn`
+     * children of `TableBody` are not supported.
+     */
+    children?: ReactNode;
     /**
      * Optional max height of rendered table body.
      * Enables vertical scrolling inside the body.
      */
     maxHeight?: number | string;
-}>;
-declare const TableBody: (_props: TableBodyProps) => null;
-export default TableBody;
+    /**
+     * Called when the scrollable table body reaches the bottom threshold.
+     *
+     * This is useful for progressive loading patterns such as appending the next
+     * chunk of rows when the user scrolls to the end of the body.
+     */
+    onScrollBottom?: () => void;
+    /**
+     * Distance in pixels from the bottom at which `onScrollBottom` should fire.
+     *
+     * Set this to `0` to only trigger when the body is scrolled fully to the end.
+     *
+     * @default 0
+     */
+    scrollBottomOffset?: number;
+};
+export type TableBodyHandle = {
+    scrollToTop: () => void;
+    scrollTo: (options: ScrollToOptions) => void;
+    getScrollElement: () => HTMLDivElement | null;
+};
+declare const _default: import('react').ForwardRefExoticComponent<TableHtmlAttributes & {
+    /**
+     * Body sections are expected to render row components such as `TableRow`,
+     * `TableExpandedRow`, `TableExpandedContentRow`, `TableGroupRow`,
+     * `TableGroupFooterRow`, or `TableSpacerRow`.
+     *
+     * Rows may be wrapped by custom React components, but direct `TableColumn`
+     * children of `TableBody` are not supported.
+     */
+    children?: ReactNode;
+    /**
+     * Optional max height of rendered table body.
+     * Enables vertical scrolling inside the body.
+     */
+    maxHeight?: number | string;
+    /**
+     * Called when the scrollable table body reaches the bottom threshold.
+     *
+     * This is useful for progressive loading patterns such as appending the next
+     * chunk of rows when the user scrolls to the end of the body.
+     */
+    onScrollBottom?: () => void;
+    /**
+     * Distance in pixels from the bottom at which `onScrollBottom` should fire.
+     *
+     * Set this to `0` to only trigger when the body is scrolled fully to the end.
+     *
+     * @default 0
+     */
+    scrollBottomOffset?: number;
+} & import('react').RefAttributes<TableBodyHandle>>;
+export default _default;

package/components/table/TableBody.js

@@ -1,5 +1,135 @@
-const o = (l) => null;
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as D, Children as L, useRef as h, useState as q, useCallback as z, useImperativeHandle as $ } from "react";
+import G from "../smoothScrollbars/SmoothScrollbars.js";
+import J from "../virtualList/useVirtualListResizeObserver.js";
+import { toCssSize as K } from "./layout/columnSizing.js";
+import Q from "./layout/useTableBodyScrollBottom.js";
+import U from "./layout/useTableVirtualization.js";
+import { shouldAnimateBodyRows as W } from "./runtime/shouldAnimateBodyRows.js";
+import H from "./render/body/TableBodyContent.js";
+import { useOptionalTableInteractionContext as X } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as Y } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as Z } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as _, TableBodyContext as oo } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as eo, TableRenderContext as to } from "./context/TableRenderContext.js";
+const ro = (s) => {
+  if (!s)
+    return;
+  const i = Number.parseFloat(s);
+  return Number.isNaN(i) ? void 0 : i;
+}, no = (s, i) => {
+  const { children: b, maxHeight: O, onScrollBottom: d, scrollBottomOffset: P = 0, ...w } = s, t = Z(), o = eo(), R = X(), f = Y(), x = !!o && o.columns.length > 0, C = L.toArray(b).length > 0, c = h(0), m = h(null), y = h(null), [a, V] = q(null);
+  c.current = 0;
+  const r = K(O), k = ro(r), g = x && t?.virtualizedRows === !0 && !!r, E = (o?.bodyRows.length ?? 0) > 0, n = z(
+    () => a?.view ?? y.current?.view ?? null,
+    [a?.view]
+  ), I = z((e) => {
+    y.current = e, V(
+      (A) => A?.view === e?.view ? A : e
+    );
+  }, []);
+  $(
+    i,
+    () => ({
+      scrollToTop: () => {
+        n()?.scrollTo({ top: 0 }), requestAnimationFrame(() => {
+          n()?.scrollTo({ top: 0 });
+        });
+      },
+      scrollTo: (e) => {
+        n()?.scrollTo(e);
+      },
+      getScrollElement: n
+    }),
+    [n]
+  );
+  const { isVirtualized: u, measureRow: N, paddingBottom: v, paddingTop: T, virtualRows: p } = U({
+    enabled: g && E,
+    overscan: t?.virtualizationOverscan ?? 0,
+    rows: o?.bodyRows ?? [],
+    scrollContainer: a,
+    viewportHeightFallback: k
+  });
+  J(m, N, [u, p]);
+  const { handleScrollBottom: F } = Q({
+    enabled: !!r && !!d,
+    itemCount: o?.bodyRows.length ?? 0,
+    onScrollBottom: d,
+    scrollBottomOffset: P,
+    scrollElement: a?.view
+  });
+  if (!t || !o || !R || !f || !x)
+    return null;
+  const B = o.columns.length + (R.showSelectionColumn ? 1 : 0), S = W({
+    rowAnimationProps: t.rowAnimationProps,
+    expandedRowAnimation: t.expandedRowAnimation,
+    hasExpandableRows: o.hasExpandableRows,
+    hasExpandedRows: o.bodyRows.some(
+      (e) => e.kind === "expanded" || e.kind === "expanded-full-width"
+    )
+  });
+  o.renderDraft.bodyMaxHeight = r;
+  const M = /* @__PURE__ */ l(to.Provider, { value: { ...o, isRegisteringBodyRows: !0 }, children: b });
+  return /* @__PURE__ */ l(_.Provider, { value: "body", children: /* @__PURE__ */ j(
+    oo.Provider,
+    {
+      value: {
+        nextRowIndex: () => {
+          const e = c.current;
+          return c.current += 1, e;
+        }
+      },
+      children: [
+        M,
+        r ? /* @__PURE__ */ l(
+          G,
+          {
+            className: "table-body-scroll-wrapper",
+            autoHeight: !0,
+            autoHeightMax: r,
+            onScroll: (e) => {
+              f.handleBodyScroll?.(e), F(e?.currentTarget);
+            },
+            role: "presentation",
+            ref: g || d ? I : void 0,
+            children: /* @__PURE__ */ l(
+              H,
+              {
+                columnCount: B,
+                hasDeclaredChildren: C,
+                htmlAttributes: w,
+                shouldAnimateBodyRows: S,
+                isVirtualized: u,
+                itemsRef: m,
+                paddingBottom: v,
+                paddingTop: T,
+                renderConfigContext: t,
+                renderContext: o,
+                virtualRows: p
+              }
+            )
+          }
+        ) : /* @__PURE__ */ l(
+          H,
+          {
+            columnCount: B,
+            hasDeclaredChildren: C,
+            htmlAttributes: w,
+            shouldAnimateBodyRows: S,
+            isVirtualized: u,
+            itemsRef: m,
+            paddingBottom: v,
+            paddingTop: T,
+            renderConfigContext: t,
+            renderContext: o,
+            virtualRows: p
+          }
+        )
+      ]
+    }
+  ) });
+}, Co = D(no);
 export {
-  o as default
+  Co as default
 };
 //# sourceMappingURL=TableBody.js.map