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

package/dist/components/buttons/Button/button.cva.d.ts

@@ -92,7 +92,7 @@ export declare const buttonIconSizeDefinition: {
 export type ButtonIconSizeConfig = NonNullable<typeof buttonIconSizeDefinition.config>;
 export declare const buttonTypography: (props: {
     readonly width?: "fill" | "hug" | null | undefined;
-    readonly size?: "none" | "s" | "xs" | "m" | "l" | null | undefined;
+    readonly size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
     readonly color?: "error" | "primary" | "dual" | "secondary" | "success" | "warning" | null | undefined;
     readonly variant?: "text" | "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
     readonly inverted?: boolean | null | undefined;

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/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormField } from "../../FormField/FormField.js";
 import { inputBaseDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -338,7 +339,7 @@ var NumberInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
+		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(locale, formatOptions)) ?? "";
 		const hasValue = displayValue !== "";
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -381,7 +382,7 @@ var NumberRangeInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const formatter = new Intl.NumberFormat(locale, formatOptions);
+		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
 		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
 		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
 		const hasValue = minDisplay !== null || maxDisplay !== null;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, leadingContent, ...props }) => {
+var LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, leadingContent, ...props }) => {
 	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
@@ -20,6 +20,8 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, re
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
@@ -27,7 +29,7 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, re
 		mapItems: (data) => getQueryItems(data, queryMap),
 		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.queryAutocomplete?.resolveSelectedItemsWithIds,
 		search,
-		initialQueryState: shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled,
+		initialQueryState: shouldDisableInitialQuery,
 		selectedIdsToResolve: selectedIdsToResolve.items
 	});
 	const handleChange = (value_0) => {
@@ -55,6 +57,58 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, re
 		onLoadMore: fetchNextPage
 	});
 };
+var QueryAutocompleteContent = (props) => {
+	const $ = c(9);
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) {
+		let t0;
+		if ($[0] !== isQueryMounted || $[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(LoadedQueryAutocompleteContent, {
+				...props,
+				isQueryEnabledInitially: isQueryMounted
+			});
+			$[0] = isQueryMounted;
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let autocompleteProps;
+	if ($[3] !== props) {
+		const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...t0 } = props;
+		autocompleteProps = t0;
+		$[3] = props;
+		$[4] = autocompleteProps;
+	} else autocompleteProps = $[4];
+	let t0;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsQueryMounted(true);
+		$[5] = t0;
+	} else t0 = $[5];
+	const mountQuery = t0;
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== autocompleteProps) {
+		t2 = /* @__PURE__ */ jsx(Autocomplete, {
+			...autocompleteProps,
+			items: t1,
+			onMouseEnter: mountQuery,
+			onFocusCapture: mountQuery
+		});
+		$[7] = autocompleteProps;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
 var QueryAutocomplete = (props) => {
 	const $ = c(16);
 	if ("formControl" in props && props.formControl) {

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -8,9 +8,10 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
-var QuerySelectContent = (t0) => {
+var LoadedQuerySelectContent = (t0) => {
 	const $ = c(31);
-	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, ...props } = t0;
+	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially: t1, ...props } = t0;
+	const isQueryEnabledInitially = t1 === void 0 ? false : t1;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
@@ -21,32 +22,33 @@ var QuerySelectContent = (t0) => {
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
-	let t1;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
+	let t2;
 	if ($[0] !== queryMap) {
-		t1 = (data) => getQueryItems(data, queryMap);
+		t2 = (data) => getQueryItems(data, queryMap);
 		$[0] = queryMap;
-		$[1] = t1;
-	} else t1 = $[1];
-	const t2 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
-	const t3 = isSearchable ? search : void 0;
-	const t4 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
+	const t4 = isSearchable ? search : void 0;
 	let t5;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== shouldDisableInitialQuery || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
 		t5 = {
 			query,
 			queryParams,
 			queryOptions,
-			mapItems: t1,
-			resolveSelectedItemsWithIds: t2,
-			search: t3,
-			initialQueryState: t4,
+			mapItems: t2,
+			resolveSelectedItemsWithIds: t3,
+			search: t4,
+			initialQueryState: shouldDisableInitialQuery,
 			selectedIdsToResolve: selectedIdsToResolve.items
 		};
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
 		$[5] = selectedIdsToResolve.items;
-		$[6] = t1;
+		$[6] = shouldDisableInitialQuery;
 		$[7] = t2;
 		$[8] = t3;
 		$[9] = t4;
@@ -117,6 +119,58 @@ var QuerySelectContent = (t0) => {
 	} else t9 = $[30];
 	return t9;
 };
+var QuerySelectContent = (props) => {
+	const $ = c(9);
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) {
+		let t0;
+		if ($[0] !== isQueryMounted || $[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(LoadedQuerySelectContent, {
+				...props,
+				isQueryEnabledInitially: isQueryMounted
+			});
+			$[0] = isQueryMounted;
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let selectProps;
+	if ($[3] !== props) {
+		const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...t0 } = props;
+		selectProps = t0;
+		$[3] = props;
+		$[4] = selectProps;
+	} else selectProps = $[4];
+	let t0;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsQueryMounted(true);
+		$[5] = t0;
+	} else t0 = $[5];
+	const mountQuery = t0;
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== selectProps) {
+		t2 = /* @__PURE__ */ jsx(Select, {
+			...selectProps,
+			items: t1,
+			onMouseEnter: mountQuery,
+			onFocusCapture: mountQuery
+		});
+		$[7] = selectProps;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
 var QuerySelect = (props) => {
 	const $ = c(16);
 	if ("formControl" in props && props.formControl) {