@starasia/admin 14.9.0 → 14.11.0

package/dist/components/FilterBar/components/ColumnHeaderFilter.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FilterFieldConfig } from '../types';
+import { FilterBarControls } from '../hooks/useFilterBarControls';
+
+/**
+ * Kontrol filter untuk dipasang di HEADER kolom TableLayout (Excel-style),
+ * dirakit otomatis dari `field.type` — sama seperti FilterBar merender tipe,
+ * dan memakai komponen date design system yang SAMA (`StarasiaDate` + `OpMenu`
+ * + `CompactBody` yang dipakai FilterBar). Menulis ke sumber filter yang SAMA
+ * (`useFilterBarControls`), jadi pill FilterBar + query ikut sinkron;
+ * TableLayout tetap filter-agnostic.
+ *
+ * ```tsx
+ * const filter = useFilterBarControls({ filterConfigs });
+ * const columns = baseColumns.map((col) => {
+ *   const field = filterConfigs.find((f) => f.key === col.key);
+ *   if (!field) return col;
+ *   return {
+ *     ...col,
+ *     renderFilter: () => <ColumnHeaderFilter field={field} controls={filter} />,
+ *     filterActive: isColumnFilterActive(field, filter),
+ *   };
+ * });
+ * ```
+ */
+export interface ColumnHeaderFilterProps {
+    /** Config filter — objek yang SAMA yang diberikan ke `<FilterBar>` via `filterConfigs`. */
+    field: FilterFieldConfig;
+    /** Controller dari `useFilterBarControls` (sumber filter yang sama dg FilterBar). */
+    controls: FilterBarControls;
+}
+/** Apakah field ini sedang punya filter aktif — untuk menyalakan funnel header. */
+export declare const isColumnFilterActive: (field: FilterFieldConfig, controls: FilterBarControls) => boolean;
+export declare const ColumnHeaderFilter: ({ field, controls }: ColumnHeaderFilterProps) => React.JSX.Element;

package/dist/components/FilterBar/components/pills/DatePill.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DateCompactFilterField, DateCompactValue, DateFilterField } from '../../types';
+import { DateCompactFilterField, DateCompactOp, DateCompactValue, DateFilterField } from '../../types';
 
 interface DatePillProps {
     field: DateFilterField | DateCompactFilterField;
@@ -9,5 +9,18 @@ interface DatePillProps {
     /** Removes the whole pill. Omit for locked fields. */
     onRemove?: () => void;
 }
+type DateMode = 'days' | 'months' | 'years';
+export declare const ALL_OPS: DateCompactOp[];
 export declare const DatePill: React.FC<DatePillProps>;
+export declare const OpMenu: React.FC<{
+    op: DateCompactOp;
+    ops: DateCompactOp[];
+    onChange: (next: DateCompactOp) => void;
+}>;
+export declare const CompactBody: React.FC<{
+    value: DateCompactValue | undefined;
+    op: DateCompactOp;
+    mode?: DateMode;
+    onChange: (v: unknown) => void;
+}>;
 export {};

package/dist/components/FilterBar/components/pills/TextPill.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { TextFilterField } from '../../types';
+
+interface TextPillProps {
+    field: TextFilterField;
+    value: string;
+    /** Tulis nilai baru (string kosong = hapus nilai). */
+    onChange: (v: string) => void;
+    /** Kosongkan nilai tanpa menghapus pill. */
+    onClear: () => void;
+    /** Hapus pill sepenuhnya. Kosong untuk field `locked`. */
+    onRemove?: () => void;
+}
+/**
+ * Text pill — filter teks bebas ("contains"). Debounced (default 300ms) supaya
+ * tak refetch tiap ketikan; nilai kosong menghapus filter.
+ */
+export declare const TextPill: React.FC<TextPillProps>;
+export {};

package/dist/components/FilterBar/hooks/useFilterBarControls.d.ts

@@ -22,6 +22,18 @@ export interface FilterBarControls {
     isActive: (key: string, value: string) => boolean;
     /** Nilai-nilai aktif sekarang pada filter `key`. */
     values: (key: string) => string[];
+    /**
+     * Baca nilai MENTAH filter apa pun — termasuk non-select. `date` → `Date`,
+     * `date-compact` → `DateCompactValue`, select-type → array `{ value, label }`.
+     * Untuk memfilter dari luar FilterBar pada tipe yang tak muat di `values`.
+     */
+    getRaw: (key: string) => unknown;
+    /**
+     * Tulis nilai MENTAH lewat jalur yang SAMA dengan FilterBar — mendukung
+     * `date` (kirim `Date`) & `date-compact` (kirim `DateCompactValue`) yang TIDAK
+     * didukung `set`. `null`/`undefined` → hapus filter. Pill + query ikut sinkron.
+     */
+    setRaw: (key: string, value: unknown) => void;
     /** Ada filter aktif (apa pun). */
     hasActiveFilter: boolean;
 }

package/dist/components/FilterBar/index.d.ts

@@ -1,6 +1,7 @@
 export { FilterBar } from './FilterBar';
 export { useFilterBarApiParams, type UseFilterBarApiParamsOptions, type FilterBarApiParams } from './hooks/useFilterBarApiParams';
 export { useFilterBarControls, type UseFilterBarControlsOptions, type FilterBarControls } from './hooks/useFilterBarControls';
+export { ColumnHeaderFilter, isColumnFilterActive, type ColumnHeaderFilterProps } from './components/ColumnHeaderFilter';
 export { expandDateCompact, type ExpandDateCompactOptions } from './utils/expand-date-compact';
 export { localStorageAdapter, storageKeys } from './utils/storage-adapter';
 export type { FilterBarProps, FilterFieldConfig, FilterFieldType, SelectFilterField, CheckboxMultipleFilterField, DateFilterField, DateCompactFilterField, DateCompactOp, DateCompactValue, RelativeDirection, RelativePeriod, ColumnConfig, ColumnPrefState, SavedView, FilterStorageAdapter } from './types';

package/dist/components/FilterBar/types.d.ts

@@ -8,7 +8,7 @@ import { Pagination } from '../TableSection/types';
  * (`handleChangeFilter`, `getValuesFilter`, …) so the JSON-blob URL encoding
  * (`?filter={...}`) is reused as-is. `key` is the param name inside that blob.
  */
-export type FilterFieldType = 'date' | 'date-compact' | 'dropdown' | 'dropdown-multiple' | 'checkbox-multiple' | 'radio';
+export type FilterFieldType = 'date' | 'date-compact' | 'dropdown' | 'dropdown-multiple' | 'checkbox-multiple' | 'radio' | 'text';
 interface BaseFilterField {
     /** Stable key — used as the field name inside the `?filter` blob. */
     key: string;
@@ -49,6 +49,18 @@ export interface CheckboxMultipleFilterField extends BaseFilterField {
         value: string;
     }[];
 }
+/**
+ * Filter teks bebas ("contains") — untuk kolom high-cardinality/teks bebas
+ * (deskripsi, nama, no. seri) yang tak muat di select/date. Menghasilkan
+ * string; backend biasanya `LIKE %value%`. Nilai kosong = filter dihapus.
+ */
+export interface TextFilterField extends BaseFilterField {
+    type: 'text';
+    /** Placeholder input. Default "Cari…". */
+    placeholder?: string;
+    /** Debounce sebelum tulis ke URL (ms). Default 300. */
+    debounceMs?: number;
+}
 export interface DateFilterField extends BaseFilterField {
     type: 'date';
     mode?: 'days' | 'months' | 'years';
@@ -94,7 +106,7 @@ export interface DateCompactFilterField extends BaseFilterField {
      */
     mode?: 'days' | 'months' | 'years';
 }
-export type FilterFieldConfig = SelectFilterField | CheckboxMultipleFilterField | DateFilterField | DateCompactFilterField;
+export type FilterFieldConfig = SelectFilterField | CheckboxMultipleFilterField | TextFilterField | DateFilterField | DateCompactFilterField;
 /** A single column entry fed to the Customize Column panel. */
 export interface ColumnConfig {
     key: string;

package/dist/components/TableLayout/ColumnMenu.d.ts

@@ -11,5 +11,16 @@ export interface ColumnMenuProps {
     onClearSort: () => void;
     onToggleFreeze: () => void;
     onHide: () => void;
+    /**
+     * Slot filter per-kolom (Excel-style). Di-render di ATAS menu (sebelum
+     * sort/freeze/hide) dalam section "Filter". Konten & state-nya milik consumer
+     * — ColumnMenu tak tahu tipe filter apa pun; teruskan kontrol yang menulis ke
+     * sumber filter yang sama dengan FilterBar (mis. `useFilterBarControls`),
+     * supaya pill FilterBar + query ikut sinkron. Klik di dalam slot TIDAK menutup
+     * menu (biar bisa pilih banyak nilai).
+     */
+    filterSlot?: React.ReactNode;
+    /** Ada filter aktif di kolom ini → funnel trigger menyala + tetap terlihat. */
+    filterActive?: boolean;
 }
-export declare const ColumnMenu: ({ active, canSort, canHide, sortDir, frozen, onSort, onClearSort, onToggleFreeze, onHide }: ColumnMenuProps) => React.JSX.Element;
+export declare const ColumnMenu: ({ active, canSort, canHide, sortDir, frozen, onSort, onClearSort, onToggleFreeze, onHide, filterSlot, filterActive }: ColumnMenuProps) => React.JSX.Element;

package/dist/components/TableLayout/types.d.ts

@@ -111,6 +111,16 @@ export interface TableLayoutColumn<T> {
     sortKey?: keyof T;
     /** sembunyikan menu kolom (Ascending/Descending/Freeze/Hide) di kolom ini */
     disableMenu?: boolean;
+    /**
+     * Filter per-kolom (Excel-style) — di-render di ATAS menu kolom. Kembalikan
+     * kontrol filter (checklist/dropdown/dst) yang menulis ke sumber filter yang
+     * SAMA dengan FilterBar (mis. `useFilterBarControls` di-key by kolom), supaya
+     * pill FilterBar + query ikut sinkron. TableLayout tak tahu tipe filter — ia
+     * hanya me-render node ini. Butuh `columnMenu` aktif & `disableMenu` tak diset.
+     */
+    renderFilter?: () => ReactNode;
+    /** Ada filter aktif di kolom ini → funnel di header menyala + tetap terlihat. */
+    filterActive?: boolean;
     /** kolom terkunci — tidak bisa di-hide (item "Hide column" disembunyikan) */
     locked?: boolean;
     /**