feat: update @ui5/webcomponents to ~1.16.0

.storybook/utils.ts

@@ -14,3 +14,5 @@ export const MAPPED_THEMES = [
   // { value: 'sap_belize_hcb', title: 'Belize High Contrast Black' },
   // { value: 'sap_belize_hcw', title: 'Belize High Contrast White' }
 ];
+
+export const excludePropsForAbstract = ['className', 'style'];

package.json

@@ -37,9 +37,9 @@
     "@storybook/react": "7.1.1",
     "@storybook/react-vite": "7.1.1",
     "@storybook/theming": "7.1.1",
-    "@ui5/webcomponents": "1.15.1",
-    "@ui5/webcomponents-fiori": "1.15.1",
-    "@ui5/webcomponents-icons": "1.15.1",
+    "@ui5/webcomponents": "1.16.0",
+    "@ui5/webcomponents-fiori": "1.16.0",
+    "@ui5/webcomponents-icons": "1.16.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@ui5/webcomponents-tools": "1.15.1",
+    "@ui5/webcomponents-tools": "1.16.0",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.5.3",
     "cssnano": "^6.0.1",

packages/base/package.json

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

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.7.2"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.17.0",
-    "@ui5/webcomponents-react-base": "~1.17.0",
+    "@ui5/webcomponents-react": "~1.18.0",
+    "@ui5/webcomponents-react-base": "~1.18.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.15.1",
-      "@ui5/webcomponents-fiori": "~1.15.1",
-      "@ui5/webcomponents-icons": "~1.15.1",
+      "@ui5/webcomponents": "~1.16.0",
+      "@ui5/webcomponents-fiori": "~1.16.0",
+      "@ui5/webcomponents-icons": "~1.16.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.15.1",
-      "@ui5/webcomponents-fiori": "~1.15.1",
-      "@ui5/webcomponents-icons": "~1.15.1",
+      "@ui5/webcomponents": "~1.16.0",
+      "@ui5/webcomponents-fiori": "~1.16.0",
+      "@ui5/webcomponents-icons": "~1.16.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.15.1",
-    "@ui5/webcomponents-base": "~1.15.1",
-    "@ui5/webcomponents-fiori": "~1.15.1",
-    "@ui5/webcomponents-icons": "~1.15.1",
+    "@ui5/webcomponents": "~1.16.0",
+    "@ui5/webcomponents-base": "~1.16.0",
+    "@ui5/webcomponents-fiori": "~1.16.0",
+    "@ui5/webcomponents-icons": "~1.16.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/Avatar/index.tsx

@@ -30,6 +30,10 @@ interface AvatarAttributes {
    * *   `Placeholder`
    */
   colorScheme?: AvatarColorScheme | keyof typeof AvatarColorScheme;
+  /**
+   * Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
+   */
+  disabled?: boolean;
   /**
    * Defines the name of the UI5 Icon, that will be displayed.
    * **Note:** If `image` slot is provided, the property will be ignored.
@@ -49,7 +53,7 @@ interface AvatarAttributes {
    */
   initials?: string;
   /**
-   * Defines if the avatar is interactive (focusable and pressable).
+   * Defines if the avatar is interactive (focusable and pressable). **Note:** This property won't have effect if the `disabled` property is set to `true`.
    */
   interactive?: boolean;
   /**
@@ -114,7 +118,7 @@ export interface AvatarPropTypes extends AvatarAttributes, CommonProps {
 const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   'ui5-avatar',
   ['accessibleName', 'colorScheme', 'icon', 'initials', 'shape', 'size'],
-  ['interactive'],
+  ['disabled', 'interactive'],
   ['badge'],
   [],
   () => import('@ui5/webcomponents/dist/Avatar.js')

packages/main/src/webComponents/Breadcrumbs/Breadcrumbs.mdx

@@ -5,6 +5,7 @@ import { BreadcrumbsItem } from '../BreadcrumbsItem';
 import BreadcrumbsItemDescription from '../BreadcrumbsItem/BreadcrumbsItemDescription.md?raw';
 import * as ComponentStories from './Breadcrumbs.stories';
 import Description from './BreadcrumbsDescription.md?raw';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -27,6 +28,6 @@ import Description from './BreadcrumbsDescription.md?raw';
 ## BreadcrumbsItem
 
 <Markdown>{BreadcrumbsItemDescription}</Markdown>
-<ArgTypesWithNote hideHTMLPropsNote of={BreadcrumbsItem} />
+<ArgTypesWithNote exclude={excludePropsForAbstract} hideHTMLPropsNote of={BreadcrumbsItem} />
 
 <Footer />

packages/main/src/webComponents/Calendar/Calendar.mdx

@@ -1,4 +1,5 @@
 import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { excludePropsForAbstract } from '@sb/utils';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { Canvas, Markdown, Meta } from '@storybook/blocks';
 import { CalendarDate } from '../CalendarDate';
@@ -26,7 +27,7 @@ import Description from './CalendarDescription.md?raw';
 
 ## CalendarDate
 
-<ArgTypesWithNote of={CalendarDate} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={CalendarDate} />
 <Markdown>{CalendarDateDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/ColorPalette/ColorPalette.mdx

@@ -5,6 +5,7 @@ import { ColorPaletteItem } from '../ColorPaletteItem';
 import ColorPaletteItemDescription from '../ColorPaletteItem/ColorPaletteItemDescription.md?raw';
 import * as ComponentStories from './ColorPalette.stories';
 import ColorPaletteDescription from './ColorPaletteDescription.md?raw';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -26,7 +27,7 @@ import ColorPaletteDescription from './ColorPaletteDescription.md?raw';
 
 ## ColorPaletteItem
 
-<ArgsTableWithNote of={ColorPaletteItem} />
+<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ColorPaletteItem} />
 <Markdown>{ColorPaletteItemDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/ComboBox/ComboBox.mdx

@@ -8,6 +8,7 @@ import { ComboBoxItem } from '../ComboBoxItem';
 import ComboBoxItemDescription from '../ComboBoxItem/ComboBoxItemDescription.md?raw';
 import * as ComponentStories from './ComboBox.stories';
 import Description from './ComboBoxDescription.md?raw';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -39,12 +40,12 @@ All available filter types controlled by the `filter` prop.
 
 ## ComboBoxItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={ComboBoxItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ComboBoxItem} />
 <Markdown>{ComboBoxItemDescription}</Markdown>
 
 ## ComboBoxGroupItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={ComboBoxGroupItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ComboBoxGroupItem} />
 <Markdown>{ComboBoxGroupItemDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/Dialog/DialogDescription.md

@@ -14,3 +14,6 @@ The `Dialog` exposes the following CSS Shadow Parts:
 - header - Used to style the header of the component
 - content - Used to style the content of the component
 - footer - Used to style the footer of the component
+
+**Note:** When a `Bar` is used in the header or in the footer, you should remove the default dialog's paddings.  
+For more information see the sample "Bar in Header/Footer".

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

@@ -101,6 +101,8 @@ export interface DialogPropTypes extends DialogAttributes, Omit<CommonProps, 'dr
   /**
    * Defines the footer HTML Element.
    *
+   * **Note:** When a `Bar` is used in the footer, you should remove the default dialog's paddings.
+   *
    * __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="footer"`).
    * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
    *
@@ -111,6 +113,8 @@ export interface DialogPropTypes extends DialogAttributes, Omit<CommonProps, 'dr
   /**
    * Defines the header HTML Element.
    *
+   * **Note:** When a `Bar` is used in the header, you should remove the default dialog's paddings.
+   *
    * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer. `accessibleName` should be used.
    *
    * __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="header"`).

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

@@ -70,6 +70,7 @@ export interface FileUploaderPropTypes extends FileUploaderAttributes, Omit<Comm
   /**
    * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
    * **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.
+   * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.
    */
   children?: ReactNode | ReactNode[];
   /**

packages/main/src/webComponents/Input/Input.mdx

@@ -8,6 +8,7 @@ import SuggestionItemDescription from '../SuggestionItem/SuggestionItemDescripti
 import * as ComponentStories from './Input.stories';
 import Description from './InputDescription.md?raw';
 import InputDomRef from './InputDomRef.json';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -46,12 +47,12 @@ and the `showSuggestions` prop is set to `true`.
 
 ## SuggestionItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={SuggestionItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
 <Markdown>{SuggestionItemDescription}</Markdown>
 
 ## SuggestionGroupItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={SuggestionGroupItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionGroupItem} />
 <Markdown>{SuggestionGroupItemDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/Menu/Menu.mdx

@@ -7,6 +7,7 @@ import { MenuItem } from '../MenuItem';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import MenuItemDescription from '../MenuItem/MenuItemDescription.md?raw';
 import MenuDomRef from './MenuDomRef.json';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -116,4 +117,4 @@ const MenuComponent = () => {
 
 <Markdown>{MenuItemDescription}</Markdown>
 
-<ArgTypesWithNote of={MenuItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItem} />

packages/main/src/webComponents/MultiComboBox/MultiComboBox.mdx

@@ -8,6 +8,7 @@ import MultiComboBoxItemDescription from '../MultiComboBoxItem/MultiComboBoxItem
 import * as ComponentStories from './MultiComboBox.stories';
 import Description from './MultiComboBoxDescription.md?raw';
 import MultiComboBoxDomRef from './MultiComboBoxDomRef.json';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -37,12 +38,12 @@ import MultiComboBoxDomRef from './MultiComboBoxDomRef.json';
 
 ## MultiComboBoxItem
 
-<ArgsTableWithNote hideHTMLPropsNote of={MultiComboBoxItem} />
+<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MultiComboBoxItem} />
 <Markdown>{MultiComboBoxItemDescription}</Markdown>
 
 ## MultiComboBoxGroupItem
 
-<ArgsTableWithNote hideHTMLPropsNote of={MultiComboBoxGroupItem} />
+<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MultiComboBoxGroupItem} />
 <Markdown>{MultiComboBoxGroupItemDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/MultiInput/MultiInput.mdx

@@ -9,6 +9,7 @@ import { Token } from '../Token';
 import TokenDescription from '../Token/TokenDescription.md?raw';
 import * as ComponentStories from './MultiInput.stories';
 import MultiInputDomRef from './MultiInputDomRef.json';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -35,12 +36,12 @@ import MultiInputDomRef from './MultiInputDomRef.json';
 
 ## SuggestionItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={SuggestionItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
 <Markdown>{SuggestionItemDescription}</Markdown>
 
 ## SuggestionGroupItem
 
-<ArgTypesWithNote hideHTMLPropsNote of={SuggestionGroupItem} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionGroupItem} />
 <Markdown>{SuggestionGroupItemDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/NotificationListGroupItem/NotificationListGroupItem.mdx

@@ -5,6 +5,7 @@ import { NotificationAction } from '../NotificationAction';
 import NotificationActionDescription from '../NotificationAction/NotificationActionDescription.md?raw';
 import * as ComponentStories from './NotificationListGroupItem.stories';
 import NotificationListGroupItemDescription from './NotificationListGroupItemDescription.md?raw';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -24,7 +25,7 @@ import NotificationListGroupItemDescription from './NotificationListGroupItemDes
 
 ## NotificationAction
 
-<ArgTypesWithNote hideHTMLPropsNote of={NotificationAction} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={NotificationAction} />
 <Markdown>{NotificationActionDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/NotificationListItem/NotificationListItem.mdx

@@ -5,6 +5,7 @@ import { NotificationAction } from '../NotificationAction';
 import NotificationActionDescription from '../NotificationAction/NotificationActionDescription.md?raw';
 import * as ComponentStories from './NotificationListItem.stories';
 import NotificationListItemDescription from './NotificationListItemDescription.md?raw';
+import { excludePropsForAbstract } from '@sb/utils';
 
 <Meta of={ComponentStories} />
 
@@ -33,7 +34,7 @@ import NotificationListItemDescription from './NotificationListItemDescription.m
 
 ## NotificationAction
 
-<ArgTypesWithNote hideHTMLPropsNote of={NotificationAction} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={NotificationAction} />
 <Markdown>{NotificationActionDescription}</Markdown>
 
 <Footer />

packages/main/src/webComponents/Option/OptionDescription.md

@@ -1 +1,3 @@
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
+
 The `Option` component defines the content of an option in the `Select`

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

@@ -46,6 +46,8 @@ export interface OptionPropTypes extends OptionAttributes, CommonProps {
 /**
  * The `Option` component defines the content of an option in the `Select`
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
  * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Select)

packages/main/src/webComponents/Page/PageDescription.md

@@ -11,3 +11,10 @@ The content occupies the main part of the page. Only the content area is scrolla
 ### Footer
 
 The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the `floatingFooter` property. **Note:** `Page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure that there is enough space for the `Page` to be rendered. **Note:** In order for the `Page` to be displayed, the parent element should have fixed height.
+
+## 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 `Page` exposes the following CSS Shadow Parts:
+
+- content - Used to style the content section of the component

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

@@ -40,6 +40,10 @@ interface PanelAttributes {
    * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
    */
   noAnimation?: boolean;
+  /**
+   * Indicates whether the Panel header is sticky or not. If stickyHeader is set to true, then whenever you scroll the content or the application, the header of the panel will be always visible and a solid color will be used for its design.
+   */
+  stickyHeader?: boolean;
 }
 
 export interface PanelDomRef extends PanelAttributes, Ui5DomRef {}
@@ -77,7 +81,7 @@ export interface PanelPropTypes extends PanelAttributes, CommonProps {
 const Panel = withWebComponent<PanelPropTypes, PanelDomRef>(
   'ui5-panel',
   ['accessibleName', 'accessibleRole', 'headerLevel', 'headerText'],
-  ['collapsed', 'fixed', 'noAnimation'],
+  ['collapsed', 'fixed', 'noAnimation', 'stickyHeader'],
   ['header'],
   ['toggle'],
   () => import('@ui5/webcomponents/dist/Panel.js')