app-launcher-karma/dist/index.esm.js

A React TypeScript component for an app launcher, similar to Google app launcher, for company products.

import e,{useState as t,useRef as n,useEffect as i}from"react";const a=({products:a,dropdownStyles:r={},svgColor:o="#555",position:s="left"})=>{const[c,l]=t(!1),d=n(null),m={container:Object.assign(Object.assign({position:"absolute",maxHeight:350,overflowY:"auto",top:56},"left"===s?{left:0}:"right"===s?{right:0}:{left:"50%",transform:"translateX(-50%)"}),{zIndex:1e3,background:"#fff",borderRadius:12,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",padding:16,minWidth:320,marginTop:4,opacity:c?1:0,transform:c?"center"===s?"translate(-50%, 0)":"translateY(0)":"center"===s?"translate(-50%, -12px)":"translateY(-12px)",transition:"opacity 0.25s cubic-bezier(.4,2,.6,1), transform 0.25s cubic-bezier(.4,2,.6,1)",pointerEvents:c?"auto":"none"}),grid:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:10},item:{textDecoration:"none",color:"#222",borderRadius:8,padding:8,transition:"background 0.2s",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},icon:{width:50,height:50,marginBottom:8,objectFit:"contain"},label:{fontSize:14}},g={container:Object.assign(Object.assign({},m.container),r.container),grid:Object.assign(Object.assign({},m.grid),r.grid),item:Object.assign(Object.assign({},m.item),r.item),icon:Object.assign(Object.assign({},m.icon),r.icon),label:Object.assign(Object.assign({},m.label),r.label)};return i((()=>{function e(e){d.current&&!d.current.contains(e.target)&&l(!1)}function t(e){"Escape"===e.key&&l(!1)}return c&&(document.addEventListener("mousedown",e),document.addEventListener("keydown",t)),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}}),[c]),e.createElement("div",{ref:d,style:{position:"relative",display:"inline-block"}},e.createElement("button",{"aria-label":"Open app launcher",onClick:()=>l((e=>!e)),style:{background:"transparent",borderRadius:"10%",width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}},e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",style:{transform:c?"scale(1.10)":"scale(1)",transition:"transform 0.2s cubic-bezier(.4,2,.6,1)"}},[0,1,2].map((t=>[0,1,2].map((n=>e.createElement("circle",{key:`${t}-${n}`,cx:6+6*n,cy:6+6*t,r:1.5,fill:o}))))))),c&&e.createElement("div",{style:g.container},e.createElement("div",{style:g.grid},a.map((t=>e.createElement("a",{key:t.name,href:t.url,title:t.name,target:"_blank",style:g.item,onClick:()=>l(!1)},e.createElement("img",{src:t.icon,alt:t.name,style:g.icon,loading:"lazy"}),e.createElement("div",{style:g.label},t.name)))))))};export{a as AppLauncher};
//# sourceMappingURL=index.esm.js.map