Merge branch 'main' into fix/at-scale-width-smart-grow

Author: Lukas742

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6

.github/workflows/main.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: REUSE Compliance Check
-        uses: fsfe/reuse-action@bb774aa972c2a89ff34781233d275075cbddf542 # v5.0.0
+        uses: fsfe/reuse-action@676e2d560c9a403aa252096d99fcab3e1132b0f5 # v6.0.0
 
   check-bundle-size:
     if: ${{ github.base_ref == 'main' }} # only for PRs targeting main branch

.github/workflows/release.yml

@@ -15,7 +15,11 @@ on:
         default: false
 
 jobs:
+  build:
+    uses: './.github/workflows/build.yml'
+
   test:
+    needs: ['build']
     uses: './.github/workflows/test.yml'
     with:
       reportCoverage: false

.github/workflows/stale.yml

@@ -8,7 +8,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+      - uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
         with:
           # The number of days old an issue can be before marking it stale. Set to -1 to never mark issues or pull requests as stale automatically.
           days-before-stale: 14

.github/workflows/test.yml

@@ -19,6 +19,7 @@ jobs:
           - charts
           - cypress-commands
           - main/src/components
+          - main/src/webComponents
           - main/src/internal
           - compat
         react: ['18', '19']

.gitignore

@@ -31,3 +31,5 @@ cypress/downloads
 .nx
 
 debug-storybook.log
+
+.vscode

.storybook/components/Footer.tsx

@@ -1,6 +1,7 @@
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
+import type { ButtonPropTypes, PopoverDomRef } from '@ui5/webcomponents-react';
 import {
   Button,
   FlexBox,
@@ -12,22 +13,25 @@ import {
   Popover,
   Text,
 } from '@ui5/webcomponents-react';
+import type { CommonProps } from '@ui5/webcomponents-react-base';
+import { clsx } from 'clsx';
 import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
 import classes from './Footer.module.css';
 
-export const Footer = ({ style }) => {
-  const popoverRef = useRef(null);
+export const Footer = (props: CommonProps) => {
+  const { className } = props;
+  const popoverRef = useRef<PopoverDomRef>(null);
   const footerRef = useRef(null);
   const [privacyPopoverOpen, setPPOpen] = useState(false);
-  const showPrivacyPopover = (e) => {
+  const showPrivacyPopover: ButtonPropTypes['onClick'] = (e) => {
     popoverRef.current.opener = e.target;
     setPPOpen((prev) => !prev);
   };
 
   return createPortal(
-    <footer className={classes.footer} style={style}>
+    <footer {...props} className={clsx(classes.footer, className)}>
       <div ref={footerRef} className={classes.content}>
         <FlexBox
           justifyContent={FlexBoxJustifyContent.SpaceBetween}

.storybook/components/ProjectTemplate.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   ThemeProvider,
 } from '@ui5/webcomponents-react';
+// eslint-disable-next-line import/order
 import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';

.storybook/custom-element-manifests/ai.json

@@ -110,7 +110,7 @@
                 ]
               },
               "default": "{}",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n   Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
               "privacy": "public",
               "_ui5since": "2.6.0"
             }
@@ -177,7 +177,7 @@
               }
             },
             {
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n   Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n   Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n   Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n   Accepts boolean values: `true` or `false`.",
               "name": "accessibility-attributes",
               "default": "{}",
               "fieldName": "accessibilityAttributes",