primereact 8.7.3 → 9.0.0-beta.1

package/sidebar/sidebar.d.ts

@@ -1,35 +1,133 @@
+/**
+ *
+ * Sidebar is a panel component displayed as an overlay.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/sidebar/)
+ *
+ * @module sidebar
+ *
+ */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 
-type SidebarPositionType = 'top' | 'bottom' | 'left' | 'right';
-
-type SidebarTemplateType = React.ReactNode | ((props: SidebarProps) => React.ReactNode);
-
-type SidebarAppendToType = 'self' | HTMLElement | undefined | null;
-
+/**
+ * Defines valid properties in Sidebar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    maskStyle?: React.CSSProperties;
-    maskClassName?: string;
-    visible?: boolean;
-    position?: SidebarPositionType;
-    fullScreen?: boolean;
-    blockScroll?: boolean;
-    baseZIndex?: number;
-    dismissable?: boolean;
-    showCloseIcon?: boolean;
-    ariaCloseLabel?: string;
-    closeOnEscape?: boolean;
-    icons?: SidebarTemplateType;
-    modal?: boolean;
-    appendTo?: SidebarAppendToType;
-    transitionOptions?: CSSTransitionProps;
+    /**
+     * Inline style of the mask.
+     */
+    maskStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the mask.
+     */
+    maskClassName?: string | undefined;
+    /**
+     * Specifies the visibility of the dialog.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Specifies the position of the sidebar, valid values are "left" and "right".
+     * @defaultValue left
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Adds a close icon to the header to hide the dialog.
+     * @defaultValue false
+     */
+    fullScreen?: boolean | undefined;
+    /**
+     * Whether to block scrolling of the document when sidebar is active.
+     * @defaultValue false
+     */
+    blockScroll?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether to dismiss sidebar on click of the mask.
+     * @defaultValue true
+     */
+    dismissable?: boolean | undefined;
+    /**
+     * Whether to display a close icon inside the panel.
+     * @defaultValue true
+     */
+    showCloseIcon?: boolean | undefined;
+    /**
+     * Aria label of the close icon.
+     * @defaultValue close
+     */
+    ariaCloseLabel?: string | undefined;
+    /**
+     * Specifies if pressing escape key should hide the sidebar.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Custom icons template for the header.
+     * @defaultValue true
+     */
+    icons?: React.ReactNode | ((props: SidebarProps) => React.ReactNode);
+    /**
+     * Whether to a modal layer behind the sidebar.
+     * @defaultValue true
+     */
+    modal?: boolean | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | null | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when sidebar gets shown.
+     */
     onShow?(): void;
+    /**
+     * Callback to invoke when the actions used to close the sidebar are triggered. Exp; close icon, mask and esc key.
+     */
     onHide(): void;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Sidebar**
+ *
+ * _Sidebar is a panel component displayed as an overlay._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/sidebar/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Sidebar extends React.Component<SidebarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
+    /**
+     * Used to get mask element.
+     * @return {HTMLElement} Mask element
+     */
     public getMask(): HTMLElement;
+    /**
+     * Used to get close icon element.
+     * @return {HTMLButtonElement} Close icon element
+     */
     public getCloseIcon(): HTMLButtonElement;
 }

package/sidebar/sidebar.esm.js

@@ -212,6 +212,15 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setVisibleState(true);
     }
   }, [maskVisibleState]);
+  useUpdateEffect(function () {
+    // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+    if (visibleState) {
+      unbindDocumentClickListener();
+      if (props.dismissable && !props.modal) {
+        bindDocumentClickListener();
+      }
+    }
+  }, [props.dismissable, props.modal, visibleState]);
   useUnmountEffect(function () {
     disableDocumentSettings();
     maskRef.current && ZIndexUtils.clear(maskRef.current);
@@ -237,7 +246,10 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var createElement = function createElement() {
     var otherProps = ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-    var className = classNames('p-sidebar p-component', props.className);
+    var className = classNames('p-sidebar p-component', props.className, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var maskClassName = classNames('p-sidebar-mask', {
       'p-component-overlay p-component-overlay-enter': props.modal,
       'p-sidebar-mask-scrollblocker': props.blockScroll,

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import n,{localeOption as t}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useEventListener as o,useMountEffect as l,useUpdateEffect as a,useUnmountEffect as i}from"primereact/hooks";import{Portal as c}from"primereact/portal";import{Ripple as s}from"primereact/ripple";import{ZIndexUtils as u,DomHandler as m,ObjectUtils as p,classNames as f}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},d.apply(this,arguments)}function b(e){if(Array.isArray(e))return e}function y(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,l,a,i=[],c=!0,s=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=l.call(t)).done)&&(i.push(r.value),i.length!==n);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(s)throw o}}return i}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function h(e,n){if(e){if("string"==typeof e)return v(e,n);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,n):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.")}function E(e,n){return b(e)||y(e,n)||h(e,n)||S()}var g=e.forwardRef((function(b,y){var v=E(e.useState(!1),2),h=v[0],S=v[1],w=E(e.useState(!1),2),k=w[0],C=w[1],I=e.useRef(null),O=e.useRef(null),N=e.useRef(null),x=E(o({type:"keydown",listener:function(e){27===e.which&&u.get(O.current)===u.getCurrent("modal",n.autoZIndex)&&H(e)}}),2),j=x[0],A=x[1],R=E(o({type:"click",listener:function(e){2!==e.which&&Z(e)&&H(e)}}),2),T=R[0],P=R[1],Z=function(e){return I&&I.current&&!I.current.contains(e.target)},D=function(e){b.dismissable&&b.modal&&O.current===e.target&&H(e)},H=function(e){b.onHide(),e.preventDefault()},M=function(){var e;b.onShow&&b.onShow(),!((e=document.activeElement)&&I&&I.current.contains(e))&&b.showCloseIcon&&N.current.focus(),z()},L=function(){b.modal&&m.addClass(O.current,"p-component-overlay-leave")},_=function(){u.clear(O.current),S(!1),J()},z=function(){b.closeOnEscape&&j(),b.dismissable&&!b.modal&&T(),b.blockScroll&&m.addClass(document.body,"p-overflow-hidden")},J=function(){A(),P(),b.blockScroll&&m.removeClass(document.body,"p-overflow-hidden")};e.useImperativeHandle(y,(function(){return{props:b,getElement:function(){return I.current},gteMask:function(){return O.current},getCloseIcon:function(){return N.current}}})),l((function(){b.visible&&S(!0)})),a((function(){b.visible&&!h&&S(!0),b.visible!==k&&h&&C(b.visible)})),a((function(){h&&(u.set("modal",O.current,n.autoZIndex,b.baseZIndex||n.zIndex.modal),C(!0))}),[h]),i((function(){J(),O.current&&u.clear(O.current)}));var K,U,X,Y,$,q,B,F=function(){if(b.showCloseIcon){var n=b.ariaCloseLabel||t("close");return e.createElement("button",{type:"button",ref:N,className:"p-sidebar-close p-sidebar-icon p-link",onClick:H,"aria-label":n},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(s,null))}return null};return h&&(U=p.findDiffKeys(b,g.defaultProps),X=f("p-sidebar p-component",b.className),Y=f("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":b.modal,"p-sidebar-mask-scrollblocker":b.blockScroll,"p-sidebar-visible":h,"p-sidebar-full":b.fullScreen},(K=["left","right","top","bottom"].find((function(e){return e===b.position})))?"p-sidebar-".concat(K):"",b.maskClassName),$=F(),q=b.icons?p.getJSXElement(b.icons,b):null,B=e.createElement("div",{ref:O,style:b.maskStyle,className:Y,onMouseDown:D},e.createElement(r,{nodeRef:I,classNames:"p-sidebar",in:k,timeout:{enter:b.fullScreen?150:300,exit:b.fullScreen?150:300},options:b.transitionOptions,unmountOnExit:!0,onEntered:M,onExiting:L,onExited:_},e.createElement("div",d({ref:I,id:b.id,className:X,style:b.style},U,{role:"complementary"}),e.createElement("div",{className:"p-sidebar-header"},q,$),e.createElement("div",{className:"p-sidebar-content"},b.children)))),e.createElement(c,{element:B,appendTo:b.appendTo,visible:!0}))}));g.displayName="Sidebar",g.defaultProps={__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null};export{g as Sidebar};
+import*as e from"react";import n,{localeOption as t}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useEventListener as l,useMountEffect as o,useUpdateEffect as i,useUnmountEffect as a}from"primereact/hooks";import{Portal as s}from"primereact/portal";import{Ripple as c}from"primereact/ripple";import{ZIndexUtils as u,DomHandler as m,ObjectUtils as p,classNames as d}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},f.apply(this,arguments)}function b(e){if(Array.isArray(e))return e}function y(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,o,i,a=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=o.call(t)).done)&&(a.push(r.value),a.length!==n);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw l}}return a}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function h(e,n){if(e){if("string"==typeof e)return v(e,n);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,n):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.")}function E(e,n){return b(e)||y(e,n)||h(e,n)||S()}var g=e.forwardRef((function(b,y){var v=E(e.useState(!1),2),h=v[0],S=v[1],w=E(e.useState(!1),2),k=w[0],C=w[1],I=e.useRef(null),O=e.useRef(null),N=e.useRef(null),x=E(l({type:"keydown",listener:function(e){27===e.which&&u.get(O.current)===u.getCurrent("modal",n.autoZIndex)&&H(e)}}),2),j=x[0],A=x[1],R=E(l({type:"click",listener:function(e){2!==e.which&&Z(e)&&H(e)}}),2),T=R[0],P=R[1],Z=function(e){return I&&I.current&&!I.current.contains(e.target)},D=function(e){b.dismissable&&b.modal&&O.current===e.target&&H(e)},H=function(e){b.onHide(),e.preventDefault()},M=function(){var e;b.onShow&&b.onShow(),!((e=document.activeElement)&&I&&I.current.contains(e))&&b.showCloseIcon&&N.current.focus(),z()},L=function(){b.modal&&m.addClass(O.current,"p-component-overlay-leave")},_=function(){u.clear(O.current),S(!1),J()},z=function(){b.closeOnEscape&&j(),b.dismissable&&!b.modal&&T(),b.blockScroll&&m.addClass(document.body,"p-overflow-hidden")},J=function(){A(),P(),b.blockScroll&&m.removeClass(document.body,"p-overflow-hidden")};e.useImperativeHandle(y,(function(){return{props:b,getElement:function(){return I.current},gteMask:function(){return O.current},getCloseIcon:function(){return N.current}}})),o((function(){b.visible&&S(!0)})),i((function(){b.visible&&!h&&S(!0),b.visible!==k&&h&&C(b.visible)})),i((function(){h&&(u.set("modal",O.current,n.autoZIndex,b.baseZIndex||n.zIndex.modal),C(!0))}),[h]),i((function(){k&&(P(),b.dismissable&&!b.modal&&T())}),[b.dismissable,b.modal,k]),a((function(){J(),O.current&&u.clear(O.current)}));var K,U,X,Y,$,q,B,F=function(){if(b.showCloseIcon){var n=b.ariaCloseLabel||t("close");return e.createElement("button",{type:"button",ref:N,className:"p-sidebar-close p-sidebar-icon p-link",onClick:H,"aria-label":n},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(c,null))}return null};return h&&(U=p.findDiffKeys(b,g.defaultProps),X=d("p-sidebar p-component",b.className,{"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple}),Y=d("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":b.modal,"p-sidebar-mask-scrollblocker":b.blockScroll,"p-sidebar-visible":h,"p-sidebar-full":b.fullScreen},(K=["left","right","top","bottom"].find((function(e){return e===b.position})))?"p-sidebar-".concat(K):"",b.maskClassName),$=F(),q=b.icons?p.getJSXElement(b.icons,b):null,B=e.createElement("div",{ref:O,style:b.maskStyle,className:Y,onMouseDown:D},e.createElement(r,{nodeRef:I,classNames:"p-sidebar",in:k,timeout:{enter:b.fullScreen?150:300,exit:b.fullScreen?150:300},options:b.transitionOptions,unmountOnExit:!0,onEntered:M,onExiting:L,onExited:_},e.createElement("div",f({ref:I,id:b.id,className:X,style:b.style},U,{role:"complementary"}),e.createElement("div",{className:"p-sidebar-header"},q,$),e.createElement("div",{className:"p-sidebar-content"},b.children)))),e.createElement(s,{element:B,appendTo:b.appendTo,visible:!0}))}));g.displayName="Sidebar",g.defaultProps={__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null};export{g as Sidebar};

package/sidebar/sidebar.js

@@ -231,6 +231,15 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
         setVisibleState(true);
       }
     }, [maskVisibleState]);
+    hooks.useUpdateEffect(function () {
+      // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+      if (visibleState) {
+        unbindDocumentClickListener();
+        if (props.dismissable && !props.modal) {
+          bindDocumentClickListener();
+        }
+      }
+    }, [props.dismissable, props.modal, visibleState]);
     hooks.useUnmountEffect(function () {
       disableDocumentSettings();
       maskRef.current && utils.ZIndexUtils.clear(maskRef.current);
@@ -256,7 +265,10 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
     };
     var createElement = function createElement() {
       var otherProps = utils.ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-      var className = utils.classNames('p-sidebar p-component', props.className);
+      var className = utils.classNames('p-sidebar p-component', props.className, {
+        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+      });
       var maskClassName = utils.classNames('p-sidebar-mask', {
         'p-component-overlay p-component-overlay-enter': props.modal,
         'p-sidebar-mask-scrollblocker': props.blockScroll,

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.sidebar=function(e,t,n,r,l,o,a,i){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(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 u=c(t),d=s(n);function f(){return f=Object.assign?Object.assign.bind():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},f.apply(this,arguments)}function p(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,l,o,a,i=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw l}}return i}}function b(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 v(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function y(){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 h(e,t){return p(e)||m(e,t)||v(e,t)||y()}var E=u.forwardRef((function(e,t){var s=h(u.useState(!1),2),c=s[0],p=s[1],m=h(u.useState(!1),2),b=m[0],v=m[1],y=u.useRef(null),S=u.useRef(null),O=u.useRef(null),g=h(l.useEventListener({type:"keydown",listener:function(e){27===e.which&&i.ZIndexUtils.get(S.current)===i.ZIndexUtils.getCurrent("modal",d.default.autoZIndex)&&U(e)}}),2),w=g[0],k=g[1],I=h(l.useEventListener({type:"click",listener:function(e){2!==e.which&&C(e)&&U(e)}}),2),j=I[0],x=I[1],C=function(e){return y&&y.current&&!y.current.contains(e.target)},N=function(t){e.dismissable&&e.modal&&S.current===t.target&&U(t)},U=function(t){e.onHide(),t.preventDefault()},Z=function(){var t;e.onShow&&e.onShow(),!((t=document.activeElement)&&y&&y.current.contains(t))&&e.showCloseIcon&&O.current.focus(),R()},P=function(){e.modal&&i.DomHandler.addClass(S.current,"p-component-overlay-leave")},D=function(){i.ZIndexUtils.clear(S.current),p(!1),A()},R=function(){e.closeOnEscape&&w(),e.dismissable&&!e.modal&&j(),e.blockScroll&&i.DomHandler.addClass(document.body,"p-overflow-hidden")},A=function(){k(),x(),e.blockScroll&&i.DomHandler.removeClass(document.body,"p-overflow-hidden")};u.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return y.current},gteMask:function(){return S.current},getCloseIcon:function(){return O.current}}})),l.useMountEffect((function(){e.visible&&p(!0)})),l.useUpdateEffect((function(){e.visible&&!c&&p(!0),e.visible!==b&&c&&v(e.visible)})),l.useUpdateEffect((function(){c&&(i.ZIndexUtils.set("modal",S.current,d.default.autoZIndex,e.baseZIndex||d.default.zIndex.modal),v(!0))}),[c]),l.useUnmountEffect((function(){A(),S.current&&i.ZIndexUtils.clear(S.current)}));var H,M,T,_,L,z,J,K=function(){if(e.showCloseIcon){var t=e.ariaCloseLabel||n.localeOption("close");return u.createElement("button",{type:"button",ref:O,className:"p-sidebar-close p-sidebar-icon p-link",onClick:U,"aria-label":t},u.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),u.createElement(a.Ripple,null))}return null};return c&&(M=i.ObjectUtils.findDiffKeys(e,E.defaultProps),T=i.classNames("p-sidebar p-component",e.className),_=i.classNames("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":e.modal,"p-sidebar-mask-scrollblocker":e.blockScroll,"p-sidebar-visible":c,"p-sidebar-full":e.fullScreen},(H=["left","right","top","bottom"].find((function(t){return t===e.position})))?"p-sidebar-".concat(H):"",e.maskClassName),L=K(),z=e.icons?i.ObjectUtils.getJSXElement(e.icons,e):null,J=u.createElement("div",{ref:S,style:e.maskStyle,className:_,onMouseDown:N},u.createElement(r.CSSTransition,{nodeRef:y,classNames:"p-sidebar",in:b,timeout:{enter:e.fullScreen?150:300,exit:e.fullScreen?150:300},options:e.transitionOptions,unmountOnExit:!0,onEntered:Z,onExiting:P,onExited:D},u.createElement("div",f({ref:y,id:e.id,className:T,style:e.style},M,{role:"complementary"}),u.createElement("div",{className:"p-sidebar-header"},z,L),u.createElement("div",{className:"p-sidebar-content"},e.children)))),u.createElement(o.Portal,{element:J,appendTo:e.appendTo,visible:!0}))}));return E.displayName="Sidebar",E.defaultProps={__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},e.Sidebar=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.csstransition,primereact.hooks,primereact.portal,primereact.ripple,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.sidebar=function(e,t,n,r,l,a,i,o){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(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 u=c(t),d=s(n);function f(){return f=Object.assign?Object.assign.bind():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},f.apply(this,arguments)}function p(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,l,a,i,o=[],s=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=a.call(n)).done)&&(o.push(r.value),o.length!==t);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw l}}return o}}function b(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 y(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function v(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e,t){return p(e)||m(e,t)||y(e,t)||v()}var E=u.forwardRef((function(e,t){var s=h(u.useState(!1),2),c=s[0],p=s[1],m=h(u.useState(!1),2),b=m[0],y=m[1],v=u.useRef(null),S=u.useRef(null),O=u.useRef(null),g=h(l.useEventListener({type:"keydown",listener:function(e){27===e.which&&o.ZIndexUtils.get(S.current)===o.ZIndexUtils.getCurrent("modal",d.default.autoZIndex)&&U(e)}}),2),w=g[0],k=g[1],I=h(l.useEventListener({type:"click",listener:function(e){2!==e.which&&C(e)&&U(e)}}),2),j=I[0],x=I[1],C=function(e){return v&&v.current&&!v.current.contains(e.target)},N=function(t){e.dismissable&&e.modal&&S.current===t.target&&U(t)},U=function(t){e.onHide(),t.preventDefault()},Z=function(){var t;e.onShow&&e.onShow(),!((t=document.activeElement)&&v&&v.current.contains(t))&&e.showCloseIcon&&O.current.focus(),R()},P=function(){e.modal&&o.DomHandler.addClass(S.current,"p-component-overlay-leave")},D=function(){o.ZIndexUtils.clear(S.current),p(!1),A()},R=function(){e.closeOnEscape&&w(),e.dismissable&&!e.modal&&j(),e.blockScroll&&o.DomHandler.addClass(document.body,"p-overflow-hidden")},A=function(){k(),x(),e.blockScroll&&o.DomHandler.removeClass(document.body,"p-overflow-hidden")};u.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return v.current},gteMask:function(){return S.current},getCloseIcon:function(){return O.current}}})),l.useMountEffect((function(){e.visible&&p(!0)})),l.useUpdateEffect((function(){e.visible&&!c&&p(!0),e.visible!==b&&c&&y(e.visible)})),l.useUpdateEffect((function(){c&&(o.ZIndexUtils.set("modal",S.current,d.default.autoZIndex,e.baseZIndex||d.default.zIndex.modal),y(!0))}),[c]),l.useUpdateEffect((function(){b&&(x(),e.dismissable&&!e.modal&&j())}),[e.dismissable,e.modal,b]),l.useUnmountEffect((function(){A(),S.current&&o.ZIndexUtils.clear(S.current)}));var H,M,T,_,L,z,J,K=function(){if(e.showCloseIcon){var t=e.ariaCloseLabel||n.localeOption("close");return u.createElement("button",{type:"button",ref:O,className:"p-sidebar-close p-sidebar-icon p-link",onClick:U,"aria-label":t},u.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),u.createElement(i.Ripple,null))}return null};return c&&(M=o.ObjectUtils.findDiffKeys(e,E.defaultProps),T=o.classNames("p-sidebar p-component",e.className,{"p-input-filled":"filled"===d.default.inputStyle,"p-ripple-disabled":!1===d.default.ripple}),_=o.classNames("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":e.modal,"p-sidebar-mask-scrollblocker":e.blockScroll,"p-sidebar-visible":c,"p-sidebar-full":e.fullScreen},(H=["left","right","top","bottom"].find((function(t){return t===e.position})))?"p-sidebar-".concat(H):"",e.maskClassName),L=K(),z=e.icons?o.ObjectUtils.getJSXElement(e.icons,e):null,J=u.createElement("div",{ref:S,style:e.maskStyle,className:_,onMouseDown:N},u.createElement(r.CSSTransition,{nodeRef:v,classNames:"p-sidebar",in:b,timeout:{enter:e.fullScreen?150:300,exit:e.fullScreen?150:300},options:e.transitionOptions,unmountOnExit:!0,onEntered:Z,onExiting:P,onExited:D},u.createElement("div",f({ref:v,id:e.id,className:T,style:e.style},M,{role:"complementary"}),u.createElement("div",{className:"p-sidebar-header"},z,L),u.createElement("div",{className:"p-sidebar-content"},e.children)))),u.createElement(a.Portal,{element:J,appendTo:e.appendTo,visible:!0}))}));return E.displayName="Sidebar",E.defaultProps={__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},e.Sidebar=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.csstransition,primereact.hooks,primereact.portal,primereact.ripple,primereact.utils);

package/skeleton/skeleton.d.ts

@@ -1,19 +1,69 @@
+/**
+ *
+ * Skeleton is a placeholder to display instead of the actual content.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/skeleton/)
+ *
+ * @module skeleton
+ *
+ */
 import * as React from 'react';
 
-type SkeletonShapeType = 'rectangle' | 'circle';
-
-type SkeletonAnimationType = 'wave' | 'none';
-
+/**
+ * Defines valid properties in Skeleton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface SkeletonProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    shape?: SkeletonShapeType;
-    size?: string;
-    width?: string;
-    height?: string;
-    borderRadius?: string;
-    animation?: SkeletonAnimationType;
-    children?: React.ReactNode;
+    /**
+     * It specifies an alternate text for an image, if the image cannot be displayed.
+     * @defaultValue rectangle
+     */
+    shape?: 'rectangle' | 'circle' | undefined;
+    /**
+     * Size of the Circle or Square.
+     */
+    size?: string | undefined;
+    /**
+     * Width of the element.
+     * @defaultValue 100%
+     */
+    width?: string | undefined;
+    /**
+     * Height of the element.
+     * @defaultValue 1rem
+     */
+    height?: string | undefined;
+    /**
+     * Border radius of the element, defaults to value from theme.
+     */
+    borderRadius?: string | undefined;
+    /**
+     * Type of the animation, valid options are "wave" and "none".
+     * @defaultValue wave
+     */
+    animation?: 'wave' | 'none' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Skeleton**
+ *
+ * _Skeleton is a placeholder to display instead of the actual content._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/skeleton/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Skeleton extends React.Component<SkeletonProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/slidemenu/slidemenu.d.ts

@@ -1,37 +1,151 @@
+/**
+ *
+ * SlideMenu displays submenus with a slide animation.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/slidemenu/)
+ *
+ * @module slidemenu
+ *
+ */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { MenuItem } from '../menuitem';
 
-type SlideMenuAppendToType = 'self' | HTMLElement | undefined | null;
-
-interface SlideMenuNavigateParams {
+/**
+ * Custom navigate event
+ * @see {@link SlideMenuProps.onNavigate}
+ * @event
+ */
+interface SlideMenuNavigateEvent {
+    /**
+     * Level of current displayed menu
+     */
     level: number;
 }
 
+/**
+ * Defines valid properties in SlideMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    appendTo?: SlideMenuAppendToType;
-    autoZIndex?: boolean;
-    backLabel?: string;
-    baseZIndex?: number;
-    children?: React.ReactNode;
-    easing?: string;
-    effectDuration?: number;
-    menuWidth?: number;
-    model?: MenuItem[];
-    popup?: boolean;
-    transitionOptions?: CSSTransitionProps;
-    viewportHeight?: number;
-    onShow?(e: React.SyntheticEvent): void;
-    onHide?(e: React.SyntheticEvent): void;
-    onNavigate?(e: SlideMenuNavigateParams): void;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Label of element to navigate back.
+     * @defaultValue Back
+     */
+    backLabel?: string | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Easing animation to use for sliding.
+     * @defaultValue ease-out
+     */
+    easing?: string | undefined;
+    /**
+     * Duration of the sliding animation in milliseconds.
+     * @defaultValue 250
+     */
+    effectDuration?: number | undefined;
+    /**
+     * Width of the submenus.
+     * @defaultValue 190
+     */
+    menuWidth?: number | undefined;
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines if menu would displayed as a popup.
+     * @defaultValue false
+     */
+    popup?: boolean | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
+     * @defaultValue 175
+     */
+    viewportHeight?: number | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a menu is navigated to.
+     * @param {SlideMenuNavigateEvent} event - Navigate event.
+     */
+    onNavigate?(event: SlideMenuNavigateEvent): void;
 }
 
+/**
+ * **PrimeReact - SlideMenu**
+ *
+ * _SlideMenu displays submenus with a slide animation._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/slidemenu/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class SlideMenu extends React.Component<SlideMenuProps, any> {
+    /**
+     * Displays the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
     public show(event: React.SyntheticEvent): void;
+    /**
+     * Hides the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
     public hide(event: React.SyntheticEvent): void;
+    /**
+     * Toggles the visibility of the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
     public toggle(event: React.SyntheticEvent): void;
+    /**
+     * Navigates the slide menu to this specific level.
+     * @param {number} level - Number of the menu to set
+     */
     public setLevelState(level: number): void;
+    /**
+     * Navigates the slide menu forward.
+     */
     public navigateForward(): void;
+    /**
+     * Navigates the slide menu backwards.
+     */
     public navigateBack(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/slider/slider.d.ts

@@ -1,30 +1,113 @@
+/**
+ *
+ * Slider is a component to provide input with a drag handle.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/slider/)
+ *
+ * @module slider
+ *
+ */
 import * as React from 'react';
 
-type SliderOrientationType = 'horizontal' | 'vertical';
-
-type SliderValueType = number | [number, number];
-
-interface SliderChangeParams {
+/**
+ * Custom change event.
+ * @see {@link SliderProps.onChange}
+ * @event
+ */
+interface SliderChangeEvent {
+    /**
+     * Slide event
+     */
     originalEvent: React.SyntheticEvent;
-    value: SliderValueType;
+    /**
+     * New value
+     */
+    value: number | [number, number];
 }
 
-interface SliderSlideEndParams extends SliderChangeParams {}
+/**
+ * Custom slide event.
+ * @see {@link SliderProps.onSlideEnd}
+ * @extends {SliderChangeEvent}
+ * @event
+ */
+interface SliderSlideEndEvent extends SliderChangeEvent {}
 
+/**
+ * Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
-    value?: SliderValueType;
-    min?: number;
-    max?: number;
-    orientation?: SliderOrientationType;
-    step?: number;
-    range?: boolean;
-    disabled?: boolean;
-    ariaLabelledBy?: string;
-    onChange?(e: SliderChangeParams): void;
-    onSlideEnd?(e: SliderSlideEndParams): void;
-    children?: React.ReactNode;
+    /**
+     * Value of the component.
+     * @defaultValue 0
+     */
+    value?: number | [number, number] | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Orientation of the slider, valid values are horizontal and vertical.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * When speficed, allows two boundary values to be picked.
+     * @defaultValue false
+     */
+    range?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke on value change via slide.
+     * @param {SliderChangeEvent} event - Custom change event
+     */
+    onChange?(event: SliderChangeEvent): void;
+    /**
+     * Callback to invoke when slide ends.
+     * @param {SliderSlideEndEvent} event - Custom slide event
+     */
+    onSlideEnd?(event: SliderSlideEndEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Slider**
+ *
+ * _Slider is a component to provide input with a drag handle._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/slider/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Slider extends React.Component<SliderProps, any> {
+    /**
+     * Returns the reference of virtualScroller's container.
+     */
     public getElement(): HTMLDivElement;
 }