@oslokommune/punkt-react 16.8.0 → 16.8.2

package/CHANGELOG.md

@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.8.2](https://github.com/oslokommune/punkt/compare/16.8.1...16.8.2) (2026-04-21)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.8.1](https://github.com/oslokommune/punkt/compare/16.8.0...16.8.1) (2026-04-17)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Datepicker, Combobox og Timepicker mangler `id` (#3423). Dette er en glipp i konvertering til React-versjoner
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.8.0](https://github.com/oslokommune/punkt/compare/16.7.7...16.8.0) (2026-04-16)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -746,6 +746,7 @@ export declare interface IPktTab {
     text: string;
     href?: string;
     action?: (index: number) => void;
+    disabled?: boolean;
     icon?: string;
     controls?: string;
     tag?: {
@@ -758,6 +759,7 @@ export declare interface IPktTab {
 declare interface IPktTabItem {
     children: ReactNode;
     active?: boolean;
+    disabled?: boolean;
     href?: string;
     onClick?: (event: MouseEvent_2) => void;
     icon?: string;

package/dist/punkt-react.es.js

@@ -9497,7 +9497,7 @@ try {
 	console.warn("Forsøker å definere <pkt-radiobutton>, men den er allerede definert");
 }
 //#endregion
-//#region ../elements/dist/tabs-Y7utmJi9.js
+//#region ../elements/dist/tabs-C0DWPmn2.js
 var Co = class extends Event {
 	constructor(e, t, n, r) {
 		super("context-request", {
@@ -9656,7 +9656,7 @@ function Ao({ context: e, subscribe: t }) {
 }
 var jo = wo(Symbol("pkt-tabs-context")), Mo = class extends Vt {
 	constructor(...e) {
-		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.tabCount = 0, this.context = {
+		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
 			useArrowNav: this.useArrowNav,
 			registerTab: this.registerTab.bind(this),
 			handleClick: this.handleClick.bind(this),
@@ -9672,22 +9672,41 @@ var jo = wo(Symbol("pkt-tabs-context")), Mo = class extends Vt {
 			useArrowNav: this.useArrowNav
 		});
 	}
-	registerTab(e, t) {
-		this.tabRefs[t] = e, this.tabCount = Math.max(this.tabCount, t + 1);
+	registerTab(e, t, n = !1) {
+		this.tabRefs[t] = e, this.disabledMap[t] = n, this.tabCount = Math.max(this.tabCount, t + 1);
+	}
+	isTabDisabled(e) {
+		return !!this.disabledMap[e];
+	}
+	findEnabledIndex(e, t) {
+		let n = e + t;
+		for (; n >= 0 && n < this.tabCount;) {
+			if (!this.isTabDisabled(n)) return n;
+			n += t;
+		}
+		return null;
 	}
 	handleClick(e) {
-		this.dispatchEvent(new CustomEvent("tab-selected", {
+		this.isTabDisabled(e) || this.dispatchEvent(new CustomEvent("tab-selected", {
 			detail: { index: e },
 			bubbles: !0,
 			composed: !0
 		}));
 	}
 	handleKeyUp(e, t) {
-		this.useArrowNav && (e.code === "ArrowLeft" && t !== 0 && this.tabRefs[t - 1]?.focus(), e.code === "ArrowRight" && t < this.tabCount - 1 && this.tabRefs[t + 1]?.focus(), (e.code === "ArrowDown" || e.code === "Space") && this.dispatchEvent(new CustomEvent("tab-selected", {
-			detail: { index: t },
-			bubbles: !0,
-			composed: !0
-		})));
+		if (this.useArrowNav) {
+			if (e.key === "ArrowLeft") {
+				e.preventDefault();
+				let n = this.findEnabledIndex(t, -1);
+				n !== null && this.tabRefs[n]?.focus();
+			}
+			if (e.key === "ArrowRight") {
+				e.preventDefault();
+				let n = this.findEnabledIndex(t, 1);
+				n !== null && this.tabRefs[n]?.focus();
+			}
+			(e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.key === "ArrowDown") && (e.preventDefault(), this.handleClick(t));
+		}
 	}
 	render() {
 		return z`
@@ -9705,7 +9724,7 @@ J([K({
 	type: Boolean,
 	reflect: !0,
 	attribute: "disable-arrow-nav"
-})], Mo.prototype, "disableArrowNav", void 0), J([q()], Mo.prototype, "tabRefs", void 0), J([q()], Mo.prototype, "tabCount", void 0), J([ko({ context: jo }), q()], Mo.prototype, "context", void 0);
+})], Mo.prototype, "disableArrowNav", void 0), J([q()], Mo.prototype, "tabRefs", void 0), J([q()], Mo.prototype, "disabledMap", void 0), J([q()], Mo.prototype, "tabCount", void 0), J([ko({ context: jo }), q()], Mo.prototype, "context", void 0);
 try {
 	G("pkt-tabs")(Mo);
 } catch {
@@ -9713,21 +9732,32 @@ try {
 }
 var No = class extends Vt {
 	constructor() {
-		super(), this.active = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = sn();
+		super(), this.active = !1, this.disabled = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = sn();
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.updateComplete.then(() => {
-			this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index);
+			this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index, this.disabled);
 		});
 	}
-	handleClick() {
+	updated() {
+		this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index, this.disabled);
+	}
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
 		this.context && this.context.handleClick(this.index);
 	}
-	handleKeyUp(e) {
+	handleKeyDown(e) {
+		if (this.disabled && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
 		this.context && this.context.handleKeyUp(e, this.index);
 	}
 	render() {
-		let e = this.context?.useArrowNav ?? !0, t = this.active ? "active" : "", n = e ? "tab" : void 0, r = e ? this.active : void 0, i = this.active || !e ? void 0 : -1, a = z`
+		let e = this.context?.useArrowNav ?? !0, t = this.active && !this.disabled, n = [t ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), r = e ? "tab" : void 0, i = e ? t : void 0, a = this.disabled ? -1 : t || !e ? void 0 : -1, o = z`
       ${this.icon ? z`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
       <span>${Bt(this)}</span>
       ${this.tag ? z`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
@@ -9735,30 +9765,33 @@ var No = class extends Vt {
 		return this.href ? z`
         <a
           ${un(this.elementRef)}
-          href=${this.href}
-          class="pkt-tabs__link ${t}"
-          role=${X(n)}
-          aria-selected=${X(r)}
+          href=${X(this.disabled ? void 0 : this.href)}
+          class="pkt-tabs__link ${n}"
+          role=${X(r)}
+          aria-selected=${X(i)}
+          aria-disabled=${X(this.disabled ? "true" : void 0)}
           aria-controls=${X(this.controls || void 0)}
-          tabindex=${X(i)}
+          tabindex=${X(a)}
           @click=${this.handleClick}
-          @keyup=${this.handleKeyUp}
+          @keydown=${this.handleKeyDown}
         >
-          ${a}
+          ${o}
         </a>
       ` : z`
       <button
         ${un(this.elementRef)}
         type="button"
-        class="pkt-tabs__button pkt-link-button ${t}"
-        role=${X(n)}
-        aria-selected=${X(r)}
+        class="pkt-tabs__button pkt-link-button ${n}"
+        ?disabled=${this.disabled}
+        aria-disabled=${X(this.disabled ? "true" : void 0)}
+        role=${X(r)}
+        aria-selected=${X(i)}
         aria-controls=${X(this.controls || void 0)}
-        tabindex=${X(i)}
+        tabindex=${X(a)}
         @click=${this.handleClick}
-        @keyup=${this.handleKeyUp}
+        @keydown=${this.handleKeyDown}
       >
-        ${a}
+        ${o}
       </button>
     `;
 	}
@@ -9767,6 +9800,9 @@ J([K({
 	type: Boolean,
 	reflect: !0
 })], No.prototype, "active", void 0), J([K({
+	type: Boolean,
+	reflect: !0
+})], No.prototype, "disabled", void 0), J([K({
 	type: String,
 	reflect: !0
 })], No.prototype, "href", void 0), J([K({
@@ -14130,6 +14166,7 @@ var zl = s((e, t) => {
 	return /* @__PURE__ */ b("div", {
 		className: r,
 		ref: n.wrapperRef,
+		id: n.id || void 0,
 		children: [/* @__PURE__ */ b(ml, {
 			forId: a,
 			hasFieldset: !i,
@@ -14653,6 +14690,7 @@ var ru = s((e, t) => {
 	let n = nu(e, t);
 	return /* @__PURE__ */ b("div", {
 		className: ["pkt-datepicker", n.className].filter(Boolean).join(" "),
+		id: n.id || void 0,
 		children: [
 			/* @__PURE__ */ y(ml, {
 				ref: n.wrapperRef,
@@ -17071,41 +17109,54 @@ var zd = ({ className: e, compact: t = !1, skin: n = "basic", responsiveView: r
 	role: "row",
 	...n,
 	children: t
-}), Gd = s(({ children: e, active: t, href: n, onClick: r, icon: i, controls: a, tag: o, tagSkin: s, index: c = 0 }, l) => {
-	let { arrowNav: u, registerTabRef: d, handleKeyPress: f, selectTab: p } = qd(), m = {
-		"aria-selected": u ? !!t : void 0,
-		"aria-controls": a,
-		role: u ? "tab" : void 0,
-		onKeyUp: (e) => f(c, e),
+}), Gd = s(({ children: e, active: t, disabled: n = !1, href: r, onClick: i, icon: a, controls: o, tag: s, tagSkin: c, index: l = 0 }, u) => {
+	let { arrowNav: d, registerTabRef: f, handleKeyPress: p, selectTab: m } = qd(), h = !!t && !n, g = {
+		"aria-selected": d ? h : void 0,
+		"aria-controls": o,
+		role: d ? "tab" : void 0,
+		onKeyDown: (e) => {
+			if (n && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			p(l, e);
+		},
 		onClick: (e) => {
-			p(c), r?.(e);
+			if (n) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			m(l), i?.(e);
 		},
-		tabIndex: t || !u ? void 0 : -1,
+		tabIndex: n ? -1 : h || !d ? void 0 : -1,
 		ref: (e) => {
-			d(c, e), typeof l == "function" ? l(e) : l && (l.current = e);
+			f(l, e, n), typeof u == "function" ? u(e) : u && (u.current = e);
 		}
-	}, h = /* @__PURE__ */ b(v, { children: [
-		i && /* @__PURE__ */ y(Q, {
-			name: i,
+	}, _ = /* @__PURE__ */ b(v, { children: [
+		a && /* @__PURE__ */ y(Q, {
+			name: a,
 			className: "pkt-icon--small"
 		}),
 		e,
-		o && /* @__PURE__ */ y(dl, {
-			skin: s,
+		s && /* @__PURE__ */ y(dl, {
+			skin: c,
 			size: "small",
-			children: o
+			children: s
 		})
 	] });
-	return n ? /* @__PURE__ */ y("a", {
-		...m,
-		href: n,
-		className: `pkt-tabs__link ${t ? "active" : ""}`,
-		children: h
+	return r ? /* @__PURE__ */ y("a", {
+		...g,
+		href: n ? void 0 : r,
+		"aria-disabled": n || void 0,
+		className: `pkt-tabs__link ${h ? "active" : ""} ${n ? "pkt-tabs__item--disabled" : ""}`,
+		children: _
 	}) : /* @__PURE__ */ y("button", {
-		...m,
+		...g,
 		type: "button",
-		className: `pkt-tabs__button pkt-link-button ${t ? "active" : ""}`,
-		children: h
+		disabled: n,
+		"aria-disabled": n || void 0,
+		className: `pkt-tabs__button pkt-link-button ${h ? "active" : ""} ${n ? "pkt-tabs__item--disabled" : ""}`,
+		children: _
 	});
 });
 Gd.displayName = "PktTabItem";
@@ -17116,21 +17167,44 @@ var Kd = i(null), qd = () => {
 	if (!e) throw Error("TabItem must be used within a Tabs component");
 	return e;
 }, Jd = s(({ arrowNav: e = !0, disableArrowNav: n = !1, tabs: r, onTabSelected: i, children: a }, o) => {
-	let s = g([]), c = e && !n, l = a && t.count(a) > 0 ? t.count(a) : r?.length || 0;
+	let s = g([]), c = g({}), l = e && !n, u = a && t.count(a) > 0 ? t.count(a) : r?.length || 0;
 	d(() => {
-		s.current = s.current.slice(0, l);
-	}, [l]);
-	let u = (e) => {
+		s.current = s.current.slice(0, u), Object.keys(c.current).forEach((e) => {
+			let t = Number(e);
+			t >= u && delete c.current[t];
+		});
+	}, [u]);
+	let f = (e) => r ? !!r[e]?.disabled : !!c.current[e], p = (e) => {
+		if (f(e)) return;
 		let t = r?.[e];
 		t?.action && t.action(e), i && i(e);
-	}, f = (e, t) => {
-		c && (t.code === "ArrowLeft" && e !== 0 && s.current[e - 1]?.focus(), t.code === "ArrowRight" && e < l - 1 && s.current[e + 1]?.focus(), (t.code === "ArrowDown" || t.code === "Space") && u(e));
-	}, p = (e, t) => {
-		s.current[e] = t;
-	}, m = r?.map((e, t) => /* @__PURE__ */ y(Gd, {
-		active: e.active,
+	}, m = (e, t) => {
+		let n = e + t;
+		for (; n >= 0 && n < u;) {
+			if (!f(n)) return n;
+			n += t;
+		}
+		return null;
+	}, h = (e, t) => {
+		if (l) {
+			if (t.key === "ArrowLeft") {
+				t.preventDefault();
+				let n = m(e, -1);
+				n !== null && s.current[n]?.focus();
+			}
+			if (t.key === "ArrowRight") {
+				t.preventDefault();
+				let n = m(e, 1);
+				n !== null && s.current[n]?.focus();
+			}
+			(t.key === "Enter" || t.key === " " || t.key === "Spacebar" || t.key === "ArrowDown") && (t.preventDefault(), f(e) || p(e));
+		}
+	}, _ = (e, t, n = !1) => {
+		s.current[e] = t, c.current[e] = n;
+	}, v = r?.map((e, t) => /* @__PURE__ */ y(Gd, {
+		active: e.disabled ? !1 : e.active,
+		disabled: e.disabled,
 		href: e.href,
-		onClick: () => u(t),
 		icon: e.icon,
 		controls: e.controls,
 		tag: e.tag?.text,
@@ -17140,18 +17214,18 @@ var Kd = i(null), qd = () => {
 	}, t));
 	return /* @__PURE__ */ y(Kd.Provider, {
 		value: {
-			arrowNav: c,
-			registerTabRef: p,
-			handleKeyPress: f,
-			selectTab: u
+			arrowNav: l,
+			registerTabRef: _,
+			handleKeyPress: h,
+			selectTab: p
 		},
 		children: /* @__PURE__ */ y("div", {
 			className: "pkt-tabs",
 			ref: o,
 			children: /* @__PURE__ */ y("div", {
 				className: "pkt-tabs__list",
-				role: c ? "tablist" : "navigation",
-				children: a || m
+				role: l ? "tablist" : "navigation",
+				children: a || v
 			})
 		})
 	});
@@ -17834,6 +17908,7 @@ var lf = s((e, t) => {
 	return /* @__PURE__ */ y("div", {
 		ref: i.containerRef,
 		className: i.outerClasses,
+		id: i.id || void 0,
 		onFocus: i.handleFocusIn,
 		onBlur: i.handleFocusOut,
 		children: /* @__PURE__ */ y(ml, {