primereact 9.3.1 → 9.4.0

package/panel/panel.cjs.js

@@ -9,6 +9,7 @@ var minus = require('primereact/icons/minus');
 var plus = require('primereact/icons/plus');
 var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,21 +31,6 @@ 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 _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -100,12 +86,14 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var PanelBase = {
+var PanelBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Panel',
     id: null,
     header: null,
     headerTemplate: null,
+    footer: null,
+    footerTemplate: null,
     toggleable: null,
     style: null,
     className: null,
@@ -118,14 +106,8 @@ var PanelBase = {
     onCollapse: null,
     onToggle: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, PanelBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, PanelBase.defaultProps);
   }
-};
+});
 
 var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var props = PanelBase.getProps(inProps);
@@ -142,6 +124,14 @@ var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
   var headerId = idState + '_header';
   var contentId = idState + '_content';
+  var _PanelBase$setMetaDat = PanelBase.setMetaData({
+      props: props,
+      state: {
+        id: idState,
+        collapsed: collapsed
+      }
+    }),
+    ptm = _PanelBase$setMetaDat.ptm;
   var toggle = function toggle(event) {
     if (props.toggleable) {
       collapsed ? expand(event) : collapse(event);
@@ -188,19 +178,21 @@ var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var createToggleIcon = function createToggleIcon() {
     if (props.toggleable) {
       var buttonId = idState + '_label';
-      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, null) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, null);
-      var toggleIcon = utils.IconUtils.getJSXIcon(icon, undefined, {
+      var togglerProps = utils.mergeProps({
+        className: 'p-panel-header-icon p-panel-toggler p-link',
+        onClick: toggle,
+        id: buttonId,
+        'aria-controls': contentId,
+        'aria-expanded': !collapsed,
+        role: 'tab'
+      }, ptm('toggler'));
+      var togglerIconProps = utils.mergeProps(ptm('togglericon'));
+      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, togglerIconProps);
+      var toggleIcon = utils.IconUtils.getJSXIcon(icon, togglerIconProps, {
         props: props,
         collapsed: collapsed
       });
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        className: "p-panel-header-icon p-panel-toggler p-link",
-        onClick: toggle,
-        id: buttonId,
-        "aria-controls": contentId,
-        "aria-expanded": !collapsed,
-        role: "tab"
-      }, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      return /*#__PURE__*/React__namespace.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
     return null;
   };
@@ -208,16 +200,19 @@ var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var header = utils.ObjectUtils.getJSXElement(props.header, props);
     var icons = utils.ObjectUtils.getJSXElement(props.icons, props);
     var togglerElement = createToggleIcon();
-    var titleElement = /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-panel-title",
-      id: headerId
-    }, header);
-    var iconsElement = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-panel-icons"
-    }, icons, togglerElement);
-    var content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-panel-header"
-    }, titleElement, iconsElement);
+    var titleProps = utils.mergeProps({
+      id: headerId,
+      className: 'p-panel-title'
+    }, ptm('title'));
+    var titleElement = /*#__PURE__*/React__namespace.createElement("span", titleProps, header);
+    var iconsProps = utils.mergeProps({
+      className: 'p-panel-icons'
+    }, ptm('icons'));
+    var iconsElement = /*#__PURE__*/React__namespace.createElement("div", iconsProps, icons, togglerElement);
+    var headerProps = utils.mergeProps({
+      className: 'p-panel-header'
+    }, ptm('header'));
+    var content = /*#__PURE__*/React__namespace.createElement("div", headerProps, titleElement, iconsElement);
     if (props.headerTemplate) {
       var defaultContentOptions = {
         className: 'p-panel-header',
@@ -239,6 +234,17 @@ var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     return null;
   };
   var createContent = function createContent() {
+    var toggleableContentProps = utils.mergeProps({
+      ref: contentRef,
+      className: 'p-toggleable-content',
+      'aria-hidden': collapsed,
+      role: 'region',
+      id: contentId,
+      'aria-labelledby': headerId
+    }, ptm('toggleablecontent'));
+    var contentProps = utils.mergeProps({
+      className: 'p-panel-content'
+    }, ptm('content'));
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: contentRef,
       classNames: "p-toggleable-content",
@@ -249,29 +255,38 @@ var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
       "in": !collapsed,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: contentRef,
-      className: "p-toggleable-content",
-      "aria-hidden": collapsed,
-      role: "region",
-      id: contentId,
-      "aria-labelledby": headerId
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-panel-content"
-    }, props.children)));
+    }, /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)));
   };
-  var otherProps = PanelBase.getOtherProps(props);
-  var className = utils.classNames('p-panel p-component', {
-    'p-panel-toggleable': props.toggleable
-  }, props.className);
+  var createFooter = function createFooter() {
+    var footer = utils.ObjectUtils.getJSXElement(props.footer, props);
+    var footerProps = utils.mergeProps({
+      className: 'p-panel-footer'
+    }, ptm('footer'));
+    var content = /*#__PURE__*/React__namespace.createElement("div", footerProps, footer);
+    if (props.footerTemplate) {
+      var defaultContentOptions = {
+        className: 'p-panel-footer',
+        element: content,
+        props: props
+      };
+      return utils.ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+    } else if (props.footer) {
+      return content;
+    }
+    return null;
+  };
+  var rootProps = utils.mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: utils.classNames('p-panel p-component', {
+      'p-panel-toggleable': props.toggleable
+    }, props.className)
+  }, PanelBase.getOtherProps(props), ptm('root'));
   var header = createHeader();
   var content = createContent();
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    id: props.id,
-    ref: elementRef,
-    className: className,
-    style: props.style
-  }, otherProps), header, content);
+  var footer = createFooter();
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer);
 });
 Panel.displayName = 'Panel';
 

package/panel/panel.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/csstransition"),n=require("primereact/hooks"),l=require("primereact/icons/minus"),r=require("primereact/icons/plus"),a=require("primereact/ripple"),o=require("primereact/utils");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=i(e);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},s.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,a,o,i=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=a.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw r}}return i}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function d(e,t){if(e){if("string"==typeof e)return f(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)?f(e,t):void 0}}function g(){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 m(e,t){return u(e)||p(e,t)||d(e,t)||g()}var b={defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0},getProps:function(e){return o.ObjectUtils.getMergedProps(e,b.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,b.defaultProps)}},v=c.forwardRef((function(e,i){var u=b.getProps(e),p=m(c.useState(u.id),2),f=p[0],d=p[1],g=m(c.useState(u.collapsed),2),v=g[0],h=g[1],y=c.useRef(i),E=c.useRef(null),O=!!u.toggleable&&(u.onToggle?u.collapsed:v),j=f+"_header",P=f+"_content",N=function(e){u.toggleable&&(O?I(e):S(e),u.onToggle&&u.onToggle({originalEvent:e,value:!O})),e.preventDefault()},I=function(e){u.onToggle||h(!1),u.onExpand&&u.onExpand(e)},S=function(e){u.onToggle||h(!0),u.onCollapse&&u.onCollapse(e)};c.useImperativeHandle(i,(function(){return{props:u,getElement:function(){return y.current},getContent:function(){return E.current}}})),c.useEffect((function(){o.ObjectUtils.combinedRefs(y,i)}),[y,i]),n.useMountEffect((function(){f||d(o.UniqueComponentId())}));var T=function(){if(u.toggleable){var e=f+"_label",t=o.IconUtils.getJSXIcon(O?u.expandIcon||c.createElement(r.PlusIcon,null):u.collapseIcon||c.createElement(l.MinusIcon,null),void 0,{props:u,collapsed:O});return c.createElement("button",{className:"p-panel-header-icon p-panel-toggler p-link",onClick:N,id:e,"aria-controls":P,"aria-expanded":!O,role:"tab"},t,c.createElement(a.Ripple,null))}return null},C=b.getOtherProps(u),x=o.classNames("p-panel p-component",{"p-panel-toggleable":u.toggleable},u.className),U=function(){var e=o.ObjectUtils.getJSXElement(u.header,u),t=o.ObjectUtils.getJSXElement(u.icons,u),n=T(),l=c.createElement("span",{className:"p-panel-title",id:j},e),r=c.createElement("div",{className:"p-panel-icons"},t,n),a=c.createElement("div",{className:"p-panel-header"},l,r);return u.headerTemplate?o.ObjectUtils.getJSXElement(u.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:N,titleElement:l,iconsElement:r,togglerElement:n,element:a,props:u,collapsed:O}):u.header||u.toggleable?a:null}(),_=c.createElement(t.CSSTransition,{nodeRef:E,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!O,unmountOnExit:!0,options:u.transitionOptions},c.createElement("div",{ref:E,className:"p-toggleable-content","aria-hidden":O,role:"region",id:P,"aria-labelledby":j},c.createElement("div",{className:"p-panel-content"},u.children)));return c.createElement("div",s({id:u.id,ref:y,className:x,style:u.style},C),U,_)}));v.displayName="Panel",exports.Panel=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/csstransition"),n=require("primereact/hooks"),l=require("primereact/icons/minus"),r=require("primereact/icons/plus"),o=require("primereact/ripple"),a=require("primereact/utils"),i=require("primereact/componentbase");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(e);function p(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,o,a,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=o.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw r}}return i}}function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function g(e,t){if(e){if("string"==typeof e)return m(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)?m(e,t):void 0}}function f(){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 d(e,t){return p(e)||u(e,t)||g(e,t)||f()}var b=i.ComponentBase.extend({defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,footer:null,footerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0}}),E=s.forwardRef((function(e,i){var c=b.getProps(e),p=d(s.useState(c.id),2),u=p[0],m=p[1],g=d(s.useState(c.collapsed),2),f=g[0],E=g[1],v=s.useRef(i),h=s.useRef(null),y=!!c.toggleable&&(c.onToggle?c.collapsed:f),O=u+"_header",P=u+"_content",N=b.setMetaData({props:c,state:{id:u,collapsed:y}}).ptm,j=function(e){c.toggleable&&(y?T(e):S(e),c.onToggle&&c.onToggle({originalEvent:e,value:!y})),e.preventDefault()},T=function(e){c.onToggle||E(!1),c.onExpand&&c.onExpand(e)},S=function(e){c.onToggle||E(!0),c.onCollapse&&c.onCollapse(e)};s.useImperativeHandle(i,(function(){return{props:c,getElement:function(){return v.current},getContent:function(){return h.current}}})),s.useEffect((function(){a.ObjectUtils.combinedRefs(v,i)}),[v,i]),n.useMountEffect((function(){u||m(a.UniqueComponentId())}));var C,I,x=function(){if(c.toggleable){var e=a.mergeProps({className:"p-panel-header-icon p-panel-toggler p-link",onClick:j,id:u+"_label","aria-controls":P,"aria-expanded":!y,role:"tab"},N("toggler")),t=a.mergeProps(N("togglericon")),n=a.IconUtils.getJSXIcon(y?c.expandIcon||s.createElement(r.PlusIcon,t):c.collapseIcon||s.createElement(l.MinusIcon,t),t,{props:c,collapsed:y});return s.createElement("button",e,n,s.createElement(o.Ripple,null))}return null},q=a.mergeProps({id:u,ref:v,style:c.style,className:a.classNames("p-panel p-component",{"p-panel-toggleable":c.toggleable},c.className)},b.getOtherProps(c),N("root")),U=function(){var e=a.ObjectUtils.getJSXElement(c.header,c),t=a.ObjectUtils.getJSXElement(c.icons,c),n=x(),l=a.mergeProps({id:O,className:"p-panel-title"},N("title")),r=s.createElement("span",l,e),o=a.mergeProps({className:"p-panel-icons"},N("icons")),i=s.createElement("div",o,t,n),p=a.mergeProps({className:"p-panel-header"},N("header")),u=s.createElement("div",p,r,i);return c.headerTemplate?a.ObjectUtils.getJSXElement(c.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:j,titleElement:r,iconsElement:i,togglerElement:n,element:u,props:c,collapsed:y}):c.header||c.toggleable?u:null}(),_=(C=a.mergeProps({ref:h,className:"p-toggleable-content","aria-hidden":y,role:"region",id:P,"aria-labelledby":O},N("toggleablecontent")),I=a.mergeProps({className:"p-panel-content"},N("content")),s.createElement(t.CSSTransition,{nodeRef:h,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!y,unmountOnExit:!0,options:c.transitionOptions},s.createElement("div",C,s.createElement("div",I,c.children)))),k=function(){var e=a.ObjectUtils.getJSXElement(c.footer,c),t=a.mergeProps({className:"p-panel-footer"},N("footer")),n=s.createElement("div",t,e);return c.footerTemplate?a.ObjectUtils.getJSXElement(c.footerTemplate,{className:"p-panel-footer",element:n,props:c}):c.footer?n:null}();return s.createElement("div",q,U,_,k)}));E.displayName="Panel",exports.Panel=E;

package/panel/panel.d.ts

@@ -9,7 +9,9 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type PanelPassThroughType<T> = PassThroughType<T, PanelPassThroughMethodOptions>;
 
 /**
  * Custom panel header template options.
@@ -65,6 +67,23 @@ interface PanelHeaderTemplateOptions {
      */
     collapsed: boolean;
 }
+/**
+ * Custom panel footer template options.
+ */
+interface PanelFooterTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+}
 
 /**
  * Custom toggle event.
@@ -82,6 +101,72 @@ interface PanelToggleEvent {
     value: boolean;
 }
 
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface PanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: PanelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icons' DOM element.
+     */
+    icons?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: PanelPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the togglericon's DOM element.
+     */
+    togglerIcon?: PanelPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface PanelState {
+    /**
+     * Current id state.
+     */
+    id: string;
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Panel component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
@@ -91,11 +176,20 @@ export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * Custom header template of the panel.
      */
     header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template of the panel.
+     */
+    footer?: React.ReactNode | undefined;
     /**
      * Header template of the panel to customize more.
      * @param {PanelHeaderTemplateOptions} options - Options to customize the header template.
      */
     headerTemplate?: React.ReactNode | ((options: PanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Footer template of the panel to customize more.
+     * @param {PanelFooterTemplateOptions} options - Options to customize the footer template.
+     */
+    footerTemplate?: React.ReactNode | ((options: PanelFooterTemplateOptions) => React.ReactNode);
     /**
      * Defines if content of panel can be expanded and collapsed.
      * @defaultValue false
@@ -143,6 +237,11 @@ export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelPassThroughOptions}
+     */
+    pt?: PanelPassThroughOptions;
 }
 
 /**

package/panel/panel.esm.js

@@ -4,22 +4,8 @@ import { useMountEffect } from 'primereact/hooks';
 import { MinusIcon } from 'primereact/icons/minus';
 import { PlusIcon } from 'primereact/icons/plus';
 import { Ripple } from 'primereact/ripple';
-import { ObjectUtils, UniqueComponentId, classNames, IconUtils } from 'primereact/utils';
-
-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);
-}
+import { ObjectUtils, UniqueComponentId, mergeProps, classNames, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -76,12 +62,14 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var PanelBase = {
+var PanelBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Panel',
     id: null,
     header: null,
     headerTemplate: null,
+    footer: null,
+    footerTemplate: null,
     toggleable: null,
     style: null,
     className: null,
@@ -94,14 +82,8 @@ var PanelBase = {
     onCollapse: null,
     onToggle: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, PanelBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, PanelBase.defaultProps);
   }
-};
+});
 
 var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = PanelBase.getProps(inProps);
@@ -118,6 +100,14 @@ var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
   var headerId = idState + '_header';
   var contentId = idState + '_content';
+  var _PanelBase$setMetaDat = PanelBase.setMetaData({
+      props: props,
+      state: {
+        id: idState,
+        collapsed: collapsed
+      }
+    }),
+    ptm = _PanelBase$setMetaDat.ptm;
   var toggle = function toggle(event) {
     if (props.toggleable) {
       collapsed ? expand(event) : collapse(event);
@@ -164,19 +154,21 @@ var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createToggleIcon = function createToggleIcon() {
     if (props.toggleable) {
       var buttonId = idState + '_label';
-      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, null) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, null);
-      var toggleIcon = IconUtils.getJSXIcon(icon, undefined, {
+      var togglerProps = mergeProps({
+        className: 'p-panel-header-icon p-panel-toggler p-link',
+        onClick: toggle,
+        id: buttonId,
+        'aria-controls': contentId,
+        'aria-expanded': !collapsed,
+        role: 'tab'
+      }, ptm('toggler'));
+      var togglerIconProps = mergeProps(ptm('togglericon'));
+      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, togglerIconProps);
+      var toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, {
         props: props,
         collapsed: collapsed
       });
-      return /*#__PURE__*/React.createElement("button", {
-        className: "p-panel-header-icon p-panel-toggler p-link",
-        onClick: toggle,
-        id: buttonId,
-        "aria-controls": contentId,
-        "aria-expanded": !collapsed,
-        role: "tab"
-      }, toggleIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -184,16 +176,19 @@ var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var header = ObjectUtils.getJSXElement(props.header, props);
     var icons = ObjectUtils.getJSXElement(props.icons, props);
     var togglerElement = createToggleIcon();
-    var titleElement = /*#__PURE__*/React.createElement("span", {
-      className: "p-panel-title",
-      id: headerId
-    }, header);
-    var iconsElement = /*#__PURE__*/React.createElement("div", {
-      className: "p-panel-icons"
-    }, icons, togglerElement);
-    var content = /*#__PURE__*/React.createElement("div", {
-      className: "p-panel-header"
-    }, titleElement, iconsElement);
+    var titleProps = mergeProps({
+      id: headerId,
+      className: 'p-panel-title'
+    }, ptm('title'));
+    var titleElement = /*#__PURE__*/React.createElement("span", titleProps, header);
+    var iconsProps = mergeProps({
+      className: 'p-panel-icons'
+    }, ptm('icons'));
+    var iconsElement = /*#__PURE__*/React.createElement("div", iconsProps, icons, togglerElement);
+    var headerProps = mergeProps({
+      className: 'p-panel-header'
+    }, ptm('header'));
+    var content = /*#__PURE__*/React.createElement("div", headerProps, titleElement, iconsElement);
     if (props.headerTemplate) {
       var defaultContentOptions = {
         className: 'p-panel-header',
@@ -215,6 +210,17 @@ var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return null;
   };
   var createContent = function createContent() {
+    var toggleableContentProps = mergeProps({
+      ref: contentRef,
+      className: 'p-toggleable-content',
+      'aria-hidden': collapsed,
+      role: 'region',
+      id: contentId,
+      'aria-labelledby': headerId
+    }, ptm('toggleablecontent'));
+    var contentProps = mergeProps({
+      className: 'p-panel-content'
+    }, ptm('content'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: contentRef,
       classNames: "p-toggleable-content",
@@ -225,29 +231,38 @@ var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       "in": !collapsed,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: contentRef,
-      className: "p-toggleable-content",
-      "aria-hidden": collapsed,
-      role: "region",
-      id: contentId,
-      "aria-labelledby": headerId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-panel-content"
-    }, props.children)));
+    }, /*#__PURE__*/React.createElement("div", toggleableContentProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)));
   };
-  var otherProps = PanelBase.getOtherProps(props);
-  var className = classNames('p-panel p-component', {
-    'p-panel-toggleable': props.toggleable
-  }, props.className);
+  var createFooter = function createFooter() {
+    var footer = ObjectUtils.getJSXElement(props.footer, props);
+    var footerProps = mergeProps({
+      className: 'p-panel-footer'
+    }, ptm('footer'));
+    var content = /*#__PURE__*/React.createElement("div", footerProps, footer);
+    if (props.footerTemplate) {
+      var defaultContentOptions = {
+        className: 'p-panel-footer',
+        element: content,
+        props: props
+      };
+      return ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+    } else if (props.footer) {
+      return content;
+    }
+    return null;
+  };
+  var rootProps = mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: classNames('p-panel p-component', {
+      'p-panel-toggleable': props.toggleable
+    }, props.className)
+  }, PanelBase.getOtherProps(props), ptm('root'));
   var header = createHeader();
   var content = createContent();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: props.id,
-    ref: elementRef,
-    className: className,
-    style: props.style
-  }, otherProps), header, content);
+  var footer = createFooter();
+  return /*#__PURE__*/React.createElement("div", rootProps, header, content, footer);
 });
 Panel.displayName = 'Panel';
 

package/panel/panel.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{CSSTransition as n}from"primereact/csstransition";import{useMountEffect as t}from"primereact/hooks";import{MinusIcon as l}from"primereact/icons/minus";import{PlusIcon as r}from"primereact/icons/plus";import{Ripple as a}from"primereact/ripple";import{ObjectUtils as o,UniqueComponentId as i,classNames as c,IconUtils as p}from"primereact/utils";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e},s.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function m(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var l,r,a,o,i=[],c=!0,p=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(l=a.call(t)).done)&&(i.push(l.value),i.length!==n);c=!0);}catch(e){p=!0,r=e}finally{try{if(!c&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(p)throw r}}return i}}function g(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,l=new Array(n);t<n;t++)l[t]=e[t];return l}function f(e,n){if(e){if("string"==typeof e)return g(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?g(e,n):void 0}}function d(){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 b(e,n){return u(e)||m(e,n)||f(e,n)||d()}var h={defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0},getProps:function(e){return o.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return o.getDiffProps(e,h.defaultProps)}},v=e.forwardRef((function(u,m){var g=h.getProps(u),f=b(e.useState(g.id),2),d=f[0],v=f[1],E=b(e.useState(g.collapsed),2),y=E[0],N=E[1],O=e.useRef(m),P=e.useRef(null),T=!!g.toggleable&&(g.onToggle?g.collapsed:y),S=d+"_header",x=d+"_content",C=function(e){g.toggleable&&(T?I(e):j(e),g.onToggle&&g.onToggle({originalEvent:e,value:!T})),e.preventDefault()},I=function(e){g.onToggle||N(!1),g.onExpand&&g.onExpand(e)},j=function(e){g.onToggle||N(!0),g.onCollapse&&g.onCollapse(e)};e.useImperativeHandle(m,(function(){return{props:g,getElement:function(){return O.current},getContent:function(){return P.current}}})),e.useEffect((function(){o.combinedRefs(O,m)}),[O,m]),t((function(){d||v(i())}));var w=function(){if(g.toggleable){var n=d+"_label",t=p.getJSXIcon(T?g.expandIcon||e.createElement(r,null):g.collapseIcon||e.createElement(l,null),void 0,{props:g,collapsed:T});return e.createElement("button",{className:"p-panel-header-icon p-panel-toggler p-link",onClick:C,id:n,"aria-controls":x,"aria-expanded":!T,role:"tab"},t,e.createElement(a,null))}return null},A=h.getOtherProps(g),k=c("p-panel p-component",{"p-panel-toggleable":g.toggleable},g.className),R=function(){var n=o.getJSXElement(g.header,g),t=o.getJSXElement(g.icons,g),l=w(),r=e.createElement("span",{className:"p-panel-title",id:S},n),a=e.createElement("div",{className:"p-panel-icons"},t,l),i=e.createElement("div",{className:"p-panel-header"},r,a);return g.headerTemplate?o.getJSXElement(g.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:C,titleElement:r,iconsElement:a,togglerElement:l,element:i,props:g,collapsed:T}):g.header||g.toggleable?i:null}(),_=e.createElement(n,{nodeRef:P,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!T,unmountOnExit:!0,options:g.transitionOptions},e.createElement("div",{ref:P,className:"p-toggleable-content","aria-hidden":T,role:"region",id:x,"aria-labelledby":S},e.createElement("div",{className:"p-panel-content"},g.children)));return e.createElement("div",s({id:g.id,ref:O,className:k,style:g.style},A),R,_)}));v.displayName="Panel";export{v as Panel};
+import*as e from"react";import{CSSTransition as t}from"primereact/csstransition";import{useMountEffect as n}from"primereact/hooks";import{MinusIcon as l}from"primereact/icons/minus";import{PlusIcon as r}from"primereact/icons/plus";import{Ripple as o}from"primereact/ripple";import{ObjectUtils as a,UniqueComponentId as i,mergeProps as c,classNames as p,IconUtils as s}from"primereact/utils";import{ComponentBase as u}from"primereact/componentbase";function m(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,o,a,i=[],c=!0,p=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=o.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){p=!0,r=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(p)throw r}}return i}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function d(e,t){if(e){if("string"==typeof e)return g(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)?g(e,t):void 0}}function E(){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 b(e,t){return m(e)||f(e,t)||d(e,t)||E()}var h=u.extend({defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,footer:null,footerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0}}),v=e.forwardRef((function(u,m){var f=h.getProps(u),g=b(e.useState(f.id),2),d=g[0],E=g[1],v=b(e.useState(f.collapsed),2),y=v[0],N=v[1],T=e.useRef(m),S=e.useRef(null),x=!!f.toggleable&&(f.onToggle?f.collapsed:y),C=d+"_header",I=d+"_content",O=h.setMetaData({props:f,state:{id:d,collapsed:x}}).ptm,A=function(e){f.toggleable&&(x?J(e):P(e),f.onToggle&&f.onToggle({originalEvent:e,value:!x})),e.preventDefault()},J=function(e){f.onToggle||N(!1),f.onExpand&&f.onExpand(e)},P=function(e){f.onToggle||N(!0),f.onCollapse&&f.onCollapse(e)};e.useImperativeHandle(m,(function(){return{props:f,getElement:function(){return T.current},getContent:function(){return S.current}}})),e.useEffect((function(){a.combinedRefs(T,m)}),[T,m]),n((function(){d||E(i())}));var X,j,k=function(){if(f.toggleable){var t=c({className:"p-panel-header-icon p-panel-toggler p-link",onClick:A,id:d+"_label","aria-controls":I,"aria-expanded":!x,role:"tab"},O("toggler")),n=c(O("togglericon")),a=s.getJSXIcon(x?f.expandIcon||e.createElement(r,n):f.collapseIcon||e.createElement(l,n),n,{props:f,collapsed:x});return e.createElement("button",t,a,e.createElement(o,null))}return null},w=c({id:d,ref:T,style:f.style,className:p("p-panel p-component",{"p-panel-toggleable":f.toggleable},f.className)},h.getOtherProps(f),O("root")),R=function(){var t=a.getJSXElement(f.header,f),n=a.getJSXElement(f.icons,f),l=k(),r=c({id:C,className:"p-panel-title"},O("title")),o=e.createElement("span",r,t),i=c({className:"p-panel-icons"},O("icons")),p=e.createElement("div",i,n,l),s=c({className:"p-panel-header"},O("header")),u=e.createElement("div",s,o,p);return f.headerTemplate?a.getJSXElement(f.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:A,titleElement:o,iconsElement:p,togglerElement:l,element:u,props:f,collapsed:x}):f.header||f.toggleable?u:null}(),_=(X=c({ref:S,className:"p-toggleable-content","aria-hidden":x,role:"region",id:I,"aria-labelledby":C},O("toggleablecontent")),j=c({className:"p-panel-content"},O("content")),e.createElement(t,{nodeRef:S,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!x,unmountOnExit:!0,options:f.transitionOptions},e.createElement("div",X,e.createElement("div",j,f.children)))),D=function(){var t=a.getJSXElement(f.footer,f),n=c({className:"p-panel-footer"},O("footer")),l=e.createElement("div",n,t);return f.footerTemplate?a.getJSXElement(f.footerTemplate,{className:"p-panel-footer",element:l,props:f}):f.footer?l:null}();return e.createElement("div",w,R,_,D)}));v.displayName="Panel";export{v as Panel};