npm - @clerk/ui - Versions diffs - 1.3.1-canary.v20260402184113 → 1.4.0 - Mend

@clerk/ui 1.3.1-canary.v20260402184113 → 1.4.0

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 (163) hide show

package/dist/ClerkUI.js CHANGED Viewed

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.3.1-canary.v20260402184113";
-	version = "1.3.1-canary.v20260402184113";
+	static version = "1.4.0";
+	version = "1.4.0";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/{apiKeys_ui_7f57ee_1.3.1-canary.v20260402184113.js → apiKeys_ui_238283_1.4.0.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{54875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N}),i(50036),i(88711);var r=i(14518),a=i(73610),n=i(56739),o=i(90231),l=i(35074),d=i(57477),s=i(78188),c=i(43264),p=i(10078),u=i(22861),m=i(18272),h=i(58920),y=i(44607),_=i(93453),x=i(63269),f=i(15013),g=i(18819),D=i(34317),K=i(4468),v=i(34439),Y=i(37591);i(19161),i(22239);var b=i(48080),F=i(17198);let C=e=>{let{rows:t,isLoading:i,onRevoke:a,elementDescriptor:n,canManageAPIKeys:o}=e;return(0,r.Y)(m.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,r.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:n,children:[(0,r.Y)(m.d8,{children:(0,r.FD)(m.Tr,{children:[(0,r.Y)(m.Th,{children:"Name"}),(0,r.Y)(m.Th,{children:"Last used"}),o&&(0,r.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,r.Y)(m.NN,{children:i?(0,r.Y)(m.Tr,{children:(0,r.Y)(m.Td,{colSpan:3,children:(0,r.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):t.length?t.map(e=>(0,r.FD)(m.Tr,{children:[(0,r.Y)(m.Td,{children:(0,r.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,r.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,r.Y)(m.Td,{children:(0,r.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,r.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,r.Y)(m.Td,{sx:{textAlign:"end"},children:(0,r.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>a(e.id,e.name)}]})})]},e.id)):(0,r.Y)(k,{})})]})})},k=()=>(0,r.Y)(m.Tr,{children:(0,r.Y)(m.Td,{colSpan:4,children:(0,r.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(92513),$=i(52454),I=i(11475),z=i(23549),S=i(41586),T=i(98023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=e=>{var t;let{selectedExpiration:i,setSelectedExpiration:a}=e,n=(0,l.useRef)(null),{t:o}=(0,p._)(),d=A.map(e=>({value:e,label:o((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,r.FD)(S.l6,{elementId:"apiKeyExpiration",options:d,value:null!=(t=null==i?void 0:i.value)?t:"",onChange:a,placeholder:o((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:n,children:[(0,r.Y)(S.JC,{ref:n,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,r.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=e=>{let{onCreate:t}=e,[i,a]=(0,l.useState)(null),{close:n}=(0,w.D5)(),{showDescription:o=!1}=(0,s.l)(),d=(0,x.f0)(),{t:c}=(0,p._)(),y=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),_=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),f=y.value.length>2,g=(0,l.useMemo)(()=>{let e=P(null==i?void 0:i.value);if(!(null==i?void 0:i.value)\|\|!e)return c((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let t=new Date(Date.now()+1e3e);return c((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:t.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[null==i?void 0:i.value]);return(0,r.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,r.FD)($.l.Root,{onSubmit:e=>{e.preventDefault(),t({name:y.value,description:_.value\|\|void 0,secondsUntilExpiration:P(null==i?void 0:i.value)})},children:[(0,r.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,r.Y)($.l.ControlRow,{sx:{flex:1},elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,r.Y)($.l.PlainInput,{...y.props})}),(0,r.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,r.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,r.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,r.Y)(R,{selectedExpiration:i,setSelectedExpiration:a}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:g,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,r.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,r.Y)($.l.ControlRow,{elementId:_.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,r.Y)($.l.PlainInput,{..._.props})})}),(0,r.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!f,onReset:n,isLoading:d.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,78195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,28169)).then(e=>({default:e.CopyAPIKeyModal}))),N=e=>{let{subject:t,perPage:i,revokeModalRoot:s}=e,c=(0,n.n)(t),y=(0,d.Fd)({permission:"org:sys_api_keys:read"}),b=(0,d.Fd)({permission:"org:sys_api_keys:manage"}),[F,k]=(0,l.useState)(""),w=(0,D.d)(F,500).trim(),{data:$,isLoading:I,isFetching:z,page:S,fetchPage:T,pageCount:E,count:A,revalidate:G}=(0,o.hZ)({subject:t,pageSize:null!=i?i:10,query:w,keepPreviousData:!0,enabled:!c\|\|y});(e=>{let{query:t,page:i,pageCount:r,isFetching:a,fetchPage:n}=e,o=(0,l.useRef)(t);(0,l.useEffect)(()=>{o.current!==t&&(o.current=t,n(1))},[t,n]),(0,l.useEffect)(()=>{!a&&r>0&&i>r&&n(Math.max(1,r))},[r,i,a,n])})({query:w,page:S,pageCount:E,isFetching:z,fetchPage:T});let P=A>0?Math.max(0,(S-1)(null!=i?i:10))+1:0,R=Math.min(S*(null!=i?i:10),A),N=(0,x.f0)(),B=(0,o.ho)(),[H,j]=(0,l.useState)(null),{t:J}=(0,p._)(),[U,W]=(0,l.useState)(!1),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(""),[V,ee]=(0,l.useState)(!1),et=async e=>{try{N.setLoading();let i=await B.apiKeys.create({...e,subject:t});G(),N.setError(void 0),ee(!0),j(i)}catch(e){var i,r;if(!(0,a.$R)(e))return void(0,K.H4)(e,[],N.setError);switch(null==(r=e.errors)\|\|null==(i=r[0])?void 0:i.code){case"token_quota_exceeded":N.setError(J((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":N.setError(J((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],N.setError)}}finally{N.setIdle()}};return(0,r.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,r.FD)(_.r.Root,{children:[(0,r.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,r.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,r.Y)(f.e,{placeholder:J((0,u.G)("apiKeys.action__search")),leftIcon:(0,r.Y)(m.In,{icon:v.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:F,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>k(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(c&&b\|\|!c)&&(0,r.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,r.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,r.Y)(_.r.Open,{value:"add-api-key",children:(0,r.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,r.Y)(_.r.Card,{sx:{width:"100%"},children:(0,r.Y)(O,{onCreate:et})})})}),(0,r.Y)(M,{isOpen:V,onOpen:()=>ee(!0),onClose:()=>ee(!1),apiKeyName:(null==H?void 0:H.name)\|\|"",apiKeySecret:(null==H?void 0:H.secret)\|\|"",modalRoot:s})]}),(0,r.Y)(C,{rows:$,isLoading:I,onRevoke:(e,t)=>{X(e),Q(t),W(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:c&&b\|\|!c}),E>1&&(0,r.Y)(g.d,{count:E,page:Math.min(S,E),onChange:e=>{T(e)},siblingCount:1,rowInfo:{allRowsCount:A,startingRow:P,endingRow:R}}),(0,r.Y)(L,{isOpen:U,onOpen:()=>W(!0),onClose:()=>{X(""),Q(""),W(!1)},apiKeyID:q,apiKeyName:Z,onRevokeSuccess:G,modalRoot:s})]})},B=(0,c.G)((0,x.dm)(()=>{var e,t;let i=(0,s.l)(),{user:a}=(0,o.Jd)(),n=(0,o.It)(),l=null!=(t=null!=(e=null==n?void 0:n.id)?e:null==a?void 0:a.id)?t:"";return(0,r.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,r.Y)(N,{subject:l,perPage:i.perPage})})}))},78188:function(e,t,i){i.d(t,{l:()=>n,w:()=>a}),i(98114);var r=i(35074);let a=(0,r.createContext)(null),n=()=>{let e=(0,r.useContext)(a);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{54875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N}),i(50036),i(88711);var r=i(14518),a=i(73610),n=i(56739),o=i(90231),l=i(35074),d=i(57477),s=i(78188),c=i(43264),p=i(10078),u=i(22861),m=i(18272),h=i(58920),y=i(44607),_=i(93453),x=i(63269),f=i(15013),g=i(18819),D=i(34317),K=i(4468),v=i(34439),Y=i(37591);i(19161),i(22239);var b=i(48080),F=i(17198);let C=e=>{let{rows:t,isLoading:i,onRevoke:a,elementDescriptor:n,canManageAPIKeys:o}=e;return(0,r.Y)(m.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,r.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:n,children:[(0,r.Y)(m.d8,{children:(0,r.FD)(m.Tr,{children:[(0,r.Y)(m.Th,{children:"Name"}),(0,r.Y)(m.Th,{children:"Last used"}),o&&(0,r.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,r.Y)(m.NN,{children:i?(0,r.Y)(m.Tr,{children:(0,r.Y)(m.Td,{colSpan:3,children:(0,r.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):t.length?t.map(e=>(0,r.FD)(m.Tr,{children:[(0,r.Y)(m.Td,{children:(0,r.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,r.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,r.Y)(m.Td,{children:(0,r.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,r.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,r.Y)(m.Td,{sx:{textAlign:"end"},children:(0,r.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>a(e.id,e.name)}]})})]},e.id)):(0,r.Y)(k,{})})]})})},k=()=>(0,r.Y)(m.Tr,{children:(0,r.Y)(m.Td,{colSpan:4,children:(0,r.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(92513),$=i(52454),I=i(11475),z=i(23549),S=i(41586),T=i(98023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=e=>{var t;let{selectedExpiration:i,setSelectedExpiration:a}=e,n=(0,l.useRef)(null),{t:o}=(0,p._)(),d=A.map(e=>({value:e,label:o((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,r.FD)(S.l6,{elementId:"apiKeyExpiration",options:d,value:null!=(t=null==i?void 0:i.value)?t:"",onChange:a,placeholder:o((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:n,children:[(0,r.Y)(S.JC,{ref:n,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,r.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=e=>{let{onCreate:t}=e,[i,a]=(0,l.useState)(null),{close:n}=(0,w.D5)(),{showDescription:o=!1}=(0,s.l)(),d=(0,x.f0)(),{t:c}=(0,p._)(),y=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),_=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),f=y.value.length>2,g=(0,l.useMemo)(()=>{let e=P(null==i?void 0:i.value);if(!(null==i?void 0:i.value)\|\|!e)return c((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let t=new Date(Date.now()+1e3e);return c((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:t.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[null==i?void 0:i.value]);return(0,r.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,r.FD)($.l.Root,{onSubmit:e=>{e.preventDefault(),t({name:y.value,description:_.value\|\|void 0,secondsUntilExpiration:P(null==i?void 0:i.value)})},children:[(0,r.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,r.Y)($.l.ControlRow,{sx:{flex:1},elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,r.Y)($.l.PlainInput,{...y.props})}),(0,r.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,r.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,r.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,r.Y)(R,{selectedExpiration:i,setSelectedExpiration:a}),(0,r.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:g,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,r.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,r.Y)($.l.ControlRow,{elementId:_.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,r.Y)($.l.PlainInput,{..._.props})})}),(0,r.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!f,onReset:n,isLoading:d.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,78195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,28169)).then(e=>({default:e.CopyAPIKeyModal}))),N=e=>{let{subject:t,perPage:i,revokeModalRoot:s}=e,c=(0,n.n)(t),y=(0,d.Fd)({permission:"org:sys_api_keys:read"}),b=(0,d.Fd)({permission:"org:sys_api_keys:manage"}),[F,k]=(0,l.useState)(""),w=(0,D.d)(F,500).trim(),{data:$,isLoading:I,isFetching:z,page:S,fetchPage:T,pageCount:E,count:A,revalidate:G}=(0,o.O4)({subject:t,pageSize:null!=i?i:10,query:w,keepPreviousData:!0,enabled:!c\|\|y});(e=>{let{query:t,page:i,pageCount:r,isFetching:a,fetchPage:n}=e,o=(0,l.useRef)(t);(0,l.useEffect)(()=>{o.current!==t&&(o.current=t,n(1))},[t,n]),(0,l.useEffect)(()=>{!a&&r>0&&i>r&&n(Math.max(1,r))},[r,i,a,n])})({query:w,page:S,pageCount:E,isFetching:z,fetchPage:T});let P=A>0?Math.max(0,(S-1)(null!=i?i:10))+1:0,R=Math.min(S*(null!=i?i:10),A),N=(0,x.f0)(),B=(0,o.ho)(),[H,j]=(0,l.useState)(null),{t:J}=(0,p._)(),[U,W]=(0,l.useState)(!1),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(""),[V,ee]=(0,l.useState)(!1),et=async e=>{try{N.setLoading();let i=await B.apiKeys.create({...e,subject:t});G(),N.setError(void 0),ee(!0),j(i)}catch(e){var i,r;if(!(0,a.$R)(e))return void(0,K.H4)(e,[],N.setError);switch(null==(r=e.errors)\|\|null==(i=r[0])?void 0:i.code){case"token_quota_exceeded":N.setError(J((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":N.setError(J((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],N.setError)}}finally{N.setIdle()}};return(0,r.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,r.FD)(_.r.Root,{children:[(0,r.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,r.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,r.Y)(f.e,{placeholder:J((0,u.G)("apiKeys.action__search")),leftIcon:(0,r.Y)(m.In,{icon:v.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:F,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>k(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(c&&b\|\|!c)&&(0,r.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,r.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,r.Y)(_.r.Open,{value:"add-api-key",children:(0,r.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,r.Y)(_.r.Card,{sx:{width:"100%"},children:(0,r.Y)(O,{onCreate:et})})})}),(0,r.Y)(M,{isOpen:V,onOpen:()=>ee(!0),onClose:()=>ee(!1),apiKeyName:(null==H?void 0:H.name)\|\|"",apiKeySecret:(null==H?void 0:H.secret)\|\|"",modalRoot:s})]}),(0,r.Y)(C,{rows:$,isLoading:I,onRevoke:(e,t)=>{X(e),Q(t),W(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:c&&b\|\|!c}),E>1&&(0,r.Y)(g.d,{count:E,page:Math.min(S,E),onChange:e=>{T(e)},siblingCount:1,rowInfo:{allRowsCount:A,startingRow:P,endingRow:R}}),(0,r.Y)(L,{isOpen:U,onOpen:()=>W(!0),onClose:()=>{X(""),Q(""),W(!1)},apiKeyID:q,apiKeyName:Z,onRevokeSuccess:G,modalRoot:s})]})},B=(0,c.G)((0,x.dm)(()=>{var e,t;let i=(0,s.l)(),{user:a}=(0,o.Jd)(),n=(0,o.It)(),l=null!=(t=null!=(e=null==n?void 0:n.id)?e:null==a?void 0:a.id)?t:"";return(0,r.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,r.Y)(N,{subject:l,perPage:i.perPage})})}))},78188:function(e,t,i){i.d(t,{l:()=>n,w:()=>a}),i(98114);var r=i(35074);let a=(0,r.createContext)(null),n=()=>{let e=(0,r.useContext)(a);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);

package/dist/{apiKeys_ui_698d6b_1.3.1-canary.v20260402184113.js → apiKeys_ui_5325c6_1.4.0.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N});var a=i(4518),r=i(3610),o=i(6739),n=i(4180),l=i(630),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(2861),m=i(8272),h=i(8920),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),D=i(4317),K=i(4468),Y=i(4439),v=i(7591),b=i(8080),F=i(7198);let C=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:o})=>(0,a.Y)(m.so,{sx:e=>({width:"100%",[v.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(m.d8,{children:(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Th,{children:"Name"}),(0,a.Y)(m.Th,{children:"Last used"}),o&&(0,a.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,a.Y)(m.NN,{children:t?(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:3,children:(0,a.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Td,{children:(0,a.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(m.Td,{children:(0,a.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,a.Y)(m.Td,{sx:{textAlign:"end"},children:(0,a.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(k,{})})]})}),k=()=>(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:4,children:(0,a.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(2513),$=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),o=A.map(e=>({value:e,label:r((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:o,value:e?.value??"",onChange:t,placeholder:r((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,w.D5)(),{showDescription:o=!1}=(0,d.l)(),n=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=P(t?.value);if(!t?.value\|\|!e)return s((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,a.FD)($.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:P(t?.value)})},children:[(0,a.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[v.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)($.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,a.Y)($.l.PlainInput,{...c.props})}),(0,a.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,a.Y)(R,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,a.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)($.l.ControlRow,{elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)($.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:n.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),N=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,o.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[b,F]=(0,l.useState)(""),k=(0,D.d)(b,500).trim(),{data:w,isLoading:$,isFetching:I,page:z,fetchPage:S,pageCount:T,count:E,revalidate:A}=(0,n.hZ)({subject:e,pageSize:t??10,query:k,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let o=(0,l.useRef)(e);(0,l.useEffect)(()=>{o.current!==e&&(o.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:k,page:z,pageCount:T,isFetching:I,fetchPage:S});let G=E>0?Math.max(0,(z-1)(t??10))+1:0,P=Math.min(z*(t??10),E),R=(0,x.f0)(),N=(0,n.ho)(),[B,H]=(0,l.useState)(null),{t:j}=(0,p._)(),[J,U]=(0,l.useState)(!1),[W,q]=(0,l.useState)(""),[X,Z]=(0,l.useState)(""),[Q,V]=(0,l.useState)(!1),ee=async t=>{try{R.setLoading();let i=await N.apiKeys.create({...t,subject:e});A(),R.setError(void 0),V(!0),H(i)}catch(e){if(!(0,r.$R)(e))return void(0,K.H4)(e,[],R.setError);switch(e.errors?.[0]?.code){case"token_quota_exceeded":R.setError(j((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":R.setError(j((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],R.setError)}}finally{R.setIdle()}};return(0,a.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[v.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,a.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:j((0,u.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(m.In,{icon:Y.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:b,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(O,{onCreate:ee})})})}),(0,a.Y)(M,{isOpen:Q,onOpen:()=>V(!0),onClose:()=>V(!1),apiKeyName:B?.name\|\|"",apiKeySecret:B?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(C,{rows:w,isLoading:$,onRevoke:(e,t)=>{q(e),Z(t),U(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:E,startingRow:G,endingRow:P}}),(0,a.Y)(L,{isOpen:J,onOpen:()=>U(!0),onClose:()=>{q(""),Z(""),U(!1)},apiKeyID:W,apiKeyName:X,onRevokeSuccess:A,modalRoot:i})]})},B=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,n.Jd)(),i=(0,n.It)(),r=i?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(N,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>o,w:()=>r});var a=i(630);let r=(0,a.createContext)(null),o=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N});var a=i(4518),r=i(3610),o=i(6739),n=i(4180),l=i(630),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(2861),m=i(8272),h=i(8920),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),D=i(4317),K=i(4468),Y=i(4439),v=i(7591),b=i(8080),F=i(7198);let C=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:o})=>(0,a.Y)(m.so,{sx:e=>({width:"100%",[v.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(m.d8,{children:(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Th,{children:"Name"}),(0,a.Y)(m.Th,{children:"Last used"}),o&&(0,a.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,a.Y)(m.NN,{children:t?(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:3,children:(0,a.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Td,{children:(0,a.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(m.Td,{children:(0,a.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,a.Y)(m.Td,{sx:{textAlign:"end"},children:(0,a.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(k,{})})]})}),k=()=>(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:4,children:(0,a.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(2513),$=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),o=A.map(e=>({value:e,label:r((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:o,value:e?.value??"",onChange:t,placeholder:r((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,w.D5)(),{showDescription:o=!1}=(0,d.l)(),n=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=P(t?.value);if(!t?.value\|\|!e)return s((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,a.FD)($.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:P(t?.value)})},children:[(0,a.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[v.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)($.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,a.Y)($.l.PlainInput,{...c.props})}),(0,a.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,a.Y)(R,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,a.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)($.l.ControlRow,{elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)($.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:n.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),N=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,o.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[b,F]=(0,l.useState)(""),k=(0,D.d)(b,500).trim(),{data:w,isLoading:$,isFetching:I,page:z,fetchPage:S,pageCount:T,count:E,revalidate:A}=(0,n.O4)({subject:e,pageSize:t??10,query:k,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let o=(0,l.useRef)(e);(0,l.useEffect)(()=>{o.current!==e&&(o.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:k,page:z,pageCount:T,isFetching:I,fetchPage:S});let G=E>0?Math.max(0,(z-1)(t??10))+1:0,P=Math.min(z*(t??10),E),R=(0,x.f0)(),N=(0,n.ho)(),[B,H]=(0,l.useState)(null),{t:j}=(0,p._)(),[J,U]=(0,l.useState)(!1),[W,q]=(0,l.useState)(""),[X,Z]=(0,l.useState)(""),[Q,V]=(0,l.useState)(!1),ee=async t=>{try{R.setLoading();let i=await N.apiKeys.create({...t,subject:e});A(),R.setError(void 0),V(!0),H(i)}catch(e){if(!(0,r.$R)(e))return void(0,K.H4)(e,[],R.setError);switch(e.errors?.[0]?.code){case"token_quota_exceeded":R.setError(j((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":R.setError(j((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],R.setError)}}finally{R.setIdle()}};return(0,a.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[v.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,a.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:j((0,u.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(m.In,{icon:Y.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:b,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(O,{onCreate:ee})})})}),(0,a.Y)(M,{isOpen:Q,onOpen:()=>V(!0),onClose:()=>V(!1),apiKeyName:B?.name\|\|"",apiKeySecret:B?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(C,{rows:w,isLoading:$,onRevoke:(e,t)=>{q(e),Z(t),U(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:E,startingRow:G,endingRow:P}}),(0,a.Y)(L,{isOpen:J,onOpen:()=>U(!0),onClose:()=>{q(""),Z(""),U(!1)},apiKeyID:W,apiKeyName:X,onRevokeSuccess:A,modalRoot:i})]})},B=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,n.Jd)(),i=(0,n.It)(),r=i?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(N,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>o,w:()=>r});var a=i(630);let r=(0,a.createContext)(null),o=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);

package/dist/{apiKeys_ui_7b750c_1.3.1-canary.v20260402184113.js → apiKeys_ui_583210_1.4.0.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N});var a=i(4518),r=i(3610),o=i(6739),n=i(4180),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(2861),m=i(8272),h=i(8920),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),D=i(4317),K=i(4468),Y=i(4439),v=i(7591),b=i(8080),F=i(7198);let C=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:o})=>(0,a.Y)(m.so,{sx:e=>({width:"100%",[v.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(m.d8,{children:(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Th,{children:"Name"}),(0,a.Y)(m.Th,{children:"Last used"}),o&&(0,a.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,a.Y)(m.NN,{children:t?(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:3,children:(0,a.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Td,{children:(0,a.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(m.Td,{children:(0,a.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,a.Y)(m.Td,{sx:{textAlign:"end"},children:(0,a.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(k,{})})]})}),k=()=>(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:4,children:(0,a.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(2513),$=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),o=A.map(e=>({value:e,label:r((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:o,value:e?.value??"",onChange:t,placeholder:r((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,w.D5)(),{showDescription:o=!1}=(0,d.l)(),n=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=P(t?.value);if(!t?.value\|\|!e)return s((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,a.FD)($.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:P(t?.value)})},children:[(0,a.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[v.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)($.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,a.Y)($.l.PlainInput,{...c.props})}),(0,a.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,a.Y)(R,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,a.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)($.l.ControlRow,{elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)($.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:n.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),N=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,o.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[b,F]=(0,l.useState)(""),k=(0,D.d)(b,500).trim(),{data:w,isLoading:$,isFetching:I,page:z,fetchPage:S,pageCount:T,count:E,revalidate:A}=(0,n.hZ)({subject:e,pageSize:t??10,query:k,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let o=(0,l.useRef)(e);(0,l.useEffect)(()=>{o.current!==e&&(o.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:k,page:z,pageCount:T,isFetching:I,fetchPage:S});let G=E>0?Math.max(0,(z-1)(t??10))+1:0,P=Math.min(z*(t??10),E),R=(0,x.f0)(),N=(0,n.ho)(),[B,H]=(0,l.useState)(null),{t:j}=(0,p._)(),[J,U]=(0,l.useState)(!1),[W,q]=(0,l.useState)(""),[X,Z]=(0,l.useState)(""),[Q,V]=(0,l.useState)(!1),ee=async t=>{try{R.setLoading();let i=await N.apiKeys.create({...t,subject:e});A(),R.setError(void 0),V(!0),H(i)}catch(e){if(!(0,r.$R)(e))return void(0,K.H4)(e,[],R.setError);switch(e.errors?.[0]?.code){case"token_quota_exceeded":R.setError(j((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":R.setError(j((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],R.setError)}}finally{R.setIdle()}};return(0,a.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[v.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,a.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:j((0,u.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(m.In,{icon:Y.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:b,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(O,{onCreate:ee})})})}),(0,a.Y)(M,{isOpen:Q,onOpen:()=>V(!0),onClose:()=>V(!1),apiKeyName:B?.name\|\|"",apiKeySecret:B?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(C,{rows:w,isLoading:$,onRevoke:(e,t)=>{q(e),Z(t),U(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:E,startingRow:G,endingRow:P}}),(0,a.Y)(L,{isOpen:J,onOpen:()=>U(!0),onClose:()=>{q(""),Z(""),U(!1)},apiKeyID:W,apiKeyName:X,onRevokeSuccess:A,modalRoot:i})]})},B=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,n.Jd)(),i=(0,n.It)(),r=i?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(N,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>o,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),o=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>B,APIKeysPage:()=>N});var a=i(4518),r=i(3610),o=i(6739),n=i(4180),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(2861),m=i(8272),h=i(8920),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),D=i(4317),K=i(4468),Y=i(4439),v=i(7591),b=i(8080),F=i(7198);let C=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:o})=>(0,a.Y)(m.so,{sx:e=>({width:"100%",[v.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(m.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(m.d8,{children:(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Th,{children:"Name"}),(0,a.Y)(m.Th,{children:"Last used"}),o&&(0,a.Y)(m.Th,{sx:{textAlign:"end"},children:"Actions"})]})}),(0,a.Y)(m.NN,{children:t?(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:3,children:(0,a.Y)(m.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:h.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(m.Tr,{children:[(0,a.Y)(m.Td,{children:(0,a.FD)(m.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(m.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,u.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,u.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(m.Td,{children:(0,a.Y)(m.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(m.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),o&&(0,a.Y)(m.Td,{sx:{textAlign:"end"},children:(0,a.Y)(b.o,{actions:[{label:(0,u.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(k,{})})]})}),k=()=>(0,a.Y)(m.Tr,{children:(0,a.Y)(m.Td,{colSpan:4,children:(0,a.Y)(m.EY,{localizationKey:(0,u.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var w=i(2513),$=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),E=i(8640);let A=["never","1d","7d","30d","60d","90d","180d","1y"],G={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},P=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return G[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},R=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),o=A.map(e=>({value:e,label:r((0,u.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:o,value:e?.value??"",onChange:t,placeholder:r((0,u.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},O=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,w.D5)(),{showDescription:o=!1}=(0,d.l)(),n=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,E.tJ)("name","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyName"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,E.tJ)("apiKeyDescription","",{type:"text",label:(0,u.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,u.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=P(t?.value);if(!t?.value\|\|!e)return s((0,u.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,u.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,u.G)("apiKeys.formTitle"),headerSubtitle:(0,u.G)("apiKeys.formHint"),elementDescriptor:h.$z.apiKeysCreateForm,children:(0,a.FD)($.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:P(t?.value)})},children:[(0,a.FD)(m.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[v.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)($.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:h.$z.apiKeysCreateFormNameInput,children:(0,a.Y)($.l.PlainInput,{...c.props})}),(0,a.FD)(m.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:h.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(m.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(m.EY,{as:"span",variant:"subtitle",localizationKey:(0,u.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,u.G)("formFieldHintText__optional")})]}),(0,a.Y)(R,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(m.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:h.$z.apiKeysCreateFormExpirationCaption})]})]}),o&&(0,a.Y)(m.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)($.l.ControlRow,{elementId:y.id,elementDescriptor:h.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)($.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,u.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:n.isLoading,elementDescriptor:h.$z.apiKeysCreateFormSubmitButton})]})})},L=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),M=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),N=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,o.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[b,F]=(0,l.useState)(""),k=(0,D.d)(b,500).trim(),{data:w,isLoading:$,isFetching:I,page:z,fetchPage:S,pageCount:T,count:E,revalidate:A}=(0,n.O4)({subject:e,pageSize:t??10,query:k,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let o=(0,l.useRef)(e);(0,l.useEffect)(()=>{o.current!==e&&(o.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:k,page:z,pageCount:T,isFetching:I,fetchPage:S});let G=E>0?Math.max(0,(z-1)(t??10))+1:0,P=Math.min(z*(t??10),E),R=(0,x.f0)(),N=(0,n.ho)(),[B,H]=(0,l.useState)(null),{t:j}=(0,p._)(),[J,U]=(0,l.useState)(!1),[W,q]=(0,l.useState)(""),[X,Z]=(0,l.useState)(""),[Q,V]=(0,l.useState)(!1),ee=async t=>{try{R.setLoading();let i=await N.apiKeys.create({...t,subject:e});A(),R.setError(void 0),V(!0),H(i)}catch(e){if(!(0,r.$R)(e))return void(0,K.H4)(e,[],R.setError);switch(e.errors?.[0]?.code){case"token_quota_exceeded":R.setError(j((0,u.G)("unstable__errors.api_key_usage_exceeded")));break;case"token_creation_conflict":R.setError(j((0,u.G)("unstable__errors.api_key_name_already_exists")));break;default:(0,K.H4)(e,[],R.setError)}}finally{R.setIdle()}};return(0,a.FD)(m.fv,{gap:4,sx:{width:"100%"},elementDescriptor:h.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(m.so,{justify:"between",align:"center",gap:4,sx:{[v.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:h.$z.apiKeysHeader,children:[(0,a.Y)(m.az,{elementDescriptor:h.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:j((0,u.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(m.In,{icon:Y.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:b,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:h.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(m.$n,{variant:"solid",localizationKey:(0,u.G)("apiKeys.action__add"),elementDescriptor:h.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(m.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(O,{onCreate:ee})})})}),(0,a.Y)(M,{isOpen:Q,onOpen:()=>V(!0),onClose:()=>V(!1),apiKeyName:B?.name\|\|"",apiKeySecret:B?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(C,{rows:w,isLoading:$,onRevoke:(e,t)=>{q(e),Z(t),U(!0)},elementDescriptor:h.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:E,startingRow:G,endingRow:P}}),(0,a.Y)(L,{isOpen:J,onOpen:()=>U(!0),onClose:()=>{q(""),Z(""),U(!1)},apiKeyID:W,apiKeyName:X,onRevokeSuccess:A,modalRoot:i})]})},B=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,n.Jd)(),i=(0,n.It)(),r=i?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(N,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>o,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),o=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);

package/dist/components/APIKeys/APIKeys.js CHANGED Viewed

@@ -19,7 +19,7 @@ import { CreateAPIKeyForm } from "./CreateAPIKeyForm.js";
 import { useAPIKeysPagination } from "./utils.js";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
 import { lazy, useState } from "react";
-import { __experimental_useAPIKeys, __internal_useOrganizationBase, useClerk, useUser } from "@clerk/shared/react";
+import { __internal_useOrganizationBase, useAPIKeys, useClerk, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isOrganizationId } from "@clerk/shared/internal/clerk-js/organization";
@@ -40,7 +40,7 @@ const APIKeysPage = ({ subject, perPage, revokeModalRoot }) => {
 	const canManageAPIKeys = useProtect({ permission: "org:sys_api_keys:manage" });
 	const [searchValue, setSearchValue] = useState("");
 	const query = useDebounce(searchValue, apiKeysSearchDebounceMs).trim();
-	const { data: apiKeys, isLoading, isFetching, page, fetchPage, pageCount, count: itemCount, revalidate: invalidateAll } = __experimental_useAPIKeys({
+	const { data: apiKeys, isLoading, isFetching, page, fetchPage, pageCount, count: itemCount, revalidate: invalidateAll } = useAPIKeys({
 		subject,
 		pageSize: perPage ?? API_KEYS_PAGE_SIZE,
 		query,

package/dist/components/APIKeys/APIKeys.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"APIKeys.js","names":["useAPIKeys","apiKey","err: any","MagnifyingGlass","t"],"sources":["../../../src/components/APIKeys/APIKeys.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { isOrganizationId } from '@clerk/shared/internal/clerk-js/organization';\nimport {\n __experimental_useAPIKeys as useAPIKeys,\n __internal_useOrganizationBase,\n useClerk,\n useUser,\n} from '@clerk/shared/react';\nimport type { APIKeyResource } from '@clerk/shared/types';\nimport { lazy, useState } from 'react';\n\nimport { useProtect } from '@/ui/common';\nimport { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';\nimport {\n Box,\n Button,\n Col,\n descriptors,\n Flex,\n Flow,\n Icon,\n localizationKeys,\n useLocalizations,\n} from '@/ui/customizables';\nimport { Action } from '@/ui/elements/Action';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\nimport { Pagination } from '@/ui/elements/Pagination';\nimport { useDebounce } from '@/ui/hooks';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { MagnifyingGlass } from '@/ui/icons';\nimport { mqu } from '@/ui/styledSystem';\n\nimport { APIKeysTable } from './ApiKeysTable';\nimport type { OnCreateParams } from './CreateAPIKeyForm';\nimport { CreateAPIKeyForm } from './CreateAPIKeyForm';\nimport { useAPIKeysPagination } from './utils';\n\ntype APIKeysPageProps = {\n subject: string;\n perPage?: number;\n revokeModalRoot?: React.MutableRefObject<HTMLElement \| null>;\n};\n\nconst RevokeAPIKeyConfirmationModal = lazy(() =>\n import(/* webpackChunkName: \"revoke-api-key-modal\"/ './RevokeAPIKeyConfirmationModal').then(module => ({\n default: module.RevokeAPIKeyConfirmationModal,\n })),\n);\n\nconst CopyAPIKeyModal = lazy(() =>\n import(/ webpackChunkName: \"copy-api-key-modal\"/ './CopyAPIKeyModal').then(module => ({\n default: module.CopyAPIKeyModal,\n })),\n);\n\nconst apiKeysSearchDebounceMs = 500;\nconst API_KEYS_PAGE_SIZE = 10;\n\nexport const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPageProps) => {\n const isOrg = isOrganizationId(subject);\n const canReadAPIKeys = useProtect({ permission: 'org:sys_api_keys:read' });\n const canManageAPIKeys = useProtect({ permission: 'org:sys_api_keys:manage' });\n\n const [searchValue, setSearchValue] = useState('');\n const debouncedSearchValue = useDebounce(searchValue, apiKeysSearchDebounceMs);\n const query = debouncedSearchValue.trim();\n\n const {\n data: apiKeys,\n isLoading,\n isFetching,\n page,\n fetchPage,\n pageCount,\n count: itemCount,\n revalidate: invalidateAll,\n } = useAPIKeys({\n subject,\n pageSize: perPage ?? API_KEYS_PAGE_SIZE,\n query,\n keepPreviousData: true,\n enabled: isOrg ? canReadAPIKeys : true,\n });\n\n useAPIKeysPagination({\n query,\n page,\n pageCount,\n isFetching,\n fetchPage,\n });\n\n const startingRow = itemCount > 0 ? Math.max(0, (page - 1) (perPage ?? API_KEYS_PAGE_SIZE)) + 1 : 0;\n const endingRow = Math.min(page * (perPage ?? API_KEYS_PAGE_SIZE), itemCount);\n\n const handlePageChange = (newPage: number) => {\n fetchPage(newPage);\n };\n const card = useCardState();\n const clerk = useClerk();\n\n const [apiKey, setAPIKey] = useState<APIKeyResource \| null>(null);\n\n const { t } = useLocalizations();\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');\n const [selectedAPIKeyName, setSelectedAPIKeyName] = useState('');\n const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);\n\n const handleCreateAPIKey = async (params: OnCreateParams) => {\n try {\n card.setLoading();\n const apiKey = await clerk.apiKeys.create({\n ...params,\n subject,\n });\n void invalidateAll();\n card.setError(undefined);\n setIsCopyModalOpen(true);\n setAPIKey(apiKey);\n } catch (err: any) {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n switch (err.errors?.[0]?.code) {\n case 'token_quota_exceeded':\n card.setError(t(localizationKeys('unstable__errors.api_key_usage_exceeded')));\n break;\n case 'token_creation_conflict':\n card.setError(t(localizationKeys('unstable__errors.api_key_name_already_exists')));\n break;\n default:\n handleError(err, [], card.setError);\n }\n } finally {\n card.setIdle();\n }\n };\n\n const handleRevoke = (apiKeyID: string, apiKeyName: string) => {\n setSelectedAPIKeyID(apiKeyID);\n setSelectedAPIKeyName(apiKeyName);\n setIsRevokeModalOpen(true);\n };\n\n return (\n <Col\n gap={4}\n sx={{ width: '100%' }}\n elementDescriptor={descriptors.apiKeys}\n >\n <Action.Root>\n <Flex\n justify='between'\n align='center'\n gap={4}\n sx={{\n [mqu.sm]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n },\n }}\n elementDescriptor={descriptors.apiKeysHeader}\n >\n <Box elementDescriptor={descriptors.apiKeysSearchBox}>\n <InputWithIcon\n placeholder={t(localizationKeys('apiKeys.action__search'))}\n leftIcon={\n <Icon\n icon={MagnifyingGlass}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n }\n value={searchValue}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n onChange={e => setSearchValue(e.target.value)}\n elementDescriptor={descriptors.apiKeysSearchInput}\n />\n </Box>\n {((isOrg && canManageAPIKeys) \|\| !isOrg) && (\n <Action.Trigger\n value='add-api-key'\n hideOnActive={false}\n >\n <Button\n variant='solid'\n localizationKey={localizationKeys('apiKeys.action__add')}\n elementDescriptor={descriptors.apiKeysAddButton}\n />\n </Action.Trigger>\n )}\n </Flex>\n <Action.Open value='add-api-key'>\n <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>\n <Action.Card sx={{ width: '100%' }}>\n <CreateAPIKeyForm onCreate={handleCreateAPIKey} />\n </Action.Card>\n </Flex>\n </Action.Open>\n\n <CopyAPIKeyModal\n isOpen={isCopyModalOpen}\n onOpen={() => setIsCopyModalOpen(true)}\n onClose={() => setIsCopyModalOpen(false)}\n apiKeyName={apiKey?.name \|\| ''}\n apiKeySecret={apiKey?.secret \|\| ''}\n modalRoot={revokeModalRoot}\n />\n </Action.Root>\n\n <APIKeysTable\n rows={apiKeys}\n isLoading={isLoading}\n onRevoke={handleRevoke}\n elementDescriptor={descriptors.apiKeysTable}\n canManageAPIKeys={(isOrg && canManageAPIKeys) \|\| !isOrg}\n />\n {pageCount > 1 && (\n <Pagination\n count={pageCount}\n page={Math.min(page, pageCount)}\n onChange={handlePageChange}\n siblingCount={1}\n rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}\n />\n )}\n\n <RevokeAPIKeyConfirmationModal\n isOpen={isRevokeModalOpen}\n onOpen={() => setIsRevokeModalOpen(true)}\n onClose={() => {\n setSelectedAPIKeyID('');\n setSelectedAPIKeyName('');\n setIsRevokeModalOpen(false);\n }}\n apiKeyID={selectedAPIKeyID}\n apiKeyName={selectedAPIKeyName}\n onRevokeSuccess={invalidateAll}\n modalRoot={revokeModalRoot}\n />\n </Col>\n );\n};\n\nconst _APIKeys = () => {\n const ctx = useAPIKeysContext();\n const { user } = useUser();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organization = __internal_useOrganizationBase();\n\n const subject = organization?.id ?? user?.id ?? '';\n\n return (\n <Flow.Root\n flow='apiKeys'\n sx={{\n width: '100%',\n }}\n >\n <APIKeysPage\n subject={subject}\n perPage={ctx.perPage}\n />\n </Flow.Root>\n );\n};\n\nexport const APIKeys = withCoreUserGuard(withCardStateProvider(_APIKeys));\n"],"mappings":"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"}
1	+ {"version":3,"file":"APIKeys.js","names":["apiKey","err: any","MagnifyingGlass","t"],"sources":["../../../src/components/APIKeys/APIKeys.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { isOrganizationId } from '@clerk/shared/internal/clerk-js/organization';\nimport { useAPIKeys, __internal_useOrganizationBase, useClerk, useUser } from '@clerk/shared/react';\nimport type { APIKeyResource } from '@clerk/shared/types';\nimport { lazy, useState } from 'react';\n\nimport { useProtect } from '@/ui/common';\nimport { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';\nimport {\n Box,\n Button,\n Col,\n descriptors,\n Flex,\n Flow,\n Icon,\n localizationKeys,\n useLocalizations,\n} from '@/ui/customizables';\nimport { Action } from '@/ui/elements/Action';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\nimport { Pagination } from '@/ui/elements/Pagination';\nimport { useDebounce } from '@/ui/hooks';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { MagnifyingGlass } from '@/ui/icons';\nimport { mqu } from '@/ui/styledSystem';\n\nimport { APIKeysTable } from './ApiKeysTable';\nimport type { OnCreateParams } from './CreateAPIKeyForm';\nimport { CreateAPIKeyForm } from './CreateAPIKeyForm';\nimport { useAPIKeysPagination } from './utils';\n\ntype APIKeysPageProps = {\n subject: string;\n perPage?: number;\n revokeModalRoot?: React.MutableRefObject<HTMLElement \| null>;\n};\n\nconst RevokeAPIKeyConfirmationModal = lazy(() =>\n import(/* webpackChunkName: \"revoke-api-key-modal\"/ './RevokeAPIKeyConfirmationModal').then(module => ({\n default: module.RevokeAPIKeyConfirmationModal,\n })),\n);\n\nconst CopyAPIKeyModal = lazy(() =>\n import(/ webpackChunkName: \"copy-api-key-modal\"/ './CopyAPIKeyModal').then(module => ({\n default: module.CopyAPIKeyModal,\n })),\n);\n\nconst apiKeysSearchDebounceMs = 500;\nconst API_KEYS_PAGE_SIZE = 10;\n\nexport const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPageProps) => {\n const isOrg = isOrganizationId(subject);\n const canReadAPIKeys = useProtect({ permission: 'org:sys_api_keys:read' });\n const canManageAPIKeys = useProtect({ permission: 'org:sys_api_keys:manage' });\n\n const [searchValue, setSearchValue] = useState('');\n const debouncedSearchValue = useDebounce(searchValue, apiKeysSearchDebounceMs);\n const query = debouncedSearchValue.trim();\n\n const {\n data: apiKeys,\n isLoading,\n isFetching,\n page,\n fetchPage,\n pageCount,\n count: itemCount,\n revalidate: invalidateAll,\n } = useAPIKeys({\n subject,\n pageSize: perPage ?? API_KEYS_PAGE_SIZE,\n query,\n keepPreviousData: true,\n enabled: isOrg ? canReadAPIKeys : true,\n });\n\n useAPIKeysPagination({\n query,\n page,\n pageCount,\n isFetching,\n fetchPage,\n });\n\n const startingRow = itemCount > 0 ? Math.max(0, (page - 1) (perPage ?? API_KEYS_PAGE_SIZE)) + 1 : 0;\n const endingRow = Math.min(page * (perPage ?? API_KEYS_PAGE_SIZE), itemCount);\n\n const handlePageChange = (newPage: number) => {\n fetchPage(newPage);\n };\n const card = useCardState();\n const clerk = useClerk();\n\n const [apiKey, setAPIKey] = useState<APIKeyResource \| null>(null);\n\n const { t } = useLocalizations();\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');\n const [selectedAPIKeyName, setSelectedAPIKeyName] = useState('');\n const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);\n\n const handleCreateAPIKey = async (params: OnCreateParams) => {\n try {\n card.setLoading();\n const apiKey = await clerk.apiKeys.create({\n ...params,\n subject,\n });\n void invalidateAll();\n card.setError(undefined);\n setIsCopyModalOpen(true);\n setAPIKey(apiKey);\n } catch (err: any) {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n switch (err.errors?.[0]?.code) {\n case 'token_quota_exceeded':\n card.setError(t(localizationKeys('unstable__errors.api_key_usage_exceeded')));\n break;\n case 'token_creation_conflict':\n card.setError(t(localizationKeys('unstable__errors.api_key_name_already_exists')));\n break;\n default:\n handleError(err, [], card.setError);\n }\n } finally {\n card.setIdle();\n }\n };\n\n const handleRevoke = (apiKeyID: string, apiKeyName: string) => {\n setSelectedAPIKeyID(apiKeyID);\n setSelectedAPIKeyName(apiKeyName);\n setIsRevokeModalOpen(true);\n };\n\n return (\n <Col\n gap={4}\n sx={{ width: '100%' }}\n elementDescriptor={descriptors.apiKeys}\n >\n <Action.Root>\n <Flex\n justify='between'\n align='center'\n gap={4}\n sx={{\n [mqu.sm]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n },\n }}\n elementDescriptor={descriptors.apiKeysHeader}\n >\n <Box elementDescriptor={descriptors.apiKeysSearchBox}>\n <InputWithIcon\n placeholder={t(localizationKeys('apiKeys.action__search'))}\n leftIcon={\n <Icon\n icon={MagnifyingGlass}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n }\n value={searchValue}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n onChange={e => setSearchValue(e.target.value)}\n elementDescriptor={descriptors.apiKeysSearchInput}\n />\n </Box>\n {((isOrg && canManageAPIKeys) \|\| !isOrg) && (\n <Action.Trigger\n value='add-api-key'\n hideOnActive={false}\n >\n <Button\n variant='solid'\n localizationKey={localizationKeys('apiKeys.action__add')}\n elementDescriptor={descriptors.apiKeysAddButton}\n />\n </Action.Trigger>\n )}\n </Flex>\n <Action.Open value='add-api-key'>\n <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>\n <Action.Card sx={{ width: '100%' }}>\n <CreateAPIKeyForm onCreate={handleCreateAPIKey} />\n </Action.Card>\n </Flex>\n </Action.Open>\n\n <CopyAPIKeyModal\n isOpen={isCopyModalOpen}\n onOpen={() => setIsCopyModalOpen(true)}\n onClose={() => setIsCopyModalOpen(false)}\n apiKeyName={apiKey?.name \|\| ''}\n apiKeySecret={apiKey?.secret \|\| ''}\n modalRoot={revokeModalRoot}\n />\n </Action.Root>\n\n <APIKeysTable\n rows={apiKeys}\n isLoading={isLoading}\n onRevoke={handleRevoke}\n elementDescriptor={descriptors.apiKeysTable}\n canManageAPIKeys={(isOrg && canManageAPIKeys) \|\| !isOrg}\n />\n {pageCount > 1 && (\n <Pagination\n count={pageCount}\n page={Math.min(page, pageCount)}\n onChange={handlePageChange}\n siblingCount={1}\n rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}\n />\n )}\n\n <RevokeAPIKeyConfirmationModal\n isOpen={isRevokeModalOpen}\n onOpen={() => setIsRevokeModalOpen(true)}\n onClose={() => {\n setSelectedAPIKeyID('');\n setSelectedAPIKeyName('');\n setIsRevokeModalOpen(false);\n }}\n apiKeyID={selectedAPIKeyID}\n apiKeyName={selectedAPIKeyName}\n onRevokeSuccess={invalidateAll}\n modalRoot={revokeModalRoot}\n />\n </Col>\n );\n};\n\nconst _APIKeys = () => {\n const ctx = useAPIKeysContext();\n const { user } = useUser();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organization = __internal_useOrganizationBase();\n\n const subject = organization?.id ?? user?.id ?? '';\n\n return (\n <Flow.Root\n flow='apiKeys'\n sx={{\n width: '100%',\n }}\n >\n <APIKeysPage\n subject={subject}\n perPage={ctx.perPage}\n />\n </Flow.Root>\n );\n};\n\nexport const APIKeys = withCoreUserGuard(withCardStateProvider(_APIKeys));\n"],"mappings":"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"}

package/dist/components/OrganizationList/OrganizationListPage.js CHANGED Viewed

@@ -92,7 +92,8 @@ const OrganizationListPageList = (props) => {
 	const userSuggestionsData = userSuggestions.data?.filter((a) => !!a);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs(Header.Root, {
-			sx: (t) => ({ padding: `${t.space.$none} ${t.space.$8}` }),
+			sx: (t) => ({ padding: `${t.space.$4} ${t.space.$4} ${t.space.$none}` }),
+			showLogo: true,
 			children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys(!hidePersonal ? "organizationList.title" : "organizationList.titleWithoutPersonal") }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("organizationList.subtitle", { applicationName: environment.displayConfig.applicationName }) })]
 		}),
 		/* @__PURE__ */ jsx(Card.Alert, {

package/dist/components/OrganizationList/OrganizationListPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationListPage.js","names":[],"sources":["../../../src/components/OrganizationList/OrganizationListPage.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { CreateOrganizationAction } from '@/common/CreateOrganizationAction';\nimport { OrganizationPreviewSpinner } from '@/ui/common/organizations/OrganizationPreview';\nimport { Actions } from '@/ui/elements/Actions';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';\n\nimport { useEnvironment, useOrganizationListContext } from '../../contexts';\nimport { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';\nimport { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';\nimport { PreviewListItems } from './shared';\nimport { InvitationPreview } from './UserInvitationList';\nimport { MembershipPreview, PersonalAccountPreview } from './UserMembershipList';\nimport { SuggestionPreview } from './UserSuggestionList';\n\nconst CreateOrganizationButton = ({\n onCreateOrganizationClick,\n}: {\n onCreateOrganizationClick: React.MouseEventHandler;\n}) => {\n return (\n <CreateOrganizationAction\n elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}\n label={localizationKeys('organizationList.action__createOrganization')}\n onClick={onCreateOrganizationClick}\n sx={t => ({\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n padding: `${t.space.$5} ${t.space.$5}`,\n })}\n iconSx={t => ({\n width: t.sizes.$9,\n height: t.sizes.$6,\n })}\n />\n );\n};\n\nexport const OrganizationListPage = withCardStateProvider(() => {\n const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasAnyData = !!(userMemberships?.count \|\| userInvitations?.count \|\| userSuggestions?.count);\n\n const { hidePersonal } = useOrganizationListContext();\n\n return (\n <Card.Root>\n <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$none} ${t.space.$none}` })}>\n {isLoading && (\n <Flex\n direction={'row'}\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n minHeight: t.sizes.$60,\n })}\n >\n <Spinner\n size={'lg'}\n colorScheme={'primary'}\n elementDescriptor={descriptors.spinner}\n />\n </Flex>\n )}\n\n {!isLoading && <OrganizationListFlows showListInitially={!(hidePersonal && !hasAnyData)} />}\n </Card.Content>\n <Card.Footer />\n </Card.Root>\n );\n});\n\nconst OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {\n const card = useCardState();\n const { navigateAfterCreateOrganization, skipInvitationScreen } = useOrganizationListContext();\n const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);\n return (\n <>\n {!isCreateOrganizationFlow && (\n <OrganizationListPageList onCreateOrganizationClick={() => setCreateOrganizationFlow(true)} />\n )}\n\n {isCreateOrganizationFlow && (\n <>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n\n <Box\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,\n })}\n >\n <CreateOrganizationForm\n flow='organizationList'\n startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}\n skipInvitationScreen={skipInvitationScreen}\n navigateAfterCreateOrganization={org =>\n navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))\n }\n onCancel={\n showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined\n }\n />\n </Box>\n </>\n )}\n </>\n );\n};\n\nexport const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {\n const card = useCardState();\n const environment = useEnvironment();\n\n const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const { hidePersonal } = useOrganizationListContext();\n\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasNextPage = userMemberships?.hasNextPage \|\| userInvitations?.hasNextPage \|\| userSuggestions?.hasNextPage;\n\n const onCreateOrganizationClick = () => {\n // Clear error originated from the list when switching to form\n card.setError(undefined);\n props.onCreateOrganizationClick();\n };\n\n // Filter out falsy values that can occur when infinite loading resolves pages out of order\n // This happens when concurrent requests resolve in unexpected order, leaving undefined/null items in the data array\n const userInvitationsData = userInvitations.data?.filter(a => !!a);\n const userSuggestionsData = userSuggestions.data?.filter(a => !!a);\n\n return (\n <>\n <Header.Root\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$8}`,\n })}\n >\n <Header.Title\n localizationKey={localizationKeys(\n !hidePersonal ? 'organizationList.title' : 'organizationList.titleWithoutPersonal',\n )}\n />\n <Header.Subtitle\n localizationKey={localizationKeys('organizationList.subtitle', {\n applicationName: environment.displayConfig.applicationName,\n })}\n />\n </Header.Root>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n <Col elementDescriptor={descriptors.main}>\n <PreviewListItems>\n <Actions role='menu'>\n <PersonalAccountPreview />\n {(userMemberships.count \|\| 0) > 0 &&\n userMemberships.data?.map(inv => {\n return (\n <MembershipPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n userInvitationsData?.map(inv => {\n return (\n <InvitationPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n !userInvitations.hasNextPage &&\n userSuggestionsData?.map(inv => {\n return (\n <SuggestionPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {(hasNextPage \|\| isLoading) && <OrganizationPreviewSpinner ref={ref} />}\n\n <CreateOrganizationButton onCreateOrganizationClick={onCreateOrganizationClick} />\n </Actions>\n </PreviewListItems>\n </Col>\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"OrganizationListPage.js","names":[],"sources":["../../../src/components/OrganizationList/OrganizationListPage.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { CreateOrganizationAction } from '@/common/CreateOrganizationAction';\nimport { OrganizationPreviewSpinner } from '@/ui/common/organizations/OrganizationPreview';\nimport { Actions } from '@/ui/elements/Actions';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';\n\nimport { useEnvironment, useOrganizationListContext } from '../../contexts';\nimport { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';\nimport { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';\nimport { PreviewListItems } from './shared';\nimport { InvitationPreview } from './UserInvitationList';\nimport { MembershipPreview, PersonalAccountPreview } from './UserMembershipList';\nimport { SuggestionPreview } from './UserSuggestionList';\n\nconst CreateOrganizationButton = ({\n onCreateOrganizationClick,\n}: {\n onCreateOrganizationClick: React.MouseEventHandler;\n}) => {\n return (\n <CreateOrganizationAction\n elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}\n label={localizationKeys('organizationList.action__createOrganization')}\n onClick={onCreateOrganizationClick}\n sx={t => ({\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n padding: `${t.space.$5} ${t.space.$5}`,\n })}\n iconSx={t => ({\n width: t.sizes.$9,\n height: t.sizes.$6,\n })}\n />\n );\n};\n\nexport const OrganizationListPage = withCardStateProvider(() => {\n const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasAnyData = !!(userMemberships?.count \|\| userInvitations?.count \|\| userSuggestions?.count);\n\n const { hidePersonal } = useOrganizationListContext();\n\n return (\n <Card.Root>\n <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$none} ${t.space.$none}` })}>\n {isLoading && (\n <Flex\n direction={'row'}\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n minHeight: t.sizes.$60,\n })}\n >\n <Spinner\n size={'lg'}\n colorScheme={'primary'}\n elementDescriptor={descriptors.spinner}\n />\n </Flex>\n )}\n\n {!isLoading && <OrganizationListFlows showListInitially={!(hidePersonal && !hasAnyData)} />}\n </Card.Content>\n <Card.Footer />\n </Card.Root>\n );\n});\n\nconst OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {\n const card = useCardState();\n const { navigateAfterCreateOrganization, skipInvitationScreen } = useOrganizationListContext();\n const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);\n return (\n <>\n {!isCreateOrganizationFlow && (\n <OrganizationListPageList onCreateOrganizationClick={() => setCreateOrganizationFlow(true)} />\n )}\n\n {isCreateOrganizationFlow && (\n <>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n\n <Box\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,\n })}\n >\n <CreateOrganizationForm\n flow='organizationList'\n startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}\n skipInvitationScreen={skipInvitationScreen}\n navigateAfterCreateOrganization={org =>\n navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))\n }\n onCancel={\n showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined\n }\n />\n </Box>\n </>\n )}\n </>\n );\n};\n\nexport const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {\n const card = useCardState();\n const environment = useEnvironment();\n\n const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const { hidePersonal } = useOrganizationListContext();\n\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasNextPage = userMemberships?.hasNextPage \|\| userInvitations?.hasNextPage \|\| userSuggestions?.hasNextPage;\n\n const onCreateOrganizationClick = () => {\n // Clear error originated from the list when switching to form\n card.setError(undefined);\n props.onCreateOrganizationClick();\n };\n\n // Filter out falsy values that can occur when infinite loading resolves pages out of order\n // This happens when concurrent requests resolve in unexpected order, leaving undefined/null items in the data array\n const userInvitationsData = userInvitations.data?.filter(a => !!a);\n const userSuggestionsData = userSuggestions.data?.filter(a => !!a);\n\n return (\n <>\n <Header.Root\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$4} ${t.space.$none}`,\n })}\n showLogo\n >\n <Header.Title\n localizationKey={localizationKeys(\n !hidePersonal ? 'organizationList.title' : 'organizationList.titleWithoutPersonal',\n )}\n />\n <Header.Subtitle\n localizationKey={localizationKeys('organizationList.subtitle', {\n applicationName: environment.displayConfig.applicationName,\n })}\n />\n </Header.Root>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n <Col elementDescriptor={descriptors.main}>\n <PreviewListItems>\n <Actions role='menu'>\n <PersonalAccountPreview />\n {(userMemberships.count \|\| 0) > 0 &&\n userMemberships.data?.map(inv => {\n return (\n <MembershipPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n userInvitationsData?.map(inv => {\n return (\n <InvitationPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n !userInvitations.hasNextPage &&\n userSuggestionsData?.map(inv => {\n return (\n <SuggestionPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {(hasNextPage \|\| isLoading) && <OrganizationPreviewSpinner ref={ref} />}\n\n <CreateOrganizationButton onCreateOrganizationClick={onCreateOrganizationClick} />\n </Actions>\n </PreviewListItems>\n </Col>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { UI_BRAND } from "./internal/index.js";
 */
 const ui = {
 	__brand: UI_BRAND,
-	version: "1.3.1-canary.v20260402184113",
+	version: "1.4.0",
 	ClerkUI
 };

package/dist/no-rhc/ClerkUI.js CHANGED Viewed

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.3.1-canary.v20260402184113";
-	version = "1.3.1-canary.v20260402184113";
+	static version = "1.4.0";
+	version = "1.4.0";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/no-rhc/components/APIKeys/APIKeys.js CHANGED Viewed

@@ -19,7 +19,7 @@ import { CreateAPIKeyForm } from "./CreateAPIKeyForm.js";
 import { useAPIKeysPagination } from "./utils.js";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
 import { lazy, useState } from "react";
-import { __experimental_useAPIKeys, __internal_useOrganizationBase, useClerk, useUser } from "@clerk/shared/react";
+import { __internal_useOrganizationBase, useAPIKeys, useClerk, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isOrganizationId } from "@clerk/shared/internal/clerk-js/organization";
@@ -40,7 +40,7 @@ const APIKeysPage = ({ subject, perPage, revokeModalRoot }) => {
 	const canManageAPIKeys = useProtect({ permission: "org:sys_api_keys:manage" });
 	const [searchValue, setSearchValue] = useState("");
 	const query = useDebounce(searchValue, apiKeysSearchDebounceMs).trim();
-	const { data: apiKeys, isLoading, isFetching, page, fetchPage, pageCount, count: itemCount, revalidate: invalidateAll } = __experimental_useAPIKeys({
+	const { data: apiKeys, isLoading, isFetching, page, fetchPage, pageCount, count: itemCount, revalidate: invalidateAll } = useAPIKeys({
 		subject,
 		pageSize: perPage ?? API_KEYS_PAGE_SIZE,
 		query,

package/dist/no-rhc/components/APIKeys/APIKeys.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"APIKeys.js","names":["useAPIKeys","apiKey","err: any","MagnifyingGlass","t"],"sources":["../../../../src/components/APIKeys/APIKeys.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { isOrganizationId } from '@clerk/shared/internal/clerk-js/organization';\nimport {\n __experimental_useAPIKeys as useAPIKeys,\n __internal_useOrganizationBase,\n useClerk,\n useUser,\n} from '@clerk/shared/react';\nimport type { APIKeyResource } from '@clerk/shared/types';\nimport { lazy, useState } from 'react';\n\nimport { useProtect } from '@/ui/common';\nimport { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';\nimport {\n Box,\n Button,\n Col,\n descriptors,\n Flex,\n Flow,\n Icon,\n localizationKeys,\n useLocalizations,\n} from '@/ui/customizables';\nimport { Action } from '@/ui/elements/Action';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\nimport { Pagination } from '@/ui/elements/Pagination';\nimport { useDebounce } from '@/ui/hooks';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { MagnifyingGlass } from '@/ui/icons';\nimport { mqu } from '@/ui/styledSystem';\n\nimport { APIKeysTable } from './ApiKeysTable';\nimport type { OnCreateParams } from './CreateAPIKeyForm';\nimport { CreateAPIKeyForm } from './CreateAPIKeyForm';\nimport { useAPIKeysPagination } from './utils';\n\ntype APIKeysPageProps = {\n subject: string;\n perPage?: number;\n revokeModalRoot?: React.MutableRefObject<HTMLElement \| null>;\n};\n\nconst RevokeAPIKeyConfirmationModal = lazy(() =>\n import(/* webpackChunkName: \"revoke-api-key-modal\"/ './RevokeAPIKeyConfirmationModal').then(module => ({\n default: module.RevokeAPIKeyConfirmationModal,\n })),\n);\n\nconst CopyAPIKeyModal = lazy(() =>\n import(/ webpackChunkName: \"copy-api-key-modal\"/ './CopyAPIKeyModal').then(module => ({\n default: module.CopyAPIKeyModal,\n })),\n);\n\nconst apiKeysSearchDebounceMs = 500;\nconst API_KEYS_PAGE_SIZE = 10;\n\nexport const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPageProps) => {\n const isOrg = isOrganizationId(subject);\n const canReadAPIKeys = useProtect({ permission: 'org:sys_api_keys:read' });\n const canManageAPIKeys = useProtect({ permission: 'org:sys_api_keys:manage' });\n\n const [searchValue, setSearchValue] = useState('');\n const debouncedSearchValue = useDebounce(searchValue, apiKeysSearchDebounceMs);\n const query = debouncedSearchValue.trim();\n\n const {\n data: apiKeys,\n isLoading,\n isFetching,\n page,\n fetchPage,\n pageCount,\n count: itemCount,\n revalidate: invalidateAll,\n } = useAPIKeys({\n subject,\n pageSize: perPage ?? API_KEYS_PAGE_SIZE,\n query,\n keepPreviousData: true,\n enabled: isOrg ? canReadAPIKeys : true,\n });\n\n useAPIKeysPagination({\n query,\n page,\n pageCount,\n isFetching,\n fetchPage,\n });\n\n const startingRow = itemCount > 0 ? Math.max(0, (page - 1) (perPage ?? API_KEYS_PAGE_SIZE)) + 1 : 0;\n const endingRow = Math.min(page * (perPage ?? API_KEYS_PAGE_SIZE), itemCount);\n\n const handlePageChange = (newPage: number) => {\n fetchPage(newPage);\n };\n const card = useCardState();\n const clerk = useClerk();\n\n const [apiKey, setAPIKey] = useState<APIKeyResource \| null>(null);\n\n const { t } = useLocalizations();\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');\n const [selectedAPIKeyName, setSelectedAPIKeyName] = useState('');\n const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);\n\n const handleCreateAPIKey = async (params: OnCreateParams) => {\n try {\n card.setLoading();\n const apiKey = await clerk.apiKeys.create({\n ...params,\n subject,\n });\n void invalidateAll();\n card.setError(undefined);\n setIsCopyModalOpen(true);\n setAPIKey(apiKey);\n } catch (err: any) {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n switch (err.errors?.[0]?.code) {\n case 'token_quota_exceeded':\n card.setError(t(localizationKeys('unstable__errors.api_key_usage_exceeded')));\n break;\n case 'token_creation_conflict':\n card.setError(t(localizationKeys('unstable__errors.api_key_name_already_exists')));\n break;\n default:\n handleError(err, [], card.setError);\n }\n } finally {\n card.setIdle();\n }\n };\n\n const handleRevoke = (apiKeyID: string, apiKeyName: string) => {\n setSelectedAPIKeyID(apiKeyID);\n setSelectedAPIKeyName(apiKeyName);\n setIsRevokeModalOpen(true);\n };\n\n return (\n <Col\n gap={4}\n sx={{ width: '100%' }}\n elementDescriptor={descriptors.apiKeys}\n >\n <Action.Root>\n <Flex\n justify='between'\n align='center'\n gap={4}\n sx={{\n [mqu.sm]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n },\n }}\n elementDescriptor={descriptors.apiKeysHeader}\n >\n <Box elementDescriptor={descriptors.apiKeysSearchBox}>\n <InputWithIcon\n placeholder={t(localizationKeys('apiKeys.action__search'))}\n leftIcon={\n <Icon\n icon={MagnifyingGlass}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n }\n value={searchValue}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n onChange={e => setSearchValue(e.target.value)}\n elementDescriptor={descriptors.apiKeysSearchInput}\n />\n </Box>\n {((isOrg && canManageAPIKeys) \|\| !isOrg) && (\n <Action.Trigger\n value='add-api-key'\n hideOnActive={false}\n >\n <Button\n variant='solid'\n localizationKey={localizationKeys('apiKeys.action__add')}\n elementDescriptor={descriptors.apiKeysAddButton}\n />\n </Action.Trigger>\n )}\n </Flex>\n <Action.Open value='add-api-key'>\n <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>\n <Action.Card sx={{ width: '100%' }}>\n <CreateAPIKeyForm onCreate={handleCreateAPIKey} />\n </Action.Card>\n </Flex>\n </Action.Open>\n\n <CopyAPIKeyModal\n isOpen={isCopyModalOpen}\n onOpen={() => setIsCopyModalOpen(true)}\n onClose={() => setIsCopyModalOpen(false)}\n apiKeyName={apiKey?.name \|\| ''}\n apiKeySecret={apiKey?.secret \|\| ''}\n modalRoot={revokeModalRoot}\n />\n </Action.Root>\n\n <APIKeysTable\n rows={apiKeys}\n isLoading={isLoading}\n onRevoke={handleRevoke}\n elementDescriptor={descriptors.apiKeysTable}\n canManageAPIKeys={(isOrg && canManageAPIKeys) \|\| !isOrg}\n />\n {pageCount > 1 && (\n <Pagination\n count={pageCount}\n page={Math.min(page, pageCount)}\n onChange={handlePageChange}\n siblingCount={1}\n rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}\n />\n )}\n\n <RevokeAPIKeyConfirmationModal\n isOpen={isRevokeModalOpen}\n onOpen={() => setIsRevokeModalOpen(true)}\n onClose={() => {\n setSelectedAPIKeyID('');\n setSelectedAPIKeyName('');\n setIsRevokeModalOpen(false);\n }}\n apiKeyID={selectedAPIKeyID}\n apiKeyName={selectedAPIKeyName}\n onRevokeSuccess={invalidateAll}\n modalRoot={revokeModalRoot}\n />\n </Col>\n );\n};\n\nconst _APIKeys = () => {\n const ctx = useAPIKeysContext();\n const { user } = useUser();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organization = __internal_useOrganizationBase();\n\n const subject = organization?.id ?? user?.id ?? '';\n\n return (\n <Flow.Root\n flow='apiKeys'\n sx={{\n width: '100%',\n }}\n >\n <APIKeysPage\n subject={subject}\n perPage={ctx.perPage}\n />\n </Flow.Root>\n );\n};\n\nexport const APIKeys = withCoreUserGuard(withCardStateProvider(_APIKeys));\n"],"mappings":"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"}
1	+ {"version":3,"file":"APIKeys.js","names":["apiKey","err: any","MagnifyingGlass","t"],"sources":["../../../../src/components/APIKeys/APIKeys.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { isOrganizationId } from '@clerk/shared/internal/clerk-js/organization';\nimport { useAPIKeys, __internal_useOrganizationBase, useClerk, useUser } from '@clerk/shared/react';\nimport type { APIKeyResource } from '@clerk/shared/types';\nimport { lazy, useState } from 'react';\n\nimport { useProtect } from '@/ui/common';\nimport { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';\nimport {\n Box,\n Button,\n Col,\n descriptors,\n Flex,\n Flow,\n Icon,\n localizationKeys,\n useLocalizations,\n} from '@/ui/customizables';\nimport { Action } from '@/ui/elements/Action';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\nimport { Pagination } from '@/ui/elements/Pagination';\nimport { useDebounce } from '@/ui/hooks';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { MagnifyingGlass } from '@/ui/icons';\nimport { mqu } from '@/ui/styledSystem';\n\nimport { APIKeysTable } from './ApiKeysTable';\nimport type { OnCreateParams } from './CreateAPIKeyForm';\nimport { CreateAPIKeyForm } from './CreateAPIKeyForm';\nimport { useAPIKeysPagination } from './utils';\n\ntype APIKeysPageProps = {\n subject: string;\n perPage?: number;\n revokeModalRoot?: React.MutableRefObject<HTMLElement \| null>;\n};\n\nconst RevokeAPIKeyConfirmationModal = lazy(() =>\n import(/* webpackChunkName: \"revoke-api-key-modal\"/ './RevokeAPIKeyConfirmationModal').then(module => ({\n default: module.RevokeAPIKeyConfirmationModal,\n })),\n);\n\nconst CopyAPIKeyModal = lazy(() =>\n import(/ webpackChunkName: \"copy-api-key-modal\"/ './CopyAPIKeyModal').then(module => ({\n default: module.CopyAPIKeyModal,\n })),\n);\n\nconst apiKeysSearchDebounceMs = 500;\nconst API_KEYS_PAGE_SIZE = 10;\n\nexport const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPageProps) => {\n const isOrg = isOrganizationId(subject);\n const canReadAPIKeys = useProtect({ permission: 'org:sys_api_keys:read' });\n const canManageAPIKeys = useProtect({ permission: 'org:sys_api_keys:manage' });\n\n const [searchValue, setSearchValue] = useState('');\n const debouncedSearchValue = useDebounce(searchValue, apiKeysSearchDebounceMs);\n const query = debouncedSearchValue.trim();\n\n const {\n data: apiKeys,\n isLoading,\n isFetching,\n page,\n fetchPage,\n pageCount,\n count: itemCount,\n revalidate: invalidateAll,\n } = useAPIKeys({\n subject,\n pageSize: perPage ?? API_KEYS_PAGE_SIZE,\n query,\n keepPreviousData: true,\n enabled: isOrg ? canReadAPIKeys : true,\n });\n\n useAPIKeysPagination({\n query,\n page,\n pageCount,\n isFetching,\n fetchPage,\n });\n\n const startingRow = itemCount > 0 ? Math.max(0, (page - 1) (perPage ?? API_KEYS_PAGE_SIZE)) + 1 : 0;\n const endingRow = Math.min(page * (perPage ?? API_KEYS_PAGE_SIZE), itemCount);\n\n const handlePageChange = (newPage: number) => {\n fetchPage(newPage);\n };\n const card = useCardState();\n const clerk = useClerk();\n\n const [apiKey, setAPIKey] = useState<APIKeyResource \| null>(null);\n\n const { t } = useLocalizations();\n const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');\n const [selectedAPIKeyName, setSelectedAPIKeyName] = useState('');\n const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);\n\n const handleCreateAPIKey = async (params: OnCreateParams) => {\n try {\n card.setLoading();\n const apiKey = await clerk.apiKeys.create({\n ...params,\n subject,\n });\n void invalidateAll();\n card.setError(undefined);\n setIsCopyModalOpen(true);\n setAPIKey(apiKey);\n } catch (err: any) {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n switch (err.errors?.[0]?.code) {\n case 'token_quota_exceeded':\n card.setError(t(localizationKeys('unstable__errors.api_key_usage_exceeded')));\n break;\n case 'token_creation_conflict':\n card.setError(t(localizationKeys('unstable__errors.api_key_name_already_exists')));\n break;\n default:\n handleError(err, [], card.setError);\n }\n } finally {\n card.setIdle();\n }\n };\n\n const handleRevoke = (apiKeyID: string, apiKeyName: string) => {\n setSelectedAPIKeyID(apiKeyID);\n setSelectedAPIKeyName(apiKeyName);\n setIsRevokeModalOpen(true);\n };\n\n return (\n <Col\n gap={4}\n sx={{ width: '100%' }}\n elementDescriptor={descriptors.apiKeys}\n >\n <Action.Root>\n <Flex\n justify='between'\n align='center'\n gap={4}\n sx={{\n [mqu.sm]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n },\n }}\n elementDescriptor={descriptors.apiKeysHeader}\n >\n <Box elementDescriptor={descriptors.apiKeysSearchBox}>\n <InputWithIcon\n placeholder={t(localizationKeys('apiKeys.action__search'))}\n leftIcon={\n <Icon\n icon={MagnifyingGlass}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n }\n value={searchValue}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n onChange={e => setSearchValue(e.target.value)}\n elementDescriptor={descriptors.apiKeysSearchInput}\n />\n </Box>\n {((isOrg && canManageAPIKeys) \|\| !isOrg) && (\n <Action.Trigger\n value='add-api-key'\n hideOnActive={false}\n >\n <Button\n variant='solid'\n localizationKey={localizationKeys('apiKeys.action__add')}\n elementDescriptor={descriptors.apiKeysAddButton}\n />\n </Action.Trigger>\n )}\n </Flex>\n <Action.Open value='add-api-key'>\n <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>\n <Action.Card sx={{ width: '100%' }}>\n <CreateAPIKeyForm onCreate={handleCreateAPIKey} />\n </Action.Card>\n </Flex>\n </Action.Open>\n\n <CopyAPIKeyModal\n isOpen={isCopyModalOpen}\n onOpen={() => setIsCopyModalOpen(true)}\n onClose={() => setIsCopyModalOpen(false)}\n apiKeyName={apiKey?.name \|\| ''}\n apiKeySecret={apiKey?.secret \|\| ''}\n modalRoot={revokeModalRoot}\n />\n </Action.Root>\n\n <APIKeysTable\n rows={apiKeys}\n isLoading={isLoading}\n onRevoke={handleRevoke}\n elementDescriptor={descriptors.apiKeysTable}\n canManageAPIKeys={(isOrg && canManageAPIKeys) \|\| !isOrg}\n />\n {pageCount > 1 && (\n <Pagination\n count={pageCount}\n page={Math.min(page, pageCount)}\n onChange={handlePageChange}\n siblingCount={1}\n rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}\n />\n )}\n\n <RevokeAPIKeyConfirmationModal\n isOpen={isRevokeModalOpen}\n onOpen={() => setIsRevokeModalOpen(true)}\n onClose={() => {\n setSelectedAPIKeyID('');\n setSelectedAPIKeyName('');\n setIsRevokeModalOpen(false);\n }}\n apiKeyID={selectedAPIKeyID}\n apiKeyName={selectedAPIKeyName}\n onRevokeSuccess={invalidateAll}\n modalRoot={revokeModalRoot}\n />\n </Col>\n );\n};\n\nconst _APIKeys = () => {\n const ctx = useAPIKeysContext();\n const { user } = useUser();\n // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n const organization = __internal_useOrganizationBase();\n\n const subject = organization?.id ?? user?.id ?? '';\n\n return (\n <Flow.Root\n flow='apiKeys'\n sx={{\n width: '100%',\n }}\n >\n <APIKeysPage\n subject={subject}\n perPage={ctx.perPage}\n />\n </Flow.Root>\n );\n};\n\nexport const APIKeys = withCoreUserGuard(withCardStateProvider(_APIKeys));\n"],"mappings":"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"}

package/dist/no-rhc/components/OrganizationList/OrganizationListPage.js CHANGED Viewed

@@ -92,7 +92,8 @@ const OrganizationListPageList = (props) => {
 	const userSuggestionsData = userSuggestions.data?.filter((a) => !!a);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs(Header.Root, {
-			sx: (t) => ({ padding: `${t.space.$none} ${t.space.$8}` }),
+			sx: (t) => ({ padding: `${t.space.$4} ${t.space.$4} ${t.space.$none}` }),
+			showLogo: true,
 			children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys(!hidePersonal ? "organizationList.title" : "organizationList.titleWithoutPersonal") }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("organizationList.subtitle", { applicationName: environment.displayConfig.applicationName }) })]
 		}),
 		/* @__PURE__ */ jsx(Card.Alert, {

package/dist/no-rhc/components/OrganizationList/OrganizationListPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationListPage.js","names":[],"sources":["../../../../src/components/OrganizationList/OrganizationListPage.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { CreateOrganizationAction } from '@/common/CreateOrganizationAction';\nimport { OrganizationPreviewSpinner } from '@/ui/common/organizations/OrganizationPreview';\nimport { Actions } from '@/ui/elements/Actions';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';\n\nimport { useEnvironment, useOrganizationListContext } from '../../contexts';\nimport { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';\nimport { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';\nimport { PreviewListItems } from './shared';\nimport { InvitationPreview } from './UserInvitationList';\nimport { MembershipPreview, PersonalAccountPreview } from './UserMembershipList';\nimport { SuggestionPreview } from './UserSuggestionList';\n\nconst CreateOrganizationButton = ({\n onCreateOrganizationClick,\n}: {\n onCreateOrganizationClick: React.MouseEventHandler;\n}) => {\n return (\n <CreateOrganizationAction\n elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}\n label={localizationKeys('organizationList.action__createOrganization')}\n onClick={onCreateOrganizationClick}\n sx={t => ({\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n padding: `${t.space.$5} ${t.space.$5}`,\n })}\n iconSx={t => ({\n width: t.sizes.$9,\n height: t.sizes.$6,\n })}\n />\n );\n};\n\nexport const OrganizationListPage = withCardStateProvider(() => {\n const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasAnyData = !!(userMemberships?.count \|\| userInvitations?.count \|\| userSuggestions?.count);\n\n const { hidePersonal } = useOrganizationListContext();\n\n return (\n <Card.Root>\n <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$none} ${t.space.$none}` })}>\n {isLoading && (\n <Flex\n direction={'row'}\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n minHeight: t.sizes.$60,\n })}\n >\n <Spinner\n size={'lg'}\n colorScheme={'primary'}\n elementDescriptor={descriptors.spinner}\n />\n </Flex>\n )}\n\n {!isLoading && <OrganizationListFlows showListInitially={!(hidePersonal && !hasAnyData)} />}\n </Card.Content>\n <Card.Footer />\n </Card.Root>\n );\n});\n\nconst OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {\n const card = useCardState();\n const { navigateAfterCreateOrganization, skipInvitationScreen } = useOrganizationListContext();\n const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);\n return (\n <>\n {!isCreateOrganizationFlow && (\n <OrganizationListPageList onCreateOrganizationClick={() => setCreateOrganizationFlow(true)} />\n )}\n\n {isCreateOrganizationFlow && (\n <>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n\n <Box\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,\n })}\n >\n <CreateOrganizationForm\n flow='organizationList'\n startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}\n skipInvitationScreen={skipInvitationScreen}\n navigateAfterCreateOrganization={org =>\n navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))\n }\n onCancel={\n showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined\n }\n />\n </Box>\n </>\n )}\n </>\n );\n};\n\nexport const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {\n const card = useCardState();\n const environment = useEnvironment();\n\n const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const { hidePersonal } = useOrganizationListContext();\n\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasNextPage = userMemberships?.hasNextPage \|\| userInvitations?.hasNextPage \|\| userSuggestions?.hasNextPage;\n\n const onCreateOrganizationClick = () => {\n // Clear error originated from the list when switching to form\n card.setError(undefined);\n props.onCreateOrganizationClick();\n };\n\n // Filter out falsy values that can occur when infinite loading resolves pages out of order\n // This happens when concurrent requests resolve in unexpected order, leaving undefined/null items in the data array\n const userInvitationsData = userInvitations.data?.filter(a => !!a);\n const userSuggestionsData = userSuggestions.data?.filter(a => !!a);\n\n return (\n <>\n <Header.Root\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$8}`,\n })}\n >\n <Header.Title\n localizationKey={localizationKeys(\n !hidePersonal ? 'organizationList.title' : 'organizationList.titleWithoutPersonal',\n )}\n />\n <Header.Subtitle\n localizationKey={localizationKeys('organizationList.subtitle', {\n applicationName: environment.displayConfig.applicationName,\n })}\n />\n </Header.Root>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n <Col elementDescriptor={descriptors.main}>\n <PreviewListItems>\n <Actions role='menu'>\n <PersonalAccountPreview />\n {(userMemberships.count \|\| 0) > 0 &&\n userMemberships.data?.map(inv => {\n return (\n <MembershipPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n userInvitationsData?.map(inv => {\n return (\n <InvitationPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n !userInvitations.hasNextPage &&\n userSuggestionsData?.map(inv => {\n return (\n <SuggestionPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {(hasNextPage \|\| isLoading) && <OrganizationPreviewSpinner ref={ref} />}\n\n <CreateOrganizationButton onCreateOrganizationClick={onCreateOrganizationClick} />\n </Actions>\n </PreviewListItems>\n </Col>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,4BAA4B,EAChC,gCAGI;AACJ,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,OAAO,iBAAiB,8CAA8C;EACtE,SAAS;EACT,KAAI,OAAM;GACR,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,OAAO;GACzB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;GACnC;EACD,SAAQ,OAAM;GACZ,OAAO,EAAE,MAAM;GACf,QAAQ,EAAE,MAAM;GACjB;GACD;;AAIN,MAAa,uBAAuB,4BAA4B;CAC9D,MAAM,EAAE,iBAAiB,iBAAiB,oBAAoB,2BAA2B;CACzF,MAAM,YAAY,iBAAiB,aAAa,iBAAiB,aAAa,iBAAiB;CAC/F,MAAM,aAAa,CAAC,EAAE,iBAAiB,SAAS,iBAAiB,SAAS,iBAAiB;CAE3F,MAAM,EAAE,iBAAiB,4BAA4B;AAErD,QACE,qBAAC,KAAK,mBACJ,qBAAC,KAAK;EAAQ,KAAI,OAAM,EAAE,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM,SAAS;aACnF,aACC,oBAAC;GACC,WAAW;GACX,OAAO;GACP,SAAS;GACT,KAAI,OAAM;IACR,QAAQ;IACR,WAAW,EAAE,MAAM;IACpB;aAED,oBAAC;IACC,MAAM;IACN,aAAa;IACb,mBAAmB,YAAY;KAC/B;IACG,EAGR,CAAC,aAAa,oBAAC,yBAAsB,mBAAmB,EAAE,gBAAgB,CAAC,cAAe;GAC9E,EACf,oBAAC,KAAK,WAAS,IACL;EAEd;AAEF,MAAM,yBAAyB,EAAE,wBAAwD;CACvF,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,iCAAiC,yBAAyB,4BAA4B;CAC9F,MAAM,CAAC,0BAA0B,6BAA6B,SAAS,CAAC,kBAAkB;AAC1F,QACE,8CACG,CAAC,4BACA,oBAAC,4BAAyB,iCAAiC,0BAA0B,KAAK,GAAI,EAG/F,4BACC,8CACE,oBAAC,KAAK;EAAM,KAAI,OAAM,EAAE,QAAQ,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM,MAAM;YAAI,KAAK;GAAmB,EAE9F,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACpD;YAED,oBAAC;GACC,MAAK;GACL,WAAW,EAAE,aAAa,iBAAiB,sCAAsC,EAAE;GAC7D;GACtB,kCAAiC,QAC/B,gCAAgC,IAAI,CAAC,WAAW,0BAA0B,MAAM,CAAC;GAEnF,UACE,qBAAqB,iCAAiC,0BAA0B,MAAM,GAAG;IAE3F;GACE,IACL,IAEJ;;AAIP,MAAa,4BAA4B,UAAqD;CAC5F,MAAM,OAAO,cAAc;CAC3B,MAAM,cAAc,gBAAgB;CAEpC,MAAM,EAAE,KAAK,iBAAiB,iBAAiB,oBAAoB,2BAA2B;CAC9F,MAAM,EAAE,iBAAiB,4BAA4B;CAErD,MAAM,YAAY,iBAAiB,aAAa,iBAAiB,aAAa,iBAAiB;CAC/F,MAAM,cAAc,iBAAiB,eAAe,iBAAiB,eAAe,iBAAiB;CAErG,MAAM,kCAAkC;AAEtC,OAAK,SAAS,OAAU;AACxB,QAAM,2BAA2B;;CAKnC,MAAM,sBAAsB,gBAAgB,MAAM,QAAO,MAAK,CAAC,CAAC,EAAE;CAClE,MAAM,sBAAsB,gBAAgB,MAAM,QAAO,MAAK,CAAC,CAAC,EAAE;AAElE,QACE;EACE,qBAAC,OAAO;GACN,KAAI,OAAM,EACR,SAAS,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM,MACtC;cAED,oBAAC,OAAO,SACN,iBAAiB,iBACf,CAAC,eAAe,2BAA2B,wCAC5C,GACD,EACF,oBAAC,OAAO,YACN,iBAAiB,iBAAiB,6BAA6B,EAC7D,iBAAiB,YAAY,cAAc,iBAC5C,CAAC,GACF;IACU;EACd,oBAAC,KAAK;GAAM,KAAI,OAAM,EAAE,QAAQ,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM,MAAM;aAAI,KAAK;IAAmB;EAC9F,oBAAC;GAAI,mBAAmB,YAAY;aAClC,oBAAC,8BACC,qBAAC;IAAQ,MAAK;;KACZ,oBAAC,2BAAyB;MACxB,gBAAgB,SAAS,KAAK,KAC9B,gBAAgB,MAAM,KAAI,QAAO;AAC/B,aACE,oBAAC,qBAEC,GAAI,OADC,IAAI,GAET;OAEJ;KAEH,CAAC,gBAAgB,eAChB,qBAAqB,KAAI,QAAO;AAC9B,aACE,oBAAC,qBAEC,GAAI,OADC,IAAI,GAET;OAEJ;KAEH,CAAC,gBAAgB,eAChB,CAAC,gBAAgB,eACjB,qBAAqB,KAAI,QAAO;AAC9B,aACE,oBAAC,qBAEC,GAAI,OADC,IAAI,GAET;OAEJ;MAEF,eAAe,cAAc,oBAAC,8BAAgC,MAAO;KAEvE,oBAAC,4BAAoD,4BAA6B;;KAC1E,GACO;IACf;KACL"}
1	+ {"version":3,"file":"OrganizationListPage.js","names":[],"sources":["../../../../src/components/OrganizationList/OrganizationListPage.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { CreateOrganizationAction } from '@/common/CreateOrganizationAction';\nimport { OrganizationPreviewSpinner } from '@/ui/common/organizations/OrganizationPreview';\nimport { Actions } from '@/ui/elements/Actions';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';\n\nimport { useEnvironment, useOrganizationListContext } from '../../contexts';\nimport { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';\nimport { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';\nimport { PreviewListItems } from './shared';\nimport { InvitationPreview } from './UserInvitationList';\nimport { MembershipPreview, PersonalAccountPreview } from './UserMembershipList';\nimport { SuggestionPreview } from './UserSuggestionList';\n\nconst CreateOrganizationButton = ({\n onCreateOrganizationClick,\n}: {\n onCreateOrganizationClick: React.MouseEventHandler;\n}) => {\n return (\n <CreateOrganizationAction\n elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}\n label={localizationKeys('organizationList.action__createOrganization')}\n onClick={onCreateOrganizationClick}\n sx={t => ({\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n padding: `${t.space.$5} ${t.space.$5}`,\n })}\n iconSx={t => ({\n width: t.sizes.$9,\n height: t.sizes.$6,\n })}\n />\n );\n};\n\nexport const OrganizationListPage = withCardStateProvider(() => {\n const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasAnyData = !!(userMemberships?.count \|\| userInvitations?.count \|\| userSuggestions?.count);\n\n const { hidePersonal } = useOrganizationListContext();\n\n return (\n <Card.Root>\n <Card.Content sx={t => ({ padding: `${t.space.$4} ${t.space.$none} ${t.space.$none}` })}>\n {isLoading && (\n <Flex\n direction={'row'}\n align={'center'}\n justify={'center'}\n sx={t => ({\n height: '100%',\n minHeight: t.sizes.$60,\n })}\n >\n <Spinner\n size={'lg'}\n colorScheme={'primary'}\n elementDescriptor={descriptors.spinner}\n />\n </Flex>\n )}\n\n {!isLoading && <OrganizationListFlows showListInitially={!(hidePersonal && !hasAnyData)} />}\n </Card.Content>\n <Card.Footer />\n </Card.Root>\n );\n});\n\nconst OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {\n const card = useCardState();\n const { navigateAfterCreateOrganization, skipInvitationScreen } = useOrganizationListContext();\n const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);\n return (\n <>\n {!isCreateOrganizationFlow && (\n <OrganizationListPageList onCreateOrganizationClick={() => setCreateOrganizationFlow(true)} />\n )}\n\n {isCreateOrganizationFlow && (\n <>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n\n <Box\n sx={t => ({\n padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,\n })}\n >\n <CreateOrganizationForm\n flow='organizationList'\n startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}\n skipInvitationScreen={skipInvitationScreen}\n navigateAfterCreateOrganization={org =>\n navigateAfterCreateOrganization(org).then(() => setCreateOrganizationFlow(false))\n }\n onCancel={\n showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined\n }\n />\n </Box>\n </>\n )}\n </>\n );\n};\n\nexport const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {\n const card = useCardState();\n const environment = useEnvironment();\n\n const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();\n const { hidePersonal } = useOrganizationListContext();\n\n const isLoading = userMemberships?.isLoading \|\| userInvitations?.isLoading \|\| userSuggestions?.isLoading;\n const hasNextPage = userMemberships?.hasNextPage \|\| userInvitations?.hasNextPage \|\| userSuggestions?.hasNextPage;\n\n const onCreateOrganizationClick = () => {\n // Clear error originated from the list when switching to form\n card.setError(undefined);\n props.onCreateOrganizationClick();\n };\n\n // Filter out falsy values that can occur when infinite loading resolves pages out of order\n // This happens when concurrent requests resolve in unexpected order, leaving undefined/null items in the data array\n const userInvitationsData = userInvitations.data?.filter(a => !!a);\n const userSuggestionsData = userSuggestions.data?.filter(a => !!a);\n\n return (\n <>\n <Header.Root\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$4} ${t.space.$none}`,\n })}\n showLogo\n >\n <Header.Title\n localizationKey={localizationKeys(\n !hidePersonal ? 'organizationList.title' : 'organizationList.titleWithoutPersonal',\n )}\n />\n <Header.Subtitle\n localizationKey={localizationKeys('organizationList.subtitle', {\n applicationName: environment.displayConfig.applicationName,\n })}\n />\n </Header.Root>\n <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>\n <Col elementDescriptor={descriptors.main}>\n <PreviewListItems>\n <Actions role='menu'>\n <PersonalAccountPreview />\n {(userMemberships.count \|\| 0) > 0 &&\n userMemberships.data?.map(inv => {\n return (\n <MembershipPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n userInvitationsData?.map(inv => {\n return (\n <InvitationPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {!userMemberships.hasNextPage &&\n !userInvitations.hasNextPage &&\n userSuggestionsData?.map(inv => {\n return (\n <SuggestionPreview\n key={inv.id}\n {...inv}\n />\n );\n })}\n\n {(hasNextPage \|\| isLoading) && <OrganizationPreviewSpinner ref={ref} />}\n\n <CreateOrganizationButton onCreateOrganizationClick={onCreateOrganizationClick} />\n </Actions>\n </PreviewListItems>\n </Col>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/no-rhc/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { ClerkUI } from "./ClerkUI.js";
 */
 const ui = {
 	__brand: UI_BRAND,
-	version: "1.3.1-canary.v20260402184113",
+	version: "1.4.0",
 	ClerkUI
 };

package/dist/{organizationlist_ui_7f57ee_1.3.1-canary.v20260402184113.js → organizationlist_ui_238283_1.4.0.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["799"],{89302:function(e,t,a){a.d(t,{A:()=>P}),a(88711);var n=a(14518),i=a(90231),r=a(35074),o=a(97697),l=a(63269),s=a(52454),c=a(11475),d=a(23549),u=a(76153),g=a(50155),h=a(26370),z=a(25485),p=a(4468),f=a(8640),v=a(46245),m=a(18272),Y=a(67068),b=a(22861),_=a(33934),C=a(53100),S=a(75377),$=a(23689);let P=(0,l.dm)(e=>{var t,a;let P=(0,l.f0)(),x=(0,v.X)({onNextStep:()=>P.setError(void 0)}),L=r.useRef(null),{createOrganization:y,isLoaded:D,setActive:O,userMemberships:w}=(0,i.D_)({userMemberships:$.mu.userMemberships}),{organization:A}=(0,i.Z5)(),{organizationSettings:k}=(0,o.O)(),[F,I]=r.useState(),G=(0,f.tJ)("name","",{type:"text",label:(0,b.G)("formFieldLabel__organizationName"),placeholder:(0,b.G)("formFieldInputPlaceholder__organizationName")}),R=(0,f.tJ)("slug","",{type:"text",label:(0,b.G)("formFieldLabel__organizationSlug"),placeholder:(0,b.G)("formFieldInputPlaceholder__organizationSlug")}),T=!!G.value,U=!k.slug.disabled,E=async t=>{if((t.preventDefault(),T)&&D)try{var a,n;let t={name:G.value};U&&(t.slug=R.value);let i=await y(t);if(F&&await i.setLogo({file:F}),L.current=i,await O({organization:i}),null==(a=w.revalidate)\|\|a.call(w),null!=(n=e.skipInvitationScreen)?n:1===i.maxAllowedMemberships)return K();x.nextStep()}catch(e){(0,p.H4)(e,[G,R],P.setError)}},K=()=>{var t,a;null==(t=e.navigateAfterCreateOrganization)\|\|t.call(e,L.current),null==(a=e.onComplete)\|\|a.call(e)},N=e=>{R.setValue(e)},B="organizationList"===e.flow?"subtitle":void 0;return(0,n.FD)(v.s,{...x.props,children:[(0,n.Y)(d.M,{headerTitle:null==e\|\|null==(t=e.startPage)?void 0:t.headerTitle,headerSubtitle:null==e\|\|null==(a=e.startPage)?void 0:a.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:B,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"start"}),children:(0,n.FD)(s.l.Root,{onSubmit:E,sx:e=>({gap:e.space.$6}),children:[(0,n.Y)(m.fv,{children:(0,n.Y)(S.i,{organization:{name:G.value},onAvatarChange:async e=>await I(e),onAvatarRemove:F?()=>(P.setIdle(),I(null)):null,avatarPreviewPlaceholder:(0,n.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,n.Y)(m.In,{size:"md",icon:Y.A,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,n.Y)(s.l.ControlRow,{elementId:G.id,children:(0,n.Y)(s.l.PlainInput,{...G.props,onChange:e=>{G.setValue(e.target.value),N((0,z.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),U&&(0,n.Y)(s.l.ControlRow,{elementId:R.id,children:(0,n.Y)(s.l.PlainInput,{...R.props,onChange:e=>{N(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,n.FD)(c.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,n.Y)(s.l.SubmitButton,{block:!1,isDisabled:!T,localizationKey:(0,b.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,n.Y)(s.l.ResetButton,{localizationKey:(0,b.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,n.Y)(d.M,{headerTitle:(0,b.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:B,sx:()=>({textAlign:"start"}),children:A&&(0,n.Y)(_.B,{resetButtonLabel:(0,b.G)("createOrganization.invitePage.formButtonReset"),onSuccess:x.nextStep,onReset:K})}),(0,n.FD)(m.fv,{children:[(0,n.Y)(u.Y.Root,{children:(0,n.Y)(u.Y.Title,{localizationKey:(0,b.G)("organizationProfile.invitePage.title"),sx:{textAlign:"start"}})}),(0,n.Y)(h.B,{contents:(0,n.Y)(C.k,{}),onFinish:K})]})]})})},14013:function(e,t,a){a.r(t),a.d(t,{OrganizationList:()=>V});var n=a(14518),i=a(43264),r=a(44607),o=a(80212),l=a(42265);a(88711),a(19161),a(95055),a(22239);var s=a(35074),c=a(82223),d=a(60072),u=a(62531),g=a(23707),h=a(63269),z=a(76153),p=a(2227),f=a(59953),v=a(97697),m=a(58920),Y=a(22861),b=a(18272),_=a(89302);let C=e=>(0,n.Y)(d.os,{elementDescriptor:m.$z.organizationListPreviewItems,...e}),S=e=>(0,n.Y)(d.zJ,{elementId:"organizationList",elementDescriptor:m.$z.organizationListPreviewItem,...e}),$=e=>(0,n.Y)(d.D3,{elementDescriptor:m.$z.organizationListPreviewItemActionButton,...e}),P=e=>(0,n.Y)(d.SH,{elementDescriptor:m.$z.organizationListPreviewButton,...e});var x=a(90231),L=a(4468),y=a(23689),D=a(73610),O=a(10078),w=a(89001),A=a(80781);let k=e=>{let{user:t}=(0,x.Jd)(),a=(0,h.f0)(),{navigateAfterSelectOrganization:i}=(0,f.e)(),{t:r}=(0,O._)(),{isLoaded:o,setActive:l}=(0,x.D_)();return o?(0,n.Y)(P,{onClick:()=>{let n;return n=e.organization,a.runAsync(async()=>{try{await l({organization:n}),await i(n)}catch(n){var e,o;if(!(0,D.$R)(n))return void(0,L.H4)(n,[],a.setError);switch(null==(o=n.errors)\|\|null==(e=o[0])?void 0:e.code){case"organization_not_found_or_unauthorized":case"not_a_member_in_organization":(null==t?void 0:t.createOrganizationEnabled)?a.setError(r((0,Y.G)("unstable__errors.organization_not_found_or_unauthorized"))):a.setError(r((0,Y.G)("unstable__errors.organization_not_found_or_unauthorized_with_create_organization_disabled")));break;default:(0,L.H4)(n,[],a.setError)}}})},children:(0,n.Y)(w.Q,{elementId:"organizationList",mainIdentifierSx:d.Vc,organization:e.organization})}):null},F=(0,h.dm)(()=>{let e=(0,h.f0)(),{hidePersonal:t,navigateAfterSelectPersonal:a}=(0,f.e)(),{isLoaded:i,setActive:r}=(0,x.D_)(),{user:o}=(0,x.Jd)();if(!o)return null;let{primaryEmailAddress:l,primaryPhoneNumber:s,primaryWeb3Wallet:c,username:u,...g}=o;return t?null:(0,n.Y)(P,{onClick:()=>{if(i)return e.runAsync(async()=>{await r({organization:null}),await a(o)})},children:(0,n.Y)(A.i,{user:g,mainIdentifierSx:d.Vc,title:(0,Y.G)("organizationSwitcher.personalWorkspace")})})}),I={infinite:!0},G={infinite:!0},R={infinite:!0,status:["pending","accepted"]},T=e=>{let t=(0,h.f0)();return(0,n.Y)($,{isLoading:t.isLoading,onClick:e.onAccept,localizationKey:(0,Y.G)("organizationList.action__invitationAccept")})},U=(0,h.dm)(e=>{let t=(0,h.f0)(),{getOrganization:a}=(0,x.ho)(),[i,r]=(0,s.useState)(null),{userInvitations:o}=(0,x.D_)({userInvitations:G,userMemberships:I});return i?(0,n.Y)(k,{organization:i}):(0,n.Y)(S,{organizationData:e.publicOrganizationData,children:(0,n.Y)(T,{onAccept:()=>t.runAsync(async()=>[await e.accept(),await a(e.publicOrganizationData.id)]).then(e=>{var t;let[a,n]=e;null==o\|\|null==(t=o.setData)\|\|t.call(o,e=>(0,y.l_)(a,e,"negative")),r(n)}).catch(e=>(0,L.H4)(e,[],t.setError))})})}),E=e=>{let t=(0,h.f0)(),{userSuggestions:a}=(0,x.D_)({userSuggestions:R});return"accepted"===e.status?(0,n.Y)(b.EY,{colorScheme:"secondary",localizationKey:(0,Y.G)("organizationList.suggestionsAcceptedLabel")}):(0,n.Y)($,{isLoading:t.isLoading,onClick:()=>t.runAsync(e.accept).then(e=>{var t;return null==a\|\|null==(t=a.setData)?void 0:t.call(a,t=>(0,y.l_)(e,t))}).catch(e=>(0,L.H4)(e,[],t.setError)),localizationKey:(0,Y.G)("organizationList.action__suggestionsAccept")})},K=(0,h.dm)(e=>(0,n.Y)(S,{organizationData:e.publicOrganizationData,children:(0,n.Y)(E,{...e})})),N=e=>{let{onCreateOrganizationClick:t}=e;return(0,n.Y)(c._,{elementDescriptor:m.$z.organizationListCreateOrganizationActionButton,label:(0,Y.G)("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})})},B=(0,h.dm)(()=>{let{userMemberships:e,userSuggestions:t,userInvitations:a}=(0,p.f)(),i=(null==e?void 0:e.isLoading)\|\|(null==a?void 0:a.isLoading)\|\|(null==t?void 0:t.isLoading),r=!!((null==e?void 0:e.count)\|\|(null==a?void 0:a.count)\|\|(null==t?void 0:t.count)),{hidePersonal:o}=(0,f.e)();return(0,n.FD)(g.Z.Root,{children:[(0,n.FD)(g.Z.Content,{sx:e=>({padding:"".concat(e.space.$4," ").concat(e.space.$none," ").concat(e.space.$none)}),children:[i&&(0,n.Y)(b.so,{direction:"row",align:"center",justify:"center",sx:e=>({height:"100%",minHeight:e.sizes.$60}),children:(0,n.Y)(b.y$,{size:"lg",colorScheme:"primary",elementDescriptor:m.$z.spinner})}),!i&&(0,n.Y)(M,{showListInitially:!(o&&!r)})]}),(0,n.Y)(g.Z.Footer,{})]})}),M=e=>{let{showListInitially:t}=e,a=(0,h.f0)(),{navigateAfterCreateOrganization:i,skipInvitationScreen:r}=(0,f.e)(),[o,l]=(0,s.useState)(!t);return(0,n.FD)(n.FK,{children:[!o&&(0,n.Y)(W,{onCreateOrganizationClick:()=>l(!0)}),o&&(0,n.FD)(n.FK,{children:[(0,n.Y)(g.Z.Alert,{sx:e=>({margin:"".concat(e.space.$none," ").concat(e.space.$5)}),children:a.error}),(0,n.Y)(b.az,{sx:e=>({padding:"".concat(e.space.$none," ").concat(e.space.$5," ").concat(e.space.$5)}),children:(0,n.Y)(_.A,{flow:"organizationList",startPage:{headerTitle:(0,Y.G)("organizationList.createOrganization")},skipInvitationScreen:r,navigateAfterCreateOrganization:e=>i(e).then(()=>l(!1)),onCancel:t&&o?()=>l(!1):void 0})})]})]})},W=e=>{var t,a,i;let r=(0,h.f0)(),o=(0,v.O)(),{ref:l,userMemberships:s,userSuggestions:c,userInvitations:_}=(0,p.f)(),{hidePersonal:S}=(0,f.e)(),$=(null==s?void 0:s.isLoading)\|\|(null==_?void 0:_.isLoading)\|\|(null==c?void 0:c.isLoading),P=(null==s?void 0:s.hasNextPage)\|\|(null==_?void 0:_.hasNextPage)\|\|(null==c?void 0:c.hasNextPage),x=null==(t=_.data)?void 0:t.filter(e=>!!e),L=null==(a=c.data)?void 0:a.filter(e=>!!e);return(0,n.FD)(n.FK,{children:[(0,n.FD)(z.Y.Root,{sx:e=>({padding:"".concat(e.space.$none," ").concat(e.space.$8)}),children:[(0,n.Y)(z.Y.Title,{localizationKey:(0,Y.G)(S?"organizationList.titleWithoutPersonal":"organizationList.title")}),(0,n.Y)(z.Y.Subtitle,{localizationKey:(0,Y.G)("organizationList.subtitle",{applicationName:o.displayConfig.applicationName})})]}),(0,n.Y)(g.Z.Alert,{sx:e=>({margin:"".concat(e.space.$none," ").concat(e.space.$5)}),children:r.error}),(0,n.Y)(b.fv,{elementDescriptor:m.$z.main,children:(0,n.Y)(C,{children:(0,n.FD)(u.En,{role:"menu",children:[(0,n.Y)(F,{}),(s.count\|\|0)>0&&(null==(i=s.data)?void 0:i.map(e=>(0,n.Y)(k,{...e},e.id))),!s.hasNextPage&&(null==x?void 0:x.map(e=>(0,n.Y)(U,{...e},e.id))),!s.hasNextPage&&!_.hasNextPage&&(null==L?void 0:L.map(e=>(0,n.Y)(K,{...e},e.id))),(P\|\|$)&&(0,n.Y)(d.JF,{ref:l}),(0,n.Y)(N,{onCreateOrganizationClick:()=>{r.setError(void 0),e.onCreateOrganizationClick()}})]})})})]})},H=(0,i.G)(B),V=()=>(0,n.Y)(r.n.Root,{flow:"organizationList",children:(0,n.Y)(r.n.Part,{children:(0,n.Y)(o.d,{children:(0,n.Y)(l.q,{children:(0,n.Y)(H,{})})})})})},59953:function(e,t,a){a.d(t,{e:()=>s,f:()=>l}),a(98114),a(50036);var n=a(35074),i=a(97697),r=a(4964),o=a(42117);let l=(0,n.createContext)(null),s=()=>{let e=(0,n.useContext)(l),{navigate:t}=(0,r.r)(),{displayConfig:a,organizationSettings:s}=(0,i.O)();if(!e\|\|"OrganizationList"!==e.componentName)throw Error("Clerk: useOrganizationListContext called outside OrganizationList.");let{componentName:c,...d}=e,u=d.afterCreateOrganizationUrl\|\|a.afterCreateOrganizationUrl,g=e=>{let{organization:a,user:n}=e;return"function"==typeof d.afterSelectPersonalUrl&&n?t(d.afterSelectPersonalUrl(n)):"function"==typeof d.afterSelectOrganizationUrl&&a?t(d.afterSelectOrganizationUrl(a)):d.afterSelectPersonalUrl&&n?t((0,o.tR)({urlWithParam:d.afterSelectPersonalUrl,entity:n})):d.afterSelectOrganizationUrl&&a?t((0,o.tR)({urlWithParam:d.afterSelectOrganizationUrl,entity:a})):Promise.resolve()};return{...d,afterCreateOrganizationUrl:u,skipInvitationScreen:d.skipInvitationScreen\|\|!1,hidePersonal:s.forceOrganizationSelection\|\|d.hidePersonal\|\|!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),navigateAfterSelectOrganization:e=>g({organization:e}),navigateAfterSelectPersonal:e=>g({user:e}),componentName:c}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["799"],{89302:function(e,t,a){a.d(t,{A:()=>P}),a(88711);var n=a(14518),i=a(90231),r=a(35074),o=a(97697),l=a(63269),s=a(52454),c=a(11475),d=a(23549),u=a(76153),g=a(50155),h=a(26370),z=a(25485),p=a(4468),f=a(8640),v=a(46245),m=a(18272),Y=a(67068),b=a(22861),_=a(33934),$=a(53100),C=a(75377),S=a(23689);let P=(0,l.dm)(e=>{var t,a;let P=(0,l.f0)(),x=(0,v.X)({onNextStep:()=>P.setError(void 0)}),L=r.useRef(null),{createOrganization:y,isLoaded:D,setActive:O,userMemberships:w}=(0,i.D_)({userMemberships:S.mu.userMemberships}),{organization:A}=(0,i.Z5)(),{organizationSettings:k}=(0,o.O)(),[F,I]=r.useState(),G=(0,f.tJ)("name","",{type:"text",label:(0,b.G)("formFieldLabel__organizationName"),placeholder:(0,b.G)("formFieldInputPlaceholder__organizationName")}),R=(0,f.tJ)("slug","",{type:"text",label:(0,b.G)("formFieldLabel__organizationSlug"),placeholder:(0,b.G)("formFieldInputPlaceholder__organizationSlug")}),T=!!G.value,U=!k.slug.disabled,E=async t=>{if((t.preventDefault(),T)&&D)try{var a,n;let t={name:G.value};U&&(t.slug=R.value);let i=await y(t);if(F&&await i.setLogo({file:F}),L.current=i,await O({organization:i}),null==(a=w.revalidate)\|\|a.call(w),null!=(n=e.skipInvitationScreen)?n:1===i.maxAllowedMemberships)return K();x.nextStep()}catch(e){(0,p.H4)(e,[G,R],P.setError)}},K=()=>{var t,a;null==(t=e.navigateAfterCreateOrganization)\|\|t.call(e,L.current),null==(a=e.onComplete)\|\|a.call(e)},N=e=>{R.setValue(e)},B="organizationList"===e.flow?"subtitle":void 0;return(0,n.FD)(v.s,{...x.props,children:[(0,n.Y)(d.M,{headerTitle:null==e\|\|null==(t=e.startPage)?void 0:t.headerTitle,headerSubtitle:null==e\|\|null==(a=e.startPage)?void 0:a.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:B,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"start"}),children:(0,n.FD)(s.l.Root,{onSubmit:E,sx:e=>({gap:e.space.$6}),children:[(0,n.Y)(m.fv,{children:(0,n.Y)(C.i,{organization:{name:G.value},onAvatarChange:async e=>await I(e),onAvatarRemove:F?()=>(P.setIdle(),I(null)):null,avatarPreviewPlaceholder:(0,n.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,n.Y)(m.In,{size:"md",icon:Y.A,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,n.Y)(s.l.ControlRow,{elementId:G.id,children:(0,n.Y)(s.l.PlainInput,{...G.props,onChange:e=>{G.setValue(e.target.value),N((0,z.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),U&&(0,n.Y)(s.l.ControlRow,{elementId:R.id,children:(0,n.Y)(s.l.PlainInput,{...R.props,onChange:e=>{N(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,n.FD)(c.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,n.Y)(s.l.SubmitButton,{block:!1,isDisabled:!T,localizationKey:(0,b.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,n.Y)(s.l.ResetButton,{localizationKey:(0,b.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,n.Y)(d.M,{headerTitle:(0,b.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:B,sx:()=>({textAlign:"start"}),children:A&&(0,n.Y)(_.B,{resetButtonLabel:(0,b.G)("createOrganization.invitePage.formButtonReset"),onSuccess:x.nextStep,onReset:K})}),(0,n.FD)(m.fv,{children:[(0,n.Y)(u.Y.Root,{children:(0,n.Y)(u.Y.Title,{localizationKey:(0,b.G)("organizationProfile.invitePage.title"),sx:{textAlign:"start"}})}),(0,n.Y)(h.B,{contents:(0,n.Y)($.k,{}),onFinish:K})]})]})})},14013:function(e,t,a){a.r(t),a.d(t,{OrganizationList:()=>V});var n=a(14518),i=a(43264),r=a(44607),o=a(80212),l=a(42265);a(88711),a(19161),a(95055),a(22239);var s=a(35074),c=a(82223),d=a(60072),u=a(62531),g=a(23707),h=a(63269),z=a(76153),p=a(2227),f=a(59953),v=a(97697),m=a(58920),Y=a(22861),b=a(18272),_=a(89302);let $=e=>(0,n.Y)(d.os,{elementDescriptor:m.$z.organizationListPreviewItems,...e}),C=e=>(0,n.Y)(d.zJ,{elementId:"organizationList",elementDescriptor:m.$z.organizationListPreviewItem,...e}),S=e=>(0,n.Y)(d.D3,{elementDescriptor:m.$z.organizationListPreviewItemActionButton,...e}),P=e=>(0,n.Y)(d.SH,{elementDescriptor:m.$z.organizationListPreviewButton,...e});var x=a(90231),L=a(4468),y=a(23689),D=a(73610),O=a(10078),w=a(89001),A=a(80781);let k=e=>{let{user:t}=(0,x.Jd)(),a=(0,h.f0)(),{navigateAfterSelectOrganization:i}=(0,f.e)(),{t:r}=(0,O._)(),{isLoaded:o,setActive:l}=(0,x.D_)();return o?(0,n.Y)(P,{onClick:()=>{let n;return n=e.organization,a.runAsync(async()=>{try{await l({organization:n}),await i(n)}catch(n){var e,o;if(!(0,D.$R)(n))return void(0,L.H4)(n,[],a.setError);switch(null==(o=n.errors)\|\|null==(e=o[0])?void 0:e.code){case"organization_not_found_or_unauthorized":case"not_a_member_in_organization":(null==t?void 0:t.createOrganizationEnabled)?a.setError(r((0,Y.G)("unstable__errors.organization_not_found_or_unauthorized"))):a.setError(r((0,Y.G)("unstable__errors.organization_not_found_or_unauthorized_with_create_organization_disabled")));break;default:(0,L.H4)(n,[],a.setError)}}})},children:(0,n.Y)(w.Q,{elementId:"organizationList",mainIdentifierSx:d.Vc,organization:e.organization})}):null},F=(0,h.dm)(()=>{let e=(0,h.f0)(),{hidePersonal:t,navigateAfterSelectPersonal:a}=(0,f.e)(),{isLoaded:i,setActive:r}=(0,x.D_)(),{user:o}=(0,x.Jd)();if(!o)return null;let{primaryEmailAddress:l,primaryPhoneNumber:s,primaryWeb3Wallet:c,username:u,...g}=o;return t?null:(0,n.Y)(P,{onClick:()=>{if(i)return e.runAsync(async()=>{await r({organization:null}),await a(o)})},children:(0,n.Y)(A.i,{user:g,mainIdentifierSx:d.Vc,title:(0,Y.G)("organizationSwitcher.personalWorkspace")})})}),I={infinite:!0},G={infinite:!0},R={infinite:!0,status:["pending","accepted"]},T=e=>{let t=(0,h.f0)();return(0,n.Y)(S,{isLoading:t.isLoading,onClick:e.onAccept,localizationKey:(0,Y.G)("organizationList.action__invitationAccept")})},U=(0,h.dm)(e=>{let t=(0,h.f0)(),{getOrganization:a}=(0,x.ho)(),[i,r]=(0,s.useState)(null),{userInvitations:o}=(0,x.D_)({userInvitations:G,userMemberships:I});return i?(0,n.Y)(k,{organization:i}):(0,n.Y)(C,{organizationData:e.publicOrganizationData,children:(0,n.Y)(T,{onAccept:()=>t.runAsync(async()=>[await e.accept(),await a(e.publicOrganizationData.id)]).then(e=>{var t;let[a,n]=e;null==o\|\|null==(t=o.setData)\|\|t.call(o,e=>(0,y.l_)(a,e,"negative")),r(n)}).catch(e=>(0,L.H4)(e,[],t.setError))})})}),E=e=>{let t=(0,h.f0)(),{userSuggestions:a}=(0,x.D_)({userSuggestions:R});return"accepted"===e.status?(0,n.Y)(b.EY,{colorScheme:"secondary",localizationKey:(0,Y.G)("organizationList.suggestionsAcceptedLabel")}):(0,n.Y)(S,{isLoading:t.isLoading,onClick:()=>t.runAsync(e.accept).then(e=>{var t;return null==a\|\|null==(t=a.setData)?void 0:t.call(a,t=>(0,y.l_)(e,t))}).catch(e=>(0,L.H4)(e,[],t.setError)),localizationKey:(0,Y.G)("organizationList.action__suggestionsAccept")})},K=(0,h.dm)(e=>(0,n.Y)(C,{organizationData:e.publicOrganizationData,children:(0,n.Y)(E,{...e})})),N=e=>{let{onCreateOrganizationClick:t}=e;return(0,n.Y)(c._,{elementDescriptor:m.$z.organizationListCreateOrganizationActionButton,label:(0,Y.G)("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})})},B=(0,h.dm)(()=>{let{userMemberships:e,userSuggestions:t,userInvitations:a}=(0,p.f)(),i=(null==e?void 0:e.isLoading)\|\|(null==a?void 0:a.isLoading)\|\|(null==t?void 0:t.isLoading),r=!!((null==e?void 0:e.count)\|\|(null==a?void 0:a.count)\|\|(null==t?void 0:t.count)),{hidePersonal:o}=(0,f.e)();return(0,n.FD)(g.Z.Root,{children:[(0,n.FD)(g.Z.Content,{sx:e=>({padding:"".concat(e.space.$4," ").concat(e.space.$none," ").concat(e.space.$none)}),children:[i&&(0,n.Y)(b.so,{direction:"row",align:"center",justify:"center",sx:e=>({height:"100%",minHeight:e.sizes.$60}),children:(0,n.Y)(b.y$,{size:"lg",colorScheme:"primary",elementDescriptor:m.$z.spinner})}),!i&&(0,n.Y)(M,{showListInitially:!(o&&!r)})]}),(0,n.Y)(g.Z.Footer,{})]})}),M=e=>{let{showListInitially:t}=e,a=(0,h.f0)(),{navigateAfterCreateOrganization:i,skipInvitationScreen:r}=(0,f.e)(),[o,l]=(0,s.useState)(!t);return(0,n.FD)(n.FK,{children:[!o&&(0,n.Y)(W,{onCreateOrganizationClick:()=>l(!0)}),o&&(0,n.FD)(n.FK,{children:[(0,n.Y)(g.Z.Alert,{sx:e=>({margin:"".concat(e.space.$none," ").concat(e.space.$5)}),children:a.error}),(0,n.Y)(b.az,{sx:e=>({padding:"".concat(e.space.$none," ").concat(e.space.$5," ").concat(e.space.$5)}),children:(0,n.Y)(_.A,{flow:"organizationList",startPage:{headerTitle:(0,Y.G)("organizationList.createOrganization")},skipInvitationScreen:r,navigateAfterCreateOrganization:e=>i(e).then(()=>l(!1)),onCancel:t&&o?()=>l(!1):void 0})})]})]})},W=e=>{var t,a,i;let r=(0,h.f0)(),o=(0,v.O)(),{ref:l,userMemberships:s,userSuggestions:c,userInvitations:_}=(0,p.f)(),{hidePersonal:C}=(0,f.e)(),S=(null==s?void 0:s.isLoading)\|\|(null==_?void 0:_.isLoading)\|\|(null==c?void 0:c.isLoading),P=(null==s?void 0:s.hasNextPage)\|\|(null==_?void 0:_.hasNextPage)\|\|(null==c?void 0:c.hasNextPage),x=null==(t=_.data)?void 0:t.filter(e=>!!e),L=null==(a=c.data)?void 0:a.filter(e=>!!e);return(0,n.FD)(n.FK,{children:[(0,n.FD)(z.Y.Root,{sx:e=>({padding:"".concat(e.space.$4," ").concat(e.space.$4," ").concat(e.space.$none)}),showLogo:!0,children:[(0,n.Y)(z.Y.Title,{localizationKey:(0,Y.G)(C?"organizationList.titleWithoutPersonal":"organizationList.title")}),(0,n.Y)(z.Y.Subtitle,{localizationKey:(0,Y.G)("organizationList.subtitle",{applicationName:o.displayConfig.applicationName})})]}),(0,n.Y)(g.Z.Alert,{sx:e=>({margin:"".concat(e.space.$none," ").concat(e.space.$5)}),children:r.error}),(0,n.Y)(b.fv,{elementDescriptor:m.$z.main,children:(0,n.Y)($,{children:(0,n.FD)(u.En,{role:"menu",children:[(0,n.Y)(F,{}),(s.count\|\|0)>0&&(null==(i=s.data)?void 0:i.map(e=>(0,n.Y)(k,{...e},e.id))),!s.hasNextPage&&(null==x?void 0:x.map(e=>(0,n.Y)(U,{...e},e.id))),!s.hasNextPage&&!_.hasNextPage&&(null==L?void 0:L.map(e=>(0,n.Y)(K,{...e},e.id))),(P\|\|S)&&(0,n.Y)(d.JF,{ref:l}),(0,n.Y)(N,{onCreateOrganizationClick:()=>{r.setError(void 0),e.onCreateOrganizationClick()}})]})})})]})},H=(0,i.G)(B),V=()=>(0,n.Y)(r.n.Root,{flow:"organizationList",children:(0,n.Y)(r.n.Part,{children:(0,n.Y)(o.d,{children:(0,n.Y)(l.q,{children:(0,n.Y)(H,{})})})})})},59953:function(e,t,a){a.d(t,{e:()=>s,f:()=>l}),a(98114),a(50036);var n=a(35074),i=a(97697),r=a(4964),o=a(42117);let l=(0,n.createContext)(null),s=()=>{let e=(0,n.useContext)(l),{navigate:t}=(0,r.r)(),{displayConfig:a,organizationSettings:s}=(0,i.O)();if(!e\|\|"OrganizationList"!==e.componentName)throw Error("Clerk: useOrganizationListContext called outside OrganizationList.");let{componentName:c,...d}=e,u=d.afterCreateOrganizationUrl\|\|a.afterCreateOrganizationUrl,g=e=>{let{organization:a,user:n}=e;return"function"==typeof d.afterSelectPersonalUrl&&n?t(d.afterSelectPersonalUrl(n)):"function"==typeof d.afterSelectOrganizationUrl&&a?t(d.afterSelectOrganizationUrl(a)):d.afterSelectPersonalUrl&&n?t((0,o.tR)({urlWithParam:d.afterSelectPersonalUrl,entity:n})):d.afterSelectOrganizationUrl&&a?t((0,o.tR)({urlWithParam:d.afterSelectOrganizationUrl,entity:a})):Promise.resolve()};return{...d,afterCreateOrganizationUrl:u,skipInvitationScreen:d.skipInvitationScreen\|\|!1,hidePersonal:s.forceOrganizationSelection\|\|d.hidePersonal\|\|!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),navigateAfterSelectOrganization:e=>g({organization:e}),navigateAfterSelectPersonal:e=>g({user:e}),componentName:c}}}}]);