feat: update to @ui5/webcomponents@1.21.0 (#5390)

package.json

@@ -37,9 +37,9 @@
     "@storybook/react": "7.6.7",
     "@storybook/react-vite": "7.6.7",
     "@storybook/theming": "7.6.7",
-    "@ui5/webcomponents": "1.20.1",
-    "@ui5/webcomponents-fiori": "1.20.1",
-    "@ui5/webcomponents-icons": "1.20.1",
+    "@ui5/webcomponents": "1.21.0",
+    "@ui5/webcomponents-fiori": "1.21.0",
+    "@ui5/webcomponents-icons": "1.21.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@ui5/webcomponents-tools": "1.20.0",
+    "@ui5/webcomponents-tools": "1.21.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^10.0.0",
     "cssnano": "^6.0.1",

packages/base/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.20.0",
+    "@ui5/webcomponents-base": "~1.21.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.10.3"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.23.0",
-    "@ui5/webcomponents-react-base": "~1.23.0",
+    "@ui5/webcomponents-react": "~1.24.0",
+    "@ui5/webcomponents-react-base": "~1.24.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-jss": "^10.10.0"
   },

packages/cra-template-seed/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.20.0",
-      "@ui5/webcomponents-fiori": "~1.20.0",
-      "@ui5/webcomponents-icons": "~1.20.0",
+      "@ui5/webcomponents": "~1.21.0",
+      "@ui5/webcomponents-fiori": "~1.21.0",
+      "@ui5/webcomponents-icons": "~1.21.0",
       "@ui5/webcomponents-react": "latest",
       "axios": "^0.27.2",
       "formik": "^2.2.9",

packages/cra-template/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.20.0",
-      "@ui5/webcomponents-fiori": "~1.20.0",
-      "@ui5/webcomponents-icons": "~1.20.0",
+      "@ui5/webcomponents": "~1.21.0",
+      "@ui5/webcomponents-fiori": "~1.21.0",
+      "@ui5/webcomponents-icons": "~1.21.0",
       "@ui5/webcomponents-react": "latest",
       "web-vitals": "^2.1.0"
     },

packages/main/package.json

@@ -61,10 +61,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.20.0",
-    "@ui5/webcomponents-base": "~1.20.0",
-    "@ui5/webcomponents-fiori": "~1.20.0",
-    "@ui5/webcomponents-icons": "~1.20.0",
+    "@ui5/webcomponents": "~1.21.0",
+    "@ui5/webcomponents-base": "~1.21.0",
+    "@ui5/webcomponents-fiori": "~1.21.0",
+    "@ui5/webcomponents-icons": "~1.21.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },

packages/main/src/webComponents/CheckBox/CheckBoxDescription.md

@@ -10,6 +10,7 @@ You can disable the `CheckBox` by setting the `disabled` property to `true`, or
 The `CheckBox` exposes the following CSS Shadow Parts:
 
 - root - Used to style the outermost wrapper of the `CheckBox`
+- label - Used to style the label of the `CheckBox`
 
 ## Keyboard Handling
 

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

@@ -12,7 +12,9 @@
       }
     ],
     "description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
-    "deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
+    "deprecated": {
+      "text": "The method is deprecated in favour of <code>open</code> and <code>opener</code> properties."
+    }
   },
   {
     "name": "showAt",
@@ -26,6 +28,9 @@
         "description": "the element that the popover is shown at"
       }
     ],
-    "description": "Shows the ColorPalettePopover."
+    "description": "Shows the ColorPalettePopover.",
+    "deprecated": {
+      "text": "The method is deprecated in favour of <code>open</code> and <code>opener</code> properties."
+    }
   }
 ]

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

@@ -11,6 +11,14 @@ interface ColorPalettePopoverAttributes {
    * Defines the default color of the component. **Note:** The default color should be a part of the ColorPalette colors
    */
   defaultColor?: CSSProperties['color'];
+  /**
+   * Defines the open | closed state of the popover.
+   */
+  open?: boolean;
+  /**
+   * Defines the ID of the element that the popover is shown at.
+   */
+  opener?: string;
   /**
    * Defines whether the user can choose the default color from a button.
    */
@@ -25,26 +33,36 @@ interface ColorPalettePopoverAttributes {
   showRecentColors?: boolean;
 }
 
-export interface ColorPalettePopoverDomRef extends ColorPalettePopoverAttributes, Ui5DomRef {
+export interface ColorPalettePopoverDomRef extends Omit<ColorPalettePopoverAttributes, 'opener'>, Ui5DomRef {
   /**
    * Shows the ColorPalettePopover. **Note:** The method is deprecated and will be removed in future, use `showAt` instead.
    *
-   * @deprecated The method is deprecated in favour of <code>showAt</code>.
+   * @deprecated The method is deprecated in favour of <code>open</code> and <code>opener</code> properties.
    * @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
    */
   openPopover: (opener: HTMLElement | EventTarget) => void;
   /**
    * Shows the ColorPalettePopover.
+   *
+   * @deprecated The method is deprecated in favour of <code>open</code> and <code>opener</code> properties.
    * @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
    */
   showAt: (opener: HTMLElement | EventTarget) => void;
+  /**
+   * Defines the ID or DOM Reference of the element that the popover is shown at.
+   */
+  opener?: string | HTMLElement;
 }
 
 export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttributes, CommonProps {
   /**
    * Defines the content of the component.
    */
   children?: ReactNode | ReactNode[];
+  /**
+   * Fired when the `ColorPalettePopover` is closed due to user interaction.
+   */
+  onClose?: (event: Ui5CustomEvent<ColorPalettePopoverDomRef>) => void;
   /**
    * Fired when the user selects a color.
    */
@@ -60,10 +78,10 @@ export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttribu
  */
 const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, ColorPalettePopoverDomRef>(
   'ui5-color-palette-popover',
-  ['defaultColor'],
-  ['showDefaultColor', 'showMoreColors', 'showRecentColors'],
+  ['defaultColor', 'opener'],
+  ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'],
   [],
-  ['item-click'],
+  ['close', 'item-click'],
   () => import('@ui5/webcomponents/dist/ColorPalettePopover.js')
 );
 

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

@@ -4,7 +4,7 @@ import '@ui5/webcomponents/dist/Select.js';
 import type { SelectChangeEventDetail, SelectLiveChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
 import type { ReactNode } from 'react';
 import { ValueState } from '../../enums/index.js';
-import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../interfaces/index.js';
+import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 import type { UI5WCSlotsNode } from '../../types/index.js';
 
@@ -24,7 +24,7 @@ interface SelectAttributes {
    */
   disabled?: boolean;
   /**
-   * Defines the ID of the component's options menu, as an alternative to defining the selection's drop-down menu.
+   * Defines the ID of component's menu of options as alternative to define the select's dropdown.
    *
    * **Note:** Usage of `SelectMenu` is recommended.
    */
@@ -37,6 +37,12 @@ interface SelectAttributes {
    * **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.
    */
   name?: string;
+  /**
+   * Defines whether the component is read-only.
+   *
+   * **Note:** A read-only component is not editable, but still provides visual feedback upon user interaction.
+   */
+  readonly?: boolean;
   /**
    * Defines whether the component is required.
    */
@@ -57,7 +63,7 @@ export interface SelectDomRef extends Omit<SelectAttributes, 'menu'>, Ui5DomRef
    */
   value?: string;
   /**
-   * Defines a reference (ID or DOM element) of the component's options menu, as an alternative to defining the selection's drop-down menu.
+   * Defines a reference (ID or DOM element) of component's menu of options as alternative to define the select's dropdown.
    *
    * **Note:** Usage of `SelectMenu` is recommended.
    */
@@ -134,8 +140,8 @@ export interface SelectPropTypes extends SelectAttributes, Omit<CommonProps, 'on
  */
 const Select = withWebComponent<SelectPropTypes, SelectDomRef>(
   'ui5-select',
-  ['accessibleName', 'accessibleNameRef', 'menu', 'name', 'valueState'],
-  ['disabled', 'required'],
+  ['accessibleName', 'accessibleNameRef', 'menu', 'name', 'value', 'valueState'],
+  ['disabled', 'readonly', 'required'],
   ['label', 'valueStateMessage'],
   ['change', 'close', 'live-change', 'open'],
   () => import('@ui5/webcomponents/dist/Select.js')

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

@@ -1,6 +1,6 @@
 **Since:** 1.19.0
 
-The code>SelectMenuOption component represents an option in the `SelectMenu`.
+The `SelectMenuOption` component represents an option in the `SelectMenu`.
 
 ### Usage
 

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

@@ -44,7 +44,7 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
 }
 
 /**
- * The code>SelectMenuOption component represents an option in the `SelectMenu`.
+ * The `SelectMenuOption` component represents an option in the `SelectMenu`.
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *

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

@@ -11,6 +11,12 @@ interface SplitButtonAttributes {
    * Defines the accessible ARIA name of the component.
    */
   accessibleName?: string;
+  /**
+   * Defines whether the arrow button should have the active state styles or not.
+   *
+   * @since 1.24.0
+   */
+  activeArrowButton?: boolean;
   /**
    * Defines the icon to be displayed in active state as graphical element within the component.
    */
@@ -60,7 +66,7 @@ export interface SplitButtonPropTypes extends SplitButtonAttributes, Omit<Common
 const SplitButton = withWebComponent<SplitButtonPropTypes, SplitButtonDomRef>(
   'ui5-split-button',
   ['accessibleName', 'activeIcon', 'design', 'icon'],
-  ['disabled'],
+  ['activeArrowButton', 'disabled'],
   [],
   ['arrow-click', 'click'],
   () => import('@ui5/webcomponents/dist/SplitButton.js')

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

@@ -14,6 +14,7 @@ Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper
 <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.  
 The `TabContainer` exposes the following CSS Shadow Parts:
 
+- tabstrip - Used to style the tabstrip of the component
 - content - Used to style the content of the component
 
 ## Keyboard Handling

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

@@ -52,26 +52,23 @@ interface ToolbarButtonAttributes {
    */
   tooltip?: string;
   /**
-   * 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:
+   * Defines the width of the button.
    *
-   * *`NeverOverflow`
-   * *`AlwaysOverflow`
-   * *`Default`
+   * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
    */
-  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  width?: CSSProperties['width'] | CSSProperties['height'];
   /**
-   * Defines if the toolbar overflow popup should close upon interaction with the item.
-   * It will close by default.
+   * 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:
+   *
+   * *   `NeverOverflow`
+   * *   `AlwaysOverflow`
+   * *   `Default`
    */
-  preventOverflowClosing?: boolean;
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
   /**
-   * Defines the width of the button.
-   *
-   * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
+   * Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
    */
-  width?: CSSProperties['width'] | CSSProperties['height'];
+  preventOverflowClosing?: boolean;
 }
 
 export interface ToolbarButtonDomRef extends ToolbarButtonAttributes, Ui5DomRef {
@@ -112,7 +109,7 @@ export interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, Omit<Co
  */
 const ToolbarButton = withWebComponent<ToolbarButtonPropTypes, ToolbarButtonDomRef>(
   'ui5-toolbar-button',
-  ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'overflowPriority', 'text', 'tooltip', 'width'],
+  ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'text', 'tooltip', 'width', 'overflowPriority'],
   ['disabled', 'iconEnd', 'preventOverflowClosing'],
   [],
   ['click'],

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

@@ -3,7 +3,7 @@
 import '@ui5/webcomponents/dist/ToolbarSelect.js';
 import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/ToolbarSelect.js';
 import type { CSSProperties, ReactNode } from 'react';
-import { ToolbarItemOverflowBehavior, ValueState } from '../../enums/index.js';
+import { ValueState, ToolbarItemOverflowBehavior } from '../../enums/index.js';
 import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
@@ -22,21 +22,6 @@ interface ToolbarSelectAttributes {
    * **Note:** A disabled component is noninteractive.
    */
   disabled?: boolean;
-  /**
-   * 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:
-   *
-   * *`NeverOverflow`
-   * *`AlwaysOverflow`
-   * *`Default`
-   */
-  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
-  /**
-   * Defines if the toolbar overflow popup should close upon interaction with the item.
-   * It will close by default.
-   */
-  preventOverflowClosing?: boolean;
   /**
    * Defines the value state of the component.
    */
@@ -47,6 +32,18 @@ interface ToolbarSelectAttributes {
    * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
    */
   width?: CSSProperties['width'] | CSSProperties['height'];
+  /**
+   * 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:
+   *
+   * *   `NeverOverflow`
+   * *   `AlwaysOverflow`
+   * *   `Default`
+   */
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  /**
+   * Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
+   */
+  preventOverflowClosing?: boolean;
 }
 
 export interface ToolbarSelectDomRef extends ToolbarSelectAttributes, Ui5DomRef {}
@@ -85,7 +82,7 @@ export interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, Omit<Co
  */
 const ToolbarSelect = withWebComponent<ToolbarSelectPropTypes, ToolbarSelectDomRef>(
   'ui5-toolbar-select',
-  ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'],
+  ['accessibleName', 'accessibleNameRef', 'valueState', 'width', 'overflowPriority'],
   ['disabled', 'preventOverflowClosing'],
   [],
   ['change', 'close', 'open'],