v2.0.0

2.0.0 (2024-08-23)

Migration Guide

• Migration Guide (v1 to v2)
• Codemod

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 ssr folder 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-jss internally, hence the dependency is now removed and the react-jss ThemeProvider is no longer rendered as part of our ThemeProvider. If you are relying on react-jss in your application, please make sure to render your own react-jss ThemeProvider.
• We stopped recommending jest as a testing framework over a year ago, thus the jestSetup file is removed. We recommend using cypress instead.

Component Changes

ActionSheet

• ActionSheet: a11yConfig has been renamed to accessibilityAttributes.
• ActionSheet: the portalContainer prop has been removed as it's not needed anymore
• ActionSheet: the showCancelButton has been renamed to hideCancelButton and the logic has been inverted.
• ActionSheet: prop placementType has been renamed to placement, onAfterClose to onClose and onAfterOpen to onOpen

AnalyticalCard

• AnalyticalCard: The AnalyticalCard component has been removed. Please use the Card component 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: selectedFlatRows has been removed from the detail object of onRowSelect.
• AnalyticalTable: The properties and values for the AnalyticalTableSelectionMode enum has been changed. SingleSelect is now Single and MultiSelect is now Multiple.
• AnalyticalTable: a11yConfig has been renamed to accessibilityAttributes.
• AnalyticalTable: The TableScaleWidthMode enum has been removed, please use AnalyticalTableScaleWidthMode instead.
• AnalyticalTable: The TableSelectionBehavior enum has been removed, please use AnalyticalTableSelectionBehavior instead.
• AnalyticalTable: The TableSelectionMode enum has been removed, please use AnalyticalTableSelectionMode instead.
• AnalyticalTable: The TableVisibleRowCountMode enum has been removed, please use AnalyticalTableVisibleRowCountMode instead.
• AnalyticalTable: The alwaysShowSubComponent prop has been removed, please use subComponentsBehavior instead.
• AnalyticalTable: The default value (true) of the sortable prop has been removed, it is now required to explicitly set this prop, if the table should be sortable.
• AnalyticalTable: The canReorder column property has been removed, please use disableDragAndDrop instead.
• AnalyticalTable: When selecting or pressing a row by using the Space key, onRowClick and onRowSelect are now fired on keyup instead of keydown.
• AnalyticalTable: portalContainer has been removed as it's no longer needed due to the Popover API.

Badge

• Badge: the Badge component has been renamed to Tag

ComboBoxGroupItem

• ComboBoxGroupItem: the ComboBoxGroupItem component has been renamed to ComboBoxItemGroup

CustomListItem

• CustomListItem: the CustomListItem has been replaced with the ListItemCustom component

DynamicPage

• DynamicPage The DynamicPage component has been replaced with the ui5-dynamic-page UI5 Web Component, please visit our Migration Guide for more details.
• DynamicPage The DynamicPageHeader component has been replaced with the ui5-dynamic-page-header UI5 Web Component.
• DynamicPage The DynamicPageTitle component has been replaced with the ui5-dynamic-page-title UI5 Web Component.

ExpandableText

• ExpandableText: the inherited props hyphenated and emptyIndicator from the Text have been removed.
• ExpandableText: the portalContainer prop has been removed as it's not needed anymore

FilterBar & FilterGroupItem

• FilterBar: The FilterBar component 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: The detail property of the event now only includes visible and nativeDetail properties. filters and search have been removed.

• FilterBar: onFiltersDialogSave: The detail property of the event now only includes selectedFilterKeys, reorderedFilterKeys and nativeDetail properties. elements, toggledElements, filters, search, orderIds have been removed.

• FilterBar: onFiltersDialogCancel: The event is now a callback instead of a Ui5CustomEvent. It implements the escPressed parameter.

• FilterBar: onFiltersDialogClose: The event is now a callback instead of a Ui5CustomEvent. It implements the closeTrigger parameter.

• FilterBar: onFiltersDialogSelectionChange: The event is now a callback instead of a Ui5CustomEvent. It implements a payload object as parameter.

• FilterBar: onFiltersDialogSearch: The event is now a standard Input onInput event. The detail properties value and element have been removed.

• FilterBar: onClear: The event is now a standard ToolbarButton onClick event. The detail properties filters and search have been removed.

• FilterBar: onGo: The event is now a standard ToolbarButton onClick event. The detail properties elements, filters, search, nativeDetail have been removed.

• FilterBar: onRestore: The event is now a callback instead of a CustomEvent. It implements a payload object as parameter.

• FilterBar: onFiltersDialogOpen (TypeScript): The target of the event is now a ToolbarButton.

• FilterBar: portalContainer has been removed as it's no longer needed due to the Popover API used in the Popover ui5 web component.

• FilterGroupItem: orderId has been removed. Please use filterKey instead.

• FilterGroupItem: For a better aligned API, the visible and visibleInFilterBar (default: true) props have been replaced with hidden and hiddenInFilterBar (no default value).

Form

• Form: The Form component has been replaced with the ui5-form UI5 Web Component, please visit our Migration Guide for more details.

GroupHeaderListItem

• GroupHeaderListItem: the GroupHeaderListItem component has been renamed to ListItemGroup

Loader

• Loader: The deprecated Loader component has been moved to the @ui5/webcomponents-react-compat package. Please use the BusyIndicator instead, 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: onClose is now a plain callback and not a CustomEvent event anymore. It now receives two params: action & escPressed.

Modals

• Modals: modals are now rendered as children of the Modals component instead of being rendered into document.body
• Modals: ThemeProvider: the prop withoutModalsProvider has been removed. For more information, please refer to our Migration Guide.
• Modals: the hooks useShowDialog, useShowPopover, useShowResponsivePopover, useShowMenu, useShowMessageBox and useShowToast have been removed. For more information, please refer to our Migration Guide.

MultiComboBoxGroupItem

• MultiComboBoxGroupItem: the MultiComboBoxGroupItem has been replaced with the MultiComboBoxItemGroup component

NotificationAction

• NotificationAction: the NotificationAction component has been removed. You can use the Menu component instead.

ObjectPage, ObjectPageSection, ObjectPageSubSection & ObjectPageTitle

• ObjectPage: headerContent has been renamed to headerArea and now only accepts the ObjectPageHeader component.
• ObjectPage: headerTitle has been renamed to titleArea and now only accepts the ObjectPageTitle component.
• ObjectPage: footer has been renamed to footerArea.
• ObjectPage: onToggleHeaderContent has been renamed to onToggleHeaderArea
• ObjectPage: onPinnedStateChange has been renamed to `onP...

v2.0.0-rc.3

2.0.0-rc.3 (2024-08-21)

Bug Fixes

• AnalyticalTable: correct CustomElementsScope import path (#6184) (de68b2d), closes #6183
• MessageBox: don't throw error if onClose is 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 into document.body
• FilterBar: The FilterBar component 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: The detail property of the event now only includes visible and nativeDetail properties. filters and search have been removed.
• FilterBar: onFiltersDialogSave: The detail property of the event now only includes selectedFilterKeys, reorderedFilterKeys and nativeDetail properties. elements, toggledElements, filters, search, orderIds have been removed.
• FilterBar: onFiltersDialogCancel: The event is now a callback instead of a Ui5CustomEvent. It implements the escPressed parameter.
• FilterBar: onFiltersDialogClose: The event is now a callback instead of a Ui5CustomEvent. It implements the closeTrigger parameter.
• FilterBar: onFiltersDialogSelectionChange: The event is now a callback instead of a Ui5CustomEvent. It implements a payload object as parameter.
• FilterBar: onFiltersDialogSearch: The event is now a standard Input onInput event. The detail properties value and element have been removed.
• FilterBar: onClear: The event is now a standard ToolbarButton onClick event. The detail properties filters and search have been removed.
• FilterBar: onGo: The event is now a standard ToolbarButton onClick event. The detail properties elements, filters, search, nativeDetail have been removed.
• FilterBar: onRestore: The event is now a callback instead of a CustomEvent. It implements a payload object as parameter.
• FilterBar: onFiltersDialogOpen (TypeScript): The target of the event is now a ToolbarButton.
• FilterBar: portalContainer has been removed as it's no longer needed due to the Popover API used in the Popover ui5 web component.
• FilterGroupItem: orderId has been removed. Please use filterKey instead.

v1.29.8

1.29.8 (2024-08-09)

Bug Fixes

• AnalyticalTable: correct CustomElementsScope import path (#6184) (3d303db), closes #6183
• VariantManagement: apply correct header size for "Manage Views" dialog (329c937)

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-hidden to 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 currentTarget type (#6167) (656ad5a), closes #6136

Features

• update to UI5 Web Components ~2.1.1 (#6151) (80c9a65), closes #5971
• VariantManagement: introduce size prop & improve docs (#6166) (c0184cc)

v1.29.7

1.29.7 (2024-08-07)

Bug Fixes

• DynamicPageHeader: correctly apply width to header (#6174) (2682277), closes #6135 #6087

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-hidden to 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 currentTarget type (#6167) (f41c41b), closes #6136

v1.29.5

1.29.5 (2024-07-26)

Bug Fixes

• DynamicPage/ObjectPage: increase header z-index (#6116) (9379f5a), closes #6107
• ObjectPage: apply correct height for collapsed header spacing div (#6088) (618a42a), closes #6087

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

• codemod: fix import statment for UI5 Web Component enums (#6084) (b3a5aed)

Code Refactoring

• drop support for React 16 & 17 (#6095) (07facf3)

Features

• codemod: basic replacements for DynamicPage (#6086) (93819a9)
• codemod: transform Text wrapping to maxLines (#6085) (a879a9b)
• ObjectPage: refactor component to support ui5wc v2 (#6089) (105b2da)

BREAKING CHANGES

• the minimum required react and react-dom version is now 18.0.0
• ObjectPage: headerContent has been renamed to headerArea and now only accepts the ObjectPageHeader component.
• ObjectPage: headerTitle has been renamed to titleArea and now only accepts the ObjectPageTitle component.
• ObjectPage: footer has been renamed to footerArea.
• ObjectPage: onToggleHeaderContent has been renamed to onToggleHeaderArea
• ObjectPage: onPinnedStateChange has been renamed to onPinButtonToggle
• ObjectPageTitle: actions has been renamed to actionsBar. Instead of single actions, the Toolbar component should now be passed.
• ObjectPageTitle: navigationActions has been renamed to navigationBar. Instead of single actions, the Toolbar component should now be passed.
• ObjectPageTitle: actionsToolbarProps: Since it's now recommended passing the Toolbar component directly, this prop is redundant.
• ObjectPageTitle: navigationActionsToolbarProps: Since it's now recommended passing the Toolbar component 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: remove title from select-all cell (#5955) (c731554), closes #5953
• AnalyticalTable: don't wrap custom header content in Text component (#6022) (455acc1)
• AnalyticalTable: fire row select & click events on keyup instead of keydown (#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 dangerouslySetInnerHTML from 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 onClose type (#5975) (a30867a)
• MessageViewItem: enable details view if titleText is overflowing (#6015) (dba28ce), closes #5990
• MessageView: use correct icon and color for default type (#6016) (0018bba)
• NumericSideIndicator: fix alignment (#6064) (7ecd301)
• ObjectStatus: remove HTMLDivElement from onClick type (#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 AnalyticalCard component (#5887) (1d8b257)

Code Refactoring

• ActionSheet: api alignment (#5956) (5b2ac63)
• AnalyticalTable: remove deprecated props & enums (#6021) (ca13875)
• AnalyticalTable: remove unnecessary portalContainer prop (#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 onClose event (#5989) (ef490f4)
• Modals: replace context with use-sync-external-store (#6042) (e0818c4)
• ObjectPage: api alignment (#6047) (703084b)
• remove all spacing variables (#6009) (c2c3730)
• replace Toolbar with UI5 Web Component (#6061) (bf60767)

Features

• AnalyticalTable: introduce loadingDelay prop (#6025) (6d80fd8)
• charts: introduce loadingDelay prop (#6027) (71fcb40)
• cli: create codemod for UI5 Web Components React v2 migration (#5908) (9f65c98)
• create compat package (#5894) (f4516cc)
• DynamicPage & ObjectPage: use ui5wc DynamicPage & rename ObjectPage components (#5939) (cb684cd)
• Form: replace with UI5 Web Component (#5925) (1e246ee)
• move Loader to compat package & replace with BusyIndicator (#6020) (80d8c0b)
• ObjectPage: introduce preserveHeaderStateOnClick prop (#6049) (c3c6f06)
• RadialChart: introduce `loading...

v1.29.4

1.29.4 (2024-07-10)

Bug Fixes

• apply correct scoping for internal ui5wc CSS vars (#6059) (b7200cc), closes #6051
• DynamicPage: always show focused element when Tabbing in content (#6003) (6d61f24), closes #6000
• MessageViewItem: enable details view if titleText is overflowing (#6015) (1bd5250), closes #5990