@norges-domstoler/dds-components 0.0.0-dev-20260817100430 → 0.0.0-dev-20260817113506

package/dist/index.mjs

@@ -5768,7 +5768,8 @@ const CalendarPopoverContext = createContext({
 	closeButtonRef: null,
 	isOpen: false,
 	onClose: () => null,
-	showWeekNumbers: true
+	showWeekNumbers: true,
+	closeOtherCalendars: () => null
 });
 const CalendarPopover = ({ children, onClose, ...props }) => {
 	const anchorRef = useRef(null);
@@ -5785,9 +5786,12 @@ const CalendarPopover = ({ children, onClose, ...props }) => {
 	});
 };
 const CalendarPopoverAnchor = ({ children }) => {
-	const { anchorRef } = useContext(CalendarPopoverContext);
+	const { anchorRef, closeOtherCalendars } = useContext(CalendarPopoverContext);
 	return /* @__PURE__ */ jsx("div", {
 		ref: anchorRef ?? void 0,
+		onFocusCapture: closeOtherCalendars,
+		onMouseDown: closeOtherCalendars,
+		onPointerDown: closeOtherCalendars,
 		children
 	});
 };
@@ -6465,10 +6469,30 @@ function createDOMRef(ref) {
 const refIsFocusable = (ref) => {
 	return typeof ref === "object" && ref !== null && "focus" in ref;
 };
+const closeRegistry = /* @__PURE__ */ new Map();
+const closeOtherCalendars = (currentInstanceId) => {
+	for (const [instanceId, close] of closeRegistry.entries()) if (instanceId !== currentInstanceId) close();
+};
 function DatePicker({ errorMessage, componentSize, tip, style, width, smallScreenBreakpoint, showWeekNumbers = true, clearable = false, ref, ...props }) {
+	const instanceIdRef = useRef(Symbol("datePickerInstance"));
+	const closeOthers = () => {
+		closeOtherCalendars(instanceIdRef.current);
+	};
 	const lang = useLanguage();
 	if (!lang) throw new Error("DatePicker must be used within a DdsProvider");
-	const state = useDatePickerState(props);
+	const state = useDatePickerState({
+		...props,
+		onOpenChange: (isOpen) => {
+			if (isOpen) closeOthers();
+			props.onOpenChange?.(isOpen);
+		}
+	});
+	useEffect(() => {
+		closeRegistry.set(instanceIdRef.current, state.close);
+		return () => {
+			closeRegistry.delete(instanceIdRef.current);
+		};
+	}, [state.close]);
 	const domRef = useFocusManagerRef(ref && refIsFocusable(ref) ? ref : null);
 	const internalRef = useRef(null);
 	const combinedRef = useCombinedRef(internalRef, domRef);
@@ -6487,6 +6511,7 @@ function DatePicker({ errorMessage, componentSize, tip, style, width, smallScree
 			isOpen: state.isOpen,
 			onClose: state.close,
 			showWeekNumbers,
+			closeOtherCalendars: closeOthers,
 			children: [/* @__PURE__ */ jsx(CalendarPopoverAnchor, { children: /* @__PURE__ */ jsx(DateField, {
 				...fieldProps,
 				groupProps,