@warp-ds/elements 2.8.1-next.2 → 2.8.1-next.3

package/dist/packages/select/select.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Select } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "name" | "form" | "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "helpText" | "readOnly" | "readonly" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
+    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "name" | "form" | "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "helpText" | "readOnly" | "readonly" | "willUpdate" | "formStateRestoreCallback" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;

package/dist/packages/select/select.test.js

@@ -59,3 +59,171 @@ test('can reset select by resetting surrounding form', async () => {
     // Value should be reset back to "strawberries"
     expect(wSelect.value).toBe('strawberries');
 });
+test('change event target.value reflects the selected value', async () => {
+    render(html `
+    <w-select label="Fruit">
+      <option value="apples">Apples</option>
+      <option value="pears">Pears</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    let observedTargetValue = '';
+    wSelect.addEventListener('change', (e) => {
+        observedTargetValue = (e.target.value ?? '');
+    });
+    nativeSelect.value = 'pears';
+    nativeSelect.dispatchEvent(new Event('change'));
+    expect(observedTargetValue).toBe('pears');
+});
+test('keeps native select in sync when host value changes', async () => {
+    render(html `
+    <w-select label="Gender" value="male">
+      <option value="male">Male</option>
+      <option value="female">Female</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    wSelect.value = 'female';
+    await wSelect.updateComplete;
+    expect(nativeSelect.value).toBe('female');
+});
+test('syncs host value when native select value changes without firing change', async () => {
+    render(html `
+    <form>
+      <w-select label="Gender" name="gender">
+        <option value="">Choose</option>
+        <option value="male">Male</option>
+        <option value="female">Female</option>
+      </w-select>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    // Simulates browser session restore/autocomplete updating only the internal native select.
+    nativeSelect.value = 'female';
+    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
+    await expect.poll(() => wSelect.value).toBe('female');
+    expect(new FormData(form).get('gender')).toBe('female');
+});
+test('does not sync host value from the browser default first option', async () => {
+    render(html `
+    <w-select label="Default first option">
+      <option value="alpha">Alpha</option>
+      <option value="beta">Beta</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
+    expect(wSelect.value ?? '').toBe('');
+});
+test('pageshow does not overwrite an intentionally empty host value', async () => {
+    render(html `
+    <w-select label="Intentional empty" value="">
+      <option value="male">Male</option>
+      <option value="female">Female</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    expect(nativeSelect.value).toBe('');
+    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
+    expect(wSelect.value ?? '').toBe('');
+});
+test('formStateRestoreCallback syncs value from provided state', async () => {
+    render(html `
+    <form>
+      <w-select label="Restore state" name="gender">
+        <option value="">Choose</option>
+        <option value="male">Male</option>
+        <option value="female">Female</option>
+      </w-select>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    wSelect.formStateRestoreCallback('female', 'restore');
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    expect(wSelect.value).toBe('female');
+    expect(nativeSelect.value).toBe('female');
+    expect(new FormData(form).get('gender')).toBe('female');
+});
+test('formStateRestoreCallback with null falls back to native value reconciliation', async () => {
+    render(html `
+    <form>
+      <w-select label="Restore fallback" name="gender">
+        <option value="">Choose</option>
+        <option value="male">Male</option>
+        <option value="female">Female</option>
+      </w-select>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    nativeSelect.value = 'female';
+    wSelect.formStateRestoreCallback(null, 'restore');
+    expect(wSelect.value).toBe('female');
+    expect(new FormData(form).get('gender')).toBe('female');
+});
+test('change event keeps backward compatibility by exposing detail', async () => {
+    render(html `
+    <w-select label="Legacy change detail">
+      <option value="alpha">Alpha</option>
+      <option value="beta">Beta</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    let observedDetail;
+    wSelect.addEventListener('change', (event) => {
+        observedDetail = event.detail;
+    });
+    nativeSelect.value = 'beta';
+    nativeSelect.dispatchEvent(new Event('change'));
+    expect(observedDetail).toBe('beta');
+});
+test('emits a single host change event for one native change interaction', async () => {
+    render(html `
+    <w-select label="Single change event">
+      <option value="alpha">Alpha</option>
+      <option value="beta">Beta</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    let changeCount = 0;
+    wSelect.addEventListener('change', () => {
+        changeCount += 1;
+    });
+    nativeSelect.value = 'beta';
+    nativeSelect.dispatchEvent(new Event('change'));
+    expect(changeCount).toBe(1);
+});
+test('reflects dynamic light-DOM option selected changes into native select', async () => {
+    render(html `
+    <w-select label="Dynamic options">
+      <option value="alpha">Alpha</option>
+      <option value="beta">Beta</option>
+    </w-select>
+  `);
+    const wSelect = document.querySelector('w-select');
+    await wSelect.updateComplete;
+    const lightOptions = Array.from(wSelect.querySelectorAll('option'));
+    lightOptions[1].setAttribute('selected', '');
+    await expect.poll(() => {
+        const nativeSelect = wSelect.shadowRoot.querySelector('select');
+        return nativeSelect.value;
+    }).toBe('beta');
+});

package/dist/packages/slider/slider.stories.js

@@ -199,9 +199,9 @@ export const OpenEnded = {
     args: {},
     render() {
         return html `
-      <form id="openended" style="margin-bottom: 16px" lang="nb">
+      <form id="openended" style="margin-bottom: 16px">
         <w-slider
-          label="Produksjonsår"
+          label="Model year"
           min="1950"
           max="2025"
           data-testid="openended"
@@ -209,12 +209,12 @@ export const OpenEnded = {
         >
           <w-slider-thumb
             slot="from"
-            aria-label="Fra år"
+            aria-label="From year"
             name="from-year"
           ></w-slider-thumb>
           <w-slider-thumb
             slot="to"
-            aria-label="Til år"
+            aria-label="To year"
             name="to-year"
           ></w-slider-thumb>
         </w-slider>
@@ -238,9 +238,9 @@ export const OpenEnded = {
         );
         overunderSlider.labelFormatter = function (slot) {
           if (slot === 'from') {
-            return 'Før 1950';
+            return 'Before 1950';
           }
-          return '2025 +';
+          return '2025+';
         };
         overunderSlider.valueFormatter = function (value, slot) {
           if (slot === 'from' && value === '') {
@@ -265,9 +265,6 @@ export const OpenEnded = {
     },
 };
 export const SingleError = {
-    args: {
-        locale: 'nb',
-    },
     render() {
         return html `
       <w-slider label="Single" min="0" max="100">
@@ -282,7 +279,7 @@ export const RangeError = {
     render() {
         return html `
       <form id="rangeerror" style="margin-bottom: 16px">
-        <w-slider label="Production year" min="1950" max="2025" over under>
+        <w-slider label="Model year" min="1950" max="2025">
           <p slot="description">
             Try typing a from value higher than a to value
           </p>
@@ -317,18 +314,15 @@ export const RangeError = {
 };
 export const CustomError = {
     args: {
-        locale: 'nb',
         error: "I'm an external error telling you something is wrong",
         invalid: true,
     },
     render(args) {
         return html `
       <w-slider
-        label="Production year"
+        label="Model year"
         min="1950"
         max="2025"
-        over
-        under
         error="${args.error}"
         ?invalid="${args.invalid}"
       >
@@ -339,18 +333,13 @@ export const CustomError = {
     },
 };
 export const Description = {
-    args: {
-        locale: 'nb',
-    },
     render() {
         return html `
       <w-slider
-        label="Production year"
+        label="Model year"
         min="1950"
         max="2025"
-        over
-        under
-        help-text="Production year of the car"
+        help-text="Model year of the car"
       >
         <w-slider-thumb slot="from" name="from"></w-slider-thumb>
         <w-slider-thumb slot="to" name="to"></w-slider-thumb>
@@ -359,17 +348,14 @@ export const Description = {
     },
 };
 export const VisuallyHiddenLabel = {
-    args: {
-        locale: 'nb',
-    },
     render() {
         return html `
       <w-slider
         min="1950"
         max="2025"
-        help-text="Production year of the car"
+        help-text="Model year of the car"
       >
-        <legend class="sr-only" slot="label">Production year</legend>
+        <legend class="sr-only" slot="label">Model year</legend>
         <w-slider-thumb slot="from" name="from"></w-slider-thumb>
         <w-slider-thumb slot="to" name="to"></w-slider-thumb>
       </w-slider>
@@ -377,20 +363,15 @@ export const VisuallyHiddenLabel = {
     },
 };
 export const HiddenMinimumMaximumLabels = {
-    args: {
-        locale: 'nb',
-    },
     render() {
         return html `
       <w-slider
         min="1950"
         max="2025"
-        over
-        under
-        help-text="Production year of the car"
+        help-text="Model year of the car"
         data-testid="hidden-minmax-label"
       >
-        <legend class="sr-only" slot="label">Production year</legend>
+        <legend class="sr-only" slot="label">Model year</legend>
         <w-slider-thumb slot="from" name="from"></w-slider-thumb>
         <w-slider-thumb slot="to" name="to"></w-slider-thumb>
       </w-slider>
@@ -404,9 +385,6 @@ export const HiddenMinimumMaximumLabels = {
     },
 };
 export const VisuallyHiddenTextfield = {
-    args: {
-        locale: 'nb',
-    },
     render({ locale }) {
         return html `
       <output class="text-xs">

package/dist/packages/slider-thumb/slider-thumb.js

@@ -2637,7 +2637,7 @@ Please compile your catalog first.
   w-textfield {
     --w-textfield-placeholder-color-text: var(--w-s-color-text);
   }
-`;var Oe={};var B,b,W,ee,pe,Y,re,me,Ie,u=class extends Te(Ae){constructor(){super(...arguments);ne(this,b);this.invalid=!1;this.openEnded=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;this._hiddenTextfield=!1;ne(this,B,null);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=xe(this,B)}async updateFieldAfterValidation(){let r=this.shadowRoot.querySelector("w-textfield");await g(this,b,re).call(this,r.value,!0)}async connectedCallback(){if(super.connectedCallback(),ke(this,B,this.value),this.setValue(this.value),this.slot&&!this.ariaDescription&&(this.slot==="from"?this.ariaDescription=z.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):this.slot==="to"&&(this.ariaDescription=z.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{let a=Oe.url.substring(0,Oe.url.lastIndexOf("/"));try{let[{default:s}]=await Promise.all([import(`${a}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
+`;var Oe={};var B,b,W,ee,pe,Y,re,me,Ie,u=class extends Te(Ae){constructor(){super(...arguments);ne(this,b);this.disabled=!1;this.invalid=!1;this.openEnded=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;this._hiddenTextfield=!1;ne(this,B,null);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=xe(this,B)}async updateFieldAfterValidation(){let r=this.shadowRoot.querySelector("w-textfield");await g(this,b,re).call(this,r.value,!0)}async connectedCallback(){if(super.connectedCallback(),ke(this,B,this.value),this.setValue(this.value),this.slot&&!this.ariaDescription&&(this.slot==="from"?this.ariaDescription=z.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):this.slot==="to"&&(this.ariaDescription=z.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{let a=Oe.url.substring(0,Oe.url.lastIndexOf("/"));try{let[{default:s}]=await Promise.all([import(`${a}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
         /*
          * The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.
          * We work around that by recreating a transparent version of the active range