@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/table/table.tsx

@@ -1,410 +0,0 @@
-'use client';
-
-import { type ReactNode, useEffect, useRef } from 'react';
-import { cn } from '../../../utils/cn';
-import { Chevron02RightIcon } from '../../icons-v2-generated';
-import { Pagination } from '../../pagination';
-import { Button } from '../button';
-import { CursorPagination, CursorPaginationSkeleton } from '../cursor-pagination';
-import { PlaceholderRows, ReservedEmptyState } from '../data-table/data-table-skeleton';
-import { useLoadingScope } from '../loading-scope';
-import { TableEmptyState } from './table-empty-state';
-import { TableHeader } from './table-header';
-import { TableRow } from './table-row';
-import { COMPACT_ROW_MIN_HEIGHT, TABLE_SKELETON_ROWS, TableCardSkeleton } from './table-skeleton';
-import type { RowAction, TableColumn, TableProps, TableRowData } from './types';
-import { useTableMotion } from './use-table-motion';
-import { TABLE_ACTIONS_COLUMN_KEY, TABLE_CHEVRON_COLUMN_KEY } from './utils';
-
-/**
- * Injects synthetic columns (row actions and/or row-level chevron link) at the end of the columns array.
- */
-function injectSyntheticColumns<T>(
-  columns: TableColumn<T>[],
-  rowActions?: RowAction<T>[],
-  renderRowActions?: (item: T) => ReactNode,
-  rowHref?: (item: T) => string | null | undefined,
-  actionsColumnWidth?: string,
-): TableColumn<T>[] {
-  const hasActions = Boolean(rowActions?.length) || Boolean(renderRowActions);
-  const result = [...columns];
-  // Captured OUTSIDE `renderCell` below. The cell renders long after this
-  // function returns, so no narrowing of the optional `rowActions` parameter
-  // survives into it; defaulting here keeps the render a plain array map.
-  // `hasActions` guarantees this is non-empty whenever `renderRowActions` is
-  // absent, so the `[]` fallback is the unreachable branch, not a silent drop.
-  const actions = rowActions ?? [];
-
-  if (hasActions) {
-    const actionsColumn: TableColumn<T> = {
-      key: TABLE_ACTIONS_COLUMN_KEY,
-      label: '',
-      // A caller-fixed width keeps the header and every row on ONE grid
-      // (see `actionsColumnWidth` in types.ts); the default stays
-      // content-sized for back-compat.
-      width: actionsColumnWidth ?? 'min-w-[100px] w-auto shrink-0 flex-none',
-      align: 'right',
-      renderCell: (item: T) => (
-        <div className="pointer-events-auto flex items-center justify-end gap-2" data-no-row-click>
-          {renderRowActions
-            ? renderRowActions(item)
-            : actions.map((action, actionIndex) => (
-                <Button
-                  key={actionIndex}
-                  variant="outline"
-                  onClick={e => {
-                    e.stopPropagation();
-                    action.onClick(item);
-                  }}
-                  leftIcon={action.icon}
-                  className={action.className}
-                >
-                  {action.label}
-                </Button>
-              ))}
-        </div>
-      ),
-    };
-    result.push(actionsColumn);
-  }
-
-  if (rowHref) {
-    const chevronColumn: TableColumn<T> = {
-      key: TABLE_CHEVRON_COLUMN_KEY,
-      label: '',
-      width: 'w-12 shrink-0 flex-none',
-      align: 'right',
-      renderCell: (item: T) => {
-        const href = rowHref(item);
-        if (!href) return null;
-        return (
-          <div className="pointer-events-auto flex items-center justify-end" data-no-row-click>
-            <Button
-              href={href}
-              prefetch={false}
-              variant="outline"
-              size="icon"
-              leftIcon={<Chevron02RightIcon className="h-6 w-6" />}
-              aria-label="View details"
-            />
-          </div>
-        );
-      },
-    };
-    result.push(chevronColumn);
-  }
-
-  return result;
-}
-
-/** @deprecated Use `DataTable` from `data-table` instead. */
-export function Table<T = TableRowData>({
-  data,
-  columns,
-  rowKey,
-  loading: loadingProp = false,
-  emptyMessage,
-  skeletonRows: skeletonRowsProp,
-  minRows,
-  emptyState,
-  keepHeightWhenEmpty,
-  emptyDescription,
-  className,
-  containerClassName,
-  headerClassName,
-  rowClassName,
-  compact,
-  onRowClick,
-  rowActions,
-  renderRowActions,
-  rowHref,
-  sortBy,
-  sortDirection,
-  onSort,
-  filters,
-  onFilterChange,
-  selectable,
-  selectedRows = [],
-  onSelectionChange,
-  bulkActions,
-  showToolbar,
-  cursorPagination,
-  pagePagination,
-  paginationClassName,
-  infiniteScroll,
-  stickyHeader,
-  stickyHeaderOffset,
-  animateRowReorder,
-  actionsColumnWidth,
-}: TableProps<T>) {
-  // A loading table draws ONE FULL PAGE of rows: the host's count, else its page pagination's page size, else a
-  // typical count for an unpaged table.
-  const skeletonRows = skeletonRowsProp ?? pagePagination?.pageSize ?? TABLE_SKELETON_ROWS;
-  // In a page's loading state the table is loading: its header real, its rows the row skeletons.
-  const loading = useLoadingScope() || loadingProp;
-  // Opt-in row-reorder animation: framer-motion is loaded lazily (its own chunk)
-  // ONLY when `animateRowReorder` is set, so the default table stays motion-free.
-  const tableMotion = useTableMotion(Boolean(animateRowReorder));
-  const columnsWithActions = injectSyntheticColumns(columns, rowActions, renderRowActions, rowHref, actionsColumnWidth);
-  // The rows' skeleton: the rows' own columns (the synthetic actions and chevron columns at their widths), its
-  // action buttons as the row draws them.
-  const skeletonShape = {
-    columns: columnsWithActions,
-    compact,
-    selectable,
-    actions: renderRowActions
-      ? undefined
-      : rowActions?.map(action => ({ iconOnly: Boolean(action.icon) && !action.label })),
-  };
-
-  // ONE resolution of the two vocabularies, so the render below never asks
-  // which spelling the caller used. `minRows` is the current one; the two
-  // deprecated props shipped a release earlier and hosts pin exact versions,
-  // so they keep working rather than silently doing nothing.
-  const reservedRows = minRows ?? (keepHeightWhenEmpty ? skeletonRows : undefined);
-  const resolvedEmptyState =
-    emptyState ?? (emptyDescription ? { title: emptyMessage, description: emptyDescription } : undefined);
-  const getRowHref = (item: T): string | undefined => {
-    if (onRowClick || !rowHref) return undefined;
-    return rowHref(item) ?? undefined;
-  };
-  const getRowKey = (item: T, index: number): string => {
-    if (typeof rowKey === 'function') {
-      return rowKey(item);
-    }
-    const key = item[rowKey];
-    return key?.toString() || index.toString();
-  };
-
-  const getRowClassName = (item: T, index: number): string => {
-    if (typeof rowClassName === 'function') {
-      return rowClassName(item, index);
-    }
-    return rowClassName || '';
-  };
-
-  const isRowSelected = (item: T) => {
-    if (!selectable || !selectedRows) return false;
-    const key = getRowKey(item, -1);
-    return selectedRows.some(row => getRowKey(row, -1) === key);
-  };
-
-  const handleSelectRow = (item: T) => {
-    if (!onSelectionChange) return;
-
-    const key = getRowKey(item, -1);
-    const isSelected = isRowSelected(item);
-
-    if (isSelected) {
-      onSelectionChange(selectedRows.filter(row => getRowKey(row, -1) !== key));
-    } else {
-      onSelectionChange([...selectedRows, item]);
-    }
-  };
-
-  const handleSelectAll = () => {
-    if (!onSelectionChange) return;
-
-    if (selectedRows.length === data.length) {
-      onSelectionChange([]);
-    } else {
-      onSelectionChange([...data]);
-    }
-  };
-
-  const allSelected = selectedRows.length > 0 && selectedRows.length === data.length;
-  const someSelected = selectedRows.length > 0 && selectedRows.length < data.length;
-
-  // Infinite scroll: IntersectionObserver on sentinel div
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  // Refreshed after every commit, declared before the observer effect so it
-  // wins the same flush. Not in the render body: the reader is the
-  // IntersectionObserver callback, which cannot fire before a commit.
-  const onLoadMoreRef = useRef(infiniteScroll?.onLoadMore);
-  useEffect(() => {
-    onLoadMoreRef.current = infiniteScroll?.onLoadMore;
-  });
-
-  useEffect(() => {
-    if (!infiniteScroll?.hasNextPage || infiniteScroll.isFetchingNextPage) return undefined;
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return undefined;
-
-    const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0]?.isIntersecting) {
-          onLoadMoreRef.current?.();
-        }
-      },
-      { rootMargin: '200px' },
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [infiniteScroll?.hasNextPage, infiniteScroll?.isFetchingNextPage]);
-
-  return (
-    <div className={cn('flex w-full flex-col gap-1', containerClassName)}>
-      {/* Toolbar for bulk actions */}
-      {showToolbar && bulkActions && selectedRows.length > 0 && (
-        <div className="mb-2 flex items-center justify-between rounded-[6px] border border-ods-border bg-ods-card p-3">
-          <span className="text-ods-text-secondary text-h6">
-            {selectedRows.length} item{selectedRows.length !== 1 ? 's' : ''} selected
-          </span>
-          <div className="flex gap-2">
-            {bulkActions.map((action, index) => (
-              <button
-                key={index}
-                onClick={() => action.onClick(selectedRows)}
-                disabled={action.requiresSelection && selectedRows.length === 0}
-                className={cn(
-                  'rounded border px-3 py-1.5 transition-colors text-h6',
-                  'border-ods-border bg-ods-card text-ods-text-primary hover:bg-ods-bg-active',
-                  action.className,
-                )}
-              >
-                {action.icon}
-                {action.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Desktop Header */}
-      <TableHeader
-        columns={columnsWithActions}
-        className={headerClassName}
-        sortBy={sortBy}
-        sortDirection={sortDirection}
-        onSort={onSort}
-        filters={filters}
-        onFilterChange={onFilterChange}
-        selectable={selectable}
-        allSelected={allSelected}
-        someSelected={someSelected}
-        onSelectAll={handleSelectAll}
-        totalItemsCount={data.length}
-        stickyHeader={stickyHeader}
-        stickyHeaderOffset={stickyHeaderOffset}
-      />
-
-      {/* Table Body */}
-      <div className={cn('flex w-full flex-col gap-2', className)}>
-        {loading && data.length === 0 ? (
-          <TableCardSkeleton {...skeletonShape} rows={skeletonRows} />
-        ) : data.length === 0 ? (
-          /* `minRows` promises a STABLE height, and an empty table is exactly
-             when a collapsing one is most visible — the pagination and
-             everything under it jump the moment a filter matches nothing. So
-             reserve the same slots and centre the empty state over them,
-             identically to `DataTableBody`. */
-          reservedRows ? (
-            <ReservedEmptyState
-              count={reservedRows}
-              gapClassName="gap-2"
-              innerHeightClassName={compact ? COMPACT_ROW_MIN_HEIGHT : undefined}
-            >
-              <TableEmptyState message={emptyMessage} emptyState={resolvedEmptyState} />
-            </ReservedEmptyState>
-          ) : (
-            <TableEmptyState message={emptyMessage} emptyState={resolvedEmptyState} />
-          )
-        ) : (
-          <>
-            {/* Real data rows. When `animateRowReorder` is on, wrap ONLY these
-                in a `LayoutGroup` so a reorder (same key, new order) animates via
-                FLIP — the invisible placeholder rows below are intentionally left
-                outside it. `AnimatePresence` is not needed here: the row set is
-                stable across a reorder (no enter/exit); add it if a future task
-                animates rows being added/removed. */}
-            {(() => {
-              const rows = data.map((item, index) => (
-                <TableRow
-                  key={getRowKey(item, index)}
-                  item={item}
-                  columns={columnsWithActions}
-                  onClick={onRowClick}
-                  href={getRowHref(item)}
-                  className={getRowClassName(item, index)}
-                  index={index}
-                  compact={compact}
-                  selectable={selectable}
-                  selected={isRowSelected(item)}
-                  onSelect={handleSelectRow}
-                  animateRowReorder={animateRowReorder}
-                  motionDiv={tableMotion?.motionDiv}
-                />
-              ));
-              // LayoutGroup only once framer-motion has lazily resolved; until
-              // then (and when off) rows render as plain `<div>`s.
-              const LayoutGroup = tableMotion?.LayoutGroup;
-              return animateRowReorder && LayoutGroup ? <LayoutGroup>{rows}</LayoutGroup> : rows;
-            })()}
-            {/* Infinite scroll: skeleton rows */}
-            {infiniteScroll?.isFetchingNextPage && (
-              <TableCardSkeleton {...skeletonShape} rows={infiniteScroll.skeletonRows ?? 3} />
-            )}
-            {/* Infinite scroll: sentinel element */}
-            {infiniteScroll?.hasNextPage && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
-            {/* Invisible placeholder rows to maintain consistent table height
-                (disabled for infinite scroll). `minRows` when the host opted
-                in, else the legacy pad-to-`skeletonRows`. */}
-            {!infiniteScroll && (
-              <PlaceholderRows
-                count={Math.max(0, (reservedRows ?? skeletonRows) - data.length)}
-                innerHeightClassName={compact ? COMPACT_ROW_MIN_HEIGHT : undefined}
-              />
-            )}
-          </>
-        )}
-      </div>
-
-      {/* Pagination - only show when there's data and infinite scroll is not active */}
-      {!infiniteScroll && cursorPagination && data.length > 0 && (
-        <CursorPagination
-          hasNextPage={cursorPagination.hasNextPage}
-          hasPreviousPage={cursorPagination.hasPreviousPage}
-          isFirstPage={cursorPagination.isFirstPage}
-          startCursor={cursorPagination.startCursor}
-          endCursor={cursorPagination.endCursor}
-          currentCount={cursorPagination.currentCount ?? data.length}
-          totalCount={cursorPagination.totalCount}
-          itemName={cursorPagination.itemName}
-          loading={loading}
-          onNext={cursorPagination.onNext}
-          onPrevious={cursorPagination.onPrevious}
-          onReset={cursorPagination.onReset}
-          showInfo={cursorPagination.showInfo ?? true}
-          compact={cursorPagination.compact}
-          resetButtonLabel={cursorPagination.resetButtonLabel}
-          resetButtonIcon={cursorPagination.resetButtonIcon}
-          className={cn('mt-2 border-t border-ods-border pt-3', paginationClassName)}
-        />
-      )}
-
-      {/* While the first page is read: the pager's skeleton in its place (its buttons real and inert). */}
-      {!infiniteScroll && cursorPagination && loading && data.length === 0 && (
-        <CursorPaginationSkeleton
-          hasPreviousPage={cursorPagination.hasPreviousPage}
-          onPrevious={cursorPagination.onPrevious}
-          onReset={cursorPagination.onReset}
-          showInfo={cursorPagination.showInfo ?? true}
-          compact={cursorPagination.compact}
-          resetButtonLabel={cursorPagination.resetButtonLabel}
-          resetButtonIcon={cursorPagination.resetButtonIcon}
-          className={cn('mt-2 border-t border-ods-border pt-3', paginationClassName)}
-        />
-      )}
-
-      {!infiniteScroll && pagePagination && !cursorPagination && data.length > 0 && (
-        <div className={cn('mt-2 border-t border-ods-border pt-3', paginationClassName)}>
-          <Pagination
-            currentPage={pagePagination.currentPage}
-            totalPages={pagePagination.totalPages}
-            onPageChange={pagePagination.onPageChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-}