Merge branch 'main' into feat/ops-tab-ref

Author: Lukas742

.github/ISSUE_TEMPLATE/documentation.yml

@@ -46,5 +46,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -54,5 +54,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/workflows/release.yml

@@ -92,7 +92,6 @@ jobs:
             --create-release github
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
 
       - name: build
@@ -102,7 +101,6 @@ jobs:
         run: ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish from-git
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
 
       ### Semantic Release Bot comments for issues and PRs ###

.gitignore

@@ -26,4 +26,6 @@ packages/main/scripts/wrapperGeneration/json
 packages/main/tmp
 packages/*/src/generated/
 
+cypress/downloads
+
 .nx

.nvmrc

@@ -1 +1 @@
-22.17.1
+22.18.0

.storybook/components/ArgTypesWithNote.tsx

@@ -1,3 +1,4 @@
+import { DomRefTable } from '@sb/components/DomRefTable.js';
 import { ArgTypes } from '@storybook/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
@@ -12,20 +13,30 @@ interface ArgTypesWithNotePropTypes {
    * Defaults to: "This component supports all HTML attributes."
    */
   noteText?: ReactNode | ReactNode[];
+  /**
+   * If `true` all headings are rendered as `Heading`s instead of `Subheading`s.
+   */
+  isHeading?: boolean;
 }
 
 export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTypesWithNotePropTypes) {
-  const { hideHTMLPropsNote, noteText, ...rest } = props;
+  const { hideHTMLPropsNote, noteText, isHeading, ...rest } = props;
 
   if (hideHTMLPropsNote) {
-    return <ArgTypes {...rest} />;
+    return (
+      <>
+        <ArgTypes {...rest} />
+        <DomRefTable of={rest.of} isSubheading={!isHeading} />
+      </>
+    );
   }
   return (
     <div className={classes.tableContainer}>
       <MessageStrip design={MessageStripDesign.Information} hideCloseButton className={classes.strip}>
         {noteText ?? 'This component supports all HTML attributes.'}
       </MessageStrip>
       <ArgTypes {...rest} />
+      <DomRefTable of={rest.of} isSubheading={!isHeading} />
     </div>
   );
 }

.storybook/components/DomRefTable.tsx

@@ -1,8 +1,9 @@
-import { DocsContext, Heading } from '@storybook/blocks';
+import type { ArgTypes } from '@storybook/blocks';
+import { DocsContext, Heading, Subheading } from '@storybook/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { Fragment, useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetCem } from '../utils';
@@ -47,14 +48,20 @@ function Name(props: CEM.ClassMember) {
   );
 }
 
-export function DomRefTable() {
+export function DomRefTable({
+  of,
+  isSubheading,
+}: {
+  of?: ComponentProps<typeof ArgTypes>['of'];
+  isSubheading?: boolean;
+}) {
   const docsContext = useContext(DocsContext);
   const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
   const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
-  const componentName = docsContext.componentStories().at(0)?.component?.displayName;
+  const componentName = of?.displayName ?? docsContext.componentStories().at(0)?.component?.displayName;
   const popoverRef = useRef(null);
 
-  const knownAttributes = new Set(Object.keys(docsContext.primaryStory?.argTypes ?? {}));
+  const knownAttributes = new Set(Object.keys(of?.__docgenInfo?.props ?? docsContext.primaryStory?.argTypes ?? {}));
   const cem = useGetCem();
 
   const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
@@ -69,12 +76,13 @@ export function DomRefTable() {
       return !(knownAttributes.has(row.name) && !row.type?.text?.includes('HTMLElement'));
     }) ?? [];
   const cssParts: CEM.CssPart[] = componentMembers?.cssParts ?? [];
+  const HeadingComponent = isSubheading ? Subheading : Heading;
 
   return (
     <>
       {rows.length > 0 ? (
         <>
-          <Heading>DOM Properties & Methods</Heading>
+          <HeadingComponent>DOM Properties & Methods</HeadingComponent>
           <p>
             This component exposes public properties and methods. You can use them directly on the instance of the
             component, e.g. by using React Refs.
@@ -150,7 +158,7 @@ export function DomRefTable() {
 
       {cssParts.length > 0 ? (
         <>
-          <Heading>CSS Shadow Parts</Heading>
+          <HeadingComponent>CSS Shadow Parts</HeadingComponent>
           <p>
             <Link target={'_blank'} href={'https://developer.mozilla.org/en-US/docs/Web/CSS/::part'}>
               CSS Shadow Parts

README.md

@@ -80,9 +80,9 @@ To consume `ui5-webcomponents-react`, you need to install the npm modules and re
 npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
 ```
 
-## Ongoing Support for Version 1.x
+## End of Support for Version 1.x
 
-We will continue to support version 1.x until end of June 2025, focusing on bug fixes to ensure continuity for our existing users.
+The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs).
 
 <!-- *********************************************************************** -->
 

docs/Welcome.mdx

@@ -29,11 +29,9 @@ In addition to that, UI5 Web Components for React is providing complex component
 - [Node.js](https://nodejs.org/) (**LTS version**)
 - If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
 
-## Ongoing Support for Version 1.x
+## End of Support for Version 1.x
 
-We will continue to support version 1.x until **end of June 2025**, focusing on bug fixes to ensure continuity for our existing users.
-
-[V1 Release Documentation](https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/getting-started--docs)
+The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](?path=/docs/migration-guide--docs).
 
 ## Getting Started
 

docs/knowledge-base/FAQ.mdx

@@ -14,7 +14,7 @@ import SbTagFilter from '@sb/images/sb-pkg-filter.png';
   children={
     <>
       Please also take a look at the FAQ of{' '}
-      <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-faq">
+      <ui5-link href="https://sap.github.io/ui5-webcomponents/docs/FAQ/">
         UI5 Web Components
       </ui5-link>
       .