@clerk/clerk-js/dist/organizationlist_clerk.legacy.browser_85244b_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["158"],{91816:function(e,t,i){i.d(t,{$:()=>w}),i(65223);var a=i(79109),n=i(83799),o=i(69144),r=i(86988),l=i(2672),s=i(70431),c=i(19460),d=i(68487),u=i(92654),g=i(53412),h=i(67263),p=i(7259),z=i(88870),v=i(36788),m=i(8969),b=i(64204),Z=i(96519),C=i(17703),S=i(88493),x=i(45727),f=i(8181),$=i(57484);let w=(0,l.withCardStateProvider)(e=>{var t,i;let w=(0,l.useCardState)(),y=(0,m.a2)({onNextStep:()=>w.setError(void 0)}),L=(0,o.useContext)(r.Hs),P=(0,n.cL)(),A=o.useRef(null),{createOrganization:T,isLoaded:k,setActive:_,userMemberships:I}=(0,n.eW)({userMemberships:$.AO.userMemberships}),{organization:B}=(0,n.o8)(),[D,O]=o.useState(),R=(0,v.Yp)("name","",{type:"text",label:(0,C.u1)("formFieldLabel__organizationName"),placeholder:(0,C.u1)("formFieldInputPlaceholder__organizationName")}),K=(0,v.Yp)("slug","",{type:"text",label:(0,C.u1)("formFieldLabel__organizationSlug"),placeholder:(0,C.u1)("formFieldInputPlaceholder__organizationSlug")}),F=!!R.value,N=async t=>{if((t.preventDefault(),F)&&k)try{var i,a;let t={name:R.value};e.hideSlug||(t.slug=K.value);let n=await T(t);if(D&&await n.setLogo({file:D}),A.current=n,await _({organization:n}),L)return void await P.__internal_navigateToTaskIfAvailable({redirectUrlComplete:L.redirectUrlComplete});if(null==(i=I.revalidate)||i.call(I),null!=(a=e.skipInvitationScreen)?a:1===n.maxAllowedMemberships)return W();y.nextStep()}catch(e){(0,z.S3)(e,[R,K],w.setError)}},W=()=>{var t,i;null==(t=e.navigateAfterCreateOrganization)||t.call(e,A.current),null==(i=e.onComplete)||i.call(e)},X=e=>{K.setValue(e)},H="organizationList"===e.flow?"subtitle":void 0;return(0,a.BX)(m.en,{...y.props,children:[(0,a.tZ)(d.Y,{headerTitle:null==e||null==(t=e.startPage)?void 0:t.headerTitle,headerSubtitle:null==e||null==(i=e.startPage)?void 0:i.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:H,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,a.BX)(s.l.Root,{onSubmit:N,sx:e=>({gap:e.space.$6}),children:[(0,a.tZ)(b.Col,{children:(0,a.tZ)(f.D,{organization:{name:R.value},onAvatarChange:async e=>await O(e),onAvatarRemove:D?()=>(w.setIdle(),O(null)):null,avatarPreviewPlaceholder:(0,a.tZ)(g.h,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,a.tZ)(b.Icon,{size:"md",icon:Z.gq,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,a.tZ)(s.l.ControlRow,{elementId:R.id,children:(0,a.tZ)(s.l.PlainInput,{...R.props,onChange:e=>{R.setValue(e.target.value),X((0,p.q)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),!e.hideSlug&&(0,a.tZ)(s.l.ControlRow,{elementId:K.id,children:(0,a.tZ)(s.l.PlainInput,{...K.props,onChange:e=>{X(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,a.BX)(c.K,{sx:e=>({marginTop:e.space.$none}),children:[(0,a.tZ)(s.l.SubmitButton,{block:!1,isDisabled:!F,localizationKey:(0,C.u1)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,a.tZ)(s.l.ResetButton,{localizationKey:(0,C.u1)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,a.tZ)(d.Y,{headerTitle:(0,C.u1)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:H,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:B&&(0,a.tZ)(S.l,{resetButtonLabel:(0,C.u1)("createOrganization.invitePage.formButtonReset"),onSuccess:y.nextStep,onReset:W})}),(0,a.BX)(b.Col,{children:[(0,a.tZ)(u.h.Root,{children:(0,a.tZ)(u.h.Title,{localizationKey:(0,C.u1)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,a.tZ)(h.I,{contents:(0,a.tZ)(x.a,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:W})]})]})})},30683:function(e,t,i){i.r(t),i.d(t,{OrganizationList:()=>M});var a=i(79109),n=i(11576),o=i(64204),r=i(24676);i(65223);var l=i(83799),s=i(69144),c=i(42305),d=i(92418),u=i(2672),g=i(92654),h=i(12464),p=i(96519),z=i(91816),v=i(35973),m=i(48774),b=i(51217);let Z=e=>(0,a.tZ)(o.Col,{elementDescriptor:o.descriptors.organizationListPreviewItems,sx:e=>({maxHeight:"calc(8 * ".concat(e.sizes.$12,")"),overflowY:"auto",borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,...b.common.unstyledScrollbar(e)}),children:e.children}),C=e=>({padding:"".concat(e.space.$4," ").concat(e.space.$5)}),S=e=>({color:e.colors.$colorForeground,":hover":{color:e.colors.$colorForeground}}),x=e=>(0,a.BX)(o.Flex,{align:"center",gap:2,sx:[e=>({minHeight:"unset",justifyContent:"space-between",borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100}),C],elementDescriptor:o.descriptors.organizationListPreviewItem,children:[(0,a.tZ)(v.Z,{elementId:"organizationList",mainIdentifierSx:S,organization:e.organizationData}),e.children]}),f=(0,s.forwardRef)((e,t)=>(0,a.tZ)(o.Box,{ref:t,sx:e=>({width:"100%",height:e.space.$12,position:"relative"}),children:(0,a.tZ)(o.Box,{sx:{margin:"auto",position:"absolute",left:"50%",top:"50%",transform:"translateY(-50%) translateX(-50%)"},children:(0,a.tZ)(o.Spinner,{size:"sm",colorScheme:"primary",elementDescriptor:o.descriptors.spinner})})})),$=e=>(0,a.tZ)(o.Button,{elementDescriptor:o.descriptors.organizationListPreviewItemActionButton,textVariant:"buttonSmall",variant:"outline",size:"xs",...e}),w=e=>(0,a.tZ)(m.K,{elementDescriptor:o.descriptors.organizationListPreviewButton,sx:[C],icon:p.nR,...e});var y=i(88870),L=i(57484),P=i(62915),A=i(86988),T=i(17703);let k=(0,u.withCardStateProvider)(e=>{let t=(0,u.useCardState)(),{navigateAfterSelectOrganization:i}=(0,n.useOrganizationListContext)(),{isLoaded:o,setActive:r}=(0,l.eW)(),c=(0,l.cL)(),d=(0,s.useContext)(A.Hs);return o?(0,a.tZ)(w,{onClick:()=>{let a;return a=e.organization,t.runAsync(async()=>{if(await r({organization:a}),d)return c.__internal_navigateToTaskIfAvailable({redirectUrlComplete:d.redirectUrlComplete});await i(a)})},children:(0,a.tZ)(v.Z,{elementId:"organizationList",mainIdentifierSx:S,organization:e.organization})}):null}),_=(0,u.withCardStateProvider)(()=>{let e=(0,u.useCardState)(),{hidePersonal:t,navigateAfterSelectPersonal:i}=(0,n.useOrganizationListContext)(),{isLoaded:o,setActive:r}=(0,l.eW)(),{user:s}=(0,l.aF)();if(!s)return null;let{username:c,primaryEmailAddress:d,primaryPhoneNumber:g,...h}=s;return t?null:(0,a.tZ)(w,{onClick:()=>{if(o)return e.runAsync(async()=>{await r({organization:null}),await i(s)})},children:(0,a.tZ)(P.g,{user:h,mainIdentifierSx:S,title:(0,T.u1)("organizationSwitcher.personalWorkspace")})})}),I={userMemberships:{infinite:!0},userInvitations:{infinite:!0},userSuggestions:{infinite:!0,status:["pending","accepted"]}},B=e=>{let t=(0,u.useCardState)();return(0,a.tZ)($,{isLoading:t.isLoading,onClick:e.onAccept,localizationKey:(0,o.localizationKeys)("organizationList.action__invitationAccept")})},D=(0,u.withCardStateProvider)(e=>{let t=(0,u.useCardState)(),{getOrganization:i}=(0,l.cL)(),[n,o]=(0,s.useState)(null),{userInvitations:r}=(0,l.eW)({userInvitations:I.userInvitations,userMemberships:I.userMemberships});return n?(0,a.tZ)(k,{organization:n}):(0,a.tZ)(x,{organizationData:e.publicOrganizationData,children:(0,a.tZ)(B,{onAccept:()=>t.runAsync(async()=>[await e.accept(),await i(e.publicOrganizationData.id)]).then(e=>{var t;let[i,a]=e;null==r||null==(t=r.setData)||t.call(r,e=>(0,L.Sz)(i,e,"negative")),o(a)}).catch(e=>(0,y.S3)(e,[],t.setError))})})}),O=e=>{let t=(0,u.useCardState)(),{userSuggestions:i}=(0,l.eW)({userSuggestions:I.userSuggestions});return"accepted"===e.status?(0,a.tZ)(o.Text,{colorScheme:"secondary",localizationKey:(0,o.localizationKeys)("organizationList.suggestionsAcceptedLabel")}):(0,a.tZ)($,{isLoading:t.isLoading,onClick:()=>t.runAsync(e.accept).then(e=>{var t;return null==i||null==(t=i.setData)?void 0:t.call(i,t=>(0,L.Sz)(e,t))}).catch(e=>(0,y.S3)(e,[],t.setError)),localizationKey:(0,o.localizationKeys)("organizationList.action__suggestionsAccept")})},R=(0,u.withCardStateProvider)(e=>(0,a.tZ)(x,{organizationData:e.publicOrganizationData,children:(0,a.tZ)(O,{...e})})),K=()=>{let{userMemberships:e,userInvitations:t,userSuggestions:i}=(0,l.eW)(I),{ref:a}=(0,h.YD)({threshold:0,onChange:a=>{var n,o,r;a&&(e.hasNextPage?null==(n=e.fetchNext)||n.call(e):t.hasNextPage?null==(o=t.fetchNext)||o.call(t):null==(r=i.fetchNext)||r.call(i))}});return{userMemberships:e,userInvitations:t,userSuggestions:i,ref:a}},F=e=>{let{onCreateOrganizationClick:t}=e,{user:i}=(0,l.aF)();return(null==i?void 0:i.createOrganizationEnabled)?(0,a.tZ)(c.aU,{elementDescriptor:o.descriptors.organizationListCreateOrganizationActionButton,icon:p.mm,label:(0,o.localizationKeys)("organizationList.action__createOrganization"),onClick:t,sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,padding:"".concat(e.space.$5," ").concat(e.space.$5)}),iconSx:e=>({width:e.sizes.$9,height:e.sizes.$6})}):null},N=(0,u.withCardStateProvider)(()=>{let e=(0,u.useCardState)(),{userMemberships:t,userSuggestions:i,userInvitations:r}=K(),l=(null==t?void 0:t.isLoading)||(null==r?void 0:r.isLoading)||(null==i?void 0:i.isLoading),s=!!((null==t?void 0:t.count)||(null==r?void 0:r.count)||(null==i?void 0:i.count)),{hidePersonal:c}=(0,n.useOrganizationListContext)();return(0,a.BX)(d.Z.Root,{children:[(0,a.BX)(d.Z.Content,{sx:e=>({padding:"".concat(e.space.$8," ").concat(e.space.$none," ").concat(e.space.$none)}),children:[(0,a.tZ)(d.Z.Alert,{sx:e=>({margin:"".concat(e.space.$none," ").concat(e.space.$5)}),children:e.error}),l&&(0,a.tZ)(o.Flex,{direction:"row",align:"center",justify:"center",sx:e=>({height:"100%",minHeight:e.sizes.$60}),children:(0,a.tZ)(o.Spinner,{size:"lg",colorScheme:"primary",elementDescriptor:o.descriptors.spinner})}),!l&&(0,a.tZ)(W,{showListInitially:!(c&&!s)})]}),(0,a.tZ)(d.Z.Footer,{})]})}),W=e=>{let{showListInitially:t}=e,{navigateAfterCreateOrganization:i,skipInvitationScreen:r,hideSlug:l}=(0,n.useOrganizationListContext)(),[c,d]=(0,s.useState)(!t);return(0,a.BX)(a.HY,{children:[!c&&(0,a.tZ)(X,{onCreateOrganizationClick:()=>d(!0)}),c&&(0,a.tZ)(o.Box,{sx:e=>({padding:"".concat(e.space.$none," ").concat(e.space.$5," ").concat(e.space.$5)}),children:(0,a.tZ)(z.$,{flow:"organizationList",startPage:{headerTitle:(0,o.localizationKeys)("organizationList.createOrganization")},skipInvitationScreen:r,navigateAfterCreateOrganization:e=>i(e).then(()=>d(!1)),onCancel:t&&c?()=>d(!1):void 0,hideSlug:l})})]})},X=e=>{var t,i,r;let l=(0,n.useEnvironment)(),{ref:s,userMemberships:d,userSuggestions:u,userInvitations:h}=K(),{hidePersonal:p}=(0,n.useOrganizationListContext)(),z=(null==d?void 0:d.isLoading)||(null==h?void 0:h.isLoading)||(null==u?void 0:u.isLoading),v=(null==d?void 0:d.hasNextPage)||(null==h?void 0:h.hasNextPage)||(null==u?void 0:u.hasNextPage),m=null==(t=h.data)?void 0:t.filter(e=>!!e),b=null==(i=u.data)?void 0:i.filter(e=>!!e);return(0,a.BX)(a.HY,{children:[(0,a.BX)(g.h.Root,{sx:e=>({padding:"".concat(e.space.$none," ").concat(e.space.$8)}),children:[(0,a.tZ)(g.h.Title,{localizationKey:(0,o.localizationKeys)(p?"organizationList.titleWithoutPersonal":"organizationList.title")}),(0,a.tZ)(g.h.Subtitle,{localizationKey:(0,o.localizationKeys)("organizationList.subtitle",{applicationName:l.displayConfig.applicationName})})]}),(0,a.tZ)(o.Col,{elementDescriptor:o.descriptors.main,children:(0,a.tZ)(Z,{children:(0,a.BX)(c.eX,{role:"menu",children:[(0,a.tZ)(_,{}),(d.count||0)>0&&(null==(r=d.data)?void 0:r.map(e=>(0,a.tZ)(k,{...e},e.id))),!d.hasNextPage&&(null==m?void 0:m.map(e=>(0,a.tZ)(D,{...e},e.id))),!d.hasNextPage&&!h.hasNextPage&&(null==b?void 0:b.map(e=>(0,a.tZ)(R,{...e},e.id))),(v||z)&&(0,a.tZ)(f,{ref:s}),(0,a.tZ)(F,{onCreateOrganizationClick:()=>{e.onCreateOrganizationClick()}})]})})})]})},H=(0,n.withCoreUserGuard)(N),M=()=>(0,a.tZ)(o.Flow.Root,{flow:"organizationList",children:(0,a.tZ)(o.Flow.Part,{children:(0,a.tZ)(r.Switch,{children:(0,a.tZ)(r.Route,{children:(0,a.tZ)(H,{})})})})})}}]);