@juspay/svelte-ui-components 2.80.9 → 2.81.0

package/dist/Table/sortEngine.d.ts

@@ -0,0 +1,29 @@
+import type { JSONValue } from 'type-decoder';
+/** Comparison strategy for `sortTableRows`. */
+export type TableSortType = 'date' | 'number' | 'string';
+export type SortTableRowsOptions = {
+    /**
+     * Key to extract the comparable value from object-shaped cells (e.g. a
+     * compare cell's primary line). Scalar cells are compared directly.
+     */
+    nestedKey?: string;
+    /** Pins the first row (a totals/summary row) in place while the rest sort. */
+    hasSummaryRow?: boolean;
+    /**
+     * Forces the comparison strategy. When omitted, values that parse as
+     * numbers after stripping thousands separators, percent signs, and common
+     * currency symbols sort numerically; everything else sorts as
+     * case-insensitive text. Pass `'date'` explicitly for date columns —
+     * date detection is deliberately not inferred.
+     */
+    sortType?: TableSortType;
+};
+/**
+ * Sorts positional table rows by a column with type-aware comparison —
+ * currency/percent/thousands-separated numeric strings sort numerically,
+ * text sorts case-insensitively, dates (opt-in via `sortType: 'date'`) sort
+ * chronologically — with optional summary-row pinning. Pure and exported so
+ * consumers can pre-sort data for `sortMode: 'server'` tables or unit-test
+ * their sort expectations against exactly what Table would do.
+ */
+export declare const sortTableRows: (rows: Array<JSONValue[]>, columnIndex: number, direction: "asc" | "desc" | null, options?: SortTableRowsOptions) => Array<JSONValue[]>;

package/dist/Table/sortEngine.js

@@ -0,0 +1,71 @@
+const extractCellValue = (cellValue, nestedKey) => {
+    if (cellValue === null) {
+        return '';
+    }
+    if (typeof cellValue === 'object' && !Array.isArray(cellValue)) {
+        return cellValue[nestedKey] ?? '';
+    }
+    return cellValue;
+};
+const CURRENCY_AND_SEPARATORS = /[,%₹$€£]/g;
+const inferSortType = (sampleValue, nestedKey) => {
+    const value = extractCellValue(sampleValue, nestedKey);
+    const cleanedValue = String(value).replace(CURRENCY_AND_SEPARATORS, '');
+    if (/^-?\d+(\.\d+)?%?$/.test(cleanedValue)) {
+        return 'number';
+    }
+    return 'string';
+};
+const toSortableValue = (cellValue, sortType, nestedKey) => {
+    const value = extractCellValue(cellValue, nestedKey);
+    if (sortType === 'number') {
+        const cleanedNumber = parseFloat(String(value).replace(CURRENCY_AND_SEPARATORS, ''));
+        return isNaN(cleanedNumber) ? 0 : cleanedNumber;
+    }
+    if (sortType === 'date') {
+        // Range cells ("1 Jun - 7 Jun") sort by their start date.
+        const dateString = String(value).split(' - ')[0];
+        const date = new Date(dateString);
+        return isNaN(date.getTime()) ? new Date(0) : date;
+    }
+    return String(value);
+};
+const compareSortableValues = (a, b) => {
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() - b.getTime();
+    }
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
+};
+/**
+ * Sorts positional table rows by a column with type-aware comparison —
+ * currency/percent/thousands-separated numeric strings sort numerically,
+ * text sorts case-insensitively, dates (opt-in via `sortType: 'date'`) sort
+ * chronologically — with optional summary-row pinning. Pure and exported so
+ * consumers can pre-sort data for `sortMode: 'server'` tables or unit-test
+ * their sort expectations against exactly what Table would do.
+ */
+export const sortTableRows = (rows, columnIndex, direction, options = {}) => {
+    if (direction === null || rows.length <= 1) {
+        return rows;
+    }
+    const nestedKey = options.nestedKey ?? '';
+    let summaryRow = null;
+    let rowsToSort;
+    if (options.hasSummaryRow) {
+        [summaryRow, ...rowsToSort] = rows;
+    }
+    else {
+        rowsToSort = rows;
+    }
+    const sortType = options.sortType ?? inferSortType(rowsToSort[0]?.[columnIndex], nestedKey);
+    const multiplier = direction === 'desc' ? -1 : 1;
+    const sortedRows = [...rowsToSort].sort((rowA, rowB) => {
+        const valueA = toSortableValue(rowA[columnIndex], sortType, nestedKey);
+        const valueB = toSortableValue(rowB[columnIndex], sortType, nestedKey);
+        return compareSortableValues(valueA, valueB) * multiplier;
+    });
+    return options.hasSummaryRow && summaryRow ? [summaryRow, ...sortedRows] : sortedRows;
+};

package/dist/assets/dots-vertical.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <circle cx="8" cy="3" r="1.5" fill="currentColor"/>
+  <circle cx="8" cy="8" r="1.5" fill="currentColor"/>
+  <circle cx="8" cy="13" r="1.5" fill="currentColor"/>
+</svg>

package/dist/assets/trend-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path d="M2 4.5L6.5 9L9 6.5L14 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.5 11.5H14V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/trend-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path d="M2 11.5L6.5 7L9 9.5L14 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.5 4.5H14V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
+export { normalizeColumns } from './Table/normalizeColumns';
+export { sortTableRows } from './Table/sortEngine';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
@@ -90,6 +92,8 @@ export type * from './Badge/properties';
 export type * from './Banner/properties';
 export type * from './Accordion/properties';
 export type * from './Table/properties';
+export type { NormalizedColumns } from './Table/normalizeColumns';
+export type { SortTableRowsOptions, TableSortType } from './Table/sortEngine';
 export type * from './Stepper/properties';
 export type * from './Toast/properties';
 export type * from './IconStack/properties';

package/dist/index.js

@@ -19,6 +19,8 @@ export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
+export { normalizeColumns } from './Table/normalizeColumns';
+export { sortTableRows } from './Table/sortEngine';
 export { default as Stepper } from './Stepper/Stepper.svelte';
 export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.80.9",
+  "version": "2.81.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",