Skip to content

Commit c0a1517

Browse files
Lukas742Lukas742
authored
feat: update to @ui5/[email protected] (#5306)
1 parent 26029f0 commit c0a1517

File tree

19 files changed

+164
-99
lines changed

19 files changed

+164
-99
lines changed

‎.github/workflows/test.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ jobs:
2727
uses: actions/checkout@v4
2828

2929
- name: Cypress run
30-
uses: cypress-io/github-action@v5
30+
uses: cypress-io/github-action@v6
3131
with:
3232
browser: chrome
3333
component: true

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737
"@storybook/react": "7.6.3",
3838
"@storybook/react-vite": "7.6.3",
3939
"@storybook/theming": "7.6.3",
40-
"@ui5/webcomponents": "1.19.1",
41-
"@ui5/webcomponents-fiori": "1.19.1",
42-
"@ui5/webcomponents-icons": "1.19.1",
40+
"@ui5/webcomponents": "1.20.0",
41+
"@ui5/webcomponents-fiori": "1.20.0",
42+
"@ui5/webcomponents-icons": "1.20.0",
4343
"react": "18.2.0",
4444
"react-dom": "18.2.0",
4545
"remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
5959
"@types/react-dom": "^18.2.7",
6060
"@typescript-eslint/eslint-plugin": "^6.0.0",
6161
"@typescript-eslint/parser": "^6.0.0",
62-
"@ui5/webcomponents-tools": "1.19.0",
62+
"@ui5/webcomponents-tools": "1.20.0",
6363
"@vitejs/plugin-react": "^4.2.0",
6464
"chromatic": "^10.0.0",
6565
"cssnano": "^6.0.1",

‎packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"peerDependencies": {
3232
"@types/react": "*",
33-
"@ui5/webcomponents-base": "~1.19.0",
33+
"@ui5/webcomponents-base": "~1.20.0",
3434
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
3535
},
3636
"peerDependenciesMeta": {

‎packages/base/src/hooks/useStylesheet.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ function getUseInsertionEffect(isSSR: boolean) {
1010

1111
export function useStylesheet(styles: StyleDataCSP, componentName: string) {
1212
getUseInsertionEffect(typeof window === 'undefined')(() => {
13-
createOrUpdateStyle(styles, styles.packageName, componentName);
13+
createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
1414

1515
return () => {
16-
removeStyle(styles.packageName, componentName);
16+
removeStyle('data-ui5wcr-component', componentName);
1717
};
1818
}, [styles]);
1919
}

‎packages/charts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"recharts": "2.10.3"
3535
},
3636
"peerDependencies": {
37-
"@ui5/webcomponents-react": "~1.22.0",
38-
"@ui5/webcomponents-react-base": "~1.22.0",
37+
"@ui5/webcomponents-react": "~1.23.0",
38+
"@ui5/webcomponents-react-base": "~1.23.0",
3939
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
4040
"react-jss": "^10.10.0"
4141
},

‎packages/cra-template-seed/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.19.0",
5-
"@ui5/webcomponents-fiori": "~1.19.0",
6-
"@ui5/webcomponents-icons": "~1.19.0",
4+
"@ui5/webcomponents": "~1.20.0",
5+
"@ui5/webcomponents-fiori": "~1.20.0",
6+
"@ui5/webcomponents-icons": "~1.20.0",
77
"@ui5/webcomponents-react": "latest",
88
"axios": "^0.27.2",
99
"formik": "^2.2.9",

‎packages/cra-template/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.19.0",
5-
"@ui5/webcomponents-fiori": "~1.19.0",
6-
"@ui5/webcomponents-icons": "~1.19.0",
4+
"@ui5/webcomponents": "~1.20.0",
5+
"@ui5/webcomponents-fiori": "~1.20.0",
6+
"@ui5/webcomponents-icons": "~1.20.0",
77
"@ui5/webcomponents-react": "latest",
88
"web-vitals": "^2.1.0"
99
},

‎packages/main/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@
6161
"peerDependencies": {
6262
"@types/react": "*",
6363
"@types/react-dom": "*",
64-
"@ui5/webcomponents": "~1.19.0",
65-
"@ui5/webcomponents-base": "~1.19.0",
66-
"@ui5/webcomponents-fiori": "~1.19.0",
67-
"@ui5/webcomponents-icons": "~1.19.0",
64+
"@ui5/webcomponents": "~1.20.0",
65+
"@ui5/webcomponents-base": "~1.20.0",
66+
"@ui5/webcomponents-fiori": "~1.20.0",
67+
"@ui5/webcomponents-icons": "~1.20.0",
6868
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
6969
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
7070
},

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp
22
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
33
import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
44
import '@ui5/webcomponents-icons/dist/person-placeholder.js';
5+
import '@ui5/webcomponents/dist/Link.js';
56
import { AnalyticalCardHeader } from '../AnalyticalCardHeader';
67
import { NumericSideIndicator } from '../NumericSideIndicator';
78
import { MessageStrip } from '../../webComponents/MessageStrip/index';
@@ -16,18 +17,14 @@ import * as ComponentStories from './AnalyticalCard.stories';
1617
design={MessageStripDesign.Warning}
1718
children={
1819
<>
19-
This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the
20+
This component is deprecated and will be removed with our next major release (v2.0.0)! Please use
2021
<ui5-link href={'https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card'}>
2122
Card
2223
</ui5-link> instead.
2324
</>
2425
}
2526
/>
2627

27-
**Note:** The `AnalyticalCard` was mainly made to display KPIs and complex data. If you want to implement a simple card, the `Card` component probably is more suitable.
28-
29-
<br />
30-
3128
## Example
3229

3330
<Canvas of={ComponentStories.Default} />

‎packages/main/src/webComponents/IllustratedMessage/index.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
44
import type { ReactNode } from 'react';
5-
import { IllustrationMessageType, IllustrationMessageSize } from '../../enums/index.js';
5+
import { IllustrationMessageType, IllustrationMessageSize, TitleLevel } from '../../enums/index.js';
66
import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
77
import { withWebComponent } from '../../internal/withWebComponent.js';
88
import type { UI5WCSlotsNode } from '../../types/index.js';
@@ -37,6 +37,10 @@ interface IllustratedMessageAttributes {
3737
* **Note:** Using `subtitle` slot, the default of this property will be overwritten.
3838
*/
3939
subtitleText?: string;
40+
/**
41+
* Defines the semantic level of the title. **Note:** Used for accessibility purposes only.
42+
*/
43+
titleLevel?: TitleLevel | keyof typeof TitleLevel;
4044
/**
4145
* Defines the title of the component.
4246
*
@@ -82,7 +86,7 @@ export interface IllustratedMessagePropTypes extends IllustratedMessageAttribute
8286
*/
8387
const IllustratedMessage = withWebComponent<IllustratedMessagePropTypes, IllustratedMessageDomRef>(
8488
'ui5-illustrated-message',
85-
['accessibleNameRef', 'name', 'size', 'subtitleText', 'titleText'],
89+
['accessibleNameRef', 'name', 'size', 'subtitleText', 'titleLevel', 'titleText'],
8690
[],
8791
['subtitle'],
8892
[],
@@ -93,7 +97,8 @@ IllustratedMessage.displayName = 'IllustratedMessage';
9397

9498
IllustratedMessage.defaultProps = {
9599
name: IllustrationMessageType.BeforeSearch,
96-
size: IllustrationMessageSize.Auto
100+
size: IllustrationMessageSize.Auto,
101+
titleLevel: TitleLevel.H2
97102
};
98103

99104
export { IllustratedMessage };

‎packages/main/src/webComponents/MultiComboBox/MultiComboBoxDomRef.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"name": "open",
44
"readonly": "true",
55
"visibility": "public",
6-
"since": "1.0.0-rc.5",
76
"type": "boolean",
87
"description": "Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.",
98
"defaultValue": "false"

‎packages/main/src/webComponents/Select/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ interface SelectAttributes {
4848
}
4949

5050
export interface SelectDomRef extends Omit<SelectAttributes, 'menu'>, Ui5DomRef {
51+
/**
52+
* Defines the value of the component:
53+
* \- when get - returns the value of the component, e.g. the `value` property of the selected option or its text content.
54+
* \- when set - selects the option with matching `value` property or text content.
55+
*
56+
* **Note:** If the given value does not match any existing option, the first option will get selected.
57+
*/
58+
value?: string;
5159
/**
5260
* Defines a reference (ID or DOM element) of the component's options menu, as an alternative to defining the selection's drop-down menu.
5361
*

‎packages/main/src/webComponents/SelectMenuOption/index.tsx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@
22

33
import '@ui5/webcomponents/dist/SelectMenuOption.js';
44
import type { ReactNode } from 'react';
5-
import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
5+
import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
66
import { withWebComponent } from '../../internal/withWebComponent.js';
77

88
interface SelectMenuOptionAttributes {
9+
/**
10+
* Defines whether the component is in disabled state.
11+
*
12+
* **Note:** A disabled component is hidden.
13+
*/
14+
disabled?: boolean;
915
/**
1016
* Defines the text, displayed inside the `Select` input filed when the option gets selected.
1117
*/
@@ -14,6 +20,14 @@ interface SelectMenuOptionAttributes {
1420
* Defines the value of the `Select` inside an HTML Form element when this component is selected. For more information on HTML Form support, see the `name` property of `Select`.
1521
*/
1622
value?: string;
23+
/**
24+
* Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
25+
*/
26+
accessibleName?: string;
27+
/**
28+
* Defines the selected state of the `ListItem`.
29+
*/
30+
selected?: boolean;
1731
}
1832

1933
export interface SelectMenuOptionDomRef extends SelectMenuOptionAttributes, Ui5DomRef {}
@@ -23,6 +37,10 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
2337
* Defines the content of the component.
2438
*/
2539
children?: ReactNode | ReactNode[];
40+
/**
41+
* Fired when the user clicks on the detail button when type is `Detail`.
42+
*/
43+
onDetailClick?: (event: Ui5CustomEvent<SelectMenuOptionDomRef>) => void;
2644
}
2745

2846
/**
@@ -34,10 +52,10 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
3452
*/
3553
const SelectMenuOption = withWebComponent<SelectMenuOptionPropTypes, SelectMenuOptionDomRef>(
3654
'ui5-select-menu-option',
37-
['displayText', 'value'],
38-
[],
39-
[],
55+
['displayText', 'value', 'accessibleName'],
56+
['disabled', 'selected'],
4057
[],
58+
['detail-click'],
4159
() => import('@ui5/webcomponents/dist/SelectMenuOption.js')
4260
);
4361

‎packages/main/src/webComponents/SideNavigationItem/index.tsx

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ interface SideNavigationItemAttributes {
1010
* Defines if the item is expanded
1111
*/
1212
expanded?: boolean;
13+
/**
14+
* Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present). If set to true, clicking the whole item will toggle the sub items, and it won't fire the `onClick` event. By default, only clicking the arrow icon will toggle the sub items.
15+
*/
16+
wholeItemToggleable?: boolean;
17+
/**
18+
* Defines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered, this should not be set, but instead an event handler for the `onClick` event should be registered.
19+
*/
20+
href?: string;
1321
/**
1422
* Defines the icon of the item.
1523
*
@@ -18,17 +26,27 @@ interface SideNavigationItemAttributes {
1826
*/
1927
icon?: string;
2028
/**
21-
* Defines whether the subitem is selected
29+
* Defines whether the item is selected
2230
*/
2331
selected?: boolean;
2432
/**
25-
* Defines the text of the item.
33+
* Defines the component target.
34+
*
35+
* **Notes:**
36+
*
37+
* * `_self`
38+
* * `_top`
39+
* * `_blank`
40+
* * `_parent`
41+
* * `_search`
42+
*
43+
* **This property must only be used when the `href` property is set.**
2644
*/
27-
text?: string;
45+
target?: string;
2846
/**
29-
* Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). If set to true, pressing the whole item will toggle the sub items, and it won't fire the `onClick` event. By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.
47+
* Defines the text of the item.
3048
*/
31-
wholeItemToggleable?: boolean;
49+
text?: string;
3250
}
3351

3452
export interface SideNavigationItemDomRef extends SideNavigationItemAttributes, Ui5DomRef {}
@@ -55,8 +73,8 @@ export interface SideNavigationItemPropTypes extends SideNavigationItemAttribute
5573
*/
5674
const SideNavigationItem = withWebComponent<SideNavigationItemPropTypes, SideNavigationItemDomRef>(
5775
'ui5-side-navigation-item',
58-
['icon', 'text'],
59-
['expanded', 'selected', 'wholeItemToggleable'],
76+
['href', 'icon', 'target', 'text'],
77+
['expanded', 'wholeItemToggleable', 'selected'],
6078
[],
6179
['click'],
6280
() => import('@ui5/webcomponents-fiori/dist/SideNavigationItem.js')

‎packages/main/src/webComponents/SideNavigationSubItem/index.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/in
55
import { withWebComponent } from '../../internal/withWebComponent.js';
66

77
interface SideNavigationSubItemAttributes {
8+
/**
9+
* Defines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered, this should not be set, but instead an event handler for the `onClick` event should be registered.
10+
*/
11+
href?: string;
812
/**
913
* Defines the icon of the item.
1014
*
@@ -13,9 +17,23 @@ interface SideNavigationSubItemAttributes {
1317
*/
1418
icon?: string;
1519
/**
16-
* Defines whether the subitem is selected.
20+
* Defines whether the item is selected
1721
*/
1822
selected?: boolean;
23+
/**
24+
* Defines the component target.
25+
*
26+
* **Notes:**
27+
*
28+
* * `_self`
29+
* * `_top`
30+
* * `_blank`
31+
* * `_parent`
32+
* * `_search`
33+
*
34+
* **This property must only be used when the `href` property is set.**
35+
*/
36+
target?: string;
1937
/**
2038
* Defines the text of the item.
2139
*/
@@ -42,7 +60,7 @@ export interface SideNavigationSubItemPropTypes extends SideNavigationSubItemAtt
4260
*/
4361
const SideNavigationSubItem = withWebComponent<SideNavigationSubItemPropTypes, SideNavigationSubItemDomRef>(
4462
'ui5-side-navigation-sub-item',
45-
['icon', 'text'],
63+
['href', 'icon', 'target', 'text'],
4664
['selected'],
4765
[],
4866
['click'],

‎scripts/web-component-wrappers/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const PRIVATE_COMPONENTS = {
1111
NotificationListItemBase: true,
1212
Popup: true,
1313
PickerBase: true,
14+
SideNavigationItemBase: true,
1415
SliderBase: true,
1516
TabBase: true,
1617
ThemePropertiesProvider: true,

‎scripts/web-component-wrappers/utils.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const getTypeDefinitionForProperty = (property, options = {}) => {
6363
};
6464
}
6565

66-
if (property.type === 'sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem') {
66+
if (property.type === 'sap.ui.webc.fiori.SideNavigationItem[]') {
6767
return {
6868
tsType: reactNodeType,
6969
importStatement: importStatementReactNodeType

‎scripts/web-component-wrappers/version-info.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@
3737
"1.16.0": "1.18.0",
3838
"1.17.0": "1.19.0",
3939
"1.18.0": "1.20.0",
40-
"1.19.0": "1.22.0"
40+
"1.19.0": "1.22.0",
41+
"1.20.0": "1.23.0"
4142
}

0 commit comments

Comments
 (0)