Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/select

Package Overview
Dependencies
Maintainers
19
Versions
398
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/select - npm Package Compare versions

Comparing version 22.0.0-alpha9 to 22.0.0-beta1

28

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

@@ -37,17 +37,17 @@ "access": "public"

"@polymer/polymer": "^3.2.0",
"@vaadin/button": "22.0.0-alpha9",
"@vaadin/component-base": "22.0.0-alpha9",
"@vaadin/field-base": "22.0.0-alpha9",
"@vaadin/input-container": "22.0.0-alpha9",
"@vaadin/item": "22.0.0-alpha9",
"@vaadin/list-box": "22.0.0-alpha9",
"@vaadin/vaadin-list-mixin": "22.0.0-alpha9",
"@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
"@vaadin/vaadin-material-styles": "22.0.0-alpha9",
"@vaadin/vaadin-overlay": "22.0.0-alpha9",
"@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
"@vaadin/button": "22.0.0-beta1",
"@vaadin/component-base": "22.0.0-beta1",
"@vaadin/field-base": "22.0.0-beta1",
"@vaadin/input-container": "22.0.0-beta1",
"@vaadin/item": "22.0.0-beta1",
"@vaadin/list-box": "22.0.0-beta1",
"@vaadin/vaadin-list-mixin": "22.0.0-beta1",
"@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
"@vaadin/vaadin-material-styles": "22.0.0-beta1",
"@vaadin/vaadin-overlay": "22.0.0-beta1",
"@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
},
"devDependencies": {
"@esm-bundle/chai": "^4.3.4",
"@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
"@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
"@vaadin/testing-helpers": "^0.3.0",

@@ -57,3 +57,3 @@ "lit": "^2.0.0",

},
"gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
"gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
}

28

src/vaadin-select.d.ts

@@ -95,19 +95,21 @@ /**

*
* The following shadow DOM parts are available for styling:
* `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
*
* Part name | Description
*
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
*
* Part name | Description
* ----------------|----------------
* `toggle-button` | The toggle button
*
* The following state attributes are available for styling:
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `opened` | Set when the select is open | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `focus-ring` | Set when the element is keyboard focused | :host
* `readonly` | Set when the select is read only | :host
* Attribute | Description | Part name
* ----------|-----------------------------|-----------
* `opened` | Set when the select is open | :host
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
* There are two exceptions in terms of styling compared to `<vaadin-text-field>`:
* - the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.
* - the `input-prevented` state attribute is not supported by `<vaadin-select>`.
*

@@ -120,2 +122,4 @@ * ### Internal components

* - `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
* - `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
* - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the button.
*

@@ -125,2 +129,4 @@ * Note: the `theme` attribute value set on `<vaadin-select>` is

*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {Event} change - Fired when the user commits a value change.

@@ -127,0 +133,0 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.

98

src/vaadin-select.js

@@ -71,19 +71,21 @@ /**

*
* The following shadow DOM parts are available for styling:
* `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
*
* Part name | Description
*
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
*
* Part name | Description
* ----------------|----------------
* `toggle-button` | The toggle button
*
* The following state attributes are available for styling:
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `opened` | Set when the select is open | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `focus-ring` | Set when the element is keyboard focused | :host
* `readonly` | Set when the select is read only | :host
* Attribute | Description | Part name
* ----------|-----------------------------|-----------
* `opened` | Set when the select is open | :host
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
* There are two exceptions in terms of styling compared to `<vaadin-text-field>`:
* - the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.
* - the `input-prevented` state attribute is not supported by `<vaadin-select>`.
*

@@ -96,2 +98,4 @@ * ### Internal components

* - `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
* - `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
* - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the button.
*

@@ -101,2 +105,4 @@ * Note: the `theme` attribute value set on `<vaadin-select>` is

*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {Event} change - Fired when the user commits a value change.

@@ -129,3 +135,3 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.

<div class="vaadin-select-container">
<div part="label">
<div part="label" on-click="_onClick">
<slot name="label"></slot>

@@ -347,2 +353,5 @@ <span part="required-indicator" aria-hidden="true" on-click="focus"></span>

// Ensure menu element is set
this._assignMenuElement();
if (this._menuElement && this._menuElement.items) {

@@ -370,14 +379,13 @@ this._updateSelectedItem(this.value, this._menuElement.items);

_assignMenuElement() {
this._menuElement = Array.from(this._overlayElement.content.children).find(
(element) => element.localName !== 'style'
);
const menuElement = this.__getMenuElement();
if (this._menuElement) {
this._menuElement.addEventListener('items-changed', () => {
this._items = this._menuElement.items;
if (menuElement && menuElement !== this.__lastMenuElement) {
this._menuElement = menuElement;
menuElement.addEventListener('items-changed', () => {
this._items = menuElement.items;
this._items.forEach((item) => item.setAttribute('role', 'option'));
});
this._menuElement.addEventListener('selected-changed', () => this.__updateValueButton());
this._menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e));
this._menuElement.addEventListener(
menuElement.addEventListener('selected-changed', () => this.__updateValueButton());
menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e));
menuElement.addEventListener(
'click',

@@ -391,3 +399,6 @@ () => {

this._menuElement.setAttribute('role', 'listbox');
menuElement.setAttribute('role', 'listbox');
// Store the menu element reference
this.__lastMenuElement = menuElement;
}

@@ -397,2 +408,8 @@ }

/** @private */
__getMenuElement() {
const content = this._overlayElement && this._overlayElement.content;
return content ? Array.from(content.children).find((el) => el.localName !== 'style') : null;
}
/** @private */
_valueChanged(value, oldValue) {

@@ -408,8 +425,9 @@ this.toggleAttribute('has-value', Boolean(value));

/** @private */
_onClick(e) {
const isHelperClick = Array.from(e.composedPath()).some((node) => {
return node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'helper';
});
this.opened = !this.readonly && !isHelperClick;
/**
* Opens the overlay if the field is not read-only.
*
* @private
*/
_onClick() {
this.opened = !this.readonly;
}

@@ -426,3 +444,3 @@

this.opened = true;
} else if (/[a-zA-Z0-9]/.test(e.key) && e.key.length === 1) {
} else if (/[\p{L}\p{Nd}]/u.test(e.key) && e.key.length === 1) {
const selected = this._menuElement.selected;

@@ -433,3 +451,6 @@ const currentIdx = selected !== undefined ? selected : -1;

this.__userInteraction = true;
this._updateSelectedItem(this._items[newIdx].value, this._items);
// Announce the value selected with the first letter shortcut
this._updateAriaLive(true);
this._menuElement.selected = newIdx;
}

@@ -453,2 +474,5 @@ }

if (opened) {
// Avoid multiple announcements when a value gets selected from the dropdown
this._updateAriaLive(false);
if (!this._overlayElement || !this._menuElement || !this.focusElement || this.disabled || this.readonly) {

@@ -502,2 +526,13 @@ this.opened = false;

/** @private */
_updateAriaLive(ariaLive) {
if (this._valueButton) {
if (ariaLive) {
this._valueButton.setAttribute('aria-live', 'polite');
} else {
this._valueButton.removeAttribute('aria-live');
}
}
}
/** @private */
__attachSelectedItem(selected) {

@@ -548,2 +583,4 @@ let labelItem;

this._valueButton.removeAttribute('placeholder');
if (!selected) {

@@ -553,2 +590,3 @@ if (this.placeholder) {

this.__appendItem(item);
this._valueButton.setAttribute('placeholder', '');
}

@@ -555,0 +593,0 @@ } else {

8

theme/lumo/vaadin-select-styles.js

@@ -23,3 +23,3 @@ /**

/* placeholder styles */
:host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
:host [part='input-field'] ::slotted([slot='value'][placeholder]) {
color: inherit;

@@ -30,3 +30,3 @@ transition: opacity 0.175s 0.1s;

:host([has-value]) [part='input-field'] ::slotted([slot='value']) {
:host [part='input-field'] ::slotted([slot='value']) {
color: var(--lumo-body-text-color);

@@ -67,2 +67,6 @@ }

}
::slotted(vaadin-item:hover) {
background-color: transparent;
}
`,

@@ -69,0 +73,0 @@ { moduleId: 'lumo-select-value-button' }

13

theme/material/vaadin-select-styles.js

@@ -18,3 +18,3 @@ /**

/* placeholder styles */
:host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
:host [part='input-field'] ::slotted([slot='value'][placeholder]) {
color: var(--material-disabled-text-color);

@@ -25,3 +25,3 @@ transition: opacity 0.175s 0.1s;

:host([has-value]) [part='input-field'] ::slotted([slot='value']) {
:host [part='input-field'] ::slotted([slot='value']) {
color: var(--material-body-text-color);

@@ -58,2 +58,11 @@ }

}
::slotted(vaadin-item) {
font: inherit;
padding: 4px 0;
}
::slotted(vaadin-item:hover) {
background-color: transparent;
}
`,

@@ -60,0 +69,0 @@ { moduleId: 'material-select-value-button' }

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