@nexusui/components/core/OrganizationSelector/OrganizationSelector.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 r,jsx as t,Fragment as o}from"react/jsx-runtime";import{useState as i,useMemo as e}from"react";import a from"@mui/material/MenuItem";import n from"@mui/material/ListItemText";import l from"@mui/material/ListItemIcon";import m from"@mui/icons-material/ChevronRight";import s from"@mui/material/Menu";import c from"@mui/icons-material/Check";import p from"@mui/icons-material/Business";import d from"@mui/material/Box";import u from"@mui/material/Divider";import h from"@mui/icons-material/OpenInNew";import g from"@mui/material/Button";import{useTheme as y}from"@mui/material/styles";import x from"@mui/material/useMediaQuery";import f from"@mui/material/Stack";import k from"@mui/icons-material/KeyboardBackspace";import{useTranslate as I}from"../locales/index.js";import b from"./locale.json.js";import{styles as v}from"./OrganizationSelector.styles.js";import{responsiveMenuStyle as S}from"../util/styles/index.js";const C="NexusOrganizationSelector",$=$=>{const{selectedOrgId:T,orgActionLabel:z="View",organizations:O,onOrgItemChange:M,onMenuItemClick:N,onViewOrgs:w,orgActionLinkTarget:L="_blank",divider:j,...A}=$,B=I(b),P=y(),R=x(P.breakpoints.down("sm")),[_,V]=i(null),W=Boolean(_),D=()=>{V(null)},E=e((()=>O.find((r=>r.id===T))),[O,T]);return 0===O.length?null:1===O.length?r(a,{"aria-haspopup":"true","aria-expanded":W,sx:[r=>({pl:{xs:6,sm:8},pr:6,my:1,height:48,cursor:"default","& .MuiListItemIcon-root":{minWidth:56},"&:hover":{backgroundColor:"transparent",...r.applyStyles("dark",{backgroundColor:"transparent"})}}),v.menuItem],className:`${C}-root`,"data-testid":`${C}-root`,disableTouchRipple:!0,...A,children:[t(l,{children:t(p,{sx:r=>({color:"grey.600",...r.applyStyles("dark",{color:"grey.400"})})})}),t(n,{primary:O[0]?.name,primaryTypographyProps:{sx:v.listText,translate:"no"}}),t(g,{"data-testid":`${C}-orgAction`,className:`${C}-orgAction`,onClick:w,variant:"text",endIcon:"_blank"===L?t(h,{}):void 0,children:z})]}):r(o,{children:[r(a,{onClick:r=>{V(r.currentTarget)},"aria-haspopup":"true","aria-expanded":W?"true":void 0,sx:{pl:{xs:6,sm:8},pr:6,my:1,height:48,"& .MuiListItemIcon-root":{minWidth:56}},className:`${C}-root`,"data-testid":`${C}-root`,...A,children:[t(l,{children:t(p,{sx:r=>({color:"grey.600",...r.applyStyles("dark",{color:"grey.400"})})})}),t(n,{primaryTypographyProps:{sx:v.listText},translate:"no",children:E?.name||B("Select an Organization")}),t(m,{fontSize:"small"})]}),j&&t(u,{sx:{my:2}}),r(s,{sx:v.subMenu,anchorEl:_,open:W,anchorOrigin:{vertical:"top",horizontal:-16},transformOrigin:{vertical:"top",horizontal:"right"},marginThreshold:R?0:16,slotProps:{paper:{sx:{transform:"translateX(-4px)",".MuiList-root":{py:{xs:0,sm:2}},...S}}},onClose:D,"data-testid":"OrganizationSelector-SubMenu",className:`${C}-menu`,children:[R&&r(f,{sx:{height:56},children:[t(d,{sx:{display:"flex",alignItems:"center",height:"100%"},children:t(g,{sx:r=>({ml:3,color:"grey.600",...r.applyStyles("dark",{color:"common.white"})}),onClick:D,startIcon:t(k,{}),"data-testid":`${C}-back`,className:`${C}-back`,size:"large",children:B("Back")})}),t(u,{})]}),t(d,{sx:{overflowY:"auto"},children:O.map(((o,i)=>{const{id:e,name:m,...s}=o,p=E?.id===e;return r(a,{onClick:p?void 0:()=>{M?.(o),D()},sx:[r=>({height:40,pl:{xs:6,sm:4},cursor:p?"default":"pointer","&:hover":p?{backgroundColor:"transparent",...r.applyStyles("dark",{backgroundColor:"transparent"})}:{}}),v.menuItem],"data-testid":"OrganizationSelector-SubMenuItem",className:`${C}-orgItem ${p?"active":""}`,disableTouchRipple:p,...s,children:[t(l,{sx:{visibility:p?"visible":"hidden"},children:t(c,{sx:r=>({color:"grey.500",...r.applyStyles("dark",{color:"common.white"})})})}),t(n,{primary:m,primaryTypographyProps:{sx:v.listText,translate:"no"}}),p&&t(g,{"data-testid":`${C}-orgAction`,className:`${C}-orgAction`,onClick:w,variant:"text",endIcon:"_blank"===L?t(h,{}):void 0,children:z})]},`organization-item-${i}`)}))})]})]})};export{$ as default};