@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/ContentTabs.tsx

@@ -1,136 +0,0 @@
-"use client";
-import clsx from "clsx";
-import { ReactNode, useState, useRef, useCallback, useEffect } from "react";
-import { ContentTab } from "./ContentTab";
-
-type Tab = {
-  id: string;
-  label: string;
-  content?: ReactNode;
-  disabled?: boolean;
-};
-
-export type SelectedTab = Omit<Tab, "content" | "label"> & {
-  index: number;
-};
-
-export type ContentTabsProps = {
-  tabs: Tab[];
-  onTabChange?: (tabId: string) => void;
-  fullWidthTabs?: boolean;
-  id?: string;
-  testid?: string;
-  selectedTab?: SelectedTab | null;
-  contentPadding?: boolean;
-};
-
-const afterClasses =
-  "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
-
-export const ContentTabs = ({
-  tabs,
-  onTabChange,
-  fullWidthTabs,
-  id,
-  testid,
-  selectedTab,
-  contentPadding = true,
-}: ContentTabsProps) => {
-  const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0]?.id || "");
-  const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
-  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  const handleTabClick = useCallback(
-    (id: string, index: number) => {
-      setSelectedTabId(id);
-      setFocusedTabIndex(index);
-      onTabChange?.(id);
-    },
-    [onTabChange],
-  );
-
-  useEffect(() => {
-    if (selectedTab) {
-      handleTabClick(selectedTab.id, selectedTab.index);
-    }
-  }, [selectedTab, handleTabClick]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    let newIndex = focusedTabIndex;
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      newIndex = (focusedTabIndex + 1) % tabs.length;
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
-    } else {
-      return;
-    }
-    const tabId = tabs[newIndex].id;
-    setSelectedTabId(tabId);
-    onTabChange?.(tabId);
-    tabRefs.current[newIndex]?.focus();
-    setFocusedTabIndex(newIndex);
-  };
-
-  const selectedContent = tabs.find((tab) => tab.id === selectedTabId)?.content;
-
-  return (
-    <div id={id} data-testid={testid}>
-      <div className={clsx("overflow-x-auto", contentPadding && "pb-2")}>
-        <div
-          id={id ? `${id}-tablist` : undefined}
-          data-testid={testid ? `${testid}-tablist` : undefined}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx("flex relative", afterClasses)}
-          onKeyDown={handleKeyDown}
-        >
-          {tabs.map((tab, index) => {
-            const isSelected = selectedTabId === tab.id;
-            return (
-              <ContentTab
-                disabled={tab.disabled}
-                fullWidth={fullWidthTabs}
-                key={tab.id}
-                id={id ? `${id}-tab-${tab.id}` : undefined}
-                testid={testid ? `${testid}-tab-${tab.id}` : undefined}
-                label={tab.label}
-                selected={isSelected}
-                onClick={() => handleTabClick(tab.id, index)}
-                onFocus={() => {
-                  setSelectedTabId(tab.id);
-
-                  setFocusedTabIndex(index);
-                  onTabChange?.(tab.id);
-                }}
-                className={clsx(!isSelected && afterClasses)}
-                role="tab"
-                aria-selected={isSelected}
-                aria-controls={`${id ? `${id}-` : ""}panel-${tab.id}`}
-                tabIndex={isSelected ? 0 : -1}
-                ref={(el) => {
-                  tabRefs.current[index] = el;
-                }}
-              />
-            );
-          })}
-        </div>
-      </div>
-      {selectedContent && (
-        <div
-          id={(id ? `${id}-` : "") + `panel-${selectedTabId}`}
-          data-testid={(testid ? `${testid}-` : "") + `panel-${selectedTabId}`}
-          className="mt-2"
-          role="tabpanel"
-          aria-labelledby={`tab-${selectedTabId}`}
-          tabIndex={0}
-        >
-          {selectedContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-ContentTabs.displayName = "ContentTabs";

package/src/components/DMSiLogo.tsx

@@ -1,33 +0,0 @@
-export function DMSiLogo(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="107"
-      height="24"
-      viewBox="0 0 107 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M10.1472 5.86855H22.261C24.0328 5.86855 25.2192 5.79792 26.2514 7.25517C27.1489 8.60833 27.4185 9.79792 27.2105 11.4336C27.0025 13.0693 26.5596 14.2291 25.4926 15.6529C24.9996 16.3295 24.3795 16.8648 23.6284 17.2552C22.6077 17.7533 21.9529 17.6827 20.9206 17.6827H8.69893V17.6381L8.00562 23.2589H20.7704C24.2755 23.2589 27.6496 22.5228 30.4807 19.9949C33.0999 17.6827 34.6444 14.8128 35.0489 11.612C35.4918 8.12506 34.6406 5.72357 32.2948 3.3035C29.8875 0.775615 26.8793 0.362976 23.2278 0.362976H10.8328L10.1472 5.92803V5.86855Z"
-        fill="#1D1E1E"
-      />
-      <path
-        d="M45.7143 0.960477L45.3484 3.9233L45.437 3.64077C46.9276 1.46605 49.2772 0.618469 51.8771 0.618469C54.6042 0.618469 56.3567 1.62219 57.4082 3.91958C59.2263 1.53668 61.5527 0.618469 64.4531 0.618469C66.3135 0.618469 67.9544 1.16122 69.0868 2.45862C70.485 4.04598 70.2192 6.1352 69.9342 8.3917L68.0083 23.2356H60.5705L62.3462 9.28018C62.5234 7.901 62.5041 6.35453 60.5128 6.35453C58.0862 6.35453 57.6085 8.52925 57.389 10.2393L55.7366 23.2319H48.2025L49.9782 9.27646C50.1477 7.93817 49.9897 6.22442 48.1255 6.22442C46.0918 6.22442 45.4408 7.6891 45.2367 9.27646L43.461 23.2319H35.3453L38.2072 0.960477H45.7143Z"
-        fill="#1D1E1E"
-      />
-      <path
-        d="M97.4234 0.336578L96.6954 6.39234H103.474L96.2755 9.54104L94.5076 23.2734H103.255L106.175 0.336578H97.4234Z"
-        fill="#1D1E1E"
-      />
-      <path
-        d="M91.03 10.4126C89.3545 9.34573 86.6082 9.04833 84.6092 8.79182C83.9158 8.70632 83.1339 8.49814 82.4059 8.29368C82.1286 8.23792 81.8705 8.16729 81.6317 8.07807C81.5431 8.05204 81.443 8.02231 81.3583 8C81.1618 7.95539 80.9461 7.81041 80.7535 7.61338C80.353 7.30855 80.1141 6.94424 80.1141 6.54647C80.1141 6.35688 80.1835 6.17844 80.2836 6.00372C80.2952 5.98513 80.3029 5.97026 80.3144 5.95167C80.7921 5.20446 82.1248 4.66543 83.7117 4.66543C85.626 4.66543 87.1821 5.44981 87.29 6.43866H94.7393C93.7571 2.34572 89.0772 0 84.8326 0C82.3135 0 79.1204 0.342007 76.7439 1.66171C74.4598 2.94052 72.8228 4.66914 72.5069 7.14126C71.7674 12.9405 77.1945 14.026 81.8436 14.6654C82.1017 14.6952 82.6062 14.8141 83.157 15.0037C84.5976 15.2974 85.6183 16.026 85.6183 16.8848C85.6183 17.8773 84.2509 18.6989 82.4522 18.8699C82.2442 18.9145 82.0593 18.9368 81.9168 18.9368C80.7689 18.9368 79.987 18.8625 79.4131 18.487C78.689 18.197 78.1613 17.777 77.9726 17.29H70.165C71.205 22.3234 75.8387 24 80.534 24C85.6145 24 92.6747 22.2491 93.4412 16.2342C93.6801 14.3494 93.0099 11.7286 91.0378 10.4089L91.03 10.4126Z"
-        fill="#1D1E1E"
-      />
-      <path
-        d="M1.85771 9.54941H16.9027L0.825439 16.9174L1.85771 9.54941Z"
-        fill="#0077C8"
-      />
-    </svg>
-  );
-}

package/src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx

@@ -1,35 +0,0 @@
-import { Column } from "@tanstack/react-table";
-import { useState } from "react";
-import { Checkbox, MenuOption } from "../..";
-
-export function ColumnSelectorMenuOption<T>({
-  id,
-  testid,
-  column,
-  toggleColumnVisibility,
-}: {
-  id?: string;
-  testid?: 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} testid={testid} defaultChecked={isVisible}>
-      <Checkbox
-        id={id ? `${id}-checkbox` : undefined}
-        testid={testid ? `${testid}-checkbox` : undefined}
-        label={label ?? "Unknown"}
-        checked={isVisible}
-        onChange={(e) => {
-          setIsVisible(e.target.checked);
-          toggleColumnVisibility(column.id, e.target.checked);
-        }}
-      />
-    </MenuOption>
-  );
-}

package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx

@@ -1,74 +0,0 @@
-import { Table } from "@tanstack/react-table";
-import { useRef, useState } from "react";
-import { Button, DataGridCell, Icon, Menu } from "../..";
-import { ColumnSelectorMenuOption } from "./ColumnSelectorMenuOption";
-
-export function ColumnSelectorHeaderCell<T>({
-  id,
-  testid,
-  table,
-  toggleColumnVisibility,
-  resetColumnVisibility,
-}: {
-  id?: string;
-  testid?: 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}
-      testid={testid}
-      width="48px"
-      type="header"
-      color="text-secondary-normal"
-      ref={ref}
-    >
-      <Button
-        id={id ? `${id}-button` : undefined}
-        testid={testid ? `${testid}-button` : undefined}
-        onClick={() => setShow((prev) => !prev)}
-        variant="navigation"
-        iconOnly
-        leftIcon={<Icon name="tune" />}
-      ></Button>
-      <Menu
-        id={id ? `${id}-menu` : undefined}
-        testid={testid ? `${testid}-menu` : undefined}
-        positionTo={ref}
-        position="bottom-right"
-        show={show}
-        setShow={setShow}
-        calculateMinMaxHeight
-      >
-        <Button
-          id={id ? `${id}-reset-button` : undefined}
-          testid={testid ? `${testid}-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}
-              testid={testid ? `${testid}-option-${column.id}` : undefined}
-              key={column.id}
-              column={column}
-              toggleColumnVisibility={toggleColumnVisibility}
-            />
-          ))}
-      </Menu>
-    </DataGridCell>
-  );
-}

package/src/components/DataGrid/PinnedColumns.tsx

@@ -1,183 +0,0 @@
-import { flexRender, RowData, Table } from "@tanstack/react-table";
-import { Checkbox, DataCellHeader, DataGridCell, Subheader } from "..";
-import { DataGridPagination } from "./types";
-import clsx from "clsx";
-import { getSortIcon } from "./utils";
-import React from "react";
-import { TableBody } from "./TableBody";
-import { ColumnSelectorHeaderCell } from "./ColumnSelectorHeaderCell";
-interface PinnedColumnsProps<TData extends RowData> {
-  id?: string;
-
-  toggleColumnVisibility?: (columnId: string, isVisible: boolean) => void;
-  resetColumnVisibility?: () => void;
-
-  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;
-  testid?: string;
-}
-
-export function PinnedColumns<TData>({
-  id,
-  pinDirection = "left",
-  table,
-  centerHeader,
-  allSelectedAcrossPages,
-  someSelectedAcrossPages,
-  toggleSelectAllAcrossPages,
-  testid,
-  enableColumnSelector,
-  toggleColumnVisibility,
-  resetColumnVisibility,
-  ...props
-}: PinnedColumnsProps<TData>) {
-  const headerGroups =
-    pinDirection === "left"
-      ? table.getLeftHeaderGroups()
-      : table.getRightHeaderGroups();
-
-  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : undefined;
-
-  const hasAnyHeaders = headerGroups[0]?.headers.length > 0;
-
-  if (!hasAnyHeaders && !enableColumnSelector) return;
-
-  return (
-    <table
-      className={clsx(
-        "flex flex-col min-h-min sticky z-20",
-        pinDirection === "left" ? "left-0" : "right-0",
-      )}
-      data-testid={pinnedTestId}
-    >
-      <thead className="sticky top-0 z-20 grid">
-        {headerGroups.map((headerGroup) => {
-          return (
-            <tr
-              key={headerGroup.id}
-              data-testid={
-                pinnedTestId
-                  ? `${pinnedTestId}-header-row-${headerGroup.id}`
-                  : undefined
-              }
-              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}
-                      testid={
-                        pinnedTestId
-                          ? `${pinnedTestId}-header-${header.id}`
-                          : undefined
-                      }
-                      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>
-                );
-              })}
-
-              {enableColumnSelector && (
-                <ColumnSelectorHeaderCell
-                  id={id ? `${id}-column-selector` : undefined}
-                  testid={testid ? `${testid}-column-selector` : undefined}
-                  table={table}
-                  toggleColumnVisibility={toggleColumnVisibility ?? (() => {})}
-                  resetColumnVisibility={resetColumnVisibility ?? (() => {})}
-                />
-              )}
-            </tr>
-          );
-        })}
-      </thead>
-
-      <TableBody
-        testid={pinnedTestId}
-        {...props}
-        table={table}
-        locked={!enableColumnSelector}
-        pinDirection={pinDirection}
-      />
-    </table>
-  );
-}

package/src/components/DataGrid/TableBody/LoadingCell.tsx

@@ -1,44 +0,0 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Checkbox, DataGridCell, Input } from "../..";
-
-export function LoadingCell<T extends RowData>({
-  id,
-  testid,
-  column,
-}: {
-  id?: string;
-  testid?: string;
-  column: ColumnDef<T>;
-}) {
-  const key = `loading-${column.id}`;
-  if (column.cell === "checkbox") {
-    return (
-      <DataGridCell id={id ? `${id}-${key}` : undefined} testid={testid ? `${testid}-${key}` : undefined} key={key}>
-        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} testid={testid ? `${testid}-${key}-checkbox` : undefined} disabled />
-      </DataGridCell>
-    );
-  }
-  if (column.cell === "input") {
-    return (
-      <DataGridCell
-        id={id ? `${id}-${key}` : undefined}
-        testid={testid ? `${testid}-${key}` : undefined}
-        key={key}
-        component="input"
-      >
-        <Input
-          id={id ? `${id}-${key}-input` : undefined}
-          testid={testid ? `${testid}-${key}-input` : undefined}
-          align="left"
-          disabled
-          wrapperClassName="!rounded-none !border-0"
-        />
-      </DataGridCell>
-    );
-  }
-  return (
-    <DataGridCell id={id ? `${id}-${key}` : undefined} testid={testid ? `${testid}-${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>
-  );
-}

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -1,157 +0,0 @@
-import clsx from "clsx";
-import { Cell, flexRender, Row } from "@tanstack/react-table";
-import { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-import React from "react";
-import { DataGridCell, DragAlongCell, Paragraph, Tooltip } from "../..";
-import { formatCurrencyDisplay, formatDate } from "../../../utils";
-
-const valueFormatters = {
-  date: (value: unknown) =>
-    typeof value === "string" ? formatDate(value) : "",
-  currency: (value: unknown) => formatCurrencyDisplay(value as string),
-};
-
-type ValueFormatterKey = keyof typeof valueFormatters;
-
-function isValueFormatterKey(value: unknown): value is ValueFormatterKey {
-  return typeof value === "string" && value in valueFormatters;
-}
-
-interface TableBodyRowProps<T> {
-  id?: string;
-  testid?: 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";
-  disabled?: boolean;
-}
-
-export function TableBodyRow<T>({
-  id,
-  testid,
-  columnVirtualizer,
-  row,
-  // rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showFilterRow,
-  // enableColumnSelector = false,
-  locked,
-  pinDirection,
-  disabled,
-}: 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(
-        "min-h-10",
-        "transition-colors",
-        !disabled && "hover:bg-background-action-secondary-hover",
-        row.getIsSelected() && !disabled && "!bg-background-action-secondary-hover",
-        isError && !disabled && "!bg-background-action-critical-secondary-hover",
-        showFilterRow && !disabled
-          ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
-          : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-      )}
-      id={id ? `${id}-row-${row.id}` : undefined}
-      data-testid={testid ? `${testid}-row-${row.id}` : undefined}
-      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;
-        }
-        const cellFormat = cell.column.columnDef.meta?.format;
-
-        const cellValue =
-          cellFormat && isValueFormatterKey(cellFormat)
-            ? valueFormatters[cellFormat](cell.getValue())
-            : cell.getValue();
-
-        const cellAlignment =
-          cell.column.columnDef.meta?.align ??
-          (typeof cellValue === "number" ? "right" : "left");
-
-        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}-row-${row.id}-cell-${cell.id}` : undefined}
-            testid={
-              testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined
-            }
-            cell={cell}
-            className={clsx({
-              "justify-start": cellAlignment === "left",
-              "justify-end": cellAlignment === "right",
-            })}
-          >
-            <Tooltip
-              id={id ? `${id}-tooltip-${cell.id}` : undefined}
-              testid={testid ? `${testid}-tooltip-${cell.id}` : undefined}
-              showOnTruncation
-              message={cellValue as string}
-              position="bottom"
-            >
-              <Paragraph addOverflow tall>
-                {cellValue as React.ReactNode | string}
-              </Paragraph>
-            </Tooltip>
-          </CellElement>
-        );
-      })}
-      {!locked && virtualPaddingRight ? (
-        // fake empty column to the right for virtualization scroll padding
-        <td style={{ display: "flex", width: virtualPaddingRight }} />
-      ) : null}
-    </tr>
-  );
-}