@isi-ui7/bos7-shared 0.3.7 → 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.7",
+  "version": "0.3.9",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {

package/src/crud-components.tsx

@@ -588,7 +588,12 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                 disabled={saving}
                 onChange={setForm}
                 density={density}
-                width={width}
+                // Pada wizard, form MENGISI kolom kirinya. Default global
+                // "two-thirds" membatasi form di dalam kolom yang SUDAH
+                // dipersempit stepper — hasilnya sepertiga ruang kosong
+                // menganga di antara keduanya. Penulis skema tetap bisa
+                // menyempitkannya dgn menyetel schema.width secara eksplisit.
+                width={width ?? "full"}
               />
             ) : null}
           </div>