From 449d739f8abdc87dc20303bb39c1a4de9972456e Mon Sep 17 00:00:00 2001
From: "Beier (Bill)" <bluebill1049@hotmail.com>
Date: Tue, 17 Dec 2024 08:24:17 +1100
Subject: [PATCH] Fix #216 (#218)

* Revert "fix: Removed defaultProps to support react 19 (#211)"

This reverts commit 7f3daefc8e195494c85daac52e9322e19ad65261.

* fix issue #216 cause app to freeze
---
 src/devToolUI.tsx      |  1 +
 src/formStateTable.tsx |  1 +
 src/panel.tsx          |  2 ++
 src/panelTable.tsx     |  2 ++
 src/styled.tsx         | 12 +-----------
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/devToolUI.tsx b/src/devToolUI.tsx
index 5fd95cd..7a58f58 100644
--- a/src/devToolUI.tsx
+++ b/src/devToolUI.tsx
@@ -90,6 +90,7 @@ export const DevToolUI: React.FC<DevtoolUIProps> = ({
             background: 'none',
             ...styles?.button,
           }}
+          type="button"
         >
           <Logo actions={actions} />
         </Button>
diff --git a/src/formStateTable.tsx b/src/formStateTable.tsx
index b747340..5166827 100644
--- a/src/formStateTable.tsx
+++ b/src/formStateTable.tsx
@@ -130,6 +130,7 @@ const FormStateTable = ({
       onClick={() => {
         setShowFormState(!showFormState);
       }}
+      type="button"
     >
       <span
         style={{
diff --git a/src/panel.tsx b/src/panel.tsx
index 8d31a66..4cdc956 100644
--- a/src/panel.tsx
+++ b/src/panel.tsx
@@ -148,6 +148,7 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           }}
           title="Update values and state the form"
           onClick={() => setData({})}
+          type="button"
         >
           ♺ REFRESH
         </Button>
@@ -162,6 +163,7 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           onClick={() => {
             actions.setCollapse(!state.isCollapse);
           }}
+          type="button"
         >
           {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
         </Button>
diff --git a/src/panelTable.tsx b/src/panelTable.tsx
index 230644c..0cb9f9a 100644
--- a/src/panelTable.tsx
+++ b/src/panelTable.tsx
@@ -91,6 +91,7 @@ const PanelTable = ({
                 textAlign: 'center',
                 marginRight: 8,
               }}
+              type="button"
             >
               {collapse ? '+' : '-'}
             </Button>
@@ -114,6 +115,7 @@ const PanelTable = ({
                   ? {}
                   : { cursor: 'not-allowed', background: colors.lightBlue }),
               }}
+              type="button"
             >
               {isNative ? 'Native' : 'Custom'}
             </Button>
diff --git a/src/styled.tsx b/src/styled.tsx
index c48b400..0caf7ab 100644
--- a/src/styled.tsx
+++ b/src/styled.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import colors from './colors';
@@ -8,16 +7,7 @@ export const paraGraphDefaultStyle = {
   lineHeight: '20px',
 };
 
-interface ButtonBaseProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-}
-
-const ButtonBase = ({ type = 'button', ...props }: ButtonBaseProps) => {
-  return <ButtonBase type={type} {...props} />;
-};
-
-const Button = styled(ButtonBase)<{ hideBackground?: boolean }>`
+const Button = styled.button<{ hideBackground?: boolean }>`
   appearance: none;
   margin: 0;
   border: 0;