primereact 9.3.0 → 9.4.0

package/README.md

@@ -9,7 +9,7 @@
 
 # PrimeReact
 
-PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://www.primereact.org) for live showcase and documentation.
+PrimeReact is available at [npm](https://www.npmjs.com/package/primereact).
 
 ## Download
 
@@ -17,60 +17,44 @@ PrimeReact is available at npm, if you have an existing application run the foll
 
 ```
 // with npm
-npm install primereact primeicons
+npm install primereact
 
 // with yarn
-yarn add primereact primeicons
+yarn add primereact
 ```
+
 Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies and some components have optional dependencies.
 
 ## Styles
-Theme, core and icons are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. In upcoming version 10, a css-in-js approach will be implemented along with migration to SVG icons to remove the requirement to install css files.
-
-```
-//theme
-import "primereact/resources/themes/lara-light-indigo/theme.css";     
-    
-//core
-import "primereact/resources/primereact.min.css";
-
-//icons
-import "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.
+Theme and core are the necessary css files of the components, visit the [Themes](https://primereact.org/theming) section for the complete list of available themes to choose from.
 
 ```javascript
+//theme
 import 'primereact/resources/themes/lara-light-indigo/theme.css';
+
+//core
 import 'primereact/resources/primereact.min.css';
-import 'primeicons/primeicons.css';
 ```
 
-## Import
+Each PrimeReact theme has its own font family so it is suggested to apply it to your application for a unified look.
 
-#### Module
-```javascript
-//import { ComponentName } from 'primereact/{componentname}';
-import { Dialog } from 'primereact/dialog';
-import { Accordion, AccordionTab } from 'primereact/accordion';
+```
+body {
+    font-family: var(--font-family);
+}
 ```
 
-#### CDN
+## Usage
 
-```javascript
-<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>
-```
+Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
 
-```javascript
-const { Dialog } = primereact.dialog;
-const { Accordion, AccordionTab } = primereact.accordion;
-```
+#### Module
 
-Import all components and structures
 ```javascript
-<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
+//import { ComponentName } from 'primereact/{componentname}';
+import { Dialog } from 'primereact/dialog';
+import { Accordion, AccordionTab } from 'primereact/accordion';
 ```
 
 ## QuickStart
@@ -80,13 +64,12 @@ Import all components and structures
 Next.js
 PrimeReact has first class support for SSR and Next.JS, in fact this website is also built with Next.js
 
-[![Getting Started with NextJS and PrimeReact](http://img.youtube.com/vi/OrRffCobuts/0.jpg)](http://www.youtube.com/watch?v=OrRffCobuts "Getting Started with NextJS and PrimeReact")
+[![Getting Started with NextJS and PrimeReact](http://img.youtube.com/vi/OrRffCobuts/0.jpg)](http://www.youtube.com/watch?v=OrRffCobuts 'Getting Started with NextJS and PrimeReact')
 
 CRA
 Create-React-App is the official scaffolding project by Facebook
 
-[![Getting Started with PrimeReact](http://img.youtube.com/vi/Prz3phy2bHY/0.jpg)](http://www.youtube.com/watch?v=Prz3phy2bHY "Getting Started with PrimeReact")
-
+[![Getting Started with PrimeReact](http://img.youtube.com/vi/Prz3phy2bHY/0.jpg)](http://www.youtube.com/watch?v=Prz3phy2bHY 'Getting Started with PrimeReact')
 
 ## TypeScript
 

package/accordion/accordion.cjs.js

@@ -7,6 +7,7 @@ var api = require('primereact/api');
 var csstransition = require('primereact/csstransition');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var chevronright = require('primereact/icons/chevronright');
 var chevrondown = require('primereact/icons/chevrondown');
 
@@ -30,19 +31,35 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  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 _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function _typeof(obj) {
@@ -86,37 +103,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  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 _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -157,7 +143,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var AccordionBase = {
+var AccordionBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Accordion',
     id: null,
@@ -172,15 +158,9 @@ var AccordionBase = {
     onTabClose: null,
     onTabChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, AccordionBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, AccordionBase.defaultProps);
   }
-};
-var AccordionTabBase = {
+});
+var AccordionTabBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'AccordionTab',
     className: null,
@@ -204,7 +184,7 @@ var AccordionTabBase = {
   getCOtherProps: function getCOtherProps(tab) {
     return utils.ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
   }
-};
+});
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -221,6 +201,22 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     setActiveIndexState = _React$useState4[1];
   var elementRef = React__namespace.useRef(null);
   var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
+  var metaData = {
+    props: props,
+    state: {
+      id: idState,
+      activeIndex: activeIndexState
+    }
+  };
+  var _AccordionBase$setMet = AccordionBase.setMetaData(_objectSpread({}, metaData)),
+    ptm = _AccordionBase$setMet.ptm,
+    ptmo = _AccordionBase$setMet.ptmo;
+  var getTabPT = function getTabPT(tab, key) {
+    return ptmo(getTabProp(tab, 'pt'), key, {
+      props: tab.props,
+      parent: metaData
+    });
+  };
   var getTabProp = function getTabProp(tab, name) {
     return AccordionTabBase.getCProp(tab, name);
   };
@@ -282,38 +278,38 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var headerId = idState + '_header_' + index;
     var ariaControls = idState + '_content_' + index;
     var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
-    var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-accordion-header-text"
-    }, getTabProp(tab, 'header'));
+    var headerTitleProps = utils.mergeProps({
+      className: 'p-accordion-header-text'
+    }, getTabPT(tab, 'headertitle'));
+    var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, getTabProp(tab, 'header'));
     var iconClassName = 'p-accordion-toggle-icon';
-    var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
+    var headerIconProps = utils.mergeProps({
       className: iconClassName
-    }) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
-      className: iconClassName
-    });
-    var toggleIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, getTabPT(tab, 'headericon'));
+    var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerIconProps);
+    var toggleIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, headerIconProps), {
       props: props,
       selected: selected
     });
     var label = selected ? api.ariaLabel('collapseLabel') : api.ariaLabel('expandLabel');
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var headerProps = utils.mergeProps({
       className: className,
       style: style
-    }, /*#__PURE__*/React__namespace.createElement("a", {
-      href: '#' + ariaControls,
+    }, getTabPT(tab, 'header'));
+    var headerActionProps = utils.mergeProps({
       id: headerId,
-      className: "p-accordion-header-link",
-      "aria-controls": ariaControls,
-      role: "tab",
-      "aria-expanded": selected,
+      href: '#' + ariaControls,
+      className: 'p-accordion-header-link',
+      role: 'tab',
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
         return onTabHeaderClick(e, tab, index);
       },
-      tabIndex: tabIndex,
-      "aria-label": label
-    }, toggleIcon, header));
+      'aria-label': label,
+      'aria-controls': ariaControls,
+      'aria-expanded': selected
+    }, getTabPT(tab, 'headeraction'));
+    return /*#__PURE__*/React__namespace.createElement("div", headerProps, /*#__PURE__*/React__namespace.createElement("a", headerActionProps, toggleIcon, header));
   };
   var createTabContent = function createTabContent(tab, selected, index) {
     var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
@@ -321,6 +317,17 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var contentId = idState + '_content_' + index;
     var ariaLabelledby = idState + '_header_' + index;
     var contentRef = /*#__PURE__*/React__namespace.createRef();
+    var toggleableContentProps = utils.mergeProps({
+      id: contentId,
+      ref: contentRef,
+      className: className,
+      style: style,
+      role: 'region',
+      'aria-labelledby': ariaLabelledby
+    }, getTabPT(tab, 'toggleablecontent'));
+    var contentProps = utils.mergeProps({
+      className: 'p-accordion-content'
+    }, getTabPT(tab, 'content'));
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: contentRef,
       classNames: "p-toggleable-content",
@@ -331,46 +338,37 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       "in": selected,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: contentRef,
-      id: contentId,
-      className: className,
-      style: style,
-      role: "region",
-      "aria-labelledby": ariaLabelledby
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-accordion-content"
-    }, getTabProp(tab, 'children'))));
+    }, /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, getTabProp(tab, 'children'))));
   };
   var createTab = function createTab(tab, index) {
     if (utils.ObjectUtils.isValidChild(tab, 'AccordionTab')) {
       var key = idState + '_' + index;
       var selected = isSelected(index);
-      var _otherProps = AccordionTabBase.getCOtherProps(tab);
       var tabHeader = createTabHeader(tab, selected, index);
       var tabContent = createTabContent(tab, selected, index);
       var tabClassName = utils.classNames('p-accordion-tab', {
         'p-accordion-tab-active': selected
       });
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var _rootProps = utils.mergeProps({
         key: key,
         className: tabClassName
-      }, _otherProps), tabHeader, tabContent);
+      }, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root'));
+      return /*#__PURE__*/React__namespace.createElement("div", _rootProps, tabHeader, tabContent);
     }
     return null;
   };
   var createTabs = function createTabs() {
     return React__namespace.Children.map(props.children, createTab);
   };
-  var otherProps = AccordionBase.getOtherProps(props);
   var className = utils.classNames('p-accordion p-component', props.className);
   var tabs = createTabs();
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var rootProps = utils.mergeProps({
     id: idState,
     ref: elementRef,
     className: className,
     style: props.style
-  }, otherProps), tabs);
+  }, AccordionBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, tabs);
 });
 AccordionTab.displayName = 'AccordionTab';
 Accordion.displayName = 'Accordion';

package/accordion/accordion.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/csstransition"),n=require("primereact/hooks"),o=require("primereact/utils"),a=require("primereact/icons/chevronright"),l=require("primereact/icons/chevrondown");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=i(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function s(e){return s="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},s(e)}function p(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=p(e,"string");return"symbol"===s(t)?t:String(t)}function d(e,t,r){return(t=f(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(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 m(e){if(Array.isArray(e))return b(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function v(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function g(){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 h(e){if(Array.isArray(e))return e}function O(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,l,i=[],c=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return i}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function j(e,t){return h(e)||O(e,t)||v(e,t)||P()}var S={defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0},getProps:function(e){return o.ObjectUtils.getMergedProps(e,S.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,S.defaultProps)}},C={defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return o.ObjectUtils.getComponentProp(e,t,C.defaultProps)},getCProps:function(e){return o.ObjectUtils.getComponentProps(e,C.defaultProps)},getCOtherProps:function(e){return o.ObjectUtils.getComponentDiffProps(e,C.defaultProps)}};function N(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 E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?N(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var I=function(){},T=c.forwardRef((function(e,i){var s=S.getProps(e),p=j(c.useState(s.id),2),f=p[0],d=p[1],b=j(c.useState(s.activeIndex),2),h=b[0],O=b[1],P=c.useRef(null),N=s.onTabChange?s.activeIndex:h,I=function(e,t){return C.getCProp(e,t)},T=function(e,t,r){if(!I(t,"disabled")){var n=w(r),o=null;if(s.multiple){var a=N||[];o=n?a.filter((function(e){return e!==r})):[].concat(m(i=a)||y(i)||v(i)||g(),[r])}else o=n?null:r;var l=n?s.onTabClose:s.onTabOpen;l&&l({originalEvent:e,index:r}),s.onTabChange?s.onTabChange({originalEvent:e,index:o}):O(o)}var i;e.preventDefault()},w=function(e){return s.multiple?N&&N.some((function(t){return t===e})):N===e};if(c.useImperativeHandle(i,(function(){return{props:s,getElement:function(){return P.current}}})),n.useMountEffect((function(){f||d(o.UniqueComponentId())})),!f)return null;var x=function(e,r,n){var i=E(E({},I(e,"style")||{}),I(e,"headerStyle")||{}),u=o.classNames("p-accordion-header",{"p-highlight":r,"p-disabled":I(e,"disabled")},I(e,"headerClassName"),I(e,"className")),p=f+"_header_"+n,d=f+"_content_"+n,b=I(e,"disabled")?-1:I(e,"tabIndex"),m=I(e,"headerTemplate")?o.ObjectUtils.getJSXElement(I(e,"headerTemplate"),C.getCProps(e)):c.createElement("span",{className:"p-accordion-header-text"},I(e,"header")),y="p-accordion-toggle-icon",v=o.IconUtils.getJSXIcon(r?s.collapseIcon||c.createElement(l.ChevronDownIcon,{className:y}):s.expandIcon||c.createElement(a.ChevronRightIcon,{className:y}),{className:y},{props:s,selected:r}),g=t.ariaLabel(r?"collapseLabel":"expandLabel");return c.createElement("div",{className:u,style:i},c.createElement("a",{href:"#"+d,id:p,className:"p-accordion-header-link","aria-controls":d,role:"tab","aria-expanded":r,onClick:function(t){return T(t,e,n)},tabIndex:b,"aria-label":g},v,m))},_=function(e,t,n){var a=E(E({},I(e,"style")||{}),I(e,"contentStyle")||{}),l=o.classNames("p-toggleable-content",I(e,"contentClassName"),I(e,"className")),i=f+"_content_"+n,u=f+"_header_"+n,p=c.createRef();return c.createElement(r.CSSTransition,{nodeRef:p,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:t,unmountOnExit:!0,options:s.transitionOptions},c.createElement("div",{ref:p,id:i,className:l,style:a,role:"region","aria-labelledby":u},c.createElement("div",{className:"p-accordion-content"},I(e,"children"))))},A=function(e,t){if(o.ObjectUtils.isValidChild(e,"AccordionTab")){var r=f+"_"+t,n=w(t),a=C.getCOtherProps(e),l=x(e,n,t),i=_(e,n,t),s=o.classNames("p-accordion-tab",{"p-accordion-tab-active":n});return c.createElement("div",u({key:r,className:s},a),l,i)}return null},U=S.getOtherProps(s),D=o.classNames("p-accordion p-component",s.className),q=c.Children.map(s.children,A);return c.createElement("div",u({id:f,ref:P,className:D,style:s.style},U),q)}));I.displayName="AccordionTab",T.displayName="Accordion",exports.Accordion=T,exports.AccordionTab=I;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/csstransition"),n=require("primereact/hooks"),o=require("primereact/utils"),a=require("primereact/componentbase"),l=require("primereact/icons/chevronright"),i=require("primereact/icons/chevrondown");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=c(e);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 p(e){if(Array.isArray(e))return s(e)}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(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 m(){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 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},b(e)}function y(e,t){if("object"!==b(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function g(e){var t=y(e,"string");return"symbol"===b(t)?t:String(t)}function h(e,t,r){return(t=g(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e){if(Array.isArray(e))return e}function O(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,l,i=[],c=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return i}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function j(e,t){return v(e)||O(e,t)||f(e,t)||P()}var C=a.ComponentBase.extend({defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0}}),S=a.ComponentBase.extend({defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return o.ObjectUtils.getComponentProp(e,t,S.defaultProps)},getCProps:function(e){return o.ObjectUtils.getComponentProps(e,S.defaultProps)},getCOtherProps:function(e){return o.ObjectUtils.getComponentDiffProps(e,S.defaultProps)}});function N(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 E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?N(Object(r),!0).forEach((function(t){h(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var x=function(){},I=u.forwardRef((function(e,a){var c=C.getProps(e),s=j(u.useState(c.id),2),b=s[0],y=s[1],g=j(u.useState(c.activeIndex),2),h=g[0],v=g[1],O=u.useRef(null),P=c.onTabChange?c.activeIndex:h,N={props:c,state:{id:b,activeIndex:h}},x=C.setMetaData(E({},N)),I=x.ptm,T=x.ptmo,w=function(e,t){return T(_(e,"pt"),t,{props:e.props,parent:N})},_=function(e,t){return S.getCProp(e,t)},A=function(e,t,r){if(!_(t,"disabled")){var n=q(r),o=null;if(c.multiple){var a=P||[];o=n?a.filter((function(e){return e!==r})):[].concat(p(i=a)||d(i)||f(i)||m(),[r])}else o=n?null:r;var l=n?c.onTabClose:c.onTabOpen;l&&l({originalEvent:e,index:r}),c.onTabChange?c.onTabChange({originalEvent:e,index:o}):v(o)}var i;e.preventDefault()},q=function(e){return c.multiple?P&&P.some((function(t){return t===e})):P===e};if(u.useImperativeHandle(a,(function(){return{props:c,getElement:function(){return O.current}}})),n.useMountEffect((function(){b||y(o.UniqueComponentId())})),!b)return null;var D=function(e,r,n){var a=E(E({},_(e,"style")||{}),_(e,"headerStyle")||{}),s=o.classNames("p-accordion-header",{"p-highlight":r,"p-disabled":_(e,"disabled")},_(e,"headerClassName"),_(e,"className")),p=b+"_header_"+n,d=b+"_content_"+n,f=_(e,"disabled")?-1:_(e,"tabIndex"),m=o.mergeProps({className:"p-accordion-header-text"},w(e,"headertitle")),y=_(e,"headerTemplate")?o.ObjectUtils.getJSXElement(_(e,"headerTemplate"),S.getCProps(e)):u.createElement("span",m,_(e,"header")),g=o.mergeProps({className:"p-accordion-toggle-icon"},w(e,"headericon")),h=o.IconUtils.getJSXIcon(r?c.collapseIcon||u.createElement(i.ChevronDownIcon,g):c.expandIcon||u.createElement(l.ChevronRightIcon,g),E({},g),{props:c,selected:r}),v=t.ariaLabel(r?"collapseLabel":"expandLabel"),O=o.mergeProps({className:s,style:a},w(e,"header")),P=o.mergeProps({id:p,href:"#"+d,className:"p-accordion-header-link",role:"tab",tabIndex:f,onClick:function(t){return A(t,e,n)},"aria-label":v,"aria-controls":d,"aria-expanded":r},w(e,"headeraction"));return u.createElement("div",O,u.createElement("a",P,h,y))},U=function(e,t,n){var a=E(E({},_(e,"style")||{}),_(e,"contentStyle")||{}),l=o.classNames("p-toggleable-content",_(e,"contentClassName"),_(e,"className")),i=b+"_content_"+n,s=b+"_header_"+n,p=u.createRef(),d=o.mergeProps({id:i,ref:p,className:l,style:a,role:"region","aria-labelledby":s},w(e,"toggleablecontent")),f=o.mergeProps({className:"p-accordion-content"},w(e,"content"));return u.createElement(r.CSSTransition,{nodeRef:p,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:t,unmountOnExit:!0,options:c.transitionOptions},u.createElement("div",d,u.createElement("div",f,_(e,"children"))))},k=function(e,t){if(o.ObjectUtils.isValidChild(e,"AccordionTab")){var r=b+"_"+t,n=q(t),a=D(e,n,t),l=U(e,n,t),i=o.classNames("p-accordion-tab",{"p-accordion-tab-active":n}),c=o.mergeProps({key:r,className:i},S.getCOtherProps(e),w(e,"root"));return u.createElement("div",c,a,l)}return null},M=o.classNames("p-accordion p-component",c.className),R=u.Children.map(c.children,k),L=o.mergeProps({id:b,ref:O,className:M,style:c.style},C.getOtherProps(c),I("root"));return u.createElement("div",L,R)}));x.displayName="AccordionTab",I.displayName="Accordion",exports.Accordion=I,exports.AccordionTab=x;

package/accordion/accordion.d.ts

@@ -13,7 +13,53 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type AccordionPassThroughType<T> = PassThroughType<T, AccordionPassThroughMethodOptions>;
+export declare type AccordionTabPassThroughType<T> = PassThroughType<T, AccordionTabPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionTabPassThroughMethodOptions {
+    props: AccordionTabProps;
+    parent: AccordionPassThroughMethodOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionTabProps.pt}
+ */
+export interface AccordionTabPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the headeraction's DOM element.
+     */
+    headerAction?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the headericon's DOM element.
+     */
+    headerIcon?: AccordionTabPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the headertitle's DOM element.
+     */
+    headerTitle?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
 
 /**
  * Defines valid properties in AccordionTab component.
@@ -67,6 +113,11 @@ interface AccordionTabProps {
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionTabPassThroughOptions}
+     */
+    pt?: AccordionTabPassThroughOptions;
 }
 
 /**
@@ -115,6 +166,39 @@ export interface AccordionTabChangeEvent {
     index: number | number[];
 }
 
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    props: AccordionProps;
+    state: AccordionState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state.
+     */
+    activeIndex: number | number[];
+}
+
 /**
  * Defines valid properties in Accordion component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
@@ -163,6 +247,11 @@ export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: AccordionPassThroughOptions;
 }
 
 /**