@tuturuuu/ui 0.26.1 → 0.28.0

package/src/components/ui/custom/workspace-access/workspace-access-invite-dialog.tsx

@@ -1,15 +1,8 @@
 'use client';
 
-import {
-  CreditCard,
-  MailPlus,
-  ShieldCheck,
-  TriangleAlert,
-  UserPlus,
-} from '@tuturuuu/icons';
+import { MailPlus, UserPlus } from '@tuturuuu/icons';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
-import { Checkbox } from '@tuturuuu/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -19,16 +12,12 @@ import {
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
 import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
 import { Textarea } from '@tuturuuu/ui/textarea';
 import { useTranslations } from 'next-intl';
 import { parseInviteEmails } from './member-filter-utils';
+import { WorkspaceAccessInviteAccessPicker } from './workspace-access-invite-access-picker';
+import { WorkspaceAccessInvitePosPanel } from './workspace-access-invite-pos-panel';
+import { WorkspaceAccessInviteRolePicker } from './workspace-access-invite-role-picker';
 
 type Props = {
   accessPreset: 'guest' | 'member' | 'pos_operator';
@@ -38,12 +27,16 @@ type Props = {
   emails: string;
   isSubmitting: boolean;
   joinedMemberCount: number;
+  noRoleLabel: string;
   onAccessPresetChange: (value: 'guest' | 'member' | 'pos_operator') => void;
   onConfirmDefaultAdminMigrationChange: (value: boolean) => void;
   onEmailsChange: (value: string) => void;
   onOpenChange: (open: boolean) => void;
+  onRoleIdsChange: (roleIds: string[]) => void;
   onSubmit: () => void;
   open: boolean;
+  roleIds: string[];
+  roles: Array<{ id: string; name: string }>;
 };
 
 export function WorkspaceAccessInviteDialog({
@@ -54,19 +47,32 @@ export function WorkspaceAccessInviteDialog({
   emails,
   isSubmitting,
   joinedMemberCount,
+  noRoleLabel,
   onAccessPresetChange,
   onConfirmDefaultAdminMigrationChange,
   onEmailsChange,
   onOpenChange,
+  onRoleIdsChange,
   onSubmit,
   open,
+  roleIds,
+  roles,
 }: Props) {
-  const t = useTranslations() as (key: string) => string;
+  const t = useTranslations();
   const count = parseInviteEmails(emails).length;
+  const selectedRoleNames = roles
+    .filter((role) => roleIds.includes(role.id))
+    .map((role) => role.name);
+  const accessSummary =
+    accessPreset === 'member'
+      ? selectedRoleNames.length > 0
+        ? `${t('ws-members.invite_access_member_tab')} · ${selectedRoleNames.join(', ')}`
+        : `${t('ws-members.invite_access_member_tab')} · ${t('ws-members.no_roles_assigned')}`
+      : t(`ws-members.invite_membership_${accessPreset}`);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(88dvh,52rem)] sm:max-w-xl sm:rounded-lg">
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(90dvh,54rem)] sm:max-w-4xl sm:rounded-2xl">
         <DialogHeader className="shrink-0 gap-0 border-b p-4 pr-12 text-left sm:p-6 sm:pr-12">
           <div className="flex items-start gap-3">
             <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/10 text-dynamic-blue">
@@ -81,114 +87,89 @@ export function WorkspaceAccessInviteDialog({
           </div>
         </DialogHeader>
 
-        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4 sm:p-6">
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-access-invite-emails">
-              {t('ws-members.invite_member')}
-            </Label>
-            <Textarea
-              id="workspace-access-invite-emails"
-              rows={5}
-              value={emails}
-              onChange={(event) => onEmailsChange(event.target.value)}
-              placeholder={'one@example.com\ntwo@example.com'}
-              className="min-h-28 resize-y"
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-access-invite-membership">
-              {t('ws-members.invite_membership_label')}
-            </Label>
-            <Select
-              value={accessPreset}
-              onValueChange={(value) =>
-                onAccessPresetChange(
-                  value as 'guest' | 'member' | 'pos_operator'
-                )
-              }
-            >
-              <SelectTrigger
-                id="workspace-access-invite-membership"
-                className="w-full"
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="member">
-                  {t('ws-members.invite_membership_member')}
-                </SelectItem>
-                <SelectItem value="guest">
-                  {t('ws-members.invite_membership_guest')}
-                </SelectItem>
-                <SelectItem value="pos_operator" disabled={!canManageRoles}>
-                  {t('ws-members.invite_membership_pos_operator')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {accessPreset === 'pos_operator' ? (
-            <div className="space-y-3 rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/5 p-3.5 sm:p-4">
-              <div className="flex items-start gap-3">
-                <div className="mt-0.5 rounded-lg border border-dynamic-blue/20 bg-background p-2 text-dynamic-blue">
-                  <CreditCard className="h-4 w-4" />
-                </div>
-                <div className="min-w-0 space-y-1">
-                  <p className="font-medium text-sm">
-                    {t('ws-members.pos_operator_title')}
-                  </p>
-                  <p className="text-muted-foreground text-sm leading-5">
-                    {t('ws-members.pos_operator_description')}
-                  </p>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          <div className="grid lg:grid-cols-[minmax(0,1fr)_minmax(22rem,1fr)] lg:divide-x">
+            <section className="space-y-4 p-4 sm:p-6">
+              <div className="flex items-center gap-2">
+                <span className="flex size-6 items-center justify-center rounded-full bg-foreground font-semibold text-background text-xs">
+                  1
+                </span>
+                <h3 className="font-semibold text-sm">
+                  {t('ws-members.invite_recipients_title')}
+                </h3>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="workspace-access-invite-emails">
+                  {t('ws-members.invite_emails_label')}
+                </Label>
+                <Textarea
+                  id="workspace-access-invite-emails"
+                  rows={7}
+                  value={emails}
+                  onChange={(event) => onEmailsChange(event.target.value)}
+                  placeholder={'one@example.com\ntwo@example.com'}
+                  className="min-h-40 resize-y rounded-xl bg-muted/20 font-mono text-sm leading-6"
+                />
+                <div className="flex items-center justify-between gap-3 text-muted-foreground text-xs">
+                  <span>{t('ws-members.invite_emails_helper')}</span>
+                  <Badge variant="outline" className="rounded-full">
+                    {t('ws-members.recipients_count', { count })}
+                  </Badge>
                 </div>
               </div>
+            </section>
 
-              <div className="grid gap-2 sm:grid-cols-2">
-                {defaultAdminEnabled ? (
-                  <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
-                    <ShieldCheck className="h-4 w-4 text-dynamic-green" />
-                    <span>
-                      {joinedMemberCount}{' '}
-                      {t('ws-members.pos_operator_existing_members')}
-                    </span>
-                  </div>
-                ) : null}
-                <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
-                  <CreditCard className="h-4 w-4 text-dynamic-blue" />
-                  <span>{t('ws-members.pos_operator_only_permission')}</span>
-                </div>
+            <section className="space-y-5 bg-muted/10 p-4 sm:p-6">
+              <div className="flex items-center gap-2">
+                <span className="flex size-6 items-center justify-center rounded-full bg-foreground font-semibold text-background text-xs">
+                  2
+                </span>
+                <h3 className="font-semibold text-sm">
+                  {t('ws-members.invite_access_title')}
+                </h3>
               </div>
 
-              {defaultAdminEnabled ? (
-                <div className="flex items-start gap-2 rounded-lg border border-dynamic-orange/25 bg-dynamic-orange/5 p-3 text-sm">
-                  <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-orange" />
-                  <p className="text-muted-foreground leading-5">
-                    {t('ws-members.pos_operator_admin_migration_note')}
-                  </p>
-                </div>
+              <WorkspaceAccessInviteAccessPicker
+                canManageRoles={canManageRoles}
+                onChange={onAccessPresetChange}
+                value={accessPreset}
+              />
+
+              {canManageRoles && accessPreset === 'member' ? (
+                <WorkspaceAccessInviteRolePicker
+                  noRoleLabel={noRoleLabel}
+                  onChange={onRoleIdsChange}
+                  roleIds={roleIds}
+                  roles={roles}
+                />
               ) : null}
 
-              <label className="flex cursor-pointer items-start gap-3 rounded-lg border bg-background p-3">
-                <Checkbox
-                  checked={confirmDefaultAdminMigration}
-                  className="mt-0.5"
-                  onCheckedChange={(checked) =>
-                    onConfirmDefaultAdminMigrationChange(checked === true)
+              {accessPreset === 'pos_operator' ? (
+                <WorkspaceAccessInvitePosPanel
+                  confirmDefaultAdminMigration={confirmDefaultAdminMigration}
+                  defaultAdminEnabled={defaultAdminEnabled}
+                  joinedMemberCount={joinedMemberCount}
+                  onConfirmDefaultAdminMigrationChange={
+                    onConfirmDefaultAdminMigrationChange
                   }
                 />
-                <span className="text-sm leading-5">
-                  {t('ws-members.pos_operator_confirmation')}
-                </span>
-              </label>
-            </div>
-          ) : null}
+              ) : null}
+            </section>
+          </div>
         </div>
 
         <DialogFooter className="grid shrink-0 grid-cols-[auto_1fr] items-center gap-3 border-t bg-muted/20 p-3 sm:flex sm:p-4">
-          <Badge variant="secondary" className="rounded-full">
-            {count} {t('ws-members.pending_invitations').toLowerCase()}
-          </Badge>
+          <div className="min-w-0">
+            <p className="font-medium text-sm">
+              {t('ws-members.recipients_count', { count })}
+            </p>
+            <p
+              className="truncate text-muted-foreground text-xs"
+              title={accessSummary}
+            >
+              {accessSummary}
+            </p>
+          </div>
           <Button
             className="min-w-0"
             disabled={

package/src/components/ui/custom/workspace-access/workspace-access-invite-pos-panel.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { CreditCard, ShieldCheck, TriangleAlert } from '@tuturuuu/icons';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import { useTranslations } from 'next-intl';
+
+export function WorkspaceAccessInvitePosPanel({
+  confirmDefaultAdminMigration,
+  defaultAdminEnabled,
+  joinedMemberCount,
+  onConfirmDefaultAdminMigrationChange,
+}: {
+  confirmDefaultAdminMigration: boolean;
+  defaultAdminEnabled: boolean;
+  joinedMemberCount: number;
+  onConfirmDefaultAdminMigrationChange: (value: boolean) => void;
+}) {
+  const t = useTranslations();
+
+  return (
+    <div className="space-y-3 rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/5 p-3.5 sm:p-4">
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5 rounded-lg border border-dynamic-blue/20 bg-background p-2 text-dynamic-blue">
+          <CreditCard className="size-4" />
+        </div>
+        <div className="min-w-0 space-y-1">
+          <p className="font-medium text-sm">
+            {t('ws-members.pos_operator_title')}
+          </p>
+          <p className="text-muted-foreground text-sm leading-5">
+            {t('ws-members.pos_operator_description')}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-2 sm:grid-cols-2">
+        {defaultAdminEnabled ? (
+          <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
+            <ShieldCheck className="size-4 text-dynamic-green" />
+            <span>
+              {joinedMemberCount}{' '}
+              {t('ws-members.pos_operator_existing_members')}
+            </span>
+          </div>
+        ) : null}
+        <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
+          <CreditCard className="size-4 text-dynamic-blue" />
+          <span>{t('ws-members.pos_operator_only_permission')}</span>
+        </div>
+      </div>
+
+      {defaultAdminEnabled ? (
+        <div className="flex items-start gap-2 rounded-lg border border-dynamic-orange/25 bg-dynamic-orange/5 p-3 text-sm">
+          <TriangleAlert className="mt-0.5 size-4 shrink-0 text-dynamic-orange" />
+          <p className="text-muted-foreground leading-5">
+            {t('ws-members.pos_operator_admin_migration_note')}
+          </p>
+        </div>
+      ) : null}
+
+      <label className="flex cursor-pointer items-start gap-3 rounded-lg border bg-background p-3 transition-colors hover:bg-muted/20 active:scale-[0.99]">
+        <Checkbox
+          checked={confirmDefaultAdminMigration}
+          className="mt-0.5"
+          onCheckedChange={(checked) =>
+            onConfirmDefaultAdminMigrationChange(checked === true)
+          }
+        />
+        <span className="text-sm leading-5">
+          {t('ws-members.pos_operator_confirmation')}
+        </span>
+      </label>
+    </div>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-invite-role-picker.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Search, ShieldUser } from '@tuturuuu/icons';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@tuturuuu/ui/accordion';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+export function WorkspaceAccessInviteRolePicker({
+  noRoleLabel,
+  onChange,
+  roleIds,
+  roles,
+}: {
+  noRoleLabel: string;
+  onChange: (roleIds: string[]) => void;
+  roleIds: string[];
+  roles: Array<{ id: string; name: string }>;
+}) {
+  const t = useTranslations();
+  const [query, setQuery] = useState('');
+  const selected = new Set(roleIds);
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleRoles = normalizedQuery
+    ? roles.filter((role) =>
+        role.name.toLocaleLowerCase().includes(normalizedQuery)
+      )
+    : roles;
+
+  const toggleRole = (roleId: string) => {
+    onChange(
+      selected.has(roleId)
+        ? roleIds.filter((id) => id !== roleId)
+        : [...roleIds, roleId]
+    );
+  };
+
+  return (
+    <Accordion type="single" collapsible defaultValue="workspace-roles">
+      <AccordionItem
+        value="workspace-roles"
+        className="overflow-hidden rounded-xl border bg-background px-3"
+      >
+        <AccordionTrigger className="items-center py-3 hover:no-underline">
+          <span className="flex min-w-0 items-center gap-3">
+            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted/30 text-dynamic-blue">
+              <ShieldUser className="size-4" />
+            </span>
+            <span className="min-w-0 text-left">
+              <span className="flex items-center gap-2">
+                <span className="truncate">
+                  {t('ws-members.role-placeholder')}
+                </span>
+                <Badge
+                  variant="outline"
+                  className="rounded-full font-normal text-[10px] uppercase tracking-wide"
+                >
+                  {t('ws-members.invite_roles_optional')}
+                </Badge>
+              </span>
+              <span
+                aria-live="polite"
+                className="mt-0.5 block text-muted-foreground text-xs"
+              >
+                {t('ws-members.roles_selected', { count: roleIds.length })}
+              </span>
+            </span>
+          </span>
+        </AccordionTrigger>
+
+        <AccordionContent className="space-y-3 border-t pt-3">
+          <p className="text-muted-foreground text-xs leading-5">
+            {t('ws-members.invite_roles_description')}
+          </p>
+
+          {roles.length > 0 ? (
+            <>
+              <div className="flex items-center gap-2">
+                <div className="relative min-w-0 flex-1">
+                  <Label
+                    htmlFor="workspace-access-invite-role-search"
+                    className="sr-only"
+                  >
+                    {t('ws-members.invite_roles_search')}
+                  </Label>
+                  <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    id="workspace-access-invite-role-search"
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={t('ws-members.invite_roles_search')}
+                    className="h-10 rounded-lg pl-9"
+                  />
+                </div>
+                {roleIds.length > 0 ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="shrink-0"
+                    onClick={() => onChange([])}
+                  >
+                    {t('ws-members.clear_all_roles')}
+                  </Button>
+                ) : null}
+              </div>
+
+              {visibleRoles.length > 0 ? (
+                <div className="max-h-52 space-y-1 overflow-y-auto rounded-lg border p-1.5">
+                  {visibleRoles.map((role) => (
+                    <label
+                      key={role.id}
+                      className={`flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 transition-colors active:scale-[0.99] ${selected.has(role.id) ? 'bg-dynamic-blue/10 text-foreground' : 'hover:bg-muted/50'}`}
+                    >
+                      <Checkbox
+                        aria-label={role.name}
+                        checked={selected.has(role.id)}
+                        onCheckedChange={() => toggleRole(role.id)}
+                      />
+                      <ShieldUser className="size-4 text-dynamic-blue" />
+                      <span className="min-w-0 flex-1 truncate font-medium text-sm">
+                        {role.name}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded-lg border border-dashed p-4 text-center text-muted-foreground text-sm">
+                  {t('ws-members.invite_roles_no_match')}
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="rounded-lg border border-dashed p-4 text-center text-muted-foreground text-sm">
+              {noRoleLabel}
+            </div>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-labels.ts

@@ -32,7 +32,7 @@ export function getWorkspaceAccessLabels(
     noRolesLabel:
       mode === 'cms'
         ? t('external-projects.settings.no_roles_label')
-        : t('ws-members.no_roles_found'),
+        : t('ws-members.no_roles_assigned'),
     protectedMemberLabel:
       mode === 'cms'
         ? t('external-projects.settings.protected_member_label')

package/src/components/ui/custom/workspace-access/workspace-access-member-row.tsx

@@ -34,6 +34,7 @@ import {
   shouldShowProtectedMemberStatus,
 } from './member-filter-utils';
 import type { WorkspaceAccessLabels, WorkspaceAccessRole } from './types';
+import { WorkspaceAccessInvitationRoleMenu } from './workspace-access-invitation-role-menu';
 
 type GuestContext = InternalApiEnhancedWorkspaceMember & {
   direct_board_guest?: boolean;
@@ -46,6 +47,7 @@ type Props = {
   canEditProfiles: boolean;
   canManageMembers: boolean;
   canManageRoles: boolean;
+  canUpdateInvitationRoles: boolean;
   defaultAdminEnabled: boolean;
   isMutating: boolean;
   labels: WorkspaceAccessLabels;
@@ -57,6 +59,11 @@ type Props = {
     userId?: null | string;
   }) => void;
   onRemoveRole: (payload: { roleId: string; userId: string }) => void;
+  onUpdateInvitationRole: (payload: {
+    email?: null | string;
+    roleIds: string[];
+    userId?: null | string;
+  }) => void;
   roles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
 };
 
@@ -64,6 +71,7 @@ export function WorkspaceAccessMemberRow({
   canEditProfiles,
   canManageMembers,
   canManageRoles,
+  canUpdateInvitationRoles,
   defaultAdminEnabled,
   isMutating,
   labels,
@@ -72,6 +80,7 @@ export function WorkspaceAccessMemberRow({
   onEditMemberProfile,
   onRemoveMember,
   onRemoveRole,
+  onUpdateInvitationRole,
   roles,
 }: Props) {
   const t = useTranslations();
@@ -81,6 +90,11 @@ export function WorkspaceAccessMemberRow({
   const memberName = getMemberDisplayName(member, t('common.unknown'));
   const guest = member as GuestContext;
   const canRemoveRoles = canManageRoles && memberId && !member.pending;
+  const canUpdateInvitationRole =
+    canUpdateInvitationRoles &&
+    member.pending &&
+    member.workspace_member_type !== 'GUEST' &&
+    Boolean(memberId || member.email);
   const canEditProfile =
     canEditProfiles &&
     canManageMembers &&
@@ -281,7 +295,16 @@ export function WorkspaceAccessMemberRow({
         </div>
 
         <div className="mt-2.5 flex flex-wrap gap-1.5 sm:mt-3">
-          {member.roles.length > 0 ? (
+          {canUpdateInvitationRole ? (
+            <WorkspaceAccessInvitationRoleMenu
+              email={member.email}
+              isMutating={isMutating}
+              onUpdate={onUpdateInvitationRole}
+              assignedRoles={member.roles}
+              roles={roles}
+              userId={member.id}
+            />
+          ) : member.roles.length > 0 ? (
             member.roles.map((role) => (
               <Badge
                 key={`${member.id ?? member.email}-${role.id}`}
@@ -297,7 +320,9 @@ export function WorkspaceAccessMemberRow({
             </Badge>
           ) : (
             <Badge variant="outline" className="h-5 px-1.5 text-xs">
-              {labels.noRolesLabel}
+              {member.pending
+                ? t('ws-members.no_role_assigned')
+                : labels.noRolesLabel}
             </Badge>
           )}
         </div>

package/src/components/ui/custom/workspace-access/workspace-access-members.tsx

@@ -11,6 +11,7 @@ type Props = {
   canEditProfiles: boolean;
   canManageMembers: boolean;
   canManageRoles: boolean;
+  canUpdateInvitationRoles: boolean;
   defaultAdminEnabled: boolean;
   isLoading: boolean;
   isMutating: boolean;
@@ -23,6 +24,11 @@ type Props = {
     userId?: null | string;
   }) => void;
   onRemoveRole: (payload: { roleId: string; userId: string }) => void;
+  onUpdateInvitationRole: (payload: {
+    email?: null | string;
+    roleIds: string[];
+    userId?: null | string;
+  }) => void;
   roles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
   searchTerm: string;
   status: string;
@@ -32,6 +38,7 @@ export function WorkspaceAccessMembers({
   canEditProfiles,
   canManageMembers,
   canManageRoles,
+  canUpdateInvitationRoles,
   defaultAdminEnabled,
   isLoading,
   isMutating,
@@ -41,6 +48,7 @@ export function WorkspaceAccessMembers({
   onEditMemberProfile,
   onRemoveMember,
   onRemoveRole,
+  onUpdateInvitationRole,
   roles,
   searchTerm,
   status,
@@ -83,6 +91,7 @@ export function WorkspaceAccessMembers({
           canEditProfiles={canEditProfiles}
           canManageMembers={canManageMembers}
           canManageRoles={canManageRoles}
+          canUpdateInvitationRoles={canUpdateInvitationRoles}
           defaultAdminEnabled={defaultAdminEnabled}
           isMutating={isMutating}
           labels={labels}
@@ -91,6 +100,7 @@ export function WorkspaceAccessMembers({
           onEditMemberProfile={onEditMemberProfile}
           onRemoveMember={onRemoveMember}
           onRemoveRole={onRemoveRole}
+          onUpdateInvitationRole={onUpdateInvitationRole}
           roles={roles}
         />
       ))}