1 | 'use strict';
|
2 |
|
3 | var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
4 | var _extends = require('@babel/runtime/helpers/extends');
|
5 | var react = require('@emotion/react');
|
6 | var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
7 | var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
8 | var _typeof = require('@babel/runtime/helpers/typeof');
|
9 | var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
10 | var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
11 | var React = require('react');
|
12 | var reactDom = require('react-dom');
|
13 | var dom = require('@floating-ui/dom');
|
14 | var useLayoutEffect = require('use-isomorphic-layout-effect');
|
15 |
|
16 | function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
17 |
|
18 | var useLayoutEffect__default = _interopDefault(useLayoutEffect);
|
19 |
|
20 | var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | var noop = function noop() {};
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | function applyPrefixToName(prefix, name) {
|
41 | if (!name) {
|
42 | return prefix;
|
43 | } else if (name[0] === '-') {
|
44 | return prefix + name;
|
45 | } else {
|
46 | return prefix + '__' + name;
|
47 | }
|
48 | }
|
49 | function classNames(prefix, state) {
|
50 | for (var _len = arguments.length, classNameList = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
51 | classNameList[_key - 2] = arguments[_key];
|
52 | }
|
53 | var arr = [].concat(classNameList);
|
54 | if (state && prefix) {
|
55 | for (var key in state) {
|
56 | if (state.hasOwnProperty(key) && state[key]) {
|
57 | arr.push("".concat(applyPrefixToName(prefix, key)));
|
58 | }
|
59 | }
|
60 | }
|
61 | return arr.filter(function (i) {
|
62 | return i;
|
63 | }).map(function (i) {
|
64 | return String(i).trim();
|
65 | }).join(' ');
|
66 | }
|
67 |
|
68 |
|
69 |
|
70 |
|
71 | var cleanValue = function cleanValue(value) {
|
72 | if (isArray(value)) return value.filter(Boolean);
|
73 | if (_typeof(value) === 'object' && value !== null) return [value];
|
74 | return [];
|
75 | };
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 | var cleanCommonProps = function cleanCommonProps(props) {
|
82 |
|
83 | props.className;
|
84 | props.clearValue;
|
85 | props.cx;
|
86 | props.getStyles;
|
87 | props.getClassNames;
|
88 | props.getValue;
|
89 | props.hasValue;
|
90 | props.isMulti;
|
91 | props.isRtl;
|
92 | props.options;
|
93 | props.selectOption;
|
94 | props.selectProps;
|
95 | props.setValue;
|
96 | props.theme;
|
97 | var innerProps = _objectWithoutProperties(props, _excluded$4);
|
98 | return _objectSpread({}, innerProps);
|
99 | };
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | var getStyleProps = function getStyleProps(props, name, classNamesState) {
|
106 | var cx = props.cx,
|
107 | getStyles = props.getStyles,
|
108 | getClassNames = props.getClassNames,
|
109 | className = props.className;
|
110 | return {
|
111 | css: getStyles(name, props),
|
112 | className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
|
113 | };
|
114 | };
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 | function handleInputChange(inputValue, actionMeta, onInputChange) {
|
121 | if (onInputChange) {
|
122 | var _newValue = onInputChange(inputValue, actionMeta);
|
123 | if (typeof _newValue === 'string') return _newValue;
|
124 | }
|
125 | return inputValue;
|
126 | }
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | function isDocumentElement(el) {
|
133 | return [document.documentElement, document.body, window].indexOf(el) > -1;
|
134 | }
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | function normalizedHeight(el) {
|
140 | if (isDocumentElement(el)) {
|
141 | return window.innerHeight;
|
142 | }
|
143 | return el.clientHeight;
|
144 | }
|
145 |
|
146 |
|
147 |
|
148 |
|
149 | function getScrollTop(el) {
|
150 | if (isDocumentElement(el)) {
|
151 | return window.pageYOffset;
|
152 | }
|
153 | return el.scrollTop;
|
154 | }
|
155 | function scrollTo(el, top) {
|
156 |
|
157 | if (isDocumentElement(el)) {
|
158 | window.scrollTo(0, top);
|
159 | return;
|
160 | }
|
161 | el.scrollTop = top;
|
162 | }
|
163 |
|
164 |
|
165 |
|
166 |
|
167 | function getScrollParent(element) {
|
168 | var style = getComputedStyle(element);
|
169 | var excludeStaticParent = style.position === 'absolute';
|
170 | var overflowRx = /(auto|scroll)/;
|
171 | if (style.position === 'fixed') return document.documentElement;
|
172 | for (var parent = element; parent = parent.parentElement;) {
|
173 | style = getComputedStyle(parent);
|
174 | if (excludeStaticParent && style.position === 'static') {
|
175 | continue;
|
176 | }
|
177 | if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
|
178 | return parent;
|
179 | }
|
180 | }
|
181 | return document.documentElement;
|
182 | }
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | function easeOutCubic(t, b, c, d) {
|
194 | return c * ((t = t / d - 1) * t * t + 1) + b;
|
195 | }
|
196 | function animatedScrollTo(element, to) {
|
197 | var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
|
198 | var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
|
199 | var start = getScrollTop(element);
|
200 | var change = to - start;
|
201 | var increment = 10;
|
202 | var currentTime = 0;
|
203 | function animateScroll() {
|
204 | currentTime += increment;
|
205 | var val = easeOutCubic(currentTime, start, change, duration);
|
206 | scrollTo(element, val);
|
207 | if (currentTime < duration) {
|
208 | window.requestAnimationFrame(animateScroll);
|
209 | } else {
|
210 | callback(element);
|
211 | }
|
212 | }
|
213 | animateScroll();
|
214 | }
|
215 |
|
216 |
|
217 |
|
218 |
|
219 | function scrollIntoView(menuEl, focusedEl) {
|
220 | var menuRect = menuEl.getBoundingClientRect();
|
221 | var focusedRect = focusedEl.getBoundingClientRect();
|
222 | var overScroll = focusedEl.offsetHeight / 3;
|
223 | if (focusedRect.bottom + overScroll > menuRect.bottom) {
|
224 | scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
|
225 | } else if (focusedRect.top - overScroll < menuRect.top) {
|
226 | scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
|
227 | }
|
228 | }
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 | function getBoundingClientObj(element) {
|
236 | var rect = element.getBoundingClientRect();
|
237 | return {
|
238 | bottom: rect.bottom,
|
239 | height: rect.height,
|
240 | left: rect.left,
|
241 | right: rect.right,
|
242 | top: rect.top,
|
243 | width: rect.width
|
244 | };
|
245 | }
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 | function isTouchCapable() {
|
252 | try {
|
253 | document.createEvent('TouchEvent');
|
254 | return true;
|
255 | } catch (e) {
|
256 | return false;
|
257 | }
|
258 | }
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 | function isMobileDevice() {
|
265 | try {
|
266 | return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
267 | } catch (e) {
|
268 | return false;
|
269 | }
|
270 | }
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 | var passiveOptionAccessed = false;
|
278 | var options = {
|
279 | get passive() {
|
280 | return passiveOptionAccessed = true;
|
281 | }
|
282 | };
|
283 |
|
284 | var w = typeof window !== 'undefined' ? window : {};
|
285 | if (w.addEventListener && w.removeEventListener) {
|
286 | w.addEventListener('p', noop, options);
|
287 | w.removeEventListener('p', noop, false);
|
288 | }
|
289 | var supportsPassiveEvents = passiveOptionAccessed;
|
290 | function notNullish(item) {
|
291 | return item != null;
|
292 | }
|
293 | function isArray(arg) {
|
294 | return Array.isArray(arg);
|
295 | }
|
296 | function valueTernary(isMulti, multiValue, singleValue) {
|
297 | return isMulti ? multiValue : singleValue;
|
298 | }
|
299 | function singleValueAsValue(singleValue) {
|
300 | return singleValue;
|
301 | }
|
302 | function multiValueAsValue(multiValue) {
|
303 | return multiValue;
|
304 | }
|
305 | var removeProps = function removeProps(propsObj) {
|
306 | for (var _len2 = arguments.length, properties = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
307 | properties[_key2 - 1] = arguments[_key2];
|
308 | }
|
309 | var propsMap = Object.entries(propsObj).filter(function (_ref) {
|
310 | var _ref2 = _slicedToArray(_ref, 1),
|
311 | key = _ref2[0];
|
312 | return !properties.includes(key);
|
313 | });
|
314 | return propsMap.reduce(function (newProps, _ref3) {
|
315 | var _ref4 = _slicedToArray(_ref3, 2),
|
316 | key = _ref4[0],
|
317 | val = _ref4[1];
|
318 | newProps[key] = val;
|
319 | return newProps;
|
320 | }, {});
|
321 | };
|
322 |
|
323 | var _excluded$3 = ["children", "innerProps"],
|
324 | _excluded2$1 = ["children", "innerProps"];
|
325 | function getMenuPlacement(_ref) {
|
326 | var preferredMaxHeight = _ref.maxHeight,
|
327 | menuEl = _ref.menuEl,
|
328 | minHeight = _ref.minHeight,
|
329 | preferredPlacement = _ref.placement,
|
330 | shouldScroll = _ref.shouldScroll,
|
331 | isFixedPosition = _ref.isFixedPosition,
|
332 | controlHeight = _ref.controlHeight;
|
333 | var scrollParent = getScrollParent(menuEl);
|
334 | var defaultState = {
|
335 | placement: 'bottom',
|
336 | maxHeight: preferredMaxHeight
|
337 | };
|
338 |
|
339 |
|
340 | if (!menuEl || !menuEl.offsetParent) return defaultState;
|
341 |
|
342 |
|
343 |
|
344 | var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
|
345 | scrollHeight = _scrollParent$getBoun.height;
|
346 | var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
|
347 | menuBottom = _menuEl$getBoundingCl.bottom,
|
348 | menuHeight = _menuEl$getBoundingCl.height,
|
349 | menuTop = _menuEl$getBoundingCl.top;
|
350 | var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
|
351 | containerTop = _menuEl$offsetParent$.top;
|
352 | var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
|
353 | var scrollTop = getScrollTop(scrollParent);
|
354 | var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
|
355 | var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
|
356 | var viewSpaceAbove = containerTop - marginTop;
|
357 | var viewSpaceBelow = viewHeight - menuTop;
|
358 | var scrollSpaceAbove = viewSpaceAbove + scrollTop;
|
359 | var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
|
360 | var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
|
361 | var scrollUp = scrollTop + menuTop - marginTop;
|
362 | var scrollDuration = 160;
|
363 | switch (preferredPlacement) {
|
364 | case 'auto':
|
365 | case 'bottom':
|
366 |
|
367 | if (viewSpaceBelow >= menuHeight) {
|
368 | return {
|
369 | placement: 'bottom',
|
370 | maxHeight: preferredMaxHeight
|
371 | };
|
372 | }
|
373 |
|
374 |
|
375 | if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
|
376 | if (shouldScroll) {
|
377 | animatedScrollTo(scrollParent, scrollDown, scrollDuration);
|
378 | }
|
379 | return {
|
380 | placement: 'bottom',
|
381 | maxHeight: preferredMaxHeight
|
382 | };
|
383 | }
|
384 |
|
385 |
|
386 | if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
|
387 | if (shouldScroll) {
|
388 | animatedScrollTo(scrollParent, scrollDown, scrollDuration);
|
389 | }
|
390 |
|
391 |
|
392 |
|
393 | var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
|
394 | return {
|
395 | placement: 'bottom',
|
396 | maxHeight: constrainedHeight
|
397 | };
|
398 | }
|
399 |
|
400 |
|
401 |
|
402 |
|
403 | if (preferredPlacement === 'auto' || isFixedPosition) {
|
404 |
|
405 | var _constrainedHeight = preferredMaxHeight;
|
406 | var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
|
407 | if (spaceAbove >= minHeight) {
|
408 | _constrainedHeight = Math.min(spaceAbove - marginBottom - controlHeight, preferredMaxHeight);
|
409 | }
|
410 | return {
|
411 | placement: 'top',
|
412 | maxHeight: _constrainedHeight
|
413 | };
|
414 | }
|
415 |
|
416 |
|
417 | if (preferredPlacement === 'bottom') {
|
418 | if (shouldScroll) {
|
419 | scrollTo(scrollParent, scrollDown);
|
420 | }
|
421 | return {
|
422 | placement: 'bottom',
|
423 | maxHeight: preferredMaxHeight
|
424 | };
|
425 | }
|
426 | break;
|
427 | case 'top':
|
428 |
|
429 | if (viewSpaceAbove >= menuHeight) {
|
430 | return {
|
431 | placement: 'top',
|
432 | maxHeight: preferredMaxHeight
|
433 | };
|
434 | }
|
435 |
|
436 |
|
437 | if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
|
438 | if (shouldScroll) {
|
439 | animatedScrollTo(scrollParent, scrollUp, scrollDuration);
|
440 | }
|
441 | return {
|
442 | placement: 'top',
|
443 | maxHeight: preferredMaxHeight
|
444 | };
|
445 | }
|
446 |
|
447 |
|
448 | if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
|
449 | var _constrainedHeight2 = preferredMaxHeight;
|
450 |
|
451 |
|
452 |
|
453 | if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
|
454 | _constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
|
455 | }
|
456 | if (shouldScroll) {
|
457 | animatedScrollTo(scrollParent, scrollUp, scrollDuration);
|
458 | }
|
459 | return {
|
460 | placement: 'top',
|
461 | maxHeight: _constrainedHeight2
|
462 | };
|
463 | }
|
464 |
|
465 |
|
466 |
|
467 |
|
468 | return {
|
469 | placement: 'bottom',
|
470 | maxHeight: preferredMaxHeight
|
471 | };
|
472 | default:
|
473 | throw new Error("Invalid placement provided \"".concat(preferredPlacement, "\"."));
|
474 | }
|
475 | return defaultState;
|
476 | }
|
477 |
|
478 |
|
479 |
|
480 |
|
481 | function alignToControl(placement) {
|
482 | var placementToCSSProp = {
|
483 | bottom: 'top',
|
484 | top: 'bottom'
|
485 | };
|
486 | return placement ? placementToCSSProp[placement] : 'bottom';
|
487 | }
|
488 | var coercePlacement = function coercePlacement(p) {
|
489 | return p === 'auto' ? 'bottom' : p;
|
490 | };
|
491 | var menuCSS = function menuCSS(_ref2, unstyled) {
|
492 | var _objectSpread2;
|
493 | var placement = _ref2.placement,
|
494 | _ref2$theme = _ref2.theme,
|
495 | borderRadius = _ref2$theme.borderRadius,
|
496 | spacing = _ref2$theme.spacing,
|
497 | colors = _ref2$theme.colors;
|
498 | return _objectSpread((_objectSpread2 = {
|
499 | label: 'menu'
|
500 | }, _defineProperty(_objectSpread2, alignToControl(placement), '100%'), _defineProperty(_objectSpread2, "position", 'absolute'), _defineProperty(_objectSpread2, "width", '100%'), _defineProperty(_objectSpread2, "zIndex", 1), _objectSpread2), unstyled ? {} : {
|
501 | backgroundColor: colors.neutral0,
|
502 | borderRadius: borderRadius,
|
503 | boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
|
504 | marginBottom: spacing.menuGutter,
|
505 | marginTop: spacing.menuGutter
|
506 | });
|
507 | };
|
508 | var PortalPlacementContext = React.createContext(null);
|
509 |
|
510 |
|
511 | var MenuPlacer = function MenuPlacer(props) {
|
512 | var children = props.children,
|
513 | minMenuHeight = props.minMenuHeight,
|
514 | maxMenuHeight = props.maxMenuHeight,
|
515 | menuPlacement = props.menuPlacement,
|
516 | menuPosition = props.menuPosition,
|
517 | menuShouldScrollIntoView = props.menuShouldScrollIntoView,
|
518 | theme = props.theme;
|
519 | var _ref3 = React.useContext(PortalPlacementContext) || {},
|
520 | setPortalPlacement = _ref3.setPortalPlacement;
|
521 | var ref = React.useRef(null);
|
522 | var _useState = React.useState(maxMenuHeight),
|
523 | _useState2 = _slicedToArray(_useState, 2),
|
524 | maxHeight = _useState2[0],
|
525 | setMaxHeight = _useState2[1];
|
526 | var _useState3 = React.useState(null),
|
527 | _useState4 = _slicedToArray(_useState3, 2),
|
528 | placement = _useState4[0],
|
529 | setPlacement = _useState4[1];
|
530 | var controlHeight = theme.spacing.controlHeight;
|
531 | useLayoutEffect__default["default"](function () {
|
532 | var menuEl = ref.current;
|
533 | if (!menuEl) return;
|
534 |
|
535 |
|
536 | var isFixedPosition = menuPosition === 'fixed';
|
537 | var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
|
538 | var state = getMenuPlacement({
|
539 | maxHeight: maxMenuHeight,
|
540 | menuEl: menuEl,
|
541 | minHeight: minMenuHeight,
|
542 | placement: menuPlacement,
|
543 | shouldScroll: shouldScroll,
|
544 | isFixedPosition: isFixedPosition,
|
545 | controlHeight: controlHeight
|
546 | });
|
547 | setMaxHeight(state.maxHeight);
|
548 | setPlacement(state.placement);
|
549 | setPortalPlacement === null || setPortalPlacement === void 0 ? void 0 : setPortalPlacement(state.placement);
|
550 | }, [maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, setPortalPlacement, controlHeight]);
|
551 | return children({
|
552 | ref: ref,
|
553 | placerProps: _objectSpread(_objectSpread({}, props), {}, {
|
554 | placement: placement || coercePlacement(menuPlacement),
|
555 | maxHeight: maxHeight
|
556 | })
|
557 | });
|
558 | };
|
559 | var Menu = function Menu(props) {
|
560 | var children = props.children,
|
561 | innerRef = props.innerRef,
|
562 | innerProps = props.innerProps;
|
563 | return react.jsx("div", _extends({}, getStyleProps(props, 'menu', {
|
564 | menu: true
|
565 | }), {
|
566 | ref: innerRef
|
567 | }, innerProps), children);
|
568 | };
|
569 | var Menu$1 = Menu;
|
570 |
|
571 |
|
572 |
|
573 |
|
574 |
|
575 | var menuListCSS = function menuListCSS(_ref4, unstyled) {
|
576 | var maxHeight = _ref4.maxHeight,
|
577 | baseUnit = _ref4.theme.spacing.baseUnit;
|
578 | return _objectSpread({
|
579 | maxHeight: maxHeight,
|
580 | overflowY: 'auto',
|
581 | position: 'relative',
|
582 |
|
583 | WebkitOverflowScrolling: 'touch'
|
584 | }, unstyled ? {} : {
|
585 | paddingBottom: baseUnit,
|
586 | paddingTop: baseUnit
|
587 | });
|
588 | };
|
589 | var MenuList = function MenuList(props) {
|
590 | var children = props.children,
|
591 | innerProps = props.innerProps,
|
592 | innerRef = props.innerRef,
|
593 | isMulti = props.isMulti;
|
594 | return react.jsx("div", _extends({}, getStyleProps(props, 'menuList', {
|
595 | 'menu-list': true,
|
596 | 'menu-list--is-multi': isMulti
|
597 | }), {
|
598 | ref: innerRef
|
599 | }, innerProps), children);
|
600 | };
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 | var noticeCSS = function noticeCSS(_ref5, unstyled) {
|
607 | var _ref5$theme = _ref5.theme,
|
608 | baseUnit = _ref5$theme.spacing.baseUnit,
|
609 | colors = _ref5$theme.colors;
|
610 | return _objectSpread({
|
611 | textAlign: 'center'
|
612 | }, unstyled ? {} : {
|
613 | color: colors.neutral40,
|
614 | padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
|
615 | });
|
616 | };
|
617 | var noOptionsMessageCSS = noticeCSS;
|
618 | var loadingMessageCSS = noticeCSS;
|
619 | var NoOptionsMessage = function NoOptionsMessage(_ref6) {
|
620 | var _ref6$children = _ref6.children,
|
621 | children = _ref6$children === void 0 ? 'No options' : _ref6$children,
|
622 | innerProps = _ref6.innerProps,
|
623 | restProps = _objectWithoutProperties(_ref6, _excluded$3);
|
624 | return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
625 | children: children,
|
626 | innerProps: innerProps
|
627 | }), 'noOptionsMessage', {
|
628 | 'menu-notice': true,
|
629 | 'menu-notice--no-options': true
|
630 | }), innerProps), children);
|
631 | };
|
632 | var LoadingMessage = function LoadingMessage(_ref7) {
|
633 | var _ref7$children = _ref7.children,
|
634 | children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
|
635 | innerProps = _ref7.innerProps,
|
636 | restProps = _objectWithoutProperties(_ref7, _excluded2$1);
|
637 | return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
638 | children: children,
|
639 | innerProps: innerProps
|
640 | }), 'loadingMessage', {
|
641 | 'menu-notice': true,
|
642 | 'menu-notice--loading': true
|
643 | }), innerProps), children);
|
644 | };
|
645 |
|
646 |
|
647 |
|
648 |
|
649 |
|
650 | var menuPortalCSS = function menuPortalCSS(_ref8) {
|
651 | var rect = _ref8.rect,
|
652 | offset = _ref8.offset,
|
653 | position = _ref8.position;
|
654 | return {
|
655 | left: rect.left,
|
656 | position: position,
|
657 | top: offset,
|
658 | width: rect.width,
|
659 | zIndex: 1
|
660 | };
|
661 | };
|
662 | var MenuPortal = function MenuPortal(props) {
|
663 | var appendTo = props.appendTo,
|
664 | children = props.children,
|
665 | controlElement = props.controlElement,
|
666 | innerProps = props.innerProps,
|
667 | menuPlacement = props.menuPlacement,
|
668 | menuPosition = props.menuPosition;
|
669 | var menuPortalRef = React.useRef(null);
|
670 | var cleanupRef = React.useRef(null);
|
671 | var _useState5 = React.useState(coercePlacement(menuPlacement)),
|
672 | _useState6 = _slicedToArray(_useState5, 2),
|
673 | placement = _useState6[0],
|
674 | setPortalPlacement = _useState6[1];
|
675 | var portalPlacementContext = React.useMemo(function () {
|
676 | return {
|
677 | setPortalPlacement: setPortalPlacement
|
678 | };
|
679 | }, []);
|
680 | var _useState7 = React.useState(null),
|
681 | _useState8 = _slicedToArray(_useState7, 2),
|
682 | computedPosition = _useState8[0],
|
683 | setComputedPosition = _useState8[1];
|
684 | var updateComputedPosition = React.useCallback(function () {
|
685 | if (!controlElement) return;
|
686 | var rect = getBoundingClientObj(controlElement);
|
687 | var scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
|
688 | var offset = rect[placement] + scrollDistance;
|
689 | if (offset !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset) || rect.left !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left) || rect.width !== (computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width)) {
|
690 | setComputedPosition({
|
691 | offset: offset,
|
692 | rect: rect
|
693 | });
|
694 | }
|
695 | }, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width]);
|
696 | useLayoutEffect__default["default"](function () {
|
697 | updateComputedPosition();
|
698 | }, [updateComputedPosition]);
|
699 | var runAutoUpdate = React.useCallback(function () {
|
700 | if (typeof cleanupRef.current === 'function') {
|
701 | cleanupRef.current();
|
702 | cleanupRef.current = null;
|
703 | }
|
704 | if (controlElement && menuPortalRef.current) {
|
705 | cleanupRef.current = dom.autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
|
706 | elementResize: 'ResizeObserver' in window
|
707 | });
|
708 | }
|
709 | }, [controlElement, updateComputedPosition]);
|
710 | useLayoutEffect__default["default"](function () {
|
711 | runAutoUpdate();
|
712 | }, [runAutoUpdate]);
|
713 | var setMenuPortalElement = React.useCallback(function (menuPortalElement) {
|
714 | menuPortalRef.current = menuPortalElement;
|
715 | runAutoUpdate();
|
716 | }, [runAutoUpdate]);
|
717 |
|
718 |
|
719 | if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
|
720 |
|
721 |
|
722 | var menuWrapper = react.jsx("div", _extends({
|
723 | ref: setMenuPortalElement
|
724 | }, getStyleProps(_objectSpread(_objectSpread({}, props), {}, {
|
725 | offset: computedPosition.offset,
|
726 | position: menuPosition,
|
727 | rect: computedPosition.rect
|
728 | }), 'menuPortal', {
|
729 | 'menu-portal': true
|
730 | }), innerProps), children);
|
731 | return react.jsx(PortalPlacementContext.Provider, {
|
732 | value: portalPlacementContext
|
733 | }, appendTo ? reactDom.createPortal(menuWrapper, appendTo) : menuWrapper);
|
734 | };
|
735 |
|
736 |
|
737 |
|
738 |
|
739 |
|
740 | var containerCSS = function containerCSS(_ref) {
|
741 | var isDisabled = _ref.isDisabled,
|
742 | isRtl = _ref.isRtl;
|
743 | return {
|
744 | label: 'container',
|
745 | direction: isRtl ? 'rtl' : undefined,
|
746 | pointerEvents: isDisabled ? 'none' : undefined,
|
747 |
|
748 | position: 'relative'
|
749 | };
|
750 | };
|
751 | var SelectContainer = function SelectContainer(props) {
|
752 | var children = props.children,
|
753 | innerProps = props.innerProps,
|
754 | isDisabled = props.isDisabled,
|
755 | isRtl = props.isRtl;
|
756 | return react.jsx("div", _extends({}, getStyleProps(props, 'container', {
|
757 | '--is-disabled': isDisabled,
|
758 | '--is-rtl': isRtl
|
759 | }), innerProps), children);
|
760 | };
|
761 |
|
762 |
|
763 |
|
764 |
|
765 |
|
766 | var valueContainerCSS = function valueContainerCSS(_ref2, unstyled) {
|
767 | var spacing = _ref2.theme.spacing,
|
768 | isMulti = _ref2.isMulti,
|
769 | hasValue = _ref2.hasValue,
|
770 | controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
|
771 | return _objectSpread({
|
772 | alignItems: 'center',
|
773 | display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
|
774 | flex: 1,
|
775 | flexWrap: 'wrap',
|
776 | WebkitOverflowScrolling: 'touch',
|
777 | position: 'relative',
|
778 | overflow: 'hidden'
|
779 | }, unstyled ? {} : {
|
780 | padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
|
781 | });
|
782 | };
|
783 | var ValueContainer = function ValueContainer(props) {
|
784 | var children = props.children,
|
785 | innerProps = props.innerProps,
|
786 | isMulti = props.isMulti,
|
787 | hasValue = props.hasValue;
|
788 | return react.jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
|
789 | 'value-container': true,
|
790 | 'value-container--is-multi': isMulti,
|
791 | 'value-container--has-value': hasValue
|
792 | }), innerProps), children);
|
793 | };
|
794 |
|
795 |
|
796 |
|
797 |
|
798 |
|
799 | var indicatorsContainerCSS = function indicatorsContainerCSS() {
|
800 | return {
|
801 | alignItems: 'center',
|
802 | alignSelf: 'stretch',
|
803 | display: 'flex',
|
804 | flexShrink: 0
|
805 | };
|
806 | };
|
807 | var IndicatorsContainer = function IndicatorsContainer(props) {
|
808 | var children = props.children,
|
809 | innerProps = props.innerProps;
|
810 | return react.jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
|
811 | indicators: true
|
812 | }), innerProps), children);
|
813 | };
|
814 |
|
815 | var _templateObject;
|
816 | var _excluded$2 = ["size"],
|
817 | _excluded2 = ["innerProps", "isRtl", "size"];
|
818 |
|
819 |
|
820 |
|
821 |
|
822 | var _ref2 = {
|
823 | name: "8mmkcg",
|
824 | styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0"
|
825 | } ;
|
826 | var Svg = function Svg(_ref) {
|
827 | var size = _ref.size,
|
828 | props = _objectWithoutProperties(_ref, _excluded$2);
|
829 | return react.jsx("svg", _extends({
|
830 | height: size,
|
831 | width: size,
|
832 | viewBox: "0 0 20 20",
|
833 | "aria-hidden": "true",
|
834 | focusable: "false",
|
835 | css: _ref2
|
836 | }, props));
|
837 | };
|
838 | var CrossIcon = function CrossIcon(props) {
|
839 | return react.jsx(Svg, _extends({
|
840 | size: 20
|
841 | }, props), react.jsx("path", {
|
842 | d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
|
843 | }));
|
844 | };
|
845 | var DownChevron = function DownChevron(props) {
|
846 | return react.jsx(Svg, _extends({
|
847 | size: 20
|
848 | }, props), react.jsx("path", {
|
849 | d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
850 | }));
|
851 | };
|
852 |
|
853 |
|
854 |
|
855 |
|
856 |
|
857 | var baseCSS = function baseCSS(_ref3, unstyled) {
|
858 | var isFocused = _ref3.isFocused,
|
859 | _ref3$theme = _ref3.theme,
|
860 | baseUnit = _ref3$theme.spacing.baseUnit,
|
861 | colors = _ref3$theme.colors;
|
862 | return _objectSpread({
|
863 | label: 'indicatorContainer',
|
864 | display: 'flex',
|
865 | transition: 'color 150ms'
|
866 | }, unstyled ? {} : {
|
867 | color: isFocused ? colors.neutral60 : colors.neutral20,
|
868 | padding: baseUnit * 2,
|
869 | ':hover': {
|
870 | color: isFocused ? colors.neutral80 : colors.neutral40
|
871 | }
|
872 | });
|
873 | };
|
874 | var dropdownIndicatorCSS = baseCSS;
|
875 | var DropdownIndicator = function DropdownIndicator(props) {
|
876 | var children = props.children,
|
877 | innerProps = props.innerProps;
|
878 | return react.jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
|
879 | indicator: true,
|
880 | 'dropdown-indicator': true
|
881 | }), innerProps), children || react.jsx(DownChevron, null));
|
882 | };
|
883 | var clearIndicatorCSS = baseCSS;
|
884 | var ClearIndicator = function ClearIndicator(props) {
|
885 | var children = props.children,
|
886 | innerProps = props.innerProps;
|
887 | return react.jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
|
888 | indicator: true,
|
889 | 'clear-indicator': true
|
890 | }), innerProps), children || react.jsx(CrossIcon, null));
|
891 | };
|
892 |
|
893 |
|
894 |
|
895 |
|
896 |
|
897 | var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
|
898 | var isDisabled = _ref4.isDisabled,
|
899 | _ref4$theme = _ref4.theme,
|
900 | baseUnit = _ref4$theme.spacing.baseUnit,
|
901 | colors = _ref4$theme.colors;
|
902 | return _objectSpread({
|
903 | label: 'indicatorSeparator',
|
904 | alignSelf: 'stretch',
|
905 | width: 1
|
906 | }, unstyled ? {} : {
|
907 | backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
|
908 | marginBottom: baseUnit * 2,
|
909 | marginTop: baseUnit * 2
|
910 | });
|
911 | };
|
912 | var IndicatorSeparator = function IndicatorSeparator(props) {
|
913 | var innerProps = props.innerProps;
|
914 | return react.jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
|
915 | 'indicator-separator': true
|
916 | })));
|
917 | };
|
918 |
|
919 |
|
920 |
|
921 |
|
922 |
|
923 | var loadingDotAnimations = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n"])));
|
924 | var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5, unstyled) {
|
925 | var isFocused = _ref5.isFocused,
|
926 | size = _ref5.size,
|
927 | _ref5$theme = _ref5.theme,
|
928 | colors = _ref5$theme.colors,
|
929 | baseUnit = _ref5$theme.spacing.baseUnit;
|
930 | return _objectSpread({
|
931 | label: 'loadingIndicator',
|
932 | display: 'flex',
|
933 | transition: 'color 150ms',
|
934 | alignSelf: 'center',
|
935 | fontSize: size,
|
936 | lineHeight: 1,
|
937 | marginRight: size,
|
938 | textAlign: 'center',
|
939 | verticalAlign: 'middle'
|
940 | }, unstyled ? {} : {
|
941 | color: isFocused ? colors.neutral60 : colors.neutral20,
|
942 | padding: baseUnit * 2
|
943 | });
|
944 | };
|
945 | var LoadingDot = function LoadingDot(_ref6) {
|
946 | var delay = _ref6.delay,
|
947 | offset = _ref6.offset;
|
948 | return react.jsx("span", {
|
949 | css: react.css({
|
950 | animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
|
951 | backgroundColor: 'currentColor',
|
952 | borderRadius: '1em',
|
953 | display: 'inline-block',
|
954 | marginLeft: offset ? '1em' : undefined,
|
955 | height: '1em',
|
956 | verticalAlign: 'top',
|
957 | width: '1em'
|
958 | }, "" , "" )
|
959 | });
|
960 | };
|
961 | var LoadingIndicator = function LoadingIndicator(_ref7) {
|
962 | var innerProps = _ref7.innerProps,
|
963 | isRtl = _ref7.isRtl,
|
964 | _ref7$size = _ref7.size,
|
965 | size = _ref7$size === void 0 ? 4 : _ref7$size,
|
966 | restProps = _objectWithoutProperties(_ref7, _excluded2);
|
967 | return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
968 | innerProps: innerProps,
|
969 | isRtl: isRtl,
|
970 | size: size
|
971 | }), 'loadingIndicator', {
|
972 | indicator: true,
|
973 | 'loading-indicator': true
|
974 | }), innerProps), react.jsx(LoadingDot, {
|
975 | delay: 0,
|
976 | offset: isRtl
|
977 | }), react.jsx(LoadingDot, {
|
978 | delay: 160,
|
979 | offset: true
|
980 | }), react.jsx(LoadingDot, {
|
981 | delay: 320,
|
982 | offset: !isRtl
|
983 | }));
|
984 | };
|
985 |
|
986 | var css$1 = function css(_ref, unstyled) {
|
987 | var isDisabled = _ref.isDisabled,
|
988 | isFocused = _ref.isFocused,
|
989 | _ref$theme = _ref.theme,
|
990 | colors = _ref$theme.colors,
|
991 | borderRadius = _ref$theme.borderRadius,
|
992 | spacing = _ref$theme.spacing;
|
993 | return _objectSpread({
|
994 | label: 'control',
|
995 | alignItems: 'center',
|
996 | cursor: 'default',
|
997 | display: 'flex',
|
998 | flexWrap: 'wrap',
|
999 | justifyContent: 'space-between',
|
1000 | minHeight: spacing.controlHeight,
|
1001 | outline: '0 !important',
|
1002 | position: 'relative',
|
1003 | transition: 'all 100ms'
|
1004 | }, unstyled ? {} : {
|
1005 | backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
|
1006 | borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
|
1007 | borderRadius: borderRadius,
|
1008 | borderStyle: 'solid',
|
1009 | borderWidth: 1,
|
1010 | boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
|
1011 | '&:hover': {
|
1012 | borderColor: isFocused ? colors.primary : colors.neutral30
|
1013 | }
|
1014 | });
|
1015 | };
|
1016 | var Control = function Control(props) {
|
1017 | var children = props.children,
|
1018 | isDisabled = props.isDisabled,
|
1019 | isFocused = props.isFocused,
|
1020 | innerRef = props.innerRef,
|
1021 | innerProps = props.innerProps,
|
1022 | menuIsOpen = props.menuIsOpen;
|
1023 | return react.jsx("div", _extends({
|
1024 | ref: innerRef
|
1025 | }, getStyleProps(props, 'control', {
|
1026 | control: true,
|
1027 | 'control--is-disabled': isDisabled,
|
1028 | 'control--is-focused': isFocused,
|
1029 | 'control--menu-is-open': menuIsOpen
|
1030 | }), innerProps, {
|
1031 | "aria-disabled": isDisabled || undefined
|
1032 | }), children);
|
1033 | };
|
1034 | var Control$1 = Control;
|
1035 |
|
1036 | var _excluded$1 = ["data"];
|
1037 | var groupCSS = function groupCSS(_ref, unstyled) {
|
1038 | var spacing = _ref.theme.spacing;
|
1039 | return unstyled ? {} : {
|
1040 | paddingBottom: spacing.baseUnit * 2,
|
1041 | paddingTop: spacing.baseUnit * 2
|
1042 | };
|
1043 | };
|
1044 | var Group = function Group(props) {
|
1045 | var children = props.children,
|
1046 | cx = props.cx,
|
1047 | getStyles = props.getStyles,
|
1048 | getClassNames = props.getClassNames,
|
1049 | Heading = props.Heading,
|
1050 | headingProps = props.headingProps,
|
1051 | innerProps = props.innerProps,
|
1052 | label = props.label,
|
1053 | theme = props.theme,
|
1054 | selectProps = props.selectProps;
|
1055 | return react.jsx("div", _extends({}, getStyleProps(props, 'group', {
|
1056 | group: true
|
1057 | }), innerProps), react.jsx(Heading, _extends({}, headingProps, {
|
1058 | selectProps: selectProps,
|
1059 | theme: theme,
|
1060 | getStyles: getStyles,
|
1061 | getClassNames: getClassNames,
|
1062 | cx: cx
|
1063 | }), label), react.jsx("div", null, children));
|
1064 | };
|
1065 | var groupHeadingCSS = function groupHeadingCSS(_ref2, unstyled) {
|
1066 | var _ref2$theme = _ref2.theme,
|
1067 | colors = _ref2$theme.colors,
|
1068 | spacing = _ref2$theme.spacing;
|
1069 | return _objectSpread({
|
1070 | label: 'group',
|
1071 | cursor: 'default',
|
1072 | display: 'block'
|
1073 | }, unstyled ? {} : {
|
1074 | color: colors.neutral40,
|
1075 | fontSize: '75%',
|
1076 | fontWeight: 500,
|
1077 | marginBottom: '0.25em',
|
1078 | paddingLeft: spacing.baseUnit * 3,
|
1079 | paddingRight: spacing.baseUnit * 3,
|
1080 | textTransform: 'uppercase'
|
1081 | });
|
1082 | };
|
1083 | var GroupHeading = function GroupHeading(props) {
|
1084 | var _cleanCommonProps = cleanCommonProps(props);
|
1085 | _cleanCommonProps.data;
|
1086 | var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
|
1087 | return react.jsx("div", _extends({}, getStyleProps(props, 'groupHeading', {
|
1088 | 'group-heading': true
|
1089 | }), innerProps));
|
1090 | };
|
1091 | var Group$1 = Group;
|
1092 |
|
1093 | var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
|
1094 | var inputCSS = function inputCSS(_ref, unstyled) {
|
1095 | var isDisabled = _ref.isDisabled,
|
1096 | value = _ref.value,
|
1097 | _ref$theme = _ref.theme,
|
1098 | spacing = _ref$theme.spacing,
|
1099 | colors = _ref$theme.colors;
|
1100 | return _objectSpread(_objectSpread({
|
1101 | visibility: isDisabled ? 'hidden' : 'visible',
|
1102 |
|
1103 |
|
1104 | transform: value ? 'translateZ(0)' : ''
|
1105 | }, containerStyle), unstyled ? {} : {
|
1106 | margin: spacing.baseUnit / 2,
|
1107 | paddingBottom: spacing.baseUnit / 2,
|
1108 | paddingTop: spacing.baseUnit / 2,
|
1109 | color: colors.neutral80
|
1110 | });
|
1111 | };
|
1112 | var spacingStyle = {
|
1113 | gridArea: '1 / 2',
|
1114 | font: 'inherit',
|
1115 | minWidth: '2px',
|
1116 | border: 0,
|
1117 | margin: 0,
|
1118 | outline: 0,
|
1119 | padding: 0
|
1120 | };
|
1121 | var containerStyle = {
|
1122 | flex: '1 1 auto',
|
1123 | display: 'inline-grid',
|
1124 | gridArea: '1 / 1 / 2 / 3',
|
1125 | gridTemplateColumns: '0 min-content',
|
1126 | '&:after': _objectSpread({
|
1127 | content: 'attr(data-value) " "',
|
1128 | visibility: 'hidden',
|
1129 | whiteSpace: 'pre'
|
1130 | }, spacingStyle)
|
1131 | };
|
1132 | var inputStyle = function inputStyle(isHidden) {
|
1133 | return _objectSpread({
|
1134 | label: 'input',
|
1135 | color: 'inherit',
|
1136 | background: 0,
|
1137 | opacity: isHidden ? 0 : 1,
|
1138 | width: '100%'
|
1139 | }, spacingStyle);
|
1140 | };
|
1141 | var Input = function Input(props) {
|
1142 | var cx = props.cx,
|
1143 | value = props.value;
|
1144 | var _cleanCommonProps = cleanCommonProps(props),
|
1145 | innerRef = _cleanCommonProps.innerRef,
|
1146 | isDisabled = _cleanCommonProps.isDisabled,
|
1147 | isHidden = _cleanCommonProps.isHidden,
|
1148 | inputClassName = _cleanCommonProps.inputClassName,
|
1149 | innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
|
1150 | return react.jsx("div", _extends({}, getStyleProps(props, 'input', {
|
1151 | 'input-container': true
|
1152 | }), {
|
1153 | "data-value": value || ''
|
1154 | }), react.jsx("input", _extends({
|
1155 | className: cx({
|
1156 | input: true
|
1157 | }, inputClassName),
|
1158 | ref: innerRef,
|
1159 | style: inputStyle(isHidden),
|
1160 | disabled: isDisabled
|
1161 | }, innerProps)));
|
1162 | };
|
1163 | var Input$1 = Input;
|
1164 |
|
1165 | var multiValueCSS = function multiValueCSS(_ref, unstyled) {
|
1166 | var _ref$theme = _ref.theme,
|
1167 | spacing = _ref$theme.spacing,
|
1168 | borderRadius = _ref$theme.borderRadius,
|
1169 | colors = _ref$theme.colors;
|
1170 | return _objectSpread({
|
1171 | label: 'multiValue',
|
1172 | display: 'flex',
|
1173 | minWidth: 0
|
1174 | }, unstyled ? {} : {
|
1175 | backgroundColor: colors.neutral10,
|
1176 | borderRadius: borderRadius / 2,
|
1177 | margin: spacing.baseUnit / 2
|
1178 | });
|
1179 | };
|
1180 | var multiValueLabelCSS = function multiValueLabelCSS(_ref2, unstyled) {
|
1181 | var _ref2$theme = _ref2.theme,
|
1182 | borderRadius = _ref2$theme.borderRadius,
|
1183 | colors = _ref2$theme.colors,
|
1184 | cropWithEllipsis = _ref2.cropWithEllipsis;
|
1185 | return _objectSpread({
|
1186 | overflow: 'hidden',
|
1187 | textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
|
1188 | whiteSpace: 'nowrap'
|
1189 | }, unstyled ? {} : {
|
1190 | borderRadius: borderRadius / 2,
|
1191 | color: colors.neutral80,
|
1192 | fontSize: '85%',
|
1193 | padding: 3,
|
1194 | paddingLeft: 6
|
1195 | });
|
1196 | };
|
1197 | var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3, unstyled) {
|
1198 | var _ref3$theme = _ref3.theme,
|
1199 | spacing = _ref3$theme.spacing,
|
1200 | borderRadius = _ref3$theme.borderRadius,
|
1201 | colors = _ref3$theme.colors,
|
1202 | isFocused = _ref3.isFocused;
|
1203 | return _objectSpread({
|
1204 | alignItems: 'center',
|
1205 | display: 'flex'
|
1206 | }, unstyled ? {} : {
|
1207 | borderRadius: borderRadius / 2,
|
1208 | backgroundColor: isFocused ? colors.dangerLight : undefined,
|
1209 | paddingLeft: spacing.baseUnit,
|
1210 | paddingRight: spacing.baseUnit,
|
1211 | ':hover': {
|
1212 | backgroundColor: colors.dangerLight,
|
1213 | color: colors.danger
|
1214 | }
|
1215 | });
|
1216 | };
|
1217 | var MultiValueGeneric = function MultiValueGeneric(_ref4) {
|
1218 | var children = _ref4.children,
|
1219 | innerProps = _ref4.innerProps;
|
1220 | return react.jsx("div", innerProps, children);
|
1221 | };
|
1222 | var MultiValueContainer = MultiValueGeneric;
|
1223 | var MultiValueLabel = MultiValueGeneric;
|
1224 | function MultiValueRemove(_ref5) {
|
1225 | var children = _ref5.children,
|
1226 | innerProps = _ref5.innerProps;
|
1227 | return react.jsx("div", _extends({
|
1228 | role: "button"
|
1229 | }, innerProps), children || react.jsx(CrossIcon, {
|
1230 | size: 14
|
1231 | }));
|
1232 | }
|
1233 | var MultiValue = function MultiValue(props) {
|
1234 | var children = props.children,
|
1235 | components = props.components,
|
1236 | data = props.data,
|
1237 | innerProps = props.innerProps,
|
1238 | isDisabled = props.isDisabled,
|
1239 | removeProps = props.removeProps,
|
1240 | selectProps = props.selectProps;
|
1241 | var Container = components.Container,
|
1242 | Label = components.Label,
|
1243 | Remove = components.Remove;
|
1244 | return react.jsx(Container, {
|
1245 | data: data,
|
1246 | innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValue', {
|
1247 | 'multi-value': true,
|
1248 | 'multi-value--is-disabled': isDisabled
|
1249 | })), innerProps),
|
1250 | selectProps: selectProps
|
1251 | }, react.jsx(Label, {
|
1252 | data: data,
|
1253 | innerProps: _objectSpread({}, getStyleProps(props, 'multiValueLabel', {
|
1254 | 'multi-value__label': true
|
1255 | })),
|
1256 | selectProps: selectProps
|
1257 | }, children), react.jsx(Remove, {
|
1258 | data: data,
|
1259 | innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
|
1260 | 'multi-value__remove': true
|
1261 | })), {}, {
|
1262 | 'aria-label': "Remove ".concat(children || 'option')
|
1263 | }, removeProps),
|
1264 | selectProps: selectProps
|
1265 | }));
|
1266 | };
|
1267 | var MultiValue$1 = MultiValue;
|
1268 |
|
1269 | var optionCSS = function optionCSS(_ref, unstyled) {
|
1270 | var isDisabled = _ref.isDisabled,
|
1271 | isFocused = _ref.isFocused,
|
1272 | isSelected = _ref.isSelected,
|
1273 | _ref$theme = _ref.theme,
|
1274 | spacing = _ref$theme.spacing,
|
1275 | colors = _ref$theme.colors;
|
1276 | return _objectSpread({
|
1277 | label: 'option',
|
1278 | cursor: 'default',
|
1279 | display: 'block',
|
1280 | fontSize: 'inherit',
|
1281 | width: '100%',
|
1282 | userSelect: 'none',
|
1283 | WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)'
|
1284 | }, unstyled ? {} : {
|
1285 | backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
|
1286 | color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
|
1287 | padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
|
1288 |
|
1289 | ':active': {
|
1290 | backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
|
1291 | }
|
1292 | });
|
1293 | };
|
1294 | var Option = function Option(props) {
|
1295 | var children = props.children,
|
1296 | isDisabled = props.isDisabled,
|
1297 | isFocused = props.isFocused,
|
1298 | isSelected = props.isSelected,
|
1299 | innerRef = props.innerRef,
|
1300 | innerProps = props.innerProps;
|
1301 | return react.jsx("div", _extends({}, getStyleProps(props, 'option', {
|
1302 | option: true,
|
1303 | 'option--is-disabled': isDisabled,
|
1304 | 'option--is-focused': isFocused,
|
1305 | 'option--is-selected': isSelected
|
1306 | }), {
|
1307 | ref: innerRef,
|
1308 | "aria-disabled": isDisabled
|
1309 | }, innerProps), children);
|
1310 | };
|
1311 | var Option$1 = Option;
|
1312 |
|
1313 | var placeholderCSS = function placeholderCSS(_ref, unstyled) {
|
1314 | var _ref$theme = _ref.theme,
|
1315 | spacing = _ref$theme.spacing,
|
1316 | colors = _ref$theme.colors;
|
1317 | return _objectSpread({
|
1318 | label: 'placeholder',
|
1319 | gridArea: '1 / 1 / 2 / 3'
|
1320 | }, unstyled ? {} : {
|
1321 | color: colors.neutral50,
|
1322 | marginLeft: spacing.baseUnit / 2,
|
1323 | marginRight: spacing.baseUnit / 2
|
1324 | });
|
1325 | };
|
1326 | var Placeholder = function Placeholder(props) {
|
1327 | var children = props.children,
|
1328 | innerProps = props.innerProps;
|
1329 | return react.jsx("div", _extends({}, getStyleProps(props, 'placeholder', {
|
1330 | placeholder: true
|
1331 | }), innerProps), children);
|
1332 | };
|
1333 | var Placeholder$1 = Placeholder;
|
1334 |
|
1335 | var css = function css(_ref, unstyled) {
|
1336 | var isDisabled = _ref.isDisabled,
|
1337 | _ref$theme = _ref.theme,
|
1338 | spacing = _ref$theme.spacing,
|
1339 | colors = _ref$theme.colors;
|
1340 | return _objectSpread({
|
1341 | label: 'singleValue',
|
1342 | gridArea: '1 / 1 / 2 / 3',
|
1343 | maxWidth: '100%',
|
1344 | overflow: 'hidden',
|
1345 | textOverflow: 'ellipsis',
|
1346 | whiteSpace: 'nowrap'
|
1347 | }, unstyled ? {} : {
|
1348 | color: isDisabled ? colors.neutral40 : colors.neutral80,
|
1349 | marginLeft: spacing.baseUnit / 2,
|
1350 | marginRight: spacing.baseUnit / 2
|
1351 | });
|
1352 | };
|
1353 | var SingleValue = function SingleValue(props) {
|
1354 | var children = props.children,
|
1355 | isDisabled = props.isDisabled,
|
1356 | innerProps = props.innerProps;
|
1357 | return react.jsx("div", _extends({}, getStyleProps(props, 'singleValue', {
|
1358 | 'single-value': true,
|
1359 | 'single-value--is-disabled': isDisabled
|
1360 | }), innerProps), children);
|
1361 | };
|
1362 | var SingleValue$1 = SingleValue;
|
1363 |
|
1364 | var components = {
|
1365 | ClearIndicator: ClearIndicator,
|
1366 | Control: Control$1,
|
1367 | DropdownIndicator: DropdownIndicator,
|
1368 | DownChevron: DownChevron,
|
1369 | CrossIcon: CrossIcon,
|
1370 | Group: Group$1,
|
1371 | GroupHeading: GroupHeading,
|
1372 | IndicatorsContainer: IndicatorsContainer,
|
1373 | IndicatorSeparator: IndicatorSeparator,
|
1374 | Input: Input$1,
|
1375 | LoadingIndicator: LoadingIndicator,
|
1376 | Menu: Menu$1,
|
1377 | MenuList: MenuList,
|
1378 | MenuPortal: MenuPortal,
|
1379 | LoadingMessage: LoadingMessage,
|
1380 | NoOptionsMessage: NoOptionsMessage,
|
1381 | MultiValue: MultiValue$1,
|
1382 | MultiValueContainer: MultiValueContainer,
|
1383 | MultiValueLabel: MultiValueLabel,
|
1384 | MultiValueRemove: MultiValueRemove,
|
1385 | Option: Option$1,
|
1386 | Placeholder: Placeholder$1,
|
1387 | SelectContainer: SelectContainer,
|
1388 | SingleValue: SingleValue$1,
|
1389 | ValueContainer: ValueContainer
|
1390 | };
|
1391 | var defaultComponents = function defaultComponents(props) {
|
1392 | return _objectSpread(_objectSpread({}, components), props.components);
|
1393 | };
|
1394 |
|
1395 | exports.MenuPlacer = MenuPlacer;
|
1396 | exports.classNames = classNames;
|
1397 | exports.cleanValue = cleanValue;
|
1398 | exports.clearIndicatorCSS = clearIndicatorCSS;
|
1399 | exports.components = components;
|
1400 | exports.containerCSS = containerCSS;
|
1401 | exports.css = css$1;
|
1402 | exports.css$1 = css;
|
1403 | exports.defaultComponents = defaultComponents;
|
1404 | exports.dropdownIndicatorCSS = dropdownIndicatorCSS;
|
1405 | exports.groupCSS = groupCSS;
|
1406 | exports.groupHeadingCSS = groupHeadingCSS;
|
1407 | exports.handleInputChange = handleInputChange;
|
1408 | exports.indicatorSeparatorCSS = indicatorSeparatorCSS;
|
1409 | exports.indicatorsContainerCSS = indicatorsContainerCSS;
|
1410 | exports.inputCSS = inputCSS;
|
1411 | exports.isDocumentElement = isDocumentElement;
|
1412 | exports.isMobileDevice = isMobileDevice;
|
1413 | exports.isTouchCapable = isTouchCapable;
|
1414 | exports.loadingIndicatorCSS = loadingIndicatorCSS;
|
1415 | exports.loadingMessageCSS = loadingMessageCSS;
|
1416 | exports.menuCSS = menuCSS;
|
1417 | exports.menuListCSS = menuListCSS;
|
1418 | exports.menuPortalCSS = menuPortalCSS;
|
1419 | exports.multiValueAsValue = multiValueAsValue;
|
1420 | exports.multiValueCSS = multiValueCSS;
|
1421 | exports.multiValueLabelCSS = multiValueLabelCSS;
|
1422 | exports.multiValueRemoveCSS = multiValueRemoveCSS;
|
1423 | exports.noOptionsMessageCSS = noOptionsMessageCSS;
|
1424 | exports.noop = noop;
|
1425 | exports.notNullish = notNullish;
|
1426 | exports.optionCSS = optionCSS;
|
1427 | exports.placeholderCSS = placeholderCSS;
|
1428 | exports.removeProps = removeProps;
|
1429 | exports.scrollIntoView = scrollIntoView;
|
1430 | exports.singleValueAsValue = singleValueAsValue;
|
1431 | exports.supportsPassiveEvents = supportsPassiveEvents;
|
1432 | exports.valueContainerCSS = valueContainerCSS;
|
1433 | exports.valueTernary = valueTernary;
|