@dxos/react-ui 0.1.30-next.7c60cd3 → 0.1.30

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -2,11 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { UserPlus, X } from 'phosphor-react';
+import { UserPlus, X } from '@phosphor-icons/react';
 import React, { cloneElement, useReducer } from 'react';
 
 import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
-import { Button, DensityProvider, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+import {
+  Button,
+  DensityProvider,
+  getSize,
+  mx,
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger,
+  useTranslation
+} from '@dxos/react-components';
 
 import { DeviceList, InvitationList, PanelSeparator } from '../../components';
 import { defaultSurface, subduedSurface } from '../../styles';
@@ -45,9 +54,12 @@ const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent
         <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
           {displayName ?? identity.identityKey.truncate()}
         </h2>
-        <Tooltip content={t('close label')} zIndex='z-50'>
-          {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
-        </Tooltip>
+        <TooltipRoot>
+          <TooltipContent className='z-50'>{t('close label')}</TooltipContent>
+          <TooltipTrigger asChild>
+            {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+          </TooltipTrigger>
+        </TooltipRoot>
       </div>
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList

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, ThemeContext, useTranslation } from '@dxos/react-components';
+import { Avatar, Button, DensityProvider, ThemeContext, useTranslation } from '@dxos/react-components';
 
 export const IdentityPanel = ({
   identity,
@@ -22,18 +22,20 @@ export const IdentityPanel = ({
     tab?.focus();
   };
   return (
-    <ThemeContext.Provider value={{ themeVariant: 'os', rootDensity: 'fine' }}>
-      <div className='flex flex-col gap-2 justify-center items-center'>
-        <Avatar
-          size={16}
-          variant='circle'
-          fallbackValue={identity.identityKey.toHex()}
-          label={identity.profile?.displayName ?? ''}
-        />
-        <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
-          {t('manage profile label')}
-        </Button>
-      </div>
+    <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <DensityProvider density='fine'>
+        <div className='flex flex-col gap-2 justify-center items-center'>
+          <Avatar
+            size={16}
+            variant='circle'
+            fallbackValue={identity.identityKey.toHex()}
+            label={identity.profile?.displayName ?? ''}
+          />
+          <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
+            {t('manage profile label')}
+          </Button>
+        </div>
+      </DensityProvider>
     </ThemeContext.Provider>
   );
 };

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -1,7 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { ProhibitInset } from 'phosphor-react';
+import { ProhibitInset } from '@phosphor-icons/react';
 import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
 
 import { AuthenticatingInvitationObservable } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
+import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from '@phosphor-icons/react';
 import React from 'react';
 
 import type { Identity } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight, Check } from 'phosphor-react';
+import { CaretLeft, CaretRight, Check } from '@phosphor-icons/react';
 import React, { cloneElement } from 'react';
 
 import type { Identity } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight } from 'phosphor-react';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React, { ComponentPropsWithoutRef, useState } from 'react';
 
 import { useClient } from '@dxos/react-client';

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

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+import { CaretLeft, CaretRight, UserPlus } from '@phosphor-icons/react';
 import * as RadioGroup from '@radix-ui/react-radio-group';
-import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
 import React, { useCallback, useState } from 'react';
 
 import type { Identity } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, Check } from 'phosphor-react';
+import { CaretLeft, Check } from '@phosphor-icons/react';
 import React, { cloneElement } from 'react';
 
 import { AuthenticatingInvitationObservable } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight } from 'phosphor-react';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React, { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, useCallback, useState } from 'react';
 
 import { AuthenticatingInvitationObservable } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight } from 'phosphor-react';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React, { ComponentPropsWithoutRef, useState } from 'react';
 
 import { InvitationEncoder } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ArrowsClockwise, CaretLeft, CaretRight } from 'phosphor-react';
+import { ArrowsClockwise, CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React from 'react';
 
 import { AuthenticatingInvitationObservable, Invitation } from '@dxos/client';

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CheckCircle, HourglassSimple, X } from 'phosphor-react';
+import { CheckCircle, HourglassSimple, X } from '@phosphor-icons/react';
 import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
 
 import type { AuthenticatingInvitationObservable, Identity } from '@dxos/client';

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { UserPlus } from 'phosphor-react';
+import { UserPlus } from '@phosphor-icons/react';
 import React, { cloneElement, useReducer } from 'react';
 
 import { Space } from '@dxos/client';

package/src/playwright/invitations-manager.ts

@@ -7,7 +7,7 @@ import type { Browser, ConsoleMessage, Page } from 'playwright';
 import waitForExpect from 'wait-for-expect';
 
 import { Trigger } from '@dxos/async';
-import type { InvitationsOptions } from '@dxos/client-services';
+import type { InvitationsOptions } from '@dxos/client';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { setupPage } from '@dxos/test/playwright';
 

package/src/stories/Invitations.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxosTheme';
 import { faker } from '@faker-js/faker';
-import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode } from 'phosphor-react';
+import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode } from '@phosphor-icons/react';
 import React, { useMemo, useState } from 'react';
 
 import { Space, SpaceProxy, useClient, useIdentity, useSpaces } from '@dxos/react-client';