@starasia/admin 14.10.0 → 14.12.0

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/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/Highlight/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+
+export interface HighlightProps {
+    /** Teks yang dirender; substring yang cocok dengan `query` di-`<mark>`. */
+    text: string;
+    /** Kata kunci — bisa multi-kata (dipisah spasi) untuk global search. Kosong → teks polos. */
+    query?: string;
+    /** Override style `<mark>` (default: bg warning-subtlest, warna teks inherit). */
+    markStyle?: React.CSSProperties;
+}
+/**
+ * Menyorot (highlight) substring yang cocok dengan `query` di dalam `text`.
+ * Pakai `<mark>` **inline** → aman berdampingan dengan ellipsis cell (beda dari
+ * membungkus `<Text>` yang block). Case-insensitive; mendukung beberapa kata
+ * (dipisah spasi) untuk global search.
+ *
+ * Dipakai manual di `render` kolom, atau otomatis via prop `highlight` di
+ * `<TableLayout>` (menyorot string-cell kolom yang key-nya ada di map itu).
+ *
+ * ```tsx
+ * <Highlight text={row.description} query={filter.getRaw('description') ?? ''} />
+ * ```
+ */
+export declare const Highlight: ({ text, query, markStyle }: HighlightProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { TableLayoutProps } from './types';
 
-export declare const TableLayout: <T>({ columns, data, getRowKey, rowBg, size, resizable, layout, widthStorageKey, columnState, onColumnStateChange, columnMenu, sort, defaultSort, onSortChange, height, mobileLayout, mobileBreakpoint, groupSeparator, summary, footer, stickyFooter, emptyState, loading, loadingRows, rowActions, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, isRowSelectable, }: TableLayoutProps<T>) => React.JSX.Element;
+export declare const TableLayout: <T>({ columns, data, getRowKey, rowBg, size, resizable, layout, widthStorageKey, columnState, onColumnStateChange, columnMenu, highlight, sort, defaultSort, onSortChange, height, mobileLayout, mobileBreakpoint, groupSeparator, summary, footer, stickyFooter, emptyState, loading, loadingRows, rowActions, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, isRowSelectable, }: TableLayoutProps<T>) => React.JSX.Element;

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

@@ -262,6 +262,15 @@ export interface TableLayoutProps<T> {
      * Muncul saat hover / saat salah satu item aktif.
      */
     columnMenu?: boolean;
+    /**
+     * Sorot (highlight) hasil pencarian: map `{ [columnKey]: query }`. Untuk kolom
+     * yang key-nya ada di map & sel-nya berupa **string accessor** (bukan custom
+     * `render`), substring yang cocok dibungkus `<mark>` inline (ellipsis tetap
+     * jalan). Query kosong = tak menyorot. Isi dari filter `text` per-kolom
+     * (`controls.getRaw(key)`) dan/atau global search (`params.search`). Untuk sel
+     * `render`, sorot manual via komponen `<Highlight>`.
+     */
+    highlight?: Record<string, string>;
     /**
      * Sort aktif (controlled). Kalau `onSortChange` diisi → mode server (TableLayout
      * tidak mengurutkan data sendiri, hanya emit). Tanpa `onSortChange` → client-side.

package/dist/components/index.d.ts

@@ -33,3 +33,4 @@ export * from './LayoutDialog';
 export * from './ImagePreview';
 export * from './SelectionActionBar';
 export * from './EntityCard';
+export * from './Highlight';