react-select-module
Version:
A Select control built with and for ReactJS
1,509 lines (1,341 loc) • 51.1 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var React = require('react');
var React__default = _interopDefault(React);
var emotionCore = require('@emotion/core');
var reactDom = require('react-dom');
var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
var AutosizeInput = _interopDefault(require('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 = emotionCore.jsx;
// 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__*/React.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;
}(React.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__*/reactDom.createPortal(menuWrapper, appendTo) : menuWrapper);
}
}]);
return MenuPortal;
}(React.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 = emotionCore.jsx; // ==============================
// 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 = emotionCore.jsx,
keyframes = emotionCore.keyframes; // ==============================
// 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 = emotionCore.jsx;
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 = emotionCore.jsx;
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 = emotionCore.jsx;
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 = emotionCore.jsx,
ClassNames = emotionCore.ClassNames;
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 = emotionCore.jsx;
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 = emotionCore.jsx;
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 = emotionCore.jsx;
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);
};
exports.MenuPlacer = MenuPlacer;
exports.classNames = classNames;
exports.cleanValue = cleanValue;
exports.clearIndicatorCSS = clearIndicatorCSS;
exports.components = components;
exports.containerCSS = containerCSS;
exports.css