@rapidmx/web-client 0.17.0 → 0.17.2

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -9,7 +9,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
+import { useLocation } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -10,8 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -10,8 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import FloatingActionButton from "../../layout/FloatingActionButton.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -10,8 +10,7 @@ import { Mailbox, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { mergePluginNavItems, PluginNav } from "../../../plugins/pluginNav.js";

package/apps/shared/components/tasks/layout/TasksShell.tsx

@@ -10,8 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/navigation/index.ts

@@ -7,8 +7,8 @@
  * route, the app's `_shell.tsx` as the persistent frame - see `apps/www/_shell.tsx`); this is the one thing on top of it: a
  * `navigate()` that keeps the page when only the query string changes.
  */
-import { useCallback, useRef } from "react";
-import { useRouter } from "@rapidrest/react/client";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+import { useLocation as useRouterLocation, useRouter } from "@rapidrest/react/client";
 
 export interface NavigateOptions {
     /** Replaces the current history entry instead of adding one (a redirect, or a state change that isn't a "place"). */
@@ -41,3 +41,30 @@ export function useNavigate(): NavigateFn {
         void go(href, { replace: options.replace, shallow });
     }, []);
 }
+
+function subscribeToHistory(onChange: () => void): () => void {
+    window.addEventListener("popstate", onChange);
+    return () => window.removeEventListener("popstate", onChange);
+}
+
+// Joined, not added: a test's stand-in for `window.location` may have no `search`, and `undefined + undefined` is `NaN`.
+const currentAddress = (): string => [window.location.pathname, window.location.search, window.location.hash].join("");
+const noAddress = (): string => "";
+
+/**
+ * Where the page is, as `{ pathname, search, hash }`: the router's location when the page is under a router, else the browser's.
+ * A page a plugin renders has no router (`router = false`), where `@rapidrest/react`'s `useLocation()` is empty and the query a
+ * shell reads its mailbox from (`?mailboxUid=`) would be lost. Without one, the address is the browser's - and empty on the
+ * server and while hydrating, so the page hydrates as it was rendered and then follows the address.
+ */
+export function useLocation(): { pathname: string; search: string; hash: string } {
+    const routed = useRouterLocation();
+    const own = useSyncExternalStore(subscribeToHistory, currentAddress, noAddress);
+    const ownLocation = useMemo(() => {
+        // Split by hand, not with `URL`: a page that stubs the global `URL` (for `createObjectURL`) must still render.
+        const [beforeHash, ...fragment] = own.split("#");
+        const [pathname, ...query] = beforeHash.split("?");
+        return { pathname, search: query.length ? `?${query.join("?")}` : "", hash: fragment.length ? `#${fragment.join("#")}` : "" };
+    }, [own]);
+    return routed.pathname !== "" ? routed : ownLocation;
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -10,7 +10,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
+import { useLocation } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const CalendarShellContext = createContext({

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -11,8 +11,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const ContactsShellContext = createContext({ mailboxes: [] });

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -10,8 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
 import FloatingActionButton from "../../layout/FloatingActionButton.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -11,8 +11,7 @@ import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -11,8 +11,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const TasksShellContext = createContext({ mailboxes: [] });

package/dist/apps/shared/navigation/index.d.ts

@@ -14,3 +14,14 @@ export type NavigateFn = (href: string, options?: NavigateOptions) => void;
  * stable across renders.
  */
 export declare function useNavigate(): NavigateFn;
+/**
+ * Where the page is, as `{ pathname, search, hash }`: the router's location when the page is under a router, else the browser's.
+ * A page a plugin renders has no router (`router = false`), where `@rapidrest/react`'s `useLocation()` is empty and the query a
+ * shell reads its mailbox from (`?mailboxUid=`) would be lost. Without one, the address is the browser's - and empty on the
+ * server and while hydrating, so the page hydrates as it was rendered and then follows the address.
+ */
+export declare function useLocation(): {
+    pathname: string;
+    search: string;
+    hash: string;
+};

package/dist/apps/shared/navigation/index.js

@@ -7,8 +7,8 @@
  * route, the app's `_shell.tsx` as the persistent frame - see `apps/www/_shell.tsx`); this is the one thing on top of it: a
  * `navigate()` that keeps the page when only the query string changes.
  */
-import { useCallback, useRef } from "react";
-import { useRouter } from "@rapidrest/react/client";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+import { useLocation as useRouterLocation, useRouter } from "@rapidrest/react/client";
 /**
  * The function to go somewhere with, for what code decides (after a save, a select, a folder change). `navigate("/calendar")`
  * changes the page and the URL without a page load when the router knows the page (Mail, Calendar, Contacts, Tasks, Settings
@@ -32,3 +32,27 @@ export function useNavigate() {
         void go(href, { replace: options.replace, shallow });
     }, []);
 }
+function subscribeToHistory(onChange) {
+    window.addEventListener("popstate", onChange);
+    return () => window.removeEventListener("popstate", onChange);
+}
+// Joined, not added: a test's stand-in for `window.location` may have no `search`, and `undefined + undefined` is `NaN`.
+const currentAddress = () => [window.location.pathname, window.location.search, window.location.hash].join("");
+const noAddress = () => "";
+/**
+ * Where the page is, as `{ pathname, search, hash }`: the router's location when the page is under a router, else the browser's.
+ * A page a plugin renders has no router (`router = false`), where `@rapidrest/react`'s `useLocation()` is empty and the query a
+ * shell reads its mailbox from (`?mailboxUid=`) would be lost. Without one, the address is the browser's - and empty on the
+ * server and while hydrating, so the page hydrates as it was rendered and then follows the address.
+ */
+export function useLocation() {
+    const routed = useRouterLocation();
+    const own = useSyncExternalStore(subscribeToHistory, currentAddress, noAddress);
+    const ownLocation = useMemo(() => {
+        // Split by hand, not with `URL`: a page that stubs the global `URL` (for `createObjectURL`) must still render.
+        const [beforeHash, ...fragment] = own.split("#");
+        const [pathname, ...query] = beforeHash.split("?");
+        return { pathname, search: query.length ? `?${query.join("?")}` : "", hash: fragment.length ? `#${fragment.join("#")}` : "" };
+    }, [own]);
+    return routed.pathname !== "" ? routed : ownLocation;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",