primereact 8.0.1 → 8.2.0

package/multistatecheckbox/multistatecheckbox.esm.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useMountEffect } from 'primereact/hooks';
 import { Tooltip } from 'primereact/tooltip';
+import { ariaLabel } from 'primereact/api';
 import { ObjectUtils, classNames } from 'primereact/utils';
 
 function _extends() {
@@ -104,13 +105,11 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
       setFocusedState = _React$useState2[1];
 
   var elementRef = React.useRef(null);
-  var inputRef = React.useRef(props.inputRef);
   var equalityKey = props.optionValue ? null : props.dataKey;
 
   var onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       toggle(event);
-      inputRef.current.focus();
     }
   };
 
@@ -118,6 +117,11 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
   };
 
+  var getOptionAriaLabel = function getOptionAriaLabel(option) {
+    var ariaField = props.optionLabel || props.optionValue;
+    return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
+  };
+
   var findNextOption = function findNextOption() {
     if (props.options) {
       return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
@@ -151,6 +155,13 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     setFocusedState(false);
   };
 
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 32) {
+      toggle(e);
+      e.preventDefault();
+    }
+  };
+
   var getSelectedOptionMap = function getSelectedOptionMap() {
     var option, index;
 
@@ -167,9 +178,6 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     };
   };
 
-  React.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
   useMountEffect(function () {
     if (!props.empty && props.value === null) {
       toggle();
@@ -209,6 +217,8 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     'p-focus': focusedState
   }, selectedOption && selectedOption.className);
   var icon = createIcon();
+  var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
+  var ariaChecked = !!selectedOption ? 'true' : 'false';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
@@ -217,24 +227,20 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
   }, otherProps, {
     onClick: onClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: "checkbox",
-    "aria-labelledby": props.ariaLabelledBy,
-    id: props.inputId,
-    name: props.name,
+    className: boxClassName,
+    style: selectedOption && selectedOption.style,
+    tabIndex: props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
-    disabled: props.disabled,
-    readOnly: props.readOnly,
-    defaultChecked: !!selectedOption
-  })), /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
+    onKeyDown: onKeyDown,
     role: "checkbox",
-    "aria-checked": !!selectedOption,
-    style: selectedOption && selectedOption.style
-  }, icon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    "aria-checked": ariaChecked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label']
+  }, icon), focusedState && /*#__PURE__*/React.createElement("span", {
+    className: "p-sr-only",
+    "aria-live": "polite"
+  }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));
@@ -243,22 +249,22 @@ MultiStateCheckbox.displayName = 'MultiStateCheckbox';
 MultiStateCheckbox.defaultProps = {
   __TYPE: 'MultiStateCheckbox',
   id: null,
-  inputRef: null,
-  inputId: null,
   value: null,
   options: null,
   optionValue: null,
+  optionLabel: null,
   iconTemplate: null,
   dataKey: null,
-  name: null,
   style: null,
   className: null,
   disabled: false,
   readOnly: false,
   empty: true,
+  tabIndex: "0",
+  'aria-label': null,
+  'aria-labelledby': null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null
 };
 

package/multistatecheckbox/multistatecheckbox.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{useMountEffect as t}from"primereact/hooks";import{Tooltip as n}from"primereact/tooltip";import{ObjectUtils as l,classNames as o}from"primereact/utils";function a(){return a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},a.apply(this,arguments)}function r(e){if(Array.isArray(e))return e}function i(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,o,a=[],r=!0,i=!1;try{for(n=n.call(e);!(r=(l=n.next()).done)&&(a.push(l.value),!t||a.length!==t);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==n.return||n.return()}finally{if(i)throw o}}return a}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function c(e,t){if(e){if("string"==typeof e)return u(e,t);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)?u(e,t):void 0}}function p(){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 s=e.memo(e.forwardRef((function(u,f){var d,m,y=e.useState(!1),b=(m=2,r(d=y)||i(d,m)||c(d,m)||p()),h=b[0],v=b[1],g=e.useRef(null),x=e.useRef(u.inputRef),E=u.optionValue?null:u.dataKey,k=function(e){return u.optionValue?l.resolveFieldData(e,u.optionValue):e},O=function(e){if(u.onChange){var t=k(u.options?w===u.options.length-1?u.empty?null:u.options[0]:u.options[w+1]:null);u.onChange({originalEvent:e,value:t,stopPropagation:function(){},preventDefault:function(){},target:{name:u.name,id:u.id,value:t}})}};e.useEffect((function(){l.combinedRefs(x,u.inputRef)}),[x,u.inputRef]),t((function(){u.empty||null!==u.value||O()}));var N,S,C=(u.options&&(S=u.options.findIndex((function(e){return l.equals(u.value,k(e),E)})),N=u.options[S]),{option:N,index:S}),R=C.option,w=C.index,j=l.isNotEmpty(u.tooltip),A=l.findDiffKeys(u,s.defaultProps),I=o("p-multistatecheckbox p-checkbox p-component",u.className),P=o("p-checkbox-box",{"p-highlight":!!R,"p-disabled":u.disabled,"p-focus":h},R&&R.className),T=function(){var t,n,a,r=o("p-checkbox-icon p-c",(t={},n="".concat(R&&R.icon||""),a=!0,n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t)),i=e.createElement("span",{className:r});return u.iconTemplate?l.getJSXElement(u.iconTemplate,{option:R,className:r,element:i,props:u}):i}();return e.createElement(e.Fragment,null,e.createElement("div",a({ref:g,id:u.id,className:I,style:u.style},A,{onClick:function(e){u.disabled||u.readOnly||(O(e),x.current.focus())}}),e.createElement("div",{className:"p-hidden-accessible"},e.createElement("input",{ref:x,type:"checkbox","aria-labelledby":u.ariaLabelledBy,id:u.inputId,name:u.name,onFocus:function(){v(!0)},onBlur:function(){v(!1)},disabled:u.disabled,readOnly:u.readOnly,defaultChecked:!!R})),e.createElement("div",{className:P,role:"checkbox","aria-checked":!!R,style:R&&R.style},T)),j&&e.createElement(n,a({target:g,content:u.tooltip},u.tooltipOptions)))})));s.displayName="MultiStateCheckbox",s.defaultProps={__TYPE:"MultiStateCheckbox",id:null,inputRef:null,inputId:null,value:null,options:null,optionValue:null,iconTemplate:null,dataKey:null,name:null,style:null,className:null,disabled:!1,readOnly:!1,empty:!0,tooltip:null,tooltipOptions:null,ariaLabelledBy:null,onChange:null};export{s as MultiStateCheckbox};
+import*as e from"react";import{useMountEffect as t}from"primereact/hooks";import{Tooltip as n}from"primereact/tooltip";import{ariaLabel as l}from"primereact/api";import{ObjectUtils as o,classNames as a}from"primereact/utils";function r(){return r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},r.apply(this,arguments)}function i(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,o,a=[],r=!0,i=!1;try{for(n=n.call(e);!(r=(l=n.next()).done)&&(a.push(l.value),!t||a.length!==t);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==n.return||n.return()}finally{if(i)throw o}}return a}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function p(e,t){if(e){if("string"==typeof e)return c(e,t);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)?c(e,t):void 0}}function s(){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 f=e.memo(e.forwardRef((function(c,m){var d,b,y=e.useState(!1),v=(b=2,i(d=y)||u(d,b)||p(d,b)||s()),h=v[0],g=v[1],x=e.useRef(null),k=c.optionValue?null:c.dataKey,E=function(e){return c.optionValue?o.resolveFieldData(e,c.optionValue):e},N=function(e){if(c.onChange){var t=E(c.options?I===c.options.length-1?c.empty?null:c.options[0]:c.options[I+1]:null);c.onChange({originalEvent:e,value:t,stopPropagation:function(){},preventDefault:function(){},target:{name:c.name,id:c.id,value:t}})}};t((function(){c.empty||null!==c.value||N()}));var O,S,w=(c.options&&(S=c.options.findIndex((function(e){return o.equals(c.value,E(e),k)})),O=c.options[S]),{option:O,index:S}),C=w.option,I=w.index,j=o.isNotEmpty(c.tooltip),A=o.findDiffKeys(c,f.defaultProps),D=a("p-multistatecheckbox p-checkbox p-component",c.className),P=a("p-checkbox-box",{"p-highlight":!!C,"p-disabled":c.disabled,"p-focus":h},C&&C.className),T=function(){var t,n,l,r=a("p-checkbox-icon p-c",(t={},n="".concat(C&&C.icon||""),l=!0,n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t)),i=e.createElement("span",{className:r});return c.iconTemplate?o.getJSXElement(c.iconTemplate,{option:C,className:r,element:i,props:c}):i}(),V=C?function(e){var t=c.optionLabel||c.optionValue;return t?o.resolveFieldData(e,t):e}(C):l("nullLabel"),F=C?"true":"false";return e.createElement(e.Fragment,null,e.createElement("div",r({ref:x,id:c.id,className:D,style:c.style},A,{onClick:function(e){c.disabled||c.readOnly||N(e)}}),e.createElement("div",{className:P,style:C&&C.style,tabIndex:c.tabIndex,onFocus:function(){g(!0)},onBlur:function(){g(!1)},onKeyDown:function(e){32===e.keyCode&&(N(e),e.preventDefault())},role:"checkbox","aria-checked":F,"aria-labelledby":c["aria-labelledby"],"aria-label":c["aria-label"]},T),h&&e.createElement("span",{className:"p-sr-only","aria-live":"polite"},V)),j&&e.createElement(n,r({target:x,content:c.tooltip},c.tooltipOptions)))})));f.displayName="MultiStateCheckbox",f.defaultProps={__TYPE:"MultiStateCheckbox",id:null,value:null,options:null,optionValue:null,optionLabel:null,iconTemplate:null,dataKey:null,style:null,className:null,disabled:!1,readOnly:!1,empty:!0,tabIndex:"0","aria-label":null,"aria-labelledby":null,tooltip:null,tooltipOptions:null,onChange:null};export{f as MultiStateCheckbox};

package/multistatecheckbox/multistatecheckbox.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip, utils) {
+this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip, api, utils) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -123,13 +123,11 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
         setFocusedState = _React$useState2[1];
 
     var elementRef = React__namespace.useRef(null);
-    var inputRef = React__namespace.useRef(props.inputRef);
     var equalityKey = props.optionValue ? null : props.dataKey;
 
     var onClick = function onClick(event) {
       if (!props.disabled && !props.readOnly) {
         toggle(event);
-        inputRef.current.focus();
       }
     };
 
@@ -137,6 +135,11 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
       return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option;
     };
 
+    var getOptionAriaLabel = function getOptionAriaLabel(option) {
+      var ariaField = props.optionLabel || props.optionValue;
+      return ariaField ? utils.ObjectUtils.resolveFieldData(option, ariaField) : option;
+    };
+
     var findNextOption = function findNextOption() {
       if (props.options) {
         return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
@@ -170,6 +173,13 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
       setFocusedState(false);
     };
 
+    var onKeyDown = function onKeyDown(e) {
+      if (e.keyCode === 32) {
+        toggle(e);
+        e.preventDefault();
+      }
+    };
+
     var getSelectedOptionMap = function getSelectedOptionMap() {
       var option, index;
 
@@ -186,9 +196,6 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
       };
     };
 
-    React__namespace.useEffect(function () {
-      utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
-    }, [inputRef, props.inputRef]);
     hooks.useMountEffect(function () {
       if (!props.empty && props.value === null) {
         toggle();
@@ -228,6 +235,8 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
       'p-focus': focusedState
     }, selectedOption && selectedOption.className);
     var icon = createIcon();
+    var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : api.ariaLabel('nullLabel');
+    var ariaChecked = !!selectedOption ? 'true' : 'false';
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef,
       id: props.id,
@@ -236,24 +245,20 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
     }, otherProps, {
       onClick: onClick
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      ref: inputRef,
-      type: "checkbox",
-      "aria-labelledby": props.ariaLabelledBy,
-      id: props.inputId,
-      name: props.name,
+      className: boxClassName,
+      style: selectedOption && selectedOption.style,
+      tabIndex: props.tabIndex,
       onFocus: onFocus,
       onBlur: onBlur,
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      defaultChecked: !!selectedOption
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: boxClassName,
+      onKeyDown: onKeyDown,
       role: "checkbox",
-      "aria-checked": !!selectedOption,
-      style: selectedOption && selectedOption.style
-    }, icon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+      "aria-checked": ariaChecked,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label']
+    }, icon), focusedState && /*#__PURE__*/React__namespace.createElement("span", {
+      className: "p-sr-only",
+      "aria-live": "polite"
+    }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions)));
@@ -262,22 +267,22 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
   MultiStateCheckbox.defaultProps = {
     __TYPE: 'MultiStateCheckbox',
     id: null,
-    inputRef: null,
-    inputId: null,
     value: null,
     options: null,
     optionValue: null,
+    optionLabel: null,
     iconTemplate: null,
     dataKey: null,
-    name: null,
     style: null,
     className: null,
     disabled: false,
     readOnly: false,
     empty: true,
+    tabIndex: "0",
+    'aria-label': null,
+    'aria-labelledby': null,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     onChange: null
   };
 
@@ -287,4 +292,4 @@ this.primereact.multistatecheckbox = (function (exports, React, hooks, tooltip,
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.tooltip, primereact.utils);
+})({}, React, primereact.hooks, primereact.tooltip, primereact.api, primereact.utils);

package/multistatecheckbox/multistatecheckbox.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.multistatecheckbox=function(e,t,n,l,a){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var o=r(t);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},i.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,a,r=[],o=!0,i=!1;try{for(n=n.call(e);!(o=(l=n.next()).done)&&(r.push(l.value),!t||r.length!==t);o=!0);}catch(e){i=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(i)throw a}}return r}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function p(e,t){if(e){if("string"==typeof e)return s(e,t);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)?s(e,t):void 0}}function f(){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 d=o.memo(o.forwardRef((function(e,t){var r,s,m=o.useState(!1),b=(s=2,u(r=m)||c(r,s)||p(r,s)||f()),y=b[0],h=b[1],v=o.useRef(null),O=o.useRef(e.inputRef),g=e.optionValue?null:e.dataKey,j=function(t){return e.optionValue?a.ObjectUtils.resolveFieldData(t,e.optionValue):t},k=function(t){if(e.onChange){var n=j(e.options?C===e.options.length-1?e.empty?null:e.options[0]:e.options[C+1]:null);e.onChange({originalEvent:t,value:n,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:n}})}};o.useEffect((function(){a.ObjectUtils.combinedRefs(O,e.inputRef)}),[O,e.inputRef]),n.useMountEffect((function(){e.empty||null!==e.value||k()}));var x,E,N=(e.options&&(E=e.options.findIndex((function(t){return a.ObjectUtils.equals(e.value,j(t),g)})),x=e.options[E]),{option:x,index:E}),S=N.option,C=N.index,P=a.ObjectUtils.isNotEmpty(e.tooltip),R=a.ObjectUtils.findDiffKeys(e,d.defaultProps),w=a.classNames("p-multistatecheckbox p-checkbox p-component",e.className),M=a.classNames("p-checkbox-box",{"p-highlight":!!S,"p-disabled":e.disabled,"p-focus":y},S&&S.className),U=function(){var t,n,l,r=a.classNames("p-checkbox-icon p-c",(t={},n="".concat(S&&S.icon||""),l=!0,n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t)),i=o.createElement("span",{className:r});return e.iconTemplate?a.ObjectUtils.getJSXElement(e.iconTemplate,{option:S,className:r,element:i,props:e}):i}();return o.createElement(o.Fragment,null,o.createElement("div",i({ref:v,id:e.id,className:w,style:e.style},R,{onClick:function(t){e.disabled||e.readOnly||(k(t),O.current.focus())}}),o.createElement("div",{className:"p-hidden-accessible"},o.createElement("input",{ref:O,type:"checkbox","aria-labelledby":e.ariaLabelledBy,id:e.inputId,name:e.name,onFocus:function(){h(!0)},onBlur:function(){h(!1)},disabled:e.disabled,readOnly:e.readOnly,defaultChecked:!!S})),o.createElement("div",{className:M,role:"checkbox","aria-checked":!!S,style:S&&S.style},U)),P&&o.createElement(l.Tooltip,i({target:v,content:e.tooltip},e.tooltipOptions)))})));return d.displayName="MultiStateCheckbox",d.defaultProps={__TYPE:"MultiStateCheckbox",id:null,inputRef:null,inputId:null,value:null,options:null,optionValue:null,iconTemplate:null,dataKey:null,name:null,style:null,className:null,disabled:!1,readOnly:!1,empty:!0,tooltip:null,tooltipOptions:null,ariaLabelledBy:null,onChange:null},e.MultiStateCheckbox=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.tooltip,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.multistatecheckbox=function(e,t,n,l,a,o){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},u.apply(this,arguments)}function c(e){if(Array.isArray(e))return e}function s(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,a,o=[],r=!0,i=!1;try{for(n=n.call(e);!(r=(l=n.next()).done)&&(o.push(l.value),!t||o.length!==t);r=!0);}catch(e){i=!0,a=e}finally{try{r||null==n.return||n.return()}finally{if(i)throw a}}return o}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function f(e,t){if(e){if("string"==typeof e)return p(e,t);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)?p(e,t):void 0}}function b(){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 d=i.memo(i.forwardRef((function(e,t){var r,p,m=i.useState(!1),y=(p=2,c(r=m)||s(r,p)||f(r,p)||b()),v=y[0],h=y[1],g=i.useRef(null),O=e.optionValue?null:e.dataKey,j=function(t){return e.optionValue?o.ObjectUtils.resolveFieldData(t,e.optionValue):t},x=function(t){if(e.onChange){var n=j(e.options?w===e.options.length-1?e.empty?null:e.options[0]:e.options[w+1]:null);e.onChange({originalEvent:t,value:n,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:n}})}};n.useMountEffect((function(){e.empty||null!==e.value||x()}));var k,E,N=(e.options&&(E=e.options.findIndex((function(t){return o.ObjectUtils.equals(e.value,j(t),O)})),k=e.options[E]),{option:k,index:E}),S=N.option,w=N.index,C=o.ObjectUtils.isNotEmpty(e.tooltip),P=o.ObjectUtils.findDiffKeys(e,d.defaultProps),D=o.classNames("p-multistatecheckbox p-checkbox p-component",e.className),I=o.classNames("p-checkbox-box",{"p-highlight":!!S,"p-disabled":e.disabled,"p-focus":v},S&&S.className),M=function(){var t,n,l,a=o.classNames("p-checkbox-icon p-c",(t={},n="".concat(S&&S.icon||""),l=!0,n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t)),r=i.createElement("span",{className:a});return e.iconTemplate?o.ObjectUtils.getJSXElement(e.iconTemplate,{option:S,className:a,element:r,props:e}):r}(),U=S?function(t){var n=e.optionLabel||e.optionValue;return n?o.ObjectUtils.resolveFieldData(t,n):t}(S):a.ariaLabel("nullLabel"),A=S?"true":"false";return i.createElement(i.Fragment,null,i.createElement("div",u({ref:g,id:e.id,className:D,style:e.style},P,{onClick:function(t){e.disabled||e.readOnly||x(t)}}),i.createElement("div",{className:I,style:S&&S.style,tabIndex:e.tabIndex,onFocus:function(){h(!0)},onBlur:function(){h(!1)},onKeyDown:function(e){32===e.keyCode&&(x(e),e.preventDefault())},role:"checkbox","aria-checked":A,"aria-labelledby":e["aria-labelledby"],"aria-label":e["aria-label"]},M),v&&i.createElement("span",{className:"p-sr-only","aria-live":"polite"},U)),C&&i.createElement(l.Tooltip,u({target:g,content:e.tooltip},e.tooltipOptions)))})));return d.displayName="MultiStateCheckbox",d.defaultProps={__TYPE:"MultiStateCheckbox",id:null,value:null,options:null,optionValue:null,optionLabel:null,iconTemplate:null,dataKey:null,style:null,className:null,disabled:!1,readOnly:!1,empty:!0,tabIndex:"0","aria-label":null,"aria-labelledby":null,tooltip:null,tooltipOptions:null,onChange:null},e.MultiStateCheckbox=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.tooltip,primereact.api,primereact.utils);

package/overlaypanel/overlaypanel.cjs.js

@@ -228,7 +228,7 @@ var OverlayPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref
   };
 
   var align = function align() {
-    if (currentTargetRef.current) {
+    if (currentTargetRef.current && overlayRef.current) {
       utils.DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
       var containerOffset = utils.DomHandler.getOffset(overlayRef.current);
       var targetOffset = utils.DomHandler.getOffset(currentTargetRef.current);
@@ -255,7 +255,7 @@ var OverlayPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref
         innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
       }
 
-      styleElement.innerHTML = innerHTML;
+      styleElement.current.innerHTML = innerHTML;
     }
   };
 

package/overlaypanel/overlaypanel.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/csstransition"),n=require("primereact/hooks"),l=require("primereact/overlayservice"),o=require("primereact/portal"),a=require("primereact/ripple"),u=require("primereact/utils");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=i(e),f=c(r);function p(){return p=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},p.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function y(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,l,o=[],a=!0,u=!1;try{for(t=t.call(e);!(a=(n=t.next()).done)&&(o.push(n.value),!r||o.length!==r);a=!0);}catch(e){u=!0,l=e}finally{try{a||null==t.return||t.return()}finally{if(u)throw l}}return o}}function v(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 m(e,r){if(e){if("string"==typeof e)return v(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)?v(e,r):void 0}}function b(){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 O(e,r){return d(e)||y(e,r)||m(e,r)||b()}var g=s.forwardRef((function(e,r){var c=O(s.useState(!1),2),i=c[0],d=c[1],y=s.useRef(""),v=s.useRef(null),m=s.useRef(null),b=s.useRef(!1),h=s.useRef(null),w=s.useRef(null),E=O(n.useOverlayListener({target:m,overlay:v,listener:function(e,r){r.valid&&("outside"===r.type?!b.current&&D():D()),b.current=!1},when:i}),2),S=E[0],k=E[1],x=function(e){return v&&v.current&&!(v.current.isSameNode(e)||v.current.contains(e))},I=function(e,r){return null!=m.current&&m.current!==(r||e.currentTarget||e.target)},j=function(e){D(),e.preventDefault()},P=function(e){b.current=!0,l.OverlayService.emit("overlay-click",{originalEvent:e,target:m.current})},C=function(){b.current=!0},H=function(e,r){i?(D(),I(e,r)&&(m.current=r||e.currentTarget||e.target,setTimeout((function(){T(e,m.current)}),200))):T(e,r)},T=function(e,r){m.current=r||e.currentTarget||e.target,i?U():(d(!0),w.current=function(e){!x(e.target)&&(b.current=!0)},l.OverlayService.on("overlay-click",w.current))},D=function(){d(!1),l.OverlayService.off("overlay-click",w.current),w.current=null},N=function(){v.current.setAttribute(y.current,""),u.ZIndexUtils.set("overlay",v.current,f.default.autoZIndex,f.default.zIndex.overlay),U()},q=function(){S(),e.onShow&&e.onShow()},R=function(){k()},A=function(){u.ZIndexUtils.clear(v.current),e.onHide&&e.onHide()},U=function(){if(m.current){u.DomHandler.absolutePosition(v.current,m.current);var e=u.DomHandler.getOffset(v.current),r=u.DomHandler.getOffset(m.current),t=0;e.left<r.left&&(t=r.left-e.left),v.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<r.top&&u.DomHandler.addClass(v.current,"p-overlaypanel-flipped")}},M=function(){if(!h.current){h.current=u.DomHandler.createInlineStyle(f.default.nonce);var r="";for(var t in e.breakpoints)r+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-overlaypanel[").concat(y.current,"] {\n                            width: ").concat(e.breakpoints[t]," !important;\n                        }\n                    }\n                ");h.innerHTML=r}};n.useMountEffect((function(){y.current=u.UniqueComponentId(),e.breakpoints&&M()})),n.useUnmountEffect((function(){h.current=u.DomHandler.removeInlineStyle(h.current),w.current&&(l.OverlayService.off("overlay-click",w.current),w.current=null),u.ZIndexUtils.clear(v.current)})),s.useImperativeHandle(r,(function(){return{toggle:H,show:T,hide:D}}));var _,L,Z,z=(_=u.ObjectUtils.findDiffKeys(e,g.defaultProps),L=u.classNames("p-overlaypanel p-component",e.className),Z=e.showCloseIcon?s.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:j,"aria-label":e.ariaCloseLabel},s.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),s.createElement(a.Ripple,null)):null,s.createElement(t.CSSTransition,{nodeRef:v,classNames:"p-overlaypanel",in:i,timeout:{enter:120,exit:100},options:e.transitionOptions,unmountOnExit:!0,onEnter:N,onEntered:q,onExit:R,onExited:A},s.createElement("div",p({ref:v,id:e.id,className:L,style:e.style},_,{onClick:P}),s.createElement("div",{className:"p-overlaypanel-content",onClick:C,onMouseDown:C},e.children),Z)));return s.createElement(o.Portal,{element:z,appendTo:e.appendTo})}));g.displayName="OverlayPanel",g.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null},exports.OverlayPanel=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/csstransition"),n=require("primereact/hooks"),l=require("primereact/overlayservice"),o=require("primereact/portal"),a=require("primereact/ripple"),u=require("primereact/utils");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=i(e),f=c(r);function p(){return p=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},p.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function y(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,l,o=[],a=!0,u=!1;try{for(t=t.call(e);!(a=(n=t.next()).done)&&(o.push(n.value),!r||o.length!==r);a=!0);}catch(e){u=!0,l=e}finally{try{a||null==t.return||t.return()}finally{if(u)throw l}}return o}}function v(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 m(e,r){if(e){if("string"==typeof e)return v(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)?v(e,r):void 0}}function b(){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 O(e,r){return d(e)||y(e,r)||m(e,r)||b()}var g=s.forwardRef((function(e,r){var c=O(s.useState(!1),2),i=c[0],d=c[1],y=s.useRef(""),v=s.useRef(null),m=s.useRef(null),b=s.useRef(!1),h=s.useRef(null),w=s.useRef(null),E=O(n.useOverlayListener({target:m,overlay:v,listener:function(e,r){r.valid&&("outside"===r.type?!b.current&&D():D()),b.current=!1},when:i}),2),S=E[0],k=E[1],x=function(e){return v&&v.current&&!(v.current.isSameNode(e)||v.current.contains(e))},I=function(e,r){return null!=m.current&&m.current!==(r||e.currentTarget||e.target)},j=function(e){D(),e.preventDefault()},P=function(e){b.current=!0,l.OverlayService.emit("overlay-click",{originalEvent:e,target:m.current})},C=function(){b.current=!0},H=function(e,r){i?(D(),I(e,r)&&(m.current=r||e.currentTarget||e.target,setTimeout((function(){T(e,m.current)}),200))):T(e,r)},T=function(e,r){m.current=r||e.currentTarget||e.target,i?U():(d(!0),w.current=function(e){!x(e.target)&&(b.current=!0)},l.OverlayService.on("overlay-click",w.current))},D=function(){d(!1),l.OverlayService.off("overlay-click",w.current),w.current=null},N=function(){v.current.setAttribute(y.current,""),u.ZIndexUtils.set("overlay",v.current,f.default.autoZIndex,f.default.zIndex.overlay),U()},q=function(){S(),e.onShow&&e.onShow()},R=function(){k()},A=function(){u.ZIndexUtils.clear(v.current),e.onHide&&e.onHide()},U=function(){if(m.current&&v.current){u.DomHandler.absolutePosition(v.current,m.current);var e=u.DomHandler.getOffset(v.current),r=u.DomHandler.getOffset(m.current),t=0;e.left<r.left&&(t=r.left-e.left),v.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<r.top&&u.DomHandler.addClass(v.current,"p-overlaypanel-flipped")}},M=function(){if(!h.current){h.current=u.DomHandler.createInlineStyle(f.default.nonce);var r="";for(var t in e.breakpoints)r+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-overlaypanel[").concat(y.current,"] {\n                            width: ").concat(e.breakpoints[t]," !important;\n                        }\n                    }\n                ");h.current.innerHTML=r}};n.useMountEffect((function(){y.current=u.UniqueComponentId(),e.breakpoints&&M()})),n.useUnmountEffect((function(){h.current=u.DomHandler.removeInlineStyle(h.current),w.current&&(l.OverlayService.off("overlay-click",w.current),w.current=null),u.ZIndexUtils.clear(v.current)})),s.useImperativeHandle(r,(function(){return{toggle:H,show:T,hide:D}}));var _,L,Z,z=(_=u.ObjectUtils.findDiffKeys(e,g.defaultProps),L=u.classNames("p-overlaypanel p-component",e.className),Z=e.showCloseIcon?s.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:j,"aria-label":e.ariaCloseLabel},s.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),s.createElement(a.Ripple,null)):null,s.createElement(t.CSSTransition,{nodeRef:v,classNames:"p-overlaypanel",in:i,timeout:{enter:120,exit:100},options:e.transitionOptions,unmountOnExit:!0,onEnter:N,onEntered:q,onExit:R,onExited:A},s.createElement("div",p({ref:v,id:e.id,className:L,style:e.style},_,{onClick:P}),s.createElement("div",{className:"p-overlaypanel-content",onClick:C,onMouseDown:C},e.children),Z)));return s.createElement(o.Portal,{element:z,appendTo:e.appendTo})}));g.displayName="OverlayPanel",g.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null},exports.OverlayPanel=g;

package/overlaypanel/overlaypanel.esm.js

@@ -201,7 +201,7 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var align = function align() {
-    if (currentTargetRef.current) {
+    if (currentTargetRef.current && overlayRef.current) {
       DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
       var containerOffset = DomHandler.getOffset(overlayRef.current);
       var targetOffset = DomHandler.getOffset(currentTargetRef.current);
@@ -228,7 +228,7 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
         innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
       }
 
-      styleElement.innerHTML = innerHTML;
+      styleElement.current.innerHTML = innerHTML;
     }
   };
 

package/overlaypanel/overlaypanel.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import r from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useOverlayListener as n,useMountEffect as o,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as l}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{Ripple as i}from"primereact/ripple";import{UniqueComponentId as u,DomHandler as s,ZIndexUtils as f,ObjectUtils as p,classNames as m}from"primereact/utils";function y(){return y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,a=[],l=!0,c=!1;try{for(t=t.call(e);!(l=(n=t.next()).done)&&(a.push(n.value),!r||a.length!==r);l=!0);}catch(e){c=!0,o=e}finally{try{l||null==t.return||t.return()}finally{if(c)throw o}}return a}}function h(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 h(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)?h(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.")}function w(e,r){return d(e)||v(e,r)||b(e,r)||g()}var E=e.forwardRef((function(d,v){var h=w(e.useState(!1),2),b=h[0],g=h[1],k=e.useRef(""),O=e.useRef(null),S=e.useRef(null),x=e.useRef(!1),I=e.useRef(null),T=e.useRef(null),C=w(n({target:S,overlay:O,listener:function(e,r){r.valid&&("outside"===r.type?!x.current&&_():_()),x.current=!1},when:b}),2),N=C[0],A=C[1],P=function(e){return O&&O.current&&!(O.current.isSameNode(e)||O.current.contains(e))},R=function(e,r){return null!=S.current&&S.current!==(r||e.currentTarget||e.target)},j=function(e){_(),e.preventDefault()},H=function(e){x.current=!0,l.emit("overlay-click",{originalEvent:e,target:S.current})},L=function(){x.current=!0},D=function(e,r){b?(_(),R(e,r)&&(S.current=r||e.currentTarget||e.target,setTimeout((function(){M(e,S.current)}),200))):M(e,r)},M=function(e,r){S.current=r||e.currentTarget||e.target,b?Z():(g(!0),T.current=function(e){!P(e.target)&&(x.current=!0)},l.on("overlay-click",T.current))},_=function(){g(!1),l.off("overlay-click",T.current),T.current=null},z=function(){O.current.setAttribute(k.current,""),f.set("overlay",O.current,r.autoZIndex,r.zIndex.overlay),Z()},K=function(){N(),d.onShow&&d.onShow()},U=function(){A()},Y=function(){f.clear(O.current),d.onHide&&d.onHide()},Z=function(){if(S.current){s.absolutePosition(O.current,S.current);var e=s.getOffset(O.current),r=s.getOffset(S.current),t=0;e.left<r.left&&(t=r.left-e.left),O.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<r.top&&s.addClass(O.current,"p-overlaypanel-flipped")}},$=function(){if(!I.current){I.current=s.createInlineStyle(r.nonce);var e="";for(var t in d.breakpoints)e+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-overlaypanel[").concat(k.current,"] {\n                            width: ").concat(d.breakpoints[t]," !important;\n                        }\n                    }\n                ");I.innerHTML=e}};o((function(){k.current=u(),d.breakpoints&&$()})),a((function(){I.current=s.removeInlineStyle(I.current),T.current&&(l.off("overlay-click",T.current),T.current=null),f.clear(O.current)})),e.useImperativeHandle(v,(function(){return{toggle:D,show:M,hide:_}}));var q,B,F,G=(q=p.findDiffKeys(d,E.defaultProps),B=m("p-overlaypanel p-component",d.className),F=d.showCloseIcon?e.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:j,"aria-label":d.ariaCloseLabel},e.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),e.createElement(i,null)):null,e.createElement(t,{nodeRef:O,classNames:"p-overlaypanel",in:b,timeout:{enter:120,exit:100},options:d.transitionOptions,unmountOnExit:!0,onEnter:z,onEntered:K,onExit:U,onExited:Y},e.createElement("div",y({ref:O,id:d.id,className:B,style:d.style},q,{onClick:H}),e.createElement("div",{className:"p-overlaypanel-content",onClick:L,onMouseDown:L},d.children),F)));return e.createElement(c,{element:G,appendTo:d.appendTo})}));E.displayName="OverlayPanel",E.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null};export{E as OverlayPanel};
+import*as e from"react";import r from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useOverlayListener as n,useMountEffect as o,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as l}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{Ripple as i}from"primereact/ripple";import{UniqueComponentId as u,DomHandler as s,ZIndexUtils as f,ObjectUtils as p,classNames as m}from"primereact/utils";function y(){return y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,a=[],l=!0,c=!1;try{for(t=t.call(e);!(l=(n=t.next()).done)&&(a.push(n.value),!r||a.length!==r);l=!0);}catch(e){c=!0,o=e}finally{try{l||null==t.return||t.return()}finally{if(c)throw o}}return a}}function h(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 h(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)?h(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.")}function w(e,r){return d(e)||v(e,r)||b(e,r)||g()}var E=e.forwardRef((function(d,v){var h=w(e.useState(!1),2),b=h[0],g=h[1],k=e.useRef(""),O=e.useRef(null),S=e.useRef(null),x=e.useRef(!1),I=e.useRef(null),T=e.useRef(null),C=w(n({target:S,overlay:O,listener:function(e,r){r.valid&&("outside"===r.type?!x.current&&_():_()),x.current=!1},when:b}),2),N=C[0],A=C[1],P=function(e){return O&&O.current&&!(O.current.isSameNode(e)||O.current.contains(e))},R=function(e,r){return null!=S.current&&S.current!==(r||e.currentTarget||e.target)},j=function(e){_(),e.preventDefault()},H=function(e){x.current=!0,l.emit("overlay-click",{originalEvent:e,target:S.current})},L=function(){x.current=!0},D=function(e,r){b?(_(),R(e,r)&&(S.current=r||e.currentTarget||e.target,setTimeout((function(){M(e,S.current)}),200))):M(e,r)},M=function(e,r){S.current=r||e.currentTarget||e.target,b?Z():(g(!0),T.current=function(e){!P(e.target)&&(x.current=!0)},l.on("overlay-click",T.current))},_=function(){g(!1),l.off("overlay-click",T.current),T.current=null},z=function(){O.current.setAttribute(k.current,""),f.set("overlay",O.current,r.autoZIndex,r.zIndex.overlay),Z()},K=function(){N(),d.onShow&&d.onShow()},U=function(){A()},Y=function(){f.clear(O.current),d.onHide&&d.onHide()},Z=function(){if(S.current&&O.current){s.absolutePosition(O.current,S.current);var e=s.getOffset(O.current),r=s.getOffset(S.current),t=0;e.left<r.left&&(t=r.left-e.left),O.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<r.top&&s.addClass(O.current,"p-overlaypanel-flipped")}},$=function(){if(!I.current){I.current=s.createInlineStyle(r.nonce);var e="";for(var t in d.breakpoints)e+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-overlaypanel[").concat(k.current,"] {\n                            width: ").concat(d.breakpoints[t]," !important;\n                        }\n                    }\n                ");I.current.innerHTML=e}};o((function(){k.current=u(),d.breakpoints&&$()})),a((function(){I.current=s.removeInlineStyle(I.current),T.current&&(l.off("overlay-click",T.current),T.current=null),f.clear(O.current)})),e.useImperativeHandle(v,(function(){return{toggle:D,show:M,hide:_}}));var q,B,F,G=(q=p.findDiffKeys(d,E.defaultProps),B=m("p-overlaypanel p-component",d.className),F=d.showCloseIcon?e.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:j,"aria-label":d.ariaCloseLabel},e.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),e.createElement(i,null)):null,e.createElement(t,{nodeRef:O,classNames:"p-overlaypanel",in:b,timeout:{enter:120,exit:100},options:d.transitionOptions,unmountOnExit:!0,onEnter:z,onEntered:K,onExit:U,onExited:Y},e.createElement("div",y({ref:O,id:d.id,className:B,style:d.style},q,{onClick:H}),e.createElement("div",{className:"p-overlaypanel-content",onClick:L,onMouseDown:L},d.children),F)));return e.createElement(c,{element:G,appendTo:d.appendTo})}));E.displayName="OverlayPanel",E.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null};export{E as OverlayPanel};

package/overlaypanel/overlaypanel.js

@@ -219,7 +219,7 @@ this.primereact.overlaypanel = (function (exports, React, PrimeReact, csstransit
     };
 
     var align = function align() {
-      if (currentTargetRef.current) {
+      if (currentTargetRef.current && overlayRef.current) {
         utils.DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
         var containerOffset = utils.DomHandler.getOffset(overlayRef.current);
         var targetOffset = utils.DomHandler.getOffset(currentTargetRef.current);
@@ -246,7 +246,7 @@ this.primereact.overlaypanel = (function (exports, React, PrimeReact, csstransit
           innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
         }
 
-        styleElement.innerHTML = innerHTML;
+        styleElement.current.innerHTML = innerHTML;
       }
     };
 

package/overlaypanel/overlaypanel.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.overlaypanel=function(e,t,n,r,a,l,o,c,i){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var f=s(t),p=u(n);function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(this,arguments)}function y(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l=[],o=!0,c=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);o=!0);}catch(e){c=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(c)throw a}}return l}}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return v(e,t);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)?v(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e,t){return y(e)||m(e,t)||b(e,t)||h()}var g=f.forwardRef((function(e,t){var n=O(f.useState(!1),2),u=n[0],s=n[1],y=f.useRef(""),m=f.useRef(null),v=f.useRef(null),b=f.useRef(!1),h=f.useRef(null),w=f.useRef(null),E=O(a.useOverlayListener({target:v,overlay:m,listener:function(e,t){t.valid&&("outside"===t.type?!b.current&&D():D()),b.current=!1},when:u}),2),S=E[0],k=E[1],I=function(e){return m&&m.current&&!(m.current.isSameNode(e)||m.current.contains(e))},j=function(e,t){return null!=v.current&&v.current!==(t||e.currentTarget||e.target)},P=function(e){D(),e.preventDefault()},x=function(e){b.current=!0,l.OverlayService.emit("overlay-click",{originalEvent:e,target:v.current})},C=function(){b.current=!0},H=function(e,t){u?(D(),j(e,t)&&(v.current=t||e.currentTarget||e.target,setTimeout((function(){T(e,v.current)}),200))):T(e,t)},T=function(e,t){v.current=t||e.currentTarget||e.target,u?M():(s(!0),w.current=function(e){!I(e.target)&&(b.current=!0)},l.OverlayService.on("overlay-click",w.current))},D=function(){s(!1),l.OverlayService.off("overlay-click",w.current),w.current=null},N=function(){m.current.setAttribute(y.current,""),i.ZIndexUtils.set("overlay",m.current,p.default.autoZIndex,p.default.zIndex.overlay),M()},R=function(){S(),e.onShow&&e.onShow()},A=function(){k()},U=function(){i.ZIndexUtils.clear(m.current),e.onHide&&e.onHide()},M=function(){if(v.current){i.DomHandler.absolutePosition(m.current,v.current);var e=i.DomHandler.getOffset(m.current),t=i.DomHandler.getOffset(v.current),n=0;e.left<t.left&&(n=t.left-e.left),m.current.style.setProperty("--overlayArrowLeft","".concat(n,"px")),e.top<t.top&&i.DomHandler.addClass(m.current,"p-overlaypanel-flipped")}},_=function(){if(!h.current){h.current=i.DomHandler.createInlineStyle(p.default.nonce);var t="";for(var n in e.breakpoints)t+="\n                    @media screen and (max-width: ".concat(n,") {\n                        .p-overlaypanel[").concat(y.current,"] {\n                            width: ").concat(e.breakpoints[n]," !important;\n                        }\n                    }\n                ");h.innerHTML=t}};a.useMountEffect((function(){y.current=i.UniqueComponentId(),e.breakpoints&&_()})),a.useUnmountEffect((function(){h.current=i.DomHandler.removeInlineStyle(h.current),w.current&&(l.OverlayService.off("overlay-click",w.current),w.current=null),i.ZIndexUtils.clear(m.current)})),f.useImperativeHandle(t,(function(){return{toggle:H,show:T,hide:D}}));var L,Z,z,q=(L=i.ObjectUtils.findDiffKeys(e,g.defaultProps),Z=i.classNames("p-overlaypanel p-component",e.className),z=e.showCloseIcon?f.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:P,"aria-label":e.ariaCloseLabel},f.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),f.createElement(c.Ripple,null)):null,f.createElement(r.CSSTransition,{nodeRef:m,classNames:"p-overlaypanel",in:u,timeout:{enter:120,exit:100},options:e.transitionOptions,unmountOnExit:!0,onEnter:N,onEntered:R,onExit:A,onExited:U},f.createElement("div",d({ref:m,id:e.id,className:Z,style:e.style},L,{onClick:x}),f.createElement("div",{className:"p-overlaypanel-content",onClick:C,onMouseDown:C},e.children),z)));return f.createElement(o.Portal,{element:q,appendTo:e.appendTo})}));return g.displayName="OverlayPanel",g.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null},e.OverlayPanel=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.csstransition,primereact.hooks,primereact.overlayservice,primereact.portal,primereact.ripple,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.overlaypanel=function(e,t,r,n,a,l,o,c,u){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 f=s(t),p=i(r);function d(){return d=Object.assign||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},d.apply(this,arguments)}function y(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,l=[],o=!0,c=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);o=!0);}catch(e){c=!0,a=e}finally{try{o||null==r.return||r.return()}finally{if(c)throw a}}return l}}function v(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 b(e,t){if(e){if("string"==typeof e)return v(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)?v(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e,t){return y(e)||m(e,t)||b(e,t)||h()}var g=f.forwardRef((function(e,t){var r=O(f.useState(!1),2),i=r[0],s=r[1],y=f.useRef(""),m=f.useRef(null),v=f.useRef(null),b=f.useRef(!1),h=f.useRef(null),w=f.useRef(null),E=O(a.useOverlayListener({target:v,overlay:m,listener:function(e,t){t.valid&&("outside"===t.type?!b.current&&D():D()),b.current=!1},when:i}),2),S=E[0],k=E[1],I=function(e){return m&&m.current&&!(m.current.isSameNode(e)||m.current.contains(e))},j=function(e,t){return null!=v.current&&v.current!==(t||e.currentTarget||e.target)},P=function(e){D(),e.preventDefault()},x=function(e){b.current=!0,l.OverlayService.emit("overlay-click",{originalEvent:e,target:v.current})},C=function(){b.current=!0},H=function(e,t){i?(D(),j(e,t)&&(v.current=t||e.currentTarget||e.target,setTimeout((function(){T(e,v.current)}),200))):T(e,t)},T=function(e,t){v.current=t||e.currentTarget||e.target,i?M():(s(!0),w.current=function(e){!I(e.target)&&(b.current=!0)},l.OverlayService.on("overlay-click",w.current))},D=function(){s(!1),l.OverlayService.off("overlay-click",w.current),w.current=null},N=function(){m.current.setAttribute(y.current,""),u.ZIndexUtils.set("overlay",m.current,p.default.autoZIndex,p.default.zIndex.overlay),M()},R=function(){S(),e.onShow&&e.onShow()},A=function(){k()},U=function(){u.ZIndexUtils.clear(m.current),e.onHide&&e.onHide()},M=function(){if(v.current&&m.current){u.DomHandler.absolutePosition(m.current,v.current);var e=u.DomHandler.getOffset(m.current),t=u.DomHandler.getOffset(v.current),r=0;e.left<t.left&&(r=t.left-e.left),m.current.style.setProperty("--overlayArrowLeft","".concat(r,"px")),e.top<t.top&&u.DomHandler.addClass(m.current,"p-overlaypanel-flipped")}},_=function(){if(!h.current){h.current=u.DomHandler.createInlineStyle(p.default.nonce);var t="";for(var r in e.breakpoints)t+="\n                    @media screen and (max-width: ".concat(r,") {\n                        .p-overlaypanel[").concat(y.current,"] {\n                            width: ").concat(e.breakpoints[r]," !important;\n                        }\n                    }\n                ");h.current.innerHTML=t}};a.useMountEffect((function(){y.current=u.UniqueComponentId(),e.breakpoints&&_()})),a.useUnmountEffect((function(){h.current=u.DomHandler.removeInlineStyle(h.current),w.current&&(l.OverlayService.off("overlay-click",w.current),w.current=null),u.ZIndexUtils.clear(m.current)})),f.useImperativeHandle(t,(function(){return{toggle:H,show:T,hide:D}}));var L,Z,z,q=(L=u.ObjectUtils.findDiffKeys(e,g.defaultProps),Z=u.classNames("p-overlaypanel p-component",e.className),z=e.showCloseIcon?f.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:P,"aria-label":e.ariaCloseLabel},f.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times"}),f.createElement(c.Ripple,null)):null,f.createElement(n.CSSTransition,{nodeRef:m,classNames:"p-overlaypanel",in:i,timeout:{enter:120,exit:100},options:e.transitionOptions,unmountOnExit:!0,onEnter:N,onEntered:R,onExit:A,onExited:U},f.createElement("div",d({ref:m,id:e.id,className:Z,style:e.style},L,{onClick:x}),f.createElement("div",{className:"p-overlaypanel-content",onClick:C,onMouseDown:C},e.children),z)));return f.createElement(o.Portal,{element:q,appendTo:e.appendTo})}));return g.displayName="OverlayPanel",g.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:"close",transitionOptions:null,onShow:null,onHide:null},e.OverlayPanel=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.csstransition,primereact.hooks,primereact.overlayservice,primereact.portal,primereact.ripple,primereact.utils);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primereact",
-    "version": "8.0.1",
+    "version": "8.2.0",
     "private": false,
     "author": "PrimeTek Informatics",
     "description": "PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 280+ ready to use UI blocks to build spectacular applications in no time.",
@@ -45,7 +45,9 @@
         "@types/react-transition-group": "^4.4.1",
         "react-transition-group": "^4.4.1"
     },
-    "sideEffects": false,
+    "sideEffects": [
+        "**/*.css"
+    ],
     "unpkg": "primereact.all.min.js",
     "jsdelivr": "primereact.all.min.js"
 }

package/paginator/paginator.cjs.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
-var ripple = require('primereact/ripple');
+var api = require('primereact/api');
+var button = require('primereact/button');
 var inputnumber = require('primereact/inputnumber');
 var dropdown = require('primereact/dropdown');
 
@@ -185,14 +186,14 @@ var FirstPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-left';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(button.Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    disabled: props.disabled,
+    "aria-label": api.ariaLabel('firstPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -261,14 +262,14 @@ var LastPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-right';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(button.Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    disabled: props.disabled,
+    "aria-label": api.ariaLabel('lastPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -297,14 +298,14 @@ var NextPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-right';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(button.Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    disabled: props.disabled,
+    "aria-label": api.ariaLabel('nextPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -351,13 +352,14 @@ var PageLinks = /*#__PURE__*/React__namespace.memo(function (props) {
         'p-paginator-page-end': pageLink === endPageInView,
         'p-highlight': pageLink - 1 === props.page
       });
-      var element = /*#__PURE__*/React__namespace.createElement("button", {
+      var element = /*#__PURE__*/React__namespace.createElement(button.Button, {
         type: "button",
         className: className,
         onClick: function onClick(e) {
           return onPageLinkClick(e, pageLink);
-        }
-      }, pageLink, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        },
+        "aria-label": "".concat(api.ariaLabel('pageLabel'), " ").concat(pageLink + 1)
+      }, pageLink);
 
       if (props.template) {
         var defaultOptions = {
@@ -404,14 +406,14 @@ var PrevPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-left';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(button.Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    disabled: props.disabled,
+    "aria-label": api.ariaLabel('previousPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {