@vaadin/select 24.2.0-alpha3 → 24.2.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "24.2.0-alpha3",
+  "version": "24.2.0-alpha5",
   "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.2.0-alpha3",
-    "@vaadin/button": "24.2.0-alpha3",
-    "@vaadin/component-base": "24.2.0-alpha3",
-    "@vaadin/field-base": "24.2.0-alpha3",
-    "@vaadin/input-container": "24.2.0-alpha3",
-    "@vaadin/item": "24.2.0-alpha3",
-    "@vaadin/list-box": "24.2.0-alpha3",
-    "@vaadin/lit-renderer": "24.2.0-alpha3",
-    "@vaadin/overlay": "24.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha3"
+    "@vaadin/a11y-base": "24.2.0-alpha5",
+    "@vaadin/button": "24.2.0-alpha5",
+    "@vaadin/component-base": "24.2.0-alpha5",
+    "@vaadin/field-base": "24.2.0-alpha5",
+    "@vaadin/input-container": "24.2.0-alpha5",
+    "@vaadin/item": "24.2.0-alpha5",
+    "@vaadin/list-box": "24.2.0-alpha5",
+    "@vaadin/lit-renderer": "24.2.0-alpha5",
+    "@vaadin/overlay": "24.2.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -61,5 +70,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e5d1e1ed2d01b56d5922e18a3fcb7cd306351954"
+  "gitHead": "73db22a5e8993e3ce48d1e6540d30eff9cb5c257"
 }

package/src/lit/renderer-directives.d.ts

@@ -3,12 +3,12 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { TemplateResult } from 'lit';
 import type { DirectiveResult } from 'lit/directive.js';
+import type { LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
 import type { Select } from '../vaadin-select.js';
 
-export type SelectLitRenderer = (select: Select) => TemplateResult;
+export type SelectLitRenderer = (select: Select) => LitRendererResult;
 
 export class SelectRendererDirective extends LitRendererDirective<Select, SelectLitRenderer> {
   /**

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

@@ -0,0 +1,106 @@
+/**
+ * @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 { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-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<FieldMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<OverlayClassMixinClass> &
+  Constructor<SelectBaseMixinClass> &
+  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;
+
+  /**
+   * 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;
+}