@dmsi/wedgekit-react 0.0.511 → 0.0.513

package/dist/components/index.css

@@ -1038,9 +1038,36 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
@@ -3867,6 +3894,66 @@
       margin-top: var(--spacing-desktop-compact-component-gap);
     }
   }
+  .compact\:grid-cols-1 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-2 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-3 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-4 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-5 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-6 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-7 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-8 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-9 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-10 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-11 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-12 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
   .compact\:gap-desktop-compact-component-gap {
     &:where([data-compact]) {
       gap: var(--spacing-desktop-compact-component-gap);
@@ -4203,11 +4290,66 @@
       flex-grow: 0;
     }
   }
+  .desktop\:grid-cols-1 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-2 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-3 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .desktop\:grid-cols-4 {
     @container root (width >= 48rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .desktop\:grid-cols-5 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-6 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-7 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-8 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-9 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-10 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-11 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-12 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;

package/dist/components/index.js

@@ -2,13 +2,13 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-JWVZOEF5.js";
+} from "../chunk-YY66JVTB.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-ELXVDRWS.js";
 import "../chunk-3UUCDNX3.js";
 import {
   ProductImagePreview
-} from "../chunk-FJRYHJUV.js";
+} from "../chunk-CDMXM5JW.js";
 import "../chunk-BQNPOGD5.js";
 import {
   SearchResultImage
@@ -51,14 +51,14 @@ import "../chunk-AKJUBFJK.js";
 import {
   ListGroup
 } from "../chunk-SUSUNSVZ.js";
-import "../chunk-Y2GK27RX.js";
+import "../chunk-BWPNXY7T.js";
 import "../chunk-QVWYTQKL.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-F6RZ7MUE.js";
+} from "../chunk-ZCIC3AIZ.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";

package/dist/index.css

@@ -1016,9 +1016,36 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
@@ -3845,6 +3872,66 @@
       margin-top: var(--spacing-desktop-compact-component-gap);
     }
   }
+  .compact\:grid-cols-1 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-2 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-3 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-4 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-5 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-6 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-7 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-8 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-9 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-10 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-11 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .compact\:grid-cols-12 {
+    &:where([data-compact]) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
   .compact\:gap-desktop-compact-component-gap {
     &:where([data-compact]) {
       gap: var(--spacing-desktop-compact-component-gap);
@@ -4181,11 +4268,66 @@
       flex-grow: 0;
     }
   }
+  .desktop\:grid-cols-1 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-2 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-3 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .desktop\:grid-cols-4 {
     @container root (width >= 48rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .desktop\:grid-cols-5 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-6 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-7 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-8 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-9 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-10 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-11 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+  }
+  .desktop\:grid-cols-12 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;

package/package.json

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

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

@@ -30,6 +30,7 @@ interface TableBodyRowProps<T> {
   enableColumnSelector?: boolean;
   locked?: boolean;
   pinDirection?: "left" | "right";
+  disabled?: boolean;
 }
 
 export function TableBodyRow<T>({
@@ -45,6 +46,7 @@ export function TableBodyRow<T>({
   // enableColumnSelector = false,
   locked,
   pinDirection,
+  disabled,
 }: TableBodyRowProps<T>) {
   let visibleCells: Cell<T, unknown>[];
 
@@ -73,10 +75,11 @@ export function TableBodyRow<T>({
       key={row.id}
       className={clsx(
         "min-h-10",
-        "transition-colors hover:bg-background-action-secondary-hover",
-        row.getIsSelected() && "!bg-background-action-secondary-hover",
-        isError && "!bg-background-action-critical-secondary-hover",
-        showFilterRow
+        "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",
       )}

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

@@ -21,6 +21,8 @@ interface TableBodyProps<TData extends RowData> {
   enableColumnSelector?: boolean;
   locked?: boolean;
   pinDirection?: "left" | "right";
+  rowDisabled?: boolean;
+  rowDisabledAccessor?: (row: TData) => boolean;
 }
 export function TableBody<T>({
   id,
@@ -37,6 +39,8 @@ export function TableBody<T>({
   enableColumnSelector = false,
   locked,
   pinDirection,
+  rowDisabled,
+  rowDisabledAccessor,
 }: TableBodyProps<T>) {
   const { rows } = table.getRowModel();
 
@@ -145,6 +149,11 @@ export function TableBody<T>({
             enableColumnSelector={enableColumnSelector}
             locked={locked}
             pinDirection={pinDirection}
+            disabled={
+              rowDisabledAccessor
+                ? rowDisabledAccessor(row.original as T)
+                : rowDisabled
+            }
           />
         );
       })}

package/src/components/DataGrid/index.tsx

@@ -87,6 +87,8 @@ export function DataGrid<T extends Record<string, unknown>>({
   predeterminedLeftPins = [],
   predeterminedRightPins = [],
   useMenuDefaultMinWidth,
+  rowDisabled,
+  rowDisabledAccessor,
   ref,
 }: DataGridProps<T>) {
   useImperativeHandle(ref, () => ({
@@ -591,6 +593,8 @@ export function DataGrid<T extends Record<string, unknown>>({
                 hasMore={hasMore}
                 showFilterRow={showFilterRow}
                 enableColumnSelector={enableColumnSelector}
+                rowDisabled={rowDisabled}
+                rowDisabledAccessor={rowDisabledAccessor}
               />
             </table>
 

package/src/components/DataGrid/types.ts

@@ -52,6 +52,8 @@ export interface DataGridProps<T extends Record<string, unknown>> {
   predeterminedLeftPins?: string[];
   predeterminedRightPins?: string[];
   useMenuDefaultMinWidth?: boolean;
+  rowDisabled?: boolean;
+  rowDisabledAccessor?: (row: T) => boolean;
   ref?: React.Ref<{ getSavedLayout: () => ColumnDef<T>[] | undefined }>;
 }
 

package/src/components/DataGridCell.tsx

@@ -45,6 +45,7 @@ type DataGridCellProps = PropsWithChildren<{
   center?: boolean;
   width?: string;
   minWidth?: string;
+  disabled?: boolean;
 }>;
 
 export const DataGridCell = memo(
@@ -65,6 +66,7 @@ export const DataGridCell = memo(
     center,
     width,
     minWidth,
+    disabled,
     testid,
     ...props
   }: AsProps<Tags> & DataGridCellProps) => {
@@ -166,6 +168,7 @@ export const DataGridCell = memo(
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",
       component === "checkbox" || (center && "justify-center"),
+      disabled && "!text-text-primary-disabled",
     );
 
     return (

package/src/components/Grid.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "react";
 import { Sizing } from "../types";
 import clsx from "clsx";
 
-type Breakpoint = "mobile" | "compact" | "desktop";
+type Breakpoint = "compact" | "desktop";
 
 export type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
@@ -88,7 +88,6 @@ export const Grid = ({
         GAP_BY_SIZING[sizing] ?? GAP_BY_SIZING.container,
         padding && (PADDING_BY_SIZING[sizing] ?? PADDING_BY_SIZING.container),
         columnClasses,
-        "grid-cols-1 desktop:grid-cols-4",
         className,
       )}
     >

package/src/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss" source("./");
+@source inline("{compact:,desktop:,}grid-cols-{1..12}");
 
 @theme static {
   /* ── Breakpoints ────────────────────────── */