@oslokommune/punkt-react 16.26.3 → 16.26.5

package/dist/punkt-react.js

@@ -5692,20 +5692,20 @@ var vi = r({ tail: 5 }), yi = ({ children: e, tail: t }) => {
 }, Bi = {
 	filename: Oi,
 	thumbnail: ki
-}, Vi = a(({ value: e, defaultValue: t, id: n, multiple: r = !1, uploadStrategy: i = "form", addCommentsEnabled: a = !1, renameFilesEnabled: o = !1, truncateTail: c = 4, onFilesChanged: f, onFileUploadRequested: g, extraOperations: y = [], itemRenderer: b = Bi.filename, fullwidth: x = !1, allowedFormats: S, formatErrorMessage: C, maxFileSize: w, sizeErrorMessage: T, onFileValidation: E, onFileValidate: D, errorMessage: O, hasError: k = !1, disabled: A = !1, label: ee, helptext: M, optionalTag: te, requiredTag: ne, required: re = !1, enableImagePreview: ie = !1, "aria-describedby": ae, "aria-invalid": oe, ...se }, N) => {
-	let ce = u(), le = n ?? `pkt-fileupload-${ce}`, ue = m(null);
-	d(N, () => ue.current, []);
-	let P = "transfers" in se ? se.transfers : void 0, [F, I] = h(null), [de, R] = h("");
+}, Vi = a(({ value: e, defaultValue: t, id: n, multiple: r = !1, uploadStrategy: i = "form", addCommentsEnabled: a = !1, renameFilesEnabled: o = !1, truncateTail: c = 4, onFilesChanged: f, onFileUploadRequested: g, extraOperations: y = [], itemRenderer: b = Bi.filename, fullwidth: x = !1, allowedFormats: S, formatErrorMessage: C, maxFileSize: w, sizeErrorMessage: T, onFileValidation: E, onFileValidate: D, errorMessage: O, hasError: k = !1, disabled: A = !1, label: ee, helptext: M, helptextDropdown: te, helptextDropdownButton: ne, optionalTag: re, optionalText: ie, requiredTag: ae, requiredText: oe, tagText: se, required: N = !1, enableImagePreview: ce = !1, "aria-describedby": le, "aria-invalid": ue, ...P }, F) => {
+	let I = u(), de = n ?? `pkt-fileupload-${I}`, R = m(null);
+	d(F, () => R.current, []);
+	let z = "transfers" in P ? P.transfers : void 0, [B, V] = h(null), [H, fe] = h("");
 	l(() => {
-		if (!de) return;
-		let e = setTimeout(() => R(""), 1500);
+		if (!H) return;
+		let e = setTimeout(() => fe(""), 1500);
 		return () => clearTimeout(e);
-	}, [de]);
-	let z = F ?? O ?? null, B = k || !!F || !!(O && O.trim()), V = z ? `${le}-error` : void 0, H = [
-		ae,
-		M ? `${le}-helptext` : void 0,
-		V
-	].filter(Boolean).join(" ") || void 0, fe = B || oe === !0 || oe === "true", U = s((e) => {
+	}, [H]);
+	let U = B ?? O ?? null, W = k || !!B || !!(O && O.trim()), pe = U ? `${de}-error` : void 0, G = [
+		le,
+		M ? `${de}-helptext` : void 0,
+		pe
+	].filter(Boolean).join(" ") || void 0, K = W || ue === !0 || ue === "true", me = s((e) => {
 		let t = Dr(e, {
 			allowedFormats: S,
 			maxFileSize: w,
@@ -5731,140 +5731,145 @@ var vi = r({ tail: 5 }), yi = ({ children: e, tail: t }) => {
 		D
 	]);
 	e !== void 0 && t !== void 0 && console.warn("PktFileupload: Både value og defaultValue er angitt. Komponenten kan være enten 'controlled' eller 'uncontrolled', ikke begge deler. Bruk kun én av dem. Se https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable"), e !== void 0 && f === void 0 && console.warn("PktFileupload: value-prop er angitt uten onFilesChanged-callback. Når en komponent er 'controlled', må endringer håndteres via en callback. Vennligst legg til onFilesChanged-callback for å håndtere endringer i fil-listen. Se https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable");
-	let W = e !== void 0, [pe, G] = h(() => t ?? []), K = W ? e : pe;
-	oi(ue, {
+	let q = e !== void 0, [J, Y] = h(() => t ?? []), X = q ? e : J;
+	oi(R, {
 		uploadStrategy: i,
-		required: re,
-		currentFileCount: K.length,
-		onMissingFiles: s(() => I(yr.requiredMissing), [])
+		required: N,
+		currentFileCount: X.length,
+		onMissingFiles: s(() => V(yr.requiredMissing), [])
 	});
-	let me = typeof b == "string" ? Bi[b] : b, q = b === "thumbnail", J = typeof se.accept == "string" ? se.accept.trim() : void 0, Y = p(() => Tr(J, S) || void 0, [J, S]), X = o && !q, Z = a && !q, he = s((e) => {
+	let Z = typeof b == "string" ? Bi[b] : b, he = b === "thumbnail", ge = typeof P.accept == "string" ? P.accept.trim() : void 0, _e = p(() => Tr(ge, S) || void 0, [ge, S]), ve = o && !he, ye = a && !he, be = s((e) => {
 		for (let t of e) {
-			let e = U(t.file);
+			let e = me(t.file);
 			if (e) {
-				I(e);
+				V(e);
 				return;
 			}
 		}
-		I(null);
-		let t = r ? [...K, ...e] : [e[0]], n = r ? e : [e[0]];
-		R(n.length === 1 ? yr.srFileAdded(n[0].attributes.targetFilename) : yr.srFilesAdded(n.length)), W || G(t), f?.(t), i === "custom" && g && e.forEach((e) => {
+		V(null);
+		let t = r ? [...X, ...e] : [e[0]], n = r ? e : [e[0]];
+		fe(n.length === 1 ? yr.srFileAdded(n[0].attributes.targetFilename) : yr.srFilesAdded(n.length)), q || Y(t), f?.(t), i === "custom" && g && e.forEach((e) => {
 			g?.(e);
 		});
 	}, [
 		f,
-		K,
+		X,
 		r,
 		i,
 		g,
-		U,
-		W
-	]), ge = s((e, t) => {
-		let n = K.map((n) => n.fileId === e ? {
+		me,
+		q
+	]), xe = s((e, t) => {
+		let n = X.map((n) => n.fileId === e ? {
 			...n,
 			...t
 		} : n);
-		W || G(n), f?.(n);
+		q || Y(n), f?.(n);
 	}, [
 		f,
-		K,
-		W
-	]), _e = s((e) => {
-		let t = K.filter((t) => t.fileId !== e);
-		W || G(t), f?.(t), "onTransferCancelled" in se && se.onTransferCancelled && se.onTransferCancelled?.(e);
+		X,
+		q
+	]), Se = s((e) => {
+		let t = X.filter((t) => t.fileId !== e);
+		q || Y(t), f?.(t), "onTransferCancelled" in P && P.onTransferCancelled && P.onTransferCancelled?.(e);
 	}, [
 		f,
-		K,
-		se,
-		W
-	]), { buildAttributeAccessors: ve } = ri(K, ge), ye = p(() => {
+		X,
+		P,
+		q
+	]), { buildAttributeAccessors: Ce } = ri(X, xe), we = p(() => {
 		let e = [];
-		return X && e.push(ni), Z && e.push(Zr), e.push(...y), e.push(Qr(_e)), e;
+		return ve && e.push(ni), ye && e.push(Zr), e.push(...y), e.push(Qr(Se)), e;
 	}, [
-		X,
-		Z,
+		ve,
+		ye,
 		y,
-		_e
-	]), { totalCount: be, uploadedCount: xe, failedCount: Se } = p(() => Fr(K, P), [K, P]), Ce = yr.fileLabel(be), we = /* @__PURE__ */ _("div", {
+		Se
+	]), { totalCount: Te, uploadedCount: Ee, failedCount: De } = p(() => Fr(X, z), [X, z]), Oe = yr.fileLabel(Te), Q = /* @__PURE__ */ _("div", {
 		className: (0, j.default)("pkt-fileupload", {
 			"pkt-fileupload--full-width": x,
-			"pkt-fileupload--error": B,
+			"pkt-fileupload--error": W,
 			"pkt-fileupload--disabled": A
 		}),
 		"aria-disabled": A,
 		...A ? { inert: !0 } : {},
 		children: /* @__PURE__ */ v(Vr.Provider, {
 			value: {
-				name: se.name || "",
+				name: P.name || "",
 				multiple: !!r,
-				id: le
+				id: de
 			},
 			children: [
 				/* @__PURE__ */ _("div", {
 					className: "pkt-sr-only",
 					"aria-live": "polite",
 					"aria-atomic": "true",
-					children: de || (be > 0 && xe > 0 ? yr.srFilesUploadedOfTotal(xe, be, Ce) : "")
+					children: H || (Te > 0 && Ee > 0 ? yr.srFilesUploadedOfTotal(Ee, Te, Oe) : "")
 				}),
 				/* @__PURE__ */ _("div", {
 					className: "pkt-sr-only",
 					"aria-live": "assertive",
 					"aria-atomic": "true",
-					children: be > 0 && Se > 0 && yr.srFilesFailedOfTotal(Se, be, Ce)
+					children: Te > 0 && De > 0 && yr.srFilesFailedOfTotal(De, Te, Oe)
 				}),
 				/* @__PURE__ */ _(Hr, {
-					id: le,
-					name: se.name || "",
-					value: K,
-					onFilesAdded: he,
+					id: de,
+					name: P.name || "",
+					value: X,
+					onFilesAdded: be,
 					multiple: r,
 					uploadStrategy: i,
-					ref: ue,
-					accept: q ? Ir : Y,
-					isThumbnailView: q,
+					ref: R,
+					accept: he ? Ir : _e,
+					isThumbnailView: he,
 					disabled: A,
-					required: re && i === "form",
-					"aria-required": re ? "true" : void 0,
-					"aria-invalid": fe ? "true" : void 0,
-					"aria-describedby": H,
+					required: N && i === "form",
+					"aria-required": N ? "true" : void 0,
+					"aria-invalid": K ? "true" : void 0,
+					"aria-describedby": G,
 					hasVisibleLabel: !!ee
 				}),
-				B && z && /* @__PURE__ */ _(L, {
+				W && U && /* @__PURE__ */ _(L, {
 					skin: "error",
 					"aria-live": "assertive",
 					role: "alert",
 					compact: !0,
-					id: V,
+					id: pe,
 					className: "pkt-fileupload__error-alert",
-					children: z
+					children: U
 				}),
-				K.length > 0 && /* @__PURE__ */ _(zi, {
-					files: K,
-					cancelTransfer: _e,
+				X.length > 0 && /* @__PURE__ */ _(zi, {
+					files: X,
+					cancelTransfer: Se,
 					truncateTail: c,
-					transfers: P,
+					transfers: z,
 					uploadStrategy: i,
-					ItemRenderer: me,
-					enableImagePreview: q && ie,
+					ItemRenderer: Z,
+					enableImagePreview: he && ce,
 					disabled: A,
-					inputName: se.name || "",
-					buildAttributeAccessors: ve,
-					queueItemOperations: ye
+					inputName: P.name || "",
+					buildAttributeAccessors: Ce,
+					queueItemOperations: we
 				})
 			]
 		})
 	});
 	return ee ? /* @__PURE__ */ _(Sn, {
-		forId: le,
+		forId: de,
 		label: ee,
 		helptext: M,
+		helptextDropdown: te,
+		helptextDropdownButton: ne,
 		disabled: A,
-		hasError: B,
-		optionalTag: te,
-		requiredTag: ne,
+		hasError: W,
+		optionalTag: re,
+		optionalText: ie,
+		requiredTag: ae,
+		requiredText: oe,
+		tagText: se,
 		className: (0, j.default)("pkt-fileupload-wrapper", { "pkt-fileupload-wrapper--full-width": x }),
-		children: we
-	}) : we;
+		children: Q
+	}) : Q;
 });
 Vi.displayName = "PktFileUpload";
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.26.3",
+  "version": "16.26.5",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -101,5 +101,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "7ffd906243e1997959f45c892925393b72b98de2"
+  "gitHead": "0a1e6fef1813b2de00696cbdd075f060fdc1e22c"
 }

package/src/components/fileupload/FileUpload.tsx

@@ -61,11 +61,10 @@ export { formatFileSize, parseFileSize } from 'shared-utils/fileupload'
 /**
  * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
  */
-interface IBaseFileUploadProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'
-  > {
+interface IBaseFileUploadProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'
+> {
   /** Called with the next file list when files are added/removed/updated. */
   onFilesChanged?: (files: TFileItemList) => void
   /** Allow selecting/dropping multiple files. */
@@ -120,10 +119,20 @@ interface IBaseFileUploadProps
   label?: string
   /** Help text under the label. */
   helptext?: string | ReactNode
-  /** Show "Valgfritt" tag in wrapper. */
+  /** Expandable help text (dropdown). */
+  helptextDropdown?: string | ReactNode
+  /** Button label for expandable help text. */
+  helptextDropdownButton?: string
+  /** Shows an "optional" tag. */
   optionalTag?: boolean
-  /** Show "Må fylles ut" tag in wrapper. */
+  /** Label text for the optional tag. */
+  optionalText?: string
+  /** Shows a "required" tag. */
   requiredTag?: boolean
+  /** Label text for the required tag. */
+  requiredText?: string
+  /** Extra tag next to the label. */
+  tagText?: string | null
   /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
   required?: boolean
   /** Enable image preview modal (only applies to thumbnail renderer). */
@@ -131,8 +140,7 @@ interface IBaseFileUploadProps
 }
 
 interface IFileInputFileUploadProps
-  extends IBaseFileUploadProps,
-    Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
+  extends IBaseFileUploadProps, Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
   uploadStrategy?: 'form'
   onFileUploadRequested?: never
 }
@@ -174,8 +182,13 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       disabled = false,
       label,
       helptext,
+      helptextDropdown,
+      helptextDropdownButton,
       optionalTag,
+      optionalText,
       requiredTag,
+      requiredText,
+      tagText,
       required = false,
       enableImagePreview = false,
       ['aria-describedby']: ariaDescribedByProp,
@@ -412,10 +425,15 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           forId={id}
           label={label}
           helptext={helptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
           disabled={disabled}
           hasError={hasError}
           optionalTag={optionalTag}
+          optionalText={optionalText}
           requiredTag={requiredTag}
+          requiredText={requiredText}
+          tagText={tagText}
           className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullwidth })}
         >
           {fileUploadContent}