A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
APACHE-2.0 License
Bot releases are visible (Hide)
Published by ui5-webcomponents-react-bot 26 days ago
Published by ui5-webcomponents-react-bot 26 days ago
Published by ui5-webcomponents-react-bot about 2 months ago
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
.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.jest
as a testing framework over a year ago, thus the jestSetup
file is removed. We recommend using cypress instead.a11yConfig
has been renamed to accessibilityAttributes
.portalContainer
prop has been removed as it's not needed anymoreshowCancelButton
has been renamed to hideCancelButton
and the logic has been inverted.placementType
has been renamed to placement
, onAfterClose
to onClose
and onAfterOpen
to onOpen
AnalyticalCard
component has been removed. Please use the Card
component instead.selectedFlatRows
has been removed from the detail
object of onRowSelect
.AnalyticalTableSelectionMode
enum has been changed. SingleSelect
is now Single
and MultiSelect
is now Multiple
.a11yConfig
has been renamed to accessibilityAttributes
.TableScaleWidthMode
enum has been removed, please use AnalyticalTableScaleWidthMode
instead.TableSelectionBehavior
enum has been removed, please use AnalyticalTableSelectionBehavior
instead.TableSelectionMode
enum has been removed, please use AnalyticalTableSelectionMode
instead.TableVisibleRowCountMode
enum has been removed, please use AnalyticalTableVisibleRowCountMode
instead.alwaysShowSubComponent
prop has been removed, please use subComponentsBehavior
instead.true
) of the sortable
prop has been removed, it is now required to explicitly set this prop, if the table should be sortable.canReorder
column property has been removed, please use disableDragAndDrop
instead.onRowClick
and onRowSelect
are now fired on keyup
instead of keydown
.portalContainer
has been removed as it's no longer needed due to the Popover API.Badge
component has been renamed to Tag
ComboBoxGroupItem
component has been renamed to ComboBoxItemGroup
CustomListItem
has been replaced with the ListItemCustom
componentDynamicPage
component has been replaced with the ui5-dynamic-page
UI5 Web Component, please visit our Migration Guide for more details.DynamicPageHeader
component has been replaced with the ui5-dynamic-page-header
UI5 Web Component.DynamicPageTitle
component has been replaced with the ui5-dynamic-page-title
UI5 Web Component.hyphenated
and emptyIndicator
from the Text
have been removed.portalContainer
prop has been removed as it's not needed anymoreFilterBar: 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
component has been replaced with the ui5-form
UI5 Web Component, please visit our Migration Guide for more details.GroupHeaderListItem
component has been renamed to ListItemGroup
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.onClose
is now a plain callback and not a CustomEvent
event anymore. It now receives two params: action
& escPressed
.Modals
component instead of being rendered into document.body
withoutModalsProvider
has been removed. For more information, please refer to our Migration Guide.useShowDialog
, useShowPopover
, useShowResponsivePopover
, useShowMenu
, useShowMessageBox
and useShowToast
have been removed. For more information, please refer to our Migration Guide.MultiComboBoxGroupItem
has been replaced with the MultiComboBoxItemGroup
componentNotificationAction
component has been removed. You can use the Menu
component instead.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
ObjectPage: headerTitle
now only accepts the ObjectPageTitle
component instead of the DynamicPageTitle
.
ObjectPage: headerContent
now only accepts the ObjectPageHeader
component instead of the DynamicPageTitle
.
ObjectPage: a11yConfig.dynamicPageAnchorBar
has been renamed to a11yConfig.objectPageAnchorBar
ObjectPage: the props showHideHeaderButton
and showTitleInHeaderContent
have been removed.
ObjectPage: the prop alwaysShowContentHeader
has been renamed to headerPinned
ObjectPage: the prop headerContentPinnable
has been renamed to hidePinButton
and its logic has been inverted. The pin button is now shown by default.
ObjectPage: the prop showSubHeaderRight
has been removed as it's not defined by design anymore.
ObjectPage: a11yConfig
has been renamed to accessibilityAttributes
.
ObjectPage (TypeScript): replace headerTitle
type with ReactElement<DynamicPageTitlePropTypes>
ObjectPage (TypeScript): replace headerContent
type with ReactElement<DynamicPageHeaderPropTypes>
ObjectPage (TypeScript): replace image
type with string | ReactElement<AvatarPropTypes>
ObjectPageSection: the prop titleText
is now required.
ObjectPageSection: the default value true
for the prop titleTextUppercase
has been removed.
ObjectPageSubSection: the prop titleText
is now required.
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.
active
has been renamed to interactive
.HTMLDivElement
type has been removed from the onClick
handler.mode
to selectionMode
to be aligned with new List API, onAfterClose
to onClose
and onAfterOpen
to onOpen
SelectMenu
and SelectMenuOption
components have been removed. The Select
and Option
now allow custom content.StandardListItem
has been replaced with the ListItemStandard
componentSuggestionGroupItem
component has been replaced by the SuggestionItemGroup
componentTableColumn
component has been replaced with the TableHeaderCell
componentTableGroupRow
component has been deletedText
component has been replaced with the ui5-text
web component, please visit our Migration Guide for more details.GlobalStyleClasses
enum has been removedToolbar
component and its related components have been moved to the @ui5/webcomponents-react-compat
package.ToolbarV2
component has been renamed to Toolbar
ToolbarSpacerV2
component has been renamed to ToolbarSpacer
ToolbarSeparatorV2
component has been renamed to ToolbarSeparator
portalContainer
prop has been removed as it is no longer needed.MessageBoxActions
enum has been renamed to MessageBoxAction
MessageBoxTypes
enum has been renamed to MessageBoxType
Themes
enum has been renamed to Theme
and the deprecated "Belize" (sap_belize
) theme family has been removeddangerouslySetInnerHTML
type has been removedMicroBarChart
component as been removed as this is a legacy component which is not covered by design specs anymore.useResponsiveContentPadding
has been removed. You can achieve the same look and feel by using the responsive content padding from Common CSS.spacing
variables have been removed. You can use common CSS classes as a substitute for most variables. For more information, please refer to our Migration Guide.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)
ObjectStatus: remove HTMLDivElement
from onClick
type (#6011) (671cfaa)
use new JSX transform in preparation for React 19 (#5837) (7dcad64)
codemod: fix import statment for UI5 Web Component enums (#6084) (b3a5aed)
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
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
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)
add runtime index to global Modal and Style store (#6248) (8184b4e)
AnalyticalTable: ensure loading indicator displays correctly across all browsers (#6244) (4fb6008), closes #6243
AnalyticalTable: remove deprecated props & enums (#6021) (ca13875)
AnalyticalTable: remove unnecessary portalContainer
prop (#6039) (7e19fbb)
make titleText required for object page sections (#6014) (10e50a2)
Modals: replace context with use-sync-external-store (#6042) (e0818c4)
FilterBar: remove reference copying of filter/input elements (#6214) (4473118), closes #5652
Modals: avoid unnecessary use of createPortal
(#6242) (a571981)
AnalyticalTable: remove selectedFlatRows
& add rowsById
to onRowSelect
(#6255) (ee2785c)
AnalyticalTable: introduce loadingDelay
prop (#6025) (6d80fd8)
cli: create codemod for UI5 Web Components React v2 migration (#5908) (9f65c98)
DynamicPage & ObjectPage: use ui5wc DynamicPage
& rename ObjectPage
components (#5939) (cb684cd)
move Loader
to compat
package & replace with BusyIndicator
(#6020) (80d8c0b)
ObjectPage: introduce preserveHeaderStateOnClick
prop (#6049) (c3c6f06)
RadialChart: introduce loading
& loadingDelay
props (#6028) (3891437)
support objects and references as Web Component props (#5957) (f41d32b)
ThemeProvider: apply Fiori scrollbar styling to all scroll containers (#5978) (9a611fd)
codemod: basic replacements for DynamicPage
(#6086) (93819a9)
codemod: transform Text wrapping
to maxLines
(#6085) (a879a9b)
ObjectPage: refactor component to support ui5wc v2 (#6089) (105b2da)
update to UI5 Web Components ~2.1.1 (#6151) (80c9a65), closes #5971
VariantManagement: introduce size
prop & improve docs (#6166) (c0184cc)
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
AnalyticalTable - TypeScript: improve instance & prop types (#6256) (796f7c1)
Published by ui5-webcomponents-react-bot about 2 months ago
CustomElementsScope
import path (#6184) (de68b2d), closes #6183
onClose
is not passed (#6226) (7981491), closes #6215
createPortal
(#6242) (a571981)Modals
document.body
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).onToggleFilters
: The detail
property of the event now only includes visible
and nativeDetail
properties. filters
and search
have been removed.onFiltersDialogSave
: The detail
property of the event now only includes selectedFilterKeys
, reorderedFilterKeys
and nativeDetail
properties. elements
, toggledElements
, filters
, search
, orderIds
have been removed.onFiltersDialogCancel
: The event is now a callback instead of a Ui5CustomEvent
. It implements the escPressed
parameter.onFiltersDialogClose
: The event is now a callback instead of a Ui5CustomEvent
. It implements the closeTrigger
parameter.onFiltersDialogSelectionChange
: The event is now a callback instead of a Ui5CustomEvent
. It implements a payload object as parameter.onFiltersDialogSearch
: The event is now a standard Input
onInput
event. The detail
properties value
and element
have been removed.onClear
: The event is now a standard ToolbarButton
onClick
event. The detail
properties filters
and search
have been removed.onGo
: The event is now a standard ToolbarButton
onClick
event. The detail
properties elements
, filters
, search
, nativeDetail
have been removed.onRestore
: The event is now a callback instead of a CustomEvent
. It implements a payload object as parameter.onFiltersDialogOpen (TypeScript)
: The target of the event is now a ToolbarButton
.portalContainer
has been removed as it's no longer needed due to the Popover API used in the Popover
ui5 web component.orderId
has been removed. Please use filterKey
instead.Published by ui5-webcomponents-react-bot 2 months ago
[!NOTE]
TheFilterBar
is not yet supporting version 2.0.0!
aria-hidden
to multi selection checkboxes (#6134) (082d1c0), closes #6133
Text
(#6123) (277120b)currentTarget
type (#6167) (656ad5a), closes #6136
Published by ui5-webcomponents-react-bot 2 months ago
aria-hidden
to multi selection checkboxes (#6134) (24e5c98), closes #6133
width
(#6163) (5a968b9), closes #6135
currentTarget
type (#6167) (f41c41b), closes #6136
Published by ui5-webcomponents-react-bot 3 months ago
Published by ui5-webcomponents-react-bot 3 months ago
[!NOTE]
TheFilterBar
is not yet supporting version 2.0.0!
DynamicPage
(#6086) (93819a9)wrapping
to maxLines
(#6085) (a879a9b)react
and react-dom
version is now 18.0.0headerContent
has been renamed to headerArea
and now only accepts the ObjectPageHeader
component.headerTitle
has been renamed to titleArea
and now only accepts the ObjectPageTitle
component.footer
has been renamed to footerArea
.onToggleHeaderContent
has been renamed to onToggleHeaderArea
onPinnedStateChange
has been renamed to onPinButtonToggle
actions
has been renamed to actionsBar
. Instead of single actions, the Toolbar
component should now be passed.navigationActions
has been renamed to navigationBar
. Instead of single actions, the Toolbar
component should now be passed.actionsToolbarProps
: Since it's now recommended passing the Toolbar
component directly, this prop is redundant.navigationActionsToolbarProps
: Since it's now recommended passing the Toolbar
component directly, this prop is redundant.Published by ui5-webcomponents-react-bot 3 months ago
[!NOTE]
TheObjectPage
andFilterBar
are not yet supporting version 2.0.0!
useRowDisableSelection
: remove title
from select-all cell (#5955) (c731554), closes #5953
Text
component (#6022) (455acc1)keyup
instead of keydown
(#6013) (f1386f8), closes #4388
dangerouslySetInnerHTML
from types (#6002) (f5f9101)onClose
type (#5975) (a30867a)titleText
is overflowing (#6015) (dba28ce), closes #5990
HTMLDivElement
from onClick
type (#6011) (671cfaa)jestSetup
(#5906) (2da6d60)react-jss
(#5907) (5342836)AnalyticalCard
component (#5887) (1d8b257)portalContainer
prop (#6039) (7e19fbb)onClose
event (#5989) (ef490f4)spacing
variables (#6009) (c2c3730)Toolbar
with UI5 Web Component (#6061) (bf60767)loadingDelay
prop (#6025) (6d80fd8)loadingDelay
prop (#6027) (71fcb40)DynamicPage
& rename ObjectPage
components (#5939) (cb684cd)Loader
to compat
package & replace with BusyIndicator
(#6020) (80d8c0b)preserveHeaderStateOnClick
prop (#6049) (c3c6f06)loading
& loadingDelay
props (#6028) (3891437)Toolbar
component and its related components have been moved to the @ui5/webcomponents-react-compat
package.ToolbarV2
component has been renamed to Toolbar
ToolbarSpacerV2
component has been renamed to ToolbarSpacer
ToolbarSeparatorV2
component has been renamed to ToolbarSeparator
showHideHeaderButton
and showTitleInHeaderContent
have been removed.alwaysShowContentHeader
has been renamed to headerPinned
headerContentPinnable
has been renamed to hidePinButton
and its logic has been inverted. The pin button is now shown by default.showSubHeaderRight
has been removed as it's not defined by design anymore.withoutModalsProvider
has been removed. For more information, please refer to our Migration Guide.useShowDialog
, useShowPopover
, useShowResponsivePopover
, useShowMenu
, useShowMessageBox
and useShowToast
have been removed. For more information, please refer to our Migration Guide.a11yConfig
has been renamed to accessibilityAttributes
.AnalyticalTableSelectionMode
enum has been changed. SingleSelect
is now Single
and MultiSelect
is now Multiple
.a11yConfig
has been renamed to accessibilityAttributes
.a11yConfig
has been renamed to accessibilityAttributes
.active
has been renamed to interactive
.portalContainer
has been removed as it's no longer needed due to the Popover API.SuggestionGroupItem
component has been replaced by the SuggestionItemGroup
componentTableScaleWidthMode
enum has been removed, please use AnalyticalTableScaleWidthMode
instead.TableSelectionBehavior
enum has been removed, please use AnalyticalTableSelectionBehavior
instead.TableSelectionMode
enum has been removed, please use AnalyticalTableSelectionMode
instead.TableVisibleRowCountMode
enum has been removed, please use AnalyticalTableVisibleRowCountMode
instead.alwaysShowSubComponent
prop has been removed, please use subComponentsBehavior
instead.true
) of the sortable
prop has been removed, it is now required to explicitly set this prop, if the table should be sortable.canReorder
column property has been removed, please use disableDragAndDrop
instead.Loader
component has been moved to the @ui5/webcomponents-react-compat
package. Please use theBusyIndicator
instead, as it's now the only loading indicator that is supported by our UX guidelines. Please visit our Migration Guide for more details.visible
and visibleInFilterBar
(default: true
) props have been replaced with hidden
and hiddenInFilterBar
(no default value).titleText
is now required.true
for the prop titleTextUppercase
has been removed.titleText
is now required.onRowClick
and onRowSelect
are now fired on keyup
instead of keydown
.HTMLDivElement
type has been removed from the onClick
handler.Text
component has been replaced with the ui5-text
web component, please visit our Migration Guide for more details.hyphenated
and emptyIndicator
from the Text
have been removed.portalContainer
prop has been removed as it's not needed anymoredangerouslySetInnerHTML
type has been removedGlobalStyleClasses
enum has been removedonClose
is now a plain callback and not aCustomEvent
event anymore. It now receives two params: action
&escPressed
.MessageBoxActions
enum has been renamed to MessageBoxAction
MessageBoxTypes
enum has been renamed to MessageBoxType
Themes
enum has been renamed to Theme
and the deprecated "Belize" (sap_belize
) theme family has been removedportalContainer
prop has been removed as it's not needed anymoreshowCancelButton
has been renamed to hideCancelButton
and the logic has been inverted.StandardListItem
has been replaced with the ListItemStandard
componentCustomListItem
has been replaced with the ListItemCustom
componentMultiComboBoxGroupItem
has been replaced with the MultiComboBoxItemGroup
componentTableGroupRow
component has been deletedTableColumn
component has been replaced with the TableHeaderCell
componentportalContainer
prop has been removed as it is no longer needed.DynamicPage
component has been replaced with the ui5-dynamic-page
UI5 Web Component, please visit our Migration Guide for more details.DynamicPageHeader
component has been replaced with the ui5-dynamic-page-header
UI5 Web Component, please visit our Migration Guide for more details.DynamicPageTitle
component has been replaced with the ui5-dynamic-page-title
UI5 Web Component, please visit our Migration Guide for more details.headerTitle
now only accepts theObjectPageTitle
component instead of the DynamicPageTitle
.headerContent
now only accepts theObjectPageHeader
component instead of the DynamicPageTitle
.a11yConfig.dynamicPageAnchorBar
hasa11yConfig.objectPageAnchorBar
Form
component has been replaced with the ui5-form
UI5 Web Component, please visit our Migration Guide for more details.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.useResponsiveContentPadding
has been removed. You can achieve the same look and feel by using the responsive content padding from Common CSS.jest
as a testing framework over a year ago, thus the jestSetup
file is removed. We recommend using cypress instead.AnalyticalCard
component has been removed. Please use the Card
component instead.ActionSheet
: prop placementType
has been renamed to placement
, onAfterClose
to onClose
and onAfterOpen
to onOpen
Badge
component has been renamed to Tag
ComboBoxGroupItem
component has been renamed to ComboBoxItemGroup
GroupHeaderListItem
component has been renamed to ListItemGroup
NotificationAction
component has been removed. You can use the Menu
component instead.SelectMenu
and SelectMenuOption
components have been removed. The Select
and Option
now allow custom content.SelectDialog
: renamed prop mode
to selectionMode
to be aligned with new List API, onAfterClose
to onClose
and onAfterOpen
to onOpen
headerTitle
type with ReactElement<DynamicPageTitlePropTypes>
headerContent
type with ReactElement<DynamicPageHeaderPropTypes>
image
type with string | ReactElement<AvatarPropTypes>
Published by ui5-webcomponents-react-bot 4 months ago
useRowDisableSelection
: remove title
from select-all cell (#5955) (97ef653), closes #5953