react-select-module
Version:
A Select control built with and for ReactJS
1,498 lines (1,332 loc) • 50.1 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import _extends from '@babel/runtime/helpers/esm/extends';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import { Component, createContext } from 'react';
import { jsx as jsx$a, keyframes as keyframes$1, ClassNames as ClassNames$1 } from '@emotion/core';
import { createPortal } from 'react-dom';
import _typeof from '@babel/runtime/helpers/esm/typeof';
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
import AutosizeInput from 'react-input-autosize';
// ==============================
// 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, className) {
var arr = [className];
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 (Array.isArray(value)) return value.filter(Boolean);
if (_typeof(value) === 'object' && value !== null) return [value];
return [];
}; // ==============================
// 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 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)/;
var docEl = document.documentElement; // suck it, flow...
if (style.position === 'fixed') return docEl;
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 docEl;
} // 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;
}
}
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var jsx = jsx$a;
// Menu
// ==============================
// Get Menu Placement
// ------------------------------
function getMenuPlacement(_ref) {
var maxHeight = _ref.maxHeight,
menuEl = _ref.menuEl,
minHeight = _ref.minHeight,
placement = _ref.placement,
shouldScroll = _ref.shouldScroll,
isFixedPosition = _ref.isFixedPosition,
theme = _ref.theme;
var spacing = theme.spacing;
var scrollParent = getScrollParent(menuEl);
var defaultState = {
placement: 'bottom',
maxHeight: maxHeight
}; // 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 = window.innerHeight;
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 (placement) {
case 'auto':
case 'bottom':
// 1: the menu will fit, do nothing
if (viewSpaceBelow >= menuHeight) {
return {
placement: 'bottom',
maxHeight: maxHeight
};
} // 2: the menu will fit, if scrolled
if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollDown, scrollDuration);
}
return {
placement: 'bottom',
maxHeight: maxHeight
};
} // 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 (placement === 'auto' || isFixedPosition) {
// may need to be constrained after flipping
var _constrainedHeight = maxHeight;
var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
if (spaceAbove >= minHeight) {
_constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight);
}
return {
placement: 'top',
maxHeight: _constrainedHeight
};
} // BOTTOM: allow browser to increase scrollable area and immediately set scroll
if (placement === 'bottom') {
scrollTo(scrollParent, scrollDown);
return {
placement: 'bottom',
maxHeight: maxHeight
};
}
break;
case 'top':
// 1: the menu will fit, do nothing
if (viewSpaceAbove >= menuHeight) {
return {
placement: 'top',
maxHeight: maxHeight
};
} // 2: the menu will fit, if scrolled
if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
if (shouldScroll) {
animatedScrollTo(scrollParent, scrollUp, scrollDuration);
}
return {
placement: 'top',
maxHeight: maxHeight
};
} // 3: the menu will fit, if constrained
if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
var _constrainedHeight2 = maxHeight; // 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: maxHeight
};
default:
throw new Error("Invalid placement provided \"".concat(placement, "\"."));
} // fulfil contract with flow: implicit return value of undefined
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) {
var _ref3;
var placement = _ref2.placement,
_ref2$theme = _ref2.theme,
borderRadius = _ref2$theme.borderRadius,
spacing = _ref2$theme.spacing,
colors = _ref2$theme.colors;
return _ref3 = {
label: 'menu'
}, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "backgroundColor", colors.neutral0), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _ref3;
};
var PortalPlacementContext = /*#__PURE__*/createContext({
getPortalPlacement: null
}); // NOTE: internal only
var MenuPlacer = /*#__PURE__*/function (_Component) {
_inherits(MenuPlacer, _Component);
var _super = _createSuper(MenuPlacer);
function MenuPlacer() {
var _this;
_classCallCheck(this, MenuPlacer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.state = {
maxHeight: _this.props.maxMenuHeight,
placement: null
};
_this.getPlacement = function (ref) {
var _this$props = _this.props,
minMenuHeight = _this$props.minMenuHeight,
maxMenuHeight = _this$props.maxMenuHeight,
menuPlacement = _this$props.menuPlacement,
menuPosition = _this$props.menuPosition,
menuShouldScrollIntoView = _this$props.menuShouldScrollIntoView,
theme = _this$props.theme;
if (!ref) return; // DO NOT scroll if position is fixed
var isFixedPosition = menuPosition === 'fixed';
var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
var state = getMenuPlacement({
maxHeight: maxMenuHeight,
menuEl: ref,
minHeight: minMenuHeight,
placement: menuPlacement,
shouldScroll: shouldScroll,
isFixedPosition: isFixedPosition,
theme: theme
});
var getPortalPlacement = _this.context.getPortalPlacement;
if (getPortalPlacement) getPortalPlacement(state);
_this.setState(state);
};
_this.getUpdatedProps = function () {
var menuPlacement = _this.props.menuPlacement;
var placement = _this.state.placement || coercePlacement(menuPlacement);
return _objectSpread(_objectSpread({}, _this.props), {}, {
placement: placement,
maxHeight: _this.state.maxHeight
});
};
return _this;
}
_createClass(MenuPlacer, [{
key: "render",
value: function render() {
var children = this.props.children;
return children({
ref: this.getPlacement,
placerProps: this.getUpdatedProps()
});
}
}]);
return MenuPlacer;
}(Component);
MenuPlacer.contextType = PortalPlacementContext;
var Menu = function Menu(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerRef = props.innerRef,
innerProps = props.innerProps;
return jsx("div", _extends({
css: getStyles('menu', props),
className: cx({
menu: true
}, className)
}, innerProps, {
ref: innerRef
}), children);
};
// Menu List
// ==============================
var menuListCSS = function menuListCSS(_ref4) {
var maxHeight = _ref4.maxHeight,
baseUnit = _ref4.theme.spacing.baseUnit;
return {
maxHeight: maxHeight,
overflowY: 'auto',
paddingBottom: baseUnit,
paddingTop: baseUnit,
position: 'relative',
// required for offset[Height, Top] > keyboard scroll
WebkitOverflowScrolling: 'touch'
};
};
var MenuList = function MenuList(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
isMulti = props.isMulti,
innerRef = props.innerRef,
innerProps = props.innerProps;
return jsx("div", _extends({
css: getStyles('menuList', props),
className: cx({
'menu-list': true,
'menu-list--is-multi': isMulti
}, className),
ref: innerRef
}, innerProps), children);
}; // ==============================
// Menu Notices
// ==============================
var noticeCSS = function noticeCSS(_ref5) {
var _ref5$theme = _ref5.theme,
baseUnit = _ref5$theme.spacing.baseUnit,
colors = _ref5$theme.colors;
return {
color: colors.neutral40,
padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px"),
textAlign: 'center'
};
};
var noOptionsMessageCSS = noticeCSS;
var loadingMessageCSS = noticeCSS;
var NoOptionsMessage = function NoOptionsMessage(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx("div", _extends({
css: getStyles('noOptionsMessage', props),
className: cx({
'menu-notice': true,
'menu-notice--no-options': true
}, className)
}, innerProps), children);
};
NoOptionsMessage.defaultProps = {
children: 'No options'
};
var LoadingMessage = function LoadingMessage(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx("div", _extends({
css: getStyles('loadingMessage', props),
className: cx({
'menu-notice': true,
'menu-notice--loading': true
}, className)
}, innerProps), children);
};
LoadingMessage.defaultProps = {
children: 'Loading...'
}; // ==============================
// Menu Portal
// ==============================
var menuPortalCSS = function menuPortalCSS(_ref6) {
var rect = _ref6.rect,
offset = _ref6.offset,
position = _ref6.position;
return {
left: rect.left,
position: position,
top: offset,
width: rect.width,
zIndex: 1
};
};
var MenuPortal = /*#__PURE__*/function (_Component2) {
_inherits(MenuPortal, _Component2);
var _super2 = _createSuper(MenuPortal);
function MenuPortal() {
var _this2;
_classCallCheck(this, MenuPortal);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this2 = _super2.call.apply(_super2, [this].concat(args));
_this2.state = {
placement: null
};
_this2.getPortalPlacement = function (_ref7) {
var placement = _ref7.placement;
var initialPlacement = coercePlacement(_this2.props.menuPlacement); // avoid re-renders if the placement has not changed
if (placement !== initialPlacement) {
_this2.setState({
placement: placement
});
}
};
return _this2;
}
_createClass(MenuPortal, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
appendTo = _this$props2.appendTo,
children = _this$props2.children,
controlElement = _this$props2.controlElement,
menuPlacement = _this$props2.menuPlacement,
position = _this$props2.menuPosition,
getStyles = _this$props2.getStyles;
var isFixed = position === 'fixed'; // bail early if required elements aren't present
if (!appendTo && !isFixed || !controlElement) {
return null;
}
var placement = this.state.placement || coercePlacement(menuPlacement);
var rect = getBoundingClientObj(controlElement);
var scrollDistance = isFixed ? 0 : window.pageYOffset;
var offset = rect[placement] + scrollDistance;
var state = {
offset: offset,
position: position,
rect: rect
}; // same wrapper element whether fixed or portalled
var menuWrapper = jsx("div", {
css: getStyles('menuPortal', state)
}, children);
return jsx(PortalPlacementContext.Provider, {
value: {
getPortalPlacement: this.getPortalPlacement
}
}, appendTo ? /*#__PURE__*/createPortal(menuWrapper, appendTo) : menuWrapper);
}
}]);
return MenuPortal;
}(Component);
var isArray = Array.isArray;
var keyList = Object.keys;
var hasProp = Object.prototype.hasOwnProperty;
function equal(a, b) {
// fast-deep-equal index.js 2.0.1
if (a === b) return true;
if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
var arrA = isArray(a),
arrB = isArray(b),
i,
length,
key;
if (arrA && arrB) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;) {
if (!equal(a[i], b[i])) return false;
}
return true;
}
if (arrA != arrB) return false;
var dateA = a instanceof Date,
dateB = b instanceof Date;
if (dateA != dateB) return false;
if (dateA && dateB) return a.getTime() == b.getTime();
var regexpA = a instanceof RegExp,
regexpB = b instanceof RegExp;
if (regexpA != regexpB) return false;
if (regexpA && regexpB) return a.toString() == b.toString();
var keys = keyList(a);
length = keys.length;
if (length !== keyList(b).length) {
return false;
}
for (i = length; i-- !== 0;) {
if (!hasProp.call(b, keys[i])) return false;
} // end fast-deep-equal
// Custom handling for React
for (i = length; i-- !== 0;) {
key = keys[i];
if (key === '_owner' && a.$$typeof) {
// React-specific: avoid traversing React elements' _owner.
// _owner contains circular references
// and is not needed when comparing the actual elements (and not their owners)
// .$$typeof and ._store on just reasonable markers of a react element
continue;
} else {
// all other properties should be traversed as usual
if (!equal(a[key], b[key])) return false;
}
} // fast-deep-equal index.js 2.0.1
return true;
}
return a !== a && b !== b;
} // end fast-deep-equal
function exportedEqual(a, b) {
try {
return equal(a, b);
} catch (error) {
if (error.message && error.message.match(/stack|recursion/i)) {
// warn on circular references, don't crash
// browsers give this different errors name and messages:
// chrome/safari: "RangeError", "Maximum call stack size exceeded"
// firefox: "InternalError", too much recursion"
// edge: "Error", "Out of stack space"
console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
return false;
} // some other error. we should definitely know about these
throw error;
}
}
var jsx$1 = jsx$a; // ==============================
// Root Container
// ==============================
var containerCSS = function containerCSS(_ref) {
var isDisabled = _ref.isDisabled,
isRtl = _ref.isRtl;
return {
label: 'container',
direction: isRtl ? 'rtl' : null,
pointerEvents: isDisabled ? 'none' : null,
// cancel mouse events when disabled
position: 'relative'
};
};
var SelectContainer = function SelectContainer(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps,
isDisabled = props.isDisabled,
isRtl = props.isRtl;
return jsx$1("div", _extends({
css: getStyles('container', props),
className: cx({
'--is-disabled': isDisabled,
'--is-rtl': isRtl
}, className)
}, innerProps), children);
}; // ==============================
// Value Container
// ==============================
var valueContainerCSS = function valueContainerCSS(_ref2) {
var spacing = _ref2.theme.spacing;
return {
alignItems: 'center',
display: 'flex',
flex: 1,
flexWrap: 'wrap',
padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px"),
WebkitOverflowScrolling: 'touch',
position: 'relative',
overflow: 'hidden'
};
};
var ValueContainer = function ValueContainer(props) {
var children = props.children,
className = props.className,
cx = props.cx,
isMulti = props.isMulti,
getStyles = props.getStyles,
hasValue = props.hasValue;
return jsx$1("div", {
css: getStyles('valueContainer', props),
className: cx({
'value-container': true,
'value-container--is-multi': isMulti,
'value-container--has-value': hasValue
}, className)
}, 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,
className = props.className,
cx = props.cx,
getStyles = props.getStyles;
return jsx$1("div", {
css: getStyles('indicatorsContainer', props),
className: cx({
indicators: true
}, className)
}, children);
};
function _templateObject() {
var data = _taggedTemplateLiteral(["\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var jsx$2 = jsx$a,
keyframes = keyframes$1; // ==============================
// Dropdown & Clear Icons
// ==============================
var Svg = function Svg(_ref) {
var size = _ref.size,
props = _objectWithoutProperties(_ref, ["size"]);
return jsx$2("svg", _extends({
height: size,
width: size,
viewBox: "0 0 20 20",
"aria-hidden": "true",
focusable: "false",
css: {
display: 'inline-block',
fill: 'currentColor',
lineHeight: 1,
stroke: 'currentColor',
strokeWidth: 0
}
}, props));
};
var CrossIcon = function CrossIcon(props) {
return jsx$2(Svg, _extends({
size: 20
}, props), jsx$2("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 jsx$2(Svg, _extends({
size: 20
}, props), jsx$2("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(_ref2) {
var isFocused = _ref2.isFocused,
_ref2$theme = _ref2.theme,
baseUnit = _ref2$theme.spacing.baseUnit,
colors = _ref2$theme.colors;
return {
label: 'indicatorContainer',
color: isFocused ? colors.neutral60 : colors.neutral20,
display: 'flex',
padding: baseUnit * 2,
transition: 'color 150ms',
':hover': {
color: isFocused ? colors.neutral80 : colors.neutral40
}
};
};
var dropdownIndicatorCSS = baseCSS;
var DropdownIndicator = function DropdownIndicator(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx$2("div", _extends({}, innerProps, {
css: getStyles('dropdownIndicator', props),
className: cx({
indicator: true,
'dropdown-indicator': true
}, className)
}), children || jsx$2(DownChevron, null));
};
var clearIndicatorCSS = baseCSS;
var ClearIndicator = function ClearIndicator(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx$2("div", _extends({}, innerProps, {
css: getStyles('clearIndicator', props),
className: cx({
indicator: true,
'clear-indicator': true
}, className)
}), children || jsx$2(CrossIcon, null));
}; // ==============================
// Separator
// ==============================
var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
var isDisabled = _ref3.isDisabled,
_ref3$theme = _ref3.theme,
baseUnit = _ref3$theme.spacing.baseUnit,
colors = _ref3$theme.colors;
return {
label: 'indicatorSeparator',
alignSelf: 'stretch',
backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
marginBottom: baseUnit * 2,
marginTop: baseUnit * 2,
width: 1
};
};
var IndicatorSeparator = function IndicatorSeparator(props) {
var className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx$2("span", _extends({}, innerProps, {
css: getStyles('indicatorSeparator', props),
className: cx({
'indicator-separator': true
}, className)
}));
}; // ==============================
// Loading
// ==============================
var loadingDotAnimations = keyframes(_templateObject());
var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
var isFocused = _ref4.isFocused,
size = _ref4.size,
_ref4$theme = _ref4.theme,
colors = _ref4$theme.colors,
baseUnit = _ref4$theme.spacing.baseUnit;
return {
label: 'loadingIndicator',
color: isFocused ? colors.neutral60 : colors.neutral20,
display: 'flex',
padding: baseUnit * 2,
transition: 'color 150ms',
alignSelf: 'center',
fontSize: size,
lineHeight: 1,
marginRight: size,
textAlign: 'center',
verticalAlign: 'middle'
};
};
var LoadingDot = function LoadingDot(_ref5) {
var delay = _ref5.delay,
offset = _ref5.offset;
return jsx$2("span", {
css: {
animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
backgroundColor: 'currentColor',
borderRadius: '1em',
display: 'inline-block',
marginLeft: offset ? '1em' : null,
height: '1em',
verticalAlign: 'top',
width: '1em'
}
});
};
var LoadingIndicator = function LoadingIndicator(props) {
var className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps,
isRtl = props.isRtl;
return jsx$2("div", _extends({}, innerProps, {
css: getStyles('loadingIndicator', props),
className: cx({
indicator: true,
'loading-indicator': true
}, className)
}), jsx$2(LoadingDot, {
delay: 0,
offset: isRtl
}), jsx$2(LoadingDot, {
delay: 160,
offset: true
}), jsx$2(LoadingDot, {
delay: 320,
offset: !isRtl
}));
};
LoadingIndicator.defaultProps = {
size: 4
};
var jsx$3 = jsx$a;
var css = function css(_ref) {
var isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,
_ref$theme = _ref.theme,
colors = _ref$theme.colors,
borderRadius = _ref$theme.borderRadius,
spacing = _ref$theme.spacing;
return {
label: 'control',
alignItems: 'center',
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) : null,
cursor: 'default',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
minHeight: spacing.controlHeight,
outline: '0 !important',
position: 'relative',
transition: 'all 100ms',
'&:hover': {
borderColor: isFocused ? colors.primary : colors.neutral30
}
};
};
var Control = function Control(props) {
var children = props.children,
cx = props.cx,
getStyles = props.getStyles,
className = props.className,
isDisabled = props.isDisabled,
isFocused = props.isFocused,
innerRef = props.innerRef,
innerProps = props.innerProps,
menuIsOpen = props.menuIsOpen;
return jsx$3("div", _extends({
ref: innerRef,
css: getStyles('control', props),
className: cx({
control: true,
'control--is-disabled': isDisabled,
'control--is-focused': isFocused,
'control--menu-is-open': menuIsOpen
}, className)
}, innerProps), children);
};
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var jsx$4 = jsx$a;
var groupCSS = function groupCSS(_ref) {
var spacing = _ref.theme.spacing;
return {
paddingBottom: spacing.baseUnit * 2,
paddingTop: spacing.baseUnit * 2
};
};
var Group = function Group(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
Heading = props.Heading,
headingProps = props.headingProps,
label = props.label,
theme = props.theme,
selectProps = props.selectProps;
return jsx$4("div", {
css: getStyles('group', props),
className: cx({
group: true
}, className)
}, jsx$4(Heading, _extends({}, headingProps, {
selectProps: selectProps,
theme: theme,
getStyles: getStyles,
cx: cx
}), label), jsx$4("div", null, children));
};
var groupHeadingCSS = function groupHeadingCSS(_ref2) {
var spacing = _ref2.theme.spacing;
return {
label: 'group',
color: '#999',
cursor: 'default',
display: 'block',
fontSize: '75%',
fontWeight: '500',
marginBottom: '0.25em',
paddingLeft: spacing.baseUnit * 3,
paddingRight: spacing.baseUnit * 3,
textTransform: 'uppercase'
};
};
var GroupHeading = function GroupHeading(props) {
var className = props.className,
cx = props.cx,
getStyles = props.getStyles,
theme = props.theme,
selectProps = props.selectProps,
cleanProps = _objectWithoutProperties(props, ["className", "cx", "getStyles", "theme", "selectProps"]);
return jsx$4("div", _extends({
css: getStyles('groupHeading', _objectSpread$1({
theme: theme
}, cleanProps)),
className: cx({
'group-heading': true
}, className)
}, cleanProps));
};
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var jsx$5 = jsx$a;
var inputCSS = function inputCSS(_ref) {
var isDisabled = _ref.isDisabled,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return {
margin: spacing.baseUnit / 2,
paddingBottom: spacing.baseUnit / 2,
paddingTop: spacing.baseUnit / 2,
visibility: isDisabled ? 'hidden' : 'visible',
color: colors.neutral80
};
};
var inputStyle = function inputStyle(isHidden) {
return {
label: 'input',
background: 0,
border: 0,
fontSize: 'inherit',
opacity: isHidden ? 0 : 1,
outline: 0,
padding: 0,
color: 'inherit'
};
};
var Input = function Input(_ref2) {
var className = _ref2.className,
cx = _ref2.cx,
getStyles = _ref2.getStyles,
innerRef = _ref2.innerRef,
isHidden = _ref2.isHidden,
isDisabled = _ref2.isDisabled,
theme = _ref2.theme,
selectProps = _ref2.selectProps,
props = _objectWithoutProperties(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]);
var AutosizeInputComponent = AutosizeInput.default ? AutosizeInput.default : AutosizeInput;
return jsx$5("div", {
css: getStyles('input', _objectSpread$2({
theme: theme
}, props))
}, jsx$5(AutosizeInputComponent, _extends({
className: cx({
input: true
}, className),
inputRef: innerRef,
inputStyle: inputStyle(isHidden),
disabled: isDisabled
}, props)));
};
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var jsx$6 = jsx$a,
ClassNames = ClassNames$1;
var multiValueCSS = function multiValueCSS(_ref) {
var _ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
borderRadius = _ref$theme.borderRadius,
colors = _ref$theme.colors;
return {
label: 'multiValue',
backgroundColor: colors.neutral10,
borderRadius: borderRadius / 2,
display: 'flex',
margin: spacing.baseUnit / 2,
minWidth: 0 // resolves flex/text-overflow bug
};
};
var multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
var _ref2$theme = _ref2.theme,
borderRadius = _ref2$theme.borderRadius,
colors = _ref2$theme.colors,
cropWithEllipsis = _ref2.cropWithEllipsis;
return {
borderRadius: borderRadius / 2,
color: colors.neutral80,
fontSize: '85%',
overflow: 'hidden',
padding: 3,
paddingLeft: 6,
textOverflow: cropWithEllipsis ? 'ellipsis' : null,
whiteSpace: 'nowrap'
};
};
var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
var _ref3$theme = _ref3.theme,
spacing = _ref3$theme.spacing,
borderRadius = _ref3$theme.borderRadius,
colors = _ref3$theme.colors,
isFocused = _ref3.isFocused;
return {
alignItems: 'center',
borderRadius: borderRadius / 2,
backgroundColor: isFocused && colors.dangerLight,
display: 'flex',
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 jsx$6("div", innerProps, children);
};
var MultiValueContainer = MultiValueGeneric;
var MultiValueLabel = MultiValueGeneric;
function MultiValueRemove(_ref5) {
var children = _ref5.children,
innerProps = _ref5.innerProps;
return jsx$6("div", innerProps, children || jsx$6(CrossIcon, {
size: 14
}));
}
var MultiValue = function MultiValue(props) {
var children = props.children,
className = props.className,
components = props.components,
cx = props.cx,
data = props.data,
getStyles = props.getStyles,
innerProps = props.innerProps,
isDisabled = props.isDisabled,
removeProps = props.removeProps,
selectProps = props.selectProps;
var Container = components.Container,
Label = components.Label,
Remove = components.Remove;
return jsx$6(ClassNames, null, function (_ref6) {
var css = _ref6.css,
emotionCx = _ref6.cx;
return jsx$6(Container, {
data: data,
innerProps: _objectSpread$3(_objectSpread$3({}, innerProps), {}, {
className: emotionCx(css(getStyles('multiValue', props)), cx({
'multi-value': true,
'multi-value--is-disabled': isDisabled
}, className))
}),
selectProps: selectProps
}, jsx$6(Label, {
data: data,
innerProps: {
className: emotionCx(css(getStyles('multiValueLabel', props)), cx({
'multi-value__label': true
}, className))
},
selectProps: selectProps
}, children), jsx$6(Remove, {
data: data,
innerProps: _objectSpread$3({
className: emotionCx(css(getStyles('multiValueRemove', props)), cx({
'multi-value__remove': true
}, className))
}, removeProps),
selectProps: selectProps
}));
});
};
MultiValue.defaultProps = {
cropWithEllipsis: true
};
var jsx$7 = jsx$a;
var optionCSS = function optionCSS(_ref) {
var isDisabled = _ref.isDisabled,
isFocused = _ref.isFocused,
isSelected = _ref.isSelected,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return {
label: 'option',
backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
cursor: 'default',
display: 'block',
fontSize: 'inherit',
padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
width: '100%',
userSelect: 'none',
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
// provide some affordance on touch devices
':active': {
backgroundColor: !isDisabled && (isSelected ? colors.primary : colors.primary50)
}
};
};
var Option = function Option(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
isDisabled = props.isDisabled,
isFocused = props.isFocused,
isSelected = props.isSelected,
innerRef = props.innerRef,
innerProps = props.innerProps;
return jsx$7("div", _extends({
css: getStyles('option', props),
className: cx({
option: true,
'option--is-disabled': isDisabled,
'option--is-focused': isFocused,
'option--is-selected': isSelected
}, className),
ref: innerRef
}, innerProps), children);
};
var jsx$8 = jsx$a;
var placeholderCSS = function placeholderCSS(_ref) {
var _ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return {
label: 'placeholder',
color: colors.neutral50,
marginLeft: spacing.baseUnit / 2,
marginRight: spacing.baseUnit / 2,
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)'
};
};
var Placeholder = function Placeholder(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return jsx$8("div", _extends({
css: getStyles('placeholder', props),
className: cx({
placeholder: true
}, className)
}, innerProps), children);
};
var jsx$9 = jsx$a;
var css$1 = function css(_ref) {
var isDisabled = _ref.isDisabled,
_ref$theme = _ref.theme,
spacing = _ref$theme.spacing,
colors = _ref$theme.colors;
return {
label: 'singleValue',
color: isDisabled ? colors.neutral40 : colors.neutral80,
marginLeft: spacing.baseUnit / 2,
marginRight: spacing.baseUnit / 2,
maxWidth: "calc(100% - ".concat(spacing.baseUnit * 2, "px)"),
overflow: 'hidden',
position: 'absolute',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
top: '50%',
transform: 'translateY(-50%)'
};
};
var SingleValue = function SingleValue(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
isDisabled = props.isDisabled,
innerProps = props.innerProps;
return jsx$9("div", _extends({
css: getStyles('singleValue', props),
className: cx({
'single-value': true,
'single-value--is-disabled': isDisabled
}, className)
}, innerProps), children);
};
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var components = {
ClearIndicator: ClearIndicator,
Control: Control,
DropdownIndicator: DropdownIndicator,
DownChevron: DownChevron,
CrossIcon: CrossIcon,
Group: Group,
GroupHeading: GroupHeading,
IndicatorsContainer: IndicatorsContainer,
IndicatorSeparator: IndicatorSeparator,
Input: Input,
LoadingIndicator: LoadingIndicator,
Menu: Menu,
MenuList: MenuList,
MenuPortal: MenuPortal,
LoadingMessage: LoadingMessage,
NoOptionsMessage: NoOptionsMessage,
MultiValue: MultiValue,
MultiValueContainer: MultiValueContainer,
MultiValueLabel: MultiValueLabel,
MultiValueRemove: MultiValueRemove,
Option: Option,
Placeholder: Placeholder,
SelectContainer: SelectContainer,
SingleValue: SingleValue,
ValueContainer: ValueContainer
};
var defaultComponents = function defaultComponents(props) {
return _objectSpread$4(_objectSpread$4({}, components), props.components);
};
export { isDocumentElement as A, exportedEqual as B, cleanValue as C, scrollIntoView as D, noop as E, components as F, handleInputChange as G, MenuPlacer as M, containerCSS as a, css as b, clearIndicatorCSS as c, dropdownIndicatorCSS as d, groupHeadingCSS as e, indicatorSeparatorCSS as f, groupCSS as g, inputCSS as h, indicatorsContainerCSS as i, loadingMessageCSS as j, menuListCSS as k, loadingIndicatorCSS as l, menuCSS as m, menuPortalCSS as n, multiValueCSS as o, multiValueLabelCSS as p, multiValueRemoveCSS as q, noOptionsMessageCSS as r, optionCSS as s, placeholderCSS as t, css$1 as u, valueContainerCSS as v, isTouchCapable as w, isMobile