@protobase/ui 0.59.2 → 0.59.3

package/dist/status/use-status-menu.js

@@ -0,0 +1,55 @@
+import { useClient } from "../data/api-provider.js";
+import { useOwnStatus } from "./use-statuses.js";
+import { text } from "./messages.js";
+import { AvailabilityMark, StatusMark, availabilityLabel } from "./status-mark.js";
+import { StatusDialog } from "./status-dialog.js";
+import { useState } from "react";
+import { heldStatus } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/status/use-status-menu.tsx
+/**
+* The person's own status in the user menu, in an app with `status: {}`, for someone signed in as themselves: the
+* menu's mark and item, and the picker the item opens. Nothing for staff signed in as them, or in an app without it.
+*/
+const useStatusMenu = (own) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const status = useOwnStatus();
+	const [open, setOpen] = useState(false);
+	if (!own || !status.isSuccess) return {};
+	const held = heldStatus(status.data);
+	const done = () => queryClient.invalidateQueries({ queryKey: ["statuses"] });
+	const save = async (input) => {
+		await client.status.set(input);
+		await done();
+	};
+	const clear = async () => {
+		await client.status.clear();
+		await done();
+	};
+	return {
+		menu: {
+			mark: held && /* @__PURE__ */ jsx(StatusMark, {
+				status: held,
+				textShown: "hover"
+			}),
+			label: held ? /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-1.5 text-foreground",
+				children: [/* @__PURE__ */ jsx(AvailabilityMark, { availability: held.availability }), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: held.text ?? availabilityLabel(held.availability)
+				})]
+			}) : text("setStatus"),
+			onOpen: () => setOpen(true)
+		},
+		...open && { dialog: /* @__PURE__ */ jsx(StatusDialog, {
+			current: held,
+			onSave: save,
+			onClear: clear,
+			onClose: () => setOpen(false)
+		}) }
+	};
+};
+//#endregion
+export { useStatusMenu };

package/dist/status/use-statuses.d.ts

@@ -0,0 +1,15 @@
+//#region src/status/use-statuses.d.ts
+/**
+ * How often a page reads the statuses again, over the connections it already has: another person's change, or a
+ * status whose time has passed, shows within this, while the page is in view.
+ */
+export declare const statusRefreshMs = 15000;
+/**
+ * The statuses of everyone who shares an organization with the signed-in person, their own included, as the server
+ * holds them now: read again every `statusRefreshMs` while the page is in view, and on focus. Disabled, with no data,
+ * in an app without `status: {}` and for a visitor.
+ */
+export declare const useStatuses: () => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").PersonStatus[], Error>;
+/** The signed-in person's own status, `null` without one, read as `useStatuses` reads the others'. */
+export declare const useOwnStatus: () => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").PersonStatus | null, Error>;
+//#endregion

package/dist/status/use-statuses.js

@@ -0,0 +1,43 @@
+import { useOptionalAuth } from "../auth/auth-provider.js";
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { useMeta } from "../data/use-meta.js";
+import { useQuery } from "@tanstack/react-query";
+//#region src/status/use-statuses.ts
+/**
+* How often a page reads the statuses again, over the connections it already has: another person's change, or a
+* status whose time has passed, shows within this, while the page is in view.
+*/
+const statusRefreshMs = 15e3;
+const useStatusUser = () => {
+	const auth = useOptionalAuth();
+	return Boolean(useMeta().data?.status) && auth?.state.kind === "signed-in" ? String(auth.state.user.id) : void 0;
+};
+/**
+* The statuses of everyone who shares an organization with the signed-in person, their own included, as the server
+* holds them now: read again every `statusRefreshMs` while the page is in view, and on focus. Disabled, with no data,
+* in an app without `status: {}` and for a visitor.
+*/
+const useStatuses = () => {
+	const client = useClient();
+	const userId = useStatusUser();
+	return useQuery({
+		queryKey: keys.statuses(userId ?? ""),
+		enabled: userId !== void 0,
+		refetchInterval: statusRefreshMs,
+		queryFn: () => client.status.people()
+	});
+};
+/** The signed-in person's own status, `null` without one, read as `useStatuses` reads the others'. */
+const useOwnStatus = () => {
+	const client = useClient();
+	const userId = useStatusUser();
+	return useQuery({
+		queryKey: keys.ownStatus(userId ?? ""),
+		enabled: userId !== void 0,
+		refetchInterval: statusRefreshMs,
+		queryFn: () => client.status.own()
+	});
+};
+//#endregion
+export { statusRefreshMs, useOwnStatus, useStatuses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.59.2",
+  "version": "0.59.3",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -39,9 +39,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.59.2",
-    "@protobase/layout": "0.59.2",
-    "@protobase/schema": "0.59.2",
+    "@protobase/client": "0.59.3",
+    "@protobase/layout": "0.59.3",
+    "@protobase/schema": "0.59.3",
     "@sentry/browser": "^11.7.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",