chore(clerk-js,types,localizations): API keys form refactor

.changeset/green-elephants-melt.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/localizations": patch
+"@clerk/types": patch
+---
+
+Replace expiration segmented list with dropdown and hide description field in `<APIKeys />` component

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "610kB" },
+    { "path": "./dist/clerk.js", "maxSize": "610.32kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "70.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "108.56KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "108.75KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx

@@ -161,22 +161,23 @@ export const ApiKeysTable = ({
                     <Text
                       variant='caption'
                       colorScheme='secondary'
-                    >
-                      Created at{' '}
-                      {apiKey.createdAt.toLocaleDateString(undefined, {
-                        month: 'short',
-                        day: '2-digit',
-                        year: 'numeric',
-                      })}
-                    </Text>
+                      localizationKey={
+                        apiKey.expiration
+                          ? localizationKeys('apiKeys.createdAndExpirationStatus__expiresOn', {
+                              createdDate: apiKey.createdAt,
+                              expiresDate: apiKey.expiration,
+                            })
+                          : localizationKeys('apiKeys.createdAndExpirationStatus__never', {
+                              createdDate: apiKey.createdAt,
+                            })
+                      }
+                    />
                   </Flex>
                 </Td>
                 <Td>
                   <Box
                     sx={{
-                      [mqu.sm]: {
-                        minWidth: '10ch',
-                      },
+                      minWidth: '10ch',
                     }}
                   >
                     <Text localizationKey={apiKey.lastUsedAt ? timeAgo(apiKey.lastUsedAt) : '-'} />