@vaadin/grid - npm Package Compare versions

Comparing version 24.4.0-alpha2 to 24.4.0-alpha20

package.json

 {
   "name": "@vaadin/grid",
-  "version": "24.4.0-alpha2",
+  "version": "24.4.0-alpha20",
   "publishConfig": {
@@ -49,10 +49,10 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha2",
-    "@vaadin/checkbox": "24.4.0-alpha2",
-    "@vaadin/component-base": "24.4.0-alpha2",
-    "@vaadin/lit-renderer": "24.4.0-alpha2",
-    "@vaadin/text-field": "24.4.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
+    "@vaadin/a11y-base": "24.4.0-alpha20",
+    "@vaadin/checkbox": "24.4.0-alpha20",
+    "@vaadin/component-base": "24.4.0-alpha20",
+    "@vaadin/lit-renderer": "24.4.0-alpha20",
+    "@vaadin/text-field": "24.4.0-alpha20",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha20",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha20",
     "lit": "^3.0.0"
@@ -69,3 +69,3 @@ },
   ],
-  "gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
+  "gitHead": "9d2eacc494eb27658ba9298be6656815912637be"
 }

README.md

@@ -8,3 +8,2 @@ # @vaadin/grid
 [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
@@ -11,0 +10,0 @@ ```html

src/vaadin-grid-a11y-mixin.js

@@ -19,3 +19,5 @@ /**
     _a11yGetHeaderRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer || col.path || col.header)).length;
+      return _columnTree.filter((level) =>
+        level.some((col) => col.headerRenderer || (col.path && col.header !== null) || col.header),
+      ).length;
     }
@@ -22,0 +24,0 @@

src/vaadin-grid-column-mixin.js

@@ -601,4 +601,10 @@ /**
     _runRenderer(renderer, cell, model) {
+      const isVisibleBodyCell = model && model.item && !cell.parentElement.hidden;
+      const shouldRender = isVisibleBodyCell || renderer === this._headerRenderer || renderer === this._footerRenderer;
+      if (!shouldRender) {
+        return;
+      }
+
       const args = [cell._content, this];
-      if (model && model.item) {
+      if (isVisibleBodyCell) {
         args.push(model);
@@ -638,5 +644,3 @@ }
 
-        if (model.item || renderer === this._headerRenderer || renderer === this._footerRenderer) {
-          this._runRenderer(renderer, cell, model);
-        }
+        this._runRenderer(renderer, cell, model);
       });
@@ -643,0 +647,0 @@ }

src/vaadin-grid-column-reordering-mixin.js

@@ -240,9 +240,22 @@ /**
       }
-      const cell = this.shadowRoot.elementFromPoint(x, y);
+      const elementFromPoint = this.shadowRoot.elementFromPoint(x, y);
       this.$.scroller.toggleAttribute('no-content-pointer-events', false);
 
-      // Make sure the element is actually a cell
-      if (cell && cell._column) {
-        return cell;
+      return this._getCellFromElement(elementFromPoint);
+    }
+
+    /** @private */
+    _getCellFromElement(element) {
+      if (element) {
+        // Check if element is a cell
+        if (element._column) {
+          return element;
+        }
+        // Check if element is the cell of a focus button mode column
+        const { parentElement } = element;
+        if (parentElement && parentElement._focusButton === element) {
+          return parentElement;
+        }
       }
+      return null;
     }
@@ -249,0 +262,0 @@

src/vaadin-grid-data-provider-mixin.js

@@ -209,6 +209,2 @@ /**
     _getItem(index, el) {
-      if (index >= this._flatSize) {
-        return;
-      }
-
       el.index = index;
@@ -378,3 +374,3 @@
 
-      if (!this.__virtualizer.size) {
+      if (!this.__virtualizer || !this.__virtualizer.size) {
         this._dataProviderController.loadFirstPage();
@@ -381,0 +377,0 @@ }

src/vaadin-grid-filter-column-mixin.js

@@ -33,11 +33,5 @@ /**
     static get observers() {
-      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
+      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)'];
     }
 
-    constructor() {
-      super();
-
-      this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
-    }
-
     /**
@@ -58,3 +52,2 @@ * Renders the grid filter with the custom text field to the header cell.
         textField.setAttribute('focus-target', '');
-        textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
         filter.appendChild(textField);
@@ -65,6 +58,3 @@ root.appendChild(filter);
       filter.path = this.path;
-      filter.value = this._filterValue;
 
-      textField.__rendererValue = this._filterValue;
-      textField.value = this._filterValue;
       textField.label = this.__getHeader(this.header, this.path);
@@ -84,17 +74,2 @@ }
 
-    /**
-     * Updates the internal filter value once the filter text field is changed.
-     * The listener handles only user-fired events.
-     *
-     * @private
-     */
-    __onFilterValueChanged(e) {
-      // Skip if the value is changed by the renderer.
-      if (e.detail.value === e.target.__rendererValue) {
-        return;
-      }
-
-      this._filterValue = e.detail.value;
-    }
-
     /** @private */
@@ -101,0 +76,0 @@ __getHeader(header, path) {

src/vaadin-grid-filter-element-mixin.js

@@ -72,8 +72,4 @@ /**
         initializer: (field) => {
-          field.addEventListener('value-changed', (e) => {
-            if (field.__previousValue === undefined && e.detail.value === '') {
-              field.__previousValue = e.detail.value;
-              return;
-            }
-            this.value = e.detail.value;
+          field.addEventListener('input', (e) => {
+            this.value = e.target.value;
           });
@@ -92,8 +88,4 @@
       }
-      if (this._previousValue === undefined && value === '') {
-        return;
-      }
 
       textField.value = value;
-      this._previousValue = value;
 
@@ -100,0 +92,0 @@ this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {

src/vaadin-grid-keyboard-navigation-mixin.js

@@ -112,2 +112,7 @@ /**
 
+    /** @private */
+    get _visibleItemsCount() {
+      return this._lastVisibleIndex - this._firstVisibleIndex - 1;
+    }
+
     /** @protected */
@@ -308,4 +313,5 @@ ready() {
 
-      const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
       const isRTL = this.__isRTL;
+      const activeRow = e.composedPath().find((el) => this.__isRow(el));
+      const activeCell = e.composedPath().find((el) => this.__isCell(el));
 
@@ -355,6 +361,13 @@ // Handle keyboard interaction as defined in:
         case 'PageDown':
-          dy = visibleItemsCount;
+          // Check if the active group is body
+          if (this.$.items.contains(activeRow)) {
+            const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
+            // Scroll the current row to the top...
+            this._scrollToFlatIndex(currentRowIndex);
+          }
+          // ...only then measure the visible items count
+          dy = this._visibleItemsCount;
           break;
         case 'PageUp':
-          dy = -visibleItemsCount;
+          dy = -this._visibleItemsCount;
           break;
@@ -365,5 +378,2 @@ default:
 
-      const activeRow = e.composedPath().find((el) => this.__isRow(el));
-      const activeCell = e.composedPath().find((el) => this.__isCell(el));
-
       if ((this.__rowFocusMode && !activeRow) || (!this.__rowFocusMode && !activeCell)) {
@@ -370,0 +380,0 @@ // When using a screen reader, it's possible that neither a cell nor a row is focused.

src/vaadin-grid-mixin.js

@@ -320,7 +320,2 @@ /**
     /** @private */
-    __hasRowsWithClientHeight() {
-      return !!Array.from(this.$.items.children).filter((row) => row.clientHeight).length;
-    }
-
-    /** @private */
     __getIntrinsicWidth(col) {
@@ -488,3 +483,12 @@ if (!this.__intrinsicWidthCache.has(col)) {
       const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
-      this._recalculateColumnWidths(cols);
+
+      const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
+      if (undefinedCols.length) {
+        // Some of the columns are not defined yet, wait for them to be defined before measuring
+        Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
+          this._recalculateColumnWidths(cols);
+        });
+      } else {
+        this._recalculateColumnWidths(cols);
+      }
     }
@@ -494,8 +498,22 @@
     __tryToRecalculateColumnWidthsIfPending() {
-      if (
-        this.__pendingRecalculateColumnWidths &&
-        !isElementHidden(this) &&
-        !this._dataProviderController.isLoading() &&
-        this.__hasRowsWithClientHeight()
-      ) {
+      if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
+        return;
+      }
+
+      // Delay recalculation if any rows are missing an index.
+      // This can happen during the grid's initialization if the recalculation is triggered
+      // as a result of the data provider responding synchronously to a page request created
+      // in the middle of the virtualizer update loop. In this case, rows after the one that
+      // triggered the page request may not have an index property yet. The lack of index
+      // prevents _onDataProviderPageReceived from requesting children for these rows,
+      // resulting in loading state being set to false and the recalculation beginning
+      // before all the data is loaded. Note, rows without index get updated in later iterations
+      // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
+      const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
+      if (hasRowsWithUndefinedIndex) {
+        return;
+      }
+
+      const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
+      if (hasRowsWithClientHeight) {
         this.__pendingRecalculateColumnWidths = false;
@@ -665,2 +683,5 @@ this.recalculateColumnWidths();
               cell = this._createCell('td', column);
+              if (column._onCellKeyDown) {
+                cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+              }
               column._cells.push(cell);
@@ -672,7 +693,9 @@ }
             row.__cells.push(cell);
-            if (!column._bodyContentHidden) {
+
+            const isSizerRow = row === this.$.sizer;
+            if (!column._bodyContentHidden || isSizerRow) {
               row.appendChild(cell);
             }
 
-            if (row === this.$.sizer) {
+            if (isSizerRow) {
               column._sizerCell = cell;
@@ -708,3 +731,9 @@ }
             if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`] || this._createCell(tagName);
+              cell = column[`_${section}Cell`];
+              if (!cell) {
+                cell = this._createCell(tagName);
+                if (column._onCellKeyDown) {
+                  cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+                }
+              }
               cell._column = column;
@@ -711,0 +740,0 @@ row.appendChild(cell);

src/vaadin-grid-scroll-mixin.d.ts

@@ -46,2 +46,4 @@ /**
    * and thus not rendered.
+   *
+   * @attr {eager|lazy} column-rendering
    */
@@ -48,0 +50,0 @@ columnRendering: ColumnRendering;

src/vaadin-grid-scroll-mixin.js

@@ -126,2 +126,15 @@ /**
         this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
+
+        if (this._rowWithFocusedElement) {
+          // Make sure the row with the focused element is fully inside the visible viewport
+          this.__scrollIntoViewport(this._rowWithFocusedElement.index);
+
+          if (!this.$.table.contains(e.relatedTarget)) {
+            // Virtualizer can't catch the event because if orginates from the light DOM.
+            // Dispatch a virtualizer-element-focused event for virtualizer to catch.
+            this.$.table.dispatchEvent(
+              new CustomEvent('virtualizer-element-focused', { detail: { element: this._rowWithFocusedElement } }),
+            );
+          }
+        }
       });
@@ -239,3 +252,3 @@ this.$.items.addEventListener('focusout', () => {
     __updateColumnsBodyContentHidden() {
-      if (!this._columnTree) {
+      if (!this._columnTree || !this._areSizerCellsAssigned()) {
         return;
@@ -245,8 +258,2 @@ }
       const columnsInOrder = this._getColumnsInOrder();
-
-      // Return if sizer cells are not yet assigned to columns
-      if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) {
-        return;
-      }
-
       let bodyContentHiddenChanged = false;
@@ -491,3 +498,3 @@
 
-      if (this._lazyColumns) {
+      if (this._lazyColumns && this._areSizerCellsAssigned()) {
         // Lazy column rendering is used, calculate the offset to apply to the frozen to end cells
@@ -522,2 +529,7 @@ const columnsInOrder = this._getColumnsInOrder();
     }
+
+    /** @private */
+    _areSizerCellsAssigned() {
+      return this._getColumnsInOrder().every((column) => column._sizerCell);
+    }
   };

src/vaadin-grid-selection-column-base-mixin.js

@@ -35,2 +35,10 @@ /**
         /**
+         * Override `autoWidth` to enable auto-width
+         */
+        autoWidth: {
+          type: Boolean,
+          value: true,
+        },
+
+        /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
@@ -238,2 +246,12 @@ * @attr {number} flex-grow
     /** @private */
+    _onCellKeyDown(e) {
+      const target = e.composedPath()[0];
+      // Toggle on Space without having to enter interaction mode first
+      if (e.keyCode === 32 && (target === this._headerCell || (this._cells.includes(target) && !this.autoSelect))) {
+        const checkbox = target._content.firstElementChild;
+        checkbox.checked = !checkbox.checked;
+      }
+    }
+
+    /** @private */
     __dragAutoScroller() {
@@ -240,0 +258,0 @@ if (this.__dragStartIndex === undefined) {

src/vaadin-grid-tree-toggle-mixin.js

@@ -128,6 +128,4 @@ /**
 
-    /** @protected */
-    ready() {
-      super.ready();
-
+    constructor() {
+      super();
       this.addEventListener('click', (e) => this._onClick(e));
@@ -134,0 +132,0 @@ }

src/vaadin-lit-grid-column-group.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-column.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-filter-column.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-filter.js

@@ -18,3 +18,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -21,0 +21,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-selection-column.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-sort-column.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-sorter.js

@@ -18,3 +18,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -21,0 +21,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-tree-column.js

@@ -16,3 +16,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -19,0 +19,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid-tree-toggle.js

@@ -18,3 +18,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -21,0 +21,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

src/vaadin-lit-grid.js

@@ -21,3 +21,3 @@ /**
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -24,0 +24,0 @@ * Feel free to try this code in your apps as per Apache 2.0 license.

theme/lumo/vaadin-grid-styles.js

@@ -7,3 +7,2 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -10,0 +9,0 @@

theme/lumo/vaadin-lit-grid-filter.js

@@ -1,3 +0,2 @@
-import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
 import '../../src/vaadin-lit-grid-filter.js';

theme/lumo/vaadin-lit-grid-selection-column.js

@@ -1,2 +0,2 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
+import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
 import '../../src/vaadin-lit-grid-selection-column.js';

theme/material/vaadin-lit-grid-filter.js

@@ -1,3 +0,2 @@
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
 import '../../src/vaadin-lit-grid-filter.js';

theme/material/vaadin-lit-grid-selection-column.js

@@ -1,2 +0,2 @@
-import '@vaadin/checkbox/theme/material/vaadin-checkbox-styles.js';
+import '@vaadin/checkbox/theme/material/vaadin-lit-checkbox.js';
 import '../../src/vaadin-lit-grid-selection-column.js';

vaadin-grid.d.ts

 export * from './src/vaadin-grid.js';
-export * from './src/vaadin-grid-column.js';

vaadin-grid.js

 import './theme/lumo/vaadin-grid.js';
 
-export * from './src/vaadin-grid-column.js';
 export * from './src/vaadin-grid.js';

vaadin-lit-grid.d.ts

 export * from './src/vaadin-grid.js';
-export * from './src/vaadin-grid-column.js';

vaadin-lit-grid.js

 import './theme/lumo/vaadin-lit-grid.js';
 
-export * from './src/vaadin-lit-grid-column.js';
 export * from './src/vaadin-lit-grid.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

667816

increased by0.95%

Number of package files

237

increased by26.74%

Lines of code

16101

increased by1.1%

Worsened metrics

Number of lines in readme file

98

decreased by-1.01%

Dependency changes

• + Added@vaadin/a11y-base@24.4.0-alpha20(transitive)

• + Added@vaadin/checkbox@24.4.0-alpha20(transitive)

• + Added@vaadin/component-base@24.4.0-alpha20(transitive)

• + Added@vaadin/field-base@24.4.0-alpha20(transitive)

• + Added@vaadin/icon@24.4.0-alpha20(transitive)

• + Added@vaadin/input-container@24.4.0-alpha20(transitive)

• + Added@vaadin/lit-renderer@24.4.0-alpha20(transitive)

• + Added@vaadin/text-field@24.4.0-alpha20(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.4.0-alpha20(transitive)

• + Added@vaadin/vaadin-material-styles@24.4.0-alpha20(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.4.0-alpha20(transitive)

• - Removed@vaadin/a11y-base@24.4.0-alpha2(transitive)

• - Removed@vaadin/checkbox@24.4.0-alpha2(transitive)

• - Removed@vaadin/component-base@24.4.0-alpha2(transitive)

• - Removed@vaadin/field-base@24.4.0-alpha2(transitive)

• - Removed@vaadin/icon@24.4.0-alpha2(transitive)

• - Removed@vaadin/input-container@24.4.0-alpha2(transitive)

• - Removed@vaadin/lit-renderer@24.4.0-alpha2(transitive)

• - Removed@vaadin/text-field@24.4.0-alpha2(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.4.0-alpha2(transitive)

• - Removed@vaadin/vaadin-material-styles@24.4.0-alpha2(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.4.0-alpha2(transitive)

• Updated@vaadin/a11y-base@24.4.0-alpha20

• Updated@vaadin/checkbox@24.4.0-alpha20

• Updated@vaadin/component-base@24.4.0-alpha20

• Updated@vaadin/lit-renderer@24.4.0-alpha20

• Updated@vaadin/text-field@24.4.0-alpha20

• Updated@vaadin/vaadin-lumo-styles@24.4.0-alpha20

• Updated@vaadin/vaadin-material-styles@24.4.0-alpha20

• Updated@vaadin/vaadin-themable-mixin@24.4.0-alpha20