@workos-inc/widgets 1.5.0 → 1.6.0

package/dist/cjs/lib/pipes.cjs

@@ -0,0 +1,343 @@
+"use strict";
+"use client";
+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 pipes_exports = {};
+__export(pipes_exports, {
+  Pipes: () => Pipes,
+  PipesError: () => PipesError,
+  PipesLoading: () => PipesLoading
+});
+module.exports = __toCommonJS(pipes_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var CardList = __toESM(require("./card-list.js"), 1);
+var import_provider_icon = require("./provider-icon.js");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_elements = require("./elements.js");
+var import_icon_panel = require("./icon-panel.js");
+var import_status = require("./status.js");
+var import_endpoint = require("../api/endpoint.js");
+var import_react_query = require("@tanstack/react-query");
+var import_generic_error = require("./generic-error.js");
+var import_utils = require("./utils.js");
+const useOpenDataIntegrationAuthorizeUrl = (integration) => {
+  const getDataIntegrationAuthorizeUrl = (0, import_endpoint.useGetDataIntegrationAuthorizeUrlHook)();
+  const settings = (0, import_endpoint.useSettings)();
+  const baseUrl = settings.data?.authkitOrigin ?? "";
+  return (0, import_react.useCallback)(async () => {
+    const win = window.open(`${baseUrl}/pipes/redirecting`, "_blank");
+    const { url } = await getDataIntegrationAuthorizeUrl(integration.slug);
+    if (win) {
+      win.location = url;
+    }
+  }, [getDataIntegrationAuthorizeUrl, integration.slug, baseUrl]);
+};
+function ConnectIntegrationButton({
+  integration
+}) {
+  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Button,
+    {
+      onClick: async () => {
+        try {
+          await eventHandler();
+        } catch {
+        }
+      },
+      variant: "outline",
+      size: "2",
+      color: "gray",
+      children: "Connect"
+    }
+  );
+}
+function SharedCredentialsConnectIntegrationButton({
+  integration
+}) {
+  const settings = (0, import_endpoint.useSettings)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  const logo = settings.data?.logoDarkPath ?? settings.data?.logoLightPath;
+  const appName = settings.data?.teamName ?? "This application";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Content, { maxWidth: "430px", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "center", align: "center", gap: "2", mt: "2", children: [
+        logo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_panel.IconPanel,
+            {
+              color: "panel",
+              style: { width: "48px", height: "48px" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_provider_icon.ProviderIcon,
+                {
+                  size: "2",
+                  provider: "workos",
+                  style: { backgroundImage: `url(${logo})` }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon_panel.IconPanel,
+          {
+            color: "panel",
+            style: {
+              ...logo ? { borderWidth: 0 } : void 0,
+              width: "48px",
+              height: "48px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { size: "2", provider: "workos" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", style: { width: "48px", height: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { size: "2", provider: integration.integrationType }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Title, { size: "2", mt: "5", mb: "5", weight: "bold", align: "center", children: [
+        appName,
+        " uses WorkOS to connect to ",
+        integration.name,
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_panel.IconPanel,
+            {
+              color: "gray",
+              style: { width: "32px", height: "32px" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.GlobeIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "1", weight: "bold", children: [
+              "You'll be redirected to sign in with ",
+              integration.name,
+              "."
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "1", children: "Authorize access to connect your account." })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_panel.IconPanel,
+            {
+              color: "gray",
+              style: { width: "32px", height: "32px" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.LockClosedIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "1", weight: "bold", children: "Your credentials remain secure." }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "1", children: "WorkOS never sees your credentials." })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "end", gap: "3", mt: "5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Cancel" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_elements.PrimaryButton,
+          {
+            onClick: async () => {
+              try {
+                await eventHandler();
+                setOpen(false);
+              } catch {
+              }
+            },
+            children: [
+              "Connect ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, {})
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Button,
+      {
+        onClick: () => setOpen(true),
+        variant: "outline",
+        size: "2",
+        color: "gray",
+        children: "Connect"
+      }
+    )
+  ] });
+}
+function ProviderStatus({ integration }) {
+  const [disconnectOpen, setDisconnectOpen] = (0, import_react.useState)(false);
+  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  if (integration.installation) {
+    const text = integration.installation.state === import_endpoint.DataInstallationState.connected ? "Connected" : "Requires reauthorization";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DisconnectAccountDialog,
+        {
+          integration,
+          installation: integration.installation,
+          open: disconnectOpen,
+          onOpenChange: setDisconnectOpen
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_status.Status,
+        {
+          state: integration.installation.state === import_endpoint.DataInstallationState.connected ? "success" : "error",
+          children: text
+        }
+      ),
+      /* @__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",
+            variant: "ghost",
+            color: "gray",
+            title: "Pipe actions",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Content, { align: "end", children: [
+          integration.installation.state === import_endpoint.DataInstallationState.needs_reauthorization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_themes.DropdownMenu.Item,
+            {
+              onClick: async () => {
+                try {
+                  await authorizeEventHandler();
+                } catch {
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
+                "Reauthorize",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveMenuItem, { onClick: () => setDisconnectOpen(true), children: "Disconnect account" })
+        ] })
+      ] })
+    ] });
+  }
+  if (integration.credentialsType === "shared") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SharedCredentialsConnectIntegrationButton, { integration });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectIntegrationButton, { integration });
+}
+function DisconnectAccountDialog({
+  integration,
+  installation,
+  open,
+  onOpenChange
+}) {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const {
+    mutate: deleteDataInstallation,
+    error,
+    reset,
+    isPending
+  } = (0, import_endpoint.useDeleteDataInstallation)({
+    mutation: {
+      onSuccess: () => {
+        onOpenChange(false);
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
+        });
+      }
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      reset();
+    }
+  }, [open, reset]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Content, { style: { width: "80vw", maxWidth: "520px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Disconnect account" }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { my: "5", color: "red", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: "An error occurred while disconnecting your account. Please refresh the page and try again." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+      "Are you sure you want to disconnect your",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "span", weight: "bold", children: integration.name }),
+      " ",
+      "account?"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.DestructiveButton,
+        {
+          disabled: isPending,
+          loading: isPending,
+          onClick: () => deleteDataInstallation({ installationId: installation.id }),
+          children: "Disconnect"
+        }
+      )
+    ] })
+  ] }) });
+}
+const PipesLoading = ({ count, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: "google" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", children: "Google Drive" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { disabled: true, children: "Connect" }) })
+  ] }) }, index)) });
+};
+const Pipes = ({ integrations, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.map((integration) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: integration.integrationType }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", children: integration.name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProviderStatus, { integration })
+  ] }) }, integration.id)) });
+};
+const PipesError = ({ error, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error }) });
+};
+function getWidgetRootDomProps(state, domProps) {
+  return (0, import_utils.getDomProps)({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "pipes",
+    widgetState: state
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pipes,
+  PipesError,
+  PipesLoading
+});
+//# sourceMappingURL=pipes.cjs.map

package/dist/cjs/lib/pipes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/pipes.tsx"],"sourcesContent":["\"use client\";\nimport {\n  AlertDialog,\n  Button,\n  Callout,\n  Card,\n  Dialog,\n  DropdownMenu,\n  Flex,\n  IconButton,\n  Skeleton,\n  Text,\n} from \"@radix-ui/themes\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  DotsHorizontalIcon,\n  ExternalLinkIcon,\n  GlobeIcon,\n  LockClosedIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n  DestructiveButton,\n  DestructiveMenuItem,\n  PrimaryButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { Status } from \"./status.js\";\nimport {\n  DataIntegration,\n  DataInstallation,\n  useDeleteDataInstallation,\n  useGetDataIntegrationAuthorizeUrlHook,\n  getMyDataIntegrationsQueryKey,\n  DataInstallationState,\n  useSettings,\n} from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getDomProps, WidgetRootDomProps, WidgetRootState } from \"./utils.js\";\n\ninterface PipesProps extends WidgetRootDomProps {\n  integrations: DataIntegration[];\n}\n\nconst useOpenDataIntegrationAuthorizeUrl = (integration: DataIntegration) => {\n  const getDataIntegrationAuthorizeUrl =\n    useGetDataIntegrationAuthorizeUrlHook();\n  const settings = useSettings();\n  const baseUrl = settings.data?.authkitOrigin ?? \"\";\n\n  return useCallback(async () => {\n    // need to do this synchronously in the event handler to avoid popup blocker notifications\n    const win = window.open(`${baseUrl}/pipes/redirecting`, \"_blank\");\n    // caller will catch\n    const { url } = await getDataIntegrationAuthorizeUrl(integration.slug);\n    if (win) {\n      win.location = url;\n    }\n  }, [getDataIntegrationAuthorizeUrl, integration.slug, baseUrl]);\n};\n\nfunction ConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  return (\n    <Button\n      onClick={async () => {\n        try {\n          await eventHandler();\n        } catch {\n          // pass - error displayed in new tab\n        }\n      }}\n      variant=\"outline\"\n      size=\"2\"\n      color=\"gray\"\n    >\n      Connect\n    </Button>\n  );\n}\n\nfunction SharedCredentialsConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const settings = useSettings();\n  const [open, setOpen] = useState(false);\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  const logo = settings.data?.logoDarkPath ?? settings.data?.logoLightPath;\n  const appName = settings.data?.teamName ?? \"This application\";\n\n  return (\n    <>\n      <Dialog.Root open={open} onOpenChange={setOpen}>\n        <Dialog.Content maxWidth=\"430px\">\n          <Flex justify=\"center\" align=\"center\" gap=\"2\" mt=\"2\">\n            {logo && (\n              <>\n                <IconPanel\n                  color=\"panel\"\n                  style={{ width: \"48px\", height: \"48px\" }}\n                >\n                  <ProviderIcon\n                    size=\"2\"\n                    provider=\"workos\"\n                    style={{ backgroundImage: `url(${logo})` }}\n                  />\n                </IconPanel>\n                <DotsHorizontalIcon />\n              </>\n            )}\n            <IconPanel\n              color=\"panel\"\n              style={{\n                ...(logo ? { borderWidth: 0 } : undefined),\n                width: \"48px\",\n                height: \"48px\",\n              }}\n            >\n              <ProviderIcon size=\"2\" provider=\"workos\" />\n            </IconPanel>\n            <DotsHorizontalIcon />\n            <IconPanel color=\"panel\" style={{ width: \"48px\", height: \"48px\" }}>\n              <ProviderIcon size=\"2\" provider={integration.integrationType} />\n            </IconPanel>\n          </Flex>\n          <Dialog.Title size=\"2\" mt=\"5\" mb=\"5\" weight={\"bold\"} align=\"center\">\n            {appName} uses WorkOS to connect to {integration.name}.\n          </Dialog.Title>\n          <Card>\n            <Flex direction=\"column\" gap=\"4\">\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <GlobeIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    You&apos;ll be redirected to sign in with {integration.name}\n                    .\n                  </Text>\n                  <Text size=\"1\">\n                    Authorize access to connect your account.\n                  </Text>\n                </Flex>\n              </Flex>\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <LockClosedIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    Your credentials remain secure.\n                  </Text>\n                  <Text size=\"1\">WorkOS never sees your credentials.</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Card>\n          <Flex justify=\"end\" gap=\"3\" mt=\"5\">\n            <Dialog.Close>\n              <SecondaryButton>Cancel</SecondaryButton>\n            </Dialog.Close>\n            <PrimaryButton\n              onClick={async () => {\n                try {\n                  await eventHandler();\n                  setOpen(false);\n                } catch {\n                  // pass - error displayed in new tab\n                }\n              }}\n            >\n              Connect <ExternalLinkIcon />\n            </PrimaryButton>\n          </Flex>\n        </Dialog.Content>\n      </Dialog.Root>\n      <Button\n        onClick={() => setOpen(true)}\n        variant=\"outline\"\n        size=\"2\"\n        color=\"gray\"\n      >\n        Connect\n      </Button>\n    </>\n  );\n}\n\nfunction ProviderStatus({ integration }: { integration: DataIntegration }) {\n  const [disconnectOpen, setDisconnectOpen] = useState(false);\n  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  if (integration.installation) {\n    const text =\n      integration.installation.state === DataInstallationState.connected\n        ? \"Connected\"\n        : \"Requires reauthorization\";\n\n    return (\n      <>\n        <DisconnectAccountDialog\n          integration={integration}\n          installation={integration.installation}\n          open={disconnectOpen}\n          onOpenChange={setDisconnectOpen}\n        />\n        <Status\n          state={\n            integration.installation.state === DataInstallationState.connected\n              ? \"success\"\n              : \"error\"\n          }\n        >\n          {text}\n        </Status>\n        <DropdownMenu.Root>\n          <DropdownMenu.Trigger>\n            <IconButton\n              radius=\"full\"\n              variant=\"ghost\"\n              color=\"gray\"\n              title=\"Pipe actions\"\n            >\n              <DotsHorizontalIcon />\n            </IconButton>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Content align=\"end\">\n            {integration.installation.state ===\n              DataInstallationState.needs_reauthorization && (\n              <DropdownMenu.Item\n                onClick={async () => {\n                  try {\n                    await authorizeEventHandler();\n                  } catch {\n                    // pass - error displayed in new tab\n                  }\n                }}\n              >\n                <Flex gap=\"4\" width=\"100%\" justify=\"between\" align=\"center\">\n                  Reauthorize\n                  <ExternalLinkIcon />\n                </Flex>\n              </DropdownMenu.Item>\n            )}\n            <DestructiveMenuItem onClick={() => setDisconnectOpen(true)}>\n              Disconnect account\n            </DestructiveMenuItem>\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </>\n    );\n  }\n\n  if (integration.credentialsType === \"shared\") {\n    return (\n      <SharedCredentialsConnectIntegrationButton integration={integration} />\n    );\n  }\n\n  return <ConnectIntegrationButton integration={integration} />;\n}\n\nfunction DisconnectAccountDialog({\n  integration,\n  installation,\n  open,\n  onOpenChange,\n}: {\n  integration: DataIntegration;\n  installation: DataInstallation;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const queryClient = useQueryClient();\n  const {\n    mutate: deleteDataInstallation,\n    error,\n    reset,\n    isPending,\n  } = useDeleteDataInstallation({\n    mutation: {\n      onSuccess: () => {\n        onOpenChange(false);\n        queryClient.invalidateQueries({\n          queryKey: getMyDataIntegrationsQueryKey(),\n        });\n      },\n    },\n  });\n\n  useEffect(() => {\n    if (open) {\n      reset();\n    }\n  }, [open, reset]);\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>\n      <AlertDialog.Content style={{ width: \"80vw\", maxWidth: \"520px\" }}>\n        <AlertDialog.Title>Disconnect account</AlertDialog.Title>\n        {error && (\n          <Callout.Root my=\"5\" color=\"red\" role=\"alert\">\n            <Callout.Text>\n              An error occurred while disconnecting your account. Please refresh\n              the page and try again.\n            </Callout.Text>\n          </Callout.Root>\n        )}\n        <AlertDialog.Description>\n          Are you sure you want to disconnect your{\" \"}\n          <Text as=\"span\" weight=\"bold\">\n            {integration.name}\n          </Text>{\" \"}\n          account?\n        </AlertDialog.Description>\n        <Flex gap=\"3\" justify=\"end\" mt=\"5\">\n          <AlertDialog.Cancel>\n            <SecondaryButton>Cancel</SecondaryButton>\n          </AlertDialog.Cancel>\n          <DestructiveButton\n            disabled={isPending}\n            loading={isPending}\n            onClick={() =>\n              deleteDataInstallation({ installationId: installation.id })\n            }\n          >\n            Disconnect\n          </DestructiveButton>\n        </Flex>\n      </AlertDialog.Content>\n    </AlertDialog.Root>\n  );\n}\n\ninterface PipesLoadingProps extends WidgetRootDomProps {\n  count: number;\n}\n\nconst PipesLoading: React.FC<PipesLoadingProps> = ({ count, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"loading\", domProps)}>\n      {Array.from({ length: count }).map((_, index) => (\n        <CardList.Item key={index}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <Skeleton>\n                <IconPanel>\n                  <ProviderIcon provider=\"google\" />\n                </IconPanel>\n              </Skeleton>\n              <Skeleton>\n                <Text size=\"2\" weight=\"bold\">\n                  Google Drive\n                </Text>\n              </Skeleton>\n            </Flex>\n            <Skeleton>\n              <Button disabled>Connect</Button>\n            </Skeleton>\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\nconst Pipes: React.FC<PipesProps> = ({ integrations, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {integrations.map((integration) => (\n        <CardList.Item key={integration.id}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <IconPanel color=\"panel\">\n                <ProviderIcon provider={integration.integrationType} />\n              </IconPanel>\n              <Text size=\"2\" weight=\"bold\">\n                {integration.name}\n              </Text>\n            </Flex>\n            <ProviderStatus integration={integration} />\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\ninterface PipesErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst PipesError: React.FC<PipesErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"pipes\",\n    widgetState: state,\n  });\n}\n\nexport type { PipesProps, PipesLoadingProps, PipesErrorProps };\nexport { Pipes, PipesLoading, PipesError };\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/pipes.d.cts

@@ -0,0 +1,19 @@
+import { DataIntegration } from '../api/endpoint.cjs';
+import { WidgetRootDomProps } from './utils.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface PipesProps extends WidgetRootDomProps {
+    integrations: DataIntegration[];
+}
+interface PipesLoadingProps extends WidgetRootDomProps {
+    count: number;
+}
+declare const PipesLoading: React.FC<PipesLoadingProps>;
+declare const Pipes: React.FC<PipesProps>;
+interface PipesErrorProps extends WidgetRootDomProps {
+    error: unknown;
+}
+declare const PipesError: React.FC<PipesErrorProps>;
+
+export { Pipes, PipesError, type PipesErrorProps, PipesLoading, type PipesLoadingProps, type PipesProps };

package/dist/cjs/lib/provider-icon.cjs

@@ -36,7 +36,6 @@ var import_helpers = require("@radix-ui/themes/helpers");
 var import_props = require("@radix-ui/themes/props");
 var import_clsx = __toESM(require("clsx"), 1);
 var React = __toESM(require("react"), 1);
-var import_identity_providers = require("./identity-providers.js");
 const ProviderIcon = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -45,11 +44,6 @@ const ProviderIcon = React.forwardRef(
       className,
       ...providerIconProps
     } = (0, import_helpers.extractProps)(props, import_props.marginPropDefs);
-    if (!(0, import_identity_providers.isIdentityProvider)(provider)) {
-      throw new TypeError(
-        `ProviderIcon: "${provider}" is not a valid provider.`
-      );
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/cjs/lib/provider-icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/provider-icon.tsx"],"sourcesContent":["import { extractProps } from \"@radix-ui/themes/helpers\";\nimport { marginPropDefs, MarginProps } from \"@radix-ui/themes/props\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n  isIdentityProvider,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\n\ninterface ProviderIconProps\n  extends React.ComponentPropsWithRef<\"div\">,\n    MarginProps {\n  provider: IdentityProvider;\n  size?: \"1\" | \"2\" | \"3\" | \"4\";\n}\n\nconst ProviderIcon = React.forwardRef<HTMLDivElement, ProviderIconProps>(\n  (props, forwardedRef) => {\n    const {\n      provider,\n      size = \"4\",\n      className,\n      ...providerIconProps\n    } = extractProps(props, marginPropDefs);\n\n    if (!isIdentityProvider(provider)) {\n      throw new TypeError(\n        `ProviderIcon: \"${provider}\" is not a valid provider.`,\n      );\n    }\n\n    return (\n      <div\n        {...providerIconProps}\n        ref={forwardedRef}\n        className={clsx(\"woswidgets-provider-icon\", `size-${size}`, className)}\n        data-provider={provider}\n      />\n    );\n  },\n);\n\nProviderIcon.displayName = \"ProviderIcon\";\n\nexport { ProviderIcon };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCM;AAhCN,qBAA6B;AAC7B,mBAA4C;AAC5C,kBAAiB;AACjB,YAAuB;AACvB,gCAGO;AASP,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAa,OAAO,2BAAc;AAEtC,QAAI,KAAC,8CAAmB,QAAQ,GAAG;AACjC,YAAM,IAAI;AAAA,QACR,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,YAAAA,SAAK,4BAA4B,QAAQ,IAAI,IAAI,SAAS;AAAA,QACrE,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":["clsx"]}
+{"version":3,"sources":["../../../src/lib/provider-icon.tsx"],"sourcesContent":["import { extractProps } from \"@radix-ui/themes/helpers\";\nimport { marginPropDefs, type MarginProps } from \"@radix-ui/themes/props\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport type { IdentityProvider } from \"./identity-providers.js\";\nimport type { DataIntegrationIntegrationType } from \"../api/endpoint.js\";\n\ninterface ProviderIconProps\n  extends React.ComponentPropsWithRef<\"div\">,\n    MarginProps {\n  provider: IdentityProvider | keyof typeof DataIntegrationIntegrationType;\n  size?: \"1\" | \"2\" | \"3\" | \"4\";\n}\n\nconst ProviderIcon = React.forwardRef<HTMLDivElement, ProviderIconProps>(\n  (props, forwardedRef) => {\n    const {\n      provider,\n      size = \"4\",\n      className,\n      ...providerIconProps\n    } = extractProps(props, marginPropDefs);\n\n    return (\n      <div\n        {...providerIconProps}\n        ref={forwardedRef}\n        className={clsx(\"woswidgets-provider-icon\", `size-${size}`, className)}\n        data-provider={provider}\n      />\n    );\n  },\n);\n\nProviderIcon.displayName = \"ProviderIcon\";\n\nexport { ProviderIcon };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBM;AAxBN,qBAA6B;AAC7B,mBAAiD;AACjD,kBAAiB;AACjB,YAAuB;AAWvB,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAa,OAAO,2BAAc;AAEtC,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,YAAAA,SAAK,4BAA4B,QAAQ,IAAI,IAAI,SAAS;AAAA,QACrE,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":["clsx"]}

package/dist/cjs/lib/provider-icon.d.cts

@@ -1,9 +1,12 @@
 import { MarginProps } from '@radix-ui/themes/props';
 import * as React from 'react';
 import { IdentityProvider } from './identity-providers.cjs';
+import { DataIntegrationIntegrationType } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
 
 interface ProviderIconProps extends React.ComponentPropsWithRef<"div">, MarginProps {
-    provider: IdentityProvider;
+    provider: IdentityProvider | keyof typeof DataIntegrationIntegrationType;
     size?: "1" | "2" | "3" | "4";
 }
 declare const ProviderIcon: React.ForwardRefExoticComponent<Omit<ProviderIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/lib/save-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import {\n  ButtonProps,\n  Flex,\n  Slot,\n  Slottable,\n  Spinner,\n  Text,\n} from \"@radix-ui/themes\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { namespaceClassNames } from \"./utils.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const Button = asChild ? Slot : \"button\";\n\n  useEffect(() => {\n    if (loading) {\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDone?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done, onDone]);\n\n  return (\n    <Button\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            Done\n          </Text>\n        </Flex>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4EM;AA5EN,oBAOO;AACP,yBAA0B;AAC1B,mBAA4C;AAC5C,mBAAoC;AAEpC,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAUnB,SAAS,WAAW;AAAA,EACzB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAU,YAAY,OAAO,SAAS;AAAA,EACxC;AACA,QAAM,uBAAmB,qBAAsB,IAAI;AACnD,QAAM,SAAS,UAAU,qBAAO;AAEhC,8BAAU,MAAM;AACd,QAAI,SAAS;AACX,eAAS,SAAS;AAClB,uBAAiB,UAAU,KAAK,IAAI;AAAA,IACtC,WAAW,MAAM;AACf,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;AAGJ,YAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;AAEtE,UAAI,YAA2B;AAC/B,YAAM,aAAa,OAAO,WAAW,MAAM;AACzC,iBAAS,MAAM;AAEf,oBAAY,OAAO,WAAW,MAAM;AAClC,mBAAS;AAAA,QACX,GAAG,eAAe;AAAA,MACpB,GAAG,cAAc;AAEjB,aAAO,MAAM;AACX,eAAO,aAAa,UAAU;AAC9B,YAAI,cAAc,MAAM;AACtB,iBAAO,aAAa,SAAS;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,WAAW,CAAC,WAAW,CAAC,MAAM;AAC5B,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kCAAoB,aAAa;AAAA,MAC5C,mBAAiB;AAAA,MAEjB;AAAA,oDAAC,2BAAW,UAAS;AAAA,QAEpB,UAAU,aACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YAEN,sDAAC,yBAAQ,MAAK,KAAI;AAAA;AAAA,QACpB;AAAA,QAGD,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YACN,KAAI;AAAA,YAEJ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,OAAO,EAAE,YAAY,OAAO;AAAA,kBAC5B,eAAW,kCAAoB,wBAAwB;AAAA;AAAA,cACzD;AAAA,cACA,4CAAC,sBAAK,eAAW,kCAAoB,wBAAwB,GAAG,kBAEhE;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import {\n  ButtonProps,\n  Flex,\n  Slot,\n  Slottable,\n  Spinner,\n  Text,\n} from \"@radix-ui/themes\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { namespaceClassNames } from \"./utils.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const Button = asChild ? Slot : \"button\";\n\n  useEffect(() => {\n    if (loading) {\n      // FIXME: This should be refactored\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDone?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done, onDone]);\n\n  return (\n    <Button\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            Done\n          </Text>\n        </Flex>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EM;AA9EN,oBAOO;AACP,yBAA0B;AAC1B,mBAA4C;AAC5C,mBAAoC;AAEpC,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAUnB,SAAS,WAAW;AAAA,EACzB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAU,YAAY,OAAO,SAAS;AAAA,EACxC;AACA,QAAM,uBAAmB,qBAAsB,IAAI;AACnD,QAAM,SAAS,UAAU,qBAAO;AAEhC,8BAAU,MAAM;AACd,QAAI,SAAS;AAGX,eAAS,SAAS;AAClB,uBAAiB,UAAU,KAAK,IAAI;AAAA,IACtC,WAAW,MAAM;AACf,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;AAGJ,YAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;AAEtE,UAAI,YAA2B;AAC/B,YAAM,aAAa,OAAO,WAAW,MAAM;AACzC,iBAAS,MAAM;AAEf,oBAAY,OAAO,WAAW,MAAM;AAClC,mBAAS;AAAA,QACX,GAAG,eAAe;AAAA,MACpB,GAAG,cAAc;AAEjB,aAAO,MAAM;AACX,eAAO,aAAa,UAAU;AAC9B,YAAI,cAAc,MAAM;AACtB,iBAAO,aAAa,SAAS;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,WAAW,CAAC,WAAW,CAAC,MAAM;AAC5B,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kCAAoB,aAAa;AAAA,MAC5C,mBAAiB;AAAA,MAEjB;AAAA,oDAAC,2BAAW,UAAS;AAAA,QAEpB,UAAU,aACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YAEN,sDAAC,yBAAQ,MAAK,KAAI;AAAA;AAAA,QACpB;AAAA,QAGD,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YACN,KAAI;AAAA,YAEJ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,OAAO,EAAE,YAAY,OAAO;AAAA,kBAC5B,eAAW,kCAAoB,wBAAwB;AAAA;AAAA,cACzD;AAAA,cACA,4CAAC,sBAAK,eAAW,kCAAoB,wBAAwB,GAAG,kBAEhE;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/cjs/lib/use-permissions.cjs

@@ -22,15 +22,15 @@ __export(use_permissions_exports, {
 });
 module.exports = __toCommonJS(use_permissions_exports);
 var import_react_query = require("@tanstack/react-query");
+var import_utils = require("../api/utils.js");
 var import_errors = require("./errors.js");
-function usePermissions(scope, authToken) {
+var import_api_provider = require("../api/api-provider.js");
+function usePermissions(scope) {
+  const { authToken } = (0, import_api_provider.useApi)();
   return (0, import_react_query.useQuery)({
     queryKey: ["permission", scope, authToken],
-    queryFn: async () => {
-      if (!authToken) {
-        throw new import_errors.NoAuthTokenError();
-      }
-      const { permissions } = parseJwt(await authToken);
+    queryFn: authToken ? async () => {
+      const { permissions } = (0, import_utils.getClaims)(authToken);
       if (!permissions || !Array.isArray(permissions)) {
         throw new import_errors.NoAuthTokenError();
       }
@@ -38,16 +38,9 @@ function usePermissions(scope, authToken) {
         throw new import_errors.IncorrectPermissionsError();
       }
       return true;
-    }
+    } : import_react_query.skipToken
   });
 }
-function parseJwt(token) {
-  try {
-    return JSON.parse(atob(token.split(".")[1]));
-  } catch {
-    return {};
-  }
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   usePermissions

package/dist/cjs/lib/use-permissions.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/use-permissions.ts"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { IncorrectPermissionsError, NoAuthTokenError } from \"./errors.js\";\n\n// TODO find a way to reuse the same type in the @workos-inc/node package\ntype WidgetScope = \"widgets:users-table:manage\" | \"widgets:api-keys:manage\";\n\nexport function usePermissions(\n  scope: WidgetScope,\n  authToken: null | string | Promise<string>,\n) {\n  return useQuery({\n    queryKey: [\"permission\", scope, authToken],\n    queryFn: async () => {\n      if (!authToken) {\n        throw new NoAuthTokenError();\n      }\n\n      const { permissions } = parseJwt(await authToken);\n\n      // When the permissions is not present in the token\n      if (!permissions || !Array.isArray(permissions)) {\n        throw new NoAuthTokenError();\n      }\n\n      // When the scope is not present in the permissions\n      if (!permissions.includes(scope)) {\n        throw new IncorrectPermissionsError();\n      }\n\n      return true;\n    },\n  });\n}\n\nfunction parseJwt(token: string) {\n  try {\n    return JSON.parse(atob(token.split(\".\")[1]));\n  } catch {\n    return {};\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAyB;AACzB,oBAA4D;AAKrD,SAAS,eACd,OACA,WACA;AACA,aAAO,6BAAS;AAAA,IACd,UAAU,CAAC,cAAc,OAAO,SAAS;AAAA,IACzC,SAAS,YAAY;AACnB,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,+BAAiB;AAAA,MAC7B;AAEA,YAAM,EAAE,YAAY,IAAI,SAAS,MAAM,SAAS;AAGhD,UAAI,CAAC,eAAe,CAAC,MAAM,QAAQ,WAAW,GAAG;AAC/C,cAAM,IAAI,+BAAiB;AAAA,MAC7B;AAGA,UAAI,CAAC,YAAY,SAAS,KAAK,GAAG;AAChC,cAAM,IAAI,wCAA0B;AAAA,MACtC;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAEA,SAAS,SAAS,OAAe;AAC/B,MAAI;AACF,WAAO,KAAK,MAAM,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;AAAA,EAC7C,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/use-permissions.ts"],"sourcesContent":["import { skipToken, useQuery } from \"@tanstack/react-query\";\nimport { getClaims } from \"../api/utils.js\";\nimport { IncorrectPermissionsError, NoAuthTokenError } from \"./errors.js\";\nimport { useApi } from \"../api/api-provider.js\";\n\n// TODO find a way to reuse the same type in the @workos-inc/node package\ntype WidgetScope = \"widgets:users-table:manage\" | \"widgets:api-keys:manage\";\n\nexport function usePermissions(scope: WidgetScope) {\n  const { authToken } = useApi();\n\n  return useQuery({\n    queryKey: [\"permission\", scope, authToken],\n    queryFn: authToken\n      ? async () => {\n          const { permissions } = getClaims(authToken);\n\n          // When the permissions is not present in the token\n          if (!permissions || !Array.isArray(permissions)) {\n            throw new NoAuthTokenError();\n          }\n\n          // When the scope is not present in the permissions\n          if (!permissions.includes(scope)) {\n            throw new IncorrectPermissionsError();\n          }\n\n          return true;\n        }\n      : skipToken,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAoC;AACpC,mBAA0B;AAC1B,oBAA4D;AAC5D,0BAAuB;AAKhB,SAAS,eAAe,OAAoB;AACjD,QAAM,EAAE,UAAU,QAAI,4BAAO;AAE7B,aAAO,6BAAS;AAAA,IACd,UAAU,CAAC,cAAc,OAAO,SAAS;AAAA,IACzC,SAAS,YACL,YAAY;AACV,YAAM,EAAE,YAAY,QAAI,wBAAU,SAAS;AAG3C,UAAI,CAAC,eAAe,CAAC,MAAM,QAAQ,WAAW,GAAG;AAC/C,cAAM,IAAI,+BAAiB;AAAA,MAC7B;AAGA,UAAI,CAAC,YAAY,SAAS,KAAK,GAAG;AAChC,cAAM,IAAI,wCAA0B;AAAA,MACtC;AAEA,aAAO;AAAA,IACT,IACA;AAAA,EACN,CAAC;AACH;","names":[]}

package/dist/cjs/lib/use-permissions.d.cts

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 
 type WidgetScope = "widgets:users-table:manage" | "widgets:api-keys:manage";
-declare function usePermissions(scope: WidgetScope, authToken: null | string | Promise<string>): _tanstack_react_query.UseQueryResult<boolean, Error>;
+declare function usePermissions(scope: WidgetScope): _tanstack_react_query.UseQueryResult<boolean, Error>;
 
 export { usePermissions };