@povio/ui 3.2.4-rc.1 → 3.2.4-rc.2

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -8,7 +8,7 @@ import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { DateField } from "./DateField.js";
 import { datePickerInputContentRowDefinition } from "./datePickerInput.cva.js";
 import { renderDatePickerTodayIcon } from "./datePickerTodayIcon.js";
-import { usePreserveExternalFocusOnUnmount } from "./usePreserveExternalFocusOnUnmount.js";
+import { useFirefoxDateSegmentSelectionGuard } from "./useFirefoxDateSegmentSelectionGuard.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -59,7 +59,7 @@ var DatePickerInput = (t0) => {
 	const dateFieldRef = useRef(null);
 	const endDateFieldRef = useRef(null);
 	const containerRef = useRef(null);
-	usePreserveExternalFocusOnUnmount(containerRef);
+	useFirefoxDateSegmentSelectionGuard(containerRef);
 	const t8 = isValueControlled ? fieldValue ?? null : fieldProps.value ?? null;
 	let t9;
 	if ($[4] !== autoFixYear || $[5] !== fieldProps || $[6] !== t8) {

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -4,7 +4,7 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
-import { usePreserveExternalFocusOnUnmount } from "./usePreserveExternalFocusOnUnmount.js";
+import { useFirefoxDateSegmentSelectionGuard } from "./useFirefoxDateSegmentSelectionGuard.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { TimeField } from "./TimeField.js";
 import { c } from "react/compiler-runtime";
@@ -37,7 +37,7 @@ var TimePickerInput = (t0) => {
 	const { focusWithinProps } = useFocusWithin(t2);
 	const { isFocusVisible } = useFocusVisible();
 	const containerRef = useRef(null);
-	usePreserveExternalFocusOnUnmount(containerRef);
+	useFirefoxDateSegmentSelectionGuard(containerRef);
 	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
 	let t3;
 	if ($[3] !== state.segments) {

package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useFirefoxDateSegmentSelectionGuard: (containerRef: RefObject<HTMLElement | null>) => void;

package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js

@@ -0,0 +1,33 @@
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect } from "react";
+import { isFirefox } from "@react-aria/utils";
+//#region src/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.ts
+var isEditableElement = (element) => element instanceof HTMLElement && (element.matches("input, textarea") || element.isContentEditable);
+var useFirefoxDateSegmentSelectionGuard = (containerRef) => {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== containerRef) {
+		t0 = () => {
+			const container = containerRef.current;
+			if (!container || !isFirefox()) return;
+			const onSelectionChange = (event) => {
+				const activeElement = document.activeElement;
+				const selection = window.getSelection();
+				if (isEditableElement(activeElement) && !container.contains(activeElement) && selection?.anchorNode && container.contains(selection.anchorNode)) event.stopImmediatePropagation();
+			};
+			document.addEventListener("selectionchange", onSelectionChange, true);
+			return () => document.removeEventListener("selectionchange", onSelectionChange, true);
+		};
+		t1 = [containerRef];
+		$[0] = containerRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+};
+//#endregion
+export { useFirefoxDateSegmentSelectionGuard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.2.4-rc.1",
+  "version": "3.2.4-rc.2",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/inputs/DateTime/shared/usePreserveExternalFocusOnUnmount.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from 'react';
-export declare const usePreserveExternalFocusOnUnmount: (containerRef: RefObject<HTMLElement | null>) => void;

package/dist/components/inputs/DateTime/shared/usePreserveExternalFocusOnUnmount.js

@@ -1,32 +0,0 @@
-import { c } from "react/compiler-runtime";
-import { useLayoutEffect } from "react";
-//#region src/components/inputs/DateTime/shared/usePreserveExternalFocusOnUnmount.ts
-var usePreserveExternalFocusOnUnmount = (containerRef) => {
-	const $ = c(3);
-	let t0;
-	let t1;
-	if ($[0] !== containerRef) {
-		t0 = () => {
-			const container = containerRef.current;
-			return () => {
-				const activeElement = document.activeElement;
-				if (!(activeElement instanceof HTMLElement) || activeElement === document.body || container?.contains(activeElement)) return;
-				requestAnimationFrame(() => {
-					const nextActiveElement = document.activeElement;
-					const dateInputReclaimedFocus = Boolean(nextActiveElement instanceof HTMLElement && nextActiveElement.closest("[data-datetime-input]"));
-					if (activeElement.isConnected && (nextActiveElement === document.body || dateInputReclaimedFocus) && nextActiveElement !== activeElement) activeElement.focus({ preventScroll: true });
-				});
-			};
-		};
-		t1 = [containerRef];
-		$[0] = containerRef;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useLayoutEffect(t0, t1);
-};
-//#endregion
-export { usePreserveExternalFocusOnUnmount };