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

package/dist/index.cjs

@@ -5801,7 +5801,8 @@ const CalendarPopoverContext = (0, react.createContext)({
 	closeButtonRef: null,
 	isOpen: false,
 	onClose: () => null,
-	showWeekNumbers: true
+	showWeekNumbers: true,
+	closeOtherCalendars: () => null
 });
 const CalendarPopover = ({ children, onClose, ...props }) => {
 	const anchorRef = (0, react.useRef)(null);
@@ -5818,9 +5819,12 @@ const CalendarPopover = ({ children, onClose, ...props }) => {
 	});
 };
 const CalendarPopoverAnchor = ({ children }) => {
-	const { anchorRef } = (0, react.useContext)(CalendarPopoverContext);
+	const { anchorRef, closeOtherCalendars } = (0, react.useContext)(CalendarPopoverContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: anchorRef ?? void 0,
+		onFocusCapture: closeOtherCalendars,
+		onMouseDown: closeOtherCalendars,
+		onPointerDown: closeOtherCalendars,
 		children
 	});
 };
@@ -6498,10 +6502,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 = (0, react.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 = (0, _react_stately_datepicker.useDatePickerState)(props);
+	const state = (0, _react_stately_datepicker.useDatePickerState)({
+		...props,
+		onOpenChange: (isOpen) => {
+			if (isOpen) closeOthers();
+			props.onOpenChange?.(isOpen);
+		}
+	});
+	(0, react.useEffect)(() => {
+		closeRegistry.set(instanceIdRef.current, state.close);
+		return () => {
+			closeRegistry.delete(instanceIdRef.current);
+		};
+	}, [state.close]);
 	const domRef = useFocusManagerRef(ref && refIsFocusable(ref) ? ref : null);
 	const internalRef = (0, react.useRef)(null);
 	const combinedRef = useCombinedRef(internalRef, domRef);
@@ -6520,6 +6544,7 @@ function DatePicker({ errorMessage, componentSize, tip, style, width, smallScree
 			isOpen: state.isOpen,
 			onClose: state.close,
 			showWeekNumbers,
+			closeOtherCalendars: closeOthers,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarPopoverAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateField, {
 				...fieldProps,
 				groupProps,