@vaadin/select 24.1.5 → 24.2.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "24.1.5",
+  "version": "24.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,14 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/vaadin-lit-select-item.d.ts",
+    "!src/vaadin-lit-select-item.js",
+    "!src/vaadin-lit-select-list-box.d.ts",
+    "!src/vaadin-lit-select-list-box.js",
+    "!src/vaadin-lit-select-overlay.js",
+    "!src/vaadin-lit-select-value-button.js",
+    "!src/vaadin-lit-select.d.ts",
+    "!src/vaadin-lit-select.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,23 +45,24 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "~24.1.5",
-    "@vaadin/button": "~24.1.5",
-    "@vaadin/component-base": "~24.1.5",
-    "@vaadin/field-base": "~24.1.5",
-    "@vaadin/input-container": "~24.1.5",
-    "@vaadin/item": "~24.1.5",
-    "@vaadin/list-box": "~24.1.5",
-    "@vaadin/lit-renderer": "~24.1.5",
-    "@vaadin/overlay": "~24.1.5",
-    "@vaadin/vaadin-lumo-styles": "~24.1.5",
-    "@vaadin/vaadin-material-styles": "~24.1.5",
-    "@vaadin/vaadin-themable-mixin": "~24.1.5"
+    "@vaadin/a11y-base": "24.2.0-alpha10",
+    "@vaadin/button": "24.2.0-alpha10",
+    "@vaadin/component-base": "24.2.0-alpha10",
+    "@vaadin/field-base": "24.2.0-alpha10",
+    "@vaadin/input-container": "24.2.0-alpha10",
+    "@vaadin/item": "24.2.0-alpha10",
+    "@vaadin/list-box": "24.2.0-alpha10",
+    "@vaadin/lit-renderer": "24.2.0-alpha10",
+    "@vaadin/overlay": "24.2.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -61,5 +70,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2150f0696b9205ed3651033301927516b87cf88f"
+  "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
 }

package/src/vaadin-select-base-mixin.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/a11y-base/src/tabindex-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+import type { SelectItem, SelectRenderer } from './vaadin-select.js';
+
+export declare function SelectBaseMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<OverlayClassMixinClass> &
+  Constructor<SelectBaseMixinClass> &
+  Constructor<TabindexMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class SelectBaseMixinClass {
+  /**
+   * An array containing items that will be rendered as the options of the select.
+   *
+   * #### Example
+   * ```js
+   * select.items = [
+   *   { label: 'Most recent first', value: 'recent' },
+   *   { component: 'hr' },
+   *   { label: 'Rating: low to high', value: 'rating-asc' },
+   *   { label: 'Rating: high to low', value: 'rating-desc' },
+   *   { component: 'hr' },
+   *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+   *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+   * ];
+   * ```
+   *
+   * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
+   * To render the item with a custom component, provide a tag name by the `component` property.
+   *
+   * @type {!Array<!SelectItem>}
+   */
+  items: SelectItem[] | null | undefined;
+
+  /**
+   * Set when the select is open
+   */
+  opened: boolean;
+
+  /**
+   * Custom function for rendering the content of the `<vaadin-select>`.
+   * Receives two arguments:
+   *
+   * - `root` The `<vaadin-select-overlay>` internal container
+   *   DOM element. Append your content to it.
+   * - `select` The reference to the `<vaadin-select>` element.
+   */
+  renderer: SelectRenderer | undefined;
+
+  /**
+   * The `value` property of the selected item, or an empty string
+   * if no item is selected.
+   * On change or initialization, the component finds the item which matches the
+   * value and displays it.
+   * If no value is provided to the component, it selects the first item without
+   * value or empty value.
+   * Hint: If you do not want to select any item by default, you can either set all
+   * the values of inner vaadin-items, or set the vaadin-select value to
+   * an inexistent value in the items list.
+   */
+  value: string;
+
+  /**
+   * The name of this element.
+   */
+  name: string | null | undefined;
+
+  /**
+   * A hint to the user of what can be entered in the control.
+   * The placeholder will be displayed in the case that there
+   * is no item selected, or the selected item has an empty
+   * string label, or the selected item has no label and it's
+   * DOM content is empty.
+   */
+  placeholder: string | null | undefined;
+
+  /**
+   * When present, it specifies that the element is read-only.
+   */
+  readonly: boolean;
+
+  /**
+   * Whether the field is dirty.
+   *
+   * The field is automatically marked as dirty once the user triggers
+   * a `change` event. Additionally, the field can be manually marked
+   * as dirty by setting the property to `true`.
+   */
+  dirty: boolean;
+
+  /**
+   * Requests an update for the content of the select.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+}