@isi-ui7/bos7-shared 0.4.7 → 0.5.1

package/dist/i18n.d.ts

@@ -17,6 +17,8 @@ export type BosSharedLabels = {
     toggleOff: string;
     emptyValue: string;
     showInactive: string;
+    filterApply: string;
+    filterReset: string;
     loading: string;
     saving: string;
     errorTitle: string;

package/dist/{index-C-h8WiEp.js → index-CvKOQKt5.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-OHmQQaGr.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DcntYaes.js"), c = new x({ orientation: "landscape" });
+  const { default: x } = await import("./jspdf.es.min-B3CTSFr_.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DcntYaes.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))),
@@ -28663,6 +28663,8 @@ function tl() {
     toggleOff: M("bos7.toggleOff", "Tidak"),
     emptyValue: M("bos7.emptyValue", "—"),
     showInactive: M("bos7.showInactive", "Tampilkan Nonaktif"),
+    filterApply: M("bos7.filterApply", "Cari"),
+    filterReset: M("bos7.filterReset", "Reset"),
     loading: M("bos7.loading", "Memuat data..."),
     saving: M("bos7.saving", "Memproses..."),
     errorTitle: M("bos7.errorTitle", "Gagal"),

package/dist/{index.es-C4xrluJC.js → index.es-BAzO0Iw8.js}

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

package/dist/index.js

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

package/dist/{jspdf.es.min-OHmQQaGr.js → jspdf.es.min-B3CTSFr_.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-C4xrluJC.js")).catch(function(k) {
+  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-BAzO0Iw8.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.4.7",
+  "version": "0.5.1",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.17",
+    "@isi-ui7/corporate-themes": ">=0.2.19",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.4",
@@ -106,13 +106,13 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.17",
+    "@isi-ui7/corporate-themes": "0.2.19",
+    "@isi-ui7/i18n": "0.2.4",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/lookup-input": "0.2.4",
-    "@isi-ui7/realtime": "0.2.3",
     "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/i18n": "0.2.4",
     "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/realtime": "0.2.3",
     "@isi-ui7/ui-shell": "0.2.8"
   },
   "dependencies": {
@@ -126,9 +126,9 @@
     "jose": "^5.9.6",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
+    "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/lookup-input": "0.2.4",
-    "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/data-table": "0.2.5"
+    "@isi-ui7/editable-table": "0.2.3"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-components.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { Add } from "@carbon/icons-react";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { Add, Search } from "@carbon/icons-react";
 import {
   Button,
   ComposedModal,
@@ -88,36 +88,51 @@ export function SharedCrudListPage({
   // Two states per field, not one: `filterFieldValues` is what the widget
   // shows (updates on every keystroke, so typing feels immediate);
   // `filterFieldCommitted` is what actually reaches additionalParams (and
-  // therefore triggers a refetch). For `type: "select"` they're set
-  // together — a discrete pick, same as filterSelect's existing immediate
-  // commit. For `type: "text"` the commit is DEBOUNCED: this mirrors the
-  // codebase's own precedent for free-text-triggers-a-fetch
-  // (OffsetDataTable's search box debounces the same way) — committing
-  // every keystroke straight to a network request is the one inconsistency
-  // an un-debounced text field would introduce that filterSelect's select
-  // never had.
-  const FILTER_TEXT_DEBOUNCE_MS = 400;
+  // therefore triggers a refetch).
+  //
+  // ── KEPUTUSAN LAMA, DIGANTI 2026-09-06 — dibiarkan tertulis, bukan dihapus.
+  //
+  // Semula: `select` commit SEGERA, `text` commit DEBOUNCED 400 ms, mengikuti
+  // preseden kotak cari OffsetDataTable. Itu keputusan yang SENGAJA, bukan
+  // kelalaian — dan komentarnya dipertahankan supaya orang berikutnya nol
+  // mengira debounce nol pernah dipikirkan lalu memasangnya kembali.
+  //
+  // ── YANG BERLAKU SEKARANG: terapkan MANUAL lewat tombol `Cari`.
+  //
+  // Diputuskan user 2026-09-06 sesudah melihat layarnya sendiri: "ada tombol
+  // search dan reset filter". Itu pernyataan bagaimana layar ini dioperasikan,
+  // bukan preferensi kosmetik.
+  //
+  // Dan alasan teknisnya BERBALIK ARAH sejak catatan lama ditulis: panel ini
+  // kini punya SEPULUH medan (Putaran 2, 2026-09-03). Terapkan-otomatis berarti
+  // tiap ketukan memicu kueri lintas sepuluh medan. Debounce dipilih saat
+  // panelnya kecil; panelnya sudah nol kecil.
+  //
+  // ⚠️ Kotak `Search` toolbar DataTable NOL disentuh — ia sumbu BERBEDA
+  // (full_name ATAU cif_number lewat AltSearchColumns), dan auto-apply
+  // ber-debounce di sana tetap benar.
   const [filterFieldValues, setFilterFieldValues] = useState<Record<string, string>>({});
   const [filterFieldCommitted, setFilterFieldCommitted] = useState<Record<string, string>>({});
-  const filterFieldTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
-  useEffect(() => {
-    const timers = filterFieldTimers.current;
-    return () => {
-      for (const t of Object.values(timers)) clearTimeout(t);
-    };
-  }, []);
+  // Mengetik/memilih hanya menggerakkan yang TAMPIL. Nol ada yang mencapai
+  // additionalParams sampai `Cari` diklik — itu seluruh isi keputusan di atas.
   const setFilterFieldValue = useCallback((field: CrudFilterFieldDef, value: string) => {
     setFilterFieldValues((prev) => ({ ...prev, [field.param]: value }));
-    if (field.type === "text") {
-      if (filterFieldTimers.current[field.param]) {
-        clearTimeout(filterFieldTimers.current[field.param]);
-      }
-      filterFieldTimers.current[field.param] = setTimeout(() => {
-        setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
-      }, FILTER_TEXT_DEBOUNCE_MS);
-    } else {
-      setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
-    }
+  }, []);
+  // Disalin, bukan dirujuk: `filterFieldCommitted` harus jadi POTRET nilai saat
+  // Cari diklik. Membaginya dgn `filterFieldValues` akan membuat ketukan
+  // berikutnya ikut terkirim tanpa ada yang mengklik apa pun.
+  const terapkanFilter = useCallback(() => {
+    setFilterFieldValues((v) => {
+      setFilterFieldCommitted({ ...v });
+      return v;
+    });
+  }, []);
+  // Mengosongkan KEDUANYA. Mengosongkan yang tampil saja akan menyisakan filter
+  // yang masih berlaku di balik layar sementara kotaknya terlihat kosong —
+  // pengguna melihat "nol ada filter" dan hasilnya tetap tersaring.
+  const resetFilter = useCallback(() => {
+    setFilterFieldValues({});
+    setFilterFieldCommitted({});
   }, []);
   const hasFilterFields = Boolean(schema.filterFields?.length);
 
@@ -151,7 +166,24 @@ export function SharedCrudListPage({
             onClick: onPopupClick,
           }}
           toolbarActions={
-            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+            // `flexWrap` WAJIB. Panel ini tumbuh dari beberapa medan jadi
+            // SEPULUH (Putaran 2, 2026-09-03) dan tiap medan ber-`minWidth:
+            // 10rem`; ditambah toggle, filterSelect, dan tombol Cari/Reset,
+            // lebar minimum satu barisnya ~112rem. Tanpa membungkus baris,
+            // panelnya meluber horizontal alih-alih turun ke baris kedua.
+            //
+            // Ongkos "sepuluh medan" sudah ditimbang di sumbu PERILAKU saat itu
+            // (debounce diganti tombol `Cari` — lihat komentar besar di atas)
+            // dan NOL ditimbang di sumbu TATA LETAK. Ini melunasinya.
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "center",
+                gap: "1rem",
+                rowGap: "0.5rem",
+              }}
+            >
               {schema.showInactiveToggle ? (
                 <Toggle
                   id={`show-inactive-${schema.apiPath}`}
@@ -207,10 +239,34 @@ export function SharedCrudListPage({
                       placeholder={f.placeholder ?? f.label}
                       value={filterFieldValues[f.param] ?? ""}
                       onChange={(e) => setFilterFieldValue(f, e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") terapkanFilter();
+                      }}
                     />
                   </div>
                 ),
               )}
+              {hasFilterFields ? (
+                <>
+                  <Button
+                    kind="primary"
+                    size="sm"
+                    renderIcon={Search}
+                    onClick={terapkanFilter}
+                    data-testid="filter-apply"
+                  >
+                    {labels.filterApply}
+                  </Button>
+                  <Button
+                    kind="ghost"
+                    size="sm"
+                    onClick={resetFilter}
+                    data-testid="filter-reset"
+                  >
+                    {labels.filterReset}
+                  </Button>
+                </>
+              ) : null}
               {toolbarExtra}
               {(schema.showAddButton ?? true) ? (
                 <Button renderIcon={Add} size="sm" onClick={onAdd}>

package/src/crud-filter-fields.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 // K-6 (user, 2026-08-26): CrudListSchema.filterFields — N granular toolbar
@@ -46,7 +46,7 @@ describe("CrudListSchema.filterFields", () => {
     expect(paramsRendered()).toEqual({});
   });
 
-  it("field type:select merender Select dan mengirim param SEGERA saat dipilih", async () => {
+  it("field type:select MENUNGGU tombol Cari (dulu: kirim SEGERA saat dipilih)", async () => {
     const user = userEvent.setup();
     render(
       <SharedCrudListPage
@@ -70,10 +70,16 @@ describe("CrudListSchema.filterFields", () => {
     const select = screen.getByLabelText("Jenis Identitas") as HTMLSelectElement;
     await user.selectOptions(select, "KTP");
 
+    // 🔑 Perilaku DIGANTI 2026-09-06 (keputusan user): memilih nol lagi
+    // mengirim apa pun. Sebelumnya baris ini berbunyi { identity_type: "KTP" }.
+    expect(paramsRendered()).toEqual({ identity_type: "" });
+    expect(select.value).toBe("KTP"); // widget tetap responsif
+
+    await user.click(screen.getByTestId("filter-apply"));
     expect(paramsRendered()).toEqual({ identity_type: "KTP" });
   });
 
-  it("field type:text merender TextInput dan DEBOUNCE param (nol segera saat mengetik)", async () => {
+  it("field type:text MENUNGGU tombol Cari (dulu: DEBOUNCE 400 ms)", async () => {
     const user = userEvent.setup();
     render(
       <SharedCrudListPage
@@ -90,13 +96,69 @@ describe("CrudListSchema.filterFields", () => {
     const input = screen.getByLabelText("Nama") as HTMLInputElement;
     await user.type(input, "Budi");
 
-    // 🔑 Klaim inti: mengetik TIDAK segera mengirim param -- kalau ini gagal,
-    // field teks refetch di SETIAP keystroke (inkonsisten dgn search bar
-    // bawaan, yang sudah didebounce di OffsetDataTable).
+    // 🔑 Klaim inti: mengetik nol mengirim param.
+    expect(paramsRendered()).toEqual({ full_name: "" });
+    expect(input.value).toBe("Budi"); // widget tetap responsif
+
+    // 🔴 KONTROL WAKTU: dulu param mendarat sendiri sesudah debounce 400 ms.
+    // Menunggu LEBIH LAMA dari itu dan tetap kosong membuktikan auto-apply
+    // benar-benar HILANG — bukan sekadar lebih lambat.
+    await new Promise((r) => setTimeout(r, 700));
     expect(paramsRendered()).toEqual({ full_name: "" });
-    expect(input.value).toBe("Budi"); // tapi WIDGET-nya tetap responsif
 
-    await waitFor(() => expect(paramsRendered()).toEqual({ full_name: "Budi" }), { timeout: 1000 });
+    await user.click(screen.getByTestId("filter-apply"));
+    expect(paramsRendered()).toEqual({ full_name: "Budi" });
+  });
+
+  it("Enter di medan teks setara mengklik Cari", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, filterFields: [{ type: "text", param: "full_name", label: "Nama" }] }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText("Nama") as HTMLInputElement;
+    await user.type(input, "Budi{Enter}");
+    expect(paramsRendered()).toEqual({ full_name: "Budi" });
+  });
+
+  it("Reset mengosongkan SELURUH medan — dihitung, bukan dilihat", async () => {
+    const user = userEvent.setup();
+    const banyak = Array.from({ length: 10 }, (_, i) => ({
+      type: "text" as const, param: `p${i}`, label: `Medan ${i}`,
+    }));
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, filterFields: banyak }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    for (const f of banyak) {
+      await user.type(screen.getByLabelText(f.label) as HTMLInputElement, "x");
+    }
+    await user.click(screen.getByTestId("filter-apply"));
+    const terkirim = paramsRendered() as Record<string, string>;
+    // KONTROL POSITIF: kesepuluh benar-benar terisi lebih dulu. Tanpa ini,
+    // "Reset mengosongkan" lulus juga pada panel yang memang sudah kosong.
+    expect(Object.values(terkirim).filter((v) => v === "x")).toHaveLength(10);
+
+    await user.click(screen.getByTestId("filter-reset"));
+    const sesudah = paramsRendered() as Record<string, string>;
+    expect(Object.values(sesudah).filter((v) => v !== "")).toHaveLength(0);
+    // dan yang TAMPIL ikut kosong — mengosongkan salah satunya saja menyisakan
+    // filter yang masih berlaku di balik kotak yang terlihat bersih.
+    for (const f of banyak) {
+      expect((screen.getByLabelText(f.label) as HTMLInputElement).value).toBe("");
+    }
+  });
+
+  it("tombol Cari/Reset NOL muncul saat filterFields diabaikan", () => {
+    render(<SharedCrudListPage schema={dasar} onAdd={() => {}} onPopupClick={() => {}} />);
+    expect(screen.queryByTestId("filter-apply")).toBeNull();
+    expect(screen.queryByTestId("filter-reset")).toBeNull();
   });
 
   it("filterSelect (lama) DAN filterFields (baru) coexist tanpa saling menimpa", async () => {
@@ -122,6 +184,10 @@ describe("CrudListSchema.filterFields", () => {
     expect(paramsRendered()).toEqual({ status: "", branch_code: "" });
 
     await user.selectOptions(screen.getByLabelText("Cabang"), "001");
+    await user.click(screen.getByTestId("filter-apply"));
+    // filterSelect (lama, `status`) NOL disentuh perubahan 2026-09-06 — ia
+    // sumbu terpisah dan tetap punya jalurnya sendiri; yang kini menunggu
+    // tombol hanyalah filterFields (`branch_code`).
     expect(paramsRendered()).toEqual({ status: "", branch_code: "001" });
   });
 
@@ -151,6 +217,9 @@ describe("CrudListSchema.filterFields", () => {
       />,
     );
     await user.selectOptions(screen.getByLabelText("Jenis Identitas"), "KTP");
+    await user.click(screen.getByTestId("filter-apply"));
+    // 🔑 Klaim yang dijaga uji ini NOL berubah: satu medan bergerak, yang lain
+    // tetap kosong. Yang berubah cuma KAPAN ia terkirim.
     expect(paramsRendered()).toEqual({ identity_type: "KTP", branch_code: "" });
   });
 });

package/src/i18n.tsx

@@ -25,6 +25,8 @@ export type BosSharedLabels = {
   toggleOff: string;
   emptyValue: string;
   showInactive: string;
+  filterApply: string;
+  filterReset: string;
 
   loading: string;
   saving: string;
@@ -91,6 +93,8 @@ export function useBosSharedI18n(): BosSharedLabels {
     toggleOff: t("bos7.toggleOff", "Tidak"),
     emptyValue: t("bos7.emptyValue", "—"),
     showInactive: t("bos7.showInactive", "Tampilkan Nonaktif"),
+    filterApply: t("bos7.filterApply", "Cari"),
+    filterReset: t("bos7.filterReset", "Reset"),
 
     loading: t("bos7.loading", "Memuat data..."),
     saving: t("bos7.saving", "Memproses..."),