release: november 2024 (#6445)

- chore(chakra-ui): fix broken tsdoc links #6429 
- feat: export useInvalidateAuthStore hook #6405 Resolves #6341  
- feat(core): add `<MetaContext />` #6435 
- chore(antd): update @ant-design/icons and @ant-design/pro-layout dependencies #6369 Resolves #6363, #5931 
- feat(core,antd,mui,mantine,chakra-ui): add new prop to auth-page to p… #6432  Resolves #6431 
- fix(core): link component overrides to instead of go #6462 Resolves #6461 
- fix(react-hook-form): onChange handler autoSave check in useForm #6459 Resolves #6458 
- fix(core): link component ref type is too restrictive (#6464) Resolves #6463

.changeset/beige-cougars-add.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/chakra-ui": patch
+---
+
+chore(tsdoc): fix broken external documentation link
+
+In TSDoc description of the `<EmailField />` component, link to the official documentation of Chakra UI was broken and couldn't be opened. This PR fixes the link by updating the URL to the correct one.

.changeset/breezy-wolves-nail.md

@@ -0,0 +1,45 @@
+---
+"@refinedev/chakra-ui": minor
+"@refinedev/mantine": minor
+"@refinedev/antd": minor
+"@refinedev/core": minor
+"@refinedev/mui": minor
+---
+
+feat: added new prop called `mutationVariables` to `<AuthPage />`. #6431
+From now on, you can pass additional parameters to the `authProvider` methods using the `mutationVariables` prop of the `<AuthPage />` component.
+
+```tsx
+import { AuthPage } from "@refinedev/antd"; // or "@refinedev/chakra-ui", "@refinedev/mantine", "@refinedev/mui"
+
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
+[Resolves #6431](https://github.com/refinedev/refine/issues/6431)

.changeset/early-pets-march.md

@@ -0,0 +1,15 @@
+---
+"@refinedev/antd": minor
+---
+
+chore: update `@ant-design/icons` and `@ant-design/pro-layout` versions
+
+Updated previously pinned versions of `@ant-design/icons` from `5.0.1` and `@ant-design/pro-layout` from `7.17.12` to latest versions. This minor update resolves the previous issues with `React@18` types and conflicting type ranges with `@ant-design/pro-layout` package.
+
+After `@ant-design/icons` version `5.4.0` build issues and type issues are resolved. Following this release `@ant-design/pro-layout` also updated its dependency range to match the latest `@ant-design/icons` version.
+
+Previously `@ant-design/icons` were pinned to `5.0.1` and recommended to pin in projects as well. After this update, you may also need to update the `@ant-design/icons` version in your project to match the latest version. (A range above `^5.5.1` is required to match `@refinedev/antd`).
+
+[Resolves #6363](https://github.com/refinedev/refine/issues/6363)
+[Resolves #5931 - previously resolved by #5934](https://github.com/refinedev/refine/issues/5931)
+[Accompanies #6354 - `@ant-design/pro-layout` also depends on `express` dependency and updated its version in the latest release](https://github.com/refinedev/refine/pull/6354)

.changeset/eight-drinks-compare.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/react-hook-form": patch
+---
+
+fix: onChange handler `autoSave` check in `useForm`
+
+Autosave can now be explicitly disabled.
+
+Resolves #6458

.changeset/hip-spies-end.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/inferencer": patch
+---
+
+chore: update `@ant-design/icons` version to match `@refinedev/antd`.
+
+This is a patch release to update the `@ant-design/icons` version to match the `@refinedev/antd` version. Previously `@ant-design/icons` were pinned to `5.0.1` version to avoid conflicts with `React@18` and `@ant-design/pro-layout` packages. After `5.4.0` these issues are resolved and we can safely update the version to latest range.

.changeset/red-cups-decide.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/core": minor
+---
+
+feat: exported useInvalidateAuthStore hook from auth hooks
+
+Now you can invalide the users identity state and force a react query refresh using this hook
+
+Resolves [#6341](https://github.com/refinedev/refine/issues/6341)

.changeset/ten-radios-rush.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/core": minor
+---
+
+feat: Added `MetaContext` to share data between components, providers, and hooks.
+
+> 🚨 Designed for internal use only.

.changeset/three-cameras-hope.md

@@ -0,0 +1,17 @@
+---
+"@refinedev/core": patch
+---
+
+fix: Added more flexibility to the [`<Link />`](https://refine.dev/docs/routing/components/link/) component's `ref` type by changing it from `HTMLAnchorElement` to `Element`.
+From now on, we can pass any type of `ref` to the [`<Link />`](https://refine.dev/docs/routing/components/link/) component.
+
+```tsx
+// Before fix - Only worked with HTMLAnchorElement
+const ref = useRef<HTMLAnchorElement>(null);
+
+// After fix - Works with any Element type
+const ref = useRef<HTMLDivElement>(null);
+const ref = useRef<HTMLSpanElement>(null);
+```
+
+Resolves [#6463](https://github.com/refinedev/refine/issues/6463)

.changeset/unlucky-spoons-shout.md

@@ -0,0 +1,16 @@
+---
+"@refinedev/core": patch
+---
+
+fix: Priority logic between `to` and `go` props in [`Link`](https://refine.dev/docs/routing/components/link/) component.
+From now on, the `to` prop has priority over the `go` prop. If both are passed, the `to` prop will be used.
+
+```tsx
+// Before fix - go would override to
+<Link to="/posts" go={{ resource: "categories" }} />
+
+// After fix - to overrides go
+<Link to="/posts" go={{ resource: "categories" }} />
+```
+
+Resolves [#6461](https://github.com/refinedev/refine/issues/6461)

documentation/docs/authentication/components/auth-page/index.md

@@ -748,6 +748,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

documentation/docs/routing/components/link/index.md

@@ -1,5 +1,6 @@
 ---
 title: <Link />
+source: packages/core/src/components/link/index.tsx
 ---
 
 `<Link />` is a component that is used to navigate to different pages in your application.

documentation/docs/ui-integrations/ant-design/components/auth-page/index.md

@@ -892,6 +892,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## FAQ
 
 ### How can I remove the default title and logo ?

documentation/docs/ui-integrations/chakra-ui/components/auth-page/index.md

@@ -878,6 +878,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

documentation/docs/ui-integrations/mantine/components/auth-page/index.md

@@ -911,6 +911,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

documentation/docs/ui-integrations/material-ui/components/auth-page/index.md

@@ -967,6 +967,43 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+import { AuthPage } from "@refinedev/mui";
+
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

examples/app-crm-minimal/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
-    "@ant-design/icons": "5.0.1",
+    "@ant-design/icons": "^5.5.1",
     "@ant-design/plots": "^1.2.5",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",

examples/app-crm-minimal/src/components/icon/TextIcon.tsx

@@ -28,6 +28,5 @@ export const TextIconSvg = () => (
 );
 
 export const TextIcon = (props: Partial<CustomIconComponentProps>) => (
-  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
   <Icon component={TextIconSvg} {...props} />
 );

examples/app-crm-minimal/src/components/layout/account-settings/index.tsx

@@ -86,7 +86,6 @@ export const AccountSettings = ({ opened, setOpened, userId }: Props) => {
         <Text strong>Account Settings</Text>
         <Button
           type="text"
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<CloseOutlined />}
           onClick={() => closeModal()}
         />

examples/app-crm-minimal/src/components/layout/current-user/index.tsx

@@ -41,7 +41,6 @@ export const CurrentUser = () => {
       >
         <Button
           style={{ textAlign: "left" }}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<SettingOutlined />}
           type="text"
           block