@infinite-table/infinite-react 0.0.1-canary.10

package/README.md

@@ -0,0 +1,123 @@
+
+<div align="center">
+
+<h1>
+<b>Infinite Table</b>
+</h1>
+<h3> huge datasets are no longer a problem</h3>
+  <a href="https://infinite-table.com">
+    <img width="150px" height="170px" alt="InfiniteTable Logo" src="https://infinite-table.com/logo-infinite.svg">
+  </a>
+
+</div>
+
+## Table Of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Installation](#installation)
+- [Documentation](#documentation)
+- [Development process](#development-process)
+  - [Running the docs](#running-the-docs)
+- [Testing](#testing)
+  - [Testing in development](#testing-in-development)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+```bash
+npm install @infinite-table/infinite-react --save
+```
+
+## [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)**
+
+## Development process
+
+You can start the examples by running:
+
+```bash
+npm run dev
+```
+
+### Running the docs
+
+```bash
+npm run docs
+```
+<!-- 
+### HTML Element classNames
+
+- The table has the `ITable` className, and all HTML elements are prefixed with that.
+
+- All meaningful table parts (table row, header, cell) keep capitalized names, for example:
+
+  - `ITableRow`
+  - `ITableHeader`
+  - `ITableCell` - all cells, both in body and in header
+  - `ITableHeaderCell` - cells in header
+  - `ITableColumnCell` - cells in body rows
+
+- Other HTML elements, which are nested inside those table parts, will be prefixed with the table part where they are nested, followed by `_`. Example:
+
+  - `ITableCell_content`
+
+### CSS variables
+
+There are 2 kinds of variables:
+
+- top-level
+- component specific
+
+All CSS variables meant primarily to be applied to a specific css property, will end up with `__<property-name>`, like this:
+
+- `--it__border-radius`
+
+#### CSS top-level variables
+
+Those are prefixed with `at-`. Examples:
+
+- `--it-font-size-0`
+- `--it-space-0`
+- `--it-space-1`
+- `--it-color-....`
+
+The ones meant primarily for a CSS property name will end with `__<property-name>`, like this:
+
+- `--it__border-radius` -->
+
+
+
+## Testing
+
+Infinite Table is built with extensive end-to-end testing via headless chrome (more exactly, puppeteer).
+To execute the tests you have to run:
+
+```bash
+$ npm run test
+```
+
+Test pages are found in [tests folder](./source/examples/src/pages/tests) - which is part of a nextjs app where every file ending with `.page.tsx` is a page/route, while it's sibling file with the same name, but ending in `.test.tsx` is the actual test code. The test code is visiting the sibling page/route, to load the page and executes assertions against the test page.
+
+The test command command above does 3 things:
+ 
+ * compiles the nextjs app found in the [examples folder](./source/examples) - runs `next build && next export`, which creates an `out` folder with the resulting examples/tests app
+ * starts a webserver that serves the generated `out` folder on [localhost:3000](http://localhost:3000)
+ * runs jest+puppeteer against the app served at [localhost:3000](http://localhost:3000)
+
+### Testing in development
+
+If you want to run the tests in dev mode, to get feedback sooner, you need to run the following (in the [source/examples folder](./source/examples)):
+
+ * `npm run dev` - to run the nextjs app in development, on port `3000`
+ * `npm run test:watch` to run jest on changed files - optionally add a test path pattern like `npm run test:watch -- --testPathPattern=x/y/z`
+
+## License 
+
+[Commercial License](https://github.com/infinite-table/react-table/blob/master/source/LICENSE.md)

package/index.css

@@ -0,0 +1,422 @@
+/**
+ * These variables are not component specific.
+ */
+:root {
+  --it-space-0: 0rem;
+  /* 0px when 1rem=16px */
+  --it-space-1: 0.125rem;
+  /* 2px when 1rem=16px */
+  --it-space-2: 0.25rem;
+  /* 4px when 1rem=16px */
+  --it-space-3: 0.5rem;
+  /* 8px when 1rem=16px */
+  --it-space-4: 0.75rem;
+  /* 12px when 1rem=16px */
+  --it-space-5: 1rem;
+  --it-space-6: 1.25rem;
+  /* 20px when 1rem=16px */
+  --it-space-7: 1.5rem;
+  /* 24px when 1rem=16px */
+  --it-space-8: 2.25rem;
+  /* 36px when 1rem=16px */
+  --it-space-9: 3rem;
+  /* 48px when 1rem=16px */
+  --it-space-10: 4rem;
+  /* 64px when 1rem=16px */
+  --it-font-size-0: 0.5rem;
+  /* 8px when 1rem=16px */
+  --it-font-size-1: 0.625rem;
+  /* 10px when 1rem=16px */
+  --it-font-size-2: 0.75rem;
+  /* 12px when 1rem=16px */
+  --it-font-size-3: 0.875rem;
+  /* 14px when 1rem=16px */
+  --it-font-size-4: 1rem;
+  --it-font-size-5: 1.25rem;
+  /* 20px when 1rem=16px */
+  --it-font-size-6: 1.5rem;
+  /* 24px when 1rem=16px */
+  --it-font-size-7: 2.25rem;
+  /* 36px when 1rem=16px */
+  --it__border-radius: var(--it-space-2);
+  --it-color-brand: #133048;
+  --it-color-neutral-100: #f7fafc;
+  --it-color-neutral-200: #edf2f7;
+  --it-color-neutral-300: #e2e8f0;
+  --it-color-neutral-400: #cbd5e0;
+  --it-color-neutral-500: #a0aec0;
+  --it-color-neutral-600: #718096;
+  --it-color-neutral-700: #4a5568;
+  --it-color-neutral-800: #2d3748;
+  --it-color-neutral-900: #1a202c;
+}
+
+.it__align-items\=center {
+  align-items: center;
+}
+
+.it__align-items\=stretch {
+  align-items: stretch;
+}
+
+.it__justify-content\=flex-start {
+  justify-content: flex-start;
+}
+
+.it__justify-content\=flex-end {
+  justify-content: flex-end;
+}
+
+.it__justify-content\=center {
+  justify-content: center;
+}
+
+.it__cursor\=pointer {
+  cursor: pointer;
+}
+
+.it__overflow\=hidden {
+  overflow: hidden;
+}
+
+.it__overflow\=visible {
+  overflow: visible;
+}
+
+.it__overflow\=auto {
+  overflow: auto;
+}
+
+.it__overflow-x\=hidden {
+  overflow-x: hidden;
+}
+
+.it__overflow-x\=visible {
+  overflow-x: visible;
+}
+
+.it__overflow-x\=auto {
+  overflow-x: auto;
+}
+
+.it__overflow-y\=hidden {
+  overflow-y: hidden;
+}
+
+.it__overflow-y\=visible {
+  overflow-y: visible;
+}
+
+.it__overflow-y\=auto {
+  overflow-y: auto;
+}
+
+.it__height\=0 {
+  height: 0;
+}
+
+.it__height\=100\% {
+  height: 100%;
+}
+
+.it__width\=0 {
+  width: 0;
+}
+
+.it__width\=100\% {
+  width: 100%;
+}
+
+.it__top\=0 {
+  top: 0;
+}
+
+.it__top\=100\% {
+  top: 100%;
+}
+
+.it__left\=0 {
+  left: 0;
+}
+
+.it__left\=100\% {
+  left: 100%;
+}
+
+.it__transform\=translate3D000 {
+  transform: translate3d(0, 0, 0);
+}
+
+.it__will-change\=transform {
+  will-change: transform;
+}
+
+.it__position\=relative {
+  position: relative;
+}
+
+.it__position\=absolute {
+  position: absolute;
+}
+
+.it__position\=fixed {
+  position: fixed;
+}
+
+.it__display\=flex {
+  display: flex;
+}
+
+.it__flex-flow\=row {
+  flex-flow: row;
+}
+
+.it__flex-flow\=column {
+  flex-flow: column;
+}
+
+.it__white-space\=nowrap {
+  white-space: nowrap;
+}
+
+.it__text-overflow\=ellipsis {
+  text-overflow: ellipsis;
+}
+
+.it__user-select\=none {
+  user-select: none;
+}
+
+.IT-VirtualScrollContainer {
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.IT-VirtualScrollContainer, .IT-VirtualScrollContainer:before, .IT-VirtualScrollContainer:after, .IT-VirtualScrollContainer *, .IT-VirtualScrollContainer *:before, .IT-VirtualScrollContainer *:after {
+  box-sizing: border-box;
+}
+.IT-VirtualScrollContainer > :first-child {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+}
+
+.IList, .IList:before, .IList:after, .IList *, .IList *:before, .IList *:after {
+  box-sizing: border-box;
+}
+.IList--vertical {
+  display: inline-block;
+}
+
+.IListItemRoot > :first-child {
+  height: inherit;
+}
+
+:root {
+  --ITable__font-family: inherit;
+  --ITable__color: #484848;
+  --ITable__background: white;
+  --ITable__min-height: 100px;
+  --ITableCell__border-radius: var(--it-space-2);
+  --ITableHeader__color: #6f6f6f;
+  --ITableHeaderCell__background: #ededed;
+  --ITableHeader__background: var(--ITableHeaderCell__background);
+  --ITableHeaderCell--dragging__background: #d4d3d3;
+  --ITableHeaderCell-icon-size: 16px;
+  --ITableCell__border-width: 1px;
+  --ITableCell__border: var(--ITableCell__border-width) solid #c6c6c6;
+  --ITableCell__padding: var(--it-space-2) var(--it-space-3);
+  --ITableHeaderCell__padding: var(--it-space-3) var(--it-space-3);
+  --ITableRow__color: inherit;
+  --ITableRow__background: var(--ITable__background, transparent);
+  --ITableRow--odd__background: #f6f6f6;
+  --ITableRow-group-row__background: #cbc5c5;
+  --ITableRow-group-column-nesting: 30px;
+  --ITableRow--hover__background: #dbdbdb;
+  --ITable--theme: light;
+  --ITableHeader__height: 30px;
+  --ITable-accent__color: #ff7043;
+}
+
+.it--theme-dark {
+  --ITable__background: #101419;
+  --ITableHeader__color: #c3c3c3;
+  --ITableHeaderCell__background: black;
+  --ITableHeader__background: var(--ITableHeaderCell__background);
+  --ITableRow--hover__background: #3b4754;
+  --ITableRow__background: var(--ITable__background, transparent);
+  --ITableRow--odd__background: #242a31;
+  --ITableRow__color: #c3c3c3;
+}
+
+.ITable {
+  position: relative;
+  font-family: var(--ITable__font-family);
+  color: var(--ITable__color);
+  background: var(--ITable__background);
+  min-height: var(--ITable__min-height);
+  display: flex;
+  flex-flow: column;
+}
+.ITable, .ITable:before, .ITable:after, .ITable *, .ITable *:before, .ITable *:after {
+  box-sizing: border-box;
+}
+.ITable--shifting {
+  user-select: none;
+}
+
+.ITable-Portal {
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.ITableBody {
+  flex: 1;
+}
+
+.ITableFooter {
+  padding: var(--it-space-2);
+}
+
+.ITableCell {
+  padding: var(--ITableCell__padding);
+  white-space: nowrap;
+  will-change: transform;
+  position: absolute;
+}
+.ITableCell--shifting {
+  transition: left 300ms;
+}
+.ITableCell--dragging {
+  transition: none;
+}
+
+.ITableHeaderCell {
+  background: var(--ITableHeaderCell__background);
+  padding: var(--ITableHeaderCell__padding);
+}
+
+.ITableHeaderCell--first,
+.ITableColumnCell--first {
+  border-top-left-radius: var(--ITableCell__border-radius);
+  border-bottom-left-radius: var(--ITableCell__border-radius);
+}
+.ITableHeaderCell--last,
+.ITableColumnCell--last {
+  border-top-right-radius: var(--ITableCell__border-radius);
+  border-bottom-right-radius: var(--ITableCell__border-radius);
+}
+
+.ITableHeaderCell,
+.ITableColumnCell {
+  border-left: var(--ITableCell__border-width) solid transparent;
+  border-right: var(--ITableCell__border-width) solid transparent;
+}
+.ITableHeaderCell--pinned-start.ITableCell--last-in-category,
+.ITableColumnCell--pinned-start.ITableCell--last-in-category {
+  border-right: var(--ITableCell__border);
+}
+.ITableHeaderCell--pinned-end.ITableCell--first-in-category,
+.ITableColumnCell--pinned-end.ITableCell--first-in-category {
+  border-left: var(--ITableCell__border);
+}
+
+.ITableRow--group-row.ITableRow--odd .ITableCell::before,
+.ITableRow--group-row.ITableRow--even .ITableCell::before {
+  content: "";
+  background: var(--ITable-accent__color);
+  position: absolute;
+  top: 0;
+  left: calc(0px - var(--ITableCell__border-width));
+  right: calc(0px - var(--ITableCell__border-width));
+  bottom: 0;
+  z-index: -1;
+  opacity: 0.05;
+  pointer-events: none;
+}
+
+.ITableIcon {
+  fill: currentColor;
+  flex: none;
+}
+
+.ITableIcon-expander {
+  cursor: pointer;
+  user-select: none;
+}
+.ITableIcon-expander--expanded {
+  fill: var(--ITable-accent__color);
+}
+
+.ITableRow {
+  color: var(--ITableRow__color);
+  will-change: transform;
+}
+.ITableRow--hover {
+  --ITableRow__background: var(--ITableRow--hover__background);
+  --ITableRow--odd__background: var(--ITableRow--hover__background);
+}
+
+.ITable--scrolling .ITableRow {
+  pointer-events: none;
+}
+
+.ITableRow--even {
+  background: var(--ITableRow__background);
+}
+
+.ITableRow--odd {
+  background: var(--ITableRow--odd__background);
+}
+
+.ITableHeader {
+  background: var(--ITableHeader__background);
+  color: var(--ITableHeader__color);
+}
+.ITableHeader--unvirtualized {
+  position: relative;
+  align-items: stretch;
+}
+
+.ITableHeaderCell {
+  border-right: var(--ITableCell__border);
+}
+.ITableHeaderCell--dragging {
+  z-index: 100;
+  opacity: 0.8;
+  background: var(--ITableHeaderCell--dragging__background);
+}
+.ITableHeaderCell--pinned-start {
+  z-index: 10;
+}
+.ITableHeaderCellProxy {
+  background: var(--ITableHeader__background);
+  opacity: 0.9;
+  padding: var(--ITableCell__padding);
+  padding-left: 20px;
+  z-index: 200;
+}
+
+.ITableHeaderCell__sort-icon {
+  margin-left: 10px;
+  position: relative;
+}
+.ITableHeaderCell__sort-icon [data-name=index] {
+  line-height: 0;
+  font-size: 10px;
+  border-radius: 50%;
+  padding: 1px;
+}
+
+.ITableHeaderGroup__header {
+  padding: var(--ITableCell__padding);
+  border-bottom: var(--ITableCell__border);
+  border-right: var(--ITableCell__border);
+}
+.ITableHeaderGroup__children {
+  flex: 1;
+}
+
+/*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/style/utilities.scss","../src/components/VirtualScrollContainer/index.scss","../src/style/mixins.scss","../src/components/VirtualList/index.scss","../src/components/InfiniteTable/style/variables.scss","../src/components/InfiniteTable/style/index.scss","../src/components/InfiniteTable/components/InfiniteTableLicenseFooter/InfiniteTableLicenseFooter.scss","../src/components/InfiniteTable/components/InfiniteTableCell.scss","../src/components/InfiniteTable/components/icons/index.scss","../src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.scss","../src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAGA;EACE;AAAoB;EACpB;AAAwB;EACxB;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;EACA;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;AAAoB;EACpB;AAAqB;EAErB;AAA0B;EAC1B;AAA4B;EAC5B;AAA2B;EAC3B;AAA4B;EAC5B;EACA;AAA2B;EAC3B;AAA0B;EAC1B;AAA2B;EAE3B;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;ACtJF;EAEE;EACA;;ACHA;EAME;;ADDF;EACE;EACA;EAEA;EACA;;;ACVF;EAME;;ACEF;EACE;;;AAKF;EACE;;;AChBJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;ACtCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AHRA;EAME;;AGMF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AC1BF;EACE;;;ACDF;EAEE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAIJ;EACE;EACA;;;AAOA;AAAA;EACE;EACA;;AAEF;AAAA;EACE;EACA;;;AAGJ;AAAA;EAEE;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE;;;AAKF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxDJ;EACE;EACA;;;AAEF;EACE;EACA;;AAGA;EACE;;;ACVJ;EACE;EACA;;AAGA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EAEE;;;AAGF;EAEE;;;ACtBF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EAgBE;;AAfA;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EAEA;EACA;;;AAKF;EACE;EAEA;EACA;;AAEF;EACE","file":"index.css"}