vite: run codemod + fix breaking changes

Author: Lukas742

examples/nextjs-app/app/components/AppShellBar.tsx

@@ -30,7 +30,6 @@ const THEMES = [
 export function AppShellBar() {
   const router = useRouter();
   const pathname = usePathname();
-  const popoverRef = useRef<ResponsivePopoverDomRef | null>(null);
   const popoverOpenerRef = useRef<ButtonDomRef | undefined>(undefined);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [currentTheme, setCurrentTheme] = useState(getTheme);
@@ -64,7 +63,6 @@ export function AppShellBar() {
         <ShellBarItem icon={paletteIcon} text="Change Theme" onClick={handleThemeSwitchItemClick} />
       </ShellBar>
       <ResponsivePopover
-        ref={popoverRef}
         className={classes.popover}
         open={popoverOpen}
         opener={popoverOpenerRef.current}

examples/vite-ts/src/AppShell.module.css

@@ -1,3 +1,7 @@
 .popover::part(content) {
   padding: 0;
 }
+
+.dynamicPage {
+  height: calc(100% - 52px);
+}

examples/vite-ts/src/AppShell.tsx

@@ -7,21 +7,22 @@ import {
   DynamicPage,
   DynamicPageTitle,
   List,
-  ListMode,
   ListPropTypes,
   ResponsivePopover,
-  ResponsivePopoverDomRef,
   ShellBar,
   ShellBarItem,
   ShellBarItemPropTypes,
-  StandardListItem
+  ListItemStandard,
+  ButtonDomRef,
+  Title
 } from '@ui5/webcomponents-react';
 import { useRef, useState } from 'react';
 import { Outlet, useLocation, useMatches, useNavigate } from 'react-router-dom';
 import { SingleTodoHandle } from './main.tsx';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './AppShell.module.css';
 import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+import ListMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js';
 
 const THEMES = [
   { key: 'sap_horizon', value: 'Morning Horizon (Light)' },
@@ -31,7 +32,8 @@ const THEMES = [
 ];
 
 function AppShell() {
-  const popoverRef = useRef<ResponsivePopoverDomRef>(null);
+  const popoverOpenerRef = useRef<ButtonDomRef | undefined>(undefined);
+  const [popoverOpen, setPopoverOpen] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const matches = useMatches();
@@ -44,13 +46,14 @@ function AppShell() {
     navigate('/');
   };
   const handleThemeSwitchItemClick: ShellBarItemPropTypes['onClick'] = (e) => {
-    popoverRef.current?.showAt(e.detail.targetRef);
+    popoverOpenerRef.current = e.detail.targetRef as ButtonDomRef;
+    setPopoverOpen(true);
   };
   const handleThemeSwitch: ListPropTypes['onSelectionChange'] = (e) => {
     const { targetItem } = e.detail;
-    setTheme(targetItem.dataset.key!);
+    void setTheme(targetItem.dataset.key!);
     setCurrentTheme(targetItem.dataset.key!);
-    popoverRef.current!.close();
+    setPopoverOpen(false);
   };
   return (
     <>
@@ -77,22 +80,29 @@ function AppShell() {
         <ShellBarItem icon={paletteIcon} text="Change Theme" onClick={handleThemeSwitchItemClick} />
       </ShellBar>
       <DynamicPage
-        headerTitle={
+        className={classes.dynamicPage}
+        titleArea={
           <DynamicPageTitle
-            header={detailViewMatchHandle?.getTitle(detailViewMatchData) ?? 'My To-Do List'}
+            heading={<Title>{detailViewMatchHandle?.getTitle(detailViewMatchData) ?? 'My To-Do List'}</Title>}
             breadcrumbs={<Breadcrumbs>{detailViewMatchHandle?.getBreadCrumbItems(detailViewMatchData)}</Breadcrumbs>}
           />
         }
-        showHideHeaderButton={false}
       >
         <Outlet />
       </DynamicPage>
-      <ResponsivePopover ref={popoverRef} className={classes.popover}>
-        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" mode={ListMode.SingleSelect}>
+      <ResponsivePopover
+        className={classes.popover}
+        open={popoverOpen}
+        opener={popoverOpenerRef.current}
+        onClose={() => {
+          setPopoverOpen(false);
+        }}
+      >
+        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" selectionMode={ListMode.Single}>
           {THEMES.map((theme) => (
-            <StandardListItem key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
+            <ListItemStandard key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
               {theme.value}
-            </StandardListItem>
+            </ListItemStandard>
           ))}
         </List>
       </ResponsivePopover>

examples/vite-ts/src/ToDos.module.css

@@ -5,4 +5,4 @@
 .list {
   box-sizing: border-box;
   padding: 0.5rem;
-}
+}

examples/vite-ts/src/ToDos.tsx

@@ -1,9 +1,12 @@
-import { BusyIndicator, Card, List, ListItemType, StandardListItem, ValueState } from '@ui5/webcomponents-react';
+import { BusyIndicator, Card, List, ListItemStandard } from '@ui5/webcomponents-react';
 import { Suspense } from 'react';
 import { Await, useLoaderData, useNavigate } from 'react-router-dom';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './ToDos.module.css';
 
+import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
+import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+
 function ToDos() {
   const data = useLoaderData() as { todos: Promise<Todo[]> };
   const navigate = useNavigate();
@@ -22,15 +25,15 @@ function ToDos() {
             >
               {todos.map((todo) => {
                 return (
-                  <StandardListItem
+                  <ListItemStandard
                     key={todo.id}
                     data-id={todo.id}
                     type={ListItemType.Navigation}
                     additionalText={`${!todo.completed ? 'Not ' : ''}Completed`}
-                    additionalTextState={todo.completed ? ValueState.Success : ValueState.None}
+                    additionalTextState={todo.completed ? ValueState.Positive : ValueState.None}
                   >
                     {todo.title}
-                  </StandardListItem>
+                  </ListItemStandard>
                 );
               })}
             </List>

examples/vite-ts/src/TodoDetails.tsx

@@ -4,14 +4,15 @@ import {
   Form,
   FormItem,
   Input,
+  Label,
   MessageStrip,
-  MessageStripDesign,
   Switch,
   TextArea
 } from '@ui5/webcomponents-react';
 import { useLoaderData } from 'react-router-dom';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './TodoDetails.module.css';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 
 export default function TodoDetails() {
   const todo = useLoaderData() as Todo;
@@ -22,17 +23,17 @@ export default function TodoDetails() {
         {`Since this is only a demo app, adjustments made here on this page won't be reflected in the todo list.`}
       </MessageStrip>
       <Card className={classes.card}>
-        <Form className={classes.form} labelSpanM={2} labelSpanL={2} labelSpanXL={2}>
-          <FormItem label={'Title'}>
+        <Form className={classes.form} labelSpan="M2 L2 XL2">
+          <FormItem labelContent={<Label wrappingType="None">Title</Label>}>
             <Input value={todo?.title} className={classes.formControl} />
           </FormItem>
-          <FormItem label={'Details'}>
-            <TextArea value={todo?.details} growing growingMaxLines={10} className={classes.formControl} />
+          <FormItem labelContent={<Label wrappingType="None">Details</Label>}>
+            <TextArea value={todo?.details} growing growingMaxRows={10} className={classes.formControl} />
           </FormItem>
-          <FormItem label={'Due Date'}>
+          <FormItem labelContent={<Label wrappingType="None">Due Date</Label>}>
             <DatePicker className={classes.formControl} />
           </FormItem>
-          <FormItem label={'Completed'}>
+          <FormItem labelContent={<Label wrappingType="None">Completed</Label>}>
             <Switch checked={todo?.completed} className={classes.formControl} />
           </FormItem>
         </Form>

examples/vite-ts/src/index.css

@@ -4,3 +4,7 @@ body {
   height: 100vh;
   background: var(--sapBackgroundColor);
 }
+
+#root {
+  height: 100%;
+}