refactor!: make multi-select-combo-box item not extend item (#5385)

vaadin · Jan 25, 2023 · 4358eae · 4358eae
1 parent 23a684e
commit 4358eae
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 39 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-item.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-item.d.ts
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ComboBoxDefaultItem, ComboBoxItemMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { MultiSelectComboBox } from './vaadin-multi-select-combo-box.js';
+
+/**
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ */
+declare class MultiSelectComboBoxItem extends HTMLElement {}
+
+interface MultiSelectComboBoxItem<TItem = ComboBoxDefaultItem>
+  extends ComboBoxItemMixinClass<TItem, MultiSelectComboBox>,
+    DirMixinClass,
+    ThemableMixinClass {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-item': MultiSelectComboBoxItem;
+  }
+}
+
+export { MultiSelectComboBoxItem };
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-item.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-item.js
@@ -3,35 +3,59 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used for items in `<vaadin-multi-select-combo-box>`.
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------|-------------
- * `content` | The element that wraps the item content
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
  *
  * The following state attributes are exposed for styling:
  *
- * Attribute  | Description                   | Part name
- * -----------|-------------------------------|-----------
- * `selected` | Set when the item is selected | :host
- * `focused`  | Set when the item is focused  | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * @extends ComboBoxItem
+ * @mixes ComboBoxItemMixin
+ * @mixes ThemableMixin
+ * @mixes DirMixin
  * @private
  */
-class MultiSelectComboBoxItem extends ComboBoxItem {
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-item';
   }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
 }
 
 customElements.define(MultiSelectComboBoxItem.is, MultiSelectComboBoxItem);
diff --git a/packages/multi-select-combo-box/test/typings/multi-select-combo-box.types.ts b/packages/multi-select-combo-box/test/typings/multi-select-combo-box.types.ts
@@ -1,6 +1,11 @@
+import type {
+  ComboBoxItemMixinClass,
+  ComboBoxItemRenderer,
+} from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
@@ -13,6 +18,7 @@ import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin';
+import type { MultiSelectComboBoxItem } from '../../src/vaadin-multi-select-combo-box-item.js';
 import type {
   MultiSelectComboBox,
   MultiSelectComboBoxChangeEvent,
@@ -108,3 +114,23 @@ assertType<LabelMixinClass>(narrowedComboBox);
 assertType<SlotStylesMixinClass>(narrowedComboBox);
 assertType<ValidateMixinClass>(narrowedComboBox);
 assertType<ThemableMixinClass>(narrowedComboBox);
+
+// Item
+const genericItem = document.createElement('vaadin-multi-select-combo-box-item');
+assertType<MultiSelectComboBoxItem>(genericItem);
+
+const narrowedItem = genericItem as MultiSelectComboBoxItem<TestComboBoxItem>;
+
+// Item properties
+assertType<TestComboBoxItem>(narrowedItem.item);
+assertType<number>(narrowedItem.index);
+assertType<string>(narrowedItem.label);
+assertType<boolean>(narrowedItem.focused);
+assertType<boolean>(narrowedItem.selected);
+assertType<ComboBoxItemRenderer<TestComboBoxItem, MultiSelectComboBox>>(narrowedItem.renderer);
+assertType<() => void>(narrowedItem.requestContentUpdate);
+
+// Item mixins
+assertType<ComboBoxItemMixinClass<TestComboBoxItem, MultiSelectComboBox>>(narrowedItem);
+assertType<DirMixinClass>(narrowedItem);
+assertType<ThemableMixinClass>(narrowedItem);
diff --git a/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js b/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js
@@ -7,23 +7,23 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
+import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
-      }
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
     }
-  `,
-  {
-    moduleId: 'lumo-multi-select-combo-box-item',
-  },
-);
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'lumo-multi-select-combo-box-item',
+});
 
 const multiSelectComboBox = css`
   :host([has-value]) {

diff --git a/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box.js
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
 import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';

diff --git a/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box-styles.js b/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box-styles.js
@@ -6,23 +6,23 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
+import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
-      }
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
     }
-  `,
-  {
-    moduleId: 'material-multi-select-combo-box-item',
-  },
-);
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'material-multi-select-combo-box-item',
+});
 
 const multiSelectComboBox = css`
   :host([has-value]) ::slotted(input:placeholder-shown) {

diff --git a/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
 import '@vaadin/combo-box/theme/material/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';