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

package/dist/packages/select/select.hydration.test.d.ts

@@ -0,0 +1 @@
+import './select.js';

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

@@ -0,0 +1,37 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './select.js';
+describe('w-select React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-select', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-select', {
+            label: 'Country',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with disabled state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-select', {
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with invalid state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-select', {
+            invalid: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with help text hydrates without warnings', async () => {
+        const warnings = await testHydration('w-select', {
+            'help-text': 'Select your country',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/select/select.js

@@ -2471,7 +2471,7 @@ Please compile your catalog first.
   --w-icon-size: 32px;
 }
 
-`;var ke=new Map,Xr='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function Br(o,e={}){var t;let r=(t=e.responseParser)!=null?t:(a=>a.text());return ke.has(o)||ke.set(o,fetch(o).then(r)),ke.get(o)}var $=class extends Yr{constructor(){super(...arguments);this.name="";this.svg=null}async fetchIcon(r){let a=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${r}.svg`;try{let i=await Br(a);return new DOMParser().parseFromString(i,"text/html").body.querySelector("svg")}catch(i){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(Xr,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},a=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return Rr`<div class="${Hr(t)}" style="${a}" part="w-${this.name.toLowerCase()}">${this.svg}</div>`}};$.styles=[or],p([ye({type:String,reflect:!0})],$.prototype,"name",2),p([ye({type:String,reflect:!0})],$.prototype,"size",2),p([ye({type:String,reflect:!0})],$.prototype,"locale",2),p([Ur()],$.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",$);var S={base:"block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",default:"s-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active",disabled:"s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",invalid:"s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",readOnly:"s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",wrapper:"relative",selectWrapper:"relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",chevron:"block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",chevronDisabled:"opacity-25"},tr={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},ze={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},Q,W,U,l,Me,ie,ar,Y,se,Ee,ir,sr,nr,ne,le,m=class extends Ye(Gr){constructor(){super();q(this,l);this.autoFocus=!1;this.autofocus=!1;this.invalid=!1;this.always=!1;this.optional=!1;this.disabled=!1;this.readOnly=!1;this.readonly=!1;q(this,Q,null);q(this,W,()=>w(this,l,se).call(this));q(this,U);this._setValue=r=>{this.value=r,this.setValue(r)};Xe(Ke,We,Qe,Je,er)}resetFormControl(){this.value=x(this,Q)}connectedCallback(){var r,t;super.connectedCallback(),pe(this,Q,this.value),(this.autofocus||this.autoFocus)&&this.shadowRoot.querySelector("select").focus(),w(this,l,Ee).call(this,{syncValueFromSelected:!0}),(t=(r=this.ownerDocument)==null?void 0:r.defaultView)==null||t.addEventListener("pageshow",x(this,W)),pe(this,U,new MutationObserver(()=>{w(this,l,Ee).call(this,{syncValueFromSelected:!0})})),x(this,U).observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}disconnectedCallback(){var r,t,a;super.disconnectedCallback(),(t=(r=this.ownerDocument)==null?void 0:r.defaultView)==null||t.removeEventListener("pageshow",x(this,W)),(a=x(this,U))==null||a.disconnect()}firstUpdated(){this.value&&w(this,l,Y).call(this,this.value),w(this,l,se).call(this,{allowDefaultFirstOption:!1})}formStateRestoreCallback(r,t){if(typeof r=="string"&&r){this._setValue(r),w(this,l,Y).call(this,r);return}w(this,l,se).call(this,{allowDefaultFirstOption:!0})}willUpdate(r){r.has("value")&&this.setValue(this.value)}updated(r){var t,a;if(r.has("value")){let i=w(this,l,ie).call(this);i&&i.value!==this.value&&(i.value=(t=this.value)!=null?t:""),w(this,l,Y).call(this,(a=this.value)!=null?a:"")}}handleKeyDown(r){(this.readonly||this.readOnly)&&(r.key===" "||r.key==="ArrowDown"||r.key==="ArrowUp")&&r.preventDefault()}onChange(r){let a=r.currentTarget.value;r.stopPropagation(),this._setValue(a),w(this,l,Y).call(this,a),this.dispatchEvent(new CustomEvent("change",{detail:a,bubbles:!0,composed:!0}))}render(){return K`<div class="${S.wrapper}">
+`;var ke=new Map,Xr='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function Br(o,e={}){var t;let r=(t=e.responseParser)!=null?t:(a=>a.text());return ke.has(o)||ke.set(o,fetch(o).then(r)),ke.get(o)}var $=class extends Yr{constructor(){super(...arguments);this.svg=null}async fetchIcon(r){let a=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${r}.svg`;try{let i=await Br(a);return new DOMParser().parseFromString(i,"text/html").body.querySelector("svg")}catch(i){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(Xr,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},i=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return Rr`<div class="${Hr(a)}" style="${i}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};$.styles=[or],p([ye({type:String,reflect:!0})],$.prototype,"name",2),p([ye({type:String,reflect:!0})],$.prototype,"size",2),p([ye({type:String,reflect:!0})],$.prototype,"locale",2),p([Ur()],$.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",$);var S={base:"block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",default:"s-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active",disabled:"s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",invalid:"s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",readOnly:"s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",wrapper:"relative",selectWrapper:"relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",chevron:"block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",chevronDisabled:"opacity-25"},tr={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},ze={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},Q,W,U,l,Me,ie,ar,Y,se,Ee,ir,sr,nr,ne,le,m=class extends Ye(Gr){constructor(){super();q(this,l);this.autoFocus=!1;this.autofocus=!1;this.invalid=!1;this.always=!1;this.optional=!1;this.disabled=!1;this.readOnly=!1;this.readonly=!1;q(this,Q,null);q(this,W,()=>w(this,l,se).call(this));q(this,U);this._setValue=r=>{this.value=r,this.setValue(r)};Xe(Ke,We,Qe,Je,er)}resetFormControl(){this.value=x(this,Q)}connectedCallback(){var r,t;super.connectedCallback(),pe(this,Q,this.value),(this.autofocus||this.autoFocus)&&this.shadowRoot.querySelector("select").focus(),w(this,l,Ee).call(this,{syncValueFromSelected:!0}),(t=(r=this.ownerDocument)==null?void 0:r.defaultView)==null||t.addEventListener("pageshow",x(this,W)),pe(this,U,new MutationObserver(()=>{w(this,l,Ee).call(this,{syncValueFromSelected:!0})})),x(this,U).observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}disconnectedCallback(){var r,t,a;super.disconnectedCallback(),(t=(r=this.ownerDocument)==null?void 0:r.defaultView)==null||t.removeEventListener("pageshow",x(this,W)),(a=x(this,U))==null||a.disconnect()}firstUpdated(){this.value&&w(this,l,Y).call(this,this.value),w(this,l,se).call(this,{allowDefaultFirstOption:!1})}formStateRestoreCallback(r,t){if(typeof r=="string"&&r){this._setValue(r),w(this,l,Y).call(this,r);return}w(this,l,se).call(this,{allowDefaultFirstOption:!0})}willUpdate(r){r.has("value")&&this.setValue(this.value)}updated(r){var t,a;if(r.has("value")){let i=w(this,l,ie).call(this);i&&i.value!==this.value&&(i.value=(t=this.value)!=null?t:""),w(this,l,Y).call(this,(a=this.value)!=null?a:"")}}handleKeyDown(r){(this.readonly||this.readOnly)&&(r.key===" "||r.key==="ArrowDown"||r.key==="ArrowUp")&&r.preventDefault()}onChange(r){let a=r.currentTarget.value;r.stopPropagation(),this._setValue(a),w(this,l,Y).call(this,a),this.dispatchEvent(new CustomEvent("change",{detail:a,bubbles:!0,composed:!0}))}render(){return K`<div class="${S.wrapper}">
       ${Ce(this.label,()=>K`<label class="${tr.base}" for="${x(this,l,ne)}">
             ${this.label}
             ${Ce(this.optional,()=>K`<span class="${tr.optional}"