@symply.io/basic-components 1.6.11-alpha.5 → 1.6.11-alpha.6

package/DataTable/TableCore/TableBody.js

@@ -30,7 +30,7 @@ function TBody(props) {
     var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
     var virtualRows = useTableVirtualizer().virtualRows;
     return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow) {
-            return (_jsx(TableBodyRow, __assign({ rowIndex: virtualRow.index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "DataTable_".concat(virtualRow.key || virtualRow.index)));
+            return (_jsx(TableBodyRow, __assign({ rowIndex: virtualRow.index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "DataTable_".concat(virtualRow.index)));
         })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
 }
 export default TBody;

package/DataTable/TableCore/TableBodyRow.js

@@ -47,6 +47,7 @@ function TableBodyRow(props) {
     }, [row, columns, onCustomizeRowBgColor]), normal = _d.normal, hover = _d.hover;
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
+            width: "100%",
             transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",

package/DataTable/VirtualizerContext.js

@@ -11,7 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useContext, useCallback, createContext, } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer, elementScroll } from "@tanstack/react-virtual";
+function easeInOutQuint(t) {
+    return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
+}
 var VirtualizerContext = createContext({
     tableRef: { current: null },
     virtualRows: [],
@@ -23,6 +26,29 @@ var VirtualizerContext = createContext({
 export function VirtualizerContextProvider(props) {
     var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense;
     var tableRef = useRef(null);
+    var scrollingRef = useRef();
+    var scrollToFn = useCallback(function (offset, canSmooth, instance) {
+        var _a;
+        var duration = 1000;
+        var start = ((_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
+        var startTime = (scrollingRef.current = Date.now());
+        var run = function () {
+            if (scrollingRef.current !== startTime)
+                return;
+            var now = Date.now();
+            var elapsed = now - startTime;
+            var progress = easeInOutQuint(Math.min(elapsed / duration, 1));
+            var interpolated = start + (offset - start) * progress;
+            if (elapsed < duration) {
+                elementScroll(interpolated, canSmooth, instance);
+                requestAnimationFrame(run);
+            }
+            else {
+                elementScroll(interpolated, canSmooth, instance);
+            }
+        };
+        requestAnimationFrame(run);
+    }, []);
     var rowVirtualizer = useVirtualizer({
         count: rows.length,
         getScrollElement: function () { return tableRef.current; },
@@ -31,7 +57,8 @@ export function VirtualizerContextProvider(props) {
             navigator.userAgent.indexOf("Firefox") === -1
             ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
             : undefined,
-        overscan: 6,
+        overscan: 12,
+        scrollToFn: scrollToFn,
     });
     var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];
     var _b = useState(false), rightShadowVisible = _b[0], setRightShadowVisible = _b[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.6.11-alpha.5",
+  "version": "1.6.11-alpha.6",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",