fix(website): correct TypeScript type mismatches in React samples

ilhan007 · ilhan007 · commit cac28993ced3 · 2026-03-05T20:10:33.000+02:00
- Fix number/string mismatches (Input value, StepInput min/step,
  RatingIndicator value, Table rowKey, TableHeaderCell importance,
  TabContainer additionalText)
- Fix deprecated/renamed props (CardHeader status→additionalText,
  Tree mode→selectionMode, MultiSelect→Multiple, maxLength→maxlength)
- Remove non-existent HTML attributes used as props (timestamp,
  handler)
- Fix boolean string props (preventFocusRestore, nameClickable)
- Fix Table/Selection event handler typing
- Fix typo tabindsex→tabIndex
diff --git a/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.tsx b/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.tsx
@@ -74,7 +74,7 @@ function App() {
           className="personPopover"
           style={{ width: "300px" }}
           placement="Bottom"
-          preventFocusRestore=""
+          preventFocusRestore={true}
         >
           <div className="avatar-slot" style={{ display: "inline-block" }}>
             <Avatar
diff --git a/packages/website/docs/_samples/main/Card/WithTimeline/sample.tsx b/packages/website/docs/_samples/main/Card/WithTimeline/sample.tsx
@@ -28,21 +28,18 @@ function App() {
         <Timeline>
           <TimelineItem
             titleText="called"
-            timestamp={1487583000000}
             icon="phone"
             name="John Smith"
             nameClickable={true}
           />
           <TimelineItem
             titleText="Weekly Sync - BTP Design"
-            timestamp={1517349600000}
             icon="calendar"
           >
             MR SOF02 2.43
           </TimelineItem>
           <TimelineItem
             titleText="Video Conference Call - UI5"
-            timestamp={1485813600000}
             icon="calendar"
           >
             Online meeting
diff --git a/packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.tsx b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.tsx
@@ -41,7 +41,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 1"
+            additionalText="Item 1"
             titleText="Visible Card 1"
             subtitleText="This card is visible"
           />
@@ -65,7 +65,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 2"
+            additionalText="Item 2"
             titleText="Hidden Card 2"
             subtitleText="This card is hidden via attribute"
           >
@@ -85,7 +85,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 3"
+            additionalText="Item 3"
             titleText="Visible Card 3"
             subtitleText="Visible card after hidden one"
           />
@@ -105,7 +105,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 4"
+            additionalText="Item 4"
             titleText="Visible Card 4"
             subtitleText="Visible item example"
           />
@@ -129,7 +129,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 5"
+            additionalText="Item 5"
             titleText="Hidden Card 5"
             subtitleText="Another hidden example"
           >
@@ -147,7 +147,7 @@ function App() {
         >
           <CardHeader
             slot="header"
-            status="Item 6"
+            additionalText="Item 6"
             titleText="Visible Card 6"
             subtitleText="End of visible sequence"
           />
diff --git a/packages/website/docs/_samples/main/Carousel/MultipleItemsPerPage/sample.tsx b/packages/website/docs/_samples/main/Carousel/MultipleItemsPerPage/sample.tsx
@@ -60,21 +60,18 @@ function App() {
             <TimelineItem
               id="test-item"
               titleText="called"
-              timestamp={1487583000000}
               icon="phone"
               name="John Smith"
-              nameClickable=""
+              nameClickable={true}
             />
             <TimelineItem
               titleText="Weekly Sync - CP Design"
-              timestamp={1517349600000}
               icon="calendar"
             >
               MR SOF02 2.43
             </TimelineItem>
             <TimelineItem
               titleText="Video Conference Call - UI5"
-              timestamp={1485813600000}
               icon="calendar"
             >
               Online meeting
@@ -106,7 +103,7 @@ function App() {
             slot="header"
             titleText="Team Dolphins"
             subtitleText="Direct Reports"
-            status="1 of 2"
+            additionalText="1 of 2"
           >
             <Icon name="group" slot="avatar" />
           </CardHeader>
@@ -143,7 +140,7 @@ function App() {
             titleText="Team Bears"
             subtitleText="Direct Reports"
             interactive={true}
-            status="2 of 2"
+            additionalText="2 of 2"
           >
             <Icon name="group" slot="avatar" />
           </CardHeader>
diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/sample.tsx b/packages/website/docs/_samples/main/Form/CustomHeader/sample.tsx
@@ -62,7 +62,7 @@ function App() {
           <Label id="cityLbl" for="cityInp" slot="labelContent">
             ZIP Code/City:
           </Label>
-          <Input id="cityInp" value={411} accessibleNameRef="cityLbl" />
+          <Input id="cityInp" value="411" accessibleNameRef="cityLbl" />
           <Input value="Maintown" accessibleNameRef="cityLbl" />
         </FormItem>
 
@@ -80,7 +80,7 @@ function App() {
           <Input id="streetInp" value="Main St" accessibleNameRef="streetLbl" />
           <Input
             id="streetNumberInp"
-            value={1618}
+            value="1618"
             accessibleNameRef="streetLbl"
           />
         </FormItem>
diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/sample.tsx b/packages/website/docs/_samples/main/Form/EmptySpan/sample.tsx
@@ -78,7 +78,7 @@ function App() {
             <Label id="cityLbl" for="cityInp" slot="labelContent">
               ZIP Code/City:
             </Label>
-            <Input id="cityInp" value={411} accessibleNameRef="cityLbl" />
+            <Input id="cityInp" value="411" accessibleNameRef="cityLbl" />
             <Input value="Maintown" accessibleNameRef="cityLbl" />
           </FormItem>
 
@@ -100,7 +100,7 @@ function App() {
             />
             <Input
               id="streetNumberInp"
-              value={1618}
+              value="1618"
               accessibleNameRef="streetLbl"
             />
           </FormItem>
@@ -143,7 +143,7 @@ function App() {
             <Label id="cityLbl" for="cityInp" slot="labelContent">
               ZIP Code/City:
             </Label>
-            <Input id="cityInp" value={411} accessibleNameRef="cityLbl" />
+            <Input id="cityInp" value="411" accessibleNameRef="cityLbl" />
             <Input value="Maintown" accessibleNameRef="cityLbl" />
           </FormItem>
 
@@ -165,7 +165,7 @@ function App() {
             />
             <Input
               id="streetNumberInp"
-              value={1618}
+              value="1618"
               accessibleNameRef="streetLbl"
             />
           </FormItem>
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.tsx b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.tsx
@@ -119,7 +119,7 @@ function App() {
                 id="streetInp"
                 placeholder="Write your message here"
                 showExceededText={true}
-                maxLength={10}
+                maxlength={10}
               />
             </FormItem>
 
diff --git a/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.tsx b/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.tsx
@@ -89,7 +89,7 @@ function App() {
               id="additionalCommentsInp"
               placeholder="Write your message here"
               showExceededText={true}
-              maxLength={10}
+              maxlength={10}
             />
           </FormItem>
         </Form>
diff --git a/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.tsx b/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.tsx
@@ -66,7 +66,7 @@ function App() {
             <Label id="cityLbl" for="cityInp" slot="labelContent">
               ZIP Code/City:
             </Label>
-            <Input id="cityInp" value={411} accessibleNameRef="cityLbl" />
+            <Input id="cityInp" value="411" accessibleNameRef="cityLbl" />
             <Input value="Maintown" accessibleNameRef="cityLbl" />
           </FormItem>
 
@@ -81,7 +81,7 @@ function App() {
             />
             <Input
               id="streetNumberInp"
-              value={1618}
+              value="1618"
               accessibleNameRef="streetLbl"
             />
           </FormItem>
diff --git a/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.tsx b/packages/website/docs/_samples/main/RatingIndicator/CustomIcons/sample.tsx
@@ -16,7 +16,7 @@ function App() {
       <RatingIndicator value={4} ratedIcon="thumb-up" unratedIcon="border" />
       <br />
       <RatingIndicator
-        value="2.5"
+        value={2.5}
         ratedIcon="circle-task-2"
         unratedIcon="border"
         readonly={true}
diff --git a/packages/website/docs/_samples/main/StepInput/MinMax/sample.tsx b/packages/website/docs/_samples/main/StepInput/MinMax/sample.tsx
@@ -4,7 +4,7 @@ import StepInputClass from "@ui5/webcomponents/dist/StepInput.js";
 const StepInput = createComponent(StepInputClass);
 
 function App() {
-  return <StepInput value={0} min="-50" max={50} step={10} />;
+  return <StepInput value={0} min={-50} max={50} step={10} />;
 }
 
 export default App;
diff --git a/packages/website/docs/_samples/main/StepInput/ValuePrecision/sample.tsx b/packages/website/docs/_samples/main/StepInput/ValuePrecision/sample.tsx
@@ -5,7 +5,7 @@ const StepInput = createComponent(StepInputClass);
 
 function App() {
   return (
-    <StepInput value={5} min="-0" max={10} step="0.5" valuePrecision={1} />
+    <StepInput value={5} min={0} max={10} step={0.5} valuePrecision={1} />
   );
 }
 
diff --git a/packages/website/docs/_samples/main/TabContainer/TabLayout/sample.tsx b/packages/website/docs/_samples/main/TabContainer/TabLayout/sample.tsx
@@ -12,9 +12,9 @@ function App() {
   return (
     <>
       <TabContainer tabLayout="Standard" collapsed>
-        <Tab icon="laptop" text="Monitors" additionalText={10} />
-        <Tab icon="video" text="Cameras" additionalText={2} selected={true} />
-        <Tab icon="home" text="Rooms" additionalText={16} />
+        <Tab icon="laptop" text="Monitors" additionalText="10" />
+        <Tab icon="video" text="Cameras" additionalText="2" selected={true} />
+        <Tab icon="home" text="Rooms" additionalText="16" />
       </TabContainer>
     </>
   );
diff --git a/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx b/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx
@@ -89,7 +89,7 @@ function App() {
             ></TableHeaderCellActionAI>
           </TableHeaderCell>
         </TableHeaderRow>
-        <TableRow rowKey={0}>
+        <TableRow rowKey="0">
           <TableCell>
             <Label>
               <b>Notebook Basic 17</b>
@@ -114,7 +114,7 @@ function App() {
             </Label>
           </TableCell>
         </TableRow>
-        <TableRow rowKey={1}>
+        <TableRow rowKey="1">
           <TableCell>
             <Label>
               <b>Notebook Basic 15</b>
@@ -139,7 +139,7 @@ function App() {
             </Label>
           </TableCell>
         </TableRow>
-        <TableRow rowKey={2}>
+        <TableRow rowKey="2">
           <TableCell>
             <Label>
               <b>Notebook Basic 18</b>
diff --git a/packages/website/docs/_samples/main/Table/RowAction/sample.tsx b/packages/website/docs/_samples/main/Table/RowAction/sample.tsx
@@ -51,8 +51,11 @@ function App() {
     e: UI5CustomEvent<TableClass, "row-action-click">,
   ) => {
     const { action, row } = e.detail;
-    const handler = action.getAttribute("handler");
-    handlers[handler]?.(row);
+    const actionText = (action as any).text?.toLowerCase();
+    const handlerName = actionText
+      ? `on${actionText.charAt(0).toUpperCase()}${actionText.slice(1)}`
+      : null;
+    if (handlerName) handlers[handlerName]?.(row);
   };
 
   return (
@@ -68,7 +71,7 @@ function App() {
           <TableHeaderCell>Supplier</TableHeaderCell>
           <TableHeaderCell horizontalAlign="End">Price</TableHeaderCell>
         </TableHeaderRow>
-        <TableRow rowKey={1} interactive={true}>
+        <TableRow rowKey="1" interactive={true}>
           <TableCell>
             <Label>
               <b>Notebook Basic 15</b>
@@ -87,7 +90,7 @@ function App() {
           <TableRowActionNavigation slot="actions"></TableRowActionNavigation>
         </TableRow>
         {/* playground-fold-end */}
-        <TableRow rowKey={2}>
+        <TableRow rowKey="2">
           <TableCell>
             <Label>
               <b>Astro Laptop 216</b>
@@ -107,40 +110,34 @@ function App() {
             slot="actions"
             icon="delete"
             text="Delete"
-            handler="onDelete"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="add"
             text="Add"
-            handler="onAdd"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="edit"
             text="Edit"
-            handler="onEdit"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="share"
             text="Share"
-            handler="onShare"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="heart"
             text="Like"
-            handler="onLike"
           ></TableRowAction>
           <TableRowActionNavigation
             slot="actions"
-            handler="onNavigate"
             interactive
           ></TableRowActionNavigation>
         </TableRow>
         {/* playground-fold */}
-        <TableRow rowKey={3} navigated={true}>
+        <TableRow rowKey="3" navigated={true}>
           <TableCell>
             <Label>
               <b>Benda Laptop 1408</b>
@@ -160,23 +157,20 @@ function App() {
             slot="actions"
             icon="share"
             text="Share"
-            handler="onShare"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="edit"
             text="Edit"
-            handler="onEdit"
             invisible
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="heart"
             text="Like"
-            handler="onLike"
           ></TableRowAction>
         </TableRow>
-        <TableRow rowKey={4}>
+        <TableRow rowKey="4">
           <TableCell>
             <Label>
               <b>Broad Screen 22HD</b>
@@ -196,13 +190,11 @@ function App() {
             slot="actions"
             icon="share"
             text="Share"
-            handler="onShare"
           ></TableRowAction>
           <TableRowAction
             slot="actions"
             icon="add"
             text="Add"
-            handler="onAdd"
           ></TableRowAction>
         </TableRow>
         {/* playground-fold-end */}
diff --git a/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx b/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx
diff --git a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx
diff --git a/packages/website/docs/_samples/main/Table/Selection/sample.tsx b/packages/website/docs/_samples/main/Table/Selection/sample.tsx
diff --git a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx
diff --git a/packages/website/docs/_samples/main/Tree/DragAndDrop/sample.tsx b/packages/website/docs/_samples/main/Tree/DragAndDrop/sample.tsx

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ function App() {`
`74`	`74`	`className="personPopover"`
`75`	`75`	`style={{ width: "300px" }}`
`76`	`76`	`placement="Bottom"`
`77`		`- preventFocusRestore=""`
	`77`	`+ preventFocusRestore={true}`
`78`	`78`	`>`
`79`	`79`	`<div className="avatar-slot" style={{ display: "inline-block" }}>`
`80`	`80`	`<Avatar`