zaravand-ui 3.0.2 → 3.1.0

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

@@ -10,8 +10,8 @@ export declare const deleteButtonLabel = "\u062D\u0630\u0641";
 export declare const actionIconClassName = "zui:size-4";
 export declare const pagingToggleIconClassName = "zui:size-6";
 export declare const rowActionButtonClassName = "zui:cursor-pointer zui:border-0 zui:bg-transparent zui:shadow-none zui:hover:bg-transparent zui:hover:shadow-none zui:active:bg-transparent zui:focus-visible:ring-0 zui:disabled:cursor-not-allowed";
-export declare const actionsColumnClassName = "zui:px-3 zui:text-center";
-export declare const rowNumberColumnClassName = "zui:px-3 zui:text-center";
+export declare const actionsColumnClassName = "zui:px-3";
+export declare const rowNumberColumnClassName = "zui:px-3";
 export declare const searchInputPlaceholder = "\u062C\u0633\u062A\u062C\u0648 \u06A9\u0646\u06CC\u062F";
 export declare const searchInputAriaLabel = "\u062C\u0633\u062A\u062C\u0648\u06CC \u062C\u062F\u0648\u0644";
 export declare const switchToInfiniteModeLabel = "\u062A\u063A\u06CC\u06CC\u0631 \u0628\u0647 \u067E\u06CC\u0645\u0627\u06CC\u0634 \u0628\u06CC\u200C\u0646\u0647\u0627\u06CC\u062A";
@@ -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

@@ -23,10 +23,14 @@ declare const TableRow: React.ForwardRefExoticComponent<{
 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;
     children?: React.ReactNode;
+    align?: import("./Table.interface").TableColumnAlign;
 } & React.RefAttributes<HTMLTableCellElement>>;
 export { TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, };
 export default Table;

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 import type { SelectProps } from "../Select/Select.interface";
-export type TableFieldType = 'text' | 'number' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'date';
+export type TableFieldType = 'text' | 'number' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'date' | 'money';
 type TableFieldValueByType = {
     text: string;
     number: number;
@@ -9,11 +9,14 @@ type TableFieldValueByType = {
     checkbox: boolean;
     radio: string;
     date: Date | string;
+    money: number | string;
 };
+export type TableColumnAlign = 'start' | 'center' | 'end';
 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 = {
@@ -63,6 +66,37 @@ export type TableSchemaColumn = {
      * with the other un-sized columns.
      */
     width?: number | string;
+    /**
+     * Text alignment applied to both the column's header and its body cells.
+     * Defaults to `"start"` (right in RTL). Has no effect on the row-number or
+     * 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;
@@ -85,6 +119,7 @@ export type TableSchema = {
     columns: TableSchemaColumn[];
     searchable?: boolean;
     pagination?: TableSchemaPagination;
+    sort?: TableSchemaSort;
 };
 export type TableVisibleRow = {
     row: DynamicTableRow;
@@ -134,8 +169,11 @@ export type TableRowProps = TableSectionProps & {
 type TableCellElementProps = {
     className?: string;
     children?: React.ReactNode;
+    align?: TableColumnAlign;
+};
+export type TableHeadProps = TableCellElementProps & {
+    ariaSort?: 'ascending' | 'descending' | 'none';
 };
-export type TableHeadProps = TableCellElementProps;
 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>;
@@ -9,9 +9,12 @@ export declare function resolveLoadingRowsCount(pageSize: number | undefined, da
 export declare function resolveLoadingCellSkeletonClassName(column: TableSchemaColumn, rowIndex: number): string;
 export declare function buildPaginationTokens(currentPage: number, totalPages: number): TablePaginationToken[];
 export declare function isEmptyCellValue(value: unknown): boolean;
+export declare function resolveMoneyValue(value: unknown): number | null;
+export declare function formatMoneyValue(value: number): string;
 export declare function resolveDateValue(value: unknown): Date | null;
 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/Table.variant.d.ts

@@ -10,5 +10,9 @@ export declare const tableHeaderVariants: (props?: import("class-variance-author
 export declare const tableBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const tableFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const tableRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const tableHeadVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const tableCellVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tableHeadVariants: (props?: ({
+    align?: "center" | "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tableCellVariants: (props?: ({
+    align?: "center" | "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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 {};