From 602ad373023b51ff86a659c966a268533fe506a8 Mon Sep 17 00:00:00 2001
From: yann-combarnous <yann.combarnous@cbre.com>
Date: Thu, 13 Jun 2024 17:32:26 +0200
Subject: [PATCH 1/2] feat: add multi-select option to column editVariant
 parameter

---
 .../components/prop-tables/columnOptions.ts   |  2 +-
 .../inputs/MRT_EditCellTextInput.tsx          | 32 +++++++++++-
 packages/mantine-react-table/src/types.ts     |  2 +-
 .../stories/features/Editing.stories.tsx      | 52 +++++++++++++++++++
 4 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts
index 73485a438..ca0e35e41 100644
--- a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts
+++ b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts
@@ -134,7 +134,7 @@ export const columnOptions: ColumnOption[] = [
     linkText: 'MRT Editing Docs',
     source: 'MRT',
     required: false,
-    type: "'select' | 'text'",
+    type: "'select' | 'text' | 'multi-select'",
   },
   {
     columnOption: 'enableClickToCopy',
diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
index e665383f1..afe7aba9e 100644
--- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
+++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
@@ -1,5 +1,5 @@
 import { type FocusEvent, type KeyboardEvent, useState } from 'react';
-import { Select, TextInput, type TextInputProps } from '@mantine/core';
+import { MultiSelect, Select, TextInput, type TextInputProps } from '@mantine/core';
 import {
   type MRT_Cell,
   type MRT_CellValue,
@@ -39,6 +39,7 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
   const isCreating = creatingRow?.id === row.id;
   const isEditing = editingRow?.id === row.id;
   const isSelectEdit = columnDef.editVariant === 'select';
+  const isMultiSelectEdit = columnDef.editVariant === 'multi-select';
 
   const [value, setValue] = useState(() => cell.getValue<any>());
 
@@ -132,6 +133,35 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
     );
   }
 
+  if (isMultiSelectEdit) {
+    return (
+      // @ts-ignore
+      <MultiSelect
+        {...commonProps}
+        searchable
+        value={value}
+        {...selectProps}
+        onBlur={handleBlur}
+        onChange={(value) => {
+          selectProps.onChange?.(value as any);
+          setValue(value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            if (selectProps.ref) {
+              selectProps.ref.current = node;
+            }
+          }
+        }}
+      />
+    );
+  }
+
   return (
     <TextInput
       {...commonProps}
diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts
index 8d0c05042..5ebb2f96d 100644
--- a/packages/mantine-react-table/src/types.ts
+++ b/packages/mantine-react-table/src/types.ts
@@ -491,7 +491,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData>[];
-  editVariant?: 'select' | 'text';
+  editVariant?: 'select' | 'text' | 'multi-select';
   enableClickToCopy?: ((cell: MRT_Cell<TData>) => boolean) | boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx
index dcc89bb70..03812d4e8 100644
--- a/packages/mantine-react-table/stories/features/Editing.stories.tsx
+++ b/packages/mantine-react-table/stories/features/Editing.stories.tsx
@@ -79,6 +79,7 @@ type Person = {
   lastName: string;
   phoneNumber: string;
   state: string;
+  visitedStates: string[];
 };
 
 const data: Person[] = [...Array(100)].map(() => ({
@@ -87,6 +88,7 @@ const data: Person[] = [...Array(100)].map(() => ({
   lastName: faker.person.lastName(),
   phoneNumber: faker.phone.number(),
   state: faker.location.state(),
+  visitedStates: faker.helpers.multiple(faker.location.state),
 }));
 
 export const EditingEnabledEditModeModalDefault = () => {
@@ -365,6 +367,56 @@ export const CustomEditModal = () => {
   );
 };
 
+export const EditMultiSelectVariant = () => {
+  const [tableData, setTableData] = useState(data);
+
+  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
+    exitEditingMode,
+    row,
+    values,
+  }) => {
+    tableData[+row.index] = values;
+    setTableData([...tableData]);
+    exitEditingMode();
+  };
+
+  return (
+    <MantineReactTable
+      columns={[
+        {
+          accessorKey: 'firstName',
+          header: 'First Name',
+        },
+        {
+          accessorKey: 'lastName',
+          header: 'Last Name',
+        },
+        {
+          accessorKey: 'address',
+          header: 'Address',
+        },
+        {
+          accessorKey: 'visitedStates',
+          editVariant: 'multi-select',
+          header: 'Visited States',
+          mantineEditSelectProps: {
+            data: usStates as any,
+          },
+        },
+        {
+          accessorKey: 'phoneNumber',
+          header: 'Phone Number',
+        },
+      ]}
+      data={tableData}
+      editDisplayMode="row"
+      enableEditing
+      enableRowActions
+      onEditingRowSave={handleSaveRow}
+    />
+  );
+};
+
 export const EditSelectVariant = () => {
   const [tableData, setTableData] = useState(data);
 

From aea1f89a83ec31cf95b0ab9e241dee78ce2f0d96 Mon Sep 17 00:00:00 2001
From: Yann Combarnous <yann.combarnous@cbre.com>
Date: Thu, 11 Jul 2024 15:38:15 +0200
Subject: [PATCH 2/2] fix: cast types

---
 .../inputs/MRT_EditCellTextInput.tsx          | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
index afe7aba9e..01e779324 100644
--- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
+++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
@@ -1,6 +1,14 @@
 import { type FocusEvent, type KeyboardEvent, useState } from 'react';
-import { MultiSelect, Select, TextInput, type TextInputProps } from '@mantine/core';
+import { 
+  MultiSelect,
+  Select,
+  TextInput,
+  type TextInputProps,
+  type SelectProps,
+  type MultiSelectProps
+} from '@mantine/core';
 import {
+  type HTMLPropsRef,
   type MRT_Cell,
   type MRT_CellValue,
   type MRT_RowData,
@@ -8,17 +16,34 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+
+interface PropsTextInput<TData extends MRT_RowData, TValue = MRT_CellValue>
   extends TextInputProps {
   cell: MRT_Cell<TData, TValue>;
   table: MRT_TableInstance<TData>;
 }
 
+interface PropsSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends SelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsMultiSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends MultiSelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+type MRT_TextInputProps = TextInputProps & HTMLPropsRef<HTMLInputElement>
+type MRT_SelectProps = SelectProps & HTMLPropsRef<HTMLInputElement>
+type MRT_MultiSelectProps = MultiSelectProps & HTMLPropsRef<HTMLInputElement>
+
 export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: PropsTextInput<TData> | PropsSelect<TData> | PropsMultiSelect<TData>) => {
   const {
     getState,
     options: {
@@ -48,7 +73,7 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
     ...parseFromValuesOrFunc(mantineEditTextInputProps, arg),
     ...parseFromValuesOrFunc(columnDef.mantineEditTextInputProps, arg),
     ...rest,
-  };
+  } as MRT_TextInputProps;
 
   const selectProps = {
     ...parseFromValuesOrFunc(mantineEditSelectProps, arg),
@@ -106,15 +131,14 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
 
   if (isSelectEdit) {
     return (
-      // @ts-ignore
       <Select
         {...commonProps}
         searchable
-        value={value}
-        {...selectProps}
+        value={value as any}
+        {...(selectProps as MRT_SelectProps)}
         onBlur={handleBlur}
         onChange={(value) => {
-          selectProps.onChange?.(value as any);
+          (selectProps as MRT_SelectProps).onChange?.(value as any);
           setValue(value);
         }}
         onClick={(e) => {
@@ -135,15 +159,14 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
 
   if (isMultiSelectEdit) {
     return (
-      // @ts-ignore
       <MultiSelect
         {...commonProps}
         searchable
         value={value}
-        {...selectProps}
+        {...(selectProps as MRT_MultiSelectProps)}
         onBlur={handleBlur}
         onChange={(value) => {
-          selectProps.onChange?.(value as any);
+          (selectProps as MRT_MultiSelectProps).onChange?.(value as any);
           setValue(value);
         }}
         onClick={(e) => {