@react-spectrum/autocomplete 3.0.0-alpha.5 → 3.0.0-alpha.51

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.
Files changed (226) hide show
  1. package/dist/MobileSearchAutocomplete.main.js +449 -0
  2. package/dist/MobileSearchAutocomplete.main.js.map +1 -0
  3. package/dist/MobileSearchAutocomplete.mjs +444 -0
  4. package/dist/MobileSearchAutocomplete.module.js +444 -0
  5. package/dist/MobileSearchAutocomplete.module.js.map +1 -0
  6. package/dist/SearchAutocomplete.main.js +305 -0
  7. package/dist/SearchAutocomplete.main.js.map +1 -0
  8. package/dist/SearchAutocomplete.mjs +300 -0
  9. package/dist/SearchAutocomplete.module.js +300 -0
  10. package/dist/SearchAutocomplete.module.js.map +1 -0
  11. package/dist/ar-AE.main.js +9 -0
  12. package/dist/ar-AE.main.js.map +1 -0
  13. package/dist/ar-AE.mjs +11 -0
  14. package/dist/ar-AE.module.js +11 -0
  15. package/dist/ar-AE.module.js.map +1 -0
  16. package/dist/autocomplete.02db68b2.css +55 -0
  17. package/dist/autocomplete.02db68b2.css.map +1 -0
  18. package/dist/autocomplete.102c5c14.css +223 -0
  19. package/dist/autocomplete.102c5c14.css.map +1 -0
  20. package/dist/autocomplete.30e64bfb.css +550 -0
  21. package/dist/autocomplete.30e64bfb.css.map +1 -0
  22. package/dist/autocomplete.c4adfff6.css +649 -0
  23. package/dist/autocomplete.c4adfff6.css.map +1 -0
  24. package/dist/bg-BG.main.js +9 -0
  25. package/dist/bg-BG.main.js.map +1 -0
  26. package/dist/bg-BG.mjs +11 -0
  27. package/dist/bg-BG.module.js +11 -0
  28. package/dist/bg-BG.module.js.map +1 -0
  29. package/dist/cs-CZ.main.js +9 -0
  30. package/dist/cs-CZ.main.js.map +1 -0
  31. package/dist/cs-CZ.mjs +11 -0
  32. package/dist/cs-CZ.module.js +11 -0
  33. package/dist/cs-CZ.module.js.map +1 -0
  34. package/dist/da-DK.main.js +9 -0
  35. package/dist/da-DK.main.js.map +1 -0
  36. package/dist/da-DK.mjs +11 -0
  37. package/dist/da-DK.module.js +11 -0
  38. package/dist/da-DK.module.js.map +1 -0
  39. package/dist/de-DE.main.js +9 -0
  40. package/dist/de-DE.main.js.map +1 -0
  41. package/dist/de-DE.mjs +11 -0
  42. package/dist/de-DE.module.js +11 -0
  43. package/dist/de-DE.module.js.map +1 -0
  44. package/dist/el-GR.main.js +9 -0
  45. package/dist/el-GR.main.js.map +1 -0
  46. package/dist/el-GR.mjs +11 -0
  47. package/dist/el-GR.module.js +11 -0
  48. package/dist/el-GR.module.js.map +1 -0
  49. package/dist/en-US.main.js +9 -0
  50. package/dist/en-US.main.js.map +1 -0
  51. package/dist/en-US.mjs +11 -0
  52. package/dist/en-US.module.js +11 -0
  53. package/dist/en-US.module.js.map +1 -0
  54. package/dist/es-ES.main.js +9 -0
  55. package/dist/es-ES.main.js.map +1 -0
  56. package/dist/es-ES.mjs +11 -0
  57. package/dist/es-ES.module.js +11 -0
  58. package/dist/es-ES.module.js.map +1 -0
  59. package/dist/et-EE.main.js +9 -0
  60. package/dist/et-EE.main.js.map +1 -0
  61. package/dist/et-EE.mjs +11 -0
  62. package/dist/et-EE.module.js +11 -0
  63. package/dist/et-EE.module.js.map +1 -0
  64. package/dist/fi-FI.main.js +9 -0
  65. package/dist/fi-FI.main.js.map +1 -0
  66. package/dist/fi-FI.mjs +11 -0
  67. package/dist/fi-FI.module.js +11 -0
  68. package/dist/fi-FI.module.js.map +1 -0
  69. package/dist/fr-FR.main.js +9 -0
  70. package/dist/fr-FR.main.js.map +1 -0
  71. package/dist/fr-FR.mjs +11 -0
  72. package/dist/fr-FR.module.js +11 -0
  73. package/dist/fr-FR.module.js.map +1 -0
  74. package/dist/he-IL.main.js +9 -0
  75. package/dist/he-IL.main.js.map +1 -0
  76. package/dist/he-IL.mjs +11 -0
  77. package/dist/he-IL.module.js +11 -0
  78. package/dist/he-IL.module.js.map +1 -0
  79. package/dist/hr-HR.main.js +9 -0
  80. package/dist/hr-HR.main.js.map +1 -0
  81. package/dist/hr-HR.mjs +11 -0
  82. package/dist/hr-HR.module.js +11 -0
  83. package/dist/hr-HR.module.js.map +1 -0
  84. package/dist/hu-HU.main.js +9 -0
  85. package/dist/hu-HU.main.js.map +1 -0
  86. package/dist/hu-HU.mjs +11 -0
  87. package/dist/hu-HU.module.js +11 -0
  88. package/dist/hu-HU.module.js.map +1 -0
  89. package/dist/import.mjs +20 -0
  90. package/dist/inputgroup_vars_css.main.js +86 -0
  91. package/dist/inputgroup_vars_css.main.js.map +1 -0
  92. package/dist/inputgroup_vars_css.mjs +88 -0
  93. package/dist/inputgroup_vars_css.module.js +88 -0
  94. package/dist/inputgroup_vars_css.module.js.map +1 -0
  95. package/dist/intlStrings.main.js +108 -0
  96. package/dist/intlStrings.main.js.map +1 -0
  97. package/dist/intlStrings.mjs +110 -0
  98. package/dist/intlStrings.module.js +110 -0
  99. package/dist/intlStrings.module.js.map +1 -0
  100. package/dist/it-IT.main.js +9 -0
  101. package/dist/it-IT.main.js.map +1 -0
  102. package/dist/it-IT.mjs +11 -0
  103. package/dist/it-IT.module.js +11 -0
  104. package/dist/it-IT.module.js.map +1 -0
  105. package/dist/ja-JP.main.js +9 -0
  106. package/dist/ja-JP.main.js.map +1 -0
  107. package/dist/ja-JP.mjs +11 -0
  108. package/dist/ja-JP.module.js +11 -0
  109. package/dist/ja-JP.module.js.map +1 -0
  110. package/dist/ko-KR.main.js +9 -0
  111. package/dist/ko-KR.main.js.map +1 -0
  112. package/dist/ko-KR.mjs +11 -0
  113. package/dist/ko-KR.module.js +11 -0
  114. package/dist/ko-KR.module.js.map +1 -0
  115. package/dist/lt-LT.main.js +9 -0
  116. package/dist/lt-LT.main.js.map +1 -0
  117. package/dist/lt-LT.mjs +11 -0
  118. package/dist/lt-LT.module.js +11 -0
  119. package/dist/lt-LT.module.js.map +1 -0
  120. package/dist/lv-LV.main.js +9 -0
  121. package/dist/lv-LV.main.js.map +1 -0
  122. package/dist/lv-LV.mjs +11 -0
  123. package/dist/lv-LV.module.js +11 -0
  124. package/dist/lv-LV.module.js.map +1 -0
  125. package/dist/main.js +14 -997
  126. package/dist/main.js.map +1 -1
  127. package/dist/module.js +13 -984
  128. package/dist/module.js.map +1 -1
  129. package/dist/nb-NO.main.js +9 -0
  130. package/dist/nb-NO.main.js.map +1 -0
  131. package/dist/nb-NO.mjs +11 -0
  132. package/dist/nb-NO.module.js +11 -0
  133. package/dist/nb-NO.module.js.map +1 -0
  134. package/dist/nl-NL.main.js +9 -0
  135. package/dist/nl-NL.main.js.map +1 -0
  136. package/dist/nl-NL.mjs +11 -0
  137. package/dist/nl-NL.module.js +11 -0
  138. package/dist/nl-NL.module.js.map +1 -0
  139. package/dist/pl-PL.main.js +9 -0
  140. package/dist/pl-PL.main.js.map +1 -0
  141. package/dist/pl-PL.mjs +11 -0
  142. package/dist/pl-PL.module.js +11 -0
  143. package/dist/pl-PL.module.js.map +1 -0
  144. package/dist/pt-BR.main.js +9 -0
  145. package/dist/pt-BR.main.js.map +1 -0
  146. package/dist/pt-BR.mjs +11 -0
  147. package/dist/pt-BR.module.js +11 -0
  148. package/dist/pt-BR.module.js.map +1 -0
  149. package/dist/pt-PT.main.js +9 -0
  150. package/dist/pt-PT.main.js.map +1 -0
  151. package/dist/pt-PT.mjs +11 -0
  152. package/dist/pt-PT.module.js +11 -0
  153. package/dist/pt-PT.module.js.map +1 -0
  154. package/dist/ro-RO.main.js +9 -0
  155. package/dist/ro-RO.main.js.map +1 -0
  156. package/dist/ro-RO.mjs +11 -0
  157. package/dist/ro-RO.module.js +11 -0
  158. package/dist/ro-RO.module.js.map +1 -0
  159. package/dist/ru-RU.main.js +9 -0
  160. package/dist/ru-RU.main.js.map +1 -0
  161. package/dist/ru-RU.mjs +11 -0
  162. package/dist/ru-RU.module.js +11 -0
  163. package/dist/ru-RU.module.js.map +1 -0
  164. package/dist/search_vars_css.main.js +53 -0
  165. package/dist/search_vars_css.main.js.map +1 -0
  166. package/dist/search_vars_css.mjs +55 -0
  167. package/dist/search_vars_css.module.js +55 -0
  168. package/dist/search_vars_css.module.js.map +1 -0
  169. package/dist/searchautocomplete_css.main.js +38 -0
  170. package/dist/searchautocomplete_css.main.js.map +1 -0
  171. package/dist/searchautocomplete_css.mjs +40 -0
  172. package/dist/searchautocomplete_css.module.js +40 -0
  173. package/dist/searchautocomplete_css.module.js.map +1 -0
  174. package/dist/sk-SK.main.js +9 -0
  175. package/dist/sk-SK.main.js.map +1 -0
  176. package/dist/sk-SK.mjs +11 -0
  177. package/dist/sk-SK.module.js +11 -0
  178. package/dist/sk-SK.module.js.map +1 -0
  179. package/dist/sl-SI.main.js +9 -0
  180. package/dist/sl-SI.main.js.map +1 -0
  181. package/dist/sl-SI.mjs +11 -0
  182. package/dist/sl-SI.module.js +11 -0
  183. package/dist/sl-SI.module.js.map +1 -0
  184. package/dist/sr-SP.main.js +9 -0
  185. package/dist/sr-SP.main.js.map +1 -0
  186. package/dist/sr-SP.mjs +11 -0
  187. package/dist/sr-SP.module.js +11 -0
  188. package/dist/sr-SP.module.js.map +1 -0
  189. package/dist/sv-SE.main.js +9 -0
  190. package/dist/sv-SE.main.js.map +1 -0
  191. package/dist/sv-SE.mjs +11 -0
  192. package/dist/sv-SE.module.js +11 -0
  193. package/dist/sv-SE.module.js.map +1 -0
  194. package/dist/textfield_vars_css.main.js +74 -0
  195. package/dist/textfield_vars_css.main.js.map +1 -0
  196. package/dist/textfield_vars_css.mjs +76 -0
  197. package/dist/textfield_vars_css.module.js +76 -0
  198. package/dist/textfield_vars_css.module.js.map +1 -0
  199. package/dist/tr-TR.main.js +9 -0
  200. package/dist/tr-TR.main.js.map +1 -0
  201. package/dist/tr-TR.mjs +11 -0
  202. package/dist/tr-TR.module.js +11 -0
  203. package/dist/tr-TR.module.js.map +1 -0
  204. package/dist/types.d.ts +6 -2
  205. package/dist/types.d.ts.map +1 -1
  206. package/dist/uk-UA.main.js +9 -0
  207. package/dist/uk-UA.main.js.map +1 -0
  208. package/dist/uk-UA.mjs +11 -0
  209. package/dist/uk-UA.module.js +11 -0
  210. package/dist/uk-UA.module.js.map +1 -0
  211. package/dist/zh-CN.main.js +9 -0
  212. package/dist/zh-CN.main.js.map +1 -0
  213. package/dist/zh-CN.mjs +11 -0
  214. package/dist/zh-CN.module.js +11 -0
  215. package/dist/zh-CN.module.js.map +1 -0
  216. package/dist/zh-TW.main.js +9 -0
  217. package/dist/zh-TW.main.js.map +1 -0
  218. package/dist/zh-TW.mjs +11 -0
  219. package/dist/zh-TW.module.js +11 -0
  220. package/dist/zh-TW.module.js.map +1 -0
  221. package/package.json +38 -29
  222. package/src/MobileSearchAutocomplete.tsx +228 -143
  223. package/src/SearchAutocomplete.tsx +125 -78
  224. package/src/index.ts +2 -3
  225. package/src/searchautocomplete.css +11 -5
  226. package/dist/main.css +0 -1
@@ -0,0 +1,300 @@
1
+ import $fLcex$intlStringsmodulejs from "./intlStrings.module.js";
2
+ import {MobileSearchAutocomplete as $c940f54e16bafef5$export$e7a90f7d6b078162} from "./MobileSearchAutocomplete.module.js";
3
+ import "./autocomplete.02db68b2.css";
4
+ import $fLcex$searchautocomplete_cssmodulejs from "./searchautocomplete_css.module.js";
5
+ import "./autocomplete.102c5c14.css";
6
+ import $fLcex$search_vars_cssmodulejs from "./search_vars_css.module.js";
7
+ import "./autocomplete.c4adfff6.css";
8
+ import $fLcex$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
9
+ import "./autocomplete.30e64bfb.css";
10
+ import $fLcex$textfield_vars_cssmodulejs from "./textfield_vars_css.module.js";
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
@@ -0,0 +1 @@
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.module.js.map"}
@@ -0,0 +1,9 @@
1
+ module.exports = {
2
+ "clear": `\u{645}\u{633}\u{62D}`,
3
+ "invalid": `(\u{63A}\u{64A}\u{631} \u{635}\u{627}\u{644}\u{62D})`,
4
+ "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`,
5
+ "noResults": `\u{644}\u{627} \u{62A}\u{648}\u{62C}\u{62F} \u{646}\u{62A}\u{627}\u{626}\u{62C}`
6
+ };
7
+
8
+
9
+ //# sourceMappingURL=ar-AE.main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,qBAAG,CAAC;IAChC,WAAW,CAAC,oDAAU,CAAC;IACvB,WAAW,CAAC,iFAAe,CAAC;IAC5B,aAAa,CAAC,+EAAa,CAAC;AAC9B","sources":["packages/@react-spectrum/autocomplete/intl/ar-AE.json"],"sourcesContent":["{\n \"clear\": \"مسح\",\n \"invalid\": \"(غير صالح)\",\n \"loading\": \"جارٍ التحميل...\",\n \"noResults\": \"لا توجد نتائج\"\n}\n"],"names":[],"version":3,"file":"ar-AE.main.js.map"}
package/dist/ar-AE.mjs ADDED
@@ -0,0 +1,11 @@
1
+ var $024cf3aa492e9082$exports = {};
2
+ $024cf3aa492e9082$exports = {
3
+ "clear": `\u{645}\u{633}\u{62D}`,
4
+ "invalid": `(\u{63A}\u{64A}\u{631} \u{635}\u{627}\u{644}\u{62D})`,
5
+ "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`,
6
+ "noResults": `\u{644}\u{627} \u{62A}\u{648}\u{62C}\u{62F} \u{646}\u{62A}\u{627}\u{626}\u{62C}`
7
+ };
8
+
9
+
10
+ export {$024cf3aa492e9082$exports as default};
11
+ //# sourceMappingURL=ar-AE.module.js.map
@@ -0,0 +1,11 @@
1
+ var $024cf3aa492e9082$exports = {};
2
+ $024cf3aa492e9082$exports = {
3
+ "clear": `\u{645}\u{633}\u{62D}`,
4
+ "invalid": `(\u{63A}\u{64A}\u{631} \u{635}\u{627}\u{644}\u{62D})`,
5
+ "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`,
6
+ "noResults": `\u{644}\u{627} \u{62A}\u{648}\u{62C}\u{62F} \u{646}\u{62A}\u{627}\u{626}\u{62C}`
7
+ };
8
+
9
+
10
+ export {$024cf3aa492e9082$exports as default};
11
+ //# sourceMappingURL=ar-AE.module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,qBAAG,CAAC;IAChC,WAAW,CAAC,oDAAU,CAAC;IACvB,WAAW,CAAC,iFAAe,CAAC;IAC5B,aAAa,CAAC,+EAAa,CAAC;AAC9B","sources":["packages/@react-spectrum/autocomplete/intl/ar-AE.json"],"sourcesContent":["{\n \"clear\": \"مسح\",\n \"invalid\": \"(غير صالح)\",\n \"loading\": \"جارٍ التحميل...\",\n \"noResults\": \"لا توجد نتائج\"\n}\n"],"names":[],"version":3,"file":"ar-AE.module.js.map"}
@@ -0,0 +1,55 @@
1
+ .-qgzQa_no-results {
2
+ padding-top: var(--spectrum-selectlist-option-padding-height);
3
+ font-size: var(--spectrum-selectlist-option-text-size, var(--spectrum-alias-font-size-default));
4
+ font-weight: var(--spectrum-selectlist-option-text-font-weight, var(--spectrum-global-font-weight-regular));
5
+ padding-inline-start: var(--spectrum-selectlist-option-padding, var(--spectrum-global-dimension-static-size-150));
6
+ display: block;
7
+ }
8
+
9
+ .-qgzQa_searchautocomplete.-qgzQa_searchautocomplete {
10
+ border-radius: var(--spectrum-search-border-radius, var(--spectrum-alias-border-radius-regular));
11
+ --spectrum-focus-ring-border-radius: var(--spectrum-search-border-radius, var(--spectrum-alias-border-radius-regular));
12
+ }
13
+
14
+ .-qgzQa_mobile-searchautocomplete {
15
+ outline: none;
16
+ }
17
+
18
+ .-qgzQa_mobile-input {
19
+ align-items: center;
20
+ display: flex;
21
+ }
22
+
23
+ .-qgzQa_mobile-value {
24
+ white-space: nowrap;
25
+ text-overflow: ellipsis;
26
+ overflow: hidden;
27
+ }
28
+
29
+ .-qgzQa_tray-dialog {
30
+ outline: none;
31
+ flex-direction: column;
32
+ height: 100%;
33
+ display: flex;
34
+ }
35
+
36
+ .-qgzQa_tray-textfield {
37
+ margin: var(--spectrum-global-dimension-size-150);
38
+ margin-bottom: var(--spectrum-global-dimension-size-50);
39
+ flex-shrink: 0;
40
+ width: initial !important;
41
+ }
42
+
43
+ .-qgzQa_tray-textfield.-qgzQa_has-label {
44
+ margin-top: var(--spectrum-global-dimension-size-50);
45
+ }
46
+
47
+ .-qgzQa_tray-textfield .-qgzQa_tray-textfield-input {
48
+ padding-inline-start: var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150));
49
+ }
50
+
51
+ .-qgzQa_tray-listbox {
52
+ flex: 1;
53
+ width: 100%;
54
+ }
55
+ /*# sourceMappingURL=autocomplete.02db68b2.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"AAYA;;;;;;;;AAcA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;;AAMA;;;;;;;AAOA;;;;;;;AAME;;;;AAIA;;;;AAKF","sources":["packages/@react-spectrum/autocomplete/src/searchautocomplete.css"],"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 */\n\n.no-results {\n display: block;\n /*\n Renamed from padding-y to padding-height to fix docs issue where fallback var replaced this value\n (due to old spectrum-css postcss-custom-properties-custom-mapping plugin).\n */\n padding-top: var(--spectrum-selectlist-option-padding-height);\n padding-inline-start: var(--spectrum-selectlist-option-padding);\n font-size: var(--spectrum-selectlist-option-text-size);\n font-weight: var(--spectrum-selectlist-option-text-font-weight);\n}\n\n/* override .spectrum-InputGroup */\n.searchautocomplete.searchautocomplete {\n border-radius: var(--spectrum-search-border-radius);\n --spectrum-focus-ring-border-radius: var(--spectrum-search-border-radius);\n}\n\n.mobile-searchautocomplete {\n outline: none;\n}\n\n.mobile-input {\n display: flex;\n align-items: center;\n}\n\n.mobile-value {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.tray-dialog {\n display: flex;\n flex-direction: column;\n height: 100%;\n outline: none;\n}\n\n.tray-textfield {\n margin: var(--spectrum-global-dimension-size-150);\n margin-bottom: var(--spectrum-global-dimension-size-50);\n flex-shrink: 0;\n width: initial !important;\n\n &.has-label {\n margin-top: var(--spectrum-global-dimension-size-50);\n }\n\n .tray-textfield-input {\n padding-inline-start: var(--spectrum-textfield-padding-x);\n }\n}\n\n.tray-listbox {\n width: 100%;\n flex: 1;\n}\n"],"names":[],"version":3,"file":"autocomplete.02db68b2.css.map"}