From 91d5fbd685c3810dc46022513b789def026593da Mon Sep 17 00:00:00 2001
From: Frederic Heem <frederic.heem@gmail.com>
Date: Thu, 19 Dec 2024 11:13:50 -0300
Subject: [PATCH] fix RadioButtonGroup ts

---
 .../src/pages/form/form-simple-state.ts       |  2 +-
 bau-ui/radioButtonGroup/index.d.ts            |  7 +++++--
 bau/examples/bau-ts-test/src/main.ts          | 20 ++++++++-----------
 doc/BauDerive.md                              |  3 +--
 doc/BauEventHandling.md                       |  6 ++----
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts b/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts
index 4bf760b2..219ffe11 100644
--- a/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts
+++ b/bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts
@@ -36,7 +36,7 @@ export default (context: Context) => {
             name: "check",
             required: true,
             value: inputState,
-            oninput: (event: any) => (inputState.val = event.target.value),
+            oninput: ({ target }) => (inputState.val = target.value),
           })
         )
       ),
diff --git a/bau-ui/radioButtonGroup/index.d.ts b/bau-ui/radioButtonGroup/index.d.ts
index 576d47ec..106765fc 100644
--- a/bau-ui/radioButtonGroup/index.d.ts
+++ b/bau-ui/radioButtonGroup/index.d.ts
@@ -11,11 +11,14 @@ declare module "@grucloud/bau-ui/radioButtonGroup" {
   export type RadioButtonGroupProps = {
     name: string;
     value?: any;
-    oninput?: (event) => any;
+    oninput?: ({ target }: { target: HTMLInputElement }) => void;
     radios: RadioItem[];
   } & DefaultDesignProps;
 
-  type Component = import("../bau-ui").Component<RadioButtonGroupProps>;
+  type Component = import("../bau-ui").Component<
+    RadioButtonGroupProps,
+    HTMLInputElement
+  >;
 
   export default function (context: any, option?: ComponentOption): Component;
 }
diff --git a/bau/examples/bau-ts-test/src/main.ts b/bau/examples/bau-ts-test/src/main.ts
index 279cd31b..7368ab8a 100644
--- a/bau/examples/bau-ts-test/src/main.ts
+++ b/bau/examples/bau-ts-test/src/main.ts
@@ -506,8 +506,7 @@ const TestDerived = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -532,8 +531,7 @@ const TestDerivedSideEffect = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     })
   );
 };
@@ -753,8 +751,7 @@ const TestInputOninput = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -776,8 +773,7 @@ const TestInputSearch = () => {
       type: "search",
       placeholder: "Search...",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -820,7 +816,7 @@ const TestEventHandlingKeyUp = () => {
     input({
       type: "search",
       size: 25,
-      onkeyup: ({ target, key }: { key: string; target: HTMLInputElement }) => {
+      onkeyup: ({ target, key }) => {
         if (key == "Enter") {
           alert(target.value);
         }
@@ -838,8 +834,7 @@ const TestInputCheckboxOninput = () => {
     input({
       type: "checkbox",
       checked: checkedState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (checkedState.val = target.checked),
+      oninput: ({ target }) => (checkedState.val = target.checked),
     }),
     div("Is checked: ", () => (checkedState.val ? "Checked" : "Not Checked"))
   );
@@ -1048,10 +1043,11 @@ input({
   type: "text",
   oninput: (event) => {
     console.log(event.data);
+    console.log(event.target);
   },
   onchange: (event) => {
     console.log(event.target.value);
-  }
+  },
 });
 
 const app = document.getElementById("app");
diff --git a/doc/BauDerive.md b/doc/BauDerive.md
index c7719ce4..af348ce7 100644
--- a/doc/BauDerive.md
+++ b/doc/BauDerive.md
@@ -46,8 +46,7 @@ const TestDerived = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
diff --git a/doc/BauEventHandling.md b/doc/BauEventHandling.md
index 06137e5a..f3c4280d 100644
--- a/doc/BauEventHandling.md
+++ b/doc/BauEventHandling.md
@@ -91,8 +91,7 @@ const TestInputOninput = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -149,8 +148,7 @@ const TestInputCheckboxOninput = () => {
     input({
       type: "checkbox",
       checked: checkedState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (checkedState.val = target.checked),
+      oninput: ({ target }) => (checkedState.val = target.checked),
     }),
     div("Is checked: ", () => (checkedState.val ? "Checked" : "Not Checked"))
   );