[added] grouping SelectList items

docs/components/demos/MultiSelect.jsx

@@ -47,8 +47,8 @@ module.exports = React.createClass({
           id: list.length + 1,
           name: tag,
           first: parts[0],
-          last: parts[1],
-        }),
+          last: parts[1]
+        })
       })
     }
 

docs/components/demos/dropdownlist.jsx

@@ -39,7 +39,7 @@ var DropdownApi = React.createClass({
   getInitialState: function(){
 
     return {
-      duration: 250,
+      duration: 250
     }
   },
 
@@ -59,6 +59,8 @@ var DropdownApi = React.createClass({
       textField: 'name'
     }
 
+    //let disabled = this.state.disabled === true || Array.isArray(this.state.disabled);
+
     return (
       <div className='example' role='application'>
         <div className='row'>
@@ -153,4 +155,3 @@ var DropdownApi = React.createClass({
 });
 
 module.exports = DropdownApi;
-

docs/components/examples/disabled.js

@@ -1,5 +1,6 @@
 'use strict';
-module.exports = function(widgetName, prop){
+module.exports = function(widgetName, prop, isArray=true){
+  var value = !isArray ? '"orange"' : '["orange", "red"]'
 var code =
 `
 var ${widgetName} = ReactWidgets.${widgetName}
@@ -9,15 +10,20 @@ var Example = React.createClass({
 
   render() {
     return (<div>
-      <${widgetName} ${prop} data={colors}/>
-      <${widgetName} ${prop}={colors.slice(1,2)}
+      <${widgetName} ${prop} 
         data={colors}
-        defaultValue={colors.slice(0,2)}/>
+        defaultValue={${value}}
+      />
+      <${widgetName}
+        ${prop}={colors.slice(1,2)}
+        data={colors}
+        defaultValue={${value}}
+      />
     </div>)
   }
 });
 
 ReactDOM.render(<Example/>, mountNode);`
 
 return code
-}
+}

docs/components/pages/Multiselect.api.md

@@ -18,12 +18,12 @@ change event Handler that is called when the value is changed. The handler is ca
 
 ### onSelect?{ type:'Function(Any value)'}
 
-This handler fires when an item has been selected from the list. It fires before the `onChange` handler, and fires 
+This handler fires when an item has been selected from the list. It fires before the `onChange` handler, and fires
 regardless of whether the value has actually changed.
 
 ### onCreate?{ type: 'Function(String searchTerm)'}
 
-This handler fires when the user chooses to create a new tag, not in the data list. It is up to the widget parent to implement creation logic, 
+This handler fires when the user chooses to create a new tag, not in the data list. It is up to the widget parent to implement creation logic,
 a common implementation is shown below, where the new tag is selected and added to the data list.
 
 <EditableExample codeText={require('../examples/onCreate')(widgetName)}/>
@@ -36,18 +36,18 @@ properties comprise the value field (such as an id) and the field used to label
 
 ### valueField?{ type: 'String' }
 
-A dataItem field name for uniquely identifying items in the `data` list. A `valueField` is required 
+A dataItem field name for uniquely identifying items in the `data` list. A `valueField` is required
 when the `value` prop is not itself a dataItem. A `valueField` is useful when specifying the selected item, by
 its `id` instead of using the model as the value.
 
-When a `valueField` is not provided, the {widgetName} will use strict equality checks (`===`) to locate 
+When a `valueField` is not provided, the {widgetName} will use strict equality checks (`===`) to locate
 the `value` in the `data` list.
 
 <EditableExample codeText={require('../examples/valueField')(widgetName, true)}/>
 
 ### textField?{ type: 'String | Function(dataItem)' }
 
-Specify which data item field to display in the ${widgetName} and selected item. The `textField` prop 
+Specify which data item field to display in the ${widgetName} and selected item. The `textField` prop
 may also also used as to find an item in the list as you type. Providing an accessor function allows for computed text values
 
 <EditableExample codeText={require('../examples/textField')(widgetName, true)}/>
@@ -68,14 +68,14 @@ renders the text of the selected item (specified by `textfield`)
 
 ### groupBy?{ type: 'String | Function(Any dataItem)' }
 
-Determines how to group the {widgetName} dropdown list. Providing a `string` will group 
+Determines how to group the {widgetName} values. Providing a `string` will group
 the `data` array by that property. You can also provide a 'function' which should return the group value.
 
 <EditableExample codeText={require('../examples/groupby')(widgetName, true)}/>
 
 ### groupComponent?{ type: 'Component' }
 
-This component is used to render each option group, when `groupBy` is specified. By 
+This component is used to render each option group, when `groupBy` is specified. By
 default the `groupBy` value will be used.
 
 <EditableExample codeText={require('../examples/groupComponent')(widgetName, true)}/>
@@ -93,7 +93,7 @@ The `defaultSearchTerm` prop can be used to set an initialization value for unco
 
 ### onSearch?{ type: 'Function(String searchTerm)' }
 
-Called when the value of the text box changes either from typing or a pasted value. `onSearch` should 
+Called when the value of the text box changes either from typing or a pasted value. `onSearch` should
 be used when the `searchTerm` prop is set.
 
 ### open?{ type: 'Boolean' }
@@ -110,8 +110,8 @@ when the `open` prop is set otherwise the widget will never open or close.
 
 ### filter?{ type: '[String, Function(dataItem, searchTerm)]', default: 'startsWith' }
 
-Specify a filtering method used to reduce the items in the dropdown as you type. There are a few prebuilt filtering 
-methods that can be specified by passing the `String` name. You can explicitly opt out of filtering by 
+Specify a filtering method used to reduce the items in the dropdown as you type. There are a few built-in filtering
+methods that can be specified by passing the `String` name. You can explicitly opt out of filtering by
 setting filter to `false`
 
 To handle custom filtering techniques provide a `function` that returns `true` or `false` for each passed in item
@@ -150,11 +150,11 @@ Place the widget in a readonly mode, If an `Array` of values is passed in only t
 
 ### isRtl?{ type: 'Boolean', default:"false" }
 
-mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through 
+mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through
 a `childContext` prop (`isRtl`) this allows higher level application components to specify the direction.
 
 
-### messages?{ type: 'Object' } 
+### messages?{ type: 'Object' }
 
 Object hash containing display text and/or text for screen readers. Use the `messages` object to
 localize widget text and increase accessibility.

docs/components/pages/SelectList.api.md

@@ -12,7 +12,7 @@ the `data` array; widgets can have values that are not in their list.
 
 ### onChange?{ type: 'Function(Array<Any>|Any values)' }
 
-Change event handler that is called when the value is changed. `values` will be an array 
+Change event handler that is called when the value is changed. `values` will be an array
 when `multiple` prop is set.
 
 <EditableExample codeText={require('../examples/onChange')(widgetName, true)}/>
@@ -25,39 +25,54 @@ properties comprise the value field (such as an id) and the field used to label
 
 ### valueField?{ type: 'String' }
 
-A dataItem field name for uniquely identifying items in the `data` list. A `valueField` is required 
+A dataItem field name for uniquely identifying items in the `data` list. A `valueField` is required
 when the `value` prop is not itself a dataItem. A `valueField` is useful when specifying the selected item, by
 its `id` instead of using the model as the value.
 
-When a `valueField` is not provided, the {widgetName} will use strict equality checks (`===`) to locate 
+When a `valueField` is not provided, the {widgetName} will use strict equality checks (`===`) to locate
 the `value` in the `data` list.
 
 <EditableExample codeText={require('../examples/valueField')(widgetName, true)}/>
 
 ### textField?{ type: 'String | Function(dataItem)' }
 
-Specify which data item field to display in the ${widgetName} and selected item. The `textField` prop may also also used as to find an item in the list as you type. Providing an accessor function allows for computed text values
+Specify which data item field to display in the ${widgetName} and selected item. The `textField` prop may also also
+used as to find an item in the list as you type. Providing an accessor function allows for computed text values
 
 <EditableExample codeText={require('../examples/textField')(widgetName, true)}/>
 
+### multiple?{ type: 'Boolean' }
+
+Whether or not the {widgetName} allows multiple selection or not. when `false` the {widgetName} will
+render as a list of radio buttons, and checkboxes when `true`.
+
 ### itemComponent?{ type: 'Component' }
 
 This component is used to render each item in the {widgetName}. The default component
 renders the text of the selected item (specified by `textfield`)
 
 <EditableExample codeText={require('../examples/itemComponent')(widgetName, true)}/>
 
-### multiple?{ type: 'Boolean' }
+### groupBy?{ type: 'String | Function(Any dataItem)' }
 
-Whether or not the {widgetName} allows multiple selection or not. when `false` the {widgetName} will 
-render as a list of radio buttons, and checkboxes when `true`.
+Determines how to group the {widgetName} dropdown list. Providing a `string` will group
+the `data` array by that property. You can also provide a 'function' which should return the group value.
+
+<EditableExample codeText={require('../examples/groupby')(widgetName, true)}/>
+
+### groupComponent?{ type: 'Component' }
+
+This component is used to render each option group, when `groupBy` is specified. By
+default the `groupBy` value will be used.
+
+<EditableExample codeText={require('../examples/groupComponent')(widgetName, true)}/>
 
 
 ### onMove?{ type: 'Function(HTMLElement list, HTMLElement focusedNode, Any focusedItem)' }
 
 A handler called when focus shifts on the {widgetName}. Internally this is used to ensure the focused item is in view.
-If you want to define your own "scrollTo" behavior or just disable the default one specify an `onMove` handler. 
-The handler is called with the relevant DOM nodes needed to implement scroll behavior: the list element, 
+If you want to define your own "scrollTo" behavior or just disable the default one specify an `onMove` handler.
+The handler is called with the relevant DOM nodes needed to implement scroll behavior: the list element,
 the element that is currently focused, and a focused value.
 
 
@@ -74,15 +89,29 @@ Disable the widget, if an `Array` of values is passed in only those values will
 
 ### readOnly?{ type: '[Boolean, Array]' }
 
-Place the {widgetName} in a readonly mode, If an `Array` of values is passed in only those values will be readonly.
+Place the {widgetName} in a read-only mode, If an `Array` of values is passed in only those values will be read-only.
 
 <EditableExample codeText={require('../examples/disabled')(widgetName, 'readOnly')}/>
 
+### groupBy?{ type: 'String | Function(Any dataItem)' }
+
+Determines how to group the {widgetName}. Providing a `string` will group
+the `data` array by that property. You can also provide a function which should return the group value.
+
+<EditableExample codeText={require('../examples/groupby')(widgetName)}/>
+
+### groupComponent?{ type: 'Component' }
+
+This component is used to render each option group, when `groupBy` is specified. By
+default the `groupBy` value will be used.
+
+<EditableExample codeText={require('../examples/groupComponent')(widgetName)}/>
+
 ### isRtl?{ type: 'Boolean', default:"false" }
 
 mark whether the {widgetName} should render right-to-left. This property can also be implicitly passed to the widget through a `childContext` prop (`isRtl`) this allows higher level application components to specify the direction.
 
-### messages?{ type: 'Object' } 
+### messages?{ type: 'Object' }
 
 Object hash containing display text and/or text for screen readers. Use the `messages` object to
 localize widget text and increase accessibility.