primereact 10.6.2 → 10.6.4

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

@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -639,6 +639,7 @@
     border: 1px solid #304562;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ffd54f;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #ffe284;
     border-color: #ffd54f;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #304562;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #304562;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1314,6 +1315,7 @@
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     appearance: none;
     border-radius: 3px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ffd54f;
@@ -1327,6 +1329,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #ef9a9a;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
@@ -1422,6 +1412,15 @@
     right: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -2065,6 +2064,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.5rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.5rem;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;

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

@@ -625,10 +625,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(158, 173, 230, 0.08);
@@ -665,6 +665,7 @@
     border: 2px solid #263238;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #2d3e44;
@@ -675,6 +676,15 @@
     box-shadow: 0 0 0 1px #9eade6;
     border-color: #9eade6;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -715,38 +725,29 @@
     transition: box-shadow 0.3s;
     border-radius: 6px;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #9eade6;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #9eade6;
     background: rgba(158, 173, 230, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(158, 173, 230, 0.08);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #263238;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #263238;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #263238;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1340,6 +1341,7 @@
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #2d3e44;
@@ -1353,6 +1355,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f78c79;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.3s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f78c79;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -1448,6 +1438,15 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -2091,6 +2090,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;

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

@@ -625,10 +625,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #edf0fa;
@@ -665,6 +665,7 @@
     border: 2px solid #e1e1e1;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #cecece;
@@ -675,6 +676,15 @@
     box-shadow: 0 0 0 0.1rem #bbc7ee;
     border-color: #91a4e3;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -715,38 +725,29 @@
     transition: box-shadow 0.3s;
     border-radius: 6px;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #585858;
     background: #ced6f1;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #6c6c6c;
     background: #edf0fa;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f2f2f2;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #f2f2f2;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #f2f2f2;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1340,6 +1341,7 @@
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
     appearance: none;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #cecece;
@@ -1353,6 +1355,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f88c79;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
     color: #898989;
     transition-duration: 0.3s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f88c79;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #898989;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #898989;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -1448,6 +1438,15 @@
     right: 0.75rem;
     color: #898989;
   }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
   .p-listbox-list-wrapper {
     overflow: auto;
   }
@@ -2091,6 +2090,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;

package/ripple/ripple.d.ts

@@ -8,6 +8,28 @@
  *
  */
 import * as React from 'react';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type RipplePassThroughType<T> = PassThroughType<T, RipplePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RipplePassThroughMethodOptions {
+    props: RippleProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RippleProps.pt}
+ */
+export interface RipplePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RipplePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
 
 /**
  * Defines valid properties in Ripple component.
@@ -24,6 +46,16 @@ export interface RippleProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RipplePassThroughOptions}
+     */
+    pt?: RipplePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
 }
 
 /**

package/scrollpanel/scrollpanel.cjs.js

@@ -110,10 +110,7 @@ var ScrollPanelBase = componentbase.ComponentBase.extend({
   },
   css: {
     classes: {
-      root: function root(_ref) {
-        var props = _ref.props;
-        return utils.classNames('p-scrollpanel p-component', props.className);
-      },
+      root: 'p-scrollpanel p-component',
       wrapper: 'p-scrollpanel-wrapper',
       content: 'p-scrollpanel-content',
       barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
@@ -383,7 +380,7 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
     id: props.id,
     ref: containerRef,
     style: props.style,
-    className: cx('root')
+    className: utils.classNames(props.className, cx('root'))
   }, ScrollPanelBase.getOtherProps(props), ptm('root'));
   var wrapperProps = mergeProps({
     className: cx('wrapper')

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/componentbase"),t=require("primereact/hooks"),o=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(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=n.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:function(e){return o.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=t.useMergeProps(),s=a.useContext(r.PrimeReactContext),i=m.getProps(e,s),p=f(a.useState(i.id),2),d=p[0],h=p[1],b=f(a.useState("vertical"),2),v=b[0],g=b[1],y=m.setMetaData({props:i}),w=y.ptm,x=y.cx;n.useHandleStyle(m.css.styles,y.isUnstyled,{name:"scrollpanel"});var D=a.useRef(null),H=a.useRef(null),E=a.useRef(null),C=a.useRef(null),A=f(a.useState(0),2),S=A[0],R=A[1],L=f(a.useState(0),2),O=L[0],j=L[1],T=a.useRef(!1),P=a.useRef(!1),z=a.useRef(null),M=a.useRef(null),N=a.useRef(null),F=a.useRef(null),I=a.useRef(null),q=a.useRef(!1),U=a.useRef(null),k=d+"_content",B=function(){var e=H.current.scrollWidth,r=-1*(D.current.clientHeight-E.current.clientHeight);N.current=H.current.clientWidth/e;var n=H.current.scrollHeight,t=-1*(D.current.clientWidth-C.current.clientWidth);F.current=H.current.clientHeight/n,I.current=window.requestAnimationFrame((function(){N.current>=1?o.DomHandler.addClass(E.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(E.current,"p-scrollpanel-hidden"),E.current.style.cssText="width:"+Math.max(100*N.current,10)+"%; left:"+H.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),F.current>=1?o.DomHandler.addClass(C.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(C.current,"p-scrollpanel-hidden"),C.current.style.cssText="height:"+Math.max(100*F.current,10)+"%; top: calc("+H.current.scrollTop/n*100+"% - "+E.current.clientHeight+"px);right:"+t+"px;")}))},_=function(e){E.current.isSameNode(e.target)?g("horizontal"):C.current.isSameNode(e.target)&&g("vertical")},W=function(){"horizontal"===v&&g("vertical")},Y=function(e){T.current?K(e):(P.current||K(e),X(e))},K=function(e){var r=e.pageX-z.current;z.current=e.pageX,I.current=window.requestAnimationFrame((function(){H.current.scrollLeft+=r/N.current}))},X=function(e){var r=e.pageY-M.current;M.current=e.pageY,I.current=window.requestAnimationFrame((function(){H.current.scrollTop+=r/F.current}))},$=function e(r){o.DomHandler.removeClass(C.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",Y),document.removeEventListener("mouseup",e),T.current=!1,P.current=!1},G=function(e){if("vertical"===v)switch(e.code){case"ArrowDown":V("scrollTop",i.step),e.preventDefault();break;case"ArrowUp":V("scrollTop",-1*i.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===v)switch(e.code){case"ArrowRight":V("scrollLeft",i.step),e.preventDefault();break;case"ArrowLeft":V("scrollLeft",-1*i.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},J=function(){Z()},Q=function(e,r){H.current[e]+=r,B()},V=function(e,r){Z(),U.current=setTimeout((function(){Q(e,r)}),40)},Z=function(){U.current&&clearTimeout(U.current)},ee=function(){B()};t.useMountEffect((function(){var e,r,n;i.id||h(o.UniqueComponentId()),B(),window.addEventListener("resize",B),e=getComputedStyle(D.current),r=getComputedStyle(E.current),n=o.DomHandler.getHeight(D.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(D.current.style.height=H.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:H.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),q.current=!0})),t.useUnmountEffect((function(){q.current&&window.removeEventListener("resize",B),I.current&&window.cancelAnimationFrame(I.current)})),a.useImperativeHandle(l,(function(){return{props:i,refresh:ee,getElement:function(){return D.current},getContent:function(){return H.current},getXBar:function(){return E.current},getYBar:function(){return C.current}}}));var re=u({id:i.id,ref:D,style:i.style,className:x("root")},m.getOtherProps(i),w("root")),ne=u({className:x("wrapper")},w("wrapper")),te=u({className:x("content"),onScroll:function(e){S!==e.target.scrollLeft?(R(e.target.scrollLeft),g("horizontal")):O!==e.target.scrollTop&&(j(e.target.scrollTop),g("vertical")),B()},onMouseEnter:B},w("content")),oe=u({ref:E,role:"scrollbar",className:x("barx"),tabIndex:0,"aria-valuenow":O,"aria-controls":k,"aria-orientation":"horizontal",onFocus:_,onBlur:W,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){T.current=!0,z.current=e.pageX,o.DomHandler.addClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",$),e.preventDefault()}},w("barx")),le=u({ref:C,role:"scrollbar",className:x("bary"),tabIndex:0,"aria-valuenow":S,"aria-controls":k,"aria-orientation":"vertical",onFocus:_,onBlur:W,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){P.current=!0,M.current=e.pageY,o.DomHandler.addClass(C.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",$),e.preventDefault()}},w("bary"));return a.createElement("div",re,a.createElement("div",ne,a.createElement("div",c({ref:H},te),i.children)),a.createElement("div",oe),a.createElement("div",le))}));h.displayName="ScrollPanel",exports.ScrollPanel=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),n=require("primereact/componentbase"),t=require("primereact/hooks"),o=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(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=n.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:"p-scrollpanel p-component",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=t.useMergeProps(),s=a.useContext(r.PrimeReactContext),i=m.getProps(e,s),p=f(a.useState(i.id),2),d=p[0],h=p[1],b=f(a.useState("vertical"),2),v=b[0],g=b[1],y=m.setMetaData({props:i}),w=y.ptm,x=y.cx;n.useHandleStyle(m.css.styles,y.isUnstyled,{name:"scrollpanel"});var D=a.useRef(null),H=a.useRef(null),E=a.useRef(null),C=a.useRef(null),A=f(a.useState(0),2),S=A[0],R=A[1],L=f(a.useState(0),2),O=L[0],j=L[1],T=a.useRef(!1),P=a.useRef(!1),z=a.useRef(null),M=a.useRef(null),N=a.useRef(null),F=a.useRef(null),I=a.useRef(null),q=a.useRef(!1),U=a.useRef(null),k=d+"_content",B=function(){var e=H.current.scrollWidth,r=-1*(D.current.clientHeight-E.current.clientHeight);N.current=H.current.clientWidth/e;var n=H.current.scrollHeight,t=-1*(D.current.clientWidth-C.current.clientWidth);F.current=H.current.clientHeight/n,I.current=window.requestAnimationFrame((function(){N.current>=1?o.DomHandler.addClass(E.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(E.current,"p-scrollpanel-hidden"),E.current.style.cssText="width:"+Math.max(100*N.current,10)+"%; left:"+H.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),F.current>=1?o.DomHandler.addClass(C.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(C.current,"p-scrollpanel-hidden"),C.current.style.cssText="height:"+Math.max(100*F.current,10)+"%; top: calc("+H.current.scrollTop/n*100+"% - "+E.current.clientHeight+"px);right:"+t+"px;")}))},_=function(e){E.current.isSameNode(e.target)?g("horizontal"):C.current.isSameNode(e.target)&&g("vertical")},W=function(){"horizontal"===v&&g("vertical")},Y=function(e){T.current?K(e):(P.current||K(e),X(e))},K=function(e){var r=e.pageX-z.current;z.current=e.pageX,I.current=window.requestAnimationFrame((function(){H.current.scrollLeft+=r/N.current}))},X=function(e){var r=e.pageY-M.current;M.current=e.pageY,I.current=window.requestAnimationFrame((function(){H.current.scrollTop+=r/F.current}))},$=function e(r){o.DomHandler.removeClass(C.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",Y),document.removeEventListener("mouseup",e),T.current=!1,P.current=!1},G=function(e){if("vertical"===v)switch(e.code){case"ArrowDown":V("scrollTop",i.step),e.preventDefault();break;case"ArrowUp":V("scrollTop",-1*i.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===v)switch(e.code){case"ArrowRight":V("scrollLeft",i.step),e.preventDefault();break;case"ArrowLeft":V("scrollLeft",-1*i.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},J=function(){Z()},Q=function(e,r){H.current[e]+=r,B()},V=function(e,r){Z(),U.current=setTimeout((function(){Q(e,r)}),40)},Z=function(){U.current&&clearTimeout(U.current)},ee=function(){B()};t.useMountEffect((function(){var e,r,n;i.id||h(o.UniqueComponentId()),B(),window.addEventListener("resize",B),e=getComputedStyle(D.current),r=getComputedStyle(E.current),n=o.DomHandler.getHeight(D.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(D.current.style.height=H.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:H.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),q.current=!0})),t.useUnmountEffect((function(){q.current&&window.removeEventListener("resize",B),I.current&&window.cancelAnimationFrame(I.current)})),a.useImperativeHandle(l,(function(){return{props:i,refresh:ee,getElement:function(){return D.current},getContent:function(){return H.current},getXBar:function(){return E.current},getYBar:function(){return C.current}}}));var re=u({id:i.id,ref:D,style:i.style,className:o.classNames(i.className,x("root"))},m.getOtherProps(i),w("root")),ne=u({className:x("wrapper")},w("wrapper")),te=u({className:x("content"),onScroll:function(e){S!==e.target.scrollLeft?(R(e.target.scrollLeft),g("horizontal")):O!==e.target.scrollTop&&(j(e.target.scrollTop),g("vertical")),B()},onMouseEnter:B},w("content")),oe=u({ref:E,role:"scrollbar",className:x("barx"),tabIndex:0,"aria-valuenow":O,"aria-controls":k,"aria-orientation":"horizontal",onFocus:_,onBlur:W,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){T.current=!0,z.current=e.pageX,o.DomHandler.addClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",$),e.preventDefault()}},w("barx")),le=u({ref:C,role:"scrollbar",className:x("bary"),tabIndex:0,"aria-valuenow":S,"aria-controls":k,"aria-orientation":"vertical",onFocus:_,onBlur:W,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){P.current=!0,M.current=e.pageY,o.DomHandler.addClass(C.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",$),e.preventDefault()}},w("bary"));return a.createElement("div",re,a.createElement("div",ne,a.createElement("div",c({ref:H},te),i.children)),a.createElement("div",oe),a.createElement("div",le))}));h.displayName="ScrollPanel",exports.ScrollPanel=h;

package/scrollpanel/scrollpanel.esm.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { useMergeProps, useMountEffect, useUnmountEffect } from 'primereact/hooks';
-import { classNames, UniqueComponentId, DomHandler } from 'primereact/utils';
+import { UniqueComponentId, classNames, DomHandler } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -86,10 +86,7 @@ var ScrollPanelBase = ComponentBase.extend({
   },
   css: {
     classes: {
-      root: function root(_ref) {
-        var props = _ref.props;
-        return classNames('p-scrollpanel p-component', props.className);
-      },
+      root: 'p-scrollpanel p-component',
       wrapper: 'p-scrollpanel-wrapper',
       content: 'p-scrollpanel-content',
       barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
@@ -359,7 +356,7 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     id: props.id,
     ref: containerRef,
     style: props.style,
-    className: cx('root')
+    className: classNames(props.className, cx('root'))
   }, ScrollPanelBase.getOtherProps(props), ptm('root'));
   var wrapperProps = mergeProps({
     className: cx('wrapper')