@workos-inc/widgets 1.4.2 → 1.5.0

package/dist/cjs/lib/users-management.cjs

@@ -0,0 +1,485 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var users_management_exports = {};
+__export(users_management_exports, {
+  UsersManagement: () => UsersManagement,
+  UsersManagementError: () => UsersManagementError,
+  UsersManagementLoading: () => UsersManagementLoading
+});
+module.exports = __toCommonJS(users_management_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_elements = require("./elements.js");
+var import_invite_user_dialog = require("./invite-user-dialog.js");
+var import_search_provider = require("./search-provider.js");
+var import_use_is_hydrated = require("./use-is-hydrated.js");
+var import_user_actions_dropdown = require("./user-actions-dropdown.js");
+var import_users_filter = require("./users-filter.js");
+var import_users_search = require("./users-search.js");
+var import_utils = require("./utils.js");
+var import_constants = require("./constants.js");
+var import_users_management_context = require("./users-management-context.js");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_generic_error = require("./generic-error.js");
+const UsersManagement = ({
+  userData,
+  rolesData,
+  isPending,
+  disableRolesFilter
+}) => {
+  const users = userData?.data ?? [];
+  const usersCount = users?.length ?? 0;
+  const isHydrated = (0, import_use_is_hydrated.useIsHydrated)();
+  const { listMetadata: pagination = {} } = userData;
+  const { dispatch } = (0, import_users_management_context.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__ */ (0, import_jsx_runtime.jsx)(import_search_provider.SearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UsersManagementRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "1fr auto", gap: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_users_search.UsersSearch, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_users_filter.UsersFilter,
+          {
+            roles: rolesData.roles,
+            disabled: disableRolesFilter
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: "User" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: `Role${isMultipleRolesEnabled ? "s" : ""}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: "Last active" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_themes.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 = (0, import_utils.getBestName)(user);
+            const dimText = user.status === "InviteRevoked" || user.status === "InviteExpired";
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_themes.Flex,
+                {
+                  align: "center",
+                  gap: "3",
+                  overflow: "hidden",
+                  height: "var(--space-7)",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_elements.Avatar,
+                      {
+                        size: "2",
+                        fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackUserIcon, {}),
+                        src: user.profilePictureUrl ?? void 0,
+                        dim: dimText
+                      }
+                    ),
+                    userDisplayName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_themes.Flex,
+                      {
+                        direction: "column",
+                        align: "start",
+                        height: "var(--space-7)",
+                        justify: "center",
+                        overflow: "hidden",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: userDisplayName }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            TableCellText,
+                            {
+                              level: "secondary",
+                              title: user.email,
+                              dim: dimText,
+                              children: user.email
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, title: user.email, children: user.email }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                UserRolesCellContent,
+                {
+                  user,
+                  isMultipleRolesEnabled,
+                  dimText
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LastActive, { user, isHydrated }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_actions_dropdown.UserActionsDropdown, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.IconButton, { title: "User actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "User actions" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Row, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { colSpan: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsersManagementEmptyState, { isPending }) }) })
+        }
+      )
+    ] }),
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.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"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.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"
+        }
+      )
+    ] }) : null
+  ] }) });
+};
+const UsersManagementLoading = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UsersManagementRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "1fr auto", gap: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextField, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Select.Root, { value: "all", onValueChange: () => void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectTrigger, { children: "All" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: "all", children: "All" }) })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: "User" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Role" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Last active" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Body, { children: Array.from({ length: import_constants.USER_ROW_LIMIT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Avatar, { size: "2", fallback: "F" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_themes.Flex,
+            {
+              direction: "column",
+              height: "var(--space-7)",
+              justify: "center",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "180px", height: "var(--space-4)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "90px", height: "var(--space-3)", mt: "1" })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { wrap: "wrap", gap: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "75px", height: "var(--space-4)" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "120px", height: "var(--space-4)" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end" })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Previous" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Next" }) })
+    ] })
+  ] });
+};
+function UsersManagementError({ error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    UsersManagementRoot,
+    {
+      direction: "row",
+      justify: "center",
+      align: "center",
+      minHeight: "676px",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error })
+    }
+  );
+}
+function UsersManagementRoot({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Flex,
+    {
+      className: (0, import_clsx.default)("woswidgets-widget", className),
+      "data-woswidgets-widget-id": "users-management",
+      direction: "column",
+      gap: "3",
+      ...props,
+      children
+    }
+  );
+}
+function UserBadge({ user }) {
+  if (user.isLoggedInUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
+  }
+  if (user.status === "Invited") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "amber", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: " }),
+      "Invited"
+    ] });
+  }
+  if (user.status === "InviteExpired") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
+      "Expired"
+    ] });
+  }
+  if (user.status === "InviteRevoked") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
+      "Revoked"
+    ] });
+  }
+  return null;
+}
+function LastActive(props) {
+  if (!props.user.lastActivityAt) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: props.user.status === "Active" ? "Never" : "Not active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.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 ? (0, import_utils.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Unknown" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { asChild: true, dim, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: date, title: lastActiveDateTime, children: lastActiveDisplay }) });
+}
+const TableCellText = React.forwardRef(
+  function TableCellText2({ children, dim, level = "primary", ...props }, forwardedRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.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__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "User icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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 } = (0, import_search_provider.useSearchContext)();
+  const {
+    state: { searchQuery }
+  } = (0, import_users_management_context.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__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", justify: "center", py: "8", direction: "column", gap: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", children: [
+        "No users found for query",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { weight: "medium", children: [
+          "\u201C",
+          isClearing ? lastSearchQuery : searchQuery,
+          "\u201D"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.SecondaryButton,
+        {
+          size: "1",
+          onClick: () => {
+            setClearing({ isClearing: true, lastSearchQuery: searchQuery });
+            clearSearch();
+          },
+          loading: isPending,
+          children: "Clear search"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: "No users found" }) });
+};
+function UserRolesCellContent({
+  user,
+  isMultipleRolesEnabled,
+  dimText
+}) {
+  if (!user.roles || user.roles.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "No roles assigned" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })
+    ] });
+  }
+  if (isMultipleRolesEnabled && user.roles.length > 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Tooltip,
+      {
+        content: user.roles?.map((role) => role.name).join(", "),
+        maxWidth: "250px",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: (0, import_utils.pluralize)("role", user.roles.length) })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UsersManagement,
+  UsersManagementError,
+  UsersManagementLoading
+});
+//# sourceMappingURL=users-management.cjs.map

package/dist/cjs/lib/users-management.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/users-management.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Flex,\n  Grid,\n  Select,\n  Separator,\n  Table,\n  Tooltip,\n  Text,\n  type TextProps,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n  Avatar,\n  Badge,\n  IconButton,\n  PrimaryButton,\n  SecondaryButton,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  Skeleton,\n  TextField,\n} from \"./elements.js\";\nimport { InviteUserDialog } from \"./invite-user-dialog.js\";\nimport { SearchProvider, useSearchContext } from \"./search-provider.js\";\nimport { useIsHydrated } from \"./use-is-hydrated.js\";\nimport { UserActionsDropdown } from \"./user-actions-dropdown.js\";\nimport { UsersFilter } from \"./users-filter.js\";\nimport { UsersSearch } from \"./users-search.js\";\nimport { getBestName, getComparativeReadableDate, pluralize } from \"./utils.js\";\nimport { USER_ROW_LIMIT } from \"./constants.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport clsx from \"clsx\";\nimport { Member, MemberRole, MembersQueryResult } from \"../api/endpoint.js\";\nimport { GenericError } from \"./generic-error.js\";\n\ninterface UsersManagementProps {\n  rolesData: { roles: MemberRole[]; multipleRolesEnabled: boolean };\n  userData: MembersQueryResult;\n  disableRolesFilter?: boolean;\n  // When the users list is loading new users\n  isPending: boolean;\n}\n\nexport const UsersManagement = ({\n  userData,\n  rolesData,\n  isPending,\n  disableRolesFilter,\n}: UsersManagementProps) => {\n  const users = userData?.data ?? [];\n  const usersCount = users?.length ?? 0;\n  const isHydrated = useIsHydrated();\n  const { listMetadata: pagination = {} } = userData;\n  const { dispatch } = useUsersManagementContext();\n  const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;\n\n  // we only want to show the loading indicator for some buttons if the request\n  // is still pending after 500ms. If the request is fast enough the indicator\n  // is a bit jarring.\n  const [deferredLoading, setDeferredLoading] = React.useState(false);\n  React.useEffect(() => {\n    if (isPending) {\n      const timeoutId = window.setTimeout(() => {\n        setDeferredLoading(true);\n      }, 500);\n      return () => {\n        window.clearTimeout(timeoutId);\n      };\n    } else {\n      setDeferredLoading(false);\n    }\n  }, [isPending]);\n\n  const showPagination = !!(pagination.before || pagination.after);\n\n  return (\n    <SearchProvider>\n      <UsersManagementRoot>\n        <Grid columns=\"1fr auto\" gap=\"2\">\n          <Flex gap=\"2\" align=\"center\">\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <UsersSearch />\n            </Box>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <UsersFilter\n                roles={rolesData.roles}\n                disabled={disableRolesFilter}\n              />\n            </Box>\n          </Flex>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <InviteUserDialog>\n              <PrimaryButton>Invite user</PrimaryButton>\n            </InviteUserDialog>\n          </Box>\n        </Grid>\n        <Table.Root variant=\"ghost\" size=\"1\">\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeaderCell width=\"260px\">\n                User\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"100px\">\n                {`Role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"140px\">\n                Last active\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"28px\" />\n            </Table.Row>\n          </Table.Header>\n\n          <Table.Body\n            style={{\n              transition: `opacity 0.2s ease-out ${isPending ? \"0.2s\" : \"0s\"}`,\n              opacity: isPending && usersCount > 0 ? 0.5 : 1,\n            }}\n          >\n            {users.length > 0 ? (\n              users.map((user) => {\n                const userDisplayName = getBestName(user);\n                const dimText =\n                  user.status === \"InviteRevoked\" ||\n                  user.status === \"InviteExpired\";\n                return (\n                  <Table.Row key={user.id} align=\"center\">\n                    <Table.RowHeaderCell>\n                      <Flex\n                        align=\"center\"\n                        gap=\"3\"\n                        overflow=\"hidden\"\n                        height=\"var(--space-7)\"\n                      >\n                        <Avatar\n                          size=\"2\"\n                          fallback={<FallbackUserIcon />}\n                          src={user.profilePictureUrl ?? undefined}\n                          dim={dimText}\n                        />\n\n                        {userDisplayName ? (\n                          <Flex\n                            direction=\"column\"\n                            align=\"start\"\n                            height=\"var(--space-7)\"\n                            justify=\"center\"\n                            overflow=\"hidden\"\n                          >\n                            <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                              <TableCellText dim={dimText}>\n                                {userDisplayName}\n                              </TableCellText>\n                              <UserBadge user={user} />\n                            </Flex>\n                            <TableCellText\n                              level=\"secondary\"\n                              title={user.email}\n                              dim={dimText}\n                            >\n                              {user.email}\n                            </TableCellText>\n                          </Flex>\n                        ) : (\n                          <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                            <TableCellText dim={dimText} title={user.email}>\n                              {user.email}\n                            </TableCellText>\n                            <UserBadge user={user} />\n                          </Flex>\n                        )}\n                      </Flex>\n                    </Table.RowHeaderCell>\n                    <Table.Cell>\n                      <UserRolesCellContent\n                        user={user}\n                        isMultipleRolesEnabled={isMultipleRolesEnabled}\n                        dimText={dimText}\n                      />\n                    </Table.Cell>\n                    <Table.Cell>\n                      <LastActive user={user} isHydrated={isHydrated} />\n                    </Table.Cell>\n                    <Table.Cell justify=\"end\">\n                      <UserActionsDropdown user={user}>\n                        <IconButton title=\"User actions\">\n                          <VisuallyHidden>User actions</VisuallyHidden>\n                          <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            width=\"16\"\n                            height=\"16\"\n                            strokeWidth={1.5}\n                            stroke=\"currentColor\"\n                            aria-hidden\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              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\"\n                            />\n                          </svg>\n                        </IconButton>\n                      </UserActionsDropdown>\n                    </Table.Cell>\n                  </Table.Row>\n                );\n              })\n            ) : (\n              <Table.Row align=\"center\">\n                <Table.Cell colSpan={4}>\n                  <UsersManagementEmptyState isPending={isPending} />\n                </Table.Cell>\n              </Table.Row>\n            )}\n          </Table.Body>\n        </Table.Root>\n\n        {showPagination ? (\n          <Flex gap=\"2\" justify=\"end\">\n            <SecondaryButton\n              size=\"1\"\n              disabled={!pagination.after || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.after) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: pagination.after },\n                  });\n                }\n              }}\n            >\n              Previous\n            </SecondaryButton>\n            <SecondaryButton\n              size=\"1\"\n              disabled={!pagination.before || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.before) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: pagination.before },\n                  });\n                }\n              }}\n            >\n              Next\n            </SecondaryButton>\n          </Flex>\n        ) : null}\n      </UsersManagementRoot>\n    </SearchProvider>\n  );\n};\n\nexport const UsersManagementLoading: React.FC = () => {\n  return (\n    <UsersManagementRoot>\n      <Grid columns=\"1fr auto\" gap=\"2\">\n        <Flex gap=\"2\" align=\"center\">\n          <Skeleton loading>\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <TextField />\n            </Box>\n          </Skeleton>\n          <Skeleton loading>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <Select.Root value=\"all\" onValueChange={() => void 0}>\n                <SelectTrigger>All</SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All</SelectItem>\n                </SelectContent>\n              </Select.Root>\n            </Box>\n          </Skeleton>\n        </Flex>\n        <Skeleton loading>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <PrimaryButton>Invite user</PrimaryButton>\n          </Box>\n        </Skeleton>\n      </Grid>\n      <Table.Root variant=\"ghost\" size=\"1\">\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeaderCell width=\"260px\">\n              <Skeleton loading>User</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"100px\">\n              <Skeleton>Role</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"140px\">\n              <Skeleton>Last active</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"28px\" />\n          </Table.Row>\n        </Table.Header>\n\n        <Table.Body>\n          {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (\n            <Table.Row key={index} align=\"center\">\n              <Table.RowHeaderCell>\n                <Flex align=\"center\" gap=\"3\">\n                  <Skeleton>\n                    <Avatar size=\"2\" fallback=\"F\" />\n                  </Skeleton>\n\n                  <Flex\n                    direction=\"column\"\n                    height=\"var(--space-7)\"\n                    justify=\"center\"\n                  >\n                    <Skeleton width=\"180px\" height=\"var(--space-4)\" />\n                    <Skeleton width=\"90px\" height=\"var(--space-3)\" mt=\"1\" />\n                  </Flex>\n                </Flex>\n              </Table.RowHeaderCell>\n              <Table.Cell>\n                <Flex wrap=\"wrap\" gap=\"1\">\n                  <Skeleton width=\"75px\" height=\"var(--space-4)\" />\n                </Flex>\n              </Table.Cell>\n              <Table.Cell>\n                <Skeleton width=\"120px\" height=\"var(--space-4)\" />\n              </Table.Cell>\n              <Table.Cell justify=\"end\" />\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n\n      <Flex gap=\"2\" justify=\"end\">\n        <Skeleton loading>\n          <SecondaryButton size=\"1\">Previous</SecondaryButton>\n        </Skeleton>\n        <Skeleton loading>\n          <SecondaryButton size=\"1\">Next</SecondaryButton>\n        </Skeleton>\n      </Flex>\n    </UsersManagementRoot>\n  );\n};\n\nexport function UsersManagementError({ error }: { error: unknown }) {\n  return (\n    <UsersManagementRoot\n      direction=\"row\"\n      justify=\"center\"\n      align=\"center\"\n      minHeight=\"676px\"\n    >\n      <GenericError error={error} />\n    </UsersManagementRoot>\n  );\n}\n\nfunction UsersManagementRoot({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={clsx(\"woswidgets-widget\", className)}\n      data-woswidgets-widget-id=\"users-management\"\n      direction=\"column\"\n      gap=\"3\"\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n\nfunction UserBadge({ user }: { user: Member }) {\n  // TODO: This is not yet available in the data. Update here after API is updated.\n  if (user.isLoggedInUser) {\n    return (\n      <Badge color=\"gray\" style={{ userSelect: \"none\" }}>\n        You\n      </Badge>\n    );\n  }\n  if (user.status === \"Invited\") {\n    return (\n      <Badge color=\"amber\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: </VisuallyHidden>Invited\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteExpired\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Expired\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteRevoked\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Revoked\n      </Badge>\n    );\n  }\n  return null;\n}\n\ninterface LastActiveProps {\n  user: Member;\n  isHydrated: boolean;\n  dim?: boolean;\n}\n\nfunction LastActive(props: LastActiveProps) {\n  if (!props.user.lastActivityAt) {\n    return (\n      <>\n        <VisuallyHidden>\n          {props.user.status === \"Active\" ? \"Never\" : \"Not active\"}\n        </VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n  return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;\n}\n\nfunction LastActiveImpl({\n  date,\n  isHydrated,\n  dim,\n}: LastActiveProps & { date: string }) {\n  const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {\n    const defaultTimeZone = \"America/Los_Angeles\";\n    const lastActiveDate = new Date(date);\n    const lastActiveDateTime = lastActiveDate.toLocaleTimeString(\"en-US\", {\n      // hard-coded timezone before hydration to prevent server/client mismatch\n      timeZone: isHydrated ? undefined : defaultTimeZone,\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n      hour: \"numeric\",\n      minute: \"numeric\",\n    });\n\n    // Server and client may produce a different 'now' date, so only\n    // show comparative date if the component is hydrated to prevent a\n    // server/client mismatch\n    const lastActiveDisplay = isHydrated\n      ? getComparativeReadableDate(new Date(), lastActiveDate)\n      : lastActiveDate.toLocaleDateString(\"en-US\", {\n          // hard-coded timezone to prevent server/client mismatch\n          timeZone: defaultTimeZone,\n          month: \"long\",\n          day: \"numeric\",\n          year: \"numeric\",\n        });\n\n    return { lastActiveDateTime, lastActiveDisplay };\n  }, [isHydrated, date]);\n\n  // handle cases where the DB might return an invalid date string\n  if (lastActiveDisplay === \"Invalid Date\") {\n    return (\n      <>\n        <VisuallyHidden>Unknown</VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n\n  return (\n    <TableCellText asChild dim={dim}>\n      <time dateTime={date} title={lastActiveDateTime}>\n        {lastActiveDisplay}\n      </time>\n    </TableCellText>\n  );\n}\n\nconst TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(\n  function TableCellText(\n    { children, dim, level = \"primary\", ...props },\n    forwardedRef,\n  ) {\n    return (\n      <Text\n        ref={forwardedRef}\n        color={level === \"secondary\" ? \"gray\" : undefined}\n        weight={level === \"secondary\" ? \"regular\" : \"medium\"}\n        size={level === \"secondary\" ? \"1\" : \"2\"}\n        truncate\n        {...props}\n        style={\n          dim\n            ? {\n                // TODO: use CSS var instead of hard-coded value for opacity\n                opacity: 0.6,\n                ...props.style,\n              }\n            : props.style\n        }\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\ntype TableCellTextProps = TextProps & {\n  level?: \"primary\" | \"secondary\";\n  dim?: boolean;\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <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\" />\n  </svg>\n);\n\nconst UsersManagementEmptyState = ({ isPending }: { isPending: boolean }) => {\n  const { clearSearch } = useSearchContext();\n  const {\n    state: { searchQuery },\n  } = useUsersManagementContext();\n\n  // When the search query is cleared, the users query is re-fetched which sends\n  // us into a pending state. When this happens we want to keep a snapshot of\n  // the previous search query while the query is revalidated. We can use this\n  // to keep the 'No users found for query' UI in place until re-fetching is\n  // complete, otherwise the view flips to 'No users found' very quickly before\n  // the full table is shown again.\n  const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({\n    isClearing: false,\n    lastSearchQuery: null as null | string,\n  });\n  const [wasPending, setWasPending] = React.useState(isPending);\n  if (wasPending !== isPending) {\n    setWasPending(isPending);\n    if (!isPending) {\n      setClearing((prev) =>\n        prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,\n      );\n    }\n  }\n\n  if (searchQuery || isClearing) {\n    return (\n      <Flex align=\"center\" justify=\"center\" py=\"8\" direction=\"column\" gap=\"2\">\n        <Text size=\"2\">\n          No users found for query{\" \"}\n          <Text weight=\"medium\">\n            “{isClearing ? lastSearchQuery : searchQuery}”\n          </Text>\n        </Text>\n\n        <SecondaryButton\n          size=\"1\"\n          onClick={() => {\n            setClearing({ isClearing: true, lastSearchQuery: searchQuery });\n            clearSearch();\n          }}\n          loading={isPending}\n        >\n          Clear search\n        </SecondaryButton>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex align=\"center\" justify=\"center\" py=\"8\" gap=\"2\">\n      <Text size=\"2\">No users found</Text>\n    </Flex>\n  );\n};\n\ninterface UserRolesCellContentProps {\n  user: Member;\n  isMultipleRolesEnabled: boolean;\n  dimText: boolean;\n}\n\nfunction UserRolesCellContent({\n  user,\n  isMultipleRolesEnabled,\n  dimText,\n}: UserRolesCellContentProps) {\n  if (!user.roles || user.roles.length === 0) {\n    return (\n      <>\n        <VisuallyHidden>No roles assigned</VisuallyHidden>\n        <span aria-hidden style={{ userSelect: \"none\" }}>\n          –\n        </span>\n      </>\n    );\n  }\n\n  if (isMultipleRolesEnabled && user.roles.length > 1) {\n    return (\n      <Tooltip\n        content={user.roles?.map((role) => role.name).join(\", \")}\n        maxWidth=\"250px\"\n      >\n        <TableCellText dim={dimText}>\n          {pluralize(\"role\", user.roles.length)}\n        </TableCellText>\n      </Tooltip>\n    );\n  }\n\n  return <TableCellText dim={dimText}>{user.roles?.[0]?.name}</TableCellText>;\n}\n"],"mappings":"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","names":["clsx","lastActiveDateTime","lastActiveDisplay","TableCellText"]}

package/dist/cjs/lib/users-management.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { MemberRole, MembersQueryResult } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface UsersManagementProps {
+    rolesData: {
+        roles: MemberRole[];
+        multipleRolesEnabled: boolean;
+    };
+    userData: MembersQueryResult;
+    disableRolesFilter?: boolean;
+    isPending: boolean;
+}
+declare const UsersManagement: ({ userData, rolesData, isPending, disableRolesFilter, }: UsersManagementProps) => react_jsx_runtime.JSX.Element;
+declare const UsersManagementLoading: React.FC;
+declare function UsersManagementError({ error }: {
+    error: unknown;
+}): react_jsx_runtime.JSX.Element;
+
+export { UsersManagement, UsersManagementError, UsersManagementLoading };