primereact 8.1.0 → 8.3.0

package/resources/themes/saga-purple/theme.css

@@ -42,6 +42,7 @@
   --surface-hover: #e9ecef;
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 0.2rem #df9eea;
+  color-scheme: light;
 }
 
 * {
@@ -1058,7 +1059,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #8c239e;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #f44336;
 }
 
@@ -3342,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
@@ -3371,6 +3385,12 @@
   color: #495057;
   background: #F3E5F5;
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: #e9ecef;
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: #e9ecef;
+}
 
 @media screen and (max-width: 769px) {
   .p-orderlist {
@@ -3524,6 +3544,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
@@ -4290,6 +4323,10 @@
   color: #495057;
   padding: 0 1.5rem 2rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #ffffff;
@@ -4343,7 +4380,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
+  border-bottom-color: #f2f2f2;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #ffffff;
@@ -5967,10 +6004,6 @@
   color: #ffffff;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #9C27B0;

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

@@ -42,6 +42,7 @@
   --surface-hover: #f4f4f5;
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 1px #6366F1;
+  color-scheme: light;
 }
 
 @font-face {
@@ -1093,7 +1094,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #4338CA;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #f0a9a7;
 }
 
@@ -3377,6 +3378,19 @@
   border-top-right-radius: 0.375rem;
   border-top-left-radius: 0.375rem;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #71717A;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e5e7eb;
   background: #ffffff;
@@ -3406,6 +3420,12 @@
   color: #312E81;
   background: #EEF2FF;
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: #fcfcfc;
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: #f4f4f5;
+}
 
 @media screen and (max-width: 769px) {
   .p-orderlist {
@@ -3559,6 +3579,19 @@
   border-top-right-radius: 0.375rem;
   border-top-left-radius: 0.375rem;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.75rem;
+  color: #71717A;
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #e5e7eb;
   background: #ffffff;
@@ -4325,6 +4358,10 @@
   color: #3f3f46;
   padding: 0 1.5rem 1.5rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #ffffff;
@@ -4378,7 +4415,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
+  border-bottom-color: #f2f2f2;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #ffffff;
@@ -6002,10 +6039,6 @@
   color: #ffffff;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup {
   box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);

package/resources/themes/vela-blue/theme.css

@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 1px #93cbf9;
+  color-scheme: light dark;
 }
 
 * {
@@ -1058,7 +1059,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #43a5f4;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #ef9a9a;
 }
 
@@ -3342,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -3371,6 +3385,12 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(100, 181, 246, 0.16);
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.01);
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
 
 @media screen and (max-width: 960px) {
   .p-orderlist {
@@ -3524,6 +3544,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -4290,6 +4323,10 @@
   color: rgba(255, 255, 255, 0.87);
   padding: 0 1.5rem 2rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
@@ -4343,7 +4380,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(48, 69, 98, 0);
-  border-bottom-color: #304562;
+  border-bottom-color: #2e425d;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #1f2d40;
@@ -5967,10 +6004,6 @@
   color: #121212;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #64B5F6;

package/resources/themes/vela-green/theme.css

@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 1px #a7d8a9;
+  color-scheme: light dark;
 }
 
 * {
@@ -1058,7 +1059,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #6abd6e;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #ef9a9a;
 }
 
@@ -3342,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -3371,6 +3385,12 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(129, 199, 132, 0.16);
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.01);
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
 
 @media screen and (max-width: 960px) {
   .p-orderlist {
@@ -3524,6 +3544,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -4290,6 +4323,10 @@
   color: rgba(255, 255, 255, 0.87);
   padding: 0 1.5rem 2rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
@@ -4343,7 +4380,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(48, 69, 98, 0);
-  border-bottom-color: #304562;
+  border-bottom-color: #2e425d;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #1f2d40;
@@ -5967,10 +6004,6 @@
   color: #121212;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #81C784;

package/resources/themes/vela-orange/theme.css

@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 1px #ffe284;
+  color-scheme: light dark;
 }
 
 * {
@@ -1058,7 +1059,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #ffcd2e;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #ef9a9a;
 }
 
@@ -3342,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -3371,6 +3385,12 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 213, 79, 0.16);
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.01);
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
 
 @media screen and (max-width: 960px) {
   .p-orderlist {
@@ -3524,6 +3544,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -4290,6 +4323,10 @@
   color: rgba(255, 255, 255, 0.87);
   padding: 0 1.5rem 2rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
@@ -4343,7 +4380,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(48, 69, 98, 0);
-  border-bottom-color: #304562;
+  border-bottom-color: #2e425d;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #1f2d40;
@@ -5967,10 +6004,6 @@
   color: #121212;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #FFD54F;

package/resources/themes/vela-purple/theme.css

@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
   --focus-ring: 0 0 0 1px #cf95d9;
+  color-scheme: light dark;
 }
 
 * {
@@ -1058,7 +1059,7 @@
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #b052c0;
 }
-.p-inputswitch.p-invalid {
+.p-inputswitch.p-invalid .p-inputswitch-slider {
   border-color: #ef9a9a;
 }
 
@@ -3342,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -3371,6 +3385,12 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.01);
+}
+.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
 
 @media screen and (max-width: 960px) {
   .p-orderlist {
@@ -3524,6 +3544,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-picklist .p-picklist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-picklist .p-picklist-list {
   border: 1px solid #304562;
   background: #1f2d40;
@@ -4290,6 +4323,10 @@
   color: rgba(255, 255, 255, 0.87);
   padding: 0 1.5rem 2rem 1.5rem;
 }
+.p-dialog .p-dialog-content:last-of-type {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
@@ -4343,7 +4380,7 @@
 .p-overlaypanel:before {
   border: solid transparent;
   border-color: rgba(48, 69, 98, 0);
-  border-bottom-color: #304562;
+  border-bottom-color: #2e425d;
 }
 .p-overlaypanel.p-overlaypanel-flipped:after {
   border-top-color: #1f2d40;
@@ -5967,10 +6004,6 @@
   color: #121212;
 }
 
-.p-virtualscroller-loading-icon {
-  font-size: 2rem;
-}
-
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #BA68C8;

package/scrollpanel/scrollpanel.cjs.js

@@ -44,6 +44,24 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+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 ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var containerRef = React__namespace.useRef(null);
   var contentRef = React__namespace.useRef(null);
@@ -177,9 +195,21 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
     }
   });
   React__namespace.useImperativeHandle(ref, function () {
-    return {
-      refresh: refresh
-    };
+    return _objectSpread({
+      refresh: refresh,
+      getElement: function getElement() {
+        return containerRef.current;
+      },
+      getContent: function getContent() {
+        return contentRef.current;
+      },
+      getXBar: function getXBar() {
+        return xBarRef.current;
+      },
+      getYBar: function getYBar() {
+        return yBarRef.current;
+      }
+    }, props);
   });
   var otherProps = utils.ObjectUtils.findDiffKeys(props, ScrollPanel.defaultProps);
   var className = utils.classNames('p-scrollpanel p-component', props.className);

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),n=require("primereact/hooks"),t=require("primereact/utils");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(r);function c(){return c=Object.assign||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 o=a.forwardRef((function(r,l){var u=a.useRef(null),s=a.useRef(null),i=a.useRef(null),d=a.useRef(null),p=a.useRef(!1),m=a.useRef(!1),f=a.useRef(null),h=a.useRef(null),v=a.useRef(null),g=a.useRef(null),b=a.useRef(null),y=a.useRef(!1),H=function(){var e=s.current.scrollWidth,r=-1*(u.current.clientHeight-i.current.clientHeight);v.current=s.current.clientWidth/e;var n=s.current.scrollHeight,l=-1*(u.current.clientWidth-d.current.clientWidth);g.current=s.current.clientHeight/n,b.current=window.requestAnimationFrame((function(){v.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*v.current,10)+"%; left:"+s.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),g.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*g.current,10)+"%; top: calc("+s.current.scrollTop/n*100+"% - "+i.current.clientHeight+"px);right:"+l+"px;")}))},w=function(e){p?D(e):(m||D(e),E(e))},D=function(e){var r=e.pageX-f.current;f.current=e.pageX,b.current=window.requestAnimationFrame((function(){s.current.scrollLeft+=r/v.current}))},E=function(r){var n=r.pageY-h.current;h.current=e.pageY,b.current=window.requestAnimationFrame((function(){s.current.scrollTop+=n/g.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",w),document.removeEventListener("mouseup",e),p.current=!1,m.current=!1},C=function(){H()};n.useMountEffect((function(){var e,r,n;H(),window.addEventListener("resize",H),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"),y.current=!0})),n.useUnmountEffect((function(){y.current&&window.removeEventListener("resize",H),b.current&&window.cancelAnimationFrame(b.current)})),a.useImperativeHandle(l,(function(){return{refresh:C}}));var R=t.ObjectUtils.findDiffKeys(r,o.defaultProps),O=t.classNames("p-scrollpanel p-component",r.className);return a.createElement("div",c({ref:u,id:r.id,className:O,style:r.style},R),a.createElement("div",{className:"p-scrollpanel-wrapper"},a.createElement("div",{ref:s,className:"p-scrollpanel-content",onScroll:H,onMouseEnter:H},r.children)),a.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",x),e.preventDefault()}}),a.createElement("div",{ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){m.current=!0,h.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",x),e.preventDefault()}}))}));o.displayName="ScrollPanel",o.defaultProps={__TYPE:"ScrollPanel",id:null,style:null,className:null},exports.ScrollPanel=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=require("primereact/hooks"),n=require("primereact/utils");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 c=l(r);function o(){return o=Object.assign||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)}function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){u(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var i=c.forwardRef((function(r,l){var u=c.useRef(null),a=c.useRef(null),d=c.useRef(null),p=c.useRef(null),f=c.useRef(!1),m=c.useRef(!1),b=c.useRef(null),g=c.useRef(null),v=c.useRef(null),h=c.useRef(null),y=c.useRef(null),O=c.useRef(!1),w=function(){var e=a.current.scrollWidth,r=-1*(u.current.clientHeight-d.current.clientHeight);v.current=a.current.clientWidth/e;var t=a.current.scrollHeight,l=-1*(u.current.clientWidth-p.current.clientWidth);h.current=a.current.clientHeight/t,y.current=window.requestAnimationFrame((function(){v.current>=1?n.DomHandler.addClass(d.current,"p-scrollpanel-hidden"):(n.DomHandler.removeClass(d.current,"p-scrollpanel-hidden"),d.current.style.cssText="width:"+Math.max(100*v.current,10)+"%; left:"+a.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),h.current>=1?n.DomHandler.addClass(p.current,"p-scrollpanel-hidden"):(n.DomHandler.removeClass(p.current,"p-scrollpanel-hidden"),p.current.style.cssText="height:"+Math.max(100*h.current,10)+"%; top: calc("+a.current.scrollTop/t*100+"% - "+d.current.clientHeight+"px);right:"+l+"px;")}))},D=function(e){f?j(e):(m||j(e),E(e))},j=function(e){var r=e.pageX-b.current;b.current=e.pageX,y.current=window.requestAnimationFrame((function(){a.current.scrollLeft+=r/v.current}))},E=function(r){var t=r.pageY-g.current;g.current=e.pageY,y.current=window.requestAnimationFrame((function(){a.current.scrollTop+=t/h.current}))},H=function e(r){n.DomHandler.removeClass(p.current,"p-scrollpanel-grabbed"),n.DomHandler.removeClass(d.current,"p-scrollpanel-grabbed"),n.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",e),f.current=!1,m.current=!1},P=function(){w()};t.useMountEffect((function(){var e,r,t;w(),window.addEventListener("resize",w),e=getComputedStyle(u.current),r=getComputedStyle(d.current),t=n.DomHandler.getHeight(u.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===t&&(u.current.style.height=a.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:a.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),O.current=!0})),t.useUnmountEffect((function(){O.current&&window.removeEventListener("resize",w),y.current&&window.cancelAnimationFrame(y.current)})),c.useImperativeHandle(l,(function(){return s({refresh:P,getElement:function(){return u.current},getContent:function(){return a.current},getXBar:function(){return d.current},getYBar:function(){return p.current}},r)}));var x=n.ObjectUtils.findDiffKeys(r,i.defaultProps),C=n.classNames("p-scrollpanel p-component",r.className);return c.createElement("div",o({ref:u,id:r.id,className:C,style:r.style},x),c.createElement("div",{className:"p-scrollpanel-wrapper"},c.createElement("div",{ref:a,className:"p-scrollpanel-content",onScroll:w,onMouseEnter:w},r.children)),c.createElement("div",{ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){f.current=!0,b.current=e.pageX,n.DomHandler.addClass(d.current,"p-scrollpanel-grabbed"),n.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",D),document.addEventListener("mouseup",H),e.preventDefault()}}),c.createElement("div",{ref:p,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){m.current=!0,g.current=e.pageY,n.DomHandler.addClass(p.current,"p-scrollpanel-grabbed"),n.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",D),document.addEventListener("mouseup",H),e.preventDefault()}}))}));i.displayName="ScrollPanel",i.defaultProps={__TYPE:"ScrollPanel",id:null,style:null,className:null},exports.ScrollPanel=i;

package/scrollpanel/scrollpanel.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 
-export interface ScrollPanelProps {
-    id?: string;
-    style?: object;
-    className?: string;
+export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     children?: React.ReactNode;
 }
 
-export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> { }
+export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> { 
+    public getElement(): HTMLDivElement;
+    public getContent(): HTMLDivElement;
+    public getXBar(): HTMLDivElement;
+    public getYBar(): HTMLDivElement;
+}