@dmsi/wedgekit-react 0.0.208 → 0.0.209

package/dist/components/index.js

@@ -12,7 +12,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-EFX3RPW4.js";
+} from "../chunk-Q3TNALWH.js";
 import {
   Menu
 } from "../chunk-JITZWSPR.js";
@@ -172,7 +172,7 @@ function TableBodyRow({
           /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2, _b, _c;
+          var _a2;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
@@ -187,7 +187,6 @@ function TableBodyRow({
               className: clsx2({
                 "justify-end": typeof cellValue === "number"
               }),
-              width: (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth) != null ? _c : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ jsx2(
                 Tooltip,
                 {
@@ -373,7 +372,15 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(LoadingCell, { id, testid, column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(
+              LoadingCell,
+              {
+                id,
+                testid,
+                column: column.columnDef
+              },
+              column.id
+            ))
           }
         )
       ]
@@ -903,23 +910,21 @@ function DataGrid({
                                 )
                               ) : null,
                               virtualColumns.map((virtualColumn) => {
-                                var _a2, _b2, _c2, _d2;
+                                var _a2, _b2, _c2;
                                 const header = headerGroup.headers[virtualColumn.index];
                                 if (!header) {
                                   return;
                                 }
                                 if (typeof header.column.columnDef.header === "string") {
-                                  const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                                  const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                                  const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
                                   return /* @__PURE__ */ jsxs5(
                                     DraggableCellHeader,
                                     {
                                       id: id ? `${id}-header-${header.id}` : void 0,
                                       testid: testid ? `${testid}-header-${header.id}` : void 0,
                                       header,
-                                      locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
+                                      locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
                                       center: centerHeader,
-                                      width: customHeaderWidth,
                                       className: clsx5(
                                         header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
                                         "group",
@@ -960,7 +965,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
+                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ jsx8(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.208",
+  "version": "0.0.209",
   "type": "module",
   "scripts": {
     "build": "tsup",

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

@@ -107,10 +107,6 @@ export function TableBodyRow<T>({
             className={clsx({
               "justify-end": typeof cellValue === "number",
             })}
-            width={
-              (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
-              `${cell.column.getSize()}px`
-            }
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}

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

@@ -89,7 +89,9 @@ export function TableBody<T>({
             x.headers.map((header) => (
               <CellElement
                 id={id ? `${id}-filter-cell-${header.id}` : undefined}
-                testid={testid ? `${testid}-filter-cell-${header.id}` : undefined}
+                testid={
+                  testid ? `${testid}-filter-cell-${header.id}` : undefined
+                }
                 noPadding
                 key={header.id}
                 cell={header}
@@ -105,7 +107,11 @@ export function TableBody<T>({
                   }) ?? (
                     <Search
                       id={id ? `${id}-filter-search-${header.id}` : undefined}
-                      testid={testid ? `${testid}-filter-search-${header.id}` : undefined}
+                      testid={
+                        testid
+                          ? `${testid}-filter-search-${header.id}`
+                          : undefined
+                      }
                       removeRoundness
                       onChange={(e) =>
                         header.column.setFilterValue(e.target.value)
@@ -156,7 +162,12 @@ export function TableBody<T>({
           className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
         >
           {table.getAllLeafColumns().map((column) => (
-            <LoadingCell id={id} testid={testid} key={column.id} column={column.columnDef} />
+            <LoadingCell
+              id={id}
+              testid={testid}
+              key={column.id}
+              column={column.columnDef}
+            />
           ))}
         </tr>
       )}

package/src/components/DataGrid/index.tsx

@@ -401,9 +401,6 @@ export function DataGrid<T extends Record<string, unknown>>({
                       }
 
                       if (typeof header.column.columnDef.header === "string") {
-                        const customHeaderWidth =
-                          header.column.columnDef.meta?.headerWidth;
-
                         const cellValue = table
                           .getRowModel()
                           .rows[0]?.getValue(header.column.id);
@@ -420,7 +417,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                             header={header}
                             locked={header.column.columnDef.meta?.locked}
                             center={centerHeader}
-                            width={customHeaderWidth}
+                            // width={`${header.column.getSize()}px`}
                             className={clsx(
                               header.column.getCanSort()
                                 ? "cursor-pointer"

package/src/components/DataGridCell.tsx

@@ -14,20 +14,20 @@ import clsx from "clsx";
 import {
   ComponentProps,
   CSSProperties,
-  memo,
   PropsWithChildren,
   RefObject,
   useEffect,
   useRef,
   useState,
+  memo,
 } from "react";
 import { componentPadding, paddingUsingComponentGap } from "../classNames";
-import { AsProps } from "../types";
+import { MenuOption } from "./MenuOption";
+import { Menu } from "./Menu";
 import { Icon } from "./Icon";
 import { Search } from "./Search";
-import { Menu } from "./Menu";
-import { MenuOption } from "./MenuOption";
 import { useSubMenuSystem } from "./useMenuSystem";
+import type { AsProps } from "../types";
 
 type Tags = "td" | "th";
 
@@ -44,6 +44,7 @@ type DataGridCellProps = PropsWithChildren<{
   warning?: boolean;
   center?: boolean;
   width?: string;
+  minWidth?: string;
 }>;
 
 export const DataGridCell = memo(
@@ -63,6 +64,7 @@ export const DataGridCell = memo(
     warning,
     center,
     width,
+    minWidth,
     testid,
     ...props
   }: AsProps<Tags> & DataGridCellProps) => {
@@ -171,7 +173,7 @@ export const DataGridCell = memo(
         id={id}
         data-testid={testid}
         className={clsx("flex h-10", !width && "flex-1")}
-        style={{ width }}
+        style={{ width, minWidth }}
         {...props}
         data-theme={type === "header" && !locked ? "brand" : undefined}
       >
@@ -260,7 +262,7 @@ export function DataCellHeader<T>({
   const style: CSSProperties = {
     position: "relative",
     whiteSpace: "nowrap",
-    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
+    minWidth: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
     "--color-icon-on-action-primary-normal":
       "var(--color-text-brand-primary-normal)",
@@ -277,6 +279,7 @@ export function DataCellHeader<T>({
       type="header"
       component="header"
       style={style}
+      minWidth={`${header.column.getSize()}px`}
       onClick={header.column.getToggleSortingHandler()}
       onRightClick={() => setShowMenu(!showMenu)}
       {...props}
@@ -470,7 +473,6 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none",
@@ -510,20 +512,12 @@ export function DragAlongCell<T extends RowData, TValue>({
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: cell.column.columnDef.meta?.headerWidth ?? cell.column.getSize(),
+    minWidth: cell.column.getSize(),
     zIndex: isDragging ? 1 : 0,
   };
 
   return (
-    <DataGridCell
-      style={style}
-      ref={setNodeRef}
-      width={
-        (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
-        `${cell.column.getSize()}px`
-      }
-      {...props}
-    >
+    <DataGridCell style={style} ref={setNodeRef} {...props}>
       {children}
     </DataGridCell>
   );