@infinite-table/infinite-react 0.3.16 → 0.3.19

package/README.md

@@ -16,8 +16,8 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-- [What is Infinite?](#what-is-infinite)
-- [Installation](#installation)
+- [🤔 What is Infinite?](#-what-is-infinite)
+- [📦 Installation](#-installation)
 - [📄 Extensive documentation](#-extensive-documentation)
 - [❤️ TypeScript](#-typescript)
 - [🏢 Enterprise-ready](#-enterprise-ready)
@@ -25,29 +25,30 @@
   - [📦 Small bundle size](#-small-bundle-size)
   - [🧪 Automated end-to-end tests](#%F0%9F%A7%AA-automated-end-to-end-tests)
 - [🎨 Themable](#-themable)
-- [Releases](#releases)
-- [License](#license)
+- [🚀 Releases](#-releases)
+- [📑 License](#-license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 
-## What is Infinite?
+## 🤔 What is Infinite?
 
 Infinite Table is a React DataGrid component for displaying virtualized tabular data. It helps you display huge datasets and get the most out of them by providing you the right tools to do so: 
 
-* [sorting](https://infinite-table.com/docs/latest/learn/working-with-data/sorting)
-* [row grouping](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows) - both server-side and client-side
-* [pivoting](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/pivoting) - both server-side and client-side
-* [aggregations](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows#aggregations)
-* [live pagination](https://infinite-table.com/docs/latest/learn/working-with-data/live-pagination)
-* [lazy loading](https://infinite-table.com/docs/latest/learn/working-with-data/lazy-loading)
-* [keyboard navigation](https://infinite-table.com/docs/latest/learn/keyboard-navigation/navigating-cells)
-* [fixed and flexible columns](https://infinite-table.com/docs/latest/learn/columns/fixed-and-flexible-size)
-* [column grouping](https://infinite-table.com/docs/latest/learn/column-groups)
-* [theming](https://infinite-table.com/docs/latest/learn/theming)
+* [🔃 sorting](https://infinite-table.com/docs/latest/learn/working-with-data/sorting)
+* [💪 row grouping](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows) - both server-side and client-side
+* [🏢 pivoting](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/pivoting) - both server-side and client-side
+* [🧪 aggregations](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows#aggregations)
+* [🌪️ live pagination](https://infinite-table.com/docs/latest/learn/working-with-data/live-pagination)
+* [🌴lazy loading](https://infinite-table.com/docs/latest/learn/working-with-data/lazy-loading)
+* [🧭 keyboard navigation for cells and rows](https://infinite-table.com/docs/latest/learn/keyboard-navigation/navigating-cells)
+* [↔️ fixed and flexible columns](https://infinite-table.com/docs/latest/learn/columns/fixed-and-flexible-size)
+* [🧩 column grouping](https://infinite-table.com/docs/latest/learn/column-groups)
+* [🗃 filtering](https://infinite-table.com/docs/latest/learn/filtering)
+* [🎨 theming](https://infinite-table.com/docs/latest/learn/theming)
 
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install @infinite-table/infinite-react --save
@@ -94,10 +95,10 @@ import "@infinite-table/infinite-react/index.css"
 
 This file includes both the light and the dark themes.
 
-## Releases
+## 🚀 Releases
 
 We release often - see [what each release contains hre](https://infinite-table.com/docs/releases). Due to our automated releases which have integrated tests, we're confident that we're delivering the best possible experience to our users.
 
-## License 
+## 📑 License 
 
 Both Open and [Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)

package/index.esm.js

@@ -5801,12 +5801,12 @@ function useColumnGroupResizeHandle(groupColumns, config) {
       })
     });
     return result;
-  }, []);
+  }, [lastColumnInGroup]);
   const onColumnResize = useCallback9((diff) => {
     const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
     componentActions.viewportReservedWidth = reservedWidth;
     componentActions.columnSizing = columnSizing;
-  }, []);
+  }, [computeResizeForDiff]);
   const groupResizable = groupColumns.some((c) => c.computedResizable);
   const resizeHandle = groupResizable ? /* @__PURE__ */ createElement17(GroupResizeHandle, {
     brain: bodyBrain,
@@ -5824,10 +5824,8 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
 function InfiniteTableHeaderGroup(props) {
-  const {
-    computed: { computedVisibleColumns }
-  } = useInfiniteTable();
   const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
   let { header } = columnGroup;
   if (header instanceof Function) {
@@ -5843,7 +5841,7 @@ function InfiniteTableHeaderGroup(props) {
   });
   const firstColumn = columns[0];
   const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
-  const zIndex2 = computedVisibleColumns.length * 10 - firstColumn.computedVisibleIndex * 10 + height * (columnGroupsMaxDepth - columnGroup.depth + 2);
+  const zIndex2 = `calc(var(${columnZIndexAtIndex5}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
   return /* @__PURE__ */ createElement18("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
@@ -6144,7 +6142,7 @@ import {
 } from "react";
 import { useCallback as useCallback13, useContext as useContext5, useMemo as useMemo7 } from "react";
 var { rootClassName: rootClassName11 } = internalProps;
-var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
+var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = createContext5(null);
 var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
@@ -6274,7 +6272,7 @@ function InfiniteTableColumnCellFn(props) {
   }
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.height = rowHeight;
-  style.zIndex = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
+  style.zIndex = `var(${columnZIndexAtIndex6}-${column.computedVisibleIndex})`;
   const memoizedStyle = useMemo7(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
@@ -10258,7 +10256,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.16"
+      version: "0.3.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -5744,12 +5744,12 @@ function useColumnGroupResizeHandle(groupColumns, config) {
       })
     });
     return result;
-  }, []);
+  }, [lastColumnInGroup]);
   const onColumnResize = (0, import_react25.useCallback)((diff) => {
     const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
     componentActions.viewportReservedWidth = reservedWidth;
     componentActions.columnSizing = columnSizing;
-  }, []);
+  }, [computeResizeForDiff]);
   const groupResizable = groupColumns.some((c) => c.computedResizable);
   const resizeHandle = groupResizable ? /* @__PURE__ */ React24.createElement(GroupResizeHandle, {
     brain: bodyBrain,
@@ -5767,10 +5767,8 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
 function InfiniteTableHeaderGroup(props) {
-  const {
-    computed: { computedVisibleColumns }
-  } = useInfiniteTable();
   const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
   let { header } = columnGroup;
   if (header instanceof Function) {
@@ -5786,7 +5784,7 @@ function InfiniteTableHeaderGroup(props) {
   });
   const firstColumn = columns[0];
   const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
-  const zIndex2 = computedVisibleColumns.length * 10 - firstColumn.computedVisibleIndex * 10 + height * (columnGroupsMaxDepth - columnGroup.depth + 2);
+  const zIndex2 = `calc(var(${columnZIndexAtIndex5}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
   return /* @__PURE__ */ React25.createElement("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
@@ -6078,7 +6076,7 @@ var InfiniteTableLicenseFooter = React28.forwardRef(function InfiniteTableLicens
 var React29 = __toModule(require("react"));
 var import_react28 = __toModule(require("react"));
 var { rootClassName: rootClassName11 } = internalProps;
-var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
+var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = React29.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
@@ -6208,7 +6206,7 @@ function InfiniteTableColumnCellFn(props) {
   }
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.height = rowHeight;
-  style.zIndex = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
+  style.zIndex = `var(${columnZIndexAtIndex6}-${column.computedVisibleIndex})`;
   const memoizedStyle = (0, import_react28.useMemo)(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
@@ -10175,7 +10173,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react46.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.16"
+      version: "0.3.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.3.16",
+  "version": "0.3.19",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1656515948410
+  "publishedAt": 1656535974616
 }