@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/DataGrid/index.tsx

@@ -1,756 +0,0 @@
-"use client";
-
-import { useInfiniteScroll, useTableLayout } from "../../hooks";
-import { componentGap, componentPadding } from "../../classNames";
-import {
-  Button,
-  Checkbox,
-  DataGridCell,
-  DraggableCellHeader,
-  Icon,
-  Label,
-  Menu,
-  MenuOption,
-  Paragraph,
-  Select,
-  Subheader,
-} from "..";
-import React, {
-  useCallback,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useState,
-} from "react";
-import {
-  ColumnFiltersState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-
-// DnD Kit
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  horizontalListSortingStrategy,
-  SortableContext,
-} from "@dnd-kit/sortable";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import { DataGridProps } from "./types";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import clsx from "clsx";
-import { PinnedColumns } from "./PinnedColumns";
-import { getSortIcon } from "./utils";
-import { TableBody } from "./TableBody";
-import { NoResultsImg } from "../..";
-
-// Constants
-const PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
-const NO_RESULTS_HEIGHT = "h-[185px]";
-
-export function DataGrid<T extends Record<string, unknown>>({
-  id,
-  rowIdAccessor,
-  testid,
-  data,
-  columns,
-  status,
-  isLoadingMore = false,
-  onLoadMore,
-  pagination,
-  showFilterRow = false,
-  hasMore = false,
-  sorting: externalSorting,
-  onSortingChange,
-  columnFilters: externalColumnFilters,
-  onColumnFiltersChange,
-  rowSelection: externalRowSelection,
-  onRowSelectionChange,
-  filteredSortedData,
-  totalRowCount,
-  hideStatusBar,
-  centerHeader,
-  enableColumnSelector,
-  predeterminedLeftPins = [],
-  predeterminedRightPins = [],
-  useMenuDefaultMinWidth,
-  rowDisabled,
-  rowDisabledAccessor,
-  ref,
-}: DataGridProps<T>) {
-  useImperativeHandle(ref, () => ({
-    getSavedLayout: () => {
-      return getSavedLayout();
-    },
-  }));
-  const [localSorting, setLocalSorting] = useState<SortingState>([]);
-  const [localColumnFilters, setLocalColumnFilters] =
-    useState<ColumnFiltersState>([]);
-  const [localRowSelection, setLocalRowSelection] = useState<
-    Record<string, boolean>
-  >({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    getSavedLayout,
-  } = useTableLayout<T>(columns, id ?? testid);
-  const [columnOrder, setColumnOrder] = useState<string[]>(
-    tableColumns.map((c) => c.id!),
-  );
-
-  const [columnVisibility, setColumnVisibility] = useState<
-    Record<string, boolean>
-  >(
-    Object.fromEntries(
-      tableColumns
-        .filter((column) => !!column.id)
-        .map((column) => [column.id, column.meta?.visible ?? true]),
-    ),
-  );
-
-  const updateColumnVisibility = useCallback(
-    (updateOrder?: boolean) => {
-      setColumnVisibility(
-        Object.fromEntries(
-          tableColumns
-            .filter((column) => !!column.id)
-            .map((column) => [column.id, column.meta?.visible ?? true]),
-        ),
-      );
-      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id!));
-    },
-    [tableColumns],
-  );
-
-  const resetDefaultColumnVisibility = useCallback(() => {
-    setTableColumns((prev) => {
-      columns.forEach((column) => {
-        const columnId = column.id;
-        const isVisible = column.meta?.visible ?? true;
-        const persistedIndex = prev.findIndex((col) => col.id === columnId);
-        if (persistedIndex !== -1) {
-          prev[persistedIndex].meta = {
-            ...prev[persistedIndex].meta,
-            visible: isVisible,
-          };
-        }
-      });
-      return [...prev];
-      // @ts-expect-error Internal usage only
-    }, true);
-  }, [columns, setTableColumns]);
-
-  useEffect(() => {
-    updateColumnVisibility(true);
-  }, [updateColumnVisibility]);
-
-  const sortingState = pagination
-    ? (externalSorting ?? localSorting)
-    : localSorting;
-  const setSortingState: React.Dispatch<React.SetStateAction<SortingState>> =
-    pagination
-      ? (updaterOrValue) => {
-          const value =
-            typeof updaterOrValue === "function"
-              ? (updaterOrValue as (prev: SortingState) => SortingState)(
-                  externalSorting ?? [],
-                )
-              : updaterOrValue;
-          (onSortingChange ?? setLocalSorting)(value);
-        }
-      : setLocalSorting;
-
-  const columnFilterState = pagination
-    ? (externalColumnFilters ?? localColumnFilters)
-    : localColumnFilters;
-
-  const setColumnFilterState: React.Dispatch<
-    React.SetStateAction<ColumnFiltersState>
-  > = pagination
-    ? (updaterOrValue) => {
-        const value =
-          typeof updaterOrValue === "function"
-            ? (
-                updaterOrValue as (
-                  prev: ColumnFiltersState,
-                ) => ColumnFiltersState
-              )(externalColumnFilters ?? [])
-            : updaterOrValue;
-        (onColumnFiltersChange ?? setLocalColumnFilters)(value);
-      }
-    : setLocalColumnFilters;
-
-  const rowSelection = externalRowSelection ?? localRowSelection;
-
-  const setRowSelection: React.Dispatch<
-    React.SetStateAction<Record<string, boolean>>
-  > = useCallback(
-    (updaterOrValue) => {
-      if (pagination) {
-        const value =
-          typeof updaterOrValue === "function"
-            ? (
-                updaterOrValue as (
-                  prev: Record<string, boolean>,
-                ) => Record<string, boolean>
-              )(externalRowSelection ?? {})
-            : updaterOrValue;
-        (onRowSelectionChange ?? setLocalRowSelection)(value);
-      } else if (externalRowSelection && onRowSelectionChange) {
-        const value =
-          typeof updaterOrValue === "function"
-            ? (
-                updaterOrValue as (
-                  prev: Record<string, boolean>,
-                ) => Record<string, boolean>
-              )(externalRowSelection ?? {})
-            : updaterOrValue;
-
-        onRowSelectionChange(value);
-      } else {
-        setLocalRowSelection(updaterOrValue);
-      }
-    },
-    [externalRowSelection, onRowSelectionChange, pagination],
-  );
-
-  const dndId = useId();
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  const toggleColumnVisibility = useCallback(
-    (columnId: string, isVisible: boolean) => {
-      setTableColumns((prev) => {
-        const persistedIndex = prev.findIndex((col) => col.id === columnId);
-        if (persistedIndex !== -1) {
-          prev[persistedIndex].meta = {
-            ...prev[persistedIndex].meta,
-            visible: isVisible,
-          };
-        }
-        return [...prev];
-        // @ts-expect-error Internal usage only
-      }, true);
-    },
-    [setTableColumns],
-  );
-
-  const table = useReactTable<T>({
-    columns: tableColumns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    columnResizeMode: "onChange",
-    getRowId: rowIdAccessor
-      ? (row) => String(row[rowIdAccessor])
-      : (row, index) => String(row.id ?? index + 1),
-    state: {
-      columnOrder,
-      sorting: sortingState,
-      columnFilters: columnFilterState,
-      rowSelection,
-      columnVisibility,
-    },
-    initialState: {
-      columnPinning: {
-        left: predeterminedLeftPins,
-        right: predeterminedRightPins,
-      },
-    },
-    enableColumnPinning:
-      predeterminedLeftPins?.length > 0 || predeterminedRightPins.length > 0,
-    onColumnOrderChange: setColumnOrder,
-    onSortingChange: adaptTableStateSetter(setSortingState),
-    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
-    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
-    filterFns: {
-      startsWith: (row, columnId, filterValue) => {
-        const cellValue = row?.getValue(columnId);
-
-        if (!cellValue || !filterValue) {
-          return true;
-        }
-
-        return String(cellValue)
-          .toLowerCase()
-          .startsWith(String(filterValue).toLowerCase());
-      },
-      endsWith: (row, columnId, filterValue) => {
-        const cellValue = row?.getValue(columnId);
-
-        if (!cellValue || !filterValue) {
-          return true;
-        }
-
-        return String(cellValue)
-          .toLowerCase()
-          .endsWith(String(filterValue).toLowerCase());
-      },
-    },
-  });
-
-  const allRowIds = pagination
-    ? (filteredSortedData?.map((row) => String(row.id)) ?? [])
-    : Array.from({ length: totalRowCount ?? data.length }, (_, i) =>
-        String(i + 1),
-      );
-
-  const allSelectedAcrossPages = allRowIds.every(
-    (rowId) => rowSelection[rowId],
-  );
-  const someSelectedAcrossPages =
-    !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
-
-  const toggleSelectAllAcrossPages = () => {
-    setRowSelection((prev) => {
-      const isSelecting = !allSelectedAcrossPages;
-
-      if (isSelecting) {
-        const newSelection: Record<string, boolean> = {};
-        for (const rowId of allRowIds) {
-          newSelection[rowId] = true;
-        }
-        return { ...prev, ...newSelection };
-      } else {
-        const updatedSelection: Record<string, boolean> = { ...prev };
-        for (const rowId of allRowIds) {
-          delete updatedSelection[rowId];
-        }
-        return updatedSelection;
-      }
-    });
-  };
-
-  useInfiniteScroll({
-    containerRef,
-    onLoadMore: onLoadMore ?? (() => {}),
-    isLoading: isLoadingMore,
-    enabled: !pagination,
-  });
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (active && over && active.id !== over.id) {
-      setColumnOrder((prev) => {
-        const oldIndex = prev.indexOf(active.id as string);
-        const newIndex = prev.indexOf(over.id as string);
-        const newOrder = arrayMove(prev, oldIndex, newIndex);
-        setTableColumns((prev) => {
-          // Mirror columnOrder's string = id
-          const res = newOrder
-            .map((id) => prev.find((col) => col.id === id)!)
-            .filter(Boolean);
-          return res;
-        });
-        return newOrder;
-      });
-    }
-  };
-
-  const sensors = useSensors(
-    useSensor(MouseSensor),
-    useSensor(TouchSensor),
-    useSensor(KeyboardSensor),
-  );
-
-  const visibleColumns = table.getVisibleLeafColumns();
-
-  const columnVirtualizer = useVirtualizer<
-    HTMLDivElement,
-    HTMLTableCellElement
-  >({
-    count: visibleColumns.length,
-    estimateSize: (index) => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
-    getScrollElement: () => containerRef.current,
-    horizontal: true,
-    overscan: 8, //how many columns to render on each side off screen each way
-  });
-
-  const virtualColumns = columnVirtualizer.getVirtualItems();
-
-  let virtualPaddingLeft: number | undefined;
-  let virtualPaddingRight: number | undefined;
-
-  if (columnVirtualizer && virtualColumns?.length) {
-    virtualPaddingLeft = virtualColumns[0]?.start ?? 0;
-    virtualPaddingRight =
-      columnVirtualizer.getTotalSize() -
-      (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
-  }
-
-  const empty = table.getRowModel().rows.length === 0;
-
-  return (
-    <DndContext
-      id={dndId}
-      collisionDetection={closestCenter}
-      modifiers={[restrictToHorizontalAxis]}
-      onDragEnd={handleDragEnd}
-      sensors={sensors}
-    >
-      <SortableContext
-        items={columnOrder}
-        strategy={horizontalListSortingStrategy}
-      >
-        <div
-          id={id}
-          data-testid={testid}
-          className="flex flex-col grow-0 h-fit w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal"
-        >
-          <div
-            className={clsx(
-              "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
-              empty ? "overflow-y-hidden" : "min-h-[120px]",
-            )}
-            ref={containerRef}
-          >
-            <PinnedColumns
-              testid={testid}
-              pinDirection="left"
-              table={table}
-              tableContainerRef={containerRef}
-              pagination={pagination}
-              isLoadingMore={isLoadingMore}
-              hasMore={hasMore}
-              showFilterRow={showFilterRow}
-            />
-
-            <table className="flex-1 flex flex-col min-h-min">
-              <thead className="sticky top-0 z-10 grid">
-                {table.getCenterHeaderGroups().map((headerGroup) => (
-                  <tr
-                    data-testid={
-                      testid
-                        ? `${testid}-header-row-${headerGroup.id}`
-                        : undefined
-                    }
-                    key={headerGroup.id}
-                    className="flex w-full"
-                  >
-                    {virtualPaddingLeft ? (
-                      // fake empty column to the left for virtualization scroll padding
-                      <th
-                        style={{ display: "flex", width: virtualPaddingLeft }}
-                      />
-                    ) : null}
-
-                    {virtualColumns.map((virtualColumn) => {
-                      const header = headerGroup.headers[virtualColumn.index];
-                      if (!header) {
-                        return;
-                      }
-
-                      if (typeof header.column.columnDef.header === "string") {
-                        const cellValue = table
-                          .getRowModel()
-                          .rows[0]?.getValue(header.column.id);
-
-                        // removed forced type usage
-                        const cellAlignment =
-                          header.column.columnDef.meta?.align ??
-                          (typeof cellValue === "number" ? "right" : "left");
-
-                        return (
-                          <DraggableCellHeader
-                            key={header.id}
-                            minWidth={`${header.column.getSize()}px`}
-                            id={id ? `${id}-header-${header.id}` : undefined}
-                            testid={
-                              testid
-                                ? `${testid}-header-${header.id}`
-                                : undefined
-                            }
-                            header={header}
-                            locked={header.column.columnDef.meta?.locked}
-                            center={centerHeader}
-                            className={clsx(
-                              header.column.getCanSort()
-                                ? "cursor-pointer"
-                                : "cursor-grab",
-                              "group",
-                              {
-                                "justify-start": cellAlignment === "left",
-                                "justify-end": cellAlignment === "right",
-                              },
-                            )}
-                            useMenuDefaultMinWidth={useMenuDefaultMinWidth}
-                          >
-                            {cellAlignment === "left" && (
-                              <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>
-                              )}
-                            {cellAlignment === "right" && (
-                              <Subheader tall>
-                                {header.column.columnDef.header}
-                              </Subheader>
-                            )}
-                            <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"
-                            />
-                          </DraggableCellHeader>
-                        );
-                      }
-                      return (
-                        <React.Fragment key={header.id}>
-                          {header.column.columnDef.meta?.checkbox ? (
-                            <DataGridCell
-                              id={id ? `${id}-header-${header.id}` : undefined}
-                              testid={
-                                testid
-                                  ? `${testid}-header-${header.id}`
-                                  : undefined
-                              }
-                              type="header"
-                              component="checkbox"
-                              locked
-                            >
-                              <Checkbox
-                                id={
-                                  id ? `${id}-select-all-checkbox` : undefined
-                                }
-                                testid={
-                                  testid
-                                    ? `${testid}-select-all-checkbox`
-                                    : undefined
-                                }
-                                checked={allSelectedAcrossPages}
-                                indeterminate={someSelectedAcrossPages}
-                                onChange={toggleSelectAllAcrossPages}
-                              />
-                            </DataGridCell>
-                          ) : (
-                            flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )
-                          )}
-                        </React.Fragment>
-                      );
-                    })}
-
-                    {virtualPaddingRight ? (
-                      //fake empty column to the right for virtualization scroll padding
-                      <th
-                        style={{ display: "flex", width: virtualPaddingRight }}
-                      />
-                    ) : null}
-                  </tr>
-                ))}
-              </thead>
-
-              <TableBody
-                id={id}
-                testid={testid}
-                columnVirtualizer={columnVirtualizer}
-                table={table}
-                tableContainerRef={containerRef}
-                virtualPaddingLeft={virtualPaddingLeft}
-                virtualPaddingRight={virtualPaddingRight}
-                pagination={pagination}
-                isLoadingMore={isLoadingMore}
-                hasMore={hasMore}
-                showFilterRow={showFilterRow}
-                enableColumnSelector={enableColumnSelector}
-                rowDisabled={rowDisabled}
-                rowDisabledAccessor={rowDisabledAccessor}
-              />
-            </table>
-
-            <PinnedColumns
-              id={id}
-              enableColumnSelector={enableColumnSelector}
-              toggleColumnVisibility={toggleColumnVisibility}
-              resetColumnVisibility={resetDefaultColumnVisibility}
-              testid={testid}
-              pinDirection="right"
-              table={table}
-              tableContainerRef={containerRef}
-              pagination={pagination}
-              isLoadingMore={isLoadingMore}
-              hasMore={hasMore}
-              showFilterRow={showFilterRow}
-            />
-          </div>
-
-          {empty && (
-            <div
-              className={clsx(
-                NO_RESULTS_HEIGHT,
-                "flex flex-col items-center justify-center",
-                componentGap,
-                componentPadding,
-              )}
-              data-testid={testid ? `${testid}-no-results` : undefined}
-            >
-              <img
-                src={
-                  (NoResultsImg as { src: string })?.src ??
-                  (NoResultsImg as unknown as string)
-                }
-                alt="No Results"
-                className="h-30 opacity-20"
-                width={120}
-                height={120}
-              />
-              <Subheader color="text-secondary-normal">No Results</Subheader>
-              <Paragraph color="text-secondary-normal">
-                To view results, enter or update your search criteria.
-              </Paragraph>
-            </div>
-          )}
-
-          {!hideStatusBar && (
-            <div className="p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]">
-              {pagination && (
-                <div className="flex justify-between items-center">
-                  <div className="flex items-center gap-1 w-min">
-                    <Select
-                      id={id ? `${id}-pagesize-select` : undefined}
-                      testid={testid ? `${testid}-pagesize-select` : undefined}
-                      wrapperClassName="!w-20"
-                      value={pagination.pageSize.toString()}
-                      onChange={(e) =>
-                        pagination.onPageSizeChange?.(Number(e.target.value))
-                      }
-                      renderMenu={(props) => (
-                        <Menu
-                          {...props}
-                          id={id ? `${id}-pagesize-menu` : undefined}
-                          testid={
-                            testid ? `${testid}-pagesize-menu` : undefined
-                          }
-                        >
-                          {PAGE_SIZE_OPTIONS.map((option) => (
-                            <MenuOption
-                              id={
-                                id
-                                  ? `${id}-pagesize-option-${option}`
-                                  : undefined
-                              }
-                              key={option}
-                              selected={pagination.pageSize === option}
-                              onClick={() =>
-                                pagination.onPageSizeChange?.(option)
-                              }
-                            >
-                              {option}
-                            </MenuOption>
-                          ))}
-                        </Menu>
-                      )}
-                    />
-                    <Label>Per Page</Label>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <Button
-                      id={id ? `${id}-prev-page-button` : undefined}
-                      testid={testid ? `${testid}-prev-page-button` : undefined}
-                      iconOnly
-                      leftIcon={<Icon name="chevron_left" />}
-                      onClick={() =>
-                        pagination.onPageChange(pagination.pageIndex - 1)
-                      }
-                      variant="tertiary"
-                      disabled={pagination.pageIndex === 0}
-                    />
-                    <Paragraph>
-                      {pagination.pageIndex * pagination.pageSize + 1} -{" "}
-                      {Math.min(
-                        (pagination.pageIndex + 1) * pagination.pageSize,
-                        pagination.total,
-                      )}{" "}
-                      of {pagination.total}
-                    </Paragraph>
-                    <Button
-                      id={id ? `${id}-next-page-button` : undefined}
-                      testid={testid ? `${testid}-next-page-button` : undefined}
-                      iconOnly
-                      leftIcon={<Icon name="chevron_right" />}
-                      onClick={() =>
-                        pagination.onPageChange(pagination.pageIndex + 1)
-                      }
-                      variant="tertiary"
-                      disabled={
-                        (pagination.pageIndex + 1) * pagination.pageSize >=
-                        pagination.total
-                      }
-                    />
-                  </div>
-                </div>
-              )}
-
-              {status && (
-                <Paragraph
-                  testid={testid ? `${testid}-status-text` : undefined}
-                >
-                  {status}
-                </Paragraph>
-              )}
-            </div>
-          )}
-        </div>
-      </SortableContext>
-    </DndContext>
-  );
-}
-DataGrid.displayName = "DataGrid";
-
-// 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,
-    );
-  };
-}
-
-export type { ColumnDef } from "@tanstack/react-table";
-
-export default DataGrid;