@povio/ui 4.0.0-rc.1 → 4.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { t as UIConfig } from "../uiConfig.context-BvBsrMFI.js";
|
|
2
2
|
import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "../import-DDGNxVX8.js";
|
|
3
3
|
import { t as FieldController } from "../form.binding-DLM7NA2s.js";
|
|
4
|
+
import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-Denoy4V_.js";
|
|
4
5
|
import { Autocomplete } from "./autocomplete.js";
|
|
5
6
|
import { n as getQueryItems, r as getSelectionIdsToResolve, t as useQueryAutocomplete } from "../useQueryAutocomplete-CraXvRm_.js";
|
|
6
|
-
import { memo, useCallback, useMemo, useState } from "react";
|
|
7
|
+
import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
8
9
|
//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
|
|
9
|
-
const LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, leadingContent, ...props }) => {
|
|
10
|
+
const LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, initialFocusFromEnd, leadingContent, ...props }) => {
|
|
10
11
|
"use no memo";
|
|
11
12
|
const ui = UIConfig.useConfig();
|
|
12
13
|
const [search, setSearch] = useState("");
|
|
14
|
+
const focusRootRef = useRef(null);
|
|
15
|
+
const didRestoreFocusRef = useRef(false);
|
|
16
|
+
useLayoutEffect(() => {
|
|
17
|
+
if (initialFocusFromEnd === void 0 || didRestoreFocusRef.current || !focusRootRef.current) return;
|
|
18
|
+
didRestoreFocusRef.current = true;
|
|
19
|
+
getStaticInputFocusTarget(focusRootRef.current, initialFocusFromEnd).focus();
|
|
20
|
+
}, [initialFocusFromEnd]);
|
|
13
21
|
const { onBlur, onChange } = props;
|
|
14
22
|
const value = "value" in props ? props.value : void 0;
|
|
15
23
|
const selectedIdsToResolve = getSelectionIdsToResolve({
|
|
@@ -50,7 +58,8 @@ const LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, quer
|
|
|
50
58
|
isClientSearchDisabled: true,
|
|
51
59
|
isLoading,
|
|
52
60
|
onChange: handleChange,
|
|
53
|
-
|
|
61
|
+
ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, focusRootRef),
|
|
62
|
+
renderStaticInput: initialFocusFromEnd === void 0 && (props.renderStaticInput ?? ui.queryAutocomplete?.renderStaticInput),
|
|
54
63
|
searchDebounceDelay: props.searchDebounceDelay ?? ui.queryAutocomplete?.searchDebounceDelay,
|
|
55
64
|
onMouseEnter: handleEnableQuery,
|
|
56
65
|
onFocusCapture: handleEnableQuery,
|
|
@@ -68,10 +77,12 @@ const QueryAutocompleteContent = (props) => {
|
|
|
68
77
|
value,
|
|
69
78
|
mapInitialToSelectItem: props.mapInitialToSelectItem
|
|
70
79
|
});
|
|
80
|
+
const [initialFocusFromEnd, setInitialFocusFromEnd] = useState();
|
|
71
81
|
const [isQueryMounted, setIsQueryMounted] = useState(() => !isInitialQueryDisabled && !selection.isResolvedByInitialSelection);
|
|
72
82
|
if (!selection.isResolvedByInitialSelection || isQueryMounted) return /* @__PURE__ */ jsx(LoadedQueryAutocompleteContent, {
|
|
73
83
|
...props,
|
|
74
|
-
isQueryEnabledInitially: isQueryMounted
|
|
84
|
+
isQueryEnabledInitially: isQueryMounted,
|
|
85
|
+
initialFocusFromEnd
|
|
75
86
|
});
|
|
76
87
|
const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...autocompleteProps } = props;
|
|
77
88
|
const mountQuery = () => setIsQueryMounted(true);
|
|
@@ -80,7 +91,10 @@ const QueryAutocompleteContent = (props) => {
|
|
|
80
91
|
items: [],
|
|
81
92
|
renderStaticInput: props.renderStaticInput ?? ui.queryAutocomplete?.renderStaticInput,
|
|
82
93
|
onMouseEnter: mountQuery,
|
|
83
|
-
onFocusCapture:
|
|
94
|
+
onFocusCapture: (event) => {
|
|
95
|
+
setInitialFocusFromEnd(event.relatedTarget instanceof Node && !!(event.target.compareDocumentPosition(event.relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING));
|
|
96
|
+
mountQuery();
|
|
97
|
+
}
|
|
84
98
|
});
|
|
85
99
|
};
|
|
86
100
|
const QueryAutocompleteComponent = (props) => {
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
import { t as UIConfig } from "../uiConfig.context-BvBsrMFI.js";
|
|
2
2
|
import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "../import-DDGNxVX8.js";
|
|
3
3
|
import { t as FieldController } from "../form.binding-DLM7NA2s.js";
|
|
4
|
+
import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-Denoy4V_.js";
|
|
4
5
|
import { t as Select } from "../Select-O9dprkTa.js";
|
|
5
6
|
import { n as getQueryItems, r as getSelectionIdsToResolve, t as useQueryAutocomplete } from "../useQueryAutocomplete-CraXvRm_.js";
|
|
6
|
-
import { memo, useCallback, useMemo, useState } from "react";
|
|
7
|
+
import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
8
9
|
//#region src/components/inputs/Selection/Select/QuerySelect.tsx
|
|
9
|
-
const LoadedQuerySelectContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, ...props }) => {
|
|
10
|
+
const LoadedQuerySelectContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, initialFocusFromEnd, ...props }) => {
|
|
10
11
|
const ui = UIConfig.useConfig();
|
|
11
12
|
const [search, setSearch] = useState("");
|
|
13
|
+
const focusRootRef = useRef(null);
|
|
14
|
+
const didRestoreFocusRef = useRef(false);
|
|
15
|
+
useLayoutEffect(() => {
|
|
16
|
+
if (initialFocusFromEnd === void 0 || didRestoreFocusRef.current || !focusRootRef.current) return;
|
|
17
|
+
didRestoreFocusRef.current = true;
|
|
18
|
+
getStaticInputFocusTarget(focusRootRef.current, initialFocusFromEnd).focus();
|
|
19
|
+
}, [initialFocusFromEnd]);
|
|
12
20
|
const isSearchable = props.isSearchable ?? ui.select.isSearchable;
|
|
13
21
|
const value = "value" in props ? props.value : void 0;
|
|
14
22
|
const selectedIdsToResolve = getSelectionIdsToResolve({
|
|
@@ -68,7 +76,8 @@ const LoadedQuerySelectContent = ({ query, queryParams, queryOptions, queryMap,
|
|
|
68
76
|
]);
|
|
69
77
|
return /* @__PURE__ */ jsx(Select, {
|
|
70
78
|
...asyncSelectProps,
|
|
71
|
-
|
|
79
|
+
ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, focusRootRef),
|
|
80
|
+
renderStaticInput: initialFocusFromEnd === void 0 && (props.renderStaticInput ?? ui.querySelect?.renderStaticInput)
|
|
72
81
|
});
|
|
73
82
|
};
|
|
74
83
|
const QuerySelectContent = (props) => {
|
|
@@ -80,10 +89,12 @@ const QuerySelectContent = (props) => {
|
|
|
80
89
|
value,
|
|
81
90
|
mapInitialToSelectItem: props.mapInitialToSelectItem
|
|
82
91
|
});
|
|
92
|
+
const [initialFocusFromEnd, setInitialFocusFromEnd] = useState();
|
|
83
93
|
const [isQueryMounted, setIsQueryMounted] = useState(() => !isInitialQueryDisabled && !selection.isResolvedByInitialSelection);
|
|
84
94
|
if (!selection.isResolvedByInitialSelection || isQueryMounted) return /* @__PURE__ */ jsx(LoadedQuerySelectContent, {
|
|
85
95
|
...props,
|
|
86
|
-
isQueryEnabledInitially: isQueryMounted
|
|
96
|
+
isQueryEnabledInitially: isQueryMounted,
|
|
97
|
+
initialFocusFromEnd
|
|
87
98
|
});
|
|
88
99
|
const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...selectProps } = props;
|
|
89
100
|
const mountQuery = () => setIsQueryMounted(true);
|
|
@@ -92,7 +103,10 @@ const QuerySelectContent = (props) => {
|
|
|
92
103
|
items: [],
|
|
93
104
|
renderStaticInput: props.renderStaticInput ?? ui.querySelect?.renderStaticInput,
|
|
94
105
|
onMouseEnter: mountQuery,
|
|
95
|
-
onFocusCapture:
|
|
106
|
+
onFocusCapture: (event) => {
|
|
107
|
+
setInitialFocusFromEnd(event.relatedTarget instanceof Node && !!(event.target.compareDocumentPosition(event.relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING));
|
|
108
|
+
mountQuery();
|
|
109
|
+
}
|
|
96
110
|
});
|
|
97
111
|
};
|
|
98
112
|
const QuerySelectComponent = (props) => {
|