primereact - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

components/accordion/Accordion.d.ts

@@ -5,2 +5,7 @@ import React = require("react");
     header?: string;
+    disabled?: boolean;
+    headerStyle?: any;
+    headerClassName?: string;
+    contentStyle?: any;
+    contentClassName?: string;
 }
@@ -7,0 +12,0 @@

components/accordion/Accordion.js

@@ -45,6 +45,16 @@ 'use strict';
 AccordionTab.defaultProps = {
-    header: null
+    header: null,
+    disabled: false,
+    headerStyle: null,
+    headerClassName: null,
+    contentStyle: null,
+    contentClassName: null
 };
 AccordionTab.propTypes = {
-    header: _propTypes2.default.string
+    header: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    headerStyle: _propTypes2.default.object,
+    headerClassName: _propTypes2.default.string,
+    contentStyle: _propTypes2.default.object,
+    contentClassName: _propTypes2.default.string
 };
@@ -60,3 +70,5 @@
 
-        _this2.state = { activeIndex: props.activeIndex };
+        _this2.state = {
+            activeIndex: props.activeIndex
+        };
         return _this2;
@@ -66,23 +78,32 @@ }
     _createClass(Accordion, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            this.setState({
+                activeIndex: nextProps.activeIndex
+            });
+        }
+    }, {
         key: 'onTabClick',
-        value: function onTabClick(e, i) {
-            var selected = this.isSelected(i);
+        value: function onTabClick(event, tab, i) {
+            if (!tab.props.disabled) {
+                var selected = this.isSelected(i);
 
-            if (this.props.multiple) {
-                var indexes = this.state.activeIndex || [];
-                if (selected) indexes = indexes.filter(function (index) {
-                    return index !== i;
-                });else indexes = [].concat(_toConsumableArray(indexes), [i]);
+                if (this.props.multiple) {
+                    var indexes = this.state.activeIndex || [];
+                    if (selected) indexes = indexes.filter(function (index) {
+                        return index !== i;
+                    });else indexes = [].concat(_toConsumableArray(indexes), [i]);
 
-                this.setState({ activeIndex: indexes });
-            } else {
-                if (selected) this.setState({ activeIndex: null });else this.setState({ activeIndex: i });
-            }
+                    this.setState({ activeIndex: indexes });
+                } else {
+                    if (selected) this.setState({ activeIndex: null });else this.setState({ activeIndex: i });
+                }
 
-            var callback = selected ? this.props.onTabOpen : this.props.onTabClose;
-            if (callback) {
-                callback({ originalEvent: e, index: i });
+                var callback = selected ? this.props.onTabOpen : this.props.onTabClose;
+                if (callback) {
+                    callback({ originalEvent: event, index: i });
+                }
             }
 
-            e.preventDefault();
+            event.preventDefault();
         }
@@ -92,60 +113,66 @@ }, {
         value: function isSelected(i) {
-            return this.props.multiple ? this.state.activeIndex && this.state.activeIndex.includes(i) : this.state.activeIndex === i;
+            return this.props.multiple ? this.state.activeIndex && this.state.activeIndex.indexOf(i) !== -1 : this.state.activeIndex === i;
         }
     }, {
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-            this.setState({ activeIndex: nextProps.activeIndex });
-        }
-    }, {
-        key: 'render',
-        value: function render() {
+        key: 'renderTabHeader',
+        value: function renderTabHeader(tab, selected, index) {
             var _this3 = this;
 
-            var tabs = null;
+            var tabHeaderClass = (0, _classnames2.default)(tab.props.headerClassName, 'ui-accordion-header ui-state-default ui-corner-all', { 'ui-state-active': selected, 'ui-state-disabled': tab.props.disabled });
 
-            if (this.props.children) tabs = this.props.children.map(function (tab, i) {
-                var selected = _this3.isSelected(i);
-                var tabHeaderClass = (0, _classnames2.default)('ui-accordion-header ui-state-default ui-corner-all', {
-                    'ui-state-active': selected
-                });
+            return _react2.default.createElement(
+                'div',
+                { className: tabHeaderClass, style: tab.props.headerStyle, onClick: function onClick(event) {
+                        return _this3.onTabClick(event, tab, index);
+                    } },
+                _react2.default.createElement('span', { className: (0, _classnames2.default)('fa fa-fw', { 'fa-caret-right': !selected, 'fa-caret-down': selected }) }),
+                _react2.default.createElement(
+                    'a',
+                    { href: '#' },
+                    tab.props.header
+                )
+            );
+        }
+    }, {
+        key: 'renderTabContent',
+        value: function renderTabContent(tab, selected) {
+            var tabContentWrapperClass = (0, _classnames2.default)(tab.props.contentClassName, 'ui-accordion-content-wrapper', { 'ui-helper-hidden': !selected });
 
-                var tabHeader = _react2.default.createElement(
+            return _react2.default.createElement(
+                'div',
+                { className: tabContentWrapperClass, style: tab.props.contentStyle },
+                _react2.default.createElement(
                     'div',
-                    { className: tabHeaderClass, key: tab.props.header, onClick: function onClick(e) {
-                            return _this3.onTabClick(e, i);
-                        } },
-                    _react2.default.createElement('span', { className: (0, _classnames2.default)('fa fa-fw', { 'fa-caret-right': !selected, 'fa-caret-down': selected }) }),
-                    _react2.default.createElement(
-                        'a',
-                        { href: '#' },
-                        tab.props.header
-                    )
-                );
+                    { className: 'ui-accordion-content ui-widget-content' },
+                    tab.props.children
+                )
+            );
+        }
+    }, {
+        key: 'renderTab',
+        value: function renderTab(tab, index) {
+            var selected = this.isSelected(index);
+            var tabHeader = this.renderTabHeader(tab, selected, index);
+            var tabContent = this.renderTabContent(tab, selected);
 
-                var tabContentWrapperClass = (0, _classnames2.default)('ui-accordion-content-wrapper', {
-                    'ui-helper-hidden': !selected
-                });
+            return _react2.default.createElement(
+                'div',
+                { key: tab.props.header, className: 'ui-accordion-tab' },
+                tabHeader,
+                tabContent
+            );
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this4 = this;
 
-                var tabContent = _react2.default.createElement(
-                    'div',
-                    { className: tabContentWrapperClass },
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'ui-accordion-content ui-widget-content' },
-                        tab.props.children
-                    )
-                );
-
-                return _react2.default.createElement(
-                    'div',
-                    { key: tab.props.header, className: 'ui-accordion-tab' },
-                    tabHeader,
-                    tabContent
-                );
+            var tabs = _react2.default.Children.map(this.props.children, function (tab, index) {
+                return _this4.renderTab(tab, index);
             });
+            var className = (0, _classnames2.default)('ui-accordion ui-widget ui-helper-reset', this.props.className);
 
             return _react2.default.createElement(
                 'div',
-                { id: this.props.id, className: (0, _classnames2.default)('ui-accordion ui-widget ui-helper-reset', this.props.className), style: this.props.style },
+                { id: this.props.id, className: className, style: this.props.style },
                 tabs
@@ -152,0 +179,0 @@ );

components/autocomplete/AutoComplete.d.ts

 import React = require("react");
 
-interface AutoCompleteProps extends React.HTMLProps<HTMLAutoCompleteElement> {
+interface AutoCompleteProps {
     id?: string;
@@ -5,0 +5,0 @@ value?: any;

components/chart/Chart.js

@@ -99,2 +99,10 @@ 'use strict';
     }, {
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps) {
+            if (nextProps.data === this.props.data) {
+                return false;
+            }
+            return true;
+        }
+    }, {
         key: 'render',
@@ -101,0 +109,0 @@ value: function render() {

components/checkbox/Checkbox.d.ts

@@ -9,2 +9,3 @@ import React = require("react");
     checked?: boolean;
+    name?:string;
     onMouseDown?(): void;
@@ -11,0 +12,0 @@ onContextMenu?(): void;

components/checkbox/Checkbox.js

@@ -69,3 +69,3 @@ 'use strict';
                         { className: 'ui-helper-hidden-accessible' },
-                        _react2.default.createElement('input', { type: 'checkbox' })
+                        _react2.default.createElement('input', { type: 'checkbox', name: this.props.name })
                     ),
@@ -94,2 +94,3 @@ _react2.default.createElement(
     value: null,
+    name: null,
     onChange: null,
@@ -104,2 +105,3 @@ checked: false,
     value: _propTypes2.default.any,
+    name: _propTypes2.default.string,
     onChange: _propTypes2.default.func,
@@ -106,0 +108,0 @@ checked: _propTypes2.default.bool,

components/datatable/DataTable.d.ts

@@ -61,8 +61,8 @@ import React = require("react");
     onLazyLoad?(first: number, rows: number, sortField: string, sortOrder: number, multiSortMeta: Array<any>): void;
-    onRowClick?(): void;
-    onRowSelect?(): void;
-    onRowUnselect?(): void;
-    onRowExpand?(): void;
-    onRowCollapse?: void;
-    onContextMenuSelect?(): void;
+    onRowClick?(originalEvent: Event, data: any, index: number): void;
+    onRowSelect?(originalEvent: Event, data: any, index: number): void;
+    onRowUnselect?(originalEvent: Event, data: any, index: number): void;
+    onRowExpand?(originalEvent: Event, data: any): void;
+    onRowCollapse?(originalEvent: Event, data: any): void;
+    onContextMenuSelect?(originalEvent: Event, data: any): void;
     onColReorder?(dragIndex: number, dropIndex: number, columns: Array<any>): void;
@@ -69,0 +69,0 @@ }

components/datatable/DataTable.js

@@ -90,3 +90,5 @@ 'use strict';
                     sortField: this.state.sortField,
-                    sortOrder: this.state.sortOrder
+                    sortOrder: this.state.sortOrder,
+                    multiSortMeta: this.state.multiSortMeta,
+                    filters: this.state.filters
                 });
@@ -101,7 +103,7 @@ }
         key: 'createPaginator',
-        value: function createPaginator(position, totalRecords) {
+        value: function createPaginator(position, totalRecords, data) {
             var className = 'ui-paginator-' + position;
 
-            return _react2.default.createElement(_Paginator.Paginator, { first: this.state.first, rows: this.state.rows, className: className,
-                totalRecords: totalRecords, onPageChange: this.onPageChange, template: this.props.paginatorTemplate });
+            return _react2.default.createElement(_Paginator.Paginator, { first: this.state.first, rows: this.state.rows, className: className, onPageChange: this.onPageChange, template: this.props.paginatorTemplate,
+                totalRecords: totalRecords, rowsPerPageOptions: this.props.rowsPerPageOptions });
         }
@@ -134,7 +136,8 @@ }, {
                 this.props.onLazyLoad({
-                    first: this.state.first,
+                    first: 0,
                     rows: this.state.rows,
                     sortField: sortField,
                     sortOrder: sortOrder,
-                    multiSortMeta: multiSortMeta
+                    multiSortMeta: multiSortMeta,
+                    filters: this.state.filters
                 });
@@ -226,2 +229,13 @@ }
 
+            if (this.props.lazy) {
+                this.props.onLazyLoad({
+                    first: 0,
+                    rows: this.state.rows,
+                    sortField: this.state.sortField,
+                    sortOrder: this.state.sortOrder,
+                    multiSortMeta: this.state.multiSortMeta,
+                    filters: filterMetadata
+                });
+            }
+
             if (this.props.onFilter) {
@@ -255,3 +269,4 @@ this.props.onFilter({
                     sortOrder: this.props.sortOrder,
-                    multiSortMeta: this.props.multiSortField
+                    multiSortMeta: this.props.multiSortField,
+                    filters: this.props.filters
                 });
@@ -539,3 +554,3 @@ }
                     if (this.props.onColReorder) {
-                        this.onColReorder.emit({
+                        this.props.onColReorder({
                             dragIndex: dragIndex,
@@ -575,3 +590,5 @@ dropIndex: dropIndex,
                         sortField: _this5.state.sortField,
-                        sortOrder: _this5.state.sortOrder
+                        sortOrder: _this5.state.sortOrder,
+                        multiSortMeta: _this5.state.multiSortMeta,
+                        filters: _this5.state.filters
                     });
@@ -831,6 +848,6 @@ }
         key: 'createScrollableView',
-        value: function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
+        value: function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup, totalRecords) {
             return _react2.default.createElement(_ScrollableView.ScrollableView, { header: this.createTableHeader(columns, headerColumnGroup), body: this.createTableBody(value, columns), frozenBody: this.props.frozenValue ? this.createTableBody(this.props.frozenValue, columns) : null, footer: this.createTableFooter(columns, footerColumnGroup),
                 scrollHeight: this.props.scrollHeight, frozen: frozen, frozenWidth: this.props.frozenWidth, unfrozenWidth: this.props.unfrozenWidth,
-                virtualScroll: this.props.virtualScroll, rows: this.props.rows, totalRecords: this.getTotalRecords(),
+                virtualScroll: this.props.virtualScroll, rows: this.props.rows, totalRecords: totalRecords,
                 onVirtualScroll: this.onVirtualScroll });
@@ -891,4 +908,4 @@ }
         key: 'getTotalRecords',
-        value: function getTotalRecords() {
-            return this.props.lazy ? this.props.totalRecords : this.props.value ? this.props.value.length : 0;
+        value: function getTotalRecords(data) {
+            return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
         }
@@ -918,3 +935,3 @@ }, {
             var columns = this.getColumns();
-            var totalRecords = this.getTotalRecords();
+            var totalRecords = this.getTotalRecords(value);
             var className = (0, _classnames2.default)('ui-datatable ui-widget', { 'ui-datatable-reflow': this.props.responsive, 'ui-datatable-resizable': this.props.resizableColumns,
@@ -956,6 +973,6 @@ 'ui-datatable-scrollable': this.props.scrollable, 'ui-datatable-virtual-scrollable': this.props.virtualScroll }, this.props.className);
                 if (frozenColumns) {
-                    frozenView = this.createScrollableView(value, frozenColumns, true, this.props.frozenHeaderColumnGroup, this.props.frozenFooterColumnGroup);
+                    frozenView = this.createScrollableView(value, frozenColumns, true, this.props.frozenHeaderColumnGroup, this.props.frozenFooterColumnGroup, totalRecords);
                 }
 
-                scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup);
+                scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup, totalRecords);
 
@@ -1025,2 +1042,3 @@ tableContent = _react2.default.createElement(
     totalRecords: null,
+    rowsPerPageOptions: null,
     lazy: false,
@@ -1096,2 +1114,3 @@ sortField: null,
     totalRecords: _propTypes2.default.number,
+    rowsPerPageOptions: _propTypes2.default.array,
     lazy: _propTypes2.default.bool,
@@ -1098,0 +1117,0 @@ sortField: _propTypes2.default.string,

components/datatable/HeaderCell.js

@@ -52,6 +52,4 @@ 'use strict';
             if (this.props.sortable) {
-                var targetNode = e.target.nodeName;
-                if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || _DomHandler2.default.hasClass(e.target, 'ui-clickable')) {
-                    return;
-                } else {
+                var targetNode = e.target;
+                if (_DomHandler2.default.hasClass(targetNode, 'ui-sortable-column') || _DomHandler2.default.hasClass(targetNode, 'ui-column-title') || _DomHandler2.default.hasClass(targetNode, 'ui-sortable-column-icon')) {
                     this.props.onSort({
@@ -58,0 +56,0 @@ originalEvent: e,

components/datatable/ScrollableView.js

@@ -69,2 +69,7 @@ 'use strict';
             }
+
+            if (this.virtualScrollCallback) {
+                this.virtualScrollCallback();
+                this.virtualScrollCallback = null;
+            }
         }
@@ -114,2 +119,4 @@ }, {
         value: function onBodyScroll() {
+            var _this2 = this;
+
             var frozenView = this.container.previousElementSibling;
@@ -143,4 +150,7 @@ var frozenScrollBody = void 0;
                         });
+
+                        this.virtualScrollCallback = function () {
+                            _this2.scrollTable.style.top = (page - 1) * pageHeight + 'px';
+                        };
                     }
-                    this.scrollTable.style.top = (page - 1) * pageHeight + 'px';
                 }
@@ -175,3 +185,3 @@ }
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
@@ -185,3 +195,3 @@ var className = (0, _classnames2.default)('ui-datatable-scrollable-view', { 'ui-datatable-frozen-view': this.props.frozen });
                 { className: className, style: { width: width, left: left }, ref: function ref(el) {
-                        _this2.container = el;
+                        _this3.container = el;
                     } },
@@ -191,3 +201,3 @@ _react2.default.createElement(
                     { className: 'ui-widget-header ui-datatable-scrollable-header', ref: function ref(el) {
-                            _this2.scrollHeader = el;
+                            _this3.scrollHeader = el;
                         }, onScroll: this.onHeaderScroll },
@@ -197,3 +207,3 @@ _react2.default.createElement(
                         { className: 'ui-datatable-scrollable-header-box', ref: function ref(el) {
-                                _this2.scrollHeaderBox = el;
+                                _this3.scrollHeaderBox = el;
                             } },
@@ -211,3 +221,3 @@ _react2.default.createElement(
                     { className: 'ui-datatable-scrollable-body', ref: function ref(el) {
-                            _this2.scrollBody = el;
+                            _this3.scrollBody = el;
                         }, onScroll: this.onBodyScroll },
@@ -217,3 +227,3 @@ _react2.default.createElement(
                         { className: 'ui-datatable-scrollable-table-wrapper', ref: function ref(el) {
-                                _this2.scrollTableWrapper = el;
+                                _this3.scrollTableWrapper = el;
                             } },
@@ -223,3 +233,3 @@ _react2.default.createElement(
                             { ref: function ref(el) {
-                                    _this2.scrollTable = el;
+                                    _this3.scrollTable = el;
                                 }, style: { top: '0' } },
@@ -233,3 +243,3 @@ this.props.body
                     { className: 'ui-widget-header ui-datatable-scrollable-footer', ref: function ref(el) {
-                            _this2.scrollFooter = el;
+                            _this3.scrollFooter = el;
                         } },
@@ -239,3 +249,3 @@ _react2.default.createElement(
                         { className: 'ui-datatable-scrollable-footer-box', ref: function ref(el) {
-                                _this2.scrollFooterBox = el;
+                                _this3.scrollFooterBox = el;
                             } },
@@ -242,0 +252,0 @@ _react2.default.createElement(

components/datatable/TableBody.js

@@ -271,3 +271,3 @@ 'use strict';
                 if (this.props.onRowCollapse) {
-                    this.props.onRowCollapse(event.data);
+                    this.props.onRowCollapse({ originalEvent: event, data: event.data });
                 }
@@ -278,3 +278,3 @@ } else {
                 if (this.props.onRowExpand) {
-                    this.props.onRowExpand(event.data);
+                    this.props.onRowExpand({ originalEvent: event, data: event.data });
                 }
@@ -281,0 +281,0 @@ }

components/dropdown/Dropdown.js

@@ -79,3 +79,3 @@ 'use strict';
 
-            if (!this.overlayClick) {
+            if (!this.overlayClick && !this.editableInputClick) {
                 this.focusInput.focus();
@@ -95,2 +95,6 @@
             }
+
+            if (this.editableInputClick) {
+                this.expeditableInputClick = false;
+            }
         }
@@ -185,3 +189,3 @@ }, {
         value: function onEditableInputClick(event) {
-            this.itemClick = true;
+            this.editableInputClick = true;
             this.bindDocumentClickListener();
@@ -206,3 +210,2 @@ }
         value: function onOptionClick(event) {
-            this.itemClick = true;
             this.selectItem(event);
@@ -234,3 +237,3 @@ this.focusInput.focus();
                     originalEvent: event.originalEvent,
-                    value: event.option.value
+                    value: this.props.optionLabel ? event.option : event.option.value
                 });
@@ -245,3 +248,3 @@ }
                 for (var i = 0; i < this.props.options.length; i++) {
-                    var optionValue = this.props.options[i].value;
+                    var optionValue = this.props.optionLabel ? this.props.options[i] : this.props.options[i].value;
                     if (value === null && optionValue == null || _ObjectUtils2.default.equals(value, optionValue, this.props.dataKey)) {
@@ -275,2 +278,4 @@ index = i;
             this.panel.style.display = 'none';
+            this.unbindDocumentClickListener();
+            this.clearClickState();
         }
@@ -289,10 +294,7 @@ }, {
                 this.documentClickListener = function () {
-                    if (!_this3.selfClick && !_this3.itemClick && !_this3.overlayClick) {
+                    if (!_this3.selfClick && !_this3.overlayClick) {
                         _this3.hide();
-                        _this3.unbindDocumentClickListener();
                     }
 
-                    _this3.selfClick = false;
-                    _this3.itemClick = false;
-                    _this3.overlayClick = false;
+                    _this3.clearClickState();
                 };
@@ -312,6 +314,13 @@
     }, {
+        key: 'clearClickState',
+        value: function clearClickState() {
+            this.selfClick = false;
+            this.editableInputClick = false;
+            this.overlayClick = false;
+        }
+    }, {
         key: 'updateEditableLabel',
         value: function updateEditableLabel(option) {
             if (this.editableInput) {
-                this.editableInput.value = option ? option.label : this.props.value || '';
+                this.editableInput.value = option ? this.getOptionLabel(option) : this.props.value || '';
             }
@@ -323,3 +332,5 @@ }
             var filterValue = this.state.filter.trim().toLowerCase();
-            return option.label.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
+            var optionLabel = this.getOptionLabel(option);
+
+            return optionLabel.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
         }
@@ -340,4 +351,4 @@ }, {
                         'option',
-                        { key: option.label, value: option.value },
-                        option.label
+                        { key: _this4.getOptionLabel(option), value: option.value },
+                        _this4.getOptionLabel(option)
                     );
@@ -425,3 +436,4 @@ });
             items = items && items.map(function (option, index) {
-                return _react2.default.createElement(_DropdownItem.DropdownItem, { key: option.label, option: option, template: _this7.props.itemTemplate, selected: selectedOption === option,
+                var optionLabel = _this7.getOptionLabel(option);
+                return _react2.default.createElement(_DropdownItem.DropdownItem, { key: optionLabel, label: optionLabel, option: option, template: _this7.props.itemTemplate, selected: selectedOption === option,
                     onClick: _this7.onOptionClick });
@@ -467,2 +479,7 @@ });
     }, {
+        key: 'getOptionLabel',
+        value: function getOptionLabel(option) {
+            return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
+        }
+    }, {
         key: 'componentDidMount',
@@ -503,3 +520,3 @@ value: function componentDidMount() {
             var selectedOption = this.findOption(this.props.value);
-            var label = selectedOption ? selectedOption.label : null;
+            var label = selectedOption ? this.getOptionLabel(selectedOption) : null;
 
@@ -534,2 +551,3 @@ var hiddenSelect = this.renderHiddenSelect();
     options: null,
+    optionLabel: null,
     itemTemplate: null,
@@ -561,2 +579,3 @@ style: null,
     options: _propTypes2.default.array,
+    optionLabel: _propTypes2.default.string,
     itemTemplate: _propTypes2.default.func,
@@ -563,0 +582,0 @@ style: _propTypes2.default.object,

components/dropdown/DropdownItem.js

@@ -57,5 +57,5 @@ 'use strict';
                 'ui-state-highlight': this.props.selected,
-                'ui-dropdown-item-empty': !this.props.option.label || this.props.option.label.length === 0
+                'ui-dropdown-item-empty': !this.props.label || this.props.label.length === 0
             });
-            var content = this.props.template ? this.props.template(this.props.option) : this.props.option.label;
+            var content = this.props.template ? this.props.template(this.props.option) : this.props.label;
 
@@ -75,2 +75,3 @@ return _react2.default.createElement(
     option: null,
+    label: null,
     template: null,
@@ -82,2 +83,3 @@ selected: false,
     option: _propTypes2.default.object,
+    label: _propTypes2.default.string,
     template: _propTypes2.default.func,
@@ -84,0 +86,0 @@ selected: _propTypes2.default.bool,

components/growl/Growl.d.ts

 import React = require("react");
 
+export interface GrowlMessage {
+    severity: 'success' | 'info' | 'warn' | 'error',
+    summary: string;
+    detail: string;
+}
+
 interface GrowlProps {
     id?: string;
+    value?: GrowlMessage[];
     closable?: boolean;
@@ -9,6 +16,6 @@ className?: string;
     baseZIndex?: number;
-    onClick?(originalEvent: Event, message:any): void;
-    onClose?(originalEvent: Event, message:any): void;
+    onClick?(originalEvent: Event, message: GrowlMessage): void;
+    onClose?(originalEvent: Event, message: GrowlMessage): void;
 }
 
 export class Growl extends React.Component<GrowlProps,any> {}

components/growl/Growl.js

@@ -85,5 +85,4 @@ 'use strict';
                 _DomHandler2.default.fadeOut(this.container, 250);
-
                 setTimeout(function () {
-                    _this3.value.forEach(function (msg, index) {
+                    _this3.state.messages.forEach(function (msg, index) {
                         _this3.invokeOnClose(null, msg);
@@ -229,2 +228,3 @@ });
 Growl.defaultProps = {
+    value: null,
     id: null,
@@ -241,2 +241,3 @@ closable: true,
 Growl.propTypes = {
+    value: _propTypes2.default.array,
     id: _propTypes2.default.string,
@@ -243,0 +244,0 @@ closable: _propTypes2.default.bool,

components/inputmask/InputMask.d.ts

@@ -5,2 +5,3 @@ import React = require("react");
     id?: string;
+    value?: string;
     type?: string;
@@ -7,0 +8,0 @@ mask?: string;

components/inputmask/InputMask.js

@@ -542,2 +542,3 @@ 'use strict';
     id: null,
+    value: null,
     type: 'text',
@@ -561,2 +562,3 @@ mask: null,
     id: _propTypes2.default.string,
+    value: _propTypes2.default.string,
     type: _propTypes2.default.string,
@@ -563,0 +565,0 @@ mask: _propTypes2.default.string,

components/inputswitch/InputSwitch.d.ts

@@ -10,2 +10,3 @@ import React = require("react");
     checked?: boolean;
+    disabled?: boolean;
     onChange?(originalEvent: Event, value: boolean): void;
@@ -12,0 +13,0 @@ }

components/inputswitch/InputSwitch.js

@@ -174,2 +174,3 @@ 'use strict';
     checked: false,
+    disabled: false,
     onChange: null
@@ -184,3 +185,4 @@ };
     checked: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
     onChange: _propTypes2.default.func
 };

components/listbox/ListBox.js

@@ -94,7 +94,7 @@ 'use strict';
                 } else {
-                    value = option.value;
+                    value = this.getOptionValue(option);
                     valueChanged = true;
                 }
             } else {
-                value = selected ? null : option.value;
+                value = selected ? null : this.getOptionValue(option);
                 valueChanged = true;
@@ -119,3 +119,3 @@ }
                 if (selected) {
-                    if (metaKey) value = this.removeOption(option);else value = [option.value];
+                    if (metaKey) value = this.removeOption(option);else value = [this.getOptionValue(option)];
 
@@ -125,7 +125,7 @@ valueChanged = true;
                     value = metaKey ? this.props.value || [] : [];
-                    value = [].concat(_toConsumableArray(value), [option.value]);
+                    value = [].concat(_toConsumableArray(value), [this.getOptionValue(option)]);
                     valueChanged = true;
                 }
             } else {
-                if (selected) value = this.removeOption(option);else value = [].concat(_toConsumableArray(this.props.value || []), [option.value]);
+                if (selected) value = this.removeOption(option);else value = [].concat(_toConsumableArray(this.props.value || []), [this.getOptionValue(option)]);
 
@@ -163,3 +163,3 @@ valueChanged = true;
             return this.props.value.filter(function (val) {
-                return !_ObjectUtils2.default.equals(val, option.value, _this2.props.key);
+                return !_ObjectUtils2.default.equals(val, _this2.getOptionValue(option), _this2.props.key);
             });
@@ -171,2 +171,3 @@ }
             var selected = false;
+            var optionValue = this.getOptionValue(option);
 
@@ -183,3 +184,3 @@ if (this.props.multiple) {
 
-                            if (_ObjectUtils2.default.equals(val, option.value, this.props.key)) {
+                            if (_ObjectUtils2.default.equals(val, optionValue, this.props.key)) {
                                 selected = true;
@@ -205,3 +206,3 @@ break;
             } else {
-                selected = _ObjectUtils2.default.equals(this.props.value, option.value, this.props.key);
+                selected = _ObjectUtils2.default.equals(this.props.value, optionValue, this.props.key);
             }
@@ -215,3 +216,5 @@
             var filterValue = this.state.filter.trim().toLowerCase();
-            return option.label.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
+            var optionLabel = this.getOptionLabel(option);
+
+            return optionLabel.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
         }
@@ -224,2 +227,12 @@ }, {
     }, {
+        key: 'getOptionValue',
+        value: function getOptionValue(option) {
+            return this.props.optionLabel ? option : option.value;
+        }
+    }, {
+        key: 'getOptionLabel',
+        value: function getOptionLabel(option) {
+            return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
+        }
+    }, {
         key: 'render',
@@ -243,3 +256,5 @@ value: function render() {
                 items = items.map(function (option, index) {
-                    return _react2.default.createElement(_ListBoxItem.ListBoxItem, { key: option.label, option: option, template: _this3.props.itemTemplate, selected: _this3.isSelected(option),
+                    var optionLabel = _this3.getOptionLabel(option);
+
+                    return _react2.default.createElement(_ListBoxItem.ListBoxItem, { key: optionLabel, label: optionLabel, option: option, template: _this3.props.itemTemplate, selected: _this3.isSelected(option),
                         onClick: _this3.onOptionClick, onTouchEnd: function onTouchEnd(e) {
@@ -279,2 +294,3 @@ return _this3.onOptionTouchEnd(e, option, index);
     options: null,
+    optionLabel: null,
     itemTemplate: null,
@@ -295,2 +311,3 @@ style: null,
     options: _propTypes2.default.array,
+    optionLabel: _propTypes2.default.string,
     itemTemplate: _propTypes2.default.func,
@@ -297,0 +314,0 @@ style: _propTypes2.default.object,

components/listbox/ListBoxItem.js

@@ -69,3 +69,3 @@ 'use strict';
             var className = (0, _classnames2.default)('ui-listbox-item ui-corner-all', { 'ui-state-highlight': this.props.selected });
-            var content = this.props.template ? this.props.template(this.props.option) : this.props.option.label;
+            var content = this.props.template ? this.props.template(this.props.option) : this.props.label;
 
@@ -85,2 +85,3 @@ return _react2.default.createElement(
     option: null,
+    label: null,
     selected: false,
@@ -93,2 +94,3 @@ onClick: null,
     option: _propTypes2.default.any,
+    label: _propTypes2.default.string,
     selected: _propTypes2.default.bool,
@@ -95,0 +97,0 @@ onClick: _propTypes2.default.func,

components/multiselect/MultiSelect.js

@@ -69,3 +69,3 @@ 'use strict';
         value: function onOptionClick(event) {
-            var optionValue = event.option.value;
+            var optionValue = this.getOptionValue(event.option);
             var selectionIndex = this.findSelectionIndex(optionValue);
@@ -79,3 +79,2 @@ var newValue = void 0;
             this.updateModel(event.originalEvent, newValue);
-            event.stopPropagation();
         }
@@ -121,3 +120,3 @@ }, {
 
-                            newValue.push(option.value);
+                            newValue.push(this.getOptionValue(option));
                         }
@@ -179,2 +178,3 @@ } catch (err) {
             this.unbindDocumentClickListener();
+            this.clearClickState();
         }
@@ -206,4 +206,4 @@ }, {
         key: 'isSelected',
-        value: function isSelected(value) {
-            return this.findSelectionIndex(value) !== -1;
+        value: function isSelected(option) {
+            return this.findSelectionIndex(this.getOptionValue(option)) !== -1;
         }
@@ -233,9 +233,13 @@ }, {
             var label = null;
+
             for (var i = 0; i < this.props.options.length; i++) {
                 var option = this.props.options[i];
-                if (option.value === val) {
-                    label = option.label;
+                var optionValue = this.getOptionValue(option);
+
+                if (optionValue === val) {
+                    label = this.getOptionLabel(option);
                     break;
                 }
             }
+
             return label;
@@ -281,2 +285,7 @@ }
 
+            this.clearClickState();
+        }
+    }, {
+        key: 'clearClickState',
+        value: function clearClickState() {
             this.selfClick = false;
@@ -289,3 +298,5 @@ this.panelClick = false;
             var filterValue = this.state.filter.trim().toLowerCase();
-            return option.label.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
+            var optionLabel = this.getOptionLabel(option);
+
+            return optionLabel.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
         }
@@ -312,2 +323,12 @@ }, {
     }, {
+        key: 'getOptionValue',
+        value: function getOptionValue(option) {
+            return this.props.optionLabel ? option : option.value;
+        }
+    }, {
+        key: 'getOptionLabel',
+        value: function getOptionLabel(option) {
+            return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
+        }
+    }, {
         key: 'render',
@@ -329,4 +350,6 @@ value: function render() {
                 items = items.map(function (option) {
-                    return _react2.default.createElement(_MultiSelectItem.MultiSelectItem, { key: option.label, option: option, template: _this3.props.itemTemplate,
-                        selected: _this3.isSelected(option.value), onClick: _this3.onOptionClick });
+                    var optionLabel = _this3.getOptionLabel(option);
+
+                    return _react2.default.createElement(_MultiSelectItem.MultiSelectItem, { key: optionLabel, label: optionLabel, option: option, template: _this3.props.itemTemplate,
+                        selected: _this3.isSelected(option), onClick: _this3.onOptionClick });
                 });
@@ -390,2 +413,3 @@ }
     options: null,
+    optionLabel: null,
     style: null,
@@ -405,2 +429,3 @@ className: null,
     options: _propTypes2.default.array,
+    optionLabel: _propTypes2.default.string,
     style: _propTypes2.default.object,
@@ -407,0 +432,0 @@ className: _propTypes2.default.string,

components/multiselect/MultiSelectItem.js

@@ -60,3 +60,3 @@ 'use strict';
             var checkboxIcon = (0, _classnames2.default)('ui-chkbox-icon ui-c', { 'fa fa-check': this.props.selected });
-            var content = this.props.template ? this.props.template(this.props.option) : this.props.option.label;
+            var content = this.props.template ? this.props.template(this.props.option) : this.props.label;
 
@@ -94,2 +94,3 @@ return _react2.default.createElement(
     option: null,
+    label: null,
     selected: false,
@@ -101,2 +102,3 @@ template: null,
     option: _propTypes2.default.object,
+    label: _propTypes2.default.string,
     selected: _propTypes2.default.bool,
@@ -103,0 +105,0 @@ template: _propTypes2.default.func,

components/paginator/Paginator.js

@@ -162,4 +162,3 @@ 'use strict';
         value: function onRowsChange(event) {
-            this.changePage(0, this.props.rowsPerPageOptions[event.target.selectedIndex]);
-            event.preventDefault();
+            this.changePage(0, event.value);
         }
@@ -199,3 +198,3 @@ }, {
                     case 'RowsPerPageDropdown':
-                        element = _react2.default.createElement(_RowsPerPageDropdown.RowsPerPageDropdown, { key: key, options: _this2.props.rowsPerPageOptions, onChange: _this2.onRowsChange });
+                        element = _react2.default.createElement(_RowsPerPageDropdown.RowsPerPageDropdown, { key: key, value: _this2.props.rows, options: _this2.props.rowsPerPageOptions, onChange: _this2.onRowsChange });
                         break;
@@ -202,0 +201,0 @@

components/paginator/RowsPerPageDropdown.js

@@ -18,2 +18,4 @@ 'use strict';
 
+var _Dropdown = require('../dropdown/Dropdown');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,14 +43,6 @@
                 var options = this.props.options.map(function (opt, i) {
-                    return _react2.default.createElement(
-                        'option',
-                        { key: opt, value: opt },
-                        opt
-                    );
+                    return { label: opt, value: opt };
                 });
 
-                return _react2.default.createElement(
-                    'select',
-                    { className: 'ui-paginator-rpp-options ui-widget ui-state-default', onChange: this.props.onChange },
-                    options
-                );
+                return _react2.default.createElement(_Dropdown.Dropdown, { value: this.props.value, options: options, onChange: this.props.onChange });
             } else {
@@ -65,2 +59,3 @@ return null;
     options: null,
+    value: null,
     onChange: null
@@ -70,3 +65,4 @@ };
     options: _propTypes2.default.array,
+    value: _propTypes2.default.number,
     onChange: _propTypes2.default.func
 };

components/panel/Panel.js

@@ -18,2 +18,6 @@ 'use strict';
 
+var _DomHandler = require('../utils/DomHandler');
+
+var _DomHandler2 = _interopRequireDefault(_DomHandler);
+
 var _classnames = require('classnames');
@@ -39,3 +43,5 @@
 
-        _this.state = { collapsed: _this.props.collapsed };
+        _this.state = {
+            collapsed: _this.props.collapsed
+        };
         _this.toggle = _this.toggle.bind(_this);
@@ -46,2 +52,20 @@ return _this;
     _createClass(Panel, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
+            var _this2 = this;
+
+            setTimeout(function () {
+                _DomHandler2.default.removeClass(_this2.contentWrapper, 'ui-panel-content-wrapper-expanding');
+            }, 500);
+        }
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (nextProps.collapsed !== this.state.collapsed) {
+                this.setState({
+                    collapsed: nextProps.collapsed
+                });
+            }
+        }
+    }, {
         key: 'toggle',
@@ -51,2 +75,3 @@ value: function toggle(e) {
                 var collapsed = this.state.collapsed;
+
                 if (collapsed && this.onExpand) this.onExpand(e);else if (!collapsed && this.onCollapse) this.onCollapse(e);
@@ -56,12 +81,10 @@
             }
+
             e.preventDefault();
         }
     }, {
-        key: 'render',
-        value: function render() {
-            var toggleIcon = null;
-            var className = (0, _classnames2.default)('ui-panel ui-widget ui-widget-content ui-corner-all', this.props.className);
-
+        key: 'renderToggleIcon',
+        value: function renderToggleIcon() {
             if (this.props.toggleable) {
-                toggleIcon = _react2.default.createElement(
+                return _react2.default.createElement(
                     'a',
@@ -71,28 +94,55 @@ { className: 'ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default', href: '#', onClick: this.toggle },
                 );
+            } else {
+                return null;
             }
+        }
+    }, {
+        key: 'renderHeader',
+        value: function renderHeader() {
+            var toggleIcon = this.renderToggleIcon();
 
             return _react2.default.createElement(
                 'div',
-                { id: this.props.id, className: className, style: this.props.style },
-                this.props.header != null && _react2.default.createElement(
-                    'div',
-                    { className: 'ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all' },
-                    _react2.default.createElement(
-                        'span',
-                        { className: 'ui-panel-title' },
-                        this.props.header
-                    ),
-                    toggleIcon
+                { className: 'ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all' },
+                _react2.default.createElement(
+                    'span',
+                    { className: 'ui-panel-title' },
+                    this.props.header
                 ),
+                toggleIcon
+            );
+        }
+    }, {
+        key: 'renderContent',
+        value: function renderContent() {
+            var _this3 = this;
+
+            var className = (0, _classnames2.default)('ui-panel-content-wrapper', { 'ui-panel-content-wrapper-collapsed': this.state.collapsed, 'ui-panel-content-wrapper-expanded ui-panel-content-wrapper-expanding': !this.state.collapsed });
+
+            return _react2.default.createElement(
+                'div',
+                { ref: function ref(el) {
+                        return _this3.contentWrapper = el;
+                    }, className: className },
                 _react2.default.createElement(
                     'div',
-                    { className: 'ui-panel-content-wrapper', style: { display: this.state.collapsed ? 'none' : 'block' } },
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'ui-panel-content ui-widget-content' },
-                        this.props.children
-                    )
+                    { className: 'ui-panel-content ui-widget-content' },
+                    this.props.children
                 )
             );
         }
+    }, {
+        key: 'render',
+        value: function render() {
+            var className = (0, _classnames2.default)('ui-panel ui-widget ui-widget-content ui-corner-all', this.props.className);
+            var header = this.renderHeader();
+            var content = this.renderContent();
+
+            return _react2.default.createElement(
+                'div',
+                { id: this.props.id, className: className, style: this.props.style },
+                header,
+                content
+            );
+        }
     }]);
@@ -99,0 +149,0 @@

components/progressbar/ProgressBar.d.ts

@@ -10,4 +10,5 @@ import React = require("react");
     className?: string;
+    mode?: string
 }
 
 export class ProgressBar extends React.Component<ProgressBarProps,any> {}

components/progressbar/ProgressBar.js

@@ -42,3 +42,3 @@ 'use strict';
         value: function render() {
-            var className = (0, _classnames2.default)('ui-progressbar ui-widget ui-widget-content ui-corner-all', this.props.className);
+            var className = (0, _classnames2.default)('ui-progressbar ui-widget ui-widget-content ui-corner-all', this.props.className, { 'ui-progressbar-determinate': this.props.mode === 'determinate', 'ui-progressbar-indeterminate': this.props.mode === 'indeterminate' });
             if (this.props.showValue) {
@@ -55,3 +55,3 @@ var label = _react2.default.createElement(
                 { id: this.props.id, className: className, role: 'progressbar', 'aria-valuemin': '0', 'aria-valuenow': this.props.value, 'aria-valuemax': '100', style: this.props.style },
-                _react2.default.createElement('div', { className: 'ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all', style: { width: this.props.value + '%' } }),
+                _react2.default.createElement('div', { className: 'ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all', style: { width: this.props.value + '%', display: 'block' } }),
                 label
@@ -71,3 +71,4 @@ );
     style: null,
-    className: null
+    className: null,
+    mode: 'determinate'
 };
@@ -80,3 +81,4 @@ ProgressBar.propTypes = {
     style: _propTypes2.default.object,
-    className: _propTypes2.default.string
+    className: _propTypes2.default.string,
+    mode: _propTypes2.default.string
 };

components/selectbutton/SelectButton.js

@@ -61,3 +61,3 @@ 'use strict';
             var selected = this.isSelected(event.option);
-            var optionValue = event.option.value;
+            var optionValue = this.getOptionValue(event.option);
             var newValue = void 0;
@@ -83,5 +83,16 @@
     }, {
+        key: 'getOptionValue',
+        value: function getOptionValue(option) {
+            return this.props.optionLabel ? option : option.value;
+        }
+    }, {
+        key: 'getOptionLabel',
+        value: function getOptionLabel(option) {
+            return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
+        }
+    }, {
         key: 'isSelected',
         value: function isSelected(option) {
             var selected = false;
+            var optionValue = this.getOptionValue(option);
 
@@ -98,3 +109,3 @@ if (this.props.multiple) {
 
-                            if (_ObjectUtils2.default.equals(val, option.value, this.props.dataKey)) {
+                            if (_ObjectUtils2.default.equals(val, optionValue, this.props.dataKey)) {
                                 selected = true;
@@ -120,3 +131,3 @@ break;
             } else {
-                selected = _ObjectUtils2.default.equals(this.props.value, option.value, this.props.dataKey);
+                selected = _ObjectUtils2.default.equals(this.props.value, optionValue, this.props.dataKey);
             }
@@ -133,3 +144,5 @@
                 return this.props.options.map(function (option, index) {
-                    return _react2.default.createElement(_SelectButtonItem.SelectButtonItem, { key: option.label, option: option, onClick: _this3.onOptionClick,
+                    var optionLabel = _this3.getOptionLabel(option);
+
+                    return _react2.default.createElement(_SelectButtonItem.SelectButtonItem, { key: optionLabel, label: optionLabel, option: option, onClick: _this3.onOptionClick,
                         selected: _this3.isSelected(option), tabIndex: _this3.props.tabIndex, disabled: _this3.props.disabled });
@@ -136,0 +149,0 @@ });

components/selectbutton/SelectButtonItem.js

@@ -87,3 +87,3 @@ 'use strict';
                     { className: 'ui-button-text ui-c' },
-                    this.props.option.label
+                    this.props.label
                 ),
@@ -94,3 +94,3 @@ _react2.default.createElement(
                     _react2.default.createElement('input', { type: 'checkbox', checked: this.props.selected, onFocus: this.onFocus, onBlur: this.onBlur,
-                        tabIndex: this.props.tabIndex, disabled: this.props.disabled, value: this.props.option.label })
+                        tabIndex: this.props.tabIndex, disabled: this.props.disabled, value: this.props.label })
                 )
@@ -106,2 +106,3 @@ );
     option: null,
+    label: null,
     selected: null,
@@ -113,2 +114,3 @@ tabIndex: null,
     option: _propTypes2.default.object,
+    label: _propTypes2.default.string,
     selected: _propTypes2.default.bool,
@@ -115,0 +117,0 @@ tabIndex: _propTypes2.default.number,

components/spinner/Spinner.d.ts

@@ -5,2 +5,3 @@ import React = require("react");
     id?: string,
+    value?: number,
     step?: number,
@@ -7,0 +8,0 @@ min?: number,

components/spinner/Spinner.js

@@ -319,2 +319,3 @@ 'use strict';
     id: null,
+    value: null,
     step: 1,
@@ -334,2 +335,3 @@ min: null,
     id: _propTypes2.default.string,
+    value: _propTypes2.default.number,
     step: _propTypes2.default.number,
@@ -336,0 +338,0 @@ min: _propTypes2.default.number,

components/tabview/TabView.d.ts

 import React = require("react");
 
+interface TabPanelProps {
+    header?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    disabled?: boolean;
+    headerStyle?: any;
+    headerClassName?: string;
+    contentStyle?: any;
+    contentClassName?: string;
+}
+
 interface TabViewProps {
@@ -7,4 +18,7 @@ header?: string;
     rightIcon?: string;
+    style?: any;
+    className?: string;
 }
 
+export class TabPanel extends React.Component<TabPanelProps,any> {}
 export class TabView extends React.Component<TabViewProps,any> {}

components/tabview/TabView.js

@@ -56,3 +56,8 @@ 'use strict';
     leftIcon: null,
-    rightIcon: null
+    rightIcon: null,
+    disabled: false,
+    headerStyle: null,
+    headerClassName: null,
+    contentStyle: null,
+    contentClassName: null
 };
@@ -62,3 +67,8 @@ TabPanel.propTypes = {
     leftIcon: _propTypes2.default.string,
-    rightIcon: _propTypes2.default.string
+    rightIcon: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    headerStyle: _propTypes2.default.object,
+    headerClassName: _propTypes2.default.string,
+    contentStyle: _propTypes2.default.object,
+    contentClassName: _propTypes2.default.string
 };
@@ -69,9 +79,10 @@
 
-    function TabView() {
+    function TabView(props) {
         _classCallCheck(this, TabView);
 
-        var _this2 = _possibleConstructorReturn(this, (TabView.__proto__ || Object.getPrototypeOf(TabView)).call(this));
+        var _this2 = _possibleConstructorReturn(this, (TabView.__proto__ || Object.getPrototypeOf(TabView)).call(this, props));
 
-        _this2.state = { activeIndex: 0 };
-        _this2.getTabHeaderClass = _this2.getTabHeaderClass.bind(_this2);
+        _this2.state = {
+            activeIndex: 0
+        };
         return _this2;
@@ -81,75 +92,100 @@ }
     _createClass(TabView, [{
-        key: 'onTabClick',
-        value: function onTabClick(e, i) {
-            this.setState({ activeIndex: i });
-            if (this.props.onTabChange) {
-                this.props.onTabChange({ originalEvent: e, index: i });
+        key: 'onTabHeaderClick',
+        value: function onTabHeaderClick(event, tab, index) {
+            if (!tab.props.disabled) {
+                this.setState({
+                    activeIndex: index
+                });
+
+                if (this.props.onTabChange) {
+                    this.props.onTabChange({ originalEvent: event, index: index });
+                }
             }
-            e.preventDefault();
+
+            event.preventDefault();
         }
     }, {
-        key: 'getTabHeaderClass',
-        value: function getTabHeaderClass(index) {
-            var className = 'ui-state-default ui-corner-top';
-            if (index === this.state.activeIndex) {
-                className += ' ui-tabview-selected ui-state-active';
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (nextProps.activeIndex !== this.props.activeIndex) {
+                this.setState({
+                    activeIndex: nextProps.activeIndex
+                });
             }
-            return className;
         }
     }, {
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-            if (this.props.activeIndex) {
-                this.setState({ activeIndex: this.props.activeIndex });
-            }
+        key: 'renderTabHeader',
+        value: function renderTabHeader(tab, index) {
+            var _this3 = this;
+
+            var selected = this.state.activeIndex === index;
+            var className = (0, _classnames2.default)(tab.props.headerClassName, 'ui-state-default ui-corner-top', { 'ui-tabview-selected ui-state-active': selected, 'ui-state-disabled': tab.props.disabled });
+
+            return _react2.default.createElement(
+                'li',
+                { className: className, role: 'tab', style: tab.props.headerStyle },
+                _react2.default.createElement(
+                    'a',
+                    { href: '#', onClick: function onClick(e) {
+                            return _this3.onTabHeaderClick(e, tab, index);
+                        } },
+                    tab.props.leftIcon && _react2.default.createElement('span', { className: (0, _classnames2.default)('ui-tabview-left-icon fa', tab.props.leftIcon) }),
+                    _react2.default.createElement(
+                        'span',
+                        { className: 'ui-tabview-title' },
+                        tab.props.header
+                    ),
+                    tab.props.rightIcon && _react2.default.createElement('span', { className: (0, _classnames2.default)('ui-tabview-right-icon fa', tab.props.rightIcon) })
+                )
+            );
         }
     }, {
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-            if (nextProps.activeIndex !== this.props.activeIndex) {
-                this.setState({ activeIndex: nextProps.activeIndex });
-            }
+        key: 'renderNavigator',
+        value: function renderNavigator() {
+            var _this4 = this;
+
+            var headers = _react2.default.Children.map(this.props.children, function (tab, index) {
+                return _this4.renderTabHeader(tab, index);
+            });
+
+            return _react2.default.createElement(
+                'ul',
+                { className: 'ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all', role: 'tablist' },
+                headers
+            );
         }
     }, {
+        key: 'renderContent',
+        value: function renderContent() {
+            var _this5 = this;
+
+            var contents = _react2.default.Children.map(this.props.children, function (tab, index) {
+                var selected = _this5.state.activeIndex === index;
+                var className = (0, _classnames2.default)(tab.props.contentClassName, 'ui-tabview-panel ui-widget-content', { 'ui-helper-hidden': !selected });
+
+                return _react2.default.createElement(
+                    'div',
+                    { className: className, style: tab.props.contentStyle },
+                    tab
+                );
+            });
+
+            return _react2.default.createElement(
+                'div',
+                { className: 'ui-tabview-panels' },
+                contents
+            );
+        }
+    }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var className = (0, _classnames2.default)('ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top', this.props.className);
+            var navigator = this.renderNavigator();
+            var content = this.renderContent();
 
             return _react2.default.createElement(
                 'div',
-                { id: this.props.id, className: 'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top' },
-                _react2.default.createElement(
-                    'ul',
-                    { className: 'ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all', role: 'tablist' },
-                    _react2.default.Children.map(this.props.children, function (tab, i) {
-                        return _react2.default.createElement(
-                            'li',
-                            { className: _this3.getTabHeaderClass(i), role: 'tab' },
-                            _react2.default.createElement(
-                                'a',
-                                { href: '#', onClick: function onClick(e) {
-                                        return _this3.onTabClick(e, i);
-                                    } },
-                                tab.props.leftIcon && _react2.default.createElement('span', { className: (0, _classnames2.default)('ui-tabview-left-icon fa ', tab.props.leftIcon) }),
-                                _react2.default.createElement(
-                                    'span',
-                                    { className: 'ui-tabview-title' },
-                                    tab.props.header
-                                ),
-                                tab.props.rightIcon && _react2.default.createElement('span', { className: (0, _classnames2.default)('ui-tabview-right-icon fa ', tab.props.rightIcon) })
-                            )
-                        );
-                    })
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'ui-tabview-panels' },
-                    _react2.default.Children.map(this.props.children, function (tab, i) {
-                        return _react2.default.createElement(
-                            'div',
-                            { className: 'ui-tabview-panel ui-widget-content', style: _this3.state.activeIndex === i ? { display: 'block' } : { display: 'none' } },
-                            tab
-                        );
-                    })
-                )
+                { id: this.props.id, className: className, style: this.props.style },
+                navigator,
+                content
             );
@@ -164,7 +200,11 @@ }
     id: null,
-    activeIndex: null
+    activeIndex: null,
+    style: null,
+    className: null
 };
 TabView.propTypes = {
     id: _propTypes2.default.string,
-    activeIndex: _propTypes2.default.number
+    activeIndex: _propTypes2.default.number,
+    style: _propTypes2.default.object,
+    className: _propTypes2.default.string
 };

package.json

 {
   "name": "primereact",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "homepage": "https://www.primefaces.org/primereact",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,6 +0,9 @@
-![alt text](https://www.primefaces.org/wp-content/uploads/2017/09/primereact-transparent-250.png "PrimeReact")
+[![Join the chat at https://gitter.im/primefaces/primereact](https://badges.gitter.im/primefaces/primereact.svg)](https://gitter.im/primefaces/primereact?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 # PrimeReact
+
 UI Components for React
 
+![alt text](https://www.primefaces.org/wp-content/uploads/2017/09/primereact-transparent-250.png "PrimeReact")
+
 See [PrimeReact homepage](https://www.primefaces.org/primereact) for live showcase and documentation.
@@ -7,0 +10,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1823868

increased by1.17%

Number of package files

316

increased by0.96%

Lines of code

37354

increased by1.38%

Number of lines in readme file

21

increased by16.67%

No dependency changes