@workos-inc/widgets 1.4.2 → 1.5.1

package/dist/cjs/lib/api-keys/api-keys-state.cjs

@@ -0,0 +1,157 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var api_keys_state_exports = {};
+__export(api_keys_state_exports, {
+  useApiKeysState: () => useApiKeysState
+});
+module.exports = __toCommonJS(api_keys_state_exports);
+var React = __toESM(require("react"), 1);
+var import_utils = require("../utils.js");
+function useApiKeysState(initialState) {
+  const [[state, effects], dispatch] = React.useReducer(reducer, [
+    initialState,
+    []
+  ]);
+  React.useEffect(() => {
+    if (window !== window.top) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    dispatch({ type: "INIT", params });
+  }, []);
+  React.useEffect(() => {
+    for (const effect of effects) {
+      effect();
+    }
+  }, [effects]);
+  return [state, dispatch];
+}
+function reducer(current, action) {
+  const effects = [];
+  const exec = (fn) => {
+    const effect = () => {
+      if (!effect.disposed) {
+        effect.disposed = true;
+        fn();
+      }
+    };
+    effect.disposed = false;
+    effects.push(effect);
+  };
+  const [currentState] = current;
+  switch (action.type) {
+    case "INIT": {
+      const { params } = action;
+      let searchQuery;
+      if (searchQuery = params.get("ak_q")) {
+        return [{ ...currentState, searchQuery }, effects];
+      }
+      return current;
+    }
+    case "SET_PAGINATION": {
+      const { pagination } = action;
+      if (pagination.after && pagination.after === currentState.pagination?.after || pagination.before && pagination.before === currentState.pagination?.before) {
+        return current;
+      }
+      return [{ ...currentState, pagination }, effects];
+    }
+    case "FILTER_BY_SEARCH": {
+      if (action.searchQuery === currentState.searchQuery) {
+        return current;
+      }
+      const { searchQuery } = action;
+      exec(
+        () => updateQueryParams({ ak_q: searchQuery }, { replaceState: true })
+      );
+      return [{ ...currentState, pagination: null, searchQuery }, effects];
+    }
+    case "OPEN_CREATE_DIALOG": {
+      return [
+        {
+          ...currentState,
+          createDialogOpen: true,
+          createdApiKey: null
+        },
+        effects
+      ];
+    }
+    case "CLOSE_CREATE_DIALOG": {
+      return [
+        {
+          ...currentState,
+          createDialogOpen: false,
+          createdApiKey: null
+        },
+        effects
+      ];
+    }
+    case "SET_CREATED_API_KEY": {
+      return [
+        {
+          ...currentState,
+          createdApiKey: action.apiKey
+        },
+        effects
+      ];
+    }
+    default:
+      return current;
+  }
+}
+function updateQueryParams(newParams, args = {}) {
+  if (!import_utils.canUseDOM) {
+    throw new Error("Cannot update query params on the server");
+  }
+  if (window !== window.top) {
+    return;
+  }
+  const initialSearch = window.location.search;
+  const params = new URLSearchParams(initialSearch);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value != null && value !== "") {
+      params.set(key, String(value));
+    } else {
+      params.delete(key);
+    }
+  });
+  if (initialSearch === `?${params.toString()}`) {
+    return;
+  }
+  const newUrl = params.toString() ? `${window.location.pathname}?${params}` : window.location.pathname;
+  if (args.replaceState) {
+    window.history.replaceState({}, "", newUrl);
+  } else {
+    window.history.pushState({}, "", newUrl);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useApiKeysState
+});
+//# sourceMappingURL=api-keys-state.cjs.map

package/dist/cjs/lib/api-keys/api-keys-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-state.ts"],"sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"../utils.js\";\nimport {\n  CreateOrganizationApiKeyResponse,\n  ListMetadata,\n} from \"../../api/endpoint.js\";\n\nexport function useApiKeysState(initialState: ApiKeysState) {\n  const [[state, effects], dispatch] = React.useReducer(reducer, [\n    initialState,\n    [],\n  ]);\n\n  React.useEffect(() => {\n    if (window !== window.top) {\n      // do not use query params if widget is rendered in an iframe\n      return;\n    }\n    const params = new URLSearchParams(window.location.search);\n    dispatch({ type: \"INIT\", params });\n  }, []);\n\n  React.useEffect(() => {\n    for (const effect of effects) {\n      effect();\n    }\n  }, [effects]);\n\n  return [state, dispatch] as const;\n}\n\nfunction reducer(\n  current: StateWithEffects<ApiKeysState>,\n  action: ApiKeysAction,\n): StateWithEffects<ApiKeysState> {\n  const effects: EffectFn[] = [];\n  const exec = (fn: () => void) => {\n    const effect = () => {\n      if (!effect.disposed) {\n        effect.disposed = true;\n        fn();\n      }\n    };\n    effect.disposed = false;\n    effects.push(effect);\n  };\n\n  const [currentState] = current;\n  switch (action.type) {\n    case \"INIT\": {\n      const { params } = action;\n      let searchQuery;\n      if ((searchQuery = params.get(\"ak_q\"))) {\n        return [{ ...currentState, searchQuery }, effects];\n      }\n      return current;\n    }\n    case \"SET_PAGINATION\": {\n      const { pagination } = action;\n      if (\n        (pagination.after &&\n          pagination.after === currentState.pagination?.after) ||\n        (pagination.before &&\n          pagination.before === currentState.pagination?.before)\n      ) {\n        return current;\n      }\n\n      return [{ ...currentState, pagination }, effects];\n    }\n    case \"FILTER_BY_SEARCH\": {\n      if (action.searchQuery === currentState.searchQuery) {\n        return current;\n      }\n      const { searchQuery } = action;\n      exec(() =>\n        updateQueryParams({ ak_q: searchQuery }, { replaceState: true }),\n      );\n      return [{ ...currentState, pagination: null, searchQuery }, effects];\n    }\n    case \"OPEN_CREATE_DIALOG\": {\n      return [\n        {\n          ...currentState,\n          createDialogOpen: true,\n          createdApiKey: null,\n        },\n        effects,\n      ];\n    }\n    case \"CLOSE_CREATE_DIALOG\": {\n      return [\n        {\n          ...currentState,\n          createDialogOpen: false,\n          createdApiKey: null,\n        },\n        effects,\n      ];\n    }\n    case \"SET_CREATED_API_KEY\": {\n      return [\n        {\n          ...currentState,\n          createdApiKey: action.apiKey,\n        },\n        effects,\n      ];\n    }\n    default:\n      return current;\n  }\n}\n\nexport interface ApiKeysState {\n  searchQuery: string | null;\n  pagination: ListMetadata | null;\n  createDialogOpen: boolean;\n  createdApiKey: CreateOrganizationApiKeyResponse | null;\n}\n\nexport type ApiKeysAction =\n  | { type: \"INIT\"; params: URLSearchParams }\n  | { type: \"FILTER_BY_SEARCH\"; searchQuery: string | null }\n  | { type: \"SET_PAGINATION\"; pagination: ListMetadata }\n  | { type: \"OPEN_CREATE_DIALOG\" }\n  | { type: \"CLOSE_CREATE_DIALOG\" }\n  | { type: \"SET_CREATED_API_KEY\"; apiKey: CreateOrganizationApiKeyResponse };\n\ntype EffectFn = {\n  (): void;\n  disposed: boolean;\n};\n\ntype StateWithEffects<State> = [State, EffectFn[]];\n\nfunction updateQueryParams(\n  newParams: { [key: string]: { toString(): string } | null },\n  args: { replaceState?: boolean } = {},\n) {\n  if (!canUseDOM) {\n    throw new Error(\"Cannot update query params on the server\");\n  }\n\n  if (window !== window.top) {\n    // do not update query params if widget is rendered in an iframe\n    return;\n  }\n\n  const initialSearch = window.location.search;\n  const params = new URLSearchParams(initialSearch);\n  Object.entries(newParams).forEach(([key, value]) => {\n    if (value != null && value !== \"\") {\n      params.set(key, String(value));\n    } else {\n      params.delete(key);\n    }\n  });\n\n  if (initialSearch === `?${params.toString()}`) {\n    return;\n  }\n\n  const newUrl = params.toString()\n    ? `${window.location.pathname}?${params}`\n    : window.location.pathname;\n\n  if (args.replaceState) {\n    window.history.replaceState({}, \"\", newUrl);\n  } else {\n    window.history.pushState({}, \"\", newUrl);\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/api-keys/api-keys-state.d.cts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ListMetadata, CreateOrganizationApiKeyResponse } from '../../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.cjs';
+
+declare function useApiKeysState(initialState: ApiKeysState): readonly [ApiKeysState, React.ActionDispatch<[action: ApiKeysAction]>];
+interface ApiKeysState {
+    searchQuery: string | null;
+    pagination: ListMetadata | null;
+    createDialogOpen: boolean;
+    createdApiKey: CreateOrganizationApiKeyResponse | null;
+}
+type ApiKeysAction = {
+    type: "INIT";
+    params: URLSearchParams;
+} | {
+    type: "FILTER_BY_SEARCH";
+    searchQuery: string | null;
+} | {
+    type: "SET_PAGINATION";
+    pagination: ListMetadata;
+} | {
+    type: "OPEN_CREATE_DIALOG";
+} | {
+    type: "CLOSE_CREATE_DIALOG";
+} | {
+    type: "SET_CREATED_API_KEY";
+    apiKey: CreateOrganizationApiKeyResponse;
+};
+
+export { type ApiKeysAction, type ApiKeysState, useApiKeysState };

package/dist/cjs/lib/api-keys/api-keys-table.cjs

@@ -0,0 +1,180 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var api_keys_table_exports = {};
+__export(api_keys_table_exports, {
+  ApiKeysTable: () => ApiKeysTable
+});
+module.exports = __toCommonJS(api_keys_table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_elements = require("../elements.js");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_react = require("react");
+var import_revoke_api_key_dialog = require("./revoke-api-key-dialog.js");
+var import_create_api_key = require("./create-api-key.js");
+var import_api_key_details_dialog = require("./api-key-details-dialog.js");
+var import_use_is_hydrated = require("../use-is-hydrated.js");
+var import_relative_time = require("./relative-time.js");
+var import_api_keys_context = require("./api-keys-context.js");
+var import_api_keys_search_provider = require("./api-keys-search-provider.js");
+var import_api_keys_search = require("./api-keys-search.js");
+function NoApiKeys() {
+  const { clearSearch } = (0, import_api_keys_search_provider.useApiKeysSearchContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { p: "6", gap: "4", justify: "center", align: "center", direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", maxWidth: "420px", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_icons.MagnifyingGlassIcon,
+        {
+          style: { color: "var(--gray-9)" },
+          width: "32px",
+          height: "32px"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, { size: "5", mb: "1", wrap: "balance", as: "h3", children: "No API keys match your search" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { variant: "outline", color: "gray", onClick: clearSearch, children: "Clear search" })
+  ] });
+}
+function ApiKeysTableHeader() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "between", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_keys_search.ApiKeysSearch, { name: "api-keys-widget-search", style: { width: "390px" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_create_api_key.CreateApiKeyButton, {})
+  ] });
+}
+function CreatedOn({ createdOn }) {
+  const isHydrated = (0, import_use_is_hydrated.useIsHydrated)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: createdOn.toLocaleDateString("en-US", {
+    timeZone: isHydrated ? void 0 : "UTC",
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) });
+}
+function ApiKeyRow({ apiKey }) {
+  const [revokeDialogOpen, setRevokeDialogOpen] = (0, import_react.useState)(false);
+  const [detailsOpen, setDetailsOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_revoke_api_key_dialog.RevokeApiKeyDialog,
+      {
+        open: revokeDialogOpen,
+        onOpenChange: setRevokeDialogOpen,
+        apiKey
+      },
+      `${revokeDialogOpen}`
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_api_key_details_dialog.ApiKeyDetailsDialog,
+      {
+        open: detailsOpen,
+        onOpenChange: setDetailsOpen,
+        apiKey,
+        permissions: apiKey.permissions
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { children: apiKey.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Code, { color: "gray", children: apiKey.obfuscatedValue }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_themes.Text,
+        {
+          style: apiKey.lastUsedAt ? void 0 : { color: "var(--gray-10)" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_relative_time.RelativeTime,
+            {
+              date: apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatedOn, { createdOn: new Date(apiKey.createdAt) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_themes.IconButton,
+          {
+            radius: "full",
+            style: { verticalAlign: "middle" },
+            variant: "ghost",
+            color: "gray",
+            title: "API key actions",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenuContent, { size: "2", align: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DropdownMenu.Item, { onSelect: () => setDetailsOpen(true), children: "View details" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveMenuItem, { onSelect: () => setRevokeDialogOpen(true), children: "Revoke key" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+function ApiKeysTable({
+  apiKeys
+}) {
+  const { dispatch } = (0, import_api_keys_context.useApiKeysContext)();
+  const hasPagination = apiKeys.listMetadata.before || apiKeys.listMetadata.after;
+  const hasPreviousPage = apiKeys.listMetadata.after;
+  const hasNextPage = apiKeys.listMetadata.before;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", align: "stretch", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeysTableHeader, {}),
+    apiKeys.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoApiKeys, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "25%", children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "25%", children: "Secret key" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "25%", children: "Last used" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "25%", children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Body, { children: apiKeys.data.map((apiKey) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeyRow, { apiKey }, apiKey.id)) })
+      ] }),
+      hasPagination && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.SecondaryButton,
+          {
+            disabled: !hasPreviousPage,
+            size: "1",
+            onClick: () => dispatch({
+              type: "SET_PAGINATION",
+              pagination: { after: apiKeys.listMetadata.after }
+            }),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.SecondaryButton,
+          {
+            disabled: !hasNextPage,
+            size: "1",
+            onClick: () => dispatch({
+              type: "SET_PAGINATION",
+              pagination: { before: apiKeys.listMetadata.before }
+            }),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeysTable
+});
+//# sourceMappingURL=api-keys-table.cjs.map

package/dist/cjs/lib/api-keys/api-keys-table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-table.tsx"],"sourcesContent":["import {\n  Button,\n  Flex,\n  Text,\n  IconButton,\n  Table,\n  Code,\n  DropdownMenu,\n  Heading,\n} from \"@radix-ui/themes\";\nimport {\n  DestructiveMenuItem,\n  DropdownMenuContent,\n  SecondaryButton,\n} from \"../elements.js\";\nimport { DotsHorizontalIcon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport { RevokeApiKeyDialog } from \"./revoke-api-key-dialog.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport { ApiKeyDetailsDialog } from \"./api-key-details-dialog.js\";\nimport { useIsHydrated } from \"../use-is-hydrated.js\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport {\n  ListOrganizationApiKeysResponse,\n  ListOrganizationApiKeysResponseData,\n} from \"../../api/endpoint.js\";\nimport { useApiKeysContext } from \"./api-keys-context.js\";\nimport { useApiKeysSearchContext } from \"./api-keys-search-provider.js\";\nimport { ApiKeysSearch } from \"./api-keys-search.js\";\n\nfunction NoApiKeys() {\n  const { clearSearch } = useApiKeysSearchContext();\n  return (\n    <Flex p=\"6\" gap=\"4\" justify=\"center\" align=\"center\" direction=\"column\">\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\" align=\"center\">\n        <MagnifyingGlassIcon\n          style={{ color: \"var(--gray-9)\" }}\n          width=\"32px\"\n          height=\"32px\"\n        />\n        <Heading size=\"5\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          No API keys match your search\n        </Heading>\n      </Flex>\n\n      <Button variant=\"outline\" color=\"gray\" onClick={clearSearch}>\n        Clear search\n      </Button>\n    </Flex>\n  );\n}\n\nfunction ApiKeysTableHeader() {\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <ApiKeysSearch name=\"api-keys-widget-search\" style={{ width: \"390px\" }} />\n      <CreateApiKeyButton />\n    </Flex>\n  );\n}\n\nfunction CreatedOn({ createdOn }: { createdOn: Date }) {\n  const isHydrated = useIsHydrated();\n  return (\n    <>\n      {createdOn.toLocaleDateString(\"en-US\", {\n        timeZone: isHydrated ? undefined : \"UTC\",\n        month: \"short\",\n        day: \"numeric\",\n        year: \"numeric\",\n      })}\n    </>\n  );\n}\n\ninterface ApiKeyRowProps {\n  apiKey: ListOrganizationApiKeysResponseData;\n}\n\nfunction ApiKeyRow({ apiKey }: ApiKeyRowProps) {\n  const [revokeDialogOpen, setRevokeDialogOpen] = useState(false);\n  const [detailsOpen, setDetailsOpen] = useState(false);\n  return (\n    <>\n      <RevokeApiKeyDialog\n        // always remount the form when the dialog is opened to reset the validation errors\n        key={`${revokeDialogOpen}`}\n        open={revokeDialogOpen}\n        onOpenChange={setRevokeDialogOpen}\n        apiKey={apiKey}\n      />\n      <ApiKeyDetailsDialog\n        open={detailsOpen}\n        onOpenChange={setDetailsOpen}\n        apiKey={apiKey}\n        permissions={apiKey.permissions}\n      />\n      <Table.Row>\n        <Table.Cell>\n          <Text>{apiKey.name}</Text>\n        </Table.Cell>\n        <Table.Cell>\n          <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n        </Table.Cell>\n        <Table.Cell>\n          <Text\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </Text>\n        </Table.Cell>\n        <Table.Cell>\n          <Text>\n            <CreatedOn createdOn={new Date(apiKey.createdAt)} />\n          </Text>\n        </Table.Cell>\n        <Table.Cell justify=\"end\">\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton\n                radius=\"full\"\n                style={{ verticalAlign: \"middle\" }}\n                variant=\"ghost\"\n                color=\"gray\"\n                title=\"API key actions\"\n              >\n                <DotsHorizontalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenuContent size=\"2\" align=\"end\">\n              <DropdownMenu.Item onSelect={() => setDetailsOpen(true)}>\n                View details\n              </DropdownMenu.Item>\n              <DestructiveMenuItem onSelect={() => setRevokeDialogOpen(true)}>\n                Revoke key\n              </DestructiveMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu.Root>\n        </Table.Cell>\n      </Table.Row>\n    </>\n  );\n}\n\nexport function ApiKeysTable({\n  apiKeys,\n}: {\n  apiKeys: ListOrganizationApiKeysResponse;\n}) {\n  const { dispatch } = useApiKeysContext();\n  const hasPagination =\n    apiKeys.listMetadata.before || apiKeys.listMetadata.after;\n  const hasPreviousPage = apiKeys.listMetadata.after;\n  const hasNextPage = apiKeys.listMetadata.before;\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" gap=\"3\">\n      <ApiKeysTableHeader />\n      {apiKeys.data.length === 0 ? (\n        <NoApiKeys />\n      ) : (\n        <>\n          <Table.Root variant=\"ghost\" size=\"2\">\n            <Table.Header>\n              <Table.Row>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Name\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Secret key\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Last used\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Created\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"28px\" />\n              </Table.Row>\n            </Table.Header>\n            <Table.Body>\n              {apiKeys.data.map((apiKey) => (\n                <ApiKeyRow key={apiKey.id} apiKey={apiKey} />\n              ))}\n            </Table.Body>\n          </Table.Root>\n          {hasPagination && (\n            <Flex gap=\"2\" justify=\"end\">\n              <SecondaryButton\n                disabled={!hasPreviousPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: apiKeys.listMetadata.after },\n                  })\n                }\n              >\n                Previous\n              </SecondaryButton>\n              <SecondaryButton\n                disabled={!hasNextPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: apiKeys.listMetadata.before },\n                  })\n                }\n              >\n                Next\n              </SecondaryButton>\n            </Flex>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/api-keys/api-keys-table.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListOrganizationApiKeysResponse } from '../../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.cjs';
+
+declare function ApiKeysTable({ apiKeys, }: {
+    apiKeys: ListOrganizationApiKeysResponse;
+}): react_jsx_runtime.JSX.Element;
+
+export { ApiKeysTable };

package/dist/cjs/lib/api-keys/api-keys.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var api_keys_exports = {};
+__export(api_keys_exports, {
+  ApiKeysEmptyState: () => ApiKeysEmptyState,
+  ApiKeysError: () => ApiKeysError,
+  ApiKeysLoading: () => ApiKeysLoading,
+  ApiKeysRoot: () => ApiKeysRoot
+});
+module.exports = __toCommonJS(api_keys_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_elements = require("../elements.js");
+var import_generic_error = require("../generic-error.js");
+var import_empty_state = require("../empty-state.js");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_skeleton_table = require("./skeleton-table.js");
+var import_create_api_key = require("./create-api-key.js");
+var import_clsx = __toESM(require("clsx"), 1);
+function ApiKeysError({ error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error });
+}
+function ApiKeysEmptyState() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_empty_state.EmptyState,
+    {
+      heading: "No API keys yet",
+      message: "Generate an API key to authenticate and interact with our API.",
+      action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_create_api_key.CreateApiKeyButton, {})
+    }
+  );
+}
+function ApiKeysLoading() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.TextField,
+        {
+          name: "api-keys-widget-search",
+          style: { width: "390px" },
+          placeholder: "Search by name",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextFieldSlot, { side: "left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { children: "Create API key" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_skeleton_table.SkeletonTable,
+      {
+        numRows: 5,
+        columns: [
+          { children: "Name", width: "25%" },
+          { children: "Secret key", width: "25%" },
+          { children: "Last used", width: "25%" },
+          { children: "Created", width: "25%" }
+        ]
+      }
+    )
+  ] });
+}
+function ApiKeysRoot({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Flex,
+    {
+      className: (0, import_clsx.default)("woswidgets-widget", className),
+      "data-woswidgets-widget-id": "api-keys",
+      direction: "column",
+      gap: "3",
+      ...props,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeysEmptyState,
+  ApiKeysError,
+  ApiKeysLoading,
+  ApiKeysRoot
+});
+//# sourceMappingURL=api-keys.cjs.map

package/dist/cjs/lib/api-keys/api-keys.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Button, Flex, Skeleton } from \"@radix-ui/themes\";\nimport { TextField, TextFieldSlot } from \"../elements.js\";\nimport { GenericError } from \"../generic-error.js\";\nimport { EmptyState } from \"../empty-state.js\";\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { SkeletonTable } from \"./skeleton-table.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport clsx from \"clsx\";\n\nexport function ApiKeysError({ error }: { error: unknown }) {\n  return <GenericError error={error} />;\n}\n\nexport function ApiKeysEmptyState() {\n  return (\n    <EmptyState\n      heading=\"No API keys yet\"\n      message=\"Generate an API key to authenticate and interact with our API.\"\n      action={<CreateApiKeyButton />}\n    />\n  );\n}\n\nexport function ApiKeysLoading() {\n  return (\n    <>\n      <Flex justify=\"between\" align=\"center\">\n        <Skeleton>\n          <TextField\n            name=\"api-keys-widget-search\"\n            style={{ width: \"390px\" }}\n            placeholder=\"Search by name\"\n          >\n            <TextFieldSlot side=\"left\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n        </Skeleton>\n        <Skeleton>\n          <Button>Create API key</Button>\n        </Skeleton>\n      </Flex>\n      <SkeletonTable\n        numRows={5}\n        columns={[\n          { children: \"Name\", width: \"25%\" },\n          { children: \"Secret key\", width: \"25%\" },\n          { children: \"Last used\", width: \"25%\" },\n          { children: \"Created\", width: \"25%\" },\n        ]}\n      />\n    </>\n  );\n}\n\nexport function ApiKeysRoot({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={clsx(\"woswidgets-widget\", className)}\n      data-woswidgets-widget-id=\"api-keys\"\n      direction=\"column\"\n      gap=\"3\"\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUS;AAVT,oBAAuC;AACvC,sBAAyC;AACzC,2BAA6B;AAC7B,yBAA2B;AAC3B,yBAAoC;AACpC,4BAA8B;AAC9B,4BAAmC;AACnC,kBAAiB;AAEV,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,SAAO,4CAAC,qCAAa,OAAc;AACrC;AAEO,SAAS,oBAAoB;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,4CAAC,4CAAmB;AAAA;AAAA,EAC9B;AAEJ;AAEO,SAAS,iBAAiB;AAC/B,SACE,4EACE;AAAA,iDAAC,sBAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,kDAAC,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,QAAQ;AAAA,UACxB,aAAY;AAAA,UAEZ,sDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,MACF,GACF;AAAA,MACA,4CAAC,0BACC,sDAAC,wBAAO,4BAAc,GACxB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA,UACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,UACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,UACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,UACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,QACtC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAA,SAAK,qBAAqB,SAAS;AAAA,MAC9C,6BAA0B;AAAA,MAC1B,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":["clsx"]}

package/dist/cjs/lib/api-keys/api-keys.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Flex } from '@radix-ui/themes';
+
+declare function ApiKeysError({ error }: {
+    error: unknown;
+}): react_jsx_runtime.JSX.Element;
+declare function ApiKeysEmptyState(): react_jsx_runtime.JSX.Element;
+declare function ApiKeysLoading(): react_jsx_runtime.JSX.Element;
+declare function ApiKeysRoot({ className, children, ...props }: React.ComponentProps<typeof Flex>): react_jsx_runtime.JSX.Element;
+
+export { ApiKeysEmptyState, ApiKeysError, ApiKeysLoading, ApiKeysRoot };