@dxos/react-ui 0.1.32-next.77d513e → 0.1.33

package/src/components/Clipboard/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './CopyButton';
+export * from './ClipboardProvider';

package/src/components/InvitationEmoji/InvitationEmoji.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ComponentPropsWithoutRef } from 'react';
+
+import { getSize, mx } from '@dxos/react-components';
+
+import { toEmoji } from '../../util';
+
+export type InvitationEmojiProps = {
+  invitationId?: string;
+  size?: 'lg' | 'sm';
+} & ComponentPropsWithoutRef<'div'>;
+
+export const InvitationEmoji = ({ invitationId, size = 'lg', ...rootProps }: InvitationEmojiProps) => {
+  const invitationEmoji = invitationId && toEmoji(invitationId);
+  return (
+    <div
+      role='none'
+      {...rootProps}
+      className={mx(
+        getSize(size === 'sm' ? 8 : 12),
+        'inline-flex items-center justify-center leading-none',
+        size === 'sm' ? 'text-2xl' : 'text-5xl bg-neutral-300 dark:bg-neutral-700 rounded-full',
+        rootProps.className
+      )}
+    >
+      <span role='none'>{invitationEmoji}</span>
+    </div>
+  );
+};

package/src/components/InvitationEmoji/index.ts

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

package/src/components/InvitationList/InvitationList.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import type { CancellableInvitationObservable } from '@dxos/client';
 import { defaultDescription, DensityProvider, mx, useTranslation } from '@dxos/react-components';
 
+import { ClipboardProvider } from '../Clipboard';
 import { InvitationListItem, InvitationListItemProps } from './InvitationListItem';
 
 export interface InvitationListProps extends Omit<InvitationListItemProps, 'invitation' | 'value'> {
@@ -18,10 +19,12 @@ export const InvitationList = ({ invitations, ...invitationProps }: InvitationLi
   return invitations.length ? (
     <AccordionRoot type='single' collapsible className='flex flex-col gap-1'>
       <DensityProvider density='fine'>
-        {invitations.map((invitation, index) => {
-          const value = invitation.invitation?.invitationId ?? `inv_${index}`;
-          return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
-        })}
+        <ClipboardProvider>
+          {invitations.map((invitation, index) => {
+            const value = invitation.invitation?.invitationId ?? `inv_${index}`;
+            return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
+          })}
+        </ClipboardProvider>
       </DensityProvider>
     </AccordionRoot>
   ) : (

package/src/components/InvitationList/InvitationListItem.tsx

@@ -1,7 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { Copy, ProhibitInset, QrCode, X } from '@phosphor-icons/react';
+import { ProhibitInset, QrCode, X } from '@phosphor-icons/react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useCallback } from 'react';
@@ -11,6 +11,7 @@ import { useInvitationStatus } from '@dxos/react-client';
 import { Button, getSize, mx, useId, useTranslation } from '@dxos/react-components';
 
 import { invitationStatusValue } from '../../util';
+import { CopyButton } from '../Clipboard';
 import { SharedInvitationListProps } from './InvitationListProps';
 import { InvitationStatusAvatar } from './InvitationStatusAvatar';
 
@@ -39,16 +40,13 @@ export const InvitationListItem = ({
   const handleClickRemove = useCallback(() => onClickRemove(invitation), [invitation, onClickRemove]);
 
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-  const handleClickCopy = useCallback(() => {
-    if (invitationUrl) {
-      void navigator.clipboard.writeText(invitationUrl);
-    }
-  }, [invitationUrl]);
 
   return (
     <AccordionPrimitive.Item value={value}>
       <AccordionPrimitive.Header className='flex gap-2 items-center'>
-        <InvitationStatusAvatar {...{ status, haltedAt, size: 8 }} />
+        <InvitationStatusAvatar
+          {...{ status, haltedAt, size: 8, invitationId: invitation?.invitation?.invitationId }}
+        />
         {showShare && invitationUrl ? (
           <>
             <AccordionPrimitive.Trigger asChild>
@@ -57,10 +55,7 @@ export const InvitationListItem = ({
                 <QrCode className={getSize(4)} weight='bold' />
               </Button>
             </AccordionPrimitive.Trigger>
-            <Button className='flex gap-1' onClick={handleClickCopy} data-testid='copy-invitation'>
-              <span className='pli-1'>{t('copy invitation code label')}</span>
-              <Copy className={getSize(4)} weight='bold' />
-            </Button>
+            <CopyButton value={invitationUrl} />
           </>
         ) : showAuthCode ? (
           <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>

package/src/components/InvitationList/InvitationStatusAvatar.tsx

@@ -9,6 +9,7 @@ import { getSize, mx, Size } from '@dxos/react-components';
 
 import { inactiveStrokeColor, activeStrokeColor, resolvedStrokeColor } from '../../styles';
 import { invitationStatusValue } from '../../util';
+import { InvitationEmoji } from '../InvitationEmoji';
 
 export interface InvitationStatusAvatarSlots {
   svg?: ComponentPropsWithoutRef<'svg'>;
@@ -19,6 +20,7 @@ export interface InvitationStatusAvatarProps {
   status: Invitation.State;
   haltedAt?: Invitation.State;
   slots?: InvitationStatusAvatarSlots;
+  invitationId?: string;
 }
 
 const svgSize = 32;
@@ -40,41 +42,50 @@ const circleProps: ComponentPropsWithoutRef<'circle'> = {
   strokeDasharray: `${segment - gap} ${2 * segment + gap}`
 };
 
-export const InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }: InvitationStatusAvatarProps) => {
+export const InvitationStatusAvatar = ({
+  size = 10,
+  status,
+  haltedAt,
+  slots = {},
+  invitationId
+}: InvitationStatusAvatarProps) => {
   const resolvedColor = resolvedStrokeColor(status);
   const halted =
     status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
   return (
-    <svg {...slots.svg} viewBox={`0 0 ${svgSize} ${svgSize}`} className={mx(getSize(size), slots.svg?.className)}>
-      {[...Array(nSegments)].map((_, index) => (
-        <circle
-          key={index}
-          {...circleProps}
-          strokeDashoffset={index * segment + baseOffset}
-          className={
-            index === 0
-              ? cursor === 1
-                ? halted
+    <div className='inline-block relative'>
+      <InvitationEmoji {...{ invitationId }} size='sm' className='absolute inset-0 text-base' />
+      <svg {...slots.svg} viewBox={`0 0 ${svgSize} ${svgSize}`} className={mx(getSize(size), slots.svg?.className)}>
+        {[...Array(nSegments)].map((_, index) => (
+          <circle
+            key={index}
+            {...circleProps}
+            strokeDashoffset={index * segment + baseOffset}
+            className={
+              index === 0
+                ? cursor === 1
+                  ? halted
+                    ? resolvedColor
+                    : activeStrokeColor
+                  : cursor > 1
                   ? resolvedColor
-                  : activeStrokeColor
-                : cursor > 1
-                ? resolvedColor
-                : inactiveStrokeColor
-              : index === 1
-              ? cursor === 3
-                ? halted
+                  : inactiveStrokeColor
+                : index === 1
+                ? cursor === 3
+                  ? halted
+                    ? resolvedColor
+                    : activeStrokeColor
+                  : cursor > 3
                   ? resolvedColor
-                  : activeStrokeColor
+                  : inactiveStrokeColor
                 : cursor > 3
                 ? resolvedColor
                 : inactiveStrokeColor
-              : cursor > 3
-              ? resolvedColor
-              : inactiveStrokeColor
-          }
-        />
-      ))}
-    </svg>
+            }
+          />
+        ))}
+      </svg>
+    </div>
   );
 };

package/src/components/index.ts

@@ -2,7 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './Clipboard';
 export * from './IdentityList';
+export * from './InvitationEmoji';
 export * from './InvitationList';
 export * from './PanelSeparator';
 export * from './SpaceList';

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -7,8 +7,8 @@ import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
 import { useSpace } from '@dxos/react-client';
 import { Button, defaultDescription, getSize, Heading, mx, useId, useTranslation } from '@dxos/react-components';
 
+import { InvitationEmoji } from '../../components';
 import { defaultSurface } from '../../styles';
-import { toEmoji } from '../../util';
 import { JoinPanelMode } from './JoinPanelProps';
 import { JoinState } from './joinMachine';
 
@@ -33,8 +33,7 @@ export const JoinHeading = forwardRef(
     const name = space?.properties.name;
     const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
 
-    const invitationKey = joinState?.context[mode === 'halo-only' ? 'halo' : 'space'].invitation?.invitationId;
-    const invitationEmoji = invitationKey && toEmoji(invitationKey);
+    const invitationId = joinState?.context[mode === 'halo-only' ? 'halo' : 'space'].invitation?.invitationId;
 
     const exitButton = (
       <Button
@@ -65,15 +64,7 @@ export const JoinHeading = forwardRef(
           {t(mode === 'halo-only' ? 'selecting identity heading' : 'joining space heading')}
         </Heading>
         <div role='group' className='flex items-center justify-center gap-2'>
-          <span
-            role='none'
-            className={mx(
-              getSize(12),
-              'bg-neutral-300 dark:bg-neutral-700 rounded-full text-center text-4xl leading-[3rem]'
-            )}
-          >
-            {invitationEmoji}
-          </span>
+          <InvitationEmoji {...{ invitationId }} />
           {name && <p id={nameId}>{name}</p>}
         </div>
       </div>

package/src/translations/locales/en-US.ts

@@ -7,6 +7,7 @@ export const os = {
   'identity offline description': 'Offline',
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy',
+  'copy invitation code success label': 'Copied',
   'open share panel label': 'Share',
   'joining space heading': 'Joining space',
   'join space heading': 'Join a space',