@infinite-table/infinite-react 0.3.5 → 0.3.8

package/README.md

@@ -16,26 +16,47 @@
 <!-- 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)
-- [Documentation](#documentation)
+- [📄 Extensive documentation](#-extensive-documentation)
 - [❤️ TypeScript](#-typescript)
+- [🏢 Enterprise-ready](#-enterprise-ready)
+  - [🔒 Secure by default](#-secure-by-default)
+  - [📦 Small bundle size](#-small-bundle-size)
+  - [🧪 Automated end-to-end tests](#%F0%9F%A7%AA-automated-end-to-end-tests)
 - [🎨 Themable](#-themable)
-- [Testing](#testing)
 - [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+
+## 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)
+
+
 ## Installation
 
 ```bash
 npm install @infinite-table/infinite-react --save
 ```
 
-## [Documentation](https://infinite-table.com/docs)
+## [📄 Extensive documentation](https://infinite-table.com/docs)
 
 Our approach with the `InfiniteTable` is to go documentation first. From our developer experience we know that most software products lack a good documentation. So we want to be different and start with the documentation first since our purpose is to have an outstanding documentation that developers can actually use.
 
-**[Visit API docs](https://infinite-table.com/docs)**
+**[Visit our docs and getting-started guide](https://infinite-table.com/docs)**
 
 ## ❤️ TypeScript
 
@@ -43,6 +64,25 @@ It's fully typed and offers you great developer experience to help you get up an
 
 > The TypeScript typings file is included in the npm package - you don't have to download an additional **@types** package.
 
+## 🏢 Enterprise-ready
+
+Infinite Table is ready to power your enterprise apps, as it supports advanced data fetching, filtering, sorting, grouping, pivoting, aggregations, live pagination, lazy loading - all of those with support for both client-side and server-side implementations.
+
+You can choose to leverage our built-in implementations in the browser or you can process your data on the server with full support from our-side.
+
+### 🔒 Secure by default
+
+We take security seriously and only have a total of 3 dependencies in our full dependency graph - and this number will only go down.
+
+### 📦 Small bundle size
+
+Our bundle size is under `200kB` and we're [keeping it small](https://bundlephobia.com/package/@infinite-table/infinite-react).
+
+### 🧪 Automated end-to-end tests
+
+Our releases are automated and we have [end-to-end tests](https://github.com/infinite-table/infinite-react/tree/master/source/examples/src/pages/tests) that ensure we're delivering to our standards. Real-browser tests help us move with confidence and continue to ship great features.
+
+
 ## 🎨 Themable
 
 `Infinite Table` is fully customizable, via CSS variables. It ships with both a **light** and a **dark** theme - you have to import the CSS file from the package.
@@ -54,10 +94,6 @@ import "@infinite-table/infinite-react/index.css"
 This file includes both the light and the dark themes.
 
 
-## Testing
-
-Infinite Table is built with extensive end-to-end testing via headless chrome (more exactly, puppeteer).
-
 ## License 
 
-[Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)
+Both Open and [Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)

package/index.css

@@ -1,4 +1,4 @@
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1ay27iMBTd8xWW2BRpXJEX0HQz0nyJYzvEIrGRYyjMqP8+dhoa4sQpqJ1qFpbFgt5zfe1zHz5ITaUQCvyZAQAh4znjTFFY7xGmcJmCpaTV85gt0LbHIExc9tDY3ebImJ3W2FjXTnOSgsBlW2nbRNy1MTutmxSEE85PKYicfGiy4qExF1zBmv1+I3MscodoKF2Nhe8woYuZDtJQu5nGxKMMdvbExWIHWTmY7BBrF5sNJEcVK88pYLygkikLgkUpZArm8cYsy4gwpnqHCybP18s4sjCZkIRKKBFhhzoFRyQfhjW6sJ0Q3m2lOHCSgpdC/8WyV4zDgrJtofTll8v9ybKXAhFYoXoHFT2p3nZym6GHMEl+XD46R3b4zl0cqSzRubfDVqLzhw5CX4ypsykBm5EO3BI3znwH2yNCGN86yEvcp5/mvme1NykoMkZMy7J3+TklZk2g29PCk+O80VSoi/P5E84D19EAi1tQpwWYiEck2m4NrEcQiUlE7JxfuzEseNOYunZXg9K9RtZCqjd4haSONOVwfYaJm3UwF5NtM69ys4bT4FDxC/TSgdGwAZtY7Vb4IKUeE7/MtzFYW4cvjKhC33B8r+keCAfZdJTLVcDBVoPDLEAtSkbAHK/Mmjg740dWs6zUKeWC29PqGnnfHERYsWN/g1qdTRiC6mLQhiNwJ6sj2CZfEGpm1uub0TolQfx0MzzTb1GQTMHfCxSicl+gN/lyhwOECulMwAPPBT7UlDQCydpAipepjnF3iXEUhPRbvmkVuz6MdT8INMcZTrB9nw7bdhintWrKfaS3DKww74w1dzKzRrB7wbjSaHrUXVhD/Z5qdmosRVk2IdBBiefZ6+yxNO3sFahXoF6BegXqFahXoF6BegXqFahXoN+mQLsXxEtRL0W9FPVS1EtRL0W9FPVS1EtRL0W/VYoSJHe2AO2FCJZBHNi57rWUrrNL04QoCiPXQ9EOGRyZdevTE2RhENrhv2r8OViNsnidxP+0esJYU2UX6PUAfafp+ueCT9Z/n6yfFSUMgYe9pDmVdTsCa1zQqpngcrdoMpi+/xvMLdm8M5+3ZfTenH5dVu/L6ycye09uP84uAK+z1780rAoBwCQAAA== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1Xy27jIBTd5yuQsmmkUsWvpHU3I82XYMAxig0RkDSZUf59wHXqGBs3UdtZWaiqknMuF859cJNKITT4OwMAQsZzxpmmUO0QpnCZgqWk1esQFhjsKQgTHx5a3A9HFvaisUXXXjhJQeDDVgYb8bu2sBd9TkE4YvySgsirhxEr7oO54Boq9uddzCHPLaOWdDXkvuWEPmVaSi3t8zgnHlSwxROfii1l5VGyZax9ataUHFWsPKWA8YJKph0KFqWQKZjHz3Y5IMKYmh0unDxfL+PI4WRCEiqhRITtVQoOSD70c3ThGiG83Uix5yQFb4X5xsErxmFB2abQ5vLL5e7o4KVABFZIbaGmR93ZTm4y9BAmyePlz8TIdd+aiwOVJTp1dthIdPrUQJiLMX2yKeAq0pIb4YaVb2k7RAjjG494if/049p3UHeTgiILYlqWncvPKbFrhN2cFh49543GXF2MT18w7pkOOljcwjouwIg/ItFmY2kdgUhMIuLG/NqMYcHrwjS5u+ql7jVTCanf6RWSxtOYwfUZRm7W0nxKNsW8yu3qd4N9xS/USwVG/QKsfTVb4b2Upk38tp+GaE0evjGiC3PD4b3GayDsRdOTLlcOe1v1DrMASpSMgDle2TVydsYPTLGsNCHlgrvd6pp5Xx9EWLNDdwOlT9YNQaroleEA3avqALeOF4RGmfX6ZrYJSRC/3EzPzFsUJGP0jwSFqNwV6H18ucMAQo1MJOCe5wLvFSX1gORsIMXbWMX4q8QaCkK6JV+XipsfFt31HM1xhhPs3qflNhXGqdJ1ug/UlqUV9p1x+k5m1wB3JxjXhk0PpgoVNO+pUUdhKcqydoH2WrzOzrOn0pbzI3hqX5Lmi/p/aufTHppOU+s0tU5T6zS1TlPrNLVOU+s0tU5T6zS1/teplSC5vR5L7Wd3IO24DJZBHLix75SYybtLEYUoCiPfw9E0HRzZdetTFGRhELruv6sdelSOsnidxD+aTWFspHIT9rqhfsh0nv2qKGEIPOwkzalUTZUpXNCqbhJyu6gj2P64uCWad8bztojeG9Pvi+p9cf1CZO+J7efRBeA8O/8D9swiI8wYAAA= */
 :root {
   --infinite-space-0: 0rem;
   --infinite-space-1: 0.125rem;
@@ -61,7 +61,10 @@
   --infinite-row-hover-background: #dbdbdb;
   --infinite-row-pointer-events-while-scrolling: auto;
 }
-.light {
+.light,
+.infinite-light,
+.light:root,
+.infinite-light:root {
   --infinite-space-0: 0rem;
   --infinite-space-1: 0.125rem;
   --infinite-space-2: 0.25rem;
@@ -123,79 +126,7 @@
   --infinite-row-hover-background: #dbdbdb;
   --infinite-row-pointer-events-while-scrolling: auto;
 }
-.infinite-light {
-  --infinite-space-0: 0rem;
-  --infinite-space-1: 0.125rem;
-  --infinite-space-2: 0.25rem;
-  --infinite-space-3: 0.5rem;
-  --infinite-space-4: 0.75rem;
-  --infinite-space-5: 1rem;
-  --infinite-space-6: 1.25rem;
-  --infinite-space-7: 1.5rem;
-  --infinite-space-8: 2.25rem;
-  --infinite-space-9: 3rem;
-  --infinite-space-10: 4rem;
-  --infinite-font-size-0: 0.5rem;
-  --infinite-font-size-1: 0.625rem;
-  --infinite-font-size-2: 0.75rem;
-  --infinite-font-size-3: 0.875rem;
-  --infinite-font-size-4: 1rem;
-  --infinite-font-size-5: 1.25rem;
-  --infinite-font-size-6: 1.5rem;
-  --infinite-font-size-7: 2.25rem;
-  --infinite-font-family: inherit;
-  --infinite-color: #484848;
-  --infinite-accent-color: #ff7043;
-  --infinite-border-radius: var(--infinite-space-2);
-  --infinite-background: white;
-  --infinite-min-height: 100px;
-  --infinite-load-mask-text-background: rgba(255,255,255,0.8);
-  --infinite-load-mask-overlay-background: gray;
-  --infinite-load-mask-overlay-opacity: 0.3;
-  --infinite-load-mask-color: inherit;
-  --infinite-load-mask-padding: var(--infinite-space-5);
-  --infinite-load-mask-border-radius: var(--infinite-border-radius);
-  --infinite-header-cell-background: #ededed;
-  --infinite-header-cell-padding-x: var(--infinite-space-3);
-  --infinite-header-cell-padding-y: var(--infinite-space-3);
-  --infinite-header-cell-padding: var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ;
-  --infinite-header-cell-dragging-background: #d4d3d3;
-  --infinite-header-cell-icon-size: 16px;
-  --infinite-header-cell-sort-icon-margin: 16px;
-  --infinite-header-background: var(--infinite-header-cell-background);
-  --infinite-header-color: #6f6f6f;
-  --infinite-column-header-height: 30px;
-  --infinite-cell-color: currentColor;
-  --infinite-cell-border-width: 1px;
-  --infinite-cell-padding: var(--infinite-space-2) var(--infinite-space-3);
-  --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
-  --infinite-cell-border-invisible: none;
-  --infinite-cell-border-radius: var(--infinite-space-2);
-  --infinite-active-cell-border-style: dashed;
-  --infinite-active-cell-border-width: 1px;
-  --infinite-active-cell-border-color--r: 77;
-  --infinite-active-cell-border-color--g: 149;
-  --infinite-active-cell-border-color--b: 215;
-  --infinite-active-cell-background-alpha: 0.25;
-  --infinite-active-cell-background-alpha--table-unfocused: 0.1;
-  --infinite-row-background: var(--infinite-background);
-  --infinite-row-odd-background: #f6f6f6;
-  --infinite-group-row-background: #cbc5c5;
-  --infinite-group-row-column-nesting: 30px;
-  --infinite-row-hover-background: #dbdbdb;
-  --infinite-row-pointer-events-while-scrolling: auto;
-}
-.dark {
-  --infinite-background: #101419;
-  --infinite-cell-border: 1px solid #2a323d;
-  --infinite-header-color: #c3c3c3;
-  --infinite-header-cell-background: #1b2129;
-  --infinite-header-background: var(--infinite-header-cell-background);
-  --infinite-row-hover-background: #3b4754;
-  --infinite-row-background: var(--infinite-background);
-  --infinite-row-odd-background: #242a31;
-  --infinite-cell-color: #c3c3c3;
-}
+.dark,
 .infinite-dark {
   --infinite-background: #101419;
   --infinite-cell-border: 1px solid #2a323d;

package/index.d.ts

@@ -1599,6 +1599,269 @@ declare function useInfiniteHeaderCell<T>(): InfiniteTableColumnHeaderParams<T,
 
 declare function useInfiniteColumnCell<T>(): InfiniteTableColumnCellContextType<T>;
 
+declare const ThemeVars: _vanilla_extract_private.MapLeafNodes<{
+    color: {
+        /**
+         * Brand-specific accent color. This probably needs override to match your app.
+         */
+        accent: string;
+        /**
+         * The text color inside the component
+         */
+        color: string;
+    };
+    spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+    fontSize: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    fontFamily: string;
+    minHeight: string;
+    borderRadius: string;
+    /**
+     * The background color for the whole component.
+     *
+     * Overriden in the `dark` theme.
+     */
+    background: string;
+    components: {
+        LoadMask: {
+            /**
+             * The padding used for the content inside the LoadMask.
+             */
+            padding: string;
+            color: string;
+            textBackground: string;
+            overlayBackground: string;
+            overlayOpacity: string;
+            borderRadius: string;
+        };
+        Header: {
+            /**
+             * Background color for the header. Defaults to [`--infinie-header-cell-background`](#header-cell-background).
+             *
+             * Overriden in the `dark` theme.
+             */
+            background: string;
+            /**
+             * The text color inside the header.
+             *
+             * Overriden in the `dark` theme.
+             */
+            color: string;
+            columnHeaderHeight: string;
+        };
+        HeaderCell: {
+            draggingBackground: string;
+            /**
+             * Background for header cells.
+             *
+             * Overriden in the `dark` theme.
+             */
+            background: string;
+            padding: string;
+            paddingX: string;
+            paddingY: string;
+            iconSize: string;
+            sortIconMargin: string;
+        };
+        Cell: {
+            padding: string;
+            borderWidth: string;
+            /**
+             * Specifies the border for cells.
+             *
+             * Overriden in the `dark` theme - eg: `1px solid #2a323d`
+             */
+            border: string;
+            borderInvisible: string;
+            borderRadius: string;
+            /**
+             * Text color inside rows. Defaults to `currentColor`
+             *
+             * Overriden in `dark` theme.
+             */
+            color: string;
+            /**
+             * The RED component of the color used for the active cell when cell keyboard navigation is enabled.
+             *
+             * The easiest way to define the color of the active cell is to use these 3 variables:
+             *   `--infinite-active-cell-border-color--r`
+             *   `--infinite-active-cell-border-color--g`
+             *   `--infinite-active-cell-border-color--b`
+             * as they define both the border and the background color of the active cell and the active row.
+             *
+             * You can also specify the GREEN and BLUE components of the color using the next two css vars.
+             *
+             * The border color of the active cell is decomposed into multiple variables for convenience as by default
+             * the background of the active cell is the same color, but with the opacity specified by the value of `--infinie-active-cell-background-alpha`.
+             *
+             * If you don't want this, you can use `--infinite-active-cell-background` instead.
+             */
+            activeBorderColor_R: string;
+            /**
+             * The GREEN component of the color used for the active cell when cell keyboard navigation is enabled.
+             *
+             * The easiest way to define the color of the active cell is to use these 3 variables:
+             *   `--infinite-active-cell-border-color--r`
+             *   `--infinite-active-cell-border-color--g`
+             *   `--infinite-active-cell-border-color--b`
+             * as they define both the border and the background color of the active cell and the active row.
+             *
+             * You can also specify the RED and BLUE components of the color using the next two css vars.
+             *
+             * The border color of the active cell is decomposed into multiple variables for convenience as by default
+             * the background of the active cell is the same color, but with the opacity specified by the value of `--infinie-active-cell-background-alpha`.
+             *
+             * If you don't want this, you can use `--infinite-active-cell-background` instead.
+             */
+            activeBorderColor_G: string;
+            /**
+             * The BLUE component of the color used for the active cell when cell keyboard navigation is enabled.
+             *
+             * The easiest way to define the color of the active cell is to use these 3 variables:
+             *   `--infinite-active-cell-border-color--r`
+             *   `--infinite-active-cell-border-color--g`
+             *   `--infinite-active-cell-border-color--b`
+             * as they define both the border and the background color of the active cell and the active row.
+             *
+             * You can also specify the RED and GREEN components of the color using the next two css vars.
+             *
+             * The border color of the active cell is decomposed into multiple variables for convenience as by default
+             * the background of the active cell is the same color, but with the opacity specified by the value of `--infinie-active-cell-background-alpha`.
+             *
+             * If you don't want this, you can use `--infinite-active-cell-background` instead.
+             */
+            activeBorderColor_B: string;
+            /**
+             * The opacity of the background color for the active cell (when cell keyboard navigation is enabled).
+             *
+             * The background color of the active cell is based on the value of the above 3 variables, but with the opacity specified by this variable.
+             * This is applied when the component has focus.
+             */
+            activeBackgroundAlpha: string;
+            /**
+             * Same as the above, but applied when the component does not have focus.
+             */
+            activeBackgroundAlphaWhenTableUnfocused: string;
+            /**
+             * The background color of the active cell defaults to the same color (with modified opacity, as explained above) as the border color.
+             *
+             * However, specify this to explicitly override the default.
+             */
+            activeBackground: string;
+            /**
+             * The color for border of the active cell (when cell keyboard navigation is enabled).
+             */
+            activeBorderColor: string;
+            /**
+             * The width of the border for the active cell.
+             */
+            activeBorderWidth: string;
+            /**
+             * The style of the border for the active cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'.
+             */
+            activeBorderStyle: string;
+            /**
+             * Specifies the border for the active cell. Defaults to `var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color)`.
+             */
+            activeBorder: string;
+        };
+        Row: {
+            /**
+             * Background color for rows. Defaults to [`--infinite-background`](#background).
+             *
+             * Overriden in `dark` theme.
+             */
+            background: string;
+            /**
+             * Background color for odd rows. Even rows will use [`--infinite-row-background`](#row-background).
+             *
+             * Overriden in `dark` theme.
+             */
+            oddBackground: string;
+            /**
+             * The background color of the active row. Defaults to the value of `var(--infinite-active-cell-background)`.
+             *
+             * However, specify this to explicitly override the default.
+             */
+            activeBackground: string;
+            /**
+             * The border color for the active row. Defaults to the value of `var(--infinite-active-cell-border-color)`.
+             */
+            activeBorderColor: string;
+            /**
+             * The width of the border for the active row. Defaults to the value of `var(--infinite-active-cell-border-width)`.
+             */
+            activeBorderWidth: string;
+            /**
+             * The style of the border for the active row (eg: 'solid', 'dashed', 'dotted') - defaults to the value of `var(--infinite-active-cell-border-style)`, which is `dashed` by default.
+             */
+            activeBorderStyle: string;
+            /**
+             * Specifies the border for the active row. Defaults to `var(--infinite-active-row-border-width) var(--infinite-active-row-border-style) var(--infinite-active-row-border-color)`.
+             */
+            activeBorder: string;
+            /**
+             * The opacity of the background color for the active row (when row keyboard navigation is enabled).
+             * When you explicitly specify `--infinite-active-row-background`, this variable will not be used.
+             * Instead, this variable is used when the active row background uses the color of the active cell (border).
+             *
+             * This is applied when the component has focus.
+             *
+             * Defaults to the value of `var(--infinite-active-cell-background-alpha)`.
+             */
+            activeBackgroundAlpha: string;
+            /**
+             * Same as the above, but applied when the component does not have focus.
+             *
+             * When you explicitly specify `--infinite-active-row-background`, this variable will not be used.
+             * Instead, this variable is used when the active row background uses the color of the active cell (border).
+             *
+             * Defaults to the value of `var(--infinite-active-cell-background-alpha--table-unfocused)`.
+             */
+            activeBackgroundAlphaWhenTableUnfocused: string;
+            /**
+             * Background color for rows, on hover.
+             *
+             * Overriden in the `dark` theme.
+             */
+            hoverBackground: string;
+            groupRowBackground: string;
+            groupRowColumnNesting: string;
+            groupNesting: string;
+            pointerEventsWhileScrolling: string;
+        };
+        ColumnCell: {
+            background: string;
+        };
+    };
+}, _vanilla_extract_private.CSSVarFunction>;
+declare const LightTheme: {
+    [x: string]: string;
+};
+declare const DarkTheme: {
+    [x: string]: string;
+};
+
 declare const InfiniteTableClassName: string;
 declare const InfiniteTableComponent: React$1.MemoExoticComponent<(<T>() => JSX.Element)>;
 declare function InfiniteTable<T>(props: InfiniteTableProps<T>): JSX.Element;
@@ -1670,4 +1933,4 @@ declare const defaultFilterEditors: InfiniteTablePropFilterEditors<unknown>;
 declare function StringFilterEditor<T>(props: InfiniteTableFilterEditorProps<T>): JSX.Element;
 declare function NumberFilterEditor<T>(props: InfiniteTableFilterEditorProps<T>): JSX.Element;
 
-export { ColumnTypeWithInherit, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropLivePaginationCursor, DataSourcePropPivotBy, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTableGroupColumnRenderIconFunction, InfiniteTableImperativeApi, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropColumnsMap, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, NumberFilterEditor, Scrollbars, StringFilterEditor, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };
+export { ColumnTypeWithInherit, DarkTheme, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropLivePaginationCursor, DataSourcePropPivotBy, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTableGroupColumnRenderIconFunction, InfiniteTableImperativeApi, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropColumnsMap, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, LightTheme, NumberFilterEditor, Scrollbars, StringFilterEditor, ThemeVars, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };

package/index.esm.css

@@ -1,4 +1,4 @@
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1ay27iMBTd8xWW2BRpXJEX0HQz0nyJYzvEIrGRYyjMqP8+dhoa4sQpqJ1qFpbFgt5zfe1zHz5ITaUQCvyZAQAh4znjTFFY7xGmcJmCpaTV85gt0LbHIExc9tDY3ebImJ3W2FjXTnOSgsBlW2nbRNy1MTutmxSEE85PKYicfGiy4qExF1zBmv1+I3MscodoKF2Nhe8woYuZDtJQu5nGxKMMdvbExWIHWTmY7BBrF5sNJEcVK88pYLygkikLgkUpZArm8cYsy4gwpnqHCybP18s4sjCZkIRKKBFhhzoFRyQfhjW6sJ0Q3m2lOHCSgpdC/8WyV4zDgrJtofTll8v9ybKXAhFYoXoHFT2p3nZym6GHMEl+XD46R3b4zl0cqSzRubfDVqLzhw5CX4ypsykBm5EO3BI3znwH2yNCGN86yEvcp5/mvme1NykoMkZMy7J3+TklZk2g29PCk+O80VSoi/P5E84D19EAi1tQpwWYiEck2m4NrEcQiUlE7JxfuzEseNOYunZXg9K9RtZCqjd4haSONOVwfYaJm3UwF5NtM69ys4bT4FDxC/TSgdGwAZtY7Vb4IKUeE7/MtzFYW4cvjKhC33B8r+keCAfZdJTLVcDBVoPDLEAtSkbAHK/Mmjg740dWs6zUKeWC29PqGnnfHERYsWN/g1qdTRiC6mLQhiNwJ6sj2CZfEGpm1uub0TolQfx0MzzTb1GQTMHfCxSicl+gN/lyhwOECulMwAPPBT7UlDQCydpAipepjnF3iXEUhPRbvmkVuz6MdT8INMcZTrB9nw7bdhintWrKfaS3DKww74w1dzKzRrB7wbjSaHrUXVhD/Z5qdmosRVk2IdBBiefZ6+yxNO3sFahXoF6BegXqFahXoF6BegXqFahXoN+mQLsXxEtRL0W9FPVS1EtRL0W9FPVS1EtRL0W/VYoSJHe2AO2FCJZBHNi57rWUrrNL04QoCiPXQ9EOGRyZdevTE2RhENrhv2r8OViNsnidxP+0esJYU2UX6PUAfafp+ueCT9Z/n6yfFSUMgYe9pDmVdTsCa1zQqpngcrdoMpi+/xvMLdm8M5+3ZfTenH5dVu/L6ycye09uP84uAK+z1780rAoBwCQAAA== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+1Xy27jIBTd5yuQsmmkUsWvpHU3I82XYMAxig0RkDSZUf59wHXqGBs3UdtZWaiqknMuF859cJNKITT4OwMAQsZzxpmmUO0QpnCZgqWk1esQFhjsKQgTHx5a3A9HFvaisUXXXjhJQeDDVgYb8bu2sBd9TkE4YvySgsirhxEr7oO54Boq9uddzCHPLaOWdDXkvuWEPmVaSi3t8zgnHlSwxROfii1l5VGyZax9ataUHFWsPKWA8YJKph0KFqWQKZjHz3Y5IMKYmh0unDxfL+PI4WRCEiqhRITtVQoOSD70c3ThGiG83Uix5yQFb4X5xsErxmFB2abQ5vLL5e7o4KVABFZIbaGmR93ZTm4y9BAmyePlz8TIdd+aiwOVJTp1dthIdPrUQJiLMX2yKeAq0pIb4YaVb2k7RAjjG494if/049p3UHeTgiILYlqWncvPKbFrhN2cFh49543GXF2MT18w7pkOOljcwjouwIg/ItFmY2kdgUhMIuLG/NqMYcHrwjS5u+ql7jVTCanf6RWSxtOYwfUZRm7W0nxKNsW8yu3qd4N9xS/USwVG/QKsfTVb4b2Upk38tp+GaE0evjGiC3PD4b3GayDsRdOTLlcOe1v1DrMASpSMgDle2TVydsYPTLGsNCHlgrvd6pp5Xx9EWLNDdwOlT9YNQaroleEA3avqALeOF4RGmfX6ZrYJSRC/3EzPzFsUJGP0jwSFqNwV6H18ucMAQo1MJOCe5wLvFSX1gORsIMXbWMX4q8QaCkK6JV+XipsfFt31HM1xhhPs3qflNhXGqdJ1ug/UlqUV9p1x+k5m1wB3JxjXhk0PpgoVNO+pUUdhKcqydoH2WrzOzrOn0pbzI3hqX5Lmi/p/aufTHppOU+s0tU5T6zS1TlPrNLVOU+s0tU5T6zS1/teplSC5vR5L7Wd3IO24DJZBHLix75SYybtLEYUoCiPfw9E0HRzZdetTFGRhELruv6sdelSOsnidxD+aTWFspHIT9rqhfsh0nv2qKGEIPOwkzalUTZUpXNCqbhJyu6gj2P64uCWad8bztojeG9Pvi+p9cf1CZO+J7efRBeA8O/8D9swiI8wYAAA= */
 :root {
   --infinite-space-0: 0rem;
   --infinite-space-1: 0.125rem;
@@ -61,7 +61,10 @@
   --infinite-row-hover-background: #dbdbdb;
   --infinite-row-pointer-events-while-scrolling: auto;
 }
-.light {
+.light,
+.infinite-light,
+.light:root,
+.infinite-light:root {
   --infinite-space-0: 0rem;
   --infinite-space-1: 0.125rem;
   --infinite-space-2: 0.25rem;
@@ -123,79 +126,7 @@
   --infinite-row-hover-background: #dbdbdb;
   --infinite-row-pointer-events-while-scrolling: auto;
 }
-.infinite-light {
-  --infinite-space-0: 0rem;
-  --infinite-space-1: 0.125rem;
-  --infinite-space-2: 0.25rem;
-  --infinite-space-3: 0.5rem;
-  --infinite-space-4: 0.75rem;
-  --infinite-space-5: 1rem;
-  --infinite-space-6: 1.25rem;
-  --infinite-space-7: 1.5rem;
-  --infinite-space-8: 2.25rem;
-  --infinite-space-9: 3rem;
-  --infinite-space-10: 4rem;
-  --infinite-font-size-0: 0.5rem;
-  --infinite-font-size-1: 0.625rem;
-  --infinite-font-size-2: 0.75rem;
-  --infinite-font-size-3: 0.875rem;
-  --infinite-font-size-4: 1rem;
-  --infinite-font-size-5: 1.25rem;
-  --infinite-font-size-6: 1.5rem;
-  --infinite-font-size-7: 2.25rem;
-  --infinite-font-family: inherit;
-  --infinite-color: #484848;
-  --infinite-accent-color: #ff7043;
-  --infinite-border-radius: var(--infinite-space-2);
-  --infinite-background: white;
-  --infinite-min-height: 100px;
-  --infinite-load-mask-text-background: rgba(255,255,255,0.8);
-  --infinite-load-mask-overlay-background: gray;
-  --infinite-load-mask-overlay-opacity: 0.3;
-  --infinite-load-mask-color: inherit;
-  --infinite-load-mask-padding: var(--infinite-space-5);
-  --infinite-load-mask-border-radius: var(--infinite-border-radius);
-  --infinite-header-cell-background: #ededed;
-  --infinite-header-cell-padding-x: var(--infinite-space-3);
-  --infinite-header-cell-padding-y: var(--infinite-space-3);
-  --infinite-header-cell-padding: var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ;
-  --infinite-header-cell-dragging-background: #d4d3d3;
-  --infinite-header-cell-icon-size: 16px;
-  --infinite-header-cell-sort-icon-margin: 16px;
-  --infinite-header-background: var(--infinite-header-cell-background);
-  --infinite-header-color: #6f6f6f;
-  --infinite-column-header-height: 30px;
-  --infinite-cell-color: currentColor;
-  --infinite-cell-border-width: 1px;
-  --infinite-cell-padding: var(--infinite-space-2) var(--infinite-space-3);
-  --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
-  --infinite-cell-border-invisible: none;
-  --infinite-cell-border-radius: var(--infinite-space-2);
-  --infinite-active-cell-border-style: dashed;
-  --infinite-active-cell-border-width: 1px;
-  --infinite-active-cell-border-color--r: 77;
-  --infinite-active-cell-border-color--g: 149;
-  --infinite-active-cell-border-color--b: 215;
-  --infinite-active-cell-background-alpha: 0.25;
-  --infinite-active-cell-background-alpha--table-unfocused: 0.1;
-  --infinite-row-background: var(--infinite-background);
-  --infinite-row-odd-background: #f6f6f6;
-  --infinite-group-row-background: #cbc5c5;
-  --infinite-group-row-column-nesting: 30px;
-  --infinite-row-hover-background: #dbdbdb;
-  --infinite-row-pointer-events-while-scrolling: auto;
-}
-.dark {
-  --infinite-background: #101419;
-  --infinite-cell-border: 1px solid #2a323d;
-  --infinite-header-color: #c3c3c3;
-  --infinite-header-cell-background: #1b2129;
-  --infinite-header-background: var(--infinite-header-cell-background);
-  --infinite-row-hover-background: #3b4754;
-  --infinite-row-background: var(--infinite-background);
-  --infinite-row-odd-background: #242a31;
-  --infinite-cell-color: #c3c3c3;
-}
+.dark,
 .infinite-dark {
   --infinite-background: #101419;
   --infinite-cell-border: 1px solid #2a323d;

package/index.esm.js

@@ -5029,6 +5029,8 @@ function decamelize(str, options) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
+var DarkTheme = { "var(--infinite-background)": "#101419", "var(--infinite-cell-border)": "1px solid #2a323d", "var(--infinite-header-color)": "#c3c3c3", "var(--infinite-header-cell-background)": "#1b2129", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-row-hover-background)": "#3b4754", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#242a31", "var(--infinite-cell-color)": "#c3c3c3" };
+var LightTheme = { "var(--infinite-space-0)": "0rem", "var(--infinite-space-1)": "0.125rem", "var(--infinite-space-2)": "0.25rem", "var(--infinite-space-3)": "0.5rem", "var(--infinite-space-4)": "0.75rem", "var(--infinite-space-5)": "1rem", "var(--infinite-space-6)": "1.25rem", "var(--infinite-space-7)": "1.5rem", "var(--infinite-space-8)": "2.25rem", "var(--infinite-space-9)": "3rem", "var(--infinite-space-10)": "4rem", "var(--infinite-font-size-0)": "0.5rem", "var(--infinite-font-size-1)": "0.625rem", "var(--infinite-font-size-2)": "0.75rem", "var(--infinite-font-size-3)": "0.875rem", "var(--infinite-font-size-4)": "1rem", "var(--infinite-font-size-5)": "1.25rem", "var(--infinite-font-size-6)": "1.5rem", "var(--infinite-font-size-7)": "2.25rem", "var(--infinite-font-family)": "inherit", "var(--infinite-color)": "#484848", "var(--infinite-accent-color)": "#ff7043", "var(--infinite-border-radius)": "var(--infinite-space-2)", "var(--infinite-background)": "white", "var(--infinite-min-height)": "100px", "var(--infinite-load-mask-text-background)": "rgba(255,255,255,0.8)", "var(--infinite-load-mask-overlay-background)": "gray", "var(--infinite-load-mask-overlay-opacity)": "0.3", "var(--infinite-load-mask-color)": "inherit", "var(--infinite-load-mask-padding)": "var(--infinite-space-5)", "var(--infinite-load-mask-border-radius)": "var(--infinite-border-radius)", "var(--infinite-header-cell-background)": "#ededed", "var(--infinite-header-cell-padding-x)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding-y)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding)": "var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ", "var(--infinite-header-cell-dragging-background)": "#d4d3d3", "var(--infinite-header-cell-icon-size)": "16px", "var(--infinite-header-cell-sort-icon-margin)": "16px", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-header-color)": "#6f6f6f", "var(--infinite-column-header-height)": "30px", "var(--infinite-cell-color)": "currentColor", "var(--infinite-cell-border-width)": "1px", "var(--infinite-cell-padding)": "var(--infinite-space-2) var(--infinite-space-3)", "var(--infinite-cell-border)": "var(--infinite-cell-border-width) solid #c6c6c6", "var(--infinite-cell-border-invisible)": "none", "var(--infinite-cell-border-radius)": "var(--infinite-space-2)", "var(--infinite-active-cell-border-style)": "dashed", "var(--infinite-active-cell-border-width)": "1px", "var(--infinite-active-cell-border-color--r)": "77", "var(--infinite-active-cell-border-color--g)": "149", "var(--infinite-active-cell-border-color--b)": "215", "var(--infinite-active-cell-background-alpha)": "0.25", "var(--infinite-active-cell-background-alpha--table-unfocused)": "0.1", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#f6f6f6", "var(--infinite-group-row-background)": "#cbc5c5", "var(--infinite-group-row-column-nesting)": "30px", "var(--infinite-row-hover-background)": "#dbdbdb", "var(--infinite-row-pointer-events-while-scrolling)": "auto" };
 var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
@@ -5174,12 +5176,11 @@ function InfiniteTableColumnCellFn(props) {
     });
   }
   const onClick = useCallback11(() => {
-    const { activeRowIndex: activeRowIndex2, activeCellIndex } = getState();
-    if (activeRowIndex2 !== void 0 && keyboardNavigation === "row") {
+    if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
     }
-    if (activeCellIndex !== void 0 && keyboardNavigation === "cell") {
+    if (keyboardNavigation === "cell") {
       componentActions.activeCellIndex = [
         rowIndex,
         column.computedVisibleIndex
@@ -9405,7 +9406,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.5"
+      version: "0.3.8"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9715,7 +9716,7 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
-    keyboardNavigation: (keyboardNavigation) => keyboardNavigation || "cell",
+    keyboardNavigation: (keyboardNavigation) => keyboardNavigation != null ? keyboardNavigation : "cell",
     activeRowIndex: 1,
     activeCellIndex: 1,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
@@ -9961,14 +9962,17 @@ InfiniteTable.defaultProps = {
   columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
 };
 export {
+  DarkTheme,
   DataSource,
   DataSourceActionType,
   GroupRowsState,
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
+  LightTheme,
   NumberFilterEditor,
   StringFilterEditor,
+  ThemeVars,
   debounce,
   defaultFilterEditors,
   defaultFilterTypes,

package/index.js

@@ -626,14 +626,17 @@ var require_vanilla_extract_recipes_createRuntimeFn_cjs = __commonJS({
 
 // src/index.tsx
 __export(exports, {
+  DarkTheme: () => DarkTheme,
   DataSource: () => DataSource,
   DataSourceActionType: () => DataSourceActionType,
   GroupRowsState: () => GroupRowsState,
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
+  LightTheme: () => LightTheme,
   NumberFilterEditor: () => NumberFilterEditor,
   StringFilterEditor: () => StringFilterEditor,
+  ThemeVars: () => ThemeVars,
   debounce: () => debounce,
   defaultFilterEditors: () => defaultFilterEditors,
   defaultFilterTypes: () => defaultFilterTypes,
@@ -4966,6 +4969,8 @@ function decamelize(str, options) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
+var DarkTheme = { "var(--infinite-background)": "#101419", "var(--infinite-cell-border)": "1px solid #2a323d", "var(--infinite-header-color)": "#c3c3c3", "var(--infinite-header-cell-background)": "#1b2129", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-row-hover-background)": "#3b4754", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#242a31", "var(--infinite-cell-color)": "#c3c3c3" };
+var LightTheme = { "var(--infinite-space-0)": "0rem", "var(--infinite-space-1)": "0.125rem", "var(--infinite-space-2)": "0.25rem", "var(--infinite-space-3)": "0.5rem", "var(--infinite-space-4)": "0.75rem", "var(--infinite-space-5)": "1rem", "var(--infinite-space-6)": "1.25rem", "var(--infinite-space-7)": "1.5rem", "var(--infinite-space-8)": "2.25rem", "var(--infinite-space-9)": "3rem", "var(--infinite-space-10)": "4rem", "var(--infinite-font-size-0)": "0.5rem", "var(--infinite-font-size-1)": "0.625rem", "var(--infinite-font-size-2)": "0.75rem", "var(--infinite-font-size-3)": "0.875rem", "var(--infinite-font-size-4)": "1rem", "var(--infinite-font-size-5)": "1.25rem", "var(--infinite-font-size-6)": "1.5rem", "var(--infinite-font-size-7)": "2.25rem", "var(--infinite-font-family)": "inherit", "var(--infinite-color)": "#484848", "var(--infinite-accent-color)": "#ff7043", "var(--infinite-border-radius)": "var(--infinite-space-2)", "var(--infinite-background)": "white", "var(--infinite-min-height)": "100px", "var(--infinite-load-mask-text-background)": "rgba(255,255,255,0.8)", "var(--infinite-load-mask-overlay-background)": "gray", "var(--infinite-load-mask-overlay-opacity)": "0.3", "var(--infinite-load-mask-color)": "inherit", "var(--infinite-load-mask-padding)": "var(--infinite-space-5)", "var(--infinite-load-mask-border-radius)": "var(--infinite-border-radius)", "var(--infinite-header-cell-background)": "#ededed", "var(--infinite-header-cell-padding-x)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding-y)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding)": "var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ", "var(--infinite-header-cell-dragging-background)": "#d4d3d3", "var(--infinite-header-cell-icon-size)": "16px", "var(--infinite-header-cell-sort-icon-margin)": "16px", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-header-color)": "#6f6f6f", "var(--infinite-column-header-height)": "30px", "var(--infinite-cell-color)": "currentColor", "var(--infinite-cell-border-width)": "1px", "var(--infinite-cell-padding)": "var(--infinite-space-2) var(--infinite-space-3)", "var(--infinite-cell-border)": "var(--infinite-cell-border-width) solid #c6c6c6", "var(--infinite-cell-border-invisible)": "none", "var(--infinite-cell-border-radius)": "var(--infinite-space-2)", "var(--infinite-active-cell-border-style)": "dashed", "var(--infinite-active-cell-border-width)": "1px", "var(--infinite-active-cell-border-color--r)": "77", "var(--infinite-active-cell-border-color--g)": "149", "var(--infinite-active-cell-border-color--b)": "215", "var(--infinite-active-cell-background-alpha)": "0.25", "var(--infinite-active-cell-background-alpha--table-unfocused)": "0.1", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#f6f6f6", "var(--infinite-group-row-background)": "#cbc5c5", "var(--infinite-group-row-column-nesting)": "30px", "var(--infinite-row-hover-background)": "#dbdbdb", "var(--infinite-row-pointer-events-while-scrolling)": "auto" };
 var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
@@ -5107,12 +5112,11 @@ function InfiniteTableColumnCellFn(props) {
     });
   }
   const onClick = (0, import_react25.useCallback)(() => {
-    const { activeRowIndex: activeRowIndex2, activeCellIndex } = getState();
-    if (activeRowIndex2 !== void 0 && keyboardNavigation === "row") {
+    if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
     }
-    if (activeCellIndex !== void 0 && keyboardNavigation === "cell") {
+    if (keyboardNavigation === "cell") {
       componentActions.activeCellIndex = [
         rowIndex,
         column.computedVisibleIndex
@@ -9321,7 +9325,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.5"
+      version: "0.3.8"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9631,7 +9635,7 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
-    keyboardNavigation: (keyboardNavigation) => keyboardNavigation || "cell",
+    keyboardNavigation: (keyboardNavigation) => keyboardNavigation != null ? keyboardNavigation : "cell",
     activeRowIndex: 1,
     activeCellIndex: 1,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.3.5",
+  "version": "0.3.8",
   "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": 1654528141421
+  "publishedAt": 1654613192511
 }