@react-spectrum/autocomplete 3.0.0-alpha.52 → 3.0.0-alpha.54
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.
- package/dist/import.mjs +5 -3
- package/dist/main.js +7 -5
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -3
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +4 -0
- package/package.json +14 -49
- package/src/index.ts +5 -3
- package/dist/MobileSearchAutocomplete.main.js +0 -449
- package/dist/MobileSearchAutocomplete.main.js.map +0 -1
- package/dist/MobileSearchAutocomplete.mjs +0 -444
- package/dist/MobileSearchAutocomplete.module.js +0 -444
- package/dist/MobileSearchAutocomplete.module.js.map +0 -1
- package/dist/SearchAutocomplete.main.js +0 -305
- package/dist/SearchAutocomplete.main.js.map +0 -1
- package/dist/SearchAutocomplete.mjs +0 -300
- package/dist/SearchAutocomplete.module.js +0 -300
- package/dist/SearchAutocomplete.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -9
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -11
- package/dist/ar-AE.module.js +0 -11
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/autocomplete.02db68b2.css +0 -55
- package/dist/autocomplete.02db68b2.css.map +0 -1
- package/dist/autocomplete.102c5c14.css +0 -223
- package/dist/autocomplete.102c5c14.css.map +0 -1
- package/dist/autocomplete.30e64bfb.css +0 -550
- package/dist/autocomplete.30e64bfb.css.map +0 -1
- package/dist/autocomplete.c4adfff6.css +0 -649
- package/dist/autocomplete.c4adfff6.css.map +0 -1
- package/dist/bg-BG.main.js +0 -9
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -11
- package/dist/bg-BG.module.js +0 -11
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -9
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -11
- package/dist/cs-CZ.module.js +0 -11
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -9
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -11
- package/dist/da-DK.module.js +0 -11
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -9
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -11
- package/dist/de-DE.module.js +0 -11
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -9
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -11
- package/dist/el-GR.module.js +0 -11
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -9
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -11
- package/dist/en-US.module.js +0 -11
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -9
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -11
- package/dist/es-ES.module.js +0 -11
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -9
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -11
- package/dist/et-EE.module.js +0 -11
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -9
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -11
- package/dist/fi-FI.module.js +0 -11
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -9
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -11
- package/dist/fr-FR.module.js +0 -11
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -9
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -11
- package/dist/he-IL.module.js +0 -11
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -9
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -11
- package/dist/hr-HR.module.js +0 -11
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -9
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -11
- package/dist/hu-HU.module.js +0 -11
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/inputgroup_vars_css.main.js +0 -86
- package/dist/inputgroup_vars_css.main.js.map +0 -1
- package/dist/inputgroup_vars_css.mjs +0 -88
- package/dist/inputgroup_vars_css.module.js +0 -88
- package/dist/inputgroup_vars_css.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -9
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -11
- package/dist/it-IT.module.js +0 -11
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -9
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -11
- package/dist/ja-JP.module.js +0 -11
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -9
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -11
- package/dist/ko-KR.module.js +0 -11
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -9
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -11
- package/dist/lt-LT.module.js +0 -11
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -9
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -11
- package/dist/lv-LV.module.js +0 -11
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -9
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -11
- package/dist/nb-NO.module.js +0 -11
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -9
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -11
- package/dist/nl-NL.module.js +0 -11
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -9
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -11
- package/dist/pl-PL.module.js +0 -11
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -9
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -11
- package/dist/pt-BR.module.js +0 -11
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -9
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -11
- package/dist/pt-PT.module.js +0 -11
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -9
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -11
- package/dist/ro-RO.module.js +0 -11
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -9
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -11
- package/dist/ru-RU.module.js +0 -11
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/search_vars_css.main.js +0 -53
- package/dist/search_vars_css.main.js.map +0 -1
- package/dist/search_vars_css.mjs +0 -55
- package/dist/search_vars_css.module.js +0 -55
- package/dist/search_vars_css.module.js.map +0 -1
- package/dist/searchautocomplete_css.main.js +0 -38
- package/dist/searchautocomplete_css.main.js.map +0 -1
- package/dist/searchautocomplete_css.mjs +0 -40
- package/dist/searchautocomplete_css.module.js +0 -40
- package/dist/searchautocomplete_css.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -9
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -11
- package/dist/sk-SK.module.js +0 -11
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -9
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -11
- package/dist/sl-SI.module.js +0 -11
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -9
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -11
- package/dist/sr-SP.module.js +0 -11
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -9
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -11
- package/dist/sv-SE.module.js +0 -11
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/textfield_vars_css.main.js +0 -74
- package/dist/textfield_vars_css.main.js.map +0 -1
- package/dist/textfield_vars_css.mjs +0 -76
- package/dist/textfield_vars_css.module.js +0 -76
- package/dist/textfield_vars_css.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -9
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -11
- package/dist/tr-TR.module.js +0 -11
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -13
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -9
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -11
- package/dist/uk-UA.module.js +0 -11
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -9
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -11
- package/dist/zh-CN.module.js +0 -11
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -9
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -11
- package/dist/zh-TW.module.js +0 -11
- package/dist/zh-TW.module.js.map +0 -1
- package/src/MobileSearchAutocomplete.tsx +0 -632
- package/src/SearchAutocomplete.tsx +0 -382
- package/src/searchautocomplete.css +0 -71
|
@@ -1,305 +0,0 @@
|
|
|
1
|
-
var $e32120882142a69f$exports = require("./intlStrings.main.js");
|
|
2
|
-
var $a9f98e219df0b64d$exports = require("./MobileSearchAutocomplete.main.js");
|
|
3
|
-
require("./autocomplete.02db68b2.css");
|
|
4
|
-
var $83da5c2df967875d$exports = require("./searchautocomplete_css.main.js");
|
|
5
|
-
require("./autocomplete.102c5c14.css");
|
|
6
|
-
var $1e139f06a0a4b696$exports = require("./search_vars_css.main.js");
|
|
7
|
-
require("./autocomplete.c4adfff6.css");
|
|
8
|
-
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
9
|
-
require("./autocomplete.30e64bfb.css");
|
|
10
|
-
var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
|
|
11
|
-
var $k6PeR$reactspectrumutils = require("@react-spectrum/utils");
|
|
12
|
-
var $k6PeR$reactspectrumbutton = require("@react-spectrum/button");
|
|
13
|
-
var $k6PeR$reactspectrumlabel = require("@react-spectrum/label");
|
|
14
|
-
var $k6PeR$reactariautils = require("@react-aria/utils");
|
|
15
|
-
var $k6PeR$reactariafocus = require("@react-aria/focus");
|
|
16
|
-
var $k6PeR$reactspectrumlistbox = require("@react-spectrum/listbox");
|
|
17
|
-
var $k6PeR$spectrumiconsuiMagnifier = require("@spectrum-icons/ui/Magnifier");
|
|
18
|
-
var $k6PeR$reactspectrumoverlays = require("@react-spectrum/overlays");
|
|
19
|
-
var $k6PeR$reactspectrumprogress = require("@react-spectrum/progress");
|
|
20
|
-
var $k6PeR$react = require("react");
|
|
21
|
-
var $k6PeR$reactspectrumtextfield = require("@react-spectrum/textfield");
|
|
22
|
-
var $k6PeR$reactstatelycombobox = require("@react-stately/combobox");
|
|
23
|
-
var $k6PeR$reactariai18n = require("@react-aria/i18n");
|
|
24
|
-
var $k6PeR$reactspectrumform = require("@react-spectrum/form");
|
|
25
|
-
var $k6PeR$reactariainteractions = require("@react-aria/interactions");
|
|
26
|
-
var $k6PeR$reactspectrumprovider = require("@react-spectrum/provider");
|
|
27
|
-
var $k6PeR$reactariaautocomplete = require("@react-aria/autocomplete");
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function $parcel$interopDefault(a) {
|
|
31
|
-
return a && a.__esModule ? a.default : a;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function $parcel$export(e, n, v, s) {
|
|
35
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
$parcel$export(module.exports, "SearchAutocomplete", () => $dcf500d58a031ca6$export$dd65332a5b19fa63);
|
|
39
|
-
/*
|
|
40
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
41
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
42
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
43
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
44
|
-
*
|
|
45
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
46
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
47
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
48
|
-
* governing permissions and limitations under the License.
|
|
49
|
-
*/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
function $dcf500d58a031ca6$var$SearchAutocomplete(props, ref) {
|
|
73
|
-
props = (0, $k6PeR$reactspectrumprovider.useProviderProps)(props);
|
|
74
|
-
props = (0, $k6PeR$reactspectrumform.useFormProps)(props);
|
|
75
|
-
let hasWarned = (0, $k6PeR$react.useRef)(false);
|
|
76
|
-
(0, $k6PeR$react.useEffect)(()=>{
|
|
77
|
-
if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
|
|
78
|
-
console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
|
|
79
|
-
hasWarned.current = true;
|
|
80
|
-
}
|
|
81
|
-
}, [
|
|
82
|
-
props.placeholder
|
|
83
|
-
]);
|
|
84
|
-
let isMobile = (0, $k6PeR$reactspectrumutils.useIsMobileDevice)();
|
|
85
|
-
if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
|
|
86
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $a9f98e219df0b64d$exports.MobileSearchAutocomplete), {
|
|
87
|
-
...props,
|
|
88
|
-
menuTrigger: "input",
|
|
89
|
-
ref: ref
|
|
90
|
-
});
|
|
91
|
-
else return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement($dcf500d58a031ca6$var$SearchAutocompleteBase, {
|
|
92
|
-
...props,
|
|
93
|
-
ref: ref
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
function $dcf500d58a031ca6$var$ForwardSearchAutocompleteBase(props, ref) {
|
|
97
|
-
props = (0, $k6PeR$reactspectrumprovider.useProviderProps)(props);
|
|
98
|
-
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
|
|
99
|
-
let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
|
|
100
|
-
let isAsync = loadingState != null;
|
|
101
|
-
let popoverRef = (0, $k6PeR$react.useRef)(null);
|
|
102
|
-
let unwrappedPopoverRef = (0, $k6PeR$reactspectrumutils.useUnwrapDOMRef)(popoverRef);
|
|
103
|
-
let listBoxRef = (0, $k6PeR$react.useRef)(null);
|
|
104
|
-
let inputRef = (0, $k6PeR$react.useRef)(null);
|
|
105
|
-
let domRef = (0, $k6PeR$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
106
|
-
let { contains: contains } = (0, $k6PeR$reactariai18n.useFilter)({
|
|
107
|
-
sensitivity: 'base'
|
|
108
|
-
});
|
|
109
|
-
let state = (0, $k6PeR$reactstatelycombobox.useComboBoxState)({
|
|
110
|
-
...props,
|
|
111
|
-
defaultFilter: contains,
|
|
112
|
-
allowsEmptyCollection: isAsync,
|
|
113
|
-
allowsCustomValue: true,
|
|
114
|
-
onSelectionChange: (key)=>key !== null && onSubmit(null, key),
|
|
115
|
-
selectedKey: undefined,
|
|
116
|
-
defaultSelectedKey: undefined,
|
|
117
|
-
validate: (0, $k6PeR$react.useCallback)((v)=>validate === null || validate === void 0 ? void 0 : validate(v.inputValue), [
|
|
118
|
-
validate
|
|
119
|
-
])
|
|
120
|
-
});
|
|
121
|
-
let layout = (0, $k6PeR$reactspectrumlistbox.useListBoxLayout)();
|
|
122
|
-
let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $k6PeR$reactariaautocomplete.useSearchAutocomplete)({
|
|
123
|
-
...props,
|
|
124
|
-
layoutDelegate: layout,
|
|
125
|
-
popoverRef: unwrappedPopoverRef,
|
|
126
|
-
listBoxRef: listBoxRef,
|
|
127
|
-
inputRef: inputRef,
|
|
128
|
-
menuTrigger: menuTrigger
|
|
129
|
-
}, state);
|
|
130
|
-
// Measure the width of the inputfield to inform the width of the menu (below).
|
|
131
|
-
let [menuWidth, setMenuWidth] = (0, $k6PeR$react.useState)(0);
|
|
132
|
-
let { scale: scale } = (0, $k6PeR$reactspectrumprovider.useProvider)();
|
|
133
|
-
let onResize = (0, $k6PeR$react.useCallback)(()=>{
|
|
134
|
-
if (inputRef.current) {
|
|
135
|
-
let inputWidth = inputRef.current.offsetWidth;
|
|
136
|
-
setMenuWidth(inputWidth);
|
|
137
|
-
}
|
|
138
|
-
}, [
|
|
139
|
-
inputRef,
|
|
140
|
-
setMenuWidth
|
|
141
|
-
]);
|
|
142
|
-
(0, $k6PeR$reactspectrumutils.useResizeObserver)({
|
|
143
|
-
ref: domRef,
|
|
144
|
-
onResize: onResize
|
|
145
|
-
});
|
|
146
|
-
(0, $k6PeR$reactariautils.useLayoutEffect)(onResize, [
|
|
147
|
-
scale,
|
|
148
|
-
onResize
|
|
149
|
-
]);
|
|
150
|
-
let width = isQuiet ? undefined : menuWidth;
|
|
151
|
-
let style = {
|
|
152
|
-
width: customMenuWidth ? (0, $k6PeR$reactspectrumutils.dimensionValue)(customMenuWidth) : width,
|
|
153
|
-
minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
|
|
154
|
-
};
|
|
155
|
-
var _state_focusStrategy;
|
|
156
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, ($parcel$interopDefault($k6PeR$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumlabel.Field), {
|
|
157
|
-
...props,
|
|
158
|
-
descriptionProps: descriptionProps,
|
|
159
|
-
errorMessageProps: errorMessageProps,
|
|
160
|
-
labelProps: labelProps,
|
|
161
|
-
isInvalid: isInvalid,
|
|
162
|
-
validationErrors: validationErrors,
|
|
163
|
-
validationDetails: validationDetails,
|
|
164
|
-
ref: domRef
|
|
165
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement($dcf500d58a031ca6$var$SearchAutocompleteInput, {
|
|
166
|
-
...props,
|
|
167
|
-
isOpen: state.isOpen,
|
|
168
|
-
loadingState: loadingState,
|
|
169
|
-
inputProps: inputProps,
|
|
170
|
-
inputRef: inputRef,
|
|
171
|
-
clearButtonProps: clearButtonProps,
|
|
172
|
-
validationState: props.validationState || (isInvalid ? 'invalid' : undefined)
|
|
173
|
-
})), /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumoverlays.Popover), {
|
|
174
|
-
state: state,
|
|
175
|
-
UNSAFE_style: style,
|
|
176
|
-
UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-popover', {
|
|
177
|
-
'spectrum-InputGroup-popover--quiet': isQuiet
|
|
178
|
-
}),
|
|
179
|
-
ref: popoverRef,
|
|
180
|
-
triggerRef: inputRef,
|
|
181
|
-
placement: `${direction} ${align}`,
|
|
182
|
-
hideArrow: true,
|
|
183
|
-
isNonModal: true,
|
|
184
|
-
shouldFlip: shouldFlip
|
|
185
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumlistbox.ListBoxBase), {
|
|
186
|
-
...listBoxProps,
|
|
187
|
-
ref: listBoxRef,
|
|
188
|
-
disallowEmptySelection: true,
|
|
189
|
-
autoFocus: (_state_focusStrategy = state.focusStrategy) !== null && _state_focusStrategy !== void 0 ? _state_focusStrategy : undefined,
|
|
190
|
-
shouldSelectOnPressUp: true,
|
|
191
|
-
focusOnPointerEnter: true,
|
|
192
|
-
layout: layout,
|
|
193
|
-
state: state,
|
|
194
|
-
shouldUseVirtualFocus: true,
|
|
195
|
-
isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
|
|
196
|
-
showLoadingSpinner: loadingState === 'loadingMore',
|
|
197
|
-
onLoadMore: onLoadMore,
|
|
198
|
-
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement("span", {
|
|
199
|
-
className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'no-results')
|
|
200
|
-
}, stringFormatter.format('noResults'))
|
|
201
|
-
})));
|
|
202
|
-
}
|
|
203
|
-
let $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).forwardRef($dcf500d58a031ca6$var$ForwardSearchAutocompleteBase);
|
|
204
|
-
// any type is because we don't want to call useObjectRef because this is an internal component and we know
|
|
205
|
-
// we are always passing an object ref
|
|
206
|
-
function $dcf500d58a031ca6$var$ForwardSearchAutocompleteInput(props, ref) {
|
|
207
|
-
let searchIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, ($parcel$interopDefault($k6PeR$spectrumiconsuiMagnifier))), {
|
|
208
|
-
"data-testid": "searchicon"
|
|
209
|
-
});
|
|
210
|
-
let { icon: icon = searchIcon, isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, validationState: validationState, inputProps: inputProps, inputRef: inputRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger, clearButtonProps: clearButtonProps } = props;
|
|
211
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $k6PeR$reactariainteractions.useHover)({});
|
|
212
|
-
let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
|
|
213
|
-
let domProps = (0, $k6PeR$reactariautils.filterDOMProps)(props);
|
|
214
|
-
let timeout = (0, $k6PeR$react.useRef)(null);
|
|
215
|
-
let [showLoading, setShowLoading] = (0, $k6PeR$react.useState)(false);
|
|
216
|
-
let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumprogress.ProgressCircle), {
|
|
217
|
-
"aria-label": stringFormatter.format('loading'),
|
|
218
|
-
size: "S",
|
|
219
|
-
isIndeterminate: true,
|
|
220
|
-
UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-circleLoader', (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-circleLoader'), (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-circleLoader'))
|
|
221
|
-
});
|
|
222
|
-
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumbutton.ClearButton), {
|
|
223
|
-
...clearButtonProps,
|
|
224
|
-
preventFocus: true,
|
|
225
|
-
UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-ClearButton'),
|
|
226
|
-
isDisabled: isDisabled
|
|
227
|
-
});
|
|
228
|
-
let isLoading = loadingState === 'loading' || loadingState === 'filtering';
|
|
229
|
-
let inputValue = inputProps.value;
|
|
230
|
-
let lastInputValue = (0, $k6PeR$react.useRef)(inputValue);
|
|
231
|
-
(0, $k6PeR$react.useEffect)(()=>{
|
|
232
|
-
if (isLoading && !showLoading) {
|
|
233
|
-
if (timeout.current === null) timeout.current = setTimeout(()=>{
|
|
234
|
-
setShowLoading(true);
|
|
235
|
-
}, 500);
|
|
236
|
-
// If user is typing, clear the timer and restart since it is a new request
|
|
237
|
-
if (inputValue !== lastInputValue.current) {
|
|
238
|
-
clearTimeout(timeout.current);
|
|
239
|
-
timeout.current = setTimeout(()=>{
|
|
240
|
-
setShowLoading(true);
|
|
241
|
-
}, 500);
|
|
242
|
-
}
|
|
243
|
-
} else if (!isLoading) // If loading is no longer happening, clear any timers and hide the loading circle
|
|
244
|
-
{
|
|
245
|
-
if (timeout.current != null) {
|
|
246
|
-
clearTimeout(timeout.current);
|
|
247
|
-
timeout.current = null;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
lastInputValue.current = inputValue;
|
|
251
|
-
}, [
|
|
252
|
-
isLoading,
|
|
253
|
-
showLoading,
|
|
254
|
-
inputValue
|
|
255
|
-
]);
|
|
256
|
-
let [prevIsLoading, setPrevIsLoading] = (0, $k6PeR$react.useState)(isLoading);
|
|
257
|
-
if (prevIsLoading !== isLoading && !isLoading) {
|
|
258
|
-
setShowLoading(false);
|
|
259
|
-
setPrevIsLoading(isLoading);
|
|
260
|
-
}
|
|
261
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactariafocus.FocusRing), {
|
|
262
|
-
within: true,
|
|
263
|
-
isTextInput: true,
|
|
264
|
-
focusClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'is-focused'),
|
|
265
|
-
focusRingClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'focus-ring'),
|
|
266
|
-
autoFocus: autoFocus
|
|
267
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement("div", {
|
|
268
|
-
...hoverProps,
|
|
269
|
-
ref: ref,
|
|
270
|
-
style: style,
|
|
271
|
-
className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup', {
|
|
272
|
-
'spectrum-InputGroup--quiet': isQuiet,
|
|
273
|
-
'is-disabled': isDisabled,
|
|
274
|
-
'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
|
|
275
|
-
'is-hovered': isHovered
|
|
276
|
-
}, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'searchautocomplete'), className)
|
|
277
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumtextfield.TextFieldBase), {
|
|
278
|
-
...domProps,
|
|
279
|
-
inputProps: inputProps,
|
|
280
|
-
inputRef: inputRef,
|
|
281
|
-
UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search', 'spectrum-Search--loadable', 'spectrum-Textfield', {
|
|
282
|
-
'is-disabled': isDisabled,
|
|
283
|
-
'is-quiet': isQuiet,
|
|
284
|
-
'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
|
|
285
|
-
'spectrum-Search--valid': validationState === 'valid' && !isDisabled
|
|
286
|
-
}, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field')),
|
|
287
|
-
inputClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-input'),
|
|
288
|
-
validationIconClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-validationIcon'),
|
|
289
|
-
isDisabled: isDisabled,
|
|
290
|
-
isQuiet: isQuiet,
|
|
291
|
-
validationState: validationState,
|
|
292
|
-
isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
|
|
293
|
-
loadingIndicator: loadingState != null ? loadingCircle : undefined,
|
|
294
|
-
icon: icon,
|
|
295
|
-
wrapperChildren: (inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined,
|
|
296
|
-
disableFocusRing: true
|
|
297
|
-
})));
|
|
298
|
-
}
|
|
299
|
-
let $dcf500d58a031ca6$var$SearchAutocompleteInput = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).forwardRef($dcf500d58a031ca6$var$ForwardSearchAutocompleteInput);
|
|
300
|
-
/**
|
|
301
|
-
* A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.
|
|
302
|
-
*/ let $dcf500d58a031ca6$export$dd65332a5b19fa63 = /*#__PURE__*/ (0, $k6PeR$react.forwardRef)($dcf500d58a031ca6$var$SearchAutocomplete);
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
//# sourceMappingURL=SearchAutocomplete.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaButtonProps} from '@react-types/button';\nimport {classNames, dimensionValue, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps, useLayoutEffect} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport Magnifier from '@spectrum-icons/ui/Magnifier';\nimport {MobileSearchAutocomplete} from './MobileSearchAutocomplete';\nimport {Popover} from '@react-spectrum/overlays';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n forwardRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport searchAutocompleteStyles from './searchautocomplete.css';\nimport searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useSearchAutocomplete} from '@react-aria/autocomplete';\n\nfunction SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');\n hasWarned.current = true;\n }\n }, [props.placeholder]);\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile searchwithin\n return <MobileSearchAutocomplete {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <SearchAutocompleteBase {...props} ref={ref} />;\n }\n}\n\nfunction ForwardSearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n menuWidth: customMenuWidth,\n loadingState,\n onLoadMore,\n onSubmit = () => {},\n validate\n } = props;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState(\n {\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync,\n allowsCustomValue: true,\n onSelectionChange: (key) => key !== null && onSubmit(null, key),\n selectedKey: undefined,\n defaultSelectedKey: undefined,\n validate: useCallback(v => validate?.(v.inputValue), [validate])\n }\n );\n let layout = useListBoxLayout();\n\n let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSearchAutocomplete(\n {\n ...props,\n layoutDelegate: layout,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef,\n menuTrigger\n },\n state\n );\n\n // Measure the width of the inputfield to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number>(0);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (inputRef.current) {\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(inputWidth);\n }\n }, [inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n };\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n labelProps={labelProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n ref={domRef}>\n <SearchAutocompleteInput\n {...props}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n clearButtonProps={clearButtonProps}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)} />\n </Field>\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n ref={popoverRef}\n triggerRef={inputRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy ?? undefined}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() => isAsync && (\n <span className={classNames(searchAutocompleteStyles, 'no-results')}>\n {stringFormatter.format('noResults')}\n </span>\n )} />\n </Popover>\n </>\n );\n}\n\nlet SearchAutocompleteBase = React.forwardRef(ForwardSearchAutocompleteBase) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\n\ninterface SearchAutocompleteInputProps<T> extends SpectrumSearchAutocompleteProps<T> {\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | null>,\n style?: React.CSSProperties,\n className?: string,\n isOpen?: boolean,\n clearButtonProps: AriaButtonProps\n}\n\n// any type is because we don't want to call useObjectRef because this is an internal component and we know\n// we are always passing an object ref\nfunction ForwardSearchAutocompleteInput<T>(props: SearchAutocompleteInputProps<T>, ref: any) {\n let searchIcon = (\n <Magnifier data-testid=\"searchicon\" />\n );\n\n let {\n icon = searchIcon,\n isQuiet,\n isDisabled,\n isReadOnly,\n validationState,\n inputProps,\n inputRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger,\n clearButtonProps\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n let domProps = filterDOMProps(props);\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(\n styles,\n 'spectrum-InputGroup-input-circleLoader'\n ),\n classNames(\n searchStyles,\n 'spectrum-Search-circleLoader'\n )\n )} />\n );\n\n let clearButton = (\n <ClearButton\n {...clearButtonProps}\n preventFocus\n UNSAFE_className={\n classNames(\n searchStyles,\n 'spectrum-ClearButton'\n )\n }\n isDisabled={isDisabled} />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n // If loading is no longer happening, clear any timers and hide the loading circle\n if (timeout.current != null) {\n clearTimeout(timeout.current);\n timeout.current = null;\n }\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\n\n return (\n (<FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={\n classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n classNames(\n searchAutocompleteStyles,\n 'searchautocomplete'\n ),\n className\n )\n }>\n <TextFieldBase\n {...domProps}\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={\n classNames(\n searchStyles,\n 'spectrum-Search',\n 'spectrum-Search--loadable',\n 'spectrum-Textfield',\n {\n 'is-disabled': isDisabled,\n 'is-quiet': isQuiet,\n 'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n 'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n },\n classNames(\n styles,\n 'spectrum-InputGroup-field'\n )\n )\n }\n inputClassName={classNames(searchStyles, 'spectrum-Search-input')}\n validationIconClassName={\n classNames(\n searchStyles,\n 'spectrum-Search-validationIcon'\n )\n }\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n icon={icon}\n wrapperChildren={(inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined}\n disableFocusRing />\n </div>\n </FocusRing>)\n );\n}\n\nlet SearchAutocompleteInput = React.forwardRef(ForwardSearchAutocompleteInput) as <T>(props: SearchAutocompleteInputProps<T> & {ref?: any}) => ReactElement;\n\n\n/**\n * A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.\n */\nlet ForwardSearchAutocomplete = forwardRef(SearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {ForwardSearchAutocomplete as SearchAutocomplete};\n"],"names":[],"version":3,"file":"SearchAutocomplete.main.js.map"}
|
|
@@ -1,300 +0,0 @@
|
|
|
1
|
-
import $fLcex$intlStringsmodulejs from "./intlStrings.mjs";
|
|
2
|
-
import {MobileSearchAutocomplete as $c940f54e16bafef5$export$e7a90f7d6b078162} from "./MobileSearchAutocomplete.mjs";
|
|
3
|
-
import "./autocomplete.02db68b2.css";
|
|
4
|
-
import $fLcex$searchautocomplete_cssmodulejs from "./searchautocomplete_css.mjs";
|
|
5
|
-
import "./autocomplete.102c5c14.css";
|
|
6
|
-
import $fLcex$search_vars_cssmodulejs from "./search_vars_css.mjs";
|
|
7
|
-
import "./autocomplete.c4adfff6.css";
|
|
8
|
-
import $fLcex$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
9
|
-
import "./autocomplete.30e64bfb.css";
|
|
10
|
-
import $fLcex$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
|
|
11
|
-
import {useIsMobileDevice as $fLcex$useIsMobileDevice, useUnwrapDOMRef as $fLcex$useUnwrapDOMRef, useFocusableRef as $fLcex$useFocusableRef, useResizeObserver as $fLcex$useResizeObserver, dimensionValue as $fLcex$dimensionValue, classNames as $fLcex$classNames} from "@react-spectrum/utils";
|
|
12
|
-
import {ClearButton as $fLcex$ClearButton} from "@react-spectrum/button";
|
|
13
|
-
import {Field as $fLcex$Field} from "@react-spectrum/label";
|
|
14
|
-
import {useLayoutEffect as $fLcex$useLayoutEffect, filterDOMProps as $fLcex$filterDOMProps} from "@react-aria/utils";
|
|
15
|
-
import {FocusRing as $fLcex$FocusRing} from "@react-aria/focus";
|
|
16
|
-
import {useListBoxLayout as $fLcex$useListBoxLayout, ListBoxBase as $fLcex$ListBoxBase} from "@react-spectrum/listbox";
|
|
17
|
-
import $fLcex$spectrumiconsuiMagnifier from "@spectrum-icons/ui/Magnifier";
|
|
18
|
-
import {Popover as $fLcex$Popover} from "@react-spectrum/overlays";
|
|
19
|
-
import {ProgressCircle as $fLcex$ProgressCircle} from "@react-spectrum/progress";
|
|
20
|
-
import $fLcex$react, {useRef as $fLcex$useRef, useEffect as $fLcex$useEffect, useCallback as $fLcex$useCallback, useState as $fLcex$useState, forwardRef as $fLcex$forwardRef} from "react";
|
|
21
|
-
import {TextFieldBase as $fLcex$TextFieldBase} from "@react-spectrum/textfield";
|
|
22
|
-
import {useComboBoxState as $fLcex$useComboBoxState} from "@react-stately/combobox";
|
|
23
|
-
import {useLocalizedStringFormatter as $fLcex$useLocalizedStringFormatter, useFilter as $fLcex$useFilter} from "@react-aria/i18n";
|
|
24
|
-
import {useFormProps as $fLcex$useFormProps} from "@react-spectrum/form";
|
|
25
|
-
import {useHover as $fLcex$useHover} from "@react-aria/interactions";
|
|
26
|
-
import {useProviderProps as $fLcex$useProviderProps, useProvider as $fLcex$useProvider} from "@react-spectrum/provider";
|
|
27
|
-
import {useSearchAutocomplete as $fLcex$useSearchAutocomplete} from "@react-aria/autocomplete";
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function $parcel$interopDefault(a) {
|
|
31
|
-
return a && a.__esModule ? a.default : a;
|
|
32
|
-
}
|
|
33
|
-
/*
|
|
34
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
35
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
36
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
37
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
38
|
-
*
|
|
39
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
40
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
41
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
42
|
-
* governing permissions and limitations under the License.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
function $f3f3b62273a2d260$var$SearchAutocomplete(props, ref) {
|
|
67
|
-
props = (0, $fLcex$useProviderProps)(props);
|
|
68
|
-
props = (0, $fLcex$useFormProps)(props);
|
|
69
|
-
let hasWarned = (0, $fLcex$useRef)(false);
|
|
70
|
-
(0, $fLcex$useEffect)(()=>{
|
|
71
|
-
if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
|
|
72
|
-
console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
|
|
73
|
-
hasWarned.current = true;
|
|
74
|
-
}
|
|
75
|
-
}, [
|
|
76
|
-
props.placeholder
|
|
77
|
-
]);
|
|
78
|
-
let isMobile = (0, $fLcex$useIsMobileDevice)();
|
|
79
|
-
if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
|
|
80
|
-
return /*#__PURE__*/ (0, $fLcex$react).createElement((0, $c940f54e16bafef5$export$e7a90f7d6b078162), {
|
|
81
|
-
...props,
|
|
82
|
-
menuTrigger: "input",
|
|
83
|
-
ref: ref
|
|
84
|
-
});
|
|
85
|
-
else return /*#__PURE__*/ (0, $fLcex$react).createElement($f3f3b62273a2d260$var$SearchAutocompleteBase, {
|
|
86
|
-
...props,
|
|
87
|
-
ref: ref
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
function $f3f3b62273a2d260$var$ForwardSearchAutocompleteBase(props, ref) {
|
|
91
|
-
props = (0, $fLcex$useProviderProps)(props);
|
|
92
|
-
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
|
|
93
|
-
let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), '@react-spectrum/autocomplete');
|
|
94
|
-
let isAsync = loadingState != null;
|
|
95
|
-
let popoverRef = (0, $fLcex$useRef)(null);
|
|
96
|
-
let unwrappedPopoverRef = (0, $fLcex$useUnwrapDOMRef)(popoverRef);
|
|
97
|
-
let listBoxRef = (0, $fLcex$useRef)(null);
|
|
98
|
-
let inputRef = (0, $fLcex$useRef)(null);
|
|
99
|
-
let domRef = (0, $fLcex$useFocusableRef)(ref, inputRef);
|
|
100
|
-
let { contains: contains } = (0, $fLcex$useFilter)({
|
|
101
|
-
sensitivity: 'base'
|
|
102
|
-
});
|
|
103
|
-
let state = (0, $fLcex$useComboBoxState)({
|
|
104
|
-
...props,
|
|
105
|
-
defaultFilter: contains,
|
|
106
|
-
allowsEmptyCollection: isAsync,
|
|
107
|
-
allowsCustomValue: true,
|
|
108
|
-
onSelectionChange: (key)=>key !== null && onSubmit(null, key),
|
|
109
|
-
selectedKey: undefined,
|
|
110
|
-
defaultSelectedKey: undefined,
|
|
111
|
-
validate: (0, $fLcex$useCallback)((v)=>validate === null || validate === void 0 ? void 0 : validate(v.inputValue), [
|
|
112
|
-
validate
|
|
113
|
-
])
|
|
114
|
-
});
|
|
115
|
-
let layout = (0, $fLcex$useListBoxLayout)();
|
|
116
|
-
let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $fLcex$useSearchAutocomplete)({
|
|
117
|
-
...props,
|
|
118
|
-
layoutDelegate: layout,
|
|
119
|
-
popoverRef: unwrappedPopoverRef,
|
|
120
|
-
listBoxRef: listBoxRef,
|
|
121
|
-
inputRef: inputRef,
|
|
122
|
-
menuTrigger: menuTrigger
|
|
123
|
-
}, state);
|
|
124
|
-
// Measure the width of the inputfield to inform the width of the menu (below).
|
|
125
|
-
let [menuWidth, setMenuWidth] = (0, $fLcex$useState)(0);
|
|
126
|
-
let { scale: scale } = (0, $fLcex$useProvider)();
|
|
127
|
-
let onResize = (0, $fLcex$useCallback)(()=>{
|
|
128
|
-
if (inputRef.current) {
|
|
129
|
-
let inputWidth = inputRef.current.offsetWidth;
|
|
130
|
-
setMenuWidth(inputWidth);
|
|
131
|
-
}
|
|
132
|
-
}, [
|
|
133
|
-
inputRef,
|
|
134
|
-
setMenuWidth
|
|
135
|
-
]);
|
|
136
|
-
(0, $fLcex$useResizeObserver)({
|
|
137
|
-
ref: domRef,
|
|
138
|
-
onResize: onResize
|
|
139
|
-
});
|
|
140
|
-
(0, $fLcex$useLayoutEffect)(onResize, [
|
|
141
|
-
scale,
|
|
142
|
-
onResize
|
|
143
|
-
]);
|
|
144
|
-
let width = isQuiet ? undefined : menuWidth;
|
|
145
|
-
let style = {
|
|
146
|
-
width: customMenuWidth ? (0, $fLcex$dimensionValue)(customMenuWidth) : width,
|
|
147
|
-
minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
|
|
148
|
-
};
|
|
149
|
-
var _state_focusStrategy;
|
|
150
|
-
return /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$react).Fragment, null, /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$Field), {
|
|
151
|
-
...props,
|
|
152
|
-
descriptionProps: descriptionProps,
|
|
153
|
-
errorMessageProps: errorMessageProps,
|
|
154
|
-
labelProps: labelProps,
|
|
155
|
-
isInvalid: isInvalid,
|
|
156
|
-
validationErrors: validationErrors,
|
|
157
|
-
validationDetails: validationDetails,
|
|
158
|
-
ref: domRef
|
|
159
|
-
}, /*#__PURE__*/ (0, $fLcex$react).createElement($f3f3b62273a2d260$var$SearchAutocompleteInput, {
|
|
160
|
-
...props,
|
|
161
|
-
isOpen: state.isOpen,
|
|
162
|
-
loadingState: loadingState,
|
|
163
|
-
inputProps: inputProps,
|
|
164
|
-
inputRef: inputRef,
|
|
165
|
-
clearButtonProps: clearButtonProps,
|
|
166
|
-
validationState: props.validationState || (isInvalid ? 'invalid' : undefined)
|
|
167
|
-
})), /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$Popover), {
|
|
168
|
-
state: state,
|
|
169
|
-
UNSAFE_style: style,
|
|
170
|
-
UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-popover', {
|
|
171
|
-
'spectrum-InputGroup-popover--quiet': isQuiet
|
|
172
|
-
}),
|
|
173
|
-
ref: popoverRef,
|
|
174
|
-
triggerRef: inputRef,
|
|
175
|
-
placement: `${direction} ${align}`,
|
|
176
|
-
hideArrow: true,
|
|
177
|
-
isNonModal: true,
|
|
178
|
-
shouldFlip: shouldFlip
|
|
179
|
-
}, /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$ListBoxBase), {
|
|
180
|
-
...listBoxProps,
|
|
181
|
-
ref: listBoxRef,
|
|
182
|
-
disallowEmptySelection: true,
|
|
183
|
-
autoFocus: (_state_focusStrategy = state.focusStrategy) !== null && _state_focusStrategy !== void 0 ? _state_focusStrategy : undefined,
|
|
184
|
-
shouldSelectOnPressUp: true,
|
|
185
|
-
focusOnPointerEnter: true,
|
|
186
|
-
layout: layout,
|
|
187
|
-
state: state,
|
|
188
|
-
shouldUseVirtualFocus: true,
|
|
189
|
-
isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
|
|
190
|
-
showLoadingSpinner: loadingState === 'loadingMore',
|
|
191
|
-
onLoadMore: onLoadMore,
|
|
192
|
-
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, $fLcex$react).createElement("span", {
|
|
193
|
-
className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), 'no-results')
|
|
194
|
-
}, stringFormatter.format('noResults'))
|
|
195
|
-
})));
|
|
196
|
-
}
|
|
197
|
-
let $f3f3b62273a2d260$var$SearchAutocompleteBase = /*#__PURE__*/ (0, $fLcex$react).forwardRef($f3f3b62273a2d260$var$ForwardSearchAutocompleteBase);
|
|
198
|
-
// any type is because we don't want to call useObjectRef because this is an internal component and we know
|
|
199
|
-
// we are always passing an object ref
|
|
200
|
-
function $f3f3b62273a2d260$var$ForwardSearchAutocompleteInput(props, ref) {
|
|
201
|
-
let searchIcon = /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$spectrumiconsuiMagnifier), {
|
|
202
|
-
"data-testid": "searchicon"
|
|
203
|
-
});
|
|
204
|
-
let { icon: icon = searchIcon, isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, validationState: validationState, inputProps: inputProps, inputRef: inputRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger, clearButtonProps: clearButtonProps } = props;
|
|
205
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fLcex$useHover)({});
|
|
206
|
-
let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), '@react-spectrum/autocomplete');
|
|
207
|
-
let domProps = (0, $fLcex$filterDOMProps)(props);
|
|
208
|
-
let timeout = (0, $fLcex$useRef)(null);
|
|
209
|
-
let [showLoading, setShowLoading] = (0, $fLcex$useState)(false);
|
|
210
|
-
let loadingCircle = /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$ProgressCircle), {
|
|
211
|
-
"aria-label": stringFormatter.format('loading'),
|
|
212
|
-
size: "S",
|
|
213
|
-
isIndeterminate: true,
|
|
214
|
-
UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$textfield_vars_cssmodulejs))), 'spectrum-Textfield-circleLoader', (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-circleLoader'), (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-circleLoader'))
|
|
215
|
-
});
|
|
216
|
-
let clearButton = /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$ClearButton), {
|
|
217
|
-
...clearButtonProps,
|
|
218
|
-
preventFocus: true,
|
|
219
|
-
UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-ClearButton'),
|
|
220
|
-
isDisabled: isDisabled
|
|
221
|
-
});
|
|
222
|
-
let isLoading = loadingState === 'loading' || loadingState === 'filtering';
|
|
223
|
-
let inputValue = inputProps.value;
|
|
224
|
-
let lastInputValue = (0, $fLcex$useRef)(inputValue);
|
|
225
|
-
(0, $fLcex$useEffect)(()=>{
|
|
226
|
-
if (isLoading && !showLoading) {
|
|
227
|
-
if (timeout.current === null) timeout.current = setTimeout(()=>{
|
|
228
|
-
setShowLoading(true);
|
|
229
|
-
}, 500);
|
|
230
|
-
// If user is typing, clear the timer and restart since it is a new request
|
|
231
|
-
if (inputValue !== lastInputValue.current) {
|
|
232
|
-
clearTimeout(timeout.current);
|
|
233
|
-
timeout.current = setTimeout(()=>{
|
|
234
|
-
setShowLoading(true);
|
|
235
|
-
}, 500);
|
|
236
|
-
}
|
|
237
|
-
} else if (!isLoading) // If loading is no longer happening, clear any timers and hide the loading circle
|
|
238
|
-
{
|
|
239
|
-
if (timeout.current != null) {
|
|
240
|
-
clearTimeout(timeout.current);
|
|
241
|
-
timeout.current = null;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
lastInputValue.current = inputValue;
|
|
245
|
-
}, [
|
|
246
|
-
isLoading,
|
|
247
|
-
showLoading,
|
|
248
|
-
inputValue
|
|
249
|
-
]);
|
|
250
|
-
let [prevIsLoading, setPrevIsLoading] = (0, $fLcex$useState)(isLoading);
|
|
251
|
-
if (prevIsLoading !== isLoading && !isLoading) {
|
|
252
|
-
setShowLoading(false);
|
|
253
|
-
setPrevIsLoading(isLoading);
|
|
254
|
-
}
|
|
255
|
-
return /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$FocusRing), {
|
|
256
|
-
within: true,
|
|
257
|
-
isTextInput: true,
|
|
258
|
-
focusClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'is-focused'),
|
|
259
|
-
focusRingClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'focus-ring'),
|
|
260
|
-
autoFocus: autoFocus
|
|
261
|
-
}, /*#__PURE__*/ (0, $fLcex$react).createElement("div", {
|
|
262
|
-
...hoverProps,
|
|
263
|
-
ref: ref,
|
|
264
|
-
style: style,
|
|
265
|
-
className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
|
|
266
|
-
'spectrum-InputGroup--quiet': isQuiet,
|
|
267
|
-
'is-disabled': isDisabled,
|
|
268
|
-
'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
|
|
269
|
-
'is-hovered': isHovered
|
|
270
|
-
}, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), 'searchautocomplete'), className)
|
|
271
|
-
}, /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$TextFieldBase), {
|
|
272
|
-
...domProps,
|
|
273
|
-
inputProps: inputProps,
|
|
274
|
-
inputRef: inputRef,
|
|
275
|
-
UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search', 'spectrum-Search--loadable', 'spectrum-Textfield', {
|
|
276
|
-
'is-disabled': isDisabled,
|
|
277
|
-
'is-quiet': isQuiet,
|
|
278
|
-
'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
|
|
279
|
-
'spectrum-Search--valid': validationState === 'valid' && !isDisabled
|
|
280
|
-
}, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field')),
|
|
281
|
-
inputClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-input'),
|
|
282
|
-
validationIconClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-validationIcon'),
|
|
283
|
-
isDisabled: isDisabled,
|
|
284
|
-
isQuiet: isQuiet,
|
|
285
|
-
validationState: validationState,
|
|
286
|
-
isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
|
|
287
|
-
loadingIndicator: loadingState != null ? loadingCircle : undefined,
|
|
288
|
-
icon: icon,
|
|
289
|
-
wrapperChildren: (inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined,
|
|
290
|
-
disableFocusRing: true
|
|
291
|
-
})));
|
|
292
|
-
}
|
|
293
|
-
let $f3f3b62273a2d260$var$SearchAutocompleteInput = /*#__PURE__*/ (0, $fLcex$react).forwardRef($f3f3b62273a2d260$var$ForwardSearchAutocompleteInput);
|
|
294
|
-
/**
|
|
295
|
-
* A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.
|
|
296
|
-
*/ let $f3f3b62273a2d260$export$dd65332a5b19fa63 = /*#__PURE__*/ (0, $fLcex$forwardRef)($f3f3b62273a2d260$var$SearchAutocomplete);
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
export {$f3f3b62273a2d260$export$dd65332a5b19fa63 as SearchAutocomplete};
|
|
300
|
-
//# sourceMappingURL=SearchAutocomplete.module.js.map
|