primereact 9.3.1 → 9.4.0

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