@dxos/react-ui 0.1.32-next.86f5578 → 0.1.33

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { createContext, PropsWithChildren, useCallback, useContext, useState } from 'react';
+
+export type ClipboardContextValue = {
+  textValue: string;
+  setTextValue: (nextValue: string) => Promise<void>;
+};
+
+export const ClipboardContext = createContext<ClipboardContextValue>({
+  textValue: '',
+  setTextValue: async (_) => {}
+});
+
+export const useClipboardContext = () => useContext(ClipboardContext);
+
+export const ClipboardProvider = ({ children }: PropsWithChildren<{}>) => {
+  const [textValue, setInternalTextValue] = useState('');
+  const setTextValue = useCallback(async (nextValue: string) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return <ClipboardContext.Provider value={{ textValue, setTextValue }}>{children}</ClipboardContext.Provider>;
+};

package/src/components/Clipboard/CopyButton.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, Copy } from '@phosphor-icons/react';
+import React from 'react';
+
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { useClipboardContext } from './ClipboardProvider';
+
+export type CopyButtonProps = {
+  value: string;
+};
+
+const inactiveLabelStyles = 'invisible bs-px -mbe-px';
+
+export const CopyButton = ({ value }: CopyButtonProps) => {
+  const { t } = useTranslation('os');
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  return (
+    <Button
+      className='inline-flex flex-col justify-center'
+      onClick={() => setTextValue(value)}
+      data-testid='copy-invitation'
+    >
+      <div role='none' className={mx('flex gap-1', isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy invitation code label')}</span>
+        <Copy className={getSize(4)} weight='bold' />
+      </div>
+      <div role='none' className={mx('flex gap-1', !isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy invitation code success label')}</span>
+        <Check className={getSize(4)} weight='bold' />
+      </div>
+    </Button>
+  );
+};

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/composites/DevicesDialog/DevicesDialog.tsx

@@ -5,7 +5,7 @@
 import { Close } from '@radix-ui/react-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelDialog, PanelDialogProps } from '../../layouts';
 import { DevicesPanel, DevicesPanelProps } from '../../panels';
@@ -16,6 +16,7 @@ export interface DevicesDialogProps
 
 export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogProps) => {
   const titleId = useId('spaceDialog__title');
+  const themeContextValue = useThemeContext();
 
   return (
     <PanelDialog
@@ -24,7 +25,7 @@ export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogPro
         titleId
       }}
     >
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <DevicesPanel
           {...{
             ...devicesDialogProps,

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -5,7 +5,7 @@
 import { Action, Cancel } from '@radix-ui/react-alert-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
 import { JoinPanel, JoinPanelProps } from '../../panels';
@@ -16,9 +16,11 @@ export interface JoinDialogProps
 
 export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
   const titleId = useId('joinDialog__title');
+  const themeContextValue = useThemeContext();
+
   return (
     <PanelAlertDialog {...{ slots, titleId }}>
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <JoinPanel
           {...{
             ...joinPanelProps,

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -5,7 +5,7 @@
 import { Close } from '@radix-ui/react-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelDialog, PanelDialogProps } from '../../layouts';
 import { SpacePanel, SpacePanelProps } from '../../panels';
@@ -16,6 +16,7 @@ export interface SpaceDialogProps
 
 export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) => {
   const titleId = useId('spaceDialog__title');
+  const themeContextValue = useThemeContext();
 
   return (
     <PanelDialog
@@ -24,7 +25,7 @@ export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) =>
         titleId
       }}
     >
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <SpacePanel
           {...{
             ...spacePanelProps,

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { Identity } from '@dxos/client';
 import { useClient } from '@dxos/react-client';
-import { Avatar, Button, DensityProvider, ThemeContext, useTranslation } from '@dxos/react-components';
+import { Avatar, Button, DensityProvider, ThemeContext, useThemeContext, useTranslation } from '@dxos/react-components';
 
 export const IdentityPanel = ({
   identity,
@@ -16,13 +16,15 @@ export const IdentityPanel = ({
 }) => {
   const { t } = useTranslation('os');
   const client = useClient();
+  const themeContextValue = useThemeContext();
+
   const defaultManageProfile = () => {
     const remoteSource = new URL(client?.config.get('runtime.client.remoteSource') || 'https://halo.dxos.org');
     const tab = window.open(remoteSource.origin, '_blank');
     tab?.focus();
   };
   return (
-    <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+    <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
       <DensityProvider density='fine'>
         <div className='flex flex-col gap-2 justify-center items-center'>
           <Avatar

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/panels/JoinPanel/JoinPanel.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react';
 
 import { log } from '@dxos/log';
 import { useClient, useIdentity } from '@dxos/react-client';
-import { DensityProvider, useId } from '@dxos/react-components';
+import { DensityProvider, useId, useThemeContext } from '@dxos/react-components';
 
 import { JoinHeading } from './JoinHeading';
 import { JoinPanelProps } from './JoinPanelProps';
@@ -32,6 +32,7 @@ export const JoinPanel = ({
   const client = useClient();
   const identity = useIdentity();
   const titleId = useId('joinPanel__title');
+  const { hasIosKeyboard } = useThemeContext();
 
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
@@ -57,10 +58,10 @@ export const JoinPanel = ({
     const innermostState = stateStack[stateStack.length - 1];
     const autoFocusValue = innermostState === 'finishingJoining' ? 'successSpaceInvitation' : innermostState;
     const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
-    if ($nextAutofocus) {
+    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute('data-prevent-ios-autofocus'))) {
       $nextAutofocus.focus();
     }
-  }, [joinState.value]);
+  }, [joinState.value, hasIosKeyboard]);
 
   return (
     <DensityProvider density='fine'>

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -55,6 +55,7 @@ const PureInvitationAuthenticatorContent = ({
             autoComplete: 'off',
             pattern: '\\d*',
             'data-autofocus': `connecting${Domain}Invitation inputting${Domain}VerificationCode authenticationFailing${Domain}VerificationCode authenticating${Domain}VerificationCode`,
+            'data-prevent-ios-autofocus': true,
             'data-testid': `${invitationType}-auth-code-input`,
             'data-1p-ignore': true
           } as ComponentPropsWithoutRef<'input'>

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',