dowjones · mrchief · Jun 10, 2019 · May 9, 2019 · May 12, 2019 · May 17, 2019
diff --git a/README.md b/README.md
@@ -45,20 +45,21 @@ A lightweight and fast control to render a select component that can display hie
   - [onChange](#onchange)
   - [onNodeToggle](#onnodetoggle)
   - [data](#data)
-  - [placeholderText](#placeholdertext)
-  - [noMatchesText](#nomatchestext)
+  - [texts](#texts)
   - [keepTreeOnSearch](#keeptreeonsearch)
   - [keepChildrenOnSearch](#keepchildrenonsearch)
   - [keepOpenOnSelect](#keepopenonselect)
-  - [simpleSelect](#simpleselect)
-  - [radioSelect](#radioSelect)
+  - [mode](#mode)
+    - [multiSelect](#multiSelect)
+    - [hierarchical](#hierarchical)
+    - [simpleSelect](#simpleSelect)
+    - [radioSelect](#radioSelect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
-  - [showDropdownAlways](#showDropdownAlways)
+    - [initial](#initial)
+    - [always](#always)
   - [form states (disabled|readOnly)](#formstates)
   - [id](#id)
-  - [label](#label)
-  - [labelRemove](#labelRemove)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -283,17 +284,20 @@ The `action` object requires the following structure:
 
 An array renders a tree with multiple root level items whereas an object renders a tree with a single root element (e.g. a `Select All` root node).
 
-### placeholderText
+### texts
 
-Type: `string`
-
-The text to display as placeholder on the search box. Defaults to `Choose...`
+Texts to override various labels, place holders & messages used in the component. You can also use this to provide translated messages.
 
-### noMatchesText
-
-Type: `string`
+The `texts` object requires the following structure:
 
-The text to display when the search does not find results in the content list. Defaults to `No matches found`
+```js
+{
+  placeholder,  // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
+  noMatches,    // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
+  label,        // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
+  labelRemove,  // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
+}
+```
 
 ### keepTreeOnSearch
 
@@ -317,21 +321,35 @@ Keeps single selects open after selection. Defaults to `false`
 
 _NOTE_ this works only in combination with `simpleSelect` or `radioSelect`
 
-### simpleSelect
+### mode
 
-Type: `bool` (default: `false`)
+Type: `string` (default: `multiSelect`)
 
-Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. Defaults to `false`.
+Defines how the dropdown is rendered / behaves
 
-_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected
+#### multiSelect
 
-### radioSelect
+A multi selectable dropdown which supports tree data with parent-child relationships. This is the default mode.
 
-Type: `bool` (default: `false`)
+#### hierarchical
+
+A multi selectable dropdown which supports tree data **without** parent-child relationships. In this mode, selecting a node has no ripple effects on its descendants or ancestors. Subsequently, `showPartiallySelected` becomes a moot flag and has no effect as well.
+
+⚠️ Note that `hierarchical=true` negates/overrides `showPartiallySelected`.
+
+#### simpleSelect
+
+Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored.
+
+⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected.
 
-Turns the dropdown into radio select dropdown. Similar to simpleSelect but keeps tree/children. Defaults to `false`.
+#### radioSelect
 
-_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected
+Turns the dropdown into radio select dropdown.
+
+Like `simpleSelect`, you can only select one value; but keeps the tree/children structure.
+
+⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected.
 
 ### showPartiallySelected
 
@@ -341,15 +359,17 @@ If set to true, shows checkboxes in a partial state when one, but not all of the
 
 ### showDropdown
 
-Type: `bool` (default: `false`)
+Type: `string`
 
-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.
+Let's you choose the rendered state of the dropdown.
 
-### showDropdownAlways
+#### initial
 
-Type: `bool`
+`showDropdown: initial` shows the dropdown when rendered. This can be used to render the component with the dropdown open as its initial state.
+
+#### always
 
-If set to true, always shows the dropdown when rendered, and toggling dropdown will be disabled.
+`showDropdown: always` shows the dropdown when rendered, and keeps it visible at all times. Toggling dropdown is disabled.
 
 ### form states (disabled|readOnly)
 
@@ -366,18 +386,6 @@ Specific id for container. The container renders with a default id of `rdtsN` wh
 
 Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)
 
-### label
-
-Type: `string`
-
-Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
-
-### labelRemove
-
-Type: `string`
-
-The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
-
 ## Styling and Customization
 
 ### Default styles
@@ -386,10 +394,10 @@ The component brings minimal styles for bare-bones functional rendering. It is k
 
 #### Using WebPack
 
-If you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config:
+If you're using a bundler like WebPack, make sure you configure WebPack to import the default styles. To do so, simply add this rule to your WebPack config:
 
 ```js
-// allow webpack to import/bundle styles from node_modules for this component
+// allow WebPack to import/bundle styles from node_modules for this component
 module: {
   rules: [
     {
@@ -470,10 +478,10 @@ Node toggling also achieves the expand/collapse effect by manipulating css class
 
 ### How do I change the placeholder text?
 
-The default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it.
+The default [placeholder](#texts) is `Choose...`. If you want to change this to something else, you can use `placeholder` property to set it.
 
 ```jsx
-<DropdownTreeSelect placeholderText="Search" />
+<DropdownTreeSelect texts={{ placeholder: 'Search' }} />
 ```
 
 ### How do I tweak styles?
@@ -486,11 +494,11 @@ Easy style customization is one of the design goals of this component. Every vis
 }
 ```
 
-The css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).
+The css classes needed to override can be found by inspecting the component via developer tools (Chrome/Safari/IE/Edge/Firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).
 
 ### I do not want the default styles, do I need to fork the project?
 
-Absolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:
+Absolutely not! Simply do not import the styles (WebPack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:
 
 ```pug
 div.react-dropdown-tree-select

diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
@@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
         <Trigger
           onTrigger={Function {}}
           showDropdown={true}
+          texts={{}}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -27,6 +28,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
         <div
@@ -157,6 +159,7 @@ Generated by [AVA](https://ava.li).
             onNodeToggle={Function {}}
             pageSize={100}
             searchModeOn={false}
+            texts={{}}
           />
         </div>
       </div>
@@ -177,6 +180,7 @@ Generated by [AVA](https://ava.li).
           disabled={true}
           onTrigger={Function {}}
           showDropdown={false}
+          texts={{}}
         >
           <Input
             disabled={true}
@@ -187,6 +191,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
       </div>
@@ -267,10 +272,12 @@ Generated by [AVA](https://ava.li).
         ]
       }
       id="rdts"
+      mode="radioSelect"
       onBlur={Function onBlur {}}
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
-      radioSelect={true}
+      showDropdown="default"
+      texts={{}}
     >
       <div
         className="react-dropdown-tree-select"
@@ -280,9 +287,10 @@ Generated by [AVA](https://ava.li).
           className="dropdown radio-select"
         >
           <Trigger
+            mode="radioSelect"
             onTrigger={Function {}}
-            radioSelect={true}
             showDropdown={false}
+            texts={{}}
           >
             <a
               "aria-expanded"="false"
@@ -295,13 +303,14 @@ Generated by [AVA](https://ava.li).
             >
               <Input
                 inputRef={Function inputRef {}}
+                mode="radioSelect"
                 onBlur={Function {}}
                 onFocus={Function {}}
                 onInputChange={Function {}}
                 onKeyDown={Function {}}
                 onTagRemove={Function {}}
-                radioSelect={true}
                 tags={[]}
+                texts={{}}
               >
                 <ul
                   className="tag-list"
@@ -406,6 +415,8 @@ Generated by [AVA](https://ava.li).
       onBlur={Function onBlur {}}
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
+      showDropdown="default"
+      texts={{}}
     >
       <div
         className="react-dropdown-tree-select"
@@ -417,6 +428,7 @@ Generated by [AVA](https://ava.li).
           <Trigger
             onTrigger={Function {}}
             showDropdown={false}
+            texts={{}}
           >
             <a
               "aria-expanded"="false"
@@ -435,6 +447,7 @@ Generated by [AVA](https://ava.li).
                 onKeyDown={Function {}}
                 onTagRemove={Function {}}
                 tags={[]}
+                texts={{}}
               >
                 <ul
                   className="tag-list"
@@ -475,6 +488,7 @@ Generated by [AVA](https://ava.li).
         <Trigger
           onTrigger={Function {}}
           showDropdown={true}
+          texts={{}}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -484,6 +498,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
         <div
@@ -614,6 +629,7 @@ Generated by [AVA](https://ava.li).
             onNodeToggle={Function {}}
             pageSize={100}
             searchModeOn={false}
+            texts={{}}
           />
         </div>
       </div>

diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
diff --git a/__snapshots__/src/tree-node/index.test.js.md b/__snapshots__/src/tree-node/index.test.js.md
@@ -160,7 +160,7 @@ Generated by [AVA](https://ava.li).
         checked={false}
         id="0-0-0"
         label="item0-0-0"
-        simpleSelect={true}
+        mode="simpleSelect"
         value="value0-0-0"
       />
       <Actions
@@ -191,7 +191,7 @@ Generated by [AVA](https://ava.li).
         checked={true}
         id="0-0-0"
         label="item0-0-0"
-        simpleSelect={true}
+        mode="simpleSelect"
         value="value0-0-0"
       />
       <Actions

diff --git a/__snapshots__/src/tree-node/index.test.js.snap b/__snapshots__/src/tree-node/index.test.js.snap