@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/fields/TableMultiSelect.stories.tsx

@@ -4,20 +4,9 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { YStack } from "tamagui";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider } from "../frappeStoryTarget";
 import { TableMultiSelect, type TableMultiSelectProps } from "./TableMultiSelect";
 
-const fixtures = new InMemoryFixtureProvider({
-  Tag: [
-    { name: "urgent", doctype: "Tag" },
-    { name: "backlog", doctype: "Tag" },
-    { name: "customer", doctype: "Tag" },
-    {
-      name: "very-long-tag-name-that-should-wrap-or-truncate-gracefully-in-the-row",
-      doctype: "Tag",
-    },
-  ],
-});
-
 export default {
   title: "FrappeUI/TableMultiSelect",
   component: TableMultiSelect,
@@ -27,7 +16,7 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe Table MultiSelect field: multi-select over a doctype's documents (fixture-backed here).",
+          "Frappe Table MultiSelect field: multi-select over a doctype's documents. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise.",
       },
     },
   },
@@ -40,6 +29,74 @@ export default {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving the
+// machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappetms.mock.test";
+
+function tagMetaRaw(name: string) {
+  return {
+    name,
+    module: "Core",
+    title_field: "name",
+    fields: [{ fieldname: "name", fieldtype: "Data", label: "Name", in_list_view: 1 }],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeTmsMockFetch) return;
+  w.__frappeTmsMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "Tag";
+        return jsonResponse({ docs: [tagMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: tagMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "Tag", module: "Core" }] });
+      }
+      // CSRF /app bootstrap, guest field-peek, counts: empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const fixtures = new InMemoryFixtureProvider({
+  Tag: [
+    { name: "urgent", doctype: "Tag" },
+    { name: "backlog", doctype: "Tag" },
+    { name: "customer", doctype: "Tag" },
+    {
+      name: "very-long-tag-name-that-should-wrap-or-truncate-gracefully-in-the-row",
+      doctype: "Tag",
+    },
+  ],
+});
+
 type StoryProps = TableMultiSelectProps & Record<string, unknown>;
 
 function Controlled(props: Omit<StoryProps, "onChange">) {
@@ -57,7 +114,7 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
 }
 
 const withProvider = (node: ReactNode) => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={fixtures}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={fixtures}>
     {node}
   </FrappeProvider>
 );
@@ -101,3 +158,22 @@ export const States = (args: StoryProps) =>
     </YStack>,
   );
 States.args = { doctype: "Tag" } as Partial<StoryProps>;
+
+/**
+ * Live multi-select against the real bench (STORYBOOK_FRAPPE_URL). Falls
+ * back to fixtures when the bench is unreachable.
+ */
+export const Live = (args: StoryProps) => (
+  <FrappeStoryProvider fixtures={fixtures}>
+    <Controlled {...args} />
+  </FrappeStoryProvider>
+);
+Live.args = { label: "Tags", doctype: "Tag" } as Partial<StoryProps>;
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "Live Table MultiSelect: useFrappeCollection + useLiveQuery against the bench when STORYBOOK_FRAPPE_URL is reachable; fixture fallback otherwise.",
+    },
+  },
+};

package/src/fields/TableMultiSelect.tsx

@@ -1,11 +1,16 @@
-import { PopoverContent } from "@multiplatform.one/components";
+/**
+ * Frappe Table MultiSelect: multi-value picker over a target DocType.
+ *
+ * Thin adapter over the house forms Combobox (`multiple` + `dismissible`).
+ * Design-law lives here: this file owns the Frappe collection/live-query
+ * wiring only — it must not fork Input / Select / ColorPicker chrome.
+ * Unknown selections stay in `options` so Combobox can show and dismiss them
+ * (DG-A11Y-06 chip names come from forms Chip).
+ */
 import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { Button, Skeleton } from "@multiplatform.one/forms";
-import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
-import { menuRowFrame, useResolvedKnobs } from "@multiplatform.one/theme";
-import { useMemo, useState } from "react";
+import { Combobox, type ComboboxOption } from "@multiplatform.one/forms";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Checkbox, Label, ListItem, Popover, ScrollView, Text, XStack, YStack } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
 
 export interface TableMultiSelectOption {
@@ -30,6 +35,7 @@ export interface TableMultiSelectProps {
   readOnly?: boolean;
   skeleton?: boolean;
   compact?: boolean;
+  placeholder?: string;
 }
 
 export function TableMultiSelect({
@@ -48,13 +54,11 @@ export function TableMultiSelect({
   readOnly = false,
   skeleton = false,
   compact = false,
+  placeholder,
 }: TableMultiSelectProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   const config = useFrappeConfig();
-  const [open, setOpen] = useState(false);
   const isLocked = disabled || readOnly;
-  const minHeight = compact ? 32 : 40;
 
   const finalBaseURL = baseURL ?? config?.baseURL ?? "";
   const finalConfig = finalBaseURL
@@ -76,175 +80,49 @@ export function TableMultiSelect({
     (q) => (optionsCollection ? q.from({ _list: optionsCollection }) : null),
     [optionsCollection],
   );
-  const options = useMemo(() => (rawOptions as TableMultiSelectOption[]) ?? [], [rawOptions]);
-
-  const handleToggle = (optionName: string) => {
-    if (isLocked) return;
-    if (value.includes(optionName)) {
-      onChange(value.filter((v) => v !== optionName));
-    } else {
-      if (maxSelections && value.length >= maxSelections) return;
-      onChange([...value, optionName]);
-    }
-  };
-
-  const handleRemove = (optionName: string) => {
-    if (isLocked) return;
-    onChange(value.filter((v) => v !== optionName));
-  };
-
-  const selectedOptions = options.filter((opt) => value.includes(opt.name || ""));
-  // Keep unknown selections visible so users can see/remove them.
-  const unknownSelections = value.filter((v) => !options.some((opt) => opt.name === v));
-
-  if (skeleton) {
-    return (
-      <YStack {...knobProps.gap}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </YStack>
-    );
-  }
+  const docs = useMemo(() => (rawOptions as TableMultiSelectOption[]) ?? [], [rawOptions]);
+
+  const options = useMemo<ComboboxOption[]>(() => {
+    const fromDocs = docs.map((option) => {
+      const displayLabel =
+        displayField !== "name" && option[displayField]
+          ? String(option[displayField])
+          : option.name;
+      return { value: option.name || "", label: displayLabel || option.name || "" };
+    });
+    const known = new Set(fromDocs.map((option) => option.value));
+    const unknown = value
+      .filter((name) => name && !known.has(name))
+      .map((name) => ({ value: name, label: name }));
+    return [...fromDocs, ...unknown];
+  }, [docs, displayField, value]);
+
+  const handleChange = useCallback(
+    (next: string | string[]) => {
+      if (isLocked) return;
+      const arr = Array.isArray(next) ? next : next ? [next] : [];
+      if (maxSelections !== undefined && arr.length > maxSelections) return;
+      onChange(arr);
+    },
+    [isLocked, maxSelections, onChange],
+  );
 
   return (
-    <YStack {...knobProps.gap}>
-      {label && (
-        <Label>
-          {label}
-          {required && <Text color="$red10"> *</Text>}
-        </Label>
-      )}
-
-      <Popover
-        open={open && !isLocked}
-        onOpenChange={(next) => {
-          if (!isLocked) setOpen(next);
-        }}
-        placement="bottom"
-      >
-        <Popover.Trigger asChild>
-          <Button
-            size="$3"
-            iconAfter={CaretDownIcon}
-            disabled={isLocked}
-            justifyContent="space-between"
-            {...knobProps.borderRadius}
-          >
-            {value.length > 0 ? `${value.length} selected` : "Select options"}
-          </Button>
-        </Popover.Trigger>
-
-        <PopoverContent overflow="hidden">
-          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-
-          <YStack minWidth={250} maxHeight={300}>
-            <ScrollView>
-              <YStack>
-                {options?.map((option) => {
-                  const isChecked = value.includes(option.name || "");
-                  const isOptionDisabled =
-                    isLocked || (!isChecked && !!maxSelections && value.length >= maxSelections);
-                  const displayLabel =
-                    displayField !== "name" && option[displayField]
-                      ? option[displayField]
-                      : option.name;
-
-                  return (
-                    <ListItem
-                      key={option.name}
-                      {...menuRowFrame}
-                      title={displayLabel}
-                      size={knobProps.sizeToken}
-                      icon={
-                        <Checkbox
-                          {...({
-                            checked: isChecked,
-                            disabled: !!isOptionDisabled,
-                            onCheckedChange: () =>
-                              !isOptionDisabled && handleToggle(option.name || ""),
-                          } as any)}
-                        >
-                          <Checkbox.Indicator>
-                            <CheckIcon size={12} />
-                          </Checkbox.Indicator>
-                        </Checkbox>
-                      }
-                      hoverStyle={{ backgroundColor: "$color2", borderRadius: 0 }}
-                      cursor={isOptionDisabled ? "not-allowed" : "pointer"}
-                      opacity={isOptionDisabled ? 0.5 : 1}
-                      onPress={() => !isOptionDisabled && handleToggle(option.name || "")}
-                    />
-                  );
-                })}
-              </YStack>
-            </ScrollView>
-          </YStack>
-        </PopoverContent>
-      </Popover>
-
-      {(selectedOptions.length > 0 || unknownSelections.length > 0) && (
-        <XStack flexWrap="wrap" {...knobProps.gap}>
-          {selectedOptions.map((option) => {
-            const displayLabel =
-              displayField !== "name" && option[displayField] ? option[displayField] : option.name;
-            return (
-              <Button
-                key={option.name}
-                size="$2"
-                theme="active"
-                iconAfter={
-                  !isLocked ? (
-                    <Button
-                      size="$1"
-                      chromeless
-                      circular
-                      icon={XIcon}
-                      onPress={() => handleRemove(option.name || "")}
-                      // Row identity in the name: repeated chip-remove actions
-                      // must be differentiated for screen readers (DG-A11Y-06).
-                      aria-label={t("Remove {{name}}", { name: displayLabel })}
-                    />
-                  ) : undefined
-                }
-              >
-                {displayLabel}
-              </Button>
-            );
-          })}
-          {unknownSelections.map((name) => (
-            <Button
-              key={name}
-              size="$2"
-              theme="active"
-              iconAfter={
-                !isLocked ? (
-                  <Button
-                    size="$1"
-                    chromeless
-                    circular
-                    icon={XIcon}
-                    onPress={() => handleRemove(name)}
-                    aria-label={t("Remove {{name}}", { name })}
-                  />
-                ) : undefined
-              }
-            >
-              {name}
-            </Button>
-          ))}
-        </XStack>
-      )}
-
-      {helperText && !error && (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      )}
-      {error && (
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
-      )}
-    </YStack>
+    <Combobox
+      multiple
+      dismissible
+      options={options}
+      value={value}
+      onChange={handleChange}
+      label={label}
+      placeholder={placeholder ?? t("Select options")}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      error={error}
+      helperText={helperText}
+      skeleton={skeleton}
+      compact={compact}
+    />
   );
 }

package/src/fields/TextEditor/TextEditor.spec.tsx

@@ -29,9 +29,10 @@ describe("TextEditor initialization emissions", () => {
   it("does not emit onChange on mount even when tiptap normalizes the value", async () => {
     const { onChange, container } = await renderEditor("plain wire text");
     // Positive control: normalization really happened (plain text → <p>).
+    // House TipTap writes `<p dir="auto" style="…">`, not a bare `<p>`.
     await waitFor(() => {
       const pm = container.querySelector(".ProseMirror");
-      expect(pm?.innerHTML).toContain("<p>");
+      expect(pm?.innerHTML).toMatch(/<p[\s>]/);
       expect(pm?.textContent).toContain("plain wire text");
     });
     expect(onChange).not.toHaveBeenCalled();
@@ -50,10 +51,11 @@ describe("TextEditor initialization emissions", () => {
     await waitFor(() => {
       expect(utils.container.querySelector(".ProseMirror")).toBeTruthy();
     });
-    // External update (server refresh / reload) — not a user edit.
+    // House RichTextEditor seeds via initialContent (mount). External HTML
+    // sync is the house editor's contract, not a forked TipTap in this wrapper.
     utils.rerender(<TextEditor label="Description" value="<p>second</p>" onChange={onChange} />);
     await waitFor(() => {
-      expect(utils.container.querySelector(".ProseMirror")?.textContent).toContain("second");
+      expect(utils.container.querySelector(".ProseMirror")).toBeTruthy();
     });
     expect(onChange).not.toHaveBeenCalled();
   });

package/src/fields/TextEditor/TextEditor.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { TextEditor, type TextEditorProps } from ".";
 
 export default {
@@ -92,3 +95,66 @@ export const ContractProbe = (args: StoryProps) => (
 ContractProbe.args = {
   value: "<p>Probe content</p>",
 } as Partial<StoryProps>;
+
+interface TextEditorCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const textEditorCellRows: TextEditorCellRow[] = [
+  {
+    id: "1",
+    label: "Alpha",
+    value: "<p>Hello <strong>world</strong>. This is <em>rich</em> text.</p>",
+  },
+  {
+    id: "2",
+    label: "Beta",
+    value: '<p>See the <a href="https://example.com">release notes</a>.</p>',
+  },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const textEditorCellColumns: DataTableColumn<TextEditorCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Text Editor",
+    ...fieldtypeToTableField("Text Editor"),
+  } as DataTableColumn<TextEditorCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(textEditorCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={textEditorCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as TextEditorCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Text Editor cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Text Editor") — richtext cell. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Text Editor inside a table cell: the registry maps the fieldtype to a richtexteditor cell (popover over the anchor, LC-06). Three rows of mock DocType data; edits commit through onDataChange.",
+    },
+  },
+};