UNPKG

24.8 kBJavaScriptView Raw
1import _typeof from "@babel/runtime/helpers/esm/typeof";
2import _extends from "@babel/runtime/helpers/esm/extends";
3import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
5import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
6import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
7import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
8var _excluded = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction", "omitDomProps", "displayValues", "onDisplayValuesChange", "emptyOptions", "notFoundContent", "onClear", "mode", "disabled", "loading", "getInputElement", "getRawInputElement", "open", "defaultOpen", "onDropdownVisibleChange", "activeValue", "onActiveValueChange", "activeDescendantId", "searchValue", "autoClearSearchValue", "onSearch", "onSearchSplit", "tokenSeparators", "allowClear", "suffixIcon", "clearIcon", "OptionList", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "placement", "builtinPlacements", "getPopupContainer", "showAction", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown"];
9import classNames from 'classnames';
10import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
11import useMergedState from "rc-util/es/hooks/useMergedState";
12import isMobile from "rc-util/es/isMobile";
13import KeyCode from "rc-util/es/KeyCode";
14import { useComposeRef } from "rc-util/es/ref";
15import * as React from 'react';
16import { BaseSelectContext } from "./hooks/useBaseProps";
17import useDelayReset from "./hooks/useDelayReset";
18import useLock from "./hooks/useLock";
19import useSelectTriggerControl from "./hooks/useSelectTriggerControl";
20import Selector from "./Selector";
21import SelectTrigger from "./SelectTrigger";
22import TransBtn from "./TransBtn";
23import { getSeparatedContent } from "./utils/valueUtil";
24import { useAllowClear } from "./hooks/useAllowClear";
25import { warning } from 'rc-util';
26var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
27export function isMultiple(mode) {
28 return mode === 'tags' || mode === 'multiple';
29}
30var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
31 var _customizeRawInputEle, _classNames2;
32 var id = props.id,
33 prefixCls = props.prefixCls,
34 className = props.className,
35 showSearch = props.showSearch,
36 tagRender = props.tagRender,
37 direction = props.direction,
38 omitDomProps = props.omitDomProps,
39 displayValues = props.displayValues,
40 onDisplayValuesChange = props.onDisplayValuesChange,
41 emptyOptions = props.emptyOptions,
42 _props$notFoundConten = props.notFoundContent,
43 notFoundContent = _props$notFoundConten === void 0 ? 'Not Found' : _props$notFoundConten,
44 onClear = props.onClear,
45 mode = props.mode,
46 disabled = props.disabled,
47 loading = props.loading,
48 getInputElement = props.getInputElement,
49 getRawInputElement = props.getRawInputElement,
50 open = props.open,
51 defaultOpen = props.defaultOpen,
52 onDropdownVisibleChange = props.onDropdownVisibleChange,
53 activeValue = props.activeValue,
54 onActiveValueChange = props.onActiveValueChange,
55 activeDescendantId = props.activeDescendantId,
56 searchValue = props.searchValue,
57 autoClearSearchValue = props.autoClearSearchValue,
58 onSearch = props.onSearch,
59 onSearchSplit = props.onSearchSplit,
60 tokenSeparators = props.tokenSeparators,
61 allowClear = props.allowClear,
62 suffixIcon = props.suffixIcon,
63 clearIcon = props.clearIcon,
64 OptionList = props.OptionList,
65 animation = props.animation,
66 transitionName = props.transitionName,
67 dropdownStyle = props.dropdownStyle,
68 dropdownClassName = props.dropdownClassName,
69 dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
70 dropdownRender = props.dropdownRender,
71 dropdownAlign = props.dropdownAlign,
72 placement = props.placement,
73 builtinPlacements = props.builtinPlacements,
74 getPopupContainer = props.getPopupContainer,
75 _props$showAction = props.showAction,
76 showAction = _props$showAction === void 0 ? [] : _props$showAction,
77 onFocus = props.onFocus,
78 onBlur = props.onBlur,
79 onKeyUp = props.onKeyUp,
80 onKeyDown = props.onKeyDown,
81 onMouseDown = props.onMouseDown,
82 restProps = _objectWithoutProperties(props, _excluded);
83
84 // ============================== MISC ==============================
85 var multiple = isMultiple(mode);
86 var mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
87 var domProps = _objectSpread({}, restProps);
88 DEFAULT_OMIT_PROPS.forEach(function (propName) {
89 delete domProps[propName];
90 });
91 omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach(function (propName) {
92 delete domProps[propName];
93 });
94
95 // ============================= Mobile =============================
96 var _React$useState = React.useState(false),
97 _React$useState2 = _slicedToArray(_React$useState, 2),
98 mobile = _React$useState2[0],
99 setMobile = _React$useState2[1];
100 React.useEffect(function () {
101 // Only update on the client side
102 setMobile(isMobile());
103 }, []);
104
105 // ============================== Refs ==============================
106 var containerRef = React.useRef(null);
107 var selectorDomRef = React.useRef(null);
108 var triggerRef = React.useRef(null);
109 var selectorRef = React.useRef(null);
110 var listRef = React.useRef(null);
111
112 /** Used for component focused management */
113 var _useDelayReset = useDelayReset(),
114 _useDelayReset2 = _slicedToArray(_useDelayReset, 3),
115 mockFocused = _useDelayReset2[0],
116 setMockFocused = _useDelayReset2[1],
117 cancelSetMockFocused = _useDelayReset2[2];
118
119 // =========================== Imperative ===========================
120 React.useImperativeHandle(ref, function () {
121 var _selectorRef$current, _selectorRef$current2;
122 return {
123 focus: (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.focus,
124 blur: (_selectorRef$current2 = selectorRef.current) === null || _selectorRef$current2 === void 0 ? void 0 : _selectorRef$current2.blur,
125 scrollTo: function scrollTo(arg) {
126 var _listRef$current;
127 return (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(arg);
128 }
129 };
130 });
131
132 // ========================== Search Value ==========================
133 var mergedSearchValue = React.useMemo(function () {
134 var _displayValues$;
135 if (mode !== 'combobox') {
136 return searchValue;
137 }
138 var val = (_displayValues$ = displayValues[0]) === null || _displayValues$ === void 0 ? void 0 : _displayValues$.value;
139 return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
140 }, [searchValue, mode, displayValues]);
141
142 // ========================== Custom Input ==========================
143 // Only works in `combobox`
144 var customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
145
146 // Used for customize replacement for `rc-cascader`
147 var customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
148 var customizeRawInputRef = useComposeRef(selectorDomRef, customizeRawInputElement === null || customizeRawInputElement === void 0 ? void 0 : (_customizeRawInputEle = customizeRawInputElement.props) === null || _customizeRawInputEle === void 0 ? void 0 : _customizeRawInputEle.ref);
149
150 // ============================== Open ==============================
151 // SSR not support Portal which means we need delay `open` for the first time render
152 var _React$useState3 = React.useState(false),
153 _React$useState4 = _slicedToArray(_React$useState3, 2),
154 rendered = _React$useState4[0],
155 setRendered = _React$useState4[1];
156 useLayoutEffect(function () {
157 setRendered(true);
158 }, []);
159 var _useMergedState = useMergedState(false, {
160 defaultValue: defaultOpen,
161 value: open
162 }),
163 _useMergedState2 = _slicedToArray(_useMergedState, 2),
164 innerOpen = _useMergedState2[0],
165 setInnerOpen = _useMergedState2[1];
166 var mergedOpen = rendered ? innerOpen : false;
167
168 // Not trigger `open` in `combobox` when `notFoundContent` is empty
169 var emptyListContent = !notFoundContent && emptyOptions;
170 if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
171 mergedOpen = false;
172 }
173 var triggerOpen = emptyListContent ? false : mergedOpen;
174 var onToggleOpen = React.useCallback(function (newOpen) {
175 var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
176 if (!disabled) {
177 setInnerOpen(nextOpen);
178 if (mergedOpen !== nextOpen) {
179 onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextOpen);
180 }
181 }
182 }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
183
184 // ============================= Search =============================
185 var tokenWithEnter = React.useMemo(function () {
186 return (tokenSeparators || []).some(function (tokenSeparator) {
187 return ['\n', '\r\n'].includes(tokenSeparator);
188 });
189 }, [tokenSeparators]);
190 var onInternalSearch = function onInternalSearch(searchText, fromTyping, isCompositing) {
191 var ret = true;
192 var newSearchText = searchText;
193 onActiveValueChange === null || onActiveValueChange === void 0 ? void 0 : onActiveValueChange(null);
194
195 // Check if match the `tokenSeparators`
196 var patchLabels = isCompositing ? null : getSeparatedContent(searchText, tokenSeparators);
197
198 // Ignore combobox since it's not split-able
199 if (mode !== 'combobox' && patchLabels) {
200 newSearchText = '';
201 onSearchSplit === null || onSearchSplit === void 0 ? void 0 : onSearchSplit(patchLabels);
202
203 // Should close when paste finish
204 onToggleOpen(false);
205
206 // Tell Selector that break next actions
207 ret = false;
208 }
209 if (onSearch && mergedSearchValue !== newSearchText) {
210 onSearch(newSearchText, {
211 source: fromTyping ? 'typing' : 'effect'
212 });
213 }
214 return ret;
215 };
216
217 // Only triggered when menu is closed & mode is tags
218 // If menu is open, OptionList will take charge
219 // If mode isn't tags, press enter is not meaningful when you can't see any option
220 var onInternalSearchSubmit = function onInternalSearchSubmit(searchText) {
221 // prevent empty tags from appearing when you click the Enter button
222 if (!searchText || !searchText.trim()) {
223 return;
224 }
225 onSearch(searchText, {
226 source: 'submit'
227 });
228 };
229
230 // Close will clean up single mode search text
231 React.useEffect(function () {
232 if (!mergedOpen && !multiple && mode !== 'combobox') {
233 onInternalSearch('', false, false);
234 }
235 }, [mergedOpen]);
236
237 // ============================ Disabled ============================
238 // Close dropdown & remove focus state when disabled change
239 React.useEffect(function () {
240 if (innerOpen && disabled) {
241 setInnerOpen(false);
242 }
243 if (disabled) {
244 setMockFocused(false);
245 }
246 }, [disabled]);
247
248 // ============================ Keyboard ============================
249 /**
250 * We record input value here to check if can press to clean up by backspace
251 * - null: Key is not down, this is reset by key up
252 * - true: Search text is empty when first time backspace down
253 * - false: Search text is not empty when first time backspace down
254 */
255 var _useLock = useLock(),
256 _useLock2 = _slicedToArray(_useLock, 2),
257 getClearLock = _useLock2[0],
258 setClearLock = _useLock2[1];
259
260 // KeyDown
261 var onInternalKeyDown = function onInternalKeyDown(event) {
262 var clearLock = getClearLock();
263 var which = event.which;
264 if (which === KeyCode.ENTER) {
265 // Do not submit form when type in the input
266 if (mode !== 'combobox') {
267 event.preventDefault();
268 }
269
270 // We only manage open state here, close logic should handle by list component
271 if (!mergedOpen) {
272 onToggleOpen(true);
273 }
274 }
275 setClearLock(!!mergedSearchValue);
276
277 // Remove value by `backspace`
278 if (which === KeyCode.BACKSPACE && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
279 var cloneDisplayValues = _toConsumableArray(displayValues);
280 var removedDisplayValue = null;
281 for (var i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
282 var current = cloneDisplayValues[i];
283 if (!current.disabled) {
284 cloneDisplayValues.splice(i, 1);
285 removedDisplayValue = current;
286 break;
287 }
288 }
289 if (removedDisplayValue) {
290 onDisplayValuesChange(cloneDisplayValues, {
291 type: 'remove',
292 values: [removedDisplayValue]
293 });
294 }
295 }
296 for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
297 rest[_key - 1] = arguments[_key];
298 }
299 if (mergedOpen && listRef.current) {
300 var _listRef$current2;
301 (_listRef$current2 = listRef.current).onKeyDown.apply(_listRef$current2, [event].concat(rest));
302 }
303 onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown.apply(void 0, [event].concat(rest));
304 };
305
306 // KeyUp
307 var onInternalKeyUp = function onInternalKeyUp(event) {
308 for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
309 rest[_key2 - 1] = arguments[_key2];
310 }
311 if (mergedOpen && listRef.current) {
312 var _listRef$current3;
313 (_listRef$current3 = listRef.current).onKeyUp.apply(_listRef$current3, [event].concat(rest));
314 }
315 onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp.apply(void 0, [event].concat(rest));
316 };
317
318 // ============================ Selector ============================
319 var onSelectorRemove = function onSelectorRemove(val) {
320 var newValues = displayValues.filter(function (i) {
321 return i !== val;
322 });
323 onDisplayValuesChange(newValues, {
324 type: 'remove',
325 values: [val]
326 });
327 };
328
329 // ========================== Focus / Blur ==========================
330 /** Record real focus status */
331 var focusRef = React.useRef(false);
332 var onContainerFocus = function onContainerFocus() {
333 setMockFocused(true);
334 if (!disabled) {
335 if (onFocus && !focusRef.current) {
336 onFocus.apply(void 0, arguments);
337 }
338
339 // `showAction` should handle `focus` if set
340 if (showAction.includes('focus')) {
341 onToggleOpen(true);
342 }
343 }
344 focusRef.current = true;
345 };
346 var onContainerBlur = function onContainerBlur() {
347 setMockFocused(false, function () {
348 focusRef.current = false;
349 onToggleOpen(false);
350 });
351 if (disabled) {
352 return;
353 }
354 if (mergedSearchValue) {
355 // `tags` mode should move `searchValue` into values
356 if (mode === 'tags') {
357 onSearch(mergedSearchValue, {
358 source: 'submit'
359 });
360 } else if (mode === 'multiple') {
361 // `multiple` mode only clean the search value but not trigger event
362 onSearch('', {
363 source: 'blur'
364 });
365 }
366 }
367 if (onBlur) {
368 onBlur.apply(void 0, arguments);
369 }
370 };
371
372 // Give focus back of Select
373 var activeTimeoutIds = [];
374 React.useEffect(function () {
375 return function () {
376 activeTimeoutIds.forEach(function (timeoutId) {
377 return clearTimeout(timeoutId);
378 });
379 activeTimeoutIds.splice(0, activeTimeoutIds.length);
380 };
381 }, []);
382 var onInternalMouseDown = function onInternalMouseDown(event) {
383 var _triggerRef$current;
384 var target = event.target;
385 var popupElement = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getPopupElement();
386
387 // We should give focus back to selector if clicked item is not focusable
388 if (popupElement && popupElement.contains(target)) {
389 var timeoutId = setTimeout(function () {
390 var index = activeTimeoutIds.indexOf(timeoutId);
391 if (index !== -1) {
392 activeTimeoutIds.splice(index, 1);
393 }
394 cancelSetMockFocused();
395 if (!mobile && !popupElement.contains(document.activeElement)) {
396 var _selectorRef$current3;
397 (_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 ? void 0 : _selectorRef$current3.focus();
398 }
399 });
400 activeTimeoutIds.push(timeoutId);
401 }
402 for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
403 restArgs[_key3 - 1] = arguments[_key3];
404 }
405 onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown.apply(void 0, [event].concat(restArgs));
406 };
407
408 // ============================ Dropdown ============================
409 var _React$useState5 = React.useState(null),
410 _React$useState6 = _slicedToArray(_React$useState5, 2),
411 containerWidth = _React$useState6[0],
412 setContainerWidth = _React$useState6[1];
413 var _React$useState7 = React.useState({}),
414 _React$useState8 = _slicedToArray(_React$useState7, 2),
415 forceUpdate = _React$useState8[1];
416 // We need force update here since popup dom is render async
417 function onPopupMouseEnter() {
418 forceUpdate({});
419 }
420 useLayoutEffect(function () {
421 if (triggerOpen) {
422 var _containerRef$current;
423 // Guaranteed width accuracy
424 var newWidth = Math.ceil((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width);
425 if (containerWidth !== newWidth && !Number.isNaN(newWidth)) {
426 setContainerWidth(newWidth);
427 }
428 }
429 }, [triggerOpen]);
430
431 // Used for raw custom input trigger
432 var onTriggerVisibleChange;
433 if (customizeRawInputElement) {
434 onTriggerVisibleChange = function onTriggerVisibleChange(newOpen) {
435 onToggleOpen(newOpen);
436 };
437 }
438
439 // Close when click on non-select element
440 useSelectTriggerControl(function () {
441 var _triggerRef$current2;
442 return [containerRef.current, (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getPopupElement()];
443 }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
444
445 // ============================ Context =============================
446 var baseSelectContext = React.useMemo(function () {
447 return _objectSpread(_objectSpread({}, props), {}, {
448 notFoundContent: notFoundContent,
449 open: mergedOpen,
450 triggerOpen: triggerOpen,
451 id: id,
452 showSearch: mergedShowSearch,
453 multiple: multiple,
454 toggleOpen: onToggleOpen
455 });
456 }, [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
457
458 // ==================================================================
459 // == Render ==
460 // ==================================================================
461
462 // ============================= Arrow ==============================
463 var showSuffixIcon = !!suffixIcon || loading;
464 var arrowNode;
465 if (showSuffixIcon) {
466 arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
467 className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
468 customizeIcon: suffixIcon,
469 customizeIconProps: {
470 loading: loading,
471 searchValue: mergedSearchValue,
472 open: mergedOpen,
473 focused: mockFocused,
474 showSearch: mergedShowSearch
475 }
476 });
477 }
478
479 // ============================= Clear ==============================
480 if (process.env.NODE_ENV !== 'production') {
481 warning(!props.clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
482 }
483 var onClearMouseDown = function onClearMouseDown() {
484 var _selectorRef$current4;
485 onClear === null || onClear === void 0 ? void 0 : onClear();
486 (_selectorRef$current4 = selectorRef.current) === null || _selectorRef$current4 === void 0 ? void 0 : _selectorRef$current4.focus();
487 onDisplayValuesChange([], {
488 type: 'clear',
489 values: displayValues
490 });
491 onInternalSearch('', false, false);
492 };
493 var _useAllowClear = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
494 mergedAllowClear = _useAllowClear.allowClear,
495 clearNode = _useAllowClear.clearIcon;
496
497 // =========================== OptionList ===========================
498 var optionList = /*#__PURE__*/React.createElement(OptionList, {
499 ref: listRef
500 });
501
502 // ============================= Select =============================
503 var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-show-arrow"), showSuffixIcon), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
504
505 // >>> Selector
506 var selectorNode = /*#__PURE__*/React.createElement(SelectTrigger, {
507 ref: triggerRef,
508 disabled: disabled,
509 prefixCls: prefixCls,
510 visible: triggerOpen,
511 popupElement: optionList,
512 containerWidth: containerWidth,
513 animation: animation,
514 transitionName: transitionName,
515 dropdownStyle: dropdownStyle,
516 dropdownClassName: dropdownClassName,
517 direction: direction,
518 dropdownMatchSelectWidth: dropdownMatchSelectWidth,
519 dropdownRender: dropdownRender,
520 dropdownAlign: dropdownAlign,
521 placement: placement,
522 builtinPlacements: builtinPlacements,
523 getPopupContainer: getPopupContainer,
524 empty: emptyOptions,
525 getTriggerDOMNode: function getTriggerDOMNode() {
526 return selectorDomRef.current;
527 },
528 onPopupVisibleChange: onTriggerVisibleChange,
529 onPopupMouseEnter: onPopupMouseEnter
530 }, customizeRawInputElement ? /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
531 ref: customizeRawInputRef
532 }) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
533 domRef: selectorDomRef,
534 prefixCls: prefixCls,
535 inputElement: customizeInputElement,
536 ref: selectorRef,
537 id: id,
538 showSearch: mergedShowSearch,
539 autoClearSearchValue: autoClearSearchValue,
540 mode: mode,
541 activeDescendantId: activeDescendantId,
542 tagRender: tagRender,
543 values: displayValues,
544 open: mergedOpen,
545 onToggleOpen: onToggleOpen,
546 activeValue: activeValue,
547 searchValue: mergedSearchValue,
548 onSearch: onInternalSearch,
549 onSearchSubmit: onInternalSearchSubmit,
550 onRemove: onSelectorRemove,
551 tokenWithEnter: tokenWithEnter
552 })));
553
554 // >>> Render
555 var renderNode;
556
557 // Render raw
558 if (customizeRawInputElement) {
559 renderNode = selectorNode;
560 } else {
561 renderNode = /*#__PURE__*/React.createElement("div", _extends({
562 className: mergedClassName
563 }, domProps, {
564 ref: containerRef,
565 onMouseDown: onInternalMouseDown,
566 onKeyDown: onInternalKeyDown,
567 onKeyUp: onInternalKeyUp,
568 onFocus: onContainerFocus,
569 onBlur: onContainerBlur
570 }), mockFocused && !mergedOpen && /*#__PURE__*/React.createElement("span", {
571 style: {
572 width: 0,
573 height: 0,
574 position: 'absolute',
575 overflow: 'hidden',
576 opacity: 0
577 },
578 "aria-live": "polite"
579 }, "".concat(displayValues.map(function (_ref) {
580 var label = _ref.label,
581 value = _ref.value;
582 return ['number', 'string'].includes(_typeof(label)) ? label : value;
583 }).join(', '))), selectorNode, arrowNode, mergedAllowClear && clearNode);
584 }
585 return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {
586 value: baseSelectContext
587 }, renderNode);
588});
589
590// Set display name for dev
591if (process.env.NODE_ENV !== 'production') {
592 BaseSelect.displayName = 'BaseSelect';
593}
594export default BaseSelect;
\No newline at end of file