primereact 8.7.2 → 9.0.0-beta.1

package/galleria/galleria.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/csstransition"),a=require("primereact/hooks"),r=require("primereact/portal"),i=require("primereact/ripple"),l=require("primereact/utils");function o(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 a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=c(e),s=o(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},m.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,i=[],l=!0,o=!1;try{for(n=n.call(e);!(l=(a=n.next()).done)&&(i.push(a.value),!t||i.length!==t);l=!0);}catch(e){o=!0,r=e}finally{try{l||null==n.return||n.return()}finally{if(o)throw r}}return i}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function f(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return d(e)||v(e,t)||f(e,t)||h()}var I=u.memo(u.forwardRef((function(e,t){var n=function(){e.slideShowActive&&e.stopSlideShow&&e.stopSlideShow()},r=function(t){n(),e.onActiveItemChange({index:e.circular&&0===e.activeItemIndex?e.value.length-1:0!==e.activeItemIndex?e.activeItemIndex-1:0}),t&&t.cancelable&&t.preventDefault()},o=function(t){n(),e.onActiveItemChange({index:e.circular&&e.value.length-1===e.activeItemIndex?0:e.activeItemIndex+1}),t&&t.cancelable&&t.preventDefault()},c=function(t){n(),e.onActiveItemChange({index:t})},s=function(t){e.changeItemOnIndicatorHover&&(n(),e.onActiveItemChange({index:t}))},m=function(t,a){13===t.which&&(n(),e.onActiveItemChange({index:a}))};a.useMountEffect((function(){e.autoPlay&&e.startSlideShow()}));var d=function(t){var n="p-galleria-indicator-"+t,a=l.classNames("p-galleria-indicator",{"p-highlight":e.activeItemIndex===t}),r=e.indicator&&e.indicator(t);return r||(r=u.createElement("button",{type:"button",tabIndex:-1,className:"p-link"},u.createElement(i.Ripple,null))),u.createElement("li",{className:a,key:n,tabIndex:0,onClick:function(){return c(t)},onMouseEnter:function(){return s(t)},onKeyDown:function(e){return m(e,t)}},r)},v=e.itemTemplate&&e.itemTemplate(e.value[e.activeItemIndex]),p=function(){if(e.showItemNavigators){var t=!e.circular&&0===e.activeItemIndex,n=l.classNames("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":t});return u.createElement("button",{type:"button",className:n,onClick:r,disabled:t},u.createElement("span",{className:"p-galleria-item-prev-icon pi pi-chevron-left"}),u.createElement(i.Ripple,null))}return null}(),f=function(){if(e.showItemNavigators){var t=!e.circular&&e.activeItemIndex===e.value.length-1,n=l.classNames("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":t});return u.createElement("button",{type:"button",className:n,onClick:o,disabled:t},u.createElement("span",{className:"p-galleria-item-next-icon pi pi-chevron-right"}),u.createElement(i.Ripple,null))}return null}(),h=function(){if(e.caption){var t=e.caption(e.value[e.activeItemIndex]);return u.createElement("div",{className:"p-galleria-caption"},t)}return null}(),g=function(){if(e.showIndicators){for(var t=l.classNames("p-galleria-indicators p-reset",e.indicatorsContentClassName),n=[],a=0;a<e.value.length;a++)n.push(d(a));return u.createElement("ul",{className:t},n)}return null}();return u.createElement("div",{ref:t,className:"p-galleria-item-wrapper"},u.createElement("div",{className:"p-galleria-item-container"},p,u.createElement("div",{className:"p-galleria-item"},v),f,h),g)})));function b(e){if(Array.isArray(e))return p(e)}function x(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}I.displayName="GalleriaItem";var w=u.memo((function(e){var t=e.active?0:null,n=e.template&&e.template(e.item),a=l.classNames("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":e.current,"p-galleria-thumbnail-item-active":e.active,"p-galleria-thumbnail-item-start":e.start,"p-galleria-thumbnail-item-end":e.end},e.className);return u.createElement("div",{className:a},u.createElement("div",{className:"p-galleria-thumbnail-item-content",tabIndex:t,onClick:function(t){e.onItemClick({originalEvent:t,index:e.index})},onKeyDown:function(t){13===t.which&&e.onItemClick({originalEvent:t,index:e.index})}},n))})),E=u.memo(u.forwardRef((function(e,t){var n=g(u.useState(e.numVisible),2),r=n[0],o=n[1],c=g(u.useState(0),2),m=c[0],d=c[1],v=u.useRef(null),p=u.useRef(null),h=u.useRef(""),I=u.useRef(null),E=u.useRef(null),N=a.usePrevious(r),S=a.usePrevious(e.activeItemIndex),C=g(a.useResizeListener({listener:function(){G()},when:e.responsiveOptions}),1)[0],O=function(t){var n=m+t;t<0&&-1*n+r>e.value.length-1?n=r-e.value.length:t>0&&n>0&&(n=0),e.circular&&(t<0&&e.value.length-1===e.activeItemIndex?n=0:t>0&&0===e.activeItemIndex&&(n=r-e.value.length)),v.current&&(l.DomHandler.removeClass(v.current,"p-items-hidden"),v.current.style.transform=e.isVertical?"translate3d(0, ".concat(n*(100/r),"%, 0)"):"translate3d(".concat(n*(100/r),"%, 0, 0)"),v.current.style.transition="transform 500ms ease 0s"),d(n)},T=function(){e.slideShowActive&&e.stopSlideShow&&e.stopSlideShow()},A=function(){var e=Math.floor(r/2);return r%2?e:e-1},P=function(t){T();var n=0!==e.activeItemIndex?e.activeItemIndex-1:0;r-(n+m)-1>A()&&(-1*m!=0||e.circular)&&O(1),e.onActiveItemChange({index:e.circular&&0===e.activeItemIndex?e.value.length-1:n}),t.cancelable&&t.preventDefault()},k=function(t){T();var n=e.activeItemIndex+1;n+m>A()&&(-1*m<U()-1||e.circular)&&O(-1),e.onActiveItemChange({index:e.circular&&e.value.length-1===e.activeItemIndex?0:n}),t.cancelable&&t.preventDefault()},H=function(t){T();var n=t.index;if(n!==e.activeItemIndex){var a=n+m,i=0;n<e.activeItemIndex?(i=r-a-1-A())>0&&-1*m!=0&&O(i):(i=A()-a)<0&&-1*m<U()-1&&O(i),e.onActiveItemChange({index:n})}},V=function(e){v.current&&"transform"===e.propertyName&&(l.DomHandler.addClass(v.current,"p-items-hidden"),v.current.style.transition="")},R=function(e){var t=e.changedTouches[0];p.current={x:t.pageX,y:t.pageY}},j=function(e){e.cancelable&&e.preventDefault()},D=function(t){var n=t.changedTouches[0];M(t,e.isVertical?n.pageY-p.current.y:n.pageX-p.current.x)},M=function(e,t){t<0?k(e):P(e)},U=function(){return e.value.length>r?e.value.length-r+1:0},q=function(){I.current||(I.current=l.DomHandler.createInlineStyle(s.default.nonce));var t,n="\n            .p-galleria-thumbnail-items[".concat(h.current,"] .p-galleria-thumbnail-item {\n                flex: 1 0 ").concat(100/r,"%\n            }\n        ");if(e.responsiveOptions){E.current=b(t=e.responsiveOptions)||x(t)||f(t)||y(),E.current.sort((function(e,t){return l.ObjectUtils.sort(e.breakpoint,t.breakpoint,-1,s.default.locale,s.default.nullSortOrder)}));for(var a=0;a<E.current.length;a++){var i=E.current[a];n+="\n                    @media screen and (max-width: ".concat(i.breakpoint,") {\n                        .p-galleria-thumbnail-items[").concat(h.current,"] .p-galleria-thumbnail-item {\n                            flex: 1 0 ").concat(100/i.numVisible,"%\n                        }\n                    }\n                ")}}I.current.innerHTML=n},G=function(){if(v.current&&E.current){for(var t=window.innerWidth,n={numVisible:e.numVisible},a=0;a<E.current.length;a++){var i=E.current[a];parseInt(i.breakpoint,10)>=t&&(n=i)}r!==n.numVisible&&o(n.numVisible)}};a.useMountEffect((function(){v.current&&(h.current=l.UniqueComponentId(),v.current.setAttribute(h.current,"")),q(),G(),C()})),a.useUpdateEffect((function(){var t=m;N===r&&S===e.activeItemIndex||((t=e.activeItemIndex<=A()?0:e.value.length-r+A()<e.activeItemIndex?r-e.value.length:e.value.length-r<e.activeItemIndex&&r%2==0?-1*e.activeItemIndex+A()+1:-1*e.activeItemIndex+A())!==m&&d(t),v.current.style.transform=e.isVertical?"translate3d(0, ".concat(t*(100/r),"%, 0)"):"translate3d(".concat(t*(100/r),"%, 0, 0)"),S!==e.activeItemIndex&&(l.DomHandler.removeClass(v.current,"p-items-hidden"),v.current.style.transition="transform 500ms ease 0s"))}));var Z,_,z,K,Y=function(){if(e.showThumbnailNavigators){var t=!e.circular&&0===e.activeItemIndex||e.value.length<=r,n=l.classNames("p-galleria-thumbnail-prev p-link",{"p-disabled":t}),a=l.classNames("p-galleria-thumbnail-prev-icon pi",{"pi-chevron-left":!e.isVertical,"pi-chevron-up":e.isVertical});return u.createElement("button",{className:n,onClick:P,disabled:t},u.createElement("span",{className:a}),u.createElement(i.Ripple,null))}return null},L=function(){if(e.showThumbnailNavigators){var t=!e.circular&&e.activeItemIndex===e.value.length-1||e.value.length<=r,n=l.classNames("p-galleria-thumbnail-next p-link",{"p-disabled":t}),a=l.classNames("p-galleria-thumbnail-next-icon pi",{"pi-chevron-right":!e.isVertical,"pi-chevron-down":e.isVertical});return u.createElement("button",{className:n,onClick:k,disabled:t},u.createElement("span",{className:a}),u.createElement(i.Ripple,null))}return null},X=(Z=e.value.map((function(t,n){var a=-1*m,i=a+r-1;return u.createElement(w,{key:n,index:n,template:e.itemTemplate,item:t,active:a<=n&&i>=n,start:a===n,end:i===n,onItemClick:H,current:e.activeItemIndex===n})})),_=e.isVertical?e.contentHeight:"",z=Y(),K=L(),u.createElement("div",{className:"p-galleria-thumbnail-container"},z,u.createElement("div",{className:"p-galleria-thumbnail-items-container",style:{height:_}},u.createElement("div",{ref:v,className:"p-galleria-thumbnail-items",onTransitionEnd:V,onTouchStart:R,onTouchMove:j,onTouchEnd:D},Z)),K));return u.createElement("div",{className:"p-galleria-thumbnail-wrapper"},X)})));w.displayName="GalleriaThumbnailItem",E.displayName="GalleriaThumbnails";var N=u.memo(u.forwardRef((function(e,o){var c=g(u.useState(!1),2),d=c[0],v=c[1],p=g(u.useState(e.numVisible),2),f=p[0],h=p[1],b=g(u.useState(!1),2),x=b[0],y=b[1],w=g(u.useState(e.activeIndex),2),S=w[0],C=w[1],O=u.useRef(null),T=u.useRef(null),A=u.useRef(null),P=e.onItemChange?e.activeIndex:S,k="left"===e.thumbnailsPosition||"right"===e.thumbnailsPosition;a.useInterval((function(){H({index:e.circular&&e.value.length-1===P?0:P+1})}),e.transitionInterval,x);var H=function(t){e.onItemChange?e.onItemChange(t):C(t.index)},V=function(){v(!0)},R=function(){v(!1)},j=function(){l.DomHandler.addClass(document.body,"p-overflow-hidden")},D=function(){l.ZIndexUtils.set("modal",A.current,s.default.autoZIndex,e.baseZIndex||s.default.zIndex.modal),l.DomHandler.addMultipleClasses(A.current,"p-component-overlay p-component-overlay-enter")},M=function(){e.onShow&&e.onShow()},U=function(){l.DomHandler.removeClass(document.body,"p-overflow-hidden"),l.DomHandler.addClass(A.current,"p-component-overlay-leave")},q=function(){l.ZIndexUtils.clear(A.current),e.onHide&&e.onHide()},G=function(){return x},Z=function(){y(!0)},_=function(){y(!1)},z=function(e,t){var n=["top","left","bottom","right"].find((function(e){return e===t}));return n?"".concat(e,"-").concat(n):""};u.useEffect((function(){e.value&&e.value.length<f&&h(e.value.length)}),[e.value,f]),u.useEffect((function(){h(e.numVisible)}),[e.numVisible]),a.useUnmountEffect((function(){x&&_(),l.ZIndexUtils.clear(A.current)})),u.useImperativeHandle(o,(function(){return{props:e,show:V,hide:R,isAutoPlayActive:G,startSlideShow:Z,stopSlideShow:_,getElement:function(){return O.current},getPreviewContent:function(){return T.current}}}));return l.ObjectUtils.isNotEmpty(e.value)&&function(){var a,o,c,s,v,p,h,g=(a=l.ObjectUtils.findDiffKeys(e,N.defaultProps),o=e.showThumbnails&&z("p-galleria-thumbnails",e.thumbnailsPosition),c=e.showIndicators&&z("p-galleria-indicators",e.indicatorsPosition),s=l.classNames("p-galleria p-component",e.className,{"p-galleria-fullscreen":e.fullScreen,"p-galleria-indicator-onitem":e.showIndicatorsOnItem,"p-galleria-item-nav-onhover":e.showItemNavigatorsOnHover&&!e.fullScreen},o,c),v=e.fullScreen&&u.createElement("button",{type:"button",className:"p-galleria-close p-link","aria-label":t.localeOption("close"),onClick:R},u.createElement("span",{className:"p-galleria-close-icon pi pi-times","aria-hidden":"true"}),u.createElement(i.Ripple,null)),p=e.header?u.createElement("div",{className:"p-galleria-header"},e.header):null,h=e.footer?u.createElement("div",{className:"p-galleria-footer"},e.footer):null,u.createElement("div",m({ref:O,id:e.id,className:s,style:e.style},a),v,p,u.createElement("div",{className:"p-galleria-content"},u.createElement(I,{ref:T,value:e.value,activeItemIndex:P,onActiveItemChange:H,itemTemplate:e.item,circular:e.circular,caption:e.caption,showIndicators:e.showIndicators,changeItemOnIndicatorHover:e.changeItemOnIndicatorHover,indicator:e.indicator,showItemNavigators:e.showItemNavigators,autoPlay:e.autoPlay,slideShowActive:x,startSlideShow:Z,stopSlideShow:_}),e.showThumbnails&&u.createElement(E,{value:e.value,activeItemIndex:P,onActiveItemChange:H,itemTemplate:e.thumbnail,numVisible:f,responsiveOptions:e.responsiveOptions,circular:e.circular,isVertical:k,contentHeight:e.verticalThumbnailViewPortHeight,showThumbnailNavigators:e.showThumbnailNavigators,autoPlay:e.autoPlay,slideShowActive:x,stopSlideShow:_})),h));if(e.fullScreen){var b=l.classNames("p-galleria-mask",{"p-galleria-visible":d});return u.createElement(r.Portal,{element:u.createElement("div",{ref:A,className:b},u.createElement(n.CSSTransition,{nodeRef:O,classNames:"p-galleria",in:d,timeout:{enter:150,exit:150},options:e.transitionOptions,unmountOnExit:!0,onEnter:j,onEntering:D,onEntered:M,onExit:U,onExited:q},g))})}return g}()})));N.displayName="Galleria",N.defaultProps={__TYPE:"Galleria",id:null,value:null,activeIndex:0,fullScreen:!1,item:null,thumbnail:null,indicator:null,caption:null,className:null,style:null,header:null,footer:null,numVisible:3,responsiveOptions:null,showItemNavigators:!1,showThumbnailNavigators:!0,showItemNavigatorsOnHover:!1,changeItemOnIndicatorHover:!1,circular:!1,autoPlay:!1,transitionInterval:4e3,showThumbnails:!0,thumbnailsPosition:"bottom",verticalThumbnailViewPortHeight:"300px",showIndicators:!1,showIndicatorsOnItem:!1,indicatorsPosition:"bottom",baseZIndex:0,transitionOptions:null,onItemChange:null},exports.Galleria=N;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/csstransition"),a=require("primereact/hooks"),r=require("primereact/portal"),i=require("primereact/ripple"),l=require("primereact/utils");function o(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 a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=c(e),s=o(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},m.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,i,l,o=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(a=i.call(n)).done)&&(o.push(a.value),o.length!==t);c=!0);}catch(e){u=!0,r=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return o}}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function f(e,t){if(e){if("string"==typeof e)return v(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return d(e)||p(e,t)||f(e,t)||h()}var I=u.memo(u.forwardRef((function(e,t){var n=function(){e.slideShowActive&&e.stopSlideShow&&e.stopSlideShow()},r=function(t){n(),e.onActiveItemChange({index:e.circular&&0===e.activeItemIndex?e.value.length-1:0!==e.activeItemIndex?e.activeItemIndex-1:0}),t&&t.cancelable&&t.preventDefault()},o=function(t){n(),e.onActiveItemChange({index:e.circular&&e.value.length-1===e.activeItemIndex?0:e.activeItemIndex+1}),t&&t.cancelable&&t.preventDefault()},c=function(t){n(),e.onActiveItemChange({index:t})},s=function(t){e.changeItemOnIndicatorHover&&(n(),e.onActiveItemChange({index:t}))},m=function(t,a){13===t.which&&(n(),e.onActiveItemChange({index:a}))};a.useMountEffect((function(){e.autoPlay&&e.startSlideShow()}));var d=function(t){var n="p-galleria-indicator-"+t,a=l.classNames("p-galleria-indicator",{"p-highlight":e.activeItemIndex===t}),r=e.indicator&&e.indicator(t);return r||(r=u.createElement("button",{type:"button",tabIndex:-1,className:"p-link"},u.createElement(i.Ripple,null))),u.createElement("li",{className:a,key:n,tabIndex:0,onClick:function(){return c(t)},onMouseEnter:function(){return s(t)},onKeyDown:function(e){return m(e,t)}},r)},p=e.itemTemplate&&e.itemTemplate(e.value[e.activeItemIndex]),v=function(){if(e.showItemNavigators){var t=!e.circular&&0===e.activeItemIndex,n=l.classNames("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":t});return u.createElement("button",{type:"button",className:n,onClick:r,disabled:t},u.createElement("span",{className:"p-galleria-item-prev-icon pi pi-chevron-left"}),u.createElement(i.Ripple,null))}return null}(),f=function(){if(e.showItemNavigators){var t=!e.circular&&e.activeItemIndex===e.value.length-1,n=l.classNames("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":t});return u.createElement("button",{type:"button",className:n,onClick:o,disabled:t},u.createElement("span",{className:"p-galleria-item-next-icon pi pi-chevron-right"}),u.createElement(i.Ripple,null))}return null}(),h=function(){if(e.caption){var t=e.caption(e.value[e.activeItemIndex]);return u.createElement("div",{className:"p-galleria-caption"},t)}return null}(),g=function(){if(e.showIndicators){for(var t=l.classNames("p-galleria-indicators p-reset",e.indicatorsContentClassName),n=[],a=0;a<e.value.length;a++)n.push(d(a));return u.createElement("ul",{className:t},n)}return null}();return u.createElement("div",{ref:t,className:"p-galleria-item-wrapper"},u.createElement("div",{className:"p-galleria-item-container"},v,u.createElement("div",{className:"p-galleria-item"},p),f,h),g)})));function b(e){if(Array.isArray(e))return v(e)}function x(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}I.displayName="GalleriaItem";var w=u.memo((function(e){var t=e.active?0:null,n=e.template&&e.template(e.item),a=l.classNames("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":e.current,"p-galleria-thumbnail-item-active":e.active,"p-galleria-thumbnail-item-start":e.start,"p-galleria-thumbnail-item-end":e.end},e.className);return u.createElement("div",{className:a},u.createElement("div",{className:"p-galleria-thumbnail-item-content",tabIndex:t,onClick:function(t){e.onItemClick({originalEvent:t,index:e.index})},onKeyDown:function(t){13===t.which&&e.onItemClick({originalEvent:t,index:e.index})}},n))})),E=u.memo(u.forwardRef((function(e,t){var n=g(u.useState(e.numVisible),2),r=n[0],o=n[1],c=g(u.useState(0),2),m=c[0],d=c[1],p=u.useRef(null),v=u.useRef(null),h=u.useRef(""),I=u.useRef(null),E=u.useRef(null),N=a.usePrevious(r),S=a.usePrevious(e.activeItemIndex),C=g(a.useResizeListener({listener:function(){G()},when:e.responsiveOptions}),1)[0],O=function(t){var n=m+t;t<0&&-1*n+r>e.value.length-1?n=r-e.value.length:t>0&&n>0&&(n=0),e.circular&&(t<0&&e.value.length-1===e.activeItemIndex?n=0:t>0&&0===e.activeItemIndex&&(n=r-e.value.length)),p.current&&(l.DomHandler.removeClass(p.current,"p-items-hidden"),p.current.style.transform=e.isVertical?"translate3d(0, ".concat(n*(100/r),"%, 0)"):"translate3d(".concat(n*(100/r),"%, 0, 0)"),p.current.style.transition="transform 500ms ease 0s"),d(n)},T=function(){e.slideShowActive&&e.stopSlideShow&&e.stopSlideShow()},A=function(){var e=Math.floor(r/2);return r%2?e:e-1},P=function(t){T();var n=0!==e.activeItemIndex?e.activeItemIndex-1:0;r-(n+m)-1>A()&&(-1*m!=0||e.circular)&&O(1),e.onActiveItemChange({index:e.circular&&0===e.activeItemIndex?e.value.length-1:n}),t.cancelable&&t.preventDefault()},k=function(t){T();var n=e.activeItemIndex+1;n+m>A()&&(-1*m<U()-1||e.circular)&&O(-1),e.onActiveItemChange({index:e.circular&&e.value.length-1===e.activeItemIndex?0:n}),t.cancelable&&t.preventDefault()},H=function(t){T();var n=t.index;if(n!==e.activeItemIndex){var a=n+m,i=0;n<e.activeItemIndex?(i=r-a-1-A())>0&&-1*m!=0&&O(i):(i=A()-a)<0&&-1*m<U()-1&&O(i),e.onActiveItemChange({index:n})}},V=function(e){p.current&&"transform"===e.propertyName&&(l.DomHandler.addClass(p.current,"p-items-hidden"),p.current.style.transition="")},j=function(e){var t=e.changedTouches[0];v.current={x:t.pageX,y:t.pageY}},R=function(e){e.cancelable&&e.preventDefault()},D=function(t){var n=t.changedTouches[0];M(t,e.isVertical?n.pageY-v.current.y:n.pageX-v.current.x)},M=function(e,t){t<0?k(e):P(e)},U=function(){return e.value.length>r?e.value.length-r+1:0},q=function(){I.current||(I.current=l.DomHandler.createInlineStyle(s.default.nonce));var t,n="\n            .p-galleria-thumbnail-items[".concat(h.current,"] .p-galleria-thumbnail-item {\n                flex: 1 0 ").concat(100/r,"%\n            }\n        ");if(e.responsiveOptions){E.current=b(t=e.responsiveOptions)||x(t)||f(t)||y(),E.current.sort((function(e,t){return l.ObjectUtils.sort(e.breakpoint,t.breakpoint,-1,s.default.locale,s.default.nullSortOrder)}));for(var a=0;a<E.current.length;a++){var i=E.current[a];n+="\n                    @media screen and (max-width: ".concat(i.breakpoint,") {\n                        .p-galleria-thumbnail-items[").concat(h.current,"] .p-galleria-thumbnail-item {\n                            flex: 1 0 ").concat(100/i.numVisible,"%\n                        }\n                    }\n                ")}}I.current.innerHTML=n},G=function(){if(p.current&&E.current){for(var t=window.innerWidth,n={numVisible:e.numVisible},a=0;a<E.current.length;a++){var i=E.current[a];parseInt(i.breakpoint,10)>=t&&(n=i)}r!==n.numVisible&&o(n.numVisible)}};a.useMountEffect((function(){p.current&&(h.current=l.UniqueComponentId(),p.current.setAttribute(h.current,"")),q(),G(),C()})),a.useUpdateEffect((function(){var t=m;N===r&&S===e.activeItemIndex||((t=e.activeItemIndex<=A()?0:e.value.length-r+A()<e.activeItemIndex?r-e.value.length:e.value.length-r<e.activeItemIndex&&r%2==0?-1*e.activeItemIndex+A()+1:-1*e.activeItemIndex+A())!==m&&d(t),p.current.style.transform=e.isVertical?"translate3d(0, ".concat(t*(100/r),"%, 0)"):"translate3d(".concat(t*(100/r),"%, 0, 0)"),S!==e.activeItemIndex&&(l.DomHandler.removeClass(p.current,"p-items-hidden"),p.current.style.transition="transform 500ms ease 0s"))}));var Z,_,z,K,Y=function(){if(e.showThumbnailNavigators){var t=!e.circular&&0===e.activeItemIndex||e.value.length<=r,n=l.classNames("p-galleria-thumbnail-prev p-link",{"p-disabled":t}),a=l.classNames("p-galleria-thumbnail-prev-icon pi",{"pi-chevron-left":!e.isVertical,"pi-chevron-up":e.isVertical});return u.createElement("button",{className:n,onClick:P,disabled:t},u.createElement("span",{className:a}),u.createElement(i.Ripple,null))}return null},L=function(){if(e.showThumbnailNavigators){var t=!e.circular&&e.activeItemIndex===e.value.length-1||e.value.length<=r,n=l.classNames("p-galleria-thumbnail-next p-link",{"p-disabled":t}),a=l.classNames("p-galleria-thumbnail-next-icon pi",{"pi-chevron-right":!e.isVertical,"pi-chevron-down":e.isVertical});return u.createElement("button",{className:n,onClick:k,disabled:t},u.createElement("span",{className:a}),u.createElement(i.Ripple,null))}return null},X=(Z=e.value.map((function(t,n){var a=-1*m,i=a+r-1;return u.createElement(w,{key:n,index:n,template:e.itemTemplate,item:t,active:a<=n&&i>=n,start:a===n,end:i===n,onItemClick:H,current:e.activeItemIndex===n})})),_=e.isVertical?e.contentHeight:"",z=Y(),K=L(),u.createElement("div",{className:"p-galleria-thumbnail-container"},z,u.createElement("div",{className:"p-galleria-thumbnail-items-container",style:{height:_}},u.createElement("div",{ref:p,className:"p-galleria-thumbnail-items",onTransitionEnd:V,onTouchStart:j,onTouchMove:R,onTouchEnd:D},Z)),K));return u.createElement("div",{className:"p-galleria-thumbnail-wrapper"},X)})));w.displayName="GalleriaThumbnailItem",E.displayName="GalleriaThumbnails";var N=u.memo(u.forwardRef((function(e,o){var c=g(u.useState(!1),2),d=c[0],p=c[1],v=g(u.useState(e.numVisible),2),f=v[0],h=v[1],b=g(u.useState(!1),2),x=b[0],y=b[1],w=g(u.useState(e.activeIndex),2),S=w[0],C=w[1],O=u.useRef(null),T=u.useRef(null),A=u.useRef(null),P=e.onItemChange?e.activeIndex:S,k="left"===e.thumbnailsPosition||"right"===e.thumbnailsPosition;a.useInterval((function(){H({index:e.circular&&e.value.length-1===P?0:P+1})}),e.transitionInterval,x);var H=function(t){e.onItemChange?e.onItemChange(t):C(t.index)},V=function(){p(!0)},j=function(){p(!1)},R=function(){l.DomHandler.addClass(document.body,"p-overflow-hidden")},D=function(){l.ZIndexUtils.set("modal",A.current,s.default.autoZIndex,e.baseZIndex||s.default.zIndex.modal),l.DomHandler.addMultipleClasses(A.current,"p-component-overlay p-component-overlay-enter")},M=function(){e.onShow&&e.onShow()},U=function(){l.DomHandler.removeClass(document.body,"p-overflow-hidden"),l.DomHandler.addClass(A.current,"p-component-overlay-leave")},q=function(){l.ZIndexUtils.clear(A.current),e.onHide&&e.onHide()},G=function(){return x},Z=function(){y(!0)},_=function(){y(!1)},z=function(e,t){var n=["top","left","bottom","right"].find((function(e){return e===t}));return n?"".concat(e,"-").concat(n):""};u.useEffect((function(){e.value&&e.value.length<f&&h(e.value.length)}),[e.value,f]),u.useEffect((function(){h(e.numVisible)}),[e.numVisible]),a.useUnmountEffect((function(){x&&_(),l.ZIndexUtils.clear(A.current)})),u.useImperativeHandle(o,(function(){return{props:e,show:V,hide:j,isAutoPlayActive:G,startSlideShow:Z,stopSlideShow:_,getElement:function(){return O.current},getPreviewContent:function(){return T.current}}}));return l.ObjectUtils.isNotEmpty(e.value)&&function(){var a,o,c,p,v,h,g,b=(a=l.ObjectUtils.findDiffKeys(e,N.defaultProps),o=e.showThumbnails&&z("p-galleria-thumbnails",e.thumbnailsPosition),c=e.showIndicators&&z("p-galleria-indicators",e.indicatorsPosition),p=l.classNames("p-galleria p-component",e.className,{"p-galleria-fullscreen":e.fullScreen,"p-galleria-indicator-onitem":e.showIndicatorsOnItem,"p-galleria-item-nav-onhover":e.showItemNavigatorsOnHover&&!e.fullScreen,"p-input-filled":"filled"===s.default.inputStyle,"p-ripple-disabled":!1===s.default.ripple},o,c),v=e.fullScreen&&u.createElement("button",{type:"button",className:"p-galleria-close p-link","aria-label":t.localeOption("close"),onClick:j},u.createElement("span",{className:"p-galleria-close-icon pi pi-times","aria-hidden":"true"}),u.createElement(i.Ripple,null)),h=e.header?u.createElement("div",{className:"p-galleria-header"},e.header):null,g=e.footer?u.createElement("div",{className:"p-galleria-footer"},e.footer):null,u.createElement("div",m({ref:O,id:e.id,className:p,style:e.style},a),v,h,u.createElement("div",{className:"p-galleria-content"},u.createElement(I,{ref:T,value:e.value,activeItemIndex:P,onActiveItemChange:H,itemTemplate:e.item,circular:e.circular,caption:e.caption,showIndicators:e.showIndicators,changeItemOnIndicatorHover:e.changeItemOnIndicatorHover,indicator:e.indicator,showItemNavigators:e.showItemNavigators,autoPlay:e.autoPlay,slideShowActive:x,startSlideShow:Z,stopSlideShow:_}),e.showThumbnails&&u.createElement(E,{value:e.value,activeItemIndex:P,onActiveItemChange:H,itemTemplate:e.thumbnail,numVisible:f,responsiveOptions:e.responsiveOptions,circular:e.circular,isVertical:k,contentHeight:e.verticalThumbnailViewPortHeight,showThumbnailNavigators:e.showThumbnailNavigators,autoPlay:e.autoPlay,slideShowActive:x,stopSlideShow:_})),g));if(e.fullScreen){var y=l.classNames("p-galleria-mask",{"p-galleria-visible":d});return u.createElement(r.Portal,{element:u.createElement("div",{ref:A,className:y},u.createElement(n.CSSTransition,{nodeRef:O,classNames:"p-galleria",in:d,timeout:{enter:150,exit:150},options:e.transitionOptions,unmountOnExit:!0,onEnter:R,onEntering:D,onEntered:M,onExit:U,onExited:q},b))})}return b}()})));N.displayName="Galleria",N.defaultProps={__TYPE:"Galleria",id:null,value:null,activeIndex:0,fullScreen:!1,item:null,thumbnail:null,indicator:null,caption:null,className:null,style:null,header:null,footer:null,numVisible:3,responsiveOptions:null,showItemNavigators:!1,showThumbnailNavigators:!0,showItemNavigatorsOnHover:!1,changeItemOnIndicatorHover:!1,circular:!1,autoPlay:!1,transitionInterval:4e3,showThumbnails:!0,thumbnailsPosition:"bottom",verticalThumbnailViewPortHeight:"300px",showIndicators:!1,showIndicatorsOnItem:!1,indicatorsPosition:"bottom",baseZIndex:0,transitionOptions:null,onItemChange:null},exports.Galleria=N;

package/galleria/galleria.d.ts

@@ -1,54 +1,222 @@
+/**
+ *
+ * Galleria is a content gallery component.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/galleria)
+ *
+ * @module galleria
+ *
+ */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 
-type GalleriaPositionType = 'top' | 'bottom' | 'left' | 'right';
-
+/**
+ * Custom galleria responsive options
+ * @group Misc
+ */
 interface GalleriaResponsiveOptions {
+    /**
+     * Breakpoint for this responsive option.
+     */
     breakpoint: string;
+    /**
+     * Number of visible items.
+     */
     numVisible: number;
 }
 
-interface GalleriaItemChangeParams {
+/**
+ * Custom complete method event.
+ * @see {@link GalleriaProps.onItemChange}
+ * @event
+ */
+interface GalleriaItemChangeEvent {
+    /**
+     * index of the new item.
+     */
     index: number;
 }
 
+/**
+ * Defines valid properties in Galleria component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    value?: any[];
-    activeIndex?: number;
-    fullScreen?: boolean;
-    item?(item: any): React.ReactNode;
-    thumbnail?(item: any): React.ReactNode;
-    indicator?(index: number): React.ReactNode;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-    numVisible?: number;
-    responsiveOptions?: GalleriaResponsiveOptions[];
-    showItemNavigators?: boolean;
-    showThumbnailNavigators?: boolean;
-    showItemNavigatorsOnHover?: boolean;
-    changeItemOnIndicatorHover?: boolean;
-    circular?: boolean;
-    autoPlay?: boolean;
-    transitionInterval?: number;
-    caption?(item: any): React.ReactNode;
-    showThumbnails?: boolean;
-    thumbnailsPosition?: GalleriaPositionType;
-    showIndicators?: boolean;
-    showIndicatorsOnItem?: boolean;
-    indicatorsPosition?: GalleriaPositionType;
-    baseZIndex?: number;
-    transitionOptions?: CSSTransitionProps;
-    onItemChange?(e: GalleriaItemChangeParams): void;
+    /**
+     * An array of objects to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Whether to display the component on fullscreen.
+     * @defaultValue false
+     */
+    fullScreen?: boolean | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for preview item.
+     * @param {*} item - Current item.
+     */
+    item?(item: any): React.ReactNode | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for thumbnail item.
+     * @param {*} item - Current thumbnail item.
+     */
+    thumbnail?(item: any): React.ReactNode | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for indicator item.
+     * @param {number} index - Index of the indicator.
+     */
+    indicator?(index: number): React.ReactNode | undefined;
+    /**
+     * Custom header template.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Number of items per page.
+     * @defaultValue 3
+     */
+    numVisible?: number | undefined;
+    /**
+     * An array of options for responsive design.
+     */
+    responsiveOptions?: GalleriaResponsiveOptions[] | undefined;
+    /**
+     * Whether to display navigation buttons in item container.
+     * @defaultValue false
+     */
+    showItemNavigators?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons in thumbnail container.
+     * @defaultValue true
+     */
+    showThumbnailNavigators?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons on item container's hover.
+     * @defaultValue false
+     */
+    showItemNavigatorsOnHover?: boolean | undefined;
+    /**
+     * When enabled, item is changed on indicator item's hover.
+     * @defaultValue false
+     */
+    changeItemOnIndicatorHover?: boolean | undefined;
+    /**
+     * Defines if scrolling would be infinite.
+     * @defaultValue false
+     */
+    circular?: boolean | undefined;
+    /**
+     * Items are displayed with a slideshow in autoPlay mode.
+     * @defaultValue false
+     */
+    autoPlay?: boolean | undefined;
+    /**
+     * Time in milliseconds to scroll items.
+     * @defaultValue 4000
+     */
+    transitionInterval?: number | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for caption item.
+     * @param {*} item - Browser event.
+     */
+    caption?(item: any): React.ReactNode | undefined;
+    /**
+     * Whether to display thumbnail container.
+     * @defaultValue true
+     */
+    showThumbnails?: boolean | undefined;
+    /**
+     * Position of thumbnails. Valid values are "bottom", "top", "left" and "right".
+     * @defaultValue bottom
+     */
+    thumbnailsPosition?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Whether to display indicator container.
+     * @defaultValue false
+     */
+    showIndicators?: boolean | undefined;
+    /**
+     * When enabled, indicator container is displayed on item container.
+     * @defaultValue false
+     */
+    showIndicatorsOnItem?: boolean | undefined;
+    /**
+     * Position of indicators. Valid values are "bottom", "top", "left" and "right".
+     * @defaultValue bottom
+     */
+    indicatorsPosition?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke after changing item.
+     * @param {GalleriaItemChangeEvent} event - Custom change item.
+     */
+    onItemChange?(event: GalleriaItemChangeEvent): void;
+    /**
+     * Callback to invoke when modal becomes visible.
+     */
     onShow?(): void;
+    /**
+     * Callback to invoke when modal becomes hidden.
+     */
     onHide?(): void;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Galleria**
+ *
+ * _Galleria is a content gallery component._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/galleria/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Galleria extends React.Component<GalleriaProps, any> {
+    /**
+     * Used to show the overlay.
+     */
     public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
     public hide(): void;
+    /**
+     * Whether auto-play feature is currently active.
+     */
     public isAutoPlayActive(): boolean;
+    /**
+     * Used to start the slideshow.
+     */
     public startSlideShow(): void;
+    /**
+     * Used to stop the slideshow.
+     */
     public stopSlideShow(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }