@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/fields/Link.tree.spec.tsx

@@ -0,0 +1,111 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeProvider } from "../FrappeProvider";
+import { Link } from "./Link";
+
+const mockUseLinkSearch = vi.fn();
+const mockUseLinkTitle = vi.fn();
+const mockUseDocTypeMeta = vi.fn();
+const mockUseFrappeCollection = vi.fn();
+const mockUseLiveQuery = vi.fn();
+
+vi.mock("@multiplatform.one/frappe", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    useLinkSearch: (...args: unknown[]) => mockUseLinkSearch(...args),
+    useLinkTitle: (...args: unknown[]) => mockUseLinkTitle(...args),
+    useDocTypeMeta: (...args: unknown[]) => mockUseDocTypeMeta(...args),
+    useFrappeCollection: (...args: unknown[]) => mockUseFrappeCollection(...args),
+    useLiveQuery: (...args: unknown[]) => mockUseLiveQuery(...args),
+  };
+});
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "Select {{doctype}}": "Select {{doctype}}",
+          "Search {{doctype}}": "Search {{doctype}}",
+          "Filter {{doctype}}": "Filter {{doctype}}",
+          "No matching {{doctype}}": "No matching {{doctype}}",
+        },
+      },
+    },
+  });
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockUseLinkSearch.mockReturnValue({ results: [], isLoading: false, error: null });
+  mockUseLinkTitle.mockReturnValue({ title: undefined, isLoading: false });
+  mockUseFrappeCollection.mockReturnValue({});
+  mockUseLiveQuery.mockReturnValue({
+    data: [
+      { name: "Assets", account_name: "Assets", parent_account: "", doctype: "Account" },
+      {
+        name: "HDFC Current",
+        account_name: "HDFC Current",
+        parent_account: "Assets",
+        doctype: "Account",
+      },
+    ],
+    isLoading: false,
+    isError: false,
+  });
+});
+
+afterEach(cleanup);
+
+const BASE_URL = "https://bench.example.com";
+
+function renderLink(props: Partial<React.ComponentProps<typeof Link>> = {}) {
+  return renderWithProviders(
+    <FrappeProvider baseURL={BASE_URL}>
+      <Link label="Account" doctype="Account" onChange={vi.fn()} {...props} />
+    </FrappeProvider>,
+  );
+}
+
+describe("Link tree adapter (MPO-53 AC-3)", () => {
+  it("renders TreeSelect when the target DocType is a tree", () => {
+    mockUseDocTypeMeta.mockReturnValue({
+      meta: { is_tree: 1, title_field: "account_name" },
+      isLoading: false,
+      error: null,
+    });
+    const result = renderLink({ value: "HDFC Current" });
+    expect(result.container.querySelector('[data-testid="tree-select"]')).toBeTruthy();
+    expect(result.container.querySelector('[data-testid="tree-select-trigger"]')).toBeTruthy();
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeNull();
+    expect(screen.getByText("HDFC Current")).toBeTruthy();
+  });
+
+  it("stays on Combobox when control ejects (DG-CTRL-06)", () => {
+    mockUseDocTypeMeta.mockReturnValue({
+      meta: { is_tree: 1, title_field: "account_name" },
+      isLoading: false,
+      error: null,
+    });
+    const result = renderLink({ control: "combobox" });
+    expect(result.container.querySelector('[data-testid="tree-select"]')).toBeNull();
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeTruthy();
+  });
+
+  it("stays on Combobox when the target DocType is not a tree", () => {
+    mockUseDocTypeMeta.mockReturnValue({
+      meta: { is_tree: 0 },
+      isLoading: false,
+      error: null,
+    });
+    const result = renderLink({ doctype: "User", label: "Assigned To" });
+    expect(result.container.querySelector('[data-testid="tree-select"]')).toBeNull();
+    expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeTruthy();
+  });
+});

package/src/fields/Link.tsx

@@ -1,16 +1,17 @@
 /**
- * Frappe Link field: a backend-searching combobox over a target DocType.
+ * Frappe Link field: a backend-searching combobox over a target DocType,
+ * or TreeSelect when that DocType is a tree (Account, Item Group, Territory).
  *
- * Built on the house forms Combobox (three-branch render, keyboard nav,
- * chromeless-in-cell) with the stock-Frappe data path:
- * - each (debounced) keystroke hits `frappe.desk.search.search_link` on the
- *   server — ranked value/description pairs, link filters and permissions
- *   enforced server-side; never client-side filtering of a preloaded list
- * - opening with an empty query loads the first page (like stock on focus)
- * - an existing value resolves its display title on mount via
- *   `frappe.desk.search.get_link_title`
+ * Combobox path — stock Frappe data:
+ * - each (debounced) keystroke hits `frappe.desk.search.search_link`
+ * - opening with an empty query loads the first page
+ * - an existing value resolves its display title via `get_link_title`
+ *
+ * Tree path — `useDocTypeMeta().is_tree` chooses TreeSelect (DG-CTRL-06
+ * `control="combobox"` ejects back to Combobox).
  */
 import {
+  useDocTypeMeta,
   useLinkSearch,
   useLinkTitle,
   type FrappeConnectionConfig,
@@ -20,6 +21,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { YStackProps } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
+import { LinkTree } from "./LinkTree";
 
 export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
   label?: string;
@@ -60,9 +62,23 @@ export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
   pageLength?: number;
   /** Doctype of the form this link sits on (server `reference_doctype`, feeds link queries) */
   referenceDoctype?: string;
+  /**
+   * DG-CTRL-06 eject hatch. Tree doctypes render TreeSelect; pass
+   * `"combobox"` to keep the search_link Combobox.
+   */
+  control?: "combobox";
+}
+
+function useLinkConnection(baseURL?: string, auth?: LinkProps["auth"]) {
+  const config = useFrappeConfig();
+  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
+  const connectionConfig: FrappeConnectionConfig | undefined = finalBaseURL
+    ? { baseURL: finalBaseURL, socketPort: config?.socketPort, auth: auth ?? config?.auth }
+    : undefined;
+  return { config, connectionConfig };
 }
 
-export function Link({
+function LinkCombobox({
   label,
   value = "",
   onChange,
@@ -92,18 +108,11 @@ export function Link({
   ...stackProps
 }: LinkProps) {
   const { t } = useTranslation();
-  const config = useFrappeConfig();
+  const { connectionConfig } = useLinkConnection(baseURL, auth);
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const isLocked = disabled || readOnly;
 
-  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
-  const connectionConfig: FrappeConnectionConfig | undefined = finalBaseURL
-    ? { baseURL: finalBaseURL, socketPort: config?.socketPort, auth: auth ?? config?.auth }
-    : undefined;
-
-  // Backend search per keystroke: the Combobox debounces onSearch by 200ms,
-  // so keep the HTTP debounce short — effective delay stays ~300ms.
   const {
     results,
     isLoading,
@@ -119,7 +128,6 @@ export function Link({
     referenceDoctype,
   });
 
-  // Display title for a pre-existing FK, fetched on mount (stock Frappe).
   const { title } = useLinkTitle(connectionConfig, doctype, value || undefined);
 
   const options = useMemo<ComboboxOption[]>(
@@ -195,3 +203,12 @@ export function Link({
     />
   );
 }
+
+export function Link(props: LinkProps) {
+  const { connectionConfig } = useLinkConnection(props.baseURL, props.auth);
+  const { meta } = useDocTypeMeta(connectionConfig, props.doctype);
+  if (meta?.is_tree && props.control !== "combobox") {
+    return <LinkTree {...props} />;
+  }
+  return <LinkCombobox {...props} />;
+}

package/src/fields/LinkTree.tsx

@@ -0,0 +1,102 @@
+/**
+ * Schema Link whose target DocType is a tree (Account, Item Group, Territory).
+ * Loads the forest the same way FrappeTreeView does, then renders TreeSelect.
+ */
+import {
+  useDocTypeMeta,
+  useFrappeCollection,
+  useLiveQuery,
+  useLinkTitle,
+  type FrappeConnectionConfig,
+} from "@multiplatform.one/frappe";
+import { TreeSelect } from "@multiplatform.one/components";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useFrappeConfig } from "../FrappeProvider";
+import { buildTreeNodes } from "../FrappeTreeView";
+import type { LinkProps } from "./Link";
+
+export function LinkTree({
+  label,
+  value = "",
+  onChange,
+  doctype,
+  filters,
+  disabled = false,
+  required = false,
+  baseURL,
+  auth,
+  error,
+  helperText,
+  readOnly = false,
+  skeleton = false,
+  compact = false,
+  placeholder,
+  referenceDoctype: _referenceDoctype,
+  ...stackProps
+}: LinkProps) {
+  const { t } = useTranslation();
+  const config = useFrappeConfig();
+  const isLocked = disabled || readOnly;
+
+  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
+  const connectionConfig: FrappeConnectionConfig | undefined = finalBaseURL
+    ? { baseURL: finalBaseURL, socketPort: config?.socketPort, auth: auth ?? config?.auth }
+    : undefined;
+
+  const { meta } = useDocTypeMeta(connectionConfig, doctype);
+  const titleField = meta?.title_field ?? "name";
+  const parentField = `parent_${doctype.toLowerCase().replace(/ /g, "_")}`;
+
+  const collection = useFrappeCollection(
+    connectionConfig && !isLocked ? connectionConfig : undefined,
+    doctype,
+    {
+      fields: ["name", titleField, parentField],
+      filters: filters as Record<string, unknown> | Array<[string, string, unknown]> | undefined,
+    },
+  );
+
+  const { data: rawData, isLoading } = useLiveQuery(
+    (q) => (collection ? q.from({ _list: collection }) : null),
+    [collection],
+  );
+
+  const docs = useMemo(() => (rawData as Array<{ name: string }> | undefined) ?? [], [rawData]);
+  const nodes = useMemo(
+    () => buildTreeNodes(docs, parentField, titleField),
+    [docs, parentField, titleField],
+  );
+
+  const { title } = useLinkTitle(connectionConfig, doctype, value || undefined);
+
+  const handleChange = useCallback(
+    (next: string) => {
+      if (isLocked) return;
+      onChange(next);
+    },
+    [isLocked, onChange],
+  );
+
+  return (
+    <TreeSelect
+      nodes={nodes}
+      value={value}
+      onChange={handleChange}
+      valueLabel={value ? (title ?? value) : undefined}
+      label={label}
+      placeholder={placeholder ?? t("Select {{doctype}}", { doctype })}
+      searchPlaceholder={t("Filter {{doctype}}", { doctype })}
+      emptyMessage={t("No matching {{doctype}}", { doctype })}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      error={error}
+      helperText={helperText}
+      skeleton={skeleton}
+      compact={compact}
+      loading={isLoading}
+      {...(stackProps as Record<string, unknown>)}
+    />
+  );
+}

package/src/fields/LongText/LongText.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 { LongText, type LongTextProps } from ".";
 
 export default {
@@ -78,3 +81,66 @@ ContractProbe.args = {
   value: "Line one\nLine two\nLine three",
   placeholder: "Type here",
 } as Partial<StoryProps>;
+
+interface LongTextCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const longTextCellRows: LongTextCellRow[] = [
+  {
+    id: "1",
+    label: "Alpha",
+    value: "Line one\nLine two\nLine three",
+  },
+  {
+    id: "2",
+    label: "Beta",
+    value: "Warehouse notes:\n- Pallet 4 is damaged\n- Reorder next week",
+  },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const longTextCellColumns: DataTableColumn<LongTextCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Long Text",
+    ...fieldtypeToTableField("Long Text"),
+  } as DataTableColumn<LongTextCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(longTextCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={longTextCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as LongTextCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Long Text cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Long Text") — in-cell textarea. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Long Text inside a table cell: the registry maps the fieldtype to an in-cell textarea. Three rows of mock DocType data; edits commit through onDataChange.",
+    },
+  },
+};

package/src/fields/LongText/index.tsx

@@ -1,5 +1,9 @@
+/**
+ * Frappe Long Text / Text — thin adapter over forms TextArea.
+ * Design-law lives on this file: compose TextArea, do not fork Input chrome.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
-import { Input as FormsInput } from "@multiplatform.one/forms";
+import { TextArea } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
 import { useProps } from "tamagui";
 
@@ -57,13 +61,16 @@ export function LongText<
     disabled,
     value,
     maxLength,
-    _minHeight,
+    minHeight,
     textAreaProps,
     ...fieldProps
   } = useProps(props) as LongTextProps<TData, TName> & Record<string, unknown>;
 
+  const minRows =
+    typeof minHeight === "number" && minHeight > 0 ? Math.max(4, Math.round(minHeight / 24)) : 6;
+
   return (
-    <FormsInput
+    <TextArea
       name={name}
       form={form}
       validators={validators}
@@ -83,9 +90,10 @@ export function LongText<
       onBlur={onBlur}
       placeholder={placeholder}
       disabled={disabled}
-      multiline
       maxLength={maxLength}
-      inputProps={textAreaProps as any}
+      minRows={minRows}
+      maxRows={16}
+      textAreaProps={textAreaProps as any}
     />
   );
 }

package/src/fields/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -1,8 +1,11 @@
 import { Form, type AnyFormApi } from "@multiplatform.one/forms";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Theme, YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { MarkdownEditorField, type MarkdownEditorFieldProps } from ".";
 
 const FIXTURE = `# Release notes
@@ -129,3 +132,36 @@ DarkScheme.args = {
   label: "Release notes (dark)",
   value: FIXTURE,
 } as Partial<StoryProps>;
+
+type MarkdownRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<MarkdownRow[]>([
+      { id: "1", label: "Alpha", value: "# Setup\n\nRun `make prepare`." },
+      { id: "2", label: "Beta", value: "## Notes\n\n- Ship the release\n- Ping reviewers" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<MarkdownRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Notes",
+        ...fieldtypeToTableField("Markdown Editor"),
+      },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/MentionInput/MentionInput.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 { MentionInputField, type MentionInputFieldProps, type MentionValue } from ".";
 
 const users = [
@@ -93,3 +96,44 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = {} as Partial<StoryProps>;
+
+const mentionUsers = [
+  { id: "u1", display: "John Doe" },
+  { id: "u2", display: "Jane Smith" },
+  { id: "u3", display: "Ravi Kumar" },
+];
+
+type MentionRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<MentionRow[]>([
+      { id: "1", label: "Alpha", value: "Ping @John Doe when the build is green" },
+      { id: "2", label: "Beta", value: "Waiting on @Jane Smith for the API keys" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const mapped = fieldtypeToTableField("Mention");
+    const columns: DataTableColumn<MentionRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Comment",
+        ...mapped,
+        fieldProps: { ...mapped.fieldProps, mentions: mentionUsers },
+      },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Numeric/Numeric.spec.tsx

@@ -62,3 +62,10 @@ describe("Numeric unit adornments (contrast residual)", () => {
     expect(colorClasses(symbol)).toEqual(colorClasses(screen.getByText("ramp-text-ref")));
   });
 });
+
+describe("Numeric design-law — compose forms Stepper", () => {
+  it("renders a numeric input (Stepper chrome, not a forked Input)", () => {
+    const result = renderWithProviders(<Numeric type="Float" label="Qty" />);
+    expect(result.container.querySelector("input")).toBeTruthy();
+  });
+});

package/src/fields/Numeric/Numeric.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 { Numeric, type NumericProps } from ".";
 
 export default {
@@ -79,3 +82,32 @@ DifferentCurrencies.parameters = {
     },
   },
 };
+
+type NumericRow = { id: string; label: string; value: number | undefined };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<NumericRow[]>([
+      { id: "1", label: "Alpha", value: 42 },
+      { id: "2", label: "Beta", value: 7 },
+      { id: "3", label: "Gamma", value: undefined },
+    ]);
+    const columns: DataTableColumn<NumericRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Qty (Int)", ...fieldtypeToTableField("Int") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Numeric/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Frappe Int / Float / Currency / Percent — thin adapter over forms Stepper.
+ *
+ * Design-law lives on this file: compose Stepper, do not fork Input chrome.
+ * Currency / Percent unit marks are semantic content and read from
+ * formCommonColors.text ($color11), never the muted tier.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { Stepper as FormsStepper, formCommonColors, useForm } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";

package/src/fields/OTPInput/OTPInput.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 { OTPInputField, type OTPInputFieldProps } from ".";
 
 export default {
@@ -67,3 +70,33 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "One-time code", length: 6, type: "numeric" } as Partial<StoryProps>;
+
+interface OtpRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<OtpRow[]>([
+    { id: "1", label: "Alpha", value: "123456" },
+    { id: "2", label: "Beta", value: "000000" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<OtpRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "OTP",
+      ...fieldtypeToTableField("OTP", "6"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";