New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/grid

Package Overview
Dependencies
Maintainers
12
Versions
416
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/grid - npm Package Compare versions

Comparing version 24.0.0-alpha9 to 24.0.0-beta1

22

package.json
{
"name": "@vaadin/grid",
"version": "24.0.0-alpha9",
"version": "24.0.0-beta1",
"publishConfig": {

@@ -49,14 +49,14 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/checkbox": "24.0.0-alpha9",
"@vaadin/component-base": "24.0.0-alpha9",
"@vaadin/lit-renderer": "24.0.0-alpha9",
"@vaadin/text-field": "24.0.0-alpha9",
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
"@vaadin/vaadin-material-styles": "24.0.0-alpha9",
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
"@vaadin/checkbox": "24.0.0-beta1",
"@vaadin/component-base": "24.0.0-beta1",
"@vaadin/lit-renderer": "24.0.0-beta1",
"@vaadin/text-field": "24.0.0-beta1",
"@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
"@vaadin/vaadin-material-styles": "24.0.0-beta1",
"@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
},
"devDependencies": {
"@esm-bundle/chai": "^4.3.4",
"@vaadin/polymer-legacy-adapter": "24.0.0-alpha9",
"@vaadin/testing-helpers": "^0.3.2",
"@vaadin/polymer-legacy-adapter": "24.0.0-beta1",
"@vaadin/testing-helpers": "^0.4.0",
"lit": "^2.0.0",

@@ -69,3 +69,3 @@ "sinon": "^13.0.2"

],
"gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
"gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
}

48

src/array-data-provider.js

@@ -42,26 +42,2 @@ /**

/**
* Sorts the given array of items based on the sorting rules and returns the result.
*
* @param {Array<any>} items
* @param {Array<GridSorterDefinition>} items
* @return {Array<any>}
*/
function multiSort(items, sortOrders) {
return items.sort((a, b) => {
return sortOrders
.map((sortOrder) => {
if (sortOrder.direction === 'asc') {
return compare(get(sortOrder.path, a), get(sortOrder.path, b));
} else if (sortOrder.direction === 'desc') {
return compare(get(sortOrder.path, b), get(sortOrder.path, a));
}
return 0;
})
.reduce((p, n) => {
return p !== 0 ? p : n;
}, 0);
});
}
/**
* @param {unknown} value

@@ -98,2 +74,26 @@ * @return {string}

/**
* Sorts the given array of items based on the sorting rules and returns the result.
*
* @param {Array<any>} items
* @param {Array<GridSorterDefinition>} items
* @return {Array<any>}
*/
function multiSort(items, sortOrders) {
return items.sort((a, b) => {
return sortOrders
.map((sortOrder) => {
if (sortOrder.direction === 'asc') {
return compare(get(sortOrder.path, a), get(sortOrder.path, b));
} else if (sortOrder.direction === 'desc') {
return compare(get(sortOrder.path, b), get(sortOrder.path, a));
}
return 0;
})
.reduce((p, n) => {
return p !== 0 ? p : n;
}, 0);
});
}
/**
* @param {!Array<!GridItem>} items

@@ -100,0 +100,0 @@ * @return {!Array<!GridItem>}

2

src/vaadin-grid-active-item-mixin.d.ts

@@ -17,5 +17,5 @@ /**

*/
activeItem: TItem | null;
activeItem: TItem | null | undefined;
}
export declare function isFocusable(target: Element): boolean;

48

src/vaadin-grid-active-item-mixin.js

@@ -8,2 +8,26 @@ /**

/**
* @param {!Element} target
* @return {boolean}
* @protected
*/
export const isFocusable = (target) => {
if (!target.parentNode) {
return false;
}
const focusables = Array.from(
target.parentNode.querySelectorAll(
'[tabindex], button, input, select, textarea, object, iframe, a[href], area[href]',
),
).filter((element) => {
const part = element.getAttribute('part');
return !(part && part.includes('body-cell'));
});
const isFocusableElement = focusables.includes(target);
return (
!target.disabled && isFocusableElement && target.offsetParent && getComputedStyle(target).visibility !== 'hidden'
);
};
/**
* @polymerMixin

@@ -69,3 +93,3 @@ */

const cellContentHasFocus = cellContent.contains(activeElement);
if (!cellContentHasFocus && !this._isFocusable(e.target)) {
if (!cellContentHasFocus && !this._isFocusable(e.target) && !(e.target instanceof HTMLLabelElement)) {
this.dispatchEvent(

@@ -102,23 +126,1 @@ new CustomEvent('cell-activate', {

};
/**
* @param {!Element} target
* @return {boolean}
* @protected
*/
export const isFocusable = (target) => {
if (!target.parentNode) {
return false;
}
const focusables = Array.from(
target.parentNode.querySelectorAll(
'[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]',
),
).filter((element) => {
const part = element.getAttribute('part');
return !(part && part.includes('body-cell'));
});
const isFocusableElement = focusables.includes(target);
return !target.disabled && isFocusableElement;
};

12

src/vaadin-grid-column-group.js

@@ -133,3 +133,3 @@ /**

// Don’t unfreeze the frozen group because of a non-frozen child
// Don't unfreeze the frozen group because of a non-frozen child
if (path === 'frozen' && !this.frozen) {

@@ -139,3 +139,3 @@ this.frozen = value;

// Don’t unfreeze the frozen group because of a non-frozen child
// Don't unfreeze the frozen group because of a non-frozen child
if (path === 'lastFrozen' && !this._lastFrozen) {

@@ -145,3 +145,3 @@ this._lastFrozen = value;

// Don’t unfreeze the frozen group because of a non-frozen child
// Don't unfreeze the frozen group because of a non-frozen child
if (path === 'frozenToEnd' && !this.frozenToEnd) {

@@ -151,3 +151,3 @@ this.frozenToEnd = value;

// Don’t unfreeze the frozen group because of a non-frozen child
// Don't unfreeze the frozen group because of a non-frozen child
if (path === 'firstFrozenToEnd' && !this._firstFrozenToEnd) {

@@ -286,3 +286,3 @@ this._firstFrozenToEnd = value;

// Don’t propagate the default `false` value.
// Don't propagate the default `false` value.
if (frozen !== false) {

@@ -303,3 +303,3 @@ this.__scheduleAutoFreezeWarning(rootColumns, 'frozen');

// Don’t propagate the default `false` value.
// Don't propagate the default `false` value.
if (frozenToEnd !== false) {

@@ -306,0 +306,0 @@ this.__scheduleAutoFreezeWarning(rootColumns, 'frozenToEnd');

13

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

@@ -6,2 +6,3 @@ /**

*/
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
import { addListener } from '@vaadin/component-base/src/gestures.js';

@@ -55,2 +56,10 @@ import { iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';

e.preventDefault();
// A contextmenu event is fired on mobile Chrome on long-press
// (which should start reordering). Don't end the reorder on touch devices.
if (!isTouch) {
// Context menu cancels the track gesture on desktop without firing an end event.
// End the reorder manually.
this._onTrackEnd();
}
}

@@ -152,3 +161,3 @@ }

if (!this._draggedColumn) {
// Reordering didn’t start. Skip this event.
// Reordering didn't start. Skip this event.
return;

@@ -193,3 +202,3 @@ }

if (!this._draggedColumn) {
// Reordering didn’t start. Skip this event.
// Reordering didn't start. Skip this event.
return;

@@ -196,0 +205,0 @@ }

48

src/vaadin-grid-column.js

@@ -219,2 +219,26 @@ /**

/**
* @return {!Grid | undefined}
* @protected
*/
get _grid() {
if (!this._gridValue) {
this._gridValue = this._findHostGrid();
}
return this._gridValue;
}
/**
* @return {!Array<!HTMLElement>}
* @protected
*/
get _allCells() {
return []
.concat(this._cells || [])
.concat(this._emptyCells || [])
.concat(this._headerCell)
.concat(this._footerCell)
.filter((cell) => cell);
}
/** @protected */

@@ -281,26 +305,2 @@ connectedCallback() {

/**
* @return {!Grid | undefined}
* @protected
*/
get _grid() {
if (!this._gridValue) {
this._gridValue = this._findHostGrid();
}
return this._gridValue;
}
/**
* @return {!Array<!HTMLElement>}
* @protected
*/
get _allCells() {
return []
.concat(this._cells || [])
.concat(this._emptyCells || [])
.concat(this._headerCell)
.concat(this._footerCell)
.filter((cell) => cell);
}
/** @protected */

@@ -307,0 +307,0 @@ _renderHeaderAndFooter() {

20

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

@@ -88,10 +88,8 @@ /**

let thisLevelIndex = index;
const keys = Object.keys(this.itemCaches);
for (let i = 0; i < keys.length; i++) {
const expandedIndex = Number(keys[i]);
const subCache = this.itemCaches[expandedIndex];
if (thisLevelIndex <= expandedIndex) {
for (const [index, subCache] of Object.entries(this.itemCaches)) {
const numberIndex = Number(index);
if (thisLevelIndex <= numberIndex) {
return { cache: this, scaledIndex: thisLevelIndex };
} else if (thisLevelIndex <= expandedIndex + subCache.effectiveSize) {
return subCache.getCacheAndIndex(thisLevelIndex - expandedIndex - 1);
} else if (thisLevelIndex <= numberIndex + subCache.effectiveSize) {
return subCache.getCacheAndIndex(thisLevelIndex - numberIndex - 1);
}

@@ -465,6 +463,6 @@ thisLevelIndex -= subCache.effectiveSize;

console.warn(
'The <vaadin-grid> needs the total number of items' +
' in order to display rows. Set the total number of items' +
' to the `size` property, or provide the total number of items' +
' in the second argument of the `dataProvider`’s `callback` call.',
'The <vaadin-grid> needs the total number of items in' +
' order to display rows, which you can specify either by setting' +
' the `size` property, or by providing it to the second argument' +
' of the `dataProvider` function `callback` call.',
);

@@ -471,0 +469,0 @@ }

8

src/vaadin-grid-dynamic-columns-mixin.js

@@ -53,9 +53,3 @@ /**

_hasColumnGroups(columns) {
for (let i = 0; i < columns.length; i++) {
if (columns[i].localName === 'vaadin-grid-column-group') {
return true;
}
}
return false;
return columns.some((column) => column.localName === 'vaadin-grid-column-group');
}

@@ -62,0 +56,0 @@

62

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

@@ -80,2 +80,29 @@ /**

/** @private */
get __rowFocusMode() {
return (
this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
);
}
set __rowFocusMode(value) {
['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
const focusable = this[prop];
if (value) {
const parent = focusable && focusable.parentElement;
if (this.__isCell(focusable)) {
// Cell itself focusable (default)
this[prop] = parent;
} else if (this.__isCell(parent)) {
// Focus button mode is enabled for the column,
// button element inside the cell is focusable.
this[prop] = parent.parentElement;
}
} else if (!value && this.__isRow(focusable)) {
const cell = focusable.firstElementChild;
this[prop] = cell._focusButton || cell;
}
});
}
/** @protected */

@@ -97,3 +124,3 @@ ready() {

// When focus goes from cell to another cell, focusin/focusout events do
// not escape the grid’s shadowRoot, thus listening inside the shadowRoot.
// not escape the grid's shadowRoot, thus listening inside the shadowRoot.
this.$.table.addEventListener('focusin', this._onContentFocusIn.bind(this));

@@ -114,29 +141,2 @@

/** @private */
get __rowFocusMode() {
return (
this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
);
}
set __rowFocusMode(value) {
['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
const focusable = this[prop];
if (value) {
const parent = focusable && focusable.parentElement;
if (this.__isCell(focusable)) {
// Cell itself focusable (default)
this[prop] = parent;
} else if (this.__isCell(parent)) {
// Focus button mode is enabled for the column,
// button element inside the cell is focusable.
this[prop] = parent.parentElement;
}
} else if (!value && this.__isRow(focusable)) {
const cell = focusable.firstElementChild;
this[prop] = cell._focusButton || cell;
}
});
}
/** @private */
_focusableChanged(focusable, oldFocusable) {

@@ -249,3 +249,3 @@ if (oldFocusable) {

if (this.interacting && keyGroup !== 'Interaction') {
// When in the interacting mode, only the “Interaction” keys are handled.
// When in the interacting mode, only the "Interaction" keys are handled.
keyGroup = undefined;

@@ -533,3 +533,3 @@ }

// _focusedColumnOrder is memoized — this is to ensure predictable
// _focusedColumnOrder is memoized - this is to ensure predictable
// navigation when entering and leaving detail and column group cells.

@@ -553,3 +553,3 @@ if (this._focusedColumnOrder === undefined) {

// Find orderedColumnIndex — the index of order closest matching the
// Find orderedColumnIndex - the index of order closest matching the
// original _focusedColumnOrder in the sorted array of orders

@@ -556,0 +556,0 @@ // of the visible columns on the destination row.

2

src/vaadin-grid-row-details-mixin.js

@@ -94,3 +94,3 @@ /**

_detailsOpenedItemsChanged(changeRecord, rowDetailsRenderer) {
// Skip to avoid duplicate work of both “.splices” and “.length” updates.
// Skip to avoid duplicate work of both `.splices` and `.length` updates.
if (changeRecord.path === 'detailsOpenedItems.length' || !changeRecord.value) {

@@ -97,0 +97,0 @@ return;

43

src/vaadin-grid-scroll-mixin.js

@@ -46,2 +46,7 @@ /**

/** @private */
get _scrollLeft() {
return this.$.table.scrollLeft;
}
/** @private */
get _scrollTop() {

@@ -59,7 +64,2 @@ return this.$.table.scrollTop;

/** @private */
get _scrollLeft() {
return this.$.table.scrollLeft;
}
/** @protected */

@@ -152,2 +152,9 @@ ready() {

_updateOverflow() {
this._debounceOverflow = Debouncer.debounce(this._debounceOverflow, animationFrame, () => {
this.__doUpdateOverflow();
});
}
/** @private */
__doUpdateOverflow() {
// Set overflow styling attributes

@@ -188,10 +195,8 @@ let overflow = '';

this._debounceOverflow = Debouncer.debounce(this._debounceOverflow, animationFrame, () => {
const value = overflow.trim();
if (value.length > 0 && this.getAttribute('overflow') !== value) {
this.setAttribute('overflow', value);
} else if (value.length === 0 && this.hasAttribute('overflow')) {
this.removeAttribute('overflow');
}
});
const value = overflow.trim();
if (value.length > 0 && this.getAttribute('overflow') !== value) {
this.setAttribute('overflow', value);
} else if (value.length === 0 && this.hasAttribute('overflow')) {
this.removeAttribute('overflow');
}
}

@@ -274,5 +279,5 @@

const transformFrozen = `translate(${x}px, 0)`;
for (let i = 0; i < this._frozenCells.length; i++) {
this._frozenCells[i].style.transform = transformFrozen;
}
this._frozenCells.forEach((cell) => {
cell.style.transform = transformFrozen;
});

@@ -282,5 +287,5 @@ // Position cells frozen to end

const transformFrozenToEnd = `translate(${remaining}px, 0)`;
for (let i = 0; i < this._frozenToEndCells.length; i++) {
this._frozenToEndCells[i].style.transform = transformFrozenToEnd;
}
this._frozenToEndCells.forEach((cell) => {
cell.style.transform = transformFrozenToEnd;
});

@@ -287,0 +292,0 @@ // Only update the --_grid-horizontal-scroll-position custom property when navigating

9

src/vaadin-grid-sort-mixin.js

@@ -97,3 +97,3 @@ /**

sorter._grid = this;
this.__updateSorter(sorter, e.detail.shiftClick);
this.__updateSorter(sorter, e.detail.shiftClick, e.detail.fromSorterClick);
this.__applySorters();

@@ -143,3 +143,3 @@ }

/** @private */
__updateSorter(sorter, shiftClick) {
__updateSorter(sorter, shiftClick, fromSorterClick) {
if (!sorter.direction && this._sorters.indexOf(sorter) === -1) {

@@ -151,3 +151,6 @@ return;

if ((this.multiSort && !this.multiSortOnShiftClick) || (this.multiSortOnShiftClick && shiftClick)) {
if (
(this.multiSort && (!this.multiSortOnShiftClick || !fromSorterClick)) ||
(this.multiSortOnShiftClick && shiftClick)
) {
if (this.multiSortPriority === 'append') {

@@ -154,0 +157,0 @@ this.__appendSorter(sorter);

2

src/vaadin-grid-sorter.d.ts

@@ -14,3 +14,3 @@ /**

*/
export type GridSorterChangedEvent = CustomEvent<{ shiftClick: boolean }>;
export type GridSorterChangedEvent = CustomEvent<{ shiftClick: boolean; fromSorterClick: boolean }>;

@@ -17,0 +17,0 @@ /**

12

src/vaadin-grid-sorter.js

@@ -156,8 +156,2 @@ /**

},
/** @private */
_shiftClick: {
type: Boolean,
value: false,
},
};

@@ -214,3 +208,3 @@ }

new CustomEvent('sorter-changed', {
detail: { shiftClick: this._shiftClick },
detail: { shiftClick: Boolean(this._shiftClick), fromSorterClick: Boolean(this._fromSorterClick) },
bubbles: true,

@@ -220,2 +214,5 @@ composed: true,

);
// Cleaning up as a programatically sorting can be done after some user interaction
this._fromSorterClick = false;
this._shiftClick = false;
}

@@ -243,2 +240,3 @@

this._shiftClick = e.shiftKey;
this._fromSorterClick = true;
if (this.direction === 'asc') {

@@ -245,0 +243,0 @@ this.direction = 'desc';

2

src/vaadin-grid-tree-toggle.js

@@ -195,3 +195,3 @@ /**

}
if (isFocusable(e.target)) {
if (isFocusable(e.target) || e.target instanceof HTMLLabelElement) {
return;

@@ -198,0 +198,0 @@ }

7

src/vaadin-grid.d.ts

@@ -71,3 +71,3 @@ /**

*/
export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem }>;
export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;

@@ -266,5 +266,4 @@ /**

*
* See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) in
* the API reference below for the detailed data provider arguments description,
* and the “Assigning Data” page in the demos.
* See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) property
* documentation for the detailed data provider arguments description.
*

@@ -271,0 +270,0 @@ * __Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__

31

src/vaadin-grid.js

@@ -137,5 +137,4 @@ /**

*
* See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) in
* the API reference below for the detailed data provider arguments description,
* and the “Assigning Data” page in the demos.
* See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) property
* documentation for the detailed data provider arguments description.
*

@@ -440,2 +439,14 @@ * __Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__

/** @private */
get _firstVisibleIndex() {
const firstVisibleItem = this.__getFirstVisibleItem();
return firstVisibleItem ? firstVisibleItem.index : undefined;
}
/** @private */
get _lastVisibleIndex() {
const lastVisibleItem = this.__getLastVisibleItem();
return lastVisibleItem ? lastVisibleItem.index : undefined;
}
/** @protected */

@@ -461,8 +472,2 @@ connectedCallback() {

/** @private */
get _firstVisibleIndex() {
const firstVisibleItem = this.__getFirstVisibleItem();
return firstVisibleItem ? firstVisibleItem.index : undefined;
}
/** @private */
__getLastVisibleItem() {

@@ -475,8 +480,2 @@ return this._getVisibleRows()

/** @private */
get _lastVisibleIndex() {
const lastVisibleItem = this.__getLastVisibleItem();
return lastVisibleItem ? lastVisibleItem.index : undefined;
}
/** @private */
_isInViewport(item) {

@@ -784,3 +783,3 @@ const scrollTargetRect = this.$.table.getBoundingClientRect();

const mouseUpListener = (event) => {
// If focus is on element within the cell content — respect it, do not change
// If focus is on element within the cell content - respect it, do not change
const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);

@@ -787,0 +786,0 @@ // Only focus if mouse is released on cell content itself

web-types.json

Sorry, the diff of this file is too big to display

web-types.lit.json

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc