@dmsi/wedgekit-react 0.0.179 → 0.0.180

package/src/components/DataGrid/PinnedColumns.tsx

@@ -5,7 +5,13 @@ 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>;
@@ -22,6 +28,7 @@ interface PinnedColumnsProps<TData extends RowData> {
 }
 
 export function PinnedColumns<TData>({
+  id,
   pinDirection = "left",
   table,
   centerHeader,
@@ -29,6 +36,9 @@ export function PinnedColumns<TData>({
   someSelectedAcrossPages,
   toggleSelectAllAcrossPages,
   testid,
+  enableColumnSelector,
+  toggleColumnVisibility,
+  resetColumnVisibility,
   ...props
 }: PinnedColumnsProps<TData>) {
   const headerGroups =
@@ -38,128 +48,136 @@ export function PinnedColumns<TData>({
 
   const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : undefined;
 
+  const hasAnyHeaders = headerGroups[0]?.headers.length > 0;
+
+  if (!hasAnyHeaders && !enableColumnSelector) return;
+
   return (
-    headerGroups[0]?.headers.length > 0 && (
-      <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
+    <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;
                 }
-                className="flex w-full"
-              >
-                {headerGroup.headers.map((header) => {
-                  if (!header) {
-                    return;
-                  }
 
-                  if (typeof header.column.columnDef.header === "string") {
-                    return (
-                      <DataCellHeader
-                        locked
-                        key={header.id}
-                        testid={
-                          pinnedTestId
-                            ? `${pinnedTestId}-header-${header.id}`
-                            : undefined
-                        }
-                        header={header}
-                        center={centerHeader}
-                        width={
-                          (header.column.columnDef.meta?.headerWidth as
-                            | string
-                            | undefined) ?? `${header.column.getSize()}px`
-                        }
-                        className={clsx(
-                          header.column.getCanSort()
-                            ? "cursor-pointer"
-                            : "cursor-grab",
-                          "group",
-                        )}
-                      >
-                        <Subheader tall>
-                          {header.column.columnDef.header}
-                        </Subheader>
+                if (typeof header.column.columnDef.header === "string") {
+                  const customHeaderWidth =
+                    header.column.columnDef.meta?.headerWidth;
 
-                        {getSortIcon(header.column.getIsSorted())}
+                  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>
 
-                        {!header.column.getIsSorted() &&
-                          header.column.getCanSort() &&
-                          getSortIcon(
-                            header.column.getNextSortingOrder(),
-                            true,
-                          )}
+                      {getSortIcon(header.column.getIsSorted())}
 
-                        {header.column.getSortIndex() !== -1 &&
-                          table.getState().sorting.length > 1 && (
-                            <Subheader tall>
-                              {header.column.getSortIndex() + 1}
-                            </Subheader>
-                          )}
+                      {!header.column.getIsSorted() &&
+                        header.column.getCanSort() &&
+                        getSortIcon(header.column.getNextSortingOrder(), true)}
 
-                        {!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"
-                          />
+                      {header.column.getSortIndex() !== -1 &&
+                        table.getState().sorting.length > 1 && (
+                          <Subheader tall>
+                            {header.column.getSortIndex() + 1}
+                          </Subheader>
                         )}
-                      </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(),
-                        )
+
+                      {!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"
+                        />
                       )}
-                    </React.Fragment>
+                    </DataCellHeader>
                   );
-                })}
-              </tr>
-            );
-          })}
-        </thead>
+                }
+                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={true}
-          pinDirection={pinDirection}
-        />
-      </table>
-    )
+      <TableBody
+        testid={pinnedTestId}
+        {...props}
+        table={table}
+        locked={true}
+        pinDirection={pinDirection}
+      />
+    </table>
   );
 }

package/src/components/DataGrid/index.tsx

@@ -349,7 +349,6 @@ export function DataGrid<T extends Record<string, unknown>>({
               isLoadingMore={isLoadingMore}
               hasMore={hasMore}
               showFilterRow={showFilterRow}
-              enableColumnSelector={enableColumnSelector}
             />
 
             <table className="flex-1 flex flex-col min-h-min">
@@ -497,17 +496,6 @@ export function DataGrid<T extends Record<string, unknown>>({
                         style={{ display: "flex", width: virtualPaddingRight }}
                       />
                     ) : null}
-                    {enableColumnSelector && (
-                      <ColumnSelectorHeaderCell
-                        id={id ? `${id}-column-selector` : undefined}
-                        testid={
-                          testid ? `${testid}-column-selector` : undefined
-                        }
-                        table={table}
-                        toggleColumnVisibility={toggleColumnVisibility}
-                        resetColumnVisibility={resetColumnVisibility}
-                      />
-                    )}
                   </tr>
                 ))}
               </thead>
@@ -529,6 +517,10 @@ export function DataGrid<T extends Record<string, unknown>>({
             </table>
 
             <PinnedColumns
+              id={id}
+              enableColumnSelector={enableColumnSelector}
+              toggleColumnVisibility={toggleColumnVisibility}
+              resetColumnVisibility={resetColumnVisibility}
               testid={testid}
               pinDirection="right"
               table={table}
@@ -537,7 +529,6 @@ export function DataGrid<T extends Record<string, unknown>>({
               isLoadingMore={isLoadingMore}
               hasMore={hasMore}
               showFilterRow={showFilterRow}
-              enableColumnSelector={enableColumnSelector}
             />
           </div>
 

package/dist/{chunk-MVGOAMTP.js → chunk-4T3DRGLF.js}

@@ -1,11 +1,11 @@
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-RYBHJC4G.js → chunk-F6YFWBVV.js}

@@ -13,12 +13,12 @@ import {
 import {
   ModalScrim
 } from "./chunk-ZFOANBWG.js";
-import {
-  findDocumentRoot
-} from "./chunk-6LN6QT6M.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
+import {
+  findDocumentRoot
+} from "./chunk-6LN6QT6M.js";
 
 // src/components/Modal.tsx
 import clsx from "clsx";

package/dist/{chunk-AEDEFN7A.js → chunk-FFU6FB3K.js}

@@ -1,9 +1,9 @@
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   Paragraph
 } from "./chunk-HVI3CL7Y.js";

package/dist/{chunk-UZZLQASG.js → chunk-UBU6IJML.js}

@@ -1,12 +1,12 @@
 import {
   useMenuPosition
 } from "./chunk-5GUW4DUY.js";
-import {
-  findDocumentRoot
-} from "./chunk-6LN6QT6M.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
+import {
+  findDocumentRoot
+} from "./chunk-6LN6QT6M.js";
 import {
   __objRest,
   __spreadProps,