release v2.5.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "main": "dist/react-widgets.js",
   "description": "A set of input widgets for React",
   "homepage": "http://jquense.github.io/react-widgets/docs",

dist/css/react-widgets.css

@@ -72,22 +72,25 @@ input.rw-input::-moz-focus-inner {
   -moz-osx-font-smoothing: grayscale;
 }
 .rw-i-caret-down:before {
-  content: '\e801';
+  content: '\e803';
 }
 .rw-i-caret-up:before {
   content: '\e800';
 }
 .rw-i-caret-left:before {
-  content: '\e807';
+  content: '\e801';
 }
 .rw-i-caret-right:before {
-  content: '\e806';
+  content: '\e802';
 }
 .rw-i-clock-o:before {
-  content: '\e80c';
+  content: '\e805';
 }
 .rw-i-calendar:before {
-  content: '\e808';
+  content: '\e804';
+}
+.rw-i-search:before {
+  content: '\e806';
 }
 /* for debugging */
 .rw-widget {
@@ -129,6 +132,26 @@ input.rw-input::-moz-focus-inner {
 .rw-input[readonly] {
   cursor: not-allowed;
 }
+.rw-filter-input {
+  position: relative;
+  width: 100%;
+  padding-right: 1.9em;
+  border: #cccccc 1px solid;
+  border-radius: 4px;
+  margin-bottom: 2px;
+}
+.rw-rtl .rw-filter-input {
+  padding-left: 1.9em;
+  padding-right: 0;
+}
+.rw-filter-input > .rw-input {
+  width: 100%;
+  border: none;
+  outline: none;
+}
+.rw-filter-input > span {
+  margin-top: -2px;
+}
 .rw-i.rw-loading {
   background: url("../img/loading.gif") no-repeat center;
   width: 16px;
@@ -342,6 +365,9 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
 .rw-dropdownlist > .rw-input::-webkit-input-placeholder {
   color: #999999;
 }
+.rw-placeholder {
+  color: #999999;
+}
 .rw-select {
   position: absolute;
   width: 1.9em;
@@ -397,9 +423,16 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   padding-right: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rw-dropdownlist.rw-rtl > .rw-input {
+  padding: 0.429em 0.857em;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
 }
 .rw-dropdownlist > .rw-select,
-.rw-dropdownlist > .rw-select.rw-rtl {
+.rw-dropdownlist.rw-rtl > .rw-select {
   border-width: 0;
 }
 .rw-numberpicker .rw-btn {

lib/Combobox.js

@@ -26,11 +26,11 @@ var propTypes = {
   listComponent: CustomPropTypes.elementType,
 
   groupComponent: CustomPropTypes.elementType,
-  groupBy: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.string]),
+  groupBy: CustomPropTypes.accessor,
 
   data: React.PropTypes.array,
   valueField: React.PropTypes.string,
-  textField: React.PropTypes.string,
+  textField: CustomPropTypes.accessor,
   name: React.PropTypes.string,
 
   onSelect: React.PropTypes.func,
@@ -141,8 +141,8 @@ var ComboBox = React.createClass({
       babelHelpers._extends({}, props, {
         ref: "element",
         role: "combobox",
-        onKeyDown: this._maybeHandle(this._keyDown),
-        onFocus: this._maybeHandle(this._focus.bind(null, true), true),
+        onKeyDown: this._keyDown,
+        onFocus: this._focus.bind(null, true),
         onBlur: this._focus.bind(null, false),
         tabIndex: "-1",
         className: cx(className, "rw-combobox", "rw-widget", (function () {
@@ -159,7 +159,7 @@ var ComboBox = React.createClass({
         {
           tabIndex: "-1",
           className: "rw-select",
-          onClick: this._maybeHandle(this.toggle),
+          onClick: this.toggle,
           disabled: !!(this.props.disabled || this.props.readOnly) },
         React.createElement(
           "i",
@@ -208,7 +208,7 @@ var ComboBox = React.createClass({
             data: items,
             selected: this.state.selectedItem,
             focused: this.state.focusedItem,
-            onSelect: this._maybeHandle(this._onSelect),
+            onSelect: this._onSelect,
             onMove: this._scrollTo,
             messages: {
               emptyList: this.props.data.length ? this.props.messages.emptyFilter : this.props.messages.emptyList
@@ -218,12 +218,12 @@ var ComboBox = React.createClass({
     );
   },
 
-  _onSelect: function (data) {
+  _onSelect: _.ifNotDisabled(function (data) {
     this.close();
     this.notify("onSelect", data);
     this.change(data);
     this._focus(true);
-  },
+  }),
 
   _inputKeyDown: function (e) {
     this._deleting = e.key === "Backspace" || e.key === "Delete";
@@ -252,7 +252,7 @@ var ComboBox = React.createClass({
     this.open();
   },
 
-  _focus: function (focused, e) {
+  _focus: _.ifNotDisabled(true, function (focused, e) {
     var _this = this;
 
     clearTimeout(this.timer);
@@ -266,9 +266,9 @@ var ComboBox = React.createClass({
         _this.setState({ focused: focused });
       }
     }, 0);
-  },
+  }),
 
-  _keyDown: function (e) {
+  _keyDown: _.ifNotDisabled(function (e) {
     var self = this,
         key = e.key,
         alt = e.altKey,
@@ -301,7 +301,7 @@ var ComboBox = React.createClass({
 
       self.change(item, false);
     }
-  },
+  }),
 
   change: function (data, typing) {
     this._typedChange = !!typing;
@@ -316,11 +316,11 @@ var ComboBox = React.createClass({
     if (this.props.open) this.notify("onToggle", false);
   },
 
-  toggle: function (e) {
+  toggle: _.ifNotDisabled(function (e) {
     this._focus(true);
 
     this.props.open ? this.close() : this.open();
-  },
+  }),
 
   suggest: function (data, value) {
     var word = this._dataText(value),

lib/DateTimePicker.js

@@ -292,7 +292,7 @@ var DateTimePicker = React.createClass({
   },
 
   focus: function () {
-    if (activeElement() !== this.refs.valueInput.getDOMNode()) this.refs.valueInput.focus();
+    if (activeElement() !== compat.findDOMNode(this.refs.valueInput)) this.refs.valueInput.focus();
   },
 
   _selectDate: function (date) {