fix(auto-save-indicator): rename key prop to translationKey

.changeset/witty-papayas-look.md

@@ -0,0 +1,13 @@
+---
+"@refinedev/chakra-ui": patch
+"@refinedev/mantine": patch
+"@refinedev/antd": patch
+"@refinedev/core": patch
+"@refinedev/mui": patch
+---
+
+fix(auto-save-indicator): replace reserved `key` prop with `translationKey` in <Message /> components
+
+`<AutoSaveIndicator />` components from UI libraries have been using a `<Message />` component internally that uses a `key` prop. Since `key` is a reserved prop in React, it was causing a warning in the console. This change replaces the `key` prop with `translationKey` to avoid the warning.
+
+Resolves [#6067](https://github.com/refinedev/refine/issues/6067)

packages/antd/src/components/autoSaveIndicator/index.tsx

@@ -17,31 +17,31 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   elements: {
     success = (
       <Message
-        key="autoSave.success"
+        translationKey="autoSave.success"
         defaultMessage="saved"
         // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<CheckCircleOutlined />}
       />
     ),
     error = (
       <Message
-        key="autoSave.error"
+        translationKey="autoSave.error"
         defaultMessage="auto save failure"
         // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<ExclamationCircleOutlined />}
       />
     ),
     loading = (
       <Message
-        key="autoSave.loading"
+        translationKey="autoSave.loading"
         defaultMessage="saving..."
         // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<SyncOutlined />}
       />
     ),
     idle = (
       <Message
-        key="autoSave.idle"
+        translationKey="autoSave.idle"
         defaultMessage="waiting for changes"
         // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<EllipsisOutlined />}
@@ -63,11 +63,11 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
 };
 
 const Message = ({
-  key,
+  translationKey,
   defaultMessage,
   icon,
 }: {
-  key: string;
+  translationKey: string;
   defaultMessage: string;
   icon: React.ReactNode;
 }) => {
@@ -82,7 +82,7 @@ const Message = ({
         fontSize: ".8rem",
       }}
     >
-      {translate(key, defaultMessage)}
+      {translate(translationKey, defaultMessage)}
       <span style={{ marginLeft: ".2rem" }}>{icon}</span>
     </Typography.Text>
   );

packages/chakra-ui/src/components/autoSaveIndicator/index.tsx

@@ -17,28 +17,28 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   elements: {
     success = (
       <Message
-        key="autoSave.success"
+        translationKey="autoSave.success"
         defaultMessage="saved"
         icon={<IconCircleCheck size="18px" />}
       />
     ),
     error = (
       <Message
-        key="autoSave.error"
+        translationKey="autoSave.error"
         defaultMessage="auto save failure"
         icon={<IconExclamationCircle size="18px" />}
       />
     ),
     loading = (
       <Message
-        key="autoSave.loading"
+        translationKey="autoSave.loading"
         defaultMessage="saving..."
         icon={<IconRefresh size="18px" />}
       />
     ),
     idle = (
       <Message
-        key="autoSave.idle"
+        translationKey="autoSave.idle"
         defaultMessage="waiting for changes"
         icon={<IconDots size="18px" />}
       />
@@ -59,11 +59,11 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
 };
 
 const Message = ({
-  key,
+  translationKey,
   defaultMessage,
   icon,
 }: {
-  key: string;
+  translationKey: string;
   defaultMessage: string;
   icon: React.ReactNode;
 }) => {
@@ -78,7 +78,7 @@ const Message = ({
       marginRight="2"
       fontSize="sm"
     >
-      {translate(key, defaultMessage)}
+      {translate(translationKey, defaultMessage)}
       <span style={{ marginLeft: "3px" }}>{icon}</span>
     </Text>
   );

packages/core/src/components/autoSaveIndicator/index.tsx

@@ -32,10 +32,24 @@ export type AutoSaveIndicatorProps<
 export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   status,
   elements: {
-    success = <Message key="autoSave.success" defaultMessage="saved" />,
-    error = <Message key="autoSave.error" defaultMessage="auto save failure" />,
-    loading = <Message key="autoSave.loading" defaultMessage="saving..." />,
-    idle = <Message key="autoSave.idle" defaultMessage="waiting for changes" />,
+    success = (
+      <Message translationKey="autoSave.success" defaultMessage="saved" />
+    ),
+    error = (
+      <Message
+        translationKey="autoSave.error"
+        defaultMessage="auto save failure"
+      />
+    ),
+    loading = (
+      <Message translationKey="autoSave.loading" defaultMessage="saving..." />
+    ),
+    idle = (
+      <Message
+        translationKey="autoSave.idle"
+        defaultMessage="waiting for changes"
+      />
+    ),
   } = {},
 }) => {
   switch (status) {
@@ -51,13 +65,13 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
 };
 
 const Message = ({
-  key,
+  translationKey,
   defaultMessage,
 }: {
-  key: string;
+  translationKey: string;
   defaultMessage: string;
 }) => {
   const translate = useTranslate();
 
-  return <span>{translate(key, defaultMessage)}</span>;
+  return <span>{translate(translationKey, defaultMessage)}</span>;
 };

packages/mantine/src/components/autoSaveIndicator/index.tsx

@@ -17,28 +17,28 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   elements: {
     success = (
       <Message
-        key="autoSave.success"
+        translationKey="autoSave.success"
         defaultMessage="saved"
         icon={<IconCircleCheck size="18px" />}
       />
     ),
     error = (
       <Message
-        key="autoSave.error"
+        translationKey="autoSave.error"
         defaultMessage="auto save failure"
         icon={<IconExclamationCircle size="18px" />}
       />
     ),
     loading = (
       <Message
-        key="autoSave.loading"
+        translationKey="autoSave.loading"
         defaultMessage="saving..."
         icon={<IconRefresh size="18px" />}
       />
     ),
     idle = (
       <Message
-        key="autoSave.idle"
+        translationKey="autoSave.idle"
         defaultMessage="waiting for changes"
         icon={<IconDots size="18px" />}
       />
@@ -59,19 +59,19 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
 };
 
 const Message = ({
-  key,
+  translationKey,
   defaultMessage,
   icon,
 }: {
-  key: string;
+  translationKey: string;
   defaultMessage: string;
   icon: React.ReactNode;
 }) => {
   const translate = useTranslate();
 
   return (
     <Text size="sm" display="flex" align="center" mr="2" color="gray">
-      {translate(key, defaultMessage)}
+      {translate(translationKey, defaultMessage)}
       <span style={{ position: "relative", top: "3px", marginLeft: "3px" }}>
         {icon}
       </span>

packages/mui/src/components/autoSaveIndicator/index.tsx

@@ -15,28 +15,28 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
   elements: {
     success = (
       <Message
-        key="autoSave.success"
+        translationKey="autoSave.success"
         defaultMessage="saved"
         icon={<TaskAltOutlinedIcon fontSize="small" />}
       />
     ),
     error = (
       <Message
-        key="autoSave.error"
+        translationKey="autoSave.error"
         defaultMessage="auto save failure"
         icon={<ErrorOutlineOutlinedIcon fontSize="small" />}
       />
     ),
     loading = (
       <Message
-        key="autoSave.loading"
+        translationKey="autoSave.loading"
         defaultMessage="saving..."
         icon={<SyncOutlinedIcon fontSize="small" />}
       />
     ),
     idle = (
       <Message
-        key="autoSave.idle"
+        translationKey="autoSave.idle"
         defaultMessage="waiting for changes"
         icon={<MoreHorizOutlinedIcon fontSize="small" />}
       />
@@ -57,11 +57,11 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
 };
 
 const Message = ({
-  key,
+  translationKey,
   defaultMessage,
   icon,
 }: {
-  key: string;
+  translationKey: string;
   defaultMessage: string;
   icon: React.ReactNode;
 }) => {
@@ -77,7 +77,7 @@ const Message = ({
       flexWrap="wrap"
       marginRight=".3rem"
     >
-      {translate(key, defaultMessage)}
+      {translate(translationKey, defaultMessage)}
       <span style={{ position: "relative", top: "3px", marginLeft: "3px" }}>
         {icon}
       </span>