@workos-inc/widgets 1.1.4 → 1.2.0

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

@@ -1,111 +0,0 @@
-"use client";
-
-import {
-  AlertDialog,
-  Callout,
-  Flex,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import { type ReactNode, useRef } from "react";
-import { useRevokeUserInvite } from "./api/user";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  SecondaryButton,
-} from "./elements";
-import { Member } from "../api";
-
-interface RevokeInviteDialogProps extends AlertDialog.RootProps {
-  user: Member;
-  children?: ReactNode;
-}
-
-export function RevokeInviteDialog({
-  children,
-  user,
-  ...props
-}: RevokeInviteDialogProps) {
-  const revokeInvite = useRevokeUserInvite();
-  const cancelButtonRef = useRef<HTMLButtonElement>(null);
-
-  const onSubmitForm = () => {
-    revokeInvite.mutate(
-      { userId: user.id },
-      {
-        onSuccess: () => {
-          props.onOpenChange?.(false);
-        },
-      },
-    );
-  };
-
-  return (
-    <AlertDialog.Root {...props}>
-      {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
-
-      <AlertDialogContent
-        maxWidth="480px"
-        onOpenAutoFocus={() => {
-          requestAnimationFrame(() => {
-            cancelButtonRef.current?.focus();
-          });
-        }}
-      >
-        <AlertDialog.Title>Revoke invite?</AlertDialog.Title>
-        <Flex mb="4" direction="column" gap="3">
-          <AlertDialog.Description>
-            Are you sure you want to revoke the invite to{" "}
-            <Text weight="bold">{user.email}</Text>? This action is immediate
-            and cannot be undone.
-          </AlertDialog.Description>
-        </Flex>
-
-        {revokeInvite.error ? (
-          <Callout.Root color="red" mt="4" mb="-2">
-            <Callout.Text>
-              {getMutationErrorMessage(revokeInvite.error)}
-            </Callout.Text>
-          </Callout.Root>
-        ) : null}
-
-        <Flex gap="3" justify="end" mt="5" asChild>
-          <form
-            onSubmit={(event) => {
-              event.preventDefault();
-              onSubmitForm();
-            }}
-          >
-            <AlertDialog.Cancel>
-              <SecondaryButton
-                ref={cancelButtonRef}
-                disabled={revokeInvite.isPending}
-              >
-                Cancel
-              </SecondaryButton>
-            </AlertDialog.Cancel>
-
-            <DestructiveButton type="submit" loading={revokeInvite.isPending}>
-              Revoke
-            </DestructiveButton>
-          </form>
-        </Flex>
-      </AlertDialogContent>
-
-      {/* mirror errors in a live region */}
-      <VisuallyHidden asChild>
-        <section aria-live="polite">
-          {getMutationErrorMessage(revokeInvite.error)}
-        </section>
-      </VisuallyHidden>
-    </AlertDialog.Root>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  if (!error) {
-    return null;
-  }
-  // TODO Handle server errors
-  return "There was an error revoking the invite. Please try again.";
-}

package/src/lib/save-button.tsx

@@ -1,113 +0,0 @@
-import {
-  ButtonProps,
-  Flex,
-  Slot,
-  Slottable,
-  Spinner,
-  Text,
-} from "@radix-ui/themes";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { useEffect, useRef, useState } from "react";
-import { namespaceClassNames } from "./utils";
-
-const DONE_TIMEOUT_MS = 1500;
-const SAVING_TIMEOUT_MS = 600;
-
-interface SaveButtonProps extends ButtonProps {
-  asChild?: boolean;
-  children: React.ReactNode;
-  loading?: boolean;
-  done?: boolean;
-  onDone?: () => void;
-}
-
-export function SaveButton({
-  asChild = false,
-  children,
-  loading,
-  done,
-  onDone,
-  ...props
-}: SaveButtonProps) {
-  const [state, setState] = useState<"idle" | "loading" | "done">(
-    loading ? "loading" : done ? "done" : "idle",
-  );
-  const loadingStartTime = useRef<number | null>(null);
-  const Button = asChild ? Slot : "button";
-
-  useEffect(() => {
-    if (loading) {
-      setState("loading");
-      loadingStartTime.current = Date.now();
-    } else if (done) {
-      const currentTime = Date.now();
-      const loadingDuration = loadingStartTime.current
-        ? currentTime - loadingStartTime.current
-        : 0;
-
-      // If loading lasted less than 500 ms, wait for the remaining time
-      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
-
-      let doneTimer: NodeJS.Timeout | null = null;
-      const savedTimer = setTimeout(() => {
-        setState("done");
-
-        doneTimer = setTimeout(() => {
-          onDone?.();
-        }, DONE_TIMEOUT_MS);
-      }, remainingDelay);
-
-      return () => {
-        clearTimeout(savedTimer);
-        if (doneTimer) {
-          clearTimeout(doneTimer);
-        }
-      };
-    } else if (!loading && !done) {
-      setState("idle");
-    }
-  }, [loading, done, onDone]);
-
-  return (
-    <Button
-      {...props}
-      className={namespaceClassNames("save-button")}
-      data-save-state={state}
-    >
-      <Slottable>{children}</Slottable>
-
-      {state === "loading" && (
-        <Flex
-          as="span"
-          align="center"
-          justify="center"
-          position="absolute"
-          inset="0"
-        >
-          <Spinner size="1" />
-        </Flex>
-      )}
-
-      {state === "done" && (
-        <Flex
-          as="span"
-          align="center"
-          justify="center"
-          position="absolute"
-          inset="0"
-          gap="1"
-        >
-          <CheckIcon
-            width="18px"
-            height="18px"
-            style={{ marginLeft: "-4px" }}
-            className={namespaceClassNames("save-button__done-icon")}
-          />
-          <Text className={namespaceClassNames("save-button__done-text")}>
-            Done
-          </Text>
-        </Flex>
-      )}
-    </Button>
-  );
-}

package/src/lib/search-provider.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { flushSync } from "react-dom";
-import { useUsersManagementContext } from "./users-management-context";
-
-interface SearchContextType {
-  inputRef: React.RefObject<HTMLInputElement>;
-  clearSearch: () => void;
-  searchValue: string;
-  setSearchValue: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const SearchContext = React.createContext<SearchContextType | undefined>(
-  undefined,
-);
-SearchContext.displayName = "SearchContext";
-
-export const SearchProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const {
-    state: { searchQuery },
-    dispatch,
-  } = useUsersManagementContext();
-
-  const [searchValue, setSearchValue] = React.useState(searchQuery || "");
-
-  const clearSearch = React.useCallback(() => {
-    flushSync(() => {
-      setSearchValue("");
-      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: "" });
-    });
-    inputRef.current?.focus();
-  }, [dispatch]);
-
-  return (
-    <SearchContext.Provider
-      value={{ inputRef, clearSearch, searchValue, setSearchValue }}
-    >
-      {children}
-    </SearchContext.Provider>
-  );
-};
-
-export const useSearchContext = () => {
-  const context = React.useContext(SearchContext);
-  if (!context) {
-    throw new Error("useSearchContext must be used within a SearchProvider");
-  }
-  return context;
-};

package/src/lib/set-password-dialog.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
-import * as React from "react";
-import { type ReactNode } from "react";
-import {
-  DialogContent,
-  Label,
-  PasswordField,
-  PrimaryButton,
-  SecondaryButton,
-} from "./elements";
-import * as Form from "@radix-ui/react-form";
-import { useCreatePassword } from "../api";
-import { useSecuritySettings } from "./use-security-settings";
-import { ElevatedAccess } from "./elevated-access";
-import { SaveButton } from "./save-button";
-import { useDialogClose } from "./use-dialog-close";
-
-interface SetPasswordDialogProps extends Dialog.RootProps {
-  children?: ReactNode;
-}
-
-export function SetPasswordDialog({
-  children,
-  ...props
-}: SetPasswordDialogProps) {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = React.useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger>{children}</Dialog.Trigger>
-
-      <DialogContent maxWidth="480px">
-        <ElevatedAccess>
-          <Content onClose={handleClose} />
-        </ElevatedAccess>
-      </DialogContent>
-    </Dialog.Root>
-  );
-}
-
-interface ContentProps {
-  onClose: () => void;
-}
-
-function Content({ onClose }: ContentProps) {
-  const setPassword = useCreatePassword();
-  const securitySettings = useSecuritySettings();
-  const [disableSubmit, setDisableSubmit] = React.useState(true);
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const password = formData.get("password")?.toString();
-
-    if (!password) {
-      return;
-    }
-
-    setPassword.mutate({ data: { password } });
-  };
-
-  useDialogClose(setPassword.isSuccess, () => {
-    securitySettings.update("Password", true);
-  });
-
-  return (
-    <>
-      <Dialog.Title mb="5">Set New Password</Dialog.Title>
-      <VisuallyHidden>
-        <Dialog.Description>
-          Set a new password for your account
-        </Dialog.Description>
-      </VisuallyHidden>
-
-      {setPassword.error ? (
-        <Callout.Root color="red" my="-2">
-          <Callout.Text>
-            {getMutationErrorMessage(setPassword.error)}
-          </Callout.Text>
-        </Callout.Root>
-      ) : null}
-
-      <Form.Root
-        onSubmit={handleSubmit}
-        onChange={(event) => {
-          const formData = new FormData(event.currentTarget);
-          const password = formData.get("password")?.toString();
-          const confirmPassword = formData.get("confirmPassword")?.toString();
-          setDisableSubmit(password === "" || confirmPassword === "");
-        }}
-      >
-        <Flex mt="5" direction="column" gap="4">
-          <Form.Field name="password" asChild>
-            <Flex direction="column" gap="2">
-              <Form.Label asChild>
-                <Label>Enter a new password</Label>
-              </Form.Label>
-              <Form.Control asChild>
-                <PasswordField
-                  autoFocus
-                  required
-                  autoComplete="new-password"
-                  placeholder="New password"
-                  disabled={setPassword.isPending || setPassword.isSuccess}
-                />
-              </Form.Control>
-              <Form.Message match="valueMissing" asChild>
-                <Text size="2" color="red">
-                  Please enter a new password
-                </Text>
-              </Form.Message>
-              <Form.Message match={(value) => value.length < 8} asChild>
-                <Text size="2" color="red">
-                  Password must be at least 8 characters
-                </Text>
-              </Form.Message>
-            </Flex>
-          </Form.Field>
-
-          <Form.Field name="confirmPassword" asChild>
-            <Flex direction="column" gap="2">
-              <Form.Label asChild>
-                <Label>Confirm your new password</Label>
-              </Form.Label>
-              <Form.Control asChild>
-                <PasswordField
-                  required
-                  autoComplete="new-password"
-                  placeholder="Confirm new password"
-                  disabled={setPassword.isPending || setPassword.isSuccess}
-                />
-              </Form.Control>
-              <Form.Message match="valueMissing" asChild>
-                <Text size="2" color="red">
-                  Please confirm your new password
-                </Text>
-              </Form.Message>
-              <Form.Message
-                match={(value, formData) => value !== formData.get("password")}
-                asChild
-              >
-                <Text size="2" color="red">
-                  The passwords you entered don’t match.
-                </Text>
-              </Form.Message>
-            </Flex>
-          </Form.Field>
-        </Flex>
-
-        <Flex mt="5" gap="3" justify="end">
-          <Dialog.Close>
-            <SecondaryButton
-              disabled={setPassword.isPending || setPassword.isSuccess}
-            >
-              Cancel
-            </SecondaryButton>
-          </Dialog.Close>
-
-          <SaveButton
-            asChild
-            loading={setPassword.isPending}
-            done={setPassword.isSuccess}
-            onDone={onClose}
-          >
-            <PrimaryButton type="submit" disabled={disableSubmit}>
-              Set password
-            </PrimaryButton>
-          </SaveButton>
-        </Flex>
-
-        {/* mirror errors in a live region */}
-        <VisuallyHidden asChild>
-          <section aria-live="polite">
-            {getMutationErrorMessage(setPassword.error)}
-          </section>
-        </VisuallyHidden>
-      </Form.Root>
-    </>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  if (
-    typeof error === "object" &&
-    error !== null &&
-    "message" in error &&
-    typeof error.message === "string"
-  ) {
-    return error.message;
-  }
-
-  return "Something went wrong. Please try again.";
-}

package/src/lib/use-dialog-close.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-export function useDialogClose(enabled: boolean, callback: () => void) {
-  const callbackRef = React.useRef(callback);
-  const firstRenderRef = React.useRef(true);
-
-  React.useEffect(() => {
-    if (firstRenderRef.current) {
-      firstRenderRef.current = false;
-      return;
-    }
-
-    const cb = callbackRef.current;
-
-    return () => {
-      if (enabled) cb();
-    };
-  }, [enabled]);
-}

package/src/lib/use-is-hydrated.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-
-function subscribe() {
-  return () => {};
-}
-
-export function useIsHydrated() {
-  return React.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false,
-  );
-}

package/src/lib/use-layout-effect.ts

@@ -1,6 +0,0 @@
-import { useLayoutEffect } from "react";
-import { canUseDOM } from "./utils";
-
-const useIsoLayoutEffect = canUseDOM ? useLayoutEffect : () => void 0;
-
-export { useIsoLayoutEffect as useLayoutEffect };

package/src/lib/use-security-settings.tsx

@@ -1,49 +0,0 @@
-import {
-  AuthenticationInformationResponse,
-  getAuthenticationInformationQueryKey,
-} from "../api";
-import { useQueryClient } from "@tanstack/react-query";
-
-type Methods = "Password" | "Mfa" | "Passkey";
-
-/**
- * A hook that provides utilities for managing security settings.
- * Allows optimistically updating verification method status (password, MFA, passkey)
- * while also triggering a server revalidation.
- */
-export function useSecuritySettings() {
-  const client = useQueryClient();
-
-  const update = (method: Methods, isSetUp: boolean) => {
-    const queryKey = getAuthenticationInformationQueryKey();
-
-    // Optimistic update
-    client.setQueriesData<AuthenticationInformationResponse>(
-      { queryKey, exact: false },
-      (data) => {
-        if (!data) {
-          return data;
-        }
-
-        return {
-          ...data,
-          data: {
-            ...data.data,
-            verificationMethods: {
-              ...data.data.verificationMethods,
-              [method]: { ...data.data.verificationMethods[method], isSetUp },
-            },
-          },
-        };
-      },
-    );
-
-    // Also validate it with the server
-    client.invalidateQueries({
-      queryKey: getAuthenticationInformationQueryKey(),
-      exact: false,
-    });
-  };
-
-  return { update };
-}