diff --git a/dev_plugin/src/grid-view.tsx b/dev_plugin/src/grid-view.tsx
index 1180676..f051a2f 100644
--- a/dev_plugin/src/grid-view.tsx
+++ b/dev_plugin/src/grid-view.tsx
@@ -11,10 +11,10 @@ export default function GridView(): ReactElement {
     const [val4, setValue4] = useStorage<string>("test", "");
 
     return (
-        <Grid onSelectionChange={id => {}}>
+        <Grid>
             {
                 numbers.map(value => (
-                    <Grid.Item id={"id" + value} title={"Title " + value}>
+                    <Grid.Item title={"Title " + value}>
                         <Grid.Item.Content>
                             <Grid.Item.Content.Paragraph>
                                 Test Paragraph {value}
@@ -24,7 +24,7 @@ export default function GridView(): ReactElement {
                 ))
             }
             <Grid.Section title="Section 1">
-                <Grid.Item id="id section 1 1" title="Title Section 1 1">
+                <Grid.Item title="Title Section 1 1">
                     <Grid.Item.Content>
                         <Grid.Item.Content.Paragraph>
                             Test Paragraph Section 1 1
@@ -33,14 +33,14 @@ export default function GridView(): ReactElement {
                 </Grid.Item>
             </Grid.Section>
             <Grid.Section title="Section 2">
-                <Grid.Item id="id section 2 1" title="Title Section 2 1">
+                <Grid.Item title="Title Section 2 1">
                     <Grid.Item.Content>
                         <Grid.Item.Content.Paragraph>
                             Test Paragraph Section 2 1
                         </Grid.Item.Content.Paragraph>
                     </Grid.Item.Content>
                 </Grid.Item>
-                <Grid.Item id="id section 2 2" title="Title Section 2 2">
+                <Grid.Item title="Title Section 2 2">
                     <Grid.Item.Content>
                         <Grid.Item.Content.Paragraph>
                             Test Paragraph Section 2 2
diff --git a/dev_plugin/src/hooks-view.tsx b/dev_plugin/src/hooks-view.tsx
index babc285..5a0852c 100644
--- a/dev_plugin/src/hooks-view.tsx
+++ b/dev_plugin/src/hooks-view.tsx
@@ -6,77 +6,20 @@ export default function ListView(): ReactElement {
     const { pushView } = useNavigation();
 
     return (
-        <List
-            onSelectionChange={id => {
-                switch (id) {
-                    case "UsePromiseTestBasic": {
-                        pushView(<UsePromiseTestBasic/>)
-                        break;
-                    }
-                    case "UsePromiseTestExecuteFalse": {
-                        pushView(<UsePromiseTestExecuteFalse/>)
-                        break;
-                    }
-                    case "UsePromiseTestRevalidate": {
-                        pushView(<UsePromiseTestRevalidate/>)
-                        break;
-                    }
-                    case "UsePromiseTestAbortableRevalidate": {
-                        pushView(<UsePromiseTestAbortableRevalidate/>)
-                        break;
-                    }
-                    case "UsePromiseTestMutate": {
-                        pushView(<UsePromiseTestMutate/>)
-                        break;
-                    }
-                    case "UsePromiseTestMutateOptimistic": {
-                        pushView(<UsePromiseTestMutateOptimistic/>)
-                        break;
-                    }
-                    case "UsePromiseTestMutateOptimisticRollback": {
-                        pushView(<UsePromiseTestMutateOptimisticRollback/>)
-                        break;
-                    }
-                    case "UsePromiseTestMutateNoRevalidate": {
-                        pushView(<UsePromiseTestMutateNoRevalidate/>)
-                        break;
-                    }
-                    case "UsePromiseTestThrow": {
-                        pushView(<UsePromiseTestThrow/>)
-                        break;
-                    }
-                    case "UseCachedPromiseBasic": {
-                        pushView(<UseCachedPromiseBasic/>)
-                        break;
-                    }
-                    case "UseCachedPromiseInitialState": {
-                        pushView(<UseCachedPromiseInitialState/>)
-                        break;
-                    }
-                    case "UseFetchBasic": {
-                        pushView(<UseFetchBasic/>)
-                        break;
-                    }
-                    case "UseFetchMap": {
-                        pushView(<UseFetchMap/>)
-                        break;
-                    }
-                }
-            }}
-        >
-            <List.Item id="UsePromiseTestBasic" title="UsePromiseTestBasic"/>
-            <List.Item id="UsePromiseTestExecuteFalse" title="UsePromiseTestExecuteFalse"/>
-            <List.Item id="UsePromiseTestRevalidate" title="UsePromiseTestRevalidate"/>
-            <List.Item id="UsePromiseTestAbortableRevalidate" title="UsePromiseTestAbortableRevalidate"/>
-            <List.Item id="UsePromiseTestMutate" title="UsePromiseTestMutate"/>
-            <List.Item id="UsePromiseTestMutateOptimistic" title="UsePromiseTestMutateOptimistic"/>
-            <List.Item id="UsePromiseTestMutateOptimisticRollback" title="UsePromiseTestMutateOptimisticRollback"/>
-            <List.Item id="UsePromiseTestMutateNoRevalidate" title="UsePromiseTestMutateNoRevalidate"/>
-            <List.Item id="UsePromiseTestThrow" title="UsePromiseTestThrow"/>
-            <List.Item id="UseCachedPromiseBasic" title="UseCachedPromiseBasic"/>
-            <List.Item id="UseCachedPromiseInitialState" title="UseCachedPromiseInitialState"/>
-            <List.Item id="UseFetchBasic" title="UseFetchBasic"/>
-            <List.Item id="UseFetchMap" title="UseFetchMap"/>
+        <List>
+            <List.Item title="UsePromiseTestBasic" onClick={() => pushView(<UsePromiseTestBasic/>)}/>
+            <List.Item title="UsePromiseTestExecuteFalse" onClick={() => pushView(<UsePromiseTestExecuteFalse/>)}/>
+            <List.Item title="UsePromiseTestRevalidate" onClick={() => pushView(<UsePromiseTestRevalidate/>)}/>
+            <List.Item title="UsePromiseTestAbortableRevalidate" onClick={() => pushView(<UsePromiseTestAbortableRevalidate/>)}/>
+            <List.Item title="UsePromiseTestMutate" onClick={() => pushView(<UsePromiseTestMutate/>)}/>
+            <List.Item title="UsePromiseTestMutateOptimistic" onClick={() => pushView(<UsePromiseTestMutateOptimistic/>)}/>
+            <List.Item title="UsePromiseTestMutateOptimisticRollback" onClick={() => pushView(<UsePromiseTestMutateOptimisticRollback/>)}/>
+            <List.Item title="UsePromiseTestMutateNoRevalidate" onClick={() => pushView(<UsePromiseTestMutateNoRevalidate/>)}/>
+            <List.Item title="UsePromiseTestThrow" onClick={() => pushView(<UsePromiseTestThrow/>)}/>
+            <List.Item title="UseCachedPromiseBasic" onClick={() => pushView(<UseCachedPromiseBasic/>)}/>
+            <List.Item title="UseCachedPromiseInitialState" onClick={() => pushView(<UseCachedPromiseInitialState/>)}/>
+            <List.Item title="UseFetchBasic" onClick={() => pushView(<UseFetchBasic/>)}/>
+            <List.Item title="UseFetchMap" onClick={() => pushView(<UseFetchMap/>)}/>
         </List>
     )
 }
@@ -91,12 +34,9 @@ function UsePromiseTestBasic(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-               <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -112,12 +52,9 @@ function UseCachedPromiseBasic(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -136,12 +73,9 @@ function UseCachedPromiseInitialState(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -160,12 +94,9 @@ function UsePromiseTestExecuteFalse(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -182,13 +113,10 @@ function UsePromiseTestRevalidate(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, () => revalidate())}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title="Run" icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={() => revalidate()}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -211,13 +139,10 @@ function UsePromiseTestAbortableRevalidate(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, () => revalidate())}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title="Run" icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={() => revalidate()}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -232,16 +157,14 @@ function UsePromiseTestMutate(): ReactElement {
 
     printState(data, error, isLoading)
 
+    const onClick = async () => {
+        await mutate(inNSec(5))
+    };
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, async () => {
-                await mutate(inNSec(5))
-            })}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title="Run" icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={onClick}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -256,21 +179,20 @@ function UsePromiseTestMutateOptimistic(): ReactElement {
 
     printState(data, error, isLoading)
 
+    const onClick = async () => {
+        await mutate(
+            inNSec(5),
+            {
+                optimisticUpdate: data1 => data1 + " optimistic",
+            }
+        )
+    };
+
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, async () => {
-                await mutate(
-                    inNSec(5),
-                    {
-                        optimisticUpdate: data1 => data1 + " optimistic",
-                    }
-                )
-            })}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title="Run" icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={onClick}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -285,29 +207,28 @@ function UsePromiseTestMutateOptimisticRollback(): ReactElement {
 
     printState(data, error, isLoading)
 
-    return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, async () => {
-                await mutate(
-                    new Promise<string>((_resolve, reject) => {
-                        setTimeout(
-                            () => {
-                                reject("fail")
-                            },
-                            5 * 1000
-                        );
-                    }),
-                    {
-                        optimisticUpdate: data1 => data1 + " optimistic",
-                        rollbackOnError:  data1 => data1 + " failed",
-                    }
+    const onClick = async () => {
+        await mutate(
+            new Promise<string>((_resolve, reject) => {
+                setTimeout(
+                    () => {
+                        reject("fail")
+                    },
+                    5 * 1000
                 );
-            })}
-        >
+            }),
+            {
+                optimisticUpdate: data1 => data1 + " optimistic",
+                rollbackOnError:  data1 => data1 + " failed",
+            }
+        );
+    };
+
+    return (
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title={"Run " + data} icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={onClick}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -323,20 +244,17 @@ function UsePromiseTestMutateNoRevalidate(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView, async () => {
-                await mutate(
-                    inNSec(5),
-                    {
-                        shouldRevalidateAfter: false,
-                    }
-                )
-            })}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="run" title="Run" icon={Icons.Sun}/>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Run" icon={Icons.Sun} onClick={() => async () => {
+                    await mutate(
+                        inNSec(5),
+                        {
+                            shouldRevalidateAfter: false,
+                        }
+                    )
+                }}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -354,12 +272,9 @@ function UsePromiseTestThrow(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -379,12 +294,9 @@ function UseFetchBasic(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
@@ -406,32 +318,14 @@ function UseFetchMap(): ReactElement {
     printState(data, error, isLoading)
 
     return (
-        <List
-            isLoading={isLoading}
-            onSelectionChange={onSelectionChangeHandler(popView)}
-        >
+        <List isLoading={isLoading}>
             <List.Section title={"Data " + data}>
-                <List.Item id="back" title="Go Back" icon={Icons.Clipboard}/>
+                <List.Item title="Go Back" icon={Icons.Clipboard} onClick={() => popView()}/>
             </List.Section>
         </List>
     )
 }
 
-function onSelectionChangeHandler(popView: () => void, handler?: () => void): (id: string) => void {
-    return (id) => {
-        switch (id) {
-            case "back": {
-                popView()
-                break;
-            }
-            case "run": {
-                handler?.()
-                break;
-            }
-        }
-    }
-}
-
 async function inNSec(n: number): Promise<string> {
     return new Promise<string>(resolve => {
         setTimeout(
diff --git a/dev_plugin/src/list-view.tsx b/dev_plugin/src/list-view.tsx
index ac0f04a..225962d 100644
--- a/dev_plugin/src/list-view.tsx
+++ b/dev_plugin/src/list-view.tsx
@@ -5,25 +5,25 @@ export default function ListView(): ReactElement {
     const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
     const [id, setId] = useState("default");
 
+    const onClick = () => {
+        console.log("onClick " + id)
+        setId(id);
+    };
+
     return (
-        <List
-            onSelectionChange={id => {
-                console.log("onSelectionChange " + id)
-                setId(id);
-            }}
-        >
+        <List>
             {
                 numbers.map(value => (
-                    <List.Item id={"id" + value} title={"Title " + value}/>
+                    <List.Item title={"Title " + value} onClick={onClick}/>
                 ))
             }
             <List.Section title={"Selected id: " + id}>
-                <List.Section.Item id="id section 1" title="Title Section 1" icon={Icons.Clipboard}/>
+                <List.Section.Item title="Title Section 1" icon={Icons.Clipboard} onClick={onClick}/>
             </List.Section>
             <List.Section title="Section 2">
-                <List.Section.Item id="id section 2 1" title="Title Section 2 1" subtitle="Subtitle 2 1"/>
-                <List.Section.Item id="id section 2 2" title="Title Section 2 2"/>
-                <List.Section.Item id="id section 2 3" title="Title Section 2 3" subtitle="Subtitle 2 3"/>
+                <List.Section.Item title="Title Section 2 1" subtitle="Subtitle 2 1" onClick={onClick}/>
+                <List.Section.Item title="Title Section 2 2" onClick={onClick}/>
+                <List.Section.Item title="Title Section 2 3" subtitle="Subtitle 2 3" onClick={onClick}/>
             </List.Section>
         </List>
     )
diff --git a/dev_plugin/src/test-list-detail.tsx b/dev_plugin/src/test-list-detail.tsx
index 72d6a6b..d5d5854 100644
--- a/dev_plugin/src/test-list-detail.tsx
+++ b/dev_plugin/src/test-list-detail.tsx
@@ -4,16 +4,16 @@ import { List } from "@project-gauntlet/api/components";
 export default function Main(): ReactElement {
     return (
         <List>
-            <List.Item id="adarian" title="Adarian"/>
-            <List.Item id="aruzan" title="Aruzan"/>
-            <List.Item id="blutopian" title="Blutopian"/>
-            <List.Item id="caphex" title="Caphex"/>
-            <List.Item id="condluran" title="Condluran"/>
-            <List.Item id="frozian" title="Frozian"/>
-            <List.Item id="evereni" title="Evereni"/>
-            <List.Item id="ezaraa" title="Ezaraa"/>
-            <List.Item id="houk" title="Houk"/>
-            <List.Item id="inleshat" title="Inleshat"/>
+            <List.Item title="Adarian"/>
+            <List.Item title="Aruzan"/>
+            <List.Item title="Blutopian"/>
+            <List.Item title="Caphex"/>
+            <List.Item title="Condluran"/>
+            <List.Item title="Frozian"/>
+            <List.Item title="Evereni"/>
+            <List.Item title="Ezaraa"/>
+            <List.Item title="Houk"/>
+            <List.Item title="Inleshat"/>
             <List.Detail>
                 <List.Detail.Metadata>
                     <List.Detail.Metadata.Value label={"Designation"}>Sentient</List.Detail.Metadata.Value>
diff --git a/docs/js/components/grid_item/props/id.md b/docs/js/components/grid_item/props/id.md
deleted file mode 100644
index eb10e7e..0000000
--- a/docs/js/components/grid_item/props/id.md
+++ /dev/null
@@ -1 +0,0 @@
-Identifier of the grid item. Used in the grid event functions
\ No newline at end of file
diff --git a/docs/js/components/grid/props/onSelectionChange.md b/docs/js/components/grid_item/props/onClick.md
similarity index 52%
rename from docs/js/components/grid/props/onSelectionChange.md
rename to docs/js/components/grid_item/props/onClick.md
index cc61cc0..4463e3d 100644
--- a/docs/js/components/grid/props/onSelectionChange.md
+++ b/docs/js/components/grid_item/props/onClick.md
@@ -1,2 +1 @@
-Function that will be called when user selects an item on the grid.
-The only parameter is an id of the selected grid item
\ No newline at end of file
+Function that will be called when user selects an item on the grid.
\ No newline at end of file
diff --git a/docs/js/components/list/props/onSelectionChange.md b/docs/js/components/list/props/onSelectionChange.md
deleted file mode 100644
index 2d2edf7..0000000
--- a/docs/js/components/list/props/onSelectionChange.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Function that will be called when user selects an item on the list.
-The only parameter is an id of the selected list item
\ No newline at end of file
diff --git a/docs/js/components/list_item/props/id.md b/docs/js/components/list_item/props/id.md
deleted file mode 100644
index 3c98fc0..0000000
--- a/docs/js/components/list_item/props/id.md
+++ /dev/null
@@ -1 +0,0 @@
-Identifier of the list item. Used in the list event functions
\ No newline at end of file
diff --git a/docs/js/components/list_item/props/onClick.md b/docs/js/components/list_item/props/onClick.md
new file mode 100644
index 0000000..4463e3d
--- /dev/null
+++ b/docs/js/components/list_item/props/onClick.md
@@ -0,0 +1 @@
+Function that will be called when user selects an item on the grid.
\ No newline at end of file
diff --git a/js/api/src/gen/components.tsx b/js/api/src/gen/components.tsx
index 410f2d2..046ff65 100644
--- a/js/api/src/gen/components.tsx
+++ b/js/api/src/gen/components.tsx
@@ -124,10 +124,10 @@ declare global {
                 image?: ImageSource | Icons;
             };
             ["gauntlet:list_item"]: {
-                id: string;
                 title: string;
                 subtitle?: string;
                 icon?: ImageSource | Icons;
+                onClick?: () => void;
             };
             ["gauntlet:list_section"]: {
                 children?: ElementComponent<typeof ListItem>;
@@ -137,13 +137,12 @@ declare global {
             ["gauntlet:list"]: {
                 children?: ElementComponent<typeof ActionPanel | typeof EmptyView | typeof Detail | typeof ListItem | typeof ListSection>;
                 isLoading?: boolean;
-                onSelectionChange?: (id: string) => void;
             };
             ["gauntlet:grid_item"]: {
                 children?: ElementComponent<typeof Content>;
-                id: string;
                 title: string;
                 subtitle?: string;
+                onClick?: () => void;
             };
             ["gauntlet:grid_section"]: {
                 children?: ElementComponent<typeof GridItem>;
@@ -155,7 +154,6 @@ declare global {
                 children?: ElementComponent<typeof ActionPanel | typeof EmptyView | typeof GridItem | typeof GridSection>;
                 isLoading?: boolean;
                 columns?: number;
-                onSelectionChange?: (id: string) => void;
             };
         }
     }
@@ -637,13 +635,13 @@ export const EmptyView: FC<EmptyViewProps> = (props: EmptyViewProps): ReactNode
     return <gauntlet:empty_view title={props.title} description={props.description} image={props.image}></gauntlet:empty_view>;
 };
 export interface ListItemProps {
-    id: string;
     title: string;
     subtitle?: string;
     icon?: ImageSource | Icons;
+    onClick?: () => void;
 }
 export const ListItem: FC<ListItemProps> = (props: ListItemProps): ReactNode => {
-    return <gauntlet:list_item id={props.id} title={props.title} subtitle={props.subtitle} icon={props.icon}></gauntlet:list_item>;
+    return <gauntlet:list_item title={props.title} subtitle={props.subtitle} icon={props.icon} onClick={props.onClick}></gauntlet:list_item>;
 };
 export interface ListSectionProps {
     children?: ElementComponent<typeof ListItem>;
@@ -660,7 +658,6 @@ export interface ListProps {
     children?: ElementComponent<typeof EmptyView | typeof Detail | typeof ListItem | typeof ListSection>;
     actions?: ElementComponent<typeof ActionPanel>;
     isLoading?: boolean;
-    onSelectionChange?: (id: string) => void;
 }
 export const List: FC<ListProps> & {
     EmptyView: typeof EmptyView;
@@ -668,7 +665,7 @@ export const List: FC<ListProps> & {
     Item: typeof ListItem;
     Section: typeof ListSection;
 } = (props: ListProps): ReactNode => {
-    return <gauntlet:list isLoading={props.isLoading} onSelectionChange={props.onSelectionChange}>{props.actions as any}{props.children}</gauntlet:list>;
+    return <gauntlet:list isLoading={props.isLoading}>{props.actions as any}{props.children}</gauntlet:list>;
 };
 List.EmptyView = EmptyView;
 List.Detail = Detail;
@@ -676,14 +673,14 @@ List.Item = ListItem;
 List.Section = ListSection;
 export interface GridItemProps {
     children?: ElementComponent<typeof Content>;
-    id: string;
     title: string;
     subtitle?: string;
+    onClick?: () => void;
 }
 export const GridItem: FC<GridItemProps> & {
     Content: typeof Content;
 } = (props: GridItemProps): ReactNode => {
-    return <gauntlet:grid_item id={props.id} title={props.title} subtitle={props.subtitle}>{props.children}</gauntlet:grid_item>;
+    return <gauntlet:grid_item title={props.title} subtitle={props.subtitle} onClick={props.onClick}>{props.children}</gauntlet:grid_item>;
 };
 GridItem.Content = Content;
 export interface GridSectionProps {
@@ -703,14 +700,13 @@ export interface GridProps {
     isLoading?: boolean;
     actions?: ElementComponent<typeof ActionPanel>;
     columns?: number;
-    onSelectionChange?: (id: string) => void;
 }
 export const Grid: FC<GridProps> & {
     EmptyView: typeof EmptyView;
     Item: typeof GridItem;
     Section: typeof GridSection;
 } = (props: GridProps): ReactNode => {
-    return <gauntlet:grid isLoading={props.isLoading} columns={props.columns} onSelectionChange={props.onSelectionChange}>{props.actions as any}{props.children}</gauntlet:grid>;
+    return <gauntlet:grid isLoading={props.isLoading} columns={props.columns}>{props.actions as any}{props.children}</gauntlet:grid>;
 };
 Grid.EmptyView = EmptyView;
 Grid.Item = GridItem;
diff --git a/rust/client/src/ui/widget.rs b/rust/client/src/ui/widget.rs
index 0ef09ab..abd28a7 100644
--- a/rust/client/src/ui/widget.rs
+++ b/rust/client/src/ui/widget.rs
@@ -883,11 +883,7 @@ impl ComponentWidgetWrapper {
                     .center_y()
                     .into()
             }
-            ComponentWidget::ListItem { id, title, subtitle, icon } => {
-                let ComponentRenderContext::List { widget_id: list_widget_id } = context else {
-                    panic!("not supposed to be passed to list item: {:?}", context)
-                };
-
+            ComponentWidget::ListItem { title, subtitle, icon } => {
                 let icon: Option<Element<_>> = icon.as_ref()
                     .map(|icon| {
                         match icon {
@@ -931,7 +927,7 @@ impl ComponentWidgetWrapper {
                     .into();
 
                 button(content)
-                    .on_press(ComponentWidgetEvent::SelectListItem { list_widget_id, item_id: id.to_owned() })
+                    .on_press(ComponentWidgetEvent::ListItemClick { widget_id })
                     .width(Length::Fill)
                     .themed(ButtonStyle::ListItem)
             }
@@ -1031,11 +1027,7 @@ impl ComponentWidgetWrapper {
 
                 render_root(show_action_panel, widget_id, children, content, context, is_loading.unwrap_or(false))
             }
-            ComponentWidget::GridItem { children, id, title, subtitle } => {
-                let ComponentRenderContext::Grid { widget_id: grid_widget_id } = context else {
-                    panic!("not supposed to be passed to grid item: {:?}", context)
-                };
-
+            ComponentWidget::GridItem { children, title, subtitle } => {
                 let content: Element<_> = column(render_children(children, ComponentRenderContext::GridItem))
                     .height(130) // TODO dynamic height
                     .into();
@@ -1055,7 +1047,7 @@ impl ComponentWidgetWrapper {
                     .into();
 
                 let content: Element<_> = button(content)
-                    .on_press(ComponentWidgetEvent::SelectGridItem { grid_widget_id, item_id: id.to_owned() })
+                    .on_press(ComponentWidgetEvent::GridItemClick { widget_id })
                     .themed(ButtonStyle::GridItem);
 
                 content
@@ -1521,13 +1513,11 @@ pub enum ComponentWidgetEvent {
     ToggleActionPanel {
         widget_id: UiWidgetId,
     },
-    SelectListItem {
-        list_widget_id: UiWidgetId,
-        item_id: String,
+    ListItemClick {
+        widget_id: UiWidgetId,
     },
-    SelectGridItem {
-        grid_widget_id: UiWidgetId,
-        item_id: String,
+    GridItemClick {
+        widget_id: UiWidgetId,
     },
     PreviousView,
 }
@@ -1639,11 +1629,11 @@ impl ComponentWidgetEvent {
 
                 None
             }
-            ComponentWidgetEvent::SelectListItem { list_widget_id, item_id } => {
-                Some(create_list_on_selection_change_event(list_widget_id, item_id))
+            ComponentWidgetEvent::ListItemClick { widget_id } => {
+                Some(create_list_item_on_click_event(widget_id))
             }
-            ComponentWidgetEvent::SelectGridItem { grid_widget_id, item_id } => {
-                Some(create_grid_on_selection_change_event(grid_widget_id, item_id))
+            ComponentWidgetEvent::GridItemClick { widget_id } => {
+                Some(create_grid_item_on_click_event(widget_id))
             }
             ComponentWidgetEvent::PreviousView => {
                 panic!("handle event on PreviousView event is not supposed to be called")
@@ -1664,8 +1654,8 @@ impl ComponentWidgetEvent {
             ComponentWidgetEvent::OnChangeTextField { widget_id, .. } => widget_id,
             ComponentWidgetEvent::OnChangePasswordField { widget_id, .. } => widget_id,
             ComponentWidgetEvent::ToggleActionPanel { widget_id } => widget_id,
-            ComponentWidgetEvent::SelectListItem { list_widget_id, .. } => list_widget_id,
-            ComponentWidgetEvent::SelectGridItem { grid_widget_id, .. } => grid_widget_id,
+            ComponentWidgetEvent::ListItemClick { widget_id, .. } => widget_id,
+            ComponentWidgetEvent::GridItemClick { widget_id, .. } => widget_id,
             ComponentWidgetEvent::PreviousView => panic!("widget_id on PreviousView event is not supposed to be called"),
         }.to_owned()
     }
diff --git a/rust/component_model/src/lib.rs b/rust/component_model/src/lib.rs
index de3e8b8..223632a 100644
--- a/rust/component_model/src/lib.rs
+++ b/rust/component_model/src/lib.rs
@@ -925,11 +925,11 @@ pub fn create_component_model() -> Vec<Component> {
         mark_doc!("/list_item/description.md"),
         "ListItem",
         [
-            property("id", mark_doc!("/list_item/props/id.md"),false, PropertyType::String),
             property("title", mark_doc!("/list_item/props/title.md"),false, PropertyType::String),
             property("subtitle", mark_doc!("/list_item/props/subtitle.md"),true, PropertyType::String),
             property("icon", mark_doc!("/list_item/props/icon.md"),true, PropertyType::Union { items: vec![PropertyType::ImageSource, PropertyType::Enum { name: "Icons".to_owned() }] }),
             // accessories
+            event("onClick", mark_doc!("/list_item/props/onClick.md"), true, [])
         ],
         children_none(),
     );
@@ -954,9 +954,6 @@ pub fn create_component_model() -> Vec<Component> {
         [
             property("actions", mark_doc!("/list/props/actions.md"), true, component_ref(&action_panel_component)),
             property("isLoading", mark_doc!("/list/props/isLoading.md"), true, PropertyType::Boolean),
-            event("onSelectionChange", mark_doc!("/list/props/onSelectionChange.md"), true, [
-                property("id", "".to_string(), false, PropertyType::String)
-            ]),
         ],
         children_members([
             member("EmptyView", &empty_view_component),
@@ -971,10 +968,10 @@ pub fn create_component_model() -> Vec<Component> {
         mark_doc!("/grid_item/description.md"),
         "GridItem",
         [
-            property("id", mark_doc!("/grid_item/props/id.md"), false, PropertyType::String),
             property("title", mark_doc!("/grid_item/props/title.md"), false, PropertyType::String),
             property("subtitle", mark_doc!("/grid_item/props/subtitle.md"), true, PropertyType::String),
             // accessories
+            event("onClick", mark_doc!("/grid_item/props/onClick.md"), true, [])
         ],
         children_members([
             member("Content", &content_component),
@@ -1009,9 +1006,6 @@ pub fn create_component_model() -> Vec<Component> {
             property("columns", mark_doc!("/grid/props/columns.md"),true, PropertyType::Number), // TODO default
             // fit
             // inset
-            event("onSelectionChange", mark_doc!("/grid/props/onSelectionChange.md"), true, [
-                property("id", "".to_string(), false, PropertyType::String)
-            ]),
         ],
         children_members([
             member("EmptyView", &empty_view_component),