@workos-inc/widgets 1.5.0 → 1.6.0

package/dist/esm/lib/admin-portal-sso-connection.js

@@ -9,15 +9,17 @@ import {
   InfoCircledIcon,
   Cross2Icon
 } from "@radix-ui/react-icons";
-import * as CardList from "../card-list.js";
+import * as CardList from "./card-list.js";
 import { ProviderIcon } from "./provider-icon.js";
 import {
   getIdentityProviderName
 } from "./identity-providers.js";
 import { Status } from "./status.js";
-import { unreachable } from "./utils.js";
-import clsx from "clsx";
-import { ApiError, FetchError, NoAuthTokenError } from "./errors.js";
+import {
+  getDomProps,
+  unreachable
+} from "./utils.js";
+import { getErrorMessage } from "./generic-error.js";
 const AdminPortalSsoConnectionContext = React.createContext(null);
 AdminPortalSsoConnectionContext.displayName = "AdminPortalSsoConnectionContext";
 function useAdminPortalSsoConnectionContext() {
@@ -35,84 +37,77 @@ const AdminPortalSsoConnection = ({
   identityProvider,
   expiryDate,
   lastSession,
-  adminPortalOpenButton
+  adminPortalOpenButton,
+  ...domProps
 }) => {
-  return /* @__PURE__ */ jsx(
-    CardList.Root,
-    {
-      size: "2",
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "admin-portal-sso-connection",
-      children: /* @__PURE__ */ jsxs(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
-        /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
-          if (connectionStatus === "NotConfigured") {
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", ml: "2", children: "You haven\u2019t set up Single Sign-On yet." }),
-              adminPortalOpenButton
-            ] });
+  return /* @__PURE__ */ jsx(CardList.Root, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
+    /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
+      if (connectionStatus === "NotConfigured") {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven\u2019t set up Single Sign-On yet." }),
+          adminPortalOpenButton
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SessionInfo,
+          {
+            connectionStatus,
+            identityProvider,
+            lastSession,
+            currentDate
           }
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              SessionInfo,
-              {
-                connectionStatus,
-                identityProvider,
-                lastSession,
-                currentDate
+        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: "5", align: "center", children: [
+          /* @__PURE__ */ jsx(SsoStatus, { status: connectionStatus }),
+          adminPortalOpenButton
+        ] })
+      ] });
+    })() }) }),
+    connectionStatus === "Expired" && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "2", children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "gray" }) }),
+      (() => {
+        if (connectionStatus === "Expired") {
+          return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate has expired";
               }
-            ),
-            /* @__PURE__ */ jsxs(Flex, { gap: "5", align: "center", children: [
-              /* @__PURE__ */ jsx(SsoStatus, { status: connectionStatus }),
-              adminPortalOpenButton
-            ] })
-          ] });
-        })() }) }),
-        connectionStatus === "Expired" && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "2", children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "gray" }) }),
-          (() => {
-            if (connectionStatus === "Expired") {
-              return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate has expired";
-                  }
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "The SAML response signing certificate expired on",
-                    " ",
-                    /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric"
-                    }) })
-                  ] });
-                })(),
-                ". Users won\u2019t be able to sign-in to the application until the certificate is renewed."
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                "The SAML response signing certificate expired on",
+                " ",
+                /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric"
+                }) })
               ] });
-            }
-            if (connectionStatus === "Expiring") {
-              return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate is expiring soon";
-                  }
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "The SAML response signing certificate will expire on",
-                    " ",
-                    /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric"
-                    }) })
-                  ] });
-                })(),
-                ". When expired, users won\u2019t be able to sign-in."
+            })(),
+            ". Users won\u2019t be able to sign-in to the application until the certificate is renewed."
+          ] });
+        }
+        if (connectionStatus === "Expiring") {
+          return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate is expiring soon";
+              }
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                "The SAML response signing certificate will expire on",
+                " ",
+                /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric"
+                }) })
               ] });
-            }
-          })()
-        ] }) })
-      ] })
-    }
-  );
+            })(),
+            ". When expired, users won\u2019t be able to sign-in."
+          ] });
+        }
+      })()
+    ] }) })
+  ] }) });
 };
 function SsoStatus({
   status
@@ -197,8 +192,8 @@ function AdminPortalOpenButton({
     }
   );
 }
-const AdminPortalSsoConnectionLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+const AdminPortalSsoConnectionLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(ProviderIcon, { provider: "okta", size: "2" }) }) }),
       /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", my: "-4px", children: [
@@ -215,35 +210,12 @@ const AdminPortalSsoConnectionLoading = () => {
     ] })
   ] }) });
 };
-function AdminPortalSsoConnectionError({ error }) {
+const AdminPortalSsoConnectionError = ({ error, ...domProps }) => {
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const { heading, message } = (() => {
-    if (error instanceof FetchError) {
-      return {
-        heading: "Error fetching data",
-        message: "An error occurred. You may need to configure CORS in the WorkOS Dashboard. Contact your organization admin for support."
-      };
-    }
-    if (error instanceof NoAuthTokenError) {
-      return {
-        heading: "Error fetching data",
-        message: "Authorization error. You likely forgot to provide an authorization token to the Users Management Widget."
-      };
-    }
-    if (error instanceof ApiError && error.status === 404) {
-      return {
-        heading: "Error fetching data",
-        message: "Authorization error. Contact your organization admin for support."
-      };
-    }
-    return {
-      heading: "Unknown error",
-      message: "An unexpected error occurred. Please try refreshing the page, or contact your organization admin for support."
-    };
-  })();
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+  const { heading, message } = getErrorMessage(error);
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(
       Flex,
       {
@@ -254,7 +226,8 @@ function AdminPortalSsoConnectionError({ error }) {
         style: {
           borderRadius: "9999px",
           backgroundColor: "var(--red-a4)",
-          color: "var(--red-a11)"
+          color: "var(--red-a11)",
+          flexShrink: 0
         },
         children: /* @__PURE__ */ jsx(Cross2Icon, { width: "18px", height: "18px" })
       }
@@ -264,7 +237,7 @@ function AdminPortalSsoConnectionError({ error }) {
       /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: message })
     ] })
   ] }) }) });
-}
+};
 function getRelativeTimeString(currentDate, lastSession) {
   if (!currentDate || !lastSession) {
     return null;
@@ -294,6 +267,14 @@ function getRelativeTimeString(currentDate, lastSession) {
   }
   return rtf.format(diffYears, "year");
 }
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "admin-portal-sso-connection",
+    widgetState: state
+  });
+}
 export {
   AdminPortalOpenButton,
   AdminPortalSsoConnection,

package/dist/esm/lib/admin-portal-sso-connection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"../card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport { unreachable } from \"./utils.js\";\nimport clsx from \"clsx\";\n\nimport { ApiError, FetchError, NoAuthTokenError } from \"./errors.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\nexport type AdminPortalSsoConnectionProps =\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nexport const AdminPortalSsoConnection = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n}: AdminPortalSsoConnectionProps) => {\n  return (\n    <CardList.Root\n      size=\"2\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"admin-portal-sso-connection\"\n    >\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\" ml=\"2\">\n                      You haven’t set up Single Sign-On yet.\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate has expired\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate expired on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . Users won’t be able to sign-in to the application until\n                      the certificate is renewed.\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate is expiring soon\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate will expire on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . When expired, users won’t be able to sign-in.\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return <Status state=\"waiting\">Setup in progress</Status>;\n  }\n\n  if (status === \"Expired\") {\n    return <Status state=\"error\">Requires action</Status>;\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return <Status state=\"success\">Connected</Status>;\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              Last session {relativeTimeString}\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nexport function AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return \"Set up SSO\";\n      case \"Inactive\":\n        return \"Continue setup\";\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return \"Manage\";\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"outline\" color=\"gray\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      color=\"gray\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon />\n    </Button>\n  );\n}\n\nexport const AdminPortalSsoConnectionLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            <Button variant=\"outline\" color=\"gray\">\n              Manage <ExternalLinkIcon />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function AdminPortalSsoConnectionError({ error }: { error: unknown }) {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = (() => {\n    if (error instanceof FetchError) {\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"An error occurred. You may need to configure CORS in the WorkOS Dashboard. \" +\n          \"Contact your organization admin for support.\",\n      };\n    }\n\n    if (error instanceof NoAuthTokenError) {\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"Authorization error. You likely forgot to provide an authorization \" +\n          \"token to the Users Management Widget.\",\n      };\n    }\n\n    if (error instanceof ApiError && error.status === 404) {\n      // The widgets API treats all authorization errors as 404s. If there is a\n      // legitimate 404, it's a bug on our end but there's currently no way to\n      // distinguish between the two.\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"Authorization error. Contact your organization admin for support.\",\n      };\n    }\n\n    return {\n      heading: \"Unknown error\",\n      message:\n        \"An unexpected error occurred. Please try refreshing the page, or contact your organization admin for support.\",\n    };\n  })();\n\n  return (\n    <Card size=\"2\">\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n}\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport {\n  getDomProps,\n  unreachable,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { getErrorMessage } from \"./generic-error.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\ntype AdminPortalSsoConnectionProps = WidgetRootDomProps &\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nconst AdminPortalSsoConnection: React.FC<AdminPortalSsoConnectionProps> = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n  ...domProps\n}) => {\n  return (\n    <CardList.Root size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\">\n                      You haven’t set up Single Sign-On yet.\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate has expired\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate expired on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . Users won’t be able to sign-in to the application until\n                      the certificate is renewed.\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate is expiring soon\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate will expire on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . When expired, users won’t be able to sign-in.\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return <Status state=\"waiting\">Setup in progress</Status>;\n  }\n\n  if (status === \"Expired\") {\n    return <Status state=\"error\">Requires action</Status>;\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return <Status state=\"success\">Connected</Status>;\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              Last session {relativeTimeString}\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nfunction AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return \"Set up SSO\";\n      case \"Inactive\":\n        return \"Continue setup\";\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return \"Manage\";\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"outline\" color=\"gray\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      color=\"gray\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon />\n    </Button>\n  );\n}\n\ninterface AdminPortalSsoConnectionLoadingProps extends WidgetRootDomProps {}\n\nconst AdminPortalSsoConnectionLoading: React.FC<\n  AdminPortalSsoConnectionLoadingProps\n> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            <Button variant=\"outline\" color=\"gray\">\n              Manage <ExternalLinkIcon />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface AdminPortalSsoConnectionErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst AdminPortalSsoConnectionError: React.FC<\n  AdminPortalSsoConnectionErrorProps\n> = ({ error, ...domProps }) => {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = getErrorMessage(error);\n\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n              flexShrink: 0,\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"admin-portal-sso-connection\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  AdminPortalSsoConnectionProps,\n  AdminPortalSsoConnectionLoadingProps,\n  AdminPortalSsoConnectionErrorProps,\n};\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  AdminPortalSsoConnectionError,\n  /** @internal */\n  AdminPortalOpenButton,\n};\n"],"mappings":"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","names":[]}

package/dist/esm/lib/api-keys/api-keys.d.ts

@@ -1,11 +1,19 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Flex } from '@radix-ui/themes';
+import { WidgetRootDomProps } from '../utils.js';
+import { ListOrganizationApiKeysResponse } from '../../api/endpoint.js';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.js';
 
-declare function ApiKeysError({ error }: {
+interface ApiKeysProps extends WidgetRootDomProps {
+    apiKeys: ListOrganizationApiKeysResponse;
+    searchQuery: string | null;
+}
+declare const ApiKeys: React.FC<ApiKeysProps>;
+interface ApiKeysLoadingProps extends WidgetRootDomProps {
+}
+declare const ApiKeysLoading: React.FC<ApiKeysLoadingProps>;
+interface ApiKeysErrorProps extends WidgetRootDomProps {
     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;
+}
+declare const ApiKeysError: React.FC<ApiKeysErrorProps>;
 
-export { ApiKeysEmptyState, ApiKeysError, ApiKeysLoading, ApiKeysRoot };
+export { ApiKeys, ApiKeysError, type ApiKeysErrorProps, ApiKeysLoading, type ApiKeysLoadingProps, type ApiKeysProps };

package/dist/esm/lib/api-keys/api-keys.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Flex, Skeleton } from "@radix-ui/themes";
 import { TextField, TextFieldSlot } from "../elements.js";
 import { GenericError } from "../generic-error.js";
@@ -6,69 +6,84 @@ import { EmptyState } from "../empty-state.js";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { SkeletonTable } from "./skeleton-table.js";
 import { CreateApiKeyButton } from "./create-api-key.js";
-import clsx from "clsx";
-function ApiKeysError({ error }) {
-  return /* @__PURE__ */ jsx(GenericError, { error });
-}
-function ApiKeysEmptyState() {
-  return /* @__PURE__ */ jsx(
-    EmptyState,
+import { getDomProps } from "../utils.js";
+import { ApiKeysSearchProvider } from "./api-keys-search-provider.js";
+import { ApiKeysTable } from "./api-keys-table.js";
+const ApiKeys = ({
+  apiKeys,
+  searchQuery,
+  ...domProps
+}) => {
+  return apiKeys.data.length === 0 && !searchQuery ? /* @__PURE__ */ jsx(ApiKeysEmptyState, { ...getWidgetRootDomProps("resolved", domProps) }) : /* @__PURE__ */ jsx(ApiKeysSearchProvider, { children: /* @__PURE__ */ jsx(
+    ApiKeysTable,
     {
-      heading: "No API keys yet",
-      message: "Generate an API key to authenticate and interact with our API.",
-      action: /* @__PURE__ */ jsx(CreateApiKeyButton, {})
+      apiKeys,
+      ...getWidgetRootDomProps("resolved", domProps)
     }
-  );
-}
-function ApiKeysLoading() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
-        TextField,
-        {
-          name: "api-keys-widget-search",
-          style: { width: "390px" },
-          placeholder: "Search by name",
-          children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { children: "Create API key" }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      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__ */ jsx(
+  ) });
+};
+const ApiKeysLoading = (props) => {
+  return /* @__PURE__ */ jsxs(
     Flex,
     {
-      className: clsx("woswidgets-widget", className),
-      "data-woswidgets-widget-id": "api-keys",
       direction: "column",
+      align: "stretch",
       gap: "3",
-      ...props,
-      children
+      ...getWidgetRootDomProps("loading", props),
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
+          /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              name: "api-keys-widget-search",
+              style: { width: "390px" },
+              placeholder: "Search by name",
+              children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { children: "Create API key" }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          SkeletonTable,
+          {
+            numRows: 5,
+            columns: [
+              { children: "Name", width: "25%" },
+              { children: "Secret key", width: "25%" },
+              { children: "Last used", width: "25%" },
+              { children: "Created", width: "25%" }
+            ]
+          }
+        )
+      ]
     }
   );
+};
+const ApiKeysError = ({ error, ...domProps }) => {
+  return /* @__PURE__ */ jsx(GenericError, { error, ...getWidgetRootDomProps("error", domProps) });
+};
+function ApiKeysEmptyState(props) {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      heading: "No API keys yet",
+      message: "Generate an API key to authenticate and interact with our API.",
+      action: /* @__PURE__ */ jsx(CreateApiKeyButton, {}),
+      ...props
+    }
+  );
+}
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "api-keys",
+    widgetState: state
+  });
 }
 export {
-  ApiKeysEmptyState,
+  ApiKeys,
   ApiKeysError,
-  ApiKeysLoading,
-  ApiKeysRoot
+  ApiKeysLoading
 };
 //# sourceMappingURL=api-keys.js.map

package/dist/esm/lib/api-keys/api-keys.js.map

@@ -1 +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":"AAUS,SAeL,UAfK,KAgBH,YAhBG;AAVT,SAAS,QAAQ,MAAM,gBAAgB;AACvC,SAAS,WAAW,qBAAqB;AACzC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,OAAO,UAAU;AAEV,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,SAAO,oBAAC,gBAAa,OAAc;AACrC;AAEO,SAAS,oBAAoB;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,oBAAC,sBAAmB;AAAA;AAAA,EAC9B;AAEJ;AAEO,SAAS,iBAAiB;AAC/B,SACE,iCACE;AAAA,yBAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,0BAAC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,QAAQ;AAAA,UACxB,aAAY;AAAA,UAEZ,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,YACC,8BAAC,UAAO,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,WAAW,KAAK,qBAAqB,SAAS;AAAA,MAC9C,6BAA0B;AAAA,MAC1B,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"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 { getDomProps, WidgetRootDomProps, WidgetRootState } from \"../utils.js\";\nimport { ListOrganizationApiKeysResponse } from \"../../api/endpoint.js\";\nimport { ApiKeysSearchProvider } from \"./api-keys-search-provider.js\";\nimport { ApiKeysTable } from \"./api-keys-table.js\";\n\ninterface ApiKeysProps extends WidgetRootDomProps {\n  apiKeys: ListOrganizationApiKeysResponse;\n  searchQuery: string | null;\n}\n\nconst ApiKeys: React.FC<ApiKeysProps> = ({\n  apiKeys,\n  searchQuery,\n  ...domProps\n}) => {\n  return apiKeys.data.length === 0 && !searchQuery ? (\n    <ApiKeysEmptyState {...getWidgetRootDomProps(\"resolved\", domProps)} />\n  ) : (\n    <ApiKeysSearchProvider>\n      <ApiKeysTable\n        apiKeys={apiKeys}\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      />\n    </ApiKeysSearchProvider>\n  );\n};\n\ninterface ApiKeysLoadingProps extends WidgetRootDomProps {}\n\nconst ApiKeysLoading: React.FC<ApiKeysLoadingProps> = (props) => {\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"stretch\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\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    </Flex>\n  );\n};\n\ninterface ApiKeysErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst ApiKeysError: React.FC<ApiKeysErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <GenericError error={error} {...getWidgetRootDomProps(\"error\", domProps)} />\n  );\n};\n\nfunction ApiKeysEmptyState(props: WidgetRootDomProps) {\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      {...props}\n    />\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"api-keys\",\n    widgetState: state,\n  });\n}\n\nexport type { ApiKeysProps, ApiKeysLoadingProps, ApiKeysErrorProps };\nexport { ApiKeys, ApiKeysLoading, ApiKeysError };\n"],"mappings":"AAuBI,cAqBE,YArBF;AAvBJ,SAAS,QAAQ,MAAM,gBAAgB;AACvC,SAAS,WAAW,qBAAqB;AACzC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,mBAAwD;AAEjE,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAO7B,MAAM,UAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,QAAQ,KAAK,WAAW,KAAK,CAAC,cACnC,oBAAC,qBAAmB,GAAG,sBAAsB,YAAY,QAAQ,GAAG,IAEpE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG,sBAAsB,YAAY,QAAQ;AAAA;AAAA,EAChD,GACF;AAEJ;AAIA,MAAM,iBAAgD,CAAC,UAAU;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,6BAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,8BAAC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,OAAO,QAAQ;AAAA,cACxB,aAAY;AAAA,cAEZ,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,YACC,8BAAC,UAAO,4BAAc,GACxB;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS;AAAA,cACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,cACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,cACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,cACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,YACtC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,eAA4C,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC5E,SACE,oBAAC,gBAAa,OAAe,GAAG,sBAAsB,SAAS,QAAQ,GAAG;AAE9E;AAEA,SAAS,kBAAkB,OAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,oBAAC,sBAAmB;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/esm/lib/card-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/card-list.tsx"],"sourcesContent":["import { Box, Card, CardProps, Inset } from \"@radix-ui/themes\";\n\nexport function Root({ children, ...props }: CardProps) {\n  return (\n    <Card size=\"2\" {...props} className=\"woswidgets-card-list\">\n      <Inset side=\"all\" clip=\"padding-box\">\n        {children}\n      </Inset>\n    </Card>\n  );\n}\n\nexport function Item({ children }: { children: React.ReactNode }) {\n  return (\n    <Inset\n      side=\"x\"\n      px=\"current\"\n      className=\"woswidgets-card-list-item\"\n      clip=\"padding-box\"\n    >\n      <Box px=\"4\" py=\"4\">\n        {children}\n      </Box>\n    </Inset>\n  );\n}\n"],"mappings":"AAKM;AALN,SAAS,KAAK,MAAiB,aAAa;AAErC,SAAS,KAAK,EAAE,UAAU,GAAG,MAAM,GAAc;AACtD,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,OAAO,WAAU,wBAClC,8BAAC,SAAM,MAAK,OAAM,MAAK,eACpB,UACH,GACF;AAEJ;AAEO,SAAS,KAAK,EAAE,SAAS,GAAkC;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACV,MAAK;AAAA,MAEL,8BAAC,OAAI,IAAG,KAAI,IAAG,KACZ,UACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/lib/constants.d.ts

@@ -1,5 +1,6 @@
 declare const USER_ROW_LIMIT = 10;
 declare const WIDGETS_API_VERSION = "1";
 declare const WIDGETS_CLASS_NAMESPACE = "woswidgets";
+declare const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = "woswidgets";
 
-export { USER_ROW_LIMIT, WIDGETS_API_VERSION, WIDGETS_CLASS_NAMESPACE };
+export { USER_ROW_LIMIT, WIDGETS_API_VERSION, WIDGETS_CLASS_NAMESPACE, WIDGETS_DATA_ATTRIBUTE_NAMESPACE };

package/dist/esm/lib/constants.js

@@ -1,9 +1,11 @@
 const USER_ROW_LIMIT = 10;
 const WIDGETS_API_VERSION = "1";
 const WIDGETS_CLASS_NAMESPACE = "woswidgets";
+const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = "woswidgets";
 export {
   USER_ROW_LIMIT,
   WIDGETS_API_VERSION,
-  WIDGETS_CLASS_NAMESPACE
+  WIDGETS_CLASS_NAMESPACE,
+  WIDGETS_DATA_ATTRIBUTE_NAMESPACE
 };
 //# sourceMappingURL=constants.js.map

package/dist/esm/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/constants.ts"],"sourcesContent":["export const USER_ROW_LIMIT = 10;\nexport const WIDGETS_API_VERSION = \"1\";\nexport const WIDGETS_CLASS_NAMESPACE = \"woswidgets\";\n"],"mappings":"AAAO,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,0BAA0B;","names":[]}
+{"version":3,"sources":["../../../src/lib/constants.ts"],"sourcesContent":["export const USER_ROW_LIMIT = 10;\nexport const WIDGETS_API_VERSION = \"1\";\nexport const WIDGETS_CLASS_NAMESPACE = \"woswidgets\";\nexport const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = \"woswidgets\";\n"],"mappings":"AAAO,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,0BAA0B;AAChC,MAAM,mCAAmC;","names":[]}