primereact 7.0.0-rc.1 → 7.1.0

package/README.md

@@ -2,7 +2,7 @@
 [![npm version](https://badge.fury.io/js/primereact.svg)](https://badge.fury.io/js/primereact)
 [![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
 
-[![PrimeReact Hero](https://www.primefaces.org/wp-content/uploads/2020/08/primereact-promotion-21aug2020@2x.jpg)](https://www.primefaces.org/primereact)
+[![PrimeReact Hero](https://www.primefaces.org/wp-content/uploads/2021/12/primereact-release-7.jpeg)](https://www.primefaces.org/primereact)
 
 # PrimeReact
 
@@ -13,16 +13,41 @@ PrimeReact is a rich set of open source UI Components for React. See [PrimeReact
 PrimeReact is available at npm, if you have an existing application run the following command to download it to your project.
 
 ```
-npm install primereact --save
-npm install primeicons --save
+npm install primereact
+npm install primeicons
+```
+or
+
+```
+yarn add primereact
+yarn add primeicons
 ```
 
 ## Import
 
+#### Module
+```javascript
+//import { ComponentName } from 'primereact/{componentname}';
+import { Dialog } from 'primereact/dialog';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+```
+
+#### CDN
+
 ```javascript
-//import {ComponentName} from 'primereact/{componentname}';
-import {Dialog} from 'primereact/dialog';
-import {Accordion,AccordionTab} from 'primereact/accordion';
+<script src="https://unpkg.com/primereact/core/core.min.js"></script>
+<script src="https://unpkg.com/primereact/accordion/accordion.min.js"></script>
+//<script src="https://unpkg.com/primereact/{componentname}/{componentname}.min.js"></script>
+```
+
+```javascript
+const { Dialog } = primereact.dialog;
+const { Accordion, AccordionTab } = primereact.accordion;
+```
+
+Import all components and structures
+```javascript
+<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
 ```
 
 ## Dependencies
@@ -31,12 +56,12 @@ Majority of PrimeReact components (95%) are native and there are some exceptions
 
 In addition, components require PrimeIcons for icons and react-transition-group for animations.
 
-```json
+```javascript
 dependencies: {
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-transition-group": "^4.4.1",
-    "primeicons": "^4.1.0"
+    "primeicons": "^5.0.0"
 }
 ```
 
@@ -44,7 +69,7 @@ dependencies: {
 The css dependencies are as follows, note that you may change the theme with another one of your choice.
 
 ```
-primereact/resources/themes/saga-blue/theme.css
+primereact/resources/themes/lara-light-indigo/theme.css
 primereact/resources/primereact.min.css
 primeicons/primeicons.css
 ```
@@ -52,7 +77,7 @@ primeicons/primeicons.css
 If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.
 
 ```javascript
-import 'primereact/resources/themes/saga-blue/theme.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 ```

package/accordion/accordion.cjs.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var csstransition = require('primereact/csstransition');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -170,6 +171,8 @@ var AccordionTab = /*#__PURE__*/function (_Component) {
 _defineProperty(AccordionTab, "defaultProps", {
   header: null,
   disabled: false,
+  style: null,
+  className: null,
   headerStyle: null,
   headerClassName: null,
   headerTemplate: null,
@@ -199,11 +202,15 @@ var Accordion = /*#__PURE__*/function (_Component2) {
     }
 
     _this.state = state;
-    _this.contentWrappers = [];
     return _this;
   }
 
   _createClass(Accordion, [{
+    key: "shouldTabRender",
+    value: function shouldTabRender(tab) {
+      return tab && tab.type === AccordionTab;
+    }
+  }, {
     key: "onTabHeaderClick",
     value: function onTabHeaderClick(event, tab, index) {
       if (!tab.props.disabled) {
@@ -254,31 +261,32 @@ var Accordion = /*#__PURE__*/function (_Component2) {
     value: function componentDidMount() {
       if (!this.state.id) {
         this.setState({
-          id: core.UniqueComponentId()
+          id: utils.UniqueComponentId()
         });
       }
     }
   }, {
     key: "renderTabHeader",
     value: function renderTabHeader(tab, selected, index) {
-      var _classNames,
-          _this2 = this;
+      var _this2 = this;
 
-      var tabHeaderClass = core.classNames('p-accordion-header', {
+      var style = _objectSpread(_objectSpread({}, tab.props.headerStyle || {}), tab.props.style || {});
+
+      var className = utils.classNames('p-accordion-header', {
         'p-highlight': selected,
         'p-disabled': tab.props.disabled
-      }, tab.props.headerClassName);
-      var iconClassName = core.classNames('p-accordion-toggle-icon', (_classNames = {}, _defineProperty(_classNames, "".concat(this.props.expandIcon), !selected), _defineProperty(_classNames, "".concat(this.props.collapseIcon), selected), _classNames));
+      }, tab.props.headerClassName, tab.props.className);
       var id = this.state.id + '_header_' + index;
       var ariaControls = this.state.id + '_content_' + index;
       var tabIndex = tab.props.disabled ? -1 : null;
-      var header = tab.props.headerTemplate ? core.ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React__default['default'].createElement("span", {
+      var header = tab.props.headerTemplate ? utils.ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React__default["default"].createElement("span", {
         className: "p-accordion-header-text"
       }, tab.props.header);
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: tabHeaderClass,
-        style: tab.props.headerStyle
-      }, /*#__PURE__*/React__default['default'].createElement("a", {
+      var icon = selected ? this.props.collapseIcon : this.props.expandIcon;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: className,
+        style: style
+      }, /*#__PURE__*/React__default["default"].createElement("a", {
         href: '#' + ariaControls,
         id: id,
         className: "p-accordion-header-link",
@@ -289,17 +297,22 @@ var Accordion = /*#__PURE__*/function (_Component2) {
           return _this2.onTabHeaderClick(event, tab, index);
         },
         tabIndex: tabIndex
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: iconClassName
+      }, utils.IconUtils.getJSXIcon(icon, {
+        className: 'p-accordion-toggle-icon'
+      }, {
+        props: this.props,
+        selected: selected
       }), header));
     }
   }, {
     key: "renderTabContent",
     value: function renderTabContent(tab, selected, index) {
-      var className = core.classNames('p-toggleable-content', tab.props.contentClassName);
+      var style = _objectSpread(_objectSpread({}, tab.props.contentStyle || {}), tab.props.style || {});
+
+      var className = utils.classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
       var id = this.state.id + '_content_' + index;
-      var toggleableContentRef = /*#__PURE__*/React__default['default'].createRef();
-      return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+      var toggleableContentRef = /*#__PURE__*/React__default["default"].createRef();
+      return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
         nodeRef: toggleableContentRef,
         classNames: "p-toggleable-content",
         timeout: {
@@ -309,14 +322,14 @@ var Accordion = /*#__PURE__*/function (_Component2) {
         in: selected,
         unmountOnExit: true,
         options: this.props.transitionOptions
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: toggleableContentRef,
         id: id,
         className: className,
-        style: tab.props.contentStyle,
+        style: style,
         role: "region",
         "aria-labelledby": this.state.id + '_header_' + index
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-accordion-content"
       }, tab.props.children)));
     }
@@ -326,10 +339,10 @@ var Accordion = /*#__PURE__*/function (_Component2) {
       var selected = this.isSelected(index);
       var tabHeader = this.renderTabHeader(tab, selected, index);
       var tabContent = this.renderTabContent(tab, selected, index);
-      var tabClassName = core.classNames('p-accordion-tab', {
+      var tabClassName = utils.classNames('p-accordion-tab', {
         'p-accordion-tab-active': selected
       });
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         key: tab.props.header,
         className: tabClassName
       }, tabHeader, tabContent);
@@ -339,8 +352,8 @@ var Accordion = /*#__PURE__*/function (_Component2) {
     value: function renderTabs() {
       var _this3 = this;
 
-      return React__default['default'].Children.map(this.props.children, function (tab, index) {
-        if (tab && tab.type === AccordionTab) {
+      return React__default["default"].Children.map(this.props.children, function (tab, index) {
+        if (_this3.shouldTabRender(tab)) {
           return _this3.renderTab(tab, index);
         }
       });
@@ -350,9 +363,9 @@ var Accordion = /*#__PURE__*/function (_Component2) {
     value: function render() {
       var _this4 = this;
 
-      var className = core.classNames('p-accordion p-component', this.props.className);
+      var className = utils.classNames('p-accordion p-component', this.props.className);
       var tabs = this.renderTabs();
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(el) {
           return _this4.container = el;
         },

package/accordion/accordion.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function a(e){if(Array.isArray(e))return o(e)}function i(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e,t){if(t&&("object"===d(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return h(e)}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function g(e){var t=T();return function(){var n,r=y(e);if(t){var o=y(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return b(this,n)}}function T(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var j=function(t){f(r,e.Component);var n=g(r);function r(){return u(this,r),n.apply(this,arguments)}return r}();m(j,"defaultProps",{header:null,disabled:!1,headerStyle:null,headerClassName:null,headerTemplate:null,contentStyle:null,contentClassName:null});var S=function(n){f(b,e.Component);var o,p,d,h=g(b);function b(e){var t;u(this,b);var n={id:(t=h.call(this,e)).props.id};return t.props.onTabChange||(n=O(O({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.contentWrappers=[],t}return o=b,(p=[{key:"onTabHeaderClick",value:function(e,t,n){if(!t.props.disabled){var r=this.isSelected(n),o=null;if(this.props.multiple){var s=(this.props.onTabChange?this.props.activeIndex:this.state.activeIndex)||[];o=s=r?s.filter((function(e){return e!==n})):[].concat(a(p=s)||i(p)||c(p)||l(),[n])}else o=r?null:n;var u=r?this.props.onTabClose:this.props.onTabOpen;u&&u({originalEvent:e,index:n}),this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:o}):this.setState({activeIndex:o})}var p;e.preventDefault()}},{key:"isSelected",value:function(e){var t=this.props.onTabChange?this.props.activeIndex:this.state.activeIndex;return this.props.multiple?t&&t.indexOf(e)>=0:t===e}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:t.UniqueComponentId()})}},{key:"renderTabHeader",value:function(e,n,o){var a,i=this,c=t.classNames("p-accordion-header",{"p-highlight":n,"p-disabled":e.props.disabled},e.props.headerClassName),l=t.classNames("p-accordion-toggle-icon",(m(a={},"".concat(this.props.expandIcon),!n),m(a,"".concat(this.props.collapseIcon),n),a)),s=this.state.id+"_header_"+o,u=this.state.id+"_content_"+o,p=e.props.disabled?-1:null,f=e.props.headerTemplate?t.ObjectUtils.getJSXElement(e.props.headerTemplate,e.props):r.default.createElement("span",{className:"p-accordion-header-text"},e.props.header);return r.default.createElement("div",{className:c,style:e.props.headerStyle},r.default.createElement("a",{href:"#"+u,id:s,className:"p-accordion-header-link","aria-controls":u,role:"tab","aria-expanded":n,onClick:function(t){return i.onTabHeaderClick(t,e,o)},tabIndex:p},r.default.createElement("span",{className:l}),f))}},{key:"renderTabContent",value:function(e,n,o){var a=t.classNames("p-toggleable-content",e.props.contentClassName),i=this.state.id+"_content_"+o,c=r.default.createRef();return r.default.createElement(t.CSSTransition,{nodeRef:c,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:n,unmountOnExit:!0,options:this.props.transitionOptions},r.default.createElement("div",{ref:c,id:i,className:a,style:e.props.contentStyle,role:"region","aria-labelledby":this.state.id+"_header_"+o},r.default.createElement("div",{className:"p-accordion-content"},e.props.children)))}},{key:"renderTab",value:function(e,n){var o=this.isSelected(n),a=this.renderTabHeader(e,o,n),i=this.renderTabContent(e,o,n),c=t.classNames("p-accordion-tab",{"p-accordion-tab-active":o});return r.default.createElement("div",{key:e.props.header,className:c},a,i)}},{key:"renderTabs",value:function(){var e=this;return r.default.Children.map(this.props.children,(function(t,n){if(t&&t.type===j)return e.renderTab(t,n)}))}},{key:"render",value:function(){var e=this,n=t.classNames("p-accordion p-component",this.props.className),o=this.renderTabs();return r.default.createElement("div",{ref:function(t){return e.container=t},id:this.state.id,className:n,style:this.props.style},o)}}])&&s(o.prototype,p),d&&s(o,d),b}();m(S,"defaultProps",{id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:"pi pi-chevron-right",collapseIcon:"pi pi-chevron-down",transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null}),exports.Accordion=S,exports.AccordionTab=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils"),r=require("primereact/csstransition");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e);function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function i(e){if(Array.isArray(e))return a(e)}function s(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function l(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function p(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function d(e,t){return d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},d(e,t)}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&d(e,t)}function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function b(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function y(e,t){if(t&&("object"===h(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return b(e)}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?O(Object(r),!0).forEach((function(t){v(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function T(e){var t=j();return function(){var r,n=m(e);if(t){var o=m(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return y(this,r)}}function j(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var S=function(t){f(n,e.Component);var r=T(n);function n(){return p(this,n),r.apply(this,arguments)}return n}();v(S,"defaultProps",{header:null,disabled:!1,style:null,className:null,headerStyle:null,headerClassName:null,headerTemplate:null,contentStyle:null,contentClassName:null});var C=function(n){f(y,e.Component);var a,d,h,b=T(y);function y(e){var t;p(this,y);var r={id:(t=b.call(this,e)).props.id};return t.props.onTabChange||(r=g(g({},r),{},{activeIndex:e.activeIndex})),t.state=r,t}return a=y,(d=[{key:"shouldTabRender",value:function(e){return e&&e.type===S}},{key:"onTabHeaderClick",value:function(e,t,r){if(!t.props.disabled){var n=this.isSelected(r),o=null;if(this.props.multiple){var a=(this.props.onTabChange?this.props.activeIndex:this.state.activeIndex)||[];o=a=n?a.filter((function(e){return e!==r})):[].concat(i(p=a)||s(p)||l(p)||c(),[r])}else o=n?null:r;var u=n?this.props.onTabClose:this.props.onTabOpen;u&&u({originalEvent:e,index:r}),this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:o}):this.setState({activeIndex:o})}var p;e.preventDefault()}},{key:"isSelected",value:function(e){var t=this.props.onTabChange?this.props.activeIndex:this.state.activeIndex;return this.props.multiple?t&&t.indexOf(e)>=0:t===e}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:t.UniqueComponentId()})}},{key:"renderTabHeader",value:function(e,r,n){var a=this,i=g(g({},e.props.headerStyle||{}),e.props.style||{}),s=t.classNames("p-accordion-header",{"p-highlight":r,"p-disabled":e.props.disabled},e.props.headerClassName,e.props.className),l=this.state.id+"_header_"+n,c=this.state.id+"_content_"+n,u=e.props.disabled?-1:null,p=e.props.headerTemplate?t.ObjectUtils.getJSXElement(e.props.headerTemplate,e.props):o.default.createElement("span",{className:"p-accordion-header-text"},e.props.header);return o.default.createElement("div",{className:s,style:i},o.default.createElement("a",{href:"#"+c,id:l,className:"p-accordion-header-link","aria-controls":c,role:"tab","aria-expanded":r,onClick:function(t){return a.onTabHeaderClick(t,e,n)},tabIndex:u},t.IconUtils.getJSXIcon(r?this.props.collapseIcon:this.props.expandIcon,{className:"p-accordion-toggle-icon"},{props:this.props,selected:r}),p))}},{key:"renderTabContent",value:function(e,n,a){var i=g(g({},e.props.contentStyle||{}),e.props.style||{}),s=t.classNames("p-toggleable-content",e.props.contentClassName,e.props.className),l=this.state.id+"_content_"+a,c=o.default.createRef();return o.default.createElement(r.CSSTransition,{nodeRef:c,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:n,unmountOnExit:!0,options:this.props.transitionOptions},o.default.createElement("div",{ref:c,id:l,className:s,style:i,role:"region","aria-labelledby":this.state.id+"_header_"+a},o.default.createElement("div",{className:"p-accordion-content"},e.props.children)))}},{key:"renderTab",value:function(e,r){var n=this.isSelected(r),a=this.renderTabHeader(e,n,r),i=this.renderTabContent(e,n,r),s=t.classNames("p-accordion-tab",{"p-accordion-tab-active":n});return o.default.createElement("div",{key:e.props.header,className:s},a,i)}},{key:"renderTabs",value:function(){var e=this;return o.default.Children.map(this.props.children,(function(t,r){if(e.shouldTabRender(t))return e.renderTab(t,r)}))}},{key:"render",value:function(){var e=this,r=t.classNames("p-accordion p-component",this.props.className),n=this.renderTabs();return o.default.createElement("div",{ref:function(t){return e.container=t},id:this.state.id,className:r,style:this.props.style},n)}}])&&u(a.prototype,d),h&&u(a,h),y}();v(C,"defaultProps",{id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:"pi pi-chevron-right",collapseIcon:"pi pi-chevron-down",transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null}),exports.Accordion=C,exports.AccordionTab=S;

package/accordion/accordion.d.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
+import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils';
 
 type AccordionTabHeaderTemplateType = React.ReactNode | ((props: AccordionTabProps) => React.ReactNode);
 
 interface AccordionTabProps {
     header?: React.ReactNode;
     disabled?: boolean;
+    style?: object;
+    className?: string;
     headerStyle?: object;
     headerClassName?: string;
     headerTemplate?: AccordionTabHeaderTemplateType;
@@ -27,9 +31,9 @@ export interface AccordionProps {
     className?: string;
     style?: object;
     multiple?: boolean;
-    expandIcon?: string;
-    collapseIcon?: string;
-    transitionOptions?: object;
+    expandIcon?: IconType<AccordionProps>;
+    collapseIcon?: IconType<AccordionProps>;
+    transitionOptions?: CSSTransitionProps;
     onTabOpen?(e: AccordionEventParams): void;
     onTabClose?(e: AccordionEventParams): void;
     onTabChange?(e: AccordionEventParams): void;

package/accordion/accordion.esm.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { UniqueComponentId, classNames, ObjectUtils, CSSTransition } from 'primereact/core';
+import { UniqueComponentId, classNames, ObjectUtils, IconUtils } from 'primereact/utils';
+import { CSSTransition } from 'primereact/csstransition';
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -162,6 +163,8 @@ var AccordionTab = /*#__PURE__*/function (_Component) {
 _defineProperty(AccordionTab, "defaultProps", {
   header: null,
   disabled: false,
+  style: null,
+  className: null,
   headerStyle: null,
   headerClassName: null,
   headerTemplate: null,
@@ -191,11 +194,15 @@ var Accordion = /*#__PURE__*/function (_Component2) {
     }
 
     _this.state = state;
-    _this.contentWrappers = [];
     return _this;
   }
 
   _createClass(Accordion, [{
+    key: "shouldTabRender",
+    value: function shouldTabRender(tab) {
+      return tab && tab.type === AccordionTab;
+    }
+  }, {
     key: "onTabHeaderClick",
     value: function onTabHeaderClick(event, tab, index) {
       if (!tab.props.disabled) {
@@ -253,23 +260,24 @@ var Accordion = /*#__PURE__*/function (_Component2) {
   }, {
     key: "renderTabHeader",
     value: function renderTabHeader(tab, selected, index) {
-      var _classNames,
-          _this2 = this;
+      var _this2 = this;
 
-      var tabHeaderClass = classNames('p-accordion-header', {
+      var style = _objectSpread(_objectSpread({}, tab.props.headerStyle || {}), tab.props.style || {});
+
+      var className = classNames('p-accordion-header', {
         'p-highlight': selected,
         'p-disabled': tab.props.disabled
-      }, tab.props.headerClassName);
-      var iconClassName = classNames('p-accordion-toggle-icon', (_classNames = {}, _defineProperty(_classNames, "".concat(this.props.expandIcon), !selected), _defineProperty(_classNames, "".concat(this.props.collapseIcon), selected), _classNames));
+      }, tab.props.headerClassName, tab.props.className);
       var id = this.state.id + '_header_' + index;
       var ariaControls = this.state.id + '_content_' + index;
       var tabIndex = tab.props.disabled ? -1 : null;
       var header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React.createElement("span", {
         className: "p-accordion-header-text"
       }, tab.props.header);
+      var icon = selected ? this.props.collapseIcon : this.props.expandIcon;
       return /*#__PURE__*/React.createElement("div", {
-        className: tabHeaderClass,
-        style: tab.props.headerStyle
+        className: className,
+        style: style
       }, /*#__PURE__*/React.createElement("a", {
         href: '#' + ariaControls,
         id: id,
@@ -281,14 +289,19 @@ var Accordion = /*#__PURE__*/function (_Component2) {
           return _this2.onTabHeaderClick(event, tab, index);
         },
         tabIndex: tabIndex
-      }, /*#__PURE__*/React.createElement("span", {
-        className: iconClassName
+      }, IconUtils.getJSXIcon(icon, {
+        className: 'p-accordion-toggle-icon'
+      }, {
+        props: this.props,
+        selected: selected
       }), header));
     }
   }, {
     key: "renderTabContent",
     value: function renderTabContent(tab, selected, index) {
-      var className = classNames('p-toggleable-content', tab.props.contentClassName);
+      var style = _objectSpread(_objectSpread({}, tab.props.contentStyle || {}), tab.props.style || {});
+
+      var className = classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
       var id = this.state.id + '_content_' + index;
       var toggleableContentRef = /*#__PURE__*/React.createRef();
       return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -305,7 +318,7 @@ var Accordion = /*#__PURE__*/function (_Component2) {
         ref: toggleableContentRef,
         id: id,
         className: className,
-        style: tab.props.contentStyle,
+        style: style,
         role: "region",
         "aria-labelledby": this.state.id + '_header_' + index
       }, /*#__PURE__*/React.createElement("div", {
@@ -332,7 +345,7 @@ var Accordion = /*#__PURE__*/function (_Component2) {
       var _this3 = this;
 
       return React.Children.map(this.props.children, function (tab, index) {
-        if (tab && tab.type === AccordionTab) {
+        if (_this3.shouldTabRender(tab)) {
           return _this3.renderTab(tab, index);
         }
       });

package/accordion/accordion.esm.min.js

@@ -1 +1 @@
-import e,{Component as t}from"react";import{UniqueComponentId as n,classNames as r,ObjectUtils as o,CSSTransition as a}from"primereact/core";function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function c(e){if(Array.isArray(e))return i(e)}function l(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function s(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}function p(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function d(e,t){return(d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&d(e,t)}function b(e){return(b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){if(t&&("object"===b(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return y(e)}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){g(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function j(e){var t=S();return function(){var n,r=v(e);if(t){var o=v(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function S(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var w=function(e){h(r,t);var n=j(r);function r(){return f(this,r),n.apply(this,arguments)}return r}();g(w,"defaultProps",{header:null,disabled:!1,headerStyle:null,headerClassName:null,headerTemplate:null,contentStyle:null,contentClassName:null});var x=function(i){h(v,t);var d,b,y,m=j(v);function v(e){var t;f(this,v);var n={id:(t=m.call(this,e)).props.id};return t.props.onTabChange||(n=T(T({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.contentWrappers=[],t}return d=v,(b=[{key:"onTabHeaderClick",value:function(e,t,n){if(!t.props.disabled){var r=this.isSelected(n),o=null;if(this.props.multiple){var a=(this.props.onTabChange?this.props.activeIndex:this.state.activeIndex)||[];o=a=r?a.filter((function(e){return e!==n})):[].concat(c(u=a)||l(u)||s(u)||p(),[n])}else o=r?null:n;var i=r?this.props.onTabClose:this.props.onTabOpen;i&&i({originalEvent:e,index:n}),this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:o}):this.setState({activeIndex:o})}var u;e.preventDefault()}},{key:"isSelected",value:function(e){var t=this.props.onTabChange?this.props.activeIndex:this.state.activeIndex;return this.props.multiple?t&&t.indexOf(e)>=0:t===e}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:n()})}},{key:"renderTabHeader",value:function(t,n,a){var i,c=this,l=r("p-accordion-header",{"p-highlight":n,"p-disabled":t.props.disabled},t.props.headerClassName),s=r("p-accordion-toggle-icon",(g(i={},"".concat(this.props.expandIcon),!n),g(i,"".concat(this.props.collapseIcon),n),i)),p=this.state.id+"_header_"+a,u=this.state.id+"_content_"+a,f=t.props.disabled?-1:null,d=t.props.headerTemplate?o.getJSXElement(t.props.headerTemplate,t.props):e.createElement("span",{className:"p-accordion-header-text"},t.props.header);return e.createElement("div",{className:l,style:t.props.headerStyle},e.createElement("a",{href:"#"+u,id:p,className:"p-accordion-header-link","aria-controls":u,role:"tab","aria-expanded":n,onClick:function(e){return c.onTabHeaderClick(e,t,a)},tabIndex:f},e.createElement("span",{className:s}),d))}},{key:"renderTabContent",value:function(t,n,o){var i=r("p-toggleable-content",t.props.contentClassName),c=this.state.id+"_content_"+o,l=e.createRef();return e.createElement(a,{nodeRef:l,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:n,unmountOnExit:!0,options:this.props.transitionOptions},e.createElement("div",{ref:l,id:c,className:i,style:t.props.contentStyle,role:"region","aria-labelledby":this.state.id+"_header_"+o},e.createElement("div",{className:"p-accordion-content"},t.props.children)))}},{key:"renderTab",value:function(t,n){var o=this.isSelected(n),a=this.renderTabHeader(t,o,n),i=this.renderTabContent(t,o,n),c=r("p-accordion-tab",{"p-accordion-tab-active":o});return e.createElement("div",{key:t.props.header,className:c},a,i)}},{key:"renderTabs",value:function(){var t=this;return e.Children.map(this.props.children,(function(e,n){if(e&&e.type===w)return t.renderTab(e,n)}))}},{key:"render",value:function(){var t=this,n=r("p-accordion p-component",this.props.className),o=this.renderTabs();return e.createElement("div",{ref:function(e){return t.container=e},id:this.state.id,className:n,style:this.props.style},o)}}])&&u(d.prototype,b),y&&u(d,y),v}();g(x,"defaultProps",{id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:"pi pi-chevron-right",collapseIcon:"pi pi-chevron-down",transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null});export{x as Accordion,w as AccordionTab};
+import e,{Component as t}from"react";import{UniqueComponentId as r,classNames as n,ObjectUtils as o,IconUtils as a}from"primereact/utils";import{CSSTransition as i}from"primereact/csstransition";function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(e){if(Array.isArray(e))return s(e)}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e,t){if(e){if("string"==typeof e)return s(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(e,t):void 0}}function u(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){return h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},h(e,t)}function b(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&h(e,t)}function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function m(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e,t){if(t&&("object"===y(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return m(e)}function g(e){return g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},g(e)}function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?T(Object(r),!0).forEach((function(t){O(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):T(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function j(e){var t=w();return function(){var r,n=g(e);if(t){var o=g(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return v(this,r)}}function w(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var x=function(e){b(n,t);var r=j(n);function n(){return d(this,n),r.apply(this,arguments)}return n}();O(x,"defaultProps",{header:null,disabled:!1,style:null,className:null,headerStyle:null,headerClassName:null,headerTemplate:null,contentStyle:null,contentClassName:null});var C=function(s){b(g,t);var h,y,m,v=j(g);function g(e){var t;d(this,g);var r={id:(t=v.call(this,e)).props.id};return t.props.onTabChange||(r=S(S({},r),{},{activeIndex:e.activeIndex})),t.state=r,t}return h=g,(y=[{key:"shouldTabRender",value:function(e){return e&&e.type===x}},{key:"onTabHeaderClick",value:function(e,t,r){if(!t.props.disabled){var n=this.isSelected(r),o=null;if(this.props.multiple){var a=(this.props.onTabChange?this.props.activeIndex:this.state.activeIndex)||[];o=a=n?a.filter((function(e){return e!==r})):[].concat(l(s=a)||c(s)||p(s)||u(),[r])}else o=n?null:r;var i=n?this.props.onTabClose:this.props.onTabOpen;i&&i({originalEvent:e,index:r}),this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:o}):this.setState({activeIndex:o})}var s;e.preventDefault()}},{key:"isSelected",value:function(e){var t=this.props.onTabChange?this.props.activeIndex:this.state.activeIndex;return this.props.multiple?t&&t.indexOf(e)>=0:t===e}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:r()})}},{key:"renderTabHeader",value:function(t,r,i){var s=this,l=S(S({},t.props.headerStyle||{}),t.props.style||{}),c=n("p-accordion-header",{"p-highlight":r,"p-disabled":t.props.disabled},t.props.headerClassName,t.props.className),p=this.state.id+"_header_"+i,u=this.state.id+"_content_"+i,f=t.props.disabled?-1:null,d=t.props.headerTemplate?o.getJSXElement(t.props.headerTemplate,t.props):e.createElement("span",{className:"p-accordion-header-text"},t.props.header);return e.createElement("div",{className:c,style:l},e.createElement("a",{href:"#"+u,id:p,className:"p-accordion-header-link","aria-controls":u,role:"tab","aria-expanded":r,onClick:function(e){return s.onTabHeaderClick(e,t,i)},tabIndex:f},a.getJSXIcon(r?this.props.collapseIcon:this.props.expandIcon,{className:"p-accordion-toggle-icon"},{props:this.props,selected:r}),d))}},{key:"renderTabContent",value:function(t,r,o){var a=S(S({},t.props.contentStyle||{}),t.props.style||{}),s=n("p-toggleable-content",t.props.contentClassName,t.props.className),l=this.state.id+"_content_"+o,c=e.createRef();return e.createElement(i,{nodeRef:c,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:r,unmountOnExit:!0,options:this.props.transitionOptions},e.createElement("div",{ref:c,id:l,className:s,style:a,role:"region","aria-labelledby":this.state.id+"_header_"+o},e.createElement("div",{className:"p-accordion-content"},t.props.children)))}},{key:"renderTab",value:function(t,r){var o=this.isSelected(r),a=this.renderTabHeader(t,o,r),i=this.renderTabContent(t,o,r),s=n("p-accordion-tab",{"p-accordion-tab-active":o});return e.createElement("div",{key:t.props.header,className:s},a,i)}},{key:"renderTabs",value:function(){var t=this;return e.Children.map(this.props.children,(function(e,r){if(t.shouldTabRender(e))return t.renderTab(e,r)}))}},{key:"render",value:function(){var t=this,r=n("p-accordion p-component",this.props.className),o=this.renderTabs();return e.createElement("div",{ref:function(e){return t.container=e},id:this.state.id,className:r,style:this.props.style},o)}}])&&f(h.prototype,y),m&&f(h,m),g}();O(C,"defaultProps",{id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:"pi pi-chevron-right",collapseIcon:"pi pi-chevron-down",transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null});export{C as Accordion,x as AccordionTab};

package/accordion/accordion.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.accordion = (function (exports, React, core) {
+this.primereact.accordion = (function (exports, React, utils, csstransition) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -167,6 +167,8 @@ this.primereact.accordion = (function (exports, React, core) {
   _defineProperty(AccordionTab, "defaultProps", {
     header: null,
     disabled: false,
+    style: null,
+    className: null,
     headerStyle: null,
     headerClassName: null,
     headerTemplate: null,
@@ -196,11 +198,15 @@ this.primereact.accordion = (function (exports, React, core) {
       }
 
       _this.state = state;
-      _this.contentWrappers = [];
       return _this;
     }
 
     _createClass(Accordion, [{
+      key: "shouldTabRender",
+      value: function shouldTabRender(tab) {
+        return tab && tab.type === AccordionTab;
+      }
+    }, {
       key: "onTabHeaderClick",
       value: function onTabHeaderClick(event, tab, index) {
         if (!tab.props.disabled) {
@@ -251,31 +257,32 @@ this.primereact.accordion = (function (exports, React, core) {
       value: function componentDidMount() {
         if (!this.state.id) {
           this.setState({
-            id: core.UniqueComponentId()
+            id: utils.UniqueComponentId()
           });
         }
       }
     }, {
       key: "renderTabHeader",
       value: function renderTabHeader(tab, selected, index) {
-        var _classNames,
-            _this2 = this;
+        var _this2 = this;
 
-        var tabHeaderClass = core.classNames('p-accordion-header', {
+        var style = _objectSpread(_objectSpread({}, tab.props.headerStyle || {}), tab.props.style || {});
+
+        var className = utils.classNames('p-accordion-header', {
           'p-highlight': selected,
           'p-disabled': tab.props.disabled
-        }, tab.props.headerClassName);
-        var iconClassName = core.classNames('p-accordion-toggle-icon', (_classNames = {}, _defineProperty(_classNames, "".concat(this.props.expandIcon), !selected), _defineProperty(_classNames, "".concat(this.props.collapseIcon), selected), _classNames));
+        }, tab.props.headerClassName, tab.props.className);
         var id = this.state.id + '_header_' + index;
         var ariaControls = this.state.id + '_content_' + index;
         var tabIndex = tab.props.disabled ? -1 : null;
-        var header = tab.props.headerTemplate ? core.ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React__default['default'].createElement("span", {
+        var header = tab.props.headerTemplate ? utils.ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-accordion-header-text"
         }, tab.props.header);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: tabHeaderClass,
-          style: tab.props.headerStyle
-        }, /*#__PURE__*/React__default['default'].createElement("a", {
+        var icon = selected ? this.props.collapseIcon : this.props.expandIcon;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: className,
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement("a", {
           href: '#' + ariaControls,
           id: id,
           className: "p-accordion-header-link",
@@ -286,17 +293,22 @@ this.primereact.accordion = (function (exports, React, core) {
             return _this2.onTabHeaderClick(event, tab, index);
           },
           tabIndex: tabIndex
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: iconClassName
+        }, utils.IconUtils.getJSXIcon(icon, {
+          className: 'p-accordion-toggle-icon'
+        }, {
+          props: this.props,
+          selected: selected
         }), header));
       }
     }, {
       key: "renderTabContent",
       value: function renderTabContent(tab, selected, index) {
-        var className = core.classNames('p-toggleable-content', tab.props.contentClassName);
+        var style = _objectSpread(_objectSpread({}, tab.props.contentStyle || {}), tab.props.style || {});
+
+        var className = utils.classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
         var id = this.state.id + '_content_' + index;
-        var toggleableContentRef = /*#__PURE__*/React__default['default'].createRef();
-        return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+        var toggleableContentRef = /*#__PURE__*/React__default["default"].createRef();
+        return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
           nodeRef: toggleableContentRef,
           classNames: "p-toggleable-content",
           timeout: {
@@ -306,14 +318,14 @@ this.primereact.accordion = (function (exports, React, core) {
           in: selected,
           unmountOnExit: true,
           options: this.props.transitionOptions
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           ref: toggleableContentRef,
           id: id,
           className: className,
-          style: tab.props.contentStyle,
+          style: style,
           role: "region",
           "aria-labelledby": this.state.id + '_header_' + index
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-accordion-content"
         }, tab.props.children)));
       }
@@ -323,10 +335,10 @@ this.primereact.accordion = (function (exports, React, core) {
         var selected = this.isSelected(index);
         var tabHeader = this.renderTabHeader(tab, selected, index);
         var tabContent = this.renderTabContent(tab, selected, index);
-        var tabClassName = core.classNames('p-accordion-tab', {
+        var tabClassName = utils.classNames('p-accordion-tab', {
           'p-accordion-tab-active': selected
         });
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           key: tab.props.header,
           className: tabClassName
         }, tabHeader, tabContent);
@@ -336,8 +348,8 @@ this.primereact.accordion = (function (exports, React, core) {
       value: function renderTabs() {
         var _this3 = this;
 
-        return React__default['default'].Children.map(this.props.children, function (tab, index) {
-          if (tab && tab.type === AccordionTab) {
+        return React__default["default"].Children.map(this.props.children, function (tab, index) {
+          if (_this3.shouldTabRender(tab)) {
             return _this3.renderTab(tab, index);
           }
         });
@@ -347,9 +359,9 @@ this.primereact.accordion = (function (exports, React, core) {
       value: function render() {
         var _this4 = this;
 
-        var className = core.classNames('p-accordion p-component', this.props.className);
+        var className = utils.classNames('p-accordion p-component', this.props.className);
         var tabs = this.renderTabs();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
             return _this4.container = el;
           },
@@ -384,4 +396,4 @@ this.primereact.accordion = (function (exports, React, core) {
 
   return exports;
 
-}({}, React, primereact.core));
+})({}, React, primereact.utils, primereact.csstransition);