feat(inventory,dashboard,types,core-flows,js-sdk,medusa): Improve inventory UX (#10630)

* feat(dashboard): Add UI for bulk editing inventory stock (#10556)

* progress

* cleanup types

* add changeset

* fix 0 values

* format schema

* add delete event and allow copy/pasting enabled for some fields

* add response types

* add tests

* work on fixing setValue behaviour

* cleanup toggle logic

* add loading state

* format schema

* add support for bidirectional actions in DataGrid and update Checkbox and RadioGroup

* update lock

* lint

* fix 404

* address feedback

* update cursor on bidirectional select

packages/admin/dashboard/src/components/data-grid/models/data-grid-bulk-update-command.ts

@@ -4,7 +4,7 @@ export type DataGridBulkUpdateCommandArgs = {
   fields: string[]
   next: any[]
   prev: any[]
-  setter: (fields: string[], values: any[]) => void
+  setter: (fields: string[], values: any[], isHistory?: boolean) => void
 }
 
 export class DataGridBulkUpdateCommand implements Command {
@@ -13,7 +13,11 @@ export class DataGridBulkUpdateCommand implements Command {
   private _prev: any[]
   private _next: any[]
 
-  private _setter: (fields: string[], any: string[]) => void
+  private _setter: (
+    fields: string[],
+    values: any[],
+    isHistory?: boolean
+  ) => void
 
   constructor({ fields, prev, next, setter }: DataGridBulkUpdateCommandArgs) {
     this._fields = fields
@@ -22,13 +26,13 @@ export class DataGridBulkUpdateCommand implements Command {
     this._setter = setter
   }
 
-  execute(): void {
-    this._setter(this._fields, this._next)
+  execute(redo = false): void {
+    this._setter(this._fields, this._next, redo)
   }
   undo(): void {
-    this._setter(this._fields, this._prev)
+    this._setter(this._fields, this._prev, true)
   }
   redo(): void {
-    this.execute()
+    this.execute(true)
   }
 }

packages/admin/dashboard/src/components/data-grid/models/data-grid-matrix.ts

@@ -1,13 +1,25 @@
 import { ColumnDef, Row } from "@tanstack/react-table"
 import { FieldValues } from "react-hook-form"
-import { DataGridColumnType, DataGridCoordinates, Grid, GridCell, InternalColumnMeta } from "../types"
+import {
+  DataGridColumnType,
+  DataGridCoordinates,
+  Grid,
+  GridCell,
+  InternalColumnMeta,
+} from "../types"
 
 export class DataGridMatrix<TData, TFieldValues extends FieldValues> {
+  private multiColumnSelection: boolean
   private cells: Grid<TFieldValues>
   public rowAccessors: (string | null)[] = []
   public columnAccessors: (string | null)[] = []
 
-  constructor(data: Row<TData>[], columns: ColumnDef<TData>[]) {
+  constructor(
+    data: Row<TData>[],
+    columns: ColumnDef<TData>[],
+    multiColumnSelection: boolean = false
+  ) {
+    this.multiColumnSelection = multiColumnSelection
     this.cells = this._populateCells(data, columns)
 
     this.rowAccessors = this._computeRowAccessors()
@@ -64,17 +76,26 @@ export class DataGridMatrix<TData, TFieldValues extends FieldValues> {
       return keys
     }
 
-    if (start.col !== end.col) {
-      throw new Error("Selection must be in the same column")
+    if (!this.multiColumnSelection && start.col !== end.col) {
+      throw new Error(
+        "Selection must be in the same column when multiColumnSelection is disabled"
+      )
     }
 
     const startRow = Math.min(start.row, end.row)
     const endRow = Math.max(start.row, end.row)
-    const col = start.col
+    const startCol = this.multiColumnSelection
+      ? Math.min(start.col, end.col)
+      : start.col
+    const endCol = this.multiColumnSelection
+      ? Math.max(start.col, end.col)
+      : start.col
 
     for (let row = startRow; row <= endRow; row++) {
-      if (this._isValidPosition(row, col) && this.cells[row][col] !== null) {
-        keys.push(this.cells[row][col]?.field as string)
+      for (let col = startCol; col <= endCol; col++) {
+        if (this._isValidPosition(row, col) && this.cells[row][col] !== null) {
+          keys.push(this.cells[row][col]?.field as string)
+        }
       }
     }
 
@@ -106,15 +127,27 @@ export class DataGridMatrix<TData, TFieldValues extends FieldValues> {
       return false
     }
 
-    if (start.col !== end.col) {
-      throw new Error("Selection must be in the same column")
+    if (!this.multiColumnSelection && start.col !== end.col) {
+      throw new Error(
+        "Selection must be in the same column when multiColumnSelection is disabled"
+      )
     }
 
     const startRow = Math.min(start.row, end.row)
     const endRow = Math.max(start.row, end.row)
-    const col = start.col
+    const startCol = this.multiColumnSelection
+      ? Math.min(start.col, end.col)
+      : start.col
+    const endCol = this.multiColumnSelection
+      ? Math.max(start.col, end.col)
+      : start.col
 
-    return cell.col === col && cell.row >= startRow && cell.row <= endRow
+    return (
+      cell.row >= startRow &&
+      cell.row <= endRow &&
+      cell.col >= startCol &&
+      cell.col <= endCol
+    )
   }
 
   toggleColumn(col: number, enabled: boolean) {
@@ -385,4 +418,4 @@ export class DataGridMatrix<TData, TFieldValues extends FieldValues> {
 
     return cells
   }
-}
+}