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

package/dist/lib/browser/index.mjs

@@ -457,7 +457,7 @@ function _extends7() {
 var SpaceListItem = /* @__PURE__ */ forwardRef(({ space, onClick }, ref) => {
   var _a;
   return /* @__PURE__ */ React10.createElement("li", {
-    className: mx6("flex gap-2 items-center", onClick && "cursor-pointer"),
+    className: mx6("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick == null ? void 0 : onClick(),
     ref,
     "data-testid": "space-list-item"
@@ -729,8 +729,8 @@ var DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }
   }), /* @__PURE__ */ React15.createElement(Button2, {
     className: "is-full flex gap-2 mbs-2",
     onClick: () => client.halo.createInvitation(),
-    "data-testid": "create-space-invitation"
-  }, /* @__PURE__ */ React15.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React15.createElement(UserPlus, {
+    "data-testid": "devices-panel.create-invitation"
+  }, /* @__PURE__ */ React15.createElement("span", null, t("create device invitation label")), /* @__PURE__ */ React15.createElement(UserPlus, {
     className: getSize3(4),
     weight: "bold"
   })), /* @__PURE__ */ React15.createElement(PanelSeparator, null), /* @__PURE__ */ React15.createElement(DeviceList, {
@@ -795,8 +795,8 @@ import { DensityProvider as DensityProvider3, useId as useId4 } from "@dxos/reac
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinHeading.tsx
 import { ProhibitInset as ProhibitInset2 } from "phosphor-react";
-import React17, { cloneElement as cloneElement2 } from "react";
-import { useSpace as useSpace2, withReactorRef } from "@dxos/react-client";
+import React17, { cloneElement as cloneElement2, forwardRef as forwardRef2 } from "react";
+import { useSpace as useSpace2 } from "@dxos/react-client";
 import { Avatar as Avatar4, Button as Button4, getSize as getSize4, Heading, mx as mx12, Trans, useId as useId2, useTranslation as useTranslation7 } from "@dxos/react-components";
 function _extends13() {
   _extends13 = Object.assign || function(target) {
@@ -812,7 +812,7 @@ function _extends13() {
   };
   return _extends13.apply(this, arguments);
 }
-var JoinHeading = withReactorRef(({ mode, titleId, invitation, onExit, exitActionParent, preventExit }, ref) => {
+var JoinHeading = /* @__PURE__ */ forwardRef2(({ mode, titleId, invitation, onExit, exitActionParent, preventExit }, ref) => {
   var _a, _b, _c, _d, _e, _f;
   const { t } = useTranslation7("os");
   const space = useSpace2((_a = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _a.spaceKey);
@@ -1476,10 +1476,10 @@ var InvitationInput = ({ invitationType, ...viewStateProps }) => {
       },
       input: {
         "data-autofocus": `${invitationType} invitation acceptor; invitation input`,
+        "data-testid": `${invitationType}-invitation-input`,
         onKeyUp: ({ key }) => key === "Enter" && handleNext()
       }
-    },
-    "data-testid": "invitation-input"
+    }
   }), /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow"
@@ -1654,14 +1654,13 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitati
         disabled,
         inputMode: "numeric",
         pattern: "\\d*",
-        "data-autofocus": `${invitationType} invitation acceptor; invitation authenticator`
+        "data-autofocus": `${invitationType} invitation acceptor; invitation authenticator`,
+        "data-testid": `${invitationType}-auth-code-input`
       }
     }
   }, failed && {
     validationValence: "error",
     validationMessage: t("failed to authenticate message")
-  }, {
-    "data-testid": "auth-code-input"
   })), /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "grow"
@@ -2074,7 +2073,7 @@ var JoinPanel = ({ mode, initialInvitationCode, titleId: propsTitleId, exitActio
 // packages/apps/patterns/react-ui/src/panels/SpacePanel/SpacePanel.tsx
 import { UserPlus as UserPlus3 } from "phosphor-react";
 import React28, { useReducer as useReducer3 } from "react";
-import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client";
+import { useSpaceInvitations as useSpaceInvitations2, observer } from "@dxos/react-client";
 import { Button as Button13, DensityProvider as DensityProvider4, getSize as getSize14, mx as mx22, useTranslation as useTranslation17 } from "@dxos/react-components";
 function _extends24() {
   _extends24 = Object.assign || function(target) {
@@ -2090,7 +2089,7 @@ function _extends24() {
   };
   return _extends24.apply(this, arguments);
 }
-var CurrentSpaceView = ({ space, createInvitationUrl, titleId }) => {
+var CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }) => {
   const { t } = useTranslation17("os");
   const invitations = useSpaceInvitations2(space == null ? void 0 : space.key);
   const name = space == null ? void 0 : space.properties.name;
@@ -2116,7 +2115,7 @@ var CurrentSpaceView = ({ space, createInvitationUrl, titleId }) => {
   }), /* @__PURE__ */ React28.createElement(Button13, {
     className: "is-full flex gap-2 mbs-2",
     onClick: () => space == null ? void 0 : space.createInvitation(),
-    "data-testid": "create-space-invitation"
+    "data-testid": "spaces-panel.create-invitation"
   }, /* @__PURE__ */ React28.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React28.createElement(UserPlus3, {
     className: getSize14(4),
     weight: "bold"
@@ -2124,7 +2123,7 @@ var CurrentSpaceView = ({ space, createInvitationUrl, titleId }) => {
     spaceKey: space.key,
     includeSelf: true
   })));
-};
+});
 var SpacePanel = (props) => {
   const reducer = (state, action) => {
     const nextState = {
@@ -2222,6 +2221,7 @@ var JoinDialog = ({ slots, ...joinPanelProps }) => {
 
 // packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
 import React33, { useEffect as useEffect2, useState as useState7 } from "react";
+import { log as log2 } from "@dxos/log";
 import { ShellDisplay, ShellLayout } from "@dxos/protocols/proto/dxos/iframe";
 import { useClient as useClient7, useSpace as useSpace3, useSpaces } from "@dxos/react-client";
 
@@ -2330,6 +2330,27 @@ var Shell = ({ runtime, origin }) => {
   }, [
     runtime
   ]);
+  useEffect2(() => {
+    if (layout === ShellLayout.SPACE_INVITATIONS && !space) {
+      log2.warn("No space found for shell space invitations.", {}, {
+        file: "Shell.tsx",
+        line: 33,
+        scope: void 0,
+        callSite: (f, a) => f(...a)
+      });
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({
+          display: ShellDisplay.NONE
+        });
+        runtime.setLayout(ShellLayout.DEFAULT);
+      });
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    runtime,
+    layout,
+    space
+  ]);
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
       return /* @__PURE__ */ React33.createElement(JoinDialog, {
@@ -2354,7 +2375,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.SPACE_INVITATIONS:
-      return /* @__PURE__ */ React33.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React33.createElement(SpaceDialog, {
         space,
         createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
         onDone: async () => {
@@ -2363,7 +2384,7 @@ var Shell = ({ runtime, origin }) => {
           });
           runtime.setLayout(ShellLayout.DEFAULT);
         }
-      });
+      }) : null;
     case ShellLayout.JOIN_SPACE:
       return /* @__PURE__ */ React33.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
@@ -2387,6 +2408,120 @@ var Shell = ({ runtime, origin }) => {
   }
 };
 
+// packages/apps/patterns/react-ui/src/composites/Shell/ShellContext.tsx
+import React34, { createContext as createContext2, useCallback as useCallback6, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo3, useState as useState8 } from "react";
+import { IFrameClientServicesProxy, MemoryShellRuntime, ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout2 } from "@dxos/client";
+import { useClient as useClient8, useIdentity as useIdentity3 } from "@dxos/react-client";
+import { mx as mx24 } from "@dxos/react-components";
+var ShellContext = /* @__PURE__ */ createContext2({});
+var useShell = () => {
+  const client = useClient8();
+  const { runtime, setDisplay } = useContext2(ShellContext);
+  const setLayout = async (layout, options) => {
+    if (runtime) {
+      if (layout === ShellLayout2.DEFAULT) {
+        setDisplay == null ? void 0 : setDisplay(ShellDisplay2.NONE);
+      } else {
+        setDisplay == null ? void 0 : setDisplay(ShellDisplay2.FULLSCREEN);
+      }
+      runtime.setLayout(layout, options);
+    }
+    if (client.services instanceof IFrameClientServicesProxy) {
+      await client.services.setLayout(layout, options);
+    }
+  };
+  return {
+    setLayout
+  };
+};
+var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
+  useEffect3(() => {
+    if (client.services instanceof IFrameClientServicesProxy && onJoinedSpace) {
+      return client.services.joinedSpace.on(onJoinedSpace);
+    }
+  }, []);
+  useEffect3(() => {
+    if (client.services instanceof IFrameClientServicesProxy) {
+      client.services.setSpaceProvider(() => space == null ? void 0 : space.key);
+    }
+  }, [
+    space
+  ]);
+  const client = useClient8();
+  const identity = useIdentity3();
+  const [display, setDisplay] = useState8(!identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const shellRuntime = useMemo3(() => {
+    if (client.config.get("runtime.app.env.DX_VAULT") === "true") {
+      return;
+    }
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout2.JOIN_SPACE,
+        invitationCode: spaceInvitationCode
+      });
+    }
+    return new MemoryShellRuntime({
+      layout: identity ? ShellLayout2.DEFAULT : ShellLayout2.INITIALIZE_IDENTITY,
+      invitationCode: haloInvitationCode != null ? haloInvitationCode : void 0
+    });
+  }, [
+    client,
+    identity,
+    spaceInvitationCode,
+    haloInvitationCode
+  ]);
+  const handleKeyDown = useCallback6((event) => {
+    if (!space || !shellRuntime) {
+      return;
+    }
+    const modifier = event.ctrlKey || event.metaKey;
+    if (event.key === ">" && event.shiftKey && modifier) {
+      shellRuntime.setLayout(ShellLayout2.DEVICE_INVITATIONS);
+      setDisplay(ShellDisplay2.FULLSCREEN);
+    } else if (event.key === "." && modifier) {
+      shellRuntime.setLayout(ShellLayout2.SPACE_INVITATIONS, {
+        spaceKey: space.key
+      });
+      setDisplay(ShellDisplay2.FULLSCREEN);
+    }
+  }, [
+    space,
+    shellRuntime
+  ]);
+  useEffect3(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    shellRuntime,
+    handleKeyDown
+  ]);
+  useEffect3(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    return shellRuntime.contextUpdate.on(({ display: display2, spaceKey }) => {
+      setDisplay(display2);
+      onJoinedSpace == null ? void 0 : onJoinedSpace(spaceKey);
+    });
+  }, [
+    shellRuntime
+  ]);
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, shellRuntime && /* @__PURE__ */ React34.createElement("div", {
+    className: mx24(display === ShellDisplay2.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React34.createElement(Shell, {
+    runtime: shellRuntime,
+    origin: window.location.origin
+  })), /* @__PURE__ */ React34.createElement(ShellContext.Provider, {
+    value: {
+      runtime: shellRuntime,
+      setDisplay
+    }
+  }, identity ? children : void 0));
+};
+
 // packages/apps/patterns/react-ui/src/translations/locales/en-US.ts
 var en_US_exports = {};
 __export(en_US_exports, {
@@ -2440,6 +2575,7 @@ var os = {
   "reset label": "Start over",
   "auth code input label": "Auth code provided by the invitation sender",
   "invitation input label": "Paste an invitation code or URL",
+  "create device invitation label": "Invite",
   "create space invitation label": "Invite",
   "qr label": "Scan to accept invitation",
   "empty invitations message": "No pending invitations",
@@ -2447,7 +2583,11 @@ var os = {
   "all spaces label": "All spaces",
   "create space label": "Create a new space",
   "join space label": "Join a space",
-  "show current space label": "Current space"
+  "show current space label": "Current space",
+  "view space invitations label": "View space invitations",
+  "toggle sidebar label": "Open/close sidebar",
+  "open sidebar label": "Open sidebar",
+  "close sidebar label": "Close sidebar"
 };
 
 // packages/apps/patterns/react-ui/src/translations/index.ts
@@ -2473,6 +2613,8 @@ export {
   PanelSidebarContext,
   PanelSidebarProvider,
   Shell,
+  ShellContext,
+  ShellProvider,
   SpaceDialog,
   SpaceListItem,
   SpaceMemberList,
@@ -2502,6 +2644,7 @@ export {
   successBgColor,
   successStrokeColor,
   successTextColor,
+  useShell,
   useTogglePanelSidebar
 };
 //# sourceMappingURL=index.mjs.map