@workos-inc/widgets 1.17.3 → 1.18.0-next.1788904392369

package/dist/cjs/pipes.client.cjs

@@ -31,13 +31,13 @@ var import_pipes = require("./lib/pipes.js");
 var import_endpoint = require("./api/endpoint.js");
 var import_use_is_hydrated = require("./lib/use-is-hydrated.js");
 var import_error_boundary = require("./lib/error-boundary.js");
-const Pipes = ({ authToken, ...domProps }) => {
+const PipesRoot = ({ authToken, ...props }) => {
   const baseUrl = (0, import_widgets_context.useWorkOsApiUrl)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_error_boundary.ErrorBoundary,
     {
-      fallbackRender: ({ error }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesError, { ...domProps, error }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_provider.ApiProvider, { widgetType: "pipes", authToken, baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesImpl, { ...domProps }) })
+      fallbackRender: ({ error }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesError, { ...props, error }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_provider.ApiProvider, { widgetType: "pipes", authToken, baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesImpl, { ...props }) })
     }
   );
 };
@@ -56,7 +56,33 @@ function matchesPipesFilterCriteria(integration, criteria) {
   }
   return true;
 }
+function applySharedPipesFilter(connections, filter) {
+  if (!filter) {
+    return connections;
+  }
+  if (typeof filter === "function") {
+    return connections.filter(filter);
+  }
+  const { slugs } = filter;
+  return slugs ? connections.filter((connection) => slugs.includes(connection.slug)) : connections;
+}
+function applyPipesFilter(integrations, filter) {
+  if (!filter) {
+    return integrations;
+  }
+  return typeof filter === "function" ? integrations.filter((integration) => filter(integration)) : integrations.filter(
+    (integration) => matchesPipesFilterCriteria(integration, filter)
+  );
+}
 const PipesImpl = (props) => {
+  if (props.enableSharedConnections) {
+    const { enableSharedConnections: enableSharedConnections2, ...sectionsProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesSectionsImpl, { ...sectionsProps });
+  }
+  const { enableSharedConnections, ...personalProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesPersonalImpl, { ...personalProps });
+};
+const PipesPersonalImpl = (props) => {
   const isHydrated = (0, import_use_is_hydrated.useIsHydrated)();
   const integrations = (0, import_endpoint.useMyDataIntegrations)();
   if (!isHydrated || integrations.isLoading) {
@@ -66,15 +92,50 @@ const PipesImpl = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesError, { error: integrations.error, ...props });
   }
   if (integrations.isSuccess) {
-    const all = integrations.data.data;
-    const { filter } = props;
-    const visible = filter ? typeof filter === "function" ? all.filter(filter) : all.filter(
-      (integration) => matchesPipesFilterCriteria(integration, filter)
-    ) : all;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.Pipes, { integrations: visible, ...props });
+    const visible = applyPipesFilter(integrations.data.data, props.filter);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pipes.Pipes,
+      {
+        integrations: visible,
+        hasUnfilteredIntegrations: integrations.data.data.length > 0,
+        ...props
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesError, { error: integrations.error, ...props });
 };
+const PipesSectionsImpl = (props) => {
+  const isHydrated = (0, import_use_is_hydrated.useIsHydrated)();
+  const integrations = (0, import_endpoint.useMyDataIntegrations)();
+  const shared = (0, import_endpoint.useSharedDataConnections)();
+  const organizations = (0, import_endpoint.useOrganizations)();
+  const organizationName = organizations.data?.data.find(
+    (organization) => organization.current
+  )?.name;
+  if (!isHydrated || integrations.isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesLoading, { count: 6, ...props });
+  }
+  if (integrations.isError || !integrations.isSuccess) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesError, { error: integrations.error, ...props });
+  }
+  const visible = applyPipesFilter(integrations.data.data, props.filter);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_pipes.PipesSections,
+    {
+      integrations: visible,
+      hasUnfilteredIntegrations: integrations.data.data.length > 0,
+      sharedConnections: applySharedPipesFilter(
+        shared.data?.data ?? [],
+        props.filter
+      ),
+      hasUnfilteredSharedConnections: (shared.data?.data.length ?? 0) > 0,
+      isSharedLoading: shared.isPending && shared.failureCount === 0,
+      organizationName,
+      ...props
+    }
+  );
+};
+const Pipes = PipesRoot;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Pipes,

package/dist/cjs/pipes.client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/pipes.client.tsx"],"sourcesContent":["\"use client\";\nimport { ApiProvider, AuthToken } from \"./api/api-provider.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport {\n  Pipes as PipesPresentational,\n  PipesError,\n  PipesLoading,\n} from \"./lib/pipes.js\";\nimport type { PipesErrorProps, PipesLoadingProps } from \"./lib/pipes.js\";\nimport { DataIntegration, useMyDataIntegrations } from \"./api/endpoint.js\";\nimport { useIsHydrated } from \"./lib/use-is-hydrated.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\nimport { WidgetRootDomProps } from \"./lib/utils.js\";\n\n/** An auth method a provider advertises (defaults to `oauth` when unset). */\ntype PipesAuthMethod = NonNullable<DataIntegration[\"authMethods\"]>[number];\n\n/**\n * Serializable criteria for narrowing which integrations render. All provided\n * criteria are ANDed; an absent criterion is ignored. Safe to pass from a\n * Server Component, since props cross the server/client boundary.\n */\ninterface PipesFilterCriteria {\n  /** Render only integrations whose `slug` is in this list. */\n  slugs?: string[];\n  /** Render only integrations whose `integrationType` is in this list. */\n  integrationTypes?: string[];\n  /** Render only integrations that advertise at least one of these methods. */\n  authMethods?: PipesAuthMethod[];\n}\n\n/**\n * Narrows which enabled integrations the widget renders. Either a predicate\n * (use from a Client Component host) or serializable criteria (use from a\n * Server Component host, where props must cross the server/client boundary).\n */\ntype PipesFilter =\n  | PipesFilterCriteria\n  | ((integration: DataIntegration) => boolean);\n\ninterface PipesProps extends WidgetRootDomProps {\n  authToken: AuthToken;\n  /**\n   * Optional filter that narrows which enabled integrations the widget\n   * renders. The widget still fetches the full set of integrations the user's\n   * organization has enabled (plus any the user is still connected to so they\n   * can disconnect); this prop only controls which of those rows are shown.\n   *\n   * Accepts either form:\n   *\n   * - **Serializable criteria** (`{ slugs, integrationTypes, authMethods }`),\n   *   ANDed together. This is the form to use when `<Pipes>` is embedded in a\n   *   Server Component (the documented token-minting pattern), because props\n   *   must be serializable across the server/client boundary and plain objects\n   *   survive it. e.g. `filter={{ slugs: [\"google-drive\"] }}`.\n   *\n   * - **A predicate** `((integration) => boolean)` for arbitrary filtering by any\n   *   field on the integration (`authMethods`, `integrationType`,\n   *   `installation.state`, etc.). A function is **not serializable across the\n   *   server/client boundary**: the predicate must be defined inside client\n   *   code and must never be passed in from a Server Component. Concretely, a\n   *   host using the App Router server-component pattern that needs a predicate\n   *   must author its own `\"use client\"` wrapper that *owns* the predicate and\n   *   receives only serializable props (e.g. `authToken`) from the server page.\n   *\n   * Undefined renders every enabled integration (the default).\n   */\n  filter?: PipesFilter;\n}\n\nconst Pipes: React.FC<PipesProps> = ({ authToken, ...domProps }) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ErrorBoundary\n      fallbackRender={({ error }) => <PipesError {...domProps} error={error} />}\n    >\n      <ApiProvider widgetType=\"pipes\" authToken={authToken} baseUrl={baseUrl}>\n        <PipesImpl {...domProps} />\n      </ApiProvider>\n    </ErrorBoundary>\n  );\n};\n\n/**\n * Evaluates serializable {@link PipesFilterCriteria} against an integration.\n * Provided criteria are ANDed; an integration with no declared `authMethods`\n * is treated as `oauth` (matching the widget's connect-method defaults).\n */\nfunction matchesPipesFilterCriteria(\n  integration: DataIntegration,\n  criteria: PipesFilterCriteria,\n): boolean {\n  if (criteria.slugs && !criteria.slugs.includes(integration.slug)) {\n    return false;\n  }\n  if (\n    criteria.integrationTypes &&\n    !criteria.integrationTypes.includes(integration.integrationType)\n  ) {\n    return false;\n  }\n  if (criteria.authMethods) {\n    const methods = integration.authMethods ?? [\"oauth\"];\n    if (!criteria.authMethods.some((method) => methods.includes(method))) {\n      return false;\n    }\n  }\n  return true;\n}\n\nconst PipesImpl = (props: Omit<PipesProps, \"authToken\">) => {\n  const isHydrated = useIsHydrated();\n  const integrations = useMyDataIntegrations();\n\n  if (!isHydrated || integrations.isLoading) {\n    return <PipesLoading count={6} {...props} />;\n  }\n\n  if (integrations.isError) {\n    return <PipesError error={integrations.error} {...props} />;\n  }\n\n  if (integrations.isSuccess) {\n    const all = integrations.data.data;\n    const { filter } = props;\n    const visible = filter\n      ? typeof filter === \"function\"\n        ? all.filter(filter)\n        : all.filter((integration) =>\n            matchesPipesFilterCriteria(integration, filter),\n          )\n      : all;\n\n    return <PipesPresentational integrations={visible} {...props} />;\n  }\n\n  return <PipesError error={integrations.error} {...props} />;\n};\n\nexport type {\n  PipesProps,\n  PipesFilter,\n  PipesFilterCriteria,\n  PipesAuthMethod,\n  PipesLoadingProps,\n  PipesErrorProps,\n};\nexport { Pipes, PipesLoading, PipesError };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2EqC;AA1ErC,0BAAuC;AACvC,6BAAgC;AAChC,mBAIO;AAEP,sBAAuD;AACvD,6BAA8B;AAC9B,4BAA8B;AA2D9B,MAAM,QAA8B,CAAC,EAAE,WAAW,GAAG,SAAS,MAAM;AAClE,QAAM,cAAU,wCAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MAAM,4CAAC,2BAAY,GAAG,UAAU,OAAc;AAAA,MAEvE,sDAAC,mCAAY,YAAW,SAAQ,WAAsB,SACpD,sDAAC,aAAW,GAAG,UAAU,GAC3B;AAAA;AAAA,EACF;AAEJ;AAOA,SAAS,2BACP,aACA,UACS;AACT,MAAI,SAAS,SAAS,CAAC,SAAS,MAAM,SAAS,YAAY,IAAI,GAAG;AAChE,WAAO;AAAA,EACT;AACA,MACE,SAAS,oBACT,CAAC,SAAS,iBAAiB,SAAS,YAAY,eAAe,GAC/D;AACA,WAAO;AAAA,EACT;AACA,MAAI,SAAS,aAAa;AACxB,UAAM,UAAU,YAAY,eAAe,CAAC,OAAO;AACnD,QAAI,CAAC,SAAS,YAAY,KAAK,CAAC,WAAW,QAAQ,SAAS,MAAM,CAAC,GAAG;AACpE,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,YAAY,CAAC,UAAyC;AAC1D,QAAM,iBAAa,sCAAc;AACjC,QAAM,mBAAe,uCAAsB;AAE3C,MAAI,CAAC,cAAc,aAAa,WAAW;AACzC,WAAO,4CAAC,6BAAa,OAAO,GAAI,GAAG,OAAO;AAAA,EAC5C;AAEA,MAAI,aAAa,SAAS;AACxB,WAAO,4CAAC,2BAAW,OAAO,aAAa,OAAQ,GAAG,OAAO;AAAA,EAC3D;AAEA,MAAI,aAAa,WAAW;AAC1B,UAAM,MAAM,aAAa,KAAK;AAC9B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,UAAU,SACZ,OAAO,WAAW,aAChB,IAAI,OAAO,MAAM,IACjB,IAAI;AAAA,MAAO,CAAC,gBACV,2BAA2B,aAAa,MAAM;AAAA,IAChD,IACF;AAEJ,WAAO,4CAAC,aAAAA,OAAA,EAAoB,cAAc,SAAU,GAAG,OAAO;AAAA,EAChE;AAEA,SAAO,4CAAC,2BAAW,OAAO,aAAa,OAAQ,GAAG,OAAO;AAC3D;","names":["PipesPresentational"]}
+{"version":3,"sources":["../../src/pipes.client.tsx"],"sourcesContent":["\"use client\";\nimport { ApiProvider, AuthToken } from \"./api/api-provider.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport {\n  Pipes as PipesPresentational,\n  PipesSections as PipesSectionsPresentational,\n  PipesError,\n  PipesLoading,\n} from \"./lib/pipes.js\";\nimport type { PipesErrorProps, PipesLoadingProps } from \"./lib/pipes.js\";\nimport {\n  DataIntegration,\n  DataIntegrationWithConnections,\n  SharedDataConnection,\n  useMyDataIntegrations,\n  useOrganizations,\n  useSharedDataConnections,\n} from \"./api/endpoint.js\";\nimport { useIsHydrated } from \"./lib/use-is-hydrated.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\nimport { WidgetRootDomProps } from \"./lib/utils.js\";\n\n/** An auth method a provider advertises (defaults to `oauth` when unset). */\ntype PipesAuthMethod = NonNullable<DataIntegration[\"authMethods\"]>[number];\n\n/**\n * Serializable criteria for narrowing which integrations render. All provided\n * criteria are ANDed; an absent criterion is ignored. Safe to pass from a\n * Server Component, since props cross the server/client boundary.\n */\ninterface PipesFilterCriteria {\n  /** Render only integrations whose `slug` is in this list. */\n  slugs?: string[];\n  /** Render only integrations whose `integrationType` is in this list. */\n  integrationTypes?: string[];\n  /** Render only integrations that advertise at least one of these methods. */\n  authMethods?: PipesAuthMethod[];\n}\n\n/**\n * Narrows which enabled integrations the widget renders. The widget still\n * fetches the full set of integrations the user's organization has enabled\n * (plus any the user is still connected to so they can disconnect); a filter\n * only controls which of those rows are shown, in either of two forms:\n *\n * - **Serializable criteria** (`{ slugs, integrationTypes, authMethods }`),\n *   ANDed together. This is the form to use when `<Pipes>` is embedded in a\n *   Server Component (the documented token-minting pattern), because props must\n *   be serializable across the server/client boundary and plain objects survive\n *   it. e.g. `filter={{ slugs: [\"google-drive\"] }}`.\n *\n * - **A predicate** `((integration) => boolean)` for arbitrary filtering by any\n *   field on the integration (`authMethods`, `integrationType`,\n *   `installation.state`, etc.). A function is **not serializable across the\n *   server/client boundary**: the predicate must be defined inside client code\n *   and must never be passed in from a Server Component. Concretely, a host\n *   using the App Router server-component pattern that needs a predicate must\n *   author its own `\"use client\"` wrapper that *owns* the predicate and\n *   receives only serializable props (e.g. `authToken`) from the server page.\n *\n * Undefined renders every enabled integration (the default).\n */\ntype PipesFilter =\n  | PipesFilterCriteria\n  | ((integration: DataIntegration) => boolean);\n\n/** A row the widget renders when `enableSharedConnections` is on. */\ntype PipesConnection = DataIntegrationWithConnections | SharedDataConnection;\n\n/**\n * {@link PipesFilter} as `enableSharedConnections` widens it: the same two\n * forms, except they narrow both sections. The predicate also sees the\n * organization's shared rows, discriminated with `\"integrationType\" in\n * connection` — shared rows carry none of the provider metadata the member's\n * own rows do. Neither `ownership` nor `connected_accounts` discriminates\n * them: the member's own connections can be `\"organization\"` too, and both\n * payloads carry `connected_accounts` (of different element types). Criteria\n * narrow shared rows by `slugs` alone, for the same want of metadata.\n */\ntype PipesConnectionFilter =\n  | PipesFilterCriteria\n  | ((connection: PipesConnection) => boolean);\n\n/** The unsectioned widget, whose `filter` is what it always was. */\ntype PipesPersonalProps = WidgetRootDomProps & {\n  authToken: AuthToken;\n  /**\n   * Defaults to `false`, which renders the single unsectioned list of the\n   * member's own connections and never requests shared connections.\n   */\n  enableSharedConnections?: false;\n  /** Narrows the member's own connections: {@link PipesFilter}. */\n  filter?: PipesFilter;\n};\n\n/**\n * The sectioned widget, whose `filter` also narrows the shared section and so\n * takes the widened predicate.\n */\ntype PipesSectionsProps = WidgetRootDomProps & {\n  authToken: AuthToken;\n  /**\n   * Opt in to the sectioned member experience: the connections the organization\n   * owns and shares with everyone, followed by the member's own connections.\n   *\n   * Shared connections are read-only for members — they carry no\n   * credential-management actions — and are fetched separately from the\n   * member's own connections, so the personal section renders as soon as it\n   * resolves regardless of the shared one.\n   *\n   * Typed `boolean` rather than `true` so a host can forward a runtime feature\n   * flag: a predicate has to cope with shared rows whenever the flag can be on.\n   */\n  enableSharedConnections: boolean;\n  /** Narrows both sections: {@link PipesConnectionFilter}. */\n  filter?: PipesConnectionFilter;\n};\n\ntype PipesProps = PipesPersonalProps | PipesSectionsProps;\n\ntype PipesImplProps =\n  | Omit<PipesPersonalProps, \"authToken\">\n  | Omit<PipesSectionsProps, \"authToken\">;\n\n/**\n * Overloads rather than one props union, so that opting in widens the\n * predicate's parameter for that host alone while every other host's `filter`\n * stays exactly as it was. A union leaves `enableSharedConnections={false}`\n * satisfying both members — the opt-in one accepts every `boolean` — leaving an\n * inline predicate no single contextual type to draw on (`TS7006`). Overloads\n * are ordered instead: a literal `false` resolves to the personal signature,\n * and anything else, a runtime flag included, to the widened one.\n *\n * The last signature takes the whole union, so that a wrapper forwarding\n * `PipesProps` it hasn't narrowed (`<Pipes {...props} />`) still resolves, and\n * so that `React.ComponentProps<typeof Pipes>` — which reads the last\n * signature — describes the widget rather than only its opted-in half.\n */\ninterface PipesComponent {\n  (props: PipesPersonalProps): React.ReactNode;\n  (props: PipesSectionsProps): React.ReactNode;\n  (props: PipesProps): React.ReactNode;\n}\n\nconst PipesRoot = ({ authToken, ...props }: PipesProps) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ErrorBoundary\n      fallbackRender={({ error }) => <PipesError {...props} error={error} />}\n    >\n      <ApiProvider widgetType=\"pipes\" authToken={authToken} baseUrl={baseUrl}>\n        <PipesImpl {...props} />\n      </ApiProvider>\n    </ErrorBoundary>\n  );\n};\n\n/**\n * Evaluates serializable {@link PipesFilterCriteria} against an integration.\n * Provided criteria are ANDed; an integration with no declared `authMethods`\n * is treated as `oauth` (matching the widget's connect-method defaults).\n */\nfunction matchesPipesFilterCriteria(\n  integration: DataIntegration,\n  criteria: PipesFilterCriteria,\n): boolean {\n  if (criteria.slugs && !criteria.slugs.includes(integration.slug)) {\n    return false;\n  }\n  if (\n    criteria.integrationTypes &&\n    !criteria.integrationTypes.includes(integration.integrationType)\n  ) {\n    return false;\n  }\n  if (criteria.authMethods) {\n    const methods = integration.authMethods ?? [\"oauth\"];\n    if (!criteria.authMethods.some((method) => methods.includes(method))) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Narrows shared connections. Criteria match them on `slugs` alone, since their\n * payload carries none of the provider metadata the other criteria read.\n */\nfunction applySharedPipesFilter(\n  connections: SharedDataConnection[],\n  filter: PipesConnectionFilter | undefined,\n): SharedDataConnection[] {\n  if (!filter) {\n    return connections;\n  }\n\n  if (typeof filter === \"function\") {\n    return connections.filter(filter);\n  }\n\n  const { slugs } = filter;\n\n  return slugs\n    ? connections.filter((connection) => slugs.includes(connection.slug))\n    : connections;\n}\n\n/** Applies a {@link PipesFilter} in either of its forms. */\nfunction applyPipesFilter(\n  integrations: DataIntegrationWithConnections[],\n  filter: PipesFilter | PipesConnectionFilter | undefined,\n): DataIntegrationWithConnections[] {\n  if (!filter) {\n    return integrations;\n  }\n\n  return typeof filter === \"function\"\n    ? integrations.filter((integration) => filter(integration))\n    : integrations.filter((integration) =>\n        matchesPipesFilterCriteria(integration, filter),\n      );\n}\n\ntype PipesSectionsImplProps = WidgetRootDomProps & {\n  filter?: PipesConnectionFilter;\n};\n\n// The two experiences are separate components so the opt-out path mounts no\n// shared-connections hook at all, and therefore issues exactly the requests it\n// always has.\nconst PipesImpl = (props: PipesImplProps) => {\n  if (props.enableSharedConnections) {\n    const { enableSharedConnections, ...sectionsProps } = props;\n    return <PipesSectionsImpl {...sectionsProps} />;\n  }\n\n  const { enableSharedConnections, ...personalProps } = props;\n  return <PipesPersonalImpl {...personalProps} />;\n};\n\ntype PipesPersonalImplProps = WidgetRootDomProps & {\n  filter?: PipesFilter | PipesConnectionFilter;\n};\n\nconst PipesPersonalImpl = (props: PipesPersonalImplProps) => {\n  const isHydrated = useIsHydrated();\n  const integrations = useMyDataIntegrations();\n\n  if (!isHydrated || integrations.isLoading) {\n    return <PipesLoading count={6} {...props} />;\n  }\n\n  if (integrations.isError) {\n    return <PipesError error={integrations.error} {...props} />;\n  }\n\n  if (integrations.isSuccess) {\n    const visible = applyPipesFilter(integrations.data.data, props.filter);\n\n    return (\n      <PipesPresentational\n        integrations={visible}\n        hasUnfilteredIntegrations={integrations.data.data.length > 0}\n        {...props}\n      />\n    );\n  }\n\n  return <PipesError error={integrations.error} {...props} />;\n};\n\nconst PipesSectionsImpl = (props: PipesSectionsImplProps) => {\n  const isHydrated = useIsHydrated();\n  const integrations = useMyDataIntegrations();\n  // Both sections have their own cache entry and resolve independently: the\n  // member's own connections render as soon as they arrive, and a slow or\n  // failing shared request only affects the shared section.\n  const shared = useSharedDataConnections();\n  const organizations = useOrganizations();\n  const organizationName = organizations.data?.data.find(\n    (organization) => organization.current,\n  )?.name;\n\n  if (!isHydrated || integrations.isLoading) {\n    return <PipesLoading count={6} {...props} />;\n  }\n\n  if (integrations.isError || !integrations.isSuccess) {\n    return <PipesError error={integrations.error} {...props} />;\n  }\n\n  const visible = applyPipesFilter(integrations.data.data, props.filter);\n\n  return (\n    <PipesSectionsPresentational\n      integrations={visible}\n      hasUnfilteredIntegrations={integrations.data.data.length > 0}\n      sharedConnections={applySharedPipesFilter(\n        shared.data?.data ?? [],\n        props.filter,\n      )}\n      hasUnfilteredSharedConnections={(shared.data?.data.length ?? 0) > 0}\n      // A failed attempt drops the section rather than leaving skeletons up\n      // for the whole retry sequence.\n      isSharedLoading={shared.isPending && shared.failureCount === 0}\n      organizationName={organizationName}\n      {...props}\n    />\n  );\n};\n\nconst Pipes: PipesComponent = PipesRoot;\n\nexport type {\n  PipesProps,\n  PipesConnection,\n  PipesFilter,\n  PipesFilterCriteria,\n  PipesConnectionFilter,\n  PipesAuthMethod,\n  PipesLoadingProps,\n  PipesErrorProps,\n};\nexport { Pipes, PipesLoading, PipesError };\n"],"mappings":"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","names":["enableSharedConnections","PipesPresentational","PipesSectionsPresentational"]}

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

@@ -1,6 +1,6 @@
 import { AuthToken } from './api/api-provider.cjs';
 export { PipesError, PipesErrorProps, PipesLoading, PipesLoadingProps } from './lib/pipes.cjs';
-import { DataIntegration } from './api/endpoint.cjs';
+import { DataIntegration, DataIntegrationWithConnections, SharedDataConnection } from './api/endpoint.cjs';
 import { WidgetRootDomProps } from './lib/utils.cjs';
 import 'react';
 import '@tanstack/react-query';
@@ -33,40 +33,95 @@ interface PipesFilterCriteria {
     authMethods?: PipesAuthMethod[];
 }
 /**
- * Narrows which enabled integrations the widget renders. Either a predicate
- * (use from a Client Component host) or serializable criteria (use from a
- * Server Component host, where props must cross the server/client boundary).
+ * Narrows which enabled integrations the widget renders. The widget still
+ * fetches the full set of integrations the user's organization has enabled
+ * (plus any the user is still connected to so they can disconnect); a filter
+ * only controls which of those rows are shown, in either of two forms:
+ *
+ * - **Serializable criteria** (`{ slugs, integrationTypes, authMethods }`),
+ *   ANDed together. This is the form to use when `<Pipes>` is embedded in a
+ *   Server Component (the documented token-minting pattern), because props must
+ *   be serializable across the server/client boundary and plain objects survive
+ *   it. e.g. `filter={{ slugs: ["google-drive"] }}`.
+ *
+ * - **A predicate** `((integration) => boolean)` for arbitrary filtering by any
+ *   field on the integration (`authMethods`, `integrationType`,
+ *   `installation.state`, etc.). A function is **not serializable across the
+ *   server/client boundary**: the predicate must be defined inside client code
+ *   and must never be passed in from a Server Component. Concretely, a host
+ *   using the App Router server-component pattern that needs a predicate must
+ *   author its own `"use client"` wrapper that *owns* the predicate and
+ *   receives only serializable props (e.g. `authToken`) from the server page.
+ *
+ * Undefined renders every enabled integration (the default).
  */
 type PipesFilter = PipesFilterCriteria | ((integration: DataIntegration) => boolean);
-interface PipesProps extends WidgetRootDomProps {
+/** A row the widget renders when `enableSharedConnections` is on. */
+type PipesConnection = DataIntegrationWithConnections | SharedDataConnection;
+/**
+ * {@link PipesFilter} as `enableSharedConnections` widens it: the same two
+ * forms, except they narrow both sections. The predicate also sees the
+ * organization's shared rows, discriminated with `"integrationType" in
+ * connection` — shared rows carry none of the provider metadata the member's
+ * own rows do. Neither `ownership` nor `connected_accounts` discriminates
+ * them: the member's own connections can be `"organization"` too, and both
+ * payloads carry `connected_accounts` (of different element types). Criteria
+ * narrow shared rows by `slugs` alone, for the same want of metadata.
+ */
+type PipesConnectionFilter = PipesFilterCriteria | ((connection: PipesConnection) => boolean);
+/** The unsectioned widget, whose `filter` is what it always was. */
+type PipesPersonalProps = WidgetRootDomProps & {
     authToken: AuthToken;
     /**
-     * Optional filter that narrows which enabled integrations the widget
-     * renders. The widget still fetches the full set of integrations the user's
-     * organization has enabled (plus any the user is still connected to so they
-     * can disconnect); this prop only controls which of those rows are shown.
-     *
-     * Accepts either form:
-     *
-     * - **Serializable criteria** (`{ slugs, integrationTypes, authMethods }`),
-     *   ANDed together. This is the form to use when `<Pipes>` is embedded in a
-     *   Server Component (the documented token-minting pattern), because props
-     *   must be serializable across the server/client boundary and plain objects
-     *   survive it. e.g. `filter={{ slugs: ["google-drive"] }}`.
+     * Defaults to `false`, which renders the single unsectioned list of the
+     * member's own connections and never requests shared connections.
+     */
+    enableSharedConnections?: false;
+    /** Narrows the member's own connections: {@link PipesFilter}. */
+    filter?: PipesFilter;
+};
+/**
+ * The sectioned widget, whose `filter` also narrows the shared section and so
+ * takes the widened predicate.
+ */
+type PipesSectionsProps = WidgetRootDomProps & {
+    authToken: AuthToken;
+    /**
+     * Opt in to the sectioned member experience: the connections the organization
+     * owns and shares with everyone, followed by the member's own connections.
      *
-     * - **A predicate** `((integration) => boolean)` for arbitrary filtering by any
-     *   field on the integration (`authMethods`, `integrationType`,
-     *   `installation.state`, etc.). A function is **not serializable across the
-     *   server/client boundary**: the predicate must be defined inside client
-     *   code and must never be passed in from a Server Component. Concretely, a
-     *   host using the App Router server-component pattern that needs a predicate
-     *   must author its own `"use client"` wrapper that *owns* the predicate and
-     *   receives only serializable props (e.g. `authToken`) from the server page.
+     * Shared connections are read-only for members — they carry no
+     * credential-management actions — and are fetched separately from the
+     * member's own connections, so the personal section renders as soon as it
+     * resolves regardless of the shared one.
      *
-     * Undefined renders every enabled integration (the default).
+     * Typed `boolean` rather than `true` so a host can forward a runtime feature
+     * flag: a predicate has to cope with shared rows whenever the flag can be on.
      */
-    filter?: PipesFilter;
+    enableSharedConnections: boolean;
+    /** Narrows both sections: {@link PipesConnectionFilter}. */
+    filter?: PipesConnectionFilter;
+};
+type PipesProps = PipesPersonalProps | PipesSectionsProps;
+/**
+ * Overloads rather than one props union, so that opting in widens the
+ * predicate's parameter for that host alone while every other host's `filter`
+ * stays exactly as it was. A union leaves `enableSharedConnections={false}`
+ * satisfying both members — the opt-in one accepts every `boolean` — leaving an
+ * inline predicate no single contextual type to draw on (`TS7006`). Overloads
+ * are ordered instead: a literal `false` resolves to the personal signature,
+ * and anything else, a runtime flag included, to the widened one.
+ *
+ * The last signature takes the whole union, so that a wrapper forwarding
+ * `PipesProps` it hasn't narrowed (`<Pipes {...props} />`) still resolves, and
+ * so that `React.ComponentProps<typeof Pipes>` — which reads the last
+ * signature — describes the widget rather than only its opted-in half.
+ */
+interface PipesComponent {
+    (props: PipesPersonalProps): React.ReactNode;
+    (props: PipesSectionsProps): React.ReactNode;
+    (props: PipesProps): React.ReactNode;
 }
-declare const Pipes: React.FC<PipesProps>;
+declare const Pipes: PipesComponent;
 
-export { Pipes, type PipesAuthMethod, type PipesFilter, type PipesFilterCriteria, type PipesProps };
+export { Pipes, type PipesAuthMethod, type PipesConnection, type PipesConnectionFilter, type PipesFilter, type PipesFilterCriteria, type PipesProps };

package/dist/esm/index.d.ts

@@ -8,8 +8,8 @@ export { UsersManagement, UsersManagementProps } from './users-management.client
 export { AdminPortalDomainVerification, AdminPortalDomainVerificationProps } from './admin-portal-domain-verification.client.js';
 export { AdminPortalAuditLogStreaming, AdminPortalAuditLogStreamingProps } from './admin-portal-audit-log-streaming.client.js';
 export { ApiKeys, ApiKeysProps } from './api-keys.client.js';
-export { Pipes, PipesAuthMethod, PipesFilter, PipesFilterCriteria, PipesProps } from './pipes.client.js';
-export { DataIntegration } from './api/endpoint.js';
+export { Pipes, PipesAuthMethod, PipesConnection, PipesConnectionFilter, PipesFilter, PipesFilterCriteria, PipesProps } from './pipes.client.js';
+export { DataIntegration, SharedDataConnection } from './api/endpoint.js';
 export { PipesAdmin, PipesAdminProps } from './pipes-admin.client.js';
 export { DirectorySync, DirectorySyncProps } from './directory-sync.client.js';
 export { IntlContext as internal_IntlContext } from './lib/i18n/intl-context.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection.client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\nexport {\n  AdminPortalAuditLogStreaming,\n  AdminPortalAuditLogStreamingLoading,\n  AdminPortalAuditLogStreamingError,\n  type AdminPortalAuditLogStreamingProps,\n  AdminPortalAuditLogStreamingPresentational,\n  AdminPortalAuditLogStreamingButton as AdminPortalAuditLogStreamingOpenButton,\n  type AdminPortalAuditLogStreamingStatusProps,\n} from \"./admin-portal-audit-log-streaming.client.js\";\nexport {\n  ApiKeys,\n  ApiKeysLoading,\n  type ApiKeysProps,\n} from \"./api-keys.client.js\";\nexport {\n  Pipes,\n  PipesLoading,\n  type PipesAuthMethod,\n  type PipesFilter,\n  type PipesFilterCriteria,\n  type PipesProps,\n} from \"./pipes.client.js\";\nexport type { DataIntegration } from \"./api/endpoint.js\";\nexport {\n  PipesAdmin,\n  PipesAdminLoading,\n  type PipesAdminProps,\n} from \"./pipes-admin.client.js\";\nexport {\n  DirectorySync,\n  DirectorySyncLoading,\n  type DirectorySyncProps,\n} from \"./directory-sync.client.js\";\nexport { IntlContext as internal_IntlContext } from \"./lib/i18n/intl-context.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACsC;AAAA,OAEjC;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAwB,mBAA4B;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection.client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\nexport {\n  AdminPortalAuditLogStreaming,\n  AdminPortalAuditLogStreamingLoading,\n  AdminPortalAuditLogStreamingError,\n  type AdminPortalAuditLogStreamingProps,\n  AdminPortalAuditLogStreamingPresentational,\n  AdminPortalAuditLogStreamingButton as AdminPortalAuditLogStreamingOpenButton,\n  type AdminPortalAuditLogStreamingStatusProps,\n} from \"./admin-portal-audit-log-streaming.client.js\";\nexport {\n  ApiKeys,\n  ApiKeysLoading,\n  type ApiKeysProps,\n} from \"./api-keys.client.js\";\nexport {\n  Pipes,\n  PipesLoading,\n  type PipesAuthMethod,\n  type PipesConnection,\n  type PipesConnectionFilter,\n  type PipesFilter,\n  type PipesFilterCriteria,\n  type PipesProps,\n} from \"./pipes.client.js\";\nexport type { DataIntegration, SharedDataConnection } from \"./api/endpoint.js\";\nexport {\n  PipesAdmin,\n  PipesAdminLoading,\n  type PipesAdminProps,\n} from \"./pipes-admin.client.js\";\nexport {\n  DirectorySync,\n  DirectorySyncLoading,\n  type DirectorySyncProps,\n} from \"./directory-sync.client.js\";\nexport { IntlContext as internal_IntlContext } from \"./lib/i18n/intl-context.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACsC;AAAA,OAEjC;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAOK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAwB,mBAA4B;","names":[]}

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

@@ -1,4 +1,4 @@
-import { DataIntegration } from '../api/endpoint.js';
+import { DataIntegration, SharedDataConnection } from '../api/endpoint.js';
 import { WidgetRootDomProps } from './utils.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
@@ -17,15 +17,50 @@ import '@radix-ui/themes/components/select';
 
 interface PipesProps extends WidgetRootDomProps {
     integrations: DataIntegration[];
+    /**
+     * Whether the endpoint returned any connections before the host's `filter`
+     * ran, which is what tells an organization with nothing enabled yet apart
+     * from a filter that matched nothing. Defaults to whatever survived, the
+     * reading for an unfiltered list.
+     */
+    hasUnfilteredIntegrations?: boolean;
+}
+interface PipesSectionsProps extends PipesProps {
+    /**
+     * Organization-owned connections, as returned by the shared-connections
+     * endpoint. Empty both when the organization shares nothing and when the
+     * request failed, since neither is something a member can act on.
+     */
+    sharedConnections: SharedDataConnection[];
+    /**
+     * {@link PipesProps.hasUnfilteredIntegrations} for the shared section. The
+     * section is dropped entirely unless the organization shares something, so
+     * this only ever decides whether a filtered-out lane says so.
+     */
+    hasUnfilteredSharedConnections?: boolean;
+    /** Renders the shared section as skeleton rows while it resolves. */
+    isSharedLoading?: boolean;
+    /** Names the owning organization in the shared section's description. */
+    organizationName?: string;
 }
 interface PipesLoadingProps extends WidgetRootDomProps {
     count: number;
 }
 declare const PipesLoading: React.FC<PipesLoadingProps>;
 declare const Pipes: React.FC<PipesProps>;
+/**
+ * The sectioned member experience: the connections the organization shares,
+ * then the member's own. The two lanes come from different endpoints and are
+ * never merged — the same provider can legitimately appear in both, once as an
+ * organization-owned connection and once as the member's own account.
+ *
+ * The shared section is omitted entirely when the organization shares nothing
+ * (or the request failed), leaving the member's own section usable on its own.
+ */
+declare const PipesSections: React.FC<PipesSectionsProps>;
 interface PipesErrorProps extends WidgetRootDomProps {
     error: unknown;
 }
 declare const PipesError: React.FC<PipesErrorProps>;
 
-export { Pipes, PipesError, type PipesErrorProps, PipesLoading, type PipesLoadingProps, type PipesProps };
+export { Pipes, PipesError, type PipesErrorProps, PipesLoading, type PipesLoadingProps, type PipesProps, PipesSections, type PipesSectionsProps };