primereact 9.3.0 → 9.4.0

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};

package/panel/panel.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.panel = (function (exports, React, csstransition, hooks, minus, plus, ripple, utils) {
+this.primereact.panel = (function (exports, React, csstransition, hooks, minus, plus, ripple, utils, componentbase) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -22,21 +22,6 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
 
   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;
   }
@@ -92,12 +77,14 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     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,
@@ -110,14 +97,8 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       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);
@@ -134,6 +115,14 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     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);
@@ -180,19 +169,21 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     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;
     };
@@ -200,16 +191,19 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       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',
@@ -231,6 +225,17 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       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",
@@ -241,29 +246,38 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
         "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';
 
@@ -273,4 +287,4 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
 
   return exports;
 
-})({}, React, primereact.csstransition, primereact.hooks, primereact.icons/minus, primereact.icons/plus, primereact.ripple, primereact.utils);
+})({}, React, primereact.csstransition, primereact.hooks, primereact.icons.minus, primereact.icons.plus, primereact.ripple, primereact.utils, primereact.componentbase);

package/panel/panel.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.panel=function(e,t,n,l,r,a,o,i){"use strict";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(t);function u(){return u=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},u.apply(this,arguments)}function p(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,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 d(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 d(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)?d(e,t):void 0}}function m(){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 p(e)||f(e,t)||g(e,t)||m()}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 i.ObjectUtils.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return i.ObjectUtils.getDiffProps(e,h.defaultProps)}},v=s.forwardRef((function(e,t){var c=h.getProps(e),p=b(s.useState(c.id),2),f=p[0],d=p[1],g=b(s.useState(c.collapsed),2),m=g[0],v=g[1],y=s.useRef(t),E=s.useRef(null),O=!!c.toggleable&&(c.onToggle?c.collapsed:m),j=f+"_header",P=f+"_content",N=function(e){c.toggleable&&(O?I(e):S(e),c.onToggle&&c.onToggle({originalEvent:e,value:!O})),e.preventDefault()},I=function(e){c.onToggle||v(!1),c.onExpand&&c.onExpand(e)},S=function(e){c.onToggle||v(!0),c.onCollapse&&c.onCollapse(e)};s.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return y.current},getContent:function(){return E.current}}})),s.useEffect((function(){i.ObjectUtils.combinedRefs(y,t)}),[y,t]),l.useMountEffect((function(){f||d(i.UniqueComponentId())}));var T=function(){if(c.toggleable){var e=f+"_label",t=i.IconUtils.getJSXIcon(O?c.expandIcon||s.createElement(a.PlusIcon,null):c.collapseIcon||s.createElement(r.MinusIcon,null),void 0,{props:c,collapsed:O});return s.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,s.createElement(o.Ripple,null))}return null},C=h.getOtherProps(c),x=i.classNames("p-panel p-component",{"p-panel-toggleable":c.toggleable},c.className),U=function(){var e=i.ObjectUtils.getJSXElement(c.header,c),t=i.ObjectUtils.getJSXElement(c.icons,c),n=T(),l=s.createElement("span",{className:"p-panel-title",id:j},e),r=s.createElement("div",{className:"p-panel-icons"},t,n),a=s.createElement("div",{className:"p-panel-header"},l,r);return c.headerTemplate?i.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:N,titleElement:l,iconsElement:r,togglerElement:n,element:a,props:c,collapsed:O}):c.header||c.toggleable?a:null}(),_=s.createElement(n.CSSTransition,{nodeRef:E,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!O,unmountOnExit:!0,options:c.transitionOptions},s.createElement("div",{ref:E,className:"p-toggleable-content","aria-hidden":O,role:"region",id:P,"aria-labelledby":j},s.createElement("div",{className:"p-panel-content"},c.children)));return s.createElement("div",u({id:c.id,ref:y,className:x,style:c.style},C),U,_)}));return v.displayName="Panel",e.Panel=v,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.icons/minus,primereact.icons/plus,primereact.ripple,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.panel=function(e,t,n,l,r,o,a,i,c){"use strict";function s(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 p=s(t);function u(e){if(Array.isArray(e))return e}function m(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 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 f(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 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,t){return u(e)||m(e,t)||f(e,t)||d()}var E=c.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}}),h=p.forwardRef((function(e,t){var c=E.getProps(e),s=b(p.useState(c.id),2),u=s[0],m=s[1],g=b(p.useState(c.collapsed),2),f=g[0],d=g[1],h=p.useRef(t),v=p.useRef(null),y=!!c.toggleable&&(c.onToggle?c.collapsed:f),O=u+"_header",P=u+"_content",N=E.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||d(!1),c.onExpand&&c.onExpand(e)},S=function(e){c.onToggle||d(!0),c.onCollapse&&c.onCollapse(e)};p.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return h.current},getContent:function(){return v.current}}})),p.useEffect((function(){i.ObjectUtils.combinedRefs(h,t)}),[h,t]),l.useMountEffect((function(){u||m(i.UniqueComponentId())}));var C,I,x=function(){if(c.toggleable){var e=i.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=i.mergeProps(N("togglericon")),n=i.IconUtils.getJSXIcon(y?c.expandIcon||p.createElement(o.PlusIcon,t):c.collapseIcon||p.createElement(r.MinusIcon,t),t,{props:c,collapsed:y});return p.createElement("button",e,n,p.createElement(a.Ripple,null))}return null},U=i.mergeProps({id:u,ref:h,style:c.style,className:i.classNames("p-panel p-component",{"p-panel-toggleable":c.toggleable},c.className)},E.getOtherProps(c),N("root")),_=function(){var e=i.ObjectUtils.getJSXElement(c.header,c),t=i.ObjectUtils.getJSXElement(c.icons,c),n=x(),l=i.mergeProps({id:O,className:"p-panel-title"},N("title")),r=p.createElement("span",l,e),o=i.mergeProps({className:"p-panel-icons"},N("icons")),a=p.createElement("div",o,t,n),s=i.mergeProps({className:"p-panel-header"},N("header")),u=p.createElement("div",s,r,a);return c.headerTemplate?i.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:a,togglerElement:n,element:u,props:c,collapsed:y}):c.header||c.toggleable?u:null}(),R=(C=i.mergeProps({ref:v,className:"p-toggleable-content","aria-hidden":y,role:"region",id:P,"aria-labelledby":O},N("toggleablecontent")),I=i.mergeProps({className:"p-panel-content"},N("content")),p.createElement(n.CSSTransition,{nodeRef:v,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!y,unmountOnExit:!0,options:c.transitionOptions},p.createElement("div",C,p.createElement("div",I,c.children)))),k=function(){var e=i.ObjectUtils.getJSXElement(c.footer,c),t=i.mergeProps({className:"p-panel-footer"},N("footer")),n=p.createElement("div",t,e);return c.footerTemplate?i.ObjectUtils.getJSXElement(c.footerTemplate,{className:"p-panel-footer",element:n,props:c}):c.footer?n:null}();return p.createElement("div",U,_,R,k)}));return h.displayName="Panel",e.Panel=h,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.icons.minus,primereact.icons.plus,primereact.ripple,primereact.utils,primereact.componentbase);

package/panelmenu/panelmenu.js

@@ -496,4 +496,4 @@ this.primereact.panelmenu = (function (exports, React, csstransition, hooks, uti
 
   return exports;
 
-})({}, React, primereact.csstransition, primereact.hooks, primereact.utils, primereact.icons/chevronright, primereact.icons/chevrondown);
+})({}, React, primereact.csstransition, primereact.hooks, primereact.utils, primereact.icons.chevronright, primereact.icons.chevrondown);