@descope-ui/descope-combo-box 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.9](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-combo-box-0.0.8...@descope-ui/descope-combo-box-0.0.9) (2025-03-06)
+
+### Dependency Updates
+
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.9`
+* `@descope-ui/theme-globals` updated to version `0.0.9`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.9`
 ## [0.0.8](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-combo-box-0.0.7...@descope-ui/descope-combo-box-0.0.8) (2025-03-05)
 
 ### Dependency Updates

package/e2e/descope-combo-box.spec.ts

@@ -355,13 +355,14 @@ test.describe('logic', () => {
 
     await page.getByRole('button').getByText('Submit').click();
 
+    // we blur the input to remove the tooltip, so we can see the error message
     await component.blur();
 
     expect(
       await component.screenshot({
         animations: 'disabled',
         caret: 'hide',
-        delay: 3000,
+        delay: 5000,
       }),
     ).toMatchSnapshot();
   });
@@ -457,6 +458,8 @@ test.describe('override renderer', () => {
     await page.goto(getStoryUrl(storyName, { overrideRenderer: true }));
     const component = createComboBoxTestDriver(page.locator(componentName));
     await component.openDropdown();
-    expect(await component.dropDown.screenshot()).toMatchSnapshot();
+    expect(
+      await component.dropDown.screenshot({ delay: 1000 }),
+    ).toMatchSnapshot();
   });
 });

package/package.json

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

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

@@ -19,6 +19,7 @@ import {
   inputLabelTypeControl,
   errorMessageIconControl,
   errorMessageIconAttrs,
+  overrideRendererControl,
 } from '@descope-ui/common/sb-controls';
 
 const Template = ({
@@ -32,7 +33,6 @@ const Template = ({
   direction,
   disabled,
   data,
-  overrideRenderItem,
   itemsSource,
   loading,
   'default-value': defaultValue,
@@ -40,7 +40,6 @@ const Template = ({
   'label-type': labelType,
   'hide-toggle-button': hideToggleButton,
   'allow-custom-value': allowCustomValue,
-  overrideRenderer,
   errorMsgIcon,
 }) => {
   let serializedData;
@@ -51,42 +50,6 @@ const Template = ({
     // do nothing
   }
 
-  // this is another way to pass data to the component (prop instead of attr)
-  const dataFromPropScript = `
-  <script>
-    document.querySelector("descope-combo-box").data = ${serializedData.replace(
-      /\n/g,
-      '',
-    )}
-  </script>`;
-
-  // eslint-disable-next-line no-shadow
-  const altRenderItem = ({ displayName, label, value }) =>
-    `<span data-name="${displayName}" data-value="${value}">${label}</span>`;
-
-  // this allows us to update the render item function
-  const overrideRenderItemScript = `
-  <script>
-    document.querySelector("descope-combo-box").renderItem = ${altRenderItem
-      .toString()
-      .replace(/\n/g, '')}
-  </script>`;
-
-  const altRenderer = (root, combo, model) => {
-    if (model.index === 1) {
-      root.style.backgroundColor = '#008000';
-      root.style.color = '#ffffff';
-    }
-    root.innerHTML = model.item.outerHTML;
-  };
-
-  const overrideRendererScript = `
-  <script>
-    document.querySelector("descope-combo-box").renderer = ${altRenderer
-      .toString()
-      .replace(/\n/g, '')}
-  </script>`;
-
   return `
     <descope-combo-box
       clear-button-visible
@@ -121,16 +84,46 @@ const Template = ({
       <span data-name="ItemName9" data-id="itemId9">Achilles' Heel Weakness</span>
       <span data-name="ItemName10" data-id="itemId10">Epic Poem of Ancient</span>
     </descope-combo-box>
-    ${itemsSource === 'prop' ? dataFromPropScript : ''}
-    ${overrideRenderItem ? overrideRenderItemScript : ''}
-    ${overrideRenderer ? overrideRendererScript : ''}
   `;
 };
 
 export default {
   component: componentName,
   title: 'descope-combo-box',
-  decorators: [withForm],
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-combo-box');
+        if (!ele) return;
+
+        if (args.overrideRenderer) {
+          ele.renderer = (root, _combo, model) => {
+            if (model.index === 1) {
+              root.style.backgroundColor = '#008000';
+              root.style.color = '#ffffff';
+            }
+            root.innerHTML = model.item.outerHTML;
+          };
+        }
+
+        if (args.overrideRenderItem) {
+          ele.renderItem = ({ displayName, label, value }) =>
+            `<span data-name="${displayName}" data-value="${value}">${label}</span>`;
+        }
+
+        if (args.itemsSource === 'prop') {
+          ele.data = args.data;
+        }
+
+        if (args.itemsSource === 'attr') {
+          ele.setAttribute('data', JSON.stringify(args.data));
+        }
+      });
+
+      return story();
+    },
+    withForm,
+  ],
   argTypes: {
     ...labelControl,
     ...placeholderControl,
@@ -143,6 +136,7 @@ export default {
     ...borderedControl,
     ...errorMissingValueControl,
     ...overrideRenderItemControl,
+    ...overrideRendererControl,
     ...itemsSourceControl,
     ...directionControl,
     ...loadingControl,
@@ -178,4 +172,5 @@ Default.args = {
     { displayName: 'Item3', value: '3', label: 'data item 3' },
     { displayName: 'Item4', value: '4', label: 'data item 4' },
   ],
+  itemsSource: 'children',
 };