@infinite-table/infinite-react 0.3.7 โ†’ 0.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +45 -9
  2. package/index.css +6 -75
  3. package/index.d.ts +1 -2
  4. package/index.esm.css +6 -75
  5. package/index.esm.js +6 -2
  6. package/index.js +6 -2
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -16,26 +16,47 @@
16
16
  <!-- START doctoc generated TOC please keep comment here to allow auto update -->
17
17
  <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
18
18
 
19
+ - [What is Infinite?](#what-is-infinite)
19
20
  - [Installation](#installation)
20
- - [Documentation](#documentation)
21
+ - [๐Ÿ“„ Extensive documentation](#-extensive-documentation)
21
22
  - [โค๏ธ TypeScript](#-typescript)
23
+ - [๐Ÿข Enterprise-ready](#-enterprise-ready)
24
+ - [๐Ÿ”’ Secure by default](#-secure-by-default)
25
+ - [๐Ÿ“ฆ Small bundle size](#-small-bundle-size)
26
+ - [๐Ÿงช Automated end-to-end tests](#%F0%9F%A7%AA-automated-end-to-end-tests)
22
27
  - [๐ŸŽจ Themable](#-themable)
23
- - [Testing](#testing)
24
28
  - [License](#license)
25
29
 
26
30
  <!-- END doctoc generated TOC please keep comment here to allow auto update -->
27
31
 
32
+
33
+ ## What is Infinite?
34
+
35
+ 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:
36
+
37
+ * [sorting](https://infinite-table.com/docs/latest/learn/working-with-data/sorting)
38
+ * [row grouping](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows) - both server-side and client-side
39
+ * [pivoting](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/pivoting) - both server-side and client-side
40
+ * [aggregations](https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/grouping-rows#aggregations)
41
+ * [live pagination](https://infinite-table.com/docs/latest/learn/working-with-data/live-pagination)
42
+ * [lazy loading](https://infinite-table.com/docs/latest/learn/working-with-data/lazy-loading)
43
+ * [keyboard navigation](https://infinite-table.com/docs/latest/learn/keyboard-navigation/navigating-cells)
44
+ * [fixed and flexible columns](https://infinite-table.com/docs/latest/learn/columns/fixed-and-flexible-size)
45
+ * [column grouping](https://infinite-table.com/docs/latest/learn/column-groups)
46
+ * [theming](https://infinite-table.com/docs/latest/learn/theming)
47
+
48
+
28
49
  ## Installation
29
50
 
30
51
  ```bash
31
52
  npm install @infinite-table/infinite-react --save
32
53
  ```
33
54
 
34
- ## [Documentation](https://infinite-table.com/docs)
55
+ ## [๐Ÿ“„ Extensive documentation](https://infinite-table.com/docs)
35
56
 
36
57
  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.
37
58
 
38
- **[Visit API docs](https://infinite-table.com/docs)**
59
+ **[Visit our docs and getting-started guide](https://infinite-table.com/docs)**
39
60
 
40
61
  ## โค๏ธ TypeScript
41
62
 
@@ -43,6 +64,25 @@ It's fully typed and offers you great developer experience to help you get up an
43
64
 
44
65
  > The TypeScript typings file is included in the npm package - you don't have to download an additional **@types** package.
45
66
 
67
+ ## ๐Ÿข Enterprise-ready
68
+
69
+ 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.
70
+
71
+ 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.
72
+
73
+ ### ๐Ÿ”’ Secure by default
74
+
75
+ We take security seriously and only have a total of 3 dependencies in our full dependency graph - and this number will only go down.
76
+
77
+ ### ๐Ÿ“ฆ Small bundle size
78
+
79
+ Our bundle size is under `200kB` and we're [keeping it small](https://bundlephobia.com/package/@infinite-table/infinite-react).
80
+
81
+ ### ๐Ÿงช Automated end-to-end tests
82
+
83
+ 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.
84
+
85
+
46
86
  ## ๐ŸŽจ Themable
47
87
 
48
88
  `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"
54
94
  This file includes both the light and the dark themes.
55
95
 
56
96
 
57
- ## Testing
58
-
59
- Infinite Table is built with extensive end-to-end testing via headless chrome (more exactly, puppeteer).
60
-
61
97
  ## License
62
98
 
63
- [Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)
99
+ Both Open and [Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* 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== */
1
+ /* 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= */
2
2
  :root {
3
3
  --infinite-space-0: 0rem;
4
4
  --infinite-space-1: 0.125rem;
@@ -61,7 +61,10 @@
61
61
  --infinite-row-hover-background: #dbdbdb;
62
62
  --infinite-row-pointer-events-while-scrolling: auto;
63
63
  }
64
- .light {
64
+ .light,
65
+ .infinite-light,
66
+ .light:root,
67
+ .infinite-light:root {
65
68
  --infinite-space-0: 0rem;
66
69
  --infinite-space-1: 0.125rem;
67
70
  --infinite-space-2: 0.25rem;
@@ -123,79 +126,7 @@
123
126
  --infinite-row-hover-background: #dbdbdb;
124
127
  --infinite-row-pointer-events-while-scrolling: auto;
125
128
  }
126
- .infinite-light {
127
- --infinite-space-0: 0rem;
128
- --infinite-space-1: 0.125rem;
129
- --infinite-space-2: 0.25rem;
130
- --infinite-space-3: 0.5rem;
131
- --infinite-space-4: 0.75rem;
132
- --infinite-space-5: 1rem;
133
- --infinite-space-6: 1.25rem;
134
- --infinite-space-7: 1.5rem;
135
- --infinite-space-8: 2.25rem;
136
- --infinite-space-9: 3rem;
137
- --infinite-space-10: 4rem;
138
- --infinite-font-size-0: 0.5rem;
139
- --infinite-font-size-1: 0.625rem;
140
- --infinite-font-size-2: 0.75rem;
141
- --infinite-font-size-3: 0.875rem;
142
- --infinite-font-size-4: 1rem;
143
- --infinite-font-size-5: 1.25rem;
144
- --infinite-font-size-6: 1.5rem;
145
- --infinite-font-size-7: 2.25rem;
146
- --infinite-font-family: inherit;
147
- --infinite-color: #484848;
148
- --infinite-accent-color: #ff7043;
149
- --infinite-border-radius: var(--infinite-space-2);
150
- --infinite-background: white;
151
- --infinite-min-height: 100px;
152
- --infinite-load-mask-text-background: rgba(255,255,255,0.8);
153
- --infinite-load-mask-overlay-background: gray;
154
- --infinite-load-mask-overlay-opacity: 0.3;
155
- --infinite-load-mask-color: inherit;
156
- --infinite-load-mask-padding: var(--infinite-space-5);
157
- --infinite-load-mask-border-radius: var(--infinite-border-radius);
158
- --infinite-header-cell-background: #ededed;
159
- --infinite-header-cell-padding-x: var(--infinite-space-3);
160
- --infinite-header-cell-padding-y: var(--infinite-space-3);
161
- --infinite-header-cell-padding: var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ;
162
- --infinite-header-cell-dragging-background: #d4d3d3;
163
- --infinite-header-cell-icon-size: 16px;
164
- --infinite-header-cell-sort-icon-margin: 16px;
165
- --infinite-header-background: var(--infinite-header-cell-background);
166
- --infinite-header-color: #6f6f6f;
167
- --infinite-column-header-height: 30px;
168
- --infinite-cell-color: currentColor;
169
- --infinite-cell-border-width: 1px;
170
- --infinite-cell-padding: var(--infinite-space-2) var(--infinite-space-3);
171
- --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
172
- --infinite-cell-border-invisible: none;
173
- --infinite-cell-border-radius: var(--infinite-space-2);
174
- --infinite-active-cell-border-style: dashed;
175
- --infinite-active-cell-border-width: 1px;
176
- --infinite-active-cell-border-color--r: 77;
177
- --infinite-active-cell-border-color--g: 149;
178
- --infinite-active-cell-border-color--b: 215;
179
- --infinite-active-cell-background-alpha: 0.25;
180
- --infinite-active-cell-background-alpha--table-unfocused: 0.1;
181
- --infinite-row-background: var(--infinite-background);
182
- --infinite-row-odd-background: #f6f6f6;
183
- --infinite-group-row-background: #cbc5c5;
184
- --infinite-group-row-column-nesting: 30px;
185
- --infinite-row-hover-background: #dbdbdb;
186
- --infinite-row-pointer-events-while-scrolling: auto;
187
- }
188
- .dark {
189
- --infinite-background: #101419;
190
- --infinite-cell-border: 1px solid #2a323d;
191
- --infinite-header-color: #c3c3c3;
192
- --infinite-header-cell-background: #1b2129;
193
- --infinite-header-background: var(--infinite-header-cell-background);
194
- --infinite-row-hover-background: #3b4754;
195
- --infinite-row-background: var(--infinite-background);
196
- --infinite-row-odd-background: #242a31;
197
- --infinite-cell-color: #c3c3c3;
198
- }
129
+ .dark,
199
130
  .infinite-dark {
200
131
  --infinite-background: #101419;
201
132
  --infinite-cell-border: 1px solid #2a323d;
package/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as _vanilla_extract_private from '@vanilla-extract/private';
2
1
  import * as React$1 from 'react';
3
2
  import { RefCallback, MutableRefObject, CSSProperties, HTMLProps } from 'react';
4
3
 
@@ -1605,7 +1604,7 @@ declare function InfiniteTable<T>(props: InfiniteTableProps<T>): JSX.Element;
1605
1604
  declare namespace InfiniteTable {
1606
1605
  var defaultProps: {
1607
1606
  rowHeight: number;
1608
- columnHeaderHeight: _vanilla_extract_private.CSSVarFunction;
1607
+ columnHeaderHeight: string;
1609
1608
  };
1610
1609
  }
1611
1610
 
package/index.esm.css CHANGED
@@ -1,4 +1,4 @@
1
- /* 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== */
1
+ /* 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= */
2
2
  :root {
3
3
  --infinite-space-0: 0rem;
4
4
  --infinite-space-1: 0.125rem;
@@ -61,7 +61,10 @@
61
61
  --infinite-row-hover-background: #dbdbdb;
62
62
  --infinite-row-pointer-events-while-scrolling: auto;
63
63
  }
64
- .light {
64
+ .light,
65
+ .infinite-light,
66
+ .light:root,
67
+ .infinite-light:root {
65
68
  --infinite-space-0: 0rem;
66
69
  --infinite-space-1: 0.125rem;
67
70
  --infinite-space-2: 0.25rem;
@@ -123,79 +126,7 @@
123
126
  --infinite-row-hover-background: #dbdbdb;
124
127
  --infinite-row-pointer-events-while-scrolling: auto;
125
128
  }
126
- .infinite-light {
127
- --infinite-space-0: 0rem;
128
- --infinite-space-1: 0.125rem;
129
- --infinite-space-2: 0.25rem;
130
- --infinite-space-3: 0.5rem;
131
- --infinite-space-4: 0.75rem;
132
- --infinite-space-5: 1rem;
133
- --infinite-space-6: 1.25rem;
134
- --infinite-space-7: 1.5rem;
135
- --infinite-space-8: 2.25rem;
136
- --infinite-space-9: 3rem;
137
- --infinite-space-10: 4rem;
138
- --infinite-font-size-0: 0.5rem;
139
- --infinite-font-size-1: 0.625rem;
140
- --infinite-font-size-2: 0.75rem;
141
- --infinite-font-size-3: 0.875rem;
142
- --infinite-font-size-4: 1rem;
143
- --infinite-font-size-5: 1.25rem;
144
- --infinite-font-size-6: 1.5rem;
145
- --infinite-font-size-7: 2.25rem;
146
- --infinite-font-family: inherit;
147
- --infinite-color: #484848;
148
- --infinite-accent-color: #ff7043;
149
- --infinite-border-radius: var(--infinite-space-2);
150
- --infinite-background: white;
151
- --infinite-min-height: 100px;
152
- --infinite-load-mask-text-background: rgba(255,255,255,0.8);
153
- --infinite-load-mask-overlay-background: gray;
154
- --infinite-load-mask-overlay-opacity: 0.3;
155
- --infinite-load-mask-color: inherit;
156
- --infinite-load-mask-padding: var(--infinite-space-5);
157
- --infinite-load-mask-border-radius: var(--infinite-border-radius);
158
- --infinite-header-cell-background: #ededed;
159
- --infinite-header-cell-padding-x: var(--infinite-space-3);
160
- --infinite-header-cell-padding-y: var(--infinite-space-3);
161
- --infinite-header-cell-padding: var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ;
162
- --infinite-header-cell-dragging-background: #d4d3d3;
163
- --infinite-header-cell-icon-size: 16px;
164
- --infinite-header-cell-sort-icon-margin: 16px;
165
- --infinite-header-background: var(--infinite-header-cell-background);
166
- --infinite-header-color: #6f6f6f;
167
- --infinite-column-header-height: 30px;
168
- --infinite-cell-color: currentColor;
169
- --infinite-cell-border-width: 1px;
170
- --infinite-cell-padding: var(--infinite-space-2) var(--infinite-space-3);
171
- --infinite-cell-border: var(--infinite-cell-border-width) solid #c6c6c6;
172
- --infinite-cell-border-invisible: none;
173
- --infinite-cell-border-radius: var(--infinite-space-2);
174
- --infinite-active-cell-border-style: dashed;
175
- --infinite-active-cell-border-width: 1px;
176
- --infinite-active-cell-border-color--r: 77;
177
- --infinite-active-cell-border-color--g: 149;
178
- --infinite-active-cell-border-color--b: 215;
179
- --infinite-active-cell-background-alpha: 0.25;
180
- --infinite-active-cell-background-alpha--table-unfocused: 0.1;
181
- --infinite-row-background: var(--infinite-background);
182
- --infinite-row-odd-background: #f6f6f6;
183
- --infinite-group-row-background: #cbc5c5;
184
- --infinite-group-row-column-nesting: 30px;
185
- --infinite-row-hover-background: #dbdbdb;
186
- --infinite-row-pointer-events-while-scrolling: auto;
187
- }
188
- .dark {
189
- --infinite-background: #101419;
190
- --infinite-cell-border: 1px solid #2a323d;
191
- --infinite-header-color: #c3c3c3;
192
- --infinite-header-cell-background: #1b2129;
193
- --infinite-header-background: var(--infinite-header-cell-background);
194
- --infinite-row-hover-background: #3b4754;
195
- --infinite-row-background: var(--infinite-background);
196
- --infinite-row-odd-background: #242a31;
197
- --infinite-cell-color: #c3c3c3;
198
- }
129
+ .dark,
199
130
  .infinite-dark {
200
131
  --infinite-background: #101419;
201
132
  --infinite-cell-border: 1px solid #2a323d;
package/index.esm.js CHANGED
@@ -5030,6 +5030,7 @@ function decamelize(str, options) {
5030
5030
 
5031
5031
  // src/components/InfiniteTable/theme.css.ts
5032
5032
  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)" } } };
5033
+ var columnHeaderHeightName = "column-header-height";
5033
5034
 
5034
5035
  // src/components/InfiniteTable/InfiniteCls.css.ts
5035
5036
  var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -9404,7 +9405,7 @@ var useLicense = (licenseKey = "") => {
9404
9405
  const valid = useMemo12(() => {
9405
9406
  let valid2 = isValidLicense(licenseKey, {
9406
9407
  publishedAt: 1624970570587,
9407
- version: "0.3.7"
9408
+ version: "0.3.10"
9408
9409
  });
9409
9410
  if (!licenseKey && !valid2 && isInsidePlayground) {
9410
9411
  return true;
@@ -9773,6 +9774,9 @@ var mapPropsToState2 = (params) => {
9773
9774
  };
9774
9775
  };
9775
9776
 
9777
+ // src/components/InfiniteTable/utils/toCSSVarName.ts
9778
+ var toCSSVarName = (value) => `--infinite-${value}`;
9779
+
9776
9780
  // src/components/InfiniteTable/index.tsx
9777
9781
  var InfiniteTableClassName = internalProps.rootClassName;
9778
9782
  var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -9957,7 +9961,7 @@ function InfiniteTable(props) {
9957
9961
  }
9958
9962
  InfiniteTable.defaultProps = {
9959
9963
  rowHeight: 40,
9960
- columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
9964
+ columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
9961
9965
  };
9962
9966
  export {
9963
9967
  DataSource,
package/index.js CHANGED
@@ -4967,6 +4967,7 @@ function decamelize(str, options) {
4967
4967
 
4968
4968
  // src/components/InfiniteTable/theme.css.ts
4969
4969
  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)" } } };
4970
+ var columnHeaderHeightName = "column-header-height";
4970
4971
 
4971
4972
  // src/components/InfiniteTable/InfiniteCls.css.ts
4972
4973
  var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -9320,7 +9321,7 @@ var useLicense = (licenseKey = "") => {
9320
9321
  const valid = (0, import_react43.useMemo)(() => {
9321
9322
  let valid2 = isValidLicense(licenseKey, {
9322
9323
  publishedAt: 1624970570587,
9323
- version: "0.3.7"
9324
+ version: "0.3.10"
9324
9325
  });
9325
9326
  if (!licenseKey && !valid2 && isInsidePlayground) {
9326
9327
  return true;
@@ -9689,6 +9690,9 @@ var mapPropsToState2 = (params) => {
9689
9690
  };
9690
9691
  };
9691
9692
 
9693
+ // src/components/InfiniteTable/utils/toCSSVarName.ts
9694
+ var toCSSVarName = (value) => `--infinite-${value}`;
9695
+
9692
9696
  // src/components/InfiniteTable/index.tsx
9693
9697
  var InfiniteTableClassName = internalProps.rootClassName;
9694
9698
  var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -9873,5 +9877,5 @@ function InfiniteTable(props) {
9873
9877
  }
9874
9878
  InfiniteTable.defaultProps = {
9875
9879
  rowHeight: 40,
9876
- columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
9880
+ columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
9877
9881
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@infinite-table/infinite-react",
3
3
  "description": "Infinite Table for React",
4
- "version": "0.3.7",
4
+ "version": "0.3.10",
5
5
  "main": "index.js",
6
6
  "module": "index.esm.js",
7
7
  "typings": "index.d.ts",
@@ -14,5 +14,5 @@
14
14
  },
15
15
  "license": "Commercial & Open Source",
16
16
  "//": "will be updated at build time",
17
- "publishedAt": 1654554533868
17
+ "publishedAt": 1654638457164
18
18
  }