@dmsi/wedgekit-react 0.0.511 → 0.0.513

package/dist/components/MobileDataGrid/MobileDataGridHeader.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/MobileDataGrid/MobileDataGridHeader.js

@@ -1,10 +1,10 @@
 import {
   MobileDataGridHeader
-} from "../../chunk-JWVZOEF5.js";
+} from "../../chunk-YY66JVTB.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-ELXVDRWS.js";
 import "../../chunk-3UUCDNX3.js";
-import "../../chunk-FJRYHJUV.js";
+import "../../chunk-CDMXM5JW.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-Y5GD2FJA.js";
 import "../../chunk-MBZ55T2D.js";
@@ -31,9 +31,9 @@ import "../../chunk-CMMQTIVM.js";
 import "../../chunk-AG43RS4Q.js";
 import "../../chunk-AKJUBFJK.js";
 import "../../chunk-SUSUNSVZ.js";
-import "../../chunk-Y2GK27RX.js";
+import "../../chunk-BWPNXY7T.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-F6RZ7MUE.js";
+import "../../chunk-ZCIC3AIZ.js";
 import "../../chunk-TCMOGTPB.js";
 import "../../chunk-DVU5XV7L.js";
 import "../../chunk-LKKFQLWD.js";

package/dist/components/MobileDataGrid/index.cjs

@@ -2607,6 +2607,7 @@ var DataGridCell = (0, import_react11.memo)(
       center,
       width,
       minWidth,
+      disabled,
       testid
     } = _b, props = __objRest(_b, [
       "id",
@@ -2625,6 +2626,7 @@ var DataGridCell = (0, import_react11.memo)(
       "center",
       "width",
       "minWidth",
+      "disabled",
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
@@ -2690,7 +2692,8 @@ var DataGridCell = (0, import_react11.memo)(
       paddedLeft && "pl-2",
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",
-      component === "checkbox" || center && "justify-center"
+      component === "checkbox" || center && "justify-center",
+      disabled && "!text-text-primary-disabled"
     );
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Element,
@@ -3083,7 +3086,8 @@ function TableBodyRow({
   showFilterRow,
   // enableColumnSelector = false,
   locked,
-  pinDirection
+  pinDirection,
+  disabled
 }) {
   var _a;
   let visibleCells;
@@ -3101,10 +3105,11 @@ function TableBodyRow({
     {
       className: (0, import_clsx14.default)(
         "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 ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+        "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}` : void 0,
       "data-testid": testid ? `${testid}-row-${row.id}` : void 0,
@@ -3214,7 +3219,9 @@ function TableBody({
   showFilterRow,
   enableColumnSelector = false,
   locked,
-  pinDirection
+  pinDirection,
+  rowDisabled,
+  rowDisabledAccessor
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -3307,7 +3314,8 @@ function TableBody({
               showFilterRow,
               enableColumnSelector,
               locked,
-              pinDirection
+              pinDirection,
+              disabled: rowDisabledAccessor ? rowDisabledAccessor(row.original) : rowDisabled
             },
             row.id
           );
@@ -3617,6 +3625,8 @@ function DataGrid({
   predeterminedLeftPins = [],
   predeterminedRightPins = [],
   useMenuDefaultMinWidth,
+  rowDisabled,
+  rowDisabledAccessor,
   ref
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -4005,7 +4015,9 @@ function DataGrid({
                             isLoadingMore,
                             hasMore,
                             showFilterRow,
-                            enableColumnSelector
+                            enableColumnSelector,
+                            rowDisabled,
+                            rowDisabledAccessor
                           }
                         )
                       ] }),

package/dist/components/MobileDataGrid/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/MobileDataGrid/index.js

@@ -1,10 +1,10 @@
 import {
   MobileDataGrid
-} from "../../chunk-JWVZOEF5.js";
+} from "../../chunk-YY66JVTB.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-ELXVDRWS.js";
 import "../../chunk-3UUCDNX3.js";
-import "../../chunk-FJRYHJUV.js";
+import "../../chunk-CDMXM5JW.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-Y5GD2FJA.js";
 import "../../chunk-MBZ55T2D.js";
@@ -31,9 +31,9 @@ import "../../chunk-CMMQTIVM.js";
 import "../../chunk-AG43RS4Q.js";
 import "../../chunk-AKJUBFJK.js";
 import "../../chunk-SUSUNSVZ.js";
-import "../../chunk-Y2GK27RX.js";
+import "../../chunk-BWPNXY7T.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-F6RZ7MUE.js";
+import "../../chunk-ZCIC3AIZ.js";
 import "../../chunk-TCMOGTPB.js";
 import "../../chunk-DVU5XV7L.js";
 import "../../chunk-LKKFQLWD.js";

package/dist/components/ProductImagePreview/index.cjs

@@ -553,7 +553,6 @@ var Grid = (_a) => {
         (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
         padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
         columnClasses,
-        "grid-cols-1 desktop:grid-cols-4",
         className
       ),
       children

package/dist/components/ProductImagePreview/index.js

@@ -1,13 +1,13 @@
 import {
   ProductImagePreview
-} from "../../chunk-FJRYHJUV.js";
+} from "../../chunk-CDMXM5JW.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
 import "../../chunk-YCDDBSVU.js";
 import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-AT4AWD6B.js";
-import "../../chunk-Y2GK27RX.js";
+import "../../chunk-BWPNXY7T.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";

package/dist/components/index.cjs

@@ -2211,6 +2211,7 @@ var DataGridCell = (0, import_react11.memo)(
       center,
       width,
       minWidth,
+      disabled,
       testid
     } = _b, props = __objRest(_b, [
       "id",
@@ -2229,6 +2230,7 @@ var DataGridCell = (0, import_react11.memo)(
       "center",
       "width",
       "minWidth",
+      "disabled",
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
@@ -2294,7 +2296,8 @@ var DataGridCell = (0, import_react11.memo)(
       paddedLeft && "pl-2",
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",
-      component === "checkbox" || center && "justify-center"
+      component === "checkbox" || center && "justify-center",
+      disabled && "!text-text-primary-disabled"
     );
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Element,
@@ -2687,7 +2690,8 @@ function TableBodyRow({
   showFilterRow,
   // enableColumnSelector = false,
   locked,
-  pinDirection
+  pinDirection,
+  disabled
 }) {
   var _a;
   let visibleCells;
@@ -2705,10 +2709,11 @@ function TableBodyRow({
     {
       className: (0, import_clsx11.default)(
         "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 ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+        "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}` : void 0,
       "data-testid": testid ? `${testid}-row-${row.id}` : void 0,
@@ -2818,7 +2823,9 @@ function TableBody({
   showFilterRow,
   enableColumnSelector = false,
   locked,
-  pinDirection
+  pinDirection,
+  rowDisabled,
+  rowDisabledAccessor
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -2911,7 +2918,8 @@ function TableBody({
               showFilterRow,
               enableColumnSelector,
               locked,
-              pinDirection
+              pinDirection,
+              disabled: rowDisabledAccessor ? rowDisabledAccessor(row.original) : rowDisabled
             },
             row.id
           );
@@ -3221,6 +3229,8 @@ function DataGrid({
   predeterminedLeftPins = [],
   predeterminedRightPins = [],
   useMenuDefaultMinWidth,
+  rowDisabled,
+  rowDisabledAccessor,
   ref
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -3609,7 +3619,9 @@ function DataGrid({
                             isLoadingMore,
                             hasMore,
                             showFilterRow,
-                            enableColumnSelector
+                            enableColumnSelector,
+                            rowDisabled,
+                            rowDisabledAccessor
                           }
                         )
                       ] }),
@@ -6691,7 +6703,6 @@ var Grid = (_a) => {
         (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
         padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
         columnClasses,
-        "grid-cols-1 desktop:grid-cols-4",
         className
       ),
       children