@workos-inc/widgets 1.1.5 → 1.2.0

package/dist/cjs/lib/organization-switcher.d.ts

@@ -7,11 +7,20 @@ export type OrganizationSwitcherPassthroughProps = {
     variant?: OrganizationSwitcherVariant;
     organizationLabel?: string | null;
     children?: React.ReactNode;
+    /**
+     * Choose where to truncate organization name in the trigger and dropdown
+     * items.
+     *
+     * - `right`: Truncate the right side of the organization name
+     * - `middle`: Truncate the middle of the organization name, trying to keep
+     *  words whole
+     */
+    truncateBehavior?: "right" | "middle";
 };
 export interface OrganizationSwitcherProps extends OrganizationSwitcherPassthroughProps {
     organizations: OrganizationInfo[];
 }
-export declare const OrganizationSwitcher: ({ organizations, switchToOrganization, variant, organizationLabel, children, }: OrganizationSwitcherProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const OrganizationSwitcher: ({ organizations, switchToOrganization, variant, organizationLabel, truncateBehavior, children, }: OrganizationSwitcherProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare function OrganizationSwitcherLoading({ variant, organizations, }: {
     variant?: OrganizationSwitcherVariant;
     organizations: OrganizationInfo[];

package/dist/cjs/lib/organization-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-switcher.d.ts","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE9E,KAAK,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,MAAM,MAAM,oCAAoC,GAAG;IACjD,oBAAoB,EAAE,CAAC,EACrB,cAAc,GACf,EAAE;QACD,cAAc,EAAE,MAAM,CAAC;KACxB,KAAK,IAAI,CAAC;IAEX,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,oCAAoC;IAC5C,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,mFAM9B,yBAAyB,mDAiF3B,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,OAAmB,EACnB,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC,2CAgBA;AAED,UAAU,8BAA8B;IACtC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CAC5C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,8BAA8B,QAG1E"}
+{"version":3,"file":"organization-switcher.d.ts","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE9E,KAAK,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,MAAM,MAAM,oCAAoC,GAAG;IACjD,oBAAoB,EAAE,CAAC,EACrB,cAAc,GACf,EAAE;QACD,cAAc,EAAE,MAAM,CAAC;KACxB,KAAK,IAAI,CAAC;IAEX,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,oCAAoC;IAC5C,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,qGAO9B,yBAAyB,mDA8F3B,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,OAAmB,EACnB,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC,2CAgBA;AAED,UAAU,8BAA8B;IACtC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CAC5C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,8BAA8B,QAG1E"}

package/dist/cjs/lib/organization-switcher.js

@@ -7,17 +7,17 @@ exports.OrganizationSwitcherError = OrganizationSwitcherError;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_icons_1 = require("@radix-ui/react-icons");
 const themes_1 = require("@radix-ui/themes");
-const OrganizationSwitcher = ({ organizations, switchToOrganization, variant = "outline", organizationLabel = "Organizations", children, }) => {
+const OrganizationSwitcher = ({ organizations, switchToOrganization, variant = "outline", organizationLabel = "Organizations", truncateBehavior = "right", children, }) => {
     const currentOrganization = organizations.find((organization) => organization.current);
     // Possible if the user has no organizations - we should figure out what to do in this case
     if (!currentOrganization) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Root, { children: [(0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Trigger, { children: (0, jsx_runtime_1.jsx)(themes_1.Button, { color: "gray", variant: variant, className: "OrganizationSwitcherTrigger", children: (0, jsx_runtime_1.jsxs)(themes_1.Flex, { align: "center", justify: "between", gap: "2", flexGrow: "1", children: [(0, jsx_runtime_1.jsx)(themes_1.Text, { children: currentOrganization.name }), (0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.TriggerIcon, {})] }) }) }), (0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Group, { children: [organizationLabel ? ((0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Label, { children: (0, jsx_runtime_1.jsx)(themes_1.Text, { children: organizationLabel }) })) : null, organizations.map((organization) => ((0, jsx_runtime_1.jsx)(themes_1.Flex, { asChild: true, pr: "2", maxWidth: "280px", minWidth: "180px", children: (0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Item, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Root, { children: [(0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Trigger, { children: (0, jsx_runtime_1.jsx)(themes_1.Button, { color: "gray", variant: variant, className: "OrganizationSwitcherTrigger", children: (0, jsx_runtime_1.jsxs)(themes_1.Flex, { align: "center", justify: "between", gap: "2", flexGrow: "1", overflow: "hidden", minWidth: "0", children: [(0, jsx_runtime_1.jsx)(TruncatedOrganizationName, { organizationName: currentOrganization.name, truncateBehavior: truncateBehavior }), (0, jsx_runtime_1.jsx)(themes_1.Flex, { asChild: true, flexShrink: "0", children: (0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.TriggerIcon, {}) })] }) }) }), (0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsxs)(themes_1.DropdownMenu.Group, { children: [organizationLabel ? ((0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Label, { children: (0, jsx_runtime_1.jsx)(themes_1.Text, { children: organizationLabel }) })) : null, organizations.map((organization) => ((0, jsx_runtime_1.jsx)(themes_1.Flex, { asChild: true, pr: "2", maxWidth: "280px", minWidth: "180px", children: (0, jsx_runtime_1.jsx)(themes_1.DropdownMenu.Item, { onClick: () => {
                                         if (organization.id !== currentOrganization.id) {
                                             switchToOrganization({ organizationId: organization.id });
                                         }
-                                    }, children: (0, jsx_runtime_1.jsxs)(themes_1.Flex, { justify: "between", align: "center", gap: "4", flexGrow: "1", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(themes_1.Text, { truncate: true, children: [organization.name, organization.current && ((0, jsx_runtime_1.jsx)(themes_1.VisuallyHidden, { children: " (current)" }))] }), (0, jsx_runtime_1.jsx)(themes_1.Flex, { "aria-hidden": true, align: "center", justify: "center", flexShrink: "0", children: organization.current ? ((0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: "18px", height: "18px" })) : (
+                                    }, children: (0, jsx_runtime_1.jsxs)(themes_1.Flex, { justify: "between", align: "center", gap: "4", flexGrow: "1", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(TruncatedOrganizationName, { organizationName: organization.name, truncateBehavior: truncateBehavior }), organization.current && ((0, jsx_runtime_1.jsx)(themes_1.VisuallyHidden, { children: " (current)" })), (0, jsx_runtime_1.jsx)(themes_1.Flex, { "aria-hidden": true, align: "center", justify: "center", flexShrink: "0", children: organization.current ? ((0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: "18px", height: "18px" })) : (
                                                 // make the extra space for
                                                 (0, jsx_runtime_1.jsx)(themes_1.Box, { width: "18px", height: "18px" })) })] }) }) }, organization.id)))] }), children] })] }));
 };
@@ -32,4 +32,32 @@ function OrganizationSwitcherError(_) {
     // TODO: consider other error state options
     return null;
 }
+const MAX_TRUNCATED_SUFFIX_LENGTH = 10;
+const MIN_TRUNCATED_SUFFIX_LENGTH = 3;
+const WHITE_SPACE_REGEX = /\s/;
+const getSplitPosition = (organizationName) => {
+    if (organizationName.length <= MAX_TRUNCATED_SUFFIX_LENGTH) {
+        return organizationName.length;
+    }
+    for (let i = organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH; i < organizationName.length - MIN_TRUNCATED_SUFFIX_LENGTH; i++) {
+        if (WHITE_SPACE_REGEX.test(organizationName[i - 1])) {
+            return i;
+        }
+    }
+    return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;
+};
+const splitOrganizationName = (organizationName) => {
+    const splitPosition = getSplitPosition(organizationName);
+    return [
+        organizationName.slice(0, splitPosition),
+        organizationName.slice(splitPosition),
+    ];
+};
+const TruncatedOrganizationName = ({ organizationName, truncateBehavior, }) => {
+    if (truncateBehavior === "right") {
+        return (0, jsx_runtime_1.jsx)(themes_1.Text, { truncate: true, children: organizationName });
+    }
+    const [organizationNameLeft, organizationNameRight] = splitOrganizationName(organizationName);
+    return ((0, jsx_runtime_1.jsxs)(themes_1.Flex, { overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(themes_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(themes_1.Text, { children: organizationName }) }), (0, jsx_runtime_1.jsx)(themes_1.Text, { "aria-hidden": true, truncate: true, style: { whiteSpace: "pre" }, children: organizationNameLeft }), (0, jsx_runtime_1.jsx)(themes_1.Text, { "aria-hidden": true, children: organizationNameRight })] }));
+};
 //# sourceMappingURL=organization-switcher.js.map

package/dist/cjs/lib/organization-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/workos-widgets.client.d.ts

@@ -1,4 +1,5 @@
 import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
+import { QueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import type { Elements } from "./lib/elements";
 export interface WorkOsWidgetsProps {
@@ -12,6 +13,11 @@ export interface WorkOsWidgetsProps {
     apiHostname?: string;
     port?: number | null;
     https?: boolean;
+    /**
+     * Optional query client for users who are already using Tanstack Query. If
+     * not provided, a new query client will be created and mounted internally.
+     */
+    queryClient?: QueryClient;
 }
 export declare const WorkOsWidgets: React.FC<WorkOsWidgetsProps>;
 //# sourceMappingURL=workos-widgets.client.d.ts.map

package/dist/cjs/workos-widgets.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workos-widgets.client.d.ts","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;QAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}
+{"version":3,"file":"workos-widgets.client.d.ts","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EACL,WAAW,EAGZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;QAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}

package/dist/cjs/workos-widgets.client.js

@@ -36,8 +36,8 @@ const React = __importStar(require("react"));
 const utils_1 = require("./lib/utils");
 const config_1 = require("./lib/api/config");
 const widgets_context_1 = require("./lib/widgets-context");
-const queryClient = new react_query_1.QueryClient();
-const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radixThemesProps } = {}, style = {}, children, apiHostname = config_1.DEFAULT_API_HOSTNAME, port = null, https = true, }) => {
+let queryClientInternal;
+const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radixThemesProps } = {}, style = {}, children, apiHostname = config_1.DEFAULT_API_HOSTNAME, port = null, https = true, queryClient, }) => {
     const customStyle = (fontFamily
         ? {
             "--default-font-family": fontFamily,
@@ -54,7 +54,27 @@ const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radix
             return `https://${config_1.DEFAULT_API_HOSTNAME}`;
         }
     }, [apiHostname, https, port]);
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(themes_1.Theme, { ...radixThemesProps, style: customStyle, className: (0, clsx_1.default)((0, utils_1.namespaceClassNames)("root"), className), children: (0, jsx_runtime_1.jsx)(widgets_context_1.WidgetsContext.Provider, { value: { elements, apiBaseUrl }, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(QueryClientProviderImpl, { client: queryClient, children: (0, jsx_runtime_1.jsx)(themes_1.Theme, { ...radixThemesProps, style: customStyle, className: (0, clsx_1.default)((0, utils_1.namespaceClassNames)("root"), className), children: (0, jsx_runtime_1.jsx)(widgets_context_1.WidgetsContext.Provider, { value: { elements, apiBaseUrl }, children: children }) }) }));
 };
 exports.WorkOsWidgets = WorkOsWidgets;
+const QueryClientProviderImpl = ({ client: providedClient, children, }) => {
+    let queryClient;
+    if (providedClient) {
+        queryClient = providedClient;
+    }
+    else if (queryClientInternal) {
+        queryClient = queryClientInternal;
+    }
+    else {
+        queryClientInternal = new react_query_1.QueryClient();
+        queryClient = queryClientInternal;
+    }
+    const client = (0, react_query_1.useQueryClient)(queryClient);
+    if (Object.is(client, providedClient)) {
+        // No need for a new context provider if the user provided the client to
+        // their own provider, which has already mounted the client.
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    return (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: client, children: children });
+};
 //# sourceMappingURL=workos-widgets.client.js.map

package/dist/cjs/workos-widgets.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"workos-widgets.client.js","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,6CAAwD;AAExD,uDAAyE;AACzE,gDAAsB;AACtB,6CAA+B;AAC/B,uCAAkD;AAClD,6CAAwD;AAExD,2DAAuD;AAEvD,MAAM,WAAW,GAAG,IAAI,yBAAW,EAAE,CAAC;AAe/B,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,EAAE,EACb,SAAS,EACT,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAC/C,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,WAAW,GAAG,6BAAoB,EAClC,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,IAAI,GACb,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAClB,UAAU;QACR,CAAC,CAAC;YACE,uBAAuB,EAAE,UAAU;YACnC,GAAG,KAAK;SACT;QACH,CAAC,CAAC,KAAK,CACa,CAAC;IAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,GAAG,EACH,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;YACF,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,KAAK,CACX,8HAA8H,CAC/H,CAAC;YACF,OAAO,WAAW,6BAAoB,EAAE,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,uBAAC,iCAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,uBAAC,cAAW,OACN,gBAAgB,EACpB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,IAAA,cAAE,EAAC,IAAA,2BAAmB,EAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAErD,uBAAC,gCAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACrD,QAAQ,GACe,GACd,GACM,CACvB,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,aAAa,iBA+CxB"}
+{"version":3,"file":"workos-widgets.client.js","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,6CAAwD;AAExD,uDAI+B;AAC/B,gDAAsB;AACtB,6CAA+B;AAC/B,uCAAkD;AAClD,6CAAwD;AAExD,2DAAuD;AAEvD,IAAI,mBAA4C,CAAC;AAoB1C,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,EAAE,EACb,SAAS,EACT,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAC/C,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,WAAW,GAAG,6BAAoB,EAClC,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,IAAI,EACZ,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAClB,UAAU;QACR,CAAC,CAAC;YACE,uBAAuB,EAAE,UAAU;YACnC,GAAG,KAAK;SACT;QACH,CAAC,CAAC,KAAK,CACa,CAAC;IAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,GAAG,EACH,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;YACF,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,KAAK,CACX,8HAA8H,CAC/H,CAAC;YACF,OAAO,WAAW,6BAAoB,EAAE,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,uBAAC,uBAAuB,IAAC,MAAM,EAAE,WAAW,YAC1C,uBAAC,cAAW,OACN,gBAAgB,EACpB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,IAAA,cAAE,EAAC,IAAA,2BAAmB,EAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAErD,uBAAC,gCAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACrD,QAAQ,GACe,GACd,GACU,CAC3B,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,aAAa,iBAgDxB;AAEF,MAAM,uBAAuB,GAAG,CAAC,EAC/B,MAAM,EAAE,cAAc,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,IAAI,WAAwB,CAAC;IAC7B,IAAI,cAAc,EAAE,CAAC;QACnB,WAAW,GAAG,cAAc,CAAC;IAC/B,CAAC;SAAM,IAAI,mBAAmB,EAAE,CAAC;QAC/B,WAAW,GAAG,mBAAmB,CAAC;IACpC,CAAC;SAAM,CAAC;QACN,mBAAmB,GAAG,IAAI,yBAAW,EAAE,CAAC;QACxC,WAAW,GAAG,mBAAmB,CAAC;IACpC,CAAC;IAED,MAAM,MAAM,GAAG,IAAA,4BAAc,EAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,CAAC;QACtC,wEAAwE;QACxE,4DAA4D;QAC5D,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACzB,CAAC;IAED,OAAO,uBAAC,iCAAmB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAuB,CAAC;AAC/E,CAAC,CAAC"}

package/dist/esm/lib/organization-switcher.d.ts

@@ -7,11 +7,20 @@ export type OrganizationSwitcherPassthroughProps = {
     variant?: OrganizationSwitcherVariant;
     organizationLabel?: string | null;
     children?: React.ReactNode;
+    /**
+     * Choose where to truncate organization name in the trigger and dropdown
+     * items.
+     *
+     * - `right`: Truncate the right side of the organization name
+     * - `middle`: Truncate the middle of the organization name, trying to keep
+     *  words whole
+     */
+    truncateBehavior?: "right" | "middle";
 };
 export interface OrganizationSwitcherProps extends OrganizationSwitcherPassthroughProps {
     organizations: OrganizationInfo[];
 }
-export declare const OrganizationSwitcher: ({ organizations, switchToOrganization, variant, organizationLabel, children, }: OrganizationSwitcherProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const OrganizationSwitcher: ({ organizations, switchToOrganization, variant, organizationLabel, truncateBehavior, children, }: OrganizationSwitcherProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare function OrganizationSwitcherLoading({ variant, organizations, }: {
     variant?: OrganizationSwitcherVariant;
     organizations: OrganizationInfo[];

package/dist/esm/lib/organization-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-switcher.d.ts","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE9E,KAAK,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,MAAM,MAAM,oCAAoC,GAAG;IACjD,oBAAoB,EAAE,CAAC,EACrB,cAAc,GACf,EAAE;QACD,cAAc,EAAE,MAAM,CAAC;KACxB,KAAK,IAAI,CAAC;IAEX,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,oCAAoC;IAC5C,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,mFAM9B,yBAAyB,mDAiF3B,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,OAAmB,EACnB,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC,2CAgBA;AAED,UAAU,8BAA8B;IACtC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CAC5C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,8BAA8B,QAG1E"}
+{"version":3,"file":"organization-switcher.d.ts","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE9E,KAAK,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,MAAM,MAAM,oCAAoC,GAAG;IACjD,oBAAoB,EAAE,CAAC,EACrB,cAAc,GACf,EAAE;QACD,cAAc,EAAE,MAAM,CAAC;KACxB,KAAK,IAAI,CAAC;IAEX,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,oCAAoC;IAC5C,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,qGAO9B,yBAAyB,mDA8F3B,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,OAAmB,EACnB,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC,2CAgBA;AAED,UAAU,8BAA8B;IACtC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CAC5C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,8BAA8B,QAG1E"}

package/dist/esm/lib/organization-switcher.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "@radix-ui/react-icons";
 import { Box, Button, ChevronDownIcon, DropdownMenu, Flex, Skeleton, Text, VisuallyHidden, } from "@radix-ui/themes";
-export const OrganizationSwitcher = ({ organizations, switchToOrganization, variant = "outline", organizationLabel = "Organizations", children, }) => {
+export const OrganizationSwitcher = ({ organizations, switchToOrganization, variant = "outline", organizationLabel = "Organizations", truncateBehavior = "right", children, }) => {
     const currentOrganization = organizations.find((organization) => organization.current);
     // Possible if the user has no organizations - we should figure out what to do in this case
     if (!currentOrganization) {
         return null;
     }
-    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { children: _jsx(Button, { color: "gray", variant: variant, className: "OrganizationSwitcherTrigger", children: _jsxs(Flex, { align: "center", justify: "between", gap: "2", flexGrow: "1", children: [_jsx(Text, { children: currentOrganization.name }), _jsx(DropdownMenu.TriggerIcon, {})] }) }) }), _jsxs(DropdownMenu.Content, { children: [_jsxs(DropdownMenu.Group, { children: [organizationLabel ? (_jsx(DropdownMenu.Label, { children: _jsx(Text, { children: organizationLabel }) })) : null, organizations.map((organization) => (_jsx(Flex, { asChild: true, pr: "2", maxWidth: "280px", minWidth: "180px", children: _jsx(DropdownMenu.Item, { onClick: () => {
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { children: _jsx(Button, { color: "gray", variant: variant, className: "OrganizationSwitcherTrigger", children: _jsxs(Flex, { align: "center", justify: "between", gap: "2", flexGrow: "1", overflow: "hidden", minWidth: "0", children: [_jsx(TruncatedOrganizationName, { organizationName: currentOrganization.name, truncateBehavior: truncateBehavior }), _jsx(Flex, { asChild: true, flexShrink: "0", children: _jsx(DropdownMenu.TriggerIcon, {}) })] }) }) }), _jsxs(DropdownMenu.Content, { children: [_jsxs(DropdownMenu.Group, { children: [organizationLabel ? (_jsx(DropdownMenu.Label, { children: _jsx(Text, { children: organizationLabel }) })) : null, organizations.map((organization) => (_jsx(Flex, { asChild: true, pr: "2", maxWidth: "280px", minWidth: "180px", children: _jsx(DropdownMenu.Item, { onClick: () => {
                                         if (organization.id !== currentOrganization.id) {
                                             switchToOrganization({ organizationId: organization.id });
                                         }
-                                    }, children: _jsxs(Flex, { justify: "between", align: "center", gap: "4", flexGrow: "1", overflow: "hidden", children: [_jsxs(Text, { truncate: true, children: [organization.name, organization.current && (_jsx(VisuallyHidden, { children: " (current)" }))] }), _jsx(Flex, { "aria-hidden": true, align: "center", justify: "center", flexShrink: "0", children: organization.current ? (_jsx(CheckIcon, { width: "18px", height: "18px" })) : (
+                                    }, children: _jsxs(Flex, { justify: "between", align: "center", gap: "4", flexGrow: "1", overflow: "hidden", children: [_jsx(TruncatedOrganizationName, { organizationName: organization.name, truncateBehavior: truncateBehavior }), organization.current && (_jsx(VisuallyHidden, { children: " (current)" })), _jsx(Flex, { "aria-hidden": true, align: "center", justify: "center", flexShrink: "0", children: organization.current ? (_jsx(CheckIcon, { width: "18px", height: "18px" })) : (
                                                 // make the extra space for
                                                 _jsx(Box, { width: "18px", height: "18px" })) })] }) }) }, organization.id)))] }), children] })] }));
 };
@@ -26,4 +26,32 @@ export function OrganizationSwitcherError(_) {
     // TODO: consider other error state options
     return null;
 }
+const MAX_TRUNCATED_SUFFIX_LENGTH = 10;
+const MIN_TRUNCATED_SUFFIX_LENGTH = 3;
+const WHITE_SPACE_REGEX = /\s/;
+const getSplitPosition = (organizationName) => {
+    if (organizationName.length <= MAX_TRUNCATED_SUFFIX_LENGTH) {
+        return organizationName.length;
+    }
+    for (let i = organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH; i < organizationName.length - MIN_TRUNCATED_SUFFIX_LENGTH; i++) {
+        if (WHITE_SPACE_REGEX.test(organizationName[i - 1])) {
+            return i;
+        }
+    }
+    return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;
+};
+const splitOrganizationName = (organizationName) => {
+    const splitPosition = getSplitPosition(organizationName);
+    return [
+        organizationName.slice(0, splitPosition),
+        organizationName.slice(splitPosition),
+    ];
+};
+const TruncatedOrganizationName = ({ organizationName, truncateBehavior, }) => {
+    if (truncateBehavior === "right") {
+        return _jsx(Text, { truncate: true, children: organizationName });
+    }
+    const [organizationNameLeft, organizationNameRight] = splitOrganizationName(organizationName);
+    return (_jsxs(Flex, { overflow: "hidden", children: [_jsx(VisuallyHidden, { children: _jsx(Text, { children: organizationName }) }), _jsx(Text, { "aria-hidden": true, truncate: true, style: { whiteSpace: "pre" }, children: organizationNameLeft }), _jsx(Text, { "aria-hidden": true, children: organizationNameRight })] }));
+};
 //# sourceMappingURL=organization-switcher.js.map

package/dist/esm/lib/organization-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}

package/dist/esm/workos-widgets.client.d.ts

@@ -1,4 +1,5 @@
 import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
+import { QueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import type { Elements } from "./lib/elements";
 export interface WorkOsWidgetsProps {
@@ -12,6 +13,11 @@ export interface WorkOsWidgetsProps {
     apiHostname?: string;
     port?: number | null;
     https?: boolean;
+    /**
+     * Optional query client for users who are already using Tanstack Query. If
+     * not provided, a new query client will be created and mounted internally.
+     */
+    queryClient?: QueryClient;
 }
 export declare const WorkOsWidgets: React.FC<WorkOsWidgetsProps>;
 //# sourceMappingURL=workos-widgets.client.d.ts.map

package/dist/esm/workos-widgets.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workos-widgets.client.d.ts","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;QAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}
+{"version":3,"file":"workos-widgets.client.d.ts","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EACL,WAAW,EAGZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;QAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}

package/dist/esm/workos-widgets.client.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Theme as RadixThemes } from "@radix-ui/themes";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQueryClient, } from "@tanstack/react-query";
 import cx from "clsx";
 import * as React from "react";
 import { namespaceClassNames } from "./lib/utils";
 import { DEFAULT_API_HOSTNAME } from "./lib/api/config";
 import { WidgetsContext } from "./lib/widgets-context";
-const queryClient = new QueryClient();
-export const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radixThemesProps } = {}, style = {}, children, apiHostname = DEFAULT_API_HOSTNAME, port = null, https = true, }) => {
+let queryClientInternal;
+export const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radixThemesProps } = {}, style = {}, children, apiHostname = DEFAULT_API_HOSTNAME, port = null, https = true, queryClient, }) => {
     const customStyle = (fontFamily
         ? {
             "--default-font-family": fontFamily,
@@ -25,6 +25,26 @@ export const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, .
             return `https://${DEFAULT_API_HOSTNAME}`;
         }
     }, [apiHostname, https, port]);
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(RadixThemes, { ...radixThemesProps, style: customStyle, className: cx(namespaceClassNames("root"), className), children: _jsx(WidgetsContext.Provider, { value: { elements, apiBaseUrl }, children: children }) }) }));
+    return (_jsx(QueryClientProviderImpl, { client: queryClient, children: _jsx(RadixThemes, { ...radixThemesProps, style: customStyle, className: cx(namespaceClassNames("root"), className), children: _jsx(WidgetsContext.Provider, { value: { elements, apiBaseUrl }, children: children }) }) }));
+};
+const QueryClientProviderImpl = ({ client: providedClient, children, }) => {
+    let queryClient;
+    if (providedClient) {
+        queryClient = providedClient;
+    }
+    else if (queryClientInternal) {
+        queryClient = queryClientInternal;
+    }
+    else {
+        queryClientInternal = new QueryClient();
+        queryClient = queryClientInternal;
+    }
+    const client = useQueryClient(queryClient);
+    if (Object.is(client, providedClient)) {
+        // No need for a new context provider if the user provided the client to
+        // their own provider, which has already mounted the client.
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(QueryClientProvider, { client: client, children: children });
 };
 //# sourceMappingURL=workos-widgets.client.js.map

package/dist/esm/workos-widgets.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"workos-widgets.client.js","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;AAetC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,EAAE,EACb,SAAS,EACT,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAC/C,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,WAAW,GAAG,oBAAoB,EAClC,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,IAAI,GACb,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAClB,UAAU;QACR,CAAC,CAAC;YACE,uBAAuB,EAAE,UAAU;YACnC,GAAG,KAAK;SACT;QACH,CAAC,CAAC,KAAK,CACa,CAAC;IAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,GAAG,EACH,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;YACF,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,KAAK,CACX,8HAA8H,CAC/H,CAAC;YACF,OAAO,WAAW,oBAAoB,EAAE,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,WAAW,OACN,gBAAgB,EACpB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAErD,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACrD,QAAQ,GACe,GACd,GACM,CACvB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"workos-widgets.client.js","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/widgets",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -24,14 +24,10 @@
         "default": "./dist/cjs/*.client.js"
       }
     },
-    "./*.css": {
-      "import": "./src/*.css",
-      "require": "./src/*.css"
-    }
+    "./*.css": "./dist/css/*.css"
   },
   "files": [
     "dist",
-    "src",
     "CHANGELOG.md",
     "LICENSE",
     "README.md"
@@ -62,6 +58,7 @@
     "@types/node": "^20.16.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "fast-glob": "^3.3.3",
     "orval": "^7.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -76,9 +73,11 @@
     }
   },
   "scripts": {
-    "build": "npm run clean:dist && tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json",
-    "build:ci": "tsc --noEmit",
-    "clean": "rm -rf .turbo && rm -rf node_modules && npm run clean:dist",
+    "build": "pnpm build:js && pnpm build:css",
+    "build:js": "pnpm clean:dist && tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json",
+    "build:css": "node ./scripts/build-css.js",
+    "build:ci": "pnpm build:css && tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && pnpm clean:dist",
     "clean:dist": "rm -rf dist",
     "generate-api": "orval --config ./orval.config.ts"
   },

package/src/api/api-provider.tsx

@@ -1,158 +0,0 @@
-import * as React from "react";
-
-export type WidgetType =
-  | "user-management"
-  | "organization-switcher"
-  | "user-sessions"
-  | "user-security"
-  | "user-profile";
-
-export type AuthToken = string | (() => Promise<string>);
-
-interface ElevatedAccess {
-  token: string;
-  expiresAt: string;
-}
-
-interface ApiConfig {
-  authToken: Promise<string> | string;
-  authTokenQueryKey: string;
-  baseUrl: string;
-  widgetType: WidgetType;
-  elevatedAccess?: ElevatedAccess;
-  setElevatedAccess: (elevatedAccess?: ElevatedAccess) => void;
-}
-
-const ApiContext = React.createContext<ApiConfig | undefined>(undefined);
-
-interface ApiProviderProps {
-  authToken: AuthToken;
-  baseUrl: string;
-  children: React.ReactNode;
-  widgetType: WidgetType;
-}
-
-export const ApiProvider = ({
-  authToken,
-  baseUrl,
-  children,
-  widgetType,
-}: ApiProviderProps) => {
-  const authTokenPromiseOrString =
-    typeof authToken === "string" ? authToken : authToken();
-  const [elevatedAccess, setElevatedAccess] = React.useState<ElevatedAccess>();
-  const elevatedAccessTimeout = React.useRef<NodeJS.Timeout>();
-
-  // This effect manages the expiration of elevated access tokens
-  // When an elevated access token is present, it checks every 30 seconds if the token has expired
-  // If the token has expired (current time > expiration time), it clears the elevated access
-  React.useEffect(() => {
-    if (elevatedAccessTimeout.current) {
-      clearInterval(elevatedAccessTimeout.current);
-    }
-
-    if (elevatedAccess) {
-      elevatedAccessTimeout.current = setInterval(() => {
-        const now = new Date();
-        const expiresAtDate = new Date(elevatedAccess.expiresAt);
-
-        //  Reset the elevated access if it has expired
-        if (now > expiresAtDate) {
-          setElevatedAccess(undefined);
-        }
-      }, 30_000); // every 30 seconds
-    }
-
-    return () => {
-      if (elevatedAccessTimeout.current) {
-        clearInterval(elevatedAccessTimeout.current);
-      }
-    };
-  }, [elevatedAccess]);
-
-  const value = React.useMemo(
-    () => ({
-      authToken: authTokenPromiseOrString,
-      authTokenQueryKey: getAuthTokenQueryKey(authTokenPromiseOrString),
-      baseUrl,
-      elevatedAccess,
-      setElevatedAccess,
-      widgetType,
-    }),
-    [
-      authTokenPromiseOrString,
-      baseUrl,
-      elevatedAccess,
-      setElevatedAccess,
-      widgetType,
-    ],
-  );
-
-  return <ApiContext.Provider value={value}>{children}</ApiContext.Provider>;
-};
-
-export const useApi = () => {
-  const context = React.useContext(ApiContext);
-
-  if (context === undefined) {
-    throw new Error("useApi must be used within an ApiProvider");
-  }
-
-  return context;
-};
-
-export const useElevatedAccessToken = () => {
-  const { elevatedAccess, setElevatedAccess } = useApi();
-
-  return { elevatedAccess, setElevatedAccess };
-};
-
-// Map promises to a UUID that they can be identified by
-const PromiseKey = new WeakMap<Promise<string>, string>();
-/*
- *
- * @param getAccessToken - Async function that returns a promise that resolves to a string
- * @returns a resolved string or null from the access token promise
- */
-function getAuthTokenQueryKey(
-  authTokenPromiseOrString: Promise<string> | string,
-): string {
-  // Need to go by equality of the promise to avoid scenarios where
-  // 1. The promise is the same, but the function changes
-  // 2. The function is the same, but the promise is different ⚠️
-  //
-  // This does have the unfortunate side effect where if the function result
-  // isn't memoized somehow, then it will invalidate the query on every render.
-  // This doesn't occur with the current use case of getAccessToken from
-  // useAuth, but could in a custom implementation.
-  //
-  // Other things I explored:
-  // 1. Removing promise api, and force user to resolve the promise
-  //    themselves. The user can already do this with the string API, so
-  //    it's not necessary, and they could run into issues 1, or 2 if
-  //    implemented wrong.
-  // 2. Memoizing the function - this results in issue 2, where the function
-  //    is static, but the promise changes. I believe this actually is the
-  //    case with useAuth since it only sets the client once on initialization,
-  //    and binds the function to the client after that promise resolves.
-
-  if (typeof authTokenPromiseOrString === "string") {
-    return authTokenPromiseOrString;
-  }
-
-  const authTokenPromise = authTokenPromiseOrString;
-
-  // Cannot memoize on the function because it could remain the same while
-  // returning a different promise (and useAuth behaves this way).
-
-  const promiseKey = PromiseKey.get(authTokenPromise);
-
-  // Side effect, but we we're using a weak map, so it should be pretty safe
-  if (!promiseKey) {
-    const newPromiseKey = `${Math.random()}`;
-    PromiseKey.set(authTokenPromise, newPromiseKey);
-    return newPromiseKey;
-  } else {
-    return promiseKey;
-  }
-}

package/src/api/constants.ts

@@ -1 +0,0 @@
-export const WIDGETS_API_VERSION = "1";