@oslokommune/punkt-react 16.20.0 → 16.21.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.21.0](https://github.com/oslokommune/punkt/compare/16.20.0...16.21.0) (2026-05-29)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* PktLoader i React (#3502). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.20.0](https://github.com/oslokommune/punkt/compare/16.19.0...16.20.0) (2026-05-28)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import { Booleanish } from './shared-types';
 import { ButtonHTMLAttributes } from 'react';
 import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
-import { CSSProperties } from 'react';
 import { FC } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -17,7 +16,6 @@ import { InputHTMLAttributes } from 'react';
 import { IPktComboboxOption } from './shared-types/combobox';
 import { IPktConsent as IPktConsent_2 } from '@oslokommune/punkt-elements';
 import { IPktHeaderMenu as IPktHeaderMenu_2 } from './shared-types';
-import { IPktLoader as IPktLoader_2 } from '@oslokommune/punkt-elements';
 import { IPktSearchInputSuggestion } from './shared-types/searchinput';
 import { ITimepickerStrings } from './shared-types/timepicker';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -28,7 +26,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
-import { RefObject } from 'react';
 import { SelectHTMLAttributes } from 'react';
 import { SyntheticEvent } from 'react';
 import { TAccordionSkin } from './shared-types';
@@ -80,8 +77,6 @@ declare interface Column {
     text?: string;
 }
 
-declare type ExtendedLoader = IPktLoader_2 & PktElType;
-
 /**
  * A selected file plus metadata used by the FileUpload UI.
  *
@@ -624,7 +619,37 @@ export declare interface IPktLinkCard extends Omit<HTMLAttributes<HTMLAnchorElem
     children?: ReactNode;
 }
 
-export declare interface IPktLoader extends ExtendedLoader {
+export declare interface IPktLoader extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tid i millisekunder før loader vises. Nyttig når lastetiden kan være
+     * så kort at loader ikke trengs.
+     */
+    delay?: number;
+    /**
+     * Vises loader inline eller som blokk.
+     */
+    inline?: boolean;
+    /**
+     * Styrer om loader eller barnenoder vises. Når `false` vises barnenoder.
+     */
+    isLoading?: boolean;
+    /**
+     * Meldingstekst som vises sammen med loader.
+     */
+    message?: string | null;
+    /**
+     * Størrelse på loader. Standard er "medium".
+     */
+    size?: TPktLoaderSize;
+    /**
+     * Loader-variant. Standard er "shapes" (Oslo-bølger). Andre er "blue" og "rainbow" (spinner-varianter).
+     */
+    variant?: TPktLoaderVariant;
+    /**
+     * Overstyrer stien til loader-animasjoner.
+     */
+    loadingAnimationPath?: string;
+    children?: ReactNode;
 }
 
 export declare interface IPktMessagebox extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -1064,14 +1089,6 @@ export declare const PktConsent: ForwardRefExoticComponent<IPktConsent>;
 
 export declare const PktDatepicker: ForwardRefExoticComponent<IPktDatepicker & RefAttributes<HTMLDivElement>>;
 
-declare interface PktElType extends HTMLAttributes<HTMLElement> {
-    className?: string;
-    style?: CSSProperties;
-    children?: string | ReactNode | ReactNode[];
-    ref?: RefObject<HTMLElement> | LegacyRef<HTMLElement>;
-    id?: string;
-}
-
 export declare const PktFileUpload: FC<IPktFileUpload>;
 
 export declare const PktFooter: FC<IPktFooter>;
@@ -1137,7 +1154,7 @@ export declare const PktLinkCard: {
     displayName: string;
 };
 
-export declare const PktLoader: FC<IPktLoader>;
+export declare const PktLoader: ForwardRefExoticComponent<IPktLoader & RefAttributes<HTMLDivElement>>;
 
 export declare const PktMessagebox: FC<IPktMessagebox>;
 
@@ -1260,6 +1277,10 @@ declare type TPktHeadingSize = THeadingSize;
 
 declare type TPktHeadingWeight = THeadingWeight;
 
+declare type TPktLoaderSize = 'small' | 'medium' | 'large';
+
+declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
+
 /**
  * An operation that can be attached to a queue item (rename, comment, remove, etc).
  *

package/dist/punkt-react.es.js

@@ -93,7 +93,7 @@ var A = /* @__PURE__ */ O((/* @__PURE__ */ ee(((e, t) => {
 			return n;
 		}) : window.classNames = n;
 	})();
-})))(), 1), re = "https://punkt-cdn.oslo.kommune.no/16.20/icons/";
+})))(), 1), re = "https://punkt-cdn.oslo.kommune.no/16.21/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || re);
 var ie = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", ae = {}, oe = 2, se = 1500, ce = typeof Storage < "u" && typeof sessionStorage < "u", le = typeof window < "u" ? p : u, ue = (e, t) => !e || !ce ? "" : sessionStorage.getItem(t + e + ".svg") ?? "", de = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -208,7 +208,7 @@ var N = o(({ defaultOpen: e = !1, id: t, title: n, skin: r, compact: i = !1, isO
 });
 //#endregion
 //#region src/components/button/Button.tsx
-N.displayName = "PktAccordionItem", window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.20/animations/";
+N.displayName = "PktAccordionItem", window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.21/animations/";
 var P = o(({ children: e, className: t, iconName: n = "user", secondIconName: r = "user", iconPath: i, secondIconPath: a, size: o = "medium", fullWidth: s = !1, fullWidthOnMobile: c = !1, skin: l = "primary", type: u = "button", variant: d = "label-only", state: f, color: p, isLoading: m = void 0, disabled: h = void 0, loadingAnimationPath: g = window.pktAnimationPath, ..._ }, b) => {
 	let x = [
 		t,
@@ -4837,7 +4837,7 @@ var ea = class extends Kr {
 ea.directiveName = "unsafeHTML", ea.resultType = 1;
 var ta = Gr(ea), na = class extends ea {};
 na.directiveName = "unsafeSVG", na.resultType = 2;
-var ra = Gr(na), ia = "https://punkt-cdn.oslo.kommune.no/16.20/icons/";
+var ra = Gr(na), ia = "https://punkt-cdn.oslo.kommune.no/16.21/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || ia);
 var aa = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", oa = {}, sa = 2, ca = 1500, la = typeof Storage < "u" && typeof sessionStorage < "u", ua = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -4920,7 +4920,7 @@ try {
 var Q = (e) => e ?? K;
 //#endregion
 //#region ../elements/dist/button-CR-KWhTT.js
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.20/animations/";
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.21/animations/";
 var ma = class extends Qi {
 	constructor(...e) {
 		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath;
@@ -10741,7 +10741,7 @@ try {
 } catch {
 	console.warn("Forsøker å definere <pkt-header-user-menu>, men den er allerede definert");
 }
-var Bc = "https://punkt-cdn.oslo.kommune.no/16.20/logos/", Vc = class extends Qi {
+var Bc = "https://punkt-cdn.oslo.kommune.no/16.21/logos/", Vc = class extends Qi {
 	constructor(...e) {
 		super(...e), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.isMobile = !1, this.isTablet = !1, this.openMenu = "none", this.isHidden = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, this.alignSlotRight = !1, this.alignSearchRight = !1, this.headerRef = _a(), this.userContainerRef = _a(), this.slotContainerRef = _a(), this.searchContainerRef = _a(), this.slotContentRef = _a(), this.searchMenuRef = _a(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
 			if (!this.shouldHideOnScroll) return;
@@ -14736,7 +14736,7 @@ try {
 }
 //#endregion
 //#region ../elements/dist/loader-gKdQpOOQ.js
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.20/animations/";
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.21/animations/";
 var Ru = class extends Qi {
 	constructor(...e) {
 		super(...e), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this.loadingAnimationPath = window.pktAnimationPath, this._shouldDisplayLoader = !1;
@@ -18652,7 +18652,7 @@ var dp = o(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ v(M, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.20/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.21/logos/"
 						})
 					}) : ie ? /* @__PURE__ */ v("button", {
 						"aria-label": "Tilbake til forside",
@@ -18661,12 +18661,12 @@ var dp = o(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ v(M, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.20/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.21/logos/"
 						})
 					}) : /* @__PURE__ */ v(M, {
 						name: "oslologo",
 						"aria-hidden": "true",
-						path: "https://punkt-cdn.oslo.kommune.no/16.20/logos/"
+						path: "https://punkt-cdn.oslo.kommune.no/16.21/logos/"
 					})
 				}), T && /* @__PURE__ */ v("span", {
 					className: "pkt-header-service__service-name",
@@ -19164,23 +19164,46 @@ var Pp = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab:
 		]
 	});
 };
-Pp.displayName = "PktLinkCard";
 //#endregion
 //#region src/components/loader/Loader.tsx
-var Fp = ar({
-	tagName: "pkt-loader",
-	elementClass: Ru,
-	react: e,
-	displayName: "PktLoader",
-	events: {}
-}), Ip = o(({ children: e, ...t }, n) => /* @__PURE__ */ v(Fp, {
-	...t,
-	ref: n,
-	children: /* @__PURE__ */ v("div", {
-		className: "pkt-contents",
-		children: e
-	})
-}));
+Pp.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.21/animations/");
+var Fp = (e) => {
+	switch (e) {
+		case "blue": return "spinner-blue";
+		case "rainbow": return "spinner";
+		default: return "loader";
+	}
+}, Ip = o(function({ delay: e = 0, inline: t = !1, isLoading: n = !0, message: r = null, size: i = "medium", variant: a = "shapes", loadingAnimationPath: o = typeof window < "u" ? window.pktAnimationPath : void 0, className: s, children: c, ...l }, d) {
+	let [f, p] = g(e === 0);
+	u(() => {
+		if (e > 0) {
+			p(!1);
+			let t = setTimeout(() => p(!0), e);
+			return () => clearTimeout(t);
+		}
+		p(!0);
+	}, [e]);
+	let m = (0, A.default)("pkt-loader", t ? "pkt-loader--inline" : "pkt-loader--box", `pkt-loader--${i}`, s);
+	return /* @__PURE__ */ y("div", {
+		...l,
+		ref: d,
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": n ? "true" : "false",
+		className: m,
+		children: [n && f && /* @__PURE__ */ y("div", {
+			className: "pkt-loader__spinner",
+			children: [/* @__PURE__ */ v(M, {
+				name: Fp(a),
+				path: o,
+				className: `pkt-loader__svg pkt-loader__${a}`
+			}), r && /* @__PURE__ */ v("p", { children: r })]
+		}), /* @__PURE__ */ v("div", {
+			className: (0, A.default)("pkt-contents", n && "pkt-hide"),
+			children: c
+		})]
+	});
+});
 Ip.displayName = "PktLoader";
 //#endregion
 //#region src/components/messagebox/Messagebox.tsx