npm - @clerk/ui - Versions diffs - 1.0.0-canary.v20260105165902 → 1.0.0-canary.v20260105220914 - Mend

@clerk/ui 1.0.0-canary.v20260105165902 → 1.0.0-canary.v20260105220914

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/573_ui_f1759e_1.0.0-canary.v20260105220914.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["573"],{33934:function(e,l,t){t.d(l,{B:()=>y}),t(22501),t(88711),t(32880),t(25902),t(56359),t(894),t(6373),t(63418),t(93412),t(19161),t(95055);var i=t(14518),n=t(73610),r=t(21210),o=t(35074),a=t(63269),s=t(52454),d=t(11475),c=t(86212),u=t(4468),p=t(23990),h=t(8640),m=t(97697),v=t(18272),g=t(33486),f=t(10078),b=t(22861),Y=t(37591),_=t(94482);let z=e=>/^\S+@\S+\.\S+$/.test(e),y=e=>{let{onSuccess:l,onReset:t,resetButtonLabel:m}=e,{organization:g,invitations:_}=(0,r.Z5)({invitations:{pageSize:10,keepPreviousData:!0}}),y=(0,a.f0)(),{t:D,locale:$}=(0,f._)(),[w,k]=(0,o.useState)(!1),F=(0,h.tJ)("emailAddress","",{type:"text",label:(0,b.G)("formFieldLabel__emailAddresses")}),P=S(),C=(0,h.tJ)("role","",{label:(0,b.G)("formFieldLabel__role")});if((0,o.useEffect)(()=>{!C.value&&P&&C.setValue(P)},[P,C]),!g)return null;let{props:{setError:A,setWarning:E,setSuccess:G,setInfo:T,isFocused:K,validatePassword:M,setHasPassedComplexity:R,hasPassedComplexity:B,feedback:I,feedbackType:L,clearFeedback:j,...V}}=F,W=(!!F.value.length||w)&&!!C.value;return(0,i.FD)(s.l.Root,{onSubmit:e=>{if(e.preventDefault(),!W)return;let t=new FormData(e.currentTarget);return g.inviteMembers({emailAddresses:F.value.split(","),role:t.get("role")}).then(async()=>{var e;return await (null==_||null==(e=_.revalidate)?void 0:e.call(_)),null==l?void 0:l()}).catch(e=>{var l,t,i,r,o,a,s,d,c,h;let m,v;if(!(0,n.$R)(e))return void(0,u.H4)(e,[],y.setError);switch(m=new Set([...null!=(c=null==(s=(a=e.errors[0]).meta)?void 0:s.emailAddresses)?c:[],...null!=(h=null==(d=a.meta)?void 0:d.identifiers)?h:[]]),v=F.value.split(","),F.setValue(v.filter(e=>!m.has(e)).join(",")),null==(t=e.errors)||null==(l=t[0])?void 0:l.code){case"duplicate_record":{let l=(null==(i=e.errors[0].meta)?void 0:i.emailAddresses)||[];y.setError(D((0,b.G)("organizationProfile.invitePage.detailsTitle__inviteFailed",{email_addresses:(0,p.kS)(l,$)})));break}case"already_a_member_in_organization":{let l=null==(r=(null!=(o=e.errors[0].longMessage)?o:"").match(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/))?void 0:r[0];(0,u.H4)(e,[],e=>l?y.setError(D((0,b.G)("unstable__errors.already_a_member_in_organization",{email:l}))):y.setError(e));break}default:(0,u.H4)(e,[],y.setError)}})},children:[(0,i.Y)(s.l.ControlRow,{elementId:F.id,children:(0,i.Y)(c.F,{...V,autoFocus:!0,validate:z,sx:{width:"100%"},validateUnsubmittedEmail:e=>k(z(e)),placeholder:(0,b.G)("formFieldInputPlaceholder__emailAddresses")})}),(0,i.FD)(v.so,{align:"center",justify:"between",sx:e=>({marginTop:e.space.$2,gap:e.space.$4,flexWrap:"wrap",[Y.g.sm]:{justifyContent:"center"}}),children:[(0,i.Y)(x,{...C}),(0,i.FD)(d.c,{sx:e=>({margin:e.space.$none,flexWrap:"wrap",justifyContent:"center"}),children:[(0,i.Y)(s.l.SubmitButton,{block:!1,isDisabled:!W,localizationKey:(0,b.G)("organizationProfile.invitePage.formButtonPrimary__continue")}),(0,i.Y)(s.l.ResetButton,{localizationKey:m||(0,b.G)("userProfile.formButtonReset"),block:!1,onClick:t})]})]})]})},x=e=>{let{options:l,isLoading:t,hasRoleSetMigration:n}=(0,g.x)(),{t:r}=(0,f._)();return(0,i.Y)(s.l.ControlRow,{elementId:e.id,children:(0,i.Y)(v.so,{direction:"col",gap:2,children:(0,i.Y)(_.Vo,{...e.props,roles:l,isDisabled:t||n,onChange:l=>e.setValue(l),triggerSx:e=>({minWidth:e.sizes.$40,justifyContent:"space-between",display:"flex"}),optionListSx:e=>({minWidth:e.sizes.$48}),prefixLocalizationKey:"".concat(r((0,b.G)("formFieldLabel__role")),":")})})})},S=()=>{let{options:e}=(0,g.x)(),{organizationSettings:l}=(0,m.O)(),t=l.domains.defaultRole;return t||(null==e?void 0:e.length)!==1||(t=e[0].value),t}},53100:function(e,l,t){t.d(l,{D:()=>g,k:()=>f});var i=t(14518),n=t(21210),r=t(63269),o=t(23549),a=t(54003),s=t(26370),d=t(46245),c=t(22861),u=t(18272),p=t(58920),h=t(92513),m=t(74421),v=t(33934);let g=(0,r.dm)(e=>{let{close:l}=(0,h.D5)(),{onReset:t=l}=e,a=(0,c.G)("organizationProfile.invitePage.title"),u=(0,c.G)("organizationProfile.invitePage.subtitle"),p=(0,r.f0)(),m=(0,d.X)({onNextStep:()=>p.setError(void 0)}),{organization:g}=(0,n.Z5)();return g?(0,i.FD)(d.s,{...m.props,children:[(0,i.Y)(o.M,{headerTitle:a,headerSubtitle:u,children:(0,i.Y)(v.B,{onSuccess:m.nextStep,onReset:t})}),(0,i.Y)(s.B,{title:a,onFinish:l,contents:(0,i.Y)(f,{})})]}):null}),f=()=>(0,i.FD)(u.so,{direction:"col",center:!0,gap:4,children:[(0,i.Y)(a.A,{boxElementDescriptor:p.$z.invitationsSentIconBox,iconElementDescriptor:p.$z.invitationsSentIcon,icon:m.A}),(0,i.Y)(u.EY,{localizationKey:(0,c.G)("organizationProfile.invitePage.successMessage")})]})},94482:function(e,l,t){t.d(l,{Vo:()=>v,Yq:()=>m,bQ:()=>p}),t(19161),t(22239),t(88711),t(85074);var i=t(14518),n=t(35074),r=t(18819),o=t(41586),a=t(18272),s=t(58920),d=t(10078),c=t(22861),u=t(33486);let p=e=>{let{headers:l,page:t,onPageChange:n,rows:o,isLoading:d,itemCount:c,itemsPerPage:u,pageCount:p,emptyStateLocalizationKey:m}=e,v=c>0?Math.max(0,(t-1)*u)+1:0,g=Math.min(t*u,c);return(0,i.FD)(a.fv,{gap:4,sx:{width:"100%"},children:[(0,i.Y)(a.so,{sx:e=>({overflowX:"auto",padding:e.space.$1}),children:(0,i.FD)(a.XI,{children:[(0,i.Y)(a.d8,{children:(0,i.Y)(a.Tr,{children:l.map((e,l)=>(0,i.Y)(a.Th,{elementDescriptor:s.$z.tableHead,localizationKey:e},l))})}),(0,i.Y)(a.NN,{children:d?(0,i.Y)(a.Tr,{children:(0,i.Y)(a.Td,{colSpan:4,children:(0,i.Y)(a.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:s.$z.spinner})})}):o.length?o:(0,i.Y)(h,{localizationKey:m},"empty")})]})}),p>1&&(0,i.Y)(r.d,{count:p,page:t,onChange:n,siblingCount:1,rowInfo:{allRowsCount:c,startingRow:v,endingRow:g}})]})},h=e=>(0,i.Y)(a.Tr,{children:(0,i.Y)(a.Td,{colSpan:4,children:(0,i.Y)(a.EY,{localizationKey:e.localizationKey,sx:{margin:"auto",display:"block",width:"fit-content"}})})}),m=e=>(0,i.Y)(a.Tr,{...e,sx:e=>({":hover":{backgroundColor:e.colors.$neutralAlpha50}})}),v=e=>{let{value:l,fallbackLabel:t,roles:r,onChange:s,isDisabled:p,triggerSx:h,optionListSx:m,prefixLocalizationKey:v}=e,{localizeCustomRole:f}=(0,u.l)(),b=(0,n.useMemo)(()=>[...r||[]],[r]),Y=(0,n.useMemo)(()=>b.find(e=>e.value===l),[b,l]),{t:_}=(0,d._)(),z=(0,n.useMemo)(()=>b.map(e=>({value:e.value,label:f(e.value)||e.label})),[b,f]);return(0,i.FD)(o.l6,{elementId:"role",options:z,value:l,placeholder:_((0,c.G)("organizationProfile.invitePage.selectDropdown__role")),onChange:e=>s(e.value),renderOption:(e,l,t)=>(0,i.Y)(g,{isSelected:t,option:e}),children:[(0,i.Y)("input",{name:"role",type:"hidden",value:l}),(0,i.Y)(o.JC,{sx:h||(e=>({color:e.colors.$colorForeground,backgroundColor:"transparent",textWrap:"nowrap"})),isDisabled:p||!!l&&b.length>0&&!Y,children:(null==Y?void 0:Y.label)||(null==Y?void 0:Y.value)?(0,i.FD)(a.so,{as:"span",gap:1,children:[v&&(0,i.Y)(a.EY,{as:"span",colorScheme:"secondary",localizationKey:v}),(0,i.Y)(a.EY,{as:"span",colorScheme:"body",children:f(null==Y?void 0:Y.value)||(null==Y?void 0:Y.label)})]}):t?(0,i.Y)(a.EY,{as:"span",colorScheme:"body",children:t}):null}),(0,i.Y)(o.UL,{sx:m})]})},g=(0,n.memo)(e=>{let{option:l,isSelected:t,sx:n,...r}=e;return(0,i.Y)(a.so,{sx:[e=>({width:"100%",padding:"".concat(e.space.$2," ").concat(e.space.$4),borderRadius:e.radii.$md,"&:hover":{backgroundColor:e.colors.$neutralAlpha100},'&[data-focused="true"]':{backgroundColor:e.colors.$neutralAlpha150}}),n],...r,children:(0,i.Y)(a.EY,{variant:"subtitle",children:null==l?void 0:l.label})})})},75377:function(e,l,t){t.d(l,{i:()=>d});var i=t(14518),n=t(63817),r=t(36890),o=t(18272),a=t(58920),s=t(22861);let d=e=>{let{organization:l,...t}=e;return(0,i.FD)(o.fv,{elementDescriptor:a.$z.organizationAvatarUploaderContainer,children:[(0,i.Y)(o.EY,{variant:"subtitle",sx:e=>({textAlign:"left",marginBottom:e.space.$2}),localizationKey:(0,s.G)("organizationProfile.start.profileSection.uploadAction__title")}),(0,i.Y)(n.k,{...t,title:(0,s.G)("userProfile.profilePage.imageFormTitle"),avatarPreview:(0,i.Y)(r.h,{size:e=>e.sizes.$16,...l})})]})}},23689:function(e,l,t){t.d(l,{l_:()=>n,mu:()=>i}),t(19161),t(22239),t(95055);let i={userMemberships:{infinite:!0},userInvitations:{infinite:!0},userSuggestions:{infinite:!0,status:["pending","accepted"]}},n=(e,l,t)=>{var i;if(void 0===l)return[{data:[e],total_count:1}];let n=(null==l||null==(i=l[l.length-1])?void 0:i.total_count)||1;return l.map(l=>{if(void 0===l)return l;let i=l.data.map(l=>l.id===e.id?{...e}:l);return{...l,data:i,total_count:"negative"===t?n-1:n}})}}}]);

package/dist/573_ui_f48c1b_1.0.0-canary.v20260105220914.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["573"],{3934:function(e,t,i){i.d(t,{B:()=>y});var r=i(4518),l=i(3610),a=i(1210),o=i(5074),n=i(3269),s=i(2454),c=i(1475),d=i(6212),u=i(4468),p=i(3990),h=i(8640),m=i(7697),g=i(8272),f=i(3486),v=i(78),b=i(2861),Y=i(7591),_=i(4482);let z=e=>/^\S+@\S+\.\S+$/.test(e),y=e=>{let{onSuccess:t,onReset:i,resetButtonLabel:m}=e,{organization:f,invitations:_}=(0,a.Z5)({invitations:{pageSize:10,keepPreviousData:!0}}),y=(0,n.f0)(),{t:$,locale:D}=(0,v._)(),[w,k]=(0,o.useState)(!1),F=(0,h.tJ)("emailAddress","",{type:"text",label:(0,b.G)("formFieldLabel__emailAddresses")}),P=S(),C=(0,h.tJ)("role","",{label:(0,b.G)("formFieldLabel__role")});if((0,o.useEffect)(()=>{!C.value&&P&&C.setValue(P)},[P,C]),!f)return null;let{props:{setError:A,setWarning:E,setSuccess:G,setInfo:T,isFocused:K,validatePassword:M,setHasPassedComplexity:R,hasPassedComplexity:B,feedback:I,feedbackType:L,clearFeedback:j,...V}}=F,W=(!!F.value.length||w)&&!!C.value;return(0,r.FD)(s.l.Root,{onSubmit:e=>{if(e.preventDefault(),!W)return;let i=new FormData(e.currentTarget);return f.inviteMembers({emailAddresses:F.value.split(","),role:i.get("role")}).then(async()=>(await _?.revalidate?.(),t?.())).catch(e=>{var t;let i,r;if(!(0,l.$R)(e))return void(0,u.H4)(e,[],y.setError);switch(t=e.errors[0],i=new Set([...t.meta?.emailAddresses??[],...t.meta?.identifiers??[]]),r=F.value.split(","),F.setValue(r.filter(e=>!i.has(e)).join(",")),e.errors?.[0]?.code){case"duplicate_record":{let t=e.errors[0].meta?.emailAddresses||[];y.setError($((0,b.G)("organizationProfile.invitePage.detailsTitle__inviteFailed",{email_addresses:(0,p.kS)(t,D)})));break}case"already_a_member_in_organization":{let t=e.errors[0].longMessage??"",i=t.match(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/)?.[0];(0,u.H4)(e,[],e=>i?y.setError($((0,b.G)("unstable__errors.already_a_member_in_organization",{email:i}))):y.setError(e));break}default:(0,u.H4)(e,[],y.setError)}})},children:[(0,r.Y)(s.l.ControlRow,{elementId:F.id,children:(0,r.Y)(d.F,{...V,autoFocus:!0,validate:z,sx:{width:"100%"},validateUnsubmittedEmail:e=>k(z(e)),placeholder:(0,b.G)("formFieldInputPlaceholder__emailAddresses")})}),(0,r.FD)(g.so,{align:"center",justify:"between",sx:e=>({marginTop:e.space.$2,gap:e.space.$4,flexWrap:"wrap",[Y.g.sm]:{justifyContent:"center"}}),children:[(0,r.Y)(x,{...C}),(0,r.FD)(c.c,{sx:e=>({margin:e.space.$none,flexWrap:"wrap",justifyContent:"center"}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!W,localizationKey:(0,b.G)("organizationProfile.invitePage.formButtonPrimary__continue")}),(0,r.Y)(s.l.ResetButton,{localizationKey:m||(0,b.G)("userProfile.formButtonReset"),block:!1,onClick:i})]})]})]})},x=e=>{let{options:t,isLoading:i,hasRoleSetMigration:l}=(0,f.x)(),{t:a}=(0,v._)();return(0,r.Y)(s.l.ControlRow,{elementId:e.id,children:(0,r.Y)(g.so,{direction:"col",gap:2,children:(0,r.Y)(_.Vo,{...e.props,roles:t,isDisabled:i||l,onChange:t=>e.setValue(t),triggerSx:e=>({minWidth:e.sizes.$40,justifyContent:"space-between",display:"flex"}),optionListSx:e=>({minWidth:e.sizes.$48}),prefixLocalizationKey:`${a((0,b.G)("formFieldLabel__role"))}:`})})})},S=()=>{let{options:e}=(0,f.x)(),{organizationSettings:t}=(0,m.O)(),i=t.domains.defaultRole;return i||e?.length!==1||(i=e[0].value),i}},3100:function(e,t,i){i.d(t,{D:()=>f,k:()=>v});var r=i(4518),l=i(1210),a=i(3269),o=i(3549),n=i(6384),s=i(6370),c=i(6245),d=i(2861),u=i(8272),p=i(8920),h=i(2513),m=i(4421),g=i(3934);let f=(0,a.dm)(e=>{let{close:t}=(0,h.D5)(),{onReset:i=t}=e,n=(0,d.G)("organizationProfile.invitePage.title"),u=(0,d.G)("organizationProfile.invitePage.subtitle"),p=(0,a.f0)(),m=(0,c.X)({onNextStep:()=>p.setError(void 0)}),{organization:f}=(0,l.Z5)();return f?(0,r.FD)(c.s,{...m.props,children:[(0,r.Y)(o.M,{headerTitle:n,headerSubtitle:u,children:(0,r.Y)(g.B,{onSuccess:m.nextStep,onReset:i})}),(0,r.Y)(s.B,{title:n,onFinish:t,contents:(0,r.Y)(v,{})})]}):null}),v=()=>(0,r.FD)(u.so,{direction:"col",center:!0,gap:4,children:[(0,r.Y)(n.A,{boxElementDescriptor:p.$z.invitationsSentIconBox,iconElementDescriptor:p.$z.invitationsSentIcon,icon:m.A}),(0,r.Y)(u.EY,{localizationKey:(0,d.G)("organizationProfile.invitePage.successMessage")})]})},4482:function(e,t,i){i.d(t,{Vo:()=>g,Yq:()=>m,bQ:()=>p});var r=i(4518),l=i(5074),a=i(8819),o=i(1586),n=i(8272),s=i(8920),c=i(78),d=i(2861),u=i(3486);let p=e=>{let{headers:t,page:i,onPageChange:l,rows:o,isLoading:c,itemCount:d,itemsPerPage:u,pageCount:p,emptyStateLocalizationKey:m}=e,g=d>0?Math.max(0,(i-1)*u)+1:0,f=Math.min(i*u,d);return(0,r.FD)(n.fv,{gap:4,sx:{width:"100%"},children:[(0,r.Y)(n.so,{sx:e=>({overflowX:"auto",padding:e.space.$1}),children:(0,r.FD)(n.XI,{children:[(0,r.Y)(n.d8,{children:(0,r.Y)(n.Tr,{children:t.map((e,t)=>(0,r.Y)(n.Th,{elementDescriptor:s.$z.tableHead,localizationKey:e},t))})}),(0,r.Y)(n.NN,{children:c?(0,r.Y)(n.Tr,{children:(0,r.Y)(n.Td,{colSpan:4,children:(0,r.Y)(n.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:s.$z.spinner})})}):o.length?o:(0,r.Y)(h,{localizationKey:m},"empty")})]})}),p>1&&(0,r.Y)(a.d,{count:p,page:i,onChange:l,siblingCount:1,rowInfo:{allRowsCount:d,startingRow:g,endingRow:f}})]})},h=e=>(0,r.Y)(n.Tr,{children:(0,r.Y)(n.Td,{colSpan:4,children:(0,r.Y)(n.EY,{localizationKey:e.localizationKey,sx:{margin:"auto",display:"block",width:"fit-content"}})})}),m=e=>(0,r.Y)(n.Tr,{...e,sx:e=>({":hover":{backgroundColor:e.colors.$neutralAlpha50}})}),g=e=>{let{value:t,fallbackLabel:i,roles:a,onChange:s,isDisabled:p,triggerSx:h,optionListSx:m,prefixLocalizationKey:g}=e,{localizeCustomRole:v}=(0,u.l)(),b=(0,l.useMemo)(()=>[...a||[]],[a]),Y=(0,l.useMemo)(()=>b.find(e=>e.value===t),[b,t]),{t:_}=(0,c._)(),z=(0,l.useMemo)(()=>b.map(e=>({value:e.value,label:v(e.value)||e.label})),[b,v]);return(0,r.FD)(o.l6,{elementId:"role",options:z,value:t,placeholder:_((0,d.G)("organizationProfile.invitePage.selectDropdown__role")),onChange:e=>s(e.value),renderOption:(e,t,i)=>(0,r.Y)(f,{isSelected:i,option:e}),children:[(0,r.Y)("input",{name:"role",type:"hidden",value:t}),(0,r.Y)(o.JC,{sx:h||(e=>({color:e.colors.$colorForeground,backgroundColor:"transparent",textWrap:"nowrap"})),isDisabled:p||!!t&&b.length>0&&!Y,children:Y?.label||Y?.value?(0,r.FD)(n.so,{as:"span",gap:1,children:[g&&(0,r.Y)(n.EY,{as:"span",colorScheme:"secondary",localizationKey:g}),(0,r.Y)(n.EY,{as:"span",colorScheme:"body",children:v(Y?.value)||Y?.label})]}):i?(0,r.Y)(n.EY,{as:"span",colorScheme:"body",children:i}):null}),(0,r.Y)(o.UL,{sx:m})]})},f=(0,l.memo)(e=>{let{option:t,isSelected:i,sx:l,...a}=e;return(0,r.Y)(n.so,{sx:[e=>({width:"100%",padding:`${e.space.$2} ${e.space.$4}`,borderRadius:e.radii.$md,"&:hover":{backgroundColor:e.colors.$neutralAlpha100},'&[data-focused="true"]':{backgroundColor:e.colors.$neutralAlpha150}}),l],...a,children:(0,r.Y)(n.EY,{variant:"subtitle",children:t?.label})})})},5377:function(e,t,i){i.d(t,{i:()=>c});var r=i(4518),l=i(3817),a=i(6890),o=i(8272),n=i(8920),s=i(2861);let c=e=>{let{organization:t,...i}=e;return(0,r.FD)(o.fv,{elementDescriptor:n.$z.organizationAvatarUploaderContainer,children:[(0,r.Y)(o.EY,{variant:"subtitle",sx:e=>({textAlign:"left",marginBottom:e.space.$2}),localizationKey:(0,s.G)("organizationProfile.start.profileSection.uploadAction__title")}),(0,r.Y)(l.k,{...i,title:(0,s.G)("userProfile.profilePage.imageFormTitle"),avatarPreview:(0,r.Y)(a.h,{size:e=>e.sizes.$16,...t})})]})}},3689:function(e,t,i){i.d(t,{l_:()=>l,mu:()=>r});let r={userMemberships:{infinite:!0},userInvitations:{infinite:!0},userSuggestions:{infinite:!0,status:["pending","accepted"]}},l=(e,t,i)=>{if(void 0===t)return[{data:[e],total_count:1}];let r=t?.[t.length-1]?.total_count||1;return t.map(t=>{if(void 0===t)return t;let l=t.data.map(t=>t.id===e.id?{...e}:t);return{...t,data:l,total_count:"negative"===i?r-1:r}})}}}]);

package/dist/ClerkUi.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { mountComponentRenderer } from "./Components.js";
 //#region src/ClerkUi.ts
 var ClerkUi = class {
-	static version = "1.0.0-canary.v20260105165902";
-	version = "1.0.0-canary.v20260105165902";
+	static version = "1.0.0-canary.v20260105220914";
+	version = "1.0.0-canary.v20260105220914";
 	#componentRenderer;
 	constructor(getClerk, getEnvironment, options, moduleManager) {
 		this.#componentRenderer = mountComponentRenderer(getClerk, getEnvironment, options, moduleManager);

package/dist/components/OrganizationProfile/ActiveMembersList.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { useOrganization, useUser } from "@clerk/shared/react";
 const ActiveMembersList = ({ memberships, pageSize }) => {
 	const card = useCardState();
 	const { organization } = useOrganization();
-	const { options, isLoading: loadingRoles } = useFetchRoles();
+	const { options, isLoading: loadingRoles, hasRoleSetMigration } = useFetchRoles();
 	if (!organization) return null;
 	const handleRoleChange = (membership) => (newRole) => card.runAsync(() => membership.update({ role: newRole })).catch((err) => handleError(err, [], card.setError));
 	const handleRemove = (membership) => async () => {
@@ -43,12 +43,13 @@ const ActiveMembersList = ({ memberships, pageSize }) => {
 			membership: m,
 			options,
 			onRoleChange: handleRoleChange(m),
-			onRemove: handleRemove(m)
+			onRemove: handleRemove(m),
+			hasRoleSetMigration
 		}, m.id))
 	});
 };
 const MemberRow = (props) => {
-	const { membership, onRemove, onRoleChange, options } = props;
+	const { membership, onRemove, onRoleChange, options, hasRoleSetMigration } = props;
 	const { localizeCustomRole } = useLocalizeCustomRoles();
 	const card = useCardState();
 	const { user } = useUser();
@@ -75,7 +76,7 @@ const MemberRow = (props) => {
 				children: localizeCustomRole(membership.role) || unlocalizedRoleLabel
 			}),
 			children: /* @__PURE__ */ jsx(RoleSelect, {
-				isDisabled: card.isLoading || !onRoleChange,
+				isDisabled: card.isLoading || !onRoleChange || hasRoleSetMigration,
 				value: membership.role,
 				fallbackLabel: membership.roleName,
 				onChange: onRoleChange,

package/dist/components/OrganizationProfile/ActiveMembersList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveMembersList.js","names":[],"sources":["../../../src/components/OrganizationProfile/ActiveMembersList.tsx"],"sourcesContent":["import { useOrganization, useUser } from '@clerk/shared/react';\nimport type { OrganizationMembershipResource } from '@clerk/shared/types';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { UserPreview } from '@/ui/elements/UserPreview';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { Protect } from '../../common/Gate';\nimport { Badge, Box, descriptors, localizationKeys, Td, Text } from '../../customizables';\nimport { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';\nimport { DataTable, RoleSelect, RowContainer } from './MemberListTable';\n\ntype ActiveMembersListProps = {\n memberships: ReturnType<typeof useOrganization>['memberships'];\n pageSize: number;\n};\n\nexport const ActiveMembersList = ({ memberships, pageSize }: ActiveMembersListProps) => {\n const card = useCardState();\n const { organization } = useOrganization();\n\n const { options, isLoading: loadingRoles } = useFetchRoles();\n\n if (!organization) {\n return null;\n }\n\n const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) =>\n card.runAsync(() => membership.update({ role: newRole })).catch(err => handleError(err, [], card.setError));\n\n const handleRemove = (membership: OrganizationMembershipResource) => async () => {\n return card\n .runAsync(async () => {\n const destroyedMembership = await membership.destroy();\n await memberships?.revalidate?.();\n return destroyedMembership;\n })\n .catch(err => handleError(err, [], card.setError));\n };\n\n return (\n <DataTable\n page={memberships?.page \|\| 1}\n onPageChange={n => memberships?.fetchPage?.(n)}\n itemCount={memberships?.count \|\| 0}\n pageCount={memberships?.pageCount \|\| 0}\n itemsPerPage={pageSize}\n isLoading={(memberships?.isLoading && !memberships?.data.length) \|\| loadingRoles}\n emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}\n headers={[\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),\n ]}\n rows={(memberships?.data \|\| []).map(m => (\n <MemberRow\n key={m.id}\n membership={m}\n options={options}\n onRoleChange={handleRoleChange(m)}\n onRemove={handleRemove(m)}\n />\n ))}\n />\n );\n};\n\n// TODO: Find a way to disable Role select based on last admin by using permissions\nconst MemberRow = (props: {\n membership: OrganizationMembershipResource;\n onRemove: () => unknown;\n options: Parameters<typeof RoleSelect>[0]['roles'];\n onRoleChange: (role: string) => unknown;\n}) => {\n const { membership, onRemove, onRoleChange, options } = props;\n const { localizeCustomRole } = useLocalizeCustomRoles();\n const card = useCardState();\n const { user } = useUser();\n\n const isCurrentUser = user?.id === membership.publicUserData?.userId;\n const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;\n\n return (\n <RowContainer>\n <Td>\n <UserPreview\n sx={{ maxWidth: '30ch' }}\n user={membership.publicUserData}\n subtitle={membership.publicUserData?.identifier}\n subtitleProps={{ variant: 'caption' }}\n badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}\n />\n </Td>\n <Td>\n <Box\n as='span'\n elementDescriptor={descriptors.formattedDate}\n elementId={descriptors.formattedDate.setId('tableCell')}\n >\n {membership.createdAt.toLocaleDateString()}\n </Box>\n </Td>\n <Td>\n <Protect\n permission={'org:sys_memberships:manage'}\n fallback={\n <Text sx={t => ({ opacity: t.opacity.$inactive })}>\n {localizeCustomRole(membership.role) \|\| unlocalizedRoleLabel}\n </Text>\n }\n >\n <RoleSelect\n isDisabled={card.isLoading \|\| !onRoleChange}\n value={membership.role}\n fallbackLabel={membership.roleName}\n onChange={onRoleChange}\n roles={options}\n />\n </Protect>\n </Td>\n <Td>\n <Protect permission={'org:sys_memberships:manage'}>\n <ThreeDotsMenu\n actions={[\n {\n label: localizationKeys('organizationProfile.membersPage.activeMembersTab.menuAction__remove'),\n isDestructive: true,\n onClick: onRemove,\n isDisabled: isCurrentUser,\n },\n ]}\n elementId={'member'}\n />\n </Protect>\n </Td>\n </RowContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,EAAE,aAAa,eAAuC;CACtF,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,iBAAiB,iBAAiB;CAE1C,MAAM,EAAE,SAAS,WAAW,~~iBAAiB~~,eAAe;~~AAE5D~~,KAAI,CAAC,aACH,QAAO;CAGT,MAAM,oBAAoB,gBAAgD,YACxE,KAAK,eAAe,WAAW,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;CAE7G,MAAM,gBAAgB,eAA+C,YAAY;AAC/E,SAAO,KACJ,SAAS,YAAY;GACpB,MAAM,sBAAsB,MAAM,WAAW,SAAS;AACtD,SAAM,aAAa,cAAc;AACjC,UAAO;IACP,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;AAGtD,QACE,oBAAC;EACC,MAAM,aAAa,QAAQ;EAC3B,eAAc,MAAK,aAAa,YAAY,EAAE;EAC9C,WAAW,aAAa,SAAS;EACjC,WAAW,aAAa,aAAa;EACrC,cAAc;EACd,WAAY,aAAa,aAAa,CAAC,aAAa,KAAK,UAAW;EACpE,2BAA2B,iBAAiB,yDAAyD;EACrG,SAAS;GACP,iBAAiB,qEAAqE;GACtF,iBAAiB,uEAAuE;GACxF,iBAAiB,qEAAqE;GACtF,iBAAiB,wEAAwE;GAC1F;EACD,OAAO,aAAa,QAAQ,EAAE,EAAE,KAAI,MAClC,oBAAC;GAEC,YAAY;GACH;GACT,cAAc,iBAAiB,EAAE;GACjC,UAAU,aAAa,EAAE;~~KAJpB~~,EAAE,~~GAKP~~,CACF;GACF;;AAKN,MAAM,aAAa,~~UAKb~~;CACJ,MAAM,EAAE,YAAY,UAAU,cAAc,~~YAAY~~;~~CACxD~~,MAAM,EAAE,uBAAuB,wBAAwB;CACvD,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,gBAAgB,MAAM,OAAO,WAAW,gBAAgB;CAC9D,MAAM,uBAAuB,SAAS,MAAK,MAAK,EAAE,UAAU,WAAW,KAAK,EAAE;AAE9E,QACE,qBAAC;EACC,oBAAC,gBACC,oBAAC;GACC,IAAI,EAAE,UAAU,QAAQ;GACxB,MAAM,WAAW;GACjB,UAAU,WAAW,gBAAgB;GACrC,eAAe,EAAE,SAAS,WAAW;GACrC,OAAO,iBAAiB,oBAAC,SAAM,iBAAiB,iBAAiB,aAAa,GAAI;IAClF,GACC;EACL,oBAAC,gBACC,oBAAC;GACC,IAAG;GACH,mBAAmB,YAAY;GAC/B,WAAW,YAAY,cAAc,MAAM,YAAY;aAEtD,WAAW,UAAU,oBAAoB;IACtC,GACH;EACL,oBAAC,gBACC,oBAAC;GACC,YAAY;GACZ,UACE,oBAAC;IAAK,KAAI,OAAM,EAAE,SAAS,EAAE,QAAQ,WAAW;cAC7C,mBAAmB,WAAW,KAAK,IAAI;KACnC;aAGT,oBAAC;IACC,YAAY,KAAK,aAAa,CAAC;IAC/B,OAAO,WAAW;IAClB,eAAe,WAAW;IAC1B,UAAU;IACV,OAAO;KACP;IACM,GACP;EACL,oBAAC,gBACC,oBAAC;GAAQ,YAAY;aACnB,oBAAC;IACC,SAAS,CACP;KACE,OAAO,iBAAiB,sEAAsE;KAC9F,eAAe;KACf,SAAS;KACT,YAAY;KACb,CACF;IACD,WAAW;KACX;IACM,GACP;KACQ"}
1	+ {"version":3,"file":"ActiveMembersList.js","names":[],"sources":["../../../src/components/OrganizationProfile/ActiveMembersList.tsx"],"sourcesContent":["import { useOrganization, useUser } from '@clerk/shared/react';\nimport type { OrganizationMembershipResource } from '@clerk/shared/types';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { UserPreview } from '@/ui/elements/UserPreview';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { Protect } from '../../common/Gate';\nimport { Badge, Box, descriptors, localizationKeys, Td, Text } from '../../customizables';\nimport { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';\nimport { DataTable, RoleSelect, RowContainer } from './MemberListTable';\n\ntype ActiveMembersListProps = {\n memberships: ReturnType<typeof useOrganization>['memberships'];\n pageSize: number;\n};\n\nexport const ActiveMembersList = ({ memberships, pageSize }: ActiveMembersListProps) => {\n const card = useCardState();\n const { organization } = useOrganization();\n\n const { options, isLoading: loadingRoles, hasRoleSetMigration } = useFetchRoles();\n\n if (!organization) {\n return null;\n }\n\n const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) =>\n card.runAsync(() => membership.update({ role: newRole })).catch(err => handleError(err, [], card.setError));\n\n const handleRemove = (membership: OrganizationMembershipResource) => async () => {\n return card\n .runAsync(async () => {\n const destroyedMembership = await membership.destroy();\n await memberships?.revalidate?.();\n return destroyedMembership;\n })\n .catch(err => handleError(err, [], card.setError));\n };\n\n return (\n <DataTable\n page={memberships?.page \|\| 1}\n onPageChange={n => memberships?.fetchPage?.(n)}\n itemCount={memberships?.count \|\| 0}\n pageCount={memberships?.pageCount \|\| 0}\n itemsPerPage={pageSize}\n isLoading={(memberships?.isLoading && !memberships?.data.length) \|\| loadingRoles}\n emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}\n headers={[\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),\n localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),\n ]}\n rows={(memberships?.data \|\| []).map(m => (\n <MemberRow\n key={m.id}\n membership={m}\n options={options}\n onRoleChange={handleRoleChange(m)}\n onRemove={handleRemove(m)}\n hasRoleSetMigration={hasRoleSetMigration}\n />\n ))}\n />\n );\n};\n\n// TODO: Find a way to disable Role select based on last admin by using permissions\nconst MemberRow = (props: {\n membership: OrganizationMembershipResource;\n onRemove: () => unknown;\n options: Parameters<typeof RoleSelect>[0]['roles'];\n onRoleChange: (role: string) => unknown;\n hasRoleSetMigration: boolean;\n}) => {\n const { membership, onRemove, onRoleChange, options, hasRoleSetMigration } = props;\n const { localizeCustomRole } = useLocalizeCustomRoles();\n const card = useCardState();\n const { user } = useUser();\n\n const isCurrentUser = user?.id === membership.publicUserData?.userId;\n const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;\n\n return (\n <RowContainer>\n <Td>\n <UserPreview\n sx={{ maxWidth: '30ch' }}\n user={membership.publicUserData}\n subtitle={membership.publicUserData?.identifier}\n subtitleProps={{ variant: 'caption' }}\n badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}\n />\n </Td>\n <Td>\n <Box\n as='span'\n elementDescriptor={descriptors.formattedDate}\n elementId={descriptors.formattedDate.setId('tableCell')}\n >\n {membership.createdAt.toLocaleDateString()}\n </Box>\n </Td>\n <Td>\n <Protect\n permission={'org:sys_memberships:manage'}\n fallback={\n <Text sx={t => ({ opacity: t.opacity.$inactive })}>\n {localizeCustomRole(membership.role) \|\| unlocalizedRoleLabel}\n </Text>\n }\n >\n <RoleSelect\n isDisabled={card.isLoading \|\| !onRoleChange \|\| hasRoleSetMigration}\n value={membership.role}\n fallbackLabel={membership.roleName}\n onChange={onRoleChange}\n roles={options}\n />\n </Protect>\n </Td>\n <Td>\n <Protect permission={'org:sys_memberships:manage'}>\n <ThreeDotsMenu\n actions={[\n {\n label: localizationKeys('organizationProfile.membersPage.activeMembersTab.menuAction__remove'),\n isDestructive: true,\n onClick: onRemove,\n isDisabled: isCurrentUser,\n },\n ]}\n elementId={'member'}\n />\n </Protect>\n </Td>\n </RowContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,EAAE,aAAa,eAAuC;CACtF,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,iBAAiB,iBAAiB;CAE1C,MAAM,EAAE,SAAS,WAAW,cAAc,wBAAwB,eAAe;AAEjF,KAAI,CAAC,aACH,QAAO;CAGT,MAAM,oBAAoB,gBAAgD,YACxE,KAAK,eAAe,WAAW,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;CAE7G,MAAM,gBAAgB,eAA+C,YAAY;AAC/E,SAAO,KACJ,SAAS,YAAY;GACpB,MAAM,sBAAsB,MAAM,WAAW,SAAS;AACtD,SAAM,aAAa,cAAc;AACjC,UAAO;IACP,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;AAGtD,QACE,oBAAC;EACC,MAAM,aAAa,QAAQ;EAC3B,eAAc,MAAK,aAAa,YAAY,EAAE;EAC9C,WAAW,aAAa,SAAS;EACjC,WAAW,aAAa,aAAa;EACrC,cAAc;EACd,WAAY,aAAa,aAAa,CAAC,aAAa,KAAK,UAAW;EACpE,2BAA2B,iBAAiB,yDAAyD;EACrG,SAAS;GACP,iBAAiB,qEAAqE;GACtF,iBAAiB,uEAAuE;GACxF,iBAAiB,qEAAqE;GACtF,iBAAiB,wEAAwE;GAC1F;EACD,OAAO,aAAa,QAAQ,EAAE,EAAE,KAAI,MAClC,oBAAC;GAEC,YAAY;GACH;GACT,cAAc,iBAAiB,EAAE;GACjC,UAAU,aAAa,EAAE;GACJ;KALhB,EAAE,GAMP,CACF;GACF;;AAKN,MAAM,aAAa,UAMb;CACJ,MAAM,EAAE,YAAY,UAAU,cAAc,SAAS,wBAAwB;CAC7E,MAAM,EAAE,uBAAuB,wBAAwB;CACvD,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,gBAAgB,MAAM,OAAO,WAAW,gBAAgB;CAC9D,MAAM,uBAAuB,SAAS,MAAK,MAAK,EAAE,UAAU,WAAW,KAAK,EAAE;AAE9E,QACE,qBAAC;EACC,oBAAC,gBACC,oBAAC;GACC,IAAI,EAAE,UAAU,QAAQ;GACxB,MAAM,WAAW;GACjB,UAAU,WAAW,gBAAgB;GACrC,eAAe,EAAE,SAAS,WAAW;GACrC,OAAO,iBAAiB,oBAAC,SAAM,iBAAiB,iBAAiB,aAAa,GAAI;IAClF,GACC;EACL,oBAAC,gBACC,oBAAC;GACC,IAAG;GACH,mBAAmB,YAAY;GAC/B,WAAW,YAAY,cAAc,MAAM,YAAY;aAEtD,WAAW,UAAU,oBAAoB;IACtC,GACH;EACL,oBAAC,gBACC,oBAAC;GACC,YAAY;GACZ,UACE,oBAAC;IAAK,KAAI,OAAM,EAAE,SAAS,EAAE,QAAQ,WAAW;cAC7C,mBAAmB,WAAW,KAAK,IAAI;KACnC;aAGT,oBAAC;IACC,YAAY,KAAK,aAAa,CAAC,gBAAgB;IAC/C,OAAO,WAAW;IAClB,eAAe,WAAW;IAC1B,UAAU;IACV,OAAO;KACP;IACM,GACP;EACL,oBAAC,gBACC,oBAAC;GAAQ,YAAY;aACnB,oBAAC;IACC,SAAS,CACP;KACE,OAAO,iBAAiB,sEAAsE;KAC9F,eAAe;KACf,SAAS;KACT,YAAY;KACb,CACF;IACD,WAAW;KACX;IACM,GACP;KACQ"}

package/dist/components/OrganizationProfile/InviteMembersForm.js CHANGED Viewed

@@ -119,7 +119,7 @@ const InviteMembersForm = (props) => {
 	});
 };
 const AsyncRoleSelect = (field) => {
-	const { options, isLoading } = useFetchRoles();
+	const { options, isLoading, hasRoleSetMigration } = useFetchRoles();
 	const { t } = useLocalizations();
 	return /* @__PURE__ */ jsx(Form.ControlRow, {
 		elementId: field.id,
@@ -129,7 +129,7 @@ const AsyncRoleSelect = (field) => {
 			children: /* @__PURE__ */ jsx(RoleSelect, {
 				...field.props,
 				roles: options,
-				isDisabled: isLoading,
+				isDisabled: isLoading || hasRoleSetMigration,
 				onChange: (value) => field.setValue(value),
 				triggerSx: (t$1) => ({
 					minWidth: t$1.sizes.$40,

package/dist/components/OrganizationProfile/InviteMembersForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n onSuccess?: () => void;\n onReset?: () => void;\n primaryButtonLabel?: LocalizationKey;\n resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n const { onSuccess, onReset, resetButtonLabel } = props;\n const { organization, invitations } = useOrganization({\n invitations: {\n pageSize: 10,\n keepPreviousData: true,\n },\n });\n const card = useCardState();\n const { t, locale } = useLocalizations();\n const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n const emailAddressField = useFormControl('emailAddress', '', {\n type: 'text',\n label: localizationKeys('formFieldLabel__emailAddresses'),\n });\n\n const defaultRole = useDefaultRole();\n const roleField = useFormControl('role', '', {\n label: localizationKeys('formFieldLabel__role'),\n });\n\n useEffect(() => {\n if (roleField.value \|\| !defaultRole) {\n return;\n }\n\n roleField.setValue(defaultRole);\n }, [defaultRole, roleField]);\n\n if (!organization) {\n return null;\n }\n\n const {\n props: {\n setError,\n setWarning,\n setSuccess,\n setInfo,\n isFocused,\n validatePassword,\n setHasPassedComplexity,\n hasPassedComplexity,\n feedback,\n feedbackType,\n clearFeedback,\n ...restEmailAddressProps\n },\n } = emailAddressField;\n\n const canSubmit = (!!emailAddressField.value.length \|\| isValidUnsubmittedEmail) && !!roleField.value;\n\n const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) {\n return;\n }\n\n const submittedData = new FormData(e.currentTarget);\n return organization\n .inviteMembers({\n emailAddresses: emailAddressField.value.split(','),\n role: submittedData.get('role') as string,\n })\n .then(async () => {\n await invitations?.revalidate?.();\n return onSuccess?.();\n })\n .catch(err => {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n removeInvalidEmails(err.errors[0]);\n\n switch (err.errors?.[0]?.code) {\n case 'duplicate_record': {\n const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses \|\| [];\n card.setError(\n t(\n localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n // Create a localized list of email addresses\n email_addresses: createListFormat(unlocalizedEmailsList, locale),\n }),\n ),\n );\n break;\n }\n case 'already_a_member_in_organization': {\n /*\n Extracts email from the error message since it's not provided in the error response\n /\n const longMessage = err.errors[0].longMessage ?? '';\n const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z\|a-z]{2,}\\b/)?.[0];\n\n handleError(err, [], err =>\n email\n ? /\n Fallbacks to original error message in case the email cannot be extracted\n /\n card.setError(\n t(\n localizationKeys('unstable__errors.already_a_member_in_organization', {\n email,\n }),\n ),\n )\n : card.setError(err),\n );\n\n break;\n }\n default: {\n handleError(err, [], card.setError);\n }\n }\n });\n };\n\n const removeInvalidEmails = (err: ClerkAPIError) => {\n const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n const emails = emailAddressField.value.split(',');\n emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n };\n\n return (\n <Form.Root onSubmit={onSubmit}>\n <Form.ControlRow elementId={emailAddressField.id}>\n <TagInput\n {...restEmailAddressProps}\n autoFocus\n validate={isEmail}\n sx={{ width: '100%' }}\n validateUnsubmittedEmail={validateUnsubmittedEmail}\n placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n />\n </Form.ControlRow>\n <Flex\n align='center'\n justify='between'\n sx={t => ({\n marginTop: t.space.$2,\n gap: t.space.$4,\n flexWrap: 'wrap',\n [mqu.sm]: { justifyContent: 'center' },\n })}\n >\n <AsyncRoleSelect {...roleField} />\n <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n <Form.SubmitButton\n block={false}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n />\n <Form.ResetButton\n localizationKey={resetButtonLabel \|\| localizationKeys('userProfile.formButtonReset')}\n block={false}\n onClick={onReset}\n />\n </FormButtonContainer>\n </Flex>\n </Form.Root>\n );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n const { options, isLoading } = useFetchRoles();\n\n const { t } = useLocalizations();\n\n return (\n <Form.ControlRow elementId={field.id}>\n <Flex\n direction='col'\n gap={2}\n >\n <RoleSelect\n {...field.props}\n roles={options}\n isDisabled={isLoading}\n onChange={value => field.setValue(value)}\n triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n optionListSx={t => ({ minWidth: t.sizes.$48 })}\n prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n />\n </Flex>\n </Form.ControlRow>\n );\n};\n\n/\n Determines default Role from the Organization settings or fallback to\n * the only available Role.\n */\nconst useDefaultRole = () => {\n const { options } = useFetchRoles();\n const { organizationSettings } = useEnvironment();\n\n let defaultRole = organizationSettings.domains.defaultRole;\n\n if (!defaultRole && options?.length === 1) {\n defaultRole = options[0].value;\n }\n\n return defaultRole;\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n onSuccess?: () => void;\n onReset?: () => void;\n primaryButtonLabel?: LocalizationKey;\n resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n const { onSuccess, onReset, resetButtonLabel } = props;\n const { organization, invitations } = useOrganization({\n invitations: {\n pageSize: 10,\n keepPreviousData: true,\n },\n });\n const card = useCardState();\n const { t, locale } = useLocalizations();\n const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n const emailAddressField = useFormControl('emailAddress', '', {\n type: 'text',\n label: localizationKeys('formFieldLabel__emailAddresses'),\n });\n\n const defaultRole = useDefaultRole();\n const roleField = useFormControl('role', '', {\n label: localizationKeys('formFieldLabel__role'),\n });\n\n useEffect(() => {\n if (roleField.value \|\| !defaultRole) {\n return;\n }\n\n roleField.setValue(defaultRole);\n }, [defaultRole, roleField]);\n\n if (!organization) {\n return null;\n }\n\n const {\n props: {\n setError,\n setWarning,\n setSuccess,\n setInfo,\n isFocused,\n validatePassword,\n setHasPassedComplexity,\n hasPassedComplexity,\n feedback,\n feedbackType,\n clearFeedback,\n ...restEmailAddressProps\n },\n } = emailAddressField;\n\n const canSubmit = (!!emailAddressField.value.length \|\| isValidUnsubmittedEmail) && !!roleField.value;\n\n const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) {\n return;\n }\n\n const submittedData = new FormData(e.currentTarget);\n return organization\n .inviteMembers({\n emailAddresses: emailAddressField.value.split(','),\n role: submittedData.get('role') as string,\n })\n .then(async () => {\n await invitations?.revalidate?.();\n return onSuccess?.();\n })\n .catch(err => {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n removeInvalidEmails(err.errors[0]);\n\n switch (err.errors?.[0]?.code) {\n case 'duplicate_record': {\n const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses \|\| [];\n card.setError(\n t(\n localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n // Create a localized list of email addresses\n email_addresses: createListFormat(unlocalizedEmailsList, locale),\n }),\n ),\n );\n break;\n }\n case 'already_a_member_in_organization': {\n /*\n Extracts email from the error message since it's not provided in the error response\n /\n const longMessage = err.errors[0].longMessage ?? '';\n const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z\|a-z]{2,}\\b/)?.[0];\n\n handleError(err, [], err =>\n email\n ? /\n Fallbacks to original error message in case the email cannot be extracted\n /\n card.setError(\n t(\n localizationKeys('unstable__errors.already_a_member_in_organization', {\n email,\n }),\n ),\n )\n : card.setError(err),\n );\n\n break;\n }\n default: {\n handleError(err, [], card.setError);\n }\n }\n });\n };\n\n const removeInvalidEmails = (err: ClerkAPIError) => {\n const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n const emails = emailAddressField.value.split(',');\n emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n };\n\n return (\n <Form.Root onSubmit={onSubmit}>\n <Form.ControlRow elementId={emailAddressField.id}>\n <TagInput\n {...restEmailAddressProps}\n autoFocus\n validate={isEmail}\n sx={{ width: '100%' }}\n validateUnsubmittedEmail={validateUnsubmittedEmail}\n placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n />\n </Form.ControlRow>\n <Flex\n align='center'\n justify='between'\n sx={t => ({\n marginTop: t.space.$2,\n gap: t.space.$4,\n flexWrap: 'wrap',\n [mqu.sm]: { justifyContent: 'center' },\n })}\n >\n <AsyncRoleSelect {...roleField} />\n <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n <Form.SubmitButton\n block={false}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n />\n <Form.ResetButton\n localizationKey={resetButtonLabel \|\| localizationKeys('userProfile.formButtonReset')}\n block={false}\n onClick={onReset}\n />\n </FormButtonContainer>\n </Flex>\n </Form.Root>\n );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n const { options, isLoading, hasRoleSetMigration } = useFetchRoles();\n\n const { t } = useLocalizations();\n\n return (\n <Form.ControlRow elementId={field.id}>\n <Flex\n direction='col'\n gap={2}\n >\n <RoleSelect\n {...field.props}\n roles={options}\n isDisabled={isLoading \|\| hasRoleSetMigration}\n onChange={value => field.setValue(value)}\n triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n optionListSx={t => ({ minWidth: t.sizes.$48 })}\n prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n />\n </Flex>\n </Form.ControlRow>\n );\n};\n\n/\n Determines default Role from the Organization settings or fallback to\n * the only available Role.\n */\nconst useDefaultRole = () => {\n const { options } = useFetchRoles();\n const { organizationSettings } = useEnvironment();\n\n let defaultRole = organizationSettings.domains.defaultRole;\n\n if (!defaultRole && options?.length === 1) {\n defaultRole = options[0].value;\n }\n\n return defaultRole;\n};\n"],"mappings":"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"}

package/dist/components/OrganizationProfile/OrganizationMembers.js CHANGED Viewed

@@ -5,11 +5,13 @@ import { mqu } from "../../styledSystem/breakpoints.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
 import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
 import { Col, Flex } from "../../customizables/index.js";
+import { Alert } from "../../elements/Alert.js";
 import { Card } from "../../elements/Card/index.js";
 import { Header } from "../../elements/Header.js";
 import { NotificationCountBadge } from "../../common/NotificationCountBadge.js";
 import { Animated } from "../../elements/Animated.js";
 import { Action } from "../../elements/Action/index.js";
+import { useFetchRoles } from "../../hooks/useFetchRoles.js";
 import { Tab, TabPanel, TabPanels, Tabs, TabsList } from "../../elements/Tabs.js";
 import { ActiveMembersList } from "./ActiveMembersList.js";
 import { MembersActionsRow } from "./MembersActions.js";
@@ -25,6 +27,7 @@ const ACTIVE_MEMBERS_PAGE_SIZE = 10;
 const OrganizationMembers = withCardStateProvider(() => {
 	const { organizationSettings } = useEnvironment();
 	const card = useCardState();
+	const { hasRoleSetMigration } = useFetchRoles();
 	const canManageMemberships = useProtect({ permission: "org:sys_memberships:manage" });
 	const canReadMemberships = useProtect({ permission: "org:sys_memberships:read" });
 	const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
@@ -101,16 +104,24 @@ const OrganizationMembers = withCardStateProvider(() => {
 									gap: 2,
 									direction: "col",
 									sx: { width: "100%" },
-									children: [/* @__PURE__ */ jsx(MembersActionsRow, { actionSlot: /* @__PURE__ */ jsx(MembersSearch, {
-										query,
-										value: search,
-										memberships,
-										onSearchChange: (query$1) => setSearch(query$1),
-										onQueryTrigger: (query$1) => setQuery(query$1)
-									}) }), /* @__PURE__ */ jsx(ActiveMembersList, {
-										pageSize: ACTIVE_MEMBERS_PAGE_SIZE,
-										memberships
-									})]
+									children: [
+										/* @__PURE__ */ jsx(MembersActionsRow, { actionSlot: /* @__PURE__ */ jsx(MembersSearch, {
+											query,
+											value: search,
+											memberships,
+											onSearchChange: (query$1) => setSearch(query$1),
+											onQueryTrigger: (query$1) => setQuery(query$1)
+										}) }),
+										hasRoleSetMigration && /* @__PURE__ */ jsx(Alert, {
+											variant: "warning",
+											title: localizationKeys("organizationProfile.membersPage.alerts.roleSetMigrationInProgress.title"),
+											subtitle: localizationKeys("organizationProfile.membersPage.alerts.roleSetMigrationInProgress.subtitle")
+										}),
+										/* @__PURE__ */ jsx(ActiveMembersList, {
+											pageSize: ACTIVE_MEMBERS_PAGE_SIZE,
+											memberships
+										})
+									]
 								})
 							})
 						}),

package/dist/components/OrganizationProfile/OrganizationMembers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AAoBA~~,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR~~;oBAED~~,oBAAC,qBACC,YACE,oBAAC;~~UACQ~~;~~UACP~~,OAAO;~~UACM~~;~~UACb~~,iBAAgB,YAAS,UAAUA,QAAM;~~UACzC~~,iBAAgB,YAAS,SAASA,QAAM;~~WACxC~~,GAEJ,~~EACF~~,oBAAC;~~UACC~~,UAAU;~~UACG~~;~~WACb~~;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}
1	+ {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { useFetchRoles } from '@/hooks/useFetchRoles';\nimport { Alert } from '@/ui/elements/Alert';\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const { hasRoleSetMigration } = useFetchRoles();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n {hasRoleSetMigration && (\n <Alert\n variant='warning'\n title={localizationKeys(\n 'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.title',\n )}\n subtitle={localizationKeys(\n 'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.subtitle',\n )}\n />\n )}\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,wBAAwB,eAAe;CAC/C,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;;UAED,oBAAC,qBACC,YACE,oBAAC;WACQ;WACP,OAAO;WACM;WACb,iBAAgB,YAAS,UAAUA,QAAM;WACzC,iBAAgB,YAAS,SAASA,QAAM;YACxC,GAEJ;UACD,uBACC,oBAAC;WACC,SAAQ;WACR,OAAO,iBACL,0EACD;WACD,UAAU,iBACR,6EACD;YACD;UAEJ,oBAAC;WACC,UAAU;WACG;YACb;;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}

package/dist/elements/Alert.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const Alert$1 = (props) => {
 	const { children, title, subtitle, variant = "warning",...rest } = props;
 	if (!children && !title && !subtitle) return null;
+	const textColorScheme = variant === "danger" ? "danger" : variant === "warning" ? "warning" : "secondary";
 	return /* @__PURE__ */ jsxs(Alert, {
 		elementDescriptor: descriptors.alert,
 		elementId: descriptors.alert.setId(variant),
@@ -23,18 +24,18 @@ const Alert$1 = (props) => {
 			elementDescriptor: descriptors.alertTextContainer,
 			elementId: descriptors.alertTextContainer.setId(variant),
 			gap: 1,
+			sx: { textAlign: "left" },
 			children: [/* @__PURE__ */ jsx(Text, {
 				elementDescriptor: descriptors.alertText,
 				elementId: descriptors.alert.setId(variant),
-				colorScheme: variant === "danger" ? "danger" : variant === "warning" ? "warning" : "secondary",
-				variant: "body",
+				colorScheme: textColorScheme,
+				variant: subtitle ? "h3" : "body",
 				localizationKey: title,
-				sx: { textAlign: "left" },
 				children
 			}), subtitle && /* @__PURE__ */ jsx(Text, {
 				elementDescriptor: descriptors.alertText,
 				elementId: descriptors.alert.setId(variant),
-				colorScheme: variant === "danger" ? "danger" : "secondary",
+				colorScheme: textColorScheme,
 				variant: "body",
 				localizationKey: subtitle
 			})]

package/dist/elements/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","names":["Alert","AlertCust"],"sources":["../../src/elements/Alert.tsx"],"sourcesContent":["import type { LocalizationKey } from '../customizables';\nimport { Alert as AlertCust, AlertIcon, Col, descriptors, Text } from '../customizables';\nimport type { PropsOfComponent } from '../styledSystem';\n\ntype _AlertProps = {\n variant?: 'danger' \| 'warning' \| 'info';\n title?: LocalizationKey \| string;\n subtitle?: LocalizationKey \| string;\n};\n\ntype AlertProps = Omit<PropsOfComponent<typeof AlertCust>, keyof _AlertProps> & _AlertProps;\n\nexport const Alert = (props: AlertProps): JSX.Element \| null => {\n const { children, title, subtitle, variant = 'warning', ...rest } = props;\n\n if (!children && !title && !subtitle) {\n return null;\n }\n\n return (\n <AlertCust\n elementDescriptor={descriptors.alert}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={variant}\n align='start'\n {...rest}\n sx={[rest.sx]}\n >\n <AlertIcon\n elementId={descriptors.alert.setId(variant)}\n elementDescriptor={descriptors.alertIcon}\n variant={variant}\n colorScheme={variant}\n sx={{ flexShrink: '0' }}\n />\n <Col\n elementDescriptor={descriptors.alertTextContainer}\n elementId={descriptors.alertTextContainer.setId(variant)}\n gap={1}\n >\n <Text\n elementDescriptor={descriptors.alertText}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={variant ~~=== 'danger'~~ ? '~~danger~~' : ~~variant ===~~ '~~warning~~' ~~? 'warning' : 'secondary'~~}\n ~~variant='body'\n~~ localizationKey={title}\n ~~sx={{ textAlign: 'left' }}\n~~ >\n {children}\n </Text>\n {subtitle && (\n <Text\n elementDescriptor={descriptors.alertText}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={~~variant === 'danger' ? 'danger' : 'secondary'~~}\n variant='body'\n localizationKey={subtitle}\n />\n )}\n </Col>\n </AlertCust>\n );\n};\n"],"mappings":";;;;;AAYA,MAAaA,WAAS,UAA0C;CAC9D,MAAM,EAAE,UAAU,OAAO,UAAU,UAAU,UAAW,GAAG,SAAS;AAEpE,KAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAC1B,QAAO;~~AAGT~~,QACE,qBAACC;EACC,mBAAmB,YAAY;EAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;EAC3C,aAAa;EACb,OAAM;EACN,GAAI;EACJ,IAAI,CAAC,KAAK,GAAG;aAEb,oBAAC;GACC,WAAW,YAAY,MAAM,MAAM,QAAQ;GAC3C,mBAAmB,YAAY;GACtB;GACT,aAAa;GACb,IAAI,EAAE,YAAY,KAAK;IACvB,EACF,qBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,mBAAmB,MAAM,QAAQ;GACxD,KAAK;~~cAEL~~,oBAAC;IACC,mBAAmB,YAAY;IAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;IAC3C,aAAa,~~YAAY~~,WAAW,~~WAAW,YAAY,YAAY,YAAY~~;~~IACnF~~,~~SAAQ;IACR,~~iBAAiB;~~IACjB,IAAI,EAAE,WAAW,QAAQ~~;~~IAExB;~~KACI,EACN,YACC,oBAAC;IACC,mBAAmB,YAAY;IAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;IAC3C,aAAa~~,YAAY,WAAW,WAAW~~;~~IAC/C~~,SAAQ;IACR,iBAAiB;KACjB;IAEA;GACI"}
1	+ {"version":3,"file":"Alert.js","names":["Alert","AlertCust"],"sources":["../../src/elements/Alert.tsx"],"sourcesContent":["import type { LocalizationKey } from '../customizables';\nimport { Alert as AlertCust, AlertIcon, Col, descriptors, Text } from '../customizables';\nimport type { PropsOfComponent } from '../styledSystem';\n\ntype _AlertProps = {\n variant?: 'danger' \| 'warning' \| 'info';\n title?: LocalizationKey \| string;\n subtitle?: LocalizationKey \| string;\n};\n\ntype AlertProps = Omit<PropsOfComponent<typeof AlertCust>, keyof _AlertProps> & _AlertProps;\n\nexport const Alert = (props: AlertProps): JSX.Element \| null => {\n const { children, title, subtitle, variant = 'warning', ...rest } = props;\n\n if (!children && !title && !subtitle) {\n return null;\n }\n\n const textColorScheme = variant === 'danger' ? 'danger' : variant === 'warning' ? 'warning' : 'secondary';\n\n return (\n <AlertCust\n elementDescriptor={descriptors.alert}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={variant}\n align='start'\n {...rest}\n sx={[rest.sx]}\n >\n <AlertIcon\n elementId={descriptors.alert.setId(variant)}\n elementDescriptor={descriptors.alertIcon}\n variant={variant}\n colorScheme={variant}\n sx={{ flexShrink: '0' }}\n />\n <Col\n elementDescriptor={descriptors.alertTextContainer}\n elementId={descriptors.alertTextContainer.setId(variant)}\n gap={1}\n sx={{ textAlign: 'left' }}\n >\n <Text\n elementDescriptor={descriptors.alertText}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={textColorScheme}\n variant={subtitle ? 'h3' : 'body'}\n localizationKey={title}\n >\n {children}\n </Text>\n {subtitle && (\n <Text\n elementDescriptor={descriptors.alertText}\n elementId={descriptors.alert.setId(variant)}\n colorScheme={textColorScheme}\n variant='body'\n localizationKey={subtitle}\n />\n )}\n </Col>\n </AlertCust>\n );\n};\n"],"mappings":";;;;;AAYA,MAAaA,WAAS,UAA0C;CAC9D,MAAM,EAAE,UAAU,OAAO,UAAU,UAAU,UAAW,GAAG,SAAS;AAEpE,KAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAC1B,QAAO;CAGT,MAAM,kBAAkB,YAAY,WAAW,WAAW,YAAY,YAAY,YAAY;AAE9F,QACE,qBAACC;EACC,mBAAmB,YAAY;EAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;EAC3C,aAAa;EACb,OAAM;EACN,GAAI;EACJ,IAAI,CAAC,KAAK,GAAG;aAEb,oBAAC;GACC,WAAW,YAAY,MAAM,MAAM,QAAQ;GAC3C,mBAAmB,YAAY;GACtB;GACT,aAAa;GACb,IAAI,EAAE,YAAY,KAAK;IACvB,EACF,qBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,mBAAmB,MAAM,QAAQ;GACxD,KAAK;GACL,IAAI,EAAE,WAAW,QAAQ;cAEzB,oBAAC;IACC,mBAAmB,YAAY;IAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;IAC3C,aAAa;IACb,SAAS,WAAW,OAAO;IAC3B,iBAAiB;IAEhB;KACI,EACN,YACC,oBAAC;IACC,mBAAmB,YAAY;IAC/B,WAAW,YAAY,MAAM,MAAM,QAAQ;IAC3C,aAAa;IACb,SAAQ;IACR,iBAAiB;KACjB;IAEA;GACI"}