@progress/kendo-react-buttons/FloatingActionButton/FloatingActionButton.js

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),he=require("./FloatingActionButtonItem.js"),O=require("./utils.js"),Ce=require("@progress/kendo-react-popup");function ve(d){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(g,r,k.get?k:{enumerable:!0,get:()=>d[r]})}}return g.default=d,Object.freeze(g)}const t=ve(ye),Ie=2,Ee=100,M=t.forwardRef((d,g)=>{const{align:r=C.align,alignOffset:k,className:q,disabled:f,icon:R,svgIcon:w,iconClass:$,id:j,items:a,item:ee,text:v,positionMode:A=C.positionMode,size:I=C.size,style:te,rounded:E=C.rounded,themeColor:F=C.themeColor,overlayStyle:ne,tabIndex:oe,accessKey:se,popupSettings:D={},modal:ae,onClick:P,onItemClick:_,onFocus:S,onBlur:W,onKeyDown:Z,onOpen:H,onClose:L,...le}=d,X=n.useZIndexContext(),U=X?X+Ie:Ee,G=t.useRef(null),i=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),J=t.useCallback(()=>{i.current&&i.current.focus()},[]),p=t.useCallback(()=>({element:i.current,focus:J}),[J]);t.useImperativeHandle(G,p),t.useImperativeHandle(g,()=>G.current);const[c,u]=t.useState(!1),[x,m]=t.useState(!1),[y,l]=t.useState(-1),ce=n.useId()+"-button-id",T=n.useDir(i,d.dir),h=T==="rtl",N=n.useId()+"-list-id";t.useEffect(()=>{O.position(i,r,k,h)},[i,r,k,h]),t.useEffect(()=>{x&&i&&i.current&&i.current.focus()},[x,i]);const b=t.useCallback((e,s)=>{a&&n.dispatchEvent(s?H:L,e,p(),void 0)},[H,L,a]),Q=t.useCallback(e=>{!e.target||f||(!a&&P?n.dispatchEvent(P,e,p(),void 0):(u(!c),m(!0),l(c?-1:0),b(e,!c)))},[u,m,l,P,b,c,a,f]),ue=t.useCallback(e=>{m(!0),l(c?0:-1),S&&n.dispatchEvent(S,e,p(),void 0)},[S,m,l]),de=t.useCallback(e=>{m(!1),u(!1),l(-1),n.dispatchEvent(W,e,p(),void 0),c&&b(e,!1)},[W,m,u,l,b]),fe=t.useCallback(e=>{e.preventDefault()},[]),z=t.useCallback((e,s)=>{a&&(a[s].disabled||n.dispatchEvent(_,e,p(),{itemProps:a[s],itemIndex:s}))},[_]),pe=t.useCallback((e,s)=>{!e.target||!a||(l(s),u(!1),z(e,s),b(e,!1))},[l,u,z,b]),me=t.useCallback(e=>{n.getActiveElement(document)===i.current&&e.preventDefault()},[i]),be=t.useCallback(e=>{const s=y,B=a?a.length:-1;if(e.altKey){!c&&e.keyCode===n.Keys.down&&(e.preventDefault(),u(!0),l(0)),c&&e.keyCode===n.Keys.up&&(e.preventDefault(),u(!1),l(-1));return}switch(e.keyCode){case n.Keys.enter:case n.Keys.space:s>=0&&z(e,s),a||Q(e),e.preventDefault(),u(!c),l(c?-1:0);break;case n.Keys.esc:e.preventDefault(),u(!1),l(-1);break;case n.Keys.home:e.preventDefault(),l(0);break;case n.Keys.end:e.preventDefault(),l(B-1);break;case n.Keys.down:case n.Keys.right:e.preventDefault(),l(s+1>=B?0:s+1);break;case n.Keys.up:case n.Keys.left:e.preventDefault(),l(s-1<0?B-1:s-1);break}n.dispatchEvent(Z,e,p(),void 0)},[Z,y,l,h,u]),ge=t.useMemo(()=>n.classNames("k-fab k-fab-solid",{"k-fab-sm":I==="small","k-fab-md":I==="medium","k-fab-lg":I==="large","k-disabled":f,"k-pos-absolute":A==="absolute","k-pos-fixed":A==="fixed","k-focus":x,[`k-rounded-${n.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-fab-solid-${F}`]:F},`k-${r.vertical}-${r.horizontal}`,q),[F,I,E,f,A,r,x,q]),ke=a&&a.map((e,s)=>t.createElement(he.FloatingActionButtonItem,{...e,key:s,index:s,id:`${N}-${s}`,disabled:f||e.disabled,focused:y===s,dataItem:e,item:ee,className:n.classNames(e.className,O.getTextDirectionClass(T||"ltr",r.horizontal)),onClick:pe,onDown:me})),V=!!((R||w)&&!v),Y=(i.current?i.current.offsetWidth:0)/2-32/2;let K;return R||w?K=t.createElement(n.IconWrap,{className:"k-fab-icon",name:R,icon:w}):$?K=t.createElement("span",{role:"presentation",className:$}):K=null,t.createElement(n.ZIndexContext.Provider,{value:U},t.createElement(t.Fragment,null,t.createElement("button",{ref:i,id:j||ce,role:"button",type:"button","aria-disabled":f,"aria-expanded":a?c:void 0,"aria-haspopup":!!a,"aria-label":`${v||""} floatingactionbutton`,"aria-owns":a?N:void 0,"aria-activedescendant":y>=0&&a?`${N}-${y}`:void 0,tabIndex:n.getTabIndex(oe,f),accessKey:se,dir:T,disabled:f,className:ge,style:te,onClick:Q,onMouseDown:fe,onFocus:ue,onBlur:de,onKeyDown:be,...le},K,v&&t.createElement("span",{className:"k-fab-text"},v)),ae&&c&&t.createElement("div",{className:"k-overlay",style:{zIndex:U,...ne}}),t.createElement(Ce.Popup,{ref:re,anchor:i.current,show:c,animate:D.animate,popupClass:n.classNames("k-popup-transparent k-fab-popup",D.popupClass),anchorAlign:D.anchorAlign||O.getAnchorAlign(r,h),popupAlign:D.popupAlign||O.getPopupAlign(r,h),style:{boxShadow:"none"}},t.createElement("ul",{ref:ie,role:"menu","aria-labelledby":j,id:N,className:n.classNames("k-fab-items",{"k-fab-items-bottom":r.vertical!=="bottom","k-fab-items-top":r.vertical==="bottom"}),style:{paddingLeft:V?Y:void 0,paddingRight:V?Y:void 0}},ke))))});M.propTypes={className:o.string,style:o.object,id:o.string,dir:o.string,tabIndex:o.number,accessKey:o.string,disabled:o.bool,icon:o.string,svgIcon:n.svgIconPropType,iconClass:o.string,text:o.string,alignOffset:o.shape({x:o.oneOfType([o.number,o.string]).isRequired,y:o.oneOfType([o.number,o.string]).isRequired}),align:o.shape({vertical:o.oneOf(["top","middle","bottom"]).isRequired,horizontal:o.oneOf(["start","center","end"]).isRequired}),positionMode:o.oneOf(["absolute","fixed"]),size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),themeColor:o.oneOf([null,"primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),modal:o.bool,overlayStyle:o.object};const C={align:{vertical:"bottom",horizontal:"end"},size:"medium",rounded:"full",themeColor:"primary",positionMode:"fixed"};M.displayName="KendoFloatingActionButton";exports.FloatingActionButton=M;