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
a21a5bb0d26f31fb46040c3c618d8a437bea94de
openpanel/packages/chakra-ui/CHANGELOG.md
Stefan Pejcic 8595a9f4e5 back
2024-05-08 19:58:53 +02:00

74 KiB
Raw Blame History

@refinedev/chakra-ui

2.27.2

Patch Changes

2.27.1

Patch Changes

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

2.26.17

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.

2.26.16

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.

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

2.26.14

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

2.26.13

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

2.26.12

Patch Changes

  • #5003 6043c450432 Thanks @adjsky! - fix(chakra-ui): use isLoading in RefreshButton

    Now the right loading prop is used.

2.26.11

Patch Changes

  • #5003 6043c450432 Thanks @adjsky! - fix(chakra-ui): use isLoading in RefreshButton

    Now the right loading prop is used.

2.26.10

Patch Changes

  • #4975 ff66a862e46 Thanks @aliemir! - Updated dependency of @tabler/icons to v1.119.0 to fix the issue of using misconfigured versions. (Fixes #4921)

2.26.9

Patch Changes

  • #4975 ff66a862e46 Thanks @aliemir! - Updated dependency of @tabler/icons to v1.119.0 to fix the issue of using misconfigured versions. (Fixes #4921)

2.26.8

Patch Changes

2.26.7

Patch Changes

2.26.6

Patch Changes

2.26.5

Patch Changes

2.26.4

Patch Changes

2.26.3

Patch Changes

2.26.2

Patch Changes

2.26.1

Patch Changes

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

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

2.24.2

Patch Changes

  • #4764 6aba21bfde0 Thanks @salihozdemir! - fix: fixed a bug where the <ThemedLayoutv2> component was not worked with sticky header.

  • Updated dependencies [c757355da60]:

    • @refinedev/react-hook-form@4.8.2

2.24.1

Patch Changes

  • #4764 6aba21bfde0 Thanks @salihozdemir! - fix: fixed a bug where the <ThemedLayoutv2> component was not worked with sticky header.

  • Updated dependencies [c757355da60]:

    • @refinedev/react-hook-form@4.8.1

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

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

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

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

Patch Changes

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

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

Patch Changes

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

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

2.18.2

Patch Changes

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

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

    import { DeleteButton } from "@refinedev/chakra-ui";

<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

2.18.1

Patch Changes

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

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

    import { DeleteButton } from "@refinedev/chakra-ui";

<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

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

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

2.16.2

Patch Changes

2.16.1

Patch Changes

2.16.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/chakra-ui";

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

2.15.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/chakra-ui";

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

2.14.2

Patch Changes

2.14.1

Patch Changes

2.14.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/chakra-ui";

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

2.13.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/chakra-ui";

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

2.12.7

Patch Changes

2.12.6

Patch Changes

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

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

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

2.12.2

Patch Changes

2.12.1

Patch Changes

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

    import { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/chakra-ui";

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

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

Patch Changes

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

    import { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/chakra-ui";

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

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

Patch Changes

2.10.0

Minor Changes

  • #4176 13448252cd7 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.

2.9.0

Minor Changes

  • #4176 13448252cd7 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.

2.8.0

Minor Changes

Patch Changes

  • Updated dependencies [1c13602e308]:
    • @refinedev/react-hook-form@4.2.0

2.7.0

Minor Changes

Patch Changes

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

2.6.0

Minor Changes

Patch Changes

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

2.5.4

Patch Changes

  • #4024 dc6d2311eb7 Thanks @alicanerdurmaz! - - Added: wrapperStyles prop to <ThemedTitle> component to allow for custom styles to be passed in.

    • Added: textDecoration: none to <ThemedTitle> component.

2.5.3

Patch Changes

  • #4024 dc6d2311eb7 Thanks @alicanerdurmaz! - - Added: wrapperStyles prop to <ThemedTitle> component to allow for custom styles to be passed in.

    • Added: textDecoration: none to <ThemedTitle> component.

2.5.2

Patch Changes

2.5.1

Patch Changes

2.5.0

Minor Changes

  • #3971 2798f715361 Thanks @alicanerdurmaz! - - RefineThemes added. It contains predefined colors for the chakra-UI components.

    import { RefineThemes } from "@refinedev/chakra-ui";
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
const App = () => {
    // ---
    return (
        <ChakraProvider theme={RefineThemes.Magenta}>
            <Refine dataProvider={dataProvider("YOUR_API_URL")}>
                {/** your app here */}
            </Refine>
        </ChakraProvider>
    );
};
    • default title with icon added to AuthPage. It uses ThemedTitle component from @refinedev/chakra-ui. You can remove it by setting title prop to false.
    import { AuthPage, ThemedTitle } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
    return (
        <AuthPage
            type="login"
            title={
                <ThemedTitle
                    title="My Title"
                    icon={<img src="https://refine.dev/img/logo.png" />}
                />
            }
        />
    );
};
    • title prop added to AuthPage's renderContent prop to use in the custom content.
    import { Box, Heading } from "@chakra-ui/react";
import { AuthPage } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
    return (
        <AuthPage
            contentProps={{
                style: {
                    width: "400px",
                },
            }}
            renderContent={(
                content: React.ReactNode,
                title: React.ReactNode,
            ) => {
                return (
                    <Box
                        bg="white"
                        borderRadius="md"
                        px="5"
                        display="flex"
                        flexDirection="column"
                        justifyContent="center"
                        alignItems="center"
                    >
                        <Heading color="white">Extra Header</Heading>
                        {content}
                        <Heading color="white">Extra Footer</Heading>
                    </Box>
                );
            }}
        />
    );
};

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

    • <EditButton> in <Show> color changed to brand.

    • <CreateButton> color changed to brand.

    • <AuthPage> component uses colors from the theme.

    • <AuthPageTitle> added to AuthPage

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

2.4.0

Minor Changes

  • #3971 2798f715361 Thanks @alicanerdurmaz! - - RefineThemes added. It contains predefined colors for the chakra-UI components.

    import { RefineThemes } from "@refinedev/chakra-ui";
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
const App = () => {
    // ---
    return (
        <ChakraProvider theme={RefineThemes.Magenta}>
            <Refine dataProvider={dataProvider("YOUR_API_URL")}>
                {/** your app here */}
            </Refine>
        </ChakraProvider>
    );
};
    • default title with icon added to AuthPage. It uses ThemedTitle component from @refinedev/chakra-ui. You can remove it by setting title prop to false.
    import { AuthPage, ThemedTitle } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
    return (
        <AuthPage
            type="login"
            title={
                <ThemedTitle
                    title="My Title"
                    icon={<img src="https://refine.dev/img/logo.png" />}
                />
            }
        />
    );
};
    • title prop added to AuthPage's renderContent prop to use in the custom content.
    import { Box, Heading } from "@chakra-ui/react";
import { AuthPage } from "@refinedev/chakra-ui";

const MyLoginPage = () => {
    return (
        <AuthPage
            contentProps={{
                style: {
                    width: "400px",
                },
            }}
            renderContent={(
                content: React.ReactNode,
                title: React.ReactNode,
            ) => {
                return (
                    <Box
                        bg="white"
                        borderRadius="md"
                        px="5"
                        display="flex"
                        flexDirection="column"
                        justifyContent="center"
                        alignItems="center"
                    >
                        <Heading color="white">Extra Header</Heading>
                        {content}
                        <Heading color="white">Extra Footer</Heading>
                    </Box>
                );
            }}
        />
    );
};

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

    • <EditButton> in <Show> color changed to brand.

    • <CreateButton> color changed to brand.

    • <AuthPage> component uses colors from the theme.

    • <AuthPageTitle> added to AuthPage

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

2.3.4

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.

2.3.3

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.

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

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

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

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

2.1.2

Patch Changes

  • #3919 dd90bf43d50 Thanks @alicanerdurmaz! - - Fixed: When title prop is false in crud components, the default title was rendered. It should not render anything.

2.1.1

Patch Changes

  • #3919 dd90bf43d50 Thanks @alicanerdurmaz! - - Fixed: When title prop is false in crud components, the default title was rendered. It should not render anything.

2.1.0

Minor Changes

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

    All Chakra UI components re-exported from @refinedev/chakra-ui have been removed. You should import them from @chakra-ui/react package 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 @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

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

    - import {
-    ChakraProvider,
-    Input,
-    Select,
-    ShowButton,
-    usePagination,
- } from "@refinedev/chakra-ui";

+ import { usePagination, ShowButton } from "@refinedev/chakra-ui";
+ import { ChakraProvider, Input, Select } from "@chakra-ui/react";

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

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

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

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

1.8.0

Minor Changes

Patch Changes

1.7.0

Minor Changes

Patch Changes

1.6.6

Patch Changes

1.6.5

Patch Changes

1.6.4

Patch Changes

1.6.3

Patch Changes

1.6.2

Patch Changes

1.6.1

Patch Changes

1.6.0

Minor Changes

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

1.5.0

Minor Changes

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

1.4.4

Patch Changes

1.4.3

Patch Changes

1.4.2

Patch Changes

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

1.4.1

Patch Changes

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

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

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

1.2.12

Patch Changes

  • #3011 593531713c3 Thanks @aliemir! - Fixed <NumberField /> type for missing value prop type, which was erroring out when using <NumberField />.

1.2.11

Patch Changes

  • #3011 593531713c3 Thanks @aliemir! - Fixed <NumberField /> type for missing value prop type, which was erroring out when using <NumberField />.

1.2.10

Patch Changes

1.2.9

Patch Changes

1.2.8

Patch Changes

1.2.7

Patch Changes

1.2.6

Patch Changes

  • #2959 3cd13fa5c2 Thanks @salihozdemir! - - Fixed error and ready pages issues that dark mode compatibility and mobile view issues.
    • Fixed crud components mobile view issues and spacing issues.
    • Update Save button icon button color and variant.
    • Rename TextFieldComponent export name to TextField.
    • Update DeleteButton color scheme.
    • Add missing props to RefreshButton's IconButton.

1.2.5

Patch Changes

  • #2959 3cd13fa5c2 Thanks @salihozdemir! - - Fixed error and ready pages issues that dark mode compatibility and mobile view issues.
    • Fixed crud components mobile view issues and spacing issues.
    • Update Save button icon button color and variant.
    • Rename TextFieldComponent export name to TextField.
    • Update DeleteButton color scheme.
    • Add missing props to RefreshButton's IconButton.

1.2.4

Patch Changes

1.2.3

Patch Changes

1.2.2

Patch Changes

  • 59d6bd5b83 Thanks @salihozdemir! - Added href property for BreadcrumbItem component to be able to fix the Next.js undefined href error.

1.2.1

Patch Changes

  • 59d6bd5b83 Thanks @salihozdemir! - Added href property for BreadcrumbItem component to be able to fix the Next.js undefined href error.

1.2.0

Minor Changes

1.1.0

Minor Changes

Reference in New Issue View Git Blame Copy Permalink