refine

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/[email protected]

Minor Changes

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

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/[email protected]

Minor Changes

• #4742 61950c8fe18 Thanks @aliemir! - Removed @tanstack/react-query-devtools package and its usage from refine's core. This means that you will no longer see the dev tools icon in the bottom right corner of your app by default. If you want to use the dev tools, you can install the package (@tanstack/react-query-devtools) and use it in your app.

  options.reactQuery.devtoolConfig property has been removed from the <Refine> components props. This option will no longer be functional and will be removed in the next major release. If you have any configuration for the dev tools, you can pass it to the ReactQueryDevtools component directly.

Patch Changes

• #4740 41018fde9ff Thanks @aliemir! - Use fetch for telemetry calls as a fallback for Image when it's not available. This fixes an issue where telemetry calls would fail in some environments.

Patch Changes

• #4731 0336d89370a Thanks @BatuhanW! - chore: bump superplate-cli version to 1.17.4

Patch Changes

• #4717 c1c10e5d7bd Thanks @aliemir! - Added a classname to the inferencer's code viewer component to determine a simple selector for the code viewer.

Patch Changes

• #4710 a115a731dd4 Thanks @BatuhanW! - chore: bump superplate-cli version to 1.17.3

Patch Changes

• #4707 a5860a2c687 Thanks @BatuhanW! - chore: bump superplate version to 1.17.2

Patch Changes

• #4696 35a2c695a74 Thanks @BatuhanW! - feat: add optional projectId field to component options prop. Project ID will be sent with telemetry data if it exists.

Patch Changes

• #4696 35a2c695a74 Thanks @BatuhanW! - feat: CLI will try to read projectId from package.json if exists and send it to the telemetry server.

  Also removed redundant comment lines on resource generation.

Minor Changes

• #4591 f8891ead2bd Thanks @yildirayunlu! - feat: add autoSaveProps prop type on RefineCrudEditProps interface.

Patch Changes

• Updated dependencies [3af99896101, 96af6d25b7a, 96af6d25b7a, f8891ead2bd, 3442f4bd00a]:
  • @refinedev/[email protected]

Minor Changes

• #4591 f8891ead2bd Thanks @yildirayunlu! - feat: add autoSaveIndicatorTests for AutoSaveIndicator component.

Patch Changes

• Updated dependencies [3af99896101, 96af6d25b7a, 96af6d25b7a, f8891ead2bd, 3442f4bd00a, f8891ead2bd]:
  • @refinedev/[email protected]
  • @refinedev/[email protected]

Minor Changes

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added error handling to support server-side validation errors.

  When the server returns default validation errors, update, create, updateMany, and createMany methods will throw an error with the validation errors. This allows the useForm update the error state with the validation errors.

Minor Changes

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: when the dataProvider returns rejected promise with errors field, useForm will automatically update the error state with the rejected errors field.

  Refer to the server-side form validation documentation for more information. →

Minor Changes

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added error handling to support server-side validation errors.

  When the server returns default validation errors, update, create, updateMany, and createMany methods will throw an error with the validation errors. This allows the useForm update the error state with the validation errors.

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

• Updated dependencies [96af6d25b7a, f8891ead2bd]:
  • @refinedev/[email protected]
  • @refinedev/[email protected]

Minor Changes

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: when the dataProvider returns rejected promise with errors field, useForm will automatically update the error state with the rejected errors field.

  Refer to the server-side form validation documentation for more information. →

• #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/mantine";
  const { autoSaveProps } = useForm({
      refineCoreProps: {
          autoSave: {
              enabled: true,
              debounce: 2000, // not required, default is 1000
          },
      }
  });
  
  return (
      <div>
          <AutoSaveIndicator {...autoSaveProps}>
      </div>
  );
  

Patch Changes

• Updated dependencies [f8891ead2bd]:
  • @refinedev/[email protected]

Minor Changes

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added errros field to HttpError type.
  From now on, you can pass errors field to HttpError. This field will be used to update the useForm's error state.

  export interface ValidationErrors {
      [field: string]:
          | string
          | string[]
          | boolean
          | { key: string; message: string };
  }
  
  export interface HttpError extends Record<string, any> {
      message: string;
      statusCode: number;
      errors?: ValidationErrors;
  }
  

  Usage example:

  import { HttpError } from "@refinedev/core";
  
  const App = () => {
      return (
          <Refine
              routerProvider={routerProvider}
              dataProvider={{
                  // ...
                  update: async () => {
                      // assume that the server returns the following error
                      const error: HttpError = {
                          message:
                              "An error occurred while updating the record.",
                          statusCode: 400,
                          //This field will be used to update the `useForm`'s error state
                          errors: {
                              title: [
                                  "Title is required.",
                                  "Title should have at least 5 characters.",
                              ],
                              "category.id": ["Category is required."],
                              status: true,
                              content: {
                                  key: "form.error.content",
                                  message: "Content is required.",
                              },
                          },
                      };
  
                      return Promise.reject(error);
                  },
              }}
          >
              {/* ... */}
          </Refine>
      );
  };
  

  Refer to the server-side form validation documentation for more information. →

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added disableServerSideValidation to the refine options for globally disabling server-side validation.

  import { Refine } from "@refinedev/core";
  
  <Refine
      options={{
          disableServerSideValidation: true,
      }}
  >
      // ...
  </Refine>;
  

• #4591 f8891ead2bd Thanks @yildirayunlu! - feat: autoSave feature for useForm hook 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.
  autoSaveProps is an object that contains data, error and status values. data is the saved data, error is the error object and status is the status of the request. status can be loading, error, idle and success.

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

Patch Changes

• #4659 3af99896101 Thanks @salihozdemir! - chore: fix tsdoc description of onCancel property on following hooks:

  • useUpdate
  • useUpdateMany
  • useDelete
  • useDeleteMany

• #4665 3442f4bd00a Thanks @yildirayunlu! - feat: add false return type on SuccessErrorNotification

  This issue has been fixed in this PR, where the successNotification and errorNotification methods can now return false when a callback function is given. This allows the conditional notification to be displayed.

  const { mutate } = useCreate<IPost>({});
  
  mutate({
      resource: "posts",
      values: {
          title: "Hello World",
          status: "published",
      },
      successNotification: (data) => {
          if (data?.data.status === "published") {
              return {
                  type: "success",
                  message: "Post published",
              };
          }
  
          return false;
      },
  });
  

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/chakra-ui";
  const { autoSaveProps } = useForm({
      refineCoreProps: {
          autoSave: {
              enabled: true,
              debounce: 2000, // not required, default is 1000
          },
      }
  });
  
  return (
      <div>
          <AutoSaveIndicator {...autoSaveProps}>
      </div>
  );
  

Patch Changes

• #4644 5da81a141bc Thanks @yildirayunlu! - fix: broken layout on smaller screens. Add overflow: auto to layout content.

• Updated dependencies [96af6d25b7a, f8891ead2bd]:

  • @refinedev/[email protected]
  • @refinedev/[email protected]

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({
      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/antd";
  const { autoSaveProps } = useForm({
      autoSave: {
          enabled: true,
          debounce: 2000, // not required, default is 1000
      },
  });
  
  return (
      <div>
          <AutoSaveIndicator {...autoSaveProps}>
      </div>
  );
  

• #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: when the dataProvider returns rejected promise with errors field, useForm will automatically update the error state with the rejected errors field.

  Refer to the server-side form validation documentation for more information. →

Patch Changes

• Updated dependencies [f8891ead2bd]:
  • @refinedev/[email protected]