Merge branch 'releases/december-2024' into next

.changeset/seven-ads-punch.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/mui": minor
+---
+
+Introduced containerBoxProps and childrenBoxProps props to ThemedLayoutV2 to allow for greater control over the layout - including styling.

.changeset/tidy-sloths-juggle.md

@@ -0,0 +1,22 @@
+---
+"@refinedev/nextjs-router": minor
+---
+
+**Feature:** Added support for Next.js 15. #6430
+
+To create a new example project with Next.js 15, run the following command:
+
+```bash
+npm create refine-app@latest -- --example with-nextjs-headless
+```
+
+You can find the source code in the [examples/with-nextjs-headless](https://github.com/refinedev/refine/tree/main/examples/with-nextjs-headless) directory.
+
+> 🚨 While `@refinedev/core` and `@refinedev/nextjs-router` do not introduce breaking changes, upgrading to Next.js 15 requires your project to be compatible with React 19. Please refer to the migration guides below:
+>
+> - [Next.js 15 Upgrade Guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15)
+> - [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
+>
+> 🚨 Additionally, if you're using `@refinedev/antd`, `@refinedev/chakra-ui`, `@refinedev/mantine`, or `@refinedev/mui`, make sure to check their compatibility with React 19.
+
+For known issues, migration guidance, and more details, please refer to issue [#6430](https://github.com/refinedev/refine/issues/6430).

.changeset/warm-plums-hammer.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/chakra-ui": minor
+"@refinedev/ui-types": minor
+"@refinedev/mantine": minor
+"@refinedev/antd": minor
+"@refinedev/mui": minor
+---
+
+Enhanced the ThemedSideV2 component with new functionality to support dynamic onSiderCollapsed handling. This allows better customization of sider collapse/expand events and improved responsiveness for mobile and desktop views. Added additional type definitions and ensured compatibility across all layout contexts. resolves #6508

.github/workflows/scripts/build-example-chunks.js

@@ -5,7 +5,7 @@ const path = require("path");
 const { execSync } = require("child_process");
 
 const EXAMPLES_DIR = "./examples";
-const ignoredRegexes = [/^monorepo-/, /^with-nx/];
+const ignoredRegexes = [/^monorepo-/, /^with-nx/, /with-nextjs-headless/];
 const CHUNK_COUNT = Number(process.env.CHUNKS ? process.env.CHUNKS : 1);
 const BASE_REF = process.env.BASE_REF ? process.env.BASE_REF : "main";
 const BUILD_ALL_EXAMPLES = process.env.BUILD_ALL_EXAMPLES === "true";

.syncpackrc

@@ -26,6 +26,11 @@
       "dependencyTypes": ["dev"],
       "packages": ["@refinedev/appwrite", "@refinedev/graphql"],
       "isIgnored": true
+    },
+    {
+      "dependencies": ["next", "react", "react-dom", "@types/react", "@types/react-dom"],
+      "packages": ["with-nextjs-headless"],
+      "isIgnored": true
     }
   ]
 }

documentation/docs/ui-integrations/ant-design/components/themed-layout/index.md

@@ -210,6 +210,7 @@ const App: React.FC = () => {
 | `meta`               | `Record<string,any>`                          | Meta data to use when creating routes for the menu items                          |
 | `fixed`              | `boolean`                                     | Whether the sider is fixed or not                                                 |
 | `activeItemDisabled` | `boolean`                                     | Whether clicking on an active sider item should reload the page                   |
+| `onSiderCollapsed`   | `(collapsed: boolean) => void`                | Callback function invoked when the sider collapses or expands                     |
 
 ```tsx
 type SiderRenderFunction = (props: {
@@ -236,6 +237,33 @@ This prop is used to set the initial collapsed state of the [`<ThemedSiderV2>`][
 </ThemedLayoutV2>
 ```
 
+### `onSiderCollapsed`
+
+Will be triggered when the [`<ThemedSiderV2>`][themed-sider] component's `collapsed` state changes.
+
+Can be used to persist collapsed state on the localstorage. Then you can use localStorage item to decide if sider should be collapsed initially or not.
+
+Here's an example of how to use the `onSiderCollapsed` prop:
+
+```tsx
+const MyLayout = () => {
+  const onSiderCollapse = (collapsed: boolean) => {
+    localStorage.setItem("siderCollapsed", collapsed);
+  };
+
+  const initialSiderCollapsed = Boolean(localStorage.getItem("siderCollapsed"));
+
+  return (
+    <ThemedLayoutV2
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapse}
+    >
+      {/* ... */}
+    </ThemedLayoutV2>
+  );
+};
+```
+
 ### Header
 
 In `<ThemedLayoutV2>`, the header section is rendered using the [`<ThemedHeaderV2>`][themed-header] component by default. It uses [`useGetIdentity`](/docs/authentication/hooks/use-get-identity) hook to display the user's name and avatar on the right side of the header. However, if desired, it's possible to replace the default [`<ThemedHeaderV2>`][themed-header] component by passing a custom component to the `Header` prop.

documentation/docs/ui-integrations/chakra-ui/components/themed-layout/index.md

@@ -219,6 +219,33 @@ This prop is used to set the initial collapsed state of the [`<ThemedSiderV2>`][
 </ThemedLayoutV2>
 ```
 
+### `onSiderCollapsed`
+
+Will be triggered when the [`<ThemedSiderV2>`][themed-sider] component's `collapsed` state changes.
+
+Can be used to persist collapsed state on the localstorage. Then you can use localStorage item to decide if sider should be collapsed initially or not.
+
+Here's an example of how to use the `onSiderCollapsed` prop:
+
+```tsx
+const MyLayout = () => {
+  const onSiderCollapse = (collapsed: boolean) => {
+    localStorage.setItem("siderCollapsed", collapsed);
+  };
+
+  const initialSiderCollapsed = Boolean(localStorage.getItem("siderCollapsed"));
+
+  return (
+    <ThemedLayoutV2
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapse}
+    >
+      {/* ... */}
+    </ThemedLayoutV2>
+  );
+};
+```
+
 ### Header
 
 In `<ThemedLayoutV2>`, the header section is rendered using the [`<ThemedHeader>`][themed-header] component by default. It uses the [`useGetIdentity`](/docs/authentication/hooks/use-get-identity) hook to display the user's name and avatar on the right side of the header. However, if desired, it's possible to replace the default [`<ThemedHeader>`][themed-header] component by passing a custom component to the `Header` prop.

documentation/docs/ui-integrations/mantine/components/themed-layout/index.md

@@ -221,6 +221,33 @@ This prop is used to set the initial collapsed state of the [`<ThemedSiderV2>`][
 </ThemedLayoutV2>
 ```
 
+### `onSiderCollapsed`
+
+Will be triggered when the [`<ThemedSiderV2>`][themed-sider] component's `collapsed` state changes.
+
+Can be used to persist collapsed state on the localstorage. Then you can use localStorage item to decide if sider should be collapsed initially or not.
+
+Here's an example of how to use the `onSiderCollapsed` prop:
+
+```tsx
+const MyLayout = () => {
+  const onSiderCollapse = (collapsed: boolean) => {
+    localStorage.setItem("siderCollapsed", collapsed);
+  };
+
+  const initialSiderCollapsed = Boolean(localStorage.getItem("siderCollapsed"));
+
+  return (
+    <ThemedLayoutV2
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapse}
+    >
+      {/* ... */}
+    </ThemedLayoutV2>
+  );
+};
+```
+
 ### Header
 
 In `<ThemedLayoutV2>`, the header section is rendered using the [`<ThemedHeaderV2>`][themed-header] component by default. It uses the [`useGetIdentity`](/docs/authentication/hooks/use-get-identity) hook to display the user's name and avatar on the right side of the header. However, if desired, it's possible to replace the default [`<ThemedHeaderV2>`][themed-header] component by passing a custom component to the `Header` prop.

documentation/docs/ui-integrations/material-ui/components/themed-layout/index.md

@@ -203,6 +203,36 @@ type SiderRenderFunction = (props: {
 }) => React.ReactNode;
 ```
 
+### childrenBoxProps
+
+This prop is used to customize the styles and attributes of the inner Box that contains the main layout content. It accepts all properties of BoxProps, including the `sx` property for inline styling.
+
+```tsx
+<ThemedLayoutV2
+  // highlight-next-line
+  childrenBoxProps={{
+    sx: { bgColor: "purple" },
+  }}
+>
+  {/* ... */}
+</ThemedLayoutV2>
+```
+
+### containerBoxProps
+
+This prop is used to customize the styles and attributes of the outer container Box wrapping the layout. It accepts all properties of BoxProps, including the `sx` property for inline styling
+
+```tsx
+<ThemedLayoutV2
+  // highlight-next-line
+  containerBoxProps={{
+    sx: { bgColor: "cyan" },
+  }}
+>
+  {/* ... */}
+</ThemedLayoutV2>
+```
+
 ### initialSiderCollapsed
 
 This prop is used to set the initial collapsed state of the [`<ThemedSiderV2>`][themed-sider] component. If it is `true`, It will be collapsed by default.
@@ -216,6 +246,33 @@ This prop is used to set the initial collapsed state of the [`<ThemedSiderV2>`][
 </ThemedLayoutV2>
 ```
 
+### `onSiderCollapsed`
+
+Will be triggered when the [`<ThemedSiderV2>`][themed-sider] component's `collapsed` state changes.
+
+Can be used to persist collapsed state on the localstorage. Then you can use localStorage item to decide if sider should be collapsed initially or not.
+
+Here's an example of how to use the `onSiderCollapsed` prop:
+
+```tsx
+const MyLayout = () => {
+  const onSiderCollapse = (collapsed: boolean) => {
+    localStorage.setItem("siderCollapsed", collapsed);
+  };
+
+  const initialSiderCollapsed = Boolean(localStorage.getItem("siderCollapsed"));
+
+  return (
+    <ThemedLayoutV2
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapse}
+    >
+      {/* ... */}
+    </ThemedLayoutV2>
+  );
+};
+```
+
 ### Header
 
 In `<ThemedLayoutV2>`, the header section is rendered using the [`<ThemedHeaderV2>`][themed-header] component by default. It uses [`useGetIdentity`](/docs/authentication/hooks/use-get-identity) hook to display the user's name and avatar on the right side of the header. However, if desired, it's possible to replace the default [`<ThemedHeaderV2>`][themed-header] component by passing a custom component to the `Header` prop.

examples/core-use-select/package.json

@@ -26,6 +26,8 @@
     "@refinedev/core": "^4.58.0",
     "@refinedev/react-router-v6": "^4.6.1",
     "@refinedev/simple-rest": "^5.0.9",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {

examples/with-nextjs-headless/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

examples/with-nextjs-headless/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-nextjs-headless/.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+strict-peer-dependencies=false

examples/with-nextjs-headless/README.MD

@@ -0,0 +1,43 @@
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
+</a>
+
+</br>
+</br>
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> |
+    <a href="https://refine.dev/blog/">Blog</a> |
+    <a href="https://refine.dev/docs/">Documentation</a>
+</div>
+</div>
+
+</br>
+</br>
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<br />
+<br />
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try this example on your local
+
+```bash
+npm create refine-app@latest -- --example with-nextjs-headless
+```
+
+## Try this example on CodeSandbox
+
+<br/>
+
+[![Open with-nextjs-headless example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/main/examples/with-nextjs-headless?view=preview&theme=dark&codemirror=1)

examples/with-nextjs-headless/next.config.mjs

@@ -0,0 +1,8 @@
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withNextIntl(nextConfig);

examples/with-nextjs-headless/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "with-nextjs-headless",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "refine build",
+    "dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev",
+    "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
+    "start": "refine start"
+  },
+  "dependencies": {
+    "@refinedev/cli": "^2.16.39",
+    "@refinedev/core": "^4.56.0",
+    "@refinedev/devtools": "^1.2.9",
+    "@refinedev/kbar": "^1.3.12",
+    "@refinedev/nextjs-router": "^6.1.0",
+    "@refinedev/react-hook-form": "^4.9.1",
+    "@refinedev/react-table": "^5.6.13",
+    "@refinedev/simple-rest": "^5.0.8",
+    "@tanstack/react-table": "^8.2.6",
+    "cross-env": "^7.0.3",
+    "js-cookie": "^3.0.1",
+    "next": "^15.0.4",
+    "next-intl": "^3.25.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.43.5"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
+    "@types/node": "^18.16.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.24.0",
+    "eslint-config-next": "15.0.3",
+    "typescript": "^5.4.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}