@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/list/filter-saved.tsx

@@ -136,7 +136,6 @@ export function SavedFiltersControl({
               onChangeText={setDraftName}
               placeholder={t("list.filters.filterName", "Filter name")}
               size="$3"
-              compact
               aria-label={t("list.filters.filterName", "Filter name")}
             />
           </YStack>

package/src/list/filter-sort.tsx

@@ -174,7 +174,6 @@ export function SortControl({
               label: option.label,
             }))}
             size="$3"
-            compact
             aria-label={t("list.sortBy", "Sort")}
           />
         </YStack>

package/src/list/filter-standard.tsx

@@ -88,7 +88,6 @@ function StandardFilterControl({
           options={selectOptionsFromField(field.options)}
           placeholder={field.label}
           size="$3"
-          compact
           aria-label={field.label}
         />
       );
@@ -104,7 +103,7 @@ function StandardFilterControl({
           onChange={(next) => commit(next ? [field.fieldname, "=", next] : undefined)}
           doctype={field.options ?? ""}
           placeholder={field.label}
-          compact
+          size="$3"
         />
       );
       return vertical ? <YStack width="100%">{link}</YStack> : link;
@@ -174,7 +173,6 @@ function DebouncedTextFilter({ field, externalValue, commit, vertical }: Debounc
       onChangeText={setDraft}
       placeholder={field.kind === "date" ? `${field.label} (YYYY-MM-DD)` : field.label}
       size="$3"
-      compact
       aria-label={field.label}
       {...(field.kind === "number" ? { keyboardType: "numeric" as const } : {})}
     />

package/src/list/list-tools-sheet.tsx

@@ -13,7 +13,7 @@
 import { Button, SheetModal, SizableText, YStack, isWeb } from "@multiplatform.one/components";
 import { FunnelIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
@@ -32,6 +32,13 @@ export interface ListToolsButtonProps {
   sortField?: string;
   sortOrder?: "asc" | "desc";
   onSortChange?: (field: string, order: "asc" | "desc") => void;
+  /** Group-by facet panel: on phones it lives in this sheet (LC-101). */
+  facets?: ReactNode;
+  /**
+   * Custom trigger in place of the badge-counted Filter button (the compact
+   * list puts it at the end of its chips row). Receives the sheet opener.
+   */
+  renderTrigger?: (open: () => void) => ReactNode;
 }
 
 function SectionLabel({ children }: { children: string }) {
@@ -50,6 +57,8 @@ export function ListToolsButton({
   sortField,
   sortOrder,
   onSortChange,
+  facets,
+  renderTrigger,
 }: ListToolsButtonProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -77,18 +86,22 @@ export function ListToolsButton({
 
   return (
     <>
-      <Button
-        size={knobProps.sizeToken}
-        icon={<FunnelIcon size={iconSize} weight={filters.length > 0 ? "fill" : "regular"} />}
-        onPress={() => handleOpenChange(true)}
-        aria-label={t("list.filters.filter", "Filter")}
-      >
-        {filters.length > 0
-          ? t("list.filters.filterCount", "Filter ({{count}})", {
-              count: filters.length,
-            })
-          : t("list.filters.filter", "Filter")}
-      </Button>
+      {renderTrigger ? (
+        renderTrigger(() => handleOpenChange(true))
+      ) : (
+        <Button
+          size={knobProps.sizeToken}
+          icon={<FunnelIcon size={iconSize} weight={filters.length > 0 ? "fill" : "regular"} />}
+          onPress={() => handleOpenChange(true)}
+          aria-label={t("list.filters.filter", "Filter")}
+        >
+          {filters.length > 0
+            ? t("list.filters.filterCount", "Filter ({{count}})", {
+                count: filters.length,
+              })
+            : t("list.filters.filter", "Filter")}
+        </Button>
+      )}
       <SheetModal
         open={open}
         onOpenChange={handleOpenChange}
@@ -139,6 +152,12 @@ export function ListToolsButton({
               scrollRows={false}
             />
           </YStack>
+          {facets ? (
+            <YStack gap="$2">
+              <SectionLabel>{t("list.tools.groupBy", "Group by")}</SectionLabel>
+              {facets}
+            </YStack>
+          ) : null}
           <YStack gap="$2">
             <SectionLabel>{t("list.filters.savedFilters", "Saved Filters")}</SectionLabel>
             <SavedFiltersControl

package/src/navigation/paths.spec.ts

@@ -12,6 +12,7 @@ import {
   BACKOFFICE_VIEWS,
   createBackofficePaths,
   formPath,
+  formBuilderPath,
   homePath,
   isBackofficeView,
   listPath,
@@ -154,3 +155,21 @@ describe("isBackofficeView", () => {
     expect(isBackofficeView("kanban ")).toBe(false);
   });
 });
+
+describe("form builder paths", () => {
+  it.each(["/backoffice", "/admin", "/"])(
+    "builds a picker and encoded doctype under %s",
+    (base) => {
+      const paths = createBackofficePaths(base);
+      const prefix = base === "/" ? "" : base;
+      expect(paths.formBuilder()).toBe(`${prefix}/customize-form`);
+      expect(paths.formBuilder("Sales Order & Item")).toBe(
+        `${prefix}/customize-form?doc_type=Sales%20Order%20%26%20Item`,
+      );
+    },
+  );
+
+  it("exports a default-bound builder", () => {
+    expect(formBuilderPath("ToDo")).toBe("/backoffice/customize-form?doc_type=ToDo");
+  });
+});

package/src/navigation/paths.ts

@@ -7,6 +7,7 @@
  *   {base}/[slug]/view/[view]       → alternate doctype views (report, kanban, …)
  *   {base}/[slug]/new               → new document (optional `?d=` JSON prefill)
  *   {base}/[slug]/[name]            → document form page
+ *   {base}/customize-form           → form builder (`?doc_type=` picks the DocType)
  *
  * Slugs follow frappe's router slugs: lowercase, spaces → dashes
  * ("Sales Order" → "sales-order").
@@ -92,6 +93,7 @@ export interface BackofficePaths {
    */
   newDoc(doctype: string, defaults?: Record<string, unknown>): string;
   form(doctype: string, name: string): string;
+  formBuilder(doctype?: string): string;
   /** Query/Script Report page (desk /app/query-report/<name>). */
   queryReport(reportName: string): string;
 }
@@ -114,6 +116,8 @@ export function createBackofficePaths(basePath: string = BACKOFFICE_BASE): Backo
       return `${path}?d=${encodeURIComponent(JSON.stringify(defaults))}`;
     },
     form: (doctype, name) => `${prefix}/${toSlug(doctype)}/${encodeURIComponent(name)}`,
+    formBuilder: (doctype) =>
+      `${prefix}/customize-form${doctype ? `?doc_type=${encodeURIComponent(doctype)}` : ""}`,
     queryReport: (reportName) => `${prefix}/query-report/${encodeURIComponent(reportName)}`,
   };
 }
@@ -154,3 +158,7 @@ export const QUERY_REPORT_BASE = "/backoffice/query-report";
 export function queryReportPath(reportName: string): BackofficeSubPath {
   return defaultPaths.queryReport(reportName) as BackofficeSubPath;
 }
+
+export function formBuilderPath(doctype?: string): BackofficeSubPath {
+  return defaultPaths.formBuilder(doctype) as BackofficeSubPath;
+}

package/src/report/QueryReportScreen.tsx

@@ -301,7 +301,7 @@ export function QueryReportScreen({
         enablePagination
         initialState={{ pagination: { pageIndex: 0, pageSize: PAGE_SIZES[0] } }}
         renderPagination={(paginationProps) => (
-          <DataTablePagination {...paginationProps} pageSizeOptions={[...PAGE_SIZES]} compact />
+          <DataTablePagination {...paginationProps} pageSizeOptions={[...PAGE_SIZES]} size="$3" />
         )}
       />
     );

package/src/report/queryReportFilterBar.tsx

@@ -100,7 +100,6 @@ function ReportFilterControl({
         required={required}
         disabled
         value={text}
-        compact
         inputProps={{ "aria-label": label }}
       />
     );
@@ -119,7 +118,6 @@ function ReportFilterControl({
           }}
           options={queryReportSelectOptions(filter.options, t("queryReport.allValues", "All"))}
           placeholder={t("queryReport.selectValue", "Select...")}
-          compact
         />
       );
     case "link":
@@ -132,7 +130,6 @@ function ReportFilterControl({
           onChange={(next) => onValueChange(next)}
           doctype={filter.options ?? ""}
           placeholder={label}
-          compact
         />
       );
     case "date":
@@ -144,7 +141,6 @@ function ReportFilterControl({
           disabled={disabled}
           onChange={(next: string) => onValueChange(next)}
           type={fieldtype === "Datetime" ? "datetime" : fieldtype === "Time" ? "time" : "date"}
-          compact
         />
       );
     case "check":
@@ -169,7 +165,6 @@ function ReportFilterControl({
           disabled={disabled}
           value={text}
           onChangeText={(next) => onValueChange(next)}
-          compact
           rightIconInteractive={showClear}
           rightIcon={
             showClear ? (

package/src/shared/sessionUser.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FrappeProvider } from "@multiplatform.one/frappe-ui";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { useWorkspaces } from "../shell/useWorkspaces";
 import { useSessionUserInfo } from "../chrome/user-session";
@@ -104,3 +104,16 @@ it("clears the shared identity when the user menu clears session caches", async
   await loadSessionUser(config);
   expect(reads).toBe(2);
 });
+
+it("updates mounted consumers when session caches are cleared", async () => {
+  renderWithProviders(<Tree />);
+  await waitFor(() =>
+    expect(screen.getByTestId("session").textContent).toContain("reader@example.test"),
+  );
+  status = 403;
+  act(() => clearSessionUserCache());
+  await waitFor(() => expect(reads).toBe(2));
+  await waitFor(() =>
+    expect(screen.getByTestId("session").textContent).not.toContain("reader@example.test"),
+  );
+});

package/src/shared/sessionUser.ts

@@ -1,8 +1,21 @@
 import { HttpClient, type AuthConfig } from "@multiplatform.one/frappe";
 import { useFrappeConfig, type FrappeConfig } from "@multiplatform.one/frappe-ui";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
 
 const cache = new Map<string, Promise<string>>();
+let revision = 0;
+const listeners = new Set<() => void>();
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getRevision = () => revision;
+
+export function useSessionRevision(): number {
+  return useSyncExternalStore(subscribe, getRevision, getRevision);
+}
 
 export function sessionUserKey(config: Pick<FrappeConfig, "baseURL" | "auth">): string {
   const auth = config.auth;
@@ -11,6 +24,8 @@ export function sessionUserKey(config: Pick<FrappeConfig, "baseURL" | "auth">):
 
 export function clearSessionIdentityCache(): void {
   cache.clear();
+  revision += 1;
+  for (const listener of listeners) listener();
 }
 
 export function loadSessionUser(config: Pick<FrappeConfig, "baseURL" | "auth">): Promise<string> {
@@ -35,8 +50,14 @@ export function loadSessionUser(config: Pick<FrappeConfig, "baseURL" | "auth">):
 
 export function useSessionIdentity(): { user?: string; resolved: boolean } {
   const config = useFrappeConfig();
+  const revision = useSessionRevision();
   const key = config?.baseURL && !config.fixtures ? sessionUserKey(config) : undefined;
-  const [state, setState] = useState<{ key?: string; user?: string; resolved: boolean }>({
+  const [state, setState] = useState<{
+    key?: string;
+    revision?: number;
+    user?: string;
+    resolved: boolean;
+  }>({
     resolved: false,
   });
   useEffect(() => {
@@ -45,15 +66,15 @@ export function useSessionIdentity(): { user?: string; resolved: boolean } {
     loadSessionUser(config)
       .then((user) => {
         if (!cancelled)
-          setState({ key, user: user === "Guest" ? undefined : user, resolved: true });
+          setState({ key, revision, user: user === "Guest" ? undefined : user, resolved: true });
       })
       .catch(() => {
-        if (!cancelled) setState({ key, resolved: true });
+        if (!cancelled) setState({ key, revision, resolved: true });
       });
     return () => {
       cancelled = true;
     };
-  }, [key, config]);
+  }, [key, config, revision]);
   if (!key) return { resolved: true };
-  return state.key === key ? state : { resolved: false };
+  return state.key === key && state.revision === revision ? state : { resolved: false };
 }

package/src/shell/BackofficeShell.spec.tsx

@@ -1,21 +1,34 @@
 import React from "react";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup, screen, fireEvent } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { defaultKnobs, resolveKnobs, type LayoutSizeClass } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { BackofficeShell } from "./BackofficeShell";
 
-const layout = vi.hoisted(() => ({ size: "wide" }));
-vi.mock("@multiplatform.one/theme", async (original) => ({
-  ...(await original<typeof import("@multiplatform.one/theme")>()),
-  useLayoutSizeClass: () => layout.size,
-}));
+// A pinned size class wins; unpinned, the real hook reads window.innerWidth.
+const layout = vi.hoisted(() => ({ size: undefined as LayoutSizeClass | undefined }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useLayoutSizeClass: () => {
+      const measured = actual.useLayoutSizeClass();
+      return layout.size ?? measured;
+    },
+  };
+});
 
 const MOCK_HOST = "https://backoffice-shell-chrome.mock.test";
 
-afterEach(cleanup);
+const initialWidth = window.innerWidth;
+
+afterEach(() => {
+  cleanup();
+  window.innerWidth = initialWidth;
+});
 
 function renderShell() {
   return renderWithProviders(
@@ -37,10 +50,44 @@ function renderShell() {
 }
 
 describe("BackofficeShell pane hairlines", () => {
+  it("keeps phone Search and Notifications as separate content-sized targets", () => {
+    window.innerWidth = 390;
+    renderShell();
+    const search = screen.getByLabelText("Search");
+    const notifications = screen.getByLabelText("Notifications");
+    expect(search.textContent).toBe("");
+    expect(search.contains(notifications)).toBe(false);
+    expect(notifications.contains(search)).toBe(false);
+    let chrome = search.parentElement;
+    while (chrome && !chrome.contains(notifications)) chrome = chrome.parentElement;
+    expect(chrome).not.toBeNull();
+    expect(chrome).not.toBe(screen.getByRole("banner"));
+    expect(search.className).not.toMatch(/_fg-1(?: |$)/);
+    let trigger = notifications.parentElement;
+    while (trigger && trigger !== chrome && !trigger.classList.contains("_w-auto")) {
+      trigger = trigger.parentElement;
+    }
+    expect(trigger).not.toBe(chrome);
+    expect(trigger?.classList.contains("_w-auto")).toBe(true);
+  });
+
+  it("supplies theme ink to the header glyphs instead of native currentColor", () => {
+    renderShell();
+    const glyphs = ["Toggle sidebar", "Search", "Notifications"].map((label) =>
+      screen.getByLabelText(label).querySelector("svg"),
+    );
+    for (const glyph of glyphs) {
+      expect(glyph).toBeTruthy();
+      expect(glyph?.getAttribute("fill")).not.toBe("currentColor");
+      expect(glyph?.getAttribute("fill")).toBe(glyphs[0]?.getAttribute("fill"));
+    }
+  });
+
   it("paints full-width banner and full-height column rules plus a footer rule", () => {
     renderShell();
 
     expect(screen.getByTestId("backoffice-shell-banner-rule")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
     expect(screen.getByTestId("backoffice-shell-column-rule")).toBeTruthy();
     expect(screen.getByTestId("backoffice-shell-footer-rule")).toBeTruthy();
     expect(screen.getByTestId("host-sidebar-footer")).toBeTruthy();
@@ -48,6 +95,41 @@ describe("BackofficeShell pane hairlines", () => {
   });
 });
 
+describe("BackofficeShell bar fragment (B5)", () => {
+  it("spreads knobProps.bar.frame on the banner instead of a private height map", () => {
+    renderShell();
+    const { frame } = resolveKnobs(defaultKnobs).knobProps.bar;
+    expect(frame.minHeight).toBeGreaterThanOrEqual(52);
+    expect(frame.minHeight).toBeLessThanOrEqual(56);
+    const classes = String(screen.getByRole("banner").className).split(" ");
+    expect(classes).toContain(`_mih-${frame.minHeight}px`);
+    expect(classes).toContain("_pt-t-space-2");
+    expect(classes).toContain("_pl-t-space-4");
+    expect(classes.some((c) => /^_h-/.test(c))).toBe(false);
+  });
+});
+
+describe("BackofficeShell desktop sidebar", () => {
+  it("starts closed and opens and closes from the hamburger", () => {
+    renderShell();
+    const toggle = screen.getByRole("button", { name: "Toggle sidebar" });
+
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.getByRole("main").textContent).toContain("page body");
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByTestId("backoffice-sidebar-rail")).toBeTruthy();
+    expect(screen.queryByTestId("backoffice-sidebar-drawer")).toBeNull();
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.getByRole("main").textContent).toContain("page body");
+  });
+});
+
 it("uses an icon-only search trigger in the compact header", async () => {
   layout.size = "compact";
   const width = window.innerWidth;
@@ -58,8 +140,9 @@ it("uses an icon-only search trigger in the compact header", async () => {
   expect(search.textContent?.trim()).toBe("");
   expect(getComputedStyle(search).flexShrink).toBe("0");
   const banner = screen.getByRole("banner");
-  for (const label of ["Notifications", "Help", "User menu"]) {
-    let node = screen.getByLabelText(label).parentElement;
+  expect(screen.queryByLabelText("Help")).toBeNull();
+  for (const label of ["Notifications", "Log in"]) {
+    let node = screen.getByRole("button", { name: label }).parentElement;
     while (node && node !== banner) {
       expect(node.style.width || getComputedStyle(node).width).not.toBe("100%");
       node = node.parentElement;
@@ -67,6 +150,6 @@ it("uses an icon-only search trigger in the compact header", async () => {
   }
   fireEvent.click(search);
   expect(await screen.findByPlaceholderText(/Search/)).toBeTruthy();
-  layout.size = "wide";
+  layout.size = undefined;
   Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: width });
 });