@oslokommune/punkt-react 13.5.12 → 13.5.13

package/CHANGELOG.md

@@ -5,6 +5,25 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.13](https://github.com/oslokommune/punkt/compare/13.5.12...13.5.13) (2025-09-12)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Bedre synk mellom options som props og options som elementer (#3017). * fix(elements,react): Bedre synk mellom options som props og options som elementer
+  * Fiks klaging på `showPicker` i tester
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.12](https://github.com/oslokommune/punkt/compare/13.5.11...13.5.12) (2025-09-11)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-react.es.js

@@ -28743,69 +28743,85 @@ var N6 = Object.defineProperty, I6 = Object.getOwnPropertyDescriptor, GS = (e, t
 };
 let Iv = class extends cn {
   constructor() {
-    super(), this.inputRef = gn(), this.helptextSlot = gn(), this.options = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new pU(this), this.slotController = new ni(this, this.helptextSlot), this.slotController.skipOptions = !0;
+    super(), this.inputRef = gn(), this.helptextSlot = gn(), this._optionsProp = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new pU(this), this.slotController = new ni(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  // Getter and setter for options to expose the actual parsed options
+  get options() {
+    return this._options.map((t) => ({
+      ...t,
+      selected: t.value === this.value
+    }));
+  }
+  set options(t) {
+    this._optionsProp = t, this.requestUpdate("_optionsProp", this._options);
   }
-  // Used for initilization
   connectedCallback() {
     super.connectedCallback();
-    const e = this.options.length > 0, t = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
-    !e && t ? this.optionsController.nodes.forEach((a) => {
-      const o = {
-        value: a.hasAttribute("value") ? a.getAttribute("value") ?? "" : a.textContent ?? "",
-        label: a.textContent || a.getAttribute("value") || "",
-        disabled: a.hasAttribute("disabled"),
-        selected: a.hasAttribute("selected"),
-        hidden: a.hasAttribute("data-hidden")
+    const t = this._optionsProp.length > 0, a = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
+    !t && a ? this.optionsController.nodes.forEach((o) => {
+      const u = {
+        value: o.hasAttribute("value") ? o.getAttribute("value") ?? "" : o.textContent ?? "",
+        label: o.textContent || o.getAttribute("value") || "",
+        disabled: o.hasAttribute("disabled"),
+        selected: o.hasAttribute("selected"),
+        hidden: o.hasAttribute("data-hidden")
       };
-      a.getAttribute("selected") && !this.value && (this.value = o.value), this._options.push(o);
-    }) : (this._options = this.options, this._options.forEach((a) => {
-      a.selected && !this.value && (this.value = a.value);
+      o.getAttribute("selected") && !this.value && (this.value = u.value), this._options.push(u);
+    }) : (this._options = this._optionsProp, this._options.forEach((o) => {
+      o.selected && !this.value && (this.value = o.value);
     }));
   }
   // Support native Select method `add`
-  add(e, t) {
-    var a, o, u;
-    (a = this.inputRef.value) == null || a.add(e, t), this._options.push({
-      value: e.value || e.text,
-      label: e.text || e.value,
-      selected: e.selected,
-      disabled: e.disabled
-    }), e.selected && (this.value = e.value || e.text, this.selectedIndex = this.returnNumberOrNull((o = this.inputRef.value) == null ? void 0 : o.selectedIndex), this.selectedOptions = (u = this.inputRef.value) == null ? void 0 : u.selectedOptions), this.requestUpdate();
+  add(t, a) {
+    const o = {
+      value: t.value || t.text,
+      label: t.text || t.value,
+      selected: t.selected,
+      disabled: t.disabled
+    };
+    if (a === void 0)
+      this._options.push(o);
+    else if (typeof a == "number")
+      this._options.splice(a, 0, o);
+    else {
+      const u = a.value || a.text, d = this._options.findIndex((f) => f.value === u);
+      d >= 0 ? this._options.splice(d, 0, o) : this._options.push(o);
+    }
+    t.selected && (this.value = t.value || t.text, this.selectedIndex = this._options.findIndex((u) => u.value === this.value)), this.requestUpdate();
   }
   // Support native Select method `remove`
-  remove(e) {
-    var t, a;
-    typeof e == "number" && (this.selectedIndex === e && (this.value = ((t = this._options[0]) == null ? void 0 : t.value) || ""), (a = this.inputRef.value) == null || a.remove(e));
+  remove(t) {
+    var a;
+    typeof t == "number" && (this.selectedIndex === t && (this.value = ((a = this._options[0]) == null ? void 0 : a.value) || ""), this._options.splice(t, 1), this.requestUpdate());
   }
   // Support native Select method `item`
-  item(e) {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.item(e);
+  item(t) {
+    var a;
+    return (a = this.inputRef.value) == null ? void 0 : a.item(t);
   }
   // Support native Select method `namedItem`
-  namedItem(e) {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.namedItem(e);
+  namedItem(t) {
+    var a;
+    return (a = this.inputRef.value) == null ? void 0 : a.namedItem(t);
   }
   // Support native Select method `showPicker`
   showPicker() {
-    var e;
-    (e = this.inputRef.value) == null || e.showPicker();
+    this.inputRef.value && "showPicker" in this.inputRef.value && this.inputRef.value.showPicker();
   }
-  attributeChangedCallback(e, t, a) {
-    var o, u;
-    e === "options" && (this._options = a ? JSON.parse(a) : []), e === "value" && this.value !== t && (this.selectedIndex = this.touched ? this.returnNumberOrNull((o = this.inputRef.value) == null ? void 0 : o.selectedIndex) : this.options.findIndex((d) => d.value === a), this.selectedOptions = (u = this.inputRef.value) == null ? void 0 : u.selectedOptions, this.valueChanged(a, t)), super.attributeChangedCallback(e, t, a);
+  attributeChangedCallback(t, a, o) {
+    var u, d;
+    t === "options" && (this._options = o ? JSON.parse(o) : []), t === "value" && this.value !== a && (this.selectedIndex = this.touched ? this.returnNumberOrNull((u = this.inputRef.value) == null ? void 0 : u.selectedIndex) : this._options.findIndex((f) => f.value === o), this.selectedOptions = (d = this.inputRef.value) == null ? void 0 : d.selectedOptions, this.valueChanged(o, a)), super.attributeChangedCallback(t, a, o);
   }
-  update(e) {
-    var t, a;
-    super.update(e), e.has("options") && (this._options = this.options, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), e.has("value") && this.value !== e.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((t = this.inputRef.value) == null ? void 0 : t.selectedIndex) : this.options.findIndex((o) => o.value === this.value), this.selectedOptions = (a = this.inputRef.value) == null ? void 0 : a.selectedOptions, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
+  update(t) {
+    var a, o;
+    super.update(t), t.has("_optionsProp") && this._optionsProp.length > 0 && (this._options = this._optionsProp, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((a = this.inputRef.value) == null ? void 0 : a.selectedIndex) : this._options.findIndex((u) => u.value === this.value), this.selectedOptions = (o = this.inputRef.value) == null ? void 0 : o.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
   }
-  firstUpdated(e) {
-    var t;
-    super.firstUpdated(e), this.options.length && (this._options = this.options), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((a) => a.value === this.value), this.selectedOptions = (t = this.inputRef.value) == null ? void 0 : t.selectedOptions;
+  firstUpdated(t) {
+    var a;
+    super.firstUpdated(t), this._optionsProp.length && (this._options = this._optionsProp), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((o) => o.value === this.value), this.selectedOptions = (a = this.inputRef.value) == null ? void 0 : a.selectedOptions;
   }
   render() {
-    const e = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+    const t = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
     return ke`
       <pkt-input-wrapper
         ?counter=${this.counter}
@@ -28829,7 +28845,7 @@ let Iv = class extends cn {
         tagText=${$t(this.tagText)}
       >
         <select
-          class=${e}
+          class=${t}
           aria-invalid=${this.hasError}
           aria-errormessage=${`${this.id}-error`}
           aria-labelledby=${$t(this.ariaLabelledby)}
@@ -28837,28 +28853,28 @@ let Iv = class extends cn {
           id=${this.id + "-input"}
           name=${(this.name || this.id) + "-input"}
           value=${this.value}
-          @change=${(t) => {
-      this.touched = !0, this.value = t.target.value, t.stopImmediatePropagation();
+          @change=${(a) => {
+      this.touched = !0, this.value = a.target.value, a.stopImmediatePropagation();
     }}
-          @input=${(t) => {
-      this.onInput(), t.stopImmediatePropagation();
+          @input=${(a) => {
+      this.onInput(), a.stopImmediatePropagation();
     }}
-          @focus=${(t) => {
-      this.onFocus(), t.stopImmediatePropagation();
+          @focus=${(a) => {
+      this.onFocus(), a.stopImmediatePropagation();
     }}
-          @blur=${(t) => {
-      this.onBlur(), t.stopImmediatePropagation();
+          @blur=${(a) => {
+      this.onBlur(), a.stopImmediatePropagation();
     }}
           ${dn(this.inputRef)}
         >
           ${this._options.length > 0 ? this._options.map(
-      (t) => ke`<option
-                    value=${t.value}
-                    ?selected=${this.value == t.value || t.selected}
-                    ?disabled=${t.disabled}
-                    ?hidden=${t.hidden}
+      (a) => ke`<option
+                    value=${a.value}
+                    ?selected=${this.value == a.value || a.selected}
+                    ?disabled=${a.disabled}
+                    ?hidden=${a.hidden}
                   >
-                    ${t.label}
+                    ${a.label}
                   </option>`
     ) : ""}
         </select>
@@ -28866,13 +28882,13 @@ let Iv = class extends cn {
       </pkt-input-wrapper>
     `;
   }
-  returnNumberOrNull(e) {
-    return e == null || isNaN(e) ? null : e;
+  returnNumberOrNull(t) {
+    return t == null || isNaN(t) ? null : t;
   }
 };
 GS([
-  G({ type: Array })
-], Iv.prototype, "options", 2);
+  G({ type: Array, attribute: "options" })
+], Iv.prototype, "_optionsProp", 2);
 GS([
   G({ type: String })
 ], Iv.prototype, "value", 2);