primereact/speeddial/speeddial.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 e from"react";import{PrimeReactContext as n}from"primereact/api";import{Button as t}from"primereact/button";import{ComponentBase as r,useHandleStyle as i}from"primereact/componentbase";import{useMergeProps as o,useDisplayOrder as a,useGlobalOnEscapeKey as l,ESC_KEY_HANDLING_PRIORITIES as c,useEventListener as s,useMountEffect as u,useUpdateEffect as d}from"primereact/hooks";import{MinusIcon as p}from"primereact/icons/minus";import{PlusIcon as f}from"primereact/icons/plus";import{Ripple as m}from"primereact/ripple";import{classNames as b,DomHandler as y,UniqueComponentId as v,IconUtils as h,ObjectUtils as g}from"primereact/utils";function w(){return w=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},w.apply(null,arguments)}function S(e){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},S(e)}function k(e,n){if("object"!=S(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=S(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function x(e){var n=k(e,"string");return"symbol"==S(n)?n:n+""}function I(e,n,t){return(n=x(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function C(e){if(Array.isArray(e))return O(e)}function E(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function D(e,n){if(e){if("string"==typeof e)return O(e,n);var t={}.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,n):void 0}}function j(){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 A(e){return C(e)||E(e)||D(e)||j()}function N(e){if(Array.isArray(e))return e}function P(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,o,a,l=[],c=!0,s=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);c=!0);}catch(e){s=!0,i=e}finally{try{if(!c&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(s)throw i}}return l}}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 _(e,n){return N(e)||P(e,n)||D(e,n)||M()}var H=r.extend({defaultProps:{__TYPE:"SpeedDial",id:null,model:null,visible:!1,style:null,className:null,direction:"up",transitionDelay:30,type:"linear",radius:0,mask:!1,disabled:!1,hideOnClickOutside:!0,buttonStyle:null,buttonClassName:null,buttonTemplate:null,"aria-label":null,ariaLabelledby:null,maskStyle:null,maskClassName:null,showIcon:null,hideIcon:null,rotateAnimation:!0,onVisibleChange:null,onClick:null,onShow:null,onHide:null,children:void 0},css:{classes:{root:function(e){var n=e.props,t=e.visible;return b("p-speeddial p-component p-speeddial-".concat(n.type),I(I(I({},"p-speeddial-direction-".concat(n.direction),"circle"!==n.type),"p-speeddial-opened",t),"p-disabled",n.disabled))},button:function(e){var n=e.props;return b("p-speeddial-button p-button-rounded",{"p-speeddial-rotate":n.rotateAnimation&&!n.hideIcon})},mask:function(e){return b("p-speeddial-mask",{"p-speeddial-mask-visible":e.visible})},action:function(e){return b("p-speeddial-action",{"p-disabled":e.disabled})},actionIcon:function(e){return b("p-speeddial-action-icon",e._icon)},menu:"p-speeddial-list",menuitem:function(e){return b("p-speeddial-item",{"p-focus":e.active})}},styles:"\n@layer primereact {\n    .p-speeddial {\n        position: absolute;\n        display: flex;\n        z-index: 1;\n    }\n\n    .p-speeddial-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: top 0s linear 0.2s;\n        pointer-events: none;\n    }\n\n    .p-speeddial-item {\n        transform: scale(0);\n        opacity: 0;\n        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n        will-change: transform;\n    }\n\n    .p-speeddial-action {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        position: relative;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-speeddial-action-icon {\n        pointer-events: none;\n    }\n\n    .p-speeddial-circle .p-speeddial-item,\n    .p-speeddial-semi-circle .p-speeddial-item,\n    .p-speeddial-quarter-circle .p-speeddial-item {\n        position: absolute;\n    }\n\n    .p-speeddial-rotate {\n        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        will-change: transform;\n    }\n\n    .p-speeddial-mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n\n    .p-speeddial-mask-visible {\n        pointer-events: none;\n        opacity: 1;\n        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    }\n\n    .p-speeddial-opened .p-speeddial-list {\n        pointer-events: auto;\n    }\n\n    .p-speeddial-opened .p-speeddial-item {\n        transform: scale(1);\n        opacity: 1;\n    }\n\n    .p-speeddial-opened .p-speeddial-rotate {\n        transform: rotate(45deg);\n    }\n}\n",inlineStyles:{root:function(e){var n=e.props;return{alignItems:"up"===n.direction||"down"===n.direction?"center":"",justifyContent:"left"===n.direction||"right"===n.direction?"center":"",flexDirection:"up"===n.direction?"column-reverse":"down"===n.direction?"column":"left"===n.direction?"row-reverse":"right"===n.direction?"row":null}},menu:function(e){var n=e.props;return{flexDirection:"up"===n.direction?"column-reverse":"down"===n.direction?"column":"left"===n.direction?"row-reverse":"right"===n.direction?"row":null}}}}});function T(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function R(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?T(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var V=e.memo(e.forwardRef((function(r,S){var k=_(e.useState(!1),2),x=k[0],O=k[1],C=_(e.useState(null),2),E=C[0],D=C[1],j=_(e.useState(!1),2),N=j[0],P=j[1],M=_(e.useState(-1),2),T=M[0],V=M[1],z=e.useRef(!1),L=e.useRef(null),J=e.useRef(null),U=o(),X=e.useContext(n),q=H.getProps(r,X),F=q.onVisibleChange?q.visible:x,K=a("speed-dial",F),W={props:q,state:{visible:F}},B=H.setMetaData(W),Y=B.ptm,$=B.cx,G=B.sx;i(H.css.styles,B.isUnstyled,{name:"speeddial"}),l({callback:function(){ie()},when:F&&K,priority:[c.SPEED_DIAL,K]});var Q=_(s({type:"click",listener:function(e){!z.current&&Ie(e)&&ie(),z.current=!1},when:x}),2),Z=Q[0],ee=Q[1],ne=function(){q.onVisibleChange?q.onVisibleChange(!0):O(!0),q.onShow&&q.onShow()},te=function(){P(!0)},re=function(){P(!1),V(-1)},ie=function(){q.onVisibleChange?q.onVisibleChange(!1):O(!1),q.onHide&&q.onHide()},oe=function(e){F?ie():ne(),q.onClick&&q.onClick(e),z.current=!0},ae=function(e,n){n.command&&n.command({originalEvent:e,item:n}),ie(),z.current=!0,e.preventDefault()},le=function(e){switch(e.code){case"ArrowDown":me(e);break;case"ArrowUp":fe(e);break;case"ArrowLeft":be(e);break;case"ArrowRight":ye(e);break;case"Enter":case"NumpadEnter":case"Space":de(e);break;case"Escape":pe();break;case"Home":he(e);break;case"End":ve(e)}},ce=function(e){switch(e.code){case"ArrowDown":case"ArrowLeft":ue(e);break;case"ArrowUp":case"ArrowRight":se(e);break;case"Escape":pe()}},se=function(e){P(!0),y.focus(J.current),ne(),we(e),e.preventDefault()},ue=function(e){P(!0),y.focus(J.current),ne(),ge(e),e.preventDefault()},de=function(e){var n=A(y.find(L.current,'[data-pc-section="menuitem"]')).findIndex((function(e){return e.id===T}));ae(e,q.model[n]),re();var t=y.findSingle(L.current,"button");t&&y.focus(t)},pe=function(){ie();var e=y.findSingle(L.current,"button");e&&y.focus(e)},fe=function(e){var n=q.direction;"up"===n?ge(e):"down"===n?we(e):ge(e)},me=function(e){var n=q.direction;"up"===n?we(e):"down"===n?ge(e):we(e)},be=function(e){var n=q.direction;["left","up-right","down-left"].includes(n)?ge(e):(["right","up-left","down-right"].includes(n),we(e))},ye=function(e){var n=q.direction;["left","up-right","down-left"].includes(n)?we(e):(["right","up-left","down-right"].includes(n),ge(e))},ve=function(e){e.preventDefault(),V(-1),we(e,-1)},he=function(e){e.preventDefault(),V(-1),ge(e,-1)},ge=function(e){var n=xe((arguments.length>1&&void 0!==arguments[1]?arguments[1]:null)||T);Se(n),e.preventDefault()},we=function(e){var n=ke((arguments.length>1&&void 0!==arguments[1]?arguments[1]:null)||T);Se(n),e.preventDefault()},Se=function(e){var n=A(y.find(L.current,'[data-pc-section="menuitem"]')).filter((function(e){return!y.hasClass(y.findSingle(e,"a"),"p-disabled")}));n[e]&&V(n[e].getAttribute("id"))},ke=function(e){var n=A(y.find(L.current,'[data-pc-section="menuitem"]')).filter((function(e){return!y.hasClass(y.findSingle(e,"a"),"p-disabled")})),t=-1===e?n[n.length-1].id:e,r=n.findIndex((function(e){return e.getAttribute("id")===t}));return r=-1===e?n.length-1:r-1},xe=function(e){var n=A(y.find(L.current,'[data-pc-section="menuitem"]')).filter((function(e){return!y.hasClass(y.findSingle(e,"a"),"p-disabled")})),t=-1===e?n[0].id:e,r=n.findIndex((function(e){return e.getAttribute("id")===t}));return r=-1===e?0:r+1},Ie=function(e){return L.current&&!(L.current.isSameNode(e.target)||L.current.contains(e.target))},Oe=function(e){return(F?e:q.model.length-e-1)*q.transitionDelay},Ce=function(e){var n=q.type;if("linear"!==n){var t=q.model.length,r=q.radius||20*t;if("circle"===n){var i=2*Math.PI/t;return{left:"calc(".concat(r*Math.cos(i*e),"px + var(--item-diff-x, 0px))"),top:"calc(".concat(r*Math.sin(i*e),"px + var(--item-diff-y, 0px))")}}if("semi-circle"===n){var o=q.direction,a=Math.PI/(t-1),l="calc(".concat(r*Math.cos(a*e),"px + var(--item-diff-x, 0px))"),c="calc(".concat(r*Math.sin(a*e),"px + var(--item-diff-y, 0px))");if("up"===o)return{left:l,bottom:c};if("down"===o)return{left:l,top:c};if("left"===o)return{right:c,top:l};if("right"===o)return{left:c,top:l}}else if("quarter-circle"===n){var s=q.direction,u=Math.PI/(2*(t-1)),d="calc(".concat(r*Math.cos(u*e),"px + var(--item-diff-x, 0px))"),p="calc(".concat(r*Math.sin(u*e),"px + var(--item-diff-y, 0px))");if("up-left"===s)return{right:d,bottom:p};if("up-right"===s)return{left:d,bottom:p};if("down-left"===s)return{right:p,top:d};if("down-right"===s)return{left:p,top:d}}}return{}},Ee=function(e){var n=Oe(e),t=Ce(e);return R({transitionDelay:"".concat(n,"ms")},t)};u((function(){if("linear"!==q.type){var e=y.findSingle(L.current,".p-speeddial-button"),n=y.findSingle(J.current,".p-speeddial-item");if(e&&n){var t=Math.abs(e.offsetWidth-n.offsetWidth),r=Math.abs(e.offsetHeight-n.offsetHeight);J.current.style.setProperty("--item-diff-x","".concat(t/2,"px")),J.current.style.setProperty("--item-diff-y","".concat(r/2,"px"))}}})),d((function(){return x&&q.hideOnClickOutside&&Z(),function(){q.hideOnClickOutside&&ee()}}),[x]),e.useImperativeHandle(S,(function(){return{props:q,show:ne,hide:ie,getElement:function(){return L.current}}}));var De=function(n,t){if(!1===n.visible)return null;var r=n.disabled,i=n.icon,o=n.label,a=n.template,l=n.url,c=n.target,s=n.className,u=n.style,d=b("p-speeddial-action",{"p-disabled":r}),p=b("p-speeddial-action-icon",i),f=U({className:$("actionIcon")},Y("actionIcon")),y=U({href:l||"#",role:"menuitem",className:b(s,$("action",{disabled:r})),"aria-label":n.label,style:u,target:c,tabIndex:"-1","data-pr-tooltip":o,onClick:function(e){return ae(e,n)}},Y("action")),v=h.getJSXIcon(i,R({},f),{props:q}),S=e.createElement("a",y,v,e.createElement(m,null));a&&(S=g.getJSXElement(a,n,{onClick:function(e){return ae(e,n)},className:d,iconClassName:p,element:S,props:q,visible:F}));var k,x=U({id:"".concat(E,"_").concat(t),className:$("menuitem",{active:(k="".concat(E,"_").concat(t),T===k)}),style:Ee(t),role:"menuitem"},Y("menuitem"));return e.createElement("li",w({},x,{key:"".concat(E,"_").concat(t)}),S)},je=function(){for(var e="",n=0;n<q.model.length;n++)e+="".concat(E,"_").concat(n," ");return e.trim()};e.useEffect((function(){D(q.id||v())}),[q.id]);var Ae,Ne,Pe,Me,_e,He,Te,Re,Ve,ze=(Ae=!F&&!!q.showIcon||!q.hideIcon,Ne=F&&!!q.hideIcon,Pe=b("p-speeddial-button p-button-rounded",{"p-speeddial-rotate":q.rotateAnimation&&!q.hideIcon},q.buttonClassName),Me=b(I(I({},"".concat(q.showIcon),!F&&!!q.showIcon||!q.hideIcon),"".concat(q.hideIcon),F&&!!q.hideIcon)),_e=h.getJSXIcon(Ae?q.showIcon||e.createElement(f,null):Ne?q.hideIcon||e.createElement(p,null):null,void 0,{props:q,visible:F}),He=U({type:"button",style:q.buttonStyle,className:b(q.buttonClassName,$("button")),icon:_e,onClick:function(e){return oe(e)},disabled:q.disabled,onKeyDown:ce,"aria-label":q["aria-label"],"aria-expanded":F,"aria-haspopup":!0,"aria-controls":je,"aria-labelledby":q.ariaLabelledby,pt:Y("button"),unstyled:q.unstyled,__parentMetadata:{parent:W}}),Te=e.createElement(t,He),q.buttonTemplate?g.getJSXElement(q.buttonTemplate,{onClick:oe,className:Pe,iconClassName:Me,element:Te,props:q,visible:F}):Te),Le=(Re=q.model?q.model.map(De):null,Ve=U({ref:J,className:$("menu"),style:G("menu"),role:"menu",tabIndex:"-1",onFocus:te,onKeyDown:le,onBlur:re,"aria-activedescendant":N?-1!==T?T:null:void 0},Y("menu")),e.createElement("ul",Ve,Re)),Je=function(){if(q.mask){var n=U({className:b(q.maskClassName,$("mask",{visible:F})),style:q.maskStyle},Y("mask"));return e.createElement("div",n)}return null}(),Ue=U({className:b(q.className,$("root",{visible:F})),style:R(R({},q.style),G("root")),id:E},H.getOtherProps(q),Y("root"));return e.createElement(e.Fragment,null,e.createElement("div",w({ref:L},Ue),ze,Le),Je)})));V.displayName="SpeedDial";export{V as SpeedDial};