refinedev/refine @refinedev/mui@4.1.0

on GitHub

Minor Changes

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  Updated buttons with resource property. resourceNameOrRouteName is now deprecated but kept working until next major version.

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

  🪄 Migrating your project automatically with refine-codemod ✨

  @refinedev/codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your project from 3.x.x to 4.x.x.

  Just cd into root folder of your project (where package.json is contained) and run this command:

  npx @refinedev/codemod refine3-to-refine4

  And it's done. Now your project uses refine@4.x.x.

  📝 Changelog

  Deprecated useMenu removed from @refinedev/mui package. Use useMenu from @refinedev/core package instead.

  - import { useMenu } from "@refinedev/mui";
  + import { useMenu } from "@refinedev/core";

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  meta prop is added. To ensure backward compatibility, metaData prop will be used if meta prop is not provided.

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  Updated the components to match the changes in routing system of @refinedev/core.

  meta property in components

  This includes meta props in buttons and Sider component. meta property can be used to pass additional parameters to the navigation paths.

  For a posts resource definition like this:

  <Refine
      resources={[
          {
              name: "posts",
              list: "/posts",
              show: "/:authorId/posts/:id",
          }
      ]}
  >

  You can pass authorId to the ShowButton component like this:

  <ShowButton resource="posts" id="1" meta={{ authorId: 123 }}>

  This will navigate to /123/posts/1 path.

  Removed props

  • ignoreAccessControlProvider prop is removed from buttons.
  • cardProps, cardHeaderProps, cardContentProps, cardActionsProps and actionButtons props are removed from CRUD component.

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  All Material UI components re-exported from @refinedev/mui have been removed. You should import them from Material UI packages directly.

  If the packages are not installed, you can install them with your package manager:

  You don't have to install all of these packages below. Only install the packages you use.

  npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/x-data-grid
  # or
  pnpm add @mui/material @emotion/react @emotion/styled @mui/lab @mui/x-data-grid
  # or
  yarn add @mui/material @emotion/react @emotion/styled @mui/lab @mui/x-data-grid

  After that, you can import them from related packages directly.

  - import {
  -    Box,
  -    NumberField,
  -    Stack,
  -    Typography,
  -    ThemeProvider,
  -    DataGrid
  -    LoadingButton,
  - } from "@refinedev/mui";
  
  + import { NumberField } from "@refinedev/mui";
  + import { ThemeProvider } from "@mui/material/styles";
  + import { Box, Stack, Typography } from "@mui/material";
  + import { DataGrid } from "@mui/x-data-grid";
  + import { LoadingButton } from "@mui/lab";

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

  • <ReadyPage> isnow deprecated.
  • Created a <WelcomePage> component to welcome users.

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

  • useAutocomplete's sort prop is now deprecated. Use sorters prop instead.

  useAutocomplete({
  -    sort,
  +    sorters,
  })

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  Added legacy auth provider and new auth provider support to all components and hooks.

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  useDataGrid return values and properties are updated.

  • initialCurrent and initialPageSize props are now deprecated. Use pagination prop instead.

  • To ensure backward compatibility, initialCurrent and initialPageSize props will work as before.

    useDataGrid({
    -    initialCurrent,
    -    initialPageSize,
    +    pagination: {
    +        current,
    +        pageSize,
    +    },
    })

  • hasPagination prop is now deprecated. Use pagination.mode instead.

  • To ensure backward compatibility, hasPagination prop will work as before.

    useDataGrid({
    -    hasPagination,
    +    pagination: {
    +        mode: "off" | "server" | "client",
    +    },
    })

  • initialSorter and permanentSorter props are now deprecated. Use sorters.initial and sorters.permanent instead.

  • To ensure backward compatibility, initialSorter and permanentSorter props will work as before.

    useDataGrid({
    -    initialSorter,
    -    permanentSorter,
    +    sorters: {
    +        initial,
    +        permanent,
    +    },
    })

  • initialFilter, permanentFilter, and defaultSetFilterBehavior props are now deprecated. Use filters.initial, filters.permanent, and filters.defaultBehavior instead.

  • To ensure backward compatibility, initialFilter, permanentFilter, and defaultSetFilterBehavior props will work as before.

    useDataGrid({
    -    initialFilter,
    -    permanentFilter,
    -    defaultSetFilterBehavior,
    +    filters: {
    +        initial,
    +        permanent,
    +        defaultBehavior,
    +    },
    })

  • sorter and setSorter return values are now deprecated. Use sorters and setSorters instead.

  • To ensure backward compatibility, sorter and setSorter return values will work as before.

    const {
    -   sorter,
    +   sorters,
    -   setSorter,
    +   setSorters,
    } = useDataGrid();

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  Moving to the @refinedev scope 🎉🎉

  Moved to the @refinedev scope and updated our packages to use the new scope. From now on, all packages will be published under the @refinedev scope with their new names.

  Now, we're also removing the refine prefix from all packages. So, the @pankod/refine-core package is now @refinedev/core, @pankod/refine-antd is now @refinedev/antd, and so on.

Patch Changes