react-select
Version:
A Select control built with and for ReactJS
1,434 lines (1,350 loc) • 46.9 kB
JavaScript
'use strict';
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _extends = require('@babel/runtime/helpers/extends');
var react = require('@emotion/react');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _typeof = require('@babel/runtime/helpers/typeof');
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var reactDom = require('react-dom');
var dom = require('@floating-ui/dom');
var useLayoutEffect = require('use-isomorphic-layout-effect');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var useLayoutEffect__default = /*#__PURE__*/_interopDefault(useLayoutEffect);
var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
// ==============================
// NO OP
// ==============================
var noop = function noop() {};
// ==============================
// Class Name Prefixer
// ==============================
/**
String representation of component state for styling with class names.
Expects an array of strings OR a string/object pair:
- className(['comp', 'comp-arg', 'comp-arg-2'])
@returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'
- className('comp', { some: true, state: false })
@returns 'react-select__comp react-select__comp--some'
*/
function applyPrefixToName(prefix, name) {
if (!name) {
return prefix;
} else if (name[0] === '-') {
return prefix + name;
} else {
return prefix + '__' + name;
}
}
function classNames(prefix, state) {
for (var _len = arguments.length, classNameList = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
classNameList[_key - 2] = arguments[_key];
}
var arr = [].concat(classNameList);
if (state && prefix) {
for (var key in state) {
if (state.hasOwnProperty(key) && state[key]) {
arr.push("".concat(applyPrefixToName(prefix, key)));
}
}
}
return arr.filter(function (i) {
return i;
}).map(function (i) {
return String(i).trim();
}).join(' ');
}
// ==============================
// Clean Value
// ==============================
var cleanValue = function cleanValue(value) {
if (isArray(value)) return value.filter(Boolean);
if (_typeof(value) === 'object' && value !== null) return [value];
return [];
};
// ==============================
// Clean Common Props
// ==============================
var cleanCommonProps = function cleanCommonProps(props) {
//className
props.className;
props.clearValue;
props.cx;
props.getStyles;
props.getClassNames;
props.getValue;
props.hasValue;
props.isMulti;
props.isRtl;
props.options;
props.selectOption;
props.selectProps;
props.setValue;
props.theme;
var innerProps = _objectWithoutProperties(props, _excluded$4);
return _objectSpread({}, innerProps);
};
// ==============================
// Get Style Props
// ==============================
var getStyleProps = function getStyleProps(props, name, classNamesState) {
var cx = props.cx,
getStyles = props.getStyles,
getClassNames = props.getClassNames,
className = props.className;
return {
css: getStyles(name, props),
className: cx(classNamesState !== null && classNamesState !== void 0 ? classNamesState : {}, getClassNames(name, props), className)
};
};
// ==============================
// Handle Input Change
// ==============================
function handleInputChange(inputValue, actionMeta, onInputChange) {
if (onInputChange) {
var _newValue = onInputChange(inputValue, actionMeta);
if (typeof _newValue === 'string') return _newValue;
}
return inputValue;
}
// ==============================
// Scroll Helpers
// ==============================
function isDocumentElement(el) {
return [document.documentElement, document.body, window].indexOf(el) > -1;
}
// Normalized Scroll Top
// ------------------------------
function normalizedHeight(el) {
if (isDocumentElement(el)) {
return window.innerHeight;
}
return el.clientHeight;
}
// Normalized scrollTo & scrollTop
// ------------------------------
function getScrollTop(el) {
if (isDocumentElement(el)) {
return window.pageYOffset;
}
return el.scrollTop;
}
function scrollTo(el, top) {
// with a scroll distance, we perform scroll on the element
if (isDocumentElement(el)) {
window.scrollTo(0, top);
return;
}
el.scrollTop = top;
}
// Get Scroll Parent
// ------------------------------
function getScrollParent(element) {
var style = getComputedStyle(element);
var excludeStaticParent = style.position === 'absolute';
var overflowRx = /(auto|scroll)/;
if (style.position === 'fixed') return document.documentElement;
for (var parent = element; parent = parent.parentElement;) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === 'static') {
continue;
}
if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
return parent;
}
}
return document.documentElement;
}
// Animated Scroll To
// ------------------------------
/**
@param t: time (elapsed)
@param b: initial value
@param c: amount of change
@param d: duration
*/
function easeOutCubic(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
function animatedScrollTo(element, to) {
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
var start = getScrollTop(element);
var change = to - start;
var increment = 10;
var currentTime = 0;
function animateScroll() {
currentTime += increment;
var val = easeOutCubic(currentTime, start, change, duration);
scrollTo(element, val);
if (currentTime < duration) {
window.requestAnimationFrame(animateScroll);
} else {
callback(element);
}
}
animateScroll();
}
// Scroll Into View
// ------------------------------
function scrollIntoView(menuEl, focusedEl) {
var menuRect = menuEl.getBoundingClientRect();
var focusedRect = focusedEl.getBoundingClientRect();
var overScroll = focusedEl.offsetHeight / 3;
if (focusedRect.bottom + overScroll > menuRect.bottom) {
scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
} else if (focusedRect.top - overScroll < menuRect.top) {
scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
}
}
// ==============================
// Get bounding client object
// ==============================
// cannot get keys using array notation with DOMRect
function getBoundingClientObj(element) {
var rect = element.getBoundingClientRect();
return {
bottom: rect.bottom,
height: rect.height,
left: rect.left,
right: rect.right,
top: rect.top,
width: rect.width
};
}
// ==============================
// Touch Capability Detector
// ==============================
function isTouchCapable() {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
}
// ==============================
// Mobile Device Detector
// ==============================
function isMobileDevice() {
try {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
} catch (e) {
return false;
}
}
// ==============================
// Passive Event Detector
// ==============================
// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
var passiveOptionAccessed = false;
var options = {
get passive() {
return passiveOptionAccessed = true;
}
};
// check for SSR
var w = typeof window !== 'undefined' ? window : {};
if (w.addEventListener && w.removeEventListener) {
w.addEventListener('p', noop, options);
w.removeEventListener('p', noop, false);
}
var supportsPassiveEvents = passiveOptionAccessed;
function notNullish(item) {
return item != null;
}
function isArray(arg) {
return Array.isArray(arg);
}
function valueTernary(isMulti, multiValue, singleValue) {
return isMulti ? multiValue : singleValue;
}
function singleValueAsValue(singleValue) {
return singleValue;
}
function multiValueAsValue(multiValue) {
return multiValue;
}
var removeProps = function removeProps(propsObj) {
for (var _len2 = arguments.length, properties = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
properties[_key2 - 1] = arguments[_key2];
}
var propsMap = Object.entries(propsObj).filter(function (_ref) {
var _ref2 = _slicedToArray(_ref, 1),
key = _ref2[0];
return !properties.includes(key);
});
return propsMap.reduce(function (newProps, _ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
key = _ref4[0],
val = _ref4[1];
newProps[key] = val;
return newProps;
}, {});
};
var _excluded$3 = ["children", "innerProps"],
_excluded2$1 = ["children", "innerProps"];
function getMenuPlacement(_ref) {
var preferredMaxHeight = _ref.maxHeight,
menuEl = _ref.menuEl,
minHeight = _ref.minHeight,
preferredPlacement = _ref.placement,
shouldScroll = _ref.shouldScroll,
isFixedPosition = _ref.isFixedPosition,
controlHeight = _ref.controlHeight;
var scrollParent = getScrollParent(menuEl);
var defaultState = {
placement: 'bottom',
maxHeight: preferredMaxHeight
};
// something went wrong, return default state
if (!menuEl || !menuEl.offsetParent) return defaultState;
// we can't trust `scrollParent.scrollHeight` --> it may increase when
// the menu is rendered
var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
scrollHeight = _scrollParent$getBoun.height;
var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
menuBottom = _menuEl$getBoundingCl.bottom,
menuHeight = _menuEl$getBoundingCl.height,
menuTop = _menuEl$getBoundingCl.top;
var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
containerTop = _menuEl$offsetParent$.top;
var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
var scrollTop = getScrollTop(scrollParent);
var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
var viewSpaceAbove = containerTop - marginTop;
var viewSpaceBelow = viewHeight - menuTop;
var scrollSpaceAbove = viewSpaceAbove + scrollTop;
var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
var scrollUp = scrollTop + menuTop - marginTop;
var scrollDuration = 160;
switch (preferredPlacement) {
case 'auto':
case 'bottom':
// 1: the menu will fit, do nothing
if (viewSpaceBelow >= menuHeight) {
return {
placement: 'bottom',
maxHeight: preferredMaxHeight
};
}
// 2: the menu will fit, if scrolled
if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollDown, scrollDuration);
}
return {
placement: 'bottom',
maxHeight: preferredMaxHeight
};
}
// 3: the menu will fit, if constrained
if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollDown, scrollDuration);
}
// we want to provide as much of the menu as possible to the user,
// so give them whatever is available below rather than the minHeight.
var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
return {
placement: 'bottom',
maxHeight: constrainedHeight
};
}
// 4. Forked beviour when there isn't enough space below
// AUTO: flip the menu, render above
if (preferredPlacement === 'auto' || isFixedPosition) {
// may need to be constrained after flipping
var _constrainedHeight = preferredMaxHeight;
var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
if (spaceAbove >= minHeight) {
_constrainedHeight = Math.min(spaceAbove - marginBottom - controlHeight, preferredMaxHeight);
}
return {
placement: 'top',
maxHeight: _constrainedHeight
};
}
// BOTTOM: allow browser to increase scrollable area and immediately set scroll
if (preferredPlacement === 'bottom') {
if (shouldScroll) {
scrollTo(scrollParent, scrollDown);
}
return {
placement: 'bottom',
maxHeight: preferredMaxHeight
};
}
break;
case 'top':
// 1: the menu will fit, do nothing
if (viewSpaceAbove >= menuHeight) {
return {
placement: 'top',
maxHeight: preferredMaxHeight
};
}
// 2: the menu will fit, if scrolled
if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollUp, scrollDuration);
}
return {
placement: 'top',
maxHeight: preferredMaxHeight
};
}
// 3: the menu will fit, if constrained
if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
var _constrainedHeight2 = preferredMaxHeight;
// we want to provide as much of the menu as possible to the user,
// so give them whatever is available below rather than the minHeight.
if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
_constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
}
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollUp, scrollDuration);
}
return {
placement: 'top',
maxHeight: _constrainedHeight2
};
}
// 4. not enough space, the browser WILL NOT increase scrollable area when
// absolutely positioned element rendered above the viewport (only below).
// Flip the menu, render below
return {
placement: 'bottom',
maxHeight: preferredMaxHeight
};
default:
throw new Error("Invalid placement provided \"".concat(preferredPlacement, "\"."));
}
return defaultState;
}
// Menu Component
// ------------------------------
function alignToControl(placement) {
var placementToCSSProp = {
bottom: 'top',
top: 'bottom'
};
return placement ? placementToCSSProp[placement] : 'bottom';
}
var coercePlacement = function coercePlacement(p) {
return p === 'auto' ? 'bottom' : p;
};
var menuCSS = function menuCSS(_ref2, unstyled) {
var _objectSpread2;
var placement = _ref2.placement,
_ref2$theme = _ref2.theme,
borderRadius = _ref2$theme.borderRadius,
spacing = _ref2$theme.spacing,
colors = _ref2$theme.colors;
return _objectSpread((_objectSpread2 = {
label: 'menu'
}, _defineProperty(_objectSpread2, alignToControl(placement), '100%'), _defineProperty(_objectSpread2, "position", 'absolute'), _defineProperty(_objectSpread2, "width", '100%'), _defineProperty(_objectSpread2, "zIndex", 1), _objectSpread2), unstyled ? {} : {
backgroundColor: colors.neutral0,
borderRadius: borderRadius,
boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
marginBottom: spacing.menuGutter,
marginTop: spacing.menuGutter
});
};
var PortalPlacementContext = /*#__PURE__*/React.createContext(null);
// NOTE: internal only
var MenuPlacer = function MenuPlacer(props) {
var children = props.children,
minMenuHeight = props.minMenuHeight,
maxMenuHeight = props.maxMenuHeight,
menuPlacement = props.menuPlacement,
menuPosition = props.menuPosition,
menuShouldScrollIntoView = props.menuShouldScrollIntoView,
theme = props.theme;
var _ref3 = React.useContext(PortalPlacementContext) || {},
setPortalPlacement = _ref3.setPortalPlacement;
var ref = React.useRef(null);
var _useState = React.useState(maxMenuHeight),
_useState2 = _slicedToArray(_useState, 2),
maxHeight = _useState2[0],
setMaxHeight = _useState2[1];
var _useState3 = React.useState(null),
_useState4 = _slicedToArray(_useState3, 2),
placement = _useState4[0],
setPlacement = _useState4[1];
var controlHeight = theme.spacing.controlHeight;
useLayoutEffect__default["default"](function () {
var menuEl = ref.current;
if (!menuEl) return;
// DO NOT scroll if position is fixed
var isFixedPosition = menuPosition === 'fixed';
var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
var state = getMenuPlacement({
maxHeight: maxMenuHeight,
menuEl: menuEl,
minHeight: minMenuHeight,
placement: menuPlacement,
shouldScroll: shouldScroll,
isFixedPosition: isFixedPosition,
controlHeight: controlHeight
});
setMaxHeight(state.maxHeight);
setPlacement(state.placement);
setPortalPlacement === null || setPortalPlacement === void 0 ? void 0 : setPortalPlacement(state.placement);
}, [maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, setPortalPlacement, controlHeight]);
return children({
ref: ref,
placerProps: _objectSpread(_objectSpread({}, props), {}, {
placement: placement || coercePlacement(menuPlacement),
maxHeight: maxHeight
})
});
};
var Menu = function Menu(props) {
var children = props.children,
innerRef = props.innerRef,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'menu', {
menu: true
}), {
ref: innerRef
}, innerProps), children);
};
var Menu$1 = Menu;
// ==============================
// Menu List
// ==============================
var menuListCSS = function menuListCSS(_ref4, unstyled) {
var maxHeight = _ref4.maxHeight,
baseUnit = _ref4.theme.spacing.baseUnit;
return _objectSpread({
maxHeight: maxHeight,
overflowY: 'auto',
position: 'relative',
// required for offset[Height, Top] > keyboard scroll
WebkitOverflowScrolling: 'touch'
}, unstyled ? {} : {
paddingBottom: baseUnit,
paddingTop: baseUnit
});
};
var MenuList = function MenuList(props) {
var children = props.children,
innerProps = props.innerProps,
innerRef = props.innerRef,
isMulti = props.isMulti;
return react.jsx("div", _extends({}, getStyleProps(props, 'menuList', {
'menu-list': true,
'menu-list--is-multi': isMulti
}), {
ref: innerRef
}, innerProps), children);
};
// ==============================
// Menu Notices
// ==============================
var noticeCSS = function noticeCSS(_ref5, unstyled) {
var _ref5$theme = _ref5.theme,
baseUnit = _ref5$theme.spacing.baseUnit,
colors = _ref5$theme.colors;
return _objectSpread({
textAlign: 'center'
}, unstyled ? {} : {
color: colors.neutral40,
padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
});
};
var noOptionsMessageCSS = noticeCSS;
var loadingMessageCSS = noticeCSS;
var NoOptionsMessage = function NoOptionsMessage(_ref6) {
var _ref6$children = _ref6.children,
children = _ref6$children === void 0 ? 'No options' : _ref6$children,
innerProps = _ref6.innerProps,
restProps = _objectWithoutProperties(_ref6, _excluded$3);
return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
children: children,
innerProps: innerProps
}), 'noOptionsMessage', {
'menu-notice': true,
'menu-notice--no-options': true
}), innerProps), children);
};
var LoadingMessage = function LoadingMessage(_ref7) {
var _ref7$children = _ref7.children,
children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
innerProps = _ref7.innerProps,
restProps = _objectWithoutProperties(_ref7, _excluded2$1);
return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
children: children,
innerProps: innerProps
}), 'loadingMessage', {
'menu-notice': true,
'menu-notice--loading': true
}), innerProps), children);
};
// ==============================
// Menu Portal
// ==============================
var menuPortalCSS = function menuPortalCSS(_ref8) {
var rect = _ref8.rect,
offset = _ref8.offset,
position = _ref8.position;
return {
left: rect.left,
position: position,
top: offset,
width: rect.width,
zIndex: 1
};
};
var MenuPortal = function MenuPortal(props) {
var appendTo = props.appendTo,
children = props.children,
controlElement = props.controlElement,
innerProps = props.innerProps,
menuPlacement = props.menuPlacement,
menuPosition = props.menuPosition;
var menuPortalRef = React.useRef(null);
var cleanupRef = React.useRef(null);
var _useState5 = React.useState(coercePlacement(menuPlacement)),
_useState6 = _slicedToArray(_useState5, 2),
placement = _useState6[0],
setPortalPlacement = _useState6[1];
var portalPlacementContext = React.useMemo(function () {
return {
setPortalPlacement: setPortalPlacement
};
}, []);
var _useState7 = React.useState(null),
_useState8 = _slicedToArray(_useState7, 2),
computedPosition = _useState8[0],
setComputedPosition = _useState8[1];
var updateComputedPosition = React.useCallback(function () {
if (!controlElement) return;
var rect = getBoundingClientObj(controlElement);
var scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
var offset = rect[placement] + scrollDistance;
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)) {
setComputedPosition({
offset: offset,
rect: rect
});
}
}, [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]);
useLayoutEffect__default["default"](function () {
updateComputedPosition();
}, [updateComputedPosition]);
var runAutoUpdate = React.useCallback(function () {
if (typeof cleanupRef.current === 'function') {
cleanupRef.current();
cleanupRef.current = null;
}
if (controlElement && menuPortalRef.current) {
cleanupRef.current = dom.autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
elementResize: 'ResizeObserver' in window
});
}
}, [controlElement, updateComputedPosition]);
useLayoutEffect__default["default"](function () {
runAutoUpdate();
}, [runAutoUpdate]);
var setMenuPortalElement = React.useCallback(function (menuPortalElement) {
menuPortalRef.current = menuPortalElement;
runAutoUpdate();
}, [runAutoUpdate]);
// bail early if required elements aren't present
if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
// same wrapper element whether fixed or portalled
var menuWrapper = react.jsx("div", _extends({
ref: setMenuPortalElement
}, getStyleProps(_objectSpread(_objectSpread({}, props), {}, {
offset: computedPosition.offset,
position: menuPosition,
rect: computedPosition.rect
}), 'menuPortal', {
'menu-portal': true
}), innerProps), children);
return react.jsx(PortalPlacementContext.Provider, {
value: portalPlacementContext
}, appendTo ? /*#__PURE__*/reactDom.createPortal(menuWrapper, appendTo) : menuWrapper);
};
// ==============================
// Root Container
// ==============================
var containerCSS = function containerCSS(_ref) {
var isDisabled = _ref.isDisabled,
isRtl = _ref.isRtl;
return {
label: 'container',
direction: isRtl ? 'rtl' : undefined,
pointerEvents: isDisabled ? 'none' : undefined,
// cancel mouse events when disabled
position: 'relative'
};
};
var SelectContainer = function SelectContainer(props) {
var children = props.children,
innerProps = props.innerProps,
isDisabled = props.isDisabled,
isRtl = props.isRtl;
return react.jsx("div", _extends({}, getStyleProps(props, 'container', {
'--is-disabled': isDisabled,
'--is-rtl': isRtl
}), innerProps), children);
};
// ==============================
// Value Container
// ==============================
var valueContainerCSS = function valueContainerCSS(_ref2, unstyled) {
var spacing = _ref2.theme.spacing,
isMulti = _ref2.isMulti,
hasValue = _ref2.hasValue,
controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
return _objectSpread({
alignItems: 'center',
display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
flex: 1,
flexWrap: 'wrap',
WebkitOverflowScrolling: 'touch',
position: 'relative',
overflow: 'hidden'
}, unstyled ? {} : {
padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
});
};
var ValueContainer = function ValueContainer(props) {
var children = props.children,
innerProps = props.innerProps,
isMulti = props.isMulti,
hasValue = props.hasValue;
return react.jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
'value-container': true,
'value-container--is-multi': isMulti,
'value-container--has-value': hasValue
}), innerProps), children);
};
// ==============================
// Indicator Container
// ==============================
var indicatorsContainerCSS = function indicatorsContainerCSS() {
return {
alignItems: 'center',
alignSelf: 'stretch',
display: 'flex',
flexShrink: 0
};
};
var IndicatorsContainer = function IndicatorsContainer(props) {
var children = props.children,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
indicators: true
}), innerProps), children);
};
var _templateObject;
var _excluded$2 = ["size"],
_excluded2 = ["innerProps", "isRtl", "size"];
// ==============================
// Dropdown & Clear Icons
// ==============================
var _ref2 = {
name: "8mmkcg",
styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0"
} ;
var Svg = function Svg(_ref) {
var size = _ref.size,
props = _objectWithoutProperties(_ref, _excluded$2);
return react.jsx("svg", _extends({
height: size,
width: size,
viewBox: "0 0 20 20",
"aria-hidden": "true",
focusable: "false",
css: _ref2
}, props));
};
var CrossIcon = function CrossIcon(props) {
return react.jsx(Svg, _extends({
size: 20
}, props), react.jsx("path", {
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"
}));
};
var DownChevron = function DownChevron(props) {
return react.jsx(Svg, _extends({
size: 20
}, props), react.jsx("path", {
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"
}));
};
// ==============================
// Dropdown & Clear Buttons
// ==============================
var baseCSS = function baseCSS(_ref3, unstyled) {
var isFocused = _ref3.isFocused,
_ref3$theme = _ref3.theme,
baseUnit = _ref3$theme.spacing.baseUnit,
colors = _ref3$theme.colors;
return _objectSpread({
label: 'indicatorContainer',
display: 'flex',
transition: 'color 150ms'
}, unstyled ? {} : {
color: isFocused ? colors.neutral60 : colors.neutral20,
padding: baseUnit * 2,
':hover': {
color: isFocused ? colors.neutral80 : colors.neutral40
}
});
};
var dropdownIndicatorCSS = baseCSS;
var DropdownIndicator = function DropdownIndicator(props) {
var children = props.children,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
indicator: true,
'dropdown-indicator': true
}), innerProps), children || react.jsx(DownChevron, null));
};
var clearIndicatorCSS = baseCSS;
var ClearIndicator = function ClearIndicator(props) {
var children = props.children,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
indicator: true,
'clear-indicator': true
}), innerProps), children || react.jsx(CrossIcon, null));
};
// ==============================
// Separator
// ==============================
var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
var isDisabled = _ref4.isDisabled,
_ref4$theme = _ref4.theme,
baseUnit = _ref4$theme.spacing.baseUnit,
colors = _ref4$theme.colors;
return _objectSpread({
label: 'indicatorSeparator',
alignSelf: 'stretch',
width: 1
}, unstyled ? {} : {
backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
marginBottom: baseUnit * 2,
marginTop: baseUnit * 2
});
};
var IndicatorSeparator = function IndicatorSeparator(props) {
var innerProps = props.innerProps;
return react.jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
'indicator-separator': true
})));
};
// ==============================
// Loading
// ==============================
var loadingDotAnimations = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n"])));
var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5, unstyled) {
var isFocused = _ref5.isFocused,
size = _ref5.size,
_ref5$theme = _ref5.theme,
colors = _ref5$theme.colors,
baseUnit = _ref5$theme.spacing.baseUnit;
return _objectSpread({
label: 'loadingIndicator',
display: 'flex',
transition: 'color 150ms',
alignSelf: 'center',
fontSize: size,
lineHeight: 1,
marginRight: size,
textAlign: 'center',
verticalAlign: 'middle'
}, unstyled ? {} : {
color: isFocused ? colors.neutral60 : colors.neutral20,
padding: baseUnit * 2
});
};
var LoadingDot = function LoadingDot(_ref6) {
var delay = _ref6.delay,
offset = _ref6.offset;
return react.jsx("span", {
css: /*#__PURE__*/react.css({
animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
backgroundColor: 'currentColor',
borderRadius: '1em',
display: 'inline-block',
marginLeft: offset ? '1em' : undefined,
height: '1em',
verticalAlign: 'top',
width: '1em'
}, "" , "" )
});
};
var LoadingIndicator = function LoadingIndicator(_ref7) {
var innerProps = _ref7.innerProps,
isRtl = _ref7.isRtl,
_ref7$size = _ref7.size,
size = _ref7$size === void 0 ? 4 : _ref7$size,
restProps = _objectWithoutProperties(_ref7, _excluded2);
return react.jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
innerProps: innerProps,
isRtl: isRtl,
size: size
}), 'loadingIndicator', {
indicator: true,
'loading-indicator': true
}), innerProps), react.jsx(LoadingDot, {
delay: 0,
offset: isRtl
}), react.jsx(LoadingDot, {
delay: 160,
offset: true
}), react.jsx(LoadingDot, {
delay: 320,
offset: !isRtl
}));
};
var css$1 = function css(_ref, unstyled) {
var isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,
_ref$theme = _ref.theme,
colors = _ref$theme.colors,
borderRadius = _ref$theme.borderRadius,
spacing = _ref$theme.spacing;
return _objectSpread({
label: 'control',
alignItems: 'center',
cursor: 'default',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
minHeight: spacing.controlHeight,
outline: '0 !important',
position: 'relative',
transition: 'all 100ms'
}, unstyled ? {} : {
backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
borderRadius: borderRadius,
borderStyle: 'solid',
borderWidth: 1,
boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
'&:hover': {
borderColor: isFocused ? colors.primary : colors.neutral30
}
});
};
var Control = function Control(props) {
var children = props.children,
isDisabled = props.isDisabled,
isFocused = props.isFocused,
innerRef = props.innerRef,
innerProps = props.innerProps,
menuIsOpen = props.menuIsOpen;
return react.jsx("div", _extends({
ref: innerRef
}, getStyleProps(props, 'control', {
control: true,
'control--is-disabled': isDisabled,
'control--is-focused': isFocused,
'control--menu-is-open': menuIsOpen
}), innerProps, {
"aria-disabled": isDisabled || undefined
}), children);
};
var Control$1 = Control;
var _excluded$1 = ["data"];
var groupCSS = function groupCSS(_ref, unstyled) {
var spacing = _ref.theme.spacing;
return unstyled ? {} : {
paddingBottom: spacing.baseUnit * 2,
paddingTop: spacing.baseUnit * 2
};
};
var Group = function Group(props) {
var children = props.children,
cx = props.cx,
getStyles = props.getStyles,
getClassNames = props.getClassNames,
Heading = props.Heading,
headingProps = props.headingProps,
innerProps = props.innerProps,
label = props.label,
theme = props.theme,
selectProps = props.selectProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'group', {
group: true
}), innerProps), react.jsx(Heading, _extends({}, headingProps, {
selectProps: selectProps,
theme: theme,
getStyles: getStyles,
getClassNames: getClassNames,
cx: cx
}), label), react.jsx("div", null, children));
};
var groupHeadingCSS = function groupHeadingCSS(_ref2, unstyled) {
var _ref2$theme = _ref2.theme,
colors = _ref2$theme.colors,
spacing = _ref2$theme.spacing;
return _objectSpread({
label: 'group',
cursor: 'default',
display: 'block'
}, unstyled ? {} : {
color: colors.neutral40,
fontSize: '75%',
fontWeight: 500,
marginBottom: '0.25em',
paddingLeft: spacing.baseUnit * 3,
paddingRight: spacing.baseUnit * 3,
textTransform: 'uppercase'
});
};
var GroupHeading = function GroupHeading(props) {
var _cleanCommonProps = cleanCommonProps(props);
_cleanCommonProps.data;
var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
return react.jsx("div", _extends({}, getStyleProps(props, 'groupHeading', {
'group-heading': true
}), innerProps));
};
var Group$1 = Group;
var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
var inputCSS = function inputCSS(_ref, unstyled) {
var isDisabled = _ref.isDisabled,
value = _ref.value,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return _objectSpread(_objectSpread({
visibility: isDisabled ? 'hidden' : 'visible',
// force css to recompute when value change due to @emotion bug.
// We can remove it whenever the bug is fixed.
transform: value ? 'translateZ(0)' : ''
}, containerStyle), unstyled ? {} : {
margin: spacing.baseUnit / 2,
paddingBottom: spacing.baseUnit / 2,
paddingTop: spacing.baseUnit / 2,
color: colors.neutral80
});
};
var spacingStyle = {
gridArea: '1 / 2',
font: 'inherit',
minWidth: '2px',
border: 0,
margin: 0,
outline: 0,
padding: 0
};
var containerStyle = {
flex: '1 1 auto',
display: 'inline-grid',
gridArea: '1 / 1 / 2 / 3',
gridTemplateColumns: '0 min-content',
'&:after': _objectSpread({
content: 'attr(data-value) " "',
visibility: 'hidden',
whiteSpace: 'pre'
}, spacingStyle)
};
var inputStyle = function inputStyle(isHidden) {
return _objectSpread({
label: 'input',
color: 'inherit',
background: 0,
opacity: isHidden ? 0 : 1,
width: '100%'
}, spacingStyle);
};
var Input = function Input(props) {
var cx = props.cx,
value = props.value;
var _cleanCommonProps = cleanCommonProps(props),
innerRef = _cleanCommonProps.innerRef,
isDisabled = _cleanCommonProps.isDisabled,
isHidden = _cleanCommonProps.isHidden,
inputClassName = _cleanCommonProps.inputClassName,
innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
return react.jsx("div", _extends({}, getStyleProps(props, 'input', {
'input-container': true
}), {
"data-value": value || ''
}), react.jsx("input", _extends({
className: cx({
input: true
}, inputClassName),
ref: innerRef,
style: inputStyle(isHidden),
disabled: isDisabled
}, innerProps)));
};
var Input$1 = Input;
var multiValueCSS = function multiValueCSS(_ref, unstyled) {
var _ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
borderRadius = _ref$theme.borderRadius,
colors = _ref$theme.colors;
return _objectSpread({
label: 'multiValue',
display: 'flex',
minWidth: 0
}, unstyled ? {} : {
backgroundColor: colors.neutral10,
borderRadius: borderRadius / 2,
margin: spacing.baseUnit / 2
});
};
var multiValueLabelCSS = function multiValueLabelCSS(_ref2, unstyled) {
var _ref2$theme = _ref2.theme,
borderRadius = _ref2$theme.borderRadius,
colors = _ref2$theme.colors,
cropWithEllipsis = _ref2.cropWithEllipsis;
return _objectSpread({
overflow: 'hidden',
textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
whiteSpace: 'nowrap'
}, unstyled ? {} : {
borderRadius: borderRadius / 2,
color: colors.neutral80,
fontSize: '85%',
padding: 3,
paddingLeft: 6
});
};
var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3, unstyled) {
var _ref3$theme = _ref3.theme,
spacing = _ref3$theme.spacing,
borderRadius = _ref3$theme.borderRadius,
colors = _ref3$theme.colors,
isFocused = _ref3.isFocused;
return _objectSpread({
alignItems: 'center',
display: 'flex'
}, unstyled ? {} : {
borderRadius: borderRadius / 2,
backgroundColor: isFocused ? colors.dangerLight : undefined,
paddingLeft: spacing.baseUnit,
paddingRight: spacing.baseUnit,
':hover': {
backgroundColor: colors.dangerLight,
color: colors.danger
}
});
};
var MultiValueGeneric = function MultiValueGeneric(_ref4) {
var children = _ref4.children,
innerProps = _ref4.innerProps;
return react.jsx("div", innerProps, children);
};
var MultiValueContainer = MultiValueGeneric;
var MultiValueLabel = MultiValueGeneric;
function MultiValueRemove(_ref5) {
var children = _ref5.children,
innerProps = _ref5.innerProps;
return react.jsx("div", _extends({
role: "button"
}, innerProps), children || react.jsx(CrossIcon, {
size: 14
}));
}
var MultiValue = function MultiValue(props) {
var children = props.children,
components = props.components,
data = props.data,
innerProps = props.innerProps,
isDisabled = props.isDisabled,
removeProps = props.removeProps,
selectProps = props.selectProps;
var Container = components.Container,
Label = components.Label,
Remove = components.Remove;
return react.jsx(Container, {
data: data,
innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValue', {
'multi-value': true,
'multi-value--is-disabled': isDisabled
})), innerProps),
selectProps: selectProps
}, react.jsx(Label, {
data: data,
innerProps: _objectSpread({}, getStyleProps(props, 'multiValueLabel', {
'multi-value__label': true
})),
selectProps: selectProps
}, children), react.jsx(Remove, {
data: data,
innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
'multi-value__remove': true
})), {}, {
'aria-label': "Remove ".concat(children || 'option')
}, removeProps),
selectProps: selectProps
}));
};
var MultiValue$1 = MultiValue;
var optionCSS = function optionCSS(_ref, unstyled) {
var isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,
isSelected = _ref.isSelected,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return _objectSpread({
label: 'option',
cursor: 'default',
display: 'block',
fontSize: 'inherit',
width: '100%',
userSelect: 'none',
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)'
}, unstyled ? {} : {
backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
// provide some affordance on touch devices
':active': {
backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
}
});
};
var Option = function Option(props) {
var children = props.children,
isDisabled = props.isDisabled,
isFocused = props.isFocused,
isSelected = props.isSelected,
innerRef = props.innerRef,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'option', {
option: true,
'option--is-disabled': isDisabled,
'option--is-focused': isFocused,
'option--is-selected': isSelected
}), {
ref: innerRef,
"aria-disabled": isDisabled
}, innerProps), children);
};
var Option$1 = Option;
var placeholderCSS = function placeholderCSS(_ref, unstyled) {
var _ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return _objectSpread({
label: 'placeholder',
gridArea: '1 / 1 / 2 / 3'
}, unstyled ? {} : {
color: colors.neutral50,
marginLeft: spacing.baseUnit / 2,
marginRight: spacing.baseUnit / 2
});
};
var Placeholder = function Placeholder(props) {
var children = props.children,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'placeholder', {
placeholder: true
}), innerProps), children);
};
var Placeholder$1 = Placeholder;
var css = function css(_ref, unstyled) {
var isDisabled = _ref.isDisabled,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return _objectSpread({
label: 'singleValue',
gridArea: '1 / 1 / 2 / 3',
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}, unstyled ? {} : {
color: isDisabled ? colors.neutral40 : colors.neutral80,
marginLeft: spacing.baseUnit / 2,
marginRight: spacing.baseUnit / 2
});
};
var SingleValue = function SingleValue(props) {
var children = props.children,
isDisabled = props.isDisabled,
innerProps = props.innerProps;
return react.jsx("div", _extends({}, getStyleProps(props, 'singleValue', {
'single-value': true,
'single-value--is-disabled': isDisabled
}), innerProps), children);
};
var SingleValue$1 = SingleValue;
var components = {
ClearIndicator: ClearIndicator,
Control: Control$1,
DropdownIndicator: DropdownIndicator,
DownChevron: DownChevron,
CrossIcon: CrossIcon,
Group: Group$1,
GroupHeading: GroupHeading,
IndicatorsContainer: IndicatorsContainer,
IndicatorSeparator: IndicatorSeparator,
Input: Input$1,
LoadingIndicator: LoadingIndicator,
Menu: Menu$1,
MenuList: MenuList,
MenuPortal: MenuPortal,
LoadingMessage: LoadingMessage,
NoOptionsMessage: NoOptionsMessage,
MultiValue: MultiValue$1,
MultiValueContainer: MultiValueContainer,
MultiValueLabel: MultiValueLabel,
MultiValueRemove: MultiValueRemove,
Option: Option$1,
Placeholder: Placeholder$1,
SelectContainer: SelectContainer,
SingleValue: SingleValue$1,
ValueContainer: ValueContainer
};
var defaultComponents = function defaultComponents(props) {
return _objectSpread(_objectSpread({}, components), props.components);
};
exports.MenuPlacer = MenuPlacer;
exports.classNames = classNames;
exports.cleanValue = cleanValue;
exports.clearIndicatorCSS = clearIndicatorCSS;
exports.components = components;
exports.containerCSS = containerCSS;
exports.css = css$1;
exports.css$1 = css;
exports.defaultComponents = defaultComponents;
exports.dropdownIndicatorCSS = dropdownIndicatorCSS;
exports.groupCSS = groupCSS;
exports.groupHeadingCSS = groupHeadingCSS;
exports.handleInputChange = handleInputChange;
exports.indicatorSeparatorCSS = indicatorSeparatorCSS;
exports.indicatorsContainerCSS = indicatorsContainerCSS;
exports.inputCSS = inputCSS;
exports.isDocumentElement = isDocumentElement;
exports.isMobileDevice = isMobileDevice;
exports.isTouchCapable = isTouchCapable;
exports.loadingIndicatorCSS = loadingIndicatorCSS;
exports.loadingMessageCSS = loadingMessageCSS;
exports.menuCSS = menuCSS;
exports.menuListCSS = menuListCSS;
exports.menuPortalCSS = menuPortalCSS;
exports.multiValueAsValue = multiValueAsValue;
exports.multiValueCSS = multiValueCSS;
exports.multiValueLabelCSS = multiValueLabelCSS;
exports.multiValueRemoveCSS = multiValueRemoveCSS;
exports.noOptionsMessageCSS = noOptionsMessageCSS;
exports.noop = noop;
exports.notNullish = notNullish;
exports.optionCSS = optionCSS;
exports.placeholderCSS = placeholderCSS;
exports.removeProps = removeProps;
exports.scrollIntoView = scrollIntoView;
exports.singleValueAsValue = singleValueAsValue;
exports.supportsPassiveEvents = supportsPassiveEvents;
exports.valueContainerCSS = valueContainerCSS;
exports.valueTernary = valueTernary;