refinedev/refine @refinedev/antd@5.1.0

on GitHub

Minor Changes

• 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.

  syncWithLocation support in useDrawerForm and useModalForm hooks

  useDrawerForm and useModalForm hooks now support syncWithLocation prop. This prop can be used to sync the visibility state of them with the location via query params.

  You can pass a boolean or an object with key and syncId properties.

  • key is used to define the query param key. Default value is inferred from the resource and the action. For example posts-create for posts resource and create action.

  • syncId is used to include the id property in the query param key. Default value is false. This is useful for edit and clone actions.

  Removed props

  ignoreAccessControlProvider prop is removed from buttons.

• 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!
  All Ant Design components re-exported from @refinedev/antd have been removed. You should import them from antd package directly.

  If the package is not installed, you should install it with your package manager:

  npm install antd
  # or
  pnpm add antd
  # or
  yarn add antd

  After that, you can import components from antd package directly like below:

  -import { useTable, SaveButton, Button, Form, Input, Select } from "@refinedev/antd";
  
  +import { useTable, SaveButton } from "@refinedev/antd";
  +import { Button, Form, Input, Select } from "antd";

  
  

  Icons are also removed from @refinedev/antd. So, you should import icons from @ant-design/icons package directly.

  If the package is not installed, you should install it with your package manager:

  npm install @ant-design/icons
  # or
  pnpm add @ant-design/icons
  # or
  yarn add @ant-design/icons

  After that, you can import icons from @ant-design/icons package directly like below:

  -import { Icons } from "@refinedev/antd";
  -const { EditOutlined } = Icons;
  
  + import { EditOutlined } from "@ant-design/icons";

• Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
  Upgrade @ant-design/icons to ^5.0.1 for consistency.

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

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

  useCheckboxGroup({
  -    sort,
  +    sorters,
  })

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

  useSelect({
  -    sort,
  +    sorters,
  })

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

  useRadioGroup({
  -    sort,
  +    sorters,
  })

  • useImport's resourceName prop is now deprecated. Use resource prop instead.

  useImport({
  -    resourceName,
  +    resource,
  })

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

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

• 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!

  🪄 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/antd package. Use useMenu from @refinedev/core package instead.

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

• 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.

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

  useTable hook

  useTable 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.

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

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

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

    useTable({
    -    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.

    useTable({
    -    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.

    useTable({
    -    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,
    } = useTable();

  useSimpleList hook

  • Now useSimpleList hook will not accept all of <List> component properties So, you can give their props to <List> component directly.

    import { useSimpleList } from "@refinedev/antd";
    import { List } from "antd";
    
    const { listProps } = useSimpleList({
        resource: "orders",
        pagination: {
            pageSize: 6,
    -       simple: true,
        },
    });
    
    <List
        {...listProps}
    +   pagination={{
    +     ...listProps.pagination,
    +     simple: true,
    +   }}
        ... // other props
    />

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

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

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

Patch Changes