primereact 10.2.1 → 10.3.0

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),n=require("primereact/hooks"),t=require("primereact/utils"),l=require("primereact/componentbase");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var a=o(e);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},c.apply(this,arguments)}var s=l.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){return t.classNames("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),u=a.forwardRef((function(e,o){var u=a.useContext(r.PrimeReactContext),i=s.getProps(e,u),p=s.setMetaData({props:i}),d=p.ptm,m=p.cx;l.useHandleStyle(s.css.styles,p.isUnstyled,{name:"scrollpanel"});var f=a.useRef(null),g=a.useRef(null),h=a.useRef(null),b=a.useRef(null),v=a.useRef(!1),x=a.useRef(!1),y=a.useRef(null),w=a.useRef(null),H=a.useRef(null),E=a.useRef(null),D=a.useRef(null),C=a.useRef(!1),P=function(){var e=g.current.scrollWidth,r=-1*(f.current.clientHeight-h.current.clientHeight);H.current=g.current.clientWidth/e;var n=g.current.scrollHeight,l=-1*(f.current.clientWidth-b.current.clientWidth);E.current=g.current.clientHeight/n,D.current=window.requestAnimationFrame((function(){H.current>=1?t.DomHandler.addClass(h.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(h.current,"p-scrollpanel-hidden"),h.current.style.cssText="width:"+Math.max(100*H.current,10)+"%; left:"+g.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),E.current>=1?t.DomHandler.addClass(b.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(b.current,"p-scrollpanel-hidden"),b.current.style.cssText="height:"+Math.max(100*E.current,10)+"%; top: calc("+g.current.scrollTop/n*100+"% - "+h.current.clientHeight+"px);right:"+l+"px;")}))},R=function(e){v.current?O(e):(x.current||O(e),L(e))},O=function(e){var r=e.pageX-y.current;y.current=e.pageX,D.current=window.requestAnimationFrame((function(){g.current.scrollLeft+=r/H.current}))},L=function(e){var r=e.pageY-w.current;w.current=e.pageY,D.current=window.requestAnimationFrame((function(){g.current.scrollTop+=r/E.current}))},j=function e(r){t.DomHandler.removeClass(b.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(h.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",e),v.current=!1,x.current=!1},M=function(){P()};n.useMountEffect((function(){var e,r,n;P(),window.addEventListener("resize",P),e=getComputedStyle(f.current),r=getComputedStyle(h.current),n=t.DomHandler.getHeight(f.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(f.current.style.height=g.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:g.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),C.current=!0})),n.useUnmountEffect((function(){C.current&&window.removeEventListener("resize",P),D.current&&window.cancelAnimationFrame(D.current)})),a.useImperativeHandle(o,(function(){return{props:i,refresh:M,getElement:function(){return f.current},getContent:function(){return g.current},getXBar:function(){return h.current},getYBar:function(){return b.current}}}));var N=t.mergeProps({id:i.id,ref:f,style:i.style,className:m("root")},s.getOtherProps(i),d("root")),q=t.mergeProps({className:m("wrapper")},d("wrapper")),F=t.mergeProps({className:m("content"),onScroll:P,onMouseEnter:P},d("content")),S=t.mergeProps({ref:h,className:m("barx"),onMouseDown:function(e){v.current=!0,y.current=e.pageX,t.DomHandler.addClass(h.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",j),e.preventDefault()}},d("barx")),T=t.mergeProps({ref:b,className:m("bary"),onMouseDown:function(e){x.current=!0,w.current=e.pageY,t.DomHandler.addClass(b.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",j),e.preventDefault()}},d("bary"));return a.createElement("div",N,a.createElement("div",q,a.createElement("div",c({ref:g},F),i.children)),a.createElement("div",S),a.createElement("div",T))}));u.displayName="ScrollPanel",exports.ScrollPanel=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),n=require("primereact/hooks"),t=require("primereact/utils"),o=require("primereact/componentbase");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var a=l(e);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},c.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function s(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,l,a,c=[],u=!0,s=!1;try{if(l=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;u=!1}else for(;!(u=(t=l.call(n)).done)&&(c.push(t.value),c.length!==r);u=!0);}catch(e){s=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return c}}function i(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function p(e,r){if(e){if("string"==typeof e)return i(e,r);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)?i(e,r):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 f(e,r){return u(e)||s(e,r)||p(e,r)||d()}var m=o.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:function(e){return t.classNames("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),h=a.forwardRef((function(e,l){var u=a.useContext(r.PrimeReactContext),s=m.getProps(e,u),i=f(a.useState(s.id),2),p=i[0],d=i[1],h=f(a.useState("vertical"),2),b=h[0],v=h[1],g=m.setMetaData({props:s}),y=g.ptm,w=g.cx;o.useHandleStyle(m.css.styles,g.isUnstyled,{name:"scrollpanel"});var x=a.useRef(null),D=a.useRef(null),H=a.useRef(null),E=a.useRef(null),C=f(a.useState(0),2),A=C[0],S=C[1],P=f(a.useState(0),2),R=P[0],L=P[1],O=a.useRef(!1),j=a.useRef(!1),T=a.useRef(null),z=a.useRef(null),N=a.useRef(null),F=a.useRef(null),I=a.useRef(null),M=a.useRef(!1),q=a.useRef(null),U=p+"_content",k=function(){var e=D.current.scrollWidth,r=-1*(x.current.clientHeight-H.current.clientHeight);N.current=D.current.clientWidth/e;var n=D.current.scrollHeight,o=-1*(x.current.clientWidth-E.current.clientWidth);F.current=D.current.clientHeight/n,I.current=window.requestAnimationFrame((function(){N.current>=1?t.DomHandler.addClass(H.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(H.current,"p-scrollpanel-hidden"),H.current.style.cssText="width:"+Math.max(100*N.current,10)+"%; left:"+D.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),F.current>=1?t.DomHandler.addClass(E.current,"p-scrollpanel-hidden"):(t.DomHandler.removeClass(E.current,"p-scrollpanel-hidden"),E.current.style.cssText="height:"+Math.max(100*F.current,10)+"%; top: calc("+D.current.scrollTop/n*100+"% - "+H.current.clientHeight+"px);right:"+o+"px;")}))},B=function(e){H.current.isSameNode(e.target)?v("horizontal"):E.current.isSameNode(e.target)&&v("vertical")},_=function(){"horizontal"===b&&v("vertical")},W=function(e){O.current?Y(e):(j.current||Y(e),K(e))},Y=function(e){var r=e.pageX-T.current;T.current=e.pageX,I.current=window.requestAnimationFrame((function(){D.current.scrollLeft+=r/N.current}))},K=function(e){var r=e.pageY-z.current;z.current=e.pageY,I.current=window.requestAnimationFrame((function(){D.current.scrollTop+=r/F.current}))},X=function e(r){t.DomHandler.removeClass(E.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(H.current,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",W),document.removeEventListener("mouseup",e),O.current=!1,j.current=!1},$=function(e){if("vertical"===b)switch(e.code){case"ArrowDown":Q("scrollTop",s.step),e.preventDefault();break;case"ArrowUp":Q("scrollTop",-1*s.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===b)switch(e.code){case"ArrowRight":Q("scrollLeft",s.step),e.preventDefault();break;case"ArrowLeft":Q("scrollLeft",-1*s.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},G=function(){V()},J=function(e,r){D.current[e]+=r,k()},Q=function(e,r){V(),q.current=setTimeout((function(){J(e,r)}),40)},V=function(){q.current&&clearTimeout(q.current)},Z=function(){k()};n.useMountEffect((function(){var e,r,n;s.id||d(t.UniqueComponentId()),k(),window.addEventListener("resize",k),e=getComputedStyle(x.current),r=getComputedStyle(H.current),n=t.DomHandler.getHeight(x.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(x.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"),M.current=!0})),n.useUnmountEffect((function(){M.current&&window.removeEventListener("resize",k),I.current&&window.cancelAnimationFrame(I.current)})),a.useImperativeHandle(l,(function(){return{props:s,refresh:Z,getElement:function(){return x.current},getContent:function(){return D.current},getXBar:function(){return H.current},getYBar:function(){return E.current}}}));var ee=t.mergeProps({id:s.id,ref:x,style:s.style,className:w("root")},m.getOtherProps(s),y("root")),re=t.mergeProps({className:w("wrapper")},y("wrapper")),ne=t.mergeProps({className:w("content"),onScroll:function(e){A!==e.target.scrollLeft?(S(e.target.scrollLeft),v("horizontal")):R!==e.target.scrollTop&&(L(e.target.scrollTop),v("vertical")),k()},onMouseEnter:k},y("content")),te=t.mergeProps({ref:H,role:"scrollbar",className:w("barx"),tabIndex:0,"aria-valuenow":R,"aria-controls":U,"aria-orientation":"horizontal",onFocus:B,onBlur:_,onKeyDown:$,onKeyUp:G,onMouseDown:function(e){O.current=!0,T.current=e.pageX,t.DomHandler.addClass(H.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",W),document.addEventListener("mouseup",X),e.preventDefault()}},y("barx")),oe=t.mergeProps({ref:E,role:"scrollbar",className:w("bary"),tabIndex:0,"aria-valuenow":A,"aria-controls":U,"aria-orientation":"vertical",onFocus:B,onBlur:_,onKeyDown:$,onKeyUp:G,onMouseDown:function(e){j.current=!0,z.current=e.pageY,t.DomHandler.addClass(E.current,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",W),document.addEventListener("mouseup",X),e.preventDefault()}},y("bary"));return a.createElement("div",ee,a.createElement("div",re,a.createElement("div",c({ref:D},ne),s.children)),a.createElement("div",te),a.createElement("div",oe))}));h.displayName="ScrollPanel",exports.ScrollPanel=h;

package/scrollpanel/scrollpanel.esm.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { PrimeReactContext } from 'primereact/api';
 import { useMountEffect, useUnmountEffect } from 'primereact/hooks';
-import { classNames, mergeProps, DomHandler } from 'primereact/utils';
+import { classNames, UniqueComponentId, mergeProps, DomHandler } from 'primereact/utils';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 
 function _extends() {
@@ -20,13 +20,69 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  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 _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var ScrollPanelBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ScrollPanel',
     id: null,
     style: null,
     className: null,
-    children: undefined
+    children: undefined,
+    step: 5
   },
   css: {
     classes: {
@@ -39,13 +95,21 @@ var ScrollPanelBase = ComponentBase.extend({
       barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
       bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
     },
-    styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+    styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
   }
 });
 
 var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var context = React.useContext(PrimeReactContext);
   var props = ScrollPanelBase.getProps(inProps, context);
+  var _React$useState = React.useState(props.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
+  var _React$useState3 = React.useState('vertical'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    orientationState = _React$useState4[0],
+    setOrientationState = _React$useState4[1];
   var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
       props: props
     }),
@@ -59,6 +123,14 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var contentRef = React.useRef(null);
   var xBarRef = React.useRef(null);
   var yBarRef = React.useRef(null);
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    lastScrollLeft = _React$useState6[0],
+    setLastScrollLeft = _React$useState6[1];
+  var _React$useState7 = React.useState(0),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    lastScrollTop = _React$useState8[0],
+    setLastScrollTop = _React$useState8[1];
   var isXBarClicked = React.useRef(false);
   var isYBarClicked = React.useRef(false);
   var lastPageX = React.useRef(null);
@@ -67,6 +139,8 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var scrollYRatio = React.useRef(null);
   var frame = React.useRef(null);
   var initialized = React.useRef(false);
+  var timer = React.useRef(null);
+  var contentId = idState + '_content';
   var calculateContainerHeight = function calculateContainerHeight() {
     var containerStyles = getComputedStyle(containerRef.current);
     var xBarStyles = getComputedStyle(xBarRef.current);
@@ -106,6 +180,28 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     });
   };
+  var onFocus = function onFocus(event) {
+    if (xBarRef.current.isSameNode(event.target)) {
+      setOrientationState('horizontal');
+    } else if (yBarRef.current.isSameNode(event.target)) {
+      setOrientationState('vertical');
+    }
+  };
+  var onBlur = function onBlur() {
+    if (orientationState === 'horizontal') {
+      setOrientationState('vertical');
+    }
+  };
+  var onScroll = function onScroll(event) {
+    if (lastScrollLeft !== event.target.scrollLeft) {
+      setLastScrollLeft(event.target.scrollLeft);
+      setOrientationState('horizontal');
+    } else if (lastScrollTop !== event.target.scrollTop) {
+      setLastScrollTop(event.target.scrollTop);
+      setOrientationState('vertical');
+    }
+    moveBar();
+  };
   var onYBarMouseDown = function onYBarMouseDown(event) {
     isYBarClicked.current = true;
     lastPageY.current = event.pageY;
@@ -157,10 +253,76 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     isXBarClicked.current = false;
     isYBarClicked.current = false;
   };
+  var onKeyDown = function onKeyDown(event) {
+    if (orientationState === 'vertical') {
+      switch (event.code) {
+        case 'ArrowDown':
+          {
+            setTimer('scrollTop', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowUp':
+          {
+            setTimer('scrollTop', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    } else if (orientationState === 'horizontal') {
+      switch (event.code) {
+        case 'ArrowRight':
+          {
+            setTimer('scrollLeft', props.step);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            setTimer('scrollLeft', props.step * -1);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowDown':
+        case 'ArrowUp':
+          {
+            event.preventDefault();
+            break;
+          }
+      }
+    }
+  };
+  var onKeyUp = function onKeyUp() {
+    clearTimer();
+  };
+  var repeat = function repeat(bar, step) {
+    contentRef.current[bar] += step;
+    moveBar();
+  };
+  var setTimer = function setTimer(bar, step) {
+    clearTimer();
+    timer.current = setTimeout(function () {
+      repeat(bar, step);
+    }, 40);
+  };
+  var clearTimer = function clearTimer() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  };
   var refresh = function refresh() {
     moveBar();
   };
   useMountEffect(function () {
+    if (!props.id) {
+      setIdState(UniqueComponentId());
+    }
     moveBar();
     window.addEventListener('resize', moveBar);
     calculateContainerHeight();
@@ -203,17 +365,35 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   }, ptm('wrapper'));
   var contentProps = mergeProps({
     className: cx('content'),
-    onScroll: moveBar,
+    onScroll: onScroll,
     onMouseEnter: moveBar
   }, ptm('content'));
   var barXProps = mergeProps({
     ref: xBarRef,
+    role: 'scrollbar',
     className: cx('barx'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollTop,
+    'aria-controls': contentId,
+    'aria-orientation': 'horizontal',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onXBarMouseDown
   }, ptm('barx'));
   var barYProps = mergeProps({
     ref: yBarRef,
+    role: 'scrollbar',
     className: cx('bary'),
+    tabIndex: 0,
+    'aria-valuenow': lastScrollLeft,
+    'aria-controls': contentId,
+    'aria-orientation': 'vertical',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onYBarMouseDown
   }, ptm('bary'));
   return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("div", _extends({

package/scrollpanel/scrollpanel.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as r}from"primereact/api";import{useMountEffect as n,useUnmountEffect as t}from"primereact/hooks";import{classNames as l,mergeProps as o,DomHandler as a}from"primereact/utils";import{ComponentBase as c,useHandleStyle as s}from"primereact/componentbase";function u(){return u=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},u.apply(this,arguments)}var i=c.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){return l("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),p=e.forwardRef((function(l,c){var p=e.useContext(r),d=i.getProps(l,p),m=i.setMetaData({props:d}),f=m.ptm,h=m.cx;s(i.css.styles,m.isUnstyled,{name:"scrollpanel"});var g=e.useRef(null),b=e.useRef(null),v=e.useRef(null),x=e.useRef(null),y=e.useRef(!1),w=e.useRef(!1),E=e.useRef(null),C=e.useRef(null),R=e.useRef(null),L=e.useRef(null),H=e.useRef(null),F=e.useRef(!1),N=function(){var e=b.current.scrollWidth,r=-1*(g.current.clientHeight-v.current.clientHeight);R.current=b.current.clientWidth/e;var n=b.current.scrollHeight,t=-1*(g.current.clientWidth-x.current.clientWidth);L.current=b.current.clientHeight/n,H.current=window.requestAnimationFrame((function(){R.current>=1?a.addClass(v.current,"p-scrollpanel-hidden"):(a.removeClass(v.current,"p-scrollpanel-hidden"),v.current.style.cssText="width:"+Math.max(100*R.current,10)+"%; left:"+b.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),L.current>=1?a.addClass(x.current,"p-scrollpanel-hidden"):(a.removeClass(x.current,"p-scrollpanel-hidden"),x.current.style.cssText="height:"+Math.max(100*L.current,10)+"%; top: calc("+b.current.scrollTop/n*100+"% - "+v.current.clientHeight+"px);right:"+t+"px;")}))},P=function(e){y.current?T(e):(w.current||T(e),M(e))},T=function(e){var r=e.pageX-E.current;E.current=e.pageX,H.current=window.requestAnimationFrame((function(){b.current.scrollLeft+=r/R.current}))},M=function(e){var r=e.pageY-C.current;C.current=e.pageY,H.current=window.requestAnimationFrame((function(){b.current.scrollTop+=r/L.current}))},W=function e(r){a.removeClass(x.current,"p-scrollpanel-grabbed"),a.removeClass(v.current,"p-scrollpanel-grabbed"),a.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",P),document.removeEventListener("mouseup",e),y.current=!1,w.current=!1},z=function(){N()};n((function(){var e,r,n;N(),window.addEventListener("resize",N),e=getComputedStyle(g.current),r=getComputedStyle(v.current),n=a.getHeight(g.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(g.current.style.height=b.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:b.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),F.current=!0})),t((function(){F.current&&window.removeEventListener("resize",N),H.current&&window.cancelAnimationFrame(H.current)})),e.useImperativeHandle(c,(function(){return{props:d,refresh:z,getElement:function(){return g.current},getContent:function(){return b.current},getXBar:function(){return v.current},getYBar:function(){return x.current}}}));var D=o({id:d.id,ref:g,style:d.style,className:h("root")},i.getOtherProps(d),f("root")),O=o({className:h("wrapper")},f("wrapper")),S=o({className:h("content"),onScroll:N,onMouseEnter:N},f("content")),Y=o({ref:v,className:h("barx"),onMouseDown:function(e){y.current=!0,E.current=e.pageX,a.addClass(v.current,"p-scrollpanel-grabbed"),a.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",P),document.addEventListener("mouseup",W),e.preventDefault()}},f("barx")),A=o({ref:x,className:h("bary"),onMouseDown:function(e){w.current=!0,C.current=e.pageY,a.addClass(x.current,"p-scrollpanel-grabbed"),a.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",P),document.addEventListener("mouseup",W),e.preventDefault()}},f("bary"));return e.createElement("div",D,e.createElement("div",O,e.createElement("div",u({ref:b},S),d.children)),e.createElement("div",Y),e.createElement("div",A))}));p.displayName="ScrollPanel";export{p as ScrollPanel};
+import*as e from"react";import{PrimeReactContext as r}from"primereact/api";import{useMountEffect as n,useUnmountEffect as t}from"primereact/hooks";import{classNames as o,UniqueComponentId as l,mergeProps as a,DomHandler as c}from"primereact/utils";import{ComponentBase as i,useHandleStyle as s}from"primereact/componentbase";function u(){return u=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},u.apply(this,arguments)}function p(e){if(Array.isArray(e))return e}function d(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,l,a,c=[],i=!0,s=!1;try{if(l=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;i=!1}else for(;!(i=(t=l.call(n)).done)&&(c.push(t.value),c.length!==r);i=!0);}catch(e){s=!0,o=e}finally{try{if(!i&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return c}}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function m(e,r){if(e){if("string"==typeof e)return f(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,r):void 0}}function h(){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 v(e,r){return p(e)||d(e,r)||m(e,r)||h()}var b=i.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:function(e){return o("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),g=e.forwardRef((function(o,i){var p=e.useContext(r),d=b.getProps(o,p),f=v(e.useState(d.id),2),m=f[0],h=f[1],g=v(e.useState("vertical"),2),y=g[0],w=g[1],x=b.setMetaData({props:d}),A=x.ptm,E=x.cx;s(b.css.styles,x.isUnstyled,{name:"scrollpanel"});var C=e.useRef(null),L=e.useRef(null),R=e.useRef(null),S=e.useRef(null),D=v(e.useState(0),2),T=D[0],z=D[1],F=v(e.useState(0),2),N=F[0],H=F[1],I=e.useRef(!1),O=e.useRef(!1),j=e.useRef(null),M=e.useRef(null),P=e.useRef(null),k=e.useRef(null),B=e.useRef(null),U=e.useRef(!1),W=e.useRef(null),Y=m+"_content",K=function(){var e=L.current.scrollWidth,r=-1*(C.current.clientHeight-R.current.clientHeight);P.current=L.current.clientWidth/e;var n=L.current.scrollHeight,t=-1*(C.current.clientWidth-S.current.clientWidth);k.current=L.current.clientHeight/n,B.current=window.requestAnimationFrame((function(){P.current>=1?c.addClass(R.current,"p-scrollpanel-hidden"):(c.removeClass(R.current,"p-scrollpanel-hidden"),R.current.style.cssText="width:"+Math.max(100*P.current,10)+"%; left:"+L.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),k.current>=1?c.addClass(S.current,"p-scrollpanel-hidden"):(c.removeClass(S.current,"p-scrollpanel-hidden"),S.current.style.cssText="height:"+Math.max(100*k.current,10)+"%; top: calc("+L.current.scrollTop/n*100+"% - "+R.current.clientHeight+"px);right:"+t+"px;")}))},X=function(e){R.current.isSameNode(e.target)?w("horizontal"):S.current.isSameNode(e.target)&&w("vertical")},q=function(){"horizontal"===y&&w("vertical")},_=function(e){I.current?$(e):(O.current||$(e),G(e))},$=function(e){var r=e.pageX-j.current;j.current=e.pageX,B.current=window.requestAnimationFrame((function(){L.current.scrollLeft+=r/P.current}))},G=function(e){var r=e.pageY-M.current;M.current=e.pageY,B.current=window.requestAnimationFrame((function(){L.current.scrollTop+=r/k.current}))},J=function e(r){c.removeClass(S.current,"p-scrollpanel-grabbed"),c.removeClass(R.current,"p-scrollpanel-grabbed"),c.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",_),document.removeEventListener("mouseup",e),I.current=!1,O.current=!1},Q=function(e){if("vertical"===y)switch(e.code){case"ArrowDown":ee("scrollTop",d.step),e.preventDefault();break;case"ArrowUp":ee("scrollTop",-1*d.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===y)switch(e.code){case"ArrowRight":ee("scrollLeft",d.step),e.preventDefault();break;case"ArrowLeft":ee("scrollLeft",-1*d.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},V=function(){re()},Z=function(e,r){L.current[e]+=r,K()},ee=function(e,r){re(),W.current=setTimeout((function(){Z(e,r)}),40)},re=function(){W.current&&clearTimeout(W.current)},ne=function(){K()};n((function(){var e,r,n;d.id||h(l()),K(),window.addEventListener("resize",K),e=getComputedStyle(C.current),r=getComputedStyle(R.current),n=c.getHeight(C.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(C.current.style.height=L.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:L.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),U.current=!0})),t((function(){U.current&&window.removeEventListener("resize",K),B.current&&window.cancelAnimationFrame(B.current)})),e.useImperativeHandle(i,(function(){return{props:d,refresh:ne,getElement:function(){return C.current},getContent:function(){return L.current},getXBar:function(){return R.current},getYBar:function(){return S.current}}}));var te=a({id:d.id,ref:C,style:d.style,className:E("root")},b.getOtherProps(d),A("root")),oe=a({className:E("wrapper")},A("wrapper")),le=a({className:E("content"),onScroll:function(e){T!==e.target.scrollLeft?(z(e.target.scrollLeft),w("horizontal")):N!==e.target.scrollTop&&(H(e.target.scrollTop),w("vertical")),K()},onMouseEnter:K},A("content")),ae=a({ref:R,role:"scrollbar",className:E("barx"),tabIndex:0,"aria-valuenow":N,"aria-controls":Y,"aria-orientation":"horizontal",onFocus:X,onBlur:q,onKeyDown:Q,onKeyUp:V,onMouseDown:function(e){I.current=!0,j.current=e.pageX,c.addClass(R.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",_),document.addEventListener("mouseup",J),e.preventDefault()}},A("barx")),ce=a({ref:S,role:"scrollbar",className:E("bary"),tabIndex:0,"aria-valuenow":T,"aria-controls":Y,"aria-orientation":"vertical",onFocus:X,onBlur:q,onKeyDown:Q,onKeyUp:V,onMouseDown:function(e){O.current=!0,M.current=e.pageY,c.addClass(S.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",_),document.addEventListener("mouseup",J),e.preventDefault()}},A("bary"));return e.createElement("div",te,e.createElement("div",oe,e.createElement("div",u({ref:L},le),d.children)),e.createElement("div",ae),e.createElement("div",ce))}));g.displayName="ScrollPanel";export{g as ScrollPanel};

package/scrollpanel/scrollpanel.js

@@ -37,13 +37,69 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     return _extends.apply(this, arguments);
   }
 
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    return arr2;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _nonIterableRest() {
+    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 _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
   var ScrollPanelBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'ScrollPanel',
       id: null,
       style: null,
       className: null,
-      children: undefined
+      children: undefined,
+      step: 5
     },
     css: {
       classes: {
@@ -56,13 +112,21 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
         barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
         bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
       },
-      styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+      styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
     }
   });
 
   var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = ScrollPanelBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(props.id),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      idState = _React$useState2[0],
+      setIdState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState('vertical'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      orientationState = _React$useState4[0],
+      setOrientationState = _React$useState4[1];
     var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
         props: props
       }),
@@ -76,6 +140,14 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     var contentRef = React__namespace.useRef(null);
     var xBarRef = React__namespace.useRef(null);
     var yBarRef = React__namespace.useRef(null);
+    var _React$useState5 = React__namespace.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      lastScrollLeft = _React$useState6[0],
+      setLastScrollLeft = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      lastScrollTop = _React$useState8[0],
+      setLastScrollTop = _React$useState8[1];
     var isXBarClicked = React__namespace.useRef(false);
     var isYBarClicked = React__namespace.useRef(false);
     var lastPageX = React__namespace.useRef(null);
@@ -84,6 +156,8 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     var scrollYRatio = React__namespace.useRef(null);
     var frame = React__namespace.useRef(null);
     var initialized = React__namespace.useRef(false);
+    var timer = React__namespace.useRef(null);
+    var contentId = idState + '_content';
     var calculateContainerHeight = function calculateContainerHeight() {
       var containerStyles = getComputedStyle(containerRef.current);
       var xBarStyles = getComputedStyle(xBarRef.current);
@@ -123,6 +197,28 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
         }
       });
     };
+    var onFocus = function onFocus(event) {
+      if (xBarRef.current.isSameNode(event.target)) {
+        setOrientationState('horizontal');
+      } else if (yBarRef.current.isSameNode(event.target)) {
+        setOrientationState('vertical');
+      }
+    };
+    var onBlur = function onBlur() {
+      if (orientationState === 'horizontal') {
+        setOrientationState('vertical');
+      }
+    };
+    var onScroll = function onScroll(event) {
+      if (lastScrollLeft !== event.target.scrollLeft) {
+        setLastScrollLeft(event.target.scrollLeft);
+        setOrientationState('horizontal');
+      } else if (lastScrollTop !== event.target.scrollTop) {
+        setLastScrollTop(event.target.scrollTop);
+        setOrientationState('vertical');
+      }
+      moveBar();
+    };
     var onYBarMouseDown = function onYBarMouseDown(event) {
       isYBarClicked.current = true;
       lastPageY.current = event.pageY;
@@ -174,10 +270,76 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
       isXBarClicked.current = false;
       isYBarClicked.current = false;
     };
+    var onKeyDown = function onKeyDown(event) {
+      if (orientationState === 'vertical') {
+        switch (event.code) {
+          case 'ArrowDown':
+            {
+              setTimer('scrollTop', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowUp':
+            {
+              setTimer('scrollTop', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+          case 'ArrowRight':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      } else if (orientationState === 'horizontal') {
+        switch (event.code) {
+          case 'ArrowRight':
+            {
+              setTimer('scrollLeft', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+            {
+              setTimer('scrollLeft', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowDown':
+          case 'ArrowUp':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      }
+    };
+    var onKeyUp = function onKeyUp() {
+      clearTimer();
+    };
+    var repeat = function repeat(bar, step) {
+      contentRef.current[bar] += step;
+      moveBar();
+    };
+    var setTimer = function setTimer(bar, step) {
+      clearTimer();
+      timer.current = setTimeout(function () {
+        repeat(bar, step);
+      }, 40);
+    };
+    var clearTimer = function clearTimer() {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
     var refresh = function refresh() {
       moveBar();
     };
     hooks.useMountEffect(function () {
+      if (!props.id) {
+        setIdState(utils.UniqueComponentId());
+      }
       moveBar();
       window.addEventListener('resize', moveBar);
       calculateContainerHeight();
@@ -220,17 +382,35 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     }, ptm('wrapper'));
     var contentProps = utils.mergeProps({
       className: cx('content'),
-      onScroll: moveBar,
+      onScroll: onScroll,
       onMouseEnter: moveBar
     }, ptm('content'));
     var barXProps = utils.mergeProps({
       ref: xBarRef,
+      role: 'scrollbar',
       className: cx('barx'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollTop,
+      'aria-controls': contentId,
+      'aria-orientation': 'horizontal',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
       onMouseDown: onXBarMouseDown
     }, ptm('barx'));
     var barYProps = utils.mergeProps({
       ref: yBarRef,
+      role: 'scrollbar',
       className: cx('bary'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollLeft,
+      'aria-controls': contentId,
+      'aria-orientation': 'vertical',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
       onMouseDown: onYBarMouseDown
     }, ptm('bary'));
     return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("div", _extends({