primereact 8.0.1 → 8.2.0

package/splitter/splitter.js

@@ -120,7 +120,8 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
   var SplitterPanel = function SplitterPanel() {};
   var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var elementRef = React__namespace.useRef(null);
-    var gutterRef = React__namespace.useRef(null);
+    var gutterRef = React__namespace.useRef();
+    var gutterRefs = React__namespace.useRef({});
     var size = React__namespace.useRef(null);
     var dragging = React__namespace.useRef(null);
     var startPos = React__namespace.useRef(null);
@@ -130,6 +131,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
     var nextPanelSize = React__namespace.useRef(null);
     var prevPanelIndex = React__namespace.useRef(null);
     var panelSizes = React__namespace.useRef(null);
+    var mounted = React__namespace.useRef(false);
     var isStateful = props.stateKey != null;
 
     var _useEventListener = hooks.useEventListener({
@@ -200,7 +202,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
     };
 
     var saveState = function saveState() {
-      getStorage().setItem(props.stateKey, JSON.stringify(panelSizes));
+      getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
     };
 
     var restoreState = function restoreState() {
@@ -215,7 +217,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
         });
 
         children.forEach(function (child, i) {
-          child.style.flexBasis = 'calc(' + panelSizes[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
+          child.style.flexBasis = 'calc(' + panelSizes.current[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
         });
         return true;
       }
@@ -224,6 +226,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
     };
 
     var onResizeStart = function onResizeStart(event, index) {
+      gutterRef.current = gutterRefs.current[index];
       var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
       var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
       size.current = props.layout === 'horizontal' ? utils.DomHandler.getWidth(elementRef.current) : utils.DomHandler.getHeight(elementRef.current);
@@ -262,7 +265,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
       if (props.onResizeEnd) {
         props.onResizeEnd({
           originalEvent: event,
-          sizes: panelSizes
+          sizes: panelSizes.current
         });
       }
 
@@ -295,7 +298,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
       window.removeEventListener('touchend', onGutterTouchEnd);
     };
 
-    hooks.useMountEffect(function () {
+    React__namespace.useEffect(function () {
       var panelElements = _toConsumableArray(elementRef.current.children).filter(function (child) {
         return utils.DomHandler.hasClass(child, 'p-splitter-panel');
       });
@@ -309,7 +312,7 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
       if (props.children && props.children.length) {
         var initialized = false;
 
-        if (isStateful) {
+        if (isStateful && !mounted.current) {
           initialized = restoreState();
         }
 
@@ -323,8 +326,11 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
             return _panelSizes;
           });
           panelSizes.current = _panelSizes;
+          mounted.current && saveState();
         }
       }
+
+      mounted.current = true;
     });
 
     var createPanel = function createPanel(panel, index) {
@@ -336,7 +342,9 @@ this.primereact.splitter = (function (exports, React, utils, hooks) {
         height: props.gutterSize + 'px'
       };
       var gutter = index !== props.children.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
-        ref: gutterRef,
+        ref: function ref(el) {
+          return gutterRefs.current[index] = el;
+        },
         className: "p-splitter-gutter",
         style: gutterStyle,
         onMouseDown: function onMouseDown(event) {

package/splitter/splitter.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.splitter=function(e,t,r,n){"use strict";function l(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 u=l(t);function i(){return i=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},i.apply(this,arguments)}function o(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 a(e){if(Array.isArray(e))return o(e)}function s(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return o(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)?o(e,t):void 0}}function p(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(e){return a(e)||s(e)||c(e)||p()}function d(e){if(Array.isArray(e))return e}function h(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,u=[],i=!0,o=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(u.push(n.value),!t||u.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==r.return||r.return()}finally{if(o)throw l}}return u}}function m(){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 y(e,t){return d(e)||h(e,t)||c(e,t)||m()}var g=function(){},v=u.memo(u.forwardRef((function(e,t){var l=u.useRef(null),o=u.useRef(null),a=u.useRef(null),s=u.useRef(null),c=u.useRef(null),p=u.useRef(null),d=u.useRef(null),h=u.useRef(null),m=u.useRef(null),S=u.useRef(null),b=u.useRef(null),z=null!=e.stateKey,E=y(n.useEventListener({type:"mousemove",listener:function(e){return A(e)}}),2),w=E[0],O=E[1],D=y(n.useEventListener({type:"mouseup",listener:function(e){C(e),R()}}),2),H=D[0],N=D[1],R=function(){O(),N()},j=function(t,r){return!(e.children[S.current].props&&e.children[S.current].props.minSize&&e.children[S.current].props.minSize>t)&&!(e.children[S.current+1].props&&e.children[S.current+1].props.minSize&&e.children[S.current+1].props.minSize>r)},P=function(){switch(e.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(e.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},x=function(t,n){var u="touchstart"===t.type?t.touches[0].pageX:t.pageX,i="touchstart"===t.type?t.touches[0].pageY:t.pageY;a.current="horizontal"===e.layout?r.DomHandler.getWidth(l.current):r.DomHandler.getHeight(l.current),s.current=!0,c.current="horizontal"===e.layout?u:i,p.current=o.current.previousElementSibling,d.current=o.current.nextElementSibling,h.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(p.current,!0):r.DomHandler.getOuterHeight(p.current,!0))/a.current,m.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(d.current,!0):r.DomHandler.getOuterHeight(d.current,!0))/a.current,S.current=n,r.DomHandler.addClass(o.current,"p-splitter-gutter-resizing"),r.DomHandler.addClass(l.current,"p-splitter-resizing")},A=function(t){var r,n=h.current+(r="horizontal"===e.layout?100*("touchmove"===t.type?t.touches[0].pageX:t.pageX)/a.current-100*c.current/a.current:100*("touchmove"===t.type?t.touches[0].pageY:t.pageY)/a.current-100*c.current/a.current),l=m.current-r;j(n,l)&&(p.current.style.flexBasis="calc("+n+"% - "+(e.children.length-1)*e.gutterSize+"px)",d.current.style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",b.current[S.current]=n,b.current[S.current+1]=l)},C=function(t){z&&P().setItem(e.stateKey,JSON.stringify(b)),e.onResizeEnd&&e.onResizeEnd({originalEvent:t,sizes:b}),r.DomHandler.removeClass(o.current,"p-splitter-gutter-resizing"),r.DomHandler.removeClass(l.current,"p-splitter-resizing"),s.current=!1,a.current=null,c.current=null,p.current=null,d.current=null,h.current=null,m.current=null,S.current=null},_=function(e,t){x(e,t),w(),H()},I=function(e,t){x(e,t),window.addEventListener("touchmove",T,{passive:!1,cancelable:!1}),window.addEventListener("touchend",K)},T=function(e){A(e)},K=function e(t){C(t),window.removeEventListener("touchmove",T),window.removeEventListener("touchend",e)};n.useMountEffect((function(){var t,n=f(l.current.children).filter((function(e){return r.DomHandler.hasClass(e,"p-splitter-panel")}));if(n.map((function(e){e.childNodes&&r.ObjectUtils.isNotEmpty(r.DomHandler.find(e,".p-splitter"))&&r.DomHandler.addClass(e,"p-splitter-panel-nested")})),e.children&&e.children.length){var u=!1;if(z&&(u=!!(t=P().getItem(e.stateKey))&&(b.current=JSON.parse(t),f(l.current.children).filter((function(e){return r.DomHandler.hasClass(e,"p-splitter-panel")})).forEach((function(t,r){t.style.flexBasis="calc("+b[r]+"% - "+(e.children.length-1)*e.gutterSize+"px)"})),!0)),!u){var i=[];e.children.map((function(t,r){var l=(t.props&&t.props.size?t.props.size:null)||100/e.children.length;return i[r]=l,n[r].style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",i})),b.current=i}}}));var L=function(t,n){var l=r.ObjectUtils.findDiffKeys(t.props,g.defaultProps),a=r.classNames("p-splitter-panel",t.props.className),s=n!==e.children.length-1&&u.createElement("div",{ref:o,className:"p-splitter-gutter",style:"horizontal"===e.layout?{width:e.gutterSize+"px"}:{height:e.gutterSize+"px"},onMouseDown:function(e){return _(e,n)},onTouchStart:function(e){return I(e,n)},onTouchMove:function(e){return T(e)},onTouchEnd:function(e){return K(e)}},u.createElement("div",{className:"p-splitter-gutter-handle"}));return u.createElement(u.Fragment,null,u.createElement("div",i({key:n,className:a,style:t.props.style},l),t.props.children),s)},M=r.ObjectUtils.findDiffKeys(e,v.defaultProps),Y=r.classNames("p-splitter p-component p-splitter-".concat(e.layout),e.className),B=u.Children.map(e.children,L);return u.createElement("div",i({ref:l,id:e.id,className:Y,style:e.style},M),B)})));return g.displayName="SplitterPanel",g.defaultProps={__TYPE:"SplitterPanel",size:null,minSize:null,style:null,className:null},v.displayName="Splitter",v.defaultProps={__TYPE:"Splitter",id:null,className:null,style:null,layout:"horizontal",gutterSize:4,stateKey:null,stateStorage:"session",onResizeEnd:null},e.Splitter=v,e.SplitterPanel=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils,primereact.hooks);
+this.primereact=this.primereact||{},this.primereact.splitter=function(e,t,r,n){"use strict";function l(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 u=l(t);function i(){return i=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},i.apply(this,arguments)}function o(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 a(e){if(Array.isArray(e))return o(e)}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function s(e,t){if(e){if("string"==typeof e)return o(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)?o(e,t):void 0}}function p(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(e){return a(e)||c(e)||s(e)||p()}function d(e){if(Array.isArray(e))return e}function h(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,u=[],i=!0,o=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(u.push(n.value),!t||u.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==r.return||r.return()}finally{if(o)throw l}}return u}}function m(){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 y(e,t){return d(e)||h(e,t)||s(e,t)||m()}var g=function(){},v=u.memo(u.forwardRef((function(e,t){var l=u.useRef(null),o=u.useRef(),a=u.useRef({}),c=u.useRef(null),s=u.useRef(null),p=u.useRef(null),d=u.useRef(null),h=u.useRef(null),m=u.useRef(null),S=u.useRef(null),b=u.useRef(null),z=u.useRef(null),E=u.useRef(!1),w=null!=e.stateKey,O=y(n.useEventListener({type:"mousemove",listener:function(e){return I(e)}}),2),D=O[0],R=O[1],H=y(n.useEventListener({type:"mouseup",listener:function(e){T(e),P()}}),2),N=H[0],j=H[1],P=function(){R(),j()},x=function(t,r){return!(e.children[b.current].props&&e.children[b.current].props.minSize&&e.children[b.current].props.minSize>t)&&!(e.children[b.current+1].props&&e.children[b.current+1].props.minSize&&e.children[b.current+1].props.minSize>r)},A=function(){switch(e.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(e.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},C=function(){A().setItem(e.stateKey,JSON.stringify(z.current))},_=function(t,n){o.current=a.current[n];var u="touchstart"===t.type?t.touches[0].pageX:t.pageX,i="touchstart"===t.type?t.touches[0].pageY:t.pageY;c.current="horizontal"===e.layout?r.DomHandler.getWidth(l.current):r.DomHandler.getHeight(l.current),s.current=!0,p.current="horizontal"===e.layout?u:i,d.current=o.current.previousElementSibling,h.current=o.current.nextElementSibling,m.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(d.current,!0):r.DomHandler.getOuterHeight(d.current,!0))/c.current,S.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(h.current,!0):r.DomHandler.getOuterHeight(h.current,!0))/c.current,b.current=n,r.DomHandler.addClass(o.current,"p-splitter-gutter-resizing"),r.DomHandler.addClass(l.current,"p-splitter-resizing")},I=function(t){var r,n=m.current+(r="horizontal"===e.layout?100*("touchmove"===t.type?t.touches[0].pageX:t.pageX)/c.current-100*p.current/c.current:100*("touchmove"===t.type?t.touches[0].pageY:t.pageY)/c.current-100*p.current/c.current),l=S.current-r;x(n,l)&&(d.current.style.flexBasis="calc("+n+"% - "+(e.children.length-1)*e.gutterSize+"px)",h.current.style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",z.current[b.current]=n,z.current[b.current+1]=l)},T=function(t){w&&C(),e.onResizeEnd&&e.onResizeEnd({originalEvent:t,sizes:z.current}),r.DomHandler.removeClass(o.current,"p-splitter-gutter-resizing"),r.DomHandler.removeClass(l.current,"p-splitter-resizing"),s.current=!1,c.current=null,p.current=null,d.current=null,h.current=null,m.current=null,S.current=null,b.current=null},K=function(e,t){_(e,t),D(),N()},L=function(e,t){_(e,t),window.addEventListener("touchmove",Y,{passive:!1,cancelable:!1}),window.addEventListener("touchend",M)},Y=function(e){I(e)},M=function e(t){T(t),window.removeEventListener("touchmove",Y),window.removeEventListener("touchend",e)};u.useEffect((function(){var t,n=f(l.current.children).filter((function(e){return r.DomHandler.hasClass(e,"p-splitter-panel")}));if(n.map((function(e){e.childNodes&&r.ObjectUtils.isNotEmpty(r.DomHandler.find(e,".p-splitter"))&&r.DomHandler.addClass(e,"p-splitter-panel-nested")})),e.children&&e.children.length){var u=!1;if(w&&!E.current&&(u=!!(t=A().getItem(e.stateKey))&&(z.current=JSON.parse(t),f(l.current.children).filter((function(e){return r.DomHandler.hasClass(e,"p-splitter-panel")})).forEach((function(t,r){t.style.flexBasis="calc("+z.current[r]+"% - "+(e.children.length-1)*e.gutterSize+"px)"})),!0)),!u){var i=[];e.children.map((function(t,r){var l=(t.props&&t.props.size?t.props.size:null)||100/e.children.length;return i[r]=l,n[r].style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",i})),z.current=i,E.current&&C()}}E.current=!0}));var B=function(t,n){var l=r.ObjectUtils.findDiffKeys(t.props,g.defaultProps),o=r.classNames("p-splitter-panel",t.props.className),c=n!==e.children.length-1&&u.createElement("div",{ref:function(e){return a.current[n]=e},className:"p-splitter-gutter",style:"horizontal"===e.layout?{width:e.gutterSize+"px"}:{height:e.gutterSize+"px"},onMouseDown:function(e){return K(e,n)},onTouchStart:function(e){return L(e,n)},onTouchMove:function(e){return Y(e)},onTouchEnd:function(e){return M(e)}},u.createElement("div",{className:"p-splitter-gutter-handle"}));return u.createElement(u.Fragment,null,u.createElement("div",i({key:n,className:o,style:t.props.style},l),t.props.children),c)},U=r.ObjectUtils.findDiffKeys(e,v.defaultProps),X=r.classNames("p-splitter p-component p-splitter-".concat(e.layout),e.className),k=u.Children.map(e.children,B);return u.createElement("div",i({ref:l,id:e.id,className:X,style:e.style},U),k)})));return g.displayName="SplitterPanel",g.defaultProps={__TYPE:"SplitterPanel",size:null,minSize:null,style:null,className:null},v.displayName="Splitter",v.defaultProps={__TYPE:"Splitter",id:null,className:null,style:null,layout:"horizontal",gutterSize:4,stateKey:null,stateStorage:"session",onResizeEnd:null},e.Splitter=v,e.SplitterPanel=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils,primereact.hooks);

package/steps/steps.cjs.js

@@ -122,6 +122,7 @@ var Steps = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
 
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "tab",

package/steps/steps.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var n=a(e);function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l.apply(this,arguments)}var r=n.memo(n.forwardRef((function(e,a){var s=function(t,a,n){e.readOnly||a.disabled?t.preventDefault():(e.onSelect&&e.onSelect({originalEvent:t,item:a,index:n}),a.url||t.preventDefault(),a.command&&a.command({originalEvent:t,item:a,index:n}))},i=function(a,l){var r=a.label+"_"+l,i=l===e.activeIndex,c=a.disabled||l!==e.activeIndex&&e.readOnly,o=c?-1:"",m=t.classNames("p-steps-item",a.className,{"p-highlight p-steps-current":i,"p-disabled":c}),p=t.classNames("p-menuitem-icon",a.icon),u=t.IconUtils.getJSXIcon(a.icon,{className:"p-menuitem-icon"},{props:e}),d=a.label&&n.createElement("span",{className:"p-steps-title"},a.label),f=n.createElement("a",{href:a.url||"#",className:"p-menuitem-link",role:"presentation",target:a.target,onClick:function(e){return s(e,a,l)},tabIndex:o},n.createElement("span",{className:"p-steps-number"},l+1),u,d);a.template&&(f=t.ObjectUtils.getJSXElement(a.template,a,{onClick:function(e){return s(e,a,l)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:p,element:f,props:e,tabIndex:o,active:i,disabled:c}));return n.createElement("li",{key:r,className:m,style:a.style,role:"tab","aria-selected":i,"aria-expanded":i},f)},c=t.ObjectUtils.findDiffKeys(e,r.defaultProps),o=t.classNames("p-steps p-component",{"p-readonly":e.readOnly},e.className),m=function(){if(e.model){var t=e.model.map(i);return n.createElement("ul",{role:"tablist"},t)}return null}();return n.createElement("div",l({id:e.id,className:o,style:e.style},c),m)})));r.displayName="Steps",r.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null},exports.Steps=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var n=a(e);function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l.apply(this,arguments)}var r=n.memo(n.forwardRef((function(e,a){var s=function(t,a,n){e.readOnly||a.disabled?t.preventDefault():(e.onSelect&&e.onSelect({originalEvent:t,item:a,index:n}),a.url||t.preventDefault(),a.command&&a.command({originalEvent:t,item:a,index:n}))},i=function(a,l){var r=a.label+"_"+l,i=l===e.activeIndex,c=a.disabled||l!==e.activeIndex&&e.readOnly,o=c?-1:"",m=t.classNames("p-steps-item",a.className,{"p-highlight p-steps-current":i,"p-disabled":c}),p=t.classNames("p-menuitem-icon",a.icon),u=t.IconUtils.getJSXIcon(a.icon,{className:"p-menuitem-icon"},{props:e}),d=a.label&&n.createElement("span",{className:"p-steps-title"},a.label),f=n.createElement("a",{href:a.url||"#",className:"p-menuitem-link",role:"presentation",target:a.target,onClick:function(e){return s(e,a,l)},tabIndex:o},n.createElement("span",{className:"p-steps-number"},l+1),u,d);a.template&&(f=t.ObjectUtils.getJSXElement(a.template,a,{onClick:function(e){return s(e,a,l)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:p,element:f,props:e,tabIndex:o,active:i,disabled:c}));return n.createElement("li",{key:r,id:a.id,className:m,style:a.style,role:"tab","aria-selected":i,"aria-expanded":i},f)},c=t.ObjectUtils.findDiffKeys(e,r.defaultProps),o=t.classNames("p-steps p-component",{"p-readonly":e.readOnly},e.className),m=function(){if(e.model){var t=e.model.map(i);return n.createElement("ul",{role:"tablist"},t)}return null}();return n.createElement("div",l({id:e.id,className:o,style:e.style},c),m)})));r.displayName="Steps",r.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null},exports.Steps=r;

package/steps/steps.esm.js

@@ -98,6 +98,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
 
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "tab",

package/steps/steps.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{ObjectUtils as t,classNames as a,IconUtils as l}from"primereact/utils";function n(){return n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},n.apply(this,arguments)}var r=e.memo(e.forwardRef((function(s,i){var m=function(e,t,a){s.readOnly||t.disabled?e.preventDefault():(s.onSelect&&s.onSelect({originalEvent:e,item:t,index:a}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:a}))},p=function(n,r){var i=n.label+"_"+r,p=r===s.activeIndex,c=n.disabled||r!==s.activeIndex&&s.readOnly,o=c?-1:"",u=a("p-steps-item",n.className,{"p-highlight p-steps-current":p,"p-disabled":c}),d=a("p-menuitem-icon",n.icon),f=l.getJSXIcon(n.icon,{className:"p-menuitem-icon"},{props:s}),b=n.label&&e.createElement("span",{className:"p-steps-title"},n.label),v=e.createElement("a",{href:n.url||"#",className:"p-menuitem-link",role:"presentation",target:n.target,onClick:function(e){return m(e,n,r)},tabIndex:o},e.createElement("span",{className:"p-steps-number"},r+1),f,b);n.template&&(v=t.getJSXElement(n.template,n,{onClick:function(e){return m(e,n,r)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:d,element:v,props:s,tabIndex:o,active:p,disabled:c}));return e.createElement("li",{key:i,className:u,style:n.style,role:"tab","aria-selected":p,"aria-expanded":p},v)},c=t.findDiffKeys(s,r.defaultProps),o=a("p-steps p-component",{"p-readonly":s.readOnly},s.className),u=function(){if(s.model){var t=s.model.map(p);return e.createElement("ul",{role:"tablist"},t)}return null}();return e.createElement("div",n({id:s.id,className:o,style:s.style},c),u)})));r.displayName="Steps",r.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null};export{r as Steps};
+import*as e from"react";import{ObjectUtils as t,classNames as a,IconUtils as l}from"primereact/utils";function n(){return n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},n.apply(this,arguments)}var r=e.memo(e.forwardRef((function(s,i){var m=function(e,t,a){s.readOnly||t.disabled?e.preventDefault():(s.onSelect&&s.onSelect({originalEvent:e,item:t,index:a}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:a}))},p=function(n,r){var i=n.label+"_"+r,p=r===s.activeIndex,c=n.disabled||r!==s.activeIndex&&s.readOnly,o=c?-1:"",d=a("p-steps-item",n.className,{"p-highlight p-steps-current":p,"p-disabled":c}),u=a("p-menuitem-icon",n.icon),f=l.getJSXIcon(n.icon,{className:"p-menuitem-icon"},{props:s}),b=n.label&&e.createElement("span",{className:"p-steps-title"},n.label),v=e.createElement("a",{href:n.url||"#",className:"p-menuitem-link",role:"presentation",target:n.target,onClick:function(e){return m(e,n,r)},tabIndex:o},e.createElement("span",{className:"p-steps-number"},r+1),f,b);n.template&&(v=t.getJSXElement(n.template,n,{onClick:function(e){return m(e,n,r)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:u,element:v,props:s,tabIndex:o,active:p,disabled:c}));return e.createElement("li",{key:i,id:n.id,className:d,style:n.style,role:"tab","aria-selected":p,"aria-expanded":p},v)},c=t.findDiffKeys(s,r.defaultProps),o=a("p-steps p-component",{"p-readonly":s.readOnly},s.className),d=function(){if(s.model){var t=s.model.map(p);return e.createElement("ul",{role:"tablist"},t)}return null}();return e.createElement("div",n({id:s.id,className:o,style:s.style},c),d)})));r.displayName="Steps",r.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null};export{r as Steps};

package/steps/steps.js

@@ -119,6 +119,7 @@ this.primereact.steps = (function (exports, React, utils) {
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item.id,
         className: className,
         style: item.style,
         role: "tab",

package/steps/steps.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.steps=function(e,t,a){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var l=n(t);function r(){return r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r.apply(this,arguments)}var s=l.memo(l.forwardRef((function(e,t){var n=function(t,a,n){e.readOnly||a.disabled?t.preventDefault():(e.onSelect&&e.onSelect({originalEvent:t,item:a,index:n}),a.url||t.preventDefault(),a.command&&a.command({originalEvent:t,item:a,index:n}))},i=function(t,r){var s=t.label+"_"+r,i=r===e.activeIndex,c=t.disabled||r!==e.activeIndex&&e.readOnly,m=c?-1:"",o=a.classNames("p-steps-item",t.className,{"p-highlight p-steps-current":i,"p-disabled":c}),p=a.classNames("p-menuitem-icon",t.icon),u=a.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e}),d=t.label&&l.createElement("span",{className:"p-steps-title"},t.label),f=l.createElement("a",{href:t.url||"#",className:"p-menuitem-link",role:"presentation",target:t.target,onClick:function(e){return n(e,t,r)},tabIndex:m},l.createElement("span",{className:"p-steps-number"},r+1),u,d);t.template&&(f=a.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return n(e,t,r)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:p,element:f,props:e,tabIndex:m,active:i,disabled:c}));return l.createElement("li",{key:s,className:o,style:t.style,role:"tab","aria-selected":i,"aria-expanded":i},f)},c=a.ObjectUtils.findDiffKeys(e,s.defaultProps),m=a.classNames("p-steps p-component",{"p-readonly":e.readOnly},e.className),o=function(){if(e.model){var t=e.model.map(i);return l.createElement("ul",{role:"tablist"},t)}return null}();return l.createElement("div",r({id:e.id,className:m,style:e.style},c),o)})));return s.displayName="Steps",s.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null},e.Steps=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.steps=function(e,t,a){"use strict";function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var l=n(t);function r(){return r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r.apply(this,arguments)}var s=l.memo(l.forwardRef((function(e,t){var n=function(t,a,n){e.readOnly||a.disabled?t.preventDefault():(e.onSelect&&e.onSelect({originalEvent:t,item:a,index:n}),a.url||t.preventDefault(),a.command&&a.command({originalEvent:t,item:a,index:n}))},i=function(t,r){var s=t.label+"_"+r,i=r===e.activeIndex,c=t.disabled||r!==e.activeIndex&&e.readOnly,m=c?-1:"",o=a.classNames("p-steps-item",t.className,{"p-highlight p-steps-current":i,"p-disabled":c}),p=a.classNames("p-menuitem-icon",t.icon),u=a.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e}),d=t.label&&l.createElement("span",{className:"p-steps-title"},t.label),f=l.createElement("a",{href:t.url||"#",className:"p-menuitem-link",role:"presentation",target:t.target,onClick:function(e){return n(e,t,r)},tabIndex:m},l.createElement("span",{className:"p-steps-number"},r+1),u,d);t.template&&(f=a.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return n(e,t,r)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:p,element:f,props:e,tabIndex:m,active:i,disabled:c}));return l.createElement("li",{key:s,id:t.id,className:o,style:t.style,role:"tab","aria-selected":i,"aria-expanded":i},f)},c=a.ObjectUtils.findDiffKeys(e,s.defaultProps),m=a.classNames("p-steps p-component",{"p-readonly":e.readOnly},e.className),o=function(){if(e.model){var t=e.model.map(i);return l.createElement("ul",{role:"tablist"},t)}return null}();return l.createElement("div",r({id:e.id,className:m,style:e.style},c),o)})));return s.displayName="Steps",s.defaultProps={__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null},e.Steps=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils);

package/styleclass/styleclass.cjs.js

@@ -108,8 +108,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       }
 
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindTargetEnterListener = _useEventListener2[0],
@@ -126,23 +125,22 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
 
       unbindTargetLeaveListener();
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindTargetLeaveListener = _useEventListener4[0],
       unbindTargetLeaveListener = _useEventListener4[1];
 
   var _useEventListener5 = hooks.useEventListener({
-    type: 'animationend',
+    type: 'click',
     listener: function listener(event) {
-      if (getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+      if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
         unbindDocumentClickListener();
-      } else if (!elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)) {
+      } else if (isOutsideClick(event)) {
         leave();
       }
     },
-    when: false
+    when: props.hideOnOutsideClick
   }),
       _useEventListener6 = _slicedToArray(_useEventListener5, 2),
       bindDocumentClickListener = _useEventListener6[0],
@@ -158,8 +156,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       } else {
         if (targetRef.current.offsetParent === null) enter();else leave();
       }
-    },
-    when: false
+    }
   }),
       _useEventListener8 = _slicedToArray(_useEventListener7, 2),
       bindClickListener = _useEventListener8[0],
@@ -185,8 +182,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
         }
 
         bindTargetEnterListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -200,8 +196,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
     }
 
     bindDocumentClickListener({
-      target: elementRef.current && elementRef.current.ownerDocument,
-      when: props.hideOnOutsideClick
+      target: elementRef.current && elementRef.current.ownerDocument
     });
   };
 
@@ -216,8 +211,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
         }
 
         bindTargetLeaveListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -230,7 +224,9 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       }
     }
 
-    unbindDocumentClickListener();
+    if (props.hideOnOutsideClick) {
+      unbindDocumentClickListener();
+    }
   };
 
   var resolveTarget = function resolveTarget() {
@@ -259,8 +255,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
   var init = function init() {
     elementRef.current = utils.ObjectUtils.getRefElement(props.nodeRef);
     bindClickListener({
-      target: elementRef.current,
-      when: true
+      target: elementRef.current
     });
   };
 
@@ -270,13 +265,23 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
     targetRef.current = null;
   };
 
+  var isVisible = function isVisible(target) {
+    return target.offsetParent !== null;
+  };
+
+  var isOutsideClick = function isOutsideClick(event) {
+    return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+  };
+
   hooks.useMountEffect(function () {
     init();
   });
   hooks.useUpdateEffect(function () {
-    destroy();
     init();
-  }, [props.nodeRef]);
+    return function () {
+      unbindClickListener();
+    };
+  });
   hooks.useUnmountEffect(function () {
     destroy();
   });

package/styleclass/styleclass.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/hooks"),t=require("primereact/utils");function n(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 a=n(e);function l(e){if(Array.isArray(e))return e}function s(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,l=[],s=!0,u=!1;try{for(t=t.call(e);!(s=(n=t.next()).done)&&(l.push(n.value),!r||l.length!==r);s=!0);}catch(e){u=!0,a=e}finally{try{s||null==t.return||t.return()}finally{if(u)throw a}}return l}}function u(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 o(e,r){if(e){if("string"==typeof e)return u(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)?u(e,r):void 0}}function c(){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 i(e,r){return l(e)||s(e,r)||o(e,r)||c()}var m=a.forwardRef((function(e,n){var l=a.useRef(null),s=a.useRef(!1),u=a.useRef(null),o=i(r.useEventListener({type:"animationend",listener:function(){t.DomHandler.removeClass(l.current,e.enterActiveClassName),e.enterToClassName&&t.DomHandler.addClass(l.current,e.enterToClassName),m(),"slidedown"===e.enterActiveClassName&&(l.current.style.maxHeight=""),s.current=!1},when:!1}),2),c=o[0],m=o[1],d=i(r.useEventListener({type:"animationend",listener:function(){t.DomHandler.removeClass(l.current,e.leaveActiveClassName),e.leaveToClassName&&t.DomHandler.addClass(l.current,e.leaveToClassName),C(),s.current=!1},when:!1}),2),f=d[0],C=d[1],v=i(r.useEventListener({type:"animationend",listener:function(e){"static"===getComputedStyle(l.current).getPropertyValue("position")?N():u.current.isSameNode(e.target)||u.current.contains(e.target)||l.current.contains(e.target)||b()},when:!1}),2),g=v[0],N=v[1],p=i(r.useEventListener({type:"click",listener:function(){l.current=D(),e.toggleClassName?t.DomHandler.hasClass(l.current,e.toggleClassName)?t.DomHandler.removeClass(l.current,e.toggleClassName):t.DomHandler.addClass(l.current,e.toggleClassName):null===l.current.offsetParent?H():b()},when:!1}),2),y=p[0],h=p[1],H=function(){e.enterActiveClassName?s.current||(s.current=!0,"slidedown"===e.enterActiveClassName&&(l.current.style.height="0px",t.DomHandler.removeClass(l.current,"hidden"),l.current.style.maxHeight=l.current.scrollHeight+"px",t.DomHandler.addClass(l.current,"hidden"),l.current.style.height=""),t.DomHandler.addClass(l.current,e.enterActiveClassName),e.enterClassName&&t.DomHandler.removeClass(l.current,e.enterClassName),c({target:l.current,when:!0})):(e.enterClassName&&t.DomHandler.removeClass(l.current,e.enterClassName),e.enterToClassName&&t.DomHandler.addClass(l.current,e.enterToClassName)),g({target:u.current&&u.current.ownerDocument,when:e.hideOnOutsideClick})},b=function(){e.leaveActiveClassName?s.current||(s.current=!0,t.DomHandler.addClass(l.current,e.leaveActiveClassName),e.leaveClassName&&t.DomHandler.removeClass(l.current,e.leaveClassName),f({target:l.current,when:!0})):(e.leaveClassName&&t.DomHandler.removeClass(l.current,e.leaveClassName),e.leaveToClassName&&t.DomHandler.addClass(l.current,e.leaveToClassName)),N()},D=function(){if(l.current)return l.current;switch(e.selector){case"@next":return u.current.nextElementSibling;case"@prev":return u.current.previousElementSibling;case"@parent":return u.current.parentElement;case"@grandparent":return u.current.parentElement.parentElement;default:return document.querySelector(e.selector)}},w=function(){u.current=t.ObjectUtils.getRefElement(e.nodeRef),y({target:u.current,when:!0})},A=function(){h(),N(),l.current=null};return r.useMountEffect((function(){w()})),r.useUpdateEffect((function(){A(),w()}),[e.nodeRef]),r.useUnmountEffect((function(){A()})),e.children}));m.displayName="StyleClass",m.defaultProps={__TYPE:"StyleClass",nodeRef:null,selector:null,enterClassName:null,enterActiveClassName:null,enterToClassName:null,leaveClassName:null,leaveActiveClassName:null,leaveToClassName:null,hideOnOutsideClick:!1,toggleClassName:null},exports.StyleClass=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/hooks"),t=require("primereact/utils");function n(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 a=n(e);function l(e){if(Array.isArray(e))return e}function s(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,l=[],s=!0,u=!1;try{for(t=t.call(e);!(s=(n=t.next()).done)&&(l.push(n.value),!r||l.length!==r);s=!0);}catch(e){u=!0,a=e}finally{try{s||null==t.return||t.return()}finally{if(u)throw a}}return l}}function u(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 c(e,r){if(e){if("string"==typeof e)return u(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)?u(e,r):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.")}function i(e,r){return l(e)||s(e,r)||c(e,r)||o()}var m=a.forwardRef((function(e,n){var l=a.useRef(null),s=a.useRef(!1),u=a.useRef(null),c=i(r.useEventListener({type:"animationend",listener:function(){t.DomHandler.removeClass(l.current,e.enterActiveClassName),e.enterToClassName&&t.DomHandler.addClass(l.current,e.enterToClassName),m(),"slidedown"===e.enterActiveClassName&&(l.current.style.maxHeight=""),s.current=!1}}),2),o=c[0],m=c[1],d=i(r.useEventListener({type:"animationend",listener:function(){t.DomHandler.removeClass(l.current,e.leaveActiveClassName),e.leaveToClassName&&t.DomHandler.addClass(l.current,e.leaveToClassName),C(),s.current=!1}}),2),f=d[0],C=d[1],v=i(r.useEventListener({type:"click",listener:function(e){E(l.current)&&"static"!==getComputedStyle(l.current).getPropertyValue("position")?O(e)&&b():N()},when:e.hideOnOutsideClick}),2),g=v[0],N=v[1],p=i(r.useEventListener({type:"click",listener:function(){l.current=D(),e.toggleClassName?t.DomHandler.hasClass(l.current,e.toggleClassName)?t.DomHandler.removeClass(l.current,e.toggleClassName):t.DomHandler.addClass(l.current,e.toggleClassName):null===l.current.offsetParent?H():b()}}),2),y=p[0],h=p[1],H=function(){e.enterActiveClassName?s.current||(s.current=!0,"slidedown"===e.enterActiveClassName&&(l.current.style.height="0px",t.DomHandler.removeClass(l.current,"hidden"),l.current.style.maxHeight=l.current.scrollHeight+"px",t.DomHandler.addClass(l.current,"hidden"),l.current.style.height=""),t.DomHandler.addClass(l.current,e.enterActiveClassName),e.enterClassName&&t.DomHandler.removeClass(l.current,e.enterClassName),o({target:l.current})):(e.enterClassName&&t.DomHandler.removeClass(l.current,e.enterClassName),e.enterToClassName&&t.DomHandler.addClass(l.current,e.enterToClassName)),g({target:u.current&&u.current.ownerDocument})},b=function(){e.leaveActiveClassName?s.current||(s.current=!0,t.DomHandler.addClass(l.current,e.leaveActiveClassName),e.leaveClassName&&t.DomHandler.removeClass(l.current,e.leaveClassName),f({target:l.current})):(e.leaveClassName&&t.DomHandler.removeClass(l.current,e.leaveClassName),e.leaveToClassName&&t.DomHandler.addClass(l.current,e.leaveToClassName)),e.hideOnOutsideClick&&N()},D=function(){if(l.current)return l.current;switch(e.selector){case"@next":return u.current.nextElementSibling;case"@prev":return u.current.previousElementSibling;case"@parent":return u.current.parentElement;case"@grandparent":return u.current.parentElement.parentElement;default:return document.querySelector(e.selector)}},A=function(){u.current=t.ObjectUtils.getRefElement(e.nodeRef),y({target:u.current})},E=function(e){return null!==e.offsetParent},O=function(e){return!u.current.isSameNode(e.target)&&!u.current.contains(e.target)&&!l.current.contains(e.target)};return r.useMountEffect((function(){A()})),r.useUpdateEffect((function(){return A(),function(){h()}})),r.useUnmountEffect((function(){h(),N(),l.current=null})),e.children}));m.displayName="StyleClass",m.defaultProps={__TYPE:"StyleClass",nodeRef:null,selector:null,enterClassName:null,enterActiveClassName:null,enterToClassName:null,leaveClassName:null,leaveActiveClassName:null,leaveToClassName:null,hideOnOutsideClick:!1,toggleClassName:null},exports.StyleClass=m;

package/styleclass/styleclass.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 type StyleClassSelectorType = '@next' | '@prev' | '@parent' | '@grandparent' | string;
 
 export interface StyleClassProps {
-    nodeRef?: React.ReactNode;
+    nodeRef: React.MutableRefObject<React.ReactNode>;
     selector?: StyleClassSelectorType;
     enterClassName?: string;
     enterActiveClassName?: string;

package/styleclass/styleclass.esm.js

@@ -84,8 +84,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
 
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindTargetEnterListener = _useEventListener2[0],
@@ -102,23 +101,22 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
       unbindTargetLeaveListener();
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindTargetLeaveListener = _useEventListener4[0],
       unbindTargetLeaveListener = _useEventListener4[1];
 
   var _useEventListener5 = useEventListener({
-    type: 'animationend',
+    type: 'click',
     listener: function listener(event) {
-      if (getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+      if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
         unbindDocumentClickListener();
-      } else if (!elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)) {
+      } else if (isOutsideClick(event)) {
         leave();
       }
     },
-    when: false
+    when: props.hideOnOutsideClick
   }),
       _useEventListener6 = _slicedToArray(_useEventListener5, 2),
       bindDocumentClickListener = _useEventListener6[0],
@@ -134,8 +132,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       } else {
         if (targetRef.current.offsetParent === null) enter();else leave();
       }
-    },
-    when: false
+    }
   }),
       _useEventListener8 = _slicedToArray(_useEventListener7, 2),
       bindClickListener = _useEventListener8[0],
@@ -161,8 +158,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
 
         bindTargetEnterListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -176,8 +172,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     bindDocumentClickListener({
-      target: elementRef.current && elementRef.current.ownerDocument,
-      when: props.hideOnOutsideClick
+      target: elementRef.current && elementRef.current.ownerDocument
     });
   };
 
@@ -192,8 +187,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
 
         bindTargetLeaveListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -206,7 +200,9 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
 
-    unbindDocumentClickListener();
+    if (props.hideOnOutsideClick) {
+      unbindDocumentClickListener();
+    }
   };
 
   var resolveTarget = function resolveTarget() {
@@ -235,8 +231,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var init = function init() {
     elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
     bindClickListener({
-      target: elementRef.current,
-      when: true
+      target: elementRef.current
     });
   };
 
@@ -246,13 +241,23 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
     targetRef.current = null;
   };
 
+  var isVisible = function isVisible(target) {
+    return target.offsetParent !== null;
+  };
+
+  var isOutsideClick = function isOutsideClick(event) {
+    return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+  };
+
   useMountEffect(function () {
     init();
   });
   useUpdateEffect(function () {
-    destroy();
     init();
-  }, [props.nodeRef]);
+    return function () {
+      unbindClickListener();
+    };
+  });
   useUnmountEffect(function () {
     destroy();
   });

package/styleclass/styleclass.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{useEventListener as r,useMountEffect as t,useUpdateEffect as n,useUnmountEffect as a}from"primereact/hooks";import{DomHandler as l,ObjectUtils as s}from"primereact/utils";function u(e){if(Array.isArray(e))return e}function c(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,l=[],s=!0,u=!1;try{for(t=t.call(e);!(s=(n=t.next()).done)&&(l.push(n.value),!r||l.length!==r);s=!0);}catch(e){u=!0,a=e}finally{try{s||null==t.return||t.return()}finally{if(u)throw a}}return l}}function o(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 i(e,r){if(e){if("string"==typeof e)return o(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)?o(e,r):void 0}}function m(){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 C(e,r){return u(e)||c(e,r)||i(e,r)||m()}var d=e.forwardRef((function(u,c){var o=e.useRef(null),i=e.useRef(!1),m=e.useRef(null),d=C(r({type:"animationend",listener:function(){l.removeClass(o.current,u.enterActiveClassName),u.enterToClassName&&l.addClass(o.current,u.enterToClassName),v(),"slidedown"===u.enterActiveClassName&&(o.current.style.maxHeight=""),i.current=!1},when:!1}),2),f=d[0],v=d[1],N=C(r({type:"animationend",listener:function(){l.removeClass(o.current,u.leaveActiveClassName),u.leaveToClassName&&l.addClass(o.current,u.leaveToClassName),p(),i.current=!1},when:!1}),2),g=N[0],p=N[1],h=C(r({type:"animationend",listener:function(e){"static"===getComputedStyle(o.current).getPropertyValue("position")?w():m.current.isSameNode(e.target)||m.current.contains(e.target)||o.current.contains(e.target)||x()},when:!1}),2),y=h[0],w=h[1],A=C(r({type:"click",listener:function(){o.current=E(),u.toggleClassName?l.hasClass(o.current,u.toggleClassName)?l.removeClass(o.current,u.toggleClassName):l.addClass(o.current,u.toggleClassName):null===o.current.offsetParent?b():x()},when:!1}),2),S=A[0],T=A[1],b=function(){u.enterActiveClassName?i.current||(i.current=!0,"slidedown"===u.enterActiveClassName&&(o.current.style.height="0px",l.removeClass(o.current,"hidden"),o.current.style.maxHeight=o.current.scrollHeight+"px",l.addClass(o.current,"hidden"),o.current.style.height=""),l.addClass(o.current,u.enterActiveClassName),u.enterClassName&&l.removeClass(o.current,u.enterClassName),f({target:o.current,when:!0})):(u.enterClassName&&l.removeClass(o.current,u.enterClassName),u.enterToClassName&&l.addClass(o.current,u.enterToClassName)),y({target:m.current&&m.current.ownerDocument,when:u.hideOnOutsideClick})},x=function(){u.leaveActiveClassName?i.current||(i.current=!0,l.addClass(o.current,u.leaveActiveClassName),u.leaveClassName&&l.removeClass(o.current,u.leaveClassName),g({target:o.current,when:!0})):(u.leaveClassName&&l.removeClass(o.current,u.leaveClassName),u.leaveToClassName&&l.addClass(o.current,u.leaveToClassName)),w()},E=function(){if(o.current)return o.current;switch(u.selector){case"@next":return m.current.nextElementSibling;case"@prev":return m.current.previousElementSibling;case"@parent":return m.current.parentElement;case"@grandparent":return m.current.parentElement.parentElement;default:return document.querySelector(u.selector)}},R=function(){m.current=s.getRefElement(u.nodeRef),S({target:m.current,when:!0})},O=function(){T(),w(),o.current=null};return t((function(){R()})),n((function(){O(),R()}),[u.nodeRef]),a((function(){O()})),u.children}));d.displayName="StyleClass",d.defaultProps={__TYPE:"StyleClass",nodeRef:null,selector:null,enterClassName:null,enterActiveClassName:null,enterToClassName:null,leaveClassName:null,leaveActiveClassName:null,leaveToClassName:null,hideOnOutsideClick:!1,toggleClassName:null};export{d as StyleClass};
+import*as e from"react";import{useEventListener as r,useMountEffect as t,useUpdateEffect as n,useUnmountEffect as a}from"primereact/hooks";import{DomHandler as l,ObjectUtils as s}from"primereact/utils";function u(e){if(Array.isArray(e))return e}function c(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,l=[],s=!0,u=!1;try{for(t=t.call(e);!(s=(n=t.next()).done)&&(l.push(n.value),!r||l.length!==r);s=!0);}catch(e){u=!0,a=e}finally{try{s||null==t.return||t.return()}finally{if(u)throw a}}return l}}function o(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 i(e,r){if(e){if("string"==typeof e)return o(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)?o(e,r):void 0}}function m(){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 C(e,r){return u(e)||c(e,r)||i(e,r)||m()}var d=e.forwardRef((function(u,c){var o=e.useRef(null),i=e.useRef(!1),m=e.useRef(null),d=C(r({type:"animationend",listener:function(){l.removeClass(o.current,u.enterActiveClassName),u.enterToClassName&&l.addClass(o.current,u.enterToClassName),v(),"slidedown"===u.enterActiveClassName&&(o.current.style.maxHeight=""),i.current=!1}}),2),f=d[0],v=d[1],N=C(r({type:"animationend",listener:function(){l.removeClass(o.current,u.leaveActiveClassName),u.leaveToClassName&&l.addClass(o.current,u.leaveToClassName),p(),i.current=!1}}),2),g=N[0],p=N[1],y=C(r({type:"click",listener:function(e){R(o.current)&&"static"!==getComputedStyle(o.current).getPropertyValue("position")?k(e)&&x():A()},when:u.hideOnOutsideClick}),2),h=y[0],A=y[1],S=C(r({type:"click",listener:function(){o.current=E(),u.toggleClassName?l.hasClass(o.current,u.toggleClassName)?l.removeClass(o.current,u.toggleClassName):l.addClass(o.current,u.toggleClassName):null===o.current.offsetParent?w():x()}}),2),T=S[0],b=S[1],w=function(){u.enterActiveClassName?i.current||(i.current=!0,"slidedown"===u.enterActiveClassName&&(o.current.style.height="0px",l.removeClass(o.current,"hidden"),o.current.style.maxHeight=o.current.scrollHeight+"px",l.addClass(o.current,"hidden"),o.current.style.height=""),l.addClass(o.current,u.enterActiveClassName),u.enterClassName&&l.removeClass(o.current,u.enterClassName),f({target:o.current})):(u.enterClassName&&l.removeClass(o.current,u.enterClassName),u.enterToClassName&&l.addClass(o.current,u.enterToClassName)),h({target:m.current&&m.current.ownerDocument})},x=function(){u.leaveActiveClassName?i.current||(i.current=!0,l.addClass(o.current,u.leaveActiveClassName),u.leaveClassName&&l.removeClass(o.current,u.leaveClassName),g({target:o.current})):(u.leaveClassName&&l.removeClass(o.current,u.leaveClassName),u.leaveToClassName&&l.addClass(o.current,u.leaveToClassName)),u.hideOnOutsideClick&&A()},E=function(){if(o.current)return o.current;switch(u.selector){case"@next":return m.current.nextElementSibling;case"@prev":return m.current.previousElementSibling;case"@parent":return m.current.parentElement;case"@grandparent":return m.current.parentElement.parentElement;default:return document.querySelector(u.selector)}},O=function(){m.current=s.getRefElement(u.nodeRef),T({target:m.current})},R=function(e){return null!==e.offsetParent},k=function(e){return!m.current.isSameNode(e.target)&&!m.current.contains(e.target)&&!o.current.contains(e.target)};return t((function(){O()})),n((function(){return O(),function(){b()}})),a((function(){b(),A(),o.current=null})),u.children}));d.displayName="StyleClass",d.defaultProps={__TYPE:"StyleClass",nodeRef:null,selector:null,enterClassName:null,enterActiveClassName:null,enterToClassName:null,leaveClassName:null,leaveActiveClassName:null,leaveToClassName:null,hideOnOutsideClick:!1,toggleClassName:null};export{d as StyleClass};

package/styleclass/styleclass.js

@@ -104,8 +104,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
         }
 
         animating.current = false;
-      },
-      when: false
+      }
     }),
         _useEventListener2 = _slicedToArray(_useEventListener, 2),
         bindTargetEnterListener = _useEventListener2[0],
@@ -122,23 +121,22 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
 
         unbindTargetLeaveListener();
         animating.current = false;
-      },
-      when: false
+      }
     }),
         _useEventListener4 = _slicedToArray(_useEventListener3, 2),
         bindTargetLeaveListener = _useEventListener4[0],
         unbindTargetLeaveListener = _useEventListener4[1];
 
     var _useEventListener5 = hooks.useEventListener({
-      type: 'animationend',
+      type: 'click',
       listener: function listener(event) {
-        if (getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+        if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
           unbindDocumentClickListener();
-        } else if (!elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)) {
+        } else if (isOutsideClick(event)) {
           leave();
         }
       },
-      when: false
+      when: props.hideOnOutsideClick
     }),
         _useEventListener6 = _slicedToArray(_useEventListener5, 2),
         bindDocumentClickListener = _useEventListener6[0],
@@ -154,8 +152,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
         } else {
           if (targetRef.current.offsetParent === null) enter();else leave();
         }
-      },
-      when: false
+      }
     }),
         _useEventListener8 = _slicedToArray(_useEventListener7, 2),
         bindClickListener = _useEventListener8[0],
@@ -181,8 +178,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
           }
 
           bindTargetEnterListener({
-            target: targetRef.current,
-            when: true
+            target: targetRef.current
           });
         }
       } else {
@@ -196,8 +192,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
       }
 
       bindDocumentClickListener({
-        target: elementRef.current && elementRef.current.ownerDocument,
-        when: props.hideOnOutsideClick
+        target: elementRef.current && elementRef.current.ownerDocument
       });
     };
 
@@ -212,8 +207,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
           }
 
           bindTargetLeaveListener({
-            target: targetRef.current,
-            when: true
+            target: targetRef.current
           });
         }
       } else {
@@ -226,7 +220,9 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
         }
       }
 
-      unbindDocumentClickListener();
+      if (props.hideOnOutsideClick) {
+        unbindDocumentClickListener();
+      }
     };
 
     var resolveTarget = function resolveTarget() {
@@ -255,8 +251,7 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
     var init = function init() {
       elementRef.current = utils.ObjectUtils.getRefElement(props.nodeRef);
       bindClickListener({
-        target: elementRef.current,
-        when: true
+        target: elementRef.current
       });
     };
 
@@ -266,13 +261,23 @@ this.primereact.styleclass = (function (exports, React, hooks, utils) {
       targetRef.current = null;
     };
 
+    var isVisible = function isVisible(target) {
+      return target.offsetParent !== null;
+    };
+
+    var isOutsideClick = function isOutsideClick(event) {
+      return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+    };
+
     hooks.useMountEffect(function () {
       init();
     });
     hooks.useUpdateEffect(function () {
-      destroy();
       init();
-    }, [props.nodeRef]);
+      return function () {
+        unbindClickListener();
+      };
+    });
     hooks.useUnmountEffect(function () {
       destroy();
     });