mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-24 09:25:15 +00:00
1518 lines
62 KiB
JavaScript
1518 lines
62 KiB
JavaScript
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
||
|
|
import { jsx, keyframes, css as css$2, ClassNames } from '@emotion/react';
|
||
|
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
|
||
|
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
||
|
|
import _typeof from '@babel/runtime/helpers/esm/typeof';
|
||
|
|
import AutosizeInput from 'react-input-autosize';
|
||
|
|
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
|
||
|
|
import _createClass from '@babel/runtime/helpers/esm/createClass';
|
||
|
|
import _inherits from '@babel/runtime/helpers/esm/inherits';
|
||
|
|
import _defineProperty$1 from '@babel/runtime/helpers/esm/defineProperty';
|
||
|
|
import { createContext, Component } from 'react';
|
||
|
|
import { createPortal } from 'react-dom';
|
||
|
|
|
||
|
|
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(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(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$1(_ref3, alignToControl(placement), '100%'), _defineProperty$1(_ref3, "backgroundColor", colors.neutral0), _defineProperty$1(_ref3, "borderRadius", borderRadius), _defineProperty$1(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty$1(_ref3, "marginBottom", spacing.menuGutter), _defineProperty$1(_ref3, "marginTop", spacing.menuGutter), _defineProperty$1(_ref3, "position", 'absolute'), _defineProperty$1(_ref3, "width", '100%'), _defineProperty$1(_ref3, "zIndex", 1), _ref3;
|
||
|
|
};
|
||
|
|
var PortalPlacementContext = /*#__PURE__*/createContext({
|
||
|
|
getPortalPlacement: null
|
||
|
|
}); // NOTE: internal only
|
||
|
|
|
||
|
|
var MenuPlacer = /*#__PURE__*/function (_Component) {
|
||
|
|
_inherits(MenuPlacer, _Component);
|
||
|
|
|
||
|
|
var _super = _createSuper(MenuPlacer);
|
||
|
|
|
||
|
|
function MenuPlacer() {
|
||
|
|
var _this;
|
||
|
|
|
||
|
|
_classCallCheck(this, MenuPlacer);
|
||
|
|
|
||
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
_this = _super.call.apply(_super, [this].concat(args));
|
||
|
|
_this.state = {
|
||
|
|
maxHeight: _this.props.maxMenuHeight,
|
||
|
|
placement: null
|
||
|
|
};
|
||
|
|
|
||
|
|
_this.getPlacement = function (ref) {
|
||
|
|
var _this$props = _this.props,
|
||
|
|
minMenuHeight = _this$props.minMenuHeight,
|
||
|
|
maxMenuHeight = _this$props.maxMenuHeight,
|
||
|
|
menuPlacement = _this$props.menuPlacement,
|
||
|
|
menuPosition = _this$props.menuPosition,
|
||
|
|
menuShouldScrollIntoView = _this$props.menuShouldScrollIntoView,
|
||
|
|
theme = _this$props.theme;
|
||
|
|
if (!ref) return; // DO NOT scroll if position is fixed
|
||
|
|
|
||
|
|
var isFixedPosition = menuPosition === 'fixed';
|
||
|
|
var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
|
||
|
|
var state = getMenuPlacement({
|
||
|
|
maxHeight: maxMenuHeight,
|
||
|
|
menuEl: ref,
|
||
|
|
minHeight: minMenuHeight,
|
||
|
|
placement: menuPlacement,
|
||
|
|
shouldScroll: shouldScroll,
|
||
|
|
isFixedPosition: isFixedPosition,
|
||
|
|
theme: theme
|
||
|
|
});
|
||
|
|
var getPortalPlacement = _this.context.getPortalPlacement;
|
||
|
|
if (getPortalPlacement) getPortalPlacement(state);
|
||
|
|
|
||
|
|
_this.setState(state);
|
||
|
|
};
|
||
|
|
|
||
|
|
_this.getUpdatedProps = function () {
|
||
|
|
var menuPlacement = _this.props.menuPlacement;
|
||
|
|
var placement = _this.state.placement || coercePlacement(menuPlacement);
|
||
|
|
return _objectSpread2(_objectSpread2({}, _this.props), {}, {
|
||
|
|
placement: placement,
|
||
|
|
maxHeight: _this.state.maxHeight
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
|
||
|
|
_createClass(MenuPlacer, [{
|
||
|
|
key: "render",
|
||
|
|
value: function render() {
|
||
|
|
var children = this.props.children;
|
||
|
|
return children({
|
||
|
|
ref: this.getPlacement,
|
||
|
|
placerProps: this.getUpdatedProps()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
|
||
|
|
return MenuPlacer;
|
||
|
|
}(Component);
|
||
|
|
MenuPlacer.contextType = PortalPlacementContext;
|
||
|
|
|
||
|
|
var Menu = function Menu(props) {
|
||
|
|
var children = props.children,
|
||
|
|
className = props.className,
|
||
|
|
cx = props.cx,
|
||
|
|
getStyles = props.getStyles,
|
||
|
|
innerRef = props.innerRef,
|
||
|
|
innerProps = props.innerProps;
|
||
|
|
return jsx("div", _extends({
|
||
|
|
css: getStyles('menu', props),
|
||
|
|
className: cx({
|
||
|
|
menu: true
|
||
|
|
}, className),
|
||
|
|
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 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,
|
||
|
|
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 = jsx("div", _extends({
|
||
|
|
css: getStyles('menuPortal', state),
|
||
|
|
className: cx({
|
||
|
|
'menu-portal': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children);
|
||
|
|
return jsx(PortalPlacementContext.Provider, {
|
||
|
|
value: {
|
||
|
|
getPortalPlacement: this.getPortalPlacement
|
||
|
|
}
|
||
|
|
}, appendTo ? /*#__PURE__*/createPortal(menuWrapper, appendTo) : menuWrapper);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
|
||
|
|
return MenuPortal;
|
||
|
|
}(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 jsx("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,
|
||
|
|
innerProps = props.innerProps,
|
||
|
|
isMulti = props.isMulti,
|
||
|
|
getStyles = props.getStyles,
|
||
|
|
hasValue = props.hasValue;
|
||
|
|
return jsx("div", _extends({
|
||
|
|
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 jsx("div", _extends({
|
||
|
|
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(_ref, ["size"]);
|
||
|
|
|
||
|
|
return jsx("svg", _extends({
|
||
|
|
height: size,
|
||
|
|
width: size,
|
||
|
|
viewBox: "0 0 20 20",
|
||
|
|
"aria-hidden": "true",
|
||
|
|
focusable: "false",
|
||
|
|
css: _ref2
|
||
|
|
}, props));
|
||
|
|
};
|
||
|
|
|
||
|
|
var CrossIcon = function CrossIcon(props) {
|
||
|
|
return jsx(Svg, _extends({
|
||
|
|
size: 20
|
||
|
|
}, props), 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 jsx(Svg, _extends({
|
||
|
|
size: 20
|
||
|
|
}, props), 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 jsx("div", _extends({
|
||
|
|
css: getStyles('dropdownIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'dropdown-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children || 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 jsx("div", _extends({
|
||
|
|
css: getStyles('clearIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'clear-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), children || 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 jsx("span", _extends({}, innerProps, {
|
||
|
|
css: getStyles('indicatorSeparator', props),
|
||
|
|
className: cx({
|
||
|
|
'indicator-separator': true
|
||
|
|
}, className)
|
||
|
|
}));
|
||
|
|
}; // ==============================
|
||
|
|
// Loading
|
||
|
|
// ==============================
|
||
|
|
|
||
|
|
var loadingDotAnimations = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 jsx("span", {
|
||
|
|
css: /*#__PURE__*/css$2({
|
||
|
|
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 jsx("div", _extends({
|
||
|
|
css: getStyles('loadingIndicator', props),
|
||
|
|
className: cx({
|
||
|
|
indicator: true,
|
||
|
|
'loading-indicator': true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), jsx(LoadingDot, {
|
||
|
|
delay: 0,
|
||
|
|
offset: isRtl
|
||
|
|
}), jsx(LoadingDot, {
|
||
|
|
delay: 160,
|
||
|
|
offset: true
|
||
|
|
}), 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 jsx("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);
|
||
|
|
};
|
||
|
|
|
||
|
|
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 jsx("div", _extends({
|
||
|
|
css: getStyles('group', props),
|
||
|
|
className: cx({
|
||
|
|
group: true
|
||
|
|
}, className)
|
||
|
|
}, innerProps), jsx(Heading, _extends({}, headingProps, {
|
||
|
|
selectProps: selectProps,
|
||
|
|
theme: theme,
|
||
|
|
getStyles: getStyles,
|
||
|
|
cx: cx
|
||
|
|
}), label), 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(_cleanCommonProps, ["data"]);
|
||
|
|
|
||
|
|
return jsx("div", _extends({
|
||
|
|
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(_cleanCommonProps, ["innerRef", "isDisabled", "isHidden"]);
|
||
|
|
|
||
|
|
return jsx("div", {
|
||
|
|
css: getStyles('input', props)
|
||
|
|
}, jsx(AutosizeInput, _extends({
|
||
|
|
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 jsx("div", innerProps, children);
|
||
|
|
};
|
||
|
|
var MultiValueContainer = MultiValueGeneric;
|
||
|
|
var MultiValueLabel = MultiValueGeneric;
|
||
|
|
function MultiValueRemove(_ref5) {
|
||
|
|
var children = _ref5.children,
|
||
|
|
innerProps = _ref5.innerProps;
|
||
|
|
return jsx("div", innerProps, children || 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 jsx(ClassNames, null, function (_ref6) {
|
||
|
|
var css = _ref6.css,
|
||
|
|
emotionCx = _ref6.cx;
|
||
|
|
return 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
|
||
|
|
}, jsx(Label, {
|
||
|
|
data: data,
|
||
|
|
innerProps: {
|
||
|
|
className: emotionCx(css(getStyles('multiValueLabel', props)), cx({
|
||
|
|
'multi-value__label': true
|
||
|
|
}, className))
|
||
|
|
},
|
||
|
|
selectProps: selectProps
|
||
|
|
}, children), 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 jsx("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 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("div", _extends({
|
||
|
|
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 jsx("div", _extends({
|
||
|
|
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);
|
||
|
|
};
|
||
|
|
|
||
|
|
export { isMobileDevice as A, classNames as B, defaultComponents as C, isDocumentElement as D, cleanValue as E, scrollIntoView as F, noop as G, handleInputChange as H, MenuPlacer as M, _createSuper as _, _objectSpread2 as a, clearIndicatorCSS as b, components as c, containerCSS as d, css as e, dropdownIndicatorCSS as f, groupCSS as g, groupHeadingCSS as h, indicatorsContainerCSS as i, indicatorSeparatorCSS as j, inputCSS as k, loadingIndicatorCSS as l, loadingMessageCSS as m, menuCSS as n, menuListCSS as o, menuPortalCSS as p, multiValueCSS as q, multiValueLabelCSS as r, supportsPassiveEvents as s, multiValueRemoveCSS as t, noOptionsMessageCSS as u, optionCSS as v, placeholderCSS as w, css$1 as x, valueContainerCSS as y, isTouchCapable as z };
|