zaravand-ui 4.5.1 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -36,9 +36,10 @@ export declare const infiniteReadyStatusLabel = "\u0628\u0631\u0627\u06CC \u0628
36
36
  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.";
37
37
  export declare const defaultLoadingRowsCount = 6;
38
38
  export declare const maxLoadingRowsCount = 12;
39
- export declare const sortIconClassName = "zui:size-4";
40
- 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-color-surface)] 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)]";
39
+ export declare const sortIconClassName = "zui:h-4 zui:w-2.5";
41
40
  export declare const sortAscendingLabel = "\u0635\u0639\u0648\u062F\u06CC";
42
41
  export declare const sortDescendingLabel = "\u0646\u0632\u0648\u0644\u06CC";
43
42
  export declare const sortTooltipPrefixLabel = "\u0645\u0631\u062A\u0628\u200C\u0633\u0627\u0632\u06CC \u0628\u0631 \u0627\u0633\u0627\u0633";
43
+ export declare const sortClearTooltipPrefixLabel = "\u062D\u0630\u0641 \u0645\u0631\u062A\u0628\u200C\u0633\u0627\u0632\u06CC";
44
+ export declare const sortDefaultOrderLabel = "\u0628\u0627\u0632\u06AF\u0634\u062A \u0628\u0647 \u062A\u0631\u062A\u06CC\u0628 \u067E\u06CC\u0634\u200C\u0641\u0631\u0636";
44
45
  export declare const tablePersianDateFormatter: Intl.DateTimeFormat;
@@ -17,6 +17,16 @@ export type DynamicTableRow = Record<string, TableFieldValue | null | undefined>
17
17
  export type TableRowId = string | number;
18
18
  export type TablePagingMode = 'pagination' | 'infinite';
19
19
  export type TableSortDirection = 'asc' | 'desc';
20
+ /**
21
+ * The column the table is currently sorted by. `null` (used wherever this type
22
+ * appears as `TableActiveSort | null`) means no column is sorted and rows keep
23
+ * their default order — the original `data` order locally, or the backend's
24
+ * own default order remotely.
25
+ */
26
+ export type TableActiveSort = {
27
+ sortKey: string;
28
+ direction: TableSortDirection;
29
+ };
20
30
  export type TablePaginationToken = number | 'ellipsis-start' | 'ellipsis-end';
21
31
  export type TableMutationHookResult = boolean | void | Promise<boolean | void>;
22
32
  export type TableRowActionInput = {
@@ -88,9 +98,9 @@ export type TableSchemaColumn = {
88
98
  */
89
99
  align?: TableColumnAlign;
90
100
  /**
91
- * When true, renders a clickable sort-toggle chevron in this column's
92
- * header. See `TableSchema.sort` for controlling/observing the active
93
- * sort key and direction.
101
+ * When true, renders a clickable sort toggle in this column's header that
102
+ * cycles ascending → descending → default (unsorted). See `TableSchema.sort`
103
+ * for controlling/observing the active sort key and direction.
94
104
  */
95
105
  sortable?: boolean;
96
106
  };
@@ -98,20 +108,24 @@ export type TableSchemaSort = {
98
108
  /**
99
109
  * The currently active sort column key. Only meaningful for remote sort
100
110
  * (when `onSortChange` is provided) — in local/uncontrolled sort the table
101
- * tracks this itself.
111
+ * tracks this itself. An empty string, `null` or `undefined` means no column
112
+ * is sorted (default order).
102
113
  */
103
- sortKey?: string;
114
+ sortKey?: string | null;
104
115
  /**
105
116
  * The currently active sort direction. Only meaningful for remote sort.
117
+ * Ignored while `sortKey` is empty.
106
118
  */
107
- sortDirection?: TableSortDirection;
119
+ sortDirection?: TableSortDirection | null;
108
120
  /**
109
121
  * Provided for remote sorting: called with the clicked column's key and
110
- * the direction it should now sort by. When provided, the table stops
111
- * sorting rows itself and expects the parent to fetch/re-order `data`
112
- * accordingly (same contract as `TableSchemaPagination.onPageChange`).
122
+ * the direction it should now sort by, or with `(null, null)` when the
123
+ * user clears the sort (third click on the same column) and the default
124
+ * order should be restored. When provided, the table stops sorting rows
125
+ * itself and expects the parent to fetch/re-order `data` accordingly (same
126
+ * contract as `TableSchemaPagination.onPageChange`).
113
127
  */
114
- onSortChange?: (sortKey: string, direction: TableSortDirection) => void;
128
+ onSortChange?: (sortKey: string | null, direction: TableSortDirection | null) => void;
115
129
  };
116
130
  export type TableSchemaPagination = {
117
131
  page: number;
@@ -150,6 +164,14 @@ export interface TableProps {
150
164
  isMutating?: boolean;
151
165
  stickyHeaderOnScroll?: boolean;
152
166
  maxVisibleRowsBeforeScroll?: number;
167
+ /**
168
+ * Whether the user may switch the table into infinite-scroll mode.
169
+ * Defaults to `true` (both modes, with the pagination/infinite toggle
170
+ * button). When `false`, the toggle button is not rendered and the table
171
+ * always stays in regular pagination mode — so `onPageChange` is only ever
172
+ * called with `mode: "pagination"` and `onLoadMore` is never called.
173
+ */
174
+ allowInfiniteMode?: boolean;
153
175
  schema: TableSchema;
154
176
  data: DynamicTableRow[];
155
177
  setData: React.Dispatch<React.SetStateAction<DynamicTableRow[]>>;
@@ -231,6 +253,15 @@ export type TablePaginationControlsProps = {
231
253
  totalPages: number;
232
254
  onPageChange: (nextPage: number) => void;
233
255
  };
256
+ export type TableSortToggleProps = {
257
+ columnLabel: string;
258
+ /**
259
+ * This column's active sort direction, or `undefined` when the table is not
260
+ * sorted by this column.
261
+ */
262
+ direction?: TableSortDirection;
263
+ onToggle: () => void;
264
+ };
234
265
  export type TableEmptyStateProps = {
235
266
  colSpan: number;
236
267
  showSearchInput: boolean;
@@ -1,5 +1,5 @@
1
1
  import type * as React from 'react';
2
- import type { DynamicTableRow, TablePaginationToken, TableRowId, TableRowIdResolver, TableSchemaColumn, TableSortDirection } from './Table.interface';
2
+ import type { DynamicTableRow, TableActiveSort, TablePaginationToken, TableRowId, TableRowIdResolver, TableSchemaColumn, TableSortDirection } from './Table.interface';
3
3
  export declare const ACTIONS_COLUMN_WIDTH_PX = 112;
4
4
  export declare function resolveColumnWidthPercentages(visibleColumns: TableSchemaColumn[], shouldShowRowNumbers: boolean, hasRowActions: boolean): {
5
5
  rowNumberColumnStyle: React.CSSProperties | undefined;
@@ -18,4 +18,16 @@ export declare function formatCellValue(value: unknown, column: TableSchemaColum
18
18
  export declare function resolveSafeRowId(row: DynamicTableRow, index: number, getRowId?: TableRowIdResolver): TableRowId | undefined;
19
19
  export declare function findRowIndexByIdentifier(rows: DynamicTableRow[], targetRowIndex: number, targetRowId: TableRowId | undefined, getRowId?: TableRowIdResolver): number;
20
20
  export declare function compareTableRowsByColumn(rowA: DynamicTableRow, rowB: DynamicTableRow, column: TableSchemaColumn, direction: TableSortDirection): number;
21
+ /**
22
+ * Sort toggle cycle for a single header click: a different column starts at
23
+ * ascending, then the same column goes ascending → descending → default
24
+ * (unsorted, `null`).
25
+ */
26
+ export declare function resolveNextSort(currentSort: TableActiveSort | null, clickedColumnKey: string): TableActiveSort | null;
27
+ export declare function resolveAriaSort(direction: TableSortDirection | undefined): 'ascending' | 'descending' | 'none';
28
+ /**
29
+ * Describes what the *next* click will do (not the current state), so the
30
+ * tooltip always matches the action the user is about to take.
31
+ */
32
+ export declare function resolveSortToggleTooltipText(columnLabel: string, direction: TableSortDirection | undefined): string;
21
33
  export declare function replaceRowByIdentifier(rows: DynamicTableRow[], targetRowIndex: number, targetRowId: TableRowId | undefined, getRowId: TableRowIdResolver | undefined, nextRow: DynamicTableRow): DynamicTableRow[];
@@ -13,6 +13,10 @@ export declare const tableRowVariants: (props?: import("class-variance-authority
13
13
  export declare const tableHeadVariants: (props?: ({
14
14
  align?: "end" | "start" | "center" | null | undefined;
15
15
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
16
+ export declare const tableSortToggleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
17
+ export declare const tableSortArrowVariants: (props?: ({
18
+ emphasis?: "highlighted" | "idle" | "dimmed" | null | undefined;
19
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
16
20
  export declare const tableCellVariants: (props?: ({
17
21
  align?: "end" | "start" | "center" | null | undefined;
18
22
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -0,0 +1,2 @@
1
+ import type { TableSortToggleProps } from './Table.interface';
2
+ export default function TableSortToggle({ columnLabel, direction, onToggle }: TableSortToggleProps): import("react/jsx-runtime").JSX.Element;
@@ -9,6 +9,7 @@ type UseTablePaginationInput = {
9
9
  searchKey: string;
10
10
  sortKey: string;
11
11
  maxVisibleRowsBeforeScroll?: number;
12
+ allowInfiniteMode: boolean;
12
13
  };
13
14
  type UseTablePaginationResult = {
14
15
  pagingMode: TablePagingMode;
@@ -33,5 +34,5 @@ type UseTablePaginationResult = {
33
34
  handleTableScrollViewport: (event: React.UIEvent<HTMLDivElement>) => void;
34
35
  isInfiniteRequestPending: boolean;
35
36
  };
36
- export declare function useTablePagination({ hasChildren, filteredRows, paginationConfig, loading, isRowActionBusy, searchKey, sortKey, maxVisibleRowsBeforeScroll, }: UseTablePaginationInput): UseTablePaginationResult;
37
+ export declare function useTablePagination({ hasChildren, filteredRows, paginationConfig, loading, isRowActionBusy, searchKey, sortKey, maxVisibleRowsBeforeScroll, allowInfiniteMode, }: UseTablePaginationInput): UseTablePaginationResult;
37
38
  export {};
@@ -1,4 +1,4 @@
1
- import type { TableSchemaColumn, TableSchemaSort, TableSortDirection, TableVisibleRow } from '../Table.interface';
1
+ import type { TableActiveSort, TableSchemaColumn, TableSchemaSort, TableVisibleRow } from '../Table.interface';
2
2
  type UseTableSortInput = {
3
3
  rows: TableVisibleRow[];
4
4
  columns: TableSchemaColumn[];
@@ -6,8 +6,7 @@ type UseTableSortInput = {
6
6
  };
7
7
  type UseTableSortResult = {
8
8
  sortedRows: TableVisibleRow[];
9
- activeSortKey: string | undefined;
10
- activeSortDirection: TableSortDirection;
9
+ activeSort: TableActiveSort | null;
11
10
  isRemoteSort: boolean;
12
11
  handleSortToggle: (columnKey: string) => void;
13
12
  };