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

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

@@ -11,8 +11,16 @@ import {
 import * as React from "react";
 import { type Role, useRoles } from "./api/role";
 import { type InviteUserPayload, useInviteUser } from "./api/user";
-import { PrimaryButton, SecondaryButton, TextField } from "./elements";
-import { Label } from "./label";
+import {
+  DialogContent,
+  PrimaryButton,
+  SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  TextField,
+} from "./elements";
+import { Label } from "./elements";
 import { isErrorLike } from "./utils";
 
 /**
@@ -74,7 +82,7 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       {children && <Dialog.Trigger>{children}</Dialog.Trigger>}
-      <Dialog.Content maxWidth="480px" key={String(open)}>
+      <DialogContent maxWidth="480px" key={String(open)}>
         <Dialog.Title>Invite user</Dialog.Title>
         <Dialog.Description>
           An invitation will be sent to this email address with a link to
@@ -100,9 +108,10 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
                 control={(props) => (
                   <TextField
                     {...props}
-                    data-1p-ignore
+                    data-1p-ignore="true"
+                    data-lpignore="true"
                     type="email"
-                    autoComplete="email"
+                    autoComplete="off"
                     placeholder="Enter an email address"
                   />
                 )}
@@ -133,21 +142,21 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
                     value={selectedRole}
                     onValueChange={setSelectedRole}
                   >
-                    <Select.Trigger
+                    <SelectTrigger
                       id={id}
                       aria-invalid={ariaInvalid}
                       aria-describedby={ariaDescribedBy}
                     />
-                    <Select.Content>
-                      <Select.Item value={PLACEHOLDER_ROLE} disabled>
+                    <SelectContent>
+                      <SelectItem value={PLACEHOLDER_ROLE} disabled>
                         Select a role
-                      </Select.Item>
+                      </SelectItem>
                       {roles.map((role) => (
-                        <Select.Item key={role.slug} value={role.slug}>
+                        <SelectItem key={role.slug} value={role.slug}>
                           {role.name}
-                        </Select.Item>
+                        </SelectItem>
                       ))}
-                    </Select.Content>
+                    </SelectContent>
                   </Select.Root>
                 )}
               />
@@ -179,7 +188,7 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
         <VisuallyHidden asChild>
           <section aria-live="polite">{formErrors.form}</section>
         </VisuallyHidden>
-      </Dialog.Content>
+      </DialogContent>
     </Dialog.Root>
   );
 };

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

@@ -11,7 +11,13 @@ import {
 import * as React from "react";
 import { useResendUserInvite } from "./api/user";
 import type { User } from "./api/user";
-import { DestructiveButton, PrimaryButton, SecondaryButton } from "./elements";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  DialogContent,
+  PrimaryButton,
+  SecondaryButton,
+} from "./elements";
 
 interface ResendInviteDialogProps extends AlertDialog.RootProps {
   user: User;
@@ -41,7 +47,7 @@ export const ResendInviteDialog = ({
       <AlertDialog.Root {...props}>
         {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
 
-        <AlertDialog.Content
+        <AlertDialogContent
           maxWidth="480px"
           onOpenAutoFocus={() => {
             requestAnimationFrame(() => {
@@ -85,7 +91,7 @@ export const ResendInviteDialog = ({
               </DestructiveButton>
             </form>
           </Flex>
-        </AlertDialog.Content>
+        </AlertDialogContent>
 
         {/* mirror errors in a live region */}
         <VisuallyHidden asChild>
@@ -103,7 +109,7 @@ export const ResendInviteDialog = ({
           setSuccessDialogIsOpen(isOpen);
         }}
       >
-        <Dialog.Content
+        <DialogContent
           maxWidth="360px"
           onOpenAutoFocus={() => {
             requestAnimationFrame(() => {
@@ -121,7 +127,7 @@ export const ResendInviteDialog = ({
               <PrimaryButton ref={successButtonRef}>Close</PrimaryButton>
             </Dialog.Close>
           </Flex>
-        </Dialog.Content>
+        </DialogContent>
       </Dialog.Root>
     </>
   );

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

@@ -10,7 +10,11 @@ import {
 import { type ReactNode, useRef } from "react";
 import { useRevokeUserInvite } from "./api/user";
 import type { User } from "./api/user";
-import { DestructiveButton, SecondaryButton } from "./elements";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  SecondaryButton,
+} from "./elements";
 
 interface RevokeInviteDialogProps extends AlertDialog.RootProps {
   user: User;
@@ -37,7 +41,7 @@ export const RevokeInviteDialog = ({
     <AlertDialog.Root {...props}>
       {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
 
-      <AlertDialog.Content
+      <AlertDialogContent
         maxWidth="480px"
         onOpenAutoFocus={() => {
           requestAnimationFrame(() => {
@@ -83,7 +87,7 @@ export const RevokeInviteDialog = ({
             </DestructiveButton>
           </form>
         </Flex>
-      </AlertDialog.Content>
+      </AlertDialogContent>
 
       {/* mirror errors in a live region */}
       <VisuallyHidden asChild>

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

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

package/src/lib/user-actions-dropdown.tsx

@@ -5,10 +5,13 @@ import * as React from "react";
 import type { User } from "./api/user";
 import { DeleteUserDialog } from "./delete-user-dialog";
 import { EditUserDetailsDialog } from "./edit-user-details-dialog";
-import { DestructiveMenuItem, PrimaryMenuItem } from "./elements";
+import {
+  DestructiveMenuItem,
+  DropdownMenuContent,
+  PrimaryMenuItem,
+} from "./elements";
 import { ResendInviteDialog } from "./resend-invite-dialog";
 import { RevokeInviteDialog } from "./revoke-invite-dialog";
-import { useElement } from "./widgets-context";
 import { useRoles } from "./api/role";
 
 interface UserActionsDropdownProps {
@@ -30,7 +33,6 @@ export const UserActionsDropdown = ({
   const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(
     null,
   );
-  const dropdownProps = useElement("dropdown");
 
   /**
    * Assigns a key for each dialog based on its open state to ensure its
@@ -94,17 +96,7 @@ export const UserActionsDropdown = ({
     }
     return {
       actions,
-      items: items.map((item, index, array) => {
-        if (index !== array.length - 1) {
-          return (
-            <React.Fragment key={item.key}>
-              {item}
-              <DropdownMenu.Separator />
-            </React.Fragment>
-          );
-        }
-        return item;
-      }),
+      items,
     };
   }, [rolesQuery, user.actions]);
 
@@ -116,9 +108,9 @@ export const UserActionsDropdown = ({
     <>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
-        <DropdownMenu.Content size="2" align="end" {...dropdownProps}>
+        <DropdownMenuContent size="2" align="end">
           {items}
-        </DropdownMenu.Content>
+        </DropdownMenuContent>
       </DropdownMenu.Root>
 
       {actions.has("edit-role") && (

package/src/lib/users-filter.tsx

@@ -1,15 +1,9 @@
 "use client";
 
-import {
-  Checkbox,
-  DropdownMenu,
-  Flex,
-  IconButton,
-  Select,
-} from "@radix-ui/themes";
+import { Select } from "@radix-ui/themes";
 import * as React from "react";
 import type { Role } from "./api/role";
-import { PrimaryMenuItem } from "./elements";
+import { SelectContent, SelectItem, SelectTrigger } from "./elements";
 import { useUsersManagementContext } from "./users-management-context";
 
 const ALL_ROLES_NAME = "All";
@@ -17,9 +11,13 @@ const ALL_ROLES_VALUE = "null";
 
 type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {
   roles: Role[] | undefined;
+  disabled?: boolean;
 };
 
-export const UsersFilter: React.FC<UsersFilterProps> = ({ roles }) => {
+export const UsersFilter: React.FC<UsersFilterProps> = ({
+  roles,
+  disabled,
+}) => {
   const {
     dispatch,
     state: { role },
@@ -48,75 +46,17 @@ export const UsersFilter: React.FC<UsersFilterProps> = ({ roles }) => {
     <Select.Root
       value={roles ? filteredRole : "null"}
       onValueChange={onValueChange}
+      disabled={disabled}
     >
-      <Select.Trigger>{roles ? roleName : ALL_ROLES_NAME}</Select.Trigger>
-      <Select.Content>
-        <Select.Item value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</Select.Item>
+      <SelectTrigger>{roles ? roleName : ALL_ROLES_NAME}</SelectTrigger>
+      <SelectContent>
+        <SelectItem value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</SelectItem>
         {roles?.map((role) => (
           <React.Fragment key={role.slug}>
-            <Select.Item value={role.slug}>{role.name}</Select.Item>
+            <SelectItem value={role.slug}>{role.name}</SelectItem>
           </React.Fragment>
         ))}
-      </Select.Content>
+      </SelectContent>
     </Select.Root>
   );
 };
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function FilterMenu() {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <IconButton
-          size="1"
-          color="gray"
-          variant="ghost"
-          radius="full"
-          aria-label="Filter users"
-          title="Filter users"
-        >
-          <FilterIcon aria-hidden="true" />
-        </IconButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content size="2" align="end">
-        <PrimaryMenuItem>
-          <Flex gap="2" align="center">
-            <Checkbox variant="surface" />
-            One
-          </Flex>
-        </PrimaryMenuItem>
-        <PrimaryMenuItem>
-          <Flex gap="2" align="center">
-            <Checkbox />
-            Two
-          </Flex>
-        </PrimaryMenuItem>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-}
-
-const FilterIcon = React.forwardRef<
-  SVGSVGElement,
-  React.ComponentPropsWithRef<"svg">
->(function FilterIcon({ children, ...props }, forwardedRef) {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 15 15"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      ref={forwardedRef}
-      {...props}
-    >
-      {children}
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.5 1C1.22386 1 1 1.22386 1 1.5V4.5C1 4.66316 1.07961 4.81605 1.21327 4.90962L6 8.26033V13.5C6 13.6733 6.08973 13.8342 6.23713 13.9253C6.38454 14.0164 6.56861 14.0247 6.72361 13.9472L8.72361 12.9472C8.893 12.8625 9 12.6894 9 12.5V8.26033L13.7867 4.90962C13.9204 4.81605 14 4.66316 14 4.5V1.5C14 1.22386 13.7761 1 13.5 1H1.5ZM2 4.23967V2H13V4.23967L8.21327 7.59038C8.07961 7.68395 8 7.83684 8 8V12.191L7 12.691V8C7 7.83684 6.92039 7.68395 6.78673 7.59038L2 4.23967ZM12 3H3V4H12V3Z"
-        fill="black"
-      />
-    </svg>
-  );
-});

package/src/lib/users-management-context.tsx

@@ -8,7 +8,7 @@ import {
 } from "./users-management-state";
 
 export interface UsersManagementContextType {
-  authToken: string | null;
+  authToken: (() => Promise<string>) | null;
   state: UsersManagementState;
   dispatch: React.Dispatch<UsersManagementAction>;
 }