build for 2.3.2

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "main": "dist/react-widgets.js",
   "description": "A set of input widgets for React",
   "main": "dist/react-widgets.js",

dist/css/react-widgets.css

@@ -386,6 +386,9 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   background-color: transparent;
   padding-top: 0;
   padding-bottom: 0;
+  padding-right: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .rw-dropdownlist > .rw-select,
 .rw-dropdownlist > .rw-select.rw-rtl {
@@ -608,6 +611,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   border-width: 0;
   line-height: normal;
   width: auto;
+  max-width: 100%;
 }
 .rw-multiselect-wrapper > .rw-input::-moz-placeholder {
   color: #999999;

lib/Calendar.js

@@ -217,6 +217,7 @@ var Calendar = React.createClass({
             return _this._focus(true);
           } },
         React.createElement(View, babelHelpers._extends({}, viewProps, {
+          tabIndex: "-1",
           ref: "currentView",
           key: key,
           id: id,

lib/Century.js

@@ -77,9 +77,9 @@ module.exports = React.createClass({
             { onClick: _this.props.onChange.bind(null, d),
               tabIndex: "-1",
               id: focused ? id : undefined,
-              "aria-selected": selected,
+              "aria-pressed": selected,
               "aria-disabled": _this.props.disabled,
-              disabled: _this.props.disabled,
+              disabled: _this.props.disabled || undefined,
               className: cx({
                 "rw-off-range": !inCentury(date, _this.props.value),
                 "rw-state-focus": focused,

lib/Combobox.js

@@ -192,6 +192,9 @@ var ComboBox = React.createClass({
       React.createElement(
         Popup,
         babelHelpers._extends({}, _.pick(this.props, Object.keys(compat.type(Popup).propTypes)), {
+          onOpening: function () {
+            return _this.refs.list.forceUpdate();
+          },
           onRequestClose: this.close }),
         React.createElement(
           "div",

lib/DateTimePicker.js

@@ -2,6 +2,7 @@
 var babelHelpers = require("./util/babelHelpers.js");
 var React = require("react"),
     invariant = require("react/lib/invariant"),
+    activeElement = require("react/lib/getActiveElement"),
     cx = require("classnames"),
     compat = require("./util/compat"),
     _ = require("./util/_") //pick, omit, has
@@ -139,6 +140,7 @@ var DateTimePicker = React.createClass({
           return _cx;
         })()) }),
       React.createElement(DateInput, { ref: "valueInput",
+        "aria-labelledby": this.props["aria-labelledby"],
         "aria-activedescendant": this.props.open ? this.props.open === popups.CALENDAR ? this._id("_cal_view_selected_item") : timeOptID : undefined,
         "aria-expanded": !!this.props.open,
         "aria-busy": !!this.props.busy,
@@ -201,7 +203,10 @@ var DateTimePicker = React.createClass({
         {
           dropUp: dropUp,
           open: this.props.open === popups.TIME,
-          onRequestClose: this.close },
+          onRequestClose: this.close,
+          onOpening: function () {
+            return _this.refs.timePopup.forceUpdate();
+          } },
         React.createElement(
           "div",
           null,
@@ -211,6 +216,7 @@ var DateTimePicker = React.createClass({
             "aria-hidden": !this.props.open,
             style: { maxHeight: 200, height: "auto" },
             value: value,
+            step: this.props.step,
             min: this.props.min,
             max: this.props.max,
             culture: this.props.culture,
@@ -249,6 +255,8 @@ var DateTimePicker = React.createClass({
         if (date != this.props.value) change(date, str);
       } else if (!dates.eq(date, this.props.value)) change(date, str);
     }
+
+    //this._focus(true)
   },
 
   _keyDown: function (e) {
@@ -268,14 +276,14 @@ var DateTimePicker = React.createClass({
   },
 
   //timeout prevents transitions from breaking focus
-  _focus: function (focused, e) {
+  _focus: function (focused, isOnFocusEvent, e) {
     var _this = this;
 
-    var input = this.refs.valueInput;
+    var inputFocused = activeElement() === this.refs.valueInput.getDOMNode();
 
     this.setTimeout("focus", function () {
-
-      if (focused) compat.findDOMNode(input).focus();else _this.close();
+      //var el = this.refs.valueInput
+      if (focused) _this.refs.valueInput.focus();else _this.close();
 
       if (focused !== _this.state.focused) {
         _this.notify(focused ? "onFocus" : "onBlur", e);

lib/Decade.js

@@ -76,9 +76,9 @@ module.exports = React.createClass({
             Btn,
             { onClick: _this.props.onChange.bind(null, date), tabIndex: "-1",
               id: focused ? id : undefined,
-              "aria-selected": selected,
+              "aria-pressed": selected,
               "aria-disabled": _this.props.disabled,
-              disabled: _this.props.disabled,
+              disabled: _this.props.disabled || undefined,
               className: cx({
                 "rw-off-range": !inDecade(date, _this.props.value),
                 "rw-state-focus": focused,

lib/DropdownList.js

@@ -148,6 +148,9 @@ var DropdownList = React.createClass({
       React.createElement(
         Popup,
         babelHelpers._extends({}, _.pick(this.props, Object.keys(compat.type(Popup).propTypes)), {
+          onOpening: function () {
+            return _this.refs.list.forceUpdate();
+          },
           onRequestClose: this.close }),
         React.createElement(
           "div",

lib/List.js

@@ -49,7 +49,8 @@ module.exports = React.createClass({
   },
 
   componentDidUpdate: function (prevProps) {
-    if (prevProps.focused !== this.props.focused) this._setScrollPosition();
+    //if ( prevProps.focused !== this.props.focused)
+    this._setScrollPosition();
   },
 
   render: function () {

lib/ListGroupable.js

@@ -69,7 +69,8 @@ module.exports = React.createClass({
   },
 
   componentDidUpdate: function (prevProps) {
-    if (prevProps.focused !== this.props.focused) this._setScrollPosition();
+    //if ( prevProps.focused !== this.props.focused)
+    this._setScrollPosition();
   },
 
   render: function () {

lib/Month.js

@@ -88,8 +88,8 @@ module.exports = React.createClass({
             {
               tabIndex: "-1",
               onClick: _this.props.onChange.bind(null, day),
-              "aria-selected": selected,
-              "aria-disabled": _this.props.disabled,
+              "aria-pressed": selected,
+              "aria-disabled": _this.props.disabled || undefined,
               disabled: _this.props.disabled,
               className: cx({
                 "rw-off-range": dates.month(day) !== dates.month(_this.state.focusedDate),

lib/Multiselect.js

@@ -181,6 +181,9 @@ var Multiselect = React.createClass({
       React.createElement(
         Popup,
         babelHelpers._extends({}, _.pick(this.props, Object.keys(compat.type(Popup).propTypes)), {
+          onOpening: function () {
+            return _this.refs.list.forceUpdate();
+          },
           onRequestClose: this.close }),
         React.createElement(
           "div",

lib/MultiselectInput.js

@@ -23,7 +23,7 @@ module.exports = React.createClass({
   render: function () {
     var value = this.props.value,
         placeholder = this.props.placeholder,
-        size = Math.max((value || placeholder).length, 1) + 1;
+        size = Math.max((value || placeholder).length, 1);
 
     return React.createElement("input", babelHelpers._extends({}, this.props, {
       type: "text",
@@ -39,4 +39,4 @@ module.exports = React.createClass({
     compat.findDOMNode(this).focus();
   }
 
-});
+});

lib/NumberInput.js

@@ -73,22 +73,33 @@ module.exports = React.createClass({
     //a null value is only possible when there is no min
     if (!hasMin && isNull) return this.props.onChange(null);
 
-    if (this.isValid(number) && number !== this.props.value) return this.props.onChange(number);
+    if (this.isValid(number) && number !== this.props.value && !this.isAtDecimal(number, val)) return this.props.onChange(number);
 
     //console.log(val !== 0 && !val)
     this.current(e.target.value);
   },
 
   _finish: function (e) {
-    var number = this.props.parse(this.state.stringValue, this.props.culture);
+    var str = this.state.stringValue,
+        number = this.props.parse(str, this.props.culture);
 
     // if number is below the min
-    // we need to flush low values eventually, onBlur means i'm done inputing
-    if (!isNaN(number) && number < this.props.min) {
+    // we need to flush low values and decimal stops, onBlur means i'm done inputing
+    if (!isNaN(number) && (number < this.props.min || this.isAtDecimal(number, str))) {
       this.props.onChange(number);
     }
   },
 
+  isAtDecimal: function (num, str) {
+    var next;
+
+    if (str.length <= 1) return false;
+
+    next = this.props.parse(str.substr(0, str.length - 1), this.props.culture);
+
+    return typeof next === "number" && !isNaN(next) && next === num;
+  },
+
   isValid: function (num) {
     if (typeof num !== "number" || isNaN(num)) return false;
     return num >= this.props.min;

lib/SelectList.js

@@ -179,12 +179,15 @@ var SelectList = React.createClass({
     }
 
     function move(dir, item) {
-      var stop = dir === "next" ? list.last() : list.first(),
+      var isDisabled = function (item) {
+        return self.isDisabledItem(item) || self.isReadOnlyItem(item);
+      },
+          stop = dir === "next" ? list.last() : list.first(),
           next = list[dir](item);
 
-      while (next !== stop && self.isDisabledItem(next)) next = list[dir](next);
+      while (next !== stop && isDisabled(next)) next = list[dir](next);
 
-      return self.isDisabledItem(next) ? item : next;
+      return isDisabled(next) ? item : next;
     }
   },
 

lib/TimeList.js

@@ -3,6 +3,7 @@ var babelHelpers = require("./util/babelHelpers.js");
 var React = require("react"),
     dates = require("./util/dates"),
     List = require("./List"),
+    compat = require("./util/compat"),
     CustomPropTypes = require("./util/propTypes"),
     _ = require("./util/_"); // omit
 
@@ -27,6 +28,8 @@ module.exports = React.createClass({
       step: 30,
       format: "t",
       onSelect: function () {},
+      min: new Date(1900, 0, 1),
+      max: new Date(2099, 11, 31),
       preserveDate: true,
       delay: 300
     };
@@ -56,7 +59,12 @@ module.exports = React.createClass({
     var times = this.state.dates,
         date = this._closestDate(times, this.props.value);
 
-    return React.createElement(List, babelHelpers._extends({}, _.omit(this.props, "value"), {
+    function select() {
+
+      console.log("render");
+    }
+
+    return React.createElement(List, babelHelpers._extends({}, _.pick(this.props, Object.keys(compat.type(List).propTypes)), {
       ref: "list",
       data: times,
       textField: "label",
@@ -95,7 +103,6 @@ module.exports = React.createClass({
         start = values.min,
         startDay = dates.date(start);
 
-    // debugger;
     while (i < 100 && (dates.date(start) === startDay && dates.lte(start, values.max))) {
       i++;
       times.push({ date: start, label: dates.format(start, props.format, props.culture) });
@@ -125,10 +132,12 @@ module.exports = React.createClass({
       };
     }
 
+    start = dates.today();
+    end = dates.tomorrow();
     //date parts are equal
     return {
-      min: dates.eq(value, min, "day") ? min : dates.today(),
-      max: dates.eq(value, max, "day") ? min : dates.tomorrow()
+      min: dates.eq(value, min, "day") ? dates.merge(start, min) : start,
+      max: dates.eq(value, max, "day") ? dates.merge(start, max) : end
     };
   },
 

lib/Year.js

@@ -72,8 +72,8 @@ module.exports = React.createClass({
             Btn,
             { onClick: _this.props.onChange.bind(null, date), tabIndex: "-1",
               id: focused ? id : undefined,
-              "aria-selected": selected,
-              "aria-disabled": _this.props.disabled,
+              "aria-pressed": selected,
+              "aria-disabled": _this.props.disabled || undefined,
               disabled: _this.props.disabled,
               className: cx({
                 "rw-state-focus": focused,

lib/less/core.less

@@ -108,8 +108,7 @@
   }
 }
 
-ul.rw-list,
-ul.rw-selectlist {
+ul.rw-list {
   .list-unstyled();
   padding: 5px 0;
   overflow: auto;
@@ -311,8 +310,11 @@ ul.rw-list {
 
   > .rw-input {
     background-color:   transparent;
-    padding-top: 0;
+    padding-top:    0;
     padding-bottom: 0;
+    padding-right:  0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   > .rw-select,

lib/less/datepicker.less

@@ -63,7 +63,8 @@
 
     .rw-btn {
       width: 100%;
-
+      white-space: normal;
+
       &:hover {
         background-color:   @state-bg-hover;
       }

lib/less/multiselect.less

@@ -25,6 +25,7 @@
     border-width:         0;
     line-height:          normal;
     width:                auto;
+    max-width:            100%;
   }
 
   .rw-state-readonly > &,

lib/less/popup.less

@@ -39,7 +39,7 @@
 
   &.rw-calendar-popup {
     right: auto;
-    width: 200px; //15em; ?
+    width: 18em; //15em; ?
   }
 }
 

lib/less/selectlist.less

@@ -4,6 +4,7 @@
 }
 
 .rw-selectlist {
+  &:extend(ul.rw-list all);
 
   > ul {
     height: 100%;

lib/util/dates.js

@@ -36,8 +36,10 @@ var dates = module.exports = _.assign(dateMath, {
   //-------------------------------------
 
   shortDay: function (dayOfTheWeek) {
-    var culture = arguments[1] === undefined ? "default" : arguments[1];
-    var names = shortNames[culture] || (shortNames[culture] = dates.shortDaysOfWeek(culture));
+    var culture = dates.culture(arguments[1]),
+        name = typeof culture === "string" ? culture : culture.name;
+
+    var names = shortNames[name] || (shortNames[name] = dates.shortDaysOfWeek(culture));
 
     return names[dayOfTheWeek];
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "A set of input widgets for React",
   "main": "lib/index.js",
   "author": {