From b34e230885dfe341670dccd8a3bcf575dcd228f2 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Wed, 1 May 2024 14:57:52 +1200
Subject: [PATCH 1/2] Fix label warning, improve textarea wrapping

---
 demo/src/App.tsx           | 21 ++++++++++++++++++---
 demo/src/JsonEditImport.ts |  4 ++--
 demo/src/version.ts        |  2 +-
 src/AutogrowTextArea.tsx   |  5 ++++-
 src/ValueNodeWrapper.tsx   |  5 ++---
 src/style.css              |  3 ++-
 6 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index e7656044..bcb20939 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -212,6 +212,7 @@ function App() {
           </Heading>
           <Box position="relative">
             <Input
+              id="searchTextInput"
               placeholder={demoData[selectedData].searchPlaceholder ?? 'Search values'}
               bgColor={'#f6f6f6'}
               borderColor="gainsboro"
@@ -344,7 +345,7 @@ function App() {
                     Demo data
                   </FormLabel>
                   <div className="inputWidth" style={{ flexGrow: 1 }}>
-                    <Select onChange={handleChangeData} value={selectedData}>
+                    <Select id="dataSelect" onChange={handleChangeData} value={selectedData}>
                       {Object.entries(demoData).map(([key, { name }]) => (
                         <option value={key} key={key}>
                           {name}
@@ -358,7 +359,7 @@ function App() {
                     Theme
                   </FormLabel>
                   <div className="inputWidth" style={{ flexGrow: 1 }}>
-                    <Select onChange={handleThemeChange} value={theme}>
+                    <Select id="themeSelect" onChange={handleThemeChange} value={theme}>
                       {(Object.entries(themes) as [ThemeName, Theme][]).map(
                         ([theme, { displayName }]) => (
                           <option value={theme} key={theme}>
@@ -374,6 +375,7 @@ function App() {
                     Data root name
                   </FormLabel>
                   <Input
+                    id="dataNameInput"
                     className="inputWidth"
                     type="text"
                     value={rootName}
@@ -385,6 +387,7 @@ function App() {
                     Collapse level
                   </FormLabel>
                   <NumberInput
+                    id="collapseInput"
                     className="inputWidth"
                     min={0}
                     value={collapseLevel}
@@ -402,6 +405,7 @@ function App() {
                     Indent level
                   </FormLabel>
                   <NumberInput
+                    id="indentInput"
                     className="inputWidth"
                     max={12}
                     min={0}
@@ -421,6 +425,7 @@ function App() {
                   </FormLabel>
                   <div className="inputWidth" style={{ flexGrow: 1 }}>
                     <Select
+                      id="showCountSelect"
                       onChange={(e) => setShowCount(e.target.value as 'Yes' | 'No' | 'When closed')}
                       value={showCount}
                     >
@@ -439,6 +444,7 @@ function App() {
                 <CheckboxGroup colorScheme="primaryScheme">
                   <Flex w="100%" justify="flex-start">
                     <Checkbox
+                      id="allowEditCheckbox"
                       isChecked={allowEdit}
                       disabled={demoData[selectedData].restrictEdit !== undefined}
                       onChange={() => setAllowEdit(!allowEdit)}
@@ -447,6 +453,7 @@ function App() {
                       Allow Edit
                     </Checkbox>
                     <Checkbox
+                      id="allowDeleteCheckbox"
                       isChecked={allowDelete}
                       disabled={demoData[selectedData].restrictDelete !== undefined}
                       onChange={() => setAllowDelete(!allowDelete)}
@@ -457,6 +464,7 @@ function App() {
                   </Flex>
                   <Flex w="100%" justify="flex-start">
                     <Checkbox
+                      id="allowAddCheckbox"
                       isChecked={allowAdd}
                       disabled={demoData[selectedData].restrictAdd !== undefined}
                       onChange={() => setAllowAdd(!allowAdd)}
@@ -465,6 +473,7 @@ function App() {
                       Allow Add
                     </Checkbox>
                     <Checkbox
+                      id="allowCopyCheckbox"
                       isChecked={allowCopy}
                       onChange={() => setAllowCopy(!allowCopy)}
                       w="50%"
@@ -473,10 +482,16 @@ function App() {
                     </Checkbox>
                   </Flex>
                   <Flex w="100%" justify="flex-start">
-                    <Checkbox isChecked={sortKeys} onChange={() => setSortKeys(!sortKeys)} w="50%">
+                    <Checkbox
+                      id="sortKeysCheckbox"
+                      isChecked={sortKeys}
+                      onChange={() => setSortKeys(!sortKeys)}
+                      w="50%"
+                    >
                       Sort Object keys
                     </Checkbox>
                     <Checkbox
+                      id="showIndicesCheckbox"
                       isChecked={showIndices}
                       onChange={() => setShowIndices(!showIndices)}
                       w="50%"
diff --git a/demo/src/JsonEditImport.ts b/demo/src/JsonEditImport.ts
index b14356b8..233596c8 100644
--- a/demo/src/JsonEditImport.ts
+++ b/demo/src/JsonEditImport.ts
@@ -3,10 +3,10 @@
  */
 
 /* Installed package */
-export * from 'json-edit-react'
+// export * from 'json-edit-react'
 
 /* Local src */
-// export * from './json-edit-react/src'
+export * from './json-edit-react/src'
 
 /* Compiled local package */
 // export * from './package'
diff --git a/demo/src/version.ts b/demo/src/version.ts
index a6b50129..48fbc37d 100644
--- a/demo/src/version.ts
+++ b/demo/src/version.ts
@@ -1 +1 @@
-export const version = '1.8.4'
\ No newline at end of file
+export const version = '1.8.7'
\ No newline at end of file
diff --git a/src/AutogrowTextArea.tsx b/src/AutogrowTextArea.tsx
index af3f66a8..cadfd6c2 100644
--- a/src/AutogrowTextArea.tsx
+++ b/src/AutogrowTextArea.tsx
@@ -36,10 +36,13 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
   return (
     <div style={{ display: 'grid' }}>
       <textarea
+        id={name}
         style={{
           height: 'auto',
           gridArea: '1 / 1 / 2 / 2',
           overflowY: 'auto',
+          whiteSpace: 'pre-wrap',
+          // border: '1px solid transparent',
           ...styles,
         }}
         rows={1}
@@ -64,7 +67,7 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
           color: 'red',
           opacity: 0.9,
           whiteSpace: 'pre-wrap',
-          overflow: 'clip',
+          overflowY: 'auto',
           border: '1px solid transparent',
           ...styles,
         }}
diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx
index c48b8e73..74406ca1 100644
--- a/src/ValueNodeWrapper.tsx
+++ b/src/ValueNodeWrapper.tsx
@@ -228,8 +228,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
         }}
       >
         {showLabel && !isEditingKey && !hideKey && (
-          <label
-            htmlFor={path.join('.')}
+          <span
             className="jer-object-key"
             style={{
               ...getStyles('property', nodeData),
@@ -239,7 +238,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
             onDoubleClick={() => canEditKey && setIsEditingKey(true)}
           >
             {name}:{' '}
-          </label>
+          </span>
         )}
         {showLabel && isEditingKey && (
           <input
diff --git a/src/style.css b/src/style.css
index a82c117a..78831804 100644
--- a/src/style.css
+++ b/src/style.css
@@ -233,7 +233,8 @@ select:focus + .focus {
   height: 1.4em;
   padding-left: 0.5em;
   padding-right: 0.5em;
-  padding-bottom: 0;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
   min-width: 6em;
   overflow: hidden;
   max-height: 30em;

From cb0c48708a9f8d241157f0de527cccaaad765d14 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Wed, 1 May 2024 15:06:01 +1200
Subject: [PATCH 2/2] Tweak

---
 src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index 78831804..a794a3f9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -233,7 +233,7 @@ select:focus + .focus {
   height: 1.4em;
   padding-left: 0.5em;
   padding-right: 0.5em;
-  padding-top: 0.2em;
+  padding-top: 0.25em;
   padding-bottom: 0.2em;
   min-width: 6em;
   overflow: hidden;