@nexusui/components/core/ActionGroup/ActionGroup.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import{jsxs as o,jsx as i}from"react/jsx-runtime";import{useState as t}from"react";import e from"@mui/material/Box";import r from"@mui/material/IconButton";import a from"@mui/material/ListItemIcon";import n from"@mui/material/ListItemText";import l from"@mui/material/Menu";import c from"@mui/material/MenuItem";import m from"@mui/material/Stack";import s from"@mui/material/Tooltip";import p from"@mui/icons-material/MoreHoriz";import u from"clsx";import d from"lodash/uniqueId";const h="NexusActionGroup",f=({actions:f=[],max:$=3,size:I,t:v,className:x,TooltipProps:M={},moreActionsTooltipProps:P={},...b})=>{const[g]=t((()=>d(`${h}-`))),A=Math.max($,1),N=f.length>A,[T,k]=t(null),z=Boolean(T),B=o=>{o.stopPropagation(),k(null)};return o(m,{role:"group","aria-label":"Action Group",direction:"row",alignItems:"center",className:u(`${h}-root`,x),"data-testid":`${h}-root`,...b,children:[f.slice(0,N?A-1:A).map(((o,t)=>{const{active:e=!0,icon:a,inactiveIcon:n=a,onClick:l,...c}=o,m=i(r,{"aria-label":o.label,size:I,color:"inherit",onClick:o=>{l(o),o.stopPropagation()},"data-testid":"ActionGroup-iconButton",className:`${h}-iconButton${e?"Active":"Inactive"}`,sx:{"& .MuiSvgIcon-root":{fontSize:"inherit"}},...c,children:e?a:n});return i(s,{PopperProps:{disablePortal:!0},title:o.label,"data-testid":`${h}-iconTooltip`,className:`${h}-iconTooltip`,...M,children:m},`action-${t}-${e?"active":"inactive"}`)})),N&&o(e,{sx:{display:"flex"},children:[i(s,{title:v("Show More Actions"),...M,...P,children:i(r,{id:g,"aria-label":v("Show More Actions"),size:I,onClick:o=>{o.stopPropagation(),k(o.currentTarget)},color:"inherit","data-testid":"ActionGroup-overflowButton",children:i(p,{fontSize:"inherit"})})}),i(l,{className:`${h}-menu`,"data-testid":`${h}-menu`,anchorEl:T,open:z,onClose:B,MenuListProps:{"aria-labelledby":g},children:f.slice(A-1).map(((t,e)=>{const{label:r,icon:l,inactiveIcon:m=l,active:s=!0,onClick:p,...u}=t;return o(c,{onClick:o=>{p(o),o.stopPropagation(),B(o)},"data-testid":"ActionGroup-iconMenuItem",className:`${h}-iconMenuItem`,...u,children:[i(a,{children:s?l:m}),i(n,{sx:{ml:4},children:r})]},`action-${e}-${s?"active":"inactive"}`)}))})]})]})};export{f as default};