app-launcher-karma/dist/index.js

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);exports.AppLauncher=({products:t,dropdownStyles:a={},svgColor:i="#555",position:r="left"})=>{const[o,s]=e.useState(!1),l=e.useRef(null),c={container:Object.assign(Object.assign({position:"absolute",maxHeight:350,overflowY:"auto",top:56},"left"===r?{left:0}:"right"===r?{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:o?1:0,transform:o?"center"===r?"translate(-50%, 0)":"translateY(0)":"center"===r?"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:o?"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}},d={container:Object.assign(Object.assign({},c.container),a.container),grid:Object.assign(Object.assign({},c.grid),a.grid),item:Object.assign(Object.assign({},c.item),a.item),icon:Object.assign(Object.assign({},c.icon),a.icon),label:Object.assign(Object.assign({},c.label),a.label)};return e.useEffect((()=>{function e(e){l.current&&!l.current.contains(e.target)&&s(!1)}function t(e){"Escape"===e.key&&s(!1)}return o&&(document.addEventListener("mousedown",e),document.addEventListener("keydown",t)),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}}),[o]),n.default.createElement("div",{ref:l,style:{position:"relative",display:"inline-block"}},n.default.createElement("button",{"aria-label":"Open app launcher",onClick:()=>s((e=>!e)),style:{background:"transparent",borderRadius:"10%",width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"}},n.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",style:{transform:o?"scale(1.10)":"scale(1)",transition:"transform 0.2s cubic-bezier(.4,2,.6,1)"}},[0,1,2].map((e=>[0,1,2].map((t=>n.default.createElement("circle",{key:`${e}-${t}`,cx:6+6*t,cy:6+6*e,r:1.5,fill:i}))))))),o&&n.default.createElement("div",{style:d.container},n.default.createElement("div",{style:d.grid},t.map((e=>n.default.createElement("a",{key:e.name,href:e.url,title:e.name,target:"_blank",style:d.item,onClick:()=>s(!1)},n.default.createElement("img",{src:e.icon,alt:e.name,style:d.icon,loading:"lazy"}),n.default.createElement("div",{style:d.label},e.name)))))))};
//# sourceMappingURL=index.js.map