Merge branch 'infintescroll' into v2

package.json

@@ -6,6 +6,7 @@
   },
   "files": [
     "dist",
+    "dist/style.css",
     "src",
     "README.md"
   ],
@@ -18,7 +19,8 @@
     ".": {
       "import": "./dist/react-formiga-table.es.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",
@@ -32,10 +34,15 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "ag-grid-community": "^31.2.1",
+    "ag-grid-react": "^31.2.1",
+    "lodash.debounce": "^4.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "style-object-to-css-string": "^1.1.3",
     "styled-components": "5.3.5",
+    "use-custom-compare": "^1.4.0",
+    "use-deep-compare": "^1.2.1",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {

src/components/InfiniteTable/HeaderCheckbox.tsx

@@ -0,0 +1,89 @@
+import React, { memo, useEffect } from "react";
+
+const HeaderCheckboxComp = memo(
+  ({
+    value,
+    onChange,
+  }: {
+    value: boolean | null;
+    onChange: (value: boolean | null) => void;
+  }) => {
+    const checkboxRef = React.useRef();
+
+    useEffect(() => {
+      const cbRef = checkboxRef.current as any;
+
+      if (value === true) {
+        cbRef.checked = true;
+        cbRef.indeterminate = false;
+      } else if (value === false) {
+        cbRef.checked = false;
+        cbRef.indeterminate = false;
+      } else if (value === null) {
+        cbRef.checked = false;
+        cbRef.indeterminate = true;
+      }
+    });
+
+    return (
+      <input
+        style={{
+          width: "13px",
+          height: "13px",
+          border: "1px solid grey",
+          cursor: "pointer",
+          margin: 0,
+        }}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+        }}
+        ref={checkboxRef as any}
+        type="checkbox"
+        onChange={onChange as any}
+        tabIndex={-1}
+      />
+    );
+  },
+);
+
+HeaderCheckboxComp.displayName = "HeaderCheckboxComp";
+
+export const HeaderCheckbox = memo(
+  ({
+    selectedRowKeysLength,
+    totalRows,
+    allRowSelected,
+    onHeaderCheckboxChange,
+    allRowSelectedMode,
+  }: {
+    selectedRowKeysLength: number;
+    totalRows: number;
+    allRowSelected: boolean;
+    onHeaderCheckboxChange: (value: boolean | null) => void;
+    allRowSelectedMode: boolean;
+  }) => {
+    const noRowsSelected = selectedRowKeysLength === 0;
+    const someRowsSelected =
+      selectedRowKeysLength > 0 && totalRows !== selectedRowKeysLength;
+
+    let value: boolean | null = false;
+
+    if (allRowSelectedMode) {
+      value = true;
+    } else if (totalRows === selectedRowKeysLength && totalRows > 0) {
+      value = true;
+    } else if (allRowSelected) {
+      value = true;
+    } else if (noRowsSelected) {
+      value = false;
+    } else if (someRowsSelected) {
+      value = null;
+    }
+
+    return (
+      <HeaderCheckboxComp value={value} onChange={onHeaderCheckboxChange} />
+    );
+  },
+);
+
+HeaderCheckbox.displayName = "HeaderCheckbox";