@warp-ds/elements 2.5.0 → 2.5.1-next.1

package/dist/packages/combobox/combobox.stories.js

@@ -26,13 +26,13 @@ const meta = {
 };
 export default meta;
 const sampleOptions = [
-    { value: 'Apple', label: 'Apple' },
-    { value: 'Banana', label: 'Banana' },
-    { value: 'Orange', label: 'Orange' },
-    { value: 'Grape', label: 'Grape' },
-    { value: 'Strawberry', label: 'Strawberry' },
-    { value: 'Pineapple', label: 'Pineapple' },
-    { value: 'Mango', label: 'Mango' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+    { value: 'mango', label: 'Mango' },
 ];
 export const Default = {
     args: {},

package/dist/packages/combobox/combobox.test.js

@@ -19,3 +19,93 @@ test('renders with autocomplete attribute when provided', async () => {
     const el = (await locator.element());
     expect(el.getAttribute('autocomplete')).toBe('on');
 });
+test('displays initial value correctly when value prop is set', async () => {
+    const options = [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    value="apple"
+    .options="${options}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Verify the displayed text shows the label "Apple", not the value "apple"
+    expect(input?.value).toBe('Apple');
+    // Verify the combobox value is "apple"
+    expect(el.value).toBe('apple');
+});
+test('filters options by label, not value', async () => {
+    const options = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'no', label: 'Norway' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    open-on-focus
+    .options="${options}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Type "United" which should match labels "United States" and "United Kingdom"
+    // but NOT match any values (us, uk, no)
+    input?.focus();
+    input.value = 'United';
+    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Check that the dropdown shows the matching options
+    const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
+    const visibleOptions = listbox?.querySelectorAll('[role="option"]');
+    // Should show 2 options: "United States" and "United Kingdom"
+    expect(visibleOptions?.length).toBe(2);
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toContain('United States');
+    expect(optionTexts).toContain('United Kingdom');
+    expect(optionTexts).not.toContain('Norway');
+});
+test('displays option label in textfield but stores option value', async () => {
+    const optionsWithDifferentLabelAndValue = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'no', label: 'Norway' },
+    ];
+    const component = html `<w-combobox
+    data-testid="combobox"
+    open-on-focus
+    .options="${optionsWithDifferentLabelAndValue}"
+  ></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    // Get the textfield's input element
+    const textfield = el.shadowRoot?.querySelector('w-textfield');
+    const input = textfield?.shadowRoot?.querySelector('input');
+    // Focus to open the dropdown
+    input?.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Find and click the "Norway" option (which has value "no")
+    const listbox = el.shadowRoot?.querySelector('[role="listbox"]');
+    const options = listbox?.querySelectorAll('[role="option"]');
+    const norwayOption = Array.from(options || []).find((opt) => opt.textContent?.trim() === 'Norway');
+    expect(norwayOption).toBeDefined();
+    // Simulate mousedown on the option
+    norwayOption?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Verify the displayed text is the label "Norway", not the value "no"
+    expect(input?.value).toBe('Norway');
+    // Verify the combobox value is "no", not "Norway"
+    expect(el.value).toBe('no');
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.5.0-next.2",
+  "version": "2.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.5.1-next.1",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {