@workos-inc/widgets 1.4.0 → 1.4.1

package/dist/cjs/lib/edit-user-role-dialog.cjs

@@ -0,0 +1,321 @@
+"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 edit_user_role_dialog_exports = {};
+__export(edit_user_role_dialog_exports, {
+  EditSingleUserRoleDialogContent: () => EditSingleUserRoleDialogContent,
+  EditUserRoleDialog: () => EditUserRoleDialog
+});
+module.exports = __toCommonJS(edit_user_role_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var import_user = require("./api/user.js");
+var import_elements = require("./elements.js");
+var import_utils = require("./utils.js");
+var import_endpoint = require("../api/endpoint.js");
+function EditUserRoleDialog({
+  children,
+  user,
+  ...props
+}) {
+  const rolesAndConfigQuery = (0, import_endpoint.useRolesAndConfig)({
+    query: {
+      initialData: { roles: [], multipleRolesEnabled: false }
+    }
+  });
+  const { data, ...restQueryState } = rolesAndConfigQuery;
+  const queryState = {
+    error: restQueryState.error,
+    isLoading: restQueryState.isLoading,
+    isSuccess: restQueryState.isSuccess
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Root, { ...props, children: [
+    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Trigger, { children }),
+    data.multipleRolesEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      EditMultipleUserRolesDialogContent,
+      {
+        user,
+        roles: data.roles,
+        queryState,
+        onFormSubmitSuccess: () => props.onOpenChange(false)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      EditSingleUserRoleDialogContent,
+      {
+        user,
+        roles: data.roles,
+        queryState,
+        onFormSubmitSuccess: () => props.onOpenChange(false)
+      }
+    )
+  ] });
+}
+function EditSingleUserRoleDialogContent({
+  user,
+  roles,
+  queryState,
+  onFormSubmitSuccess
+}) {
+  const displayName = (0, import_utils.getBestName)(user) || user.email;
+  const updateUser = (0, import_user.useUpdateUserRole)();
+  const [selectedRole, setSelectedRole] = (0, import_react.useState)(
+    user.roles?.at(0)?.slug || "Unknown"
+  );
+  const onSubmitForm = ({ id, roles: roles2 }) => {
+    updateUser.mutate(
+      { userId: id, data: { roles: roles2 } },
+      {
+        onSuccess: () => {
+          onFormSubmitSuccess();
+        }
+      }
+    );
+  };
+  const rootId = React.useId();
+  const formId = `edit-user-form-${rootId}`;
+  const selectId = `role-select-${rootId}`;
+  const selectLabelId = `${selectId}-label`;
+  const infoId = `${selectId}-info`;
+  const errorId = `${selectId}-error`;
+  const showErrorMessage = !!queryState.error;
+  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DialogContent, { maxWidth: "480px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { children: "Edit role" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Description, { children: [
+      "Select the role to assign to ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: displayName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mt: "2", direction: "column", gap: "1", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        id: formId,
+        onSubmit: async (event) => {
+          event.preventDefault();
+          onSubmitForm({ id: user.id, roles: [selectedRole] });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_themes.Select.Root,
+            {
+              name: "roles",
+              value: selectedRole ?? "Unknown",
+              onValueChange: setSelectedRole,
+              disabled: queryState.isLoading || showSingleRoleInfo,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: queryState.isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_elements.SelectTrigger,
+                  {
+                    id: selectId,
+                    placeholder: "Assign a role",
+                    "aria-labelledby": selectLabelId,
+                    "aria-invalid": showErrorMessage || void 0,
+                    "aria-describedby": [showErrorMessage && errorId, showSingleRoleInfo && infoId].filter(Boolean).join(" ") || void 0
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectContent, { children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: role.slug, children: role.name }, role.slug)) })
+              ]
+            }
+          ),
+          showErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "red", size: "2", id: errorId, children: getRoleSelectErrorMessage(queryState.error) }) : null,
+          showSingleRoleInfo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "gray", size: "2", id: infoId, mt: "1", children: "You cannot update the role for this user as there is only one role available." }) : null
+        ]
+      }
+    ) }),
+    updateUser.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: getMutationErrorMessage(updateUser.error) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { mt: "5", gap: "3", justify: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { disabled: updateUser.isPending, children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.PrimaryButton,
+        {
+          form: formId,
+          loading: updateUser.isPending,
+          disabled: queryState.isLoading || showSingleRoleInfo || void 0,
+          children: "Save"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: getMutationErrorMessage(updateUser.error) }) })
+  ] });
+}
+function EditMultipleUserRolesDialogContent({
+  user,
+  roles,
+  queryState,
+  onFormSubmitSuccess
+}) {
+  const displayName = (0, import_utils.getBestName)(user) || user.email;
+  const updateUser = (0, import_user.useUpdateUserRole)();
+  const [error, setError] = (0, import_react.useState)(null);
+  React.useEffect(() => {
+    if (queryState.error && !error) {
+      setError("There was an error fetching roles. Please try again.");
+    }
+  }, [queryState.error, error]);
+  const onSubmitForm = ({ id, roles: roles2 }) => {
+    if (roles2.length === 0) {
+      setError("Please select at least one role");
+      return;
+    }
+    updateUser.mutate(
+      { userId: id, data: { roles: roles2 } },
+      {
+        onSuccess: () => {
+          onFormSubmitSuccess();
+        },
+        onError: () => {
+          setError(
+            "There was an error updating the user role. Please try again."
+          );
+        }
+      }
+    );
+  };
+  const rootId = React.useId();
+  const formId = `edit-user-form-${rootId}`;
+  const checkboxGroupId = `role-checkbox-group-${rootId}`;
+  const infoId = `${checkboxGroupId}-info`;
+  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DialogContent, { maxWidth: "480px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_themes.Flex,
+      {
+        direction: "column",
+        gap: "1",
+        maxHeight: "calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)",
+        minHeight: "200px",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { children: "Edit roles" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Description, { children: [
+            "Select the roles to assign to ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: displayName })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mt: "4", direction: "column", gap: "1", asChild: true, minHeight: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_themes.Card,
+            {
+              asChild: true,
+              style: { display: "flex", padding: "2px 0", flexGrow: 0 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "form",
+                {
+                  id: formId,
+                  onSubmit: async (event) => {
+                    event.preventDefault();
+                    const formData = new FormData(event.currentTarget);
+                    const selectedRoles = formData.getAll("roles").map((role) => role.toString());
+                    onSubmitForm({ id: user.id, roles: selectedRoles });
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_themes.CheckboxGroup.Root,
+                    {
+                      defaultValue: user.roles?.map((role) => role.slug) || [],
+                      name: "roles",
+                      style: { gap: "0" },
+                      id: checkboxGroupId,
+                      onValueChange: (values) => {
+                        if (error && values.length > 0) {
+                          setError("");
+                        }
+                      },
+                      children: roles.map((role, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Box, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { px: "4", justify: "center", py: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_themes.CheckboxGroup.Item,
+                          {
+                            value: role.slug,
+                            style: {
+                              width: "100%",
+                              gap: "var(--space-3)",
+                              alignItems: "center"
+                            },
+                            disabled: showSingleRoleInfo,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", width: "100%", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", size: "2", children: role.name }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_themes.Text,
+                                {
+                                  color: "gray",
+                                  size: "2",
+                                  style: {
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap"
+                                  },
+                                  children: role.description
+                                }
+                              )
+                            ] })
+                          }
+                        ) }),
+                        i !== roles.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, { orientation: "horizontal", size: "4" })
+                      ] }, role.slug))
+                    }
+                  ) })
+                }
+              )
+            }
+          ) }),
+          showSingleRoleInfo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "gray", size: "2", id: infoId, mt: "1", children: "You cannot update the role for this user as there is only one role available." }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: error }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { mt: "5", gap: "3", justify: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { disabled: updateUser.isPending, children: "Cancel" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.PrimaryButton,
+              {
+                form: formId,
+                loading: updateUser.isPending,
+                disabled: queryState.isLoading || showSingleRoleInfo || void 0,
+                children: "Save"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: getMutationErrorMessage(updateUser.error) }) })
+  ] });
+}
+function getRoleSelectErrorMessage(error) {
+  if (!error) {
+    return null;
+  }
+  return "There was an error fetching roles. Please try again.";
+}
+function getMutationErrorMessage(error) {
+  if (!error) {
+    return null;
+  }
+  return "There was an error updating the user role. Please try again.";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditSingleUserRoleDialogContent,
+  EditUserRoleDialog
+});
+//# sourceMappingURL=edit-user-role-dialog.cjs.map

package/dist/cjs/lib/edit-user-role-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/edit-user-role-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Callout,\n  CheckboxGroup,\n  Dialog,\n  Flex,\n  Select,\n  ScrollArea,\n  Text,\n  VisuallyHidden,\n  Separator,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useState } from \"react\";\nimport { useUpdateUserRole } from \"./api/user.js\";\nimport {\n  DialogContent,\n  PrimaryButton,\n  SecondaryButton,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  Skeleton,\n} from \"./elements.js\";\nimport { getBestName } from \"./utils.js\";\nimport {\n  Member,\n  MemberRole,\n  RolesAndConfig403,\n  RolesAndConfig404,\n  useRolesAndConfig,\n} from \"../api/endpoint.js\";\n\ninterface EditUserRoleDialogProps extends Dialog.RootProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function EditUserRoleDialog({\n  children,\n  user,\n  ...props\n}: EditUserRoleDialogProps) {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { data, ...restQueryState } = rolesAndConfigQuery;\n  const queryState = {\n    error: restQueryState.error,\n    isLoading: restQueryState.isLoading,\n    isSuccess: restQueryState.isSuccess,\n  };\n\n  return (\n    <Dialog.Root {...props}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      {data.multipleRolesEnabled ? (\n        <EditMultipleUserRolesDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      ) : (\n        <EditSingleUserRoleDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\ninterface EditSingleUserRoleDialogContentProps {\n  user: Member;\n  roles: MemberRole[];\n  queryState: {\n    error: RolesAndConfig403 | RolesAndConfig404 | null;\n    isLoading: boolean;\n    isSuccess: boolean;\n  };\n  onFormSubmitSuccess: () => void;\n}\n\nexport function EditSingleUserRoleDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditSingleUserRoleDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [selectedRole, setSelectedRole] = useState(\n    user.roles?.at(0)?.slug || \"Unknown\",\n  );\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const selectId = `role-select-${rootId}`;\n  const selectLabelId = `${selectId}-label`;\n  const infoId = `${selectId}-info`;\n  const errorId = `${selectId}-error`;\n  const showErrorMessage = !!queryState.error;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n\n  return (\n    <DialogContent maxWidth=\"480px\">\n      <Dialog.Title>Edit role</Dialog.Title>\n      <Dialog.Description>\n        Select the role to assign to <Text weight=\"bold\">{displayName}</Text>\n      </Dialog.Description>\n      <Flex mt=\"2\" direction=\"column\" gap=\"1\" asChild>\n        <form\n          id={formId}\n          onSubmit={async (event) => {\n            event.preventDefault();\n            onSubmitForm({ id: user.id, roles: [selectedRole] });\n          }}\n        >\n          <Select.Root\n            name=\"roles\"\n            value={selectedRole ?? \"Unknown\"}\n            onValueChange={setSelectedRole}\n            disabled={queryState.isLoading || showSingleRoleInfo}\n          >\n            <Skeleton loading={queryState.isLoading}>\n              <SelectTrigger\n                id={selectId}\n                placeholder=\"Assign a role\"\n                aria-labelledby={selectLabelId}\n                aria-invalid={showErrorMessage || undefined}\n                aria-describedby={\n                  [showErrorMessage && errorId, showSingleRoleInfo && infoId]\n                    .filter(Boolean)\n                    .join(\" \") || undefined\n                }\n              />\n            </Skeleton>\n\n            <SelectContent>\n              {roles.map((role) => (\n                <SelectItem key={role.slug} value={role.slug}>\n                  {role.name}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select.Root>\n\n          {showErrorMessage ? (\n            <Text color=\"red\" size=\"2\" id={errorId}>\n              {getRoleSelectErrorMessage(queryState.error)}\n            </Text>\n          ) : null}\n\n          {showSingleRoleInfo ? (\n            <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n              You cannot update the role for this user as there is only one role\n              available.\n            </Text>\n          ) : null}\n        </form>\n      </Flex>\n\n      {updateUser.error ? (\n        <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(updateUser.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n        <Dialog.Close>\n          <SecondaryButton disabled={updateUser.isPending}>\n            Cancel\n          </SecondaryButton>\n        </Dialog.Close>\n\n        <PrimaryButton\n          form={formId}\n          loading={updateUser.isPending}\n          disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n        >\n          Save\n        </PrimaryButton>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </DialogContent>\n  );\n}\n\ntype EditMultipleUserRolesDialogContentProps =\n  EditSingleUserRoleDialogContentProps;\n\nfunction EditMultipleUserRolesDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditMultipleUserRolesDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [error, setError] = useState<string | null>(null);\n\n  React.useEffect(() => {\n    if (queryState.error && !error) {\n      setError(\"There was an error fetching roles. Please try again.\");\n    }\n  }, [queryState.error, error]);\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    if (roles.length === 0) {\n      setError(\"Please select at least one role\");\n      return;\n    }\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n        onError: () => {\n          setError(\n            \"There was an error updating the user role. Please try again.\",\n          );\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const checkboxGroupId = `role-checkbox-group-${rootId}`;\n  const infoId = `${checkboxGroupId}-info`;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n  return (\n    <DialogContent maxWidth=\"480px\">\n      <Flex\n        direction=\"column\"\n        gap=\"1\"\n        maxHeight=\"calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)\"\n        minHeight=\"200px\"\n      >\n        <Dialog.Title>Edit roles</Dialog.Title>\n        <Dialog.Description>\n          Select the roles to assign to <Text weight=\"bold\">{displayName}</Text>\n        </Dialog.Description>\n        <Flex mt=\"4\" direction=\"column\" gap=\"1\" asChild minHeight=\"0\">\n          <Card\n            asChild\n            style={{ display: \"flex\", padding: \"2px 0\", flexGrow: 0 }}\n          >\n            <form\n              id={formId}\n              onSubmit={async (event) => {\n                event.preventDefault();\n                const formData = new FormData(event.currentTarget);\n                const selectedRoles = formData\n                  .getAll(\"roles\")\n                  .map((role) => role.toString());\n                onSubmitForm({ id: user.id, roles: selectedRoles });\n              }}\n            >\n              <ScrollArea>\n                <CheckboxGroup.Root\n                  defaultValue={user.roles?.map((role) => role.slug) || []}\n                  name=\"roles\"\n                  style={{ gap: \"0\" }}\n                  id={checkboxGroupId}\n                  onValueChange={(values) => {\n                    if (error && values.length > 0) {\n                      setError(\"\");\n                    }\n                  }}\n                >\n                  {roles.map((role, i) => (\n                    <Box key={role.slug}>\n                      <Flex px=\"4\" justify=\"center\" py=\"3\">\n                        <CheckboxGroup.Item\n                          value={role.slug}\n                          style={{\n                            width: \"100%\",\n                            gap: \"var(--space-3)\",\n                            alignItems: \"center\",\n                          }}\n                          disabled={showSingleRoleInfo}\n                        >\n                          <Flex direction=\"column\" width=\"100%\">\n                            <Text weight=\"bold\" size=\"2\">\n                              {role.name}\n                            </Text>\n                            <Text\n                              color=\"gray\"\n                              size=\"2\"\n                              style={{\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                                whiteSpace: \"nowrap\",\n                              }}\n                            >\n                              {role.description}\n                            </Text>\n                          </Flex>\n                        </CheckboxGroup.Item>\n                      </Flex>\n                      {i !== roles.length - 1 && (\n                        <Separator orientation=\"horizontal\" size=\"4\" />\n                      )}\n                    </Box>\n                  ))}\n                </CheckboxGroup.Root>\n              </ScrollArea>\n            </form>\n          </Card>\n        </Flex>\n\n        {showSingleRoleInfo ? (\n          <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n            You cannot update the role for this user as there is only one role\n            available.\n          </Text>\n        ) : null}\n\n        {error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{error}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton disabled={updateUser.isPending}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <PrimaryButton\n            form={formId}\n            loading={updateUser.isPending}\n            disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n          >\n            Save\n          </PrimaryButton>\n        </Flex>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </DialogContent>\n  );\n}\n\nfunction getRoleSelectErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error fetching roles. Please try again.\";\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error updating the user role. Please try again.\";\n}\n"],"mappings":"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","names":["roles"]}

package/dist/cjs/lib/edit-user-role-dialog.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { Member, MemberRole, RolesAndConfig403, RolesAndConfig404 } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface EditUserRoleDialogProps extends Dialog.RootProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    user: Member;
+    children?: ReactNode;
+}
+declare function EditUserRoleDialog({ children, user, ...props }: EditUserRoleDialogProps): react_jsx_runtime.JSX.Element;
+interface EditSingleUserRoleDialogContentProps {
+    user: Member;
+    roles: MemberRole[];
+    queryState: {
+        error: RolesAndConfig403 | RolesAndConfig404 | null;
+        isLoading: boolean;
+        isSuccess: boolean;
+    };
+    onFormSubmitSuccess: () => void;
+}
+declare function EditSingleUserRoleDialogContent({ user, roles, queryState, onFormSubmitSuccess, }: EditSingleUserRoleDialogContentProps): react_jsx_runtime.JSX.Element;
+
+export { EditSingleUserRoleDialogContent, EditUserRoleDialog };