@isi-ui7/bos7-shared 0.3.8 → 0.3.9

package/dist/detail-modal-field.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { DetailModalConfig, FormMode, FormSection } from './form-types';
+import { BosSharedLabels } from './i18n';
+
+/**
+ * Tabel ringkas + modal form per baris — badan tipe field `detail-modal`.
+ *
+ * Semua gaya di sini INLINE (atau memakai kelas `ui7-form-*` yang sudah ikut
+ * `corporate-themes/dist/globals.css`), mengikuti `wizard-stepper.tsx`.
+ * Sengaja tidak ada berkas `.css` bersebelahan: `packages/bos7-shared` tidak
+ * punya `sideEffects`, tidak punya titik impor CSS, dan `form-contract.css`
+ * membuktikan jalur itu berakhir sebagai berkas yang tidak pernah dimuat siapa
+ * pun — komponennya tetap jalan, hanya tampilannya rusak, tanpa satu pun galat.
+ */
+export type DetailModalFieldProps = {
+    /** Dipakai untuk id/aria yang unik antar field dalam satu form. */
+    fieldKey: string;
+    label: ReactNode;
+    required?: boolean;
+    helperText?: ReactNode;
+    config: DetailModalConfig;
+    rows: Record<string, unknown>[];
+    mode: FormMode;
+    /** View mode atau field readonly: tabel tetap tampil, aksinya hilang. */
+    readOnly: boolean;
+    disabled: boolean;
+    labels: BosSharedLabels;
+    /** Pesan galat tingkat field dari validator form induk. */
+    invalidText?: string;
+    onChange: (rows: Record<string, unknown>[]) => void;
+    /**
+     * Perender form untuk isi modal.
+     *
+     * Disuntikkan dari `form-renderer.tsx` alih-alih di-import langsung supaya
+     * tidak ada lingkaran impor antara kedua modul — `form-renderer` sudah
+     * meng-import berkas ini.
+     */
+    renderForm: (props: {
+        value: Record<string, unknown>;
+        sections: FormSection<Record<string, unknown>>[];
+        mode: FormMode;
+        errors: Partial<Record<string, string>>;
+        disabled: boolean;
+        onChange: (patch: Partial<Record<string, unknown>>) => void;
+    }) => ReactNode;
+};
+export declare function DetailModalField({ fieldKey, label, required, helperText, config, rows, mode, readOnly, disabled, labels, invalidText, onChange, renderForm, }: DetailModalFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/form-types.d.ts

@@ -19,7 +19,7 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
     /** Array of validators — compose Rules.* or custom functions. Runs after built-in rules. */
     validators?: FieldValidatorFn<TData>[];
 };
-export type FormFieldType = "text" | "textarea" | "number" | "date" | "datetime" | "select" | "lookup" | "checkbox" | "toggle" | "detail-rows";
+export type FormFieldType = "text" | "textarea" | "number" | "date" | "datetime" | "select" | "lookup" | "checkbox" | "toggle" | "detail-rows" | "detail-modal";
 /**
  * Select option. `value` may be a number for numeric-coded columns (e.g.
  * kolektibilitas 1–5); the renderer compares via `String(value)` and the
@@ -106,6 +106,93 @@ export type DetailRowsConfig = {
      */
     lockExistingRows?: boolean;
 };
+/**
+ * Satu kolom pada tabel RINGKAS `detail-modal`.
+ *
+ * Sengaja BUKAN `EditableColumnDef`: kolom di sini hanya menampilkan, tidak
+ * pernah menyunting — penyuntingan seluruhnya terjadi di dalam modal. Memakai
+ * `EditableColumnDef` akan menuntut `columnType` untuk setiap kolom padahal
+ * tipe itu hanya menentukan editor sel yang tidak akan pernah dipakai.
+ */
+export type DetailModalColumn = {
+    /** Nama properti pada baris. */
+    field: string;
+    header: ReactNode;
+    /** Lebar kolom dalam piksel. Tanpa ini kolom ikut lebar isi. */
+    width?: number;
+    /** `end` untuk angka. Default `start`. */
+    align?: "start" | "end";
+    /**
+     * Ubah nilai mentah jadi tampilan. Tanpa ini nilai kosong tampil sebagai
+     * em-dash (`labels.emptyValue`) dan sisanya lewat `String(value)`.
+     *
+     * ⚠️ Kolom ringkas menampilkan nilai SIMPAN, bukan label. Untuk field
+     * `select`, `String(value)` menghasilkan kodenya ("M"), bukan "Laki-laki" —
+     * pakai `format` bila yang harus terbaca operator adalah labelnya.
+     */
+    format?: (value: unknown, row: Record<string, unknown>) => ReactNode;
+};
+/**
+ * Detail-modal config — tabel RINGKAS + tombol Tambah yang membuka modal
+ * berisi form penuh untuk SATU baris.
+ *
+ * Bedanya dengan `detail-rows`: `detail-rows` menyunting DI DALAM sel, jadi
+ * setiap field baris harus muat sebagai satu kolom. Begitu satu baris punya
+ * belasan field (Beneficial Owner: ~20 field + dua blok alamat), barisnya jadi
+ * selebar beberapa layar dan tidak ada tempat untuk alur per-baris seperti cek
+ * identitas. `detail-modal` memindahkan seluruh form baris ke modal, dan
+ * menyisakan hanya beberapa kolom penanda di tabel.
+ *
+ * Nilai field di `key` harus berupa array objek biasa; renderer membaca dan
+ * menulis array itu secara utuh lewat `onChange({ [key]: newRows })` — sama
+ * seperti `detail-rows`.
+ *
+ * Isi modal dirender oleh `SchemaFormRenderer` yang sama dengan form induknya,
+ * jadi SEMUA tipe field yang sudah ada (lookup, date, numeric, toggle, bahkan
+ * `FormSection.render`) langsung bisa dipakai di dalam baris tanpa tambahan
+ * apa pun di sini.
+ */
+export type DetailModalConfig = {
+    /**
+     * Form untuk SATU baris. Section-nya sama persis dengan section form biasa,
+     * dan `TData`-nya adalah barisnya — bukan form induk.
+     */
+    sections: FormSection<Record<string, unknown>>[];
+    /** Kolom yang tampil di tabel ringkas. Boleh sebagian kecil saja dari field baris. */
+    columns: DetailModalColumn[];
+    newRowFactory: () => Record<string, unknown>;
+    /**
+     * Aturan lintas-field untuk satu baris, dijalankan SETELAH validasi per-field
+     * milik `sections`. Kuncinya nama field; hasilnya menimpa error per-field.
+     *
+     * `index` adalah posisi baris — untuk baris baru, posisi tempat ia akan
+     * mendarat (`rows.length`).
+     */
+    validateRow?: (row: Record<string, unknown>, index: number) => Record<string, string>;
+    /** Batas jumlah baris. Tombol Tambah nonaktif setelah tercapai. */
+    maxRows?: number;
+    /** Teks tombol tambah, mis. "Tambah Ahli Waris". Default: "Tambah". */
+    addLabel?: ReactNode;
+    /** Judul modal saat menambah. Default: "Tambah Data". */
+    addModalTitle?: ReactNode;
+    /** Judul modal saat mengubah. Default: "Ubah Data". */
+    editModalTitle?: ReactNode;
+    /** Teks saat tabel kosong. Default: "Belum ada data." */
+    emptyText?: ReactNode;
+    /** Lebar modal Carbon. Default `lg` — form baris biasanya padat. */
+    modalSize?: "xs" | "sm" | "md" | "lg";
+    /** Izinkan membuka baris yang sudah ada untuk diubah. Default `true`. */
+    allowEdit?: boolean;
+    /** Izinkan menghapus baris. Default `true`. */
+    allowDelete?: boolean;
+    /**
+     * Kunci React per baris. Default memakai indeks.
+     *
+     * Berguna bila baris punya identitas sendiri (mis. `person_id`) supaya state
+     * modal tidak nyangkut ke baris lain setelah penghapusan di tengah.
+     */
+    rowKey?: (row: Record<string, unknown>, index: number) => string;
+};
 export type FormField<TData extends Record<string, unknown>> = {
     key: keyof TData;
     label: ReactNode;
@@ -138,6 +225,7 @@ export type FormField<TData extends Record<string, unknown>> = {
     numeric?: FormFieldNumericConfig<TData>;
     toggle?: FormFieldToggleConfig;
     detailRows?: DetailRowsConfig;
+    detailModal?: DetailModalConfig;
     format?: (value: TData[keyof TData], data: TData) => ReactNode;
     validation?: FieldValidation<TData>;
 };

package/dist/i18n.d.ts

@@ -34,5 +34,14 @@ export type BosSharedLabels = {
     deleteTitle: string;
     deleteDescription: string;
     deleteConfirm: string;
+    /** Tipe field `detail-modal` — tabel ringkas + modal form per baris. */
+    detailAdd: string;
+    detailEdit: string;
+    detailDelete: string;
+    detailEmpty: string;
+    detailNo: string;
+    detailActions: string;
+    detailAddTitle: string;
+    detailEditTitle: string;
 };
 export declare function useBosSharedI18n(): BosSharedLabels;

package/dist/{index-BI2MxWot.js → index-DqWPV29B.js}

@@ -27391,7 +27391,7 @@ function ba(M, L) {
   return String(pr(M, L));
 }
 async function Io(M, L, r) {
-  const { default: x } = await import("./jspdf.es.min-DzRwzM6G.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DFaknRns.js"), c = new x({ orientation: "landscape" });
+  const { default: x } = await import("./jspdf.es.min-CCBzPHw4.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DFaknRns.js"), c = new x({ orientation: "landscape" });
   c.setFontSize(14), c.text(r, 14, 15), c.setFontSize(10), w(c, {
     head: [L.map((o) => o.title)],
     body: M.map((o) => L.map((a) => ba(o[a.field], a.displayFormat))),
@@ -28654,7 +28654,15 @@ function tl() {
     submitEdit: M("bos7.submitEdit", "Update"),
     deleteTitle: M("bos7.deleteTitle", "Konfirmasi Hapus"),
     deleteDescription: M("bos7.deleteDescription", "Data berikut akan dihapus permanen."),
-    deleteConfirm: M("bos7.deleteConfirm", "Hapus")
+    deleteConfirm: M("bos7.deleteConfirm", "Hapus"),
+    detailAdd: M("bos7.detailAdd", "Tambah"),
+    detailEdit: M("bos7.detailEdit", "Ubah"),
+    detailDelete: M("bos7.detailDelete", "Hapus"),
+    detailEmpty: M("bos7.detailEmpty", "Belum ada data."),
+    detailNo: M("bos7.detailNo", "No"),
+    detailActions: M("bos7.detailActions", "Aksi"),
+    detailAddTitle: M("bos7.detailAddTitle", "Tambah Data"),
+    detailEditTitle: M("bos7.detailEditTitle", "Ubah Data")
   };
 }
 function Ri(M, L) {

package/dist/{index.es-D-PR3JkH.js → index.es-9cvhYbjn.js}

@@ -1,5 +1,5 @@
-import { c as Ke, g as Do } from "./index-BI2MxWot.js";
-import { _ as Xa } from "./jspdf.es.min-DzRwzM6G.js";
+import { c as Ke, g as Do } from "./index-DqWPV29B.js";
+import { _ as Xa } from "./jspdf.es.min-CCBzPHw4.js";
 var vt = function(a) {
   return a && a.Math === Math && a;
 }, _ = (

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as s, a as o, b as t, D as r, N as i, O as n, d as l, P as c, e as d, f as u, h as S, U as h, i as A, j as T, k, l as C, m as _, n as O, o as U, p as g, q as N, r as P, s as m, t as E, u as F, v as p, w as f, x as I, y as R, z as x, B as v, C as y, E as L, F as b, G as B, H as D, I as M, J as H, K as V, L as W, M as q, Q as K, R as w, S as z, T as G, V as Q, W as X, X as Y, Y as j, Z as J, _ as Z, $, a0 as aa, a1 as ea, a2 as sa, a3 as oa, a4 as ta, a5 as ra, a6 as ia, a7 as na, a8 as la, a9 as ca, aa as da, ab as ua, ac as Sa, ad as ha, ae as Aa, af as Ta, ag as ka, ah as Ca, ai as _a } from "./index-BI2MxWot.js";
+import { A as s, a as o, b as t, D as r, N as i, O as n, d as l, P as c, e as d, f as u, h as S, U as h, i as A, j as T, k, l as C, m as _, n as O, o as U, p as g, q as N, r as P, s as m, t as E, u as F, v as p, w as f, x as I, y as R, z as x, B as v, C as y, E as L, F as b, G as B, H as D, I as M, J as H, K as V, L as W, M as q, Q as K, R as w, S as z, T as G, V as Q, W as X, X as Y, Y as j, Z as J, _ as Z, $, a0 as aa, a1 as ea, a2 as sa, a3 as oa, a4 as ta, a5 as ra, a6 as ia, a7 as na, a8 as la, a9 as ca, aa as da, ab as ua, ac as Sa, ad as ha, ae as Aa, af as Ta, ag as ka, ah as Ca, ai as _a } from "./index-DqWPV29B.js";
 export {
   s as AUTH7_SCOPES,
   o as AppShellLayout,

package/dist/{jspdf.es.min-DzRwzM6G.js → jspdf.es.min-CCBzPHw4.js}

@@ -9216,7 +9216,7 @@ function(n) {
   var d = h.getContext("2d");
   d.fillStyle = "#fff", d.fillRect(0, 0, h.width, h.height);
   var m = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, _ = this;
-  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-D-PR3JkH.js")).catch(function(k) {
+  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-9cvhYbjn.js")).catch(function(k) {
     return Promise.reject(new Error("Could not load canvg: " + k));
   }).then(function(k) {
     return k.default ? k.default : k;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {

package/src/detail-modal-field.test.tsx

@@ -0,0 +1,530 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// jsdom tidak punya ResizeObserver, dan `ComposedModal` Carbon memakainya. Paket
+// ini belum punya berkas setup vitest karena belum ada satu pun tesnya yang
+// pernah memasang modal. Stub-nya ditaruh di sini, bukan di config global,
+// supaya cakupannya jelas dan tidak diam-diam mengubah lingkungan tes lain.
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as Record<string, unknown>).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+/**
+ * Baris tabel yang memuat teks tertentu.
+ *
+ * Aksi per baris dicari lewat barisnya, bukan lewat nama tombol yang unik:
+ * nama terakses tombol ikon Carbon berasal dari tooltip-nya, jadi semua tombol
+ * Hapus bernama sama. Ini juga cara operator bekerja — ia mencari BARIS "Budi",
+ * lalu menekan Hapus di baris itu.
+ */
+function rowWith(text: string): HTMLElement {
+  const cell = screen.getByText(text);
+  const row = cell.closest("tr");
+  if (!row) throw new Error(`Baris untuk "${text}" tidak ditemukan`);
+  return row as HTMLElement;
+}
+
+// Tipe field `detail-modal` — tabel ringkas + modal berisi form penuh satu baris.
+//
+// Uji ini ditulis dengan KOSAKATA OPERATOR, bukan kosakata API: yang dicari
+// "Tambah Ahli Waris", "Nama Lengkap", "Simpan" — teks yang benar-benar ada di
+// layar. Dua cacat di modul ini lolos justru karena tesnya memakai nama field
+// versi backend, sehingga salah-petakan antara form dan payload tak terlihat.
+//
+// Yang paling dijaga: baris yang tersimpan harus membawa SELURUH field yang
+// diisi operator. Kelas kegagalan termahal di wizard ini bukan galat, melainkan
+// field yang hilang dari payload tanpa satu pun tanda.
+
+const heirSections: FormSection<Record<string, unknown>>[] = [
+  {
+    title: "Data Ahli Waris",
+    columns: 2,
+    fields: [
+      {
+        key: "full_name",
+        label: "Nama Lengkap",
+        type: "text",
+        validation: { required: "Nama wajib diisi" },
+      },
+      { key: "seq_no", label: "Nomor Urut Prioritas", type: "text" },
+      { key: "notes", label: "Keterangan", type: "text" },
+    ],
+  },
+];
+
+function heirField(overrides: Record<string, unknown> = {}) {
+  return {
+    key: "heirs",
+    label: "Daftar Ahli Waris",
+    type: "detail-modal" as const,
+    detailModal: {
+      sections: heirSections,
+      columns: [
+        { field: "full_name", header: "Nama" },
+        { field: "seq_no", header: "Prioritas" },
+        { field: "notes", header: "Keterangan" },
+      ],
+      newRowFactory: () => ({ full_name: "", seq_no: "", notes: "" }),
+      addLabel: "Tambah Ahli Waris",
+      addModalTitle: "Tambah Ahli Waris",
+      emptyText: 'Belum ada ahli waris. Klik "Tambah Ahli Waris".',
+      ...overrides,
+    },
+  };
+}
+
+function renderHeirs(
+  value: D,
+  onChange: (patch: Partial<D>) => void,
+  fieldOverrides: Record<string, unknown> = {},
+  mode: "create" | "edit" | "view" = "create",
+) {
+  const section: FormSection<D> = {
+    title: "Ahli Waris",
+    fields: [heirField(fieldOverrides)],
+  };
+  return render(
+    <SchemaFormRenderer<D>
+      mode={mode}
+      value={value}
+      sections={[section]}
+      onChange={onChange}
+    />,
+  );
+}
+
+describe("detail-modal — tabel ringkas", () => {
+  it("tabel kosong mengajak menambah, bukan menampilkan baris hantu", () => {
+    renderHeirs({ heirs: [] }, () => {});
+    expect(
+      screen.getByText('Belum ada ahli waris. Klik "Tambah Ahli Waris".'),
+    ).toBeTruthy();
+  });
+
+  it("baris yang ada tampil sebagai ringkasan, bernomor urut", () => {
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Siti Aminah", seq_no: "1", notes: "Istri" },
+          { full_name: "Budi Santoso", seq_no: "2", notes: "Anak" },
+        ],
+      },
+      () => {},
+    );
+    expect(screen.getByText("Siti Aminah")).toBeTruthy();
+    expect(screen.getByText("Budi Santoso")).toBeTruthy();
+    // Nomor urut dihitung renderer, bukan diambil dari data.
+    expect(screen.getByText("Istri")).toBeTruthy();
+  });
+
+  it("nilai kosong tampil sebagai em-dash, bukan sel kosong yang ambigu", () => {
+    renderHeirs({ heirs: [{ full_name: "Siti Aminah", seq_no: "", notes: "" }] }, () => {});
+    expect(screen.getAllByText("—").length).toBeGreaterThan(0);
+  });
+
+  it("nilai simpan bisa dialihkan ke label lewat format()", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Siti", seq_no: "1", notes: "", gender: "M" }] },
+      () => {},
+      {
+        columns: [
+          { field: "full_name", header: "Nama" },
+          {
+            field: "gender",
+            header: "Jenis Kelamin",
+            format: (v: unknown) => (v === "M" ? "Laki-laki" : "Perempuan"),
+          },
+        ],
+      },
+    );
+    // Tanpa format, kolom ini akan menampilkan "M" — kode simpan, bukan
+    // sesuatu yang berarti bagi operator.
+    expect(screen.getByText("Laki-laki")).toBeTruthy();
+  });
+});
+
+describe("detail-modal — menambah baris lewat modal", () => {
+  it("tombol Tambah membuka modal berisi form penuh baris", async () => {
+    const user = userEvent.setup();
+    renderHeirs({ heirs: [] }, () => {});
+
+    // Sebelum diklik, form baris tidak ada di layar sama sekali.
+    expect(screen.queryByLabelText("Nomor Urut Prioritas")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+    expect(screen.getByLabelText("Nomor Urut Prioritas")).toBeTruthy();
+    expect(screen.getByLabelText("Keterangan")).toBeTruthy();
+  });
+
+  it("Simpan menaruh SELURUH field yang diisi ke payload induk", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti Aminah");
+    await user.type(screen.getByLabelText("Nomor Urut Prioritas"), "1");
+    await user.type(screen.getByLabelText("Keterangan"), "Istri");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Inti uji ini: bukan bahwa onChange terpanggil, tapi bahwa KETIGA field
+    // sampai utuh. Pemetaan yang meleset tidak menghasilkan galat di mana pun —
+    // baris tetap tersimpan, hanya isinya yang bolong.
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti Aminah", seq_no: "1", notes: "Istri" }],
+    });
+  });
+
+  it("baris baru DITAMBAHKAN, tidak menimpa baris yang sudah ada", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [
+        { full_name: "Budi", seq_no: "1", notes: "" },
+        { full_name: "Siti", seq_no: "", notes: "" },
+      ],
+    });
+  });
+});
+
+describe("detail-modal — gerbang validasi", () => {
+  it("Nama kosong MENAHAN Simpan: baris tidak pernah masuk payload", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText("Keterangan"), "Istri");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Yang diukur adalah AKIBATNYA, bukan hanya munculnya pesan: baris yang
+    // tidak sah tidak boleh sampai ke data form dengan cara apa pun.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Nama wajib diisi")).toBeTruthy();
+    // Modal tetap terbuka supaya operator bisa memperbaikinya.
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+  });
+
+  it("setelah diperbaiki, Simpan lolos dan barisnya masuk", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+    expect(onChange).not.toHaveBeenCalled();
+
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti", seq_no: "", notes: "" }],
+    });
+  });
+
+  it("validateRow berjalan SETELAH validasi per-field dan bisa menahan sendiri", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange, {
+      validateRow: (row: Record<string, unknown>) =>
+        String(row.seq_no ?? "") === "" ? { seq_no: "Nomor urut wajib" } : {},
+    });
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Nomor urut wajib")).toBeTruthy();
+  });
+
+  it("validateRow menerima indeks tempat baris BARU akan mendarat", async () => {
+    const user = userEvent.setup();
+    const seen: number[] = [];
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      {
+        validateRow: (_row: Record<string, unknown>, index: number) => {
+          seen.push(index);
+          return {};
+        },
+      },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Sudah ada 1 baris, jadi baris baru akan mendarat di indeks 1 — bukan -1,
+    // dan bukan 0. Aturan yang bergantung urutan harus melihat posisi akhirnya.
+    expect(seen).toEqual([1]);
+  });
+});
+
+describe("detail-modal — ubah, batal, hapus", () => {
+  it("Batal membuang suntingan: payload induk tidak tersentuh", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] }, onChange);
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Ubah" }));
+    await user.clear(screen.getByLabelText(/Nama Lengkap/));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "DIUBAH");
+    await user.click(screen.getByRole("button", { name: "Batal" }));
+
+    // Draft disimpan terpisah justru untuk ini: menyunting objek baris langsung
+    // akan mengubah data induk sebelum Simpan, dan Batal tak bisa lagi
+    // mengembalikannya — tanpa galat, dan tanpa cara mengetahuinya.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Budi")).toBeTruthy();
+  });
+
+  it("Ubah menulis kembali ke indeks yang sama, bukan menambah baris", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      onChange,
+    );
+
+    await user.click(within(rowWith("Siti")).getByRole("button", { name: "Ubah" }));
+    await user.clear(screen.getByLabelText(/Nama Lengkap/));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti Aminah");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [
+        { full_name: "Budi", seq_no: "1", notes: "" },
+        { full_name: "Siti Aminah", seq_no: "2", notes: "" },
+      ],
+    });
+  });
+
+  it("modal dibuka ulang membawa nilai baris itu, bukan sisa baris sebelumnya", async () => {
+    const user = userEvent.setup();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      () => {},
+    );
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Ubah" }));
+    expect((screen.getByLabelText(/Nama Lengkap/) as HTMLInputElement).value).toBe("Budi");
+    await user.click(screen.getByRole("button", { name: "Batal" }));
+
+    await user.click(within(rowWith("Siti")).getByRole("button", { name: "Ubah" }));
+    expect((screen.getByLabelText(/Nama Lengkap/) as HTMLInputElement).value).toBe("Siti");
+  });
+
+  it("Hapus mengeluarkan baris itu saja", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      onChange,
+    );
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Hapus" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti", seq_no: "2", notes: "" }],
+    });
+  });
+});
+
+describe("detail-modal — mode & batas", () => {
+  it("mode view: tabel tetap terbaca, Tambah dan Aksi hilang", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      {},
+      "view",
+    );
+
+    expect(screen.getByText("Budi")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Tambah Ahli Waris" })).toBeNull();
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Ubah" })).toBeNull();
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Hapus" })).toBeNull();
+  });
+
+  it("maxRows menonaktifkan Tambah setelah batas tercapai", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      { maxRows: 1 },
+    );
+    const btn = screen.getByRole("button", { name: "Tambah Ahli Waris" }) as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+  });
+
+  it("allowEdit/allowDelete false menghilangkan aksinya masing-masing", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      { allowEdit: false },
+    );
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Ubah" })).toBeNull();
+    expect(within(rowWith("Budi")).getByRole("button", { name: "Hapus" })).toBeTruthy();
+  });
+
+  it("nilai bukan-array tidak meruntuhkan tabel", () => {
+    // Field yang belum pernah diisi tiba sebagai undefined dari backend.
+    renderHeirs({}, () => {});
+    expect(
+      screen.getByText('Belum ada ahli waris. Klik "Tambah Ahli Waris".'),
+    ).toBeTruthy();
+  });
+
+  it("config yang hilang BERBUNYI, tidak melenyapkan field diam-diam", () => {
+    const section: FormSection<D> = {
+      title: "Ahli Waris",
+      fields: [{ key: "heirs", label: "Daftar Ahli Waris", type: "detail-modal" }],
+    };
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ heirs: [] }}
+        sections={[section]}
+        onChange={() => {}}
+      />,
+    );
+    // Mengembalikan [] di sini akan membuat field salah-tulis lenyap dari layar
+    // tanpa satu pun galat — bentuk kegagalan yang paling mahal di modul ini.
+    expect(screen.getByRole("alert").textContent).toContain("detail-modal");
+  });
+});
+
+describe("KONTROL REGRESI — jalur yang tidak disentuh", () => {
+  it("field text biasa tetap terender seperti sebelumnya", () => {
+    const section: FormSection<D> = {
+      title: "Biasa",
+      fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+    };
+    render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[section]} onChange={() => {}} />,
+    );
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+  });
+
+  it("detail-rows (EditableTable inline) tetap jalan berdampingan", () => {
+    const section: FormSection<D> = {
+      title: "Campur",
+      fields: [
+        {
+          key: "limits",
+          label: "Limit Transaksi",
+          type: "detail-rows",
+          detailRows: {
+            columns: [
+              { field: "kode", header: "Kode", columnType: { type: "text" } },
+            ],
+            newRowFactory: () => ({ kode: "" }),
+          },
+        },
+        heirField(),
+      ],
+    };
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ limits: [{ kode: "CASH_IN" }], heirs: [] }}
+        sections={[section]}
+        onChange={() => {}}
+      />,
+    );
+
+    // Dua tipe tabel yang berbeda hidup dalam satu form tanpa saling ganggu.
+    expect(screen.getByText("Limit Transaksi")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Tambah Ahli Waris" })).toBeTruthy();
+  });
+
+  it("dua detail-modal dalam satu form berdiri sendiri-sendiri", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const section: FormSection<D> = {
+      title: "Langkah 4",
+      fields: [
+        heirField(),
+        {
+          key: "relations",
+          label: "Daftar Relasi",
+          type: "detail-modal" as const,
+          detailModal: {
+            sections: [
+              {
+                title: "Data Relasi",
+                fields: [
+                  {
+                    key: "first_name",
+                    label: "Nama Relasi",
+                    type: "text" as const,
+                    validation: { required: "Nama relasi wajib diisi" },
+                  },
+                ],
+              },
+            ],
+            columns: [{ field: "first_name", header: "Nama" }],
+            newRowFactory: () => ({ first_name: "" }),
+            addLabel: "Tambah Relasi",
+          },
+        },
+      ],
+    };
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ heirs: [], relations: [] }}
+        sections={[section]}
+        onChange={onChange}
+      />,
+    );
+
+    // Membuka modal Relasi tidak boleh memunculkan form Ahli Waris.
+    await user.click(screen.getByRole("button", { name: "Tambah Relasi" }));
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByLabelText(/Nama Relasi/)).toBeTruthy();
+    expect(within(dialog).queryByLabelText("Nomor Urut Prioritas")).toBeNull();
+
+    await user.type(screen.getByLabelText(/Nama Relasi/), "Andi");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Hanya kunci `relations` yang ditulis — `heirs` tidak ikut tersentuh.
+    expect(onChange).toHaveBeenCalledWith({ relations: [{ first_name: "Andi" }] });
+  });
+});

package/src/detail-modal-field.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import { Add, Edit, TrashCan } from "@carbon/icons-react";
+import type { DetailModalConfig, FormMode, FormSection } from "./form-types";
+import { runFieldValidation } from "./form-renderer-utils";
+import type { BosSharedLabels } from "./i18n";
+import { UI7_FORM_VISUAL_CLASSNAMES } from "./style-contract";
+
+/**
+ * Tabel ringkas + modal form per baris — badan tipe field `detail-modal`.
+ *
+ * Semua gaya di sini INLINE (atau memakai kelas `ui7-form-*` yang sudah ikut
+ * `corporate-themes/dist/globals.css`), mengikuti `wizard-stepper.tsx`.
+ * Sengaja tidak ada berkas `.css` bersebelahan: `packages/bos7-shared` tidak
+ * punya `sideEffects`, tidak punya titik impor CSS, dan `form-contract.css`
+ * membuktikan jalur itu berakhir sebagai berkas yang tidak pernah dimuat siapa
+ * pun — komponennya tetap jalan, hanya tampilannya rusak, tanpa satu pun galat.
+ */
+
+export type DetailModalFieldProps = {
+  /** Dipakai untuk id/aria yang unik antar field dalam satu form. */
+  fieldKey: string;
+  label: ReactNode;
+  required?: boolean;
+  helperText?: ReactNode;
+  config: DetailModalConfig;
+  rows: Record<string, unknown>[];
+  mode: FormMode;
+  /** View mode atau field readonly: tabel tetap tampil, aksinya hilang. */
+  readOnly: boolean;
+  disabled: boolean;
+  labels: BosSharedLabels;
+  /** Pesan galat tingkat field dari validator form induk. */
+  invalidText?: string;
+  onChange: (rows: Record<string, unknown>[]) => void;
+  /**
+   * Perender form untuk isi modal.
+   *
+   * Disuntikkan dari `form-renderer.tsx` alih-alih di-import langsung supaya
+   * tidak ada lingkaran impor antara kedua modul — `form-renderer` sudah
+   * meng-import berkas ini.
+   */
+  renderForm: (props: {
+    value: Record<string, unknown>;
+    sections: FormSection<Record<string, unknown>>[];
+    mode: FormMode;
+    errors: Partial<Record<string, string>>;
+    disabled: boolean;
+    onChange: (patch: Partial<Record<string, unknown>>) => void;
+  }) => ReactNode;
+};
+
+export function DetailModalField({
+  fieldKey,
+  label,
+  required = false,
+  helperText,
+  config,
+  rows,
+  mode,
+  readOnly,
+  disabled,
+  labels,
+  invalidText,
+  onChange,
+  renderForm,
+}: DetailModalFieldProps) {
+  // `draft === null` berarti modal tertutup. State draft dipisah dari `rows`
+  // supaya Batal benar-benar membatalkan: baris asli tidak pernah tersentuh
+  // sampai Simpan lolos validasi.
+  const [draft, setDraft] = useState<Record<string, unknown> | null>(null);
+  // `null` = baris baru; angka = indeks baris yang sedang diubah.
+  const [draftIndex, setDraftIndex] = useState<number | null>(null);
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+
+  const allowEdit = config.allowEdit ?? true;
+  const allowDelete = config.allowDelete ?? true;
+  const showActions = !readOnly && (allowEdit || allowDelete);
+  const atMax = config.maxRows !== undefined && rows.length >= config.maxRows;
+  const isOpen = draft !== null;
+
+  const openAdd = () => {
+    setDraft(config.newRowFactory());
+    setDraftIndex(null);
+    setErrors({});
+  };
+
+  const openEdit = (index: number) => {
+    // Salinan dangkal: menyunting objek baris langsung akan mengubah data form
+    // induk sebelum Simpan, sehingga Batal tidak lagi bisa mengembalikannya.
+    setDraft({ ...rows[index] });
+    setDraftIndex(index);
+    setErrors({});
+  };
+
+  const closeModal = () => {
+    setDraft(null);
+    setDraftIndex(null);
+    setErrors({});
+  };
+
+  const commit = () => {
+    if (draft === null) return;
+
+    // Validasi per-field memakai mesin yang SAMA dengan form biasa, dengan
+    // barisnya sebagai `TData`. Aturan `required` / `pattern` / `Rules.*` yang
+    // ditulis di section baris berlaku apa adanya, tanpa disalin ulang di sini.
+    const fields = config.sections.flatMap((s) => s.fields);
+    const fieldErrors = runFieldValidation(fields, draft, mode, labels);
+
+    // Baris baru divalidasi memakai posisi tempat ia AKAN mendarat, bukan -1,
+    // supaya aturan yang bergantung urutan (mis. nomor urut ahli waris) melihat
+    // indeks yang sama dengan yang akan dilihatnya setelah tersimpan.
+    const index = draftIndex ?? rows.length;
+    const rowErrors = config.validateRow?.(draft, index) ?? {};
+
+    const merged: Partial<Record<string, string>> = { ...fieldErrors, ...rowErrors };
+    if (Object.keys(merged).length > 0) {
+      setErrors(merged);
+      return;
+    }
+
+    onChange(
+      draftIndex === null
+        ? [...rows, draft]
+        : rows.map((row, i) => (i === draftIndex ? draft : row)),
+    );
+    closeModal();
+  };
+
+  const removeAt = (index: number) => {
+    onChange(rows.filter((_, i) => i !== index));
+  };
+
+  const renderCell = (
+    column: DetailModalConfig["columns"][number],
+    row: Record<string, unknown>,
+  ): ReactNode => {
+    const raw = row[column.field];
+    if (column.format) return column.format(raw, row);
+    if (raw === null || raw === undefined || raw === "") return labels.emptyValue;
+    return String(raw);
+  };
+
+  const columnCount = config.columns.length + 1 + (showActions ? 1 : 0);
+
+  return (
+    <div style={{ display: "grid", gap: "0.5rem" }}>
+      {/* Kepala panel: label kiri, tombol Tambah kanan — bentuk yang dipakai
+          contoh UI untuk Ahli Waris / Relasi / Beneficial Owner. */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: "1rem",
+        }}
+      >
+        <div className={UI7_FORM_VISUAL_CLASSNAMES.label}>
+          <span>{label}</span>
+          {required ? (
+            <span className={UI7_FORM_VISUAL_CLASSNAMES.labelRequired}> *</span>
+          ) : null}
+        </div>
+        {!readOnly ? (
+          <Button
+            size="sm"
+            renderIcon={Add}
+            onClick={openAdd}
+            disabled={disabled || atMax}
+          >
+            {config.addLabel ?? labels.detailAdd}
+          </Button>
+        ) : null}
+      </div>
+
+      <TableContainer>
+        <Table size="sm" useZebraStyles={false}>
+          <TableHead>
+            <TableRow>
+              <TableHeader style={{ width: "3rem" }}>{labels.detailNo}</TableHeader>
+              {config.columns.map((column) => (
+                <TableHeader
+                  key={column.field}
+                  style={column.width ? { width: `${column.width}px` } : undefined}
+                >
+                  {column.header}
+                </TableHeader>
+              ))}
+              {showActions ? (
+                <TableHeader style={{ width: "5.5rem" }}>
+                  {labels.detailActions}
+                </TableHeader>
+              ) : null}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columnCount}
+                  style={{
+                    textAlign: "center",
+                    fontStyle: "italic",
+                    color: "var(--cds-text-secondary, #525252)",
+                  }}
+                >
+                  {config.emptyText ?? labels.detailEmpty}
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row, index) => (
+                <TableRow key={config.rowKey?.(row, index) ?? String(index)}>
+                  <TableCell>{index + 1}</TableCell>
+                  {config.columns.map((column) => (
+                    <TableCell
+                      key={column.field}
+                      style={
+                        column.align === "end" ? { textAlign: "right" } : undefined
+                      }
+                    >
+                      {renderCell(column, row)}
+                    </TableCell>
+                  ))}
+                  {showActions ? (
+                    <TableCell>
+                      <div style={{ display: "flex", gap: "0.25rem" }}>
+                        {allowEdit ? (
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            hasIconOnly
+                            renderIcon={Edit}
+                            iconDescription={labels.detailEdit}
+                            aria-label={`${labels.detailEdit} ${index + 1}`}
+                            disabled={disabled}
+                            onClick={() => openEdit(index)}
+                          />
+                        ) : null}
+                        {allowDelete ? (
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            hasIconOnly
+                            renderIcon={TrashCan}
+                            iconDescription={labels.detailDelete}
+                            aria-label={`${labels.detailDelete} ${index + 1}`}
+                            disabled={disabled}
+                            onClick={() => removeAt(index)}
+                          />
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  ) : null}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {invalidText ? (
+        <div
+          role="alert"
+          className={UI7_FORM_VISUAL_CLASSNAMES.helper}
+          style={{ color: "var(--cds-text-error, #da1e28)" }}
+        >
+          {invalidText}
+        </div>
+      ) : null}
+
+      {helperText ? (
+        <div className={UI7_FORM_VISUAL_CLASSNAMES.helper}>{helperText}</div>
+      ) : null}
+
+      {/* Modal dipasang HANYA saat terbuka supaya setiap kali dibuka formnya
+          benar-benar baru — tidak ada sisa nilai dari baris yang dibuka
+          sebelumnya. */}
+      {isOpen ? (
+        <ComposedModal
+          open
+          onClose={closeModal}
+          size={config.modalSize ?? "lg"}
+          aria-label={String(
+            draftIndex === null
+              ? config.addModalTitle ?? labels.detailAddTitle
+              : config.editModalTitle ?? labels.detailEditTitle,
+          )}
+        >
+          <ModalHeader
+            title={
+              draftIndex === null
+                ? config.addModalTitle ?? labels.detailAddTitle
+                : config.editModalTitle ?? labels.detailEditTitle
+            }
+          />
+          <ModalBody hasScrollingContent>
+            {renderForm({
+              value: draft,
+              sections: config.sections,
+              // Baris selalu disunting dalam mode tulis. Mode `view` induk tidak
+              // pernah sampai ke sini — tombol Ubah sudah hilang saat readOnly.
+              mode: draftIndex === null ? "create" : "edit",
+              errors,
+              disabled,
+              onChange: (patch) =>
+                setDraft((prev) => (prev === null ? prev : { ...prev, ...patch })),
+            })}
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={closeModal} disabled={disabled}>
+              {labels.cancel}
+            </Button>
+            <Button
+              kind="primary"
+              onClick={commit}
+              disabled={disabled}
+              data-testid={`detail-modal-save-${fieldKey}`}
+            >
+              {labels.submitCreate}
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      ) : null}
+    </div>
+  );
+}

package/src/form-renderer.tsx

@@ -34,6 +34,7 @@ import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
 import { toLocalISODate } from "./form-renderer-utils";
+import { DetailModalField } from "./detail-modal-field";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   mode: FormMode;
@@ -663,6 +664,88 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   ];
                 }
 
+                // ── Detail-modal (tabel ringkas + modal form per baris) ─────
+                // Sama seperti detail-rows: dirender SEBELUM cabang readonly
+                // supaya view / edit / create memakai satu komponen yang sama —
+                // yang readonly hanya kehilangan tombol Tambah dan kolom Aksi.
+                // Default span 12 karena tabel tidak pernah pas di setengah
+                // kolom.
+                if (field.type === "detail-modal") {
+                  const detailSpan = clampSpan(field.span, 12);
+                  const detailWrapperStyle = {
+                    gridColumn: field.breakBefore
+                      ? `1 / span ${detailSpan}`
+                      : `span ${detailSpan} / span ${detailSpan}`,
+                    minWidth: 0,
+                  } as const;
+
+                  // Config yang hilang TIDAK boleh membuat field lenyap diam-diam.
+                  // `detail-rows` mengembalikan [] di sini, dan akibatnya field
+                  // yang salah tulis hilang dari layar tanpa satu pun galat —
+                  // persis kelas kegagalan yang paling mahal di modul ini.
+                  const detail = field.detailModal;
+                  if (!detail) {
+                    return [
+                      <div
+                        key={key}
+                        className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                        style={detailWrapperStyle}
+                      >
+                        <div role="alert" style={{ color: "var(--cds-text-error, #da1e28)" }}>
+                          {`Field "${key}" bertipe detail-modal tetapi tidak punya detailModal.`}
+                        </div>
+                      </div>,
+                    ];
+                  }
+
+                  const rows = Array.isArray(rawValue)
+                    ? (rawValue as Record<string, unknown>[])
+                    : [];
+
+                  return [
+                    <div
+                      key={key}
+                      className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                      style={detailWrapperStyle}
+                    >
+                      <DetailModalField
+                        fieldKey={key}
+                        label={field.label}
+                        required={effectiveRequired}
+                        helperText={field.helperText}
+                        config={detail}
+                        rows={rows}
+                        mode={mode}
+                        readOnly={effectiveReadonly}
+                        disabled={disabled}
+                        labels={labels}
+                        invalidText={invalidText}
+                        onChange={(newRows) =>
+                          setValue(
+                            field.key,
+                            (newRows as unknown) as TData[keyof TData],
+                          )
+                        }
+                        renderForm={(p) => (
+                          <SchemaFormRenderer
+                            mode={p.mode}
+                            value={p.value}
+                            sections={p.sections}
+                            errors={p.errors}
+                            disabled={p.disabled}
+                            onChange={p.onChange}
+                            density={density}
+                            // Form baris mengisi lebar modal. Tanpa ini ia
+                            // mewarisi batas two-thirds milik form induk dan
+                            // menyisakan sepertiga modal kosong.
+                            width="full"
+                          />
+                        )}
+                      />
+                    </div>,
+                  ];
+                }
+
                 // ── View / readonly ─────────────────────────────────────────
                 if (effectiveReadonly) {
                   return [

package/src/form-types.ts

@@ -33,7 +33,7 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
 export type FormFieldType =
   | "text" | "textarea" | "number" | "date" | "datetime"
   | "select" | "lookup" | "checkbox" | "toggle"
-  | "detail-rows";
+  | "detail-rows" | "detail-modal";
 
 /**
  * Select option. `value` may be a number for numeric-coded columns (e.g.
@@ -114,6 +114,98 @@ export type DetailRowsConfig = {
   lockExistingRows?: boolean;
 };
 
+/**
+ * Satu kolom pada tabel RINGKAS `detail-modal`.
+ *
+ * Sengaja BUKAN `EditableColumnDef`: kolom di sini hanya menampilkan, tidak
+ * pernah menyunting — penyuntingan seluruhnya terjadi di dalam modal. Memakai
+ * `EditableColumnDef` akan menuntut `columnType` untuk setiap kolom padahal
+ * tipe itu hanya menentukan editor sel yang tidak akan pernah dipakai.
+ */
+export type DetailModalColumn = {
+  /** Nama properti pada baris. */
+  field: string;
+  header: ReactNode;
+  /** Lebar kolom dalam piksel. Tanpa ini kolom ikut lebar isi. */
+  width?: number;
+  /** `end` untuk angka. Default `start`. */
+  align?: "start" | "end";
+  /**
+   * Ubah nilai mentah jadi tampilan. Tanpa ini nilai kosong tampil sebagai
+   * em-dash (`labels.emptyValue`) dan sisanya lewat `String(value)`.
+   *
+   * ⚠️ Kolom ringkas menampilkan nilai SIMPAN, bukan label. Untuk field
+   * `select`, `String(value)` menghasilkan kodenya ("M"), bukan "Laki-laki" —
+   * pakai `format` bila yang harus terbaca operator adalah labelnya.
+   */
+  format?: (value: unknown, row: Record<string, unknown>) => ReactNode;
+};
+
+/**
+ * Detail-modal config — tabel RINGKAS + tombol Tambah yang membuka modal
+ * berisi form penuh untuk SATU baris.
+ *
+ * Bedanya dengan `detail-rows`: `detail-rows` menyunting DI DALAM sel, jadi
+ * setiap field baris harus muat sebagai satu kolom. Begitu satu baris punya
+ * belasan field (Beneficial Owner: ~20 field + dua blok alamat), barisnya jadi
+ * selebar beberapa layar dan tidak ada tempat untuk alur per-baris seperti cek
+ * identitas. `detail-modal` memindahkan seluruh form baris ke modal, dan
+ * menyisakan hanya beberapa kolom penanda di tabel.
+ *
+ * Nilai field di `key` harus berupa array objek biasa; renderer membaca dan
+ * menulis array itu secara utuh lewat `onChange({ [key]: newRows })` — sama
+ * seperti `detail-rows`.
+ *
+ * Isi modal dirender oleh `SchemaFormRenderer` yang sama dengan form induknya,
+ * jadi SEMUA tipe field yang sudah ada (lookup, date, numeric, toggle, bahkan
+ * `FormSection.render`) langsung bisa dipakai di dalam baris tanpa tambahan
+ * apa pun di sini.
+ */
+export type DetailModalConfig = {
+  /**
+   * Form untuk SATU baris. Section-nya sama persis dengan section form biasa,
+   * dan `TData`-nya adalah barisnya — bukan form induk.
+   */
+  sections: FormSection<Record<string, unknown>>[];
+  /** Kolom yang tampil di tabel ringkas. Boleh sebagian kecil saja dari field baris. */
+  columns: DetailModalColumn[];
+  newRowFactory: () => Record<string, unknown>;
+  /**
+   * Aturan lintas-field untuk satu baris, dijalankan SETELAH validasi per-field
+   * milik `sections`. Kuncinya nama field; hasilnya menimpa error per-field.
+   *
+   * `index` adalah posisi baris — untuk baris baru, posisi tempat ia akan
+   * mendarat (`rows.length`).
+   */
+  validateRow?: (
+    row: Record<string, unknown>,
+    index: number,
+  ) => Record<string, string>;
+  /** Batas jumlah baris. Tombol Tambah nonaktif setelah tercapai. */
+  maxRows?: number;
+  /** Teks tombol tambah, mis. "Tambah Ahli Waris". Default: "Tambah". */
+  addLabel?: ReactNode;
+  /** Judul modal saat menambah. Default: "Tambah Data". */
+  addModalTitle?: ReactNode;
+  /** Judul modal saat mengubah. Default: "Ubah Data". */
+  editModalTitle?: ReactNode;
+  /** Teks saat tabel kosong. Default: "Belum ada data." */
+  emptyText?: ReactNode;
+  /** Lebar modal Carbon. Default `lg` — form baris biasanya padat. */
+  modalSize?: "xs" | "sm" | "md" | "lg";
+  /** Izinkan membuka baris yang sudah ada untuk diubah. Default `true`. */
+  allowEdit?: boolean;
+  /** Izinkan menghapus baris. Default `true`. */
+  allowDelete?: boolean;
+  /**
+   * Kunci React per baris. Default memakai indeks.
+   *
+   * Berguna bila baris punya identitas sendiri (mis. `person_id`) supaya state
+   * modal tidak nyangkut ke baris lain setelah penghapusan di tengah.
+   */
+  rowKey?: (row: Record<string, unknown>, index: number) => string;
+};
+
 export type FormField<TData extends Record<string, unknown>> = {
   key: keyof TData;
   label: ReactNode;
@@ -146,6 +238,7 @@ export type FormField<TData extends Record<string, unknown>> = {
   numeric?: FormFieldNumericConfig<TData>;
   toggle?: FormFieldToggleConfig;
   detailRows?: DetailRowsConfig;
+  detailModal?: DetailModalConfig;
   format?: (value: TData[keyof TData], data: TData) => ReactNode;
   validation?: FieldValidation<TData>;
 };

package/src/i18n.tsx

@@ -44,6 +44,16 @@ export type BosSharedLabels = {
   deleteTitle: string;
   deleteDescription: string;
   deleteConfirm: string;
+
+  /** Tipe field `detail-modal` — tabel ringkas + modal form per baris. */
+  detailAdd: string;
+  detailEdit: string;
+  detailDelete: string;
+  detailEmpty: string;
+  detailNo: string;
+  detailActions: string;
+  detailAddTitle: string;
+  detailEditTitle: string;
 };
 
 // ── Thin adapter — reads from @isi-ui7/i18n (wired in createShellProvider) ───
@@ -93,5 +103,14 @@ export function useBosSharedI18n(): BosSharedLabels {
     deleteTitle: t("bos7.deleteTitle", "Konfirmasi Hapus"),
     deleteDescription: t("bos7.deleteDescription", "Data berikut akan dihapus permanen."),
     deleteConfirm: t("bos7.deleteConfirm", "Hapus"),
+
+    detailAdd: t("bos7.detailAdd", "Tambah"),
+    detailEdit: t("bos7.detailEdit", "Ubah"),
+    detailDelete: t("bos7.detailDelete", "Hapus"),
+    detailEmpty: t("bos7.detailEmpty", "Belum ada data."),
+    detailNo: t("bos7.detailNo", "No"),
+    detailActions: t("bos7.detailActions", "Aksi"),
+    detailAddTitle: t("bos7.detailAddTitle", "Tambah Data"),
+    detailEditTitle: t("bos7.detailEditTitle", "Ubah Data"),
   };
 }