mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-23 00:45:16 +00:00
1567 lines
64 KiB
JavaScript
1567 lines
64 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
var _extends = require('@babel/runtime/helpers/extends');
|
||
|
|
var react = require('@emotion/react');
|
||
|
|
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
||
|
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
||
|
|
var _typeof = require('@babel/runtime/helpers/typeof');
|
||
|
|
var AutosizeInput = require('react-input-autosize');
|
||
|
|
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
|
||
|
|
var _createClass = require('@babel/runtime/helpers/createClass');
|
||
|
|
var _inherits = require('@babel/runtime/helpers/inherits');
|
||
|
|
var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
|
||
|
|
var React = require('react');
|
||
|
|
var reactDom = require('react-dom');
|
||
|
|
|
||
|
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
||
|
|
|
||
|
|
var _extends__default = /*#__PURE__*/_interopDefault(_extends);
|
||
|
|
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
|
||
|
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
||
|
|
var _typeof__default = /*#__PURE__*/_interopDefault(_typeof);
|
||
|
|
var AutosizeInput__default = /*#__PURE__*/_interopDefault(AutosizeInput);
|
||
|
|
var _classCallCheck__default = /*#__PURE__*/_interopDefault(_classCallCheck);
|
||
|
|
var _createClass__default = /*#__PURE__*/_interopDefault(_createClass);
|
||
|
|
var _inherits__default = /*#__PURE__*/_interopDefault(_inherits);
|
||
|
|
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty$1);
|
||
|
|
|
||
|
|
function _defineProperty(obj, key, value) {
|
||
|
|
if (key in obj) {
|
||
|
|
Object.defineProperty(obj, key, {
|
||
|
|
value: value,
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true,
|
||
|
|
writable: true
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
obj[key] = value;
|
||
|
|
}
|
||
|
|
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
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 _objectSpread2(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 _getPrototypeOf(o) {
|
||
|
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
||
|
|
return o.__proto__ || Object.getPrototypeOf(o);
|
||
|
|
};
|
||
|
|
return _getPrototypeOf(o);
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function _assertThisInitialized(self) {
|
||
|
|
if (self === void 0) {
|
||
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
||
|
|
}
|
||
|
|
|
||
|
|
return self;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _possibleConstructorReturn(self, call) {
|
||
|
|
if (call && (typeof call === "object" || typeof call === "function")) {
|
||
|
|
return call;
|
||
|
|
}
|
||
|
|
|
||
|
|
return _assertThisInitialized(self);
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// ==============================
|
||
|
|
// 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__default['default'](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.getValue;
|
||
|
|
props.hasValue;
|
||
|
|
props.isMulti;
|
||
|
|
props.isRtl;
|
||
|
|
props.options;
|
||
|
|
props.selectOption;
|
||
|
|
props.selectProps;
|
||
|
|
props.setValue;
|
||
|
|
props.theme;
|
||
|
|
var innerProps = _objectWithoutProperties__default['default'](props, ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"]);
|
||
|
|
|
||
|
|
return _objectSpread2({}, innerProps);
|
||
|
|
}; // ==============================
|
||
|
|
// 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;
|
||
|
|
}
|
||
|
|
} // ==============================
|
||
|
|
// 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 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') {
|
||
|
|
if (shouldScroll) {
|
||
|
|
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__default['default'](_ref3, alignToControl(placement), '100%'), _defineProperty__default['default'](_ref3, "backgroundColor", colors.neutral0), _defineProperty__default['default'](_ref3, "borderRadius", borderRadius), _defineProperty__default['default'](_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty__default['default'](_ref3, "marginBottom", spacing.menuGutter), _defineProperty__default['default'](_ref3, "marginTop", spacing.menuGutter), _defineProperty__default['default'](_ref3, "position", 'absolute'), _defineProperty__default['default'](_ref3, "width", '100%'), _defineProperty__default['default'](_ref3, "zIndex", 1), _ref3;
|
||
|
|
};
|
||
|
|
var PortalPlacementContext = /*#__PURE__*/React.createContext({
|
||
|
|
getPortalPlacement: null
|
||
|
|
}); // NOTE: internal only
|
||
|
|
|
||
|
|
var MenuPlacer = /*#__PURE__*/function (_Component) {
|
||
|
|
_inherits__default['default'](MenuPlacer, _Component);
|
||
|
|
|
||
|
|
var _super = _createSuper(MenuPlacer);
|
||
|
|
|
||
|
|
function MenuPlacer() {
|
||
|
|
var _this;
|
||
|
|
|
||
|
|
_classCallCheck__default['default'](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 _objectSpread2(_objectSpread2({}, _this.props), {}, {
|
||
|
|
placement: placement,
|
||
|
|
maxHeight: _this.state.maxHeight
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
|
||
|
|
_createClass__default['default'](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 react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('menu', props),
|
||
|
|
className: cx({
|
||
|
|
menu: true
|
||
|
|
}, className),
|
||
|
|
ref: innerRef
|
||
|
|
}, innerProps), 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,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
innerRef = props.innerRef,
|
||
|
|
isMulti = props.isMulti;
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
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__default['default'](MenuPortal, _Component2);
|
||
|
|
|
||
|
|
var _super2 = _createSuper(MenuPortal);
|
||
|
|
|
||
|
|
function MenuPortal() {
|
||
|
|
var _this2;
|
||
|
|
|
||
|
|
_classCallCheck__default['default'](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__default['default'](MenuPortal, [{
|
||
|
|
key: "render",
|
||
|
|
value: function render() {
|
||
|
|
var _this$props2 = this.props,
|
||
|
|
appendTo = _this$props2.appendTo,
|
||
|
|
children = _this$props2.children,
|
||
|
|
className = _this$props2.className,
|
||
|
|
controlElement = _this$props2.controlElement,
|
||
|
|
cx = _this$props2.cx,
|
||
|
|
innerProps = _this$props2.innerProps,
|
||
|
|
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 = react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('menuPortal', state),
|
||
|
|
className: cx({
|
||
|
|
'menu-portal': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children);
|
||
|
|
return react.jsx(PortalPlacementContext.Provider, {
|
||
|
|
value: {
|
||
|
|
getPortalPlacement: this.getPortalPlacement
|
||
|
|
}
|
||
|
|
}, appendTo ? /*#__PURE__*/reactDom.createPortal(menuWrapper, appendTo) : menuWrapper);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
|
||
|
|
return MenuPortal;
|
||
|
|
}(React.Component);
|
||
|
|
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
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,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
isMulti = props.isMulti,
|
||
|
|
getStyles = props.getStyles,
|
||
|
|
hasValue = props.hasValue;
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('valueContainer', props),
|
||
|
|
className: cx({
|
||
|
|
'value-container': true,
|
||
|
|
'value-container--is-multi': isMulti,
|
||
|
|
'value-container--has-value': hasValue
|
||
|
|
}, className)
|
||
|
|
}, 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,
|
||
|
|
className = props.className,
|
||
|
|
cx = props.cx,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
getStyles = props.getStyles;
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('indicatorsContainer', props),
|
||
|
|
className: cx({
|
||
|
|
indicators: true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children);
|
||
|
|
};
|
||
|
|
|
||
|
|
var _templateObject;
|
||
|
|
|
||
|
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
||
|
|
|
||
|
|
var _ref2 = process.env.NODE_ENV === "production" ? {
|
||
|
|
name: "8mmkcg",
|
||
|
|
styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0"
|
||
|
|
} : {
|
||
|
|
name: "tj5bde-Svg",
|
||
|
|
styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0;label:Svg;",
|
||
|
|
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JJIiwiZmlsZSI6ImluZGljYXRvcnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyB0eXBlIE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBqc3gsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHR5cGUgeyBDb21tb25Qcm9wcywgVGhlbWUgfSBmcm9tICcuLi90eXBlcyc7XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLy8gRHJvcGRvd24gJiBDbGVhciBJY29uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmNvbnN0IFN2ZyA9ICh7IHNpemUsIC4uLnByb3BzIH06IHsgc2l6ZTogbnVtYmVyIH0pID0+IChcbiAgPHN2Z1xuICAgIGhlaWdodD17c2l6ZX1cbiAgICB3aWR0aD17c2l6ZX1cbiAgICB2aWV3Qm94PVwiMCAwIDIwIDIwXCJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgZmlsbDogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBsaW5lSGVpZ2h0OiAxLFxuICAgICAgc3Ryb2tlOiAnY3VycmVudENvbG9yJyxcbiAgICAgIHN0cm9rZVdpZHRoOiAwLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IENyb3NzSWNvbiA9IChwcm9wczogYW55KSA9PiAoXG4gIDxTdmcgc2l6ZT17MjB9IHsuLi5wcm9wc30+XG4gICAgPHBhdGggZD1cIk0xNC4zNDggMTQuODQ5Yy0wLjQ2OSAwLjQ2OS0xLjIyOSAwLjQ2OS0xLjY5NyAwbC0yLjY1MS0zLjAzMC0yLjY1MSAzLjAyOWMtMC40NjkgMC40NjktMS4yMjkgMC40NjktMS42OTcgMC0wLjQ2OS0wLjQ2OS0wLjQ2OS0xLjIyOSAwLTEuNjk3bDIuNzU4LTMuMTUtMi43NTktMy4xNTJjLTAuNDY5LTAuNDY5LTAuNDY5LTEuMjI4IDAtMS42OTdzMS4yMjgtMC40NjkgMS42OTcgMGwyLjY1MiAzLjAzMSAyLjY1MS0zLjAzMWMwLjQ2OS0wLjQ2OSAxLjIyOC0wLjQ2OSAxLjY5NyAwczAuNDY5IDEuMjI5IDAgMS42OTdsLTIuNzU4IDMuMTUyIDIuNzU4IDMuMTVjMC40NjkgMC40NjkgMC40NjkgMS4yMjkgMCAxLjY5OHpcIiAvPlxuICA8L1N2Zz5cbik7XG5leHBvcnQgY29uc3QgRG93bkNoZXZyb24gPSAocHJvcHM6IGFueSkgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNNC41MTYgNy41NDhjMC40MzYtMC40NDYgMS4wNDMtMC40ODEgMS41NzYgMGwzLjkwOCAzLjc0NyAzLjkwOC0zLjc0N2MwLjUzMy0wLjQ4MSAxLjE0MS0wLjQ0NiAxLjU3NCAwIDAuNDM2IDAuNDQ1IDAuNDA4IDEuMTk3IDAgMS42MTUtMC40MDYgMC40MTgtNC42OTUgNC41MDItNC42OTUgNC41MDItMC4yMTcgMC4yMjMtMC41MDIgMC4zMzUtMC43ODcgMC4zMzVzLTAuNTctMC4xMTItMC43ODktMC4zMzVjMCAwLTQuMjg3LTQuMDg0LTQuNjk1LTQuNTAycy0wLjQzNi0xLjE3IDAtMS42MTV6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgQnV0dG9uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmV4cG9ydCB0eXBlIEluZGljYXRvclByb3BzID0gQ29tbW9uUHJvcHMgJiB7XG4gIC8qKiBUaGUgY2hpbGRyZW4gdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoZSBpbmRpY2F0b3IuICovXG4gIGNoaWxkcmVuOiBOb2RlLFxuICAvKiogUHJvcHMgdGhhdCB3aWxsIGJlIHBhc3NlZCBvbiB0byB0aGUgY2hpbGRyZW4uICovXG4gIGlubmVyUHJvcHM6IGFueSxcbiAgLyoqIFRoZSBmb2N1c2VkIHN0YXRlIG9mIHRoZSBzZWxlY3QuICovXG4gIGlzRm9jdXNlZDogYm9vbGVhbixcbiAgLyoqIFdoZXRoZXIgdGhlIHRleHQgaXMgcmlnaHQgdG8gbGVmdCAqL1xuICBpc1J0bDogYm9vbGVhbixcbn07XG5cbmNvbnN0IGJhc2VDU1MgPSAoe1xuICBpc0ZvY3VzZWQsXG4gIHRoZW1lOiB7XG4gICAgc3BhY2luZzogeyBiYXNlVW5pdCB9LFxuICAgIGNvbG9ycyxcbiAgfSxcbn06IEluZGljYXRvclByb3BzKSA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvckNvbnRhaW5lcicsXG4gIGNvbG9yOiBpc0ZvY3VzZWQgPyBjb2xvcnMubmV1dHJhbDYwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgZGlzcGxheTogJ2ZsZXgnLFxuICBwYWRkaW5nOiBiYXNlVW5pdCAqIDIsXG4gIHRyYW5zaXRpb246ICdjb2xvciAxNTBtcycsXG5cbiAgJzpob3Zlcic6IHtcbiAgICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw4MCA6IGNvbG9ycy5uZXV0cmFsNDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IGRyb3Bkb3duSW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV4cG9ydCBjb25zdCBEcm9wZG93bkluZGljYXRvciA9IChwcm9wczogSW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldFN0eWxlcygnZHJvcGRvd25JbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdkcm9wZG93bi1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW4gfHwgPERvd25DaGV2cm9uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IGNsZWFySW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV4cG9ydCBjb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogSW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiwgY2xhc3N
|
||
|
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
||
|
|
};
|
||
|
|
|
||
|
|
// ==============================
|
||
|
|
// Dropdown & Clear Icons
|
||
|
|
// ==============================
|
||
|
|
var Svg = function Svg(_ref) {
|
||
|
|
var size = _ref.size,
|
||
|
|
props = _objectWithoutProperties__default['default'](_ref, ["size"]);
|
||
|
|
|
||
|
|
return react.jsx("svg", _extends__default['default']({
|
||
|
|
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__default['default']({
|
||
|
|
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__default['default']({
|
||
|
|
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) {
|
||
|
|
var isFocused = _ref3.isFocused,
|
||
|
|
_ref3$theme = _ref3.theme,
|
||
|
|
baseUnit = _ref3$theme.spacing.baseUnit,
|
||
|
|
colors = _ref3$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 react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('dropdownIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'dropdown-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children || react.jsx(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 react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('clearIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'clear-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children || react.jsx(CrossIcon, null));
|
||
|
|
}; // ==============================
|
||
|
|
// Separator
|
||
|
|
// ==============================
|
||
|
|
|
||
|
|
var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
|
||
|
|
var isDisabled = _ref4.isDisabled,
|
||
|
|
_ref4$theme = _ref4.theme,
|
||
|
|
baseUnit = _ref4$theme.spacing.baseUnit,
|
||
|
|
colors = _ref4$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 react.jsx("span", _extends__default['default']({}, innerProps, {
|
||
|
|
css: getStyles('indicatorSeparator', props),
|
||
|
|
className: cx({
|
||
|
|
'indicator-separator': true
|
||
|
|
}, className)
|
||
|
|
}));
|
||
|
|
}; // ==============================
|
||
|
|
// Loading
|
||
|
|
// ==============================
|
||
|
|
|
||
|
|
var loadingDotAnimations = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n"])));
|
||
|
|
var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
|
||
|
|
var isFocused = _ref5.isFocused,
|
||
|
|
size = _ref5.size,
|
||
|
|
_ref5$theme = _ref5.theme,
|
||
|
|
colors = _ref5$theme.colors,
|
||
|
|
baseUnit = _ref5$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(_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' : null,
|
||
|
|
height: '1em',
|
||
|
|
verticalAlign: 'top',
|
||
|
|
width: '1em'
|
||
|
|
}, process.env.NODE_ENV === "production" ? "" : ";label:LoadingDot;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0xJIiwiZmlsZSI6ImluZGljYXRvcnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyB0eXBlIE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBqc3gsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHR5cGUgeyBDb21tb25Qcm9wcywgVGhlbWUgfSBmcm9tICcuLi90eXBlcyc7XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLy8gRHJvcGRvd24gJiBDbGVhciBJY29uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmNvbnN0IFN2ZyA9ICh7IHNpemUsIC4uLnByb3BzIH06IHsgc2l6ZTogbnVtYmVyIH0pID0+IChcbiAgPHN2Z1xuICAgIGhlaWdodD17c2l6ZX1cbiAgICB3aWR0aD17c2l6ZX1cbiAgICB2aWV3Qm94PVwiMCAwIDIwIDIwXCJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgZmlsbDogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBsaW5lSGVpZ2h0OiAxLFxuICAgICAgc3Ryb2tlOiAnY3VycmVudENvbG9yJyxcbiAgICAgIHN0cm9rZVdpZHRoOiAwLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IENyb3NzSWNvbiA9IChwcm9wczogYW55KSA9PiAoXG4gIDxTdmcgc2l6ZT17MjB9IHsuLi5wcm9wc30+XG4gICAgPHBhdGggZD1cIk0xNC4zNDggMTQuODQ5Yy0wLjQ2OSAwLjQ2OS0xLjIyOSAwLjQ2OS0xLjY5NyAwbC0yLjY1MS0zLjAzMC0yLjY1MSAzLjAyOWMtMC40NjkgMC40NjktMS4yMjkgMC40NjktMS42OTcgMC0wLjQ2OS0wLjQ2OS0wLjQ2OS0xLjIyOSAwLTEuNjk3bDIuNzU4LTMuMTUtMi43NTktMy4xNTJjLTAuNDY5LTAuNDY5LTAuNDY5LTEuMjI4IDAtMS42OTdzMS4yMjgtMC40NjkgMS42OTcgMGwyLjY1MiAzLjAzMSAyLjY1MS0zLjAzMWMwLjQ2OS0wLjQ2OSAxLjIyOC0wLjQ2OSAxLjY5NyAwczAuNDY5IDEuMjI5IDAgMS42OTdsLTIuNzU4IDMuMTUyIDIuNzU4IDMuMTVjMC40NjkgMC40NjkgMC40NjkgMS4yMjkgMCAxLjY5OHpcIiAvPlxuICA8L1N2Zz5cbik7XG5leHBvcnQgY29uc3QgRG93bkNoZXZyb24gPSAocHJvcHM6IGFueSkgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNNC41MTYgNy41NDhjMC40MzYtMC40NDYgMS4wNDMtMC40ODEgMS41NzYgMGwzLjkwOCAzLjc0NyAzLjkwOC0zLjc0N2MwLjUzMy0wLjQ4MSAxLjE0MS0wLjQ0NiAxLjU3NCAwIDAuNDM2IDAuNDQ1IDAuNDA4IDEuMTk3IDAgMS42MTUtMC40MDYgMC40MTgtNC42OTUgNC41MDItNC42OTUgNC41MDItMC4yMTcgMC4yMjMtMC41MDIgMC4zMzUtMC43ODcgMC4zMzVzLTAuNTctMC4xMTItMC43ODktMC4zMzVjMCAwLTQuMjg3LTQuMDg0LTQuNjk1LTQuNTAycy0wLjQzNi0xLjE3IDAtMS42MTV6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgQnV0dG9uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmV4cG9ydCB0eXBlIEluZGljYXRvclByb3BzID0gQ29tbW9uUHJvcHMgJiB7XG4gIC8qKiBUaGUgY2hpbGRyZW4gdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoZSBpbmRpY2F0b3IuICovXG4gIGNoaWxkcmVuOiBOb2RlLFxuICAvKiogUHJvcHMgdGhhdCB3aWxsIGJlIHBhc3NlZCBvbiB0byB0aGUgY2hpbGRyZW4uICovXG4gIGlubmVyUHJvcHM6IGFueSxcbiAgLyoqIFRoZSBmb2N1c2VkIHN0YXRlIG9mIHRoZSBzZWxlY3QuICovXG4gIGlzRm9jdXNlZDogYm9vbGVhbixcbiAgLyoqIFdoZXRoZXIgdGhlIHRleHQgaXMgcmlnaHQgdG8gbGVmdCAqL1xuICBpc1J0bDogYm9vbGVhbixcbn07XG5cbmNvbnN0IGJhc2VDU1MgPSAoe1xuICBpc0ZvY3VzZWQsXG4gIHRoZW1lOiB7XG4gICAgc3BhY2luZzogeyBiYXNlVW5pdCB9LFxuICAgIGNvbG9ycyxcbiAgfSxcbn06IEluZGljYXRvclByb3BzKSA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvckNvbnRhaW5lcicsXG4gIGNvbG9yOiBpc0ZvY3VzZWQgPyBjb2xvcnMubmV1dHJhbDYwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgZGlzcGxheTogJ2ZsZXgnLFxuICBwYWRkaW5nOiBiYXNlVW5pdCAqIDIsXG4gIHRyYW5zaXRpb246ICdjb2xvciAxNTBtcycsXG5cbiAgJzpob3Zlcic6IHtcbiAgICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw4MCA6IGNvbG9ycy5uZXV0cmFsNDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IGRyb3Bkb3duSW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV4cG9ydCBjb25zdCBEcm9wZG93bkluZGljYXRvciA9IChwcm9wczogSW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldFN0eWxlcygnZHJvcGRvd25JbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdkcm9wZG93bi1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW4gfHwgPERvd25DaGV2cm9uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IGNsZWFySW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var LoadingIndicator = function LoadingIndicator(props) {
|
||
|
|
var className = props.className,
|
||
|
|
cx = props.cx,
|
||
|
|
getStyles = props.getStyles,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
isRtl = props.isRtl;
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('loadingIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'loading-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), react.jsx(LoadingDot, {
|
||
|
|
delay: 0,
|
||
|
|
offset: isRtl
|
||
|
|
}), react.jsx(LoadingDot, {
|
||
|
|
delay: 160,
|
||
|
|
offset: true
|
||
|
|
}), react.jsx(LoadingDot, {
|
||
|
|
delay: 320,
|
||
|
|
offset: !isRtl
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
LoadingIndicator.defaultProps = {
|
||
|
|
size: 4
|
||
|
|
};
|
||
|
|
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
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);
|
||
|
|
};
|
||
|
|
|
||
|
|
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,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
label = props.label,
|
||
|
|
theme = props.theme,
|
||
|
|
selectProps = props.selectProps;
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('group', props),
|
||
|
|
className: cx({
|
||
|
|
group: true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), react.jsx(Heading, _extends__default['default']({}, headingProps, {
|
||
|
|
selectProps: selectProps,
|
||
|
|
theme: theme,
|
||
|
|
getStyles: getStyles,
|
||
|
|
cx: cx
|
||
|
|
}), label), react.jsx("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 getStyles = props.getStyles,
|
||
|
|
cx = props.cx,
|
||
|
|
className = props.className;
|
||
|
|
|
||
|
|
var _cleanCommonProps = cleanCommonProps(props);
|
||
|
|
_cleanCommonProps.data;
|
||
|
|
var innerProps = _objectWithoutProperties__default['default'](_cleanCommonProps, ["data"]);
|
||
|
|
|
||
|
|
return react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('groupHeading', props),
|
||
|
|
className: cx({
|
||
|
|
'group-heading': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps));
|
||
|
|
};
|
||
|
|
|
||
|
|
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(props) {
|
||
|
|
var className = props.className,
|
||
|
|
cx = props.cx,
|
||
|
|
getStyles = props.getStyles;
|
||
|
|
|
||
|
|
var _cleanCommonProps = cleanCommonProps(props),
|
||
|
|
innerRef = _cleanCommonProps.innerRef,
|
||
|
|
isDisabled = _cleanCommonProps.isDisabled,
|
||
|
|
isHidden = _cleanCommonProps.isHidden,
|
||
|
|
innerProps = _objectWithoutProperties__default['default'](_cleanCommonProps, ["innerRef", "isDisabled", "isHidden"]);
|
||
|
|
|
||
|
|
return react.jsx("div", {
|
||
|
|
css: getStyles('input', props)
|
||
|
|
}, react.jsx(AutosizeInput__default['default'], _extends__default['default']({
|
||
|
|
className: cx({
|
||
|
|
input: true
|
||
|
|
}, className),
|
||
|
|
inputRef: innerRef,
|
||
|
|
inputStyle: inputStyle(isHidden),
|
||
|
|
disabled: isDisabled
|
||
|
|
}, innerProps)));
|
||
|
|
};
|
||
|
|
|
||
|
|
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 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", innerProps, children || react.jsx(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 react.jsx(react.ClassNames, null, function (_ref6) {
|
||
|
|
var css = _ref6.css,
|
||
|
|
emotionCx = _ref6.cx;
|
||
|
|
return react.jsx(Container, {
|
||
|
|
data: data,
|
||
|
|
innerProps: _objectSpread2({
|
||
|
|
className: emotionCx(css(getStyles('multiValue', props)), cx({
|
||
|
|
'multi-value': true,
|
||
|
|
'multi-value--is-disabled': isDisabled
|
||
|
|
}, className))
|
||
|
|
}, innerProps),
|
||
|
|
selectProps: selectProps
|
||
|
|
}, react.jsx(Label, {
|
||
|
|
data: data,
|
||
|
|
innerProps: {
|
||
|
|
className: emotionCx(css(getStyles('multiValueLabel', props)), cx({
|
||
|
|
'multi-value__label': true
|
||
|
|
}, className))
|
||
|
|
},
|
||
|
|
selectProps: selectProps
|
||
|
|
}, children), react.jsx(Remove, {
|
||
|
|
data: data,
|
||
|
|
innerProps: _objectSpread2({
|
||
|
|
className: emotionCx(css(getStyles('multiValueRemove', props)), cx({
|
||
|
|
'multi-value__remove': true
|
||
|
|
}, className))
|
||
|
|
}, removeProps),
|
||
|
|
selectProps: selectProps
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
MultiValue.defaultProps = {
|
||
|
|
cropWithEllipsis: true
|
||
|
|
};
|
||
|
|
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
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 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 react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('placeholder', props),
|
||
|
|
className: cx({
|
||
|
|
placeholder: true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children);
|
||
|
|
};
|
||
|
|
|
||
|
|
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 react.jsx("div", _extends__default['default']({
|
||
|
|
css: getStyles('singleValue', props),
|
||
|
|
className: cx({
|
||
|
|
'single-value': true,
|
||
|
|
'single-value--is-disabled': isDisabled
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children);
|
||
|
|
};
|
||
|
|
|
||
|
|
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 _objectSpread2(_objectSpread2({}, components), props.components);
|
||
|
|
};
|
||
|
|
|
||
|
|
exports.MenuPlacer = MenuPlacer;
|
||
|
|
exports._createSuper = _createSuper;
|
||
|
|
exports._objectSpread2 = _objectSpread2;
|
||
|
|
exports.classNames = classNames;
|
||
|
|
exports.cleanValue = cleanValue;
|
||
|
|
exports.clearIndicatorCSS = clearIndicatorCSS;
|
||
|
|
exports.components = components;
|
||
|
|
exports.containerCSS = containerCSS;
|
||
|
|
exports.css = css;
|
||
|
|
exports.css$1 = css$1;
|
||
|
|
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.multiValueCSS = multiValueCSS;
|
||
|
|
exports.multiValueLabelCSS = multiValueLabelCSS;
|
||
|
|
exports.multiValueRemoveCSS = multiValueRemoveCSS;
|
||
|
|
exports.noOptionsMessageCSS = noOptionsMessageCSS;
|
||
|
|
exports.noop = noop;
|
||
|
|
exports.optionCSS = optionCSS;
|
||
|
|
exports.placeholderCSS = placeholderCSS;
|
||
|
|
exports.scrollIntoView = scrollIntoView;
|
||
|
|
exports.supportsPassiveEvents = supportsPassiveEvents;
|
||
|
|
exports.valueContainerCSS = valueContainerCSS;
|