Address PR comments

mui · Nov 20, 2024 · 892e9b3 · 892e9b3
1 parent e19091c
commit 892e9b3
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 33 deletions.
diff --git a/docs/data/data-grid/prompt/PromptWithDataSampling.js b/docs/data/data-grid/prompt/PromptWithDataSampling.js
@@ -3,19 +3,19 @@ import {
   DataGridPremium,
   Unstable_GridToolbarPromptControl as GridToolbarPromptControl,
   GridToolbar,
-  GridToolbarContainer,
 } from '@mui/x-data-grid-premium';
 import { mockPromptResolver, useDemoData } from '@mui/x-data-grid-generator';
 import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 
 function ToolbarWithPromptInput() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
-      <Stack flex={1} gap={1}>
-        <GridToolbar />
+    <Stack flex={1} gap={0.5} sx={{ px: 0.5 }}>
+      <GridToolbar />
+      <Box sx={{ px: 0.5 }}>
         <GridToolbarPromptControl onPrompt={mockPromptResolver} allowDataSampling />
-      </Stack>
-    </GridToolbarContainer>
+      </Box>
+    </Stack>
   );
 }
 

diff --git a/docs/data/data-grid/prompt/PromptWithDataSampling.tsx b/docs/data/data-grid/prompt/PromptWithDataSampling.tsx
@@ -7,15 +7,16 @@ import {
 } from '@mui/x-data-grid-premium';
 import { mockPromptResolver, useDemoData } from '@mui/x-data-grid-generator';
 import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 
 function ToolbarWithPromptInput() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
-      <Stack flex={1} gap={1}>
-        <GridToolbar />
+    <Stack flex={1} gap={0.5} sx={{ px: 0.5 }}>
+      <GridToolbar />
+      <Box sx={{ px: 0.5 }}>
         <GridToolbarPromptControl onPrompt={mockPromptResolver} allowDataSampling />
-      </Stack>
-    </GridToolbarContainer>
+      </Box>
+    </Stack>
   );
 }
 

diff --git a/docs/data/data-grid/prompt/PromptWithExamples.js b/docs/data/data-grid/prompt/PromptWithExamples.js
@@ -3,7 +3,6 @@ import {
   DataGridPremium,
   Unstable_GridToolbarPromptControl as GridToolbarPromptControl,
   GridToolbar,
-  GridToolbarContainer,
 } from '@mui/x-data-grid-premium';
 import {
   mockPromptResolver,
@@ -19,15 +18,16 @@ import {
   useDemoData,
 } from '@mui/x-data-grid-generator';
 import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 
 function ToolbarWithPromptInput() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
-      <Stack flex={1} gap={1}>
-        <GridToolbar />
+    <Stack flex={1} gap={0.5} sx={{ px: 0.5 }}>
+      <GridToolbar />
+      <Box sx={{ px: 0.5 }}>
         <GridToolbarPromptControl onPrompt={mockPromptResolver} />
-      </Stack>
-    </GridToolbarContainer>
+      </Box>
+    </Stack>
   );
 }
 
@@ -75,10 +75,14 @@ export default function PromptWithExamples() {
     rowLength: 10000,
   });
 
-  const columns = data.columns.map((column) => ({
-    ...column,
-    unstable_examples: createExamples(column.field),
-  }));
+  const columns = React.useMemo(
+    () =>
+      data.columns.map((column) => ({
+        ...column,
+        unstable_examples: createExamples(column.field),
+      })),
+    [],
+  );
 
   return (
     <div style={{ height: 500, width: '100%' }}>

diff --git a/docs/data/data-grid/prompt/PromptWithExamples.tsx b/docs/data/data-grid/prompt/PromptWithExamples.tsx
@@ -19,15 +19,16 @@ import {
   useDemoData,
 } from '@mui/x-data-grid-generator';
 import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 
 function ToolbarWithPromptInput() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
-      <Stack flex={1} gap={1}>
-        <GridToolbar />
+    <Stack flex={1} gap={0.5} sx={{ px: 0.5 }}>
+      <GridToolbar />
+      <Box sx={{ px: 0.5 }}>
         <GridToolbarPromptControl onPrompt={mockPromptResolver} />
-      </Stack>
-    </GridToolbarContainer>
+      </Box>
+    </Stack>
   );
 }
 
@@ -75,10 +76,14 @@ export default function PromptWithExamples() {
     rowLength: 10000,
   });
 
-  const columns = data.columns.map((column) => ({
-    ...column,
-    unstable_examples: createExamples(column.field),
-  }));
+  const columns = React.useMemo(
+    () =>
+      data.columns.map((column) => ({
+        ...column,
+        unstable_examples: createExamples(column.field),
+      })),
+    [],
+  );
 
   return (
     <div style={{ height: 500, width: '100%' }}>

diff --git a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
@@ -255,6 +255,7 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
                     aria-label={apiRef.current.getLocaleText(
                       'toolbarPromptControlSendActionAriaLabel',
                     )}
+                    edge="end"
                   >
                     <rootProps.slots.toolbarPromptSendIcon fontSize="small" />
                   </rootProps.slots.baseIconButton>

diff --git a/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx b/packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { Timeout } from '@mui/utils/useTimeout';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -90,14 +89,14 @@ function RecordButton(props: RecordButtonProps) {
     return { start, abort };
   }).current;
 
-  const handleClick = useEventCallback(() => {
+  const handleClick = () => {
     if (!recording) {
       recognition.start({ onDone, onUpdate });
       return;
     }
 
     recognition.abort();
-  });
+  };
 
   return (
     BrowserSpeechRecognition && (
@@ -116,6 +115,7 @@ function RecordButton(props: RecordButtonProps) {
             onClick={handleClick}
             ref={buttonRef}
             size="small"
+            edge="start"
           >
             <rootProps.slots.toolbarPromptRecordIcon fontSize="small" />
           </rootProps.slots.baseIconButton>