@workos-inc/widgets 0.0.0-pre.3 → 0.0.0-pre.4

package/src/lib/elements.tsx

@@ -2,20 +2,22 @@
 
 import * as React from "react";
 import {
-  Button as RadixButton,
-  DropdownMenu as RadixDropdownMenu,
+  AlertDialog as RadixAlertDialog,
   Avatar as RadixAvatar,
   AvatarProps as RadixAvatarProps,
-  AlertDialog as RadixAlertDialog,
-  Dialog as RadixDialog,
   Badge as RadixBadge,
+  Button as RadixButton,
+  Dialog as RadixDialog,
+  DropdownMenu as RadixDropdownMenu,
   IconButton as RadixIconButton,
   Select as RadixSelect,
-  TextField as RadixTextField,
+  Skeleton as RadixSkeleton,
   Text,
+  TextField as RadixTextField,
   type BadgeProps,
   type ButtonProps,
   type IconButtonProps,
+  type SkeletonProps,
   type TextProps,
 } from "@radix-ui/themes";
 import type {
@@ -30,10 +32,12 @@ import type {
   textPropDefs,
   textFieldRootPropDefs,
   selectTriggerPropDefs,
+  skeletonPropDefs,
 } from "@radix-ui/themes/props";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import cx from "clsx";
 import { useElement } from "./widgets-context";
-import { cx, namespaceClassName } from "./utils";
+import { namespaceClassNames } from "./utils";
 import { useLayoutEffect } from "./use-layout-effect";
 
 export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -42,7 +46,10 @@ export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <RadixButton
         ref={ref}
-        className={cx("button", "button--primary", className)}
+        className={cx(
+          namespaceClassNames("button", "button--primary"),
+          className,
+        )}
         variant="solid"
         {...props}
         {...element}
@@ -57,7 +64,10 @@ export const SecondaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <RadixButton
         ref={ref}
-        className={cx(["button", "button--secondary"], className)}
+        className={cx(
+          namespaceClassNames("button", "button--secondary"),
+          className,
+        )}
         variant="surface"
         color="gray"
         {...props}
@@ -75,7 +85,10 @@ export const DestructiveButton = React.forwardRef<
   return (
     <RadixButton
       ref={ref}
-      className={cx(["button", "button--destructive"], className)}
+      className={cx(
+        namespaceClassNames("button", "button--destructive"),
+        className,
+      )}
       variant="solid"
       color="red"
       {...props}
@@ -90,7 +103,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     return (
       <RadixIconButton
         ref={ref}
-        className={cx(["button", "icon-button"], className)}
+        className={cx(namespaceClassNames("button", "icon-button"), className)}
         variant="ghost"
         color="gray"
         {...props}
@@ -100,6 +113,20 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
+  function Skeleton({ className, ...props }, ref) {
+    const element = useElement("skeleton");
+    return (
+      <RadixSkeleton
+        ref={ref}
+        className={cx(namespaceClassNames("skeleton"), className)}
+        {...props}
+        {...element}
+      />
+    );
+  },
+);
+
 export const SelectTrigger = React.forwardRef<
   HTMLButtonElement,
   RadixSelect.TriggerProps
@@ -108,7 +135,7 @@ export const SelectTrigger = React.forwardRef<
   return (
     <RadixSelect.Trigger
       ref={ref}
-      className={cx("select", className)}
+      className={cx(namespaceClassNames("select"), className)}
       {...props}
       {...element}
     />
@@ -123,7 +150,10 @@ export const SelectContent = React.forwardRef<
   return (
     <RadixSelect.Content
       ref={ref}
-      className={cx(["dropdown", "select-dropdown"], className)}
+      className={cx(
+        namespaceClassNames("dropdown", "select-dropdown"),
+        className,
+      )}
       {...props}
       {...element}
     />
@@ -138,7 +168,7 @@ export const SelectItem = React.forwardRef<
   return (
     <RadixSelect.Item
       ref={ref}
-      className={cx(["menu-item", "select-item"], className)}
+      className={cx(namespaceClassNames("menu-item", "select-item"), className)}
       {...props}
       {...element}
     />
@@ -149,12 +179,14 @@ export const Label = React.forwardRef<HTMLLabelElement, TextProps>(
   function Label({ children, className, ...props }, ref) {
     const element = useElement("label");
     return (
+      // @ts-expect-error: Text props are a complex union type depending on the
+      // `as` prop value, which breaks down when spreading in `element`
       <Text
         as="label"
         ref={ref}
         weight="bold"
         size="2"
-        className={cx("label", className)}
+        className={cx(namespaceClassNames("label"), className)}
         {...props}
         {...element}
       >
@@ -173,7 +205,7 @@ export const TextField = React.forwardRef<
     <RadixTextField.Root
       ref={ref}
       variant="surface"
-      className={cx("text-field", className)}
+      className={cx(namespaceClassNames("text-field"), className)}
       {...props}
       {...element}
     />
@@ -187,7 +219,7 @@ export const TextFieldSlot = React.forwardRef<
   return (
     <RadixTextField.Slot
       ref={ref}
-      className={cx("text-field-slot", className)}
+      className={cx(namespaceClassNames("text-field-slot"), className)}
       {...props}
     />
   );
@@ -199,7 +231,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <RadixBadge
         ref={ref}
-        className={cx("badge", className)}
+        className={cx(namespaceClassNames("badge"), className)}
         {...element}
         {...props}
       />
@@ -215,7 +247,7 @@ export const DropdownMenuContent = React.forwardRef<
   return (
     <RadixDropdownMenu.Content
       ref={ref}
-      className={cx("dropdown", className)}
+      className={cx(namespaceClassNames("dropdown"), className)}
       {...props}
       {...element}
     />
@@ -230,7 +262,7 @@ export const PrimaryMenuItem = React.forwardRef<
   return (
     <RadixDropdownMenu.Item
       ref={ref}
-      className={cx("menu-item", className)}
+      className={cx(namespaceClassNames("menu-item"), className)}
       {...props}
       {...element}
     />
@@ -245,7 +277,10 @@ export const DestructiveMenuItem = React.forwardRef<
   return (
     <RadixDropdownMenu.Item
       ref={ref}
-      className={cx(["menu-item", "menu-item--destructive"], className)}
+      className={cx(
+        namespaceClassNames("menu-item", "menu-item--destructive"),
+        className,
+      )}
       color="red"
       {...props}
       {...element}
@@ -264,7 +299,7 @@ export const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(
       <RadixAvatar
         ref={ref}
         color="gray"
-        className={cx("avatar", className)}
+        className={cx(namespaceClassNames("avatar"), className)}
         {...props}
         {...element}
         // TODO: use CSS var instead of hard-coded value for opacity
@@ -282,13 +317,13 @@ export const DialogContent = React.forwardRef<
   const [node, setNode] = React.useState<HTMLDivElement | null>(null);
   const ref = useComposedRefs(forwardedRef, setNode as any);
   useDialogOverlayHack(node, {
-    className: namespaceClassName("dialog-overlay"),
+    className: namespaceClassNames("dialog-overlay"),
     selector: ".rt-DialogOverlay",
   });
   return (
     <RadixDialog.Content
       ref={ref}
-      className={cx("dialog", className)}
+      className={cx(namespaceClassNames("dialog"), className)}
       {...props}
       {...element}
     />
@@ -303,14 +338,14 @@ export const AlertDialogContent = React.forwardRef<
   const [node, setNode] = React.useState<HTMLDivElement | null>(null);
   const ref = useComposedRefs(forwardedRef, setNode as any);
   useDialogOverlayHack(node, {
-    className: namespaceClassName("dialog-overlay"),
+    className: namespaceClassNames("dialog-overlay"),
     selector: ".rt-AlertDialogOverlay",
   });
 
   return (
     <RadixAlertDialog.Content
       ref={ref}
-      className={cx("dialog", className)}
+      className={cx(namespaceClassNames("dialog"), className)}
       {...props}
       {...element}
     />
@@ -355,5 +390,6 @@ export type Elements = OmitAsChild<{
   primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
   destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
   avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, "fallback">;
-  label?: Omit<GetPropDefTypes<typeof textPropDefs>, "as">;
+  label?: GetPropDefTypes<typeof textPropDefs>;
+  skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;
 }>;

package/src/lib/invite-user-dialog.tsx

@@ -35,14 +35,7 @@ interface InviteUserDialogProps {
   children?: React.ReactNode;
 }
 
-interface DialogFormContextValue {
-  dialogId: string;
-}
-
-const DialogFormContext = React.createContext<DialogFormContextValue>(null!);
-DialogFormContext.displayName = "DialogFormContext";
-
-export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
+export function InviteUserDialog({ children }: InviteUserDialogProps) {
   const [open, setOpen] = React.useState(false);
   const dialogId = toId("invite-user", React.useId());
   const formId = toId(dialogId, "form");
@@ -88,81 +81,81 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
           An invitation will be sent to this email address with a link to
           complete their account.
         </Dialog.Description>
-        <DialogFormContext.Provider value={{ dialogId }}>
-          <Flex direction="column" gap="4" mt="5" asChild>
-            <form
-              id={formId}
-              onSubmit={async (event) => {
-                event.preventDefault();
-                onSubmitForm({
-                  email: event.currentTarget.email.value,
-                  role: selectedRole,
-                });
-              }}
-            >
-              <FormField
-                name="email"
-                label="Email address"
-                error={formErrors.fields.email}
-                required
-                control={(props) => (
-                  <TextField
-                    {...props}
-                    data-1p-ignore="true"
-                    data-lpignore="true"
-                    type="email"
-                    autoComplete="off"
-                    placeholder="Enter an email address"
-                  />
-                )}
-              />
+        <Flex direction="column" gap="4" mt="5" asChild>
+          <form
+            id={formId}
+            onSubmit={async (event) => {
+              event.preventDefault();
+              onSubmitForm({
+                email: event.currentTarget.email.value,
+                role: selectedRole,
+              });
+            }}
+          >
+            <FormField
+              rootId={dialogId}
+              name="email"
+              label="Email address"
+              error={formErrors.fields.email}
+              required
+              control={(props) => (
+                <TextField
+                  {...props}
+                  data-1p-ignore="true"
+                  data-lpignore="true"
+                  type="email"
+                  autoComplete="off"
+                  placeholder="Enter an email address"
+                />
+              )}
+            />
 
-              <FormField
-                name="role"
-                label="Role"
-                error={formErrors.fields.role}
-                disabled={rolesQuery.isPending || roles.length <= 1}
-                info={
-                  roles.length === 1 ? (
-                    <>
-                      New users will be invited with the{" "}
-                      <Text weight="bold">{roles[0].name}</Text> role, as it is
-                      the only one available.
-                    </>
-                  ) : undefined
-                }
-                control={({
-                  id,
-                  "aria-invalid": ariaInvalid,
-                  "aria-describedby": ariaDescribedBy,
-                  ...props
-                }) => (
-                  <Select.Root
-                    {...props}
-                    value={selectedRole}
-                    onValueChange={setSelectedRole}
-                  >
-                    <SelectTrigger
-                      id={id}
-                      aria-invalid={ariaInvalid}
-                      aria-describedby={ariaDescribedBy}
-                    />
-                    <SelectContent>
-                      <SelectItem value={PLACEHOLDER_ROLE} disabled>
-                        Select a role
+            <FormField
+              rootId={dialogId}
+              name="role"
+              label="Role"
+              error={formErrors.fields.role}
+              disabled={rolesQuery.isPending || roles.length <= 1}
+              info={
+                roles.length === 1 ? (
+                  <>
+                    New users will be invited with the{" "}
+                    <Text weight="bold">{roles[0].name}</Text> role, as it is
+                    the only one available.
+                  </>
+                ) : undefined
+              }
+              control={({
+                id,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                ...props
+              }) => (
+                <Select.Root
+                  {...props}
+                  value={selectedRole}
+                  onValueChange={setSelectedRole}
+                >
+                  <SelectTrigger
+                    id={id}
+                    aria-invalid={ariaInvalid}
+                    aria-describedby={ariaDescribedBy}
+                  />
+                  <SelectContent>
+                    <SelectItem value={PLACEHOLDER_ROLE} disabled>
+                      Select a role
+                    </SelectItem>
+                    {roles.map((role) => (
+                      <SelectItem key={role.slug} value={role.slug}>
+                        {role.name}
                       </SelectItem>
-                      {roles.map((role) => (
-                        <SelectItem key={role.slug} value={role.slug}>
-                          {role.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select.Root>
-                )}
-              />
-            </form>
-          </Flex>
-        </DialogFormContext.Provider>
+                    ))}
+                  </SelectContent>
+                </Select.Root>
+              )}
+            />
+          </form>
+        </Flex>
 
         {formErrors.form ? (
           <Callout.Root color="red" mt="4" mb="-2">
@@ -191,7 +184,7 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
       </DialogContent>
     </Dialog.Root>
   );
-};
+}
 
 interface FormControlRenderProps {
   id: string;
@@ -203,6 +196,7 @@ interface FormControlRenderProps {
 }
 
 function FormField({
+  rootId,
   name,
   label,
   error,
@@ -211,6 +205,7 @@ function FormField({
   required,
   disabled,
 }: {
+  rootId: string;
   name: string;
   label: string;
   error?: React.ReactNode;
@@ -219,10 +214,9 @@ function FormField({
   required?: boolean;
   disabled?: boolean;
 }) {
-  const { dialogId } = React.useContext(DialogFormContext);
-  const fieldId = toId(dialogId, name);
-  const errorId = toId(dialogId, name, "error");
-  const infoId = toId(dialogId, name, "info");
+  const fieldId = toId(rootId, name);
+  const errorId = toId(rootId, name, "error");
+  const infoId = toId(rootId, name, "info");
   return (
     <Flex direction="column" gap="1">
       <Label htmlFor={fieldId}>{label}</Label>

package/src/lib/resend-invite-dialog.tsx

@@ -24,11 +24,11 @@ interface ResendInviteDialogProps extends AlertDialog.RootProps {
   children?: React.ReactNode;
 }
 
-export const ResendInviteDialog = ({
+export function ResendInviteDialog({
   children,
   user,
   ...props
-}: ResendInviteDialogProps) => {
+}: ResendInviteDialogProps) {
   const resendInvite = useResendUserInvite();
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
   const successButtonRef = React.useRef<HTMLButtonElement>(null);
@@ -131,7 +131,7 @@ export const ResendInviteDialog = ({
       </Dialog.Root>
     </>
   );
-};
+}
 
 function getMutationErrorMessage(error: unknown) {
   if (!error) {

package/src/lib/revoke-invite-dialog.tsx

@@ -21,11 +21,11 @@ interface RevokeInviteDialogProps extends AlertDialog.RootProps {
   children?: ReactNode;
 }
 
-export const RevokeInviteDialog = ({
+export function RevokeInviteDialog({
   children,
   user,
   ...props
-}: RevokeInviteDialogProps) => {
+}: RevokeInviteDialogProps) {
   const revokeInvite = useRevokeUserInvite();
   const cancelButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -97,7 +97,7 @@ export const RevokeInviteDialog = ({
       </VisuallyHidden>
     </AlertDialog.Root>
   );
-};
+}
 
 function getMutationErrorMessage(error: unknown) {
   if (!error) {

package/src/lib/users-management.tsx

@@ -7,7 +7,6 @@ import {
   Grid,
   Heading,
   Select,
-  Skeleton,
   Table,
   Text,
   type TextProps,
@@ -24,6 +23,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
+  Skeleton,
   TextField,
 } from "./elements";
 import { InviteUserDialog } from "./invite-user-dialog";

package/src/lib/users-search.tsx

@@ -3,12 +3,13 @@
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { IconButton } from "@radix-ui/themes";
+import cx from "clsx";
 import * as React from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { TextField, TextFieldSlot } from "./elements";
 import { useSearchContext } from "./search-provider";
 import { useUsersManagementContext } from "./users-management-context";
-import { cx } from "./utils";
+import { namespaceClassNames } from "./utils";
 
 type UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;
 
@@ -30,7 +31,7 @@ export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
     return (
       <TextField
         ref={useComposedRefs(inputRef, ref)}
-        className={cx(["users-search"], className)}
+        className={cx(namespaceClassNames("users-search"), className)}
         autoComplete="off"
         placeholder="Search by name or e-mail"
         value={searchValue}

package/src/lib/utils.ts

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import type { User } from "./api/user";
 import { WIDGETS_CLASS_NAMESPACE } from "./constants";
 
@@ -95,21 +94,10 @@ export async function parseErrorResponse(
   }
 }
 
-export function namespaceClassName(className: string) {
-  return `${WIDGETS_CLASS_NAMESPACE}-${className}`;
-}
-
-export function cx(
-  baseClass: string | null | string[],
-  ...classes: (string | false | null | undefined)[]
-): string {
-  if (baseClass) {
-    return clsx(
-      typeof baseClass === "string"
-        ? namespaceClassName(baseClass)
-        : baseClass.map(namespaceClassName),
-      ...classes,
-    );
-  }
-  return clsx(...classes);
+export function namespaceClassNames(className: string): string;
+export function namespaceClassNames(...classNames: string[]): string;
+export function namespaceClassNames(...classNames: string[]): string {
+  return classNames
+    .map((className) => `${WIDGETS_CLASS_NAMESPACE}-${className}`)
+    .join(" ");
 }

package/src/workos-widgets.client.tsx

@@ -3,8 +3,9 @@
 import { Theme as RadixThemes } from "@radix-ui/themes";
 import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import cx from "clsx";
 import * as React from "react";
-import { cx } from "./lib/utils";
+import { namespaceClassNames } from "./lib/utils";
 import { DEFAULT_API_HOSTNAME } from "./lib/api/config";
 import type { Elements } from "./lib/elements";
 import { WidgetsContext } from "./lib/widgets-context";
@@ -63,7 +64,7 @@ export const WorkOsWidgets: React.FC<WorkOsWidgetsProps> = ({
       <RadixThemes
         {...radixThemesProps}
         style={customStyle}
-        className={cx("root", className)}
+        className={cx(namespaceClassNames("root"), className)}
       >
         <WidgetsContext.Provider value={{ elements, apiBaseUrl }}>
           {children}