dowjones · mrchief · Apr 18, 2019 · Mar 12, 2019 · Mar 12, 2019 · Mar 13, 2019
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ A lightweight and fast control to render a select component that can display hie
   - [keepTreeOnSearch](#keeptreeonsearch)
   - [keepChildrenOnSearch](#keepchildrenonsearch)
   - [simpleSelect](#simpleselect)
+  - [singleSelect](#singleselect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
   - [form states (disabled|readOnly)](#formstates)
@@ -290,6 +291,12 @@ Type: `bool` (default: `false`)
 
 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`.
 
+### singleSelect
+
+Type: `bool` (default: `false`)
+
+Turns the dropdown into single select dropdown. Similar to simpleSelect but keeps tree/children. Defaults to `false`.
+
 ### showPartiallySelected
 
 Type: `bool` (default: `false`)

diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/src/stories/Options/index.js b/docs/src/stories/Options/index.js
@@ -14,6 +14,7 @@ class WithOptions extends PureComponent {
       clearSearchOnChange: false,
       keepTreeOnSearch: false,
       simpleSelect: false,
+      singleSelect: false,
       showPartiallySelected: false,
       disabled: false,
       readOnly: false,
@@ -36,7 +37,7 @@ class WithOptions extends PureComponent {
   }
 
   render() {
-    const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected, disabled, readOnly, hierarchical } = this.state
+    const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, singleSelect, showPartiallySelected, disabled, readOnly, hierarchical } = this.state
 
     return (
       <div>
@@ -53,6 +54,7 @@ class WithOptions extends PureComponent {
           <Checkbox label="Clear search on selection" value="clearSearchOnChange" checked={clearSearchOnChange} onChange={this.onOptionsChange} />
           <Checkbox label="Keep tree on search" value="keepTreeOnSearch" checked={keepTreeOnSearch} onChange={this.onOptionsChange} />
           <Checkbox label="Simple Select" value="simpleSelect" checked={simpleSelect} onChange={this.onOptionsChange} />
+          <Checkbox label="Single Select" value="singleSelect" checked={singleSelect} onChange={this.onOptionsChange} />
           <Checkbox label="Show Partially Selected" value="showPartiallySelected" checked={showPartiallySelected} onChange={this.onOptionsChange} />
           <Checkbox label="Disabled" value="disabled" checked={disabled} onChange={this.onOptionsChange} />
           <Checkbox label="Read Only" value="readOnly" checked={readOnly} onChange={this.onOptionsChange} />
@@ -67,6 +69,7 @@ class WithOptions extends PureComponent {
             clearSearchOnChange={clearSearchOnChange}
             keepTreeOnSearch={keepTreeOnSearch}
             simpleSelect={simpleSelect}
+            singleSelect={singleSelect}
             showPartiallySelected={showPartiallySelected}
             disabled={disabled}
             readOnly={readOnly}

diff --git a/src/index.css b/src/index.css
@@ -51,6 +51,10 @@
       border-top: rgba(0, 0, 0, 0.05) 1px solid;
       box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
 
+      &.simple-select .checked .node-label {
+        font-weight: 600;
+      }
+
       ul {
         margin: 0;
         padding: 0;

diff --git a/src/index.js b/src/index.js
@@ -34,6 +34,7 @@ class DropdownTreeSelect extends Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     simpleSelect: PropTypes.bool,
+    singleSelect: PropTypes.bool,
     noMatchesText: PropTypes.string,
     showPartiallySelected: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -55,8 +56,8 @@ class DropdownTreeSelect extends Component {
     }
   }
 
-  createList = ({ data, simpleSelect, showPartiallySelected, hierarchical }) => {
-    this.treeManager = new TreeManager({ data, simpleSelect, showPartiallySelected, hierarchical })
+  createList = ({ data, simpleSelect, singleSelect, showPartiallySelected, hierarchical }) => {
+    this.treeManager = new TreeManager({ data, simpleSelect, singleSelect, showPartiallySelected, hierarchical })
     return this.treeManager.tree
   }
 
@@ -71,8 +72,8 @@ class DropdownTreeSelect extends Component {
   }
 
   componentWillMount() {
-    const { data, simpleSelect, showPartiallySelected, hierarchical } = this.props
-    const tree = this.createList({ data, simpleSelect, showPartiallySelected, hierarchical })
+    const { data, simpleSelect, singleSelect, showPartiallySelected, hierarchical } = this.props
+    const tree = this.createList({ data, simpleSelect, singleSelect, showPartiallySelected, hierarchical })
     const tags = this.treeManager.getTags()
     this.setState({ tree, tags })
   }
@@ -82,8 +83,8 @@ class DropdownTreeSelect extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { data, simpleSelect, showPartiallySelected, hierarchical } = nextProps
-    const tree = this.createList({ data, simpleSelect, showPartiallySelected, hierarchical })
+    const { data, simpleSelect, singleSelect, showPartiallySelected, hierarchical } = nextProps
+    const tree = this.createList({ data, simpleSelect, singleSelect, showPartiallySelected, hierarchical })
     const tags = this.treeManager.getTags()
     this.setState({ tree, tags })
   }
@@ -142,7 +143,7 @@ class DropdownTreeSelect extends Component {
   onCheckboxChange = (id, checked) => {
     this.treeManager.setNodeCheckedState(id, checked)
     let tags = this.treeManager.getTags()
-    const showDropdown = this.props.simpleSelect ? false : this.state.showDropdown
+    const showDropdown = (this.props.simpleSelect || this.props.singleSelect) ? false : this.state.showDropdown
 
     if (!tags.length) {
       this.treeManager.restoreDefaultValues()
@@ -156,11 +157,13 @@ class DropdownTreeSelect extends Component {
       showDropdown
     }
 
-    if (this.props.simpleSelect || this.props.clearSearchOnChange) {
+    const isSimpleSelect = this.props.simpleSelect || this.props.singleSelect
+
+    if (isSimpleSelect || this.props.clearSearchOnChange) {
       Object.assign(nextState, this.resetSearchState())
     }
 
-    if (this.props.simpleSelect) {
+    if (isSimpleSelect) {
       document.removeEventListener('click', this.handleOutsideClick, false)
     }
 
@@ -189,6 +192,8 @@ class DropdownTreeSelect extends Component {
       top: this.state.showDropdown,
       bottom: !this.state.showDropdown
     })
+
+    const isSimpleSelect = this.props.simpleSelect || this.props.singleSelect
 
     return (
       <div
@@ -214,7 +219,7 @@ class DropdownTreeSelect extends Component {
             />
           </a>
           {this.state.showDropdown && (
-            <div className={cx('dropdown-content')}>
+            <div className={cx('dropdown-content', { 'simple-select': isSimpleSelect })}>
               {this.state.allNodesHidden ? (
                 <span className="no-matches">{this.props.noMatchesText || 'No matches found'}</span>
               ) : (
@@ -226,7 +231,7 @@ class DropdownTreeSelect extends Component {
                   onAction={this.onAction}
                   onCheckboxChange={this.onCheckboxChange}
                   onNodeToggle={this.onNodeToggle}
-                  simpleSelect={this.props.simpleSelect}
+                  simpleSelect={isSimpleSelect}
                   showPartiallySelected={this.props.showPartiallySelected}
                   readOnly={this.props.readOnly}
                 />

diff --git a/src/tree-manager/flatten-tree.js b/src/tree-manager/flatten-tree.js
@@ -92,7 +92,7 @@ const tree = [
 }
 ```
  * @param  {[type]} tree              The incoming tree object
- * @param  {[bool]} simple            Whether its in Single slect mode (simple dropdown)
+ * @param  {[bool]} simple            Whether its in Single select mode (simple dropdown)
  * @param  {[bool]} showPartialState  Whether to show partially checked state
  * @return {object}                   The flattened list
  */

diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js
@@ -4,12 +4,13 @@ import { isEmpty } from '../utils'
 import flattenTree from './flatten-tree'
 
 class TreeManager {
-  constructor({ data, simpleSelect, showPartiallySelected, hierarchical }) {
+  constructor({ data, simpleSelect, singleSelect, showPartiallySelected, hierarchical }) {
     this._src = data
     const { list, defaultValues } = flattenTree(JSON.parse(JSON.stringify(data)), simpleSelect, showPartiallySelected, hierarchical)
     this.tree = list
     this.defaultValues = defaultValues
     this.simpleSelect = simpleSelect
+    this.singleSelect = singleSelect
     this.showPartialState = !hierarchical && showPartiallySelected
     this.searchMaps = new Map()
     this.hierarchical = hierarchical
@@ -145,6 +146,15 @@ class TreeManager {
 
     if (this.simpleSelect) {
       this.togglePreviousChecked(id)
+    } else if (this.singleSelect) {
+      this.togglePreviousChecked(id)
+      if (!checked) {
+        this.toggleChildren(id, checked)
+        this.unCheckParents(node)
+      }
+      if (this.showPartialState) {
+        this.partialCheckParents(node)
+      }
     } else {
       if (!this.hierarchical) this.toggleChildren(id, checked)
 

diff --git a/src/tree-node/index.js b/src/tree-node/index.js
@@ -16,7 +16,7 @@ const isLeaf = children => isEmpty(children)
 const getNodeCx = props => {
   const {
     keepTreeOnSearch, keepChildrenOnSearch, _children, matchInChildren, matchInParent,
-    disabled, partial, hide, className, showPartiallySelected, readOnly
+    disabled, partial, hide, className, showPartiallySelected, readOnly, checked
   } = props
 
   return cx(
@@ -29,7 +29,8 @@ const getNodeCx = props => {
       'match-in-children': keepTreeOnSearch && matchInChildren,
       'match-in-parent': keepTreeOnSearch && keepChildrenOnSearch && matchInParent,
       partial: showPartiallySelected && partial,
-      readOnly
+      readOnly,
+      checked
     },
     className
   )

diff --git a/src/tree-node/node-label.js b/src/tree-node/node-label.js
@@ -41,8 +41,8 @@ class NodeLabel extends PureComponent {
     const nodeLabelProps = { className: 'node-label' }
 
     // in case of simple select mode, there is no checkbox, so we need to handle the click via the node label
-    // but not if the control is in readOnly state
-    const shouldRegisterClickHandler = simpleSelect && !readOnly
+    // but not if the control is in readOnly or disabled state
+    const shouldRegisterClickHandler = simpleSelect && !readOnly && !disabled
 
     if (shouldRegisterClickHandler) {
       nodeLabelProps.onClick = this.handleCheckboxChange