@workos-inc/widgets 1.4.2 → 1.5.0

package/dist/esm/lib/users-management.js

@@ -1,8 +1,29 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Box, Flex, Grid, Select, Separator, Table, Tooltip, Text, VisuallyHidden, } from "@radix-ui/themes";
-import { Avatar, Badge, IconButton, PrimaryButton, SecondaryButton, SelectContent, SelectItem, SelectTrigger, Skeleton, TextField, } from "./elements.js";
+import {
+  Box,
+  Flex,
+  Grid,
+  Select,
+  Separator,
+  Table,
+  Tooltip,
+  Text,
+  VisuallyHidden
+} from "@radix-ui/themes";
+import {
+  Avatar,
+  Badge,
+  IconButton,
+  PrimaryButton,
+  SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Skeleton,
+  TextField
+} from "./elements.js";
 import { InviteUserDialog } from "./invite-user-dialog.js";
 import { SearchProvider, useSearchContext } from "./search-provider.js";
 import { useIsHydrated } from "./use-is-hydrated.js";
@@ -14,164 +35,436 @@ import { USER_ROW_LIMIT } from "./constants.js";
 import { useUsersManagementContext } from "./users-management-context.js";
 import clsx from "clsx";
 import { GenericError } from "./generic-error.js";
-export const UsersManagement = ({ userData, rolesData, isPending, disableRolesFilter, }) => {
-    const users = userData?.data ?? [];
-    const usersCount = users?.length ?? 0;
-    const isHydrated = useIsHydrated();
-    const { listMetadata: pagination = {} } = userData;
-    const { dispatch } = useUsersManagementContext();
-    const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;
-    // we only want to show the loading indicator for some buttons if the request
-    // is still pending after 500ms. If the request is fast enough the indicator
-    // is a bit jarring.
-    const [deferredLoading, setDeferredLoading] = React.useState(false);
-    React.useEffect(() => {
-        if (isPending) {
-            const timeoutId = window.setTimeout(() => {
-                setDeferredLoading(true);
-            }, 500);
-            return () => {
-                window.clearTimeout(timeoutId);
-            };
+const UsersManagement = ({
+  userData,
+  rolesData,
+  isPending,
+  disableRolesFilter
+}) => {
+  const users = userData?.data ?? [];
+  const usersCount = users?.length ?? 0;
+  const isHydrated = useIsHydrated();
+  const { listMetadata: pagination = {} } = userData;
+  const { dispatch } = useUsersManagementContext();
+  const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;
+  const [deferredLoading, setDeferredLoading] = React.useState(false);
+  React.useEffect(() => {
+    if (isPending) {
+      const timeoutId = window.setTimeout(() => {
+        setDeferredLoading(true);
+      }, 500);
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    } else {
+      setDeferredLoading(false);
+    }
+  }, [isPending]);
+  const showPagination = !!(pagination.before || pagination.after);
+  return /* @__PURE__ */ jsx(SearchProvider, { children: /* @__PURE__ */ jsxs(UsersManagementRoot, { children: [
+    /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+        /* @__PURE__ */ jsx(Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ jsx(UsersSearch, {}) }),
+        /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ jsx(
+          UsersFilter,
+          {
+            roles: rolesData.roles,
+            disabled: disableRolesFilter
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(InviteUserDialog, { children: /* @__PURE__ */ jsx(PrimaryButton, { children: "Invite user" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Table.Root, { variant: "ghost", size: "1", children: [
+      /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "260px", children: "User" }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "100px", children: `Role${isMultipleRolesEnabled ? "s" : ""}` }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "140px", children: "Last active" }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "28px" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Table.Body,
+        {
+          style: {
+            transition: `opacity 0.2s ease-out ${isPending ? "0.2s" : "0s"}`,
+            opacity: isPending && usersCount > 0 ? 0.5 : 1
+          },
+          children: users.length > 0 ? users.map((user) => {
+            const userDisplayName = getBestName(user);
+            const dimText = user.status === "InviteRevoked" || user.status === "InviteExpired";
+            return /* @__PURE__ */ jsxs(Table.Row, { align: "center", children: [
+              /* @__PURE__ */ jsx(Table.RowHeaderCell, { children: /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  align: "center",
+                  gap: "3",
+                  overflow: "hidden",
+                  height: "var(--space-7)",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        size: "2",
+                        fallback: /* @__PURE__ */ jsx(FallbackUserIcon, {}),
+                        src: user.profilePictureUrl ?? void 0,
+                        dim: dimText
+                      }
+                    ),
+                    userDisplayName ? /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        direction: "column",
+                        align: "start",
+                        height: "var(--space-7)",
+                        justify: "center",
+                        overflow: "hidden",
+                        children: [
+                          /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                            /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: userDisplayName }),
+                            /* @__PURE__ */ jsx(UserBadge, { user })
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            TableCellText,
+                            {
+                              level: "secondary",
+                              title: user.email,
+                              dim: dimText,
+                              children: user.email
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                      /* @__PURE__ */ jsx(TableCellText, { dim: dimText, title: user.email, children: user.email }),
+                      /* @__PURE__ */ jsx(UserBadge, { user })
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(
+                UserRolesCellContent,
+                {
+                  user,
+                  isMultipleRolesEnabled,
+                  dimText
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(LastActive, { user, isHydrated }) }),
+              /* @__PURE__ */ jsx(Table.Cell, { justify: "end", children: /* @__PURE__ */ jsx(UserActionsDropdown, { user, children: /* @__PURE__ */ jsxs(IconButton, { title: "User actions", children: [
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: "User actions" }),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    width: "16",
+                    height: "16",
+                    strokeWidth: 1.5,
+                    stroke: "currentColor",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+                      }
+                    )
+                  }
+                )
+              ] }) }) })
+            ] }, user.id);
+          }) : /* @__PURE__ */ jsx(Table.Row, { align: "center", children: /* @__PURE__ */ jsx(Table.Cell, { colSpan: 4, children: /* @__PURE__ */ jsx(UsersManagementEmptyState, { isPending }) }) })
+        }
+      )
+    ] }),
+    showPagination ? /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "end", children: [
+      /* @__PURE__ */ jsx(
+        SecondaryButton,
+        {
+          size: "1",
+          disabled: !pagination.after || isPending || void 0,
+          loading: deferredLoading,
+          onClick: () => {
+            if (pagination.after) {
+              dispatch({
+                type: "SET_PAGINATION",
+                pagination: { after: pagination.after }
+              });
+            }
+          },
+          children: "Previous"
         }
-        else {
-            setDeferredLoading(false);
+      ),
+      /* @__PURE__ */ jsx(
+        SecondaryButton,
+        {
+          size: "1",
+          disabled: !pagination.before || isPending || void 0,
+          loading: deferredLoading,
+          onClick: () => {
+            if (pagination.before) {
+              dispatch({
+                type: "SET_PAGINATION",
+                pagination: { before: pagination.before }
+              });
+            }
+          },
+          children: "Next"
         }
-    }, [isPending]);
-    const showPagination = !!(pagination.before || pagination.after);
-    return (_jsx(SearchProvider, { children: _jsxs(UsersManagementRoot, { children: [_jsxs(Grid, { columns: "1fr auto", gap: "2", children: [_jsxs(Flex, { gap: "2", align: "center", children: [_jsx(Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: _jsx(UsersSearch, {}) }), _jsx(Box, { flexGrow: "0", flexShrink: "0", children: _jsx(UsersFilter, { roles: rolesData.roles, disabled: disableRolesFilter }) })] }), _jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: _jsx(InviteUserDialog, { children: _jsx(PrimaryButton, { children: "Invite user" }) }) })] }), _jsxs(Table.Root, { variant: "ghost", size: "1", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { width: "260px", children: "User" }), _jsx(Table.ColumnHeaderCell, { width: "100px", children: `Role${isMultipleRolesEnabled ? "s" : ""}` }), _jsx(Table.ColumnHeaderCell, { width: "140px", children: "Last active" }), _jsx(Table.ColumnHeaderCell, { width: "28px" })] }) }), _jsx(Table.Body, { style: {
-                                transition: `opacity 0.2s ease-out ${isPending ? "0.2s" : "0s"}`,
-                                opacity: isPending && usersCount > 0 ? 0.5 : 1,
-                            }, children: users.length > 0 ? (users.map((user) => {
-                                const userDisplayName = getBestName(user);
-                                const dimText = user.status === "InviteRevoked" ||
-                                    user.status === "InviteExpired";
-                                return (_jsxs(Table.Row, { align: "center", children: [_jsx(Table.RowHeaderCell, { children: _jsxs(Flex, { align: "center", gap: "3", overflow: "hidden", height: "var(--space-7)", children: [_jsx(Avatar, { size: "2", fallback: _jsx(FallbackUserIcon, {}), src: user.profilePictureUrl ?? undefined, dim: dimText }), userDisplayName ? (_jsxs(Flex, { direction: "column", align: "start", height: "var(--space-7)", justify: "center", overflow: "hidden", children: [_jsxs(Flex, { gap: "2", align: "center", minWidth: "0", children: [_jsx(TableCellText, { dim: dimText, children: userDisplayName }), _jsx(UserBadge, { user: user })] }), _jsx(TableCellText, { level: "secondary", title: user.email, dim: dimText, children: user.email })] })) : (_jsxs(Flex, { gap: "2", align: "center", minWidth: "0", children: [_jsx(TableCellText, { dim: dimText, title: user.email, children: user.email }), _jsx(UserBadge, { user: user })] }))] }) }), _jsx(Table.Cell, { children: _jsx(UserRolesCellContent, { user: user, isMultipleRolesEnabled: isMultipleRolesEnabled, dimText: dimText }) }), _jsx(Table.Cell, { children: _jsx(LastActive, { user: user, isHydrated: isHydrated }) }), _jsx(Table.Cell, { justify: "end", children: _jsx(UserActionsDropdown, { user: user, children: _jsxs(IconButton, { title: "User actions", children: [_jsx(VisuallyHidden, { children: "User actions" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: "16", height: "16", strokeWidth: 1.5, stroke: "currentColor", "aria-hidden": true, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" }) })] }) }) })] }, user.id));
-                            })) : (_jsx(Table.Row, { align: "center", children: _jsx(Table.Cell, { colSpan: 4, children: _jsx(UsersManagementEmptyState, { isPending: isPending }) }) })) })] }), showPagination ? (_jsxs(Flex, { gap: "2", justify: "end", children: [_jsx(SecondaryButton, { size: "1", disabled: !pagination.after || isPending || undefined, loading: deferredLoading, onClick: () => {
-                                if (pagination.after) {
-                                    dispatch({
-                                        type: "SET_PAGINATION",
-                                        pagination: { after: pagination.after },
-                                    });
-                                }
-                            }, children: "Previous" }), _jsx(SecondaryButton, { size: "1", disabled: !pagination.before || isPending || undefined, loading: deferredLoading, onClick: () => {
-                                if (pagination.before) {
-                                    dispatch({
-                                        type: "SET_PAGINATION",
-                                        pagination: { before: pagination.before },
-                                    });
-                                }
-                            }, children: "Next" })] })) : null] }) }));
+      )
+    ] }) : null
+  ] }) });
 };
-export const UsersManagementLoading = () => {
-    return (_jsxs(UsersManagementRoot, { children: [_jsxs(Grid, { columns: "1fr auto", gap: "2", children: [_jsxs(Flex, { gap: "2", align: "center", children: [_jsx(Skeleton, { loading: true, children: _jsx(Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: _jsx(TextField, {}) }) }), _jsx(Skeleton, { loading: true, children: _jsx(Box, { flexGrow: "0", flexShrink: "0", children: _jsxs(Select.Root, { value: "all", onValueChange: () => void 0, children: [_jsx(SelectTrigger, { children: "All" }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "All" }) })] }) }) })] }), _jsx(Skeleton, { loading: true, children: _jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: _jsx(PrimaryButton, { children: "Invite user" }) }) })] }), _jsxs(Table.Root, { variant: "ghost", size: "1", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { width: "260px", children: _jsx(Skeleton, { loading: true, children: "User" }) }), _jsx(Table.ColumnHeaderCell, { width: "100px", children: _jsx(Skeleton, { children: "Role" }) }), _jsx(Table.ColumnHeaderCell, { width: "140px", children: _jsx(Skeleton, { children: "Last active" }) }), _jsx(Table.ColumnHeaderCell, { width: "28px" })] }) }), _jsx(Table.Body, { children: Array.from({ length: USER_ROW_LIMIT }, (_, index) => (_jsxs(Table.Row, { align: "center", children: [_jsx(Table.RowHeaderCell, { children: _jsxs(Flex, { align: "center", gap: "3", children: [_jsx(Skeleton, { children: _jsx(Avatar, { size: "2", fallback: "F" }) }), _jsxs(Flex, { direction: "column", height: "var(--space-7)", justify: "center", children: [_jsx(Skeleton, { width: "180px", height: "var(--space-4)" }), _jsx(Skeleton, { width: "90px", height: "var(--space-3)", mt: "1" })] })] }) }), _jsx(Table.Cell, { children: _jsx(Flex, { wrap: "wrap", gap: "1", children: _jsx(Skeleton, { width: "75px", height: "var(--space-4)" }) }) }), _jsx(Table.Cell, { children: _jsx(Skeleton, { width: "120px", height: "var(--space-4)" }) }), _jsx(Table.Cell, { justify: "end" })] }, index))) })] }), _jsxs(Flex, { gap: "2", justify: "end", children: [_jsx(Skeleton, { loading: true, children: _jsx(SecondaryButton, { size: "1", children: "Previous" }) }), _jsx(Skeleton, { loading: true, children: _jsx(SecondaryButton, { size: "1", children: "Next" }) })] })] }));
+const UsersManagementLoading = () => {
+  return /* @__PURE__ */ jsxs(UsersManagementRoot, { children: [
+    /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+        /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ jsx(TextField, {}) }) }),
+        /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ jsxs(Select.Root, { value: "all", onValueChange: () => void 0, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { children: "All" }),
+          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "all", children: "All" }) })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(PrimaryButton, { children: "Invite user" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Table.Root, { variant: "ghost", size: "1", children: [
+      /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ jsx(Skeleton, { loading: true, children: "User" }) }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ jsx(Skeleton, { children: "Role" }) }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ jsx(Skeleton, { children: "Last active" }) }),
+        /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "28px" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Body, { children: Array.from({ length: USER_ROW_LIMIT }, (_, index) => /* @__PURE__ */ jsxs(Table.Row, { align: "center", children: [
+        /* @__PURE__ */ jsx(Table.RowHeaderCell, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Avatar, { size: "2", fallback: "F" }) }),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: "column",
+              height: "var(--space-7)",
+              justify: "center",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: "180px", height: "var(--space-4)" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: "90px", height: "var(--space-3)", mt: "1" })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "1", children: /* @__PURE__ */ jsx(Skeleton, { width: "75px", height: "var(--space-4)" }) }) }),
+        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Skeleton, { width: "120px", height: "var(--space-4)" }) }),
+        /* @__PURE__ */ jsx(Table.Cell, { justify: "end" })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "end", children: [
+      /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(SecondaryButton, { size: "1", children: "Previous" }) }),
+      /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(SecondaryButton, { size: "1", children: "Next" }) })
+    ] })
+  ] });
 };
-export function UsersManagementError({ error }) {
-    return (_jsx(UsersManagementRoot, { direction: "row", justify: "center", align: "center", minHeight: "676px", children: _jsx(GenericError, { error: error }) }));
+function UsersManagementError({ error }) {
+  return /* @__PURE__ */ jsx(
+    UsersManagementRoot,
+    {
+      direction: "row",
+      justify: "center",
+      align: "center",
+      minHeight: "676px",
+      children: /* @__PURE__ */ jsx(GenericError, { error })
+    }
+  );
 }
-function UsersManagementRoot({ className, children, ...props }) {
-    return (_jsx(Flex, { className: clsx("woswidgets-widget", className), "data-woswidgets-widget-id": "users-management", direction: "column", gap: "3", ...props, children: children }));
+function UsersManagementRoot({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className: clsx("woswidgets-widget", className),
+      "data-woswidgets-widget-id": "users-management",
+      direction: "column",
+      gap: "3",
+      ...props,
+      children
+    }
+  );
 }
 function UserBadge({ user }) {
-    // TODO: This is not yet available in the data. Update here after API is updated.
-    if (user.isLoggedInUser) {
-        return (_jsx(Badge, { color: "gray", style: { userSelect: "none" }, children: "You" }));
-    }
-    if (user.status === "Invited") {
-        return (_jsxs(Badge, { color: "amber", style: { userSelect: "none" }, children: [_jsx(VisuallyHidden, { children: "Status: " }), "Invited"] }));
-    }
-    if (user.status === "InviteExpired") {
-        return (_jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [_jsx(VisuallyHidden, { children: "Status: Invite " }), "Expired"] }));
-    }
-    if (user.status === "InviteRevoked") {
-        return (_jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [_jsx(VisuallyHidden, { children: "Status: Invite " }), "Revoked"] }));
-    }
-    return null;
+  if (user.isLoggedInUser) {
+    return /* @__PURE__ */ jsx(Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
+  }
+  if (user.status === "Invited") {
+    return /* @__PURE__ */ jsxs(Badge, { color: "amber", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: " }),
+      "Invited"
+    ] });
+  }
+  if (user.status === "InviteExpired") {
+    return /* @__PURE__ */ jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: Invite " }),
+      "Expired"
+    ] });
+  }
+  if (user.status === "InviteRevoked") {
+    return /* @__PURE__ */ jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: Invite " }),
+      "Revoked"
+    ] });
+  }
+  return null;
 }
 function LastActive(props) {
-    if (!props.user.lastActivityAt) {
-        return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { children: props.user.status === "Active" ? "Never" : "Not active" }), _jsx(Separator, {})] }));
-    }
-    return _jsx(LastActiveImpl, { ...props, date: props.user.lastActivityAt });
+  if (!props.user.lastActivityAt) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: props.user.status === "Active" ? "Never" : "Not active" }),
+      /* @__PURE__ */ jsx(Separator, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsx(LastActiveImpl, { ...props, date: props.user.lastActivityAt });
 }
-function LastActiveImpl({ date, isHydrated, dim, }) {
-    const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
-        const defaultTimeZone = "America/Los_Angeles";
-        const lastActiveDate = new Date(date);
-        const lastActiveDateTime = lastActiveDate.toLocaleTimeString("en-US", {
-            // hard-coded timezone before hydration to prevent server/client mismatch
-            timeZone: isHydrated ? undefined : defaultTimeZone,
-            month: "long",
-            day: "numeric",
-            year: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-        });
-        // Server and client may produce a different 'now' date, so only
-        // show comparative date if the component is hydrated to prevent a
-        // server/client mismatch
-        const lastActiveDisplay = isHydrated
-            ? getComparativeReadableDate(new Date(), lastActiveDate)
-            : lastActiveDate.toLocaleDateString("en-US", {
-                // hard-coded timezone to prevent server/client mismatch
-                timeZone: defaultTimeZone,
-                month: "long",
-                day: "numeric",
-                year: "numeric",
-            });
-        return { lastActiveDateTime, lastActiveDisplay };
-    }, [isHydrated, date]);
-    // handle cases where the DB might return an invalid date string
-    if (lastActiveDisplay === "Invalid Date") {
-        return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { children: "Unknown" }), _jsx(Separator, {})] }));
-    }
-    return (_jsx(TableCellText, { asChild: true, dim: dim, children: _jsx("time", { dateTime: date, title: lastActiveDateTime, children: lastActiveDisplay }) }));
+function LastActiveImpl({
+  date,
+  isHydrated,
+  dim
+}) {
+  const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
+    const defaultTimeZone = "America/Los_Angeles";
+    const lastActiveDate = new Date(date);
+    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString("en-US", {
+      // hard-coded timezone before hydration to prevent server/client mismatch
+      timeZone: isHydrated ? void 0 : defaultTimeZone,
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric"
+    });
+    const lastActiveDisplay2 = isHydrated ? getComparativeReadableDate(/* @__PURE__ */ new Date(), lastActiveDate) : lastActiveDate.toLocaleDateString("en-US", {
+      // hard-coded timezone to prevent server/client mismatch
+      timeZone: defaultTimeZone,
+      month: "long",
+      day: "numeric",
+      year: "numeric"
+    });
+    return { lastActiveDateTime: lastActiveDateTime2, lastActiveDisplay: lastActiveDisplay2 };
+  }, [isHydrated, date]);
+  if (lastActiveDisplay === "Invalid Date") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Unknown" }),
+      /* @__PURE__ */ jsx(Separator, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsx(TableCellText, { asChild: true, dim, children: /* @__PURE__ */ jsx("time", { dateTime: date, title: lastActiveDateTime, children: lastActiveDisplay }) });
 }
-const TableCellText = React.forwardRef(function TableCellText({ children, dim, level = "primary", ...props }, forwardedRef) {
-    return (_jsx(Text, { ref: forwardedRef, color: level === "secondary" ? "gray" : undefined, weight: level === "secondary" ? "regular" : "medium", size: level === "secondary" ? "1" : "2", truncate: true, ...props, style: dim
-            ? {
-                // TODO: use CSS var instead of hard-coded value for opacity
-                opacity: 0.6,
-                ...props.style,
-            }
-            : props.style, children: children }));
-});
-const FallbackUserIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", viewBox: "0 0 256 256", children: [_jsx("title", { children: "User icon" }), _jsx("path", { d: "M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z" })] }));
+const TableCellText = React.forwardRef(
+  function TableCellText2({ children, dim, level = "primary", ...props }, forwardedRef) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref: forwardedRef,
+        color: level === "secondary" ? "gray" : void 0,
+        weight: level === "secondary" ? "regular" : "medium",
+        size: level === "secondary" ? "1" : "2",
+        truncate: true,
+        ...props,
+        style: dim ? {
+          // TODO: use CSS var instead of hard-coded value for opacity
+          opacity: 0.6,
+          ...props.style
+        } : props.style,
+        children
+      }
+    );
+  }
+);
+const FallbackUserIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "User icon" }),
+      /* @__PURE__ */ jsx("path", { d: "M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z" })
+    ]
+  }
+);
 const UsersManagementEmptyState = ({ isPending }) => {
-    const { clearSearch } = useSearchContext();
-    const { state: { searchQuery }, } = useUsersManagementContext();
-    // When the search query is cleared, the users query is re-fetched which sends
-    // us into a pending state. When this happens we want to keep a snapshot of
-    // the previous search query while the query is revalidated. We can use this
-    // to keep the 'No users found for query' UI in place until re-fetching is
-    // complete, otherwise the view flips to 'No users found' very quickly before
-    // the full table is shown again.
-    const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({
-        isClearing: false,
-        lastSearchQuery: null,
-    });
-    const [wasPending, setWasPending] = React.useState(isPending);
-    if (wasPending !== isPending) {
-        setWasPending(isPending);
-        if (!isPending) {
-            setClearing((prev) => prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev);
-        }
+  const { clearSearch } = useSearchContext();
+  const {
+    state: { searchQuery }
+  } = useUsersManagementContext();
+  const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({
+    isClearing: false,
+    lastSearchQuery: null
+  });
+  const [wasPending, setWasPending] = React.useState(isPending);
+  if (wasPending !== isPending) {
+    setWasPending(isPending);
+    if (!isPending) {
+      setClearing(
+        (prev) => prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev
+      );
     }
-    if (searchQuery || isClearing) {
-        return (_jsxs(Flex, { align: "center", justify: "center", py: "8", direction: "column", gap: "2", children: [_jsxs(Text, { size: "2", children: ["No users found for query", " ", _jsxs(Text, { weight: "medium", children: ["\u201C", isClearing ? lastSearchQuery : searchQuery, "\u201D"] })] }), _jsx(SecondaryButton, { size: "1", onClick: () => {
-                        setClearing({ isClearing: true, lastSearchQuery: searchQuery });
-                        clearSearch();
-                    }, loading: isPending, children: "Clear search" })] }));
-    }
-    return (_jsx(Flex, { align: "center", justify: "center", py: "8", gap: "2", children: _jsx(Text, { size: "2", children: "No users found" }) }));
+  }
+  if (searchQuery || isClearing) {
+    return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", py: "8", direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "2", children: [
+        "No users found for query",
+        " ",
+        /* @__PURE__ */ jsxs(Text, { weight: "medium", children: [
+          "\u201C",
+          isClearing ? lastSearchQuery : searchQuery,
+          "\u201D"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SecondaryButton,
+        {
+          size: "1",
+          onClick: () => {
+            setClearing({ isClearing: true, lastSearchQuery: searchQuery });
+            clearSearch();
+          },
+          loading: isPending,
+          children: "Clear search"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ jsx(Text, { size: "2", children: "No users found" }) });
 };
-function UserRolesCellContent({ user, isMultipleRolesEnabled, dimText, }) {
-    if (!user.roles || user.roles.length === 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { children: "No roles assigned" }), _jsx("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })] }));
-    }
-    if (isMultipleRolesEnabled && user.roles.length > 1) {
-        return (_jsx(Tooltip, { content: user.roles?.map((role) => role.name).join(", "), maxWidth: "250px", children: _jsx(TableCellText, { dim: dimText, children: pluralize("role", user.roles.length) }) }));
-    }
-    return _jsx(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
+function UserRolesCellContent({
+  user,
+  isMultipleRolesEnabled,
+  dimText
+}) {
+  if (!user.roles || user.roles.length === 0) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: "No roles assigned" }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })
+    ] });
+  }
+  if (isMultipleRolesEnabled && user.roles.length > 1) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: user.roles?.map((role) => role.name).join(", "),
+        maxWidth: "250px",
+        children: /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: pluralize("role", user.roles.length) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
 }
+export {
+  UsersManagement,
+  UsersManagementError,
+  UsersManagementLoading
+};
 //# sourceMappingURL=users-management.js.map