react-widgets - npm Package Compare versions

Comparing version 0.3.0 to 1.0.1

docs/components/docs.jsx

@@ -16,2 +16,3 @@ var React = require('react/addons')
 
+
 var Docs = React.createClass({
@@ -70,2 +71,5 @@
               </p>
+
+              <p>Included icons are provided by - <a href="http://fontawesome.io">Font Awesome by Dave Gandy</a></p>
+
               <h2>External Dependencies</h2>
@@ -77,6 +81,2 @@ <p>
                 <ul>
-                  <li>
-                    a <code>$</code> DOM library: <a href="http://jquery.com/download/">jQuery</a> or <a href="http://zeptojs.com/">Zepto</a> depending 
-                    on your browser support needs (used primarily for animation)
-                  </li>
                   <li><a href="http://lodash.com/">lodash</a> (<a href="http://underscorejs.org/">underscore</a>  may also work--untested)</li>
@@ -88,3 +88,2 @@ <li>
                 </ul>
-                React-widgets also expects jQuery or Zepto, primarily for animation (and some simplified DOM managament).
               </p>
@@ -103,2 +102,8 @@
 
+              <h2>Styling</h2>
+              <p>
+                Styling each widget should be a simple matter of adjusting the relevant LESS variables to suit your needs. 
+                Included by default is a "Twitter Bootstrap" theme that mimics the look and feel of Twitter Bootstrap 3.0. This is less an actual 
+                theme and more a neutral starting point for creating your own theme.
+              </p>
             </section>
@@ -147,3 +152,2 @@ <section>
               </p>
-
               <strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget 
@@ -250,3 +254,2 @@ becomes readonly</span>
               </p>
-
               <strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget 
@@ -293,3 +296,2 @@ becomes readonly</span>
 
-
               <h3>isRtl <small>Boolean</small></h3>
@@ -306,3 +308,2 @@ <p>
               </p>
-
               <h3>messages.open <small>String</small> <span className='default'>"Open Combobox"</span></h3>
@@ -317,3 +318,2 @@ <p>
               <h3>messages.emptyFilter <small>String</small><span className='default'>"The filter returned no results"</span></h3>
-
               <p>
@@ -458,3 +458,2 @@ text to display when the the current filter does not return any results
 
-
               <h3>data <small>Array - mixed</small></h3>
@@ -540,3 +539,2 @@ <p>
               <h1 id="calendar" className="page-header">Calendar</h1>
-
               <p>
@@ -685,3 +683,3 @@ Calendar widget.
               }/>
-              
+              </section>
 
@@ -771,3 +769,2 @@ <h2>Props</h2>
               </ul>
-            </section>
           </article>
@@ -774,0 +771,0 @@ </div>

docs/components/examples/calendar.jsx

@@ -59,1 +59,2 @@ var React = require('react/addons')
 
+          

docs/js/prism.js

@@ -0,0 +0,0 @@ /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */

docs/js/react-widgets.js

@@ -0,0 +0,0 @@ this["react-widgets"]=function(e){function t(n){if(s[n])return s[n].exports;var i=s[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){e.exports={DropDownlist:s(1),Combobox:s(2),Calendar:s(3),DateTimePicker:s(4),NumberPicker:s(5),Select:s(6),utils:{ReplaceTransitionGroup:s(7),SlideTransition:s(8)}}},function(e,t,s){var n=s(9),i=s(10),r=n.addons.classSet,o=s(21),a=s(22),p=s(23),u=(s(24).directions,s(28),s(29)),c=s(32),l=s(30),h=(s(17),a.provided(function(e){return!i.isEqual(e.value,this.props.value)})),d=a.provided(function(e){return!i.isEqual(e,this.props.value)}),f={value:n.PropTypes.any,onChange:n.PropTypes.func,data:n.PropTypes.array,valueField:n.PropTypes.string,textField:n.PropTypes.string,valueComponent:n.PropTypes.component,itemComponent:n.PropTypes.component,delay:n.PropTypes.number,messages:n.PropTypes.shape({open:n.PropTypes.string})};e.exports=n.createClass({displayName:"DropdownList",mixins:[s(35),s(36),s(37),s(38),s(39)("selectedIndex"),s(39)("focusedIndex")],propTypes:f,getInitialState:function(){var e=this._dataIndexOf(this.props.data,this.props.value);return{open:!1,selectedIndex:e,focusedIndex:-1===e?0:e}},getDefaultProps:function(){return{valueComponent:u,delay:500,messages:{open:"open dropdown"}}},componentWillReceiveProps:h(function(e){var t=this._dataIndexOf(e.data,e.value);this.setSelectedIndex(t),this.setFocusedIndex(-1===t?0:t)}),componentDidMount:function(){this.setWidth()},render:function(){var e=i.keys(f),t=this.props.valueComponent,s=this._dataItem(this._data(),this.props.value),o=this.props.id&&this.props.id+"_option"||"";return p(i.omit(this.props,e),n.DOM.div({ref:"element",onKeyDown:this._keyDown,onClick:this.toggle,onFocus:this._focus.bind(null,!0),onBlur:this._focus.bind(null,!1),"aria-expanded":this.state.open,"aria-haspopup":!0,"aria-activedescendent":o,tabIndex:"-1",className:r({"rw-dropdown-list":!0,"rw-widget":!0,"rw-state-focus":this.state.focused,"rw-open":this.state.open,"rw-rtl":this.isRtl()})},n.DOM.span({className:"rw-dropdownlist-picker rw-select rw-btn"},n.DOM.i({className:"rw-i rw-i-caret-down"},n.DOM.span({className:"rw-sr"},this.props.messages.open))),t({className:"rw-input",value:s,textField:this.props.textField,valueField:this.props.valueField}),c({style:{width:this.state.width},getAnchor:this._getAnchor,open:this.state.open,onRequestClose:this.close},n.DOM.div(null,l({ref:"list",optID:o,"aria-hidden":!this.state.open,style:{maxHeight:200,height:"auto"},data:this.props.data,value:this.props.value,selectedIndex:this.state.selectedIndex,focusedIndex:this.state.focusedIndex,textField:this.props.textField,valueField:this.props.valueField,listItem:this.props.itemComponent,onSelect:this._onSelect})))))},setWidth:function(){var e=$(this.getDOMNode()),t=e.outerWidth?e.outerWidth():e.width(),s=t!==this.state.width;s&&this.setState({width:t})},_focus:function(e){var t=this;clearTimeout(t.timer),t.timer=setTimeout(function(){e!==t.state.focused&&(t.setState({focused:e}),e||t.close())},0)},_onSelect:function(e){this.close(),this.change(e)},_keyDown:function(e){function t(e){s.change(s._data()[e])}var s=this,n=e.key,i=e.altKey,r=this.state.open;"End"===n?(r?this.setFocusedIndex(this._data().length-1):t(this._data().length-1),e.preventDefault()):"Home"===n?(r?this.setFocusedIndex(0):t(0),e.preventDefault()):"Enter"===n&&r?t(this.state.focusedIndex):"ArrowDown"===n?(i?this.open():r?this.setFocusedIndex(this.nextFocusedIndex()):t(this.nextSelectedIndex()),e.preventDefault()):"ArrowUp"===n?(i?this.close():r?this.setFocusedIndex(this.prevFocusedIndex()):t(this.prevSelectedIndex()),e.preventDefault()):this.search(String.fromCharCode(e.keyCode),this._locate)},change:d(function(e){var t=this.props.onChange;t&&(t(e),this.close())}),_locate:function(e){var t=this.state.open?"focusedIndex":"selectedIndex",s=this.findIndex(e,this.state[t]),n=o(t).bind(this);-1!==s&&n(s)},_data:function(){return this.props.data},open:function(){this.setState({open:!0})},close:function(){this.setState({open:!1})},toggle:function(){this.state.open?this.close():this.open()},_getAnchor:function(){return this.refs.element.getDOMNode()}})},function(e,t,s){var n=s(9),i=n.addons.classSet,r=s(10),o=(s(26),s(27)),a=(s(23),s(24).directions,s(31)),p=s(32),u=s(30),c=s(17),l={value:n.PropTypes.any,onChange:n.PropTypes.func,data:n.PropTypes.array,valueField:n.PropTypes.string,textField:n.PropTypes.string,suggest:n.PropTypes.bool,messages:n.PropTypes.shape({open:n.PropTypes.string,emptyList:n.PropTypes.string,emptyFilter:n.PropTypes.string})};e.exports=n.createClass({displayName:"ComboBox",mixins:[s(37),s(36),s(40),s(38),s(39)("selectedIndex"),s(39)("focusedIndex")],propTypes:l,getInitialState:function(){var e=this.process(this.props.data,this.props.value),t=this._dataIndexOf(e,this.props.value);return{selectedIndex:t,focusedIndex:-1===t?0:t,processedData:e,open:!1}},getDefaultProps:function(){return{suggest:!1,filter:!1,delay:500,messages:{open:"open combobox",emptyList:"There are no items in this list",emptyFilter:"The filter returned no results"}}},shouldComponentUpdate:function(e,t){var s=!r.isEqual(t,this.state),n=!r.isEqual(e.value,this.props.value);return s||n},componentWillReceiveProps:function(e){var t=-1!==this._dataIndexOf(e.data,e.value),s=this.process(e.data,e.value,!t&&this._dataText(e.value)),n=this._dataIndexOf(s,e.value);this._searchTerm="",this.setState({processedData:s,selectedIndex:n,focusedIndex:-1===n?this.findIndex(this._dataText(this.props.value)):n})},componentDidUpdate:function(){{var e=this.refs.input.getDOMNode();this._dataText(this.props.value)}this.state.focused&&e.focus(),this.setWidth()},render:function(){var e=(this.props.valueComponent,this._data()),t=this.props.id&&this.props.id+"_listbox",s=this.props.id&&this.props.id+"_option",r=this.props.suggest?this.props.filter?"both":"inline":this.props.filter?"list":"";return n.DOM.div({ref:"element","aria-expanded":this.state.open,"aria-haspopup":!0,onKeyDown:this._keyDown,onFocus:this._focus.bind(null,!0),onBlur:this._focus.bind(null,!1),tabIndex:"-1",className:i({"rw-combobox":!0,"rw-widget":!0,"rw-state-focus":this.state.focused,"rw-open":this.state.open,"rw-rtl":this.isRtl()})},c({className:"rw-select",onClick:this.toggle},n.DOM.i({className:"rw-i rw-i-caret-down"},n.DOM.span({className:"rw-sr"},this.props.messages.open))),a({ref:"input",type:"text",role:"combobox",suggest:this.props.suggest,"aria-autocomplete":r,className:"rw-input",value:this._dataText(this.props.value),onChange:this._inputTyping,onKeyDown:this._inputKeyDown}),p({style:{width:this.state.width},getAnchor:this._getAnchor,open:this.state.open,onRequestClose:this.close},n.DOM.div(null,u({ref:"list",id:t,optID:s,"aria-hidden":!this.state.open,"aria-live":r&&"polite",style:{maxHeight:200,height:"auto"},data:e,value:this.props.value,selectedIndex:this.state.selectedIndex,focusedIndex:-1===this.state.selectedIndex?this.state.focusedIndex:this.state.selectedIndex,textField:this.props.textField,valueField:this.props.valueField,onSelect:this._onSelect,messages:{emptyList:this.props.data.length?this.props.messages.emptyFilter:this.props.messages.emptyList}}))))},setWidth:function(){var e=$(this.getDOMNode()),t=e.outerWidth?e.outerWidth():e.width(),s=t!==this.state.width;s&&this.setState({width:t})},_onSelect:function(e){this.close(),this.change(e),this._focus(!0)},_inputKeyDown:function(e){this._deleting="Backspace"===e.key||"Delete"===e.key,this._isTyping=!0},_inputTyping:function(e){var t,s,n=this,i=!!this.props.suggest,o=e.target.value;t=this._deleting||!i?o:this.suggest(this._data(),o),t=t||o,s=r.find(n.props.data,function(e){return n._dataText(e).toLowerCase()===t.toLowerCase()}),this.change(!this._deleting&&s?s:o,!0),this.open()},_focus:function(e){var t=this;clearTimeout(t.timer),t.timer=setTimeout(function(){e!==t.state.focused&&(t.setState({focused:e}),e||t.close())},0)},_keyDown:function(e){function t(e){s.change(s._data()[e],!1)}var s=this,n=e.key,i=e.altKey,r=(String.fromCharCode(e.keyCode),this.state.selectedIndex),o=this.state.focusedIndex,a=this.state.open,p=null==r||-1===r;"End"===n?t(this._data().length-1):"Home"===n?t(0):"Enter"===n&&a?(t(o),this.close()):"ArrowDown"===n?i?this.open():t(p?o:this.nextSelectedIndex()):"ArrowUp"===n&&(i?this.close():t(p?o:this.prevSelectedIndex()))},change:function(e,t){var s=this.props.onChange;this._typedChange=!!t,s&&s(e)},open:function(){this.state.open||this.setState({open:!0})},close:function(){this.state.open&&this.setState({open:!1})},toggle:function(){this._focus(!0),this.state.open?this.close():this.open()},suggest:function(e,t){function s(e){return i(this._dataText(e).toLowerCase(),n.toLowerCase())}var n=this._dataText(t),i=o.startsWith,a="string"==typeof t?r.find(e,s,this):t;return!a||this.state&&this.state.deleting?"":this._dataText(a)},_getAnchor:function(){return this.refs.element.getDOMNode()},_data:function(){return this.state.processedData},process:function(e,t,s){return this.props.filter&&s&&(e=this.filter(e,s)),e}})},function(e,t,s){var n=s(9),i=s(12),r=s(13),o=s(14),a=s(15),p=s(16),u=(n.addons.classSet,s(21)),c=s(8),l=s(25),h=s(23),d=s(10),f="right",m="left",y="up",v="down",g={year:1,decade:10,century:100},w={month:r,year:o,decade:a,century:p};NEXT_VIEW={month:"year",year:"decade",decade:"century"},VIEW_UNIT={month:"day",year:"month",decade:"year",century:"decade"},e.exports=n.createClass({displayName:"Calendar",mixins:[s(35),s(38)],propTypes:{onChange:n.PropTypes.func.isRequired,value:n.PropTypes.instanceOf(Date),min:n.PropTypes.instanceOf(Date),max:n.PropTypes.instanceOf(Date),initialView:n.PropTypes.oneOf(["month","year","decade","century"]),finalView:n.PropTypes.oneOf(["month","year","decade","century"]),messages:n.PropTypes.shape({moveBack:n.PropTypes.string,moveForward:n.PropTypes.string}),maintainFocus:n.PropTypes.bool},getInitialState:function(){return{selectedIndex:0,open:!1,view:this.props.initialView||"month",currentDate:new Date(this.props.value)}},getDefaultProps:function(){return{value:new Date,min:new Date(1900,0,1),max:new Date(2099,11,31),initialView:"month",finalView:"century",maintainFocus:!0}},componentWillReceiveProps:function(e){l.eq(e.value,this.props.value,VIEW_UNIT[this.state.view])||this.setState({currentDate:new Date(e.value)})},componentDidUpdate:function(){var e=this.refs.currentView.getDOMNode(),t=document.activeElement;console.log("update",e===t)},render:function(){function e(){this._focus(!0,"stop")}var t=w[this.state.view],s=this.state.currentDate,r=this.props.id&&this.props.id+"_view_label",o=this.state.view+"_"+l[this.state.view](s),a=this.props.id&&this.props.id+"_table";return h(d.omit(this.props,"value","min","max"),n.DOM.div({className:"rw-calendar rw-widget"},i({label:this._label(),labelId:r,messages:this.props.messages,upDisabled:this.state.view===this.props.finalView,prevDisabled:!l.inRange(this.nextDate(m),this.props.min,this.props.max),nextDisabled:!l.inRange(this.nextDate(f),this.props.min,this.props.max),onViewChange:d.partial(this.navigate,y,null),onMoveLeft:d.partial(this.navigate,m,null),onMoveRight:d.partial(this.navigate,f,null)}),c({ref:"animation",direction:this.state.slideDirection,onAnimate:e.bind(this)},t({ref:"currentView",key:o,id:a,"aria-labeledby":r,"aria-activedescendant":a+"_selected_item",selectedDate:this.props.value,value:this.state.currentDate,onChange:this.change,onKeyDown:this._keyDown,onFocus:d.partial(this._focus,!0),onMoveLeft:d.partial(this.navigate,m),onMoveRight:d.partial(this.navigate,f),min:this.props.min,max:this.props.max}))))},navigate:function(e,t){var s=d.invert(NEXT_VIEW),n=this.state.view,i=e===m||e===y?"right":"left";t||(t=d.contains([m,f],e)?this.nextDate(e):this.state.currentDate),e===v&&(n=s[n]||n),e===y&&(n=NEXT_VIEW[n]||n),l.inRange(t,this.props.min,this.props.max)&&(this._focus(!0,"nav"),this.setState({currentDate:t,slideDirection:i,view:n}))},_focus:function(e,t){u("focused");console.log("focus",e,t),e&&this.refs.currentView.getDOMNode().focus()},change:function(e){return this.state.view===this.props.initialView?this.props.onChange(e):void this.navigate(v,e)},nextDate:function(e){var t=e===m?"subtract":"add",s=this.state.view,n="month"===s?s:"year",i=g[s]||1;return l[t](this.state.currentDate,1*i,n)},_keyDown:function(e){var t=e.ctrlKey,s=e.key;t?("ArrowDown"===s&&(e.preventDefault(),this.navigate(v)),"ArrowUp"===s&&(e.preventDefault(),this.navigate(y)),"ArrowLeft"===s&&(e.preventDefault(),this.navigate(m)),"ArrowRight"===s&&(e.preventDefault(),this.navigate(f))):this.refs.currentView._keyDown&&this.refs.currentView._keyDown(e)},_label:function(){var e=this.state.view,t=this.state.currentDate;return"month"===e?l.format(t,l.formats.MONTH_YEAR):"year"===e?l.format(t,l.formats.YEAR):"decade"===e?l.format(l.firstOfDecade(t),l.formats.YEAR)+" - "+l.format(l.lastOfDecade(t),l.formats.YEAR):"century"===e?l.format(l.firstOfCentury(t),l.formats.YEAR)+" - "+l.format(l.lastOfCentury(t),l.formats.YEAR):void 0}})},function(e,t,s){function n(e,t){var s;e=[].concat(e);for(var n=0;n<e.length;n++)if(s=a.parse(t,e[n]))return s;return null}var i=s(9),r=i.addons.classSet,o=s(10),a=s(25),p=s(23),u=s(32),c=s(3),l=s(18),h=s(19),d={value:i.PropTypes.instanceOf(Date),onChange:i.PropTypes.func,min:i.PropTypes.instanceOf(Date),max:i.PropTypes.instanceOf(Date),culture:i.PropTypes.string,format:i.PropTypes.string,calendar:i.PropTypes.bool,time:i.PropTypes.bool,parse:i.PropTypes.oneOfType([i.PropTypes.arrayOf(i.PropTypes.string),i.PropTypes.string,i.PropTypes.func])};e.exports=i.createClass({displayName:"DateTimePicker",mixins:[s(35),s(38)],propTypes:d,getInitialState:function(){return{selectedIndex:0,open:!1,openPopup:null}},getDefaultProps:function(){var e=o.has(this.props,"calendar")?this.props.calendar:!0,t=o.has(this.props,"time")?this.props.time:!0,s=e&&t,n=!e&&!t;return{value:null,format:s||n?"M/d/yyyy h:mm tt":e?"M/d/yyyy":"h:mm tt",min:new Date(1900,0,1),max:new Date(2099,11,31),calendar:!0,time:!0,messages:{calendarButton:"Select Date",timeButton:"Select Time",next:"Next Date"}}},componentDidUpdate:function(){this.setTimeDimensions()},render:function(){var e,t=this.props.id,s=t&&t+"_time_listbox",n=t&&t+"_date_listbox",a=t&&t+"_time_option",d=t&&t+"_table_selected_item";return n&&this.props.calendar&&(e=n),s&&this.props.time&&(e+=" "+s),i.DOM.div({ref:"element",tabIndex:"-1","aria-expanded":this.state.open,"aria-haspopup":!0,onKeyDown:this._keyDown,onFocus:this._focus.bind(null,!0),onBlur:this._focus.bind(null,!1),className:r({"rw-date-picker":!0,"rw-widget":!0,"rw-open":this.state.open,"rw-state-focus":this.state.focused,"rw-has-both":this.props.calendar&&this.props.time,"rw-rtl":this.isRtl()})},h({ref:"valueInput","aria-activedescendant":this.state.open?"calendar"===this.state.openPopup?d:a:void 0,"aria-expanded":this.state.open,"aria-busy":!!this.props.busy,"aria-owns":e,role:"combobox",value:this.props.value,focused:this.state.focused,format:this.props.format,parse:this._parse,onChange:this.props.onChange}),i.DOM.span({className:"rw-select"},this.props.calendar&&f({onClick:this._click.bind(null,"calendar")},i.DOM.i({className:"rw-i rw-i-calendar"},i.DOM.span({className:"rw-sr"},this.props.messages.calendarButton))),this.props.time&&f({onClick:this._click.bind(null,"time")},i.DOM.i({className:"rw-i rw-i-clock-o"},i.DOM.span({className:"rw-sr"},this.props.messages.timeButton)))),this.props.time&&u({getAnchor:this._getAnchor,style:{width:this.state.width},open:this.state.open&&"time"===this.state.openPopup,onRequestClose:this.close},i.DOM.div(null,l({ref:"timePopup",id:s,optID:a,"aria-hidden":!this.state.open,style:{maxHeight:200,height:"auto"},value:this.props.value,min:this.props.min,max:this.props.max,onChange:this._selectTime}))),this.props.calendar&&u({getAnchor:this._getAnchor,style:{width:200},open:this.state.open&&"calendar"===this.state.openPopup,onRequestClose:this.close},p(o.pick(this.props,o.keys(c.type.propTypes)),c({ref:"calPopup",maintainFocus:!1,"aria-hidden":!this.state.open,onChange:this._selectDate,id:n}))))},setTimeDimensions:function(){if(this.props.time){var e=$(this.getDOMNode()),t=e.outerWidth?e.outerWidth():e.width(),s=t!==this.state.width;s&&this.setState({width:t})}},_keyDown:function(e){"Tab"!==e.key&&(e.altKey?(e.preventDefault(),"ArrowDown"===e.key?this.open(this.state.open?"time"===this.state.openPopup?"calendar":"time":this.state.openPopup):"ArrowUp"===e.key&&this.close()):this.state.open&&("calendar"===this.state.openPopup&&this.refs.calPopup._keyDown(e),"time"===this.state.openPopup&&this.refs.timePopup._keyDown(e)))},_focus:function(e,t){var s=this;!e&&t&&$(t.target).is(".rw-header .rw-btn[disabled]")||(clearTimeout(s.timer),s.timer=setTimeout(function(){e!==s.state.focused&&(s.setState({focused:e}),e||s.close())},0))},_selectDate:function(e){this.close(),this.props.onChange(a.merge(e,this.props.value))},_selectTime:function(e){this.close(),this.props.onChange(a.merge(this.props.value,e.date))},_click:function(e,t){this._focus(!0),this.toggle(e,t)},_parse:function(e){var t=o.isFunction(this.props.parse)?parse:o.partial(n,o.compact([this.props.format].concat(this.props.parse)));return t(e)},toggle:function(e){this.state.open?this.state.view!==e?this.open(e):this.close(e):this.open(e)},open:function(e){this.setState({open:!0,openPopup:e})},close:function(){this.setState({open:!1})},_getAnchor:function(){return this.refs.element.getDOMNode()}});var f=s(17)},function(e,t,s){var n=s(9),i=n.addons.classSet,r=s(10),o=(s(23),s(24).directions),a=s(20),p=s(17),u={value:n.PropTypes.number,onChange:n.PropTypes.func,min:n.PropTypes.number,max:n.PropTypes.number,step:n.PropTypes.number,culture:n.PropTypes.string,format:n.PropTypes.string,parse:n.PropTypes.oneOfType([n.PropTypes.arrayOf(n.PropTypes.string),n.PropTypes.string,n.PropTypes.func]),messages:n.PropTypes.shape({increment:n.PropTypes.string,decrement:n.PropTypes.string})};e.exports=n.createClass({displayName:"NumberPicker",mixins:[s(35),s(38)],propTypes:u,getDefaultProps:function(){return{format:"d",min:-1/0,max:1/0,step:1,messages:{increment:"increment value",decrement:"decrement value"}}},getInitialState:function(){return{focused:!1}},render:function(){var e=this,t=this.inRangeValue(this.props.value);return this.transferPropsTo(n.DOM.div({ref:"element",onKeyDown:this._keyDown,onFocus:this._focus.bind(null,!0),onBlur:this._focus.bind(null,!1),tabIndex:"-1",className:i({"rw-number-picker":!0,"rw-widget":!0,"rw-state-focus":this.state.focused,"rw-rtl":this.isRtl()})},n.DOM.span({className:"rw-select"},p({onMouseDown:r.partial(e._mouseDown,o.UP),onMouseUp:this._mouseUp,onClick:r.partial(this._focus,!0),"aria-disabled":t===this.props.max||this.props.disabled},n.DOM.i({className:"rw-i rw-i-caret-up"},n.DOM.span({className:"rw-sr"},this.props.messages.increment))),p({onMouseDown:r.partial(e._mouseDown,o.DOWN),onMouseUp:this._mouseUp,onClick:r.partial(this._focus,!0),"aria-disabled":t===this.props.min||this.props.disabled},n.DOM.i({className:"rw-i rw-i-caret-down"},n.DOM.span({className:"rw-sr"},this.props.messages.decrement)))),a({ref:"input",value:t,editing:this.state.focused,format:this.props.format,role:"spinbutton","aria-valuenow":t,"aria-valuemin":r.isFinite(this.props.min)?this.props.min:"","aria-valuemax":r.isFinite(this.props.max)?this.props.max:"","aria-disabled":this.props.disabled,"aria-readonly":this.props.readonly,onChange:this.change,onKeyDown:this.props.onKeyDown})))},_mouseDown:function(e,t){var s=$(t.target).is(".rw-btn")?$(t.target):$(t.target).closest(".rw-btn"),n=e===o.UP?this.increment:this.decrement;s.addClass("active"),n(),this.interval=setInterval(n,800)},_mouseUp:function(e){var t=$(e.target).is(".rw-btn")?$(e.target):$(e.target).closest(".rw-btn");t.removeClass("active"),clearInterval(this.interval)},_focus:function(e){var t=this;clearTimeout(t.timer),t.timer=setTimeout(function(){var s=t.refs.input.getDOMNode();e&&s.focus(),e!==t.state.focused&&t.setState({focused:e})},0)},_keyDown:function(e){var t=e.key;"End"===t&&r.isFinite(this.props.max)?this.change(this.props.max):"Home"===t&&r.isFinite(this.props.min)?this.change(this.props.min):"ArrowDown"===t?(e.preventDefault(),this.decrement()):"ArrowUp"===t&&(e.preventDefault(),this.increment())},increment:function(){this.change(this.props.value+this.props.step)},decrement:function(){this.change(this.props.value-this.props.step)},change:function(e){var t=this.props.onChange;e=this.inRangeValue(e),t&&this.props.value!==e&&t(e)},inRangeValue:function(e){return Math.max(Math.min(e,this.props.max),this.props.min)}})},function(e,t,s){"use strict";var n=s(9),i=n.addons.classSet,r=s(10),o=s(11),a=(s(24).directions,s(33)),p=s(34),u=s(32),c=s(30),l=(s(17),{data:n.PropTypes.array,value:n.PropTypes.array,onChange:n.PropTypes.func,valueField:n.PropTypes.string,textField:n.PropTypes.string,tagComponent:n.PropTypes.func,messages:n.PropTypes.shape({open:n.PropTypes.string,emptyList:n.PropTypes.string,emptyFilter:n.PropTypes.string})});e.exports=n.createClass({displayName:"Select",mixins:[s(37),s(40),s(38),s(39)("focusedIndex")],propTypes:l,getDefaultProps:function(){return{filter:"startsWith",messages:{emptyList:"There are no items in this list",emptyFilter:"The filter returned no results"}}},getInitialState:function(){var e=this._dataIndexOf(this.props.data,this.props.value);return{open:!1,processedData:this.process(this.props.data,this.props.value,""),focusedIndex:-1===e?0:e}},componentWillReceiveProps:function(e){var t=this.process(e.data,e.value,this.state.searchTerm);this.setState({processedData:t})},componentDidMount:function(){this.setWidth()},render:function(){var e=this.props.id&&this.props.id+"_listbox",t=this.props.id&&this.props.id+"_option",s=this._data();return n.DOM.div({ref:"element","aria-haspopup":!0,onKeyDown:this._keyDown,onFocus:this._focus.bind(null,!0),onBlur:this._focus.bind(null,!1),tabIndex:"-1",className:i({"rw-select-list":!0,"rw-widget":!0,"rw-state-focus":this.state.focused,"rw-open":this.state.open,"rw-rtl":this.isRtl()})},n.DOM.div({className:"rw-select-wrapper",onClick:this._click},p({ref:"tagList",value:[].concat(this.props.value),textField:this.props.textField,valueField:this.props.valueField,valueComponent:this.props.tagComponent,onDelete:this._delete}),a({"aria-expanded":this.state.open,"aria-busy":!!this.props.busy,"aria-owns":e,value:this.state.searchTerm,placeholder:this._placeholder(),focused:this.state.focused,onChange:this._typing})),u({style:{width:this.state.width},getAnchor:this._getAnchor,open:this.state.open,onRequestClose:this.close},n.DOM.div(null,c({ref:"list",id:e,optID:t,"aria-hidden":!this.state.open,style:{maxHeight:200,height:"auto"},data:s,value:this.props.value,textField:this.props.textField,valueField:this.props.valueField,focusedIndex:this.state.focusedIndex,onSelect:this._onSelect,messages:{emptyList:this.props.data.length?this.props.messages.emptyFilter:this.props.messages.emptyList}}))))},setWidth:function(){var e=o(this.getDOMNode()),t=e.outerWidth?e.outerWidth():e.width(),s=t!==this.state.width;s&&this.setState({width:t})},_data:function(){return this.state.processedData},_delete:function(e){this._focus(!0),this.change(r.without(this.props.value,e))},_click:function(){this._focus(!0),!this.state.open&&this.open()},_focus:function(e){var t=this;clearTimeout(t.timer),t.timer=setTimeout(function(){e!==t.state.focused&&(t.setState({focused:e}),e||t.close())},0)},_typing:function(e){var t=this.process(this.props.data,this.props.value,e.target.value);this.setState({searchTerm:e.target.value,processedData:t,open:this.state.open||this.state.open===!1,focusedIndex:t.length>=this.state.focusedIndex?0:this.state.focusedIndex})},_onSelect:function(e){this.change(this.props.value.concat(e)),this.close(),this._focus(!0)},_keyDown:function(e){var t=e.key,s=e.altKey,n=!!this.state.searchTerm,i=this.state.open;"ArrowDown"===t?i?this.setFocusedIndex(this.nextFocusedIndex()):this.open():"ArrowUp"===t?s?this.close():i&&this.setFocusedIndex(this.prevFocusedIndex()):"End"===t?i?this.setFocusedIndex(this._data().length-1):this.refs.tagList.last():"Home"===t?i?this.setFocusedIndex(0):this.refs.tagList.first():i&&"Enter"===t?this._onSelect(this._data()[this.state.focusedIndex]):"Esc"===t?i?this.close():this.refs.tagList.clear():n||"ArrowLeft"!==t?n||"ArrowRight"!==t?n||"Delete"!==t?n||"Backspace"!==t||this.refs.tagList.removeNext():this.refs.tagList.removeCurrent():this.refs.tagList.next():this.refs.tagList.prev()},change:function(e){var t=this.props.onChange;t&&t(e)},open:function(){this.setState({open:!0})},close:function(){this.setState({open:!1})},toggle:function(){this.state.open?this.close():this.open()},process:function(e,t,s){var n=r.reject(e,function(e){return r.any(t,r.partial(this._valueMatcher,e),this)},this);return s&&(n=this.filter(n,s)),n},_placeholder:function(){return this.props.value.length?"":this.props.placeholder||""},_getAnchor:function(){return this.refs.element.getDOMNode()}})},function(e,t,s){"use strict";var n=s(9),i=s(10);e.exports=n.createClass({displayName:"ReplaceTransitionGroup",propTypes:{component:n.PropTypes.func,childFactory:n.PropTypes.func,onAnimating:n.PropTypes.func,onAnimate:n.PropTypes.func},getDefaultProps:function(){return{component:n.DOM.span,childFactory:function(e){return e},onAnimating:i.noop,onAnimate:i.noop}},getInitialState:function(){return{children:n.Children.map(this.props.children,function(e){return e})}},componentWillReceiveProps:function(e){var t=n.Children.map(e.children,function(e){return e}),s=this.state.children;this.setState({children:i.extend({},s,t)}),i.any(t,function(e,t){var n=s&&i.has(s,t),r=!n&&!this.currentlyTransitioningKeys[t];return r&&(this.next=t),r},this),i.any(s,function(e,s){var n=t&&i.has(t,s),r=!n&&!this.currentlyTransitioningKeys[s];return r&&(this.current=s),r},this)},componentWillMount:function(){this.currentlyTransitioningKeys={},this.current=null,this.next=null},componentDidUpdate:function(){var e=this.current,t=this.next,s=this.refs[e||t],n=this.getDOMNode(),i=s&&s.getDOMNode();i&&(n.style.overflow="hidden",n.style.height=$(i).height()+"px",n.style.width=$(i).width()+"px"),this.props.onAnimating(),this.next=null,this.current=null,t&&this.performEnter(t),e&&this.performLeave(e)},performEnter:function(e){this.currentlyTransitioningKeys[e]=!0;var t=this.refs[e];t.componentWillEnter?t.componentWillEnter(this._handleDoneEntering.bind(this,e)):this._handleDoneEntering(e)},_tryFinish:function(){var e=this.getDOMNode();this.isTransitioning()||(e.style.overflow="visible",$(e).height(""),$(e).width(""),this.props.onAnimate())},_handleDoneEntering:function(e){var t=this.refs[e];t.componentDidEnter&&t.componentDidEnter(),delete this.currentlyTransitioningKeys[e];var s=n.Children.map(this.props.children,function(e){return e});s&&i.has(s,e)||this.performLeave(e),this._tryFinish()},isTransitioning:function(){return 0!==Object.keys(this.currentlyTransitioningKeys).length},performLeave:function(e){var t=this.refs[e];this.currentlyTransitioningKeys[e]=!0,t.componentWillLeave?t.componentWillLeave(this._handleDoneLeaving.bind(this,e)):this._handleDoneLeaving(e)},_handleDoneLeaving:function(e){var t=this.refs[e];t.componentDidLeave&&t.componentDidLeave(),delete this.currentlyTransitioningKeys[e];var s=n.Children.map(this.props.children,function(e){return e});if(s&&s.hasOwnProperty(e))this.performEnter(e);else{var r=i.extend({},this.state.children);delete r[e],this.setState({children:r})}this._tryFinish()},render:function(){var e={};for(var t in this.state.children){var s=this.state.children[t];s&&(e[t]=n.addons.cloneWithProps(this.props.childFactory(s),{ref:t}))}return this.transferPropsTo(this.props.component(null,e))}})},function(e,t,s){var n=s(9),i=s(7),r=s(11),o=s(41),a=(s(42),s(10),n.createClass({displayName:"SlideChildGroup",propTypes:{direction:n.PropTypes.oneOf(["left","right"])},getDefaultProps:function(){return{duration:250}},componentWillEnter:function(e){var t=this,s=(o.endEvent(),this.getDOMNode()),n=r(s),i=n.width(),a=this.props.direction;this.ORGINAL_POSITION=n.css("position"),n.css({position:"absolute",overflow:"hidden",left:"left"===a?i:-i,top:0}).animate({left:0},t.props.duration,function(){n.css({position:t.ORGINAL_POSITION||"static",overflow:"hidden"}),t.ORGINAL_POSITION=null,e&&e()})},componentWillLeave:function(e){var t=this,s=(o.endEvent(),this.getDOMNode()),n=r(s),i=n.width(),a=this.props.direction;this.ORGINAL_POSITION=n.css("position"),n.css({position:"absolute",overflow:"hidden",top:0,left:0}).animate({left:"left"===a?-i:i},t.props.duration,function(){n.css({position:t.ORGINAL_POSITION||"static",overflow:"hidden"}),t.ORGINAL_POSITION=null,e&&e()})},render:function(){return n.Children.only(this.props.children)}}));e.exports=n.createClass({displayName:"exports",propTypes:{direction:n.PropTypes.oneOf(["left","right"])},getDefaultProps:function(){return{direction:"left"}},_wrapChild:function(e){return a({direction:this.props.direction},e)},render:function(){return this.transferPropsTo(i({ref:"container",childFactory:this._wrapChild,style:{position:"relative",overflow:"hidden"},component:n.DOM.div},this.props.children))},isTransitioning:function(){return this.isMounted()&&this.refs.container.isTransitioning()}})},function(e){!function(){e.exports=this["window.React"]}()},function(e){!function(){e.exports=this["window._"]}()},function(e){!function(){e.exports=this["window.$"]}()},function(e,t,s){var n=s(9),i=(n.addons.classSet,s(17));e.exports=n.createClass({displayName:"exports",propTypes:{label:n.PropTypes.string.isRequired,labelId:n.PropTypes.string,upDisabled:n.PropTypes.bool.isRequired,prevDisabled:n.PropTypes.bool.isRequired,nextDisabled:n.PropTypes.bool.isRequired,onViewChange:n.PropTypes.func.isRequired,onMoveLeft:n.PropTypes.func.isRequired,onMoveRight:n.PropTypes.func.isRequired,messages:n.PropTypes.shape({moveBack:n.PropTypes.string,moveForward:n.PropTypes.string})},mixins:[s(35),s(45)],getDefaultProps:function(){return{messages:{moveBack:"navigate back",moveForward:"navigate forward"}}},render:function(){var e=this.isRtl();return n.DOM.div({className:"rw-header"},i({className:"rw-btn-left",onClick:this.props.onMoveLeft,disabled:this.props.prevDisabled,"aria-disabled":this.props.prevDisabled,title:this.props.moveBack},n.DOM.i({className:"rw-i rw-i-caret-"+(e?"right":"left")},n.DOM.span({className:"rw-sr"},"Pthis.props.moveBack}"))),i({className:"rw-btn-view",id:this.props.labelId,onClick:this.props.onViewChange,disabled:this.props.upDisabled,"aria-disabled":this.props.upDisabled},this.props.label),i({className:"rw-btn-right",onClick:this.props.onMoveRight,disabled:this.props.nextDisabled,"aria-disabled":this.props.nextDisabled,title:this.props.moveForward},n.DOM.i({className:"rw-i rw-i-caret-"+(e?"left":"right")},n.DOM.span({className:"rw-sr"},this.props.moveForward))))}})},function(e,t,s){var n=s(9),i=n.addons.classSet,r=s(25),o=s(44),a=s(24).directions,p=s(23),u=s(10),c=s(17),l={LEFT:a.RIGHT,RIGHT:a.LEFT};e.exports=n.createClass({displayName:"MonthView",mixins:[s(45),s(46)("month","day")],propTypes:{culture:n.PropTypes.array,value:n.PropTypes.instanceOf(Date),selectedDate:n.PropTypes.instanceOf(Date),min:n.PropTypes.instanceOf(Date),max:n.PropTypes.instanceOf(Date),format:n.PropTypes.string,onChange:n.PropTypes.func.isRequired,onMoveLeft:n.PropTypes.func,onMoveRight:n.PropTypes.func},render:function(){var e=r.visibleDays(this.props.value),t=o(e,7);return p(u.omit(this.props,"max","min","value","onChange"),n.DOM.table({role:"grid",tabIndex:"0",className:"rw-calendar-grid",onKeyUp:this._keyUp},n.DOM.thead(null,n.DOM.tr(null,this._headers())),n.DOM.tbody(null,u.map(t,this._row))))},_row:function(e,t){return n.DOM.tr({key:"week_"+t},u.map(e,function(e,t){var s=r.eq(e,this.state.focusedDate,"day"),o=r.eq(e,this.props.selectedDate,"day"),a=this.props.id&&this.props.id+"_selected_item";return r.inRange(e,this.props.min,this.props.max)?n.DOM.td({key:"day_"+t},c({tabIndex:"-1",onClick:u.partial(this.props.onChange,e),"aria-selected":o,className:i({"rw-off-range":r.month(e)!==r.month(this.state.focusedDate),"rw-state-focus":s,"rw-state-selected":o}),id:s?a:void 0},r.format(e,"dd"))):n.DOM.td({key:"day_"+t,className:"rw-empty-cell"}," ")

example/example.jsx

@@ -11,4 +11,2 @@ var React = require('react/addons')
 
-require('../src/less/react-widgets.less')
-
 var App = React.createClass({
@@ -15,0 +13,0 @@

gulpfile.js

@@ -29,3 +29,2 @@ var gulp = require('gulp')
 
-
 gulp.task("dist-build", function() {
@@ -36,2 +35,8 @@ return gulpWebpack(configs.browser)
 
+gulp.task('dist-less', function(){
+    gulp.src('./src/less/react-widgets.less')
+        .pipe(plumber())
+        .pipe(less())
+        .pipe(gulp.dest('./dist/css'));
+});
 
@@ -71,3 +76,6 @@ gulp.task("dev-server", function(callback) {
 gulp.task('docs', ['docs-build', 'docs-less']);
+gulp.task('browser', ['dist-build', 'dist-less']);
 
+gulp.task('prod', ['docs', 'browser']);
+
 function handleError(err) {
@@ -74,0 +82,0 @@ console.log(err.toString());

package.json

 {
   "name": "react-widgets",
-  "version": "0.3.0",
+  "version": "1.0.1",
   "description": "React widgets",
@@ -10,3 +10,7 @@ "main": "index.js",
   },
-
+  "homepage": "http://theporchrat.github.io/react-widgets/docs/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/theporchrat/react-widgets"
+  },
   "dependencies": {
@@ -13,0 +17,0 @@ "bluebird": "^1.2.4",

README.md

@@ -17,4 +17,12 @@ react-widgets
 
+### Old Browser Support
+
+The goal is to support IE8+, but currently it is difficult for me to test a wide variety of browsersm so there is no guarantee 
+it will work (patches welcome!).
+
+One aspect that is definately true is that animation is not supported for browsers that do not support CSS Transitions.
+
 ### Docs
 
+you can find docs [here](http://theporchrat.github.io/react-widgets/docs/)
 Docs are a simple React app, you can build with gulp `gulp docs`

src/calendar/calendar.jsx

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
   , Header  = require('./header.jsx')
@@ -7,7 +7,7 @@ , Month = require('./month.jsx')
   , Century = require('./century.jsx')
-  , cx = React.addons.classSet
+  , cx = require('../util/cx')
   , setter = require('../util/stateSetter')
   , SlideTransition  = require('../common/slide-transition.jsx')
   , dates = require('../util/dates')
-  , mergePropsInto = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash');
@@ -71,3 +71,2 @@
 
-
   },
@@ -96,3 +95,2 @@
       maintainFocus: true
-
     }
@@ -113,3 +111,3 @@ },
 
-    console.log('update', el === active);
+    //console.log('update', el === active);
 
@@ -128,3 +126,3 @@ // if ( this.props.maintainFocus && this.state.focused && el !== active)
     //console.log(key)
-    return mergePropsInto(_.omit(this.props, 'value', 'min', 'max'),
+    return mergeIntoProps(_.omit(this.props, 'value', 'min', 'max'),
       <div className='rw-calendar rw-widget'>
@@ -205,5 +203,5 @@ <Header
     var s = setter('focused');
-    console.log('focus', val, e)
     
-    val && this.refs.currentView.getDOMNode().focus()
+    if ( this.props.maintainFocus)
+      val && this.refs.currentView.getDOMNode().focus()
     
@@ -210,0 +208,0 @@ //s.call(this,val)

src/calendar/century.jsx

@@ -1,7 +0,7 @@
-var React = require('react/addons')
-  , cx = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , dates = require('../util/dates')
   , chunk = require('../util/chunk')
   , directions = require('../util/constants').directions
-  , transferProps = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash')
@@ -37,3 +37,3 @@
 
-    return transferProps(
+    return mergeIntoProps(
       _.omit(this.props, 'max', 'min', 'value', 'onChange'),
@@ -57,3 +57,3 @@ <table tabIndex='0'
       <tr key={'row_' + i}>
-      {_.map(row, date => {
+      {_.map(row, (date, i) => {
         var focused  = dates.eq(date,  this.state.focusedDate,  'decade')
@@ -64,6 +64,5 @@ , selected = dates.eq(date, this.props.value,  'decade')
 
-
         return !inRange(date, this.props.min, this.props.max) 
-          ? <td className='rw-empty-cell'>&nbsp;</td>
-          : (<td>
+          ? <td key={i} className='rw-empty-cell'>&nbsp;</td>
+          : (<td key={i}>
               <btn onClick={_.partial(this.props.onChange, d)} 
@@ -70,0 +69,0 @@ tabIndex='-1'

src/calendar/decade.jsx

@@ -1,7 +0,7 @@
-var React = require('react/addons')
-  , cx    = React.addons.classSet
+var React = require('react')
+  , cx    = require('../util/cx')
   , dates = require('../util/dates')
   , chunk = require('../util/chunk')
   , directions = require('../util/constants').directions
-  , transferProps = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash')
@@ -39,3 +39,3 @@
 
-    return transferProps(
+    return mergeIntoProps(
       _.omit(this.props, 'max', 'min', 'value', 'onChange'),
@@ -62,3 +62,3 @@ <table
       <tr key={'row_' + i}>
-      {_.map(row, date => {
+      {_.map(row, (date, i) => {
         var focused  = dates.eq(date,  this.state.focusedDate,  'year')
@@ -69,4 +69,4 @@ , selected = dates.eq(date, this.props.value,  'year')
         return !dates.inRange(date, this.props.min, this.props.max, 'year') 
-          ? <td className='rw-empty-cell'>&nbsp;</td>
-          : (<td>
+          ? <td key={i} className='rw-empty-cell'>&nbsp;</td>
+          : (<td key={i}>
               <btn onClick={_.partial(this.props.onChange, date)} tabIndex='-1'
@@ -73,0 +73,0 @@ id={ focused ? id : undefined }

src/calendar/header.jsx

@@ -1,3 +0,3 @@
-var React = require('react/addons')
-  , cx    = React.addons.classSet;
+var React = require('react')
+  , cx    = require('../util/cx');
 
@@ -4,0 +4,0 @@ var btn = require('../common/btn.jsx')

src/calendar/month.jsx

@@ -1,7 +0,7 @@
-var React = require('react/addons')
-  , cx    = React.addons.classSet
+var React = require('react')
+  , cx    = require('../util/cx')
   , dates = require('../util/dates')
   , chunk = require('../util/chunk')
   , directions = require('../util/constants').directions
-  , transferProps = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash')
@@ -43,3 +43,3 @@
 
-    return transferProps(
+    return mergeIntoProps(
       _.omit(this.props, 'max', 'min', 'value', 'onChange'),
@@ -46,0 +46,0 @@ <table

src/calendar/year.jsx

@@ -1,7 +0,7 @@
-var React = require('react/addons')
-  , cx    = React.addons.classSet
+var React = require('react')
+  , cx    = require('../util/cx')
   , dates = require('../util/dates')
   , chunk = require('../util/chunk')
   , directions = require('../util/constants').directions
-  , transferProps = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash')
@@ -35,3 +35,3 @@
 
-    return transferProps(
+    return mergeIntoProps(
       _.omit(this.props, 'max', 'min', 'value', 'onChange'),
@@ -51,8 +51,8 @@ <table tabIndex='0'
 
-  _row: function(row){
+  _row: function(row, i){
     // if (this.isRtl()) row.reverse()
 
     return (
-      <tr>
-      {_.map(row, date => {
+      <tr key={i}>
+      {_.map(row, (date, i) => {
         var focused  = dates.eq(date, this.state.focusedDate,  'month')
@@ -63,3 +63,3 @@ , selected = dates.eq(date, this.props.value,  'month')
         return dates.inRange(date, this.props.min, this.props.max, 'month') 
-          ? (<td >
+          ? (<td key={i}>
               <btn onClick={_.partial(this.props.onChange, date)} tabIndex='-1'
@@ -75,3 +75,3 @@ id={focused ? id : undefined}
             </td>)
-          : <td className='rw-empty-cell'>&nbsp;</td>
+          : <td key={i} className='rw-empty-cell'>&nbsp;</td>
       })}
@@ -78,0 +78,0 @@ </tr>)

src/common/btn.jsx

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
 
@@ -3,0 +3,0 @@

src/common/list.jsx

@@ -1,8 +0,7 @@
-var React   = require('react/addons')
+var React   = require('react')
   , filter  = require('../util/filter')
   , compose = require('../util/compose')
-  , mergePropsInto = require('../util/transferProps')
-  , cx = React.addons.classSet
-  , $  =  require('$')
-  , _  =  require('lodash');
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
+  , cx = require('../util/cx')
+  , _  = require('lodash');
 
@@ -88,3 +87,4 @@ var DefaultListItem = React.createClass({
     
-		return mergePropsInto(_.omit(this.props, 'data', 'selectedIndex'),
+		return mergeIntoProps(
+      _.omit(this.props, 'data', 'selectedIndex'),
 			<ul 
@@ -105,3 +105,3 @@ className="rw-list"
     var list = this.getDOMNode()
-      , selected = $(list).children().eq(this.props.focusedIndex)[0]
+      , selected = list.children[this.props.focusedIndex]
       , scrollTop, listHeight, selectedTop, selectedHeight, bottom;
@@ -108,0 +108,0 @@

src/common/ReplaceTransitionGroup.jsx

@@ -21,3 +21,5 @@ /**
 
-var React = require('react/addons')
+var React = require('react')
+  , cloneWithProps = require('../util/transferProps').cloneWithProps
+  , $ = require('../util/dom')
   , _ = require('lodash');
@@ -95,8 +97,14 @@
       , node  = this.getDOMNode()
-      , el    = first && first.getDOMNode();
+      , el    = first && first.getDOMNode()
+      , ht, wt;
 
     if( el ) {
-      node.style.overflow = 'hidden'
-      node.style.height = $(el).height() + 'px'
-      node.style.width  = $(el).width() + 'px'
+      ht = $.height(el) + 'px'
+      wt = $.width(el) + 'px'
+
+      $.css(node, {
+        overflow: 'hidden',
+        height: ht,
+        width: wt
+      })
     }
@@ -132,5 +140,8 @@
 
-    node.style.overflow = 'visible'
-    $(node).height('')
-    $(node).width('')
+    $.css(node, {
+      overflow: 'visible',
+      height: '',
+      width: ''
+    })
+
     this.props.onAnimate() 
@@ -201,3 +212,3 @@ },
       if (child) {
-        childrenToRender[key] = React.addons.cloneWithProps(
+        childrenToRender[key] = cloneWithProps(
           this.props.childFactory(child),
@@ -204,0 +215,0 @@ { ref: key }

src/common/slide-transition.jsx

@@ -1,6 +0,4 @@
-var React   = require('react/addons')
+var React   = require('react')
   , ReplaceTransitionGroup  = require('./ReplaceTransitionGroup.jsx')
-  , $  =  require('$')
-  , transitions = require('../util/transition')
-  , events  =  require('../util/events')
+  , $  =  require('../util/dom')
   , _ = require('lodash');
@@ -20,15 +18,16 @@
   componentWillEnter: function(done) {
-    var self = this
-      , event = transitions.endEvent()
+    var self  = this
       , node  = this.getDOMNode()
-      , $this = $(node)
-      , width = $this.width()
+      , width = $.width(node)
       , direction = this.props.direction;
 
-    this.ORGINAL_POSITION = $this.css('position');
+    width = direction === 'left' ? width : -width
 
-    $this.css({ position: 'absolute', overflow: 'hidden', left:  direction === 'left' ? width : -width, top: 0 })
-      .animate({ left: 0 }, self.props.duration, function(){
-        $this.css({ 
-          position:  self.ORGINAL_POSITION || 'static', 
+    this.ORGINAL_POSITION = node.style.position;
+
+    $.css(node, { position: 'absolute', left: width + 'px' , top: 0 })
+
+    $.animate(node, { left: 0 }, self.props.duration, function(){
+        $.css(node, { 
+          position:  self.ORGINAL_POSITION, 
           overflow: 'hidden'
@@ -43,15 +42,16 @@ });
   componentWillLeave: function(done) {
-    var self = this
-      , event = transitions.endEvent()
+    var self  = this
       , node  = this.getDOMNode()
-      , $this = $(node)
-      , width = $this.width()
+      , width = $.width(node)
       , direction = this.props.direction;
 
-    this.ORGINAL_POSITION = $this.css('position');
+    width = direction === 'left' ? -width : width
 
-    $this.css({ position: 'absolute', overflow: 'hidden', top: 0, left: 0})
-      .animate({ left: direction === 'left' ? -width : width }, self.props.duration, function(){
-        $this.css({ 
-          position:  self.ORGINAL_POSITION || 'static', 
+    this.ORGINAL_POSITION = node.style.position
+
+    $.css(node, { position: 'absolute', top: 0, left: 0})
+
+    $.animate(node, { left: width + 'px'}, self.props.duration, function(){
+        $.css(node, { 
+          position: self.ORGINAL_POSITION, 
           overflow: 'hidden'
@@ -67,5 +67,4 @@ });
     return React.Children.only(this.props.children);
-  },
+  }
 
-  
 })
@@ -72,0 +71,0 @@

src/dropdowns/combo-input.jsx

@@ -1,8 +0,6 @@
-var React = require('react/addons')
-  , cx = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , compose = require('../util/compose')
-  , caretPos = require('../util/caret')
-  , $ = require('$')
+  , caretPos = require('../util/caret');
 
-
 module.exports = React.createClass({
@@ -25,4 +23,2 @@
 
-    //console.log("did Update: ", val, this._last)
-
     if ( this.props.suggest && isSuggestion ){
@@ -36,3 +32,2 @@ var start = val.indexOf(this._last) + this._last.length
 
-    //clear last value so it doesn't persist suggestion
     this._last = val;
@@ -39,0 +34,0 @@ },

src/dropdowns/combobox.jsx

@@ -1,11 +0,12 @@
-var React  = require('react/addons')
-  , cx     = React.addons.classSet
+var React  = require('react')
+  , cx = require('../util/cx')
   , _      = require('lodash')
   , caretPos = require('../util/caret')
   , filter = require('../util/filter')
-  , mergePropsInto = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , directions = require('../util/constants').directions
   , Input  = require('./combo-input.jsx')
   , Popup  = require('../popup/popup.jsx')
-  , List   = require('../common/list.jsx');
+  , List   = require('../common/list.jsx')
+  , $      = require('../util/dom');
 
@@ -117,3 +118,4 @@ var btn = require('../common/btn.jsx')
 
-		return (
+		return mergeIntoProps(
+      _.omit(this.props, _.keys(propTypes)),
 			<div ref="element"
@@ -183,4 +185,3 @@ aria-expanded={ this.state.open }
   setWidth: function() {
-    var el = $(this.getDOMNode())
-      , width = el.outerWidth ? el.outerWidth() : el.width()
+    var width = $.width(this.getDOMNode())
       , changed = width !== this.state.width;
@@ -187,0 +188,0 @@

src/dropdowns/dropdown-list.jsx

@@ -1,12 +0,12 @@
-var React = require('react/addons')
+var React = require('react')
   , _ = require('lodash')
-  , cx    = React.addons.classSet
+  , cx = require('../util/cx')
   , setter = require('../util/stateSetter')
   , compose = require('../util/compose')
-  , mergePropsInto = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , directions = require('../util/constants').directions
-  , SlideDown = require('../common/collapse-transition.jsx')
   , DefaultValueItem = require('./value-item.jsx')
   , Popup = require('../popup/popup.jsx')
-  , List  = require('../common/list.jsx');
+  , List  = require('../common/list.jsx')
+  , $     = require('../util/dom');
 
@@ -61,3 +61,4 @@ var btn = require('../common/btn.jsx')
       selectedIndex: initialIdx,
-      focusedIndex:  initialIdx === -1 ? 0 : initialIdx
+      focusedIndex:  initialIdx === -1 ? 0 : initialIdx,
+      
 		}
@@ -87,8 +88,2 @@ },
 
-  // shouldComponentUpdate: function(nextProps, nextState){
-  //   var stateChanged = !_.isEqual(nextState, this.state) 
-  //     , valueChanged = !_.isEqual(nextProps.value, this.props.value)
-  //   return stateChanged || valueChanged
-  // },
-
 	render: function(){ 
@@ -100,3 +95,3 @@ var keys = _.keys(propTypes)
 
-		return mergePropsInto(
+		return mergeIntoProps(
       _.omit(this.props, keys),
@@ -111,3 +106,3 @@ <div ref="element"
            aria-activedescendent={ optID }
-           tabIndex="-1"
+           tabIndex="0"
            className={cx({
@@ -158,4 +153,3 @@ 'rw-dropdown-list': true,
   setWidth: function() {
-    var el = $(this.getDOMNode())
-      , width = el.outerWidth ? el.outerWidth() : el.width()
+    var width = $.width(this.getDOMNode())
       , changed = width !== this.state.width;
@@ -172,6 +166,9 @@
     self.timer = setTimeout(function(){
-      if( focused !== self.state.focused) {
+
+      if(focused) self.getDOMNode().focus() 
+      else        self.close()
+
+      if( focused !== self.state.focused)
         self.setState({ focused: focused })
-        if(!focused) self.close()
-      }
+
     }, 0)
@@ -178,0 +175,0 @@ },

src/dropdowns/value-item.jsx

@@ -1,3 +0,3 @@
-var React = require('react/addons')
-  , mergePropsInto = require('../util/transferProps')
+var React = require('react')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , _ = require('lodash')
@@ -12,3 +12,3 @@
 
-      return mergePropsInto(
+      return mergeIntoProps(
         _.omit(this.props, 'value'),
@@ -15,0 +15,0 @@ <div>{this._dataText(value)}</div>)

src/mixins/DataFilterMixin.js

@@ -1,2 +0,2 @@
-var React   = require('react/addons')
+var React   = require('react')
   , filters = require('../util/filter')
@@ -3,0 +3,0 @@ , helper  = require('../mixins/DataHelpersMixin')

src/mixins/DataHelpersMixin.js

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
   , _ =  require('lodash')
@@ -3,0 +3,0 @@

src/mixins/DataIndexStateMixin.js

@@ -1,2 +0,2 @@
-var React  = require('react/addons')
+var React  = require('react')
   , filter = require('../util/filter')
@@ -3,0 +3,0 @@ , helper = require('../mixins/DataHelpersMixin')

src/mixins/DateFocusMixin.js

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
   , dates = require('../util/dates')
@@ -3,0 +3,0 @@ , directions = require('../util/constants').directions;

src/mixins/PureRenderMixin.js

@@ -17,7 +17,7 @@ /**
  */
-var React = require('react/addons')
+var React = require('react')
 
 //backport PureRenderEqual
 
-module.exports = React.addons.PureRenderMixin || {
+module.exports = {
 
@@ -24,0 +24,0 @@ shouldComponentUpdate: function(nextProps, nextState) {

src/mixins/RtlChildContextMixin.js

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
 
@@ -3,0 +3,0 @@ module.exports = {

src/mixins/RtlParentContextMixin.js

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
 
@@ -3,0 +3,0 @@ module.exports = {

src/mixins/TextSearchMixin.js

@@ -1,2 +0,2 @@
-var React  = require('react/addons')
+var React  = require('react')
   , filter = require('../util/filter')
@@ -3,0 +3,0 @@ , helper = require('../mixins/DataHelpersMixin')

src/mixins/WidgetPopupMixin.js

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
   , _ =  require('lodash')
@@ -3,0 +3,0 @@

src/pickers/date-input.jsx

@@ -1,6 +0,5 @@
-var React = require('react/addons')
-  , cx = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , compose = require('../util/compose')
-  , dates = require('../util/dates')
-  , $ = require('$')
+  , dates = require('../util/dates');
 
@@ -27,6 +26,2 @@
 
-  componentDidUpdate: function() {
-    this.props.focused && this.focus()
-  },
-
   getInitialState: function(){
@@ -58,5 +53,3 @@ var text = this.formatDate(this.props.value)
   _change: function(e){
-    var $el = $(e.target) ;
-
-    this.setState({ textValue: $el.val() });
+    this.setState({ textValue: e.target.value });
   },
@@ -63,0 +56,0 @@

src/pickers/datepicker.jsx

@@ -1,6 +0,6 @@
-var React = require('react/addons')
-  , cx  = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , _   = require('lodash')
   , dates     = require('../util/dates')
-  , mergePropsInto = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , Popup     = require('../popup/popup.jsx')
@@ -10,2 +10,3 @@ , Calendar  = require('../calendar/calendar.jsx')
   , DateInput = require('./date-input.jsx')
+  , $  =  require('../util/dom');
 
@@ -91,3 +92,4 @@ var propTypes = {
 
-    return (
+    return mergeIntoProps(
+      _.omit(this.props, _.keys(propTypes)),
       <div ref="element"
@@ -160,9 +162,9 @@ tabIndex="-1"
 
-            { mergePropsInto(
+            { mergeIntoProps(
               _.pick(this.props, _.keys(Calendar.type.propTypes)),
               <Calendar ref="calPopup"   
+                id={dateListID}
                 maintainFocus={false}
                 aria-hidden={ !this.state.open }
-                onChange={this._selectDate}
-                id={ dateListID }/>
+                onChange={this._selectDate}/>
             )}
@@ -178,4 +180,3 @@ </Popup>
 
-    var el = $(this.getDOMNode())
-      , width = el.outerWidth ? el.outerWidth() : el.width()
+    var width = $.width(this.getDOMNode())
       , changed = width !== this.state.width;
@@ -214,16 +215,15 @@
   _focus: function(focused, e){
-    var self = this;
+    var self = this
+      , input =  this.refs.valueInput;
 
-    // special case: highest view btn is disabled which causes focus lose
-    if ( !focused && e && $(e.target).is('.rw-header .rw-btn[disabled]'))
-      return 
-    
     clearTimeout(self.timer)
 
     self.timer = setTimeout(function(){
-      if( focused !== self.state.focused) {
+
+      if(focused) input.getDOMNode().focus() 
+      else        self.close()
+
+      if( focused !== self.state.focused)
         self.setState({ focused: focused })
-        //console.log('focus end: ', focused)
-        if(!focused) self.close()
-      }
+      
     }, 0)
@@ -230,0 +230,0 @@ },

src/pickers/number-input.jsx

@@ -1,7 +0,6 @@
-var React = require('react/addons')
-  , cx = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , compose = require('../util/compose')
   , setter = require('../util/stateSetter')
-  , globalize = require('globalize')
-  , $ = require('$')
+  , globalize = require('globalize');
 
@@ -8,0 +7,0 @@

src/pickers/numberpicker.jsx

@@ -1,7 +0,7 @@
-var React  = require('react/addons')
-  , cx     = React.addons.classSet
+var React  = require('react')
+  , cx = require('../util/cx')
   , _      = require('lodash')
-  , mergeIntoProps = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , directions = require('../util/constants').directions
-  , Input  = require('./number-input.jsx');
+  , Input = require('./number-input.jsx');
 
@@ -60,3 +60,6 @@ var btn = require('../common/btn.jsx')
   getInitialState: function(){
-    return { focused: false }
+    return { 
+      focused: false,
+      active: false,
+    }
   },
@@ -71,3 +74,4 @@
 
-    return this.transferPropsTo(
+    return mergeIntoProps(
+      _.omit(this.props, _.keys(propTypes)),
       <div ref="element"
@@ -87,4 +91,5 @@ onKeyDown={this._keyDown}
           <btn 
+            className={cx({ 'rw-state-active': this.state.active === directions.UP})}
             onMouseDown={_.partial(self._mouseDown, directions.UP)} 
-            onMouseUp={this._mouseUp} 
+            onMouseUp={_.partial(this._mouseUp, directions.UP)} 
             onClick={_.partial(this._focus, true)} 
@@ -96,4 +101,5 @@ aria-disabled={val === this.props.max || this.props.disabled}>
           <btn 
+            className={cx({ 'rw-state-active': this.state.active === directions.DOWN})}
             onMouseDown={_.partial(self._mouseDown, directions.DOWN)} 
-            onMouseUp={this._mouseUp} 
+            onMouseUp={_.partial(this._mouseUp, directions.DOWN)} 
             onClick={_.partial(this._focus, true)}
@@ -125,6 +131,5 @@ aria-disabled={val === this.props.min || this.props.disabled}>
     var self = this
-      , el = $(e.target).is('.rw-btn') ? $(e.target) : $(e.target).closest('.rw-btn') 
       , method = direction === directions.UP ? this.increment : this.decrement
     
-    el.addClass('active')
+    this.setState({ active: direction })
 
@@ -135,5 +140,4 @@ method()
 
-  _mouseUp: function(e){
-    var el = $(e.target).is('.rw-btn') ? $(e.target) : $(e.target).closest('.rw-btn') 
-    el.removeClass('active')
+  _mouseUp: function(direction, e ){
+    this.setState({ active: false })
     clearInterval(this.interval)
@@ -140,0 +144,0 @@ },

src/pickers/time.jsx

@@ -1,6 +0,6 @@
-var React = require('react/addons')
-  , cx    = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , dates = require('../util/dates')
   , List = require('../common/list.jsx')
-  , mergePropsInto = require('../util/transferProps')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , directions = require('../util/constants').directions
@@ -58,3 +58,4 @@ , _ = require('lodash')
 
-    return mergePropsInto(_.omit(this.props, 'value'),
+    return mergeIntoProps(
+      _.omit(this.props, 'value'),
       <List ref="list"
@@ -61,0 +62,0 @@ data={times}

src/popup/popup.jsx

@@ -1,8 +0,6 @@
-var React  = require('react/addons')
-  , cx     = React.addons.classSet
-  , events = require('../util/events')
-  , _ = require('lodash')
-  , mergePropsInto = require('../util/transferProps')
-  , transition = require('../util/transition')
-  , $ = require('$');
+var React  = require('react')
+  , cx  = require('../util/cx')
+  , _   = require('lodash')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
+  , $ = require('../util/dom');
 
@@ -25,7 +23,3 @@ function childKey(children){
     onClose:        React.PropTypes.func,
-    onOpen:         React.PropTypes.func,
-    height:         React.PropTypes.oneOfType([
-                      React.PropTypes.number, 
-                      React.PropTypes.string
-                    ])
+    onOpen:         React.PropTypes.func
 	},
@@ -47,7 +41,6 @@
   componentWillUnmount: function(){
-    $(document).off('click', self._onClick)
-    $(window).off('resize', self._resize)
+    $.off(document, 'click', self._onClick)
+    $.off(window, 'resize', self._resize)
   },
 
-
 	componentDidMount: function(){
@@ -68,4 +61,4 @@ var self = this
 
-      $(window).on('resize',  self._resize)
-      $(document).on('click', self._onClick)
+      $.off(window, 'resize',  self._resize)
+      $.off(document, 'click', self._onClick)
 
@@ -96,3 +89,3 @@ this.position()
     var style   = _.extend({}, this.props.style || {}, { overflow: 'hidden', position: 'absolute', zIndex: 1005 })
-      , Content = mergePropsInto(
+      , Content = mergeIntoProps(
           { className: 'rw-popup rw-widget' }
@@ -113,8 +106,6 @@ , this.props.children);
   dimensions: function(){
-    var el = $(this.refs.content.getDOMNode())
-      , anim = this.getDOMNode()
+    var el = this.getDOMNode();
 
-    anim.style.display = 'block'
-    anim.style.height  = (el.outerHeight ? el.outerHeight() : el.height() ) + 'px'
-    //anim.style.width   = (el.width() + )'px'
+    el.style.display = 'block'
+    el.style.height  = $.height(this.refs.content.getDOMNode()) + 'px'
   },
@@ -124,12 +115,7 @@
     var self    = this
-      , $anim   = $(this.getDOMNode())
-      , $anchor = $(this.props.getAnchor())
-      , aOffset, aHeight, aWidth;
+      , aOffset = $.offset(this.props.getAnchor());
 
-      aOffset = $anchor.offset()
-
-      $anim.css({
-        top:    aOffset.height - 1,
-        left:   -1 //aOffset.left,
-       // width:  aOffset.width
+      $.css(this.getDOMNode(), {
+        top:    aOffset.height - 1 + 'px',
+        left:   -1 + 'px'
       });
@@ -141,5 +127,5 @@ },
       , anim = this.getDOMNode()
-      , el = $(this.refs.content.getDOMNode());
+      , el   = this.refs.content.getDOMNode();
 
-    this.ORGINAL_POSITION = el.css('position');
+    this.ORGINAL_POSITION = el.style.position;
     
@@ -149,5 +135,11 @@ this.dimensions()
 
-    el.css('position', 'absolute')
-      .animate({ top: 0 }, self.props.duration, function(){
-        el.css('position', self.ORGINAL_POSITION || 'static');
+    el.style.position = 'absolute'
+
+    $.animate(el
+      , { top: 0 }
+      , self.props.duration
+      , function(){
+
+        $.css(el, { position: self.ORGINAL_POSITION });
+
         anim.style.overflow = 'visible'
@@ -162,7 +154,7 @@ self.ORGINAL_POSITION = null
     var self = this
-      , el = $(this.refs.content.getDOMNode())
+      , el   = this.refs.content.getDOMNode()
       , anim = this.getDOMNode()
-      , ht   = anim.style.height //this._height()
+      , ht   = anim.style.height;
 
-    this.ORGINAL_POSITION = el.css('position');
+    this.ORGINAL_POSITION = el.style.position;
     this.dimensions()
@@ -172,6 +164,9 @@ this.props.onClosing()
     anim.style.overflow = 'hidden'
+    el.style.position = 'absolute'
 
-    el.css('position', 'absolute')
-      .animate({ top: '-100%' }, dur === undefined ? this.props.duration : dur, function() {
-        el.css('position', self.ORGINAL_POSITION || 'static');
+    $.animate(el
+      , { top: '-100%' }
+      , dur === undefined ? this.props.duration : dur
+      , function() {
+        $.css(el, { position: self.ORGINAL_POSITION });
         
@@ -183,12 +178,4 @@ anim.style.display = 'none'
 
-  },
+  }
 
-  _height: function(){
-    var ht = this.props.height 
-      , nodeHt = this.refs.content.getDOMNode().scrollHeight
-
-    return ht === 'auto' 
-      ? nodeHt
-      : (ht > nodeHt ? nodeHt : ht)
-  }
 })
@@ -195,0 +182,0 @@

src/select/search-input.jsx

@@ -1,2 +0,2 @@
-var React = require('react/addons')
+var React = require('react')
 
@@ -3,0 +3,0 @@ module.exports = React.createClass({

src/select/select.jsx

 'use strict';
-var React = require('react/addons')
-  , cx    = React.addons.classSet
+var React = require('react')
+  , cx = require('../util/cx')
   , _     =  require('lodash')
-  , $     =  require('$')
+  , $     =  require('../util/dom')
   , directions = require('../util/constants').directions
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , SelectInput = require('./search-input.jsx')
@@ -84,3 +85,4 @@ , TagList = require('./tag-list.jsx')
 
-    return (
+    return mergeIntoProps(
+      _.omit(this.props, _.keys(propTypes)),
       <div ref="element"
@@ -146,4 +148,3 @@ aria-haspopup={true}
   setWidth: function() {
-    var el = $(this.getDOMNode())
-      , width = el.outerWidth ? el.outerWidth() : el.width()
+    var width = $.width(this.getDOMNode())
       , changed = width !== this.state.width;
@@ -150,0 +151,0 @@

src/select/tag-list.jsx

@@ -1,8 +0,10 @@
-var React = require('react/addons')
+var React = require('react')
   , _ = require('lodash')
-  , cx    = React.addons.classSet
+  , cx  = require('../util/cx')
+  , mergeIntoProps = require('../util/transferProps').mergeIntoProps
   , btn = require('../common/btn.jsx')
 
 module.exports = React.createClass({
-
+  displayName: 'SelectTagList',
+  
   mixins: [ require('../mixins/DataHelpersMixin')],
@@ -36,7 +38,8 @@
 
-      return this.transferPropsTo(
+      return mergeIntoProps(
+        _.omit(this.props, 'value'),
         <ul className='rw-tag-list'>
           {_.map(value, function(item, i){
             return (
-              <li unselectable='on' className={cx({'rw-state-focus': focusIdx === i })}>
+              <li key={i} unselectable='on' className={cx({'rw-state-focus': focusIdx === i })}>
                 <Item
@@ -43,0 +46,0 @@ item={item}

src/util/constants.js

@@ -1,2 +0,2 @@
-var _ =require('lodash')
+var _ = require('lodash')
 
@@ -3,0 +3,0 @@ module.exports = {

src/util/transferProps.js

 var _ = require('lodash')
+  , React = require('react')
   , RESERVED = {
-    className: resolve(joinClasses),
-    children: _.noop,
-    key:   _.noop,
-    ref:   _.noop,
-    style: resolve(merge)
-  };
+      className: resolve(joinClasses),
+      children:   _.noop,
+      key:        _.noop,
+      ref:        _.noop,
+      style:      resolve(merge)
+    };
 
+//mutates first arg
+function mergeProps(source, target) {
 
+  return _.transform(target, function(source, value, key){
+      if (_.has(RESERVED, key) )      
+        RESERVED[key](source, value, key)
 
-module.exports = mergeToProps;
+      else if ( !_.has(source, key) ) 
+        source[key] = value;
 
-function mergeToProps(obj, desc) {
-  var props = desc.props ? desc.props : desc;
+  }, source)
+}
 
-  _.transform(obj, function(target, value, key){
-      if (_.has(RESERVED, key) )      RESERVED[key](target, value, key)
-      else if ( !_.has(target, key) ) target[key] = value;
+module.exports = {
 
-  }, props)
+  mergeIntoProps: function (obj, desc) {
+    var props = desc.props ? desc.props : desc;
+    mergeProps(props, obj)
+    return desc
+  },
 
-  return desc
+  cloneWithProps: function (child, props) {
+    var newProps = mergeProps(_.clone(props), child.props);
+
+    if (!_.has(newProps, 'children') && _.has(child.props, 'children'))
+      newProps.children = child.props.children;
+    
+    if (React.version.indexOf('0.10.') === 0) //thanks react-bootstrap!
+      return child.constructor.ConvenienceConstructor(newProps);
+    
+    return child.constructor(newProps);
+  }
 }
@@ -33,3 +52,3 @@
 
-function joinClasses(first){
+function joinClasses(){
   return _.reduce(arguments, function(str, next){
@@ -36,0 +55,0 @@ if ( !str ) return next || ''

vendor/zepto.js

@@ -1652,3 +1652,3 @@ // Zepto 1.1.4 (generated with Zepto Builder) - zepto event ajax form ie fx - zeptojs.com/license
       } else
-        $(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout
+        $(this).unbind(node, wrappedCallback) // triggered by setTimeout
 
@@ -1655,0 +1655,0 @@ fired = true

webpack.configs.js

@@ -9,5 +9,4 @@ var _ = require('lodash')
       }
-    });
+    })
 
-
 module.exports = {
@@ -64,7 +63,7 @@
         { test: /\.jsx$/,  loader: 'jsx-loader?harmony=true&insertPragma=React.DOM' },
-        { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
-        { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
-        { test: /\.ttf$/,  loader: "file-loader?prefix=font/" },
-        { test: /\.eot$/,  loader: "file-loader?prefix=font/" },
-        { test: /\.svg$/,  loader: "file-loader?prefix=font/" },
+        // { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
+        // { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
+        // { test: /\.ttf$/,  loader: "file-loader?prefix=font/" },
+        // { test: /\.eot$/,  loader: "file-loader?prefix=font/" },
+        // { test: /\.svg$/,  loader: "file-loader?prefix=font/" },
       ],
@@ -71,0 +70,0 @@ },

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10566735

increased by42.13%

Number of package files

109

increased by3.81%

Number of low license alerts

0

decreased by-100%

Lines of code

41720

increased by2.36%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

27

increased by42.11%

Number of low supply chain risk alerts

1

decreased by-50%

No dependency changes