@workos-inc/widgets 1.4.1 → 1.4.2

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

@@ -1,29 +1,8 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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";
@@ -35,436 +14,164 @@ import { USER_ROW_LIMIT } from "./constants.js";
 import { useUsersManagementContext } from "./users-management-context.js";
 import clsx from "clsx";
 import { GenericError } from "./generic-error.js";
-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"
+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);
+            };
         }
-      ),
-      /* @__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"
+        else {
+            setDeferredLoading(false);
         }
-      )
-    ] }) : null
-  ] }) });
+    }, [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] }) }));
 };
-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 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" }) })] })] }));
 };
-function UsersManagementError({ error }) {
-  return /* @__PURE__ */ jsx(
-    UsersManagementRoot,
-    {
-      direction: "row",
-      justify: "center",
-      align: "center",
-      minHeight: "676px",
-      children: /* @__PURE__ */ jsx(GenericError, { error })
-    }
-  );
+export function UsersManagementError({ error }) {
+    return (_jsx(UsersManagementRoot, { direction: "row", justify: "center", align: "center", minHeight: "676px", children: _jsx(GenericError, { error: error }) }));
 }
-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 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 UserBadge({ user }) {
-  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;
+    // 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;
 }
 function LastActive(props) {
-  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 });
+    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 });
 }
-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 }) });
+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 }) }));
 }
-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 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 UsersManagementEmptyState = ({ isPending }) => {
-  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 /* @__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"
+    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);
         }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ jsx(Text, { size: "2", children: "No users found" }) });
+    }
+    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" }) }));
 };
-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 });
+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 });
 }
-export {
-  UsersManagement,
-  UsersManagementError,
-  UsersManagementLoading
-};
 //# sourceMappingURL=users-management.js.map