@vaadin/multi-select-combo-box - npm Package Compare versions

Comparing version 23.1.0-beta1 to 23.1.0-beta2

package.json

 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-beta1",
+  "version": "23.1.0-beta2",
   "publishConfig": {
@@ -36,9 +36,9 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-beta1",
-    "@vaadin/component-base": "23.1.0-beta1",
-    "@vaadin/field-base": "23.1.0-beta1",
-    "@vaadin/input-container": "23.1.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
+    "@vaadin/combo-box": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/field-base": "23.1.0-beta2",
+    "@vaadin/input-container": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
   },
-  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

src/vaadin-multi-select-combo-box-internal.js

@@ -182,2 +182,6 @@ /**
   _onFocusout(event) {
+    // Disable combo-box logic that updates selectedItem
+    // based on the overlay focused index on input blur
+    this._ignoreCommitValue = true;
+
     super._onFocusout(event);
@@ -191,2 +195,22 @@
   /**
+   * Override method inherited from the combo-box
+   * to not commit an already selected item again
+   * on blur, which would result in un-selecting.
+   * @protected
+   * @override
+   */
+  _detectAndDispatchChange() {
+    if (this._ignoreCommitValue) {
+      this._ignoreCommitValue = false;
+
+      // Reset internal combo-box state
+      this.selectedItem = null;
+      this._inputElementValue = '';
+      return;
+    }
+
+    super._detectAndDispatchChange();
+  }
+
+  /**
    * @param {CustomEvent} event
@@ -193,0 +217,0 @@ * @protected

src/vaadin-multi-select-combo-box.d.ts

@@ -25,2 +25,3 @@ /**
   cleared: string;
+  focused: string;
   selected: string;
@@ -41,3 +42,3 @@ deselected: string;
  */
-export type MultiSelectComboBoxCustomValuesSetEvent = CustomEvent<string>;
+export type MultiSelectComboBoxCustomValueSetEvent = CustomEvent<string>;
 
@@ -62,3 +63,3 @@ /**
 
-  'custom-values-set': MultiSelectComboBoxCustomValuesSetEvent;
+  'custom-value-set': MultiSelectComboBoxCustomValueSetEvent;
 
@@ -143,3 +144,3 @@ 'filter-changed': MultiSelectComboBoxFilterChangedEvent;
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
@@ -152,5 +153,5 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
    * When true, the user can input a value that is not present in the items list.
-   * @attr {boolean} allow-custom-values
+   * @attr {boolean} allow-custom-value
    */
-  allowCustomValues: boolean;
+  allowCustomValue: boolean;
 
@@ -224,2 +225,4 @@ /**
    *   cleared: 'Selection cleared',
+   *   // Screen reader announcement when a chip is focused.
+   *   focused: ' focused. Press Backspace to remove',
    *   // Screen reader announcement when item is selected.
@@ -249,2 +252,9 @@ *   selected: 'added to selection',
   /**
+   * A hint to the user of what can be entered in the control.
+   * The placeholder will be only displayed in the case when
+   * there is no item selected.
+   */
+  placeholder: string;
+
+  /**
    * Custom function for rendering the content of every item.
@@ -251,0 +261,0 @@ * Receives three arguments:

src/vaadin-multi-select-combo-box.js

@@ -129,3 +129,3 @@ /**
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
@@ -163,3 +163,3 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
           auto-open-disabled="[[autoOpenDisabled]]"
-          allow-custom-value="[[allowCustomValues]]"
+          allow-custom-value="[[allowCustomValue]]"
           data-provider="[[dataProvider]]"
@@ -273,2 +273,4 @@ filter="{{filter}}"
        *   cleared: 'Selection cleared',
+       *   // Screen reader announcement when a chip is focused.
+       *   focused: ' focused. Press Backspace to remove',
        *   // Screen reader announcement when item is selected.
@@ -291,2 +293,3 @@ *   selected: 'added to selection',
             cleared: 'Selection cleared',
+            focused: 'focused. Press Backspace to remove',
             selected: 'added to selection',
@@ -358,5 +361,5 @@ deselected: 'removed from selection',
        * When true, the user can input a value that is not present in the items list.
-       * @attr {boolean} allow-custom-values
+       * @attr {boolean} allow-custom-value
        */
-      allowCustomValues: {
+      allowCustomValue: {
         type: Boolean,
@@ -367,2 +370,13 @@ value: false,
       /**
+       * A hint to the user of what can be entered in the control.
+       * The placeholder will be only displayed in the case when
+       * there is no item selected.
+       */
+      placeholder: {
+        type: String,
+        value: '',
+        observer: '_placeholderChanged',
+      },
+
+      /**
        * Custom function for rendering the content of every item.
@@ -407,2 +421,9 @@ * Receives three arguments:
       },
+
+      /** @private */
+      _focusedChipIndex: {
+        type: Number,
+        value: -1,
+        observer: '_focusedChipIndexChanged',
+      },
     };
@@ -492,2 +513,3 @@ }
     if (!focused) {
+      this._focusedChipIndex = -1;
       this.validate();
@@ -571,2 +593,15 @@ }
   /** @private */
+  _placeholderChanged(placeholder) {
+    const tmpPlaceholder = this.__tmpA11yPlaceholder;
+    // Do not store temporary placeholder
+    if (tmpPlaceholder !== placeholder) {
+      this.__savedPlaceholder = placeholder;
+
+      if (tmpPlaceholder) {
+        this.placeholder = tmpPlaceholder;
+      }
+    }
+  }
+
+  /** @private */
   _selectedItemsChanged(selectedItems) {
@@ -579,5 +614,7 @@ this._hasValue = Boolean(selectedItems && selectedItems.length);
     if (this._hasValue) {
-      this.__savedPlaceholder = this.placeholder;
-      this.placeholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+      const tmpPlaceholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+      this.__tmpA11yPlaceholder = tmpPlaceholder;
+      this.placeholder = tmpPlaceholder;
     } else {
+      delete this.__tmpA11yPlaceholder;
       this.placeholder = this.__savedPlaceholder;
@@ -810,8 +847,121 @@ }
     const items = this.selectedItems || [];
-    if (!this.readonly && event.key === 'Backspace' && items.length && this.inputElement.value === '') {
-      this.__removeItem(items[items.length - 1]);
+
+    if (event.key === 'Escape' && this.clearButtonVisible && items.length) {
+      this.selectedItems = [];
+      return;
     }
+
+    const chips = Array.from(this._chips).slice(1);
+
+    if (!this.readonly && chips.length > 0) {
+      switch (event.key) {
+        case 'Backspace':
+          this._onBackSpace(chips);
+          break;
+        case 'ArrowLeft':
+          this._onArrowLeft(chips);
+          break;
+        case 'ArrowRight':
+          this._onArrowRight(chips);
+          break;
+        default:
+          this._focusedChipIndex = -1;
+          break;
+      }
+    }
   }
 
   /** @private */
+  _onArrowLeft(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') !== 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onArrowRight(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') === 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onBackSpace(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    if (idx === -1) {
+      this._focusedChipIndex = chips.length - 1;
+    } else {
+      this.__removeItem(chips[idx].item);
+      this._focusedChipIndex = -1;
+    }
+  }
+
+  /** @private */
+  _focusedChipIndexChanged(focusedIndex, oldFocusedIndex) {
+    if (focusedIndex > -1 || oldFocusedIndex > -1) {
+      const chips = Array.from(this._chips).slice(1);
+      chips.forEach((chip, index) => {
+        chip.toggleAttribute('focused', index === focusedIndex);
+      });
+
+      // Announce focused chip
+      if (focusedIndex > -1) {
+        const item = chips[focusedIndex].item;
+        const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+        announce(`${itemLabel} ${this.i18n.focused}`);
+      }
+    }
+  }
+
+  /** @private */
   _onComboBoxChange() {
@@ -834,6 +984,9 @@ const item = this.$.comboBox.selectedItem;
 
+    // Stop the original event
+    event.stopPropagation();
+
     this.__clearFilter();
 
     this.dispatchEvent(
-      new CustomEvent('custom-values-set', {
+      new CustomEvent('custom-value-set', {
         detail: event.detail,
@@ -840,0 +993,0 @@ composed: true,

theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -25,2 +25,11 @@ /**
 
+  :host([focused]) {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  :host([focused]) [part='remove-button'] {
+    color: inherit;
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
@@ -40,6 +49,6 @@ padding-inline-end: 0;
     content: '';
-    width: 3px;
-    height: calc(1.875em - 1px);
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
+    width: 100%;
+    height: 100%;
+    border-left: calc(var(--lumo-space-s) / 4) solid;
+    border-radius: var(--lumo-border-radius-s);
     border-color: var(--lumo-contrast-30pct);
@@ -49,7 +58,7 @@ }
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: calc(-1 * var(--lumo-space-s) / 2);
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: calc(-1 * var(--lumo-space-s));
   }
@@ -89,2 +98,3 @@
     font-size: 1.5em;
+    transition: none;
   }
@@ -91,0 +101,0 @@

theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -33,2 +33,6 @@ /**
 
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--lumo-body-text-color) !important;
+  }
+
   [part~='chip']:not(:last-of-type) {
@@ -35,0 +39,0 @@ margin-inline-end: var(--lumo-space-xs);

theme/material/vaadin-multi-select-combo-box-chip-styles.js

@@ -18,3 +18,3 @@ /**
     border-radius: 4px;
-    background-color: hsla(214, 53%, 23%, 0.1);
+    background-color: rgba(0, 0, 0, 0.08);
     cursor: default;
@@ -24,2 +24,6 @@ font-family: var(--material-font-family);
 
+  :host([focused]) {
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
@@ -38,15 +42,15 @@ padding-inline-end: 0;
     content: '';
-    width: 3px;
-    height: 20px;
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
-    border-color: hsla(214, 53%, 23%, 0.1);
+    width: 100%;
+    height: 100%;
+    border-left: 0.125rem solid;
+    border-radius: 0.25rem;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: -0.25rem;
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: -0.5rem;
   }
@@ -53,0 +57,0 @@

theme/material/vaadin-multi-select-combo-box-styles.js

@@ -28,2 +28,6 @@ /**
 const multiSelectComboBox = css`
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--material-body-text-color) !important;
+  }
+
   [part='input-field'] {
@@ -30,0 +34,0 @@ height: auto;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78061

increased by7.27%

Lines of code

1930

increased by10.22%

Published versions last months

11

increased by10%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/combo-box@23.1.0-beta2(transitive)

• + Added@vaadin/component-base@23.1.0-beta2(transitive)

• + Added@vaadin/field-base@23.1.0-beta2(transitive)

• + Added@vaadin/icon@23.1.0-beta2(transitive)

• + Added@vaadin/input-container@23.1.0-beta2(transitive)

• + Added@vaadin/item@23.1.0-beta2(transitive)

• + Added@vaadin/lit-renderer@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-beta2(transitive)

• - Removed@vaadin/combo-box@23.1.0-beta1(transitive)

• - Removed@vaadin/component-base@23.1.0-beta1(transitive)

• - Removed@vaadin/field-base@23.1.0-beta1(transitive)

• - Removed@vaadin/icon@23.1.0-beta1(transitive)

• - Removed@vaadin/input-container@23.1.0-beta1(transitive)

• - Removed@vaadin/item@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-beta1(transitive)

• Updated@vaadin/combo-box@23.1.0-beta2

• Updated@vaadin/component-base@23.1.0-beta2

• Updated@vaadin/field-base@23.1.0-beta2

• Updated@vaadin/input-container@23.1.0-beta2

• Updated@vaadin/vaadin-lumo-styles@23.1.0-beta2

• Updated@vaadin/vaadin-material-styles@23.1.0-beta2

• Updated@vaadin/vaadin-themable-mixin@23.1.0-beta2