release v2.0.0-beta.15 - autocomplete options fixes

KevinVandy · Oct 26, 2023 · 8615638 · 8615638
1 parent bca5ded
commit 8615638
Show file tree

Hide file tree

Showing 23 changed files with 243 additions and 212 deletions.
diff --git a/apps/material-react-table-docs/components/prop-tables/columnOptions.ts b/apps/material-react-table-docs/components/prop-tables/columnOptions.ts
@@ -144,7 +144,7 @@ export const columnOptions: ColumnOption[] = [
     linkText: '',
     source: 'MRT',
     required: false,
-    type: 'Array<string | { text: string; value: string }>',
+    type: 'Array<string | { label: string; value: string }>',
   },
   {
     columnOption: 'editVariant',
@@ -335,7 +335,7 @@ export const columnOptions: ColumnOption[] = [
     linkText: '',
     source: 'MRT',
     required: false,
-    type: 'Array<string | { text: string; value: string }>',
+    type: 'Array<string | { label: string; value: string }>',
   },
   {
     columnOption: 'filterVariant',

diff --git a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/JS.js
@@ -25,9 +25,9 @@ const Example = () => {
         header: 'Gender',
         filterFn: 'equals',
         filterSelectOptions: [
-          { text: 'Male', value: 'Male' },
-          { text: 'Female', value: 'Female' },
-          { text: 'Other', value: 'Other' },
+          { label: 'Male', value: 'Male' },
+          { label: 'Female', value: 'Female' },
+          { label: 'Other', value: 'Other' },
         ],
         filterVariant: 'select',
       },

diff --git a/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/customize-filter-components/sandbox/src/TS.tsx
@@ -34,9 +34,9 @@ const Example = () => {
         header: 'Gender',
         filterFn: 'equals',
         filterSelectOptions: [
-          { text: 'Male', value: 'Male' },
-          { text: 'Female', value: 'Female' },
-          { text: 'Other', value: 'Other' },
+          { label: 'Male', value: 'Male' },
+          { label: 'Female', value: 'Female' },
+          { label: 'Other', value: 'Other' },
         ],
         filterVariant: 'select',
       },

diff --git a/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js b/apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 import { MenuItem } from '@mui/material';
 import { data } from './makeData';
 

diff --git a/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-filter-facet-values/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 import { data } from './makeData';
 
 const Example = () => {

diff --git a/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-row-selection/sandbox/src/JS.js
@@ -29,33 +29,32 @@ const data = [
 const Example = () => {
   const columns = useMemo(
     //column definitions...
-    () =>
-      [
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'age',
-          header: 'Age',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'city',
-          header: 'City',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-      ],
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
     [], //end
   );
 

diff --git a/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/multi-sorting/sandbox/src/TS.tsx
@@ -1,4 +1,8 @@
-import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 import { data, type Person } from './makeData';
 import { Button } from '@mui/material';
 
@@ -46,9 +50,9 @@ const Example = () => {
         Clear All Sorting
       </Button>
     ),
-  })
+  });
 
-  return <MaterialReactTable table={table} />
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx b/apps/material-react-table-docs/pages/docs/guides/column-hiding.mdx
@@ -5,7 +5,7 @@ import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable
 import Example from '../../../examples/disable-column-hiding';
 
 <Head>
-  <title>{'Column Hiding Guide - Material React Table V2 Docs}</title>
+  <title>{'Column Hiding Guide - Material React Table V2 Docs'}</title>
   <meta
     name="description"
     content="How to use, customize, or disable column hiding and visibility features of Material React Table"

diff --git a/apps/material-react-table-docs/pages/index.tsx b/apps/material-react-table-docs/pages/index.tsx
@@ -232,7 +232,10 @@ const HomePage = () => {
             gap: '1rem',
           }}
         >
-          <GuideCard title="Best Practices" href="/docs/guides/best-practices" />
+          <GuideCard
+            title="Best Practices"
+            href="/docs/guides/best-practices"
+          />
           <GuideCard title="Table Options" href="/docs/api/table-options" />
           <GuideCard title="Advanced Example" href="docs/examples/advanced" />
           <GuideCard

diff --git a/apps/test-cra/src/index.js b/apps/test-cra/src/index.js
@@ -6,5 +6,5 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/apps/test-remix/app/entry.client.tsx b/apps/test-remix/app/entry.client.tsx
@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
+import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
       <RemixBrowser />
-    </StrictMode>
+    </StrictMode>,
   );
 });
diff --git a/apps/test-remix/app/entry.server.tsx b/apps/test-remix/app/entry.server.tsx
@@ -4,13 +4,13 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import { PassThrough } from "node:stream";
+import { PassThrough } from 'node:stream';
 
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
+import type { AppLoadContext, EntryContext } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import isbot from 'isbot';
+import { renderToPipeableStream } from 'react-dom/server';
 
 const ABORT_DELAY = 5_000;
 
@@ -19,28 +19,28 @@ export default function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
-  loadContext: AppLoadContext
+  loadContext: AppLoadContext,
 ) {
-  return isbot(request.headers.get("user-agent"))
+  return isbot(request.headers.get('user-agent'))
     ? handleBotRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -56,13 +56,13 @@ function handleBotRequest(
           const body = new PassThrough();
           const stream = createReadableStreamFromReadable(body);
 
-          responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set('Content-Type', 'text/html');
 
           resolve(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -79,7 +79,7 @@ function handleBotRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);
@@ -90,7 +90,7 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -106,13 +106,13 @@ function handleBrowserRequest(
           const body = new PassThrough();
           const stream = createReadableStreamFromReadable(body);
 
-          responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set('Content-Type', 'text/html');
 
           resolve(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -129,7 +129,7 @@ function handleBrowserRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);

diff --git a/apps/test-remix/app/root.tsx b/apps/test-remix/app/root.tsx
@@ -1,16 +1,16 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
+import { cssBundleHref } from '@remix-run/css-bundle';
+import type { LinksFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
+} from '@remix-run/react';
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ];
 
 export default function App() {

diff --git a/apps/test-remix/remix.config.js b/apps/test-remix/remix.config.js
@@ -1,6 +1,6 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 export default {
-  ignoredRouteFiles: ["**/.*"],
+  ignoredRouteFiles: ['**/.*'],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",

diff --git a/apps/test-vite/src/main.tsx b/apps/test-vite/src/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);
diff --git a/apps/test-vite/vite.config.ts b/apps/test-vite/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});
diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "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/column.utils.ts b/packages/material-react-table/src/column.utils.ts
@@ -348,3 +348,20 @@ export function createMRTColumnHelper<
     group: (column) => column as MRT_GroupColumnDef<TData>,
   };
 }
+
+export const getValueAndLabel = (
+  option: { label?: string; text?: string; value: string } | string,
+): { label: string; value: string } => {
+  let label: string = '';
+  let value: string = '';
+  if (option) {
+    if (typeof option !== 'object') {
+      label = option;
+      value = option;
+    } else {
+      label = option.label ?? option.text ?? option.value;
+      value = option.value ?? label;
+    }
+  }
+  return { label, value };
+};