UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
Files
4b5cbf8bc727856444f52ad4ce4fc5e63fdc2a09
openpanel/packages/mui/CHANGELOG.md
Stefan Pejcic 09f9f9502d packages
2024-11-07 19:03:37 +01:00

146 KiB
Raw Blame History

@refinedev/mui

5.22.0

Minor Changes

  • #6445 4ff4335274d5689ec62127312695b76d692a125a Thanks @alicanerdurmaz! - 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.

    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

Patch Changes

5.21.0

Minor Changes

  • #6271 2b89fbd136b2134f22d38dff8d4a7f24e57e73db Thanks @Anonymous961! - feat(mui): added loading spinner to <Create />, <Edit /> and <Show /> components

    This change introduces a loading spinner to the <Create />, <Edit /> and <Show /> components in the @refinedev/mui package. The spinner provides a visual indication that data is being loaded, improving the user experience bym giving clear feedback during loading states.

    Resolves #5668

5.20.0

Minor Changes

  • #6180 292cebc5a70f19400793292b79d1400fec114591 Thanks @alicanerdurmaz! - feat: useAutocomplete's queryResult and defaultValueQueryResult is deprecated, use query and defaultValueQuery instead. #6179

    import { useAutocomplete } from '@refinedev/mui';

- const { queryResult, defaultValueQueryResult } = useAutocomplete();
+ const { query, defaultValueQuery } = useAutocomplete();

    ✨ You can use @refinedev/codemod to automatically migrate your codebase. Simply run the following command in your project's root directory:

    npx @refinedev/codemod@latest rename-query-and-mutation-result

  • #6161 ff975374efcc05220be4411218c2daf7c19b8995 Thanks @ritute! - feat(react-hook-form): update version constraint from ^7.30.0 to ^7.43.5

    Update react-hook-form version to address runtime subscribe error

    Fixes #6139

  • #6172 4967a51944c139d102fcfc04ada5a42c725ed7c2 Thanks @alicanerdurmaz! - feat: useDataGrid's tableQueryResult is deprecated, use tableQuery instead. #6169

    import { useDataGrid } from '@refinedev/mui';

- const { tableQueryResult } = useDataGrid();
+ const { tableQuery } = useDataGrid();

    ✨ You can use @refinedev/codemod to automatically migrate your codebase. Simply run the following command in your project's root directory:

    npx @refinedev/codemod@latest rename-query-and-mutation-result

Patch Changes

  • #6144 f3e06e8ea3cd65bfe8a8eb0e347aa45b93015764 Thanks @aliemir! - fix(mui): horizontal scroll is broken in

    Due to the changes in CSS rendering in latest Google Chrome updates, <DataGrid /> components are not properly sized when used inside <ThemedLayoutV2 /> component. The overflow: clip property in the layout content is causing either miscalculations on the data grid width or causing an overflow on the container and overlapping with the sidebar.

    This change replaces the overflow: clip property with min-height and min-width properties to ensure the layout content is properly rendered and responsive to the content inside it.

    Resolves #6077

  • #6151 4b842703dbeb5306fef5c804bc5366e52fa830a0 Thanks @Sergio16T! - fix(use-data-grid): incompatible types when using data-grid-pro

    useDataGrid overide DataGridPropsType onFilterModelChange.

    Fixes #5997

  • #6199 5a8e94aa4afe0faf3ea1de93a4b00e0b44dd1ece Thanks @aliemir! - fix(auth-page): fix wrong translation keys in type="register" and type="forgotPassword"

    In type="forgotPassword":

    • "pages.register.buttons.haveAccount" is replaced with "pages.forgotPassword.buttons.haveAccount"
    • "pages.login.signin" is replaced with "pages.forgotPassword.signin"

    In type="register":

    • "pages.login.divider" is replaced with "pages.register.divider"
    • "pages.login.buttons.haveAccount" is replaced with "pages.register.buttons.haveAccount"
    • "pages.login.signin" is replaced with "pages.register.signin"

    Wrong keys are kept as fallbacks in case the new keys are not found in the translation file. If you are using those keys in your project, make sure to update them accordingly. Fallback keys will be removed in future releases.

    Resolves #5816

  • #6217 aefd093cfd85096fdac36cd25073d14dfb12094f Thanks @webscriptmaster! - fix(date-field): falsy values should render empty string

    Previously, <DateField value={undefined} /> was rendering the current date. After this change, it will render empty string if a falsy value is provided.

    Resolves #6216

  • Updated dependencies [ff975374efcc05220be4411218c2daf7c19b8995, a93eed09796b780557f6fecee0c2f1e7b4f9e93b]:

    • @refinedev/react-hook-form@4.9.0

5.19.0

Minor Changes

Patch Changes

  • #6021 55cd0662b1e3ff8f8410eba812e80130afe75d14 Thanks @JayBhensdadia! - fix: ensure Sider component handles various resource name formats correctly

    Updated Sider component to correctly handle lowercase and camelcased resource names, enhancing usability and functionality.

    Fixes #6004

  • #6064 b516c18b828ba8823561d0fefc4afe02b45ce332 Thanks @aliemir! - fix(auto-save-indicator): replace reserved key prop with translationKey in 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

5.17.0

Minor Changes

  • 6bd14228760d3e1e205ea9248e427f9afa2ec046 Thanks @BatuhanW! - feat: use global values by default for app title and app icon

    Now <Refine /> component accepts options.title prop that can be used to set app icon and app name globally. For <ThemedLayoutV2 /> and <AuthPage /> components, these values will be used by default. While users can use options.title to pass global values for app icon and app name, option to override through <ThemedTitleV2 /> component is still available for users to override these values in specific use cases.

    import { Refine } from "@refinedev/core";

const MyIcon = () => <svg>{/* ... */}</svg>;

const App = () => {
  return (
    <Refine
      options={{
        title: {
          icon: <MyIcon />,
          text: "Refine App",
        },
      }}
    >
      {/* ... */}
    </Refine>
  );
};

    Then, <ThemedLayoutV2 /> and <AuthPage /> components will display <MyIcon /> and "Refine App" as app icon and app name respectively.

Patch Changes

5.16.0

Minor Changes

  • #5945 903ea231538b00ce02ddc9394c72848ec1e90772 Thanks @aliemir! - feat: use global values by default for app title and app icon

    Now <Refine /> component accepts options.title prop that can be used to set app icon and app name globally. For <ThemedLayoutV2 /> and <AuthPage /> components, these values will be used by default. While users can use options.title to pass global values for app icon and app name, option to override through <ThemedTitleV2 /> component is still available for users to override these values in specific use cases.

    import { Refine } from "@refinedev/core";

const MyIcon = () => <svg>{/* ... */}</svg>;

const App = () => {
  return (
    <Refine
      options={{
        title: {
          icon: <MyIcon />,
          text: "Refine App",
        },
      }}
    >
      {/* ... */}
    </Refine>
  );
};

    Then, <ThemedLayoutV2 /> and <AuthPage /> components will display <MyIcon /> and "Refine App" as app icon and app name respectively.

Patch Changes

5.15.1

Patch Changes

  • #5928 db9756e7908 Thanks @aliemir! - fix: type errors on typescript <5

    Due to the changes in #5881, typescript users below version 5 are facing type errors. This PR fixes the type errors by updating the file extensions required by the d.mts declaration files to provide a compatible declarations for both typescript 4 and 5 users.

  • Updated dependencies [db9756e7908]:

5.15.0

Minor Changes

  • #5868 a82ef6afc15 Thanks @Ac-Srikanth! - feat: add message prop for required auth input fields for the above packages.

    Now you can provide custom required messages with translate feature for all auth input fields(Login, register, forget password,update password).

    Resolves #5855

Patch Changes

  • #5876 4940b6106b2 Thanks @Yash-271120! - feat: add ability to customize anchor origin from snackbar provider

    Previously, useNotificationProvider used hardcoded anchorOrigin and disableWindowBlurListener values, preventing users to customize these values. This change moves these values to <RefineSnackbarProvider /> as default props to allow users to customize them when needed.

    Resolves #5847

  • #5881 ba719f6ea26 Thanks @aliemir! - fix: declaration files in node10, node16 and nodenext module resolutions

  • Updated dependencies [ba719f6ea26]:

5.14.6

Patch Changes

  • #5737 4e8188a6652 Thanks @aliemir! - chore: updated content of README.md to include installation, usage and scaffolding instructions.

  • #5765 0c197d82393 Thanks @aliemir! - fix: dayjs imports in ESM bundles

    dayjs imports in ESM bundles were not being correctly resolved, this has been fixed by adding an esbuild plugin to replace the imports with the correct path for ESM bundles.

  • #5765 0c197d82393 Thanks @aliemir! - Fixed the lodash-es imports for ESM builds to access the exports properly.

  • #5765 0c197d82393 Thanks @aliemir! - refactor: package bundles and package.json configuration for exports

    Previously, Refine packages had exported ESM and CJS bundles with same .js extension and same types for both with .d.ts extensions. This was causing issues with bundlers and compilers to pick up the wrong files for the wrong environment. Now we're outputting ESM bundles with .mjs extension and CJS bundles with .cjs extension. Also types are now exported with both .d.mts and .d.cts extensions.

    In older versions ESM and CJS outputs of some packages were using wrong imports/requires to dependencies causing errors in some environments. This will be fixed since now we're also enforcing the module type with extensions.

    Above mentioned changes also supported with changes in package.json files of the packages to support the new extensions and types. All Refine packages now include exports fields in their configuration to make sure the correct bundle is picked up by the bundlers and compilers.

    In context of @refinedev/mui these changes may cause unexpected issues due to misconfigured bundlers/compilers in some environments.

    In projects using react-scripts, you may have issues with import statements in the @refinedev/mui's ESM bundle, this should be resolved by customizing the webpack configuration of the project by allowing imports without fully specifying the extensions.

    An example configuration with @craco/craco is as follows:

    // craco.config.js
module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /.m?js$/,
            resolve: {
              fullySpecified: false,
            },
          },
        ],
      },
    },
  },
};

    In Remix projects using @refinedev/mui you may encounter issues due to ESM issues from Material UI packages, please refer to this issue if you have any problems related to this: https://github.com/mui/material-ui/issues/39765

    If the error is related with @refinedev/mui specifically, setting serverModuleFormat to "cjs" will help getting rid of the related errors.

  • #5754 56ed144a0f5 Thanks @alicanerdurmaz! - chore: TypeScript upgraded to v5.x.x. #5752

  • #5765 0c197d82393 Thanks @aliemir! - fix: broken eslint plugin for removing test ids from components

    Eslint plugin to remove test ids from components was broken and might miss some test ids to be included in the bundles.

  • #5765 0c197d82393 Thanks @aliemir! - fix: @mui/icons-material imports from ESM builds.

    @mui/icons-material imports from ESM builds were not being correctly resolved, this has been fixed by adding an esbuild plugin to replace the imports with the correct path for ESM bundles.

  • #5808 10ba9c34490 Thanks @aliemir! - refactor: moved internal logic of buttons to respective hooks from @refinedev/core

    We've moved the internal logic of buttons to their respective hooks in the @refinedev/core package to ensure consistency and reduce duplication. This change will make it easier to manage and maintain the buttons across different UI integrations of Refine. This will also benefit the users who want to customize the buttons via swizzle option or create their own buttons withouth having to duplicate the logic.

  • Updated dependencies [56ed144a0f5, 0c197d82393, 0c197d82393, 56ed144a0f5, 38f129f40ee, 404b2ef5e1b]:

5.14.5

Patch Changes

  • #5695 79865affa1c Thanks @BatuhanW! - chore: apply biome format and fix lint errors.

  • #5725 b216eb35458 Thanks @beg1c! - fix: issue with dropdown button on ThemedSiderV2 #5724

    There was unexpected margin on dropdown button at ThemedSiderV2.

    Fixes #5724

  • Updated dependencies [79865affa1c]:

    • @refinedev/react-hook-form@4.8.15

5.14.4

Patch Changes

5.14.3

Patch Changes

5.14.2

Patch Changes

5.14.1

Patch Changes

5.14.0

Minor Changes

  • #5307 f8e407f850 Thanks @jackprogramsjp! - feat: added hideForm props for LoginPage and RegisterPage for AuthPage feature.

    Now with the hideForm props feature, you can be able to hide the forms (like email/password) to only show the OAuth providers. This avoids having to make your own entire AuthPage.

Patch Changes

5.13.18

Patch Changes

  • #5259 eac3df87ffb Thanks @aliemir! - Updated <AutoSaveIndicator /> component to extend the <AutoSaveIndicator /> from @refinedev/core with custom elements and render appropriate element based on the state.

5.13.17

Patch Changes

  • #5117 0b050f97b55 Thanks @BatuhanW! - fix: map missing operators for useDataGrid hook.

    • number field, added isAnyOf operator.
    • string field, added startsWith, endsWith and isAnyOf operators.

    fix: isNull and isNotNull doesn't trigger request.

    When filter has a value "", it's ignored and doesn't trigger request. Previously isNull and isNotNull operators weren't handled correctly and had value "" by default. With this change, these operators has true value, so they won't be ignored.

5.13.16

Patch Changes

  • #5117 0b050f97b55 Thanks @BatuhanW! - fix: map missing operators for useDataGrid hook.

    • number field, added isAnyOf operator.
    • string field, added startsWith, endsWith and isAnyOf operators.

    fix: isNull and isNotNull doesn't trigger request.

    When filter has a value "", it's ignored and doesn't trigger request. Previously isNull and isNotNull operators weren't handled correctly and had value "" by default. With this change, these operators has true value, so they won't be ignored.

5.13.15

Patch Changes

  • #5026 a605e4cd318 Thanks @alicanerdurmaz! - feat: deprecated <ThemedLayout /> and <Layout /> components removed from swizzle. From now on, users can swizzle <ThemedLayoutV2 /> component instead.

    feat: swizzled <ThemedLayoutV2 /> component destination changed to src/components/layout/ from src/components/themedLayout.

  • #4974 a7b32dbf137 Thanks @IkumaTadokoro! - fix: add missing DataGrid operator conversion cases

    MUI defines the operator for each column types in here. However, there were not enough conversion cases for the following operators, so this changes added them to the mapping.

    • isAnyof: used in Numeric, SingleSelect, String
    • contains: used in String,
    • startsWith: used in String
    • endsWith: used in String

5.13.14

Patch Changes

  • #4974 a7b32dbf137 Thanks @IkumaTadokoro! - fix: add missing DataGrid operator conversion cases

    MUI defines the operator for each column types in here. However, there were not enough conversion cases for the following operators, so this changes added them to the mapping.

    • isAnyof: used in Numeric, SingleSelect, String
    • contains: used in String,
    • startsWith: used in String
    • endsWith: used in String

5.13.13

Patch Changes

  • #5026 a605e4cd318 Thanks @alicanerdurmaz! - feat: deprecated <ThemedLayout /> and <Layout /> components removed from swizzle. From now on, users can swizzle <ThemedLayoutV2 /> component instead.

    feat: swizzled <ThemedLayoutV2 /> component destination changed to src/components/layout/ from src/components/themedLayout.

5.13.12

Patch Changes

  • #5022 80513a4e42f Thanks @BatuhanW! - chore: update README.md

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.

  • Updated dependencies [80513a4e42f]:

    • @refinedev/react-hook-form@4.8.10

5.13.11

Patch Changes

  • #5022 80513a4e42f Thanks @BatuhanW! - chore: update README.md

    • fix grammar errors.
    • make all README.md files consistent.
    • add code example code snippets.

  • Updated dependencies [80513a4e42f]:

    • @refinedev/react-hook-form@4.8.9

5.13.10

Patch Changes

5.13.9

Patch Changes

5.13.8

Patch Changes

5.13.7

Patch Changes

5.13.6

Patch Changes

5.13.5

Patch Changes

5.13.4

Patch Changes

5.13.3

Patch Changes

5.13.2

Patch Changes

5.13.1

Patch Changes

5.13.0

Minor Changes

  • #4775 3052fb22449 Thanks @alicanerdurmaz! - fixed: <RefreshButton /> does not refresh content #4618. From now, <RefreshButton /> uses useInvalidate hook to refresh data instead of useOne.

Patch Changes

5.12.0

Minor Changes

  • #4775 3052fb22449 Thanks @alicanerdurmaz! - fixed: <RefreshButton /> does not refresh content #4618. From now, <RefreshButton /> uses useInvalidate hook to refresh data instead of useOne.

Patch Changes

5.11.2

Patch Changes

5.11.1

Patch Changes

5.11.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

Patch Changes

  • Updated dependencies [026ccf34356]:
    • @refinedev/react-hook-form@4.8.0

5.10.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

Patch Changes

  • Updated dependencies [026ccf34356]:
    • @refinedev/react-hook-form@4.7.0

5.9.0

Minor Changes

  • #4591 f8891ead2bd Thanks @yildirayunlu! - feat: autoSave feature for Edit. useForm, useDrawerForm, useModalForm, useStepsForm hooks now accept autoSave object. enabled is a boolean value and debounce is a number value in milliseconds. debounce is optional and default value is 1000.

    const { autoSaveProps } = useForm({
    refineCoreProps: {
        autoSave: {
            enabled: true,
            debounce: 2000, // not required, default is 1000
        },
    }
});

return (
    <Edit
        saveButtonProps={saveButtonProps}
        // pass autoSaveProps to Edit component
        autoSaveProps={autoSaveProps}
    >
        // form fields
    </Edit>
);

    feat: Add <AutoSaveIndicator> component. It comes automatically when autoSaveProps is given to the Edit page. However, this component can be used to position it in a different place.

    import { AutoSaveIndicator } from "@refinedev/mui";
const { autoSaveProps } = useForm({
    refineCoreProps: {
        autoSave: {
            enabled: true,
            debounce: 2000, // not required, default is 1000
        },
    }
});

return (
    <div>
        <AutoSaveIndicator {...autoSaveProps}>
    </div>
);

Patch Changes

5.8.0

Minor Changes

  • #4591 f8891ead2bd Thanks @yildirayunlu! - feat: autoSave feature for Edit. useForm, useDrawerForm, useModalForm, useStepsForm hooks now accept autoSave object. enabled is a boolean value and debounce is a number value in milliseconds. debounce is optional and default value is 1000.

    const { autoSaveProps } = useForm({
    refineCoreProps: {
        autoSave: {
            enabled: true,
            debounce: 2000, // not required, default is 1000
        },
    }
});

return (
    <Edit
        saveButtonProps={saveButtonProps}
        // pass autoSaveProps to Edit component
        autoSaveProps={autoSaveProps}
    >
        // form fields
    </Edit>
);

    feat: Add <AutoSaveIndicator> component. It comes automatically when autoSaveProps is given to the Edit page. However, this component can be used to position it in a different place.

    import { AutoSaveIndicator } from "@refinedev/mui";
const { autoSaveProps } = useForm({
    refineCoreProps: {
        autoSave: {
            enabled: true,
            debounce: 2000, // not required, default is 1000
        },
    }
});

return (
    <div>
        <AutoSaveIndicator {...autoSaveProps}>
    </div>
);

Patch Changes

5.7.0

Minor Changes

  • #4502 c7872ca621f Thanks @Mr0nline! - feat: ability to tweak active sider items navigation

    Visiting active sider items triggers page reloads due to them being links. We can now provide activeItemDisabled prop to disable such reloads.

Patch Changes

5.6.0

Minor Changes

  • #4502 c7872ca621f Thanks @Mr0nline! - feat: ability to tweak active sider items navigation

    Visiting active sider items triggers page reloads due to them being links. We can now provide activeItemDisabled prop to disable such reloads.

Patch Changes

5.5.0

Minor Changes

Patch Changes

  • #4557 781050e56a4 Thanks @yildirayunlu! - fix: Button text color on RefineThemes

  • #4527 ceadcd29fc9 Thanks @salihozdemir! - fix: prioritization of forgotten identifier

    If identifier is provided, it will be used instead of name.

    import { DeleteButton } from "@refinedev/mui";

<DeleteButton resource="identifier-value" recordItemId="123" />;

    fix: use translate keys with identifier

    Previously, the translate keys were generated using resource name. This caused issues when you had multiple resource usage with the same name. Now the translate keys are generated using identifier if it's present.

  • Updated dependencies [9a895ea39dc, ceadcd29fc9]:

    • @refinedev/react-hook-form@4.4.2

5.4.0

Minor Changes

Patch Changes

  • #4557 781050e56a4 Thanks @yildirayunlu! - fix: Button text color on RefineThemes

  • #4527 ceadcd29fc9 Thanks @salihozdemir! - fix: prioritization of forgotten identifier

    If identifier is provided, it will be used instead of name.

    import { DeleteButton } from "@refinedev/mui";

<DeleteButton resource="identifier-value" recordItemId="123" />;

    fix: use translate keys with identifier

    Previously, the translate keys were generated using resource name. This caused issues when you had multiple resource usage with the same name. Now the translate keys are generated using identifier if it's present.

  • Updated dependencies [9a895ea39dc, ceadcd29fc9]:

    • @refinedev/react-hook-form@4.4.1

5.3.0

Minor Changes

  • #4449 cc84d61bc5c Thanks @BatuhanW! - feat: updated Create, List, Show, Edit, Delete, Clone buttons to respect new global accessControlProvider configuration.

    fix: Delete button's text wasn't rendered as reason field of accessControlProvider.

    Given the following can method:

    const accessControlProvider: IAccessControlContext = {
  can: async (): Promise<CanReturnType> => {
    return { can: false, reason: "Access Denied!" };
  },
};

    If user is unauthorized, Delete button's text should be Access Denied! instead of default Delete.

    This is the default behaviour for Create, List, Show, Edit, Delete, Clone buttons already.

5.2.0

Minor Changes

  • #4449 cc84d61bc5c Thanks @BatuhanW! - feat: updated Create, List, Show, Edit, Delete, Clone buttons to respect new global accessControlProvider configuration.

    fix: Delete button's text wasn't rendered as reason field of accessControlProvider.

    Given the following can method:

    const accessControlProvider: IAccessControlContext = {
  can: async (): Promise<CanReturnType> => {
    return { can: false, reason: "Access Denied!" };
  },
};

    If user is unauthorized, Delete button's text should be Access Denied! instead of default Delete.

    This is the default behaviour for Create, List, Show, Edit, Delete, Clone buttons already.

5.1.0

Minor Changes

  • #4454 4bae8add99f Thanks @aliemir! - Updated the @mui/x-data-grid dependency to the latest version (v6). This update introduces some changes to the existing codebases which are addressed in Material UI's migration guide for @mui/x-data-grid from v5 to v6. We've created a simple migration guide to navigate refine users through the changes that might be required in their codebases. While this guide does not cover all the changes, it will help you get started with the migration process.

    Breaking Changes

    useDataGrid no longer returns page, pageSize, onPageChange and onPageSizeChange. According to the changes in the DataGrid API, useDataGrid now returns paginationModel and onPaginationModelChange props which are used to control the pagination state of the DataGrid and contains the previous logic of page, pageSize, onPageChange and onPageSizeChange.

    With this release, the peer dependency of @mui/x-data-grid is updated to ^6.6.0.

Patch Changes

  • #4454 4bae8add99f Thanks @aliemir! - Added missing @context alias to the declaration configuration, this was causing buildtime errors when creating declarations for the package.

  • #4454 4bae8add99f Thanks @aliemir! - Added overflow: auto and overflow: clip (if supported) properties to the content container of the ThemedLayoutV2 to make sure the DataGrid component doesn't break the layout.

5.0.0

Major Changes

  • #4454 4bae8add99f Thanks @aliemir! - Updated the @mui/x-data-grid dependency to the latest version (v6). This update introduces some changes to the existing codebases which are addressed in Material UI's migration guide for @mui/x-data-grid from v5 to v6. We've created a simple migration guide to navigate refine users through the changes that might be required in their codebases. While this guide does not cover all the changes, it will help you get started with the migration process.

    Breaking Changes

    useDataGrid no longer returns page, pageSize, onPageChange and onPageSizeChange. According to the changes in the DataGrid API, useDataGrid now returns paginationModel and onPaginationModelChange props which are used to control the pagination state of the DataGrid and contains the previous logic of page, pageSize, onPageChange and onPageSizeChange.

    With this release, the peer dependency of @mui/x-data-grid is updated to ^6.6.0.

Patch Changes

  • #4454 4bae8add99f Thanks @aliemir! - Added missing @context alias to the declaration configuration, this was causing buildtime errors when creating declarations for the package.

  • #4454 4bae8add99f Thanks @aliemir! - Added overflow: auto and overflow: clip (if supported) properties to the content container of the ThemedLayoutV2 to make sure the DataGrid component doesn't break the layout.

4.18.2

Patch Changes

4.18.1

Patch Changes

4.18.0

Minor Changes

  • #4404 f67967e8c87 Thanks @salihozdemir! - refactor: fix name and state inconsistency in <ThemedLayoutV2>

    useSiderVisible is deprecated, instead we created a new hook useThemedLayoutContext for it. useThemedLayoutContext similar to useSiderVisible but it returns more meaningful state names. However, useSiderVisible is still available for backward compatibility.

    Updated Sider and HamburgerMenu components using useThemedLayoutContext.

    import { useThemedLayoutContext } from "@refinedev/mui";

const {
  siderCollapsed,
  setSiderCollapsed,
  mobileSiderOpen,
  setMobileSiderOpen,
} = useThemedLayoutContext();

4.17.0

Minor Changes

  • #4404 f67967e8c87 Thanks @salihozdemir! - refactor: fix name and state inconsistency in <ThemedLayoutV2>

    useSiderVisible is deprecated, instead we created a new hook useThemedLayoutContext for it. useThemedLayoutContext similar to useSiderVisible but it returns more meaningful state names. However, useSiderVisible is still available for backward compatibility.

    Updated Sider and HamburgerMenu components using useThemedLayoutContext.

    import { useThemedLayoutContext } from "@refinedev/mui";

const {
  siderCollapsed,
  setSiderCollapsed,
  mobileSiderOpen,
  setMobileSiderOpen,
} = useThemedLayoutContext();

4.16.4

Patch Changes

4.16.3

Patch Changes

4.16.2

Patch Changes

4.16.1

Patch Changes

4.16.0

Minor Changes

  • #4303 0c569f42b4e Thanks @alicanerdurmaz! - feat: added default button props into the renderer functions headerButtons and footerButtons in CRUD components. Now, customization of the header and footer buttons can be achieved without losing the default functionality.

    import {
  DeleteButton,
  EditButton,
  ListButton,
  RefreshButton,
  Show,
} from "@refinedev/mui";

const PostShow = () => {
  return (
    <Show
      headerButtons={({
        deleteButtonProps,
        editButtonProps,
        listButtonProps,
        refreshButtonProps,
      }) => {
        return (
          <>
            {/* custom components */}
            {listButtonProps && (
              <ListButton {...listButtonProps} meta={{ foo: "bar" }} />
            )}
            {editButtonProps && (
              <EditButton {...editButtonProps} meta={{ foo: "bar" }} />
            )}
            {deleteButtonProps && (
              <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />
            )}
            <RefreshButton {...refreshButtonProps} meta={{ foo: "bar" }} />
          </>
        );
      }}
    >
      {/* ... */}
    </Show>
  );
};

Patch Changes

4.15.0

Minor Changes

  • #4303 0c569f42b4e Thanks @alicanerdurmaz! - feat: added default button props into the renderer functions headerButtons and footerButtons in CRUD components. Now, customization of the header and footer buttons can be achieved without losing the default functionality.

    import {
  DeleteButton,
  EditButton,
  ListButton,
  RefreshButton,
  Show,
} from "@refinedev/mui";

const PostShow = () => {
  return (
    <Show
      headerButtons={({
        deleteButtonProps,
        editButtonProps,
        listButtonProps,
        refreshButtonProps,
      }) => {
        return (
          <>
            {/* custom components */}
            {listButtonProps && (
              <ListButton {...listButtonProps} meta={{ foo: "bar" }} />
            )}
            {editButtonProps && (
              <EditButton {...editButtonProps} meta={{ foo: "bar" }} />
            )}
            {deleteButtonProps && (
              <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />
            )}
            <RefreshButton {...refreshButtonProps} meta={{ foo: "bar" }} />
          </>
        );
      }}
    >
      {/* ... */}
    </Show>
  );
};

Patch Changes

4.14.7

Patch Changes

4.14.6

Patch Changes

4.14.5

Patch Changes

  • #4277 7172c1b42d2 Thanks @salihozdemir! - fix: renamed the <ThemedHeaderV2/> prop isSticky to sticky

    To provide backwards compatibility, the old prop name is still supported, but it is deprecated and will be removed in the next major version.

    Example:

    import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, ThemedHeaderV2 } from "@refinedev/antd"; // or @refinedev/chakra-ui, @refinedev/mui, @refinedev/mantine

const App: React.FC = () => {
    return (
        <Refine
            ...
        >
            <ThemedLayoutV2
                Header={() => <ThemedHeaderV2 sticky />}
            >
                {/* ... */}
            </ThemedLayoutV2>
        </Refine>
    );
};

  • #4272 420d2442741 Thanks @salihozdemir! - fix: updated the sider styles to solve issues that occur when there are too many items in the sider

4.14.4

Patch Changes

  • #4277 7172c1b42d2 Thanks @salihozdemir! - fix: renamed the <ThemedHeaderV2/> prop isSticky to sticky

    To provide backwards compatibility, the old prop name is still supported, but it is deprecated and will be removed in the next major version.

    Example:

    import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, ThemedHeaderV2 } from "@refinedev/antd"; // or @refinedev/chakra-ui, @refinedev/mui, @refinedev/mantine

const App: React.FC = () => {
    return (
        <Refine
            ...
        >
            <ThemedLayoutV2
                Header={() => <ThemedHeaderV2 sticky />}
            >
                {/* ... */}
            </ThemedLayoutV2>
        </Refine>
    );
};

  • #4272 420d2442741 Thanks @salihozdemir! - fix: updated the sider styles to solve issues that occur when there are too many items in the sider

4.14.3

Patch Changes

  • #4277 7172c1b42d2 Thanks @salihozdemir! - fix: renamed the <ThemedHeaderV2/> prop isSticky to sticky

    To provide backwards compatibility, the old prop name is still supported, but it is deprecated and will be removed in the next major version.

    Example:

    import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, ThemedHeaderV2 } from "@refinedev/antd"; // or @refinedev/chakra-ui, @refinedev/mui, @refinedev/mantine

const App: React.FC = () => {
    return (
        <Refine
            ...
        >
            <ThemedLayoutV2
                Header={() => <ThemedHeaderV2 sticky />}
            >
                {/* ... */}
            </ThemedLayoutV2>
        </Refine>
    );
};

  • #4272 420d2442741 Thanks @salihozdemir! - fix: updated the sider styles to solve issues that occur when there are too many items in the sider

4.14.2

Patch Changes

4.14.1

Patch Changes

4.14.0

Minor Changes

  • #4232 c99bc0ad7f7 Thanks @alicanerdurmaz! - feat: initialSiderCollapsed added to RefineThemedLayoutV2Props to control initial state of <ThemedSiderV2>. From now on, you can control the initial collapsed state of <ThemedSiderV2> by passing the initialSiderCollapsed prop to <ThemedLayoutV2>.

    <ThemedLayoutV2
  initialSiderCollapsed={true} // This will make the sider collapsed by default
>
  {/* .. */}
</ThemedLayoutV2>

  • #4209 3f4b5fef76f Thanks @yildirayunlu! - feat: add isSticky prop to ThemedHeaderV2 component. Default is true.

    import { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/mui";

const CustomHeader = () => <ThemedHeaderV2 isSticky={false} />;

const App = () => (
  <Refine>
    // ...
    <ThemedLayoutV2 Header={CustomHeader}>
      <Outlet />
    </ThemedLayoutV2>
    // ...
  </Refine>
);

Patch Changes

4.13.0

Minor Changes

  • #4232 c99bc0ad7f7 Thanks @alicanerdurmaz! - feat: initialSiderCollapsed added to RefineThemedLayoutV2Props to control initial state of <ThemedSiderV2>. From now on, you can control the initial collapsed state of <ThemedSiderV2> by passing the initialSiderCollapsed prop to <ThemedLayoutV2>.

    <ThemedLayoutV2
  initialSiderCollapsed={true} // This will make the sider collapsed by default
>
  {/* .. */}
</ThemedLayoutV2>

  • #4209 3f4b5fef76f Thanks @yildirayunlu! - feat: add isSticky prop to ThemedHeaderV2 component. Default is true.

    import { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/mui";

const CustomHeader = () => <ThemedHeaderV2 isSticky={false} />;

const App = () => (
  <Refine>
    // ...
    <ThemedLayoutV2 Header={CustomHeader}>
      <Outlet />
    </ThemedLayoutV2>
    // ...
  </Refine>
);

Patch Changes

4.12.0

Minor Changes

  • #4194 8df15fe0e4e Thanks @alicanerdurmaz! - feat: sorters.mode prop added to useTable and useDataGrid hooks. This prop handles the sorting mode of the table. It can be either server or off.

    • "off": sorters are not sent to the server. You can use the sorters value to sort the records on the client side.
    • "server": Sorting is done on the server side. Records will be fetched by using the sorters value.

    feat:filters.mode prop added to useTable and useDataGrid hooks. This prop handles the filtering mode of the table. It can be either server or off.

    • "off": filters are not sent to the server. You can use the filters value to filter the records on the client side.
    • "server": Filtering is done on the server side. Records will be fetched by using the filters value.

Patch Changes

  • Updated dependencies [b992e11e338]:
    • @refinedev/react-hook-form@4.2.2

4.11.0

Minor Changes

  • #4194 8df15fe0e4e Thanks @alicanerdurmaz! - feat: sorters.mode prop added to useTable and useDataGrid hooks. This prop handles the sorting mode of the table. It can be either server or off.

    • "off": sorters are not sent to the server. You can use the sorters value to sort the records on the client side.
    • "server": Sorting is done on the server side. Records will be fetched by using the sorters value.

    feat:filters.mode prop added to useTable and useDataGrid hooks. This prop handles the filtering mode of the table. It can be either server or off.

    • "off": filters are not sent to the server. You can use the filters value to filter the records on the client side.
    • "server": Filtering is done on the server side. Records will be fetched by using the filters value.

Patch Changes

  • Updated dependencies [b992e11e338]:
    • @refinedev/react-hook-form@4.2.1

4.10.3

Patch Changes

4.10.2

Patch Changes

4.10.1

Patch Changes

4.10.0

Minor Changes

  • #4153 8d9c408d089 Thanks @yildirayunlu! - feat: add ThemedLayoutV2 and HamburgerMenu component

    ThemeLayout is deprecated. Added ThemedLayoutV2 instead. This update fixed some UI problems in the layout. Also, with the new <HamburgerMenu /> component, it's easier to collapse/uncollapse the Sider.

    See here for detailed migration guideline.

Patch Changes

  • Updated dependencies [8d9c408d089]:
    • @refinedev/ui-types@1.7.0

4.9.0

Minor Changes

  • #4153 8d9c408d089 Thanks @yildirayunlu! - feat: add ThemedLayoutV2 and HamburgerMenu component

    ThemeLayout is deprecated. Added ThemedLayoutV2 instead. This update fixed some UI problems in the layout. Also, with the new <HamburgerMenu /> component, it's easier to collapse/uncollapse the Sider.

    See here for detailed migration guideline.

Patch Changes

  • Updated dependencies [8d9c408d089]:
    • @refinedev/ui-types@1.6.0

4.8.0

Minor Changes

  • #4113 1c13602e308 Thanks @salihozdemir! - Added missing third generic parameter to hooks which are using useQuery internally.

    For example:

    import { useOne, HttpError } from "@refinedev/core";

const { data } = useOne<{ count: string }, HttpError, { count: number }>({
  resource: "product-count",
  queryOptions: {
    select: (rawData) => {
      return {
        data: {
          count: Number(rawData?.data?.count),
        },
      };
    },
  },
});

console.log(typeof data?.data.count); // number

Patch Changes

  • #4113 1c13602e308 Thanks @salihozdemir! - Updated the generic type name of hooks that use useQuery to synchronize generic type names with tanstack-query.

  • Updated dependencies [1c13602e308]:

    • @refinedev/react-hook-form@4.2.0

4.7.2

Patch Changes

4.7.1

Patch Changes

4.7.0

Minor Changes

Patch Changes

  • Updated dependencies [afdaed3dd83]:
    • @refinedev/react-hook-form@4.1.4

4.6.0

Minor Changes

Patch Changes

  • Updated dependencies [afdaed3dd83]:
    • @refinedev/react-hook-form@4.1.3

4.5.10

Patch Changes

4.5.9

Patch Changes

4.5.8

Patch Changes

  • #4033 08955914473 Thanks @alicanerdurmaz! - - Fixed: Sider toggle button color - The color of the toggle button in the <ThemedSider> and <ThemedHeader> does not meet the contrast ratio. This is now fixed.

4.5.7

Patch Changes

  • #4033 08955914473 Thanks @alicanerdurmaz! - - Fixed: Sider toggle button color - The color of the toggle button in the <ThemedSider> and <ThemedHeader> does not meet the contrast ratio. This is now fixed.

4.5.6

Patch Changes

4.5.5

Patch Changes

4.5.4

Patch Changes

4.5.3

Patch Changes

4.5.2

Patch Changes

  • #3975 b1e6e32f9a1 Thanks @alicanerdurmaz! - - Fixed the unsaved changes dialog is popping up unexpectedly when the user clicks the logs out.

    -   The `<ThemedSider>`'s `onClick` handler was changed to use the `window.confirm` API to manage the confirmation dialog.
    • <RefineThemes> colors updated to match the new theme colors.

  • Updated dependencies [2798f715361]:

    • @refinedev/ui-types@1.5.0

4.5.1

Patch Changes

  • #3975 b1e6e32f9a1 Thanks @alicanerdurmaz! - - Fixed the unsaved changes dialog is popping up unexpectedly when the user clicks the logs out.

    -   The `<ThemedSider>`'s `onClick` handler was changed to use the `window.confirm` API to manage the confirmation dialog.
    • <RefineThemes> colors updated to match the new theme colors.

  • Updated dependencies [2798f715361]:

    • @refinedev/ui-types@1.4.0

4.5.0

Minor Changes

  • #3949 836b06a2f67 Thanks @alicanerdurmaz! - - RefineThemes added. It contains predefined colors for the Material UI components.

    import { Refine } from "@refinedev/core";
import { RefineThemes } from "@refinedev/mui";
import { ThemeProvider } from "@mui/material/styles";
import dataProvider from "@refinedev/simple-rest";

const App = () => {
    // ---

    return (
      <ThemeProvider theme={RefineThemes.MagentaDark}>
            <Refine dataProvider={dataProvider("YOUR_API_URL")}>
                {/** your app here */}
            </Refine>
        </ConfigProvider>
    );
};
    • default title with icon added to AuthPage. It uses <ThemedTitle> component from @refinedev/mui. You can remove it by setting title prop to false.
    import { AuthPage } from "@refinedev/mui";

const MyAuthPage = () => {
  return <AuthPage title={false} />;
};
    • title prop added to AuthPage's renderContent prop to use in the custom content.
    import { AuthPage } from "@refinedev/mui";

const MyAuthPage = () => {
  return (
    <AuthPage
      renderContent={(content: React.ReactNode, title: React.ReactNode) => {
        return (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            {title}
            <h1 style={{ color: "white" }}>Extra Header</h1>
            {content}
            <h1 style={{ color: "white" }}>Extra Footer</h1>
          </div>
        );
      }}
    />
  );
};

    • <ThemedLayout>, <ThemedSider>, <ThemedTitle>, <ThemedHeader> created to use theme colors.

    • <AuthPage> component uses colors from the theme.

    • <ThemedTitle> added to AuthPage

Patch Changes

  • #3956 c54714ed9ab Thanks @salihozdemir! - Fixed an issue where the <NumberField /> component would throw an error if the value prop was set to undefined.

4.4.0

Minor Changes

  • #3949 836b06a2f67 Thanks @alicanerdurmaz! - - RefineThemes added. It contains predefined colors for the Material UI components.

    import { Refine } from "@refinedev/core";
import { RefineThemes } from "@refinedev/mui";
import { ThemeProvider } from "@mui/material/styles";
import dataProvider from "@refinedev/simple-rest";

const App = () => {
    // ---

    return (
      <ThemeProvider theme={RefineThemes.MagentaDark}>
            <Refine dataProvider={dataProvider("YOUR_API_URL")}>
                {/** your app here */}
            </Refine>
        </ConfigProvider>
    );
};
    • default title with icon added to AuthPage. It uses <ThemedTitle> component from @refinedev/mui. You can remove it by setting title prop to false.
    import { AuthPage } from "@refinedev/mui";

const MyAuthPage = () => {
  return <AuthPage title={false} />;
};
    • title prop added to AuthPage's renderContent prop to use in the custom content.
    import { AuthPage } from "@refinedev/mui";

const MyAuthPage = () => {
  return (
    <AuthPage
      renderContent={(content: React.ReactNode, title: React.ReactNode) => {
        return (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            {title}
            <h1 style={{ color: "white" }}>Extra Header</h1>
            {content}
            <h1 style={{ color: "white" }}>Extra Footer</h1>
          </div>
        );
      }}
    />
  );
};

    • <ThemedLayout>, <ThemedSider>, <ThemedTitle>, <ThemedHeader> created to use theme colors.

    • <AuthPage> component uses colors from the theme.

    • <ThemedTitle> added to AuthPage

Patch Changes

  • #3956 c54714ed9ab Thanks @salihozdemir! - Fixed an issue where the <NumberField /> component would throw an error if the value prop was set to undefined.

4.3.2

Patch Changes

  • #3948 b4950503334 Thanks @salihozdemir! - Fixed the unsaved changes dialog is popping up unexpectedly when the user clicks the delete button or logs out, when the form is dirty.

    • The <DeleteButton> already has a confirmation dialog, so the alert was removed.
    • The <Sider>'s onClick handler was changed to use the window.confirm API to manage the confirmation dialog.

4.3.1

Patch Changes

  • #3948 b4950503334 Thanks @salihozdemir! - Fixed the unsaved changes dialog is popping up unexpectedly when the user clicks the delete button or logs out, when the form is dirty.

    • The <DeleteButton> already has a confirmation dialog, so the alert was removed.
    • The <Sider>'s onClick handler was changed to use the window.confirm API to manage the confirmation dialog.

4.3.0

Minor Changes

  • #3912 0ffe70308b2 Thanks @alicanerdurmaz! - - title prop added to AuthPage's renderContent prop to use in the custom content.
    • title prop added to AuthPage to render a custom title.
      • ⚠️ These features have not been implemented yet. Only types were added. It will be implemented in the next release.

Patch Changes

  • Updated dependencies [0ffe70308b2]:
    • @refinedev/ui-types@1.3.0

4.2.0

Minor Changes

  • #3912 0ffe70308b2 Thanks @alicanerdurmaz! - - title prop added to AuthPage's renderContent prop to use in the custom content.
    • title prop added to AuthPage to render a custom title.
      • ⚠️ These features have not been implemented yet. Only types were added. It will be implemented in the next release.

Patch Changes

  • Updated dependencies [0ffe70308b2]:
    • @refinedev/ui-types@1.2.0

4.1.0

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@latest 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

3.63.0

Minor Changes

Patch Changes

3.62.0

Minor Changes

Patch Changes

3.61.5

Patch Changes

3.61.4

Patch Changes

3.61.3

Patch Changes

3.61.2

Patch Changes

3.61.1

Patch Changes

3.61.0

Minor Changes

  • #3159 af2eefb32a4 Thanks @aliemir! - Updated LoginPage and ReadyPage to use refine logos from CDN rather than bundled svg files.

3.60.0

Minor Changes

  • #3159 af2eefb32a4 Thanks @aliemir! - Updated LoginPage and ReadyPage to use refine logos from CDN rather than bundled svg files.

3.59.4

Patch Changes

3.59.3

Patch Changes

3.59.2

Patch Changes

  • #3109 16549ed3012 Thanks @aliemir! - Updated swizzle items and their messages to include extra information and usage examples.

3.59.1

Patch Changes

  • #3109 16549ed3012 Thanks @aliemir! - Updated swizzle items and their messages to include extra information and usage examples.

3.59.0

Minor Changes

  • #3062 6c2ed708a9a Thanks @aliemir! - - Updated components and their type imports to make them compatible with swizzle feature.
    • Added refine.config.js to configure the swizzle feature.

3.58.0

Minor Changes

  • #3062 6c2ed708a9a Thanks @aliemir! - - Updated components and their type imports to make them compatible with swizzle feature.
    • Added refine.config.js to configure the swizzle feature.

3.57.0

Minor Changes

3.56.0

Minor Changes

3.55.2

Patch Changes

3.55.1

Patch Changes

3.55.0

Minor Changes

  • #2872 da3fc4a702 Thanks @TDP17! - Feat: Added ability to manage breadcrumb component globally via options

    The option set in individual CRUD components takes priority over the global option

3.54.0

Minor Changes

  • #2872 da3fc4a702 Thanks @TDP17! - Feat: Added ability to manage breadcrumb component globally via options

    The option set in individual CRUD components takes priority over the global option

3.53.0

Minor Changes

  • #2839 5388a338ab Thanks @aliemir! - Deprecation

    ignoreAccessControlProvider prop on buttons is deprecated. Use accessContro.enabled instead.

    Features

    accessControl.enabled prop is added to buttons to enable/disable access control for buttons. accessControl.hideIfUnauthorized prop is added to buttons to hide the button if access is denied.

  • #2836 e43e9a17ae Thanks @alicanerdurmaz! - added locales prop to date fields

Patch Changes

3.52.0

Minor Changes

Patch Changes

3.51.0

Minor Changes

  • #2839 5388a338ab Thanks @aliemir! - Deprecation

    ignoreAccessControlProvider prop on buttons is deprecated. Use accessContro.enabled instead.

    Features

    accessControl.enabled prop is added to buttons to enable/disable access control for buttons. accessControl.hideIfUnauthorized prop is added to buttons to hide the button if access is denied.

Patch Changes

3.50.7

Patch Changes

3.50.6

Patch Changes

3.50.5

Patch Changes

  • Fixed providers property empty array state in <AuthPage /> component

3.50.4

Patch Changes

  • Fixed providers property empty array state in <AuthPage /> component

3.50.3

Patch Changes

3.50.2

Patch Changes

  • Add AuthProps type export

3.50.1

Patch Changes

3.50.0

Minor Changes

    • Added new component core and mantine support.
    • Move Auth types @pankod/refine-ui-types to @pankod/refine-core

3.49.0

Minor Changes

  • #2627 c5fb45d61f Thanks @yildirayunlu! - - Added new component core and mantine support.
    • Move Auth types @pankod/refine-ui-types to @pankod/refine-core

3.48.2

Patch Changes

  • fix(material-ui): fix missing <Header /> component export

3.48.1

Patch Changes

3.48.0

Minor Changes

    • Added <AuthPage> for Material UI package of refine. <AuthPage> is a component that provides a login, register, forgot password and update password pages.

    • Deprecated LoginPage.

    Before

    import { LoginPage } from "@pankod/refine-mui";

<Refine
  LoginPage={LoginPage}
  ...
/>

    After

    import { AuthPage } from "@pankod/refine-mui";

<Refine
  LoginPage={AuthPage}
  ...
/>

3.47.0

Minor Changes

    • Added <AuthPage> for Material UI package of refine. <AuthPage> is a component that provides a login, register, forgot password and update password pages.

    • Deprecated LoginPage.

    Before

    import { LoginPage } from "@pankod/refine-mui";

<Refine
  LoginPage={LoginPage}
  ...
/>

    After

    import { AuthPage } from "@pankod/refine-mui";

<Refine
  LoginPage={AuthPage}
  ...
/>

3.46.0

Minor Changes

  • #2580 e1ab7da6b3 Thanks @yildirayunlu! - - Added <AuthPage> for Material UI package of refine. <AuthPage> is a component that provides a login, register, forgot password and update password pages.

    • Deprecated LoginPage.

    Before

    import { LoginPage } from "@pankod/refine-mui";

<Refine
  LoginPage={LoginPage}
  ...
/>

    After

    import { AuthPage } from "@pankod/refine-mui";

<Refine
  LoginPage={AuthPage}
  ...
/>

3.45.9

Patch Changes

  • ReadyPage examples link fixed.

3.45.8

Patch Changes

3.45.7

Patch Changes

  • Updated disabled attribute of buttons in CRUD components according to isLoading prop.

  • Removed redundant type inheritance

  • Updated dependencies []:

3.45.6

Patch Changes

3.45.5

Patch Changes

3.45.4

Patch Changes

3.45.3

Patch Changes

3.45.2

Patch Changes

  • Updated dependencies []:
    • @pankod/refine-ui-types@0.9.0

3.45.1

Patch Changes

  • Updated dependencies [ad99916d6d]:
    • @pankod/refine-ui-types@0.8.0

3.45.0

Minor Changes

  • Added render prop to Sider component. You can get dashboard, logout and items from render props to customize the Sider component.

Patch Changes

  • Fixed version of react-router to 6.3.0

  • Passed collapsed prop to render method in Sider component of @pankod/refine-mui.

  • Updated dependencies []:

3.44.2

Patch Changes

3.44.1

Patch Changes

  • #2492 7d5bf3023d Thanks @ozkalai! - Passed collapsed prop to render method in Sider component of @pankod/refine-mui.

  • Updated dependencies [7d5bf3023d]:

    • @pankod/refine-ui-types@0.6.1

3.44.0

Minor Changes

  • #2454 72487a4126 Thanks @ozkalai! - Added render prop to Sider component. You can get dashboard, logout and items from render props to customize the Sider component.

Patch Changes

  • Updated dependencies [72487a4126]:
    • @pankod/refine-ui-types@0.6.0

3.43.0

Minor Changes

  • Update type declaration generation with tsc instead of tsup for better navigation throughout projects source code.

Patch Changes

3.42.0

Minor Changes

  • #2440 0150dcd070 Thanks @aliemir! - Update type declaration generation with tsc instead of tsup for better navigation throughout projects source code.

Patch Changes

3.41.16

Patch Changes

  • Fix: Wrap with <CanAccess /> component to parent sider items

    <Refine
  accessControlProvider={{
    can: async ({ action, resource }) => {
      // console.log({ action, resource });
      // output: {action: "list", resource: "cms" }

      return { can: true };
    },
  }}
  resources={[
    {
      name: "CMS",
    },
    {
      name: "posts",
      parentName: "CMS",
      list: PostList,
    },
  ]}
/>

3.41.15

Patch Changes

  • #2411 c61470a2e0 Thanks @omeraplak! - Fix: Wrap with <CanAccess /> component to parent sider items

    <Refine
  accessControlProvider={{
    can: async ({ action, resource }) => {
      // console.log({ action, resource });
      // output: {action: "list", resource: "cms" }

      return { can: true };
    },
  }}
  resources={[
    {
      name: "CMS",
    },
    {
      name: "posts",
      parentName: "CMS",
      list: PostList,
    },
  ]}
/>

3.41.14

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds

3.41.13

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds

3.41.12

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds

3.41.11

Patch Changes

3.41.10

Patch Changes

  • lodash moved to dependencies.

3.41.9

Patch Changes

3.41.8

Patch Changes

  • Added React 17 support to peerDependencies.

3.41.7

Patch Changes

3.41.6

Patch Changes

  • Fixed StackProps and StackTypeMap type exports

3.41.5

Patch Changes

3.41.4

Patch Changes

3.41.3

Patch Changes

3.41.2

Patch Changes

  • Remove data-testid props from buttons in crud components to make use of button test ids presented by @pankod/refine-ui-types package.

  • Updated @pankod/refine-antd and @pankod/refine-mui fields properties by using @pankod/refine-ui-types common fields types.

    Updated @pankod/refine-antd and @pankod/refine-mui fields tests by using @pankod/refine-ui-tests common fields tests.

    Updated @pankod/refine-ui-tests fields properties.

  • Added @pankod/refine-ui-tests and @pankod/refine-ui-types packages. Now, all of button prop types comes from @pankod/refine-ui-types package and all of button tests comes from @pankod/refine-ui-tests package.

    Thus, button types and tests are managed by @pankod/refine-ui-types package and @pankod/refine-ui-tests package.

  • Updated dependencies []:

    • @pankod/refine-ui-types@0.3.0

3.41.1

Patch Changes

  • #2216 201846c77d Thanks @aliemir! - Remove data-testid props from buttons in crud components to make use of button test ids presented by @pankod/refine-ui-types package.

  • #2216 201846c77d Thanks @aliemir! - Updated @pankod/refine-antd and @pankod/refine-mui fields properties by using @pankod/refine-ui-types common fields types.

    Updated @pankod/refine-antd and @pankod/refine-mui fields tests by using @pankod/refine-ui-tests common fields tests.

    Updated @pankod/refine-ui-tests fields properties.

  • #2216 201846c77d Thanks @aliemir! - Added @pankod/refine-ui-tests and @pankod/refine-ui-types packages. Now, all of button prop types comes from @pankod/refine-ui-types package and all of button tests comes from @pankod/refine-ui-tests package.

    Thus, button types and tests are managed by @pankod/refine-ui-types package and @pankod/refine-ui-tests package.

  • Updated dependencies [201846c77d]:

    • @pankod/refine-ui-types@0.2.0

3.41.0

Minor Changes

  • Add React@18 support 🚀

Patch Changes

3.40.0

Minor Changes

Patch Changes

3.39.2

Patch Changes

  • Updated console.warn's to trigger once.

3.39.1

Patch Changes

3.39.0

Minor Changes

  • All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

Patch Changes

3.38.0

Minor Changes

  • #2217 b4aae00f77 Thanks @omeraplak! - All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

Patch Changes

3.37.2

Patch Changes

  • Add dataProviderName property for <RefreshButton> and <DeleteButton> in <Edit> and <Show> CRUD components - #2096

  • Updated dependencies []:

3.37.1

Patch Changes

3.37.0

Minor Changes

  • The useDataGrid hook required the columns property. Therefore, the queryResult could not be used in the columns. Now, we can define the columns property wherever we want since the useDataGrid hook does not take the column property.

    export const PostsList: React.FC = () => {
-    const { dataGridProps } = useDataGrid<IPost>({
-        columns,
-    });
+    const { dataGridProps } = useDataGrid<IPost>();

    return (
        <List>
-            <DataGrid {...dataGridProps} autoHeight />
+            <DataGrid {...dataGridProps} columns={columns} autoHeight />
        </List>
    );
};

3.36.0

Minor Changes

  • #2072 bbca622ede Thanks @salihozdemir! - The useDataGrid hook required the columns property. Therefore, the queryResult could not be used in the columns. Now, we can define the columns property wherever we want since the useDataGrid hook does not take the column property.

    export const PostsList: React.FC = () => {
-    const { dataGridProps } = useDataGrid<IPost>({
-        columns,
-    });
+    const { dataGridProps } = useDataGrid<IPost>();

    return (
        <List>
-            <DataGrid {...dataGridProps} autoHeight />
+            <DataGrid {...dataGridProps} columns={columns} autoHeight />
        </List>
    );
};

3.34.0

Minor Changes

  • Updated useDataGrid hook with hasPagination to enable/disable pagination.

    Implementation

    Updated the useDataGrid accordingly to the changes in the useTable of @pankod/refine-core. hasPagination property is being send directly to the useTable of @pankod/refine-core to disable pagination.

    Use Cases

    In some data providers, some of the resources might not support pagination which was not supported prior to these changes. To handle the pagination on the client-side or to disable completely, users can set hasPagination to false.

Patch Changes

  • Fixed <Link> usage in packages.

    - <Link href={route} to={route}>
-    {label}
- </Link>
+ <Link to={route}>{label}</Link>

    We used to have to pass href and to for Next.js and React applications, now we just need to pass to. refine router providers handle for us.

  • Updated dependencies []:

3.33.0

Minor Changes

  • #2050 635cfe9fdb Thanks @ozkalai! - Updated useDataGrid hook with hasPagination to enable/disable pagination.

    Implementation

    Updated the useDataGrid accordingly to the changes in the useTable of @pankod/refine-core. hasPagination property is being send directly to the useTable of @pankod/refine-core to disable pagination.

    Use Cases

    In some data providers, some of the resources might not support pagination which was not supported prior to these changes. To handle the pagination on the client-side or to disable completely, users can set hasPagination to false.

Patch Changes

  • #2061 0237725cf3 Thanks @salihozdemir! - Fixed <Link> usage in packages.

    - <Link href={route} to={route}>
-    {label}
- </Link>
+ <Link to={route}>{label}</Link>

    We used to have to pass href and to for Next.js and React applications, now we just need to pass to. refine router providers handle for us.

  • Updated dependencies [ecde34a9b3, 635cfe9fdb]:

3.32.0

Minor Changes

    • Created <Breadcrumb> component from <Breadcrumbs>
    • Added <Breadcrumb> component to CRUD components. (<List>, <Create>, <Edit>, <Show>)
    • Added breadcrumb props to all CRUD components. We can use breadcrumbs prop to add custom breadcrumbs.

Patch Changes

  • Fixed missing imports (DefaultColorScheme, ExtendedColorScheme and ThemeInput) in @mui/material/styles in @pankod/refine-mui package.

  • Updated dependencies []:

3.31.0

Minor Changes

  • #2027 fe2df4b788 Thanks @biskuvit! - - Created <Breadcrumb> component from <Breadcrumbs>
    • Added <Breadcrumb> component to CRUD components. (<List>, <Create>, <Edit>, <Show>)
    • Added breadcrumb props to all CRUD components. We can use breadcrumbs prop to add custom breadcrumbs.

Patch Changes

3.30.9

Patch Changes

3.30.8

Patch Changes

  • We have fixed texts with translations of default login pages in Material UI and Headless.
  • Update default variant of <DeleteButton> to text and replace overrides in the <Edit> crud component.

3.30.7

Patch Changes

  • #2029 b257d87fef Thanks @ozkalai! - We have fixed texts with translations of default login pages in Material UI and Headless.
  • #2033 14e14709ec Thanks @ozkalai! - Update default variant of <DeleteButton> to text and replace overrides in the <Edit> crud component.

3.30.6

Patch Changes

3.30.5

Patch Changes

3.30.4

Patch Changes

  • Deprecated useMenu from @pankod/refine-antd and replaced with the useMenu from @pankod/refine-core

  • Remove unused transition property from @pankod/refine-mui's <Layout/>

  • Updated dependencies []:

3.30.4

Patch Changes

  • Fix styling for buttons in loading state

  • Fix the spacing of header and footer actions in crud components and updated their snapshot tests.

  • Updated dependencies []:

3.30.3

Patch Changes

  • We've updated secondary color to #2A132E

3.30.2

Patch Changes

3.30.1

Patch Changes

3.30.0

Minor Changes

  • Added default sx property for Material UI buttons.

    const { sx, ...restProps } = rest;

<Button sx={{ minWidth: 0, ...sx }} {...restProps} />;

Patch Changes

  • Fixed the useDataGrid filter bug that the selected filter was not displayed.
  • Applied refine's base theme to @pankod/refine-mui package with dark and light options.

3.29.0

Minor Changes

  • Added new provider. <RefineSnackbarProvider/> for notifications.

Patch Changes

  • We are fixed the buttons' icon fontSize when hideText prop passed
  • Renamed export notificationProviderHandle from @pankod/refine-mui to notificationProvider for consistency across packages
  • Fixed Material UI ReadyPage to be responsive for any screen
  • Added missing exports from notistack package.

  • Added svgButtonProps property for Material UI buttons.

    <CreateButton svgButtonProps={{ size: "small" }} />

  • Fixed Material UI <ErrorComponent /> to be responsive for any screen

  • Updated dependencies []:

3.28.0

Minor Changes

  • Added new provider. <RefineSnackbarProvider/> for notifications.

Patch Changes

  • We are fixed the buttons' icon fontSize when hideText prop passed
  • Renamed export notificationProviderHandle from @pankod/refine-mui to notificationProvider for consistency across packages
  • Fixed Material UI ReadyPage to be responsive for any screen
  • Added missing exports from notistack package.

  • Added svgButtonProps property for Material UI buttons.

    <CreateButton svgButtonProps={{ size: "small" }} />

  • Fixed Material UI <ErrorComponent /> to be responsive for any screen

  • Updated dependencies []:

3.27.0

Minor Changes

  • Added new provider. <RefineSnackbarProvider/> for notifications.

Patch Changes

  • We are fixed the buttons' icon fontSize when hideText prop passed
  • Renamed export notificationProviderHandle from @pankod/refine-mui to notificationProvider for consistency across packages
  • Fixed Material UI ReadyPage to be responsive for any screen
  • Added missing exports from notistack package.

  • Added svgButtonProps property for Material UI buttons.

    <CreateButton svgButtonProps={{ size: "small" }} />

  • Fixed Material UI <ErrorComponent /> to be responsive for any screen

  • Updated dependencies []:

3.26.0

Minor Changes

3.25.2

Patch Changes

  • #1909 0170b1306d Thanks @aliemir! - Renamed export notificationProviderHandle from @pankod/refine-mui to notificationProvider for consistency across packages

3.25.1

Patch Changes

  • #1878 07a2c48157 Thanks @omeraplak! - Added svgButtonProps property for Material UI buttons.

    <CreateButton svgButtonProps={{ size: "small" }} />

3.18.0-next.1

Minor Changes

Patch Changes

3.17.1-next.0

Patch Changes

  • #1755 a81836bc36 Thanks @salihozdemir! - Notistack SnackbarProvider which is used as a notification provider (from @pankod/refine-mui) has been made compatible with the theme in the example of the fine food.

3.17.0-next.0

Minor Changes

Patch Changes

  • #1850 40b3faca10 Thanks @ozkalai! - Notistack SnackbarProvider which is used as a notification provider (from @pankod/refine-mui) has been made compatible with the theme in the example of the fine food.
Reference in New Issue View Git Blame Copy Permalink