zaravand-ui 4.5.0 → 5.0.0

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

@@ -36,9 +36,10 @@ 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-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)]";
+export declare const sortIconClassName = "zui:h-4 zui:w-2.5";
 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 sortClearTooltipPrefixLabel = "\u062D\u0630\u0641 \u0645\u0631\u062A\u0628\u200C\u0633\u0627\u0632\u06CC";
+export declare const sortDefaultOrderLabel = "\u0628\u0627\u0632\u06AF\u0634\u062A \u0628\u0647 \u062A\u0631\u062A\u06CC\u0628 \u067E\u06CC\u0634\u200C\u0641\u0631\u0636";
 export declare const tablePersianDateFormatter: Intl.DateTimeFormat;

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

@@ -17,6 +17,16 @@ export type DynamicTableRow = Record<string, TableFieldValue | null | undefined>
 export type TableRowId = string | number;
 export type TablePagingMode = 'pagination' | 'infinite';
 export type TableSortDirection = 'asc' | 'desc';
+/**
+ * The column the table is currently sorted by. `null` (used wherever this type
+ * appears as `TableActiveSort | null`) means no column is sorted and rows keep
+ * their default order — the original `data` order locally, or the backend's
+ * own default order remotely.
+ */
+export type TableActiveSort = {
+    sortKey: string;
+    direction: TableSortDirection;
+};
 export type TablePaginationToken = number | 'ellipsis-start' | 'ellipsis-end';
 export type TableMutationHookResult = boolean | void | Promise<boolean | void>;
 export type TableRowActionInput = {
@@ -88,9 +98,9 @@ export type TableSchemaColumn = {
      */
     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.
+     * When true, renders a clickable sort toggle in this column's header that
+     * cycles ascending → descending → default (unsorted). See `TableSchema.sort`
+     * for controlling/observing the active sort key and direction.
      */
     sortable?: boolean;
 };
@@ -98,20 +108,24 @@ 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.
+     * tracks this itself. An empty string, `null` or `undefined` means no column
+     * is sorted (default order).
      */
-    sortKey?: string;
+    sortKey?: string | null;
     /**
      * The currently active sort direction. Only meaningful for remote sort.
+     * Ignored while `sortKey` is empty.
      */
-    sortDirection?: TableSortDirection;
+    sortDirection?: TableSortDirection | null;
     /**
      * 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`).
+     * the direction it should now sort by, or with `(null, null)` when the
+     * user clears the sort (third click on the same column) and the default
+     * order should be restored. 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;
+    onSortChange?: (sortKey: string | null, direction: TableSortDirection | null) => void;
 };
 export type TableSchemaPagination = {
     page: number;
@@ -231,6 +245,15 @@ export type TablePaginationControlsProps = {
     totalPages: number;
     onPageChange: (nextPage: number) => void;
 };
+export type TableSortToggleProps = {
+    columnLabel: string;
+    /**
+     * This column's active sort direction, or `undefined` when the table is not
+     * sorted by this column.
+     */
+    direction?: TableSortDirection;
+    onToggle: () => void;
+};
 export type TableEmptyStateProps = {
     colSpan: number;
     showSearchInput: 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, TableSortDirection } from './Table.interface';
+import type { DynamicTableRow, TableActiveSort, TablePaginationToken, TableRowId, TableRowIdResolver, TableSchemaColumn, TableSortDirection } from './Table.interface';
 export declare const ACTIONS_COLUMN_WIDTH_PX = 112;
 export declare function resolveColumnWidthPercentages(visibleColumns: TableSchemaColumn[], shouldShowRowNumbers: boolean, hasRowActions: boolean): {
     rowNumberColumnStyle: React.CSSProperties | undefined;
@@ -18,4 +18,16 @@ export declare function formatCellValue(value: unknown, column: TableSchemaColum
 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;
+/**
+ * Sort toggle cycle for a single header click: a different column starts at
+ * ascending, then the same column goes ascending → descending → default
+ * (unsorted, `null`).
+ */
+export declare function resolveNextSort(currentSort: TableActiveSort | null, clickedColumnKey: string): TableActiveSort | null;
+export declare function resolveAriaSort(direction: TableSortDirection | undefined): 'ascending' | 'descending' | 'none';
+/**
+ * Describes what the *next* click will do (not the current state), so the
+ * tooltip always matches the action the user is about to take.
+ */
+export declare function resolveSortToggleTooltipText(columnLabel: string, direction: TableSortDirection | undefined): string;
 export declare function replaceRowByIdentifier(rows: DynamicTableRow[], targetRowIndex: number, targetRowId: TableRowId | undefined, getRowId: TableRowIdResolver | undefined, nextRow: DynamicTableRow): DynamicTableRow[];

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

@@ -13,6 +13,10 @@ export declare const tableRowVariants: (props?: import("class-variance-authority
 export declare const tableHeadVariants: (props?: ({
     align?: "end" | "start" | "center" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tableSortToggleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tableSortArrowVariants: (props?: ({
+    emphasis?: "highlighted" | "idle" | "dimmed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableCellVariants: (props?: ({
     align?: "end" | "start" | "center" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,2 @@
+import type { TableSortToggleProps } from './Table.interface';
+export default function TableSortToggle({ columnLabel, direction, onToggle }: TableSortToggleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { TableSchemaColumn, TableSchemaSort, TableSortDirection, TableVisibleRow } from '../Table.interface';
+import type { TableActiveSort, TableSchemaColumn, TableSchemaSort, TableVisibleRow } from '../Table.interface';
 type UseTableSortInput = {
     rows: TableVisibleRow[];
     columns: TableSchemaColumn[];
@@ -6,8 +6,7 @@ type UseTableSortInput = {
 };
 type UseTableSortResult = {
     sortedRows: TableVisibleRow[];
-    activeSortKey: string | undefined;
-    activeSortDirection: TableSortDirection;
+    activeSort: TableActiveSort | null;
     isRemoteSort: boolean;
     handleSortToggle: (columnKey: string) => void;
 };