@warp-ds/elements 2.10.0-next.1 → 2.10.0-next.11

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

@@ -9,7 +9,11 @@ const meta = {
     title: 'Forms/Combobox',
     component: 'w-combobox',
     render(args) {
-        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
+        return html `
+      <w-combobox ${spread(prespread(args))}>
+        ${sampleOptionElements}
+      </w-combobox>
+    `;
     },
     parameters: {
         docs: {
@@ -34,21 +38,32 @@ const sampleOptions = [
     { value: 'pineapple', label: 'Pineapple' },
     { value: 'mango', label: 'Mango' },
 ];
+const sampleOptionElements = html `
+  <option value="apple">Apple</option>
+  <option value="banana">Banana</option>
+  <option value="orange">Orange</option>
+  <option value="grape">Grape</option>
+  <option value="strawberry">Strawberry</option>
+  <option value="pineapple">Pineapple</option>
+  <option value="mango">Mango</option>
+`;
 export const Default = {
     args: {},
-    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
+    render: () => html `
+      <w-combobox label="Select a fruit" placeholder="Type to search...">
+        ${sampleOptionElements}
+      </w-combobox>
+    `,
 };
 export const WithValue = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
-        value: 'Apple',
+        value: 'apple',
     },
 };
 export const OpenOnFocus = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         openOnFocus: true,
@@ -56,7 +71,6 @@ export const OpenOnFocus = {
 };
 export const WithTextMatching = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         matchTextSegments: true,
@@ -64,7 +78,6 @@ export const WithTextMatching = {
 };
 export const Invalid = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         value: 'Invalid fruit',
@@ -74,16 +87,14 @@ export const Invalid = {
 };
 export const Disabled = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
-        value: 'Apple',
+        value: 'apple',
         disabled: true,
     },
 };
 export const Optional = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         optional: true,
@@ -125,17 +136,19 @@ export const FormSubmission = {
         name="warp-combo-1"
         label="Select a fruit (dynamic)"
         placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
+      >
+        ${sampleOptionElements}
+      </w-combobox>
       <br>
       <w-combobox
         id="form-submission"
         name="warp-combo-2"
         label="Select a fruit (dynamic)"
-        value="Banana"
+        value="banana"
         placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
+      >
+        ${sampleOptionElements}
+      </w-combobox>
         <button type="reset">Reset</button>
         <button type="submit">Submit</button>
     </form>

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

@@ -134,3 +134,113 @@ test('announces suggestion count when opened on focus with empty input', async (
     const statusText = el.shadowRoot?.querySelector('[role="status"]')?.textContent?.trim();
     expect(statusText).toBe('3 suggestions');
 });
+test('renders light-DOM option children in the generated popup', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="no">Norway</option>
+      <option value="se">Sweden</option>
+      <option value="dk">Denmark</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    input?.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Norway', 'Sweden', 'Denmark']);
+});
+test('filters light-DOM options by label attribute and stores option value on select', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="us" label="United States">US</option>
+      <option value="uk" label="United Kingdom">UK</option>
+      <option value="no">Norway</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const selectEvents = [];
+    el.addEventListener('select', (event) => selectEvents.push(event));
+    input.focus();
+    input.value = 'United';
+    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['United States', 'United Kingdom']);
+    visibleOptions?.[1]?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(input.value).toBe('United Kingdom');
+    expect(el.value).toBe('uk');
+    expect(selectEvents.at(-1)?.detail).toEqual({ value: 'uk' });
+});
+test('uses light-DOM options to display an initial value label', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" value="no">
+      <option value="se">Sweden</option>
+      <option value="no">Norway</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    expect(input.value).toBe('Norway');
+    expect(el.value).toBe('no');
+});
+test('syncs dynamic light-DOM option child changes', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="no">Norway</option>
+      <option value="se">Sweden</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const denmark = document.createElement('option');
+    denmark.value = 'dk';
+    denmark.textContent = 'Denmark';
+    el.appendChild(denmark);
+    const sweden = el.querySelector('option[value="se"]');
+    sweden?.remove();
+    const norway = el.querySelector('option[value="no"]');
+    norway?.setAttribute('value', 'nor');
+    if (norway) {
+        norway.textContent = 'Norge';
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    input.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Norge', 'Denmark']);
+});
+test('non-empty options property takes precedence over light-DOM option children', async () => {
+    const options = [{ value: 'apple', label: 'Apple' }];
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus .options="${options}">
+      <option value="banana">Banana</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    input.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Apple']);
+});

package/dist/packages/datepicker/DatePicker.test.js

@@ -1,4 +1,4 @@
-import { server, userEvent } from '@vitest/browser/context';
+import { server, userEvent } from 'vitest/browser';
 import React, { useState } from 'react';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-react';

package/dist/packages/datepicker/datepicker.d.ts

@@ -21,47 +21,45 @@ declare class WarpDatepicker extends WarpDatepicker_base {
     };
     static styles: import("lit").CSSResult[];
     /**
-     * @summary
-     * @description
+     * The label displayed above the date input.
+     *
+     * Use this to give the datepicker a visible and accessible name.
      */
     label: string;
-    /** Takes precedence over the `<html>` lang attribute.
-     * @summary
-     * @description
+    /**
+     * The locale used for calendar labels and date formatting.
+     *
+     * This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
      */
     lang: string;
     /**
-     * @summary
-     * @description
+     * The name submitted with the date value.
+     *
+     * Use this when the datepicker belongs to a form and its value should be included in form data.
      */
     name: string;
     /**
-     * @summary
-     * @description
+     * The selected date value.
+     *
+     * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
      */
     value: string;
     /**
-     * Decides the format of the date as shown in the calendar header.
+     * The date format used in the calendar header.
      *
      * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-     
-     * @summary
-     * @description
-    */
+     */
     headerFormat: string;
     /**
-     * Decides the format of the weekday as shown above the grid of dates in the calendar.
+     * The weekday format shown above the calendar grid.
      *
      * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-     
-     * @summary
-     * @description
-    */
+     */
     weekdayFormat: string;
     /**
-     * Lets you control if a date in the calendar should be disabled.
+     * Function used to disable dates in the calendar.
      *
-     * This needs to be set on the element instance in JavaScript, not as an HTML attribute.
+     * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.
      *
      * @example
      * ```ts
@@ -72,19 +70,13 @@ declare class WarpDatepicker extends WarpDatepicker_base {
      * const datePicker = document.querySelector('w-datepicker') as WarpDatepicker;
      * datePicker.isDayDisabled = (day: Date) => isBefore(startOfDay(day), today);
      * ```
-     
-     * @summary
-     * @description
-    */
+     */
     isDayDisabled: (day: Date) => boolean;
     /**
-     * Decides the format of the day in the calendar as read to screen readers.
+     * The date format used for calendar day accessible names.
      *
      * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-     
-     * @summary
-     * @description
-    */
+     */
     dayFormat: string;
     isCalendarOpen: boolean;
     navigationDate: Date;

package/dist/packages/datepicker/datepicker.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './datepicker.js';
 describe('w-datepicker React SSR hydration', () => {