Releases: UI5/webcomponents-react
v2.0.1
v2.0.0
2.0.0 (2024-08-23)
Migration Guide
BREAKING CHANGES
General Changes
- ❗ Updated UI5 Web Components to v2. All breaking changes apply to this project as well. ❗
- ❗ The minimum required react and react-dom version is now 18.0.0 ❗
- UI5 Web Components Enums are no longer exported
- the dedicated build for Server Side Rendering in the
ssrfolder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from@ui5/webcomponents-react. - UI5 Web Components for React is no longer relying on
react-jssinternally, hence the dependency is now removed and thereact-jssThemeProvider is no longer rendered as part of ourThemeProvider. If you are relying onreact-jssin your application, please make sure to render your ownreact-jssThemeProvider. - We stopped recommending
jestas a testing framework over a year ago, thus thejestSetupfile is removed. We recommend using cypress instead.
Component Changes
ActionSheet
- ActionSheet:
a11yConfighas been renamed toaccessibilityAttributes. - ActionSheet: the
portalContainerprop has been removed as it's not needed anymore - ActionSheet: the
showCancelButtonhas been renamed tohideCancelButtonand the logic has been inverted. - ActionSheet: prop
placementTypehas been renamed toplacement,onAfterClosetoonCloseandonAfterOpentoonOpen
AnalyticalCard
- AnalyticalCard: The
AnalyticalCardcomponent has been removed. Please use theCardcomponent instead.
AnalyticalTable
- AnalyticalTable - TypeScript: The internal table instance types were updated, leading to stricter types, so depending on your implementation, you might encounter ts-errors.
- AnalyticalTable:
selectedFlatRowshas been removed from thedetailobject ofonRowSelect. - AnalyticalTable: The properties and values for the
AnalyticalTableSelectionModeenum has been changed.SingleSelectis nowSingleandMultiSelectis nowMultiple. - AnalyticalTable:
a11yConfighas been renamed toaccessibilityAttributes. - AnalyticalTable: The
TableScaleWidthModeenum has been removed, please useAnalyticalTableScaleWidthModeinstead. - AnalyticalTable: The
TableSelectionBehaviorenum has been removed, please useAnalyticalTableSelectionBehaviorinstead. - AnalyticalTable: The
TableSelectionModeenum has been removed, please useAnalyticalTableSelectionModeinstead. - AnalyticalTable: The
TableVisibleRowCountModeenum has been removed, please useAnalyticalTableVisibleRowCountModeinstead. - AnalyticalTable: The
alwaysShowSubComponentprop has been removed, please usesubComponentsBehaviorinstead. - AnalyticalTable: The default value (
true) of thesortableprop has been removed, it is now required to explicitly set this prop, if the table should be sortable. - AnalyticalTable: The
canReordercolumn property has been removed, please usedisableDragAndDropinstead. - AnalyticalTable: When selecting or pressing a row by using the Space key,
onRowClickandonRowSelectare now fired onkeyupinstead ofkeydown. - AnalyticalTable:
portalContainerhas been removed as it's no longer needed due to the Popover API.
Badge
- Badge: the
Badgecomponent has been renamed toTag
ComboBoxGroupItem
- ComboBoxGroupItem: the
ComboBoxGroupItemcomponent has been renamed toComboBoxItemGroup
CustomListItem
- CustomListItem: the
CustomListItemhas been replaced with theListItemCustomcomponent
DynamicPage
- DynamicPage The
DynamicPagecomponent has been replaced with theui5-dynamic-pageUI5 Web Component, please visit our Migration Guide for more details. - DynamicPage The
DynamicPageHeadercomponent has been replaced with theui5-dynamic-page-headerUI5 Web Component. - DynamicPage The
DynamicPageTitlecomponent has been replaced with theui5-dynamic-page-titleUI5 Web Component.
ExpandableText
- ExpandableText: the inherited props
hyphenatedandemptyIndicatorfrom theTexthave been removed. - ExpandableText: the
portalContainerprop has been removed as it's not needed anymore
FilterBar & FilterGroupItem
-
FilterBar: The
FilterBarcomponent was completely overhauled and references of input elements aren’t copied to the filters dialog anymore, also internal logic for reordering and selection has been removed, meaning it’s necessary to control their values manually (e.g. via React state). -
FilterBar:
onToggleFilters: Thedetailproperty of the event now only includesvisibleandnativeDetailproperties.filtersandsearchhave been removed. -
FilterBar:
onFiltersDialogSave: Thedetailproperty of the event now only includesselectedFilterKeys,reorderedFilterKeysandnativeDetailproperties.elements,toggledElements,filters,search,orderIdshave been removed. -
FilterBar:
onFiltersDialogCancel: The event is now a callback instead of aUi5CustomEvent. It implements theescPressedparameter. -
FilterBar:
onFiltersDialogClose: The event is now a callback instead of aUi5CustomEvent. It implements thecloseTriggerparameter. -
FilterBar:
onFiltersDialogSelectionChange: The event is now a callback instead of aUi5CustomEvent. It implements a payload object as parameter. -
FilterBar:
onFiltersDialogSearch: The event is now a standardInputonInputevent. Thedetailpropertiesvalueandelementhave been removed. -
FilterBar:
onClear: The event is now a standardToolbarButtononClickevent. Thedetailpropertiesfiltersandsearchhave been removed. -
FilterBar:
onGo: The event is now a standardToolbarButtononClickevent. Thedetailpropertieselements,filters,search,nativeDetailhave been removed. -
FilterBar:
onRestore: The event is now a callback instead of aCustomEvent. It implements a payload object as parameter. -
FilterBar:
onFiltersDialogOpen (TypeScript): The target of the event is now aToolbarButton. -
FilterBar:
portalContainerhas been removed as it's no longer needed due to the Popover API used in thePopoverui5 web component. -
FilterGroupItem:
orderIdhas been removed. Please usefilterKeyinstead. -
FilterGroupItem: For a better aligned API, the
visibleandvisibleInFilterBar(default:true) props have been replaced withhiddenandhiddenInFilterBar(no default value).
Form
- Form: The
Formcomponent has been replaced with theui5-formUI5 Web Component, please visit our Migration Guide for more details.
GroupHeaderListItem
- GroupHeaderListItem: the
GroupHeaderListItemcomponent has been renamed toListItemGroup
Loader
- Loader: The deprecated
Loadercomponent has been moved to the@ui5/webcomponents-react-compatpackage. Please use theBusyIndicatorinstead, as it's now the only loading indicator that is supported by our UX guidelines. Please visit our Migration Guide for more details.
MessageBox
- MessageBox:
onCloseis now a plain callback and not aCustomEventevent anymore. It now receives two params:action&escPressed.
Modals
- Modals: modals are now rendered as children of the
Modalscomponent instead of being rendered intodocument.body - Modals: ThemeProvider: the prop
withoutModalsProviderhas been removed. For more information, please refer to our Migration Guide. - Modals: the hooks
useShowDialog,useShowPopover,useShowResponsivePopover,useShowMenu,useShowMessageBoxanduseShowToasthave been removed. For more information, please refer to our Migration Guide.
MultiComboBoxGroupItem
- MultiComboBoxGroupItem: the
MultiComboBoxGroupItemhas been replaced with theMultiComboBoxItemGroupcomponent
NotificationAction
- NotificationAction: the
NotificationActioncomponent has been removed. You can use theMenucomponent instead.
ObjectPage, ObjectPageSection, ObjectPageSubSection & ObjectPageTitle
- ObjectPage:
headerContenthas been renamed toheaderAreaand now only accepts theObjectPageHeadercomponent. - ObjectPage:
headerTitlehas been renamed totitleAreaand now only accepts theObjectPageTitlecomponent. - ObjectPage:
footerhas been renamed tofooterArea. - ObjectPage:
onToggleHeaderContenthas been renamed toonToggleHeaderArea - ObjectPage:
onPinnedStateChangehas been renamed to `onP...
v2.0.0-rc.3
2.0.0-rc.3 (2024-08-21)
Bug Fixes
- AnalyticalTable: correct
CustomElementsScopeimport path (#6184) (de68b2d), closes #6183 - MessageBox: don't throw error if
onCloseis not passed (#6226) (7981491), closes #6215 - VariantManagement: apply correct header size for "Manage Views" dialog (#6185) (8b01af4)
Code Refactoring
- FilterBar: remove reference copying of filter/input elements (#6214) (4473118), closes #5652
- Modals: avoid unnecessary use of
createPortal(#6242) (a571981)
Features
- expose CLI package for creating web component wrappers (#6212) (28b14d9), closes #5046
- react 19: bind web components event handlers using react lifecycle (#6169) (70f9f27)
- register current runtime version in window (#6222) (367628c), closes #6210
BREAKING CHANGES
- Modals: modals are now rendered as children of the
Modals
component instead of being rendered intodocument.body - FilterBar: The
FilterBarcomponent was completely overhauled and references of input elements aren’t copied to the filters dialog anymore, also internal logic for reordering and selection has been removed, meaning it’s necessary to control their values manually (e.g. via React state). - FilterBar:
onToggleFilters: Thedetailproperty of the event now only includesvisibleandnativeDetailproperties.filtersandsearchhave been removed. - FilterBar:
onFiltersDialogSave: Thedetailproperty of the event now only includesselectedFilterKeys,reorderedFilterKeysandnativeDetailproperties.elements,toggledElements,filters,search,orderIdshave been removed. - FilterBar:
onFiltersDialogCancel: The event is now a callback instead of aUi5CustomEvent. It implements theescPressedparameter. - FilterBar:
onFiltersDialogClose: The event is now a callback instead of aUi5CustomEvent. It implements thecloseTriggerparameter. - FilterBar:
onFiltersDialogSelectionChange: The event is now a callback instead of aUi5CustomEvent. It implements a payload object as parameter. - FilterBar:
onFiltersDialogSearch: The event is now a standardInputonInputevent. Thedetailpropertiesvalueandelementhave been removed. - FilterBar:
onClear: The event is now a standardToolbarButtononClickevent. Thedetailpropertiesfiltersandsearchhave been removed. - FilterBar:
onGo: The event is now a standardToolbarButtononClickevent. Thedetailpropertieselements,filters,search,nativeDetailhave been removed. - FilterBar:
onRestore: The event is now a callback instead of aCustomEvent. It implements a payload object as parameter. - FilterBar:
onFiltersDialogOpen (TypeScript): The target of the event is now aToolbarButton. - FilterBar:
portalContainerhas been removed as it's no longer needed due to the Popover API used in thePopoverui5 web component. - FilterGroupItem:
orderIdhas been removed. Please usefilterKeyinstead.
v1.29.8
v2.0.0-rc.2
2.0.0-rc.2 (2024-08-07)
Note
The FilterBar is not yet supporting version 2.0.0!
Bug Fixes
- AnalyticalTable: add "Filter" text to column popover (#6164) (c035703), closes #6132
- AnalyticalTable: add
aria-hiddento multi selection checkboxes (#6134) (082d1c0), closes #6133 - AnalyticalTable: allow selecting all rows via keyboard (#6168) (65de580), closes #6110
- AnalyticalTable: fix pop-in content styles (#6170) (5f7d56b), closes #5977
- codemod: improve replacements for
Text(#6123) (277120b) - deps: update dependency @tanstack/react-virtual to v3.8.4 (main) (#6137) (ef1650b)
- ObjectPage: increase header z-index (#6117) (e9aeb63), closes #6116
- ObjectPageTitle: prevent styling race condition when using static css bundle (#6115) (f4c4ebb)
- UI5CustomEvent - TypeScript: correctly
currentTargettype (#6167) (656ad5a), closes #6136
Features
v1.29.7
v1.29.6
1.29.6 (2024-08-07)
Bug Fixes
- AnalyticalTable: add "Filter" text to column popover (#6165) (153f91b), closes #6132
- AnalyticalTable: add
aria-hiddento multi selection checkboxes (#6134) (24e5c98), closes #6133 - AnalyticalTable: allow selecting all rows via keyboard (#6168) (4650995), closes #6110
- AnalyticalTable: fix pop-in content styles (#6170) (041008f), closes #5977
- deps: update ui5 web components to v1.24.8 (v1.29.x) (patch) (#6160) (e327161)
- DynamicPageHeader: remove
width(#6163) (5a968b9), closes #6135 - UI5CustomEvent - TypeScript: correctly
currentTargettype (#6167) (f41c41b), closes #6136
v1.29.5
v2.0.0-rc.1
2.0.0-rc.1 (2024-07-19)
Note
The FilterBar is not yet supporting version 2.0.0!
Bug Fixes
Code Refactoring
Features
- codemod: basic replacements for
DynamicPage(#6086) (93819a9) - codemod: transform Text
wrappingtomaxLines(#6085) (a879a9b) - ObjectPage: refactor component to support ui5wc v2 (#6089) (105b2da)
BREAKING CHANGES
- the minimum required
reactandreact-domversion is now 18.0.0 - ObjectPage:
headerContenthas been renamed toheaderAreaand now only accepts theObjectPageHeadercomponent. - ObjectPage:
headerTitlehas been renamed totitleAreaand now only accepts theObjectPageTitlecomponent. - ObjectPage:
footerhas been renamed tofooterArea. - ObjectPage:
onToggleHeaderContenthas been renamed toonToggleHeaderArea - ObjectPage:
onPinnedStateChangehas been renamed toonPinButtonToggle - ObjectPageTitle:
actionshas been renamed toactionsBar. Instead of single actions, theToolbarcomponent should now be passed. - ObjectPageTitle:
navigationActionshas been renamed tonavigationBar. Instead of single actions, theToolbarcomponent should now be passed. - ObjectPageTitle:
actionsToolbarProps: Since it's now recommended passing theToolbarcomponent directly, this prop is redundant. - ObjectPageTitle:
navigationActionsToolbarProps: Since it's now recommended passing theToolbarcomponent directly, this prop is redundant.
v2.0.0-rc.0
2.0.0-rc.0 (2024-07-11)
Note
The ObjectPage and FilterBar are not yet supporting version 2.0.0!
Bug Fixes
- AnalyticalTable -
useRowDisableSelection: removetitlefrom select-all cell (#5955) (c731554), closes #5953 - AnalyticalTable: don't wrap custom header content in
Textcomponent (#6022) (455acc1) - AnalyticalTable: fire row select & click events on
keyupinstead ofkeydown(#6013) (f1386f8), closes #4388 - AnalyticalTable: fix custom header alignment (#6068) (c4a49e4)
- AnalyticalTable: improve focus border alignment (#5944) (18aeb52), closes #5898
- apply correct scoping for internal ui5wc CSS vars (#6057) (3822bee), closes #6051
- CommonProps - TypeScript: remove
dangerouslySetInnerHTMLfrom types (#6002) (f5f9101) - deps: update dependency @tanstack/react-virtual to v3.5.1 (#5883) (2db3ca9)
- deps: update dependency react-content-loader to v7.0.1 (#5899) (5ed11e9)
- deps: update dependency react-content-loader to v7.0.2 (#5909) (cb79434)
- deps: update react monorepo to v19.0.0-rc-fb9a90fa48-20240614 (patch) (#5928) (863055a)
- MessageBox - TypeScript: adjust
onClosetype (#5975) (a30867a) - MessageViewItem: enable details view if
titleTextis overflowing (#6015) (dba28ce), closes #5990 - MessageView: use correct icon and color for default type (#6016) (0018bba)
- NumericSideIndicator: fix alignment (#6064) (7ecd301)
- ObjectStatus: remove
HTMLDivElementfromonClicktype (#6011) (671cfaa) - use new JSX transform in preparation for React 19 (#5837) (7dcad64)
chore
- remove
jestSetup(#5906) (2da6d60) - remove
react-jss(#5907) (5342836) - remove deprecated
AnalyticalCardcomponent (#5887) (1d8b257)
Code Refactoring
- ActionSheet: api alignment (#5956) (5b2ac63)
- AnalyticalTable: remove deprecated props & enums (#6021) (ca13875)
- AnalyticalTable: remove unnecessary
portalContainerprop (#6039) (7e19fbb) - enums: harmonize enum names (#5970) (98b9bb7)
- FilterGroupItem: api alignment (#6012) (0e6a326)
- harmonize prop/enum names (#6040) (4b4815b)
- make titleText required for object page sections (#6014) (10e50a2)
- MessageBox: refactor
onCloseevent (#5989) (ef490f4) - Modals: replace context with use-sync-external-store (#6042) (e0818c4)
- ObjectPage: api alignment (#6047) (703084b)
- remove all
spacingvariables (#6009) (c2c3730) - replace
Toolbarwith UI5 Web Component (#6061) (bf60767)
Features
- AnalyticalTable: introduce
loadingDelayprop (#6025) (6d80fd8) - charts: introduce
loadingDelayprop (#6027) (71fcb40) - cli: create codemod for UI5 Web Components React v2 migration (#5908) (9f65c98)
- create compat package (#5894) (f4516cc)
- DynamicPage & ObjectPage: use ui5wc
DynamicPage& renameObjectPagecomponents (#5939) (cb684cd) - Form: replace with UI5 Web Component (#5925) (1e246ee)
- move
Loadertocompatpackage & replace withBusyIndicator(#6020) (80d8c0b) - ObjectPage: introduce
preserveHeaderStateOnClickprop (#6049) (c3c6f06) - RadialChart: introduce `loading...