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