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