@mendylanda/ui 0.3.2-dev.56.581b055ea0a9 → 0.3.2-dev.58.0ef9785a4046

package/dist/table/table-layout.js

@@ -1,6 +1,6 @@
 import { distributeColumnWidths } from "./column-widths.js";
 /** Keep headers, skeletons, and loaded cells on the same column geometry. */
-export function tableLayout(table, viewportWidth, rowHeight) {
+export function tableLayout(table, viewportWidth, rowHeight, direction = "ltr") {
     const columns = [
         ...table.getStartVisibleLeafColumns(),
         ...table.getCenterVisibleLeafColumns(),
@@ -28,12 +28,12 @@ export function tableLayout(table, viewportWidth, rowHeight) {
     const positions = new Map();
     let offset = 0;
     for (const column of table.getStartVisibleLeafColumns()) {
-        positions.set(column.id, { side: "left", offset });
+        positions.set(column.id, { side: direction === "rtl" ? "right" : "left", offset });
         offset += size(column);
     }
     offset = 0;
     for (const column of [...table.getEndVisibleLeafColumns()].reverse()) {
-        positions.set(column.id, { side: "right", offset });
+        positions.set(column.id, { side: direction === "rtl" ? "left" : "right", offset });
         offset += size(column);
     }
     const styles = new Map();
@@ -54,10 +54,10 @@ export function tableLayout(table, viewportWidth, rowHeight) {
                     [pin.side]: pin.offset,
                     zIndex: 2,
                     ...(column.id === table.getStartVisibleLeafColumns().at(-1)?.id
-                        ? { borderRightWidth: 4 }
+                        ? { [direction === "rtl" ? "borderLeftWidth" : "borderRightWidth"]: 4 }
                         : {}),
                     ...(column.id === table.getEndVisibleLeafColumns()[0]?.id
-                        ? { borderLeftWidth: 4 }
+                        ? { [direction === "rtl" ? "borderRightWidth" : "borderLeftWidth"]: 4 }
                         : {}),
                 }
                 : {}),

package/dist/table/table-loading.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { Fragment } from "react";
 /** Loading shares the live column geometry and its single scroll container. */
 export function TableLoadingRows({ columns, columnGaps, count, width, rowHeight, cellStyle, }) {
-    return (_jsx("div", { role: "status", "aria-label": "Loading rows", className: "mui-2bf6510f1330", style: { width }, children: Array.from({ length: count }, (_, index) => (_jsx("div", { "aria-hidden": "true", "data-slot": "table-loading-row", className: "mui-222f930b8752 mui-2bf6510f1330", style: { height: rowHeight }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx("div", { "data-slot": "table-loading-cell", "data-column-id": column.id, className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a", style: cellStyle(column), children: _jsx("div", { className: "mui-2edce89ef182 mui-56bb14cbd1fe mui-7b3cd77eb999 mui-02e603944040 mui-87ecb59f2d2d mui-237747164b60" }) }, column.id)] }, column.id))) }, index))) }));
+    const { t } = useMendyLocale();
+    return (_jsx("div", { role: "status", "aria-label": t("loadingRows"), className: "mui-2bf6510f1330", style: { width }, children: Array.from({ length: count }, (_, index) => (_jsx("div", { "aria-hidden": "true", "data-slot": "table-loading-row", className: "mui-222f930b8752 mui-2bf6510f1330", style: { height: rowHeight }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx("div", { "data-slot": "table-loading-cell", "data-column-id": column.id, className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a", style: cellStyle(column), children: _jsx("div", { className: "mui-2edce89ef182 mui-56bb14cbd1fe mui-7b3cd77eb999 mui-02e603944040 mui-87ecb59f2d2d mui-237747164b60" }) }, column.id)] }, column.id))) }, index))) }));
 }

package/dist/table/table-parts.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { Fragment, memo, useMemo } from "react";
 import { constructCell, flexRender } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp } from "lucide-react";
@@ -8,13 +9,15 @@ import { Checkbox } from "../primitives/checkbox.js";
 import { cn } from "../utils.js";
 import { interactiveSelector } from "./clipboard.js";
 export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, selectLoaded, }) {
+    const { t } = useMendyLocale();
     const column = header.column;
     const definition = column.columnDef;
     const title = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
     const sorted = column.getIsSorted();
-    return (_jsxs("div", { role: "columnheader", "data-column-id": column.id, "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-ad936fcbed63 mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134", children: [selectLoaded && index === 0 && (_jsx(Checkbox, { "aria-label": "Select loaded rows", disabled: selectLoaded.disabled, checked: selectLoaded.checked, onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true), className: "mui-477d8f4dfce9 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-e2ed522ed9b7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && (_jsx(TableResizeHandle, { table: table, header: header, title: title, width: Number(style.width) }))] }, column.id));
+    return (_jsxs("div", { role: "columnheader", "data-column-id": column.id, "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-ad936fcbed63 mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134", children: [selectLoaded && index === 0 && (_jsx(Checkbox, { "aria-label": t("selectLoaded"), disabled: selectLoaded.disabled, checked: selectLoaded.checked, onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true), className: "mui-477d8f4dfce9 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-e2ed522ed9b7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && (_jsx(TableResizeHandle, { table: table, header: header, title: title, width: Number(style.width) }))] }, column.id));
 }
 function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, inlineSelection, }) {
+    const { t, direction } = useMendyLocale();
     // The engine's getAllCells API eagerly allocates every column. Build only the
     // viewport cells with its public constructor, and release them with this row.
     const cache = useMemo(() => new WeakMap(), [row]);
@@ -26,7 +29,7 @@ function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, meas
         }
         return cell;
     });
-    const rowElement = (_jsx("div", { ref: renderRowDetail ? undefined : measureElement, role: "row", "aria-rowindex": renderRowDetail ? undefined : rowIndex + 2, "aria-selected": row.getIsSelected(), "data-highlighted": row.getIsSelected() || isRowHighlighted?.(row.original), "data-index": rowIndex, className: cn("mui-ad936fcbed63 mui-635702706586 mui-222f930b8752 mui-2bf6510f1330 mui-5b272f3c5076 mui-37ad15a95595 mui-9d7d1760cd8e", rowClassName?.(row.original)), style: {
+    const rowElement = (_jsx("div", { ref: renderRowDetail ? undefined : measureElement, role: "row", "aria-rowindex": renderRowDetail ? undefined : rowIndex + 2, "aria-selected": row.getIsSelected(), "data-highlighted": row.getIsSelected() || isRowHighlighted?.(row.original), "data-index": rowIndex, className: cn("mui-ad936fcbed63 mui-8368bbb62f66 mui-222f930b8752 mui-2bf6510f1330 mui-5b272f3c5076 mui-37ad15a95595 mui-9d7d1760cd8e", rowClassName?.(row.original)), style: {
             height: autoRowHeight ? undefined : rowHeight,
             minHeight: rowHeight,
             top: renderRowDetail ? 0 : start,
@@ -64,21 +67,22 @@ function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, meas
                         }, children: [selected && (_jsx("span", { "aria-hidden": "true", "data-selection-outline": "", className: "mui-33228ff7d583 mui-747355bdc2a2 mui-d7efd1b0b0f9 mui-515f9fdc6db7", style: {
                                     top: edge?.top ? 0 : -1,
                                     bottom: edge?.bottom ? -1 : -2,
-                                    left: -Number(cellStyle(cell.column).borderLeftWidth ?? 0),
-                                    right: -Number(cellStyle(cell.column).borderRightWidth ?? 1),
+                                    left: -Number(cellStyle(cell.column).borderLeftWidth ?? (direction === "rtl" ? 1 : 0)),
+                                    right: -Number(cellStyle(cell.column).borderRightWidth ?? (direction === "rtl" ? 0 : 1)),
                                     borderTopWidth: edge?.top ? 2 : 0,
                                     borderBottomWidth: edge?.bottom ? 2 : 0,
-                                    borderLeftWidth: edge?.left ? 2 : 0,
-                                    borderRightWidth: edge?.right ? 2 : 0,
-                                } })), inlineSelection && index === 0 && (_jsx(Checkbox, { "aria-label": `Select row ${rowIndex + 1}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(value === true), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), className: "mui-68d781378b03 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-9c02852bfc55 mui-e2ed522ed9b7 mui-cbd3aed703f7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84", autoRowHeight ? "mui-726fca123972 mui-37cf9655f30a mui-b5edc3ea7c91" : "mui-7bd696ca6be3 mui-5a3a4ee420c2", contentClassName), children: _jsx(TableCellContent, { cell: cell, renderer: cell.column.columnDef.cell, version: contentVersion, state: contentState }) })] }, cell.id)] }, cell.id));
+                                    borderLeftWidth: (direction === "rtl" ? edge?.right : edge?.left) ? 2 : 0,
+                                    borderRightWidth: (direction === "rtl" ? edge?.left : edge?.right) ? 2 : 0,
+                                } })), inlineSelection && index === 0 && (_jsx(Checkbox, { "aria-label": t("selectRow", { id: rowIndex + 1 }), checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(value === true), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), className: "mui-68d781378b03 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-9c02852bfc55 mui-e2ed522ed9b7 mui-cbd3aed703f7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84", autoRowHeight ? "mui-726fca123972 mui-37cf9655f30a mui-b5edc3ea7c91" : "mui-7bd696ca6be3 mui-5a3a4ee420c2", contentClassName), children: _jsx(TableCellContent, { cell: cell, renderer: cell.column.columnDef.cell, version: contentVersion, state: contentState }) })] }, cell.id)] }, cell.id));
         }) }, row.id));
     if (!renderRowDetail)
         return rowElement;
     const detail = renderRowDetail(row.original);
-    return (_jsxs("div", { ref: measureElement, "data-index": rowIndex, role: "rowgroup", className: "mui-747355bdc2a2 mui-635702706586 mui-2bf6510f1330", style: { top: start }, children: [rowElement, detail != null && (_jsx("div", { role: "row", className: "mui-bbe39cfb5cc6 mui-5b272f3c5076", children: _jsx("div", { role: "gridcell", "aria-colspan": columns.length, className: "mui-964a9431ff49 mui-184ddc11e5f9 mui-094f5333853b", style: { width: detailWidth, maxWidth: "100%", insetInlineStart: 0 }, children: detail }) }))] }));
+    return (_jsxs("div", { ref: measureElement, "data-index": rowIndex, role: "rowgroup", className: "mui-747355bdc2a2 mui-8368bbb62f66 mui-2bf6510f1330", style: { top: start }, children: [rowElement, detail != null && (_jsx("div", { role: "row", className: "mui-bbe39cfb5cc6 mui-5b272f3c5076", children: _jsx("div", { role: "gridcell", "aria-colspan": columns.length, className: "mui-964a9431ff49 mui-184ddc11e5f9 mui-094f5333853b", style: { width: detailWidth, maxWidth: "100%", insetInlineStart: 0 }, children: detail }) }))] }));
 }
 export const TableBodyRow = memo(TableBodyRowImpl);
 function TableResizeHandle({ table, header, title, width, }) {
+    const { t, direction } = useMendyLocale();
     const column = header.column;
     const beginResize = (event) => {
         if ("touches" in event && event.touches.length > 1)
@@ -98,16 +102,16 @@ function TableResizeHandle({ table, header, title, width, }) {
             columnSizingStart: [[column.id, width]],
         }));
     };
-    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": `Resize ${title}`, "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": column.columnDef.minSize ?? 48, "aria-valuemax": column.columnDef.maxSize ?? 1200, onDoubleClick: () => column.resetSize(), onMouseDown: beginResize, onTouchStart: beginResize, onKeyDown: (event) => {
+    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": t("resizeColumn", { label: title }), "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": column.columnDef.minSize ?? 48, "aria-valuemax": column.columnDef.maxSize ?? 1200, onDoubleClick: () => column.resetSize(), onMouseDown: beginResize, onTouchStart: beginResize, onKeyDown: (event) => {
             if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                 event.preventDefault();
                 event.stopPropagation();
                 table.setColumnSizing((sizes) => ({
                     ...sizes,
-                    [column.id]: Math.min(column.columnDef.maxSize ?? 1200, Math.max(column.columnDef.minSize ?? 48, width + (event.key === "ArrowLeft" ? -10 : 10))),
+                    [column.id]: Math.min(column.columnDef.maxSize ?? 1200, Math.max(column.columnDef.minSize ?? 48, width + (event.key === "ArrowLeft" ? -10 : 10) * (direction === "rtl" ? -1 : 1))),
                 }));
             }
-        }, className: "mui-747355bdc2a2 mui-eb9e48c5dda9 mui-a74c4477017c mui-418e44ad4f9e mui-d4ea834145ae mui-2194d094b585 mui-739a9a000791 mui-78905c9e865c mui-4273133a876a mui-2f669cfad5aa mui-2e357972fc10" }));
+        }, className: "mui-747355bdc2a2 mui-eb9e48c5dda9 mui-aa7bcba08429 mui-418e44ad4f9e mui-d4ea834145ae mui-2194d094b585 mui-739a9a000791 mui-78905c9e865c mui-4273133a876a mui-2f669cfad5aa mui-2e357972fc10" }));
 }
 function TableHeaderContent({ header, renderHeader, title, }) {
     const column = header.column;

package/dist/table/table-view.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { TableHeaderCell, TableBodyRow } from "./table-parts.js";
@@ -14,7 +15,8 @@ import { useTableInteraction } from "./use-table-interaction.js";
 import { useTableResults } from "./use-table-results.js";
 import { useInlineRowSelection } from "./use-inline-row-selection.js";
 import { TableFrame } from "./table-frame.js";
-export function TableView({ table, label = "Data table", height = "auto", layout: layoutMode = "content", footer, rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
+export function TableView({ table, label, height = "auto", layout: layoutMode = "content", footer, rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
+    const { t, direction, code } = useMendyLocale();
     const fill = layoutMode === "fill";
     const { resultKey, hasFilters, clearFilters } = useTableResults(table, queryKey, filters);
     const autoRowHeight = rowHeightOption === "auto" || Boolean(renderRowDetail);
@@ -46,7 +48,7 @@ export function TableView({ table, label = "Data table", height = "auto", layout
     const centerColumns = table.getCenterVisibleLeafColumns();
     const endColumns = table.getEndVisibleLeafColumns();
     const sizing = table.state.columnSizing;
-    const layout = useMemo(() => tableLayout(table, viewportWidth, rowHeight), [table, startColumns, centerColumns, endColumns, sizing, viewportWidth, rowHeight]);
+    const layout = useMemo(() => tableLayout(table, viewportWidth, rowHeight, direction), [table, startColumns, centerColumns, endColumns, sizing, viewportWidth, rowHeight, direction]);
     const { totalWidth, pinningActive } = layout;
     const { inlineSelection, selectLoaded } = useInlineRowSelection(table, layout.columns, rowSelectionControls);
     const focused = table.getFocusedCell();
@@ -104,12 +106,12 @@ export function TableView({ table, label = "Data table", height = "auto", layout
         virtual,
     ]);
     const headersById = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
-    return (_jsxs(TableFrame, { layout: layoutMode, stretch: height === "100%", footer: footer, children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1 + feedbackRowCount, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
+    return (_jsxs(TableFrame, { layout: layoutMode, stretch: height === "100%", footer: footer, children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label ?? t("dataTable"), dir: direction, lang: code, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1 + feedbackRowCount, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
                     height: fill || height === "auto" ? undefined : height,
                     maxHeight: !fill && height === "auto" ? "65dvh" : undefined,
                 }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", fill && "mui-410da8dfa8ac mui-7bd5bab6d7f4", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName, selectLoaded: selectLoaded }, column.id)] }, column.id))) }), _jsx(TableInitialState, { columnCount: layout.columns.length, status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: !fill && height === "auto"
                                 ? 8
-                                : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted, inlineSelection: inlineSelection }, item.key))) }), hasRefreshError && (_jsx(TableFeedbackRow, { columnCount: layout.columns.length, rowIndex: rows.length + 2, className: "mui-964a9431ff49 mui-30150dd033ab", children: _jsxs("div", { role: "alert", className: "mui-5b272f3c5076 mui-094f5333853b", children: [error ?? "Could not refresh rows.", retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: "Retry" }))] }) })), loadMore?.available && (_jsx(TableLoadMore, { loadMore: loadMore, columnCount: layout.columns.length, rowIndex: rows.length + 2 + Number(hasInitialFeedback || hasRefreshError), onLoad: () => {
+                                : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted, inlineSelection: inlineSelection }, item.key))) }), hasRefreshError && (_jsx(TableFeedbackRow, { columnCount: layout.columns.length, rowIndex: rows.length + 2, className: "mui-964a9431ff49 mui-30150dd033ab", children: _jsxs("div", { role: "alert", className: "mui-5b272f3c5076 mui-094f5333853b", children: [error ?? t("refreshError"), retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: t("retry") }))] }) })), loadMore?.available && (_jsx(TableLoadMore, { loadMore: loadMore, columnCount: layout.columns.length, rowIndex: rows.length + 2 + Number(hasInitialFeedback || hasRefreshError), onLoad: () => {
                             requested.current = null;
                             void Promise.resolve()
                                 .then(() => loadMore.load())

package/dist/table/use-column-window.js

@@ -18,7 +18,7 @@ export function useColumnWindow(layout, container, viewportWidth, focusedColumn,
         const element = container.current;
         if (!element)
             return;
-        const measure = () => setScrollLeft(element.scrollLeft);
+        const measure = () => setScrollLeft(Math.abs(element.scrollLeft));
         measure();
         element.addEventListener("scroll", measure, { passive: true });
         return () => element.removeEventListener("scroll", measure);

package/dist/table/use-data-table.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useTable } from "@tanstack/react-table";
+import { useMendyLocale } from "../locale-context.js";
 import { tableFeaturesDefault } from "./features.js";
 import { useStableArray } from "./use-stable-array.js";
 import { reconcilePreferences } from "./state.js";
@@ -28,6 +29,7 @@ export function applyTablePreferences(table, input) {
     table.setColumnPinning(value.columnPinning);
 }
 export function useDataTable({ rows: inputRows, columns: inputColumns, processing, preferences, ...options }) {
+    const { direction } = useMendyLocale();
     const rows = useStableArray(inputRows);
     const columns = useStableArray(inputColumns);
     const defaults = useMemo(() => reconcilePreferences(null, columns, options.initialState), [columns, options.initialState]);
@@ -37,6 +39,7 @@ export function useDataTable({ rows: inputRows, columns: inputColumns, processin
         data: rows,
         columns,
         defaultColumn: { size: 180, minSize: 48, maxSize: 1200, ...options.defaultColumn },
+        columnResizeDirection: options.columnResizeDirection ?? direction,
         columnResizeMode: options.columnResizeMode ?? "onChange",
         enableCellSelection: options.enableCellSelection ?? true,
         enableRowSelection: options.enableRowSelection ??

package/dist/table/use-table-interaction.js

@@ -1,8 +1,10 @@
 "use client";
+import { useMendyLocale } from "../locale-context.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { interactiveSelector, selectedCellsText } from "./clipboard.js";
 export function useTableInteraction({ table, pinningActive, container, queryKey, onRowActivate, onCopyError, scrollToIndex, }) {
     const rows = table.getRowModel().rows;
+    const { t, direction: readingDirection } = useMendyLocale();
     const columns = [
         ...table.getStartVisibleLeafColumns(),
         ...table.getCenterVisibleLeafColumns(),
@@ -69,14 +71,14 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
             await navigator.clipboard.writeText(text);
             if (!mounted.current)
                 return;
-            setAnnouncement("Selected cells copied");
+            setAnnouncement(t("copied"));
             setCopied(true);
             clearTimeout(copyTimer.current);
             copyTimer.current = setTimeout(() => setCopied(false), 300);
         }
         catch (reason) {
             if (mounted.current) {
-                setAnnouncement("Could not copy selected cells");
+                setAnnouncement(t("copyError"));
                 onCopyError?.(reason);
             }
         }
@@ -97,10 +99,12 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
                 const endWidth = !pinningActive
                     ? 0
                     : table.getEndVisibleLeafColumns().reduce((sum, col) => sum + col.getSize(), 0);
-                if (box.left < viewport.left + startWidth)
-                    container.current.scrollLeft += box.left - viewport.left - startWidth;
-                else if (box.right > viewport.right - endWidth)
-                    container.current.scrollLeft += box.right - viewport.right + endWidth;
+                const leftWidth = readingDirection === "rtl" ? endWidth : startWidth;
+                const rightWidth = readingDirection === "rtl" ? startWidth : endWidth;
+                if (box.left < viewport.left + leftWidth)
+                    container.current.scrollLeft += box.left - viewport.left - leftWidth;
+                else if (box.right > viewport.right - rightWidth)
+                    container.current.scrollLeft += box.right - viewport.right + rightWidth;
             }
         });
     }
@@ -129,8 +133,8 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
         const directions = {
             ArrowUp: "up",
             ArrowDown: "down",
-            ArrowLeft: "left",
-            ArrowRight: "right",
+            ArrowLeft: readingDirection === "rtl" ? "right" : "left",
+            ArrowRight: readingDirection === "rtl" ? "left" : "right",
         };
         const direction = directions[event.key];
         if (direction) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.3.2-dev.56.581b055ea0a9",
+  "version": "0.3.2-dev.58.0ef9785a4046",
   "description": "Mendy Landa’s reusable React components. Typed filters and tables with shared interaction behavior and customizable UI.",
   "homepage": "https://ui.mendylanda.com",
   "license": "MIT",
@@ -66,6 +66,11 @@
       "types": "./dist/table/index.d.ts",
       "import": "./dist/table/index.js",
       "default": "./dist/table/index.js"
+    },
+    "./locales/*": {
+      "types": "./dist/locales/*.d.ts",
+      "import": "./dist/locales/*.js",
+      "default": "./dist/locales/*.js"
     }
   },
   "publishConfig": {
@@ -74,6 +79,7 @@
   "dependencies": {
     "@hello-pangea/dnd": "18.0.1",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-direction": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "1.1.15",
@@ -112,5 +118,5 @@
     "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
     "typecheck": "tsc -p tsconfig.build.json --noEmit"
   },
-  "gitHead": "581b055ea0a9ffef4ccf37d292ed5d74fbe8961c"
+  "gitHead": "0ef9785a4046cf8030396c3278c4231b866fcef4"
 }