primereact 9.3.0 → 9.4.0

package/button/button.cjs.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var spinner = require('primereact/icons/spinner');
 var ripple = require('primereact/ripple');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
-var spinner = require('primereact/icons/spinner');
+var componentbase = require('primereact/componentbase');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -84,40 +85,41 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var ButtonBase = {
+var ButtonBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Button',
-    label: null,
+    badge: null,
+    badgeClassName: null,
+    className: null,
+    children: undefined,
+    disabled: false,
     icon: null,
     iconPos: 'left',
-    badge: null,
-    severity: null,
-    rounded: false,
-    raised: false,
+    label: null,
+    link: false,
+    loading: false,
+    loadingIcon: null,
     outlined: false,
+    raised: false,
+    rounded: false,
+    severity: null,
+    size: null,
     text: false,
-    link: false,
-    badgeClassName: null,
     tooltip: null,
-    size: null,
     tooltipOptions: null,
-    disabled: false,
-    loading: false,
-    loadingIcon: null,
-    visible: true,
-    children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
+    visible: true
   }
-};
+});
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var _classNames2;
   var props = ButtonBase.getProps(inProps);
+  var _ButtonBase$setMetaDa = ButtonBase.setMetaData({
+      props: props
+    }),
+    ptm = _ButtonBase$setMetaDa.ptm;
   var elementRef = React__namespace.useRef(ref);
   React__namespace.useEffect(function () {
     utils.ObjectUtils.combinedRefs(elementRef, ref);
@@ -126,24 +128,29 @@ var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
     return null;
   }
   var createIcon = function createIcon() {
-    var className = utils.classNames('p-button-icon p-c', _defineProperty({
+    var className = utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
+    var iconsProps = utils.mergeProps({
+      className: className
+    }, ptm('icon'));
+    className = utils.classNames(className, {
       'p-button-loading-icon': props.loading
-    }, "p-button-icon-".concat(props.iconPos), props.label));
-    var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-      className: className,
-      spin: true
-    }) : props.icon;
-    return utils.IconUtils.getJSXIcon(icon, {
+    });
+    var loadingIconProps = utils.mergeProps({
       className: className
-    }, {
+    }, ptm('loadingIcon'));
+    var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+      spin: true
+    })) : props.icon;
+    return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
       props: props
     });
   };
   var createLabel = function createLabel() {
     if (props.label) {
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-button-label p-c"
-      }, props.label);
+      var labelProps = utils.mergeProps({
+        className: 'p-button-label p-c'
+      }, ptm('label'));
+      return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
     }
     return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", {
       className: "p-button-label p-c",
@@ -155,23 +162,23 @@ var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
   var createBadge = function createBadge() {
     if (props.badge) {
       var badgeClassName = utils.classNames('p-badge', props.badgeClassName);
-      return /*#__PURE__*/React__namespace.createElement("span", {
+      var badgeProps = utils.mergeProps({
         className: badgeClassName
-      }, props.badge);
+      }, ptm('badge'));
+      return /*#__PURE__*/React__namespace.createElement("span", badgeProps, props.badge);
     }
     return null;
   };
   var disabled = props.disabled || props.loading;
   var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
-  var otherProps = ButtonBase.getOtherProps(props);
   var sizeMapping = {
     large: 'lg',
     small: 'sm'
   };
   var size = sizeMapping[props.size];
   var className = utils.classNames('p-button p-component', props.className, (_classNames2 = {
-    'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
+    'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
     'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
     'p-disabled': disabled,
     'p-button-loading': props.loading,
@@ -181,18 +188,18 @@ var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
     'p-button-text': props.text,
     'p-button-rounded': props.rounded,
     'p-button-loading-label-only': props.loading && !props.icon && props.label
-  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
+  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
   var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", _extends({
+  var rootProps = utils.mergeProps({
     ref: elementRef,
-    "aria-label": defaultAriaLabel
-  }, otherProps, {
+    'aria-label': defaultAriaLabel,
     className: className,
     disabled: disabled
-  }), icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+  }, ButtonBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));

package/button/button.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/ripple"),n=require("primereact/tooltip"),o=require("primereact/utils"),l=require("primereact/icons/spinner");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a.apply(this,arguments)}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function c(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==u(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function s(e){var t=c(e,"string");return"symbol"===u(t)?t:String(t)}function p(e,t,n){return(t=s(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var b={defaultProps:{__TYPE:"Button",label:null,icon:null,iconPos:"left",badge:null,severity:null,rounded:!1,raised:!1,outlined:!1,text:!1,link:!1,badgeClassName:null,tooltip:null,size:null,tooltipOptions:null,disabled:!1,loading:!1,loadingIcon:null,visible:!0,children:void 0},getProps:function(e){return o.ObjectUtils.getMergedProps(e,b.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,b.defaultProps)}},d=i.memo(i.forwardRef((function(e,r){var u,c=b.getProps(e),s=i.useRef(r);if(i.useEffect((function(){o.ObjectUtils.combinedRefs(s,r)}),[s,r]),!1===c.visible)return null;var d=c.disabled||c.loading,f=!d||c.tooltipOptions&&c.tooltipOptions.showOnDisabled,m=o.ObjectUtils.isNotEmpty(c.tooltip)&&f,g=b.getOtherProps(c),y={large:"lg",small:"sm"}[c.size],v=o.classNames("p-button p-component",c.className,(p(u={"p-button-icon-only":(c.icon||c.loading&&c.loadingIcon)&&!c.label&&!c.children,"p-button-vertical":("top"===c.iconPos||"bottom"===c.iconPos)&&c.label,"p-disabled":d,"p-button-loading":c.loading,"p-button-outlined":c.outlined,"p-button-raised":c.raised,"p-button-link":c.link,"p-button-text":c.text,"p-button-rounded":c.rounded,"p-button-loading-label-only":c.loading&&!c.icon&&c.label},"p-button-loading-".concat(c.iconPos),c.loading&&c.loadingIcon&&c.label),p(u,"p-button-".concat(y),y),p(u,"p-button-".concat(c.severity),c.severity),u)),O=function(){var e=o.classNames("p-button-icon p-c",p({"p-button-loading-icon":c.loading},"p-button-icon-".concat(c.iconPos),c.label));return o.IconUtils.getJSXIcon(c.loading?c.loadingIcon||i.createElement(l.SpinnerIcon,{className:e,spin:!0}):c.icon,{className:e},{props:c})}(),P=c.label?i.createElement("span",{className:"p-button-label p-c"},c.label):!c.children&&!c.label&&i.createElement("span",{className:"p-button-label p-c",dangerouslySetInnerHTML:{__html:"&nbsp;"}}),j=function(){if(c.badge){var e=o.classNames("p-badge",c.badgeClassName);return i.createElement("span",{className:e},c.badge)}return null}();return i.createElement(i.Fragment,null,i.createElement("button",a({ref:s,"aria-label":c.label?c.label+(c.badge?" "+c.badge:""):c["aria-label"]},g,{className:v,disabled:d}),O,P,c.children,j,i.createElement(t.Ripple,null)),m&&i.createElement(n.Tooltip,a({target:s,content:c.tooltip},c.tooltipOptions)))})));d.displayName="Button",exports.Button=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/icons/spinner"),n=require("primereact/ripple"),r=require("primereact/tooltip"),o=require("primereact/utils"),l=require("primereact/componentbase");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 r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=i(e);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function u(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==s(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function p(e){var t=u(e,"string");return"symbol"===s(t)?t:String(t)}function b(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var d=l.ComponentBase.extend({defaultProps:{__TYPE:"Button",badge:null,badgeClassName:null,className:null,children:void 0,disabled:!1,icon:null,iconPos:"left",label:null,link:!1,loading:!1,loadingIcon:null,outlined:!1,raised:!1,rounded:!1,severity:null,size:null,text:!1,tooltip:null,tooltipOptions:null,visible:!0}});function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?m(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var g=a.memo(a.forwardRef((function(e,l){var i,s=d.getProps(e),u=d.setMetaData({props:s}).ptm,p=a.useRef(l);if(a.useEffect((function(){o.ObjectUtils.combinedRefs(p,l)}),[p,l]),!1===s.visible)return null;var m=s.disabled||s.loading,g=!m||s.tooltipOptions&&s.tooltipOptions.showOnDisabled,y=o.ObjectUtils.isNotEmpty(s.tooltip)&&g,O={large:"lg",small:"sm"}[s.size],v=o.classNames("p-button p-component",s.className,(b(i={"p-button-icon-only":(s.icon||s.loading)&&!s.label&&!s.children,"p-button-vertical":("top"===s.iconPos||"bottom"===s.iconPos)&&s.label,"p-disabled":m,"p-button-loading":s.loading,"p-button-outlined":s.outlined,"p-button-raised":s.raised,"p-button-link":s.link,"p-button-text":s.text,"p-button-rounded":s.rounded,"p-button-loading-label-only":s.loading&&!s.icon&&s.label},"p-button-loading-".concat(s.iconPos),s.loading&&s.label),b(i,"p-button-".concat(O),O),b(i,"p-button-".concat(s.severity),s.severity),i)),P=function(){var e=o.classNames("p-button-icon p-c",b({},"p-button-icon-".concat(s.iconPos),s.label)),n=o.mergeProps({className:e},u("icon"));e=o.classNames(e,{"p-button-loading-icon":s.loading});var r=o.mergeProps({className:e},u("loadingIcon")),l=s.loading?s.loadingIcon||a.createElement(t.SpinnerIcon,c({},r,{spin:!0})):s.icon;return o.IconUtils.getJSXIcon(l,f({},n),{props:s})}(),j=function(){if(s.label){var e=o.mergeProps({className:"p-button-label p-c"},u("label"));return a.createElement("span",e,s.label)}return!s.children&&!s.label&&a.createElement("span",{className:"p-button-label p-c",dangerouslySetInnerHTML:{__html:"&nbsp;"}})}(),N=function(){if(s.badge){var e=o.classNames("p-badge",s.badgeClassName),t=o.mergeProps({className:e},u("badge"));return a.createElement("span",t,s.badge)}return null}(),h=o.mergeProps({ref:p,"aria-label":s.label?s.label+(s.badge?" "+s.badge:""):s["aria-label"],className:v,disabled:m},d.getOtherProps(s),u("root"));return a.createElement(a.Fragment,null,a.createElement("button",h,P,j,s.children,N,a.createElement(n.Ripple,null)),y&&a.createElement(r.Tooltip,c({target:p,content:s.tooltip},s.tooltipOptions)))})));g.displayName="Button",exports.Button=g;

package/button/button.d.ts

@@ -9,7 +9,43 @@
  */
 import * as React from 'react';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ButtonPassThroughType<T> = PassThroughType<T, ButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonPassThroughMethodOptions {
+    props: ButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonProps.pt}
+ */
+export interface ButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ButtonPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+}
 
 /**
  * Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.
@@ -102,6 +138,11 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
      * @defaultValue true
      */
     visible?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ButtonPassThroughOptions}
+     */
+    pt?: ButtonPassThroughOptions;
 }
 
 /**

package/button/button.esm.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Ripple } from 'primereact/ripple';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, classNames, IconUtils } from 'primereact/utils';
-import { SpinnerIcon } from 'primereact/icons/spinner';
+import { ObjectUtils, classNames, mergeProps, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -60,40 +61,41 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var ButtonBase = {
+var ButtonBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Button',
-    label: null,
+    badge: null,
+    badgeClassName: null,
+    className: null,
+    children: undefined,
+    disabled: false,
     icon: null,
     iconPos: 'left',
-    badge: null,
-    severity: null,
-    rounded: false,
-    raised: false,
+    label: null,
+    link: false,
+    loading: false,
+    loadingIcon: null,
     outlined: false,
+    raised: false,
+    rounded: false,
+    severity: null,
+    size: null,
     text: false,
-    link: false,
-    badgeClassName: null,
     tooltip: null,
-    size: null,
     tooltipOptions: null,
-    disabled: false,
-    loading: false,
-    loadingIcon: null,
-    visible: true,
-    children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
+    visible: true
   }
-};
+});
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var _classNames2;
   var props = ButtonBase.getProps(inProps);
+  var _ButtonBase$setMetaDa = ButtonBase.setMetaData({
+      props: props
+    }),
+    ptm = _ButtonBase$setMetaDa.ptm;
   var elementRef = React.useRef(ref);
   React.useEffect(function () {
     ObjectUtils.combinedRefs(elementRef, ref);
@@ -102,24 +104,29 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
     return null;
   }
   var createIcon = function createIcon() {
-    var className = classNames('p-button-icon p-c', _defineProperty({
+    var className = classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
+    var iconsProps = mergeProps({
+      className: className
+    }, ptm('icon'));
+    className = classNames(className, {
       'p-button-loading-icon': props.loading
-    }, "p-button-icon-".concat(props.iconPos), props.label));
-    var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
-      className: className,
-      spin: true
-    }) : props.icon;
-    return IconUtils.getJSXIcon(icon, {
+    });
+    var loadingIconProps = mergeProps({
       className: className
-    }, {
+    }, ptm('loadingIcon'));
+    var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
+      spin: true
+    })) : props.icon;
+    return IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
       props: props
     });
   };
   var createLabel = function createLabel() {
     if (props.label) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "p-button-label p-c"
-      }, props.label);
+      var labelProps = mergeProps({
+        className: 'p-button-label p-c'
+      }, ptm('label'));
+      return /*#__PURE__*/React.createElement("span", labelProps, props.label);
     }
     return !props.children && !props.label && /*#__PURE__*/React.createElement("span", {
       className: "p-button-label p-c",
@@ -131,23 +138,23 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
   var createBadge = function createBadge() {
     if (props.badge) {
       var badgeClassName = classNames('p-badge', props.badgeClassName);
-      return /*#__PURE__*/React.createElement("span", {
+      var badgeProps = mergeProps({
         className: badgeClassName
-      }, props.badge);
+      }, ptm('badge'));
+      return /*#__PURE__*/React.createElement("span", badgeProps, props.badge);
     }
     return null;
   };
   var disabled = props.disabled || props.loading;
   var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
-  var otherProps = ButtonBase.getOtherProps(props);
   var sizeMapping = {
     large: 'lg',
     small: 'sm'
   };
   var size = sizeMapping[props.size];
   var className = classNames('p-button p-component', props.className, (_classNames2 = {
-    'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
+    'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
     'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
     'p-disabled': disabled,
     'p-button-loading': props.loading,
@@ -157,18 +164,18 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
     'p-button-text': props.text,
     'p-button-rounded': props.rounded,
     'p-button-loading-label-only': props.loading && !props.icon && props.label
-  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
+  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
   var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
+  var rootProps = mergeProps({
     ref: elementRef,
-    "aria-label": defaultAriaLabel
-  }, otherProps, {
+    'aria-label': defaultAriaLabel,
     className: className,
     disabled: disabled
-  }), icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, ButtonBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));

package/button/button.esm.min.js

@@ -1 +1 @@
-import*as t from"react";import{Ripple as e}from"primereact/ripple";import{Tooltip as n}from"primereact/tooltip";import{ObjectUtils as o,classNames as l,IconUtils as r}from"primereact/utils";import{SpinnerIcon as i}from"primereact/icons/spinner";function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},a.apply(this,arguments)}function u(t){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u(t)}function c(t,e){if("object"!==u(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!==u(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}function p(t){var e=c(t,"string");return"symbol"===u(e)?e:String(e)}function s(t,e,n){return(e=p(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var b={defaultProps:{__TYPE:"Button",label:null,icon:null,iconPos:"left",badge:null,severity:null,rounded:!1,raised:!1,outlined:!1,text:!1,link:!1,badgeClassName:null,tooltip:null,size:null,tooltipOptions:null,disabled:!1,loading:!1,loadingIcon:null,visible:!0,children:void 0},getProps:function(t){return o.getMergedProps(t,b.defaultProps)},getOtherProps:function(t){return o.getDiffProps(t,b.defaultProps)}},d=t.memo(t.forwardRef((function(u,c){var p,d=b.getProps(u),m=t.useRef(c);if(t.useEffect((function(){o.combinedRefs(m,c)}),[m,c]),!1===d.visible)return null;var f=d.disabled||d.loading,g=!f||d.tooltipOptions&&d.tooltipOptions.showOnDisabled,y=o.isNotEmpty(d.tooltip)&&g,v=b.getOtherProps(d),P={large:"lg",small:"sm"}[d.size],h=l("p-button p-component",d.className,(s(p={"p-button-icon-only":(d.icon||d.loading&&d.loadingIcon)&&!d.label&&!d.children,"p-button-vertical":("top"===d.iconPos||"bottom"===d.iconPos)&&d.label,"p-disabled":f,"p-button-loading":d.loading,"p-button-outlined":d.outlined,"p-button-raised":d.raised,"p-button-link":d.link,"p-button-text":d.text,"p-button-rounded":d.rounded,"p-button-loading-label-only":d.loading&&!d.icon&&d.label},"p-button-loading-".concat(d.iconPos),d.loading&&d.loadingIcon&&d.label),s(p,"p-button-".concat(P),P),s(p,"p-button-".concat(d.severity),d.severity),p)),E=function(){var e=l("p-button-icon p-c",s({"p-button-loading-icon":d.loading},"p-button-icon-".concat(d.iconPos),d.label));return r.getJSXIcon(d.loading?d.loadingIcon||t.createElement(i,{className:e,spin:!0}):d.icon,{className:e},{props:d})}(),N=d.label?t.createElement("span",{className:"p-button-label p-c"},d.label):!d.children&&!d.label&&t.createElement("span",{className:"p-button-label p-c",dangerouslySetInnerHTML:{__html:"&nbsp;"}}),O=function(){if(d.badge){var e=l("p-badge",d.badgeClassName);return t.createElement("span",{className:e},d.badge)}return null}();return t.createElement(t.Fragment,null,t.createElement("button",a({ref:m,"aria-label":d.label?d.label+(d.badge?" "+d.badge:""):d["aria-label"]},v,{className:h,disabled:f}),E,N,d.children,O,t.createElement(e,null)),y&&t.createElement(n,a({target:m,content:d.tooltip},d.tooltipOptions)))})));d.displayName="Button";export{d as Button};
+import*as t from"react";import{SpinnerIcon as e}from"primereact/icons/spinner";import{Ripple as n}from"primereact/ripple";import{Tooltip as o}from"primereact/tooltip";import{ObjectUtils as r,classNames as l,mergeProps as i,IconUtils as a}from"primereact/utils";import{ComponentBase as c}from"primereact/componentbase";function p(){return p=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},p.apply(this,arguments)}function u(t){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u(t)}function s(t,e){if("object"!==u(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!==u(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}function b(t){var e=s(t,"string");return"symbol"===u(e)?e:String(e)}function m(t,e,n){return(e=b(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var d=c.extend({defaultProps:{__TYPE:"Button",badge:null,badgeClassName:null,className:null,children:void 0,disabled:!1,icon:null,iconPos:"left",label:null,link:!1,loading:!1,loadingIcon:null,outlined:!1,raised:!1,rounded:!1,severity:null,size:null,text:!1,tooltip:null,tooltipOptions:null,visible:!0}});function f(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function g(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?f(Object(n),!0).forEach((function(e){m(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var y=t.memo(t.forwardRef((function(c,u){var s,b=d.getProps(c),f=d.setMetaData({props:b}).ptm,y=t.useRef(u);if(t.useEffect((function(){r.combinedRefs(y,u)}),[y,u]),!1===b.visible)return null;var v=b.disabled||b.loading,O=!v||b.tooltipOptions&&b.tooltipOptions.showOnDisabled,P=r.isNotEmpty(b.tooltip)&&O,j={large:"lg",small:"sm"}[b.size],h=l("p-button p-component",b.className,(m(s={"p-button-icon-only":(b.icon||b.loading)&&!b.label&&!b.children,"p-button-vertical":("top"===b.iconPos||"bottom"===b.iconPos)&&b.label,"p-disabled":v,"p-button-loading":b.loading,"p-button-outlined":b.outlined,"p-button-raised":b.raised,"p-button-link":b.link,"p-button-text":b.text,"p-button-rounded":b.rounded,"p-button-loading-label-only":b.loading&&!b.icon&&b.label},"p-button-loading-".concat(b.iconPos),b.loading&&b.label),m(s,"p-button-".concat(j),j),m(s,"p-button-".concat(b.severity),b.severity),s)),E=function(){var n=l("p-button-icon p-c",m({},"p-button-icon-".concat(b.iconPos),b.label)),o=i({className:n},f("icon"));n=l(n,{"p-button-loading-icon":b.loading});var r=i({className:n},f("loadingIcon")),c=b.loading?b.loadingIcon||t.createElement(e,p({},r,{spin:!0})):b.icon;return a.getJSXIcon(c,g({},o),{props:b})}(),N=function(){if(b.label){var e=i({className:"p-button-label p-c"},f("label"));return t.createElement("span",e,b.label)}return!b.children&&!b.label&&t.createElement("span",{className:"p-button-label p-c",dangerouslySetInnerHTML:{__html:"&nbsp;"}})}(),w=function(){if(b.badge){var e=l("p-badge",b.badgeClassName),n=i({className:e},f("badge"));return t.createElement("span",n,b.badge)}return null}(),S=i({ref:y,"aria-label":b.label?b.label+(b.badge?" "+b.badge:""):b["aria-label"],className:h,disabled:v},d.getOtherProps(b),f("root"));return t.createElement(t.Fragment,null,t.createElement("button",S,E,N,b.children,w,t.createElement(n,null)),P&&t.createElement(o,p({target:y,content:b.tooltip},b.tooltipOptions)))})));y.displayName="Button";export{y as Button};

package/button/button.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.button = (function (exports, React, ripple, tooltip, utils, spinner) {
+this.primereact.button = (function (exports, React, spinner, ripple, tooltip, utils, componentbase) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -78,40 +78,41 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
     return obj;
   }
 
-  var ButtonBase = {
+  var ButtonBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Button',
-      label: null,
+      badge: null,
+      badgeClassName: null,
+      className: null,
+      children: undefined,
+      disabled: false,
       icon: null,
       iconPos: 'left',
-      badge: null,
-      severity: null,
-      rounded: false,
-      raised: false,
+      label: null,
+      link: false,
+      loading: false,
+      loadingIcon: null,
       outlined: false,
+      raised: false,
+      rounded: false,
+      severity: null,
+      size: null,
       text: false,
-      link: false,
-      badgeClassName: null,
       tooltip: null,
-      size: null,
       tooltipOptions: null,
-      disabled: false,
-      loading: false,
-      loadingIcon: null,
-      visible: true,
-      children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
+      visible: true
     }
-  };
+  });
 
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var _classNames2;
     var props = ButtonBase.getProps(inProps);
+    var _ButtonBase$setMetaDa = ButtonBase.setMetaData({
+        props: props
+      }),
+      ptm = _ButtonBase$setMetaDa.ptm;
     var elementRef = React__namespace.useRef(ref);
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(elementRef, ref);
@@ -120,24 +121,29 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
       return null;
     }
     var createIcon = function createIcon() {
-      var className = utils.classNames('p-button-icon p-c', _defineProperty({
+      var className = utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
+      var iconsProps = utils.mergeProps({
+        className: className
+      }, ptm('icon'));
+      className = utils.classNames(className, {
         'p-button-loading-icon': props.loading
-      }, "p-button-icon-".concat(props.iconPos), props.label));
-      var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-        className: className,
-        spin: true
-      }) : props.icon;
-      return utils.IconUtils.getJSXIcon(icon, {
+      });
+      var loadingIconProps = utils.mergeProps({
         className: className
-      }, {
+      }, ptm('loadingIcon'));
+      var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      })) : props.icon;
+      return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
         props: props
       });
     };
     var createLabel = function createLabel() {
       if (props.label) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-button-label p-c"
-        }, props.label);
+        var labelProps = utils.mergeProps({
+          className: 'p-button-label p-c'
+        }, ptm('label'));
+        return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
       }
       return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-button-label p-c",
@@ -149,23 +155,23 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
     var createBadge = function createBadge() {
       if (props.badge) {
         var badgeClassName = utils.classNames('p-badge', props.badgeClassName);
-        return /*#__PURE__*/React__namespace.createElement("span", {
+        var badgeProps = utils.mergeProps({
           className: badgeClassName
-        }, props.badge);
+        }, ptm('badge'));
+        return /*#__PURE__*/React__namespace.createElement("span", badgeProps, props.badge);
       }
       return null;
     };
     var disabled = props.disabled || props.loading;
     var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
-    var otherProps = ButtonBase.getOtherProps(props);
     var sizeMapping = {
       large: 'lg',
       small: 'sm'
     };
     var size = sizeMapping[props.size];
     var className = utils.classNames('p-button p-component', props.className, (_classNames2 = {
-      'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
+      'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
       'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
       'p-disabled': disabled,
       'p-button-loading': props.loading,
@@ -175,18 +181,18 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
       'p-button-text': props.text,
       'p-button-rounded': props.rounded,
       'p-button-loading-label-only': props.loading && !props.icon && props.label
-    }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
+    }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
     var icon = createIcon();
     var label = createLabel();
     var badge = createBadge();
     var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
-      "aria-label": defaultAriaLabel
-    }, otherProps, {
+      'aria-label': defaultAriaLabel,
       className: className,
       disabled: disabled
-    }), icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, ButtonBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions)));
@@ -199,4 +205,4 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
 
   return exports;
 
-})({}, React, primereact.ripple, primereact.tooltip, primereact.utils, primereact.icons/spinner);
+})({}, React, primereact.icons.spinner, primereact.ripple, primereact.tooltip, primereact.utils, primereact.componentbase);