@descope-ui/descope-combo-box 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-combo-box-0.0.2...@descope-ui/descope-combo-box-0.0.3) (2025-02-04)
+
+### Dependency Updates
+
+* `@descope-ui/theme-globals` updated to version `0.0.3`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.3`
+* `@descope-ui/common` updated to version `0.0.3`
+## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-combo-box-0.0.1...@descope-ui/descope-combo-box-0.0.2) (2025-01-28)
+
+### Dependency Updates
+
+* `@descope-ui/theme-globals` updated to version `0.0.2`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.2`
+* `@descope-ui/common` updated to version `0.0.2`
+## 0.0.1 (2025-01-28)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/theme-globals` updated to version `0.0.1`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.1`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-combo-box",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@vaadin/combo-box": "24.3.4",
-    "@descope-ui/common": "0.0.1",
-    "@descope-ui/theme-globals": "0.0.1",
-    "theme-input-wrapper": "0.0.1"
+    "@descope-ui/common": "0.0.3",
+    "@descope-ui/theme-globals": "0.0.3",
+    "@descope-ui/theme-input-wrapper": "0.0.3"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/project.json

@@ -3,5 +3,15 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/web-components/components/descope-combo-box/src",
   "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
   "tags": []
 }

package/src/component/ComboBoxClass.js

@@ -123,6 +123,14 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
+    get hasDynamicData() {
+      return this.getAttribute('has-dynamic-data') === 'true';
+    }
+
+    get shouldSelectItemOnItemsChange() {
+      return !this.hasDynamicData || this.allowCustomValue;
+    }
+
     handleSelectedItem() {
       const { selectedItem } = this.baseElement;
       const currentSelected = selectedItem?.['data-id'];
@@ -133,7 +141,7 @@ const ComboBoxMixin = (superclass) =>
       }
 
       // if previously selected item ID exists in current children, set it as selected
-      if (currentSelected) {
+      if (currentSelected && this.shouldSelectItemOnItemsChange) {
         this.value = currentSelected;
       }
 
@@ -233,6 +241,15 @@ const ComboBoxMixin = (superclass) =>
       };
     }
 
+    #disableDataProviderFilterEventIfNeeded() {
+      if (this.hasDynamicData) {
+        // For the autocomplete field, we don't want to trigger the data provider filter changed event
+        // because it changes the loading state on every keystroke, making the overlay open and close
+        // on every keystroke, causing a flickering effect in the loading state.
+        this.baseElement._dataProviderFilterChanged = () => {};
+      }
+    }
+
     init() {
       super.init?.();
 
@@ -249,6 +266,7 @@ const ComboBoxMixin = (superclass) =>
       this.setComboBoxDescriptor();
       this.#overrideOverlaySettings();
       this.#overrideRenderer();
+      this.#disableDataProviderFilterEventIfNeeded();
 
       // Set up observers - order matters here since renderItems can clear innerHTML
       observeAttributes(this, this.renderItems.bind(this), {
@@ -258,11 +276,23 @@ const ComboBoxMixin = (superclass) =>
 
       this.setDefaultValue();
 
-      this.baseElement.addEventListener('selected-item-changed', () => {
+      // Using "value-changed" event instead of "selected-item-changed" event to avoid
+      // the issue of the value not being updated in the input field when the user enter a custom value
+      this.baseElement.addEventListener('value-changed', () => {
         this.dispatchEvent(
           new Event('input', { bubbles: true, composed: true }),
         );
       });
+
+      this.baseElement.addEventListener('filter-changed', (e) => {
+        this.dispatchEvent(
+          new CustomEvent('filter-changed', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail,
+          }),
+        );
+      });
     }
 
     onLabelClick() {
@@ -270,7 +300,9 @@ const ComboBoxMixin = (superclass) =>
         return;
       }
       this.focus();
-      this.setAttribute('opened', 'true');
+      if (!this.autoOpenDisabled) {
+        this.setAttribute('opened', 'true');
+      }
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -334,6 +366,10 @@ const ComboBoxMixin = (superclass) =>
     get allowCustomValue() {
       return this.getAttribute('allow-custom-value') === 'true';
     }
+
+    get autoOpenDisabled() {
+      return this.getAttribute('auto-open-disabled') === 'true';
+    }
   };
 
 const {
@@ -347,6 +383,8 @@ const {
   requiredIndicator,
   helperText,
   errorMessage,
+  loader,
+  overlayContent,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -360,6 +398,8 @@ const {
   },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  loader: { selector: 'vaadin-combo-box-overlay::part(loader)' },
+  overlayContent: { selector: 'vaadin-combo-box-overlay::part(content)' },
 };
 
 export const ComboBoxClass = compose(
@@ -470,6 +510,26 @@ export const ComboBoxClass = compose(
       overlayItemPaddingInlineEnd: {
         property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
       },
+      overlayCheckmarkDisplay: {
+        property: () => ComboBoxClass.cssVarList.overlay.checkmarkDisplay,
+      },
+      overlaySelectedItemBackground: {
+        property: () => ComboBoxClass.cssVarList.overlay.selectedItemBackground,
+      },
+      overlaySelectedItemHoverBackground: {
+        property: () =>
+          ComboBoxClass.cssVarList.overlay.selectedItemHoverBackground,
+      },
+      overlaySelectedItemFocusBackground: {
+        property: () =>
+          ComboBoxClass.cssVarList.overlay.selectedItemFocusBackground,
+      },
+      overlayItemHoverBackground: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemHoverBackground,
+      },
+      overlayItemFocusBackground: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemFocusBackground,
+      },
     },
   }),
   draggableMixin,
@@ -499,50 +559,46 @@ export const ComboBoxClass = compose(
         selector: 'vaadin-combo-box-item',
         property: 'padding-inline-end',
       },
-
-      loaderTop: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'top',
-      },
-      loaderLeft: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'left',
-      },
-      loaderRight: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'right',
+      checkmarkDisplay: {
+        selector: 'vaadin-combo-box-item::part(checkmark)',
+        property: 'display',
       },
-      loaderMargin: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'margin',
+      selectedItemBackground: {
+        selector: 'vaadin-combo-box-item[selected]',
+        property: 'background-color',
       },
-      loaderWidth: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'width',
+      selectedItemHoverBackground: {
+        selector: 'vaadin-combo-box-item[selected]:hover:not([disabled])',
+        property: 'background-color',
       },
-      loaderHeight: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'height',
+      selectedItemFocusBackground: {
+        selector: 'vaadin-combo-box-item[selected][focused]:not([disabled])',
+        property: 'background-color',
       },
-      loaderBorder: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'border',
+      itemHoverBackground: {
+        selector: 'vaadin-combo-box-item:hover:not([selected]):not([disabled])',
+        property: 'background-color',
       },
-      loaderBorderColor: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'border-color',
+      itemFocusBackground: {
+        selector:
+          'vaadin-combo-box-item[focused]:not([selected]):not([disabled])',
+        property: 'background-color',
       },
-      loaderBorderRadius: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'border-radius',
-      },
-      contentHeight: {
-        selector: 'vaadin-combo-box-overlay::part(content)',
-        property: 'height',
-      },
-      contentOpacity: {
-        selector: 'vaadin-combo-box-overlay::part(content)',
-        property: 'opacity',
+
+      loaderTop: { ...loader, property: 'top' },
+      loaderLeft: { ...loader, property: 'left' },
+      loaderRight: { ...loader, property: 'right' },
+      loaderMargin: { ...loader, property: 'margin' },
+      loaderWidth: { ...loader, property: 'width' },
+      loaderHeight: { ...loader, property: 'height' },
+      loaderBorder: { ...loader, property: 'border' },
+      loaderBorderColor: { ...loader, property: 'border-color' },
+      loaderBorderRadius: { ...loader, property: 'border-radius' },
+      contentHeight: { ...overlayContent, property: 'height' },
+      contentOpacity: { ...overlayContent, property: 'opacity' },
+      scrollerMinHeight: {
+        selector: 'vaadin-combo-box-scroller',
+        property: 'min-height',
       },
     },
     forward: {
@@ -552,7 +608,7 @@ export const ComboBoxClass = compose(
   }),
   proxyInputMixin({
     proxyProps: ['selectionStart'],
-    inputEvent: 'selected-item-changed',
+    inputEvent: 'value-changed',
   }),
   componentNameValidationMixin,
   ComboBoxMixin,

package/src/component/index.js

@@ -3,4 +3,4 @@ import { componentName, ComboBoxClass } from './ComboBoxClass';
 
 customElements.define(componentName, ComboBoxClass);
 
-export { ComboBoxClass };
+export { ComboBoxClass, componentName };

package/src/theme.js

@@ -1,7 +1,7 @@
 import globals from '@descope-ui/theme-globals';
 import { ComboBoxClass } from './component/ComboBoxClass';
 import { getThemeRefs } from '@descope-ui/common/theme-helpers';
-import { refs } from 'theme-input-wrapper';
+import { refs } from '@descope-ui/theme-input-wrapper';
 
 const globalRefs = getThemeRefs(globals);
 const vars = ComboBoxClass.cssVarList;
@@ -64,6 +64,14 @@ export const comboBox = {
   [vars.overlayItemBoxShadow]: 'none',
   [vars.overlayBackground]: refs.backgroundColor,
   [vars.overlayTextColor]: refs.valueTextColor,
+  [vars.overlayCheckmarkDisplay]: 'initial',
+  [vars.overlaySelectedItemBackground]: 'initial',
+  [vars.overlaySelectedItemHoverBackground]:
+    globalRefs.colors.primary.highlight,
+  [vars.overlaySelectedItemFocusBackground]:
+    globalRefs.colors.primary.highlight,
+  [vars.overlayItemHoverBackground]: globalRefs.colors.primary.highlight,
+  [vars.overlayItemFocusBackground]: globalRefs.colors.primary.highlight,
 
   // Overlay direct theme:
   [vars.overlay.minHeight]: '400px',
@@ -71,6 +79,7 @@ export const comboBox = {
 
   [vars.overlay.contentHeight]: '100%',
   [vars.overlay.contentOpacity]: '1',
+  [vars.overlay.scrollerMinHeight]: '1px',
   _loading: {
     [vars.overlay.loaderTop]: '50%',
     [vars.overlay.loaderLeft]: '50%',
@@ -81,10 +90,11 @@ export const comboBox = {
     [vars.overlay.loaderWidth]: '30px',
     [vars.overlay.loaderHeight]: '30px',
     [vars.overlay.loaderBorder]: '2px solid transparent',
-    [vars.overlay
-      .loaderBorderColor]: `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
+    [vars.overlay.loaderBorderColor]:
+      `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
     [vars.overlay.loaderBorderRadius]: '50%',
     [vars.overlay.contentHeight]: '100px',
+    [vars.overlay.scrollerMinHeight]: '100px',
     [vars.overlay.contentOpacity]: '0',
   },
 };

package/stories/descope-combo-box.stories.js

@@ -1,6 +1,6 @@
 /* eslint no-param-reassign: 0 */
 
-import { componentName } from '../src/component/ComboBoxClass';
+import { componentName } from '../src/component';
 import { withForm } from '@descope-ui/common/sb-helpers';
 import {
   labelControl,