@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/formBuilder/model.ts

@@ -0,0 +1,522 @@
+import type { KanbanBoardColumnSnapshot, KanbanDropTarget } from "@multiplatform.one/components";
+import type { DocFieldMeta } from "@multiplatform.one/frappe-ui";
+import {
+  fieldtypeCatalog,
+  holdsValue,
+  isBreakType,
+  isColumnBreak,
+  isSectionBreak,
+  isTabBreak,
+  needsOptions,
+  type BuilderMessage,
+} from "./fieldtypes";
+
+export type BuilderDocField = Omit<
+  DocFieldMeta,
+  "fieldtype" | "reqd" | "hidden" | "read_only" | "in_list_view"
+> & {
+  fieldname: string;
+  fieldtype: string;
+  label?: string;
+  options?: string;
+  default?: DocFieldMeta["default"];
+  description?: DocFieldMeta["description"];
+  reqd?: number;
+  hidden?: number;
+  read_only?: number;
+  in_list_view?: number;
+  idx?: number;
+  name?: string;
+  is_custom_field?: number;
+};
+export interface BuilderField {
+  key: string;
+  df: BuilderDocField;
+  isNew?: boolean;
+  fieldnameEdited?: boolean;
+}
+export interface BuilderColumn {
+  key: string;
+  df?: BuilderDocField;
+  fields: BuilderField[];
+}
+export interface BuilderSection {
+  key: string;
+  df?: BuilderDocField;
+  columns: BuilderColumn[];
+}
+export interface BuilderTab {
+  key: string;
+  df?: BuilderDocField;
+  sections: BuilderSection[];
+}
+export interface BuilderLayout {
+  tabs: BuilderTab[];
+}
+export interface BuilderFieldLocation {
+  tabKey: string;
+  sectionKey: string;
+  columnKey: string;
+  index: number;
+}
+export type FormBuilderMode = "customize" | "doctype";
+
+type BuilderNode = BuilderTab | BuilderSection | BuilderColumn | BuilderField;
+
+function nodes(layout: BuilderLayout): BuilderNode[] {
+  return layout.tabs.flatMap((tab) => [
+    tab,
+    ...tab.sections.flatMap((section) => [
+      section,
+      ...section.columns.flatMap((column) => [column, ...column.fields]),
+    ]),
+  ]);
+}
+
+function keyFactory(layout: BuilderLayout) {
+  const used = new Set(nodes(layout).map((node) => node.key));
+  let next = 1;
+  return () => {
+    while (used.has(`builder_${next}`)) next++;
+    const key = `builder_${next++}`;
+    used.add(key);
+    return key;
+  };
+}
+
+function emptyColumn(key: () => string): BuilderColumn {
+  return { key: key(), fields: [] };
+}
+function emptySection(key: () => string): BuilderSection {
+  return { key: key(), columns: [emptyColumn(key)] };
+}
+function emptyTab(key: () => string): BuilderTab {
+  return { key: key(), sections: [emptySection(key)] };
+}
+
+export function layoutFromFields(fields: readonly BuilderDocField[]): BuilderLayout {
+  const layout: BuilderLayout = { tabs: [] };
+  const key = keyFactory(layout);
+  let tab = emptyTab(key);
+  layout.tabs.push(tab);
+  let section = tab.sections[0];
+  let column = section.columns[0];
+  const ordered = fields
+    .map((df, index) => ({ df, index }))
+    .sort((a, b) => (a.df.idx ?? a.index + 1) - (b.df.idx ?? b.index + 1));
+  for (const [position, original] of ordered.entries()) {
+    const df = { ...original.df };
+    if (isTabBreak(df.fieldtype)) {
+      if (position !== 0 || tab.df) {
+        tab = emptyTab(key);
+        layout.tabs.push(tab);
+      }
+      tab.df = df;
+      section = tab.sections[0];
+      column = section.columns[0];
+    } else if (isSectionBreak(df.fieldtype)) {
+      if (section.df || section.columns.length > 1 || column.fields.length > 0) {
+        section = emptySection(key);
+        tab.sections.push(section);
+      }
+      section.df = df;
+      column = section.columns[0];
+    } else if (isColumnBreak(df.fieldtype)) {
+      if (column.df || column.fields.length > 0) {
+        column = emptyColumn(key);
+        section.columns.push(column);
+      }
+      column.df = df;
+    } else {
+      column.fields.push({ key: key(), df });
+    }
+  }
+  return layout;
+}
+
+export function scrub(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[ -]/g, "_")
+    .replace(/[^a-z0-9_]/g, "");
+}
+
+function fieldnames(layout: BuilderLayout, exceptKey?: string): Set<string> {
+  return new Set(
+    nodes(layout)
+      .filter((n) => n.key !== exceptKey)
+      .flatMap((n) => (n.df?.fieldname ? [n.df.fieldname] : [])),
+  );
+}
+
+function uniqueName(base: string, used: Set<string>, numbered = false): string {
+  let candidate = base;
+  let n = 1;
+  if (numbered) candidate = `${base}_${n++}`;
+  while (used.has(candidate)) candidate = `${base}_${n++}`;
+  used.add(candidate);
+  return candidate;
+}
+
+export function fieldsFromLayout(layout: BuilderLayout): BuilderDocField[] {
+  const used = fieldnames(layout);
+  const fields: BuilderDocField[] = [];
+  const emit = (df: BuilderDocField) => fields.push({ ...df, idx: fields.length + 1 });
+  const emitBreak = (node: BuilderNode, type: string, needed: boolean) => {
+    if (node.df) emit(node.df);
+    else if (needed) emit({ fieldtype: type, fieldname: uniqueName(scrub(type), used, true) });
+  };
+  layout.tabs.forEach((tab, ti) => {
+    if (ti > 0 && !tab.sections.some((s) => s.columns.some((c) => c.fields.length))) return;
+    emitBreak(tab, "Tab Break", ti > 0);
+    tab.sections.forEach((section, si) => {
+      if (!section.columns.some((c) => c.fields.length)) return;
+      emitBreak(section, "Section Break", si > 0);
+      section.columns.forEach((column, ci) => {
+        emitBreak(column, "Column Break", ci > 0 || column.fields.length === 0);
+        column.fields.forEach((field) => emit(field.df));
+      });
+    });
+  });
+  return fields;
+}
+
+function copy(layout: BuilderLayout): BuilderLayout {
+  return {
+    tabs: layout.tabs.map((tab) => ({
+      ...tab,
+      sections: tab.sections.map((section) => ({
+        ...section,
+        columns: section.columns.map((column) => ({ ...column, fields: [...column.fields] })),
+      })),
+    })),
+  };
+}
+function columns(layout: BuilderLayout): BuilderColumn[] {
+  return layout.tabs.flatMap((t) => t.sections.flatMap((s) => s.columns));
+}
+function getColumn(layout: BuilderLayout, key: string) {
+  return columns(layout).find((c) => c.key === key);
+}
+
+export function findField(layout: BuilderLayout, key: string): BuilderField | undefined {
+  return columns(layout)
+    .flatMap((c) => c.fields)
+    .find((field) => field.key === key);
+}
+
+export function fieldLocation(
+  layout: BuilderLayout,
+  key: string,
+): BuilderFieldLocation | undefined {
+  for (const tab of layout.tabs)
+    for (const section of tab.sections)
+      for (const column of section.columns) {
+        const index = column.fields.findIndex((f) => f.key === key);
+        if (index >= 0)
+          return { tabKey: tab.key, sectionKey: section.key, columnKey: column.key, index };
+      }
+  return undefined;
+}
+
+export function moveField(
+  layout: BuilderLayout,
+  fieldKey: string,
+  target: KanbanDropTarget,
+): BuilderLayout {
+  const from = fieldLocation(layout, fieldKey);
+  if (!from || !getColumn(layout, target.columnId)) return layout;
+  const next = copy(layout);
+  const [field] = getColumn(next, from.columnKey)!.fields.splice(from.index, 1);
+  const dest = getColumn(next, target.columnId)!;
+  dest.fields.splice(Math.max(0, Math.min(target.index, dest.fields.length)), 0, field);
+  return next;
+}
+
+/** A palette draft is inserted with insertField, which routes break types to structure. */
+export function newFieldFromType(layout: BuilderLayout, fieldtype: string): BuilderField {
+  const label = fieldtypeCatalog.find((f) => f.fieldtype === fieldtype)?.label ?? fieldtype;
+  return {
+    key: keyFactory(layout)(),
+    df: {
+      fieldtype,
+      label,
+      fieldname: uniqueName(scrub(label), fieldnames(layout), isBreakType(fieldtype)),
+    },
+    isNew: true,
+  };
+}
+
+export function insertField(
+  layout: BuilderLayout,
+  draft: BuilderDocField | BuilderField,
+  target: KanbanDropTarget,
+): { layout: BuilderLayout; key: string } {
+  if (!getColumn(layout, target.columnId)) throw new Error("Unknown form builder column");
+  const key = keyFactory(layout);
+  const field: BuilderField =
+    "df" in draft && typeof draft.key === "string"
+      ? {
+          ...(draft as BuilderField),
+          key: key(),
+          df: { ...(draft as BuilderField).df },
+          isNew: true,
+        }
+      : { key: key(), df: { ...(draft as BuilderDocField) }, isNew: true };
+  const next = copy(layout);
+  if (isBreakType(field.df.fieldtype)) {
+    const tab = next.tabs.find((t) =>
+      t.sections.some((s) => s.columns.some((c) => c.key === target.columnId)),
+    )!;
+    const section = tab.sections.find((s) => s.columns.some((c) => c.key === target.columnId))!;
+    if (isTabBreak(field.df.fieldtype)) {
+      next.tabs.splice(next.tabs.indexOf(tab) + 1, 0, {
+        key: field.key,
+        df: field.df,
+        sections: [emptySection(key)],
+      });
+    } else if (isSectionBreak(field.df.fieldtype)) {
+      tab.sections.splice(tab.sections.indexOf(section) + 1, 0, {
+        key: field.key,
+        df: field.df,
+        columns: [emptyColumn(key)],
+      });
+    } else {
+      section.columns.splice(section.columns.findIndex((c) => c.key === target.columnId) + 1, 0, {
+        key: field.key,
+        df: field.df,
+        fields: [],
+      });
+    }
+  } else {
+    const column = getColumn(next, target.columnId)!;
+    column.fields.splice(Math.max(0, Math.min(target.index, column.fields.length)), 0, field);
+  }
+  return { layout: next, key: field.key };
+}
+
+export function removeField(layout: BuilderLayout, key: string): BuilderLayout {
+  const location = fieldLocation(layout, key);
+  if (!location) return layout;
+  const next = copy(layout);
+  getColumn(next, location.columnKey)!.fields.splice(location.index, 1);
+  return next;
+}
+
+export function updateField(
+  layout: BuilderLayout,
+  key: string,
+  patch: Partial<BuilderDocField>,
+): BuilderLayout {
+  const location = fieldLocation(layout, key);
+  if (!location) return layout;
+  const next = copy(layout);
+  const column = getColumn(next, location.columnKey)!;
+  const field = column.fields[location.index];
+  const df = { ...field.df, ...patch };
+  const fieldnameEdited = field.fieldnameEdited || Object.hasOwn(patch, "fieldname");
+  if (field.isNew && !fieldnameEdited && patch.label !== undefined)
+    df.fieldname = uniqueName(scrub(patch.label), fieldnames(layout, key));
+  if (isBreakType(df.fieldtype)) {
+    const nextKey = keyFactory(layout);
+    const tab = next.tabs.find((t) => t.key === location.tabKey)!;
+    const section = tab.sections.find((s) => s.key === location.sectionKey)!;
+    const ci = section.columns.indexOf(column);
+    const following = column.fields.splice(location.index);
+    following.shift();
+    if (isColumnBreak(df.fieldtype)) {
+      section.columns.splice(ci + 1, 0, { key, df, fields: following });
+    } else {
+      const remainingColumns = [
+        { key: nextKey(), fields: following },
+        ...section.columns.splice(ci + 1),
+      ];
+      const si = tab.sections.indexOf(section);
+      if (isSectionBreak(df.fieldtype)) {
+        tab.sections.splice(si + 1, 0, { key, df, columns: remainingColumns });
+      } else {
+        next.tabs.splice(next.tabs.indexOf(tab) + 1, 0, {
+          key,
+          df,
+          sections: [{ key: nextKey(), columns: remainingColumns }, ...tab.sections.splice(si + 1)],
+        });
+      }
+    }
+    return next;
+  }
+  column.fields[location.index] = {
+    ...field,
+    df,
+    ...(fieldnameEdited ? { fieldnameEdited: true } : {}),
+  };
+  return next;
+}
+
+export function moveFieldBy(layout: BuilderLayout, key: string, direction: -1 | 1): BuilderLayout {
+  const location = fieldLocation(layout, key);
+  if (!location) return layout;
+  const tab = layout.tabs.find((t) => t.key === location.tabKey)!;
+  const ordered = tab.sections.flatMap((s) => s.columns);
+  const ci = ordered.findIndex((c) => c.key === location.columnKey);
+  const index = location.index + direction;
+  if (index >= 0 && index < ordered[ci].fields.length)
+    return moveField(layout, key, { columnId: location.columnKey, index });
+  const dest = ordered[ci + direction];
+  return dest
+    ? moveField(layout, key, { columnId: dest.key, index: direction < 0 ? dest.fields.length : 0 })
+    : layout;
+}
+
+export function moveFieldToSection(
+  layout: BuilderLayout,
+  key: string,
+  sectionKey: string,
+): BuilderLayout {
+  const column = layout.tabs.flatMap((t) => t.sections).find((s) => s.key === sectionKey)
+    ?.columns[0];
+  if (!column) return layout;
+  return moveField(layout, key, { columnId: column.key, index: column.fields.length });
+}
+
+export function addTab(layout: BuilderLayout): BuilderLayout {
+  const next = copy(layout);
+  next.tabs.push(emptyTab(keyFactory(layout)));
+  return next;
+}
+
+export function addSection(
+  layout: BuilderLayout,
+  tabKey: string,
+  afterSectionKey?: string,
+): BuilderLayout {
+  const next = copy(layout);
+  const tab = next.tabs.find((t) => t.key === tabKey);
+  if (!tab) return layout;
+  const after =
+    afterSectionKey === undefined
+      ? tab.sections.length - 1
+      : tab.sections.findIndex((s) => s.key === afterSectionKey);
+  if (afterSectionKey !== undefined && after < 0) return layout;
+  tab.sections.splice(after + 1, 0, emptySection(keyFactory(layout)));
+  return next;
+}
+
+export function addColumn(layout: BuilderLayout, sectionKey: string): BuilderLayout {
+  const next = copy(layout);
+  const section = next.tabs.flatMap((t) => t.sections).find((s) => s.key === sectionKey);
+  if (!section) return layout;
+  section.columns.push(emptyColumn(keyFactory(layout)));
+  return next;
+}
+
+export function removeTab(layout: BuilderLayout, key: string): BuilderLayout {
+  const index = layout.tabs.findIndex((t) => t.key === key);
+  if (index < 0 || layout.tabs.length === 1) return layout;
+  const next = copy(layout);
+  const [removed] = next.tabs.splice(index, 1);
+  if (index > 0) next.tabs[index - 1].sections.push(...removed.sections);
+  else next.tabs[0].sections.unshift(...removed.sections);
+  return next;
+}
+
+export function removeSection(layout: BuilderLayout, key: string): BuilderLayout {
+  const ti = layout.tabs.findIndex((t) => t.sections.some((s) => s.key === key));
+  if (ti < 0 || (layout.tabs.length === 1 && layout.tabs[ti].sections.length === 1)) return layout;
+  const next = copy(layout);
+  const tab = next.tabs[ti];
+  const si = tab.sections.findIndex((s) => s.key === key);
+  const [section] = tab.sections.splice(si, 1);
+  let previous = si > 0;
+  let dest = tab.sections[previous ? si - 1 : 0];
+  if (!dest) {
+    next.tabs.splice(ti, 1);
+    previous = ti > 0;
+    const neighbour = next.tabs[previous ? ti - 1 : 0];
+    dest = neighbour.sections[previous ? neighbour.sections.length - 1 : 0];
+  }
+  const column = dest.columns[previous ? dest.columns.length - 1 : 0];
+  const fields = section.columns.flatMap((c) => c.fields);
+  if (previous) column.fields.push(...fields);
+  else column.fields.unshift(...fields);
+  return next;
+}
+
+export function removeColumn(layout: BuilderLayout, key: string): BuilderLayout {
+  const next = copy(layout);
+  const section = next.tabs
+    .flatMap((t) => t.sections)
+    .find((s) => s.columns.some((c) => c.key === key));
+  if (!section || section.columns.length === 1) return layout;
+  const index = section.columns.findIndex((c) => c.key === key);
+  const [column] = section.columns.splice(index, 1);
+  if (index > 0) section.columns[index - 1].fields.push(...column.fields);
+  else section.columns[0].fields.unshift(...column.fields);
+  return next;
+}
+
+export function updateBreak(
+  layout: BuilderLayout,
+  key: string,
+  patch: Partial<BuilderDocField>,
+): BuilderLayout {
+  const next = copy(layout);
+  const node = nodes(next).find((n) => n.key === key);
+  if (!node || "isNew" in node || !("sections" in node || "columns" in node || "fields" in node))
+    return layout;
+  const fieldtype =
+    "sections" in node ? "Tab Break" : "columns" in node ? "Section Break" : "Column Break";
+  node.df = {
+    ...(node.df ?? {
+      fieldtype,
+      fieldname: uniqueName(scrub(fieldtype), fieldnames(layout), true),
+    }),
+    ...patch,
+    fieldtype,
+  };
+  return next;
+}
+
+export function tabBoard(
+  layout: BuilderLayout,
+  tabKey: string,
+  columnTitle: (column: BuilderColumn, index: number) => string,
+): KanbanBoardColumnSnapshot[] {
+  return (layout.tabs.find((t) => t.key === tabKey)?.sections.flatMap((s) => s.columns) ?? []).map(
+    (column, index) => ({
+      id: column.key,
+      title: columnTitle(column, index),
+      count: column.fields.length,
+    }),
+  );
+}
+
+export function canDeleteField(field: BuilderField, mode: FormBuilderMode): boolean {
+  return mode === "doctype" || !!field.isNew || field.df.is_custom_field === 1;
+}
+
+export function validateLayout(layout: BuilderLayout): Record<string, BuilderMessage[]> {
+  const errors: Record<string, BuilderMessage[]> = {};
+  const entries = nodes(layout).filter((n) => n.df);
+  const counts = new Map<string, number>();
+  for (const node of entries)
+    if (node.df?.fieldname) counts.set(node.df.fieldname, (counts.get(node.df.fieldname) ?? 0) + 1);
+  for (const node of entries) {
+    const df = node.df!;
+    const add = (key: string, text: string) =>
+      (errors[node.key] ??= []).push({ key: `formBuilder.validation.${key}`, default: text });
+    if (holdsValue(df.fieldtype) && !df.fieldname?.trim())
+      add("fieldnameRequired", "A fieldname is required.");
+    if (df.fieldname && !/^[a-z][a-z0-9_]*$/.test(df.fieldname))
+      add(
+        "invalidFieldname",
+        "Use lowercase letters, digits and underscores, starting with a letter.",
+      );
+    if (df.fieldname && (counts.get(df.fieldname) ?? 0) > 1)
+      add("duplicateFieldname", "Fieldnames must be unique.");
+    if (!df.label?.trim() && !df.fieldname?.trim())
+      add("labelRequired", "A label or fieldname is required.");
+    if (needsOptions(df.fieldtype) && !df.options?.trim())
+      add("optionsRequired", "Options are required for this field type.");
+  }
+  return errors;
+}

package/src/formBuilder/useFormBuilderDrag.spec.tsx

@@ -0,0 +1,170 @@
+import { act, renderHook } from "@testing-library/react";
+import { TOUCH_LONG_PRESS_MS } from "@multiplatform.one/components";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { layoutFromFields } from "./model";
+import { useFormBuilderDrag } from "./useFormBuilderDrag";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  document.querySelector("[data-drag-spec]")?.remove();
+});
+
+function setup() {
+  const layout = layoutFromFields([
+    { fieldname: "first", fieldtype: "Data", label: "First" },
+    { fieldname: "other", fieldtype: "Column Break" },
+    { fieldname: "second", fieldtype: "Data", label: "Second" },
+  ]);
+  const [first, second] = layout.tabs[0].sections[0].columns;
+  const onChange = vi.fn();
+  const onSelect = vi.fn();
+  const mounted = renderHook(() =>
+    useFormBuilderDrag({ layout, tabKey: layout.tabs[0].key, onChange, onSelect }),
+  );
+  const root = document.createElement("div");
+  root.setAttribute("data-drag-spec", "");
+  document.body.append(root);
+  const column = document.createElement("div");
+  column.setAttribute("data-fb-column", first.key);
+  root.append(column);
+  const target = document.createElement("div");
+  target.setAttribute("data-fb-field", first.fields[0].key);
+  column.append(target);
+  const source = document.createElement("div");
+  source.setAttribute("data-fb-field", second.fields[0].key);
+  root.append(source);
+  const rect = (x: number, y: number) => ({
+    x,
+    y,
+    left: x,
+    top: y,
+    right: x + 100,
+    bottom: y + 40,
+    width: 100,
+    height: 40,
+    toJSON: () => ({}),
+  });
+  vi.spyOn(source, "getBoundingClientRect").mockReturnValue(rect(200, 100));
+  vi.spyOn(target, "getBoundingClientRect").mockReturnValue(rect(0, 100));
+  vi.spyOn(column, "getBoundingClientRect").mockReturnValue(rect(0, 100));
+  vi.spyOn(document, "elementFromPoint").mockReturnValue(target);
+  const down = (pointerType = "mouse") =>
+    act(() =>
+      mounted.result.current.fieldPointerDown(second.fields[0].key, {
+        currentTarget: source,
+        clientX: 210,
+        clientY: 110,
+        pointerType,
+        pointerId: 1,
+      }),
+    );
+  const move = (x: number, y: number) =>
+    act(() =>
+      window.dispatchEvent(
+        new PointerEvent("pointermove", { pointerId: 1, clientX: x, clientY: y }),
+      ),
+    );
+  return { ...mounted, root, source, first, second, onChange, onSelect, down, move };
+}
+
+describe("form builder drag session", () => {
+  it("keeps data unchanged until pointer drop and tracks the original grab offset", () => {
+    const test = setup();
+    test.down();
+    test.move(50, 110);
+    expect(test.result.current.drag).toMatchObject({
+      x: 40,
+      y: 100,
+      target: { columnId: test.first.key, index: 0 },
+    });
+    expect(test.result.current.offset(test.first.key, 0)).toBe(40);
+    expect(test.onChange).not.toHaveBeenCalled();
+    test.move(70, 115);
+    expect(test.result.current.drag).toMatchObject({ x: 60, y: 105 });
+    act(() =>
+      window.dispatchEvent(
+        new PointerEvent("pointerup", { pointerId: 1, clientX: 50, clientY: 110 }),
+      ),
+    );
+    expect(
+      test.onChange.mock.calls[0][0].tabs[0].sections[0].columns[0].fields.map(
+        (f: { df: { fieldname: string } }) => f.df.fieldname,
+      ),
+    ).toEqual(["second", "first"]);
+    expect(test.result.current.drag).toBeNull();
+  });
+
+  it.each(["pointercancel", "Escape"])("cancels with %s without writing a layout", (action) => {
+    const test = setup();
+    test.down();
+    test.move(50, 110);
+    act(() =>
+      window.dispatchEvent(
+        action === "Escape"
+          ? new KeyboardEvent("keydown", { key: "Escape" })
+          : new PointerEvent("pointercancel", { pointerId: 1 }),
+      ),
+    );
+    expect(test.result.current.drag).toBeNull();
+    expect(test.onChange).not.toHaveBeenCalled();
+    expect(document.body.style.userSelect).not.toBe("none");
+  });
+
+  it("leaves touch swipes to scrolling and only lifts after the hold", () => {
+    vi.useFakeTimers();
+    const test = setup();
+    test.down("touch");
+    test.move(210, 130);
+    act(() => vi.advanceTimersByTime(TOUCH_LONG_PRESS_MS));
+    expect(test.result.current.drag).toBeNull();
+    test.down("touch");
+    act(() => vi.advanceTimersByTime(TOUCH_LONG_PRESS_MS - 1));
+    expect(test.result.current.drag).toBeNull();
+    act(() => vi.advanceTimersByTime(1));
+    expect(test.result.current.drag?.mode).toBe("pointer");
+    expect(test.onChange).not.toHaveBeenCalled();
+    test.unmount();
+    expect(document.body.style.userSelect).not.toBe("none");
+  });
+
+  it("inserts a palette draft only at drop", () => {
+    const test = setup();
+    test.source.setAttribute("data-fb-palette", "Data");
+    act(() =>
+      test.result.current.palettePointerDown("Data", {
+        currentTarget: test.source,
+        clientX: 210,
+        clientY: 110,
+        pointerType: "mouse",
+        pointerId: 1,
+      }),
+    );
+    test.move(50, 110);
+    expect(test.onChange).not.toHaveBeenCalled();
+    act(() =>
+      window.dispatchEvent(
+        new PointerEvent("pointerup", { pointerId: 1, clientX: 50, clientY: 110 }),
+      ),
+    );
+    expect(test.onChange.mock.calls[0][0].tabs[0].sections[0].columns[0].fields[0]).toMatchObject({
+      isNew: true,
+      df: { fieldtype: "Data" },
+    });
+    expect(test.onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("cancels a drop outside the board", () => {
+    const test = setup();
+    test.down();
+    test.move(50, 110);
+    vi.mocked(document.elementFromPoint).mockReturnValue(null);
+    test.move(500, 110);
+    act(() =>
+      window.dispatchEvent(
+        new PointerEvent("pointerup", { pointerId: 1, clientX: 500, clientY: 110 }),
+      ),
+    );
+    expect(test.onChange).not.toHaveBeenCalled();
+  });
+});