release v1.8.3 - re-add support for edit and filter texfield children

KevinVandy · Feb 27, 2023 · 911e787 · 911e787 · vercel · Feb 27, 2023
1 parent a75b6a6
commit 911e787
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 63 deletions.
diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,10 @@ import Head from 'next/head';
 
 ### Version 1 (Latest)
 
+#### v1.8.3 (2023-02-27)
+
+- Add back support for custom edit and filter textfield children
+
 #### v1.8.2 (2023-02-26)
 
 - Added `tableFeatures` prop for advanced tableInstance customization

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.8.2",
+  "version": "1.8.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

diff --git a/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx b/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx
@@ -116,33 +116,34 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
-      {columnDef?.editSelectOptions?.map(
-        (option: string | { text: string; value: string }) => {
-          let value: string;
-          let text: string;
-          if (typeof option !== 'object') {
-            value = option;
-            text = option;
-          } else {
-            value = option.value;
-            text = option.text;
-          }
-          return (
-            <MenuItem
-              key={value}
-              sx={{
-                display: 'flex',
-                m: 0,
-                alignItems: 'center',
-                gap: '0.5rem',
-              }}
-              value={value}
-            >
-              {text}
-            </MenuItem>
-          );
-        },
-      )}
+      {textFieldProps.children ??
+        columnDef?.editSelectOptions?.map(
+          (option: string | { text: string; value: string }) => {
+            let value: string;
+            let text: string;
+            if (typeof option !== 'object') {
+              value = option;
+              text = option;
+            } else {
+              value = option.value;
+              text = option.text;
+            }
+            return (
+              <MenuItem
+                key={value}
+                sx={{
+                  display: 'flex',
+                  m: 0,
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                }}
+                value={value}
+              >
+                {text}
+              </MenuItem>
+            );
+          },
+        )}
     </TextField>
   );
 };
diff --git a/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx
@@ -349,41 +349,42 @@ export const MRT_FilterTextField = ({
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
-        {columnDef?.filterSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
-            let value: string;
-            let text: string;
-            if (typeof option !== 'object') {
-              value = option;
-              text = option;
-            } else {
-              value = option.value;
-              text = option.text;
-            }
-            return (
-              <MenuItem
-                key={value}
-                sx={{
-                  display: 'flex',
-                  m: 0,
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                }}
-                value={value}
-              >
-                {isMultiSelectFilter && (
-                  <Checkbox
-                    checked={(
-                      (column.getFilterValue() ?? []) as string[]
-                    ).includes(value)}
-                    sx={{ mr: '0.5rem' }}
-                  />
-                )}
-                {text}
-              </MenuItem>
-            );
-          },
-        )}
+        {textFieldProps.children ??
+          columnDef?.filterSelectOptions?.map(
+            (option: string | { text: string; value: string }) => {
+              let value: string;
+              let text: string;
+              if (typeof option !== 'object') {
+                value = option;
+                text = option;
+              } else {
+                value = option.value;
+                text = option.text;
+              }
+              return (
+                <MenuItem
+                  key={value}
+                  sx={{
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                  }}
+                  value={value}
+                >
+                  {isMultiSelectFilter && (
+                    <Checkbox
+                      checked={(
+                        (column.getFilterValue() ?? []) as string[]
+                      ).includes(value)}
+                      sx={{ mr: '0.5rem' }}
+                    />
+                  )}
+                  {text}
+                </MenuItem>
+              );
+            },
+          )}
       </TextField>
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}