@dxos/shell 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.7.5-labs.a279d8c",
+  "version": "0.7.5-labs.ea4b4c2",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -42,29 +42,30 @@
   "dependencies": {
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/react-accordion": "^1.1.1",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-radio-group": "^1.1.2",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.3",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "@xstate/react": "^3.2.1",
     "date-fns": "^3.3.1",
     "emoji-mart": "^5.5.2",
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.7.5-labs.a279d8c",
-    "@dxos/client-protocol": "0.7.5-labs.a279d8c",
-    "@dxos/client-services": "0.7.5-labs.a279d8c",
-    "@dxos/debug": "0.7.5-labs.a279d8c",
-    "@dxos/display-name": "0.7.5-labs.a279d8c",
-    "@dxos/invariant": "0.7.5-labs.a279d8c",
-    "@dxos/log": "0.7.5-labs.a279d8c",
-    "@dxos/protocols": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-types": "0.7.5-labs.a279d8c",
-    "@dxos/rpc": "0.7.5-labs.a279d8c",
-    "@dxos/rpc-tunnel": "0.7.5-labs.a279d8c",
-    "@dxos/util": "0.7.5-labs.a279d8c"
+    "@dxos/async": "0.7.5-labs.ea4b4c2",
+    "@dxos/client-protocol": "0.7.5-labs.ea4b4c2",
+    "@dxos/client-services": "0.7.5-labs.ea4b4c2",
+    "@dxos/debug": "0.7.5-labs.ea4b4c2",
+    "@dxos/display-name": "0.7.5-labs.ea4b4c2",
+    "@dxos/invariant": "0.7.5-labs.ea4b4c2",
+    "@dxos/log": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-pickers": "0.7.5-labs.ea4b4c2",
+    "@dxos/protocols": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-types": "0.7.5-labs.ea4b4c2",
+    "@dxos/rpc-tunnel": "0.7.5-labs.ea4b4c2",
+    "@dxos/rpc": "0.7.5-labs.ea4b4c2",
+    "@dxos/util": "0.7.5-labs.ea4b4c2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -74,25 +75,25 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-client": "0.7.5-labs.a279d8c",
-    "@dxos/config": "0.7.5-labs.a279d8c",
-    "@dxos/random": "0.7.5-labs.a279d8c",
-    "@dxos/react-hooks": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui": "0.7.5-labs.a279d8c",
-    "@dxos/protocols": "0.7.5-labs.a279d8c",
-    "@dxos/storybook-utils": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-theme": "0.7.5-labs.a279d8c",
-    "@dxos/test-utils": "0.7.5-labs.a279d8c"
+    "@dxos/config": "0.7.5-labs.ea4b4c2",
+    "@dxos/random": "0.7.5-labs.ea4b4c2",
+    "@dxos/protocols": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-client": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-hooks": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2",
+    "@dxos/test-utils": "0.7.5-labs.ea4b4c2",
+    "@dxos/storybook-utils": "0.7.5-labs.ea4b4c2"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.7.5-labs.a279d8c"
+    "@dxos/react-client": "0.7.5-labs.ea4b4c2"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@dxos/react-ui": "0.7.5-labs.a279d8c",
-    "@dxos/react-ui-theme": "0.7.5-labs.a279d8c"
+    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
+    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AgentConfig.tsx

@@ -88,7 +88,7 @@ export const AgentConfig = ({
         <>
           <Button
             variant='ghost'
-            classNames='mlb-2 is-full justify-start gap-2 !pis-0 !pie-3'
+            classNames='mlb-2 is-full justify-start gap-2 pis-0 pie-3'
             data-testid={agentStatus === 'creatable' ? 'devices-panel.create-agent' : 'devices-panel.agent-error'}
             onClick={agentStatus === 'creatable' ? onAgentCreate : onAgentRefresh}
             aria-describedby='devices-panel.create-agent.description'

package/src/components/DeviceList/DeviceList.tsx

@@ -42,7 +42,7 @@ export const DeviceList = ({
       )}
       <Button
         variant='ghost'
-        classNames='justify-start gap-2 !pis-0 !pie-3 is-full'
+        classNames='justify-start gap-2 pis-0 pie-3 is-full'
         data-testid='devices-panel.create-invitation'
         onClick={onClickAdd}
       >

package/src/components/index.ts

@@ -4,8 +4,6 @@
 
 export * from './AgentConfig';
 export * from './CompoundButton';
-export * from './EmojiPicker';
-export * from './HuePicker';
 export * from './IdentityList';
 export * from './DeviceList';
 export * from './InvitationList';

package/src/panels/IdentityPanel/IdentityPanel.stories.tsx

@@ -6,6 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
+import { IdentityDid } from '@dxos/keys';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
@@ -27,6 +28,7 @@ const noOpProps: IdentityPanelImplProps = {
   activeView: 'identity action chooser',
   createInvitationUrl: (code) => code,
   identity: {
+    did: IdentityDid.random(),
     identityKey: PublicKey.random(),
     profile: {
       displayName: faker.person.firstName(),
@@ -34,6 +36,7 @@ const noOpProps: IdentityPanelImplProps = {
   },
   devices: [],
   connectionState: ConnectionState.ONLINE,
+  onManageCredentials: async () => console.log('manage credentials'),
 };
 
 export default {

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
+import { IdentificationCard, Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -12,7 +12,8 @@ import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxo
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
-import { Avatar, Input, Toolbar, Tooltip, useClipboard, useId, useTranslation } from '@dxos/react-ui';
+import { Avatar, Clipboard, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { EmojiPickerToolbarButton, HuePickerToolbarButton } from '@dxos/react-ui-pickers';
 import { getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
@@ -24,7 +25,7 @@ import {
 import { useIdentityMachine } from './identityMachine';
 import { IdentityActionChooser } from './steps';
 import { useAgentHandlers } from './useAgentHandlers';
-import { Viewport, CloseButton, EmojiPickerToolbarButton, Heading, HuePickerToolbarButton } from '../../components';
+import { Viewport, CloseButton, Heading } from '../../components';
 import { ConfirmReset, InvitationManager } from '../../steps';
 
 const viewStyles = 'pbs-1 pbe-3 pli-3';
@@ -43,15 +44,13 @@ const IdentityHeading = ({
   onUpdateProfile,
   connectionState,
   onChangeConnectionState,
+  onManageCredentials,
 }: IdentityPanelHeadingProps) => {
   const fallbackValue = keyToFallback(identity.identityKey);
   const { t } = useTranslation('os');
   const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
   const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));
   const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
-  const { textValue, setTextValue } = useClipboard();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
 
   const setEmoji = (nextEmoji: string) => {
     setEmojiDirectly(nextEmoji);
@@ -94,26 +93,28 @@ const IdentityHeading = ({
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
           <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Toolbar.Button
-                classNames='bs-[--rail-action]'
-                data-testid='update-profile-form-copy-key'
-                onClick={() => setTextValue(identityHex)}
-              >
-                <span className='sr-only'>
-                  {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                </span>
-                <Key className={getSize(5)} />
-              </Toolbar.Button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content side='bottom'>
-                {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
+          <Clipboard.IconButton
+            classNames='bs-[--rail-action]'
+            data-testid='update-profile-form-copy-key'
+            label={t('copy self did label')}
+            value={identity.did}
+          />
+          {onManageCredentials && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toolbar.Button classNames='bs-[--rail-action]' onClick={onManageCredentials}>
+                  <span className='sr-only'>{t('manage credentials label')}</span>
+                  <IdentificationCard className={getSize(5)} />
+                </Toolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom'>
+                  {t('manage credentials label')}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Toolbar.Button
@@ -153,6 +154,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     connectionState,
     onChangeConnectionState,
     onDone,
+    onManageCredentials,
     ...rest
   } = props;
   const { t } = useTranslation('os');
@@ -180,6 +182,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
           onUpdateProfile,
           connectionState,
           onChangeConnectionState,
+          onManageCredentials,
         }}
       />
       <Viewport.Root activeView={activeView}>

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -29,6 +29,7 @@ export type IdentityPanelImplProps = {
   connectionState?: ConnectionState;
   onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  onManageCredentials?: () => Promise<void>;
   onResetStorage?: () => Promise<void>;
   onRecover?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
@@ -46,7 +47,13 @@ export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | '
 
 export type IdentityPanelHeadingProps = Pick<
   IdentityPanelImplProps,
-  'titleId' | 'identity' | 'onDone' | 'onUpdateProfile' | 'connectionState' | 'onChangeConnectionState'
+  | 'titleId'
+  | 'identity'
+  | 'onDone'
+  | 'onUpdateProfile'
+  | 'connectionState'
+  | 'onChangeConnectionState'
+  | 'onManageCredentials'
 > & {
   title: string;
 };

package/src/panels/IdentityPanel/steps/ProfileForm.tsx

@@ -8,9 +8,10 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useClipboard, useTranslation } from '@dxos/react-ui';
+import { EmojiPickerBlock, HuePickerBlock } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, EmojiPickerBlock, HuePickerBlock } from '../../../components';
+import { Action, Actions, StepHeading, Input } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 

package/src/panels/JoinPanel/steps/IdentityInput.tsx

@@ -31,7 +31,7 @@ export const IdentityInput = (props: IdentityInputProps) => {
   const [validationMessage, setValidationMessage] = useState('');
   const handleConfirm = async (value: string) => {
     if (isRecover) {
-      await client.halo.recoverIdentity({ seedphrase: value }).then(
+      await client.halo.recoverIdentity({ recoveryCode: value }).then(
         (identity) => {
           send?.({ type: 'selectIdentity' as const, identity });
         },

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { PublicKey } from '@dxos/keys';
+import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { Invitation } from '@dxos/react-client/invitations';
 import { withTheme } from '@dxos/storybook-utils';
@@ -179,6 +179,7 @@ export const SpaceManagerWithMember = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                       },
                     },
@@ -212,6 +213,7 @@ export const SpaceManagerWithMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -252,6 +254,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -262,6 +265,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Alice Wong',
@@ -272,6 +276,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Steel Nickels',

package/src/testing/fixtures/identities.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
+import { IdentityDid } from '@dxos/keys';
 import { PublicKey } from '@dxos/react-client';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 
 export const alice: SpaceMember = {
   role: HaloSpaceMember.Role.ADMIN,
   identity: {
+    did: IdentityDid.random(),
     identityKey: PublicKey.random(),
     profile: {
       displayName: 'Alice',

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

@@ -8,7 +8,7 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy URL',
   'copy success label': 'Copied',
-  'copy self public key label': 'Copy public key',
+  'copy self did label': 'Copy DID',
   'open share panel label': 'View QR code',
   'joining space heading': 'Joining space',
   'join space heading': 'Enter space invitation',

package/dist/lib/browser/react.css

@@ -1,7 +0,0 @@
-/* packages/sdk/shell/src/components/emoji.css */
-[data-theme=dark] em-emoji-picker {
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-  --font-family: "Inter Variable", ui-sans-serif;
-}
-/*# sourceMappingURL=react.css.map */

package/dist/lib/browser/react.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/emoji.css"],
-  "sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme=\"dark\"] em-emoji-picker {\n  /* TODO(burdon): Get from TW defs: modal-surface? */\n  --background-rgb: #3B3B3F;\n  --rgb-background: #3B3B3F;\n\n  --font-family: \"Inter Variable\", ui-sans-serif;\n\n  /*--font-size: 16px;*/\n  /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n  /*--color-border: rgba(0, 0, 0, 0.05);*/\n  /*--category-icon-size: 24px;*/\n  /*--border-radius: 24px;*/\n  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n  /*--rgb-accent: 255, 105, 180;*/\n  /*--rgb-color: 102, 51, 153;*/\n  /*--rgb-input: 255, 235, 235;*/\n  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n  /*height: 50vh;*/\n  /*min-height: 400px;*/\n  /*max-height: 800px;*/\n}\n"],
-  "mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
-  "names": []
-}

package/dist/lib/node/react.css

@@ -1,7 +0,0 @@
-/* packages/sdk/shell/src/components/emoji.css */
-[data-theme=dark] em-emoji-picker {
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-  --font-family: "Inter Variable", ui-sans-serif;
-}
-/*# sourceMappingURL=react.css.map */

package/dist/lib/node/react.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/emoji.css"],
-  "sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme=\"dark\"] em-emoji-picker {\n  /* TODO(burdon): Get from TW defs: modal-surface? */\n  --background-rgb: #3B3B3F;\n  --rgb-background: #3B3B3F;\n\n  --font-family: \"Inter Variable\", ui-sans-serif;\n\n  /*--font-size: 16px;*/\n  /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n  /*--color-border: rgba(0, 0, 0, 0.05);*/\n  /*--category-icon-size: 24px;*/\n  /*--border-radius: 24px;*/\n  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n  /*--rgb-accent: 255, 105, 180;*/\n  /*--rgb-color: 102, 51, 153;*/\n  /*--rgb-input: 255, 235, 235;*/\n  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n  /*height: 50vh;*/\n  /*min-height: 400px;*/\n  /*max-height: 800px;*/\n}\n"],
-  "mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
-  "names": []
-}

package/dist/lib/node-esm/react.css

@@ -1,7 +0,0 @@
-/* packages/sdk/shell/src/components/emoji.css */
-[data-theme=dark] em-emoji-picker {
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-  --font-family: "Inter Variable", ui-sans-serif;
-}
-/*# sourceMappingURL=react.css.map */

package/dist/lib/node-esm/react.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/emoji.css"],
-  "sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme=\"dark\"] em-emoji-picker {\n  /* TODO(burdon): Get from TW defs: modal-surface? */\n  --background-rgb: #3B3B3F;\n  --rgb-background: #3B3B3F;\n\n  --font-family: \"Inter Variable\", ui-sans-serif;\n\n  /*--font-size: 16px;*/\n  /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n  /*--color-border: rgba(0, 0, 0, 0.05);*/\n  /*--category-icon-size: 24px;*/\n  /*--border-radius: 24px;*/\n  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n  /*--rgb-accent: 255, 105, 180;*/\n  /*--rgb-color: 102, 51, 153;*/\n  /*--rgb-input: 255, 235, 235;*/\n  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n  /*height: 50vh;*/\n  /*min-height: 400px;*/\n  /*max-height: 800px;*/\n}\n"],
-  "mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
-  "names": []
-}

package/dist/types/src/components/EmojiPicker.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
-import './emoji.css';
-export type EmojiPickerProps = {
-    disabled?: boolean;
-    defaultEmoji?: string;
-    emoji?: string;
-    onChangeEmoji?: (nextEmoji: string) => void;
-    onClickClear?: ButtonProps['onClick'];
-};
-/**
- * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export declare const EmojiPickerToolbarButton: ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames, }: ThemedClassName<Omit<EmojiPickerProps, "onClickClear">>) => React.JSX.Element;
-/**
- * A button for picking an emoji alongside a button for unsetting it.
- */
-export declare const EmojiPickerBlock: ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => React.JSX.Element;
-//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/types/src/components/EmojiPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAMrB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,sBA4EzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,mEAAoE,gBAAgB,sBA+DhH,CAAC"}

package/dist/types/src/components/EmojiPicker.js

@@ -1,146 +0,0 @@
-"use strict";
-//
-// Copyright 2024 DXOS.org
-//
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiPickerBlock = exports.EmojiPickerToolbarButton = void 0;
-const data_1 = __importDefault(require("@emoji-mart/data"));
-const react_1 = __importDefault(require("@emoji-mart/react"));
-const react_2 = require("@phosphor-icons/react");
-const react_use_controllable_state_1 = require("@radix-ui/react-use-controllable-state");
-const react_3 = __importStar(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const react_ui_theme_1 = require("@dxos/react-ui-theme");
-require("./emoji.css");
-/**
- * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-const EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames, }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const { themeMode } = (0, react_ui_1.useThemeContext)();
-    const [_emojiValue, setEmojiValue] = (0, react_use_controllable_state_1.useControllableState)({
-        prop: emoji,
-        onChange: onChangeEmoji,
-        defaultProp: defaultEmoji,
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = (0, react_3.useState)(false);
-    const suppressNextTooltip = (0, react_3.useRef)(false);
-    const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, react_3.useState)(false);
-    return (react_3.default.createElement(react_ui_1.Tooltip.Root, { open: triggerTooltipOpen, onOpenChange: (nextOpen) => {
-            if (suppressNextTooltip.current) {
-                setTriggerTooltipOpen(false);
-                suppressNextTooltip.current = false;
-            }
-            else {
-                setTriggerTooltipOpen(nextOpen);
-            }
-        } },
-        react_3.default.createElement(react_ui_1.Popover.Root, { open: emojiPickerOpen, onOpenChange: (nextOpen) => {
-                setEmojiPickerOpen(nextOpen);
-                suppressNextTooltip.current = true;
-            } },
-            react_3.default.createElement(react_ui_1.Tooltip.Trigger, { asChild: true },
-                react_3.default.createElement(react_ui_1.Popover.Trigger, { asChild: true },
-                    react_3.default.createElement(react_ui_1.Toolbar.Button, { classNames: ['gap-2 text-2xl plb-1', classNames], disabled: disabled },
-                        react_3.default.createElement("span", { className: 'sr-only' }, t('select emoji label')),
-                        react_3.default.createElement(react_2.UserCircle, { className: (0, react_ui_theme_1.getSize)(5) })))),
-            react_3.default.createElement(react_ui_1.Tooltip.Portal, null,
-                react_3.default.createElement(react_ui_1.Tooltip.Content, { side: 'bottom' },
-                    t('select emoji label'),
-                    react_3.default.createElement(react_ui_1.Tooltip.Arrow, null))),
-            react_3.default.createElement(react_ui_1.Popover.Content, { side: 'bottom', onKeyDownCapture: (event) => {
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                        setEmojiPickerOpen(false);
-                        suppressNextTooltip.current = true;
-                    }
-                } },
-                react_3.default.createElement(react_1.default, { data: data_1.default, onEmojiSelect: ({ native }) => {
-                        if (native) {
-                            setEmojiValue(native);
-                            setEmojiPickerOpen(false);
-                        }
-                    }, autoFocus: true, maxFrequentRows: 0, noCountryFlags: true, theme: themeMode }),
-                react_3.default.createElement(react_ui_1.Popover.Arrow, null)))));
-};
-exports.EmojiPickerToolbarButton = EmojiPickerToolbarButton;
-/**
- * A button for picking an emoji alongside a button for unsetting it.
- */
-const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const [isMd] = (0, react_ui_1.useMediaQuery)('md', { ssr: false });
-    const [emojiValue, setEmojiValue] = (0, react_use_controllable_state_1.useControllableState)({
-        prop: emoji,
-        onChange: onChangeEmoji,
-        defaultProp: defaultEmoji,
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = (0, react_3.useState)(false);
-    return (react_3.default.createElement(react_3.default.Fragment, null,
-        react_3.default.createElement(react_ui_1.Popover.Root, { open: emojiPickerOpen, onOpenChange: setEmojiPickerOpen },
-            react_3.default.createElement(react_ui_1.Popover.Trigger, { asChild: true },
-                react_3.default.createElement(react_ui_1.Button, { variant: 'ghost', classNames: 'gap-2 text-2xl plb-1', disabled: disabled },
-                    react_3.default.createElement("span", { className: 'sr-only' }, t('select emoji label')),
-                    react_3.default.createElement("span", { className: 'grow pis-14' }, emojiValue),
-                    react_3.default.createElement(react_2.CaretDown, { className: (0, react_ui_theme_1.getSize)(4) }))),
-            react_3.default.createElement(react_ui_1.Popover.Content, { side: 'right', sideOffset: isMd ? 0 : -310, onKeyDownCapture: (event) => {
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                        setEmojiPickerOpen(false);
-                    }
-                } },
-                react_3.default.createElement(react_1.default, { data: data_1.default, onEmojiSelect: ({ native }) => {
-                        if (native) {
-                            setEmojiValue(native);
-                            setEmojiPickerOpen(false);
-                        }
-                    }, autoFocus: true, maxFrequentRows: 0, noCountryFlags: true }),
-                react_3.default.createElement(react_ui_1.Popover.Arrow, null))),
-        react_3.default.createElement(react_ui_1.Tooltip.Root, null,
-            react_3.default.createElement(react_ui_1.Tooltip.Trigger, { asChild: true },
-                react_3.default.createElement(react_ui_1.Button, { variant: 'ghost', onClick: onClickClear, disabled: disabled },
-                    react_3.default.createElement("span", { className: 'sr-only' }, t('clear label')),
-                    react_3.default.createElement(react_2.ArrowCounterClockwise, null))),
-            react_3.default.createElement(react_ui_1.Tooltip.Portal, null,
-                react_3.default.createElement(react_ui_1.Tooltip.Content, { side: 'right' },
-                    t('clear label'),
-                    react_3.default.createElement(react_ui_1.Tooltip.Arrow, null))))));
-};
-exports.EmojiPickerBlock = EmojiPickerBlock;
-//# sourceMappingURL=EmojiPicker.js.map

package/dist/types/src/components/EmojiPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"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"}