@helsenorge/datepicker 13.8.0 → 13.9.0

package/lib/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [13.9.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.8.0&targetVersion=GTv13.9.0) (2026-03-09)
+
+
+### Features
+
+* **illustration:**  nye illustrasjoner stork og thinking ([26d4edc](https://github.com/helsenorge/designsystem/commit/26d4edce1606559c4017b74097513b090dd3cb0e)), closes [#372380](https://github.com/helsenorge/designsystem/issues/372380)
+* **servicemessage:**  ny prop messageRole ([ee8ac9f](https://github.com/helsenorge/designsystem/commit/ee8ac9f084ec3e51904b0a58ff9bb0ccd5f45542)), closes [#372043](https://github.com/helsenorge/designsystem/issues/372043)
+
+
+### Bug Fixes
+
+*  generer ider til svger istedenfor hardkodede ([ea0cccf](https://github.com/helsenorge/designsystem/commit/ea0cccf37a31a817940b36f78b73af7303accb1b)), closes [#372412](https://github.com/helsenorge/designsystem/issues/372412)
+* **button:**  ikke vis hoverfarge på små skjermer for disabled buttons ([9a6a451](https://github.com/helsenorge/designsystem/commit/9a6a451fefaaf181858a282ca467bfdf176ec6f7)), closes [#372696](https://github.com/helsenorge/designsystem/issues/372696)
+* **datepicker:**  legg på outline ved hover på kalenderknapp ([b0c1a4e](https://github.com/helsenorge/designsystem/commit/b0c1a4e0025c1d7dfa69ab7cf08f00cb790cb0a0)), closes [#345238](https://github.com/helsenorge/designsystem/issues/345238)
+* **datepicker:**  småfikser rundt validering ([cd06bee](https://github.com/helsenorge/designsystem/commit/cd06beed0212d3d82fb67165722f5f740367255b)), closes [#372577](https://github.com/helsenorge/designsystem/issues/372577) [#373156](https://github.com/helsenorge/designsystem/issues/373156)
+* **drawer:**  flytt lukkekryss tilbake til flexbox ([f0f3c6f](https://github.com/helsenorge/designsystem/commit/f0f3c6f0c2f8d5c6b615c1ac7dbf6aab997b2e73)), closes [#373141](https://github.com/helsenorge/designsystem/issues/373141)
+* **helptriggerinline:**  tekst er nå left aligned ([ea0deeb](https://github.com/helsenorge/designsystem/commit/ea0deebe9a2ee373766a5ac6e4500fc581b0ee97)), closes [#372216](https://github.com/helsenorge/designsystem/issues/372216)
+* **unsafe_datepicker:**  bruk resources i labels fra react-day-picker ([0958b64](https://github.com/helsenorge/designsystem/commit/0958b64f730776a515917e5dcd44392e5d19ab50)), closes [#345238](https://github.com/helsenorge/designsystem/issues/345238) [#372577](https://github.com/helsenorge/designsystem/issues/372577)
+
 ## [13.8.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.7.0&targetVersion=GTv13.8.0) (2026-02-24)
 
 

package/lib/components/Unsafe_DatePicker/DatePicker.module.scss

@@ -167,6 +167,7 @@
 
   &:hover:not(:disabled) {
     background: var(--core-color-neutral-50);
+    outline: 1px solid var(--color-base-border-onlight-emphasized);
 
     svg {
       fill: var(--color-action-graphics-onlight-hover);

package/lib/components/Unsafe_DatePicker/index.js

@@ -145,6 +145,14 @@ var BaseDayPicker = (props) => {
 		...getResources(language),
 		...resources
 	};
+	const mergedLabels = {
+		labelNext: () => mergedResources.nextMonth,
+		labelPrevious: () => mergedResources.previousMonth,
+		labelDayButton: () => mergedResources.dayButtonBase,
+		labelMonthDropdown: () => mergedResources.monthDropdown,
+		labelYearDropdown: () => mergedResources.yearDropdown,
+		...labelsForCalendar
+	};
 	const customLocale = {
 		...localeForCalendar,
 		localize: {
@@ -197,7 +205,7 @@ var BaseDayPicker = (props) => {
 		classNames: datePickerClassNames,
 		locale: customLocale,
 		modifiers: modifiersExtended,
-		labels: labelsForCalendar,
+		labels: mergedLabels,
 		footer: showGoToTodayButton ? /* @__PURE__ */ jsxs("div", {
 			className: classNames(customstyles["datepicker-footer"], customstyles["datepicker-footer--with-today-button"]),
 			children: [/* @__PURE__ */ jsx(Button, {
@@ -280,7 +288,7 @@ var TimeInputInternal = ({ value, onChange, onBlur, id, setErrorText, resources,
 			if (mm !== newMm) setMm(newMm);
 		}
 	}, [value]);
-	const combinedValue = hh && mm ? `${hh}:${mm}` : "";
+	const combinedValue = hh || mm ? `${hh}:${mm}` : "";
 	useEffect(() => {
 		if (onChange) onChange(combinedValue);
 	}, [combinedValue]);
@@ -3183,103 +3191,113 @@ var DateInputInternal = ({ value, onChange, onBlur, inputId, legendId, setErrorT
 	];
 	const clearButtonRef = useRef(null);
 	const [isClearButtonFocused, setIsClearButtonFocused] = useState(false);
-	useEffect(() => {
-		if (!value || value === "") return;
-		const match = value.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-		if (match) {
-			const [_, newDd, newMm, newYyyy] = match;
-			if (dd !== newDd) setDd(newDd);
-			if (mm !== newMm) setMm(newMm);
-			if (yyyy !== newYyyy) setYyyy(newYyyy);
-		}
-	}, [value]);
-	const combinedValue = dd && mm && yyyy ? `${dd}.${mm}.${yyyy}` : "";
+	const combinedValue = `${dd}.${mm}.${yyyy}`;
 	useEffect(() => {
 		if (onChange) onChange(combinedValue);
 	}, [combinedValue]);
-	const validateDd = (newDd) => {
-		if (newDd === "") {
-			setErrorTextDd("");
+	const validateSegment = ({ segment, length, minValue, maxValue, errorTextSetter, errorMessage }) => {
+		if (segment === "") {
+			errorTextSetter("");
 			return true;
 		}
-		if (/^\d{0,2}$/.test(newDd)) {
-			const dayNum = parseInt(newDd, 10);
-			if (dayNum < 0 || dayNum > 31) {
-				setErrorTextDd(resources?.validateDefaultMessageDay || "Dag må være et tall mellom 01 og 31");
+		if ((/* @__PURE__ */ new RegExp(`^\\d{0,${length}}$`)).test(segment)) {
+			if (length === 2 && segment === "00") {
+				errorTextSetter(errorMessage);
+				return false;
+			}
+			const parsedSegment = parseInt(segment, 10);
+			if (parsedSegment < minValue || parsedSegment > maxValue) {
+				errorTextSetter(errorMessage);
 				return false;
 			} else {
-				setErrorTextDd("");
+				errorTextSetter("");
 				return true;
 			}
 		} else {
-			setErrorTextDd(resources?.validateDefaultMessageDay || "Dag må være et tall mellom 01 og 31");
+			errorTextSetter(errorMessage);
 			return false;
 		}
 	};
 	const handleDdChange = (e) => {
 		const newDd = e.target.value;
 		setDd(newDd);
-		if (validateDd(newDd)) {
+		if (validateSegment({
+			segment: newDd,
+			length: 2,
+			minValue: 0,
+			maxValue: 31,
+			errorTextSetter: setErrorTextDd,
+			errorMessage: resources?.validateDefaultMessageDay || "Dag må være et tall mellom 01 og 31"
+		})) {
 			if (newDd.length === 2) mmRef.current?.focus();
 		}
 	};
-	const validateMm = (newMm) => {
-		if (newMm === "") {
-			setErrorTextMm("");
-			return true;
-		}
-		if (/^\d{0,2}$/.test(newMm)) {
-			const dayNum = parseInt(newMm, 10);
-			if (dayNum < 0 || dayNum > 12) {
-				setErrorTextMm(resources?.validateDefaultMessageMonth || "Måned må være et tall mellom 01 og 12");
-				return false;
-			} else {
-				setErrorTextMm("");
-				return true;
-			}
-		} else {
-			setErrorTextMm(resources?.validateDefaultMessageMonth || "Måned må være et tall mellom 01 og 12");
-			return false;
-		}
-	};
 	const handleMmChange = (e) => {
 		const newMm = e.target.value;
 		setMm(newMm);
-		if (validateMm(newMm)) {
+		if (validateSegment({
+			segment: newMm,
+			length: 2,
+			minValue: 0,
+			maxValue: 12,
+			errorTextSetter: setErrorTextMm,
+			errorMessage: resources?.validateDefaultMessageMonth || "Måned må være et tall mellom 01 og 12"
+		})) {
 			if (newMm.length === 2) yyyyRef.current?.focus();
 		}
 	};
-	const validateYyyy = (newYyyy, strict) => {
-		if (newYyyy === "") {
-			setErrorTextYyyy("");
-			return true;
-		}
-		if (/^\d{0,4}$/.test(newYyyy)) {
-			const dayNum = parseInt(newYyyy, 10);
-			let minValue = 0;
-			if (strict) minValue = 1e3;
-			if (dayNum < minValue || dayNum > 9999) {
-				setErrorTextYyyy(resources?.validateDefaultMessageYear || "År må være et tall med 4 siffer");
-				return false;
-			} else {
-				setErrorTextYyyy("");
-				return true;
-			}
-		} else {
-			setErrorTextYyyy(resources?.validateDefaultMessageYear || "År må være et tall med 4 siffer");
-			return false;
-		}
-	};
 	const handleYyyyChange = (e) => {
 		const newYyyy = e.target.value;
 		setYyyy(newYyyy);
-		validateYyyy(newYyyy);
+		validateSegment({
+			segment: newYyyy,
+			length: 4,
+			minValue: 0,
+			maxValue: 9999,
+			errorTextSetter: setErrorTextYyyy,
+			errorMessage: resources?.validateDefaultMessageYear || "År må være et tall med 4 siffer"
+		});
+	};
+	const validateAllSegments = (latestDd, latestMm, latestYyyy) => {
+		validateSegment({
+			segment: latestDd ?? dd,
+			length: 2,
+			minValue: 0,
+			maxValue: 31,
+			errorTextSetter: setErrorTextDd,
+			errorMessage: resources?.validateDefaultMessageDay || "Dag må være et tall mellom 01 og 31"
+		});
+		validateSegment({
+			segment: latestMm ?? mm,
+			length: 2,
+			minValue: 0,
+			maxValue: 12,
+			errorTextSetter: setErrorTextMm,
+			errorMessage: resources?.validateDefaultMessageMonth || "Måned må være et tall mellom 01 og 12"
+		});
+		validateSegment({
+			segment: latestYyyy ?? yyyy,
+			length: 4,
+			minValue: 0,
+			maxValue: 9999,
+			errorTextSetter: setErrorTextYyyy,
+			errorMessage: resources?.validateDefaultMessageYear || "År må være et tall med 4 siffer"
+		});
 	};
 	const handleBlurOnSegment = () => {
-		validateDd(dd);
-		validateMm(mm);
-		validateYyyy(yyyy, true);
+		validateAllSegments();
 	};
+	useEffect(() => {
+		if (!value || value === "") return;
+		const match = value.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+		if (match) {
+			const [_, newDd, newMm, newYyyy] = match;
+			if (dd !== newDd) setDd(newDd);
+			if (mm !== newMm) setMm(newMm);
+			if (yyyy !== newYyyy) setYyyy(newYyyy);
+			validateAllSegments(newDd, newMm, newYyyy);
+		}
+	}, [value]);
 	useEffect(() => {
 		const combinedErrors = [
 			errorTextDd,