@helsenorge/datepicker 14.0.0-beta.7 → 14.0.0

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

@@ -144,6 +144,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: {
@@ -196,7 +204,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, {
@@ -279,7 +287,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]);
@@ -520,54 +528,30 @@ function isShadowRoot(value) {
 	if (!hasWindow() || typeof ShadowRoot === "undefined") return false;
 	return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
-var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
 function isOverflowElement(element) {
 	const { overflow, overflowX, overflowY, display } = getComputedStyle$1(element);
-	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
 }
-var tableElements = /* @__PURE__ */ new Set([
-	"table",
-	"td",
-	"th"
-]);
 function isTableElement(element) {
-	return tableElements.has(getNodeName(element));
+	return /^(table|td|th)$/.test(getNodeName(element));
 }
-var topLayerSelectors = [":popover-open", ":modal"];
 function isTopLayer(element) {
-	return topLayerSelectors.some((selector) => {
-		try {
-			return element.matches(selector);
-		} catch (_e) {
-			return false;
-		}
-	});
+	try {
+		if (element.matches(":popover-open")) return true;
+	} catch (_e) {}
+	try {
+		return element.matches(":modal");
+	} catch (_e) {
+		return false;
+	}
 }
-var transformProperties = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective"
-];
-var willChangeValues = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective",
-	"filter"
-];
-var containValues = [
-	"paint",
-	"layout",
-	"strict",
-	"content"
-];
+var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+var containRe = /paint|layout|strict|content/;
+var isNotNone = (value) => !!value && value !== "none";
+var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-	const webkit = isWebKit();
 	const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-	return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+	return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
 }
 function getContainingBlock(element) {
 	let currentNode = getParentNode(element);
@@ -579,16 +563,11 @@ function getContainingBlock(element) {
 	return null;
 }
 function isWebKit() {
-	if (typeof CSS === "undefined" || !CSS.supports) return false;
-	return CSS.supports("-webkit-backdrop-filter", "none");
-}
-var lastTraversableNodeNames = /* @__PURE__ */ new Set([
-	"html",
-	"body",
-	"#document"
-]);
+	if (isWebKitValue == null) isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+	return isWebKitValue;
+}
 function isLastTraversableNode(node) {
-	return lastTraversableNodeNames.has(getNodeName(node));
+	return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle$1(element) {
 	return getWindow(element).getComputedStyle(element);
@@ -624,8 +603,7 @@ function getOverflowAncestors(node, list, traverseIframes) {
 	if (isBody) {
 		const frameElement = getFrameElement(win);
 		return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-	}
-	return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+	} else return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getFrameElement(win) {
 	return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -656,9 +634,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
 	return axis === "y" ? "height" : "width";
 }
-var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
 function getSideAxis(placement) {
-	return yAxisSides.has(getSide(placement)) ? "y" : "x";
+	const firstChar = placement[0];
+	return firstChar === "t" || firstChar === "b" ? "y" : "x";
 }
 function getAlignmentAxis(placement) {
 	return getOppositeAxis(getSideAxis(placement));
@@ -1198,9 +1176,13 @@ async function detectOverflow$1(state, options) {
 		right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
 	};
 }
+var MAX_RESET_COUNT = 50;
 var computePosition$1 = async (reference, floating, config) => {
 	const { placement = "bottom", strategy = "absolute", middleware = [], platform: platform$1 } = config;
-	const validMiddleware = middleware.filter(Boolean);
+	const platformWithDetectOverflow = platform$1.detectOverflow ? platform$1 : {
+		...platform$1,
+		detectOverflow: detectOverflow$1
+	};
 	const rtl = await (platform$1.isRTL == null ? void 0 : platform$1.isRTL(floating));
 	let rects = await platform$1.getElementRects({
 		reference,
@@ -1209,11 +1191,12 @@ var computePosition$1 = async (reference, floating, config) => {
 	});
 	let { x, y } = computeCoordsFromPlacement(rects, placement, rtl);
 	let statefulPlacement = placement;
-	let middlewareData = {};
 	let resetCount = 0;
-	for (let i = 0; i < validMiddleware.length; i++) {
-		var _platform$detectOverf;
-		const { name, fn } = validMiddleware[i];
+	const middlewareData = {};
+	for (let i = 0; i < middleware.length; i++) {
+		const currentMiddleware = middleware[i];
+		if (!currentMiddleware) continue;
+		const { name, fn } = currentMiddleware;
 		const { x: nextX, y: nextY, data, reset } = await fn({
 			x,
 			y,
@@ -1222,10 +1205,7 @@ var computePosition$1 = async (reference, floating, config) => {
 			strategy,
 			middlewareData,
 			rects,
-			platform: {
-				...platform$1,
-				detectOverflow: (_platform$detectOverf = platform$1.detectOverflow) != null ? _platform$detectOverf : detectOverflow$1
-			},
+			platform: platformWithDetectOverflow,
 			elements: {
 				reference,
 				floating
@@ -1233,14 +1213,11 @@ var computePosition$1 = async (reference, floating, config) => {
 		});
 		x = nextX != null ? nextX : x;
 		y = nextY != null ? nextY : y;
-		middlewareData = {
-			...middlewareData,
-			[name]: {
-				...middlewareData[name],
-				...data
-			}
+		middlewareData[name] = {
+			...middlewareData[name],
+			...data
 		};
-		if (reset && resetCount <= 50) {
+		if (reset && resetCount < MAX_RESET_COUNT) {
 			resetCount++;
 			if (typeof reset === "object") {
 				if (reset.placement) statefulPlacement = reset.placement;
@@ -1485,7 +1462,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
 	const isOffsetParentAnElement = isHTMLElement(offsetParent);
 	if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
 		if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) scroll = getNodeScroll(offsetParent);
-		if (isHTMLElement(offsetParent)) {
+		if (isOffsetParentAnElement) {
 			const offsetRect = getBoundingClientRect(offsetParent);
 			scale = getScale(offsetParent);
 			offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -1553,7 +1530,6 @@ function getViewportRect(element, strategy) {
 		y
 	};
 }
-var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function getInnerBoundingClientRect(element, strategy) {
 	const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
 	const top = clientRect.top + element.clientTop;
@@ -1598,7 +1574,7 @@ function getClippingElementAncestors(element, cache) {
 		const computedStyle = getComputedStyle$1(currentNode);
 		const currentNodeIsContaining = isContainingBlock(currentNode);
 		if (!currentNodeIsContaining && computedStyle.position === "fixed") currentContainingBlockComputedStyle = null;
-		if (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) result = result.filter((ancestor) => ancestor !== currentNode);
+		if (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) result = result.filter((ancestor) => ancestor !== currentNode);
 		else currentContainingBlockComputedStyle = computedStyle;
 		currentNode = getParentNode(currentNode);
 	}
@@ -1608,20 +1584,23 @@ function getClippingElementAncestors(element, cache) {
 function getClippingRect(_ref) {
 	let { element, boundary, rootBoundary, strategy } = _ref;
 	const clippingAncestors = [...boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary), rootBoundary];
-	const firstClippingAncestor = clippingAncestors[0];
-	const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-		const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-		accRect.top = max$1(rect.top, accRect.top);
-		accRect.right = min$1(rect.right, accRect.right);
-		accRect.bottom = min$1(rect.bottom, accRect.bottom);
-		accRect.left = max$1(rect.left, accRect.left);
-		return accRect;
-	}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+	const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+	let top = firstRect.top;
+	let right = firstRect.right;
+	let bottom = firstRect.bottom;
+	let left = firstRect.left;
+	for (let i = 1; i < clippingAncestors.length; i++) {
+		const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+		top = max$1(rect.top, top);
+		right = min$1(rect.right, right);
+		bottom = min$1(rect.bottom, bottom);
+		left = max$1(rect.left, left);
+	}
 	return {
-		width: clippingRect.right - clippingRect.left,
-		height: clippingRect.bottom - clippingRect.top,
-		x: clippingRect.left,
-		y: clippingRect.top
+		width: right - left,
+		height: bottom - top,
+		x: left,
+		y: top
 	};
 }
 function getDimensions(element) {
@@ -1775,7 +1754,7 @@ function autoUpdate(reference, floating, update, options) {
 	if (options === void 0) options = {};
 	const { ancestorScroll = true, ancestorResize = true, elementResize = typeof ResizeObserver === "function", layoutShift = typeof IntersectionObserver === "function", animationFrame = false } = options;
 	const referenceEl = unwrapElement(reference);
-	const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+	const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
 	ancestors.forEach((ancestor) => {
 		ancestorScroll && ancestor.addEventListener("scroll", update, { passive: true });
 		ancestorResize && ancestor.addEventListener("resize", update);
@@ -1786,7 +1765,7 @@ function autoUpdate(reference, floating, update, options) {
 	if (elementResize) {
 		resizeObserver = new ResizeObserver((_ref) => {
 			let [firstEntry] = _ref;
-			if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+			if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
 				resizeObserver.unobserve(floating);
 				cancelAnimationFrame(reobserveFrame);
 				reobserveFrame = requestAnimationFrame(() => {
@@ -1797,7 +1776,7 @@ function autoUpdate(reference, floating, update, options) {
 			update();
 		});
 		if (referenceEl && !animationFrame) resizeObserver.observe(referenceEl);
-		resizeObserver.observe(floating);
+		if (floating) resizeObserver.observe(floating);
 	}
 	let frameId;
 	let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -2024,14 +2003,22 @@ function useFloating$1(options) {
 		floatingStyles
 	]);
 }
-var offset = (options, deps) => ({
-	...offset$1(options),
-	options: [options, deps]
-});
-var shift = (options, deps) => ({
-	...shift$1(options),
-	options: [options, deps]
-});
+var offset = (options, deps) => {
+	const result = offset$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
+var shift = (options, deps) => {
+	const result = shift$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 var FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
 var ACTIVE_KEY = "active";
 var SELECTED_KEY = "selected";
@@ -2128,7 +2115,10 @@ var uncontrolledElementsSet = /* @__PURE__ */ new WeakSet();
 var markerMap = {};
 var lockCount$1 = 0;
 var supportsInert = () => typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
-var unwrapHost = (node) => node && (node.host || unwrapHost(node.parentNode));
+function unwrapHost(node) {
+	if (!node) return null;
+	return isShadowRoot(node) ? node.host : unwrapHost(node.parentNode);
+}
 var correctElements = (parent, targets) => targets.map((target) => {
 	if (parent.contains(target)) return target;
 	const correctedTarget = unwrapHost(target);
@@ -2256,7 +2246,7 @@ function addPreviouslyFocusedElement(element) {
 	clearDisconnectedPreviouslyFocusedElements();
 	if (element && getNodeName(element) !== "body") {
 		previouslyFocusedElements.push(new WeakRef(element));
-		if (previouslyFocusedElements.length > LIST_LIMIT) previouslyFocusedElements = previouslyFocusedElements.slice(-20);
+		if (previouslyFocusedElements.length > LIST_LIMIT) previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
 	}
 }
 function getPreviouslyFocusedElement() {
@@ -2949,18 +2939,20 @@ function useDismiss(context, props) {
 		referencePress,
 		referencePressEvent
 	]);
-	const floating = React$1.useMemo(() => ({
-		onKeyDown: closeOnEscapeKeyDown,
-		onMouseDown() {
-			endedOrStartedInsideRef.current = true;
-		},
-		onMouseUp() {
+	const floating = React$1.useMemo(() => {
+		function setMouseDownOrUpInside(event) {
+			if (event.button !== 0) return;
 			endedOrStartedInsideRef.current = true;
-		},
-		[captureHandlerKeys[outsidePressEvent]]: () => {
-			dataRef.current.insideReactTree = true;
 		}
-	}), [
+		return {
+			onKeyDown: closeOnEscapeKeyDown,
+			onMouseDown: setMouseDownOrUpInside,
+			onMouseUp: setMouseDownOrUpInside,
+			[captureHandlerKeys[outsidePressEvent]]: () => {
+				dataRef.current.insideReactTree = true;
+			}
+		};
+	}, [
 		closeOnEscapeKeyDown,
 		outsidePressEvent,
 		dataRef
@@ -3186,103 +3178,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,
@@ -3629,22 +3631,13 @@ var Unsafe_DateAndTime = ({ value, onChange, legend, errorText, datepickerProps,
 		return date.getHours() !== 0 || date.getMinutes() !== 0;
 	};
 	const [internalTime, setInternalTime] = useState(hasMeaningfulTime(value) ? toTimeString(value) : void 0);
-	const isTypingTimeRef = useRef(false);
-	const hasUserTimeRef = useRef(hasMeaningfulTime(value));
-	useEffect(() => {
-		if (!isTypingTimeRef.current && hasUserTimeRef.current) {
-			const newTimeString = toTimeString(value);
-			if (hasMeaningfulTime(value)) setInternalTime(newTimeString);
-		}
-		isTypingTimeRef.current = false;
-	}, [value]);
+	const nextTimeString = hasMeaningfulTime(value) ? toTimeString(value) : void 0;
+	if (internalTime !== nextTimeString) setInternalTime(nextTimeString);
 	const handleDateChange = (newDate) => {
 		const merged = mergeDateAndTime(newDate, internalTime);
 		onChange?.(merged);
 	};
 	const handleTimeChange = (newTime) => {
-		hasUserTimeRef.current = !!newTime;
-		isTypingTimeRef.current = true;
 		setInternalTime(newTime);
 		const merged = mergeDateAndTime(value, newTime);
 		onChange?.(merged);
@@ -3670,32 +3663,27 @@ var Unsafe_DateAndTime = ({ value, onChange, legend, errorText, datepickerProps,
 };
 var Unsafe_DateAndTime_default = Unsafe_DateAndTime;
 var Unsafe_ISODatePicker = ({ value, onChange, ...baseDateInputProps }) => {
-	const [internalDate, setInternalDate] = useState(value ? new Date(value) : void 0);
-	const dateToIso = (date) => {
-		if (!isValid(date) || !date) return "";
-		return formatISO(date, { representation: "date" });
-	};
 	const isoToDate = (iso) => {
+		if (!iso) return;
 		const date = new Date(iso);
 		if (!isValid(date)) return;
 		return date;
 	};
-	useEffect(() => {
-		if (value) setInternalDate(isoToDate(value));
-		else setInternalDate(void 0);
-	}, [value]);
-	useEffect(() => {
-		if (!internalDate) {
-			onChange?.("");
-			return;
-		}
-		const iso = dateToIso(internalDate);
-		onChange?.(iso);
-	}, [internalDate]);
+	const dateToIso = (date) => {
+		if (!isValid(date) || !date) return "";
+		return formatISO(date, { representation: "date" });
+	};
+	const [internalDate, setInternalDate] = useState(isoToDate(value));
+	const nextDateFromProp = isoToDate(value);
+	if ((internalDate?.getTime() ?? void 0) !== (nextDateFromProp?.getTime() ?? void 0)) setInternalDate(nextDateFromProp);
+	const handleDateChange = (newDate) => {
+		setInternalDate(newDate);
+		onChange?.(dateToIso(newDate));
+	};
 	return /* @__PURE__ */ jsx(Unsafe_DatePicker_default, {
 		...baseDateInputProps,
 		value: internalDate,
-		onChange: setInternalDate
+		onChange: handleDateChange
 	});
 };
 var Unsafe_ISODatePicker_default = Unsafe_ISODatePicker;