@pulog/component 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,550 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type FilterOperator = 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between' | 'in' | 'dateRange';
+type FilterType = 'search' | 'date' | 'dateRange' | 'select' | 'multiSelect' | 'checkbox' | 'range' | 'dateTree';
+interface FilterValue {
+    field: string;
+    operator: FilterOperator;
+    value: any;
+    type: FilterType;
+}
+interface FilterOption {
+    label: string;
+    value: string | number;
+}
+interface ColumnFilter {
+    id: string;
+    label: string;
+    type: FilterType;
+    operator?: FilterOperator;
+    options?: FilterOption[];
+    onSearch?: (query: string) => Promise<FilterOption[]>;
+    minSearchLength?: number;
+    autoApply?: boolean;
+    /** Memisahkan input pencarian dengan koma menjadi array saat lebih dari satu nilai. */
+    allowCommaSeparated?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    minDate?: string;
+    maxDate?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+}
+type SortOrder = 'asc' | 'desc' | null;
+interface SortState {
+    column: string | null;
+    order: SortOrder;
+}
+interface PaginationMeta {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    totalData: number;
+}
+interface DataTableResponse<T> {
+    status: number;
+    success: boolean;
+    message: string;
+    data: T[];
+    meta: {
+        pagination: PaginationMeta;
+    };
+}
+interface RowSelectionState {
+    [key: string]: boolean;
+}
+interface ColumnVisibilityState {
+    [key: string]: boolean;
+}
+type ColumnPinPosition = 'left' | 'right' | false;
+interface ColumnPinningState {
+    [key: string]: ColumnPinPosition;
+}
+interface ExpandedRowState {
+    [key: string]: boolean;
+}
+interface DataTableState$1<T> {
+    data: T[];
+    isLoading: boolean;
+    error: string | null;
+    filters: FilterValue[];
+    search?: {
+        query: string;
+        fields: string[];
+    };
+    sort: SortState;
+    pagination: PaginationMeta;
+    rowSelection: RowSelectionState;
+    columnVisibility: ColumnVisibilityState;
+    expandedRows: ExpandedRowState;
+    paginationMode: 'traditional' | 'infinite';
+}
+
+interface DataTableColumn<T> {
+    id: string;
+    header: string | React.ReactNode;
+    accessor?: keyof T | ((row: T) => React.ReactNode);
+    cell?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterConfig?: ColumnFilter | ColumnFilter[];
+    width?: string | number;
+    className?: string | ((row: T) => string);
+    headerClassName?: string;
+    /** Default pin state — the user can still change this at runtime via the header's pin menu unless `pinnable` is false. */
+    sticky?: boolean | 'left' | 'right';
+    copyable?: boolean;
+    copyValue?: (row: any) => string;
+    /** Opt out of drag-to-resize for this column when the table has `enableColumnResizing`. */
+    resizable?: boolean;
+    /** Opt out of the pin/unpin header menu for this column when the table has `enableColumnPinning`. */
+    pinnable?: boolean;
+}
+interface DataTableState {
+    pageIndex: number;
+    pageSize: number;
+    sort: SortState;
+    filters: FilterValue[];
+    search?: {
+        query: string;
+        fields: string[];
+    };
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    error?: string | null;
+    rowKey: keyof T;
+    onRowClick?: (row: T) => void;
+    showSelection?: boolean;
+    showExpand?: boolean;
+    stickySelection?: boolean;
+    stickyExpand?: boolean;
+    showRowNumber?: boolean;
+    stickyRowNumber?: boolean;
+    expandContent?: (row: T) => React.ReactNode;
+    onExpandLoad?: (row: T) => Promise<any>;
+    expandLoadContent?: (row: T, data: any, state: {
+        isLoading: boolean;
+        error: string | null;
+    }) => React.ReactNode;
+    paginationMode?: 'traditional' | 'infinite';
+    showFilters?: boolean;
+    showSearch?: boolean;
+    searchFields?: string[];
+    searchPlaceholder?: string;
+    /** Cap, not a fixed size — the table shrinks to fit its rows and only scrolls once row content would exceed this. */
+    tableHeight?: string | number;
+    infiniteScrollHeight?: string | number;
+    /** Initial rows-per-page — also the only place this is configured (seeds internal state on mount). */
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    placeholder?: string;
+    manualPagination?: boolean;
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    totalCount?: number;
+    onStateChange?: (state: DataTableState) => void;
+    emptyStateMessage?: string;
+    labelSelection?: string;
+    toolbarLeft?: React.ReactNode;
+    toolbarRight?: React.ReactNode;
+    renderSelectionCell?: (row: T, rowId: string, defaultCheckbox: React.ReactNode) => React.ReactNode;
+    rowClassName?: string;
+    selectableTotalCount?: number;
+    onSelectAllAttempt?: (count: number, confirm: () => void) => void;
+    selectionMode?: 'checkbox' | 'radio';
+    showColumnVisibility?: boolean;
+    enableColumnResizing?: boolean;
+    defaultColumnVisibility?: ColumnVisibilityState;
+    enableColumnPinning?: boolean;
+    defaultColumnPinning?: ColumnPinningState;
+}
+
+/**
+ * Self-contained data table: owns its filter/pagination/selection/sort/
+ * column-visibility state internally, so callers never render a separate
+ * provider. `pageSize`, `selectionMode` and `defaultColumnVisibility` seed
+ * that internal state on mount and are the single source of truth for it —
+ * there is no separate provider-level prop to keep in sync.
+ *
+ * Escape hatch: if a sibling component (e.g. a custom toolbar button above
+ * the table) needs to read the same selection/filter state via
+ * `useSelection()` / `useFilters()` etc., wrap both in an explicit
+ * `<DataTableProvider>` yourself — `<DataTable>` detects that ambient
+ * provider and reuses it instead of creating a disconnected nested one.
+ */
+declare function DataTable<T extends Record<string, any>>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Internal to `<DataTable>` — it renders this itself, seeded from its own
+ * props, so page code should never need to render `DataTableProvider`
+ * directly. Kept as a separate component only because `DataTable`'s
+ * generic type parameter needs a plain (non-generic) child to wrap.
+ */
+interface DataTableProviderProps {
+    children: React.ReactNode;
+    defaultColumnVisibility?: ColumnVisibilityState;
+    defaultColumnPinning?: ColumnPinningState;
+    selectionMode?: 'checkbox' | 'radio';
+    defaultPageSize?: number;
+}
+declare function DataTableProvider({ children, defaultColumnVisibility, defaultColumnPinning, selectionMode, defaultPageSize, }: DataTableProviderProps): react_jsx_runtime.JSX.Element;
+
+interface FilterContextType {
+    filters: FilterValue[];
+    addFilter: (filter: FilterValue) => void;
+    updateFilter: (fieldId: string, newFilter: Partial<FilterValue>) => void;
+    removeFilter: (fieldId: string, value?: any) => void;
+    clearFilters: () => void;
+    clearFieldFilters: (fields: string[]) => void;
+    hasActiveFilters: boolean;
+    getFieldFilters: (field: string) => FilterValue[];
+}
+declare function FilterProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useFilters(): FilterContextType;
+
+interface PaginationContextType {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    totalData: number;
+    paginationMode: 'traditional' | 'infinite';
+    goToPage: (pageIndex: number) => void;
+    nextPage: () => void;
+    previousPage: () => void;
+    setPageSize: (size: number) => void;
+    updatePaginationMeta: (meta: PaginationMeta) => void;
+    updatePaginationCount: (meta: Omit<PaginationMeta, 'pageSize'>) => void;
+    setPaginationMode: (mode: 'traditional' | 'infinite') => void;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+}
+declare function PaginationProvider({ children, defaultPageSize, }: {
+    children: React.ReactNode;
+    defaultPageSize?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function usePagination(): PaginationContextType;
+
+interface SelectionContextType {
+    rowSelection: RowSelectionState;
+    expandedRows: ExpandedRowState;
+    isSelectAll: boolean;
+    toggleRow: (rowId: string, currentPageRowIds?: string[]) => void;
+    toggleAll: (rowIds: string[], selected: boolean, total?: number) => void;
+    selectRows: (rowIds: string[]) => void;
+    deselectRows: (rowIds: string[]) => void;
+    clearSelection: () => void;
+    isRowSelected: (rowId: string) => boolean;
+    selectedCount: number;
+    toggleExpanded: (rowId: string) => void;
+    isRowExpanded: (rowId: string) => boolean;
+    expandedCount: number;
+    getSelectedRowIds: () => string[];
+    clearSelectAll: () => void;
+    selectionMode: 'checkbox' | 'radio';
+}
+declare function SelectionProvider({ children, selectionMode: propSelectionMode, }: {
+    children: React.ReactNode;
+    selectionMode?: 'checkbox' | 'radio';
+}): react_jsx_runtime.JSX.Element;
+declare function useSelection(): SelectionContextType;
+
+interface SortContextType {
+    sort: SortState;
+    setSort: (column: string | null, order?: SortOrder) => void;
+    toggleSort: (column: string) => void;
+    clearSort: () => void;
+    isSorted: (column: string) => boolean;
+    getSortOrder: (column: string) => SortOrder;
+}
+declare function SortProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useSort(): SortContextType;
+
+interface ColumnVisibilityContextType {
+    visibility: ColumnVisibilityState;
+    toggleColumn: (columnId: string) => void;
+    showColumn: (columnId: string) => void;
+    hideColumn: (columnId: string) => void;
+    isColumnVisible: (columnId: string) => boolean;
+    showAllColumns: () => void;
+    hideAllColumns: () => void;
+    setVisibility: (visibility: ColumnVisibilityState) => void;
+}
+declare function ColumnVisibilityProvider({ children, defaultVisibility, }: {
+    children: React.ReactNode;
+    defaultVisibility?: ColumnVisibilityState;
+}): react_jsx_runtime.JSX.Element;
+declare function useColumnVisibility(): ColumnVisibilityContextType;
+
+interface ColumnPinningContextType {
+    pinning: ColumnPinningState;
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    unpinColumn: (columnId: string) => void;
+    getColumnPin: (columnId: string) => ColumnPinPosition | undefined;
+    setPinning: (pinning: ColumnPinningState) => void;
+}
+declare function ColumnPinningProvider({ children, defaultPinning, }: {
+    children: React.ReactNode;
+    defaultPinning?: ColumnPinningState;
+}): react_jsx_runtime.JSX.Element;
+declare function useColumnPinning(): ColumnPinningContextType;
+
+interface SearchFilterProps {
+    field: string;
+    label: string;
+    placeholder?: string;
+    minSearchLength?: number;
+    autoApply?: boolean;
+    allowCommaSeparated?: boolean;
+    onClose?: () => void;
+}
+declare function SearchFilter({ field, label, placeholder, minSearchLength, autoApply, allowCommaSeparated, onClose, }: SearchFilterProps): react_jsx_runtime.JSX.Element;
+
+interface DateFilterProps {
+    field: string;
+    label: string;
+    onClose?: () => void;
+    minDate?: string;
+    maxDate?: string;
+}
+declare function DateFilter({ field, onClose, minDate, maxDate, }: DateFilterProps): react_jsx_runtime.JSX.Element;
+
+interface DateRangeFilterProps {
+    field: string;
+    label: string;
+    onClose?: () => void;
+    showReset?: boolean;
+    minDate?: string;
+    maxDate?: string;
+}
+declare function DateRangeFilter({ field, onClose, showReset, minDate, maxDate, }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFilterProps {
+    field: string;
+    label: string;
+    options: FilterOption[];
+    placeholder?: string;
+    onClose?: () => void;
+}
+declare function SelectFilter({ field, options, placeholder, onClose, }: SelectFilterProps): react_jsx_runtime.JSX.Element;
+
+interface MultiSelectFilterProps {
+    field: string;
+    label: string;
+    options: FilterOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    minSearchLength?: number;
+    onClose?: () => void;
+    onSearch?: (query: string) => Promise<FilterOption[]>;
+    /** Teks pencarian terakhir (dipulihkan oleh parent yang tidak ikut unmount saat popover ditutup) */
+    initialSearch?: string;
+    /** Dipanggil setiap kali teks pencarian berubah, supaya parent bisa mempertahankannya antar buka/tutup popover */
+    onSearchChange?: (value: string) => void;
+}
+declare function MultiSelectFilter({ field, options, placeholder, searchPlaceholder, minSearchLength, onClose, onSearch, initialSearch, onSearchChange, }: MultiSelectFilterProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxFilterProps {
+    field: string;
+    label: string;
+}
+declare function CheckboxFilter({ field, label }: CheckboxFilterProps): react_jsx_runtime.JSX.Element;
+
+interface RangeFilterProps {
+    field: string;
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare function RangeFilter({ field, label, min, max, step, }: RangeFilterProps): react_jsx_runtime.JSX.Element;
+
+interface FilterPanelProps {
+    columns: ColumnFilter[];
+    onClose?: () => void;
+}
+declare function FilterPanel({ columns, onClose }: FilterPanelProps): react_jsx_runtime.JSX.Element;
+
+interface TraditionalPaginationProps {
+    pageSizeOptions?: number[];
+}
+declare function TraditionalPagination({ pageSizeOptions, }: TraditionalPaginationProps): react_jsx_runtime.JSX.Element;
+
+interface InfiniteScrollPaginationProps {
+    isLoading?: boolean;
+    onLoadMore?: () => void;
+}
+declare function InfiniteScrollPagination({ isLoading, onLoadMore, }: InfiniteScrollPaginationProps): react_jsx_runtime.JSX.Element;
+
+interface RowCheckboxProps {
+    rowId: string;
+    currentPageRowIds?: string[];
+}
+declare function RowCheckbox({ rowId, currentPageRowIds }: RowCheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface SelectAllCheckboxProps {
+    rowIds: string[];
+    totalCount?: number;
+    onSelectAllAttempt?: (count: number, confirm: () => void) => void;
+}
+declare function SelectAllCheckbox({ rowIds, totalCount, onSelectAllAttempt }: SelectAllCheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface ExpandableRowProps {
+    rowId: string;
+}
+declare function ExpandableRow({ rowId }: ExpandableRowProps): react_jsx_runtime.JSX.Element;
+
+interface SelectionSummaryProps {
+    onAction?: (selectedIds: string[]) => void;
+    actionLabel?: string;
+}
+declare function SelectionSummary({ onAction, actionLabel, }: SelectionSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface ColumnPinMenuProps {
+    pin: ColumnPinPosition;
+    onPin: (side: 'left' | 'right') => void;
+    onUnpin: () => void;
+}
+declare function ColumnPinMenu({ pin, onPin, onUnpin }: ColumnPinMenuProps): react_jsx_runtime.JSX.Element;
+
+interface ColumnVisibilityPanelProps {
+    columns: DataTableColumn<any>[];
+}
+declare function ColumnVisibilityPanel({ columns }: ColumnVisibilityPanelProps): react_jsx_runtime.JSX.Element;
+
+interface ColumnHeaderFilterProps {
+    filterConfig: ColumnFilter | ColumnFilter[];
+}
+declare function ColumnHeaderFilter({ filterConfig, }: ColumnHeaderFilterProps): react_jsx_runtime.JSX.Element;
+
+interface DateTreeFilterProps {
+    field: string;
+    label: string;
+    options: FilterOption[];
+    onClose?: () => void;
+}
+declare function DateTreeFilter({ field, options, onClose }: DateTreeFilterProps): react_jsx_runtime.JSX.Element;
+
+interface QueryParams {
+    pageIndex: number;
+    pageSize: number;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    search?: string;
+    searchFields?: string[];
+    [key: string]: any;
+}
+interface SearchQuery {
+    query: string;
+    fields: string[];
+}
+/**
+ * Build query parameters untuk API request
+ */
+declare function buildQueryParams(pageIndex: number, pageSize: number, filters: FilterValue[], sort: SortState, additionalParams?: Record<string, any>, search?: SearchQuery): QueryParams;
+/**
+ * Convert query params to URL search params
+ */
+declare function paramsToURLSearchParams(params: QueryParams): URLSearchParams;
+/**
+ * Build URL dengan query parameters
+ */
+declare function buildURL(baseURL: string, params: QueryParams): string;
+
+declare function parseDateValue(value: unknown): Date | null;
+declare function formatDateKey(value: unknown): string | null;
+/**
+ * Validate if a filter value is valid
+ */
+declare function isValidFilterValue(filter: FilterValue): boolean;
+/**
+ * Apply filters to data (client-side filtering)
+ */
+declare function applyFilters<T extends Record<string, any>>(data: T[], filters: FilterValue[]): T[];
+/**
+ * Group filters by field for display purposes
+ */
+declare function groupFiltersByField(filters: FilterValue[]): Record<string, FilterValue[]>;
+/**
+ * Remove filter by field and optionally by specific value
+ */
+declare function removeFilter(filters: FilterValue[], fieldToRemove: string, valueToRemove?: any): FilterValue[];
+/**
+ * Clear all filters for specific field
+ */
+declare function clearFieldFilters(filters: FilterValue[], fieldsToClear: string[]): FilterValue[];
+/**
+ * Check if any filters are active
+ */
+declare function hasActiveFilters(filters: FilterValue[]): boolean;
+
+/** i18next namespace used by every `useTranslation` call in this package. */
+declare const DATATABLE_NS = "datatable";
+/** Default English strings for the `datatable` namespace. */
+declare const datatableEn: {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    copyTooltip: string;
+    search: string;
+    loadFailed: string;
+    pagination: {
+        previous: string;
+        next: string;
+        page: string;
+        of: string;
+        showing: string;
+        to: string;
+        from: string;
+        results: string;
+        rows: string;
+        rowsPerPage: string;
+    };
+    filters: {
+        dateTree: {
+            inputPlaceholder: string;
+            dataNotFound: string;
+            notFound: string;
+        };
+        multiSelect: {
+            selectAll: string;
+            unselectAll: string;
+            searchPlaceholder: string;
+            result: string;
+            showing: string;
+            dataNotFound: string;
+            selected: string;
+        };
+        select: {
+            selectAll: string;
+            unselectAll: string;
+            searchPlaceholder: string;
+            dataNotFound: string;
+        };
+    };
+    columnPin: {
+        pinLeft: string;
+        pinRight: string;
+        unpin: string;
+        pinned: string;
+        pinning: string;
+        unpinning: string;
+    };
+    column: string;
+    showColumns: string;
+    of: string;
+    column_plural: string;
+    totalSelected: string;
+    clearSelections: string;
+    selectDateRange: string;
+};
+
+export { CheckboxFilter, ColumnHeaderFilter, ColumnPinMenu, ColumnPinningProvider, ColumnVisibilityPanel, ColumnVisibilityProvider, DATATABLE_NS, DataTable, DataTableProvider, DateFilter, DateRangeFilter, DateTreeFilter, ExpandableRow, FilterPanel, FilterProvider, InfiniteScrollPagination, MultiSelectFilter, PaginationProvider, RangeFilter, RowCheckbox, SearchFilter, SelectAllCheckbox, SelectFilter, SelectionProvider, SelectionSummary, SortProvider, TraditionalPagination, applyFilters, buildQueryParams, buildURL, clearFieldFilters, datatableEn, formatDateKey, groupFiltersByField, hasActiveFilters, isValidFilterValue, paramsToURLSearchParams, parseDateValue, removeFilter, useColumnPinning, useColumnVisibility, useFilters, usePagination, useSelection, useSort };
+export type { ColumnFilter, ColumnVisibilityState, DataTableColumn, DataTableProps, DataTableState$1 as DataTableQueryState, DataTableResponse, DataTableState, ExpandedRowState, FilterOperator, FilterOption, FilterType, FilterValue, PaginationMeta, RowSelectionState, SortOrder, SortState };