@dxos/react-ui 0.1.23 → 0.1.24

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { StoryFn } from '@storybook/react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Client, Invitation, InvitationEncoder } from '@dxos/client';
+import { TestBuilder } from '@dxos/client/testing';
+import { log } from '@dxos/log';
+import { useAsyncEffect } from '@dxos/react-async';
+import { ClientProvider } from '@dxos/react-client';
+import { Loading } from '@dxos/react-components';
+
+import { JoinDialog } from './JoinDialog';
+
+export default {
+  component: JoinDialog
+};
+export const Default = {
+  decorators: [
+    (Story: StoryFn) => {
+      const n = 2;
+      const testBuilder = new TestBuilder();
+      const clients = useMemo(() => {
+        return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+      }, []);
+
+      const [invitationCode, setInvitationCode] = useState<string>();
+
+      const onInvitationEvent = useCallback((invitation: Invitation) => {
+        if (!invitationCode) {
+          const nextInvitationCode = InvitationEncoder.encode(invitation);
+          log.info('[next invitation code]', { nextInvitationCode });
+          setInvitationCode(nextInvitationCode);
+        }
+      }, []);
+
+      useAsyncEffect(async () => {
+        await Promise.all(clients.map((client) => client.initialize()));
+        log.info('[initialized]');
+
+        await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
+
+        const space = await clients[0].echo.createSpace();
+        log.info('[space created]', space);
+        space.properties.name = 'Q3 2022 Planning';
+
+        const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
+        log.info('[invitation created]', invitation);
+
+        invitation.subscribe({
+          onAuthenticating: onInvitationEvent,
+          onCancelled: (...args) => log.warn('[cancelled]', args),
+          onConnected: onInvitationEvent,
+          onConnecting: onInvitationEvent,
+          onError: onInvitationEvent,
+          onSuccess: onInvitationEvent,
+          onTimeout: (...args) => log.warn('[timeout]', args)
+        });
+
+        return () => {
+          void Promise.all(clients.map((client) => client.destroy()));
+        };
+      }, clients);
+
+      if (!invitationCode) {
+        return <Loading label='Setting things up…' />;
+      }
+
+      return (
+        <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
+          <Story args={{ initialInvitationCode: invitationCode }} />
+        </ClientProvider>
+      );
+    }
+  ]
+};

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Action, Cancel } from '@radix-ui/react-alert-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
+import { JoinPanel, JoinPanelProps } from '../../panels';
+
+export interface JoinDialogProps extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>, JoinPanelProps {}
+
+export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
+  const titleId = useId('joinDialog__title');
+  return (
+    <PanelAlertDialog {...{ slots, titleId }}>
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <JoinPanel
+          {...{
+            ...joinPanelProps,
+            titleId,
+            exitActionParent: <Cancel asChild />,
+            doneActionParent: <Action asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelAlertDialog>
+  );
+};

package/src/composites/JoinDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './JoinDialog';

package/src/composites/index.ts

@@ -2,3 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 export * from './IdentityPopover';
+export * from './JoinDialog';

package/src/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './components';
 export * from './composites';
 export * from './layouts';
 export * from './panels';

package/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+export interface PanelAlertDialogSlots {
+  root: ComponentPropsWithoutRef<typeof AlertDialog.Root>;
+  overlay: ComponentPropsWithoutRef<typeof AlertDialog.Overlay>;
+  content: ComponentPropsWithoutRef<typeof AlertDialog.Content>;
+  trigger: ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
+}
+
+export type PanelAlertDialogProps = PropsWithChildren<{
+  titleId: string;
+  slots?: Partial<PanelAlertDialogSlots>;
+}>;
+
+export const PanelAlertDialog = ({ titleId, slots = {}, children }: PanelAlertDialogProps) => {
+  return (
+    <AlertDialog.Root defaultOpen {...slots.root}>
+      {slots.trigger && <AlertDialog.Trigger {...slots.trigger} />}
+      <AlertDialog.Overlay
+        {...slots.overlay}
+        className={mx(
+          'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8',
+          slots.overlay?.className
+        )}
+      >
+        <AlertDialog.Content
+          onEscapeKeyDown={(event) => event.preventDefault()}
+          {...slots.content}
+          aria-labelledby={titleId}
+          className={mx('is-full min-is-[260px] max-is-[320px] shadow-md backdrop-blur-md', slots.content?.className)}
+        >
+          {children}
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};

package/src/layouts/PanelAlertDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelAlertDialog';

package/src/layouts/PanelPopover/PanelPopover.tsx

@@ -6,7 +6,7 @@ import React, { ComponentProps } from 'react';
 
 import { mx, Popover } from '@dxos/react-components';
 
-import { defaultPanel, defaultArrow } from '../../styles';
+import { defaultSurface, defaultArrow } from '../../styles';
 
 /**
  * This component essentially sets default styles for popovers which have panels as their content
@@ -24,7 +24,7 @@ export const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProp
           collisionPadding: 8,
           sideOffset: 4,
           ...slots?.content,
-          className: mx(defaultPanel, slots?.content?.className)
+          className: mx(defaultSurface, slots?.content?.className)
         },
         trigger: {
           ...slots?.trigger,

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -37,8 +37,7 @@ export const useTogglePanelSidebar = () => {
 
 export interface PanelSidebarProviderSlots {
   content?: ComponentProps<typeof DialogPrimitive.Content>;
-  fixedBlockStart?: ComponentProps<'div'>;
-  fixedBlockEnd?: ComponentProps<'div'>;
+  main?: ComponentProps<'div'>;
 }
 
 export interface PanelSidebarProviderProps {
@@ -46,13 +45,9 @@ export interface PanelSidebarProviderProps {
   slots?: PanelSidebarProviderSlots;
 }
 
-export const PanelSidebarProvider = ({
-  children,
-  inlineStart,
-  slots
-}: PropsWithChildren<PanelSidebarProviderProps>) => {
+export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {
   const { t } = useTranslation('os');
-  const [isLg] = useMediaQuery('lg');
+  const [isLg] = useMediaQuery('lg', { ssr: false });
   const [displayState, setInternalDisplayState] = useState<PanelSidebarState>(isLg ? 'show' : 'hide');
   const isOpen = displayState === 'show';
   const [transitionShow, setTransitionShow] = useState(isOpen);
@@ -81,30 +76,23 @@ export const PanelSidebarProvider = ({
   return (
     <PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>
       <DialogPrimitive.Root open={domShow} modal={!isLg}>
+        {/* Sidebar. */}
         <DialogPrimitive.Content
+          onOpenAutoFocus={(event) => isLg && event.preventDefault()}
+          onCloseAutoFocus={(event) => isLg && event.preventDefault()}
           {...slots?.content}
           className={mx(
-            'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out overflow-x-hidden overflow-y-auto',
-            transitionShow ? 'inline-start-0' : 'inline-start-[-272px]',
+            'fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto',
+            'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
+            transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
             slots?.content?.className
           )}
         >
           <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
           {slots?.content?.children}
         </DialogPrimitive.Content>
-        {slots?.fixedBlockStart && (
-          <div
-            role='none'
-            {...slots?.fixedBlockStart}
-            className={mx(
-              'fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
-              transitionShow ? 'inline-start-[272px]' : 'inline-start-0',
-              slots?.fixedBlockStart?.className
-            )}
-          >
-            {slots?.fixedBlockStart?.children}
-          </div>
-        )}
+
+        {/* TODO(burdon): Simple comment required. */}
         {!isLg && (
           <DialogPrimitive.Overlay
             className={mx(
@@ -115,11 +103,15 @@ export const PanelSidebarProvider = ({
             onClick={internalHide}
           />
         )}
+
+        {/* Main content. */}
         <div
           role='none'
+          {...slots?.main}
           className={mx(
-            'bs-full transition-[padding-inline-start] duration-200 ease-in-out',
-            isLg && isOpen ? 'pis-[272px]' : 'pis-0'
+            'transition-[padding-inline-start] duration-200 ease-in-out',
+            isLg && isOpen ? 'pis-sidebar' : 'pis-0',
+            slots?.main?.className
           )}
         >
           {children}

package/src/layouts/index.ts

@@ -4,3 +4,4 @@
 
 export * from './PanelPopover';
 export * from './PanelSidebar';
+export * from './PanelAlertDialog';

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { ProhibitInset } from 'phosphor-react';
+import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { useSpace } from '@dxos/react-client';
+import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
+
+import { subduedSurface } from '../../styles';
+
+export interface JoinSpaceHeadingProps {
+  titleId: string;
+  invitation?: AuthenticatingInvitationObservable;
+  onExit?: () => void;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+}
+
+export const JoinHeading = forwardRef(
+  ({ titleId, invitation, onExit, exitActionParent }: JoinSpaceHeadingProps, ref: ForwardedRef<HTMLDivElement>) => {
+    const { t } = useTranslation('os');
+
+    const space = useSpace(invitation?.invitation?.spaceKey);
+    const spaceTitle = space?.properties.name ?? '(Space not available)';
+
+    const nameId = useId('spaceDisplayName');
+
+    const exitButton = (
+      <Button compact variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0'>
+        <ProhibitInset className={getSize(5)} />
+        <span className='sr-only'>{t('exit label')}</span>
+      </Button>
+    );
+
+    return (
+      <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
+        <div role='group' className='flex items-center gap-2'>
+          <Avatar fallbackValue={invitation?.invitation?.spaceKey?.toHex() ?? ''} labelId={nameId} />
+          <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
+            <Trans
+              {...{
+                defaults: t('join space heading'),
+                components: {
+                  small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
+                  large: <span className='block leading-none' id={nameId} />
+                },
+                values: { spaceTitle }
+              }}
+            />
+          </Heading>
+          {exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton}
+        </div>
+      </div>
+    );
+  }
+);

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -0,0 +1,303 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useEffect, useReducer } from 'react';
+
+import { InvitationEncoder } from '@dxos/client';
+import { log } from '@dxos/log';
+import { useClient, useIdentity } from '@dxos/react-client';
+import { useId } from '@dxos/react-components';
+
+import { JoinHeading } from './JoinHeading';
+import { JoinAction, JoinPanelProps, JoinState } from './JoinPanelProps';
+import {
+  AdditionMethodSelector,
+  IdentitySelector,
+  IdentityInput,
+  IdentityAdded,
+  InvitationAuthenticator,
+  InvitationRescuer,
+  InvitationInput,
+  InvitationAccepted
+} from './view-states';
+
+export const JoinPanel = ({
+  initialInvitationCode,
+  titleId: propsTitleId,
+  exitActionParent,
+  onExit,
+  doneActionParent,
+  onDone
+}: JoinPanelProps) => {
+  const client = useClient();
+  const internalTitleId = useId('joinPanel__title');
+  const titleId = propsTitleId ?? internalTitleId;
+  const identity = useIdentity();
+
+  const availableIdentities = identity ? [identity] : [];
+
+  const reducer = (state: JoinState, action: JoinAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case 'added identity':
+        nextState.activeView = 'identity added';
+        nextState.selectedIdentity = action.identity;
+        break;
+      case 'add identity':
+        nextState.activeView = 'addition method selector';
+        break;
+      case 'select addition method':
+        if (action.method === 'accept device invitation') {
+          nextState.activeView = 'halo invitation acceptor';
+          if (state.unredeemedHaloInvitationCode) {
+            nextState.haloInvitation = client.echo.acceptInvitation(
+              InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
+            );
+            nextState.unredeemedHaloInvitationCode = undefined;
+            nextState.haloViewState = 'invitation authenticator';
+          } else {
+            nextState.haloViewState = 'invitation input';
+          }
+        } else {
+          nextState.activeView = 'identity input';
+          nextState.additionMethod = action.method;
+        }
+        break;
+      case 'select identity':
+        nextState.selectedIdentity = action.identity;
+        nextState.activeView = 'space invitation acceptor';
+        if (state.unredeemedSpaceInvitationCode) {
+          nextState.spaceInvitation = client.echo.acceptInvitation(
+            InvitationEncoder.decode(state.unredeemedSpaceInvitationCode)
+          );
+          nextState.unredeemedSpaceInvitationCode = undefined;
+          nextState.spaceViewState = 'invitation authenticator';
+        } else {
+          nextState.spaceViewState = 'invitation input';
+        }
+        break;
+      case 'deselect identity':
+        nextState.selectedIdentity = undefined;
+        nextState.activeView = 'identity selector';
+        break;
+      case 'cancel invitation':
+        if (action.from === 'space' && state.spaceInvitation?.invitation) {
+          void state.spaceInvitation?.cancel();
+        }
+        if (action.from === 'halo' && state.haloInvitation?.invitation) {
+          void state.haloInvitation?.cancel();
+        }
+        break;
+      case 'authenticating invitation':
+        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = 'authenticating';
+        break;
+      case 'connecting invitation':
+        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = action.invitation;
+      // eslint-disable-next-line no-fallthrough
+      case 'cancelled invitation':
+      case 'fail invitation':
+      case 'timeout invitation':
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation rescuer';
+        break;
+      case 'connect invitation':
+      case 'authenticate invitation':
+        if (action.from === 'halo' && state.haloInvitationAnnotation === 'authenticating') {
+          nextState.haloInvitationAnnotation = 'authentication failed';
+        }
+        if (action.from === 'space' && state.spaceInvitationAnnotation === 'authenticating') {
+          nextState.spaceInvitationAnnotation = 'authentication failed';
+        }
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation authenticator';
+        break;
+      case 'accepted invitation':
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation accepted';
+        break;
+      case 'reset invitation':
+        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = undefined;
+        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = undefined;
+        nextState[action.from === 'halo' ? 'unredeemedHaloInvitationCode' : 'unredeemedSpaceInvitationCode'] =
+          undefined;
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
+        break;
+    }
+    log.debug('[join panel reducer]', { action, nextState });
+    return nextState;
+  };
+
+  const [joinState, dispatch] = useReducer(reducer, {
+    unredeemedHaloInvitationCode: undefined,
+    unredeemedSpaceInvitationCode: initialInvitationCode,
+    spaceInvitation: undefined,
+    haloInvitation: undefined,
+    activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
+    selectedIdentity: undefined,
+    additionMethod: undefined,
+    spaceViewState: 'invitation input',
+    haloViewState: 'invitation input'
+  });
+
+  useEffect(() => {
+    // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
+    const attrValue =
+      joinState.activeView === 'identity input'
+        ? `${joinState.activeView}; ${joinState.additionMethod}`
+        : joinState.activeView === 'space invitation acceptor'
+        ? `${joinState.activeView}; ${joinState.spaceViewState}`
+        : joinState.activeView === 'halo invitation acceptor'
+        ? `${joinState.activeView}; ${joinState.haloViewState}`
+        : joinState.activeView;
+    log.debug('[autofocus value]', { attrValue });
+    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
+    if ($nextAutofocus) {
+      $nextAutofocus.focus();
+    }
+  }, [joinState.activeView, joinState.spaceViewState, joinState.haloViewState]);
+
+  useEffect(() => {
+    return joinState.spaceInvitation?.subscribe({
+      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'space' }),
+      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'space' }),
+      onConnected: () => dispatch({ type: 'connect invitation', from: 'space' }),
+      onError: () => dispatch({ type: 'fail invitation', from: 'space' }),
+      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'space' }),
+      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'space' })
+    });
+  }, [joinState.spaceInvitation]);
+
+  useEffect(() => {
+    return joinState.haloInvitation?.subscribe({
+      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'halo' }),
+      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'halo' }),
+      onConnected: () => dispatch({ type: 'connect invitation', from: 'halo' }),
+      onError: () => dispatch({ type: 'fail invitation', from: 'halo' }),
+      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'halo' }),
+      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'halo' })
+    });
+  }, [joinState.haloInvitation]);
+
+  return (
+    <>
+      <JoinHeading {...{ titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent }} />
+      <div role='none' className='is-full overflow-hidden'>
+        <div role='none' className='flex is-[1300%]' aria-live='polite'>
+          <IdentitySelector
+            {...{ dispatch, availableIdentities, active: joinState.activeView === 'identity selector' }}
+          />
+          <AdditionMethodSelector
+            {...{
+              dispatch,
+              availableIdentities,
+              active: joinState.activeView === 'addition method selector'
+            }}
+          />
+          <IdentityInput
+            {...{
+              dispatch,
+              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'create identity',
+              method: 'create identity'
+            }}
+          />
+          <IdentityInput
+            {...{
+              dispatch,
+              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'recover identity',
+              method: 'recover identity'
+            }}
+          />
+          <InvitationInput
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation input',
+              invitationType: 'halo'
+            }}
+          />
+          <InvitationRescuer
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation rescuer',
+              invitationType: 'halo'
+            }}
+          />
+          <InvitationAuthenticator
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' &&
+                joinState.haloViewState === 'invitation authenticator',
+              invitationType: 'halo',
+              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+            }}
+          />
+          <InvitationAccepted
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' &&
+                joinState.haloViewState === 'invitation accepted',
+              invitationType: 'halo'
+            }}
+          />
+          <IdentityAdded
+            {...{
+              dispatch,
+              addedIdentity: joinState.selectedIdentity,
+              active: joinState.activeView === 'identity added'
+            }}
+          />
+          <InvitationInput
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' && joinState.spaceViewState === 'invitation input',
+              invitationType: 'space'
+            }}
+          />
+          <InvitationRescuer
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation rescuer',
+              invitationType: 'space'
+            }}
+          />
+          <InvitationAuthenticator
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation authenticator',
+              invitationType: 'space',
+              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+            }}
+          />
+          <InvitationAccepted
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation accepted',
+              invitationType: 'space',
+              doneActionParent,
+              onDone
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+};