feat: update to @ui5/webcomponents ~1.14.0 (#4667)

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

package.json

@@ -35,9 +35,9 @@
     "@storybook/react": "7.0.18",
     "@storybook/react-vite": "7.0.18",
     "@storybook/theming": "7.0.18",
-    "@ui5/webcomponents": "1.13.3",
-    "@ui5/webcomponents-fiori": "1.13.3",
-    "@ui5/webcomponents-icons": "1.13.3",
+    "@ui5/webcomponents": "1.14.0",
+    "@ui5/webcomponents-fiori": "1.14.0",
+    "@ui5/webcomponents-icons": "1.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -57,7 +57,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "@ui5/webcomponents-tools": "1.13.1",
+    "@ui5/webcomponents-tools": "1.14.0",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.5.3",
     "cypress": "^12.1.0",

packages/base/package.json

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

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.6.2"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.15.0",
-    "@ui5/webcomponents-react-base": "~1.15.0",
+    "@ui5/webcomponents-react": "~1.16.0",
+    "@ui5/webcomponents-react-base": "~1.16.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.13.0",
-      "@ui5/webcomponents-fiori": "~1.13.0",
-      "@ui5/webcomponents-icons": "~1.13.0",
+      "@ui5/webcomponents": "~1.14.0",
+      "@ui5/webcomponents-fiori": "~1.14.0",
+      "@ui5/webcomponents-icons": "~1.14.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.13.0",
-      "@ui5/webcomponents-fiori": "~1.13.0",
-      "@ui5/webcomponents-icons": "~1.13.0",
+      "@ui5/webcomponents": "~1.14.0",
+      "@ui5/webcomponents-fiori": "~1.14.0",
+      "@ui5/webcomponents-icons": "~1.14.0",
       "@ui5/webcomponents-react": "latest",
       "web-vitals": "^2.1.0"
     },

packages/main/package.json

@@ -58,10 +58,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.13.0",
-    "@ui5/webcomponents-base": "~1.13.0",
-    "@ui5/webcomponents-fiori": "~1.13.0",
-    "@ui5/webcomponents-icons": "~1.13.0",
+    "@ui5/webcomponents": "~1.14.0",
+    "@ui5/webcomponents-base": "~1.14.0",
+    "@ui5/webcomponents-fiori": "~1.14.0",
+    "@ui5/webcomponents-icons": "~1.14.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/components/DynamicPageAnchorBar/index.tsx

@@ -6,6 +6,7 @@ import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js';
 import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
+import type { CSSProperties } from 'react';
 import { createUseStyles } from 'react-jss';
 import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
@@ -32,8 +33,6 @@ const anchorBarStyles = {
     }
   },
   anchorBarActionButton: {
-    '--_ui5_button_base_min_width': '1.5rem',
-    '--_ui5_button_base_height': '1.5rem',
     '--ui5wcr_anchor-btn-center': `calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2)`,
     position: 'absolute',
     insetBlockStart: `calc(-1 * var(--ui5wcr_anchor-btn-center))`,
@@ -101,6 +100,11 @@ interface DynamicPageAnchorBarPropTypes extends CommonProps {
   onPinnedStateChange?: (pinned: boolean) => void;
 }
 
+const anchorButtonVariables = {
+  '--_ui5_button_base_min_width': '1.5rem',
+  '--_ui5_button_base_height': '1.5rem'
+} as CSSProperties;
+
 /**
  * The dynamic page anchor bar contains the expand/collapse (expands or collapses the header content)
  * and pin button (pins the content header).
@@ -161,6 +165,7 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
             classes.anchorBarActionButtonExpandable,
             showBothActions && classes.anchorBarActionPinnableAndExpandable
           )}
+          style={anchorButtonVariables}
           onClick={onToggleHeaderButtonClick}
           onMouseOver={onHoverToggleButton}
           onMouseLeave={onHoverToggleButton}
@@ -174,6 +179,7 @@ const DynamicPageAnchorBar = forwardRef<HTMLElement, DynamicPageAnchorBarPropTyp
           icon={iconPushPin}
           data-ui5wcr-dynamic-page-header-action=""
           className={clsx(classes.anchorBarActionButton, classes.anchorBarActionButtonPinnable)}
+          style={anchorButtonVariables}
           pressed={headerPinned}
           onClick={onPinHeader}
           tooltip={i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER)}

packages/main/src/components/FilterBar/FilterBarDialog.jss.ts

@@ -11,9 +11,6 @@ const styles = {
       textAlign: 'center'
     }
   },
-  table: {
-    '--_ui5_input_width': '100%'
-  },
   groupPanel: {
     '&::part(content)': {
       padding: 0

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -352,7 +352,6 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
             key={`${item === 'default' ? basicText : item}${index}`}
           >
             <Table
-              className={classes.table}
               mode={TableMode.MultiSelect}
               data-component-name="FilterBarDialogPanelTable"
               onSelectionChange={handleCheckBoxChange}
@@ -470,7 +469,6 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
       <Table
         data-component-name="FilterBarDialogTable"
         hideNoData={!isListView}
-        className={classes.table}
         mode={TableMode.MultiSelect}
         onSelectionChange={handleCheckBoxChange}
         columns={

packages/main/src/components/FilterGroupItem/FilterGroupItem.jss.ts

@@ -50,6 +50,11 @@ const styles = {
     flexGrow: 1,
     color: ThemingParameters.sapNeutralColor,
     transform: 'scale(-50%)'
+  },
+  labelContainer: {
+    '& :not(:first-child)': {
+      width: '100%'
+    }
   }
 };
 

packages/main/src/components/FilterGroupItem/index.tsx

@@ -113,7 +113,7 @@ export const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTyp
         data-component-name="FilterBarDialogTableRow"
       >
         <TableCell>
-          <FlexBox direction={FlexBoxDirection.Column}>
+          <FlexBox direction={FlexBoxDirection.Column} className={classes.labelContainer}>
             <Label
               className={classes.dialogCellLabel}
               title={labelTooltip ?? label}

packages/main/src/components/VariantManagement/index.tsx

@@ -220,7 +220,8 @@ const styles = {
     }
   },
   inputIcon: { cursor: 'pointer', color: ThemingParameters.sapContent_IconColor },
-  searchInput: { padding: '0.25rem 1rem' },
+  searchInputContainer: { padding: '0.25rem 1rem' },
+  searchInput: { width: '100%' },
   popover: {
     minWidth: '25rem',
     '&::part(content), &::part(footer)': {
@@ -539,8 +540,9 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
                     mode={ListMode.SingleSelect}
                     header={
                       showInput ? (
-                        <div className={classes.searchInput} tabIndex={-1}>
+                        <div className={classes.searchInputContainer} tabIndex={-1}>
                           <Input
+                            className={classes.searchInput}
                             accessibleName={a11ySearchText}
                             value={searchValue}
                             placeholder={searchText}

packages/main/src/enums/BackgroundDesign.ts

@@ -0,0 +1,5 @@
+// Generated file - do not change manually!
+
+import BackgroundDesign from '@ui5/webcomponents/dist/types/BackgroundDesign.js';
+
+export { BackgroundDesign };

packages/main/src/enums/BorderDesign.ts

@@ -0,0 +1,5 @@
+// Generated file - do not change manually!
+
+import BorderDesign from '@ui5/webcomponents/dist/types/BorderDesign.js';
+
+export { BorderDesign };

packages/main/src/enums/SegmentedButtonMode.ts

@@ -0,0 +1,5 @@
+// Generated file - do not change manually!
+
+import SegmentedButtonMode from '@ui5/webcomponents/dist/types/SegmentedButtonMode.js';
+
+export { SegmentedButtonMode };

packages/main/src/enums/WizardContentLayout.ts

@@ -0,0 +1,5 @@
+// Generated file - do not change manually!
+
+import WizardContentLayout from '@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js';
+
+export { WizardContentLayout };

packages/main/src/enums/index.ts

@@ -10,7 +10,9 @@ export * from './AvatarColorScheme.js';
 export * from './AvatarGroupType.js';
 export * from './AvatarShape.js';
 export * from './AvatarSize.js';
+export * from './BackgroundDesign.js';
 export * from './BarDesign.js';
+export * from './BorderDesign.js';
 export * from './BreadcrumbsDesign.js';
 export * from './BreadcrumbsSeparatorStyle.js';
 export * from './BusyIndicatorSize.js';
@@ -57,6 +59,7 @@ export * from './PopoverPlacementType.js';
 export * from './PopoverVerticalAlign.js';
 export * from './PopupAccessibleRole.js';
 export * from './Priority.js';
+export * from './SegmentedButtonMode.js';
 export * from './SemanticColor.js';
 export * from './SideContentFallDown.js';
 export * from './SideContentPosition.js';
@@ -88,4 +91,5 @@ export * from './ValueColor.js';
 export * from './ValueState.js';
 export * from './VerticalAlign.js';
 export * from './ViewSettingsDialogMode.js';
+export * from './WizardContentLayout.js';
 export * from './WrappingType.js';

packages/main/src/webComponents/CardHeader/CardHeaderDescription.md

@@ -9,7 +9,7 @@ In case you enable `interactive` property, you can press the `CardHeader` by Spa
 ### CSS Shadow Parts
 
 <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 `Card` exposes the following CSS Shadow Parts:
+The `CardHeader` exposes the following CSS Shadow Parts:
 
 - root - Used to style the root DOM element of the CardHeader
 - title - Used to style the title of the CardHeader

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

@@ -2,7 +2,12 @@
 
 import '@ui5/webcomponents/dist/Carousel.js';
 import type { ReactNode } from 'react';
-import { CarouselArrowsPlacement, CarouselPageIndicatorStyle } from '../../enums/index.js';
+import {
+  CarouselArrowsPlacement,
+  BackgroundDesign,
+  BorderDesign,
+  CarouselPageIndicatorStyle
+} from '../../enums/index.js';
 import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
@@ -20,6 +25,10 @@ interface CarouselAttributes {
    * When set to "Navigation", the arrows are placed on the sides of the page indicator.
    */
   arrowsPlacement?: CarouselArrowsPlacement | keyof typeof CarouselArrowsPlacement;
+  /**
+   * Defines the carousel's background design.
+   */
+  backgroundDesign?: BackgroundDesign | keyof typeof BackgroundDesign;
   /**
    * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
    */
@@ -46,6 +55,14 @@ interface CarouselAttributes {
    * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
    */
   itemsPerPageS?: number;
+  /**
+   * Defines the page indicator background design.
+   */
+  pageIndicatorBackgroundDesign?: BackgroundDesign | keyof typeof BackgroundDesign;
+  /**
+   * Defines the page indicator border design.
+   */
+  pageIndicatorBorderDesign?: BorderDesign | keyof typeof BorderDesign;
   /**
    * Defines the style of the page indicator. Available options are:
    *
@@ -87,7 +104,16 @@ export interface CarouselPropTypes extends CarouselAttributes, CommonProps {
  */
 const Carousel = withWebComponent<CarouselPropTypes, CarouselDomRef>(
   'ui5-carousel',
-  ['arrowsPlacement', 'itemsPerPageL', 'itemsPerPageM', 'itemsPerPageS', 'pageIndicatorStyle'],
+  [
+    'arrowsPlacement',
+    'backgroundDesign',
+    'itemsPerPageL',
+    'itemsPerPageM',
+    'itemsPerPageS',
+    'pageIndicatorBackgroundDesign',
+    'pageIndicatorBorderDesign',
+    'pageIndicatorStyle'
+  ],
   ['cyclic', 'hideNavigationArrows', 'hidePageIndicator'],
   [],
   ['navigate'],
@@ -98,9 +124,12 @@ Carousel.displayName = 'Carousel';
 
 Carousel.defaultProps = {
   arrowsPlacement: CarouselArrowsPlacement.Content,
+  backgroundDesign: BackgroundDesign.Translucent,
   itemsPerPageL: 1,
   itemsPerPageM: 1,
   itemsPerPageS: 1,
+  pageIndicatorBackgroundDesign: BackgroundDesign.Solid,
+  pageIndicatorBorderDesign: BorderDesign.Solid,
   pageIndicatorStyle: CarouselPageIndicatorStyle.Default
 };
 

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

@@ -2,7 +2,7 @@
 
 import '@ui5/webcomponents/dist/ComboBox.js';
 import type { ReactNode } from 'react';
-import { ValueState } from '../../enums/index.js';
+import { ComboBoxFilter, ValueState } from '../../enums/index.js';
 import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 import type { UI5WCSlotsNode } from '../../types/index.js';
@@ -25,7 +25,7 @@ interface ComboBoxAttributes {
   /**
    * Defines the filter type of the component. Available options are: `StartsWithPerTerm`, `StartsWith`, `Contains` and `None`.
    */
-  filter?: string;
+  filter?: ComboBoxFilter | keyof typeof ComboBoxFilter;
   /**
    * Indicates whether a loading indicator should be shown in the picker.
    */
@@ -129,7 +129,7 @@ const ComboBox = withWebComponent<ComboBoxPropTypes, ComboBoxDomRef>(
 ComboBox.displayName = 'ComboBox';
 
 ComboBox.defaultProps = {
-  filter: 'StartsWithPerTerm',
+  filter: ComboBoxFilter.StartsWithPerTerm,
   valueState: ValueState.None
 };
 

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

@@ -45,7 +45,11 @@ export interface LabelPropTypes extends LabelAttributes, CommonProps {
 }
 
 /**
- * The `Label` is a component used to represent a label, providing valuable information to the user. Usually it is placed next to a value holder, such as a text field. It informs the user about what data is displayed or expected in the value holder.
+ * The `Label` is a component used to represent a label for elements like input, textarea, select.
+ *
+ * The `for` property of the `Label` must be the same as the id attribute of the related input element.
+ *
+ * Screen readers read out the label, when the user focuses the labelled control.
  *
  * The `Label` appearance can be influenced by properties, such as `required` and `wrappingType`. The appearance of the Label can be configured in a limited way by using the design property. For a broader choice of designs, you can use custom styles.
  *

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

@@ -64,13 +64,13 @@ export interface MenuPropTypes extends MenuAttributes, CommonProps {
    */
   onBeforeClose?: (event: Ui5CustomEvent<MenuDomRef, { escPressed: boolean }>) => void;
   /**
-   * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**
+   * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.** **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
    */
-  onBeforeOpen?: (event: Ui5CustomEvent<MenuDomRef>) => void;
+  onBeforeOpen?: (event: Ui5CustomEvent<MenuDomRef, { item: HTMLElement }>) => void;
   /**
    * Fired when an item is being clicked.
    */
-  onItemClick?: (event: Ui5CustomEvent<MenuDomRef, { item: Record<string, unknown>; text: string }>) => void;
+  onItemClick?: (event: Ui5CustomEvent<MenuDomRef, { item: HTMLElement; text: string }>) => void;
 }
 
 /**