zaravand-ui 3.0.3 → 3.1.1

package/dist/components/Table/Table.constants.d.ts

@@ -33,4 +33,9 @@ export declare const infiniteReadyStatusLabel = "\u0628\u0631\u0627\u06CC \u0628
 export declare const infiniteCompletedStatusLabel = "\u0647\u0645\u0647 \u0631\u062F\u06CC\u0641\u200C\u0647\u0627 \u0646\u0645\u0627\u06CC\u0634 \u062F\u0627\u062F\u0647 \u0634\u062F.";
 export declare const defaultLoadingRowsCount = 6;
 export declare const maxLoadingRowsCount = 12;
+export declare const sortIconClassName = "zui:size-4";
+export declare const sortToggleButtonClassName = "zui:inline-flex zui:cursor-pointer zui:items-center zui:justify-center zui:rounded zui:border-0 zui:bg-transparent zui:p-0 zui:text-[var(--zui-theme-text-primary)] zui:transition-transform zui:duration-200 zui:ease-out zui:hover:scale-125 zui:focus-visible:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-theme-action-secondary)]";
+export declare const sortAscendingLabel = "\u0635\u0639\u0648\u062F\u06CC";
+export declare const sortDescendingLabel = "\u0646\u0632\u0648\u0644\u06CC";
+export declare const sortTooltipPrefixLabel = "\u0645\u0631\u062A\u0628\u200C\u0633\u0627\u0632\u06CC \u0628\u0631 \u0627\u0633\u0627\u0633";
 export declare const tablePersianDateFormatter: Intl.DateTimeFormat;

package/dist/components/Table/Table.d.ts

@@ -24,6 +24,8 @@ declare const TableHead: React.ForwardRefExoticComponent<{
     className?: string;
     children?: React.ReactNode;
     align?: import("./Table.interface").TableColumnAlign;
+} & {
+    ariaSort?: "ascending" | "descending" | "none";
 } & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<{
     className?: string;

package/dist/components/Table/Table.interface.d.ts

@@ -16,6 +16,7 @@ export type TableFieldValue = TableFieldValueByType[TableFieldType];
 export type DynamicTableRow = Record<string, TableFieldValue | null | undefined>;
 export type TableRowId = string | number;
 export type TablePagingMode = 'pagination' | 'infinite';
+export type TableSortDirection = 'asc' | 'desc';
 export type TablePaginationToken = number | 'ellipsis-start' | 'ellipsis-end';
 export type TableMutationHookResult = boolean | void | Promise<boolean | void>;
 export type TableRowActionInput = {
@@ -71,6 +72,31 @@ export type TableSchemaColumn = {
      * actions columns, which are always center-aligned.
      */
     align?: TableColumnAlign;
+    /**
+     * When true, renders a clickable sort-toggle chevron in this column's
+     * header. See `TableSchema.sort` for controlling/observing the active
+     * sort key and direction.
+     */
+    sortable?: boolean;
+};
+export type TableSchemaSort = {
+    /**
+     * The currently active sort column key. Only meaningful for remote sort
+     * (when `onSortChange` is provided) — in local/uncontrolled sort the table
+     * tracks this itself.
+     */
+    sortKey?: string;
+    /**
+     * The currently active sort direction. Only meaningful for remote sort.
+     */
+    sortDirection?: TableSortDirection;
+    /**
+     * Provided for remote sorting: called with the clicked column's key and
+     * the direction it should now sort by. When provided, the table stops
+     * sorting rows itself and expects the parent to fetch/re-order `data`
+     * accordingly (same contract as `TableSchemaPagination.onPageChange`).
+     */
+    onSortChange?: (sortKey: string, direction: TableSortDirection) => void;
 };
 export type TableSchemaPagination = {
     page: number;
@@ -93,6 +119,7 @@ export type TableSchema = {
     columns: TableSchemaColumn[];
     searchable?: boolean;
     pagination?: TableSchemaPagination;
+    sort?: TableSchemaSort;
 };
 export type TableVisibleRow = {
     row: DynamicTableRow;
@@ -144,7 +171,9 @@ type TableCellElementProps = {
     children?: React.ReactNode;
     align?: TableColumnAlign;
 };
-export type TableHeadProps = TableCellElementProps;
+export type TableHeadProps = TableCellElementProps & {
+    ariaSort?: 'ascending' | 'descending' | 'none';
+};
 export type TableCellProps = TableCellElementProps;
 export type TablePaginationControlsProps = {
     shouldRenderInfiniteMode: boolean;

package/dist/components/Table/Table.utils.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { DynamicTableRow, TablePaginationToken, TableRowId, TableRowIdResolver, TableSchemaColumn } from './Table.interface';
+import type { DynamicTableRow, TablePaginationToken, TableRowId, TableRowIdResolver, TableSchemaColumn, TableSortDirection } from './Table.interface';
 export declare function resolveColumnWidthPercentages(visibleColumns: TableSchemaColumn[], shouldShowRowNumbers: boolean, hasRowActions: boolean): {
     rowNumberColumnStyle: React.CSSProperties | undefined;
     columnStyleByKey: Record<string, React.CSSProperties>;
@@ -16,4 +16,5 @@ export declare function resolvePlaceholder(column: TableSchemaColumn): string;
 export declare function formatCellValue(value: unknown, column: TableSchemaColumn): string;
 export declare function resolveSafeRowId(row: DynamicTableRow, index: number, getRowId?: TableRowIdResolver): TableRowId | undefined;
 export declare function findRowIndexByIdentifier(rows: DynamicTableRow[], targetRowIndex: number, targetRowId: TableRowId | undefined, getRowId?: TableRowIdResolver): number;
+export declare function compareTableRowsByColumn(rowA: DynamicTableRow, rowB: DynamicTableRow, column: TableSchemaColumn, direction: TableSortDirection): number;
 export declare function replaceRowByIdentifier(rows: DynamicTableRow[], targetRowIndex: number, targetRowId: TableRowId | undefined, getRowId: TableRowIdResolver | undefined, nextRow: DynamicTableRow): DynamicTableRow[];

package/dist/components/Table/hooks/useTablePagination.d.ts

@@ -7,6 +7,7 @@ type UseTablePaginationInput = {
     loading: boolean;
     isRowActionBusy: boolean;
     searchKey: string;
+    sortKey: string;
     maxVisibleRowsBeforeScroll?: number;
 };
 type UseTablePaginationResult = {
@@ -33,5 +34,5 @@ type UseTablePaginationResult = {
     handleTableScrollViewport: (event: React.UIEvent<HTMLDivElement>) => void;
     isInfiniteRequestPending: boolean;
 };
-export declare function useTablePagination({ hasChildren, filteredRows, paginationConfig, loading, isRowActionBusy, searchKey, maxVisibleRowsBeforeScroll, }: UseTablePaginationInput): UseTablePaginationResult;
+export declare function useTablePagination({ hasChildren, filteredRows, paginationConfig, loading, isRowActionBusy, searchKey, sortKey, maxVisibleRowsBeforeScroll, }: UseTablePaginationInput): UseTablePaginationResult;
 export {};

package/dist/components/Table/hooks/useTableSort.d.ts

@@ -0,0 +1,15 @@
+import type { TableSchemaColumn, TableSchemaSort, TableSortDirection, TableVisibleRow } from '../Table.interface';
+type UseTableSortInput = {
+    rows: TableVisibleRow[];
+    columns: TableSchemaColumn[];
+    sortConfig?: TableSchemaSort;
+};
+type UseTableSortResult = {
+    sortedRows: TableVisibleRow[];
+    activeSortKey: string | undefined;
+    activeSortDirection: TableSortDirection;
+    isRemoteSort: boolean;
+    handleSortToggle: (columnKey: string) => void;
+};
+export declare function useTableSort({ rows, columns, sortConfig }: UseTableSortInput): UseTableSortResult;
+export {};