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

@clerk/ui 1.3.1-canary.v20260403164221 → 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 (165) 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.v20260403164221";
-	version = "1.3.1-canary.v20260403164221";
+	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_4f8e47_1.3.1-canary.v20260403164221.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_393800_1.3.1-canary.v20260403164221.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_a5dad3_1.3.1-canary.v20260403164221.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":";;;;;;;;;;;;;;;;;;;;;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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"}