@dmsi/wedgekit-react 0.0.82 → 0.0.84

package/src/components/{DataGrid.tsx → DataGrid/index.tsx}

@@ -1,35 +1,31 @@
 "use client";
 
-import React, { ReactNode, useCallback, useId, useRef, useState } from "react";
-
-// TanStack Table
+import { useInfiniteScroll } from "../../hooks";
+import { componentGap, componentPadding } from "../../classNames";
+import {
+  Button,
+  Checkbox,
+  DataGridCell,
+  DraggableCellHeader,
+  Icon,
+  Label,
+  Menu,
+  MenuOption,
+  Paragraph,
+  Select,
+  Subheader,
+} from "..";
+import React, { useCallback, useId, useState } from "react";
 import {
-  Cell,
-  Column,
-  ColumnDef,
   ColumnFiltersState,
-  FilterFn,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
-  Header,
-  HeaderGroup,
-  PartialKeys,
-  RowData,
-  SortDirection,
   SortingState,
-  Table,
-  TableOptionsResolved,
   useReactTable,
 } from "@tanstack/react-table";
 
-import {
-  useVirtualizer,
-  VirtualItem,
-  Virtualizer,
-} from "@tanstack/react-virtual";
-
 // DnD Kit
 import {
   closestCenter,
@@ -47,84 +43,18 @@ import {
   SortableContext,
 } from "@dnd-kit/sortable";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-
-// UI Components
-import { Button } from "./Button";
-import { Checkbox } from "./Checkbox";
-import {
-  DataCellHeader,
-  DataGridCell,
-  DragAlongCell,
-  DraggableCellHeader,
-} from "./DataGridCell";
-import { Icon } from "./Icon";
-import { Input } from "./Input";
-import { Search } from "./Search";
-import { Label } from "./Label";
-import { Menu } from "./Menu";
-import { MenuOption } from "./MenuOption";
-import { Paragraph } from "./Paragraph";
-import { Select } from "./Select";
-import { Subheader } from "./Subheader";
-import { Tooltip } from "./Tooltip";
-
-// Utils & Hooks
-import { useInfiniteScroll } from "./useInfiniteScroll";
-import { componentGap, componentPadding } from "../classNames";
+import { DataGridProps } from "./types";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import clsx from "clsx";
-import { Row } from "@tanstack/react-table";
+import { PinnedColumns } from "./PinnedColumns";
+import { getSortIcon } from "./utils";
+import { TableBody } from "./TableBody";
+import { ColumnSelectorHeaderCell } from "./ColumnSelectorHeaderCell";
 
 // Constants
 const PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 const NO_RESULTS_HEIGHT = "h-[120px]";
 
-function adaptTableStateSetter<T>(
-  setter: React.Dispatch<React.SetStateAction<T>>,
-) {
-  return (valueOrFn: T | ((prev: T) => T)) => {
-    setter((prev) =>
-      typeof valueOrFn === "function"
-        ? (valueOrFn as (prev: T) => T)(prev)
-        : valueOrFn,
-    );
-  };
-}
-
-// Types
-export interface DataGridPagination {
-  pageIndex: number;
-  pageSize: number;
-  total: number;
-  onPageChange: (pageIndex: number) => void;
-  onPageSizeChange?: (pageSize: number) => void;
-}
-
-export interface DataGridProps<T extends Record<string, unknown>> {
-  id?: string;
-  data: T[];
-  columns: ColumnDef<T>[];
-  status?: string;
-  locked?: boolean;
-  isLoadingMore?: boolean;
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  pagination?: DataGridPagination;
-  showFilterRow?: boolean;
-  sorting?: SortingState;
-  onSortingChange?: (state: SortingState) => void;
-  columnFilters?: ColumnFiltersState;
-  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
-  rowSelection?: Record<string, boolean>;
-  onRowSelectionChange?: (selection: Record<string, boolean>) => void;
-  filteredSortedData?: T[];
-  totalRowCount: number;
-  hideStatusBar?: boolean;
-  centerHeader?: boolean;
-  enableColumnSelector?: boolean;
-  predeterminedLeftPins?: string[];
-  predeterminedRightPins?: string[];
-}
-
 export function DataGrid<T extends Record<string, unknown>>({
   id,
   data,
@@ -148,6 +78,7 @@ export function DataGrid<T extends Record<string, unknown>>({
   enableColumnSelector,
   predeterminedLeftPins = [],
   predeterminedRightPins = [],
+  useMenuDefaultMinWidth,
 }: DataGridProps<T>) {
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     columns.map((c) => c.id!),
@@ -439,6 +370,10 @@ export function DataGrid<T extends Record<string, unknown>>({
                         const customHeaderWidth =
                           header.column.columnDef.meta?.headerWidth;
 
+                        const cellValue = table
+                          .getRowModel()
+                          .rows[0]?.getValue(header.column.id);
+
                         return (
                           <DraggableCellHeader
                             key={header.id}
@@ -452,7 +387,11 @@ export function DataGrid<T extends Record<string, unknown>>({
                                 ? "cursor-pointer"
                                 : "cursor-grab",
                               "group",
+                              {
+                                "justify-end": typeof cellValue === "number",
+                              },
                             )}
+                            useMenuDefaultMinWidth={useMenuDefaultMinWidth}
                           >
                             <Subheader tall>
                               {header.column.columnDef.header}
@@ -664,594 +603,19 @@ export function DataGrid<T extends Record<string, unknown>>({
     </DndContext>
   );
 }
-
 DataGrid.displayName = "DataGrid";
 
-interface TableBodyProps<TData extends RowData> {
-  id?: string;
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  table: Table<TData>;
-  tableContainerRef: React.RefObject<HTMLDivElement | null>;
-  virtualPaddingLeft?: number | undefined;
-  virtualPaddingRight?: number | undefined;
-  pagination: DataGridPagination | undefined;
-  isLoadingMore: boolean;
-  hasMore: boolean;
-  showFilterRow: boolean;
-  enableColumnSelector?: boolean;
-  locked?: boolean;
-  pinDirection?: "left" | "right";
-}
-
-// Helpers
-
-function TableBody<T>({
-  id,
-  columnVirtualizer,
-  table,
-  tableContainerRef,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  pagination,
-  isLoadingMore,
-  hasMore,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection,
-}: TableBodyProps<T>) {
-  const { rows } = table.getRowModel();
-
-  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-    count: rows.length,
-    estimateSize: () => 40,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 8,
-  });
-
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-
-  let headerGroups: HeaderGroup<T>[];
-  if (pinDirection === "left") {
-    headerGroups = table.getLeftHeaderGroups();
-  } else if (pinDirection === "right") {
-    headerGroups = table.getRightHeaderGroups();
-  } else {
-    headerGroups = table.getCenterHeaderGroups();
-  }
-
-  return (
-    <tbody
-      className={clsx(locked ? "shadow-16" : "")}
-      style={{
-        display: "grid",
-        height: `${
-          showFilterRow
-            ? rowVirtualizer.getTotalSize() + 40
-            : rowVirtualizer.getTotalSize()
-        }px`, // tells scrollbar how big the table is
-        position: "relative", // needed for absolute positioning of rows
-      }}
-    >
-      {showFilterRow && (
-        <tr
-          style={{
-            display: "flex",
-            position: "sticky",
-            top: "40px",
-            width: "100%",
-            height: "40px",
-            zIndex: 10,
-          }}
-          className="even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
-        >
-          {headerGroups.flatMap((x) =>
-            x.headers.map((header) => (
-              <CellElement
-                id={id ? `${id}-filter-cell-${header.id}` : undefined}
-                noPadding
-                key={header.id}
-                cell={header}
-                width={
-                  header.column.columnDef.meta?.headerWidth ||
-                  (locked ? `${header.column.getSize()}px` : "")
-                }
-              >
-                {header.column.getCanFilter() &&
-                  (header.column.columnDef.meta?.filterRowCell?.({
-                    header,
-                    table,
-                  }) ?? (
-                    <Search
-                      id={id ? `${id}-filter-search-${header.id}` : undefined}
-                      removeRoundness
-                      onChange={(e) =>
-                        header.column.setFilterValue(e.target.value)
-                      }
-                      value={(header.column.getFilterValue() ?? "") as string}
-                      placeholder=""
-                      removeSearchIcon
-                    />
-                  ))}
-              </CellElement>
-            )),
-          )}
-        </tr>
-      )}
-
-      {virtualRows.map((virtualRow) => {
-        const row = rows[virtualRow.index] as Row<T>;
-
-        return (
-          <TableBodyRow
-            id={id}
-            columnVirtualizer={columnVirtualizer}
-            key={row.id}
-            row={row}
-            rowVirtualizer={rowVirtualizer}
-            virtualPaddingLeft={virtualPaddingLeft}
-            virtualPaddingRight={virtualPaddingRight}
-            virtualRow={virtualRow}
-            showFilterRow={showFilterRow}
-            enableColumnSelector={enableColumnSelector}
-            locked={locked}
-            pinDirection={pinDirection}
-          />
-        );
-      })}
-
-      {!pagination && isLoadingMore && hasMore && (
-        <tr
-          style={{
-            display: "flex",
-            position: "absolute",
-            width: "100%",
-            transform: `translateY(${
-              virtualRows[virtualRows.length - 1].start + 40
-            }px)`,
-          }}
-          className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
-        >
-          {table.getAllLeafColumns().map((column) => (
-            <LoadingCell id={id} key={column.id} column={column.columnDef} />
-          ))}
-        </tr>
-      )}
-    </tbody>
-  );
-}
-
-interface TableBodyRowProps<T> {
-  id?: string;
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  row: Row<T>;
-  rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
-  virtualPaddingLeft?: number | undefined;
-  virtualPaddingRight?: number | undefined;
-  virtualRow: VirtualItem;
-  showFilterRow: boolean;
-  enableColumnSelector?: boolean;
-  locked?: boolean;
-  pinDirection?: "left" | "right";
-}
-
-function TableBodyRow<T>({
-  id,
-  columnVirtualizer,
-  row,
-  // rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection,
-}: TableBodyRowProps<T>) {
-  let visibleCells: Cell<T, unknown>[];
-
-  if (locked) {
-    visibleCells =
-      pinDirection === "left"
-        ? row.getLeftVisibleCells()
-        : row.getRightVisibleCells();
-  } else {
-    visibleCells = row.getCenterVisibleCells();
-  }
-
-  const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
-  const columns = locked ? visibleCells : virtualColumns;
-
-  const isError =
-    typeof row.original === "object" &&
-    row.original !== null &&
-    "rowState" in row.original &&
-    row.original.rowState === "error";
-
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-
-  return (
-    <tr
-      key={row.id}
-      className={clsx(
-        "transition-colors hover:bg-background-action-secondary-hover",
-        row.getIsSelected() && "!bg-background-action-secondary-hover",
-        isError && "!bg-background-action-critical-secondary-hover",
-        showFilterRow
-          ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
-          : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-      )}
-      style={{
-        display: "flex",
-        position: "absolute",
-        transform: `translateY(${
-          showFilterRow ? virtualRow.start + 40 : virtualRow.start
-        }px)`,
-        width: "100%",
-      }}
-    >
-      {!locked && virtualPaddingLeft ? (
-        // fake empty column to the left for virtualization scroll padding
-        <td style={{ display: "flex", width: virtualPaddingLeft }} />
-      ) : null}
-
-      {columns.map((column) => {
-        const cell = locked
-          ? (column as Cell<T, unknown>)
-          : visibleCells[(column as VirtualItem).index];
-
-        if (!cell) {
-          return;
-        }
-
-        return cell.column.columnDef.meta?.useCustomRenderer ? (
-          <React.Fragment key={cell.id}>
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </React.Fragment>
-        ) : (
-          <CellElement
-            key={cell.id}
-            id={id ? `${id}-cell-${cell.id}` : undefined}
-            cell={cell}
-          >
-            <Tooltip
-              id={id ? `${id}-tooltip-${cell.id}` : undefined}
-              showOnTruncation
-              message={cell.getValue() as string}
-              position="bottom"
-            >
-              <Paragraph addOverflow tall>
-                {cell.getValue() as ReactNode | string}
-              </Paragraph>
-            </Tooltip>
-          </CellElement>
-        );
-      })}
-
-      {!locked && virtualPaddingRight ? (
-        // fake empty column to the right for virtualization scroll padding
-        <td style={{ display: "flex", width: virtualPaddingRight }} />
-      ) : null}
-
-      {enableColumnSelector && !locked && (
-        <td className="p-2" style={{ width: "48.8px" }}></td>
-      )}
-    </tr>
-  );
-}
-
-interface PinnedColumnsProps<TData extends RowData> {
-  pinDirection: "left" | "right";
-  table: Table<TData>;
-  tableContainerRef: React.RefObject<HTMLDivElement | null>;
-  pagination: DataGridPagination | undefined;
-  isLoadingMore: boolean;
-  hasMore: boolean;
-  showFilterRow: boolean;
-  enableColumnSelector?: boolean;
-  centerHeader?: boolean;
-  allSelectedAcrossPages?: boolean;
-  someSelectedAcrossPages?: boolean;
-  toggleSelectAllAcrossPages?: () => void;
-}
-
-function PinnedColumns<TData>({
-  pinDirection = "left",
-  table,
-  centerHeader,
-  allSelectedAcrossPages,
-  someSelectedAcrossPages,
-  toggleSelectAllAcrossPages,
-  ...props
-}: PinnedColumnsProps<TData>) {
-  const headerGroups =
-    pinDirection === "left"
-      ? table.getLeftHeaderGroups()
-      : table.getRightHeaderGroups();
-
-  return (
-    headerGroups[0]?.headers.length > 0 && (
-      <table
-        className={clsx(
-          "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
-          pinDirection === "left" ? "left-0" : "right-0",
-        )}
-      >
-        <thead className="sticky top-0 z-20 grid">
-          {headerGroups.map((headerGroup) => {
-            return (
-              <tr key={headerGroup.id} className="flex w-full">
-                {headerGroup.headers.map((header) => {
-                  if (!header) {
-                    return;
-                  }
-
-                  if (typeof header.column.columnDef.header === "string") {
-                    const customHeaderWidth =
-                      header.column.columnDef.meta?.headerWidth;
-
-                    return (
-                      <DataCellHeader
-                        locked
-                        key={header.id}
-                        header={header}
-                        center={centerHeader}
-                        width={customHeaderWidth}
-                        className={clsx(
-                          header.column.getCanSort()
-                            ? "cursor-pointer"
-                            : "cursor-grab",
-                          "group",
-                        )}
-                      >
-                        <Subheader tall>
-                          {header.column.columnDef.header}
-                        </Subheader>
-
-                        {getSortIcon(header.column.getIsSorted())}
-
-                        {!header.column.getIsSorted() &&
-                          header.column.getCanSort() &&
-                          getSortIcon(
-                            header.column.getNextSortingOrder(),
-                            true,
-                          )}
-
-                        {header.column.getSortIndex() !== -1 &&
-                          table.getState().sorting.length > 1 && (
-                            <Subheader tall>
-                              {header.column.getSortIndex() + 1}
-                            </Subheader>
-                          )}
-
-                        {!header.column.columnDef.meta?.locked && (
-                          <div
-                            onDoubleClick={(e) => {
-                              e.stopPropagation();
-                              header.column.resetSize();
-                            }}
-                            onMouseDown={(e) => {
-                              e.stopPropagation();
-                              header.getResizeHandler()(e);
-                            }}
-                            onTouchStart={(e) => {
-                              e.stopPropagation();
-                              header.getResizeHandler()(e);
-                            }}
-                            className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
-                          />
-                        )}
-                      </DataCellHeader>
-                    );
-                  }
-                  return (
-                    <React.Fragment key={header.id}>
-                      {header.column.columnDef.meta?.checkbox ? (
-                        <DataGridCell type="header" component="checkbox" locked>
-                          <Checkbox
-                            checked={allSelectedAcrossPages}
-                            indeterminate={someSelectedAcrossPages}
-                            onChange={toggleSelectAllAcrossPages}
-                          />
-                        </DataGridCell>
-                      ) : (
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )
-                      )}
-                    </React.Fragment>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </thead>
-
-        <TableBody
-          {...props}
-          table={table}
-          locked={true}
-          pinDirection={pinDirection}
-        />
-      </table>
-    )
-  );
-}
-
-const LoadingCell = <T extends RowData>({
-  id,
-  column,
-}: {
-  id?: string;
-  column: ColumnDef<T>;
-}) => {
-  const key = `loading-${column.id}`;
-  if (column.cell === "checkbox") {
-    return (
-      <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
-        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} disabled />
-      </DataGridCell>
-    );
-  }
-  if (column.cell === "input") {
-    return (
-      <DataGridCell
-        id={id ? `${id}-${key}` : undefined}
-        key={key}
-        component="input"
-      >
-        <Input
-          id={id ? `${id}-${key}-input` : undefined}
-          align="left"
-          disabled
-          wrapperClassName="!rounded-none !border-0"
-        />
-      </DataGridCell>
+// Utils
+function adaptTableStateSetter<T>(
+  setter: React.Dispatch<React.SetStateAction<T>>,
+) {
+  return (valueOrFn: T | ((prev: T) => T)) => {
+    setter((prev) =>
+      typeof valueOrFn === "function"
+        ? (valueOrFn as (prev: T) => T)(prev)
+        : valueOrFn,
     );
-  }
-  return (
-    <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
-      <div className="bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6"></div>
-    </DataGridCell>
-  );
-};
-
-function ColumnSelectorHeaderCell<T>({
-  id,
-  table,
-  toggleColumnVisibility,
-  resetColumnVisibility,
-}: {
-  id?: string;
-  table: Table<T>;
-  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
-  resetColumnVisibility: () => void;
-}) {
-  const ref = useRef<HTMLElement>(null);
-  const [show, setShow] = useState(false);
-
-  return (
-    <DataGridCell
-      id={id}
-      width="48"
-      type="header"
-      color="text-secondary-normal"
-      ref={ref}
-    >
-      <Button
-        id={id ? `${id}-button` : undefined}
-        onClick={() => setShow((prev) => !prev)}
-        variant="navigation"
-        iconOnly
-        leftIcon={<Icon name="tune" />}
-      ></Button>
-      <Menu
-        id={id ? `${id}-menu` : undefined}
-        positionTo={ref}
-        position="bottom-right"
-        show={show}
-        setShow={setShow}
-      >
-        <Button
-          id={id ? `${id}-reset-button` : undefined}
-          variant="tertiary"
-          onClick={() => {
-            resetColumnVisibility();
-            setShow(false);
-          }}
-        >
-          Reset to default
-        </Button>
-        {table
-          .getAllColumns()
-          .filter((x) => x.columnDef.meta?.inVisibilityMenu)
-          .map((column) => (
-            <ColumnSelectorMenuOption
-              id={id ? `${id}-option-${column.id}` : undefined}
-              key={column.id}
-              column={column}
-              toggleColumnVisibility={toggleColumnVisibility}
-            />
-          ))}
-      </Menu>
-    </DataGridCell>
-  );
-}
-
-function ColumnSelectorMenuOption<T>({
-  id,
-  column,
-  toggleColumnVisibility,
-}: {
-  id?: string;
-  column: Column<T, unknown>;
-  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
-}) {
-  const [isVisible, setIsVisible] = useState(column.getIsVisible());
-  const label =
-    typeof column.columnDef.header === "string"
-      ? column.columnDef.header
-      : null;
-  return (
-    <MenuOption id={id} selected={isVisible} defaultChecked={isVisible}>
-      <Checkbox
-        id={id ? `${id}-checkbox` : undefined}
-        label={label ?? "Unknown"}
-        checked={isVisible}
-        onChange={(e) => {
-          setIsVisible(e.target.checked);
-          toggleColumnVisibility(column.id, e.target.checked);
-        }}
-      />
-    </MenuOption>
-  );
-}
-
-function getSortIcon(sort: SortDirection | false, nextSort = false) {
-  const iconClassName = clsx(
-    "text-icon-on-action-primary-normal",
-    nextSort && "hidden group-hover:block",
-  );
-  if (sort === "asc")
-    return <Icon size={16} className={iconClassName} name="arrow_upward" />;
-  if (sort === "desc")
-    return <Icon size={16} className={iconClassName} name="arrow_downward" />;
-  return null;
+  };
 }
 
-// Extend TanStack ColumnMeta
-declare module "@tanstack/react-table" {
-  interface TableOptions<TData extends RowData>
-    extends PartialKeys<
-      TableOptionsResolved<TData>,
-      "state" | "onStateChange" | "renderFallbackValue"
-    > {
-    filterFns?: FilterFns;
-  }
-  interface FilterFns {
-    endsWith?: FilterFn<RowData>;
-    startsWith?: FilterFn<RowData>;
-  }
-
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: "text" | "select" | "range";
-    className?: string;
-    sticky?: boolean;
-    useCustomRenderer?: boolean;
-    locked?: boolean;
-    checkbox?: boolean;
-    headerWidth?: string;
-    visible?: boolean;
-    inVisibilityMenu?: boolean;
-    filterRowCell?: ({
-      header,
-      table,
-    }: {
-      header: Header<TData, TValue>;
-      table: Table<TData>;
-    }) => ReactNode;
-  }
-}
-export type { ColumnDef };
+export type { ColumnDef } from "@tanstack/react-table";