@workos-inc/widgets 1.7.2 → 1.8.0

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

@@ -29,13 +29,15 @@ import { UsersSearch } from "./users-search.js";
 import {
   getBestName,
   getComparativeReadableDate,
-  getDomProps,
-  pluralize
+  getDomProps
 } from "./utils.js";
 import { USER_ROW_LIMIT } from "./constants.js";
 import { useUsersManagementContext } from "./users-management-context.js";
 import { GenericError } from "./generic-error.js";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
+import { useLocale } from "./i18n/use-locale.js";
 const UsersManagement = ({
   userData,
   rolesData,
@@ -49,6 +51,7 @@ const UsersManagement = ({
   const { listMetadata: pagination = {} } = userData;
   const { dispatch } = useUsersManagementContext();
   const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;
+  const translate = useTranslation();
   const [deferredLoading, setDeferredLoading] = React.useState(false);
   React.useEffect(() => {
     if (isPending) {
@@ -81,13 +84,48 @@ const UsersManagement = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(InviteUserDialog, { children: /* @__PURE__ */ jsx(Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(InviteUserDialog, { children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__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: "260px", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "100px", children: isMultipleRolesEnabled ? /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Roles",
+                id: "A1DuWM",
+                description: "Column header for user roles when multiple roles are enabled"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Role",
+                id: "nQbe+Y",
+                description: "Column header for user role when only single role is allowed"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were last active"
+              }
+            ) }),
             /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "28px" })
           ] }) }),
           /* @__PURE__ */ jsx(
@@ -161,8 +199,11 @@ const UsersManagement = ({
                   /* @__PURE__ */ jsx(Table.Cell, { justify: "end", children: /* @__PURE__ */ jsx(UserActionsDropdown, { user, children: /* @__PURE__ */ jsx(
                     IconButton,
                     {
-                      title: "User actions",
-                      "aria-label": "User actions",
+                      title: translate({
+                        defaultMessage: "User actions",
+                        id: "1nsmNS",
+                        description: "Button tooltip for opening user actions menu"
+                      }),
                       children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {})
                     }
                   ) }) })
@@ -187,7 +228,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Previous"
+              children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Previous",
+                  id: "910Q6b",
+                  description: "Button text to navigate to the previous page of users"
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -205,7 +253,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Next"
+              children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Next",
+                  id: "UlAY08",
+                  description: "Button text to navigate to the next page of users"
+                }
+              )
             }
           )
         ] }) : null
@@ -214,6 +269,15 @@ const UsersManagement = ({
   ) });
 };
 const UsersManagementLoading = (props) => {
+  const translate = useTranslation();
+  const placeholderText = /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "All",
+      id: "l/Do9/",
+      description: "Filter option to show all users"
+    }
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -223,19 +287,57 @@ const UsersManagementLoading = (props) => {
       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(Select.Trigger, { children: "All" }),
-              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: "all", children: "All" }) })
+            /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ jsx(
+              TextField,
+              {
+                disabled: true,
+                "aria-label": translate({
+                  defaultMessage: "User search",
+                  id: "lzPOKv",
+                  description: "Label for the user search input field"
+                })
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ jsxs(Select.Root, { disabled: true, value: "all", onValueChange: () => void 0, children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { children: placeholderText }),
+              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: "all", children: placeholderText }) })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ jsx(Button, { disabled: true, children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__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: "260px", children: /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Role",
+                id: "FK7mP4",
+                description: "Column header for user role"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were 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: [
@@ -260,8 +362,22 @@ const UsersManagementLoading = (props) => {
           ] }, index)) })
         ] }),
         /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "end", children: [
-          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "1", children: "Previous" }) }),
-          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "1", children: "Next" }) })
+          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Previous",
+              id: "910Q6b",
+              description: "Button text to navigate to the previous page of users"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Skeleton, { loading: true, children: /* @__PURE__ */ jsx(Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Next",
+              id: "UlAY08",
+              description: "Button text to navigate to the next page of users"
+            }
+          ) }) })
         ] })
       ]
     }
@@ -282,24 +398,73 @@ const UsersManagementError = ({
 };
 function UserBadge({ user }) {
   if (user.isLoggedInUser) {
-    return /* @__PURE__ */ jsx(Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
+    return /* @__PURE__ */ jsx(Badge, { color: "gray", style: { userSelect: "none" }, children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "You",
+        id: "ER1Vmv",
+        description: "Badge indicating the current logged-in user"
+      }
+    ) });
   }
   if (user.status === "Invited") {
     return /* @__PURE__ */ jsxs(Badge, { color: "amber", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: " }),
-      "Invited"
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Status: ",
+          id: "E2o/+H",
+          description: "Prefix for status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Invited",
+          id: "byIkUu",
+          description: "Badge status indicating user has been invited but not yet accepted"
+        }
+      )
     ] });
   }
   if (user.status === "InviteExpired") {
     return /* @__PURE__ */ jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: Invite " }),
-      "Expired"
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Expired",
+          id: "+0sQaN",
+          description: "Badge status indicating user invitation has expired"
+        }
+      )
     ] });
   }
   if (user.status === "InviteRevoked") {
     return /* @__PURE__ */ jsxs(Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Status: Invite " }),
-      "Revoked"
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Revoked",
+          id: "NNBv+r",
+          description: "Badge status indicating user invitation has been revoked"
+        }
+      )
     ] });
   }
   return null;
@@ -307,7 +472,21 @@ function UserBadge({ user }) {
 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(VisuallyHidden, { children: props.user.status === "Active" ? /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Never",
+          id: "0duvF4",
+          description: "Screen reader text indicating user has never been active"
+        }
+      ) : /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Not active",
+          id: "hd2+kk",
+          description: "Screen reader text indicating user is not active"
+        }
+      ) }),
       /* @__PURE__ */ jsx(Separator, {})
     ] });
   }
@@ -318,10 +497,11 @@ function LastActiveImpl({
   isHydrated,
   dim
 }) {
+  const locale = useLocale();
   const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
     const defaultTimeZone = "America/Los_Angeles";
     const lastActiveDate = new Date(date);
-    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString("en-US", {
+    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString(locale, {
       // hard-coded timezone before hydration to prevent server/client mismatch
       timeZone: isHydrated ? void 0 : defaultTimeZone,
       month: "long",
@@ -330,18 +510,28 @@ function LastActiveImpl({
       hour: "numeric",
       minute: "numeric"
     });
-    const lastActiveDisplay2 = isHydrated ? getComparativeReadableDate(/* @__PURE__ */ new Date(), lastActiveDate) : lastActiveDate.toLocaleDateString("en-US", {
+    const lastActiveDisplay2 = isHydrated ? getComparativeReadableDate(/* @__PURE__ */ new Date(), lastActiveDate, { locale }) : lastActiveDate.toLocaleDateString(locale, {
       // hard-coded timezone to prevent server/client mismatch
       timeZone: defaultTimeZone,
       month: "long",
       day: "numeric",
       year: "numeric"
     });
-    return { lastActiveDateTime: lastActiveDateTime2, lastActiveDisplay: lastActiveDisplay2 };
-  }, [isHydrated, date]);
+    return {
+      lastActiveDateTime: lastActiveDateTime2,
+      lastActiveDisplay: lastActiveDisplay2
+    };
+  }, [isHydrated, date, locale]);
   if (lastActiveDisplay === "Invalid Date") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: "Unknown" }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Unknown",
+          id: "UUigrK",
+          description: "Screen reader text indicating last active date is unknown"
+        }
+      ) }),
       /* @__PURE__ */ jsx(Separator, {})
     ] });
   }
@@ -402,15 +592,17 @@ const UsersManagementEmptyState = ({ isPending }) => {
   }
   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(Text, { size: "2", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "No users found for query '{query}'",
+          id: "wrEZ8+",
+          description: "Message shown when no users match the search query",
+          values: {
+            query: isClearing ? lastSearchQuery : searchQuery
+          }
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -421,12 +613,26 @@ const UsersManagementEmptyState = ({ isPending }) => {
             clearSearch();
           },
           loading: isPending,
-          children: "Clear search"
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Clear search",
+              id: "Xv3fVI",
+              description: "Button text to clear the current search query"
+            }
+          )
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ jsx(Text, { size: "2", children: "No users found" }) });
+  return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ jsx(Text, { size: "2", children: /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "No users found",
+      id: "MQ+LoA",
+      description: "Message shown when there are no users in the system"
+    }
+  ) }) });
 };
 function UserRolesCellContent({
   user,
@@ -435,19 +641,28 @@ function UserRolesCellContent({
 }) {
   if (!user.roles || user.roles.length === 0) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: "No roles assigned" }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "No roles assigned",
+          id: "CVOVB0",
+          description: "Screen reader text indicating user has no roles assigned"
+        }
+      ) }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })
     ] });
   }
   if (isMultipleRolesEnabled && user.roles.length > 1) {
-    return /* @__PURE__ */ jsx(
-      Tooltip,
+    const roleNames = user.roles?.map((role) => role.name).join(", ");
+    return /* @__PURE__ */ jsx(Tooltip, { content: roleNames, maxWidth: "250px", children: /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: /* @__PURE__ */ jsx(
+      Translation,
       {
-        content: user.roles?.map((role) => role.name).join(", "),
-        maxWidth: "250px",
-        children: /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: pluralize("role", user.roles.length) })
+        defaultMessage: "{count} roles",
+        id: "lWAmRC",
+        description: "Shows the number of roles assigned to a user (plural)",
+        values: { count: user.roles.length }
       }
-    );
+    ) }) });
   }
   return /* @__PURE__ */ jsx(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
 }