Merge branch 'main' into feat/exports-path

Author: Lukas742

.storybook/images/sb-pkg-filter.png

@@ -2,6 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 import { Footer, TableOfContent } from '@sb/components';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import SbTagFilter from '@sb/images/sb-pkg-filter.png';
+import { Badge } from "@sb/components/Badge.js";
 
 <Meta title="FAQ" />
 
@@ -25,12 +26,12 @@ import SbTagFilter from '@sb/images/sb-pkg-filter.png';
 <br />
 <br />
 
-## Where can I find all compatible versions of `@ui5/webcomponents` and `@ui5/webcomponents-react`?
+## Where Can I Find All Compatible Versions of `@ui5/webcomponents` and `@ui5/webcomponents-react`?
 
 All necessary `@ui5/webcomponents` packages are `peerDependencies` of `@ui5/webcomponents-react`, so if you're using npm v7 or later, then these dependencies should be auto installed when running `npm install`.
 If you want to check which versions are compatible you can find a compatibility table [here](?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app).
 
-## What are "abstract" UI5 Web Components?
+## What Are "abstract" UI5 Web Components?
 
 Abstract UI5 Web Components are mainly there to pass props to the actual component inside the shadow root. Therefore, all attributes passed to the element, will have no effect on the actual component.
 
@@ -59,17 +60,17 @@ Rendering a `ComboBoxItem` with some custom HTML attributes...
 
 As you can see, both `title` and `style` are correctly applied, but since the item doesn't have children, nor a shadow root the attributes don't have an effect on the component.
 
-## How can I style elements inside the shadow root of a web component?
+## How Can I Style Elements Inside the Shadow Root of a Web Component?
 
 Styling elements inside the shadow root is only supported by leveraging the [`::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). You can find out more about this [here](?path=/docs/knowledge-base-styling--docs#css-shadow-parts).
 
-## How can I reuse or change colors, fonts, etc. of UI5 Web Components for React?
+## How Can I Reuse or Change Colors, Fonts, etc. of UI5 Web Components for React?
 
 UI5 Web Components for React comes with a [publicly available](https://github.com/SAP/theming-base-content) set of CSS variables that ensure the same look and feel across applications. Changing these values is not recommended, if you still need to customize them, you can find out more about this [here](?path=/docs/knowledge-base-styling--docs#styling-ui5-web-components-for-react-components).
 
 To reuse these styles, you can either use the CSS variable, or use our [Theming Parameters](?path=/docs/knowledge-base-public-utils--docs#theming-parameters).
 
-## Why is changing the theme not working?
+## Why Is Changing the Theme Not Working?
 
 You have to ensure to import the `Assets` with the different themes, otherwise only the default theme will be used.
 
@@ -79,19 +80,25 @@ import '@ui5/webcomponents-react/dist/Assets';
 
 Further information about theming can be found in our and the UI5 Web Components [Theming documentation](?path=/docs/getting-started--docs#theming).
 
-## How can I distinguish if a component is developed in the `ui5-webcomponents` or `ui5-webcomponents-react` repo?
+## How Can I Distinguish If a Component Is Developed in the `ui5-webcomponents` or `ui5-webcomponents-react` Repo?
 
 Each component developed by the UI5 Web Components team ([`ui5-webcomponents`](https://github.com/SAP/ui5-webcomponents)) that is wrapped by the UI5 Web Components for React ([`ui5-webcomponents-react`](https://github.com/SAP/ui5-webcomponents-react)) wrapper includes the following note in its component description:
 
-**Note**: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+> **Note**: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
 
 If a component does not have this note, it is a React-only component provided exclusively by `ui5-webcomponents-react`.
 
-Additionally, Storybook supports filtering by tags, allowing you to filter by different `ui5-webcomponents` packages as well:
+Additionally, Storybook supports filtering by tags, allowing you to filter by different `ui5-webcomponents(-react)` packages as well:
 
-<img src={SbTagFilter} alt="Storybook Tag Filter" height={320} />
+<img src={SbTagFilter} alt="Storybook Tag Filter" height={420} />
 
-## Why isn't scoping working?
+## What Do the Badges in the Side Navigation Mean?
+
+- <Badge type="custom" />: There are no global design or UX specifications for this component, or it deviates from them partially or fully. More details can be found in the component’s description.
+- <Badge type="experimental" />: The component or pattern is in an experimental state, meaning changes to its public API may occur without a major version update (`v3.0.0`).
+- <Badge type="deprecated" />: The component is deprecated and will be removed in the next major version update (`v3.0.0`). More details can be found in the component's description.
+
+## Why Isn't Scoping Working?
 
 Starting from UI5 Web Components (for React) 2.0.0, the order of imports with regard to scoping and components matters.
 Setting the scoping suffix must be done before importing any components, as they use the suffix at the top-level of the module - meaning when a component is imported, the suffix has to be known.

docs/knowledge-base/FAQ.mdx

@@ -70,7 +70,7 @@
     "@vitejs/plugin-react": "4.7.0",
     "chromatic": "13.1.3",
     "cssnano": "7.1.1",
-    "cypress": "14.5.4",
+    "cypress": "15.0.0",
     "cypress-real-events": "1.14.0",
     "dedent": "1.6.0",
     "documentation": "14.0.3",

package.json

@@ -103,6 +103,7 @@ export interface ScatterChartProps extends Omit<IChartBaseProps<IScatterChartCon
    * </code>
    */
   dataset?: ScatterDataObject[];
+  //todo: use object instead of array (next major release)
   /**
    * An array of config objects. Each object is defining one axis in the chart.
    *
@@ -115,7 +116,7 @@ export interface ScatterChartProps extends Omit<IChartBaseProps<IScatterChartCon
    *  - `label`: Label to display in tooltips. Falls back to the <code>accessor</code> if not present.
    *  - `formatter`: function will be called for each data label and allows you to format it according to your needs. Also addresses labels of axis.
    */
-  measures?: MeasureConfig[];
+  measures: [MeasureConfig, MeasureConfig, MeasureConfig, ...MeasureConfig[]];
 }
 
 const measureDefaults = {
@@ -316,7 +317,6 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
             label={referenceLineX?.label}
           />
         )}
-        {/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
         {tooltipConfig?.active !== false && (
           <Tooltip
             cursor={tooltipFillOpacity}

packages/charts/src/components/ScatterChart/index.tsx

@@ -25,7 +25,7 @@
   "peerDependencies": {
     "@ui5/webcomponents": "~2.13.1",
     "@ui5/webcomponents-base": "~2.13.1",
-    "cypress": "^12 || ^13 || ^14"
+    "cypress": "^12 || ^13 || ^14 || ^15"
   },
   "peerDependenciesMeta": {
     "@ui5/webcomponents": {

packages/cypress-commands/package.json

@@ -4,6 +4,7 @@ import { Link } from '@ui5/webcomponents-react';
 import { useRef } from 'react';
 import { MessageItem } from './MessageItem';
 import { MessageView } from './index.js';
+import { Dialog } from '../../webComponents/Dialog/index.js';
 
 describe('MessageView', () => {
   it('default & grouped', () => {
@@ -80,54 +81,64 @@ describe('MessageView', () => {
     getAllTextsVisible();
   });
 
-  it('select & nav back', () => {
-    const select = cy.spy().as('select');
-    const TestComp = () => {
-      const ref = useRef(null);
-      return (
-        <>
-          <button
-            onClick={() => {
-              ref.current.navigateBack();
-            }}
-          >
-            nav back
-          </button>
-          <MessageView onItemSelect={select} ref={ref} showDetailsPageHeader>
-            <MessageItem titleText="Error" type={ValueState.Negative} groupName="Group1">
-              Error Message
-            </MessageItem>
-            <MessageItem titleText="Warning" type={ValueState.Critical} groupName="Group1">
-              Warning
-            </MessageItem>
-            <MessageItem titleText="Success" type={ValueState.Positive}>
-              Success
-            </MessageItem>
-            <MessageItem titleText="Information" type={ValueState.Information}>
-              Information Message
-            </MessageItem>
-            <MessageItem titleText="None" type={ValueState.None} groupName="Group2">
-              None
-            </MessageItem>
-          </MessageView>
-        </>
-      );
-    };
-    cy.mount(<TestComp />);
-    cy.findByText('Error').click();
-    cy.findAllByText('Error').should('have.length', 1);
-    cy.findByText('Error Message').should('be.visible');
-    cy.get('[ui5-button]').click();
-    cy.findAllByText('Error').should('have.length', 1);
-    cy.findByText('Error Message').should('not.exist');
-    cy.get('@select').should('have.been.calledOnce');
-    cy.findByText('Information').click();
-    cy.findAllByText('Information').should('have.length', 1);
-    cy.findByText('Information Message').should('be.visible');
-    cy.findByText('nav back').click();
-    cy.findAllByText('Information').should('have.length', 1);
-    cy.findByText('Information Message').should('not.exist');
-    cy.get('@select').should('have.been.calledTwice');
+  [false, true].forEach((inDialog) => {
+    ['ltr', 'rtl'].forEach((dir) => {
+      it(`select & nav back ${inDialog ? 'in Dialog' : ''} (${dir})`, () => {
+        const select = cy.spy().as('select');
+        const TestComp = () => {
+          const ref = useRef(null);
+          const Parent = inDialog ? Dialog : 'div';
+          return (
+            <Parent dir={dir} open style={{ width: '400px' }}>
+              <button
+                slot="header"
+                onClick={() => {
+                  ref.current.navigateBack();
+                }}
+              >
+                nav back
+              </button>
+              <MessageView onItemSelect={select} ref={ref} showDetailsPageHeader={!inDialog}>
+                <MessageItem titleText="Error" type={ValueState.Negative} groupName="Group1">
+                  Error Message
+                </MessageItem>
+                <MessageItem titleText="Warning" type={ValueState.Critical} groupName="Group1">
+                  Warning
+                </MessageItem>
+                <MessageItem titleText="Success" type={ValueState.Positive}>
+                  Success
+                </MessageItem>
+                <MessageItem titleText="Information" type={ValueState.Information}>
+                  Information Message
+                </MessageItem>
+                <MessageItem titleText="None" type={ValueState.None} groupName="Group2">
+                  None
+                </MessageItem>
+              </MessageView>
+            </Parent>
+          );
+        };
+        cy.mount(<TestComp />);
+        cy.findByText('Error').click();
+        cy.findAllByText('Error').should('have.length', 1);
+        cy.findByText('Error Message').should('be.visible');
+        if (inDialog) {
+          cy.findByText('nav back').click();
+        } else {
+          cy.get('[ui5-button]').click();
+        }
+        cy.findAllByText('Error').should('have.length', 1);
+        cy.findByText('Error Message').should('not.exist');
+        cy.get('@select').should('have.been.calledOnce');
+        cy.findByText('Information').click();
+        cy.findAllByText('Information').should('have.length', 1);
+        cy.findByText('Information Message').should('be.visible');
+        cy.findByText('nav back').click();
+        cy.findAllByText('Information').should('have.length', 1);
+        cy.findByText('Information Message').should('not.exist');
+        cy.get('@select').should('have.been.calledTwice');
+      });
+    });
   });
 
   it('one/no message-type/item', () => {
@@ -168,7 +179,7 @@ describe('MessageView', () => {
     // remaining props were already tested
     cy.findByText('SubtitleText').should('be.visible');
     cy.findByText('1337').should('be.visible');
-    cy.get('[name="slim-arrow-right"]').should('be.visible').click();
+    cy.get('[name="slim-arrow-right"]').should('be.visible').realClick();
     cy.findByText('SubtitleText').should('not.exist');
     cy.findByText('1337').should('not.exist');
   });

packages/main/src/components/MessageView/MessageView.cy.tsx

@@ -8,14 +8,22 @@
   > * {
     width: 100%;
     flex-shrink: 0;
-    transition: transform 200ms ease-in-out;
+    transition:
+      transform 200ms ease-in-out,
+      opacity 300ms ease-in-out;
   }
 }
 
-.showDetails {
-  > * {
-    transform: translateX(-100%);
-  }
+.container[data-with-animation='false'] > * {
+  transition: none;
+}
+
+.showDetails > * {
+  transform: translateX(-100%);
+}
+
+:dir(rtl) .showDetails > * {
+  transform: translateX(100%);
 }
 
 .button {

packages/main/src/components/MessageView/MessageView.module.css

@@ -4,6 +4,7 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import ListSeparator from '@ui5/webcomponents/dist/types/ListSeparator.js';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
+import { getAnimationMode } from '@ui5/webcomponents-base/dist/config/AnimationMode.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
 import iconSlimArrowLeft from '@ui5/webcomponents-icons/dist/slim-arrow-left.js';
@@ -64,6 +65,8 @@ export interface MessageViewPropTypes extends CommonProps {
   onItemSelect?: ListPropTypes['onItemClick'];
 }
 
+const withAnimation = getAnimationMode() !== 'none';
+
 export const resolveMessageTypes = (children: ReactElement<MessageItemPropTypes>[]) => {
   return (children ?? [])
     .map((message) => message?.props?.type)
@@ -178,7 +181,7 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
         const selectedItem = listRef.current.querySelector<Ui5DomRef>(
           `[data-title="${CSS.escape(prevSelectedMessage.current.titleTextStr)}"]`,
         );
-        void selectedItem.focus();
+        void selectedItem?.focus();
       });
     }
     transitionTrigger.current = null;
@@ -193,13 +196,22 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
 
   const outerClasses = clsx(classNames.container, className, selectedMessage && classNames.showDetails);
   return (
-    <div ref={componentRef} {...rest} className={outerClasses} onTransitionEnd={handleTransitionEnd}>
+    <div
+      ref={componentRef}
+      {...rest}
+      className={outerClasses}
+      onTransitionEnd={handleTransitionEnd}
+      data-with-animation={`${withAnimation}`}
+    >
       <MessageViewContext.Provider
         value={{
           selectMessage: setSelectedMessage,
         }}
       >
-        <div style={{ visibility: selectedMessage ? 'hidden' : 'visible' }} className={classNames.messagesContainer}>
+        <div
+          style={{ visibility: selectedMessage ? 'hidden' : 'visible', opacity: selectedMessage ? 0.3 : 1 }}
+          className={classNames.messagesContainer}
+        >
           {!selectedMessage && (
             <>
               {filledTypes > 1 && (
@@ -257,7 +269,11 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
             </>
           )}
         </div>
-        <div className={classNames.detailsContainer} data-component-name="MessageViewDetailsContainer">
+        <div
+          className={classNames.detailsContainer}
+          style={{ opacity: selectedMessage ? 1 : 0.3 }}
+          data-component-name="MessageViewDetailsContainer"
+        >
           {childrenArray.length > 0 ? (
             <>
               {showDetailsPageHeader && selectedMessage && (

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

@@ -431,7 +431,7 @@ describe('ObjectPage', () => {
     cy.findByTestId('footer').should('be.visible');
 
     // Select Employment tab
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').focus();
     cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
     cy.get('[ui5-tabcontainer]').realPress('ArrowRight');
     cy.get('[ui5-tabcontainer]').realPress('ArrowRight');