@workos-inc/widgets 1.1.4 → 1.2.0

package/src/lib/organization-switcher.tsx

@@ -1,156 +0,0 @@
-"use client";
-
-import { CheckIcon } from "@radix-ui/react-icons";
-import {
-  Box,
-  Button,
-  ChevronDownIcon,
-  DropdownMenu,
-  Flex,
-  Skeleton,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import { OrganizationInfo, Organizations403, Organizations404 } from "../api";
-
-type OrganizationSwitcherVariant = "ghost" | "outline";
-
-// Rename all uses of `org` to `organization`
-export type OrganizationSwitcherPassthroughProps = {
-  switchToOrganization: ({
-    organizationId,
-  }: {
-    organizationId: string;
-  }) => void;
-  // Simple props to affect the overall style
-  variant?: OrganizationSwitcherVariant;
-  organizationLabel?: string | null;
-  children?: React.ReactNode;
-};
-
-export interface OrganizationSwitcherProps
-  extends OrganizationSwitcherPassthroughProps {
-  organizations: OrganizationInfo[];
-}
-
-export const OrganizationSwitcher = ({
-  organizations,
-  switchToOrganization,
-  variant = "outline",
-  organizationLabel = "Organizations",
-  children,
-}: OrganizationSwitcherProps) => {
-  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 (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <Button
-          color="gray"
-          variant={variant}
-          className="OrganizationSwitcherTrigger"
-        >
-          <Flex align="center" justify="between" gap="2" flexGrow="1">
-            <Text>{currentOrganization.name}</Text>
-            <DropdownMenu.TriggerIcon />
-          </Flex>
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Group>
-          {organizationLabel ? (
-            <DropdownMenu.Label>
-              <Text>{organizationLabel}</Text>
-            </DropdownMenu.Label>
-          ) : null}
-          {organizations.map((organization) => (
-            <Flex
-              key={organization.id}
-              asChild
-              pr="2"
-              maxWidth="280px"
-              minWidth="180px"
-            >
-              <DropdownMenu.Item
-                onClick={() => {
-                  if (organization.id !== currentOrganization.id) {
-                    switchToOrganization({ organizationId: organization.id });
-                  }
-                }}
-              >
-                <Flex
-                  justify="between"
-                  align="center"
-                  gap="4"
-                  flexGrow="1"
-                  overflow="hidden"
-                >
-                  <Text truncate>
-                    {organization.name}
-                    {organization.current && (
-                      <VisuallyHidden> (current)</VisuallyHidden>
-                    )}
-                  </Text>
-                  <Flex
-                    aria-hidden
-                    align="center"
-                    justify="center"
-                    flexShrink="0"
-                  >
-                    {organization.current ? (
-                      <CheckIcon width="18px" height="18px" />
-                    ) : (
-                      // make the extra space for
-                      <Box width="18px" height="18px" />
-                    )}
-                  </Flex>
-                </Flex>
-              </DropdownMenu.Item>
-            </Flex>
-          ))}
-        </DropdownMenu.Group>
-        {children}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-};
-
-export function OrganizationSwitcherLoading({
-  variant = "outline",
-  organizations,
-}: {
-  variant?: OrganizationSwitcherVariant;
-  organizations: OrganizationInfo[];
-}) {
-  const currentOrganization = organizations.find(
-    (organization) => organization.current,
-  );
-
-  return (
-    // Always need DropdownMenu.Root to wrap children than may include
-    <Button color="gray" variant={variant} disabled>
-      <Flex align="center" gap="2">
-        <Skeleton loading={!currentOrganization}>
-          <Text>{currentOrganization?.name ?? "Loading..."}</Text>
-        </Skeleton>
-        <ChevronDownIcon />
-      </Flex>
-    </Button>
-  );
-}
-
-interface OrganizationSwitcherErrorProps {
-  error: Organizations403 | Organizations404;
-}
-
-export function OrganizationSwitcherError(_: OrganizationSwitcherErrorProps) {
-  // TODO: consider other error state options
-  return null;
-}

package/src/lib/otp-input.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import * as Form from "@radix-ui/react-form";
-import { Grid } from "@radix-ui/themes";
-import * as React from "react";
-import { TextField } from "./elements";
-
-interface OptContextType {
-  value: string[];
-  readOnly?: boolean;
-  state?: "valid" | "invalid";
-  onEnterPressed: () => void;
-  onChildAdd: (input: HTMLInputElement) => void;
-  onCharChange: (char: string, index: number) => void;
-  allChildrenAdded: boolean;
-}
-
-const OtpContext = React.createContext<OptContextType | undefined>(undefined);
-
-type OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
-  onValueChange?: (value: string) => void;
-  id?: string;
-  name?: string;
-  readOnly?: boolean;
-  state?: "valid" | "invalid";
-  value?: string;
-  defaultValue?: string;
-  autoSubmit?: boolean;
-};
-
-export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
-  function Root(
-    {
-      name,
-      id,
-      defaultValue,
-      value: valueProp,
-      onValueChange,
-      autoSubmit,
-      children,
-      readOnly,
-      state,
-      ...gridProps
-    },
-    forwardedRef,
-  ) {
-    const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);
-    const [allChildrenAdded, setAllChildrenAdded] =
-      React.useState<boolean>(false);
-    const childCount = React.Children.count(children);
-
-    const [value, setValue] = useControllableState({
-      prop: getValueAsArray(valueProp, childCount),
-      defaultProp: getValueAsArray(defaultValue, childCount),
-      onChange: (value) => onValueChange?.(value.join("")),
-    });
-
-    const hiddenInputRef = React.useRef<HTMLInputElement>(null);
-    const childrenRefs = React.useRef<HTMLInputElement[]>([]);
-
-    const attemptAutoSubmit = React.useCallback(
-      (enterPressed = false) => {
-        if (
-          autoSubmit &&
-          value &&
-          value.every((char) => char !== "") &&
-          (enterPressed || lastCharIndex + 1 === childCount)
-        ) {
-          hiddenInputRef.current?.form?.requestSubmit();
-        }
-      },
-      [value, childCount, lastCharIndex, autoSubmit],
-    );
-
-    const handleEnterPressed = React.useCallback(
-      () => attemptAutoSubmit(true),
-      [attemptAutoSubmit],
-    );
-
-    const handleChildAdd = React.useCallback(
-      (input: HTMLInputElement) => {
-        if (input) {
-          input.dataset.index = `${childrenRefs.current.length}`;
-          childrenRefs.current.push(input);
-        } else {
-          childrenRefs.current.pop();
-        }
-
-        if (childrenRefs.current.length === childCount) {
-          setAllChildrenAdded(true);
-        }
-      },
-      [childCount],
-    );
-
-    const handleCharChange = React.useCallback(
-      (char: string, index: number) => {
-        setValue((previousValue) => {
-          const arrayToCopy = previousValue ?? createEmptyArray(childCount);
-          const newValue = [...arrayToCopy];
-          newValue[index] = char;
-          return newValue;
-        });
-        setLastCharIndex(index);
-      },
-      [childCount, setValue],
-    );
-
-    const otpContext = React.useMemo(
-      () => ({
-        value: value ?? createEmptyArray(childCount),
-        readOnly,
-        state,
-        allChildrenAdded,
-        onEnterPressed: handleEnterPressed,
-        onChildAdd: handleChildAdd,
-        onCharChange: handleCharChange,
-      }),
-      [
-        value,
-        allChildrenAdded,
-        readOnly,
-        state,
-        childCount,
-        handleEnterPressed,
-        handleChildAdd,
-        handleCharChange,
-      ],
-    );
-
-    React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);
-
-    return (
-      <OtpContext.Provider value={otpContext}>
-        <Grid
-          columns={`repeat(${childCount}, 1fr)`}
-          {...gridProps}
-          onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {
-            event.preventDefault();
-            const pastedValue = event.clipboardData.getData("Text");
-            const sanitizedValue = pastedValue
-              .replace(/[^\d]/g, "")
-              .slice(0, childCount);
-            const value = sanitizedValue
-              .padEnd(childCount, "#")
-              .split("")
-              .map((char) => (char === "#" ? "" : char));
-
-            setValue(value);
-            setLastCharIndex(sanitizedValue.length - 1);
-
-            const index = Math.min(sanitizedValue.length, childCount - 1);
-            childrenRefs.current?.[index]?.focus();
-          }}
-        >
-          {children}
-          <input
-            ref={composeRefs(forwardedRef, hiddenInputRef)}
-            defaultValue={value?.join("")}
-            minLength={childCount}
-            name={name}
-            type="hidden"
-          />
-        </Grid>
-      </OtpContext.Provider>
-    );
-  },
-);
-
-interface InputProps extends React.ComponentProps<typeof TextField> {
-  autoComplete?: "one-time-code" | "off";
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input(
-    { style, readOnly, autoComplete = "off", ...props },
-    forwardedRef,
-  ) {
-    const otpContext = useOptContext();
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const composedInputRef = useComposedRefs(
-      forwardedRef,
-      inputRef,
-      otpContext.onChildAdd,
-    );
-
-    const index = Number(inputRef.current?.dataset.index ?? -1);
-    const char = otpContext.value[index] ?? "";
-
-    return (
-      <Form.Field name={`otp-${index}`} asChild>
-        <Form.Control asChild>
-          <TextField
-            ref={composedInputRef}
-            autoComplete={index === 0 ? autoComplete : "off"}
-            color={otpContext.state === "invalid" ? "red" : undefined}
-            inputMode="numeric"
-            maxLength={1}
-            pattern="\d{1}"
-            readOnly={readOnly ?? otpContext.readOnly}
-            size="3"
-            value={char}
-            variant={otpContext.state === "invalid" ? "soft" : undefined}
-            style={{
-              ...style,
-              height: "auto",
-              "--text-field-padding": 0,
-              textAlign: "center",
-            }}
-            onChange={(event) => {
-              // Only update the value if it matches the input pattern (number only)
-              if (event.target.validity.valid) {
-                const char = event.target.value;
-                const index = Number(event.target.dataset.index ?? -1);
-                otpContext.onCharChange(char, index);
-                if (char !== "") {
-                  focusSibling(event.currentTarget, { back: char === "" });
-                }
-              }
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "ArrowLeft") {
-                focusSibling(event.currentTarget, { back: true });
-                event.preventDefault();
-              } else if (event.key === "ArrowRight") {
-                focusSibling(event.currentTarget);
-                event.preventDefault();
-              } else if (event.key === "Backspace" && char === "") {
-                focusSibling(event.currentTarget, { back: true });
-              } else if (event.key === "Enter" && char !== "") {
-                otpContext.onEnterPressed();
-              }
-            }}
-            {...props}
-          />
-        </Form.Control>
-      </Form.Field>
-    );
-  },
-);
-
-const useOptContext = () => {
-  const optContext = React.useContext(OtpContext);
-
-  if (!optContext) {
-    throw new Error(
-      "OtpInput compound components cannot be rendered outside the OtpRoot component",
-    );
-  }
-
-  return optContext;
-};
-
-function focusSibling(input: HTMLInputElement, { back = false } = {}) {
-  const sibling = back
-    ? input.parentElement?.previousSibling
-    : input.parentElement?.nextSibling;
-  const siblingInput = sibling?.firstChild;
-  if (siblingInput && siblingInput instanceof HTMLInputElement) {
-    siblingInput?.focus();
-    siblingInput?.select();
-  }
-}
-
-const getValueAsArray = (value: string | undefined, length: number) => {
-  if (!value) {
-    return undefined;
-  }
-
-  return createEmptyArray(length).map((_, index) => value?.[index] ?? "");
-};
-
-const createEmptyArray = (length: number): string[] =>
-  Array.from<string>({ length }).fill("");

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

@@ -1,145 +0,0 @@
-"use client";
-
-import {
-  AlertDialog,
-  Callout,
-  Dialog,
-  Flex,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import * as React from "react";
-import { useResendUserInvite } from "./api/user";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  DialogContent,
-  PrimaryButton,
-  SecondaryButton,
-} from "./elements";
-import { Member } from "../api";
-
-interface ResendInviteDialogProps extends AlertDialog.RootProps {
-  user: Member;
-  children?: React.ReactNode;
-}
-
-export function ResendInviteDialog({
-  children,
-  user,
-  ...props
-}: ResendInviteDialogProps) {
-  const resendInvite = useResendUserInvite();
-  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
-  const successButtonRef = React.useRef<HTMLButtonElement>(null);
-  const [successDialogIsOpen, setSuccessDialogIsOpen] = React.useState(false);
-
-  const onSubmitForm = () => {
-    resendInvite.mutate(
-      { userId: user.id },
-      {
-        onSuccess: () => {
-          setSuccessDialogIsOpen(true);
-        },
-      },
-    );
-  };
-
-  return (
-    <>
-      <AlertDialog.Root {...props}>
-        {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
-
-        <AlertDialogContent
-          maxWidth="480px"
-          onOpenAutoFocus={() => {
-            requestAnimationFrame(() => {
-              cancelButtonRef.current?.focus();
-            });
-          }}
-        >
-          <AlertDialog.Title>Resend invite?</AlertDialog.Title>
-          <Flex mb="4" direction="column" gap="3">
-            <AlertDialog.Description>
-              Are you sure you want to resend the invite to{" "}
-              <Text weight="bold">{user.email}</Text>?
-            </AlertDialog.Description>
-          </Flex>
-
-          {resendInvite.error ? (
-            <Callout.Root color="red" mt="4" mb="-2">
-              <Callout.Text>
-                {getMutationErrorMessage(resendInvite.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={resendInvite.isPending}
-                >
-                  Cancel
-                </SecondaryButton>
-              </AlertDialog.Cancel>
-              <DestructiveButton type="submit" loading={resendInvite.isPending}>
-                Resend
-              </DestructiveButton>
-            </form>
-          </Flex>
-        </AlertDialogContent>
-
-        {/* mirror errors in a live region */}
-        <VisuallyHidden asChild>
-          <section aria-live="polite">
-            {getMutationErrorMessage(resendInvite.error)}
-          </section>
-        </VisuallyHidden>
-      </AlertDialog.Root>
-      <Dialog.Root
-        open={successDialogIsOpen}
-        onOpenChange={(isOpen) => {
-          if (!isOpen) {
-            props.onOpenChange?.(false);
-          }
-          setSuccessDialogIsOpen(isOpen);
-        }}
-      >
-        <DialogContent
-          maxWidth="360px"
-          onOpenAutoFocus={() => {
-            requestAnimationFrame(() => {
-              successButtonRef.current?.focus();
-            });
-          }}
-        >
-          <Dialog.Title>Invite sent</Dialog.Title>
-          <Dialog.Description>
-            The invite email has been resent to{" "}
-            <Text weight="bold">{user.email}</Text>
-          </Dialog.Description>
-          <Flex gap="3" justify="end" mt="5">
-            <Dialog.Close>
-              <PrimaryButton ref={successButtonRef}>Close</PrimaryButton>
-            </Dialog.Close>
-          </Flex>
-        </DialogContent>
-      </Dialog.Root>
-    </>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  if (!error) {
-    return "";
-  }
-  // TODO Handle server errors
-  return "There was an error sending the invite. Please try again.";
-}

package/src/lib/reset-mfa-dialog.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { AlertDialog, Flex } from "@radix-ui/themes";
-import { type ReactNode } from "react";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  SecondaryButton,
-} from "./elements";
-import { useDeleteTotpFactors } 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 ResetMfaDialogProps extends AlertDialog.RootProps {
-  children?: ReactNode;
-  isPasswordSet: boolean;
-}
-
-export function ResetMfaDialog({
-  children,
-  isPasswordSet,
-  ...props
-}: ResetMfaDialogProps) {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = React.useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <AlertDialog.Root {...props} open={open} onOpenChange={setOpen}>
-      <AlertDialog.Trigger>{children}</AlertDialog.Trigger>
-
-      <AlertDialogContent maxWidth="480px">
-        <ElevatedAccess type="alert">
-          <Content onClose={handleClose} isPasswordSet={isPasswordSet} />
-        </ElevatedAccess>
-      </AlertDialogContent>
-    </AlertDialog.Root>
-  );
-}
-
-function Content({
-  onClose,
-  isPasswordSet,
-}: {
-  onClose: () => void;
-  isPasswordSet: boolean;
-}) {
-  const securitySettings = useSecuritySettings();
-  const resetMfa = useDeleteTotpFactors();
-
-  const onSubmitForm = () => {
-    resetMfa.mutate();
-  };
-
-  useDialogClose(resetMfa.isSuccess, () => {
-    securitySettings.update("Mfa", false);
-  });
-
-  return (
-    <>
-      <AlertDialog.Title>
-        Disable multi-factor authentication?
-      </AlertDialog.Title>
-      <AlertDialog.Description>
-        Turning off MFA will remove the additional layer of security on your
-        account.{" "}
-        {isPasswordSet
-          ? "We will only ask for your password during sign-in."
-          : "We will not ask for additional verification during sign-in."}
-      </AlertDialog.Description>
-
-      <Flex gap="3" justify="end" mt="5" asChild>
-        <form
-          onSubmit={(event) => {
-            event.preventDefault();
-            onSubmitForm();
-          }}
-        >
-          <AlertDialog.Cancel>
-            <SecondaryButton
-              disabled={resetMfa.isPending || resetMfa.isSuccess}
-            >
-              Cancel
-            </SecondaryButton>
-          </AlertDialog.Cancel>
-
-          <SaveButton
-            asChild
-            loading={resetMfa.isPending}
-            done={resetMfa.isSuccess}
-            onDone={onClose}
-          >
-            <DestructiveButton type="submit">Disable</DestructiveButton>
-          </SaveButton>
-        </form>
-      </Flex>
-    </>
-  );
-}