fix: Initial scroll sizing (#10)

* fix: Initial scroll sizing

- Updated dependencies and updated styles generation

Author: rkaraivanov

package-lock.json

@@ -64,30 +64,30 @@
   },
   "devDependencies": {
     "@blockquote/rollup-plugin-total-bundlesize": "^1.0.0",
-    "@blockquote/sass-style-template": "^2.1.2",
+    "@blockquote/sass-style-template": "^3.0.0",
     "@blockquote/test-runner-mocha-style-reporter": "^1.4.1",
     "@custom-elements-manifest/analyzer": "^0.6.6",
     "@open-wc/eslint-config": "^9.0.0",
     "@open-wc/testing": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
     "@web/dev-server": "^0.1.35",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "concurrently": "^7.6.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-log-filenames": "^1.0.6",
     "husky": "^8.0.2",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.1.0",
     "prettier": "^2.8.0",
-    "sinon": "^14.0.2",
-    "stylelint": "^14.15.0",
+    "sinon": "^15.0.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-standard-scss": "^6.1.0",
     "tslib": "^2.4.1",
     "typedoc": "^0.23.21",
     "typescript": "^4.9.3",
-    "vite": "^3.2.4"
+    "vite": "^3.2.5"
   },
   "customElements": "custom-elements.json"
 }

package.json

@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { GRID_CELL_TAG } from '../internal/tags.js';
 import type { ApexCellContext, ColumnConfiguration } from '../internal/types.js';
-import styles from '../styles/body-cell/body-cell-styles.js';
+import { styles } from '../styles/body-cell/body-cell-styles.css.js';
 import type ApexGridRow from './row.js';
 
 @customElement(GRID_CELL_TAG)

src/components/cell.ts

@@ -9,7 +9,7 @@ import { GRID_FILTER_ROW_TAG } from '../internal/tags.js';
 import { getFilterOperandsFor } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
 
-import styles from '../styles/filter-row/filter-row-styles.js';
+import { styles } from '../styles/filter-row/filter-row-styles.css.js';
 
 import type { FilterExpressionTree } from '../operations/filter/tree.js';
 import type { FilterExpression, FilterOperation } from '../operations/filter/types.js';

src/components/filter-row.ts

@@ -23,10 +23,10 @@ import type { FilterExpressionTree } from '../operations/filter/tree.js';
 import type { FilterExpression } from '../operations/filter/types.js';
 import type { SortExpression } from '../operations/sort/types.js';
 
-import { default as bootstrap } from '../styles/grid/themes/light/grid.bootstrap-styles.js';
-import { default as fluent } from '../styles/grid/themes/light/grid.fluent-styles.js';
-import { default as indigo } from '../styles/grid/themes/light/grid.indigo-styles.js';
-import { default as material } from '../styles/grid/themes/light/grid.material-styles.js';
+import { styles as bootstrap } from '../styles/grid/themes/light/grid.bootstrap-styles.css.js';
+import { styles as fluent } from '../styles/grid/themes/light/grid.fluent-styles.css.js';
+import { styles as indigo } from '../styles/grid/themes/light/grid.indigo-styles.css.js';
+import { styles as material } from '../styles/grid/themes/light/grid.material-styles.css.js';
 
 import ApexGridBody from './grid-body.js';
 import ApexGridHeaderRow from './header-row.js';

src/components/grid.ts

@@ -7,7 +7,7 @@ import { partNameMap } from '../internal/part-map.js';
 import { GRID_HEADER_ROW_TAG } from '../internal/tags.js';
 
 import ApexGridHeader from './header.js';
-import styles from '../styles/header-row/header-row.base-styles.js';
+import { styles } from '../styles/header-row/header-row.base-styles.css.js';
 
 import type { ColumnConfiguration } from '../internal/types.js';
 

src/components/header-row.ts

@@ -10,7 +10,7 @@ import {
 } from '../internal/constants.js';
 import type { ColumnConfiguration, ApexHeaderContext } from '../internal/types.js';
 import { StateController, gridStateContext } from '../controllers/state.js';
-import styles from '../styles/header-cell/header-cell-styles.js';
+import { styles } from '../styles/header-cell/header-cell-styles.css.js';
 
 @customElement(GRID_HEADER_TAG)
 export default class ApexGridHeader<T extends object> extends LitElement {

src/components/header.ts

@@ -4,7 +4,7 @@ import { map } from 'lit/directives/map.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
 import ApexGridCell from './cell.js';
-import styles from '../styles/body-row/body-row-styles.js';
+import { styles } from '../styles/body-row/body-row-styles.css.js';
 
 @customElement(GRID_ROW_TAG)
 export default class ApexGridRow<T extends object> extends LitElement {

src/components/row.ts

@@ -18,6 +18,13 @@ export class GridDOMController<T extends object> implements ReactiveController {
 
   public hostConnected(): void {
     this.setGridColumnSizes();
+
+    // Wait until the virtualizer updates the DOM. Then measure the scroll width again on the next tick.
+    setTimeout(async () => {
+      const ref = (this.virtualBody as any)._virtualizer;
+      await ref._mutationPromise;
+      this.host.requestUpdate();
+    });
   }
 
   public hostUpdate(): void {

src/controllers/dom.ts

@@ -1,6 +1,6 @@
-import {css} from 'lit';
+import { css } from 'lit';
 
-export default css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+export const styles = css`                    
 :host {
   --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
   --is-medium: