74 KiB
@refinedev/chakra-ui
2.27.2
Patch Changes
- #5465
00e00cbd98
Thanks @aliemir! - Fixed the type issue betweenremark-gfm
andreact-markdown
. #5463
2.27.1
Patch Changes
-
#5425
190af9fce2
Thanks @aliemir! - Updated@refinedev/core
peer dependencies to latest (^4.46.1
) -
Updated dependencies [
190af9fce2
]:- @refinedev/react-hook-form@4.8.13
- @refinedev/ui-types@1.22.4
2.27.0
Minor Changes
-
#5307
f8e407f850
Thanks @jackprogramsjp! - feat: addedhideForm
props forLoginPage
andRegisterPage
forAuthPage
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
-
#5269
a23a0945d3
Thanks @BatuhanW! - feat: add "autoComplete" field for Login pages. -
#5325
7ff54b2060
Thanks @alicanerdurmaz! - fix:<AuthPage />
styling issues on mobile screens.chore: new tests are added to
<AuthPage />
.
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 fromswizzle
. From now on, users can swizzle<ThemedLayoutV2 />
component instead.feat: swizzled
<ThemedLayoutV2 />
component destination changed tosrc/components/layout/
fromsrc/components/themedLayout
.
2.26.15
Patch Changes
-
#5026
a605e4cd318
Thanks @alicanerdurmaz! - feat: deprecated<ThemedLayout />
and<Layout />
components removed fromswizzle
. From now on, users can swizzle<ThemedLayoutV2 />
component instead.feat: swizzled
<ThemedLayoutV2 />
component destination changed tosrc/components/layout/
fromsrc/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 RefreshButtonNow the right loading prop is used.
2.26.11
Patch Changes
-
#5003
6043c450432
Thanks @adjsky! - fix(chakra-ui): use isLoading in RefreshButtonNow the right loading prop is used.
2.26.10
Patch Changes
- #4975
ff66a862e46
Thanks @aliemir! - Updated dependency of@tabler/icons
tov1.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
tov1.119.0
to fix the issue of using misconfigured versions. (Fixes #4921)
2.26.8
Patch Changes
-
#4964
85b1ac0db5f
Thanks @BatuhanW! - chore: update @refinedev/core peer dependency versions. -
Updated dependencies [
85b1ac0db5f
]:- @refinedev/react-hook-form@4.8.8
2.26.7
Patch Changes
-
#4964
85b1ac0db5f
Thanks @BatuhanW! - chore: update @refinedev/core peer dependency versions. -
Updated dependencies [
85b1ac0db5f
]:- @refinedev/react-hook-form@4.8.7
2.26.6
Patch Changes
- #4951
04837c62077
Thanks @aliemir! - - Update build configuration foresbuild
to use the shared plugins.- Fix the lodash replacement plugin to skip redundant files.
- Updated dependencies [
04837c62077
]:- @refinedev/ui-types@1.22.2
2.26.5
Patch Changes
- #4951
04837c62077
Thanks @aliemir! - - Update build configuration foresbuild
to use the shared plugins.- Fix the lodash replacement plugin to skip redundant files.
- Updated dependencies [
04837c62077
]:- @refinedev/ui-types@1.22.1
2.26.4
Patch Changes
-
#4948
8e5efffbb23
Thanks @aliemir! - Keep the hook and component names in builds for better debugging. -
Updated dependencies [
8e5efffbb23
]:- @refinedev/react-hook-form@4.8.4
2.26.3
Patch Changes
-
#4948
8e5efffbb23
Thanks @aliemir! - Keep the hook and component names in builds for better debugging. -
Updated dependencies [
8e5efffbb23
]:- @refinedev/react-hook-form@4.8.3
2.26.2
Patch Changes
- #4788
38680378c7a
Thanks @salihozdemir! - fix: use<IconButton />
in<HeaderV2 />
instead of using icon.
2.26.1
Patch Changes
- #4788
38680378c7a
Thanks @salihozdemir! - fix: use<IconButton />
in<HeaderV2 />
instead of using icon.
2.26.0
Minor Changes
- #4775
3052fb22449
Thanks @alicanerdurmaz! - fixed:<RefreshButton />
does not refresh content #4618. From now,<RefreshButton />
usesuseInvalidate
hook to refresh data instead ofuseOne
.
Patch Changes
- Updated dependencies [
3052fb22449
]:- @refinedev/ui-types@1.22.0
2.25.0
Minor Changes
- #4775
3052fb22449
Thanks @alicanerdurmaz! - fixed:<RefreshButton />
does not refresh content #4618. From now,<RefreshButton />
usesuseInvalidate
hook to refresh data instead ofuseOne
.
Patch Changes
- Updated dependencies [
3052fb22449
]:- @refinedev/ui-types@1.21.0
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! - AddedsideEffects: false
topackage.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! - AddedsideEffects: false
topackage.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 forEdit
. useForm, useDrawerForm, useModalForm, useStepsForm hooks now acceptautoSave
object.enabled
is a boolean value anddebounce
is a number value in milliseconds.debounce
is optional and default value is1000
.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 whenautoSaveProps
is given to theEdit
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. Addoverflow: auto
to layout content. -
Updated dependencies [
96af6d25b7a
,f8891ead2bd
]:- @refinedev/react-hook-form@4.6.0
- @refinedev/ui-types@1.20.0
2.21.0
Minor Changes
-
#4591
f8891ead2bd
Thanks @yildirayunlu! - feat:autoSave
feature forEdit
. useForm, useDrawerForm, useModalForm, useStepsForm hooks now acceptautoSave
object.enabled
is a boolean value anddebounce
is a number value in milliseconds.debounce
is optional and default value is1000
.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 whenautoSaveProps
is given to theEdit
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. Addoverflow: auto
to layout content. -
Updated dependencies [
96af6d25b7a
,f8891ead2bd
]:- @refinedev/react-hook-form@4.5.0
- @refinedev/ui-types@1.19.0
2.20.0
Minor Changes
-
#4502
c7872ca621f
Thanks @Mr0nline! - feat: ability to tweak active sider items navigationVisiting active sider items triggers page reloads due to them being links. We can now provide activeItemDisabled prop to disable such reloads.
Patch Changes
-
#4607
fed630dcc3e
Thanks @alicanerdurmaz! - fixed: TSDoc typos. TSDoc descriptions texts has Mantine instead of Chakra UI.feat: added
ThemedLayoutV2
tests. -
#4607
fed630dcc3e
Thanks @alicanerdurmaz! - test: added tests for<ThemedSiderV2/>
. -
Updated dependencies [
c7872ca621f
]:- @refinedev/ui-types@1.18.0
2.19.0
Minor Changes
-
#4502
c7872ca621f
Thanks @Mr0nline! - feat: ability to tweak active sider items navigationVisiting active sider items triggers page reloads due to them being links. We can now provide activeItemDisabled prop to disable such reloads.
Patch Changes
-
#4607
fed630dcc3e
Thanks @alicanerdurmaz! - fixed: TSDoc typos. TSDoc descriptions texts has Mantine instead of Chakra UI.feat: added
ThemedLayoutV2
tests. -
#4607
fed630dcc3e
Thanks @alicanerdurmaz! - test: added tests for<ThemedSiderV2/>
. -
Updated dependencies [
c7872ca621f
]:- @refinedev/ui-types@1.17.0
2.18.2
Patch Changes
-
#4527
ceadcd29fc9
Thanks @salihozdemir! - fix: prioritization of forgottenidentifier
If
identifier
is provided, it will be used instead ofname
.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 multipleresource
usage with the same name. Now thetranslate
keys are generated usingidentifier
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 forgottenidentifier
If
identifier
is provided, it will be used instead ofname
.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 multipleresource
usage with the same name. Now thetranslate
keys are generated usingidentifier
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 globalaccessControlProvider
configuration.fix: Delete button's text wasn't rendered as
reason
field ofaccessControlProvider
.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 beAccess Denied!
instead of defaultDelete
.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 globalaccessControlProvider
configuration.fix: Delete button's text wasn't rendered as
reason
field ofaccessControlProvider
.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 beAccess Denied!
instead of defaultDelete
.This is the default behaviour for Create, List, Show, Edit, Delete, Clone buttons already.
2.16.2
Patch Changes
- #4431
c29a3618cf6
Thanks @aliemir! - Updated the TSDoc comments to fix the broken links in the documentation.
2.16.1
Patch Changes
- #4431
c29a3618cf6
Thanks @aliemir! - Updated the TSDoc comments to fix the broken links in the documentation.
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 hookuseThemedLayoutContext
for it.useThemedLayoutContext
similar touseSiderVisible
but it returns more meaningful state names. However,useSiderVisible
is still available for backward compatibility.Updated
Sider
andHamburgerMenu
components usinguseThemedLayoutContext
.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 hookuseThemedLayoutContext
for it.useThemedLayoutContext
similar touseSiderVisible
but it returns more meaningful state names. However,useSiderVisible
is still available for backward compatibility.Updated
Sider
andHamburgerMenu
components usinguseThemedLayoutContext
.import { useThemedLayoutContext } from "@refinedev/chakra-ui"; const { siderCollapsed, setSiderCollapsed, mobileSiderOpen, setMobileSiderOpen, } = useThemedLayoutContext();
2.14.2
Patch Changes
- #4316
4690c627e05
Thanks @yildirayunlu! - fix: fixedclassName
for easier selection of all buttons and titles of CRUD components
2.14.1
Patch Changes
- #4316
4690c627e05
Thanks @yildirayunlu! - fix: fixedclassName
for easier selection of all buttons and titles of CRUD components
2.14.0
Minor Changes
-
#4303
0c569f42b4e
Thanks @alicanerdurmaz! - feat: added default button props into the renderer functionsheaderButtons
andfooterButtons
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
-
#4312
9a5f79186c1
Thanks @yildirayunlu! - feat: addedclassName
for easier selection of all buttons and titles of CRUD components -
Updated dependencies [
0c569f42b4e
,e6eb4dea627
,9a5f79186c1
]:- @refinedev/ui-types@1.16.0
- @refinedev/react-hook-form@4.4.0
2.13.0
Minor Changes
-
#4303
0c569f42b4e
Thanks @alicanerdurmaz! - feat: added default button props into the renderer functionsheaderButtons
andfooterButtons
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
-
#4312
9a5f79186c1
Thanks @yildirayunlu! - feat: addedclassName
for easier selection of all buttons and titles of CRUD components -
Updated dependencies [
0c569f42b4e
,e6eb4dea627
,9a5f79186c1
]:- @refinedev/ui-types@1.15.0
- @refinedev/react-hook-form@4.3.0
2.12.7
Patch Changes
-
#4295
7f24a6a2b14
Thanks @salihozdemir! - chore: bump to latest version of@refinedev/ui-types
-
Updated dependencies [
dc62abc890f
]:- @refinedev/ui-types@1.14.0
2.12.6
Patch Changes
- #4295
7f24a6a2b14
Thanks @salihozdemir! - chore: bump to latest version of@refinedev/ui-types
2.12.5
Patch Changes
-
#4277
7172c1b42d2
Thanks @salihozdemir! - fix: renamed the<ThemedHeaderV2/>
propisSticky
tosticky
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/>
propisSticky
tosticky
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/>
propisSticky
tosticky
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
- #4255
9694245718c
Thanks @alicanerdurmaz! - fixed:ThemedLayoutContextProvider
import path in internal usage.
2.12.1
Patch Changes
- #4255
9694245718c
Thanks @alicanerdurmaz! - fixed:ThemedLayoutContextProvider
import path in internal usage.
2.12.0
Minor Changes
-
#4232
c99bc0ad7f7
Thanks @alicanerdurmaz! - feat:initialSiderCollapsed
added toRefineThemedLayoutV2Props
to control initial state of<ThemedSiderV2>
. From now on, you can control the initial collapsed state of<ThemedSiderV2>
by passing theinitialSiderCollapsed
prop to<ThemedLayoutV2>
.<ThemedLayoutV2 initialSiderCollapsed={true} // This will make the sider collapsed by default > {/* .. */} </ThemedLayoutV2>
-
#4209
3f4b5fef76f
Thanks @yildirayunlu! - feat: addisSticky
prop toThemedHeaderV2
componentimport { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/chakra-ui"; const CustomHeader = () => <ThemedHeaderV2 isSticky={true} />; const App = () => ( <Refine> // ... <ThemedLayoutV2 Header={CustomHeader}> <Outlet /> </ThemedLayoutV2> // ... </Refine> );
Patch Changes
-
#4223
c2ca3a67b22
Thanks @aliemir! - Fixed theErrorComponent
height overflow issue which was causing header to be unresponsive. -
Updated dependencies [
c99bc0ad7f7
,3f4b5fef76f
]:- @refinedev/ui-types@1.12.0
2.11.0
Minor Changes
-
#4232
c99bc0ad7f7
Thanks @alicanerdurmaz! - feat:initialSiderCollapsed
added toRefineThemedLayoutV2Props
to control initial state of<ThemedSiderV2>
. From now on, you can control the initial collapsed state of<ThemedSiderV2>
by passing theinitialSiderCollapsed
prop to<ThemedLayoutV2>
.<ThemedLayoutV2 initialSiderCollapsed={true} // This will make the sider collapsed by default > {/* .. */} </ThemedLayoutV2>
-
#4209
3f4b5fef76f
Thanks @yildirayunlu! - feat: addisSticky
prop toThemedHeaderV2
componentimport { ThemedHeaderV2, ThemedLayoutV2 } from "@refinedev/chakra-ui"; const CustomHeader = () => <ThemedHeaderV2 isSticky={true} />; const App = () => ( <Refine> // ... <ThemedLayoutV2 Header={CustomHeader}> <Outlet /> </ThemedLayoutV2> // ... </Refine> );
Patch Changes
-
#4223
c2ca3a67b22
Thanks @aliemir! - Fixed theErrorComponent
height overflow issue which was causing header to be unresponsive. -
Updated dependencies [
c99bc0ad7f7
,3f4b5fef76f
]:- @refinedev/ui-types@1.11.0
2.10.0
Minor Changes
-
#4176
13448252cd7
Thanks @yildirayunlu! - feat: addThemedLayoutV2
andHamburgerMenu
componentThemeLayout
is deprecated. AddedThemedLayoutV2
instead. This update fixed some UI problems in the layout. Also, with the new<HamburgerMenu />
component, it's easier to collapse/uncollapse theSider
.See here for detailed migration guideline.
2.9.0
Minor Changes
-
#4176
13448252cd7
Thanks @yildirayunlu! - feat: addThemedLayoutV2
andHamburgerMenu
componentThemeLayout
is deprecated. AddedThemedLayoutV2
instead. This update fixed some UI problems in the layout. Also, with the new<HamburgerMenu />
component, it's easier to collapse/uncollapse theSider
.See here for detailed migration guideline.
2.8.0
Minor Changes
- #4131
0e7ee8876df
Thanks @alicanerdurmaz! - - Fixed:<ThemedSider>
logout icon alignment.<LogoutButton>
icon changed to<IconPower>
fromIconLogout
.
Patch Changes
- Updated dependencies [
1c13602e308
]:- @refinedev/react-hook-form@4.2.0
2.7.0
Minor Changes
- #4072
fad40e6237f
Thanks @alicanerdurmaz! - -<Layout>
is deprecated. use<ThemedLayout>
instead with 100% backward compatibility. - https://refine.dev/docs/api-reference/chakra-ui/components/chakra-ui-themed-layout
Patch Changes
- Updated dependencies [
afdaed3dd83
]:- @refinedev/react-hook-form@4.1.4
2.6.0
Minor Changes
- #4072
fad40e6237f
Thanks @alicanerdurmaz! - -<Layout>
is deprecated. use<ThemedLayout>
instead with 100% backward compatibility. - https://refine.dev/docs/api-reference/chakra-ui/components/chakra-ui-themed-layout
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.
- Added:
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.
- Added:
2.5.2
Patch Changes
- #3974
4dcc20d6a60
Thanks @salihozdemir! - Deprecated theWelcomePage
component. It'll be used from@refinedev/core
instead.
2.5.1
Patch Changes
- #3974
4dcc20d6a60
Thanks @salihozdemir! - Deprecated theWelcomePage
component. It'll be used from@refinedev/core
instead.
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 usesThemedTitle
component from@refinedev/chakra-ui
. You can remove it by settingtitle
prop tofalse
.
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 toAuthPage
'srenderContent
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 tobrand
. -
<CreateButton>
color changed tobrand
. -
<AuthPage>
component uses colors from the theme. -
<AuthPageTitle>
added toAuthPage
- default title with icon added to
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 usesThemedTitle
component from@refinedev/chakra-ui
. You can remove it by settingtitle
prop tofalse
.
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 toAuthPage
'srenderContent
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 tobrand
. -
<CreateButton>
color changed tobrand
. -
<AuthPage>
component uses colors from the theme. -
<AuthPageTitle>
added toAuthPage
- default title with icon added to
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 thevalue
prop was set toundefined
.
2.3.3
Patch Changes
- #3956
c54714ed9ab
Thanks @salihozdemir! - Fixed an issue where the<NumberField />
component would throw an error if thevalue
prop was set toundefined
.
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>
'sonClick
handler was changed to use thewindow.confirm
API to manage the confirmation dialog.
- The
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>
'sonClick
handler was changed to use thewindow.confirm
API to manage the confirmation dialog.
- The
2.3.0
Minor Changes
- #3912
0ffe70308b2
Thanks @alicanerdurmaz! - -title
prop added toAuthPage
'srenderContent
prop to use in the custom content.title
prop added toAuthPage
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 toAuthPage
'srenderContent
prop to use in the custom content.title
prop added toAuthPage
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: Whentitle
prop isfalse
in crud components, the defaulttitle
was rendered. It should not render anything.
2.1.1
Patch Changes
- #3919
dd90bf43d50
Thanks @alicanerdurmaz! - - Fixed: Whentitle
prop isfalse
in crud components, the defaulttitle
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 ifmeta
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 from3.x.x
to4.x.x
.Just
cd
into root folder of your project (wherepackage.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 componentsThis includes
meta
props in buttons andSider
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 theShowButton
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
- #3822
0baa99ba787
Thanks @BatuhanW! - - refine v4 release announcement added to "postinstall". - refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x
Patch Changes
- Updated dependencies [
0baa99ba787
]:- @pankod/refine-react-hook-form@3.39.0
- @pankod/refine-ui-types@0.16.0
1.7.0
Minor Changes
- #3822
0baa99ba787
Thanks @BatuhanW! - - refine v4 release announcement added to "postinstall". - refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x
Patch Changes
- Updated dependencies [
0baa99ba787
]:- @pankod/refine-react-hook-form@3.38.0
- @pankod/refine-ui-types@0.15.0
1.6.6
Patch Changes
03afb3215ef
Thanks @omeraplak! - fix: button disabled states
1.6.5
Patch Changes
03afb3215ef
Thanks @omeraplak! - fix: button disabled states
1.6.4
Patch Changes
89a020942c8
Thanks @omeraplak! - fix: deleted unused chakra-ui exports
1.6.3
Patch Changes
89a020942c8
Thanks @omeraplak! - fix: deleted unused chakra-ui exports
1.6.2
Patch Changes
-
#3220
b867497f469
Thanks @aliemir! - Updated image links inREADME.MD
with CDN -
Updated dependencies [
b867497f469
]:- @pankod/refine-ui-types@0.14.2
1.6.1
Patch Changes
-
#3220
b867497f469
Thanks @aliemir! - Updated image links inREADME.MD
with CDN -
Updated dependencies [
b867497f469
]:- @pankod/refine-ui-types@0.14.1
1.6.0
Minor Changes
- #3159
af2eefb32a4
Thanks @aliemir! - UpdatedLoginPage
andReadyPage
to use refine logos from CDN rather than bundled svg files.
1.5.0
Minor Changes
- #3159
af2eefb32a4
Thanks @aliemir! - UpdatedLoginPage
andReadyPage
to use refine logos from CDN rather than bundled svg files.
1.4.4
Patch Changes
- #3128
db1000a7628
Thanks @alicanerdurmaz! - Fixed:crud
components import path changed to relative path due to export issues on build.
1.4.3
Patch Changes
- #3128
db1000a7628
Thanks @alicanerdurmaz! - Fixed:crud
components import path changed to relative path due to export issues on build.
1.4.2
Patch Changes
- #3109
16549ed3012
Thanks @aliemir! - Updatedswizzle
items and their messages to include extra information and usage examples.
1.4.1
Patch Changes
- #3109
16549ed3012
Thanks @aliemir! - Updatedswizzle
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 withswizzle
feature.- Added
refine.config.js
to configure theswizzle
feature.
- Added
1.3.0
Minor Changes
- #3062
6c2ed708a9a
Thanks @aliemir! - - Updated components and their type imports to make them compatible withswizzle
feature.- Added
refine.config.js
to configure theswizzle
feature.
- Added
1.2.12
Patch Changes
- #3011
593531713c3
Thanks @aliemir! - Fixed<NumberField />
type for missingvalue
prop type, which was erroring out when using<NumberField />
.
1.2.11
Patch Changes
- #3011
593531713c3
Thanks @aliemir! - Fixed<NumberField />
type for missingvalue
prop type, which was erroring out when using<NumberField />
.
1.2.10
Patch Changes
- #2969
a9459550a4
Thanks @omeraplak! - Fixed peerDependencies of packages
1.2.9
Patch Changes
- #2969
a9459550a4
Thanks @omeraplak! - Fixed peerDependencies of packages
1.2.8
Patch Changes
- #2970
513c078df1
Thanks @salihozdemir! - Fixed responsive style for error page.
1.2.7
Patch Changes
- #2970
513c078df1
Thanks @salihozdemir! - Fixed responsive style for error page.
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 toTextField
. - Update
DeleteButton
color scheme. - Add missing props to
RefreshButton
'sIconButton
.
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 toTextField
. - Update
DeleteButton
color scheme. - Add missing props to
RefreshButton
'sIconButton
.
1.2.4
Patch Changes
- #2948
add3da4c76
Thanks @yildirayunlu! - Fix AuthPage styles props and dark theme colors.
1.2.3
Patch Changes
- #2948
add3da4c76
Thanks @yildirayunlu! - Fix AuthPage styles props and dark theme colors.
1.2.2
Patch Changes
59d6bd5b83
Thanks @salihozdemir! - Addedhref
property forBreadcrumbItem
component to be able to fix the Next.js undefinedhref
error.
1.2.1
Patch Changes
59d6bd5b83
Thanks @salihozdemir! - Addedhref
property forBreadcrumbItem
component to be able to fix the Next.js undefinedhref
error.
1.2.0
Minor Changes
89f20b1da4
Thanks @yildirayunlu! - Add inital release of chakra-ui package.
1.1.0
Minor Changes
89f20b1da4
Thanks @yildirayunlu! - Add inital release of chakra-ui package.