primereact/dock/dock.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as n from"react";import{PrimeReactContext as e}from"primereact/api";import{ComponentBase as t,useHandleStyle as o}from"primereact/componentbase";import{useMergeProps as r,useMountEffect as i}from"primereact/hooks";import{Ripple as a}from"primereact/ripple";import{classNames as c,UniqueComponentId as l,ObjectUtils as u,DomHandler as s,IconUtils as p}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)({}).hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n},d.apply(null,arguments)}function f(n){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},f(n)}function m(n,e){if("object"!=f(n)||!n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var o=t.call(n,e||"default");if("object"!=f(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}function b(n){var e=m(n,"string");return"symbol"==f(e)?e:e+""}function v(n,e,t){return(e=b(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function k(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,o=Array(e);t<e;t++)o[t]=n[t];return o}function y(n){if(Array.isArray(n))return k(n)}function g(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}function h(n,e){if(n){if("string"==typeof n)return k(n,e);var t={}.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?k(n,e):void 0}}function x(){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 S(n){return y(n)||g(n)||h(n)||x()}function w(n){if(Array.isArray(n))return n}function O(n,e){var t=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=t){var o,r,i,a,c=[],l=!0,u=!1;try{if(i=(t=t.call(n)).next,0===e){if(Object(t)!==t)return;l=!1}else for(;!(l=(o=i.call(t)).done)&&(c.push(o.value),c.length!==e);l=!0);}catch(n){u=!0,r=n}finally{try{if(!l&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(u)throw r}}return c}}function j(){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(n,e){return w(n)||O(n,e)||h(n,e)||j()}var P=t.extend({defaultProps:{__TYPE:"Dock",id:null,style:null,className:null,model:null,tabIndex:0,onFocus:null,onBlur:null,position:"bottom",magnification:!0,header:null,footer:null,children:void 0},css:{classes:{icon:"p-dock-action-icon",action:function(n){return c("p-dock-action",{"p-disabled":n.disabled})},menuitem:function(n){var e=n.currentIndexState,t=n.index;return c("p-dock-item",{"p-dock-item-second-prev":e-2===t,"p-dock-item-prev":e-1===t,"p-dock-item-current":e===t,"p-dock-item-next":e+1===t,"p-dock-item-second-next":e+2===t,"p-focus":n.active})},content:"p-menuitem-content",header:"p-dock-header",menu:"p-dock-list",footer:"p-dock-footer",root:function(n){var e=n.props;return c("p-dock p-component p-dock-".concat(e.position),{"p-dock-magnification":e.magnification})},container:"p-dock-list-container"},styles:"\n@layer primereact {\n    .p-dock {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n    }\n\n    .p-dock-list-container {\n        display: flex;\n        pointer-events: auto;\n    }\n\n    .p-dock-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n    }\n\n    .p-dock-magnification .p-dock-item {\n        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n        will-change: transform;\n    }\n\n    .p-dock-action {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n        cursor: default;\n    }\n\n    .p-dock-magnification .p-dock-item-second-prev,\n    .p-dock-magnification .p-dock-item-second-next {\n        transform: scale(1.2);\n    }\n\n    .p-dock-magnification .p-dock-item-prev,\n    .p-dock-magnification .p-dock-item-next {\n        transform: scale(1.4);\n    }\n\n    .p-dock-magnification .p-dock-item-current {\n        transform: scale(1.6);\n        z-index: 1;\n    }\n\n    /* Position */\n    /* top */\n    .p-dock-top {\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n\n    .p-dock-top.p-dock-magnification .p-dock-item {\n        transform-origin: center top;\n    }\n\n    .p-dock-top .p-dock-list-container {\n        flex-direction: column-reverse;\n    }\n\n    /* bottom */\n    .p-dock-bottom {\n        left: 0;\n        bottom: 0;\n        width: 100%;\n    }\n\n    .p-dock-bottom.p-dock-magnification .p-dock-item {\n        transform-origin: center bottom;\n    }\n\n    .p-dock-bottom .p-dock-list-container {\n        flex-direction: column;\n    }\n\n    /* right */\n    .p-dock-right {\n        right: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-right.p-dock-magnification .p-dock-item {\n        transform-origin: center right;\n    }\n\n    .p-dock-right .p-dock-list {\n        flex-direction: column;\n    }\n\n    /* left */\n    .p-dock-left {\n        left: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-left.p-dock-magnification .p-dock-item {\n        transform-origin: center left;\n    }\n\n    .p-dock-left .p-dock-list {\n        flex-direction: column;\n    }\n\n    .p-dock-left .p-dock-list-container {\n        flex-direction: row-reverse;\n    }\n}\n"}});function D(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function I(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?D(Object(t),!0).forEach((function(e){v(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}var N=n.memo(n.forwardRef((function(t,f){var m=E(n.useState(-3),2),b=m[0],k=m[1],y=E(n.useState(!1),2),g=y[0],h=y[1],x=E(n.useState(-1),2),w=x[0],O=x[1],j=r(),D=n.useContext(e),N=P.getProps(t,D),A=E(n.useState(N.id),2),C=A[0],F=A[1],z=P.setMetaData({props:N,state:{id:C,currentIndex:b}}),B=z.ptm,J=z.cx,M=z.isUnstyled,R=n.useRef(null),T=n.useRef(null);o(P.css.styles,M,{name:"dock"});var X=function(n,e,t){return B(n,{context:{index:t,item:e}})},U=function(){k(-3)},_=function(n){k(n)},H=function(n,e){e.command&&e.command({originalEvent:n,item:e}),n.preventDefault()},L=function(n){h(!0),nn(0),N.onFocus&&N.onFocus(n)},K=function(n){h(!1),O(-1),N.onBlur&&N.onBlur(n)},Y=function(n){switch(n.code){case"ArrowDown":"left"!==N.position&&"right"!==N.position||$(),n.preventDefault();break;case"ArrowUp":"left"!==N.position&&"right"!==N.position||q(),n.preventDefault();break;case"ArrowRight":"top"!==N.position&&"bottom"!==N.position||$(),n.preventDefault();break;case"ArrowLeft":"top"!==N.position&&"bottom"!==N.position||q(),n.preventDefault();break;case"Home":G(),n.preventDefault();break;case"End":Q(),n.preventDefault();break;case"Enter":case"NumpadEnter":case"Space":V(),n.preventDefault()}},$=function(){var n=W(w);nn(n)},q=function(){var n=Z(w);nn(n)},G=function(){nn(0)},Q=function(){nn(s.find(T.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1)},V=function(){var n=s.findSingle(T.current,'li[id="'.concat("".concat(w),'"]')),e=n&&s.findSingle(n,'[data-pc-section="action"]');e?e.click():n&&n.click()},W=function(n){var e=S(s.find(T.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===n}));return e>-1?e+1:0},Z=function(n){var e=S(s.find(T.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===n}));return e>-1?e-1:0},nn=function(n){var e=s.find(T.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]');O(e[n>=e.length?e.length-1:n<0?0:n].getAttribute("id"))},en=function(n){return n===w},tn=function(e,t){if(!1===e.visible)return null;var o=e.disabled,r=e.icon,i=e.label,l=e.template,s=e.url,f=e.target,m=e.id||C+"_"+t,k=c("p-dock-action",{"p-disabled":o}),y=c("p-dock-action-icon",r),g=j({className:J("icon")},X("icon",e,t)),h=p.getJSXIcon(r,I({},g),{props:N}),x=j({href:s||"#",onFocus:function(n){return n.stopPropagation()},className:J("action",{disabled:o}),tabIndex:-1,target:f,"data-pr-tooltip":i,onClick:function(n){return H(n,e)}},X("action",e,t)),S=n.createElement("a",x,h,n.createElement(a,null));l&&(S=u.getJSXElement(l,e,{onClick:function(n){return H(n,e)},className:k,iconClassName:y,"aria-hidden":"true",tabIndex:-1,element:S,props:N,index:t}));var w=j({className:J("content")},X("content",e,t)),O=en(m),E=j(v(v({id:m,role:"menuitem","aria-label":i,"aria-disabled":o,"data-p-focused":O,"data-p-disabled":o||!1,className:J("menuitem",{currentIndexState:b,index:t,active:en(m)})},"role","none"),"onMouseEnter",(function(){return _(t)})),X("menuitem",e,t));return n.createElement("li",d({},E,{key:m}),n.createElement("div",w,S))};i((function(){C||F(l())})),n.useImperativeHandle(f,(function(){return{props:N,getElement:function(){return R.current}}}));var on,rn,an=function(){if(N.header){var e=u.getJSXElement(N.header,{props:N}),t=j({className:J("header")},B("header"));return n.createElement("div",t,e)}return null}(),cn=(on=N.model?N.model.map(tn):null,rn=j({ref:T,className:J("menu"),role:"menu","aria-orientation":"bottom"===N.position||"top"===N.position?"horizontal":"vertical","aria-activedescendant":g?-1!==w?w:null:void 0,tabIndex:N.tabIndex||0,onFocus:L,onBlur:K,onKeyDown:Y,onMouseLeave:U},B("menu")),n.createElement("ul",rn,on)),ln=function(){if(N.footer){var e=u.getJSXElement(N.footer,{props:N}),t=j({className:J("footer")},B("footer"));return n.createElement("div",t,e)}return null}(),un=j({className:c(N.className,J("root")),style:N.style},P.getOtherProps(N),B("root")),sn=j({className:J("container")},B("container"));return n.createElement("div",d({id:N.id,ref:R},un),n.createElement("div",sn,an,cn,ln))})));N.displayName="Dock";export{N as Dock};