Skip to content

Commit 57cbe00

Browse files
Lukas742Lukas742
authored
feat: update to @ui5/[email protected] (#5390)
1 parent f9e8c91 commit 57cbe00

File tree

20 files changed

+298
-427
lines changed

20 files changed

+298
-427
lines changed

‎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.7",
3838
"@storybook/react-vite": "7.6.7",
3939
"@storybook/theming": "7.6.7",
40-
"@ui5/webcomponents": "1.20.1",
41-
"@ui5/webcomponents-fiori": "1.20.1",
42-
"@ui5/webcomponents-icons": "1.20.1",
40+
"@ui5/webcomponents": "1.21.0",
41+
"@ui5/webcomponents-fiori": "1.21.0",
42+
"@ui5/webcomponents-icons": "1.21.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.20.0",
62+
"@ui5/webcomponents-tools": "1.21.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.20.0",
33+
"@ui5/webcomponents-base": "~1.21.0",
3434
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
3535
},
3636
"peerDependenciesMeta": {

‎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.23.0",
38-
"@ui5/webcomponents-react-base": "~1.23.0",
37+
"@ui5/webcomponents-react": "~1.24.0",
38+
"@ui5/webcomponents-react-base": "~1.24.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.20.0",
5-
"@ui5/webcomponents-fiori": "~1.20.0",
6-
"@ui5/webcomponents-icons": "~1.20.0",
4+
"@ui5/webcomponents": "~1.21.0",
5+
"@ui5/webcomponents-fiori": "~1.21.0",
6+
"@ui5/webcomponents-icons": "~1.21.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.20.0",
5-
"@ui5/webcomponents-fiori": "~1.20.0",
6-
"@ui5/webcomponents-icons": "~1.20.0",
4+
"@ui5/webcomponents": "~1.21.0",
5+
"@ui5/webcomponents-fiori": "~1.21.0",
6+
"@ui5/webcomponents-icons": "~1.21.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.20.0",
65-
"@ui5/webcomponents-base": "~1.20.0",
66-
"@ui5/webcomponents-fiori": "~1.20.0",
67-
"@ui5/webcomponents-icons": "~1.20.0",
64+
"@ui5/webcomponents": "~1.21.0",
65+
"@ui5/webcomponents-base": "~1.21.0",
66+
"@ui5/webcomponents-fiori": "~1.21.0",
67+
"@ui5/webcomponents-icons": "~1.21.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/webComponents/CheckBox/CheckBoxDescription.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ You can disable the `CheckBox` by setting the `disabled` property to `true`, or
1010
The `CheckBox` exposes the following CSS Shadow Parts:
1111

1212
- root - Used to style the outermost wrapper of the `CheckBox`
13+
- label - Used to style the label of the `CheckBox`
1314

1415
## Keyboard Handling
1516

‎packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
}
1313
],
1414
"description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
15-
"deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
15+
"deprecated": {
16+
"text": "The method is deprecated in favour of <code>open</code> and <code>opener</code> properties."
17+
}
1618
},
1719
{
1820
"name": "showAt",
@@ -26,6 +28,9 @@
2628
"description": "the element that the popover is shown at"
2729
}
2830
],
29-
"description": "Shows the ColorPalettePopover."
31+
"description": "Shows the ColorPalettePopover.",
32+
"deprecated": {
33+
"text": "The method is deprecated in favour of <code>open</code> and <code>opener</code> properties."
34+
}
3035
}
3136
]

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ interface ColorPalettePopoverAttributes {
1111
* Defines the default color of the component. **Note:** The default color should be a part of the ColorPalette colors
1212
*/
1313
defaultColor?: CSSProperties['color'];
14+
/**
15+
* Defines the open | closed state of the popover.
16+
*/
17+
open?: boolean;
18+
/**
19+
* Defines the ID of the element that the popover is shown at.
20+
*/
21+
opener?: string;
1422
/**
1523
* Defines whether the user can choose the default color from a button.
1624
*/
@@ -25,26 +33,36 @@ interface ColorPalettePopoverAttributes {
2533
showRecentColors?: boolean;
2634
}
2735

28-
export interface ColorPalettePopoverDomRef extends ColorPalettePopoverAttributes, Ui5DomRef {
36+
export interface ColorPalettePopoverDomRef extends Omit<ColorPalettePopoverAttributes, 'opener'>, Ui5DomRef {
2937
/**
3038
* Shows the ColorPalettePopover. **Note:** The method is deprecated and will be removed in future, use `showAt` instead.
3139
*
32-
* @deprecated The method is deprecated in favour of <code>showAt</code>.
40+
* @deprecated The method is deprecated in favour of <code>open</code> and <code>opener</code> properties.
3341
* @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
3442
*/
3543
openPopover: (opener: HTMLElement | EventTarget) => void;
3644
/**
3745
* Shows the ColorPalettePopover.
46+
*
47+
* @deprecated The method is deprecated in favour of <code>open</code> and <code>opener</code> properties.
3848
* @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
3949
*/
4050
showAt: (opener: HTMLElement | EventTarget) => void;
51+
/**
52+
* Defines the ID or DOM Reference of the element that the popover is shown at.
53+
*/
54+
opener?: string | HTMLElement;
4155
}
4256

4357
export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttributes, CommonProps {
4458
/**
4559
* Defines the content of the component.
4660
*/
4761
children?: ReactNode | ReactNode[];
62+
/**
63+
* Fired when the `ColorPalettePopover` is closed due to user interaction.
64+
*/
65+
onClose?: (event: Ui5CustomEvent<ColorPalettePopoverDomRef>) => void;
4866
/**
4967
* Fired when the user selects a color.
5068
*/
@@ -60,10 +78,10 @@ export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttribu
6078
*/
6179
const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, ColorPalettePopoverDomRef>(
6280
'ui5-color-palette-popover',
63-
['defaultColor'],
64-
['showDefaultColor', 'showMoreColors', 'showRecentColors'],
81+
['defaultColor', 'opener'],
82+
['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'],
6583
[],
66-
['item-click'],
84+
['close', 'item-click'],
6785
() => import('@ui5/webcomponents/dist/ColorPalettePopover.js')
6886
);
6987

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import '@ui5/webcomponents/dist/Select.js';
44
import type { SelectChangeEventDetail, SelectLiveChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
55
import type { ReactNode } from 'react';
66
import { ValueState } from '../../enums/index.js';
7-
import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../interfaces/index.js';
7+
import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
88
import { withWebComponent } from '../../internal/withWebComponent.js';
99
import type { UI5WCSlotsNode } from '../../types/index.js';
1010

@@ -24,7 +24,7 @@ interface SelectAttributes {
2424
*/
2525
disabled?: boolean;
2626
/**
27-
* Defines the ID of the component's options menu, as an alternative to defining the selection's drop-down menu.
27+
* Defines the ID of component's menu of options as alternative to define the select's dropdown.
2828
*
2929
* **Note:** Usage of `SelectMenu` is recommended.
3030
*/
@@ -37,6 +37,12 @@ interface SelectAttributes {
3737
* **Note:** When set, a native `input` HTML element will be created inside the `Select` so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
3838
*/
3939
name?: string;
40+
/**
41+
* Defines whether the component is read-only.
42+
*
43+
* **Note:** A read-only component is not editable, but still provides visual feedback upon user interaction.
44+
*/
45+
readonly?: boolean;
4046
/**
4147
* Defines whether the component is required.
4248
*/
@@ -57,7 +63,7 @@ export interface SelectDomRef extends Omit<SelectAttributes, 'menu'>, Ui5DomRef
5763
*/
5864
value?: string;
5965
/**
60-
* Defines a reference (ID or DOM element) of the component's options menu, as an alternative to defining the selection's drop-down menu.
66+
* Defines a reference (ID or DOM element) of component's menu of options as alternative to define the select's dropdown.
6167
*
6268
* **Note:** Usage of `SelectMenu` is recommended.
6369
*/
@@ -134,8 +140,8 @@ export interface SelectPropTypes extends SelectAttributes, Omit<CommonProps, 'on
134140
*/
135141
const Select = withWebComponent<SelectPropTypes, SelectDomRef>(
136142
'ui5-select',
137-
['accessibleName', 'accessibleNameRef', 'menu', 'name', 'valueState'],
138-
['disabled', 'required'],
143+
['accessibleName', 'accessibleNameRef', 'menu', 'name', 'value', 'valueState'],
144+
['disabled', 'readonly', 'required'],
139145
['label', 'valueStateMessage'],
140146
['change', 'close', 'live-change', 'open'],
141147
() => import('@ui5/webcomponents/dist/Select.js')

‎packages/main/src/webComponents/SelectMenuOption/SelectMenuOptionDescription.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
**Since:** 1.19.0
22

3-
The code>SelectMenuOption component represents an option in the `SelectMenu`.
3+
The `SelectMenuOption` component represents an option in the `SelectMenu`.
44

55
### Usage
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
4444
}
4545

4646
/**
47-
* The code>SelectMenuOption component represents an option in the `SelectMenu`.
47+
* The `SelectMenuOption` component represents an option in the `SelectMenu`.
4848
*
4949
* __Note:__ This component is a web component developed by the UI5 Web Components’ team.
5050
*

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ interface SplitButtonAttributes {
1111
* Defines the accessible ARIA name of the component.
1212
*/
1313
accessibleName?: string;
14+
/**
15+
* Defines whether the arrow button should have the active state styles or not.
16+
*
17+
* @since 1.24.0
18+
*/
19+
activeArrowButton?: boolean;
1420
/**
1521
* Defines the icon to be displayed in active state as graphical element within the component.
1622
*/
@@ -60,7 +66,7 @@ export interface SplitButtonPropTypes extends SplitButtonAttributes, Omit<Common
6066
const SplitButton = withWebComponent<SplitButtonPropTypes, SplitButtonDomRef>(
6167
'ui5-split-button',
6268
['accessibleName', 'activeIcon', 'design', 'icon'],
63-
['disabled'],
69+
['activeArrowButton', 'disabled'],
6470
[],
6571
['arrow-click', 'click'],
6672
() => import('@ui5/webcomponents/dist/SplitButton.js')

‎packages/main/src/webComponents/TabContainer/TabContainerDescription.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper
1414
<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
1515
The `TabContainer` exposes the following CSS Shadow Parts:
1616

17+
- tabstrip - Used to style the tabstrip of the component
1718
- content - Used to style the content of the component
1819

1920
## Keyboard Handling

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

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -52,26 +52,23 @@ interface ToolbarButtonAttributes {
5252
*/
5353
tooltip?: string;
5454
/**
55-
* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
56-
* the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
57-
* Available options are:
55+
* Defines the width of the button.
5856
*
59-
* *`NeverOverflow`
60-
* *`AlwaysOverflow`
61-
* *`Default`
57+
* **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
6258
*/
63-
overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
59+
width?: CSSProperties['width'] | CSSProperties['height'];
6460
/**
65-
* Defines if the toolbar overflow popup should close upon interaction with the item.
66-
* It will close by default.
61+
* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. Available options are:
62+
*
63+
* * `NeverOverflow`
64+
* * `AlwaysOverflow`
65+
* * `Default`
6766
*/
68-
preventOverflowClosing?: boolean;
67+
overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
6968
/**
70-
* Defines the width of the button.
71-
*
72-
* **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
69+
* Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
7370
*/
74-
width?: CSSProperties['width'] | CSSProperties['height'];
71+
preventOverflowClosing?: boolean;
7572
}
7673

7774
export interface ToolbarButtonDomRef extends ToolbarButtonAttributes, Ui5DomRef {
@@ -112,7 +109,7 @@ export interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, Omit<Co
112109
*/
113110
const ToolbarButton = withWebComponent<ToolbarButtonPropTypes, ToolbarButtonDomRef>(
114111
'ui5-toolbar-button',
115-
['accessibleName', 'accessibleNameRef', 'design', 'icon', 'overflowPriority', 'text', 'tooltip', 'width'],
112+
['accessibleName', 'accessibleNameRef', 'design', 'icon', 'text', 'tooltip', 'width', 'overflowPriority'],
116113
['disabled', 'iconEnd', 'preventOverflowClosing'],
117114
[],
118115
['click'],

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import '@ui5/webcomponents/dist/ToolbarSelect.js';
44
import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/ToolbarSelect.js';
55
import type { CSSProperties, ReactNode } from 'react';
6-
import { ToolbarItemOverflowBehavior, ValueState } from '../../enums/index.js';
6+
import { ValueState, ToolbarItemOverflowBehavior } from '../../enums/index.js';
77
import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
88
import { withWebComponent } from '../../internal/withWebComponent.js';
99

@@ -22,21 +22,6 @@ interface ToolbarSelectAttributes {
2222
* **Note:** A disabled component is noninteractive.
2323
*/
2424
disabled?: boolean;
25-
/**
26-
* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
27-
* the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
28-
* Available options are:
29-
*
30-
* *`NeverOverflow`
31-
* *`AlwaysOverflow`
32-
* *`Default`
33-
*/
34-
overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
35-
/**
36-
* Defines if the toolbar overflow popup should close upon interaction with the item.
37-
* It will close by default.
38-
*/
39-
preventOverflowClosing?: boolean;
4025
/**
4126
* Defines the value state of the component.
4227
*/
@@ -47,6 +32,18 @@ interface ToolbarSelectAttributes {
4732
* **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
4833
*/
4934
width?: CSSProperties['width'] | CSSProperties['height'];
35+
/**
36+
* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. Available options are:
37+
*
38+
* * `NeverOverflow`
39+
* * `AlwaysOverflow`
40+
* * `Default`
41+
*/
42+
overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
43+
/**
44+
* Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
45+
*/
46+
preventOverflowClosing?: boolean;
5047
}
5148

5249
export interface ToolbarSelectDomRef extends ToolbarSelectAttributes, Ui5DomRef {}
@@ -85,7 +82,7 @@ export interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, Omit<Co
8582
*/
8683
const ToolbarSelect = withWebComponent<ToolbarSelectPropTypes, ToolbarSelectDomRef>(
8784
'ui5-toolbar-select',
88-
['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'],
85+
['accessibleName', 'accessibleNameRef', 'valueState', 'width', 'overflowPriority'],
8986
['disabled', 'preventOverflowClosing'],
9087
[],
9188
['change', 'close', 'open'],

0 commit comments

Comments
 (0)