primereact 10.2.0 → 10.3.0

package/ripple/ripple.cjs.js

@@ -88,6 +88,61 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+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 styles = "\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n";
 var classes = {
   root: 'p-ink'
@@ -112,6 +167,10 @@ var RippleBase = componentbase.ComponentBase.extend({
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Ripple = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var _React$useState = React__namespace.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMounted = _React$useState2[0],
+    setMounted = _React$useState2[1];
   var inkRef = React__namespace.useRef(null);
   var targetRef = React__namespace.useRef(null);
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
@@ -176,12 +235,16 @@ var Ripple = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
     };
   });
   hooks.useMountEffect(function () {
-    if (inkRef.current) {
+    // for App Router in Next.js ^14
+    setMounted(true);
+  });
+  hooks.useUpdateEffect(function () {
+    if (isMounted && inkRef.current) {
       targetRef.current = getTarget();
       setDimensions();
       bindEvents();
     }
-  });
+  }, [isMounted]);
   hooks.useUpdateEffect(function () {
     if (inkRef.current && !targetRef.current) {
       targetRef.current = getTarget();

package/ripple/ripple.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/hooks"),n=require("primereact/utils"),o=require("primereact/componentbase");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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=u(e),a=i(r);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},l.apply(this,arguments)}function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function s(e,r){if("object"!==p(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}function f(e){var r=s(e,"string");return"symbol"===p(r)?r:String(r)}var d=o.ComponentBase.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(e){return n.ObjectUtils.getMergedProps(e,d.defaultProps)},getOtherProps:function(e){return n.ObjectUtils.getDiffProps(e,d.defaultProps)}});function m(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 b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?m(Object(t),!0).forEach((function(r){var n,o,i;n=e,i=t[r],(o=f(o=r))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var y=c.memo(c.forwardRef((function(e,o){var i=c.useRef(null),u=c.useRef(null),p=c.useContext(r.PrimeReactContext),s=d.getProps(e,p),f={props:s};t.useStyle(d.css.styles,{name:"ripple"});var m=d.setMetaData(b({},f)),y=m.ptm,g=m.cx,v=function(){return i.current&&i.current.parentElement},O=function(){u.current&&u.current.addEventListener("pointerdown",P)},P=function(e){var r=n.DomHandler.getOffset(u.current),t=e.pageX-r.left+document.body.scrollTop-n.DomHandler.getWidth(i.current)/2,o=e.pageY-r.top+document.body.scrollLeft-n.DomHandler.getHeight(i.current)/2;j(t,o)},j=function(e,r){i.current&&"none"!==getComputedStyle(i.current,null).display&&(n.DomHandler.removeClass(i.current,"p-ink-active"),h(),i.current.style.top=r+"px",i.current.style.left=e+"px",n.DomHandler.addClass(i.current,"p-ink-active"))},h=function(){if(i.current&&!n.DomHandler.getHeight(i.current)&&!n.DomHandler.getWidth(i.current)){var e=Math.max(n.DomHandler.getOuterWidth(u.current),n.DomHandler.getOuterHeight(u.current));i.current.style.height=e+"px",i.current.style.width=e+"px"}};c.useImperativeHandle(o,(function(){return{props:s,getInk:function(){return i.current},getTarget:function(){return u.current}}})),t.useMountEffect((function(){i.current&&(u.current=v(),h(),O())})),t.useUpdateEffect((function(){i.current&&!u.current&&(u.current=v(),h(),O())})),t.useUnmountEffect((function(){i.current&&(u.current=null,u.current&&u.current.removeEventListener("pointerdown",P))}));var D=n.mergeProps({"aria-hidden":!0,className:n.classNames(g("root"))},d.getOtherProps(s),y("root"));return p&&p.ripple||a.default.ripple?c.createElement("span",l({role:"presentation",ref:i},D,{onAnimationEnd:function(e){n.DomHandler.removeClass(e.currentTarget,"p-ink-active")}})):null})));y.displayName="Ripple",exports.Ripple=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/hooks"),n=require("primereact/utils"),o=require("primereact/componentbase");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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=u(e),a=i(r);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},l.apply(this,arguments)}function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function s(e,r){if("object"!==p(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}function f(e){var r=s(e,"string");return"symbol"===p(r)?r:String(r)}function d(e){if(Array.isArray(e))return e}function m(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,i,u,c=[],a=!0,l=!1;try{if(i=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;a=!1}else for(;!(a=(n=i.call(t)).done)&&(c.push(n.value),c.length!==r);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(l)throw o}}return c}}function y(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function b(e,r){if(e){if("string"==typeof e)return y(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,r):void 0}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var v=o.ComponentBase.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(e){return n.ObjectUtils.getMergedProps(e,v.defaultProps)},getOtherProps:function(e){return n.ObjectUtils.getDiffProps(e,v.defaultProps)}});function O(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 h(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?O(Object(t),!0).forEach((function(r){var n,o,i;n=e,i=t[r],(o=f(o=r))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var j=c.memo(c.forwardRef((function(e,o){var i,u,p=c.useState(!1),s=(u=2,d(i=p)||m(i,u)||b(i,u)||g()),f=s[0],y=s[1],O=c.useRef(null),j=c.useRef(null),P=c.useContext(r.PrimeReactContext),w=v.getProps(e,P),S={props:w};t.useStyle(v.css.styles,{name:"ripple"});var D=v.setMetaData(h({},S)),E=D.ptm,k=D.cx,H=function(){return O.current&&O.current.parentElement},x=function(){j.current&&j.current.addEventListener("pointerdown",C)},C=function(e){var r=n.DomHandler.getOffset(j.current),t=e.pageX-r.left+document.body.scrollTop-n.DomHandler.getWidth(O.current)/2,o=e.pageY-r.top+document.body.scrollLeft-n.DomHandler.getHeight(O.current)/2;A(t,o)},A=function(e,r){O.current&&"none"!==getComputedStyle(O.current,null).display&&(n.DomHandler.removeClass(O.current,"p-ink-active"),M(),O.current.style.top=r+"px",O.current.style.left=e+"px",n.DomHandler.addClass(O.current,"p-ink-active"))},M=function(){if(O.current&&!n.DomHandler.getHeight(O.current)&&!n.DomHandler.getWidth(O.current)){var e=Math.max(n.DomHandler.getOuterWidth(j.current),n.DomHandler.getOuterHeight(j.current));O.current.style.height=e+"px",O.current.style.width=e+"px"}};c.useImperativeHandle(o,(function(){return{props:w,getInk:function(){return O.current},getTarget:function(){return j.current}}})),t.useMountEffect((function(){y(!0)})),t.useUpdateEffect((function(){f&&O.current&&(j.current=H(),M(),x())}),[f]),t.useUpdateEffect((function(){O.current&&!j.current&&(j.current=H(),M(),x())})),t.useUnmountEffect((function(){O.current&&(j.current=null,j.current&&j.current.removeEventListener("pointerdown",C))}));var R=n.mergeProps({"aria-hidden":!0,className:n.classNames(k("root"))},v.getOtherProps(w),E("root"));return P&&P.ripple||a.default.ripple?c.createElement("span",l({role:"presentation",ref:O},R,{onAnimationEnd:function(e){n.DomHandler.removeClass(e.currentTarget,"p-ink-active")}})):null})));j.displayName="Ripple",exports.Ripple=j;

package/ripple/ripple.esm.js

@@ -61,6 +61,61 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+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 styles = "\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n";
 var classes = {
   root: 'p-ink'
@@ -85,6 +140,10 @@ var RippleBase = ComponentBase.extend({
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Ripple = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMounted = _React$useState2[0],
+    setMounted = _React$useState2[1];
   var inkRef = React.useRef(null);
   var targetRef = React.useRef(null);
   var context = React.useContext(PrimeReactContext);
@@ -149,12 +208,16 @@ var Ripple = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
     };
   });
   useMountEffect(function () {
-    if (inkRef.current) {
+    // for App Router in Next.js ^14
+    setMounted(true);
+  });
+  useUpdateEffect(function () {
+    if (isMounted && inkRef.current) {
       targetRef.current = getTarget();
       setDimensions();
       bindEvents();
     }
-  });
+  }, [isMounted]);
   useUpdateEffect(function () {
     if (inkRef.current && !targetRef.current) {
       targetRef.current = getTarget();

package/ripple/ripple.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import r,{PrimeReactContext as t}from"primereact/api";import{useStyle as n,useMountEffect as o,useUpdateEffect as i,useUnmountEffect as c}from"primereact/hooks";import{ObjectUtils as u,mergeProps as p,classNames as a,DomHandler as l}from"primereact/utils";import{ComponentBase as s}from"primereact/componentbase";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},f.apply(this,arguments)}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function y(e,r){if("object"!==m(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!==m(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}function d(e){var r=y(e,"string");return"symbol"===m(r)?r:String(r)}var b=s.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(e){return u.getMergedProps(e,b.defaultProps)},getOtherProps:function(e){return u.getDiffProps(e,b.defaultProps)}});function g(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 v(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?g(Object(t),!0).forEach((function(r){var n,o,i;n=e,i=t[r],(o=d(o=r))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var O=e.memo(e.forwardRef((function(u,s){var m=e.useRef(null),y=e.useRef(null),d=e.useContext(t),g=b.getProps(u,d),O={props:g};n(b.css.styles,{name:"ripple"});var h=b.setMetaData(v({},O)),P=h.ptm,j=h.cx,w=function(){return m.current&&m.current.parentElement},k=function(){y.current&&y.current.addEventListener("pointerdown",S)},S=function(e){var r=l.getOffset(y.current),t=e.pageX-r.left+document.body.scrollTop-l.getWidth(m.current)/2,n=e.pageY-r.top+document.body.scrollLeft-l.getHeight(m.current)/2;x(t,n)},x=function(e,r){m.current&&"none"!==getComputedStyle(m.current,null).display&&(l.removeClass(m.current,"p-ink-active"),E(),m.current.style.top=r+"px",m.current.style.left=e+"px",l.addClass(m.current,"p-ink-active"))},E=function(){if(m.current&&!l.getHeight(m.current)&&!l.getWidth(m.current)){var e=Math.max(l.getOuterWidth(y.current),l.getOuterHeight(y.current));m.current.style.height=e+"px",m.current.style.width=e+"px"}};e.useImperativeHandle(s,(function(){return{props:g,getInk:function(){return m.current},getTarget:function(){return y.current}}})),o((function(){m.current&&(y.current=w(),E(),k())})),i((function(){m.current&&!y.current&&(y.current=w(),E(),k())})),c((function(){m.current&&(y.current=null,y.current&&y.current.removeEventListener("pointerdown",S))}));var D=p({"aria-hidden":!0,className:a(j("root"))},b.getOtherProps(g),P("root"));return d&&d.ripple||r.ripple?e.createElement("span",f({role:"presentation",ref:m},D,{onAnimationEnd:function(e){l.removeClass(e.currentTarget,"p-ink-active")}})):null})));O.displayName="Ripple";export{O as Ripple};
+import*as r from"react";import e,{PrimeReactContext as t}from"primereact/api";import{useStyle as n,useMountEffect as o,useUpdateEffect as i,useUnmountEffect as u}from"primereact/hooks";import{ObjectUtils as c,mergeProps as a,classNames as l,DomHandler as p}from"primereact/utils";import{ComponentBase as s}from"primereact/componentbase";function f(){return f=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},f.apply(this,arguments)}function m(r){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},m(r)}function y(r,e){if("object"!==m(r)||null===r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e||"default");if("object"!==m(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}function b(r){var e=y(r,"string");return"symbol"===m(e)?e:String(e)}function d(r){if(Array.isArray(r))return r}function g(r,e){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var n,o,i,u,c=[],a=!0,l=!1;try{if(i=(t=t.call(r)).next,0===e){if(Object(t)!==t)return;a=!1}else for(;!(a=(n=i.call(t)).done)&&(c.push(n.value),c.length!==e);a=!0);}catch(r){l=!0,o=r}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(l)throw o}}return c}}function v(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function h(r,e){if(r){if("string"==typeof r)return v(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(r,e):void 0}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var j=s.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(r){return c.getMergedProps(r,j.defaultProps)},getOtherProps:function(r){return c.getDiffProps(r,j.defaultProps)}});function P(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function w(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?P(Object(t),!0).forEach((function(e){var n,o,i;n=r,i=t[e],(o=b(o=e))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}var S=r.memo(r.forwardRef((function(c,s){var m,y,b=r.useState(!1),v=(y=2,d(m=b)||g(m,y)||h(m,y)||O()),P=v[0],S=v[1],k=r.useRef(null),x=r.useRef(null),E=r.useContext(t),A=j.getProps(c,E),C={props:A};n(j.css.styles,{name:"ripple"});var D=j.setMetaData(w({},C)),T=D.ptm,I=D.cx,R=function(){return k.current&&k.current.parentElement},H=function(){x.current&&x.current.addEventListener("pointerdown",M)},M=function(r){var e=p.getOffset(x.current),t=r.pageX-e.left+document.body.scrollTop-p.getWidth(k.current)/2,n=r.pageY-e.top+document.body.scrollLeft-p.getHeight(k.current)/2;L(t,n)},L=function(r,e){k.current&&"none"!==getComputedStyle(k.current,null).display&&(p.removeClass(k.current,"p-ink-active"),N(),k.current.style.top=e+"px",k.current.style.left=r+"px",p.addClass(k.current,"p-ink-active"))},N=function(){if(k.current&&!p.getHeight(k.current)&&!p.getWidth(k.current)){var r=Math.max(p.getOuterWidth(x.current),p.getOuterHeight(x.current));k.current.style.height=r+"px",k.current.style.width=r+"px"}};r.useImperativeHandle(s,(function(){return{props:A,getInk:function(){return k.current},getTarget:function(){return x.current}}})),o((function(){S(!0)})),i((function(){P&&k.current&&(x.current=R(),N(),H())}),[P]),i((function(){k.current&&!x.current&&(x.current=R(),N(),H())})),u((function(){k.current&&(x.current=null,x.current&&x.current.removeEventListener("pointerdown",M))}));var W=a({"aria-hidden":!0,className:l(I("root"))},j.getOtherProps(A),T("root"));return E&&E.ripple||e.ripple?r.createElement("span",f({role:"presentation",ref:k},W,{onAnimationEnd:function(r){p.removeClass(r.currentTarget,"p-ink-active")}})):null})));S.displayName="Ripple";export{S as Ripple};

package/ripple/ripple.js

@@ -81,6 +81,61 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils, co
     return obj;
   }
 
+  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 styles = "\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n";
   var classes = {
     root: 'p-ink'
@@ -105,6 +160,10 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils, co
   function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var Ripple = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var _React$useState = React__namespace.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMounted = _React$useState2[0],
+      setMounted = _React$useState2[1];
     var inkRef = React__namespace.useRef(null);
     var targetRef = React__namespace.useRef(null);
     var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
@@ -169,12 +228,16 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils, co
       };
     });
     hooks.useMountEffect(function () {
-      if (inkRef.current) {
+      // for App Router in Next.js ^14
+      setMounted(true);
+    });
+    hooks.useUpdateEffect(function () {
+      if (isMounted && inkRef.current) {
         targetRef.current = getTarget();
         setDimensions();
         bindEvents();
       }
-    });
+    }, [isMounted]);
     hooks.useUpdateEffect(function () {
       if (inkRef.current && !targetRef.current) {
         targetRef.current = getTarget();

package/ripple/ripple.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.ripple=function(e,t,r,n,o,i){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=u(t),l=c(r);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function f(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=f(e,"string");return"symbol"===s(t)?t:String(t)}var m=i.ComponentBase.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(e){return o.ObjectUtils.getMergedProps(e,m.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,m.defaultProps)}});function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){var n,o,i;n=e,i=r[t],(o=d(o=t))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var g=a.memo(a.forwardRef((function(e,t){var i=a.useRef(null),c=a.useRef(null),u=a.useContext(r.PrimeReactContext),s=m.getProps(e,u),f={props:s};n.useStyle(m.css.styles,{name:"ripple"});var d=m.setMetaData(y({},f)),b=d.ptm,g=d.cx,v=function(){return i.current&&i.current.parentElement},O=function(){c.current&&c.current.addEventListener("pointerdown",h)},h=function(e){var t=o.DomHandler.getOffset(c.current),r=e.pageX-t.left+document.body.scrollTop-o.DomHandler.getWidth(i.current)/2,n=e.pageY-t.top+document.body.scrollLeft-o.DomHandler.getHeight(i.current)/2;P(r,n)},P=function(e,t){i.current&&"none"!==getComputedStyle(i.current,null).display&&(o.DomHandler.removeClass(i.current,"p-ink-active"),j(),i.current.style.top=t+"px",i.current.style.left=e+"px",o.DomHandler.addClass(i.current,"p-ink-active"))},j=function(){if(i.current&&!o.DomHandler.getHeight(i.current)&&!o.DomHandler.getWidth(i.current)){var e=Math.max(o.DomHandler.getOuterWidth(c.current),o.DomHandler.getOuterHeight(c.current));i.current.style.height=e+"px",i.current.style.width=e+"px"}};a.useImperativeHandle(t,(function(){return{props:s,getInk:function(){return i.current},getTarget:function(){return c.current}}})),n.useMountEffect((function(){i.current&&(c.current=v(),j(),O())})),n.useUpdateEffect((function(){i.current&&!c.current&&(c.current=v(),j(),O())})),n.useUnmountEffect((function(){i.current&&(c.current=null,c.current&&c.current.removeEventListener("pointerdown",h))}));var D=o.mergeProps({"aria-hidden":!0,className:o.classNames(g("root"))},m.getOtherProps(s),b("root"));return u&&u.ripple||l.default.ripple?a.createElement("span",p({role:"presentation",ref:i},D,{onAnimationEnd:function(e){o.DomHandler.removeClass(e.currentTarget,"p-ink-active")}})):null})));return g.displayName="Ripple",e.Ripple=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.componentbase);
+this.primereact=this.primereact||{},this.primereact.ripple=function(e,t,r,n,o,i){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=c(t),l=u(r);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function f(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=f(e,"string");return"symbol"===s(t)?t:String(t)}function m(e){if(Array.isArray(e))return e}function y(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,c=[],a=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=i.call(r)).done)&&(c.push(n.value),c.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(l)throw o}}return c}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function g(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}function v(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var O=i.ComponentBase.extend({defaultProps:{__TYPE:"Ripple",children:void 0},css:{styles:"\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n",classes:{root:"p-ink"}},getProps:function(e){return o.ObjectUtils.getMergedProps(e,O.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,O.defaultProps)}});function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){var n,o,i;n=e,i=r[t],(o=d(o=t))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var P=a.memo(a.forwardRef((function(e,t){var i,u,c=a.useState(!1),s=(u=2,m(i=c)||y(i,u)||g(i,u)||v()),f=s[0],d=s[1],b=a.useRef(null),h=a.useRef(null),P=a.useContext(r.PrimeReactContext),w=O.getProps(e,P),S={props:w};n.useStyle(O.css.styles,{name:"ripple"});var D=O.setMetaData(j({},S)),E=D.ptm,k=D.cx,H=function(){return b.current&&b.current.parentElement},x=function(){h.current&&h.current.addEventListener("pointerdown",C)},C=function(e){var t=o.DomHandler.getOffset(h.current),r=e.pageX-t.left+document.body.scrollTop-o.DomHandler.getWidth(b.current)/2,n=e.pageY-t.top+document.body.scrollLeft-o.DomHandler.getHeight(b.current)/2;R(r,n)},R=function(e,t){b.current&&"none"!==getComputedStyle(b.current,null).display&&(o.DomHandler.removeClass(b.current,"p-ink-active"),A(),b.current.style.top=t+"px",b.current.style.left=e+"px",o.DomHandler.addClass(b.current,"p-ink-active"))},A=function(){if(b.current&&!o.DomHandler.getHeight(b.current)&&!o.DomHandler.getWidth(b.current)){var e=Math.max(o.DomHandler.getOuterWidth(h.current),o.DomHandler.getOuterHeight(h.current));b.current.style.height=e+"px",b.current.style.width=e+"px"}};a.useImperativeHandle(t,(function(){return{props:w,getInk:function(){return b.current},getTarget:function(){return h.current}}})),n.useMountEffect((function(){d(!0)})),n.useUpdateEffect((function(){f&&b.current&&(h.current=H(),A(),x())}),[f]),n.useUpdateEffect((function(){b.current&&!h.current&&(h.current=H(),A(),x())})),n.useUnmountEffect((function(){b.current&&(h.current=null,h.current&&h.current.removeEventListener("pointerdown",C))}));var M=o.mergeProps({"aria-hidden":!0,className:o.classNames(k("root"))},O.getOtherProps(w),E("root"));return P&&P.ripple||l.default.ripple?a.createElement("span",p({role:"presentation",ref:b},M,{onAnimationEnd:function(e){o.DomHandler.removeClass(e.currentTarget,"p-ink-active")}})):null})));return P.displayName="Ripple",e.Ripple=P,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.componentbase);

package/scrollpanel/scrollpanel.cjs.js

@@ -44,13 +44,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.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ScrollPanel',
     id: null,
     style: null,
     className: null,
-    children: undefined
+    children: undefined,
+    step: 5
   },
   css: {
     classes: {
@@ -63,13 +119,21 @@ var ScrollPanelBase = componentbase.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__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
     }),
@@ -83,6 +147,14 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
   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);
@@ -91,6 +163,8 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
   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);
@@ -130,6 +204,28 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
       }
     });
   };
+  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;
@@ -181,10 +277,76 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
     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();
@@ -227,17 +389,35 @@ var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, re
   }, 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({