feat: Support disabled/readOnly states ✨ (#200)

* fix: Show cursor in Edge, IE 11 properly

* feat: Support readOnly state

* chore: Fix lint errors

* docs: Add documentation for form states

* chore: Use action's id if available, otherwise fall back to array index

* test: Add tests for actions

* test: Updated snapshots

Author: mrchief

README.md

@@ -49,6 +49,7 @@ A lightweight and fast control to render a select component that can display hie
   - [simpleSelect](#simpleselect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
+  - [form states (disabled|readOnly)](#formstates)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -101,7 +102,7 @@ You can import the standalone UMD build from a CDN such as:
 
 ```html
 <script src="https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js"></script>
-<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet">
+<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet" />
 ```
 
 **Note:** Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/...`
@@ -292,6 +293,13 @@ Type: `bool` (default: `false`)
 
 If set to true, shows the dropdown when rendered. This can be used to render the component with the dropdown open as its initial state.
 
+### form states (disabled|readOnly)
+
+Type: `bool` (default: `false`)
+
+`disabled=true` disables the dropdown completely. This is useful during form submit events.
+`readOnly=true` makes the dropdown read only, which means that the user can still interact with it but cannot change any of its values. This can be useful for display only forms.
+
 ## Styling and Customization
 
 ### Default styles
@@ -327,7 +335,7 @@ module: {
 You can import and place a style link directly by referencing it from a CDN.
 
 ```html
-<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet">
+<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet" />
 ```
 
 Note: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.
@@ -470,6 +478,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/13344028?v=4" width="100px;"/><br /><sub><b>BaarishRain</b></sub>](https://github.com/BaarishRain)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3ABaarishRain "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/32507174?v=4" width="100px;"/><br /><sub><b>Kovacs Alexandru Robert</b></sub>](http://kovacsalexandrurobert.ro)<br />[🤔](#ideas-akovacspentalog "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/11201133?v=4" width="100px;"/><br /><sub><b>Alexis Mondragon</b></sub>](https://github.com/amondragon)<br />[🤔](#ideas-amondragon "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/13438795?v=4" width="100px;"/><br /><sub><b>Charlie91</b></sub>](https://github.com/Charlie91)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3ACharlie91 "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/1930681?v=4" width="100px;"/><br /><sub><b>Dhirendrasinh</b></sub>](https://github.com/dhirendrarathod2000)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Adhirendrarathod2000 "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/7006862?v=4" width="100px;"/><br /><sub><b>JKapostins</b></sub>](https://github.com/JKapostins)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AJKapostins "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/24354568?v=4" width="100px;"/><br /><sub><b>josvegit</b></sub>](https://github.com/josvegit)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Ajosvegit "Bug reports") |
 | [<img src="https://avatars1.githubusercontent.com/u/12422912?v=4" width="100px;"/><br /><sub><b>Luis Locon</b></sub>](https://twitter.com/LoconLuis)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aloconluis "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/10121255?v=4" width="100px;"/><br /><sub><b>Mikdat DOĞRU</b></sub>](https://github.com/mikdatdogru)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Amikdatdogru "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/7553535?v=4" width="100px;"/><br /><sub><b>Will Izard</b></sub>](https://github.com/will-izard)<br />[🤔](#ideas-will-izard "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4504265?v=4" width="100px;"/><br /><sub><b>Nikola Peric</b></sub>](https://gitlab.com/nikperic)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Anikolap "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/6119839?v=4" width="100px;"/><br /><sub><b>Ramón Alejandro Reyes Fajardo</b></sub>](https://github.com/ramonrf)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aramonrf "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/10716099?v=4" width="100px;"/><br /><sub><b>Sarada Cherukupalli</b></sub>](https://github.com/sarada-Cheukupalli)<br />[🤔](#ideas-sarada-Cheukupalli "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/45608461?v=4" width="100px;"/><br /><sub><b>Dilip Gavara</b></sub>](https://github.com/dilip025)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=dilip025 "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

__snapshots__/src/index.test.js.md

@@ -4,6 +4,33 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## doesn't toggle dropdown if it's disabled
+
+> Snapshot 1
+
+    <div
+      className="react-dropdown-tree-select"
+    >
+      <div
+        className="dropdown"
+      >
+        <a
+          className="dropdown-trigger arrow disabled bottom"
+          onClick={false}
+        >
+          <Input
+            disabled={true}
+            inputRef={Function inputRef {}}
+            onBlur={Function {}}
+            onFocus={Function {}}
+            onInputChange={Function {}}
+            onTagRemove={Function {}}
+            tags={[]}
+          />
+        </a>
+      </div>
+    </div>
+
 ## renders default state
 
 > Snapshot 1
@@ -261,31 +288,4 @@ Generated by [AVA](https://ava.li).
           />
         </div>
       </div>
-    </div
-
-## doesn't toggle dropdown if it's disabled
-
-> Snapshot 1
-
-    <div
-      className="react-dropdown-tree-select"
-    >
-      <div
-        className="dropdown"
-      >
-        <a
-          className="dropdown-trigger arrow disabled bottom"
-          onClick={false}
-        >
-          <Input
-            disabled={true}
-            inputRef={Function inputRef {}}
-            onBlur={Function {}}
-            onFocus={Function {}}
-            onInputChange={Function {}}
-            onTagRemove={Function {}}
-            tags={[]}
-          />
-        </a>
-      </div>
-    </div>
+    </div>

__snapshots__/src/index.test.js.snap

@@ -107,7 +107,7 @@ Generated by [AVA](https://ava.li).
           type="text"
         />
       </li>
-    </ul
+    </ul>
 
 ## should render disabled input
 
@@ -127,4 +127,4 @@ Generated by [AVA](https://ava.li).
           type="text"
         />
       </li>
-    </ul>
+    </ul>

__snapshots__/src/input/index.test.js.md

@@ -0,0 +1,36 @@
+# Snapshot report for `src\tree-node\actions.test.js`
+
+The actual snapshot is saved in `actions.test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## renders actions
+
+> Snapshot 1
+
+    [
+      <Action
+        actionData={
+          {
+            action: 'action-0',
+            id: undefined,
+          }
+        }
+        className="cn0-0-0"
+        junk="1"
+        key="action-0"
+        onAction={Function onAction {}}
+        text="hello"
+        title="action"
+      />,
+    ]
+
+## returns null if actions are empty
+
+> Snapshot 1
+
+    ''
+
+> Snapshot 2
+
+    ''

__snapshots__/src/input/index.test.js.snap

@@ -36,6 +36,5 @@ Generated by [AVA](https://ava.li).
           ]
         }
         id="0-0-0"
-        onAction={Function onAction {}}
       />
     </li>