primereact 9.3.1 → 9.5.0

package/resources/themes/viva-dark/theme.css

@@ -4404,6 +4404,9 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+  border-radius: 0;
+}
 .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
   font-size: 2rem;
 }
@@ -4552,29 +4555,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.3s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #9eade6;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
@@ -5755,6 +5758,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;

package/resources/themes/viva-light/theme.css

@@ -4404,6 +4404,9 @@
   margin: 0 0.5rem 0 0;
   width: auto;
 }
+.p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+  border-radius: 0;
+}
 .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
   font-size: 2rem;
 }
@@ -4552,29 +4555,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.3s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem #bbc7ee;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #6c6c6c;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #898989;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #6c6c6c;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #6c6c6c;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #898989;
 }
 
@@ -5755,6 +5758,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;

package/scrollpanel/scrollpanel.cjs.js

@@ -5,60 +5,44 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 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);
-}
-
-var ScrollPanelBase = {
+var ScrollPanelBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ScrollPanel',
     id: null,
     style: null,
     className: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, ScrollPanelBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, ScrollPanelBase.defaultProps);
   }
-};
+});
 
 var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var props = ScrollPanelBase.getProps(inProps);
+  var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
+      props: props
+    }),
+    ptm = _ScrollPanelBase$setM.ptm;
   var containerRef = React__namespace.useRef(null);
   var contentRef = React__namespace.useRef(null);
   var xBarRef = React__namespace.useRef(null);
@@ -196,29 +180,32 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
       }
     };
   });
-  var otherProps = ScrollPanelBase.getOtherProps(props);
-  var className = utils.classNames('p-scrollpanel p-component', props.className);
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: containerRef,
+  var rootProps = utils.mergeProps({
     id: props.id,
-    className: className,
-    style: props.style
-  }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-scrollpanel-wrapper"
-  }, /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: props.style,
+    className: utils.classNames('p-scrollpanel p-component', props.className)
+  }, ScrollPanelBase.getOtherProps(props), ptm('root'));
+  var wrapperProps = utils.mergeProps({
+    className: 'p-scrollpanel-wrapper'
+  }, ptm('wrapper'));
+  var contentProps = utils.mergeProps({
+    className: 'p-scrollpanel-content',
     ref: contentRef,
-    className: "p-scrollpanel-content",
     onScroll: moveBar,
     onMouseEnter: moveBar
-  }, props.children)), /*#__PURE__*/React__namespace.createElement("div", {
+  }, ptm('content'));
+  var barXProps = utils.mergeProps({
     ref: xBarRef,
-    className: "p-scrollpanel-bar p-scrollpanel-bar-x",
+    className: 'p-scrollpanel-bar p-scrollpanel-bar-x',
     onMouseDown: onXBarMouseDown
-  }), /*#__PURE__*/React__namespace.createElement("div", {
+  }, ptm('barx'));
+  var barYProps = utils.mergeProps({
     ref: yBarRef,
-    className: "p-scrollpanel-bar p-scrollpanel-bar-y",
+    className: 'p-scrollpanel-bar p-scrollpanel-bar-y',
     onMouseDown: onYBarMouseDown
-  }));
+  }, ptm('bary'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)), /*#__PURE__*/React__namespace.createElement("div", barXProps), /*#__PURE__*/React__namespace.createElement("div", barYProps));
 });
 ScrollPanel.displayName = 'ScrollPanel';
 

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/hooks"),t=require("primereact/utils");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var l=n(e);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},c.apply(this,arguments)}var u={defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},getProps:function(e){return t.ObjectUtils.getMergedProps(e,u.defaultProps)},getOtherProps:function(e){return t.ObjectUtils.getDiffProps(e,u.defaultProps)}},o=l.forwardRef((function(e,n){var o=u.getProps(e),a=l.useRef(null),s=l.useRef(null),i=l.useRef(null),d=l.useRef(null),p=l.useRef(!1),m=l.useRef(!1),f=l.useRef(null),g=l.useRef(null),h=l.useRef(null),v=l.useRef(null),b=l.useRef(null),H=l.useRef(!1),y=function(){var e=s.current.scrollWidth,r=-1*(a.current.clientHeight-i.current.clientHeight);h.current=s.current.clientWidth/e;var n=s.current.scrollHeight,l=-1*(a.current.clientWidth-d.current.clientWidth);v.current=s.current.clientHeight/n,b.current=window.requestAnimationFrame((function(){h.current>=1?t.DomHandler.addClass(i.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(i.current,"p-scrollpanel-hidden"),i.current.style.cssText="width:"+Math.max(100*h.current,10)+"%; left:"+s.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),v.current>=1?t.DomHandler.addClass(d.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(d.current,"p-scrollpanel-hidden"),d.current.style.cssText="height:"+Math.max(100*v.current,10)+"%; top: calc("+s.current.scrollTop/n*100+"% - "+i.current.clientHeight+"px);right:"+l+"px;")}))},w=function(e){p.current?E(e):(m.current||E(e),D(e))},E=function(e){var r=e.pageX-f.current;f.current=e.pageX,b.current=window.requestAnimationFrame((function(){s.current.scrollLeft+=r/h.current}))},D=function(e){var r=e.pageY-g.current;g.current=e.pageY,b.current=window.requestAnimationFrame((function(){s.current.scrollTop+=r/v.current}))},P=function e(r){t.DomHandler.removeClass(d.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(i.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",e),p.current=!1,m.current=!1},O=function(){y()};r.useMountEffect((function(){var e,r,n;y(),window.addEventListener("resize",y),e=getComputedStyle(a.current),r=getComputedStyle(i.current),n=t.DomHandler.getHeight(a.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(a.current.style.height=s.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:s.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),H.current=!0})),r.useUnmountEffect((function(){H.current&&window.removeEventListener("resize",y),b.current&&window.cancelAnimationFrame(b.current)})),l.useImperativeHandle(n,(function(){return{props:o,refresh:O,getElement:function(){return a.current},getContent:function(){return s.current},getXBar:function(){return i.current},getYBar:function(){return d.current}}}));var x=u.getOtherProps(o),C=t.classNames("p-scrollpanel p-component",o.className);return l.createElement("div",c({ref:a,id:o.id,className:C,style:o.style},x),l.createElement("div",{className:"p-scrollpanel-wrapper"},l.createElement("div",{ref:s,className:"p-scrollpanel-content",onScroll:y,onMouseEnter:y},o.children)),l.createElement("div",{ref:i,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){p.current=!0,f.current=e.pageX,t.DomHandler.addClass(i.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",w),document.addEventListener("mouseup",P),e.preventDefault()}}),l.createElement("div",{ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){m.current=!0,g.current=e.pageY,t.DomHandler.addClass(d.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",w),document.addEventListener("mouseup",P),e.preventDefault()}}))}));o.displayName="ScrollPanel",exports.ScrollPanel=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/hooks"),t=require("primereact/utils"),n=require("primereact/componentbase");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=l(e),c=n.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0}}),a=o.forwardRef((function(e,n){var l=c.getProps(e),a=c.setMetaData({props:l}).ptm,u=o.useRef(null),s=o.useRef(null),i=o.useRef(null),d=o.useRef(null),p=o.useRef(!1),m=o.useRef(!1),f=o.useRef(null),g=o.useRef(null),h=o.useRef(null),v=o.useRef(null),b=o.useRef(null),H=o.useRef(!1),w=function(){var e=s.current.scrollWidth,r=-1*(u.current.clientHeight-i.current.clientHeight);h.current=s.current.clientWidth/e;var n=s.current.scrollHeight,l=-1*(u.current.clientWidth-d.current.clientWidth);v.current=s.current.clientHeight/n,b.current=window.requestAnimationFrame((function(){h.current>=1?t.DomHandler.addClass(i.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(i.current,"p-scrollpanel-hidden"),i.current.style.cssText="width:"+Math.max(100*h.current,10)+"%; left:"+s.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),v.current>=1?t.DomHandler.addClass(d.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(d.current,"p-scrollpanel-hidden"),d.current.style.cssText="height:"+Math.max(100*v.current,10)+"%; top: calc("+s.current.scrollTop/n*100+"% - "+i.current.clientHeight+"px);right:"+l+"px;")}))},E=function(e){p.current?y(e):(m.current||y(e),D(e))},y=function(e){var r=e.pageX-f.current;f.current=e.pageX,b.current=window.requestAnimationFrame((function(){s.current.scrollLeft+=r/h.current}))},D=function(e){var r=e.pageY-g.current;g.current=e.pageY,b.current=window.requestAnimationFrame((function(){s.current.scrollTop+=r/v.current}))},x=function e(r){t.DomHandler.removeClass(d.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(i.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",e),p.current=!1,m.current=!1},C=function(){w()};r.useMountEffect((function(){var e,r,n;w(),window.addEventListener("resize",w),e=getComputedStyle(u.current),r=getComputedStyle(i.current),n=t.DomHandler.getHeight(u.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(u.current.style.height=s.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:s.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),H.current=!0})),r.useUnmountEffect((function(){H.current&&window.removeEventListener("resize",w),b.current&&window.cancelAnimationFrame(b.current)})),o.useImperativeHandle(n,(function(){return{props:l,refresh:C,getElement:function(){return u.current},getContent:function(){return s.current},getXBar:function(){return i.current},getYBar:function(){return d.current}}}));var P=t.mergeProps({id:l.id,ref:u,style:l.style,className:t.classNames("p-scrollpanel p-component",l.className)},c.getOtherProps(l),a("root")),R=t.mergeProps({className:"p-scrollpanel-wrapper"},a("wrapper")),L=t.mergeProps({className:"p-scrollpanel-content",ref:s,onScroll:w,onMouseEnter:w},a("content")),M=t.mergeProps({ref:i,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){p.current=!0,f.current=e.pageX,t.DomHandler.addClass(i.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",E),document.addEventListener("mouseup",x),e.preventDefault()}},a("barx")),N=t.mergeProps({ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){m.current=!0,g.current=e.pageY,t.DomHandler.addClass(d.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",E),document.addEventListener("mouseup",x),e.preventDefault()}},a("bary"));return o.createElement("div",P,o.createElement("div",R,o.createElement("div",L,l.children)),o.createElement("div",M),o.createElement("div",N))}));a.displayName="ScrollPanel",exports.ScrollPanel=a;

package/scrollpanel/scrollpanel.d.ts

@@ -8,6 +8,43 @@
  *
  */
 import * as React from 'react';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ScrollPanelThroughType<T> = PassThroughType<T, ScrollPanelThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelThroughMethodOptions {
+    props: ScrollPanelProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barX?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    barY?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
 
 /**
  * Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -19,6 +56,11 @@ export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
 }
 
 /**

package/scrollpanel/scrollpanel.esm.js

@@ -1,40 +1,24 @@
 import * as React from 'react';
 import { useMountEffect, useUnmountEffect } from 'primereact/hooks';
-import { ObjectUtils, classNames, DomHandler } from 'primereact/utils';
+import { mergeProps, classNames, DomHandler } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 
-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);
-}
-
-var ScrollPanelBase = {
+var ScrollPanelBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ScrollPanel',
     id: null,
     style: null,
     className: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ScrollPanelBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, ScrollPanelBase.defaultProps);
   }
-};
+});
 
 var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = ScrollPanelBase.getProps(inProps);
+  var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
+      props: props
+    }),
+    ptm = _ScrollPanelBase$setM.ptm;
   var containerRef = React.useRef(null);
   var contentRef = React.useRef(null);
   var xBarRef = React.useRef(null);
@@ -172,29 +156,32 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     };
   });
-  var otherProps = ScrollPanelBase.getOtherProps(props);
-  var className = classNames('p-scrollpanel p-component', props.className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: containerRef,
+  var rootProps = mergeProps({
     id: props.id,
-    className: className,
-    style: props.style
-  }, otherProps), /*#__PURE__*/React.createElement("div", {
-    className: "p-scrollpanel-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: props.style,
+    className: classNames('p-scrollpanel p-component', props.className)
+  }, ScrollPanelBase.getOtherProps(props), ptm('root'));
+  var wrapperProps = mergeProps({
+    className: 'p-scrollpanel-wrapper'
+  }, ptm('wrapper'));
+  var contentProps = mergeProps({
+    className: 'p-scrollpanel-content',
     ref: contentRef,
-    className: "p-scrollpanel-content",
     onScroll: moveBar,
     onMouseEnter: moveBar
-  }, props.children)), /*#__PURE__*/React.createElement("div", {
+  }, ptm('content'));
+  var barXProps = mergeProps({
     ref: xBarRef,
-    className: "p-scrollpanel-bar p-scrollpanel-bar-x",
+    className: 'p-scrollpanel-bar p-scrollpanel-bar-x',
     onMouseDown: onXBarMouseDown
-  }), /*#__PURE__*/React.createElement("div", {
+  }, ptm('barx'));
+  var barYProps = mergeProps({
     ref: yBarRef,
-    className: "p-scrollpanel-bar p-scrollpanel-bar-y",
+    className: 'p-scrollpanel-bar p-scrollpanel-bar-y',
     onMouseDown: onYBarMouseDown
-  }));
+  }, ptm('bary'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)), /*#__PURE__*/React.createElement("div", barXProps), /*#__PURE__*/React.createElement("div", barYProps));
 });
 ScrollPanel.displayName = 'ScrollPanel';
 

package/scrollpanel/scrollpanel.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{useMountEffect as r,useUnmountEffect as t}from"primereact/hooks";import{ObjectUtils as n,classNames as l,DomHandler as c}from"primereact/utils";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},o.apply(this,arguments)}var u={defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},getProps:function(e){return n.getMergedProps(e,u.defaultProps)},getOtherProps:function(e){return n.getDiffProps(e,u.defaultProps)}},a=e.forwardRef((function(n,a){var s=u.getProps(n),i=e.useRef(null),p=e.useRef(null),d=e.useRef(null),m=e.useRef(null),f=e.useRef(!1),g=e.useRef(!1),h=e.useRef(null),v=e.useRef(null),b=e.useRef(null),w=e.useRef(null),y=e.useRef(null),E=e.useRef(!1),C=function(){var e=p.current.scrollWidth,r=-1*(i.current.clientHeight-d.current.clientHeight);b.current=p.current.clientWidth/e;var t=p.current.scrollHeight,n=-1*(i.current.clientWidth-m.current.clientWidth);w.current=p.current.clientHeight/t,y.current=window.requestAnimationFrame((function(){b.current>=1?c.addClass(d.current,"p-scrollpanel-hidden"):(c.removeClass(d.current,"p-scrollpanel-hidden"),d.current.style.cssText="width:"+Math.max(100*b.current,10)+"%; left:"+p.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),w.current>=1?c.addClass(m.current,"p-scrollpanel-hidden"):(c.removeClass(m.current,"p-scrollpanel-hidden"),m.current.style.cssText="height:"+Math.max(100*w.current,10)+"%; top: calc("+p.current.scrollTop/t*100+"% - "+d.current.clientHeight+"px);right:"+n+"px;")}))},x=function(e){f.current?P(e):(g.current||P(e),R(e))},P=function(e){var r=e.pageX-h.current;h.current=e.pageX,y.current=window.requestAnimationFrame((function(){p.current.scrollLeft+=r/b.current}))},R=function(e){var r=e.pageY-v.current;v.current=e.pageY,y.current=window.requestAnimationFrame((function(){p.current.scrollTop+=r/w.current}))},L=function e(r){c.removeClass(m.current,"p-scrollpanel-grabbed"),c.removeClass(d.current,"p-scrollpanel-grabbed"),c.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",e),f.current=!1,g.current=!1},H=function(){C()};r((function(){var e,r,t;C(),window.addEventListener("resize",C),e=getComputedStyle(i.current),r=getComputedStyle(d.current),t=c.getHeight(i.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===t&&(i.current.style.height=p.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:p.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),E.current=!0})),t((function(){E.current&&window.removeEventListener("resize",C),y.current&&window.cancelAnimationFrame(y.current)})),e.useImperativeHandle(a,(function(){return{props:s,refresh:H,getElement:function(){return i.current},getContent:function(){return p.current},getXBar:function(){return d.current},getYBar:function(){return m.current}}}));var F=u.getOtherProps(s),N=l("p-scrollpanel p-component",s.className);return e.createElement("div",o({ref:i,id:s.id,className:N,style:s.style},F),e.createElement("div",{className:"p-scrollpanel-wrapper"},e.createElement("div",{ref:p,className:"p-scrollpanel-content",onScroll:C,onMouseEnter:C},s.children)),e.createElement("div",{ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){f.current=!0,h.current=e.pageX,c.addClass(d.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",x),document.addEventListener("mouseup",L),e.preventDefault()}}),e.createElement("div",{ref:m,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){g.current=!0,v.current=e.pageY,c.addClass(m.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",x),document.addEventListener("mouseup",L),e.preventDefault()}}))}));a.displayName="ScrollPanel";export{a as ScrollPanel};
+import*as e from"react";import{useMountEffect as r,useUnmountEffect as t}from"primereact/hooks";import{mergeProps as n,classNames as l,DomHandler as c}from"primereact/utils";import{ComponentBase as o}from"primereact/componentbase";var u=o.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0}}),a=e.forwardRef((function(o,a){var s=u.getProps(o),i=u.setMetaData({props:s}).ptm,p=e.useRef(null),d=e.useRef(null),m=e.useRef(null),f=e.useRef(null),h=e.useRef(!1),g=e.useRef(!1),v=e.useRef(null),b=e.useRef(null),w=e.useRef(null),E=e.useRef(null),x=e.useRef(null),y=e.useRef(!1),C=function(){var e=d.current.scrollWidth,r=-1*(p.current.clientHeight-m.current.clientHeight);w.current=d.current.clientWidth/e;var t=d.current.scrollHeight,n=-1*(p.current.clientWidth-f.current.clientWidth);E.current=d.current.clientHeight/t,x.current=window.requestAnimationFrame((function(){w.current>=1?c.addClass(m.current,"p-scrollpanel-hidden"):(c.removeClass(m.current,"p-scrollpanel-hidden"),m.current.style.cssText="width:"+Math.max(100*w.current,10)+"%; left:"+d.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),E.current>=1?c.addClass(f.current,"p-scrollpanel-hidden"):(c.removeClass(f.current,"p-scrollpanel-hidden"),f.current.style.cssText="height:"+Math.max(100*E.current,10)+"%; top: calc("+d.current.scrollTop/t*100+"% - "+m.current.clientHeight+"px);right:"+n+"px;")}))},R=function(e){h.current?L(e):(g.current||L(e),H(e))},L=function(e){var r=e.pageX-v.current;v.current=e.pageX,x.current=window.requestAnimationFrame((function(){d.current.scrollLeft+=r/w.current}))},H=function(e){var r=e.pageY-b.current;b.current=e.pageY,x.current=window.requestAnimationFrame((function(){d.current.scrollTop+=r/E.current}))},F=function e(r){c.removeClass(f.current,"p-scrollpanel-grabbed"),c.removeClass(m.current,"p-scrollpanel-grabbed"),c.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",e),h.current=!1,g.current=!1},N=function(){C()};r((function(){var e,r,t;C(),window.addEventListener("resize",C),e=getComputedStyle(p.current),r=getComputedStyle(m.current),t=c.getHeight(p.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===t&&(p.current.style.height=d.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:d.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),y.current=!0})),t((function(){y.current&&window.removeEventListener("resize",C),x.current&&window.cancelAnimationFrame(x.current)})),e.useImperativeHandle(a,(function(){return{props:s,refresh:N,getElement:function(){return p.current},getContent:function(){return d.current},getXBar:function(){return m.current},getYBar:function(){return f.current}}}));var T=n({id:s.id,ref:p,style:s.style,className:l("p-scrollpanel p-component",s.className)},u.getOtherProps(s),i("root")),M=n({className:"p-scrollpanel-wrapper"},i("wrapper")),P=n({className:"p-scrollpanel-content",ref:d,onScroll:C,onMouseEnter:C},i("content")),W=n({ref:m,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){h.current=!0,v.current=e.pageX,c.addClass(m.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",F),e.preventDefault()}},i("barx")),D=n({ref:f,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){g.current=!0,b.current=e.pageY,c.addClass(f.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",F),e.preventDefault()}},i("bary"));return e.createElement("div",T,e.createElement("div",M,e.createElement("div",P,s.children)),e.createElement("div",W),e.createElement("div",D))}));a.displayName="ScrollPanel";export{a as ScrollPanel};