@infinityfx/fluid/dist/components/display/action-menu/group.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Animate as i}from"@infinityfx/lively";import{useId as r,useRef as n,useState as t}from"react";import{combineClasses as a,getFocusable as s}from"../../../core/utils.js";import{createStyles as c}from"../../../core/style.js";import l from"./item.js";import{Icon as d}from"../../../core/icons.js";const m=c("action-menu.group",{".wrapper":{position:"relative"},".menu":{position:"absolute",padding:".25em",background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",fontSize:"var(--f-font-size-sml)",minWidth:"min(100vw, 10em)",top:"calc(-1px - .25em)"},".icon":{display:"flex",marginLeft:"auto"}});function p({children:c,cc:p={},label:u,className:f,...h}){const v=a(m,p),g=r(),y=n(null),w=n(null),[b,x]=t({open:!1,side:"left"});function j(){if(h.disabled||!y.current)return;let{left:e,right:o}=y.current.getBoundingClientRect();o=window.innerWidth-o,x({open:!0,side:e>o?"right":"left"})}return e("div",{ref:y,className:v.wrapper,onFocus:j,onMouseEnter:j,onMouseLeave:()=>x({...b,open:!1}),onBlur:()=>{y.current?.matches(":focus-within")||x({...b,open:!1})},children:[e(l,{...h,"aria-haspopup":"menu","aria-expanded":b.open,"aria-controls":g,keepOpen:!0,onTouchEnd:e=>{h.onTouchEnd?.(e),b.open?x({...b,open:!1}):j()},onKeyDown:e=>{if(h.onKeyDown?.(e),"ArrowRight"===e.key||"ArrowLeft"===e.key){const o=s(w.current,!1);o&&(e.preventDefault(),o.focus())}},children:[u,o("div",{className:v.icon,children:o(d,{type:"right"})})]}),o(i,{animations:[{visibility:["hidden","visible"],opacity:[0,.2,1],scale:[.9,1],duration:.2},{opacity:[0,1],scale:[.95,1],duration:.2}],triggers:[{on:b.open,immediate:!0},{on:!b.open,reverse:!0,immediate:!0}],levels:2,stagger:.05,children:o("div",{ref:w,id:g,role:"menu",className:v.menu,style:{[b.side]:"100%"},children:c})})]})}p.displayName="ActionMenu.Group";export{p as default};
//# sourceMappingURL=group.js.map