diff --git a/.gitignore b/.gitignore index 3e3336a114..3b1913876d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,4 @@ # Build -lib -dist docs/dist .env diff --git a/dist/react-select.esm.js b/dist/react-select.esm.js new file mode 100644 index 0000000000..e65273c923 --- /dev/null +++ b/dist/react-select.esm.js @@ -0,0 +1,5315 @@ +import React, { Component, PureComponent } from 'react'; +import memoizeOne from 'memoize-one'; +import { css, injectGlobal } from 'emotion'; +import { createPortal, findDOMNode } from 'react-dom'; +import PropTypes from 'prop-types'; +import raf from 'raf'; +import AutosizeInput from 'react-input-autosize'; +import { Transition, TransitionGroup } from 'react-transition-group'; + +function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +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 _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } + + return target; +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) _setPrototypeOf(subClass, superClass); +} + +function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); +} + +function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +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 _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); +} + +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } +} + +function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); +} + +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); +} + +// ============================== +// 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, cssKey, state, className) { + var arr = [cssKey, className]; + + if (state && prefix) { + for (var key in state) { + if (state.hasOwnProperty(key) && state[key]) { + arr.push("".concat(applyPrefixToName(prefix, key))); + } + } + } + + return arr.filter(function (i) { + return i; + }).map(function (i) { + return String(i).trim(); + }).join(' '); +} // ============================== +// Clean Value +// ============================== + +var cleanValue = function cleanValue(value) { + if (Array.isArray(value)) return value.filter(Boolean); + if (_typeof(value) === 'object' && value !== null) return [value]; + return []; +}; // ============================== +// Handle Input Change +// ============================== + +function handleInputChange(inputValue, actionMeta, onInputChange) { + if (onInputChange) { + var newValue = onInputChange(inputValue, actionMeta); + if (typeof newValue === 'string') return newValue; + } + + return inputValue; +} // ============================== +// Scroll Helpers +// ============================== + +function isDocumentElement(el) { + return [document.documentElement, document.body, window].indexOf(el) > -1; +} // Normalized Scroll Top +// ------------------------------ + +function getScrollTop(el) { + if (isDocumentElement(el)) { + return window.pageYOffset; + } + + return el.scrollTop; +} +function scrollTo(el, top) { + // with a scroll distance, we perform scroll on the element + if (isDocumentElement(el)) { + window.scrollTo(0, top); + return; + } + + el.scrollTop = top; +} // Get Scroll Parent +// ------------------------------ + +function getScrollParent(element) { + var style = getComputedStyle(element); + var excludeStaticParent = style.position === 'absolute'; + var overflowRx = /(auto|scroll)/; + var docEl = document.documentElement; // suck it, flow... + + if (style.position === 'fixed') return docEl; + + for (var parent = element; parent = parent.parentElement;) { + style = getComputedStyle(parent); + + if (excludeStaticParent && style.position === 'static') { + continue; + } + + if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) { + return parent; + } + } + + return docEl; +} // Animated Scroll To +// ------------------------------ + +/** + @param t: time (elapsed) + @param b: initial value + @param c: amount of change + @param d: duration +*/ + +function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; +} + +function animatedScrollTo(element, to) { + var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200; + var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop; + var start = getScrollTop(element); + var change = to - start; + var increment = 10; + var currentTime = 0; + + function animateScroll() { + currentTime += increment; + var val = easeOutCubic(currentTime, start, change, duration); + scrollTo(element, val); + + if (currentTime < duration) { + raf(animateScroll); + } else { + callback(element); + } + } + + animateScroll(); +} // Scroll Into View +// ------------------------------ + +function scrollIntoView(menuEl, focusedEl) { + var menuRect = menuEl.getBoundingClientRect(); + var focusedRect = focusedEl.getBoundingClientRect(); + var overScroll = focusedEl.offsetHeight / 3; + + if (focusedRect.bottom + overScroll > menuRect.bottom) { + scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight)); + } else if (focusedRect.top - overScroll < menuRect.top) { + scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0)); + } +} // ============================== +// Get bounding client object +// ============================== +// cannot get keys using array notation with DOMRect + +function getBoundingClientObj(element) { + var rect = element.getBoundingClientRect(); + return { + bottom: rect.bottom, + height: rect.height, + left: rect.left, + right: rect.right, + top: rect.top, + width: rect.width + }; +} +// Touch Capability Detector +// ============================== + +function isTouchCapable() { + try { + document.createEvent('TouchEvent'); + return true; + } catch (e) { + return false; + } +} // ============================== +// Mobile Device Detector +// ============================== + +function isMobileDevice() { + try { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + } catch (e) { + return false; + } +} + +function 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, + scrollParentTop = _scrollParent$getBoun.top; + + var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(), + menuBottom = _menuEl$getBoundingCl.bottom, + menuHeight = _menuEl$getBoundingCl.height, + menuClientTop = _menuEl$getBoundingCl.top; // If not fixed position, need to possibly adjust based on scroll parent + + + var menuTop = isFixedPosition ? menuClientTop : menuClientTop - scrollParentTop; + + var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(), + containerTop = _menuEl$offsetParent$.top; + + var viewHeight = isFixedPosition ? window.innerHeight : scrollHeight; + var scrollTop = getScrollTop(scrollParent); + var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10); + var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10); + var viewSpaceAbove = containerTop - marginTop; + var viewSpaceBelow = viewHeight - menuTop; + var scrollSpaceAbove = viewSpaceAbove + scrollTop; + var scrollSpaceBelow = scrollHeight - scrollTop - menuTop; + var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom; + var scrollUp = scrollTop + menuTop - marginTop; + var scrollDuration = 160; + + switch (placement) { + case 'auto': + case 'bottom': + // 1: the menu will fit, do nothing + if (viewSpaceBelow >= menuHeight) { + return { + placement: 'bottom', + maxHeight: maxHeight + }; + } // 2: the menu will fit, if scrolled + + + if (scrollSpaceBelow >= menuHeight && !isFixedPosition) { + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollDown, scrollDuration); + } + + return { + placement: 'bottom', + maxHeight: maxHeight + }; + } // 3: the menu will fit, if constrained + + + if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) { + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollDown, scrollDuration); + } // we want to provide as much of the menu as possible to the user, + // so give them whatever is available below rather than the minHeight. + + + var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom; + return { + placement: 'bottom', + maxHeight: constrainedHeight + }; + } // 4. Forked beviour when there isn't enough space below + // AUTO: flip the menu, render above + + + if (placement === 'auto' || isFixedPosition) { + // may need to be constrained after flipping + var _constrainedHeight = maxHeight; + var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove; + + if (spaceAbove >= minHeight) { + _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight); + } + + return { + placement: 'top', + maxHeight: _constrainedHeight + }; + } // BOTTOM: allow browser to increase scrollable area and immediately set scroll + + + if (placement === 'bottom') { + scrollTo(scrollParent, scrollDown); // We might also need to constrain the height + + var _constrainedHeight2 = maxHeight; + + if (maxHeight > scrollHeight && !isFixedPosition) { + _constrainedHeight2 = scrollHeight - marginTop - marginBottom; + } + return { + placement: 'bottom', + maxHeight: _constrainedHeight2 + }; + } + + 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 _constrainedHeight3 = 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) { + _constrainedHeight3 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop; + } + + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollUp, scrollDuration); + } + + return { + placement: 'top', + maxHeight: _constrainedHeight3 + }; + } // 4. not enough space, the browser WILL NOT increase scrollable area when + // absolutely positioned element rendered above the viewport (only below). + // Flip the menu, render below + + + return { + placement: 'bottom', + maxHeight: maxHeight + }; + + default: + throw new Error("Invalid placement provided \"".concat(placement, "\".")); + } // fulfil contract with flow: implicit return value of undefined + + + return defaultState; +} // Menu Component +// ------------------------------ + +function alignToControl(placement) { + var placementToCSSProp = { + bottom: 'top', + top: 'bottom' + }; + return placement ? placementToCSSProp[placement] : 'bottom'; +} + +var coercePlacement = function coercePlacement(p) { + return p === 'auto' ? 'bottom' : p; +}; + +var menuCSS = function menuCSS(_ref2) { + var _ref3; + + var placement = _ref2.placement, + _ref2$theme = _ref2.theme, + borderRadius = _ref2$theme.borderRadius, + spacing = _ref2$theme.spacing, + colors = _ref2$theme.colors; + return _ref3 = { + label: 'menu' + }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "backgroundColor", colors.neutral0), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _ref3; +}; // NOTE: internal only + +var MenuPlacer = +/*#__PURE__*/ +function (_Component) { + _inherits(MenuPlacer, _Component); + + function MenuPlacer() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, MenuPlacer); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MenuPlacer)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + maxHeight: _this.props.maxMenuHeight, + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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; + var getPortalPlacement = _this.context.getPortalPlacement; + 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 + }); + if (getPortalPlacement) getPortalPlacement(state); + + _this.setState(state); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getUpdatedProps", function () { + var menuPlacement = _this.props.menuPlacement; + var placement = _this.state.placement || coercePlacement(menuPlacement); + return _objectSpread({}, _this.props, { + placement: placement, + maxHeight: _this.state.maxHeight + }); + }); + + return _this; + } + + _createClass(MenuPlacer, [{ + key: "render", + value: function render() { + var children = this.props.children; + return children({ + ref: this.getPlacement, + placerProps: this.getUpdatedProps() + }); + } + }]); + + return MenuPlacer; +}(Component); + +_defineProperty(MenuPlacer, "contextTypes", { + getPortalPlacement: PropTypes.func +}); + +var Menu = function Menu(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerRef = props.innerRef, + innerProps = props.innerProps; + var cn = cx( + /*#__PURE__*/ + css(getStyles('menu', props)), { + menu: true + }, className); + return React.createElement("div", _extends({ + className: cn + }, innerProps, { + ref: innerRef + }), children); +}; +// Menu List +// ============================== + +var menuListCSS = function menuListCSS(_ref4) { + var maxHeight = _ref4.maxHeight, + baseUnit = _ref4.theme.spacing.baseUnit; + return { + maxHeight: maxHeight, + overflowY: 'auto', + paddingBottom: baseUnit, + paddingTop: baseUnit, + position: 'relative', + // required for offset[Height, Top] > keyboard scroll + WebkitOverflowScrolling: 'touch' + }; +}; +var MenuList = function MenuList(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isMulti = props.isMulti, + innerRef = props.innerRef; + return React.createElement("div", { + className: cx( + /*#__PURE__*/ + css(getStyles('menuList', props)), { + 'menu-list': true, + 'menu-list--is-multi': isMulti + }, className), + ref: innerRef + }, children); +}; // ============================== +// Menu Notices +// ============================== + +var noticeCSS = function noticeCSS(_ref5) { + var _ref5$theme = _ref5.theme, + baseUnit = _ref5$theme.spacing.baseUnit, + colors = _ref5$theme.colors; + return { + color: colors.neutral40, + padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px"), + textAlign: 'center' + }; +}; + +var noOptionsMessageCSS = noticeCSS; +var loadingMessageCSS = noticeCSS; +var NoOptionsMessage = function NoOptionsMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('noOptionsMessage', props)), { + 'menu-notice': true, + 'menu-notice--no-options': true + }, className) + }, innerProps), children); +}; +NoOptionsMessage.defaultProps = { + children: 'No options' +}; +var LoadingMessage = function LoadingMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('loadingMessage', props)), { + '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); + + function MenuPortal() { + var _getPrototypeOf3; + + var _this2; + + _classCallCheck(this, MenuPortal); + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MenuPortal)).call.apply(_getPrototypeOf3, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", { + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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: "getChildContext", + value: function getChildContext() { + return { + getPortalPlacement: this.getPortalPlacement + }; + } // callback for occassions where the menu must "flip" + + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + appendTo = _this$props2.appendTo, + children = _this$props2.children, + controlElement = _this$props2.controlElement, + menuPlacement = _this$props2.menuPlacement, + position = _this$props2.menuPosition, + getStyles = _this$props2.getStyles; + var isFixed = position === 'fixed'; // bail early if required elements aren't present + + if (!appendTo && !isFixed || !controlElement) { + return null; + } + + var placement = this.state.placement || coercePlacement(menuPlacement); + var rect = getBoundingClientObj(controlElement); + var scrollDistance = isFixed ? 0 : window.pageYOffset; + var offset = rect[placement] + scrollDistance; + var state = { + offset: offset, + position: position, + rect: rect + }; // same wrapper element whether fixed or portalled + + var menuWrapper = React.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css(getStyles('menuPortal', state)) + }, children); + return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper; + } + }]); + + return MenuPortal; +}(Component); + +_defineProperty(MenuPortal, "childContextTypes", { + getPortalPlacement: PropTypes.func +}); + +var isArray = Array.isArray; +var keyList = Object.keys; +var hasProp = Object.prototype.hasOwnProperty; + +function equal(a, b) { + // fast-deep-equal index.js 2.0.1 + if (a === b) return true; + + if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') { + var arrA = isArray(a), + arrB = isArray(b), + i, + length, + key; + + if (arrA && arrB) { + length = a.length; + if (length != b.length) return false; + + for (i = length; i-- !== 0;) { + if (!equal(a[i], b[i])) return false; + } + + return true; + } + + if (arrA != arrB) return false; + var dateA = a instanceof Date, + dateB = b instanceof Date; + if (dateA != dateB) return false; + if (dateA && dateB) return a.getTime() == b.getTime(); + var regexpA = a instanceof RegExp, + regexpB = b instanceof RegExp; + if (regexpA != regexpB) return false; + if (regexpA && regexpB) return a.toString() == b.toString(); + var keys = keyList(a); + length = keys.length; + + if (length !== keyList(b).length) { + return false; + } + + for (i = length; i-- !== 0;) { + if (!hasProp.call(b, keys[i])) return false; + } // end fast-deep-equal + // Custom handling for React + + + for (i = length; i-- !== 0;) { + key = keys[i]; + + if (key === '_owner' && a.$$typeof) { + // React-specific: avoid traversing React elements' _owner. + // _owner contains circular references + // and is not needed when comparing the actual elements (and not their owners) + // .$$typeof and ._store on just reasonable markers of a react element + continue; + } else { + // all other properties should be traversed as usual + if (!equal(a[key], b[key])) return false; + } + } // fast-deep-equal index.js 2.0.1 + + + return true; + } + + return a !== a && b !== b; +} // end fast-deep-equal + + +function exportedEqual(a, b) { + try { + return equal(a, b); + } catch (error) { + if (error.message && error.message.match(/stack|recursion/i)) { + // warn on circular references, don't crash + // browsers give this different errors name and messages: + // chrome/safari: "RangeError", "Maximum call stack size exceeded" + // firefox: "InternalError", too much recursion" + // edge: "Error", "Out of stack space" + console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message); + return false; + } // some other error. we should definitely know about these + + + throw error; + } +} + +var diacritics = [{ + base: 'A', + letters: /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g +}, { + base: 'AA', + letters: /[\uA732]/g +}, { + base: 'AE', + letters: /[\u00C6\u01FC\u01E2]/g +}, { + base: 'AO', + letters: /[\uA734]/g +}, { + base: 'AU', + letters: /[\uA736]/g +}, { + base: 'AV', + letters: /[\uA738\uA73A]/g +}, { + base: 'AY', + letters: /[\uA73C]/g +}, { + base: 'B', + letters: /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g +}, { + base: 'C', + letters: /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g +}, { + base: 'D', + letters: /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g +}, { + base: 'DZ', + letters: /[\u01F1\u01C4]/g +}, { + base: 'Dz', + letters: /[\u01F2\u01C5]/g +}, { + base: 'E', + letters: /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g +}, { + base: 'F', + letters: /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g +}, { + base: 'G', + letters: /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g +}, { + base: 'H', + letters: /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g +}, { + base: 'I', + letters: /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g +}, { + base: 'J', + letters: /[\u004A\u24BF\uFF2A\u0134\u0248]/g +}, { + base: 'K', + letters: /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g +}, { + base: 'L', + letters: /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g +}, { + base: 'LJ', + letters: /[\u01C7]/g +}, { + base: 'Lj', + letters: /[\u01C8]/g +}, { + base: 'M', + letters: /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g +}, { + base: 'N', + letters: /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g +}, { + base: 'NJ', + letters: /[\u01CA]/g +}, { + base: 'Nj', + letters: /[\u01CB]/g +}, { + base: 'O', + letters: /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g +}, { + base: 'OI', + letters: /[\u01A2]/g +}, { + base: 'OO', + letters: /[\uA74E]/g +}, { + base: 'OU', + letters: /[\u0222]/g +}, { + base: 'P', + letters: /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g +}, { + base: 'Q', + letters: /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g +}, { + base: 'R', + letters: /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g +}, { + base: 'S', + letters: /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g +}, { + base: 'T', + letters: /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g +}, { + base: 'TZ', + letters: /[\uA728]/g +}, { + base: 'U', + letters: /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g +}, { + base: 'V', + letters: /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g +}, { + base: 'VY', + letters: /[\uA760]/g +}, { + base: 'W', + letters: /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g +}, { + base: 'X', + letters: /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g +}, { + base: 'Y', + letters: /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g +}, { + base: 'Z', + letters: /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g +}, { + base: 'a', + letters: /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g +}, { + base: 'aa', + letters: /[\uA733]/g +}, { + base: 'ae', + letters: /[\u00E6\u01FD\u01E3]/g +}, { + base: 'ao', + letters: /[\uA735]/g +}, { + base: 'au', + letters: /[\uA737]/g +}, { + base: 'av', + letters: /[\uA739\uA73B]/g +}, { + base: 'ay', + letters: /[\uA73D]/g +}, { + base: 'b', + letters: /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g +}, { + base: 'c', + letters: /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g +}, { + base: 'd', + letters: /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g +}, { + base: 'dz', + letters: /[\u01F3\u01C6]/g +}, { + base: 'e', + letters: /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g +}, { + base: 'f', + letters: /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g +}, { + base: 'g', + letters: /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g +}, { + base: 'h', + letters: /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g +}, { + base: 'hv', + letters: /[\u0195]/g +}, { + base: 'i', + letters: /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g +}, { + base: 'j', + letters: /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g +}, { + base: 'k', + letters: /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g +}, { + base: 'l', + letters: /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g +}, { + base: 'lj', + letters: /[\u01C9]/g +}, { + base: 'm', + letters: /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g +}, { + base: 'n', + letters: /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g +}, { + base: 'nj', + letters: /[\u01CC]/g +}, { + base: 'o', + letters: /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g +}, { + base: 'oi', + letters: /[\u01A3]/g +}, { + base: 'ou', + letters: /[\u0223]/g +}, { + base: 'oo', + letters: /[\uA74F]/g +}, { + base: 'p', + letters: /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g +}, { + base: 'q', + letters: /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g +}, { + base: 'r', + letters: /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g +}, { + base: 's', + letters: /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g +}, { + base: 't', + letters: /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g +}, { + base: 'tz', + letters: /[\uA729]/g +}, { + base: 'u', + letters: /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g +}, { + base: 'v', + letters: /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g +}, { + base: 'vy', + letters: /[\uA761]/g +}, { + base: 'w', + letters: /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g +}, { + base: 'x', + letters: /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g +}, { + base: 'y', + letters: /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g +}, { + base: 'z', + letters: /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g +}]; +var stripDiacritics = function stripDiacritics(str) { + for (var i = 0; i < diacritics.length; i++) { + str = str.replace(diacritics[i].letters, diacritics[i].base); + } + + return str; +}; + +var trimString = function trimString(str) { + return str.replace(/^\s+|\s+$/g, ''); +}; + +var defaultStringify = function defaultStringify(option) { + return "".concat(option.label, " ").concat(option.value); +}; + +var createFilter = function createFilter(config) { + return function (option, rawInput) { + var _ignoreCase$ignoreAcc = _objectSpread({ + ignoreCase: true, + ignoreAccents: true, + stringify: defaultStringify, + trim: true, + matchFrom: 'any' + }, config), + ignoreCase = _ignoreCase$ignoreAcc.ignoreCase, + ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents, + stringify = _ignoreCase$ignoreAcc.stringify, + trim = _ignoreCase$ignoreAcc.trim, + matchFrom = _ignoreCase$ignoreAcc.matchFrom; + + var input = trim ? trimString(rawInput) : rawInput; + var candidate = trim ? trimString(stringify(option)) : stringify(option); + + if (ignoreCase) { + input = input.toLowerCase(); + candidate = candidate.toLowerCase(); + } + + if (ignoreAccents) { + input = stripDiacritics(input); + candidate = stripDiacritics(candidate); + } + + return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1; + }; +}; + +var A11yText = function A11yText(props) { + return React.createElement("span", _extends({ + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css({ + label: 'a11yText', + zIndex: 9999, + border: 0, + clip: 'rect(1px, 1px, 1px, 1px)', + height: 1, + width: 1, + position: 'absolute', + overflow: 'hidden', + padding: 0, + whiteSpace: 'nowrap', + backgroundColor: 'red', + color: 'blue' + }) + }, props)); +}; + +var DummyInput = +/*#__PURE__*/ +function (_Component) { + _inherits(DummyInput, _Component); + + function DummyInput() { + _classCallCheck(this, DummyInput); + + return _possibleConstructorReturn(this, _getPrototypeOf(DummyInput).apply(this, arguments)); + } + + _createClass(DummyInput, [{ + key: "render", + value: function render() { + var _this$props = this.props, + inProp = _this$props.in, + out = _this$props.out, + onExited = _this$props.onExited, + appear = _this$props.appear, + enter = _this$props.enter, + exit = _this$props.exit, + innerRef = _this$props.innerRef, + emotion = _this$props.emotion, + props = _objectWithoutProperties(_this$props, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]); + + return React.createElement("input", _extends({ + ref: innerRef + }, props, { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css({ + label: 'dummyInput', + // get rid of any default styles + background: 0, + border: 0, + fontSize: 'inherit', + outline: 0, + padding: 0, + // important! without `width` browsers won't allow focus + width: 1, + // remove cursor on desktop + color: 'transparent', + // remove cursor on mobile whilst maintaining "scroll into view" behaviour + left: -100, + opacity: 0, + position: 'relative', + transform: 'scale(0)' + }) + })); + } + }]); + + return DummyInput; +}(Component); + +var NodeResolver = +/*#__PURE__*/ +function (_Component) { + _inherits(NodeResolver, _Component); + + function NodeResolver() { + _classCallCheck(this, NodeResolver); + + return _possibleConstructorReturn(this, _getPrototypeOf(NodeResolver).apply(this, arguments)); + } + + _createClass(NodeResolver, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.props.innerRef(findDOMNode(this)); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.props.innerRef(null); + } + }, { + key: "render", + value: function render() { + return this.props.children; + } + }]); + + return NodeResolver; +}(Component); + +var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position']; +var LOCK_STYLES = { + boxSizing: 'border-box', + // account for possible declaration `width: 100%;` on body + overflow: 'hidden', + position: 'relative', + height: '100%' +}; + +function preventTouchMove(e) { + e.preventDefault(); +} +function allowTouchMove(e) { + e.stopPropagation(); +} +function preventInertiaScroll() { + var top = this.scrollTop; + var totalScroll = this.scrollHeight; + var currentScroll = top + this.offsetHeight; + + if (top === 0) { + this.scrollTop = 1; + } else if (currentScroll === totalScroll) { + this.scrollTop = top - 1; + } +} // `ontouchstart` check works on most browsers +// `maxTouchPoints` works on IE10/11 and Surface + +function isTouchDevice() { + return 'ontouchstart' in window || navigator.maxTouchPoints; +} + +var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); +var activeScrollLocks = 0; + +var ScrollLock = +/*#__PURE__*/ +function (_Component) { + _inherits(ScrollLock, _Component); + + function ScrollLock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollLock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollLock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "originalStyles", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "listenerOptions", { + capture: false, + passive: false + }); + + return _this; + } + + _createClass(ScrollLock, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + if (!canUseDOM) return; + var _this$props = this.props, + accountForScrollbars = _this$props.accountForScrollbars, + touchScrollTarget = _this$props.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; + + if (accountForScrollbars) { + // store any styles already applied to the body + STYLE_KEYS.forEach(function (key) { + var val = targetStyle && targetStyle[key]; + _this2.originalStyles[key] = val; + }); + } // apply the lock styles and padding if this is the first scroll lock + + + if (accountForScrollbars && activeScrollLocks < 1) { + var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0; + var clientWidth = document.body ? document.body.clientWidth : 0; + var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0; + Object.keys(LOCK_STYLES).forEach(function (key) { + var val = LOCK_STYLES[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + + if (targetStyle) { + targetStyle.paddingRight = "".concat(adjustedPadding, "px"); + } + } // account for touch devices + + + if (target && isTouchDevice()) { + // Mobile Safari ignores { overflow: hidden } declaration on the body. + target.addEventListener('touchmove', preventTouchMove, this.listenerOptions); // Allow scroll on provided target + + if (touchScrollTarget) { + touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, this.listenerOptions); + touchScrollTarget.addEventListener('touchmove', allowTouchMove, this.listenerOptions); + } + } // increment active scroll locks + + + activeScrollLocks += 1; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (!canUseDOM) return; + var _this$props2 = this.props, + accountForScrollbars = _this$props2.accountForScrollbars, + touchScrollTarget = _this$props2.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; // safely decrement active scroll locks + + activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any + + if (accountForScrollbars && activeScrollLocks < 1) { + STYLE_KEYS.forEach(function (key) { + var val = _this3.originalStyles[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + } // remove touch listeners + + + if (target && isTouchDevice()) { + target.removeEventListener('touchmove', preventTouchMove, this.listenerOptions); + + if (touchScrollTarget) { + touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, this.listenerOptions); + touchScrollTarget.removeEventListener('touchmove', allowTouchMove, this.listenerOptions); + } + } + } + }, { + key: "render", + value: function render() { + return null; + } + }]); + + return ScrollLock; +}(Component); + +_defineProperty(ScrollLock, "defaultProps", { + accountForScrollbars: true +}); + +// NOTE: +// We shouldn't need this after updating to React v16.3.0, which introduces: +// - createRef() https://reactjs.org/docs/react-api.html#reactcreateref +// - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref +var ScrollBlock = +/*#__PURE__*/ +function (_PureComponent) { + _inherits(ScrollBlock, _PureComponent); + + function ScrollBlock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollBlock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollBlock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + touchScrollTarget: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + if (ref === _this.state.touchScrollTarget) return; + + _this.setState({ + touchScrollTarget: ref + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurSelectInput", function () { + if (document.activeElement) { + document.activeElement.blur(); + } + }); + + return _this; + } + + _createClass(ScrollBlock, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + isEnabled = _this$props.isEnabled; + var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled + + if (!isEnabled) return children; + /* + * Div + * ------------------------------ + * blocks scrolling on non-body elements behind the menu + * NodeResolver + * ------------------------------ + * we need a reference to the scrollable element to "unlock" scroll on + * mobile devices + * ScrollLock + * ------------------------------ + * actually does the scroll locking + */ + + return React.createElement("div", null, React.createElement("div", { + onClick: this.blurSelectInput, + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css({ + position: 'fixed', + left: 0, + bottom: 0, + right: 0, + top: 0 + }) + }), React.createElement(NodeResolver, { + innerRef: this.getScrollTarget + }, children), touchScrollTarget ? React.createElement(ScrollLock, { + touchScrollTarget: touchScrollTarget + }) : null); + } + }]); + + return ScrollBlock; +}(PureComponent); + +var ScrollCaptor = +/*#__PURE__*/ +function (_Component) { + _inherits(ScrollCaptor, _Component); + + function ScrollCaptor() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollCaptor); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollCaptor)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isBottom", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isTop", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollTarget", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "touchStart", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cancelScroll", function (event) { + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEventDelta", function (event, delta) { + var _this$props = _this.props, + onBottomArrive = _this$props.onBottomArrive, + onBottomLeave = _this$props.onBottomLeave, + onTopArrive = _this$props.onTopArrive, + onTopLeave = _this$props.onTopLeave; + var _this$scrollTarget = _this.scrollTarget, + scrollTop = _this$scrollTarget.scrollTop, + scrollHeight = _this$scrollTarget.scrollHeight, + clientHeight = _this$scrollTarget.clientHeight; + var target = _this.scrollTarget; + var isDeltaPositive = delta > 0; + var availableScroll = scrollHeight - clientHeight - scrollTop; + var shouldCancelScroll = false; // reset bottom/top flags + + if (availableScroll > delta && _this.isBottom) { + if (onBottomLeave) onBottomLeave(event); + _this.isBottom = false; + } + + if (isDeltaPositive && _this.isTop) { + if (onTopLeave) onTopLeave(event); + _this.isTop = false; + } // bottom limit + + + if (isDeltaPositive && delta > availableScroll) { + if (onBottomArrive && !_this.isBottom) { + onBottomArrive(event); + } + + target.scrollTop = scrollHeight; + shouldCancelScroll = true; + _this.isBottom = true; // top limit + } else if (!isDeltaPositive && -delta > scrollTop) { + if (onTopArrive && !_this.isTop) { + onTopArrive(event); + } + + target.scrollTop = 0; + shouldCancelScroll = true; + _this.isTop = true; + } // cancel scroll + + + if (shouldCancelScroll) { + _this.cancelScroll(event); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onWheel", function (event) { + _this.handleEventDelta(event, event.deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (event) { + // set touch start so we can calculate touchmove delta + _this.touchStart = event.changedTouches[0].clientY; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (event) { + var deltaY = _this.touchStart - event.changedTouches[0].clientY; + + _this.handleEventDelta(event, deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + _this.scrollTarget = ref; + }); + + return _this; + } + + _createClass(ScrollCaptor, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListening(this.scrollTarget); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListening(this.scrollTarget); + } + }, { + key: "startListening", + value: function startListening(el) { + // bail early if no scroll available + if (!el) return; + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.addEventListener === 'function') { + el.addEventListener('wheel', this.onWheel, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "stopListening", + value: function stopListening(el) { + // bail early if no scroll available + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('wheel', this.onWheel, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "render", + value: function render() { + return React.createElement(NodeResolver, { + innerRef: this.getScrollTarget + }, this.props.children); + } + }]); + + return ScrollCaptor; +}(Component); + +var ScrollCaptorSwitch = +/*#__PURE__*/ +function (_Component2) { + _inherits(ScrollCaptorSwitch, _Component2); + + function ScrollCaptorSwitch() { + _classCallCheck(this, ScrollCaptorSwitch); + + return _possibleConstructorReturn(this, _getPrototypeOf(ScrollCaptorSwitch).apply(this, arguments)); + } + + _createClass(ScrollCaptorSwitch, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + isEnabled = _this$props2.isEnabled, + props = _objectWithoutProperties(_this$props2, ["isEnabled"]); + + return isEnabled ? React.createElement(ScrollCaptor, props) : this.props.children; + } + }]); + + return ScrollCaptorSwitch; +}(Component); + +_defineProperty(ScrollCaptorSwitch, "defaultProps", { + isEnabled: true +}); + +var instructionsAriaMessage = function instructionsAriaMessage(event) { + var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var isSearchable = context.isSearchable, + isMulti = context.isMulti, + label = context.label, + isDisabled = context.isDisabled; + + switch (event) { + case 'menu': + return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu, press Tab to select the option and exit the menu."); + + case 'input': + return "".concat(label ? label : 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : ''); + + case 'value': + return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'; + } +}; +var valueEventAriaMessage = function valueEventAriaMessage(event, context) { + var value = context.value, + isDisabled = context.isDisabled; + if (!value) return; + + switch (event) { + case 'deselect-option': + case 'pop-value': + case 'remove-value': + return "option ".concat(value, ", deselected."); + + case 'select-option': + return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected."); + } +}; +var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) { + var focusedValue = _ref.focusedValue, + getOptionLabel = _ref.getOptionLabel, + selectValue = _ref.selectValue; + return "value ".concat(getOptionLabel(focusedValue), " focused, ").concat(selectValue.indexOf(focusedValue) + 1, " of ").concat(selectValue.length, "."); +}; +var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) { + var focusedOption = _ref2.focusedOption, + getOptionLabel = _ref2.getOptionLabel, + options = _ref2.options; + return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, "."); +}; +var resultsAriaMessage = function resultsAriaMessage(_ref3) { + var inputValue = _ref3.inputValue, + screenReaderMessage = _ref3.screenReaderMessage; + return "".concat(screenReaderMessage).concat(inputValue ? ' for search term ' + inputValue : '', "."); +}; + +var formatGroupLabel = function formatGroupLabel(group) { + return group.label; +}; +var getOptionLabel = function getOptionLabel(option) { + return option.label; +}; +var getOptionValue = function getOptionValue(option) { + return option.value; +}; +var isOptionDisabled = function isOptionDisabled(option) { + return !!option.isDisabled; +}; + +var containerCSS = function containerCSS(_ref) { + var isDisabled = _ref.isDisabled, + isRtl = _ref.isRtl; + return { + label: 'container', + direction: isRtl ? 'rtl' : null, + pointerEvents: isDisabled ? 'none' : null, + // cancel mouse events when disabled + position: 'relative' + }; +}; +var SelectContainer = function SelectContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isDisabled = props.isDisabled, + isRtl = props.isRtl; + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('container', props)), { + '--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 = +/*#__PURE__*/ +function (_Component) { + _inherits(ValueContainer, _Component); + + function ValueContainer() { + _classCallCheck(this, ValueContainer); + + return _possibleConstructorReturn(this, _getPrototypeOf(ValueContainer).apply(this, arguments)); + } + + _createClass(ValueContainer, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + className = _this$props.className, + cx = _this$props.cx, + isMulti = _this$props.isMulti, + getStyles = _this$props.getStyles, + hasValue = _this$props.hasValue; + return React.createElement("div", { + className: cx( + /*#__PURE__*/ + css(getStyles('valueContainer', this.props)), { + 'value-container': true, + 'value-container--is-multi': isMulti, + 'value-container--has-value': hasValue + }, className) + }, children); + } + }]); + + return ValueContainer; +}(Component); // ============================== +// Indicator Container +// ============================== + +var indicatorsContainerCSS = function indicatorsContainerCSS() { + return { + alignItems: 'center', + alignSelf: 'stretch', + display: 'flex', + flexShrink: 0 + }; +}; +var IndicatorsContainer = function IndicatorsContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles; + return React.createElement("div", { + className: cx( + /*#__PURE__*/ + css(getStyles('indicatorsContainer', props)), { + 'indicators': true + }, className) + }, children); +}; + +// ============================== +// Dropdown & Clear Icons +// ============================== +var Svg = function Svg(_ref) { + var size = _ref.size, + props = _objectWithoutProperties(_ref, ["size"]); + + return React.createElement("svg", _extends({ + height: size, + width: size, + viewBox: "0 0 20 20", + "aria-hidden": "true", + focusable: "false", + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css({ + display: 'inline-block', + fill: 'currentColor', + lineHeight: 1, + stroke: 'currentColor', + strokeWidth: 0 + }) + }, props)); +}; + +var CrossIcon = function CrossIcon(props) { + return React.createElement(Svg, _extends({ + size: 20 + }, props), React.createElement("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.createElement(Svg, _extends({ + size: 20 + }, props), React.createElement("path", { + d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" + })); +}; // ============================== +// Dropdown & Clear Buttons +// ============================== + +var baseCSS = function baseCSS(_ref2) { + var isFocused = _ref2.isFocused, + _ref2$theme = _ref2.theme, + baseUnit = _ref2$theme.spacing.baseUnit, + colors = _ref2$theme.colors; + return { + label: 'indicatorContainer', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + ':hover': { + color: isFocused ? colors.neutral80 : colors.neutral40 + } + }; +}; + +var dropdownIndicatorCSS = baseCSS; +var DropdownIndicator = function DropdownIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + css(getStyles('dropdownIndicator', props)), { + 'indicator': true, + 'dropdown-indicator': true + }, className) + }), children || React.createElement(DownChevron, null)); +}; +var clearIndicatorCSS = baseCSS; +var ClearIndicator = function ClearIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + css(getStyles('clearIndicator', props)), { + 'indicator': true, + 'clear-indicator': true + }, className) + }), children || React.createElement(CrossIcon, null)); +}; // ============================== +// Separator +// ============================== + +var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) { + var isDisabled = _ref3.isDisabled, + _ref3$theme = _ref3.theme, + baseUnit = _ref3$theme.spacing.baseUnit, + colors = _ref3$theme.colors; + return { + label: 'indicatorSeparator', + alignSelf: 'stretch', + backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20, + marginBottom: baseUnit * 2, + marginTop: baseUnit * 2, + width: 1 + }; +}; +var IndicatorSeparator = function IndicatorSeparator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("span", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + css(getStyles('indicatorSeparator', props)), { + 'indicator-separator': true + }, className) + })); +}; // ============================== +// Loading +// ============================== + +var keyframesName = 'react-select-loading-indicator'; +var keyframesInjected = false; +var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) { + var isFocused = _ref4.isFocused, + size = _ref4.size, + _ref4$theme = _ref4.theme, + colors = _ref4$theme.colors, + baseUnit = _ref4$theme.spacing.baseUnit; + return { + label: 'loadingIndicator', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + alignSelf: 'center', + fontSize: size, + lineHeight: 1, + marginRight: size, + textAlign: 'center', + verticalAlign: 'middle' + }; +}; + +var LoadingDot = function LoadingDot(_ref5) { + var color = _ref5.color, + delay = _ref5.delay, + offset = _ref5.offset; + return React.createElement("span", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css({ + animationDuration: '1s', + animationDelay: "".concat(delay, "ms"), + animationIterationCount: 'infinite', + animationName: keyframesName, + animationTimingFunction: 'ease-in-out', + backgroundColor: color, + borderRadius: '1em', + display: 'inline-block', + marginLeft: offset ? '1em' : null, + height: '1em', + verticalAlign: 'top', + width: '1em' + }) + }); +}; + +var LoadingIndicator = function LoadingIndicator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isFocused = props.isFocused, + isRtl = props.isRtl, + colors = props.theme.colors; + var color = isFocused ? colors.neutral80 : colors.neutral20; + + if (!keyframesInjected) { + // eslint-disable-next-line no-unused-expressions + injectGlobal("@keyframes ", keyframesName, "{0%,80%,100%{opacity:0;}40%{opacity:1;}};"); + keyframesInjected = true; + } + + return React.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + css(getStyles('loadingIndicator', props)), { + 'indicator': true, + 'loading-indicator': true + }, className) + }), React.createElement(LoadingDot, { + color: color, + delay: 0, + offset: isRtl + }), React.createElement(LoadingDot, { + color: color, + delay: 160, + offset: true + }), React.createElement(LoadingDot, { + color: color, + delay: 320, + offset: !isRtl + })); +}; +LoadingIndicator.defaultProps = { + size: 4 +}; + +var css$1 = function css$$1(_ref) { + var isDisabled = _ref.isDisabled, + isFocused = _ref.isFocused, + _ref$theme = _ref.theme, + colors = _ref$theme.colors, + borderRadius = _ref$theme.borderRadius, + spacing = _ref$theme.spacing; + return { + label: 'control', + alignItems: 'center', + backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0, + borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20, + borderRadius: borderRadius, + borderStyle: 'solid', + borderWidth: 1, + boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : null, + cursor: 'default', + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + minHeight: spacing.controlHeight, + outline: '0 !important', + position: 'relative', + transition: 'all 100ms', + '&:hover': { + borderColor: isFocused ? colors.primary : colors.neutral30 + } + }; +}; + +var Control = function Control(props) { + var children = props.children, + cx = props.cx, + getStyles = props.getStyles, + className = props.className, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + innerRef = props.innerRef, + innerProps = props.innerProps, + menuIsOpen = props.menuIsOpen; + return React.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + css(getStyles('control', props)), { + '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, + label = props.label, + theme = props.theme, + selectProps = props.selectProps; + return React.createElement("div", { + className: cx( + /*#__PURE__*/ + css(getStyles('group', props)), { + 'group': true + }, className) + }, React.createElement(Heading, _extends({}, headingProps, { + selectProps: selectProps, + theme: theme, + getStyles: getStyles, + cx: cx + }), label), React.createElement("div", null, children)); +}; + +var groupHeadingCSS = function groupHeadingCSS(_ref2) { + var spacing = _ref2.theme.spacing; + return { + label: 'group', + color: '#999', + cursor: 'default', + display: 'block', + fontSize: '75%', + fontWeight: '500', + marginBottom: '0.25em', + paddingLeft: spacing.baseUnit * 3, + paddingRight: spacing.baseUnit * 3, + textTransform: 'uppercase' + }; +}; +var GroupHeading = function GroupHeading(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + theme = props.theme, + selectProps = props.selectProps, + cleanProps = _objectWithoutProperties(props, ["className", "cx", "getStyles", "theme", "selectProps"]); + + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('groupHeading', _objectSpread({ + theme: theme + }, cleanProps))), { + 'group-heading': true + }, className) + }, cleanProps)); +}; + +var inputCSS = function inputCSS(_ref) { + var isDisabled = _ref.isDisabled, + _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + margin: spacing.baseUnit / 2, + paddingBottom: spacing.baseUnit / 2, + paddingTop: spacing.baseUnit / 2, + visibility: isDisabled ? 'hidden' : 'visible', + color: colors.neutral80 + }; +}; + +var inputStyle = function inputStyle(isHidden) { + return { + label: 'input', + background: 0, + border: 0, + fontSize: 'inherit', + opacity: isHidden ? 0 : 1, + outline: 0, + padding: 0, + color: 'inherit' + }; +}; + +var Input = function Input(_ref2) { + var className = _ref2.className, + cx = _ref2.cx, + getStyles = _ref2.getStyles, + innerRef = _ref2.innerRef, + isHidden = _ref2.isHidden, + isDisabled = _ref2.isDisabled, + theme = _ref2.theme, + selectProps = _ref2.selectProps, + props = _objectWithoutProperties(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]); + + return React.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + css(getStyles('input', _objectSpread({ + theme: theme + }, props))) + }, React.createElement(AutosizeInput, _extends({ + className: cx(null, { + 'input': true + }, className), + inputRef: innerRef, + inputStyle: inputStyle(isHidden), + disabled: isDisabled + }, props))); +}; + +var multiValueCSS = function multiValueCSS(_ref) { + var _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + borderRadius = _ref$theme.borderRadius, + colors = _ref$theme.colors; + return { + label: 'multiValue', + backgroundColor: colors.neutral10, + borderRadius: borderRadius / 2, + display: 'flex', + margin: spacing.baseUnit / 2, + minWidth: 0 // resolves flex/text-overflow bug + + }; +}; +var multiValueLabelCSS = function multiValueLabelCSS(_ref2) { + var _ref2$theme = _ref2.theme, + borderRadius = _ref2$theme.borderRadius, + colors = _ref2$theme.colors, + cropWithEllipsis = _ref2.cropWithEllipsis; + return { + borderRadius: borderRadius / 2, + color: colors.neutral80, + fontSize: '85%', + overflow: 'hidden', + padding: 3, + paddingLeft: 6, + textOverflow: cropWithEllipsis ? 'ellipsis' : null, + whiteSpace: 'nowrap' + }; +}; +var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) { + var _ref3$theme = _ref3.theme, + spacing = _ref3$theme.spacing, + borderRadius = _ref3$theme.borderRadius, + colors = _ref3$theme.colors, + isFocused = _ref3.isFocused; + return { + alignItems: 'center', + borderRadius: borderRadius / 2, + backgroundColor: isFocused && colors.dangerLight, + display: 'flex', + paddingLeft: spacing.baseUnit, + paddingRight: spacing.baseUnit, + ':hover': { + backgroundColor: colors.dangerLight, + color: colors.danger + } + }; +}; +var MultiValueGeneric = function MultiValueGeneric(_ref4) { + var children = _ref4.children, + innerProps = _ref4.innerProps; + return React.createElement("div", innerProps, children); +}; +var MultiValueContainer = MultiValueGeneric; +var MultiValueLabel = MultiValueGeneric; +var MultiValueRemove = +/*#__PURE__*/ +function (_Component) { + _inherits(MultiValueRemove, _Component); + + function MultiValueRemove() { + _classCallCheck(this, MultiValueRemove); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValueRemove).apply(this, arguments)); + } + + _createClass(MultiValueRemove, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + innerProps = _this$props.innerProps; + return React.createElement("div", innerProps, children || React.createElement(CrossIcon, { + size: 14 + })); + } + }]); + + return MultiValueRemove; +}(Component); + +var MultiValue = +/*#__PURE__*/ +function (_Component2) { + _inherits(MultiValue, _Component2); + + function MultiValue() { + _classCallCheck(this, MultiValue); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValue).apply(this, arguments)); + } + + _createClass(MultiValue, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + children = _this$props2.children, + className = _this$props2.className, + components = _this$props2.components, + cx = _this$props2.cx, + data = _this$props2.data, + getStyles = _this$props2.getStyles, + innerProps = _this$props2.innerProps, + isDisabled = _this$props2.isDisabled, + removeProps = _this$props2.removeProps, + selectProps = _this$props2.selectProps; + var Container = components.Container, + Label = components.Label, + Remove = components.Remove; + + var containerInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + css(getStyles('multiValue', this.props)), { + 'multi-value': true, + 'multi-value--is-disabled': isDisabled + }, className) + }, innerProps); + + var labelInnerProps = { + className: cx( + /*#__PURE__*/ + css(getStyles('multiValueLabel', this.props)), { + 'multi-value__label': true + }, className) + }; + + var removeInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + css(getStyles('multiValueRemove', this.props)), { + 'multi-value__remove': true + }, className) + }, removeProps); + + return React.createElement(Container, { + data: data, + innerProps: containerInnerProps, + selectProps: selectProps + }, React.createElement(Label, { + data: data, + innerProps: labelInnerProps, + selectProps: selectProps + }, children), React.createElement(Remove, { + data: data, + innerProps: removeInnerProps, + selectProps: selectProps + })); + } + }]); + + return MultiValue; +}(Component); + +_defineProperty(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: isSelected ? colors.primary : colors.primary50 + } + }; +}; + +var Option = function Option(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + isSelected = props.isSelected, + innerRef = props.innerRef, + innerProps = props.innerProps; + return React.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + css(getStyles('option', props)), { + 'option': true, + 'option--is-disabled': isDisabled, + 'option--is-focused': isFocused, + 'option--is-selected': isSelected + }, className) + }, innerProps), children); +}; + +var placeholderCSS = function placeholderCSS(_ref) { + var _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + label: 'placeholder', + color: colors.neutral50, + marginLeft: spacing.baseUnit / 2, + marginRight: spacing.baseUnit / 2, + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)' + }; +}; + +var Placeholder = function Placeholder(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('placeholder', props)), { + 'placeholder': true + }, className) + }, innerProps), children); +}; + +var css$2 = function css$$1(_ref) { + var isDisabled = _ref.isDisabled, + _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + label: 'singleValue', + color: isDisabled ? colors.neutral40 : colors.neutral80, + marginLeft: spacing.baseUnit / 2, + marginRight: spacing.baseUnit / 2, + maxWidth: "calc(100% - ".concat(spacing.baseUnit * 2, "px)"), + overflow: 'hidden', + position: 'absolute', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + top: '50%', + transform: 'translateY(-50%)' + }; +}; + +var SingleValue = function SingleValue(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + innerProps = props.innerProps; + return React.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + css(getStyles('singleValue', props)), { + '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 _objectSpread({}, components, props.components); +}; + +var defaultStyles = { + clearIndicator: clearIndicatorCSS, + container: containerCSS, + control: css$1, + dropdownIndicator: dropdownIndicatorCSS, + group: groupCSS, + groupHeading: groupHeadingCSS, + indicatorsContainer: indicatorsContainerCSS, + indicatorSeparator: indicatorSeparatorCSS, + input: inputCSS, + loadingIndicator: loadingIndicatorCSS, + loadingMessage: loadingMessageCSS, + menu: menuCSS, + menuList: menuListCSS, + menuPortal: menuPortalCSS, + multiValue: multiValueCSS, + multiValueLabel: multiValueLabelCSS, + multiValueRemove: multiValueRemoveCSS, + noOptionsMessage: noOptionsMessageCSS, + option: optionCSS, + placeholder: placeholderCSS, + singleValue: css$2, + valueContainer: valueContainerCSS +}; // Merge Utility +// Allows consumers to extend a base Select with additional styles + +function mergeStyles(source) { + var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + // initialize with source styles + var styles = _objectSpread({}, source); // massage in target styles + + + Object.keys(target).forEach(function (key) { + if (source[key]) { + styles[key] = function (rsCss, props) { + return target[key](source[key](rsCss, props), props); + }; + } else { + styles[key] = target[key]; + } + }); + return styles; +} + +var colors = { + primary: '#2684FF', + primary75: '#4C9AFF', + primary50: '#B2D4FF', + primary25: '#DEEBFF', + danger: '#DE350B', + dangerLight: '#FFBDAD', + neutral0: 'hsl(0, 0%, 100%)', + neutral5: 'hsl(0, 0%, 95%)', + neutral10: 'hsl(0, 0%, 90%)', + neutral20: 'hsl(0, 0%, 80%)', + neutral30: 'hsl(0, 0%, 70%)', + neutral40: 'hsl(0, 0%, 60%)', + neutral50: 'hsl(0, 0%, 50%)', + neutral60: 'hsl(0, 0%, 40%)', + neutral70: 'hsl(0, 0%, 30%)', + neutral80: 'hsl(0, 0%, 20%)', + neutral90: 'hsl(0, 0%, 10%)' +}; +var borderRadius = 4; +var baseUnit = 4; +/* Used to calculate consistent margin/padding on elements */ + +var controlHeight = 38; +/* The minimum height of the control */ + +var menuGutter = baseUnit * 2; +/* The amount of space between the control and menu */ + +var spacing = { + baseUnit: baseUnit, + controlHeight: controlHeight, + menuGutter: menuGutter +}; +var defaultTheme = { + borderRadius: borderRadius, + colors: colors, + spacing: spacing +}; + +var defaultProps = { + backspaceRemovesValue: true, + blurInputOnSelect: isTouchCapable(), + captureMenuScroll: !isTouchCapable(), + closeMenuOnSelect: true, + closeMenuOnScroll: false, + components: {}, + controlShouldRenderValue: true, + escapeClearsValue: false, + filterOption: createFilter(), + formatGroupLabel: formatGroupLabel, + getOptionLabel: getOptionLabel, + getOptionValue: getOptionValue, + isDisabled: false, + isLoading: false, + isMulti: false, + isRtl: false, + isSearchable: true, + isOptionDisabled: isOptionDisabled, + loadingMessage: function loadingMessage() { + return 'Loading...'; + }, + maxMenuHeight: 300, + minMenuHeight: 140, + menuIsOpen: false, + menuPlacement: 'bottom', + menuPosition: 'absolute', + menuShouldBlockScroll: false, + menuShouldScrollIntoView: !isMobileDevice(), + noOptionsMessage: function noOptionsMessage() { + return 'No options'; + }, + openMenuOnFocus: false, + openMenuOnClick: true, + options: [], + pageSize: 5, + placeholder: 'Select...', + screenReaderStatus: function screenReaderStatus(_ref) { + var count = _ref.count; + return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available"); + }, + styles: {}, + tabIndex: '0', + tabSelectsValue: true +}; +var instanceId = 1; + +var Select = +/*#__PURE__*/ +function (_Component) { + _inherits(Select, _Component); + + // Misc. Instance Properties + // ------------------------------ + // TODO + // Refs + // ------------------------------ + // Lifecycle + // ------------------------------ + function Select(_props) { + var _this; + + _classCallCheck(this, Select); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, _props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + ariaLiveSelection: '', + ariaLiveContext: '', + focusedOption: null, + focusedValue: null, + inputIsHidden: false, + isFocused: false, + isComposing: false, + menuOptions: { + render: [], + focusable: [] + }, + selectValue: [] + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blockOptionHover", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearFocusValueOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "commonProps", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "components", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasGroups", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchX", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchY", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputIsHiddenAfterUpdate", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "instancePrefix", ''); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openAfterFocus", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollToFocusedOptionOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "userIsDragging", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "controlRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getControlRef", function (ref) { + _this.controlRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focusedOptionRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getFocusedOptionRef", function (ref) { + _this.focusedOptionRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "menuListRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getMenuListRef", function (ref) { + _this.menuListRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getInputRef", function (ref) { + _this.inputRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheComponents", function (components$$1) { + _this.components = defaultComponents({ + components: components$$1 + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focus", _this.focusInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blur", _this.blurInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + onChange = _this$props.onChange, + name = _this$props.name; + onChange(newValue, _objectSpread({}, actionMeta, { + name: name + })); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setValue", function (newValue) { + var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value'; + var option = arguments.length > 2 ? arguments[2] : undefined; + var _this$props2 = _this.props, + closeMenuOnSelect = _this$props2.closeMenuOnSelect, + isMulti = _this$props2.isMulti; + + _this.onInputChange('', { + action: 'set-value' + }); + + if (closeMenuOnSelect) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } // when the select value should change, we should reset focusedValue + + + _this.clearFocusValueOnUpdate = true; + + _this.onChange(newValue, { + action: action, + option: option + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "selectOption", function (newValue) { + var _this$props3 = _this.props, + blurInputOnSelect = _this$props3.blurInputOnSelect, + isMulti = _this$props3.isMulti; + var selectValue = _this.state.selectValue; + + if (isMulti) { + if (_this.isOptionSelected(newValue, selectValue)) { + var candidate = _this.getOptionValue(newValue); + + _this.setValue(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), 'deselect-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'deselect-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue([].concat(_toConsumableArray(selectValue), [newValue]), 'select-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue(newValue, 'select-option'); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + + if (blurInputOnSelect) { + _this.blurInput(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeValue", function (removedValue) { + var selectValue = _this.state.selectValue; + + var candidate = _this.getOptionValue(removedValue); + + _this.onChange(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), { + action: 'remove-value', + removedValue: removedValue + }); + + _this.announceAriaLiveSelection({ + event: 'remove-value', + context: { + value: removedValue ? _this.getOptionLabel(removedValue) : '' + } + }); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearValue", function () { + var isMulti = _this.props.isMulti; + + _this.onChange(isMulti ? [] : null, { + action: 'clear' + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "popValue", function () { + var selectValue = _this.state.selectValue; + var lastSelectedValue = selectValue[selectValue.length - 1]; + + _this.announceAriaLiveSelection({ + event: 'pop-value', + context: { + value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : '' + } + }); + + _this.onChange(selectValue.slice(0, selectValue.length - 1), { + action: 'pop-value', + removedValue: lastSelectedValue + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionLabel", function (data) { + return _this.props.getOptionLabel(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionValue", function (data) { + return _this.props.getOptionValue(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStyles", function (key, props) { + var base = defaultStyles[key](props); + base.boxSizing = 'border-box'; + var custom = _this.props.styles[key]; + return custom ? custom(base, props) : base; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementId", function (element) { + return "".concat(_this.instancePrefix, "-").concat(element); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveDescendentId", function () { + var menuIsOpen = _this.props.menuIsOpen; + var _this$state = _this.state, + menuOptions = _this$state.menuOptions, + focusedOption = _this$state.focusedOption; + if (!focusedOption || !menuIsOpen) return undefined; + var index = menuOptions.focusable.indexOf(focusedOption); + var option = menuOptions.render[index]; + return option && option.key; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveSelection", function (_ref2) { + var event = _ref2.event, + context = _ref2.context; + + _this.setState({ + ariaLiveSelection: valueEventAriaMessage(event, context) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveContext", function (_ref3) { + var event = _ref3.event, + context = _ref3.context; + + _this.setState({ + ariaLiveContext: instructionsAriaMessage(event, _objectSpread({}, context, { + label: _this.props['aria-label'] + })) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseDown", function (event) { + if (event.button !== 0) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseMove", function (event) { + _this.blockOptionHover = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlMouseDown", function (event) { + var openMenuOnClick = _this.props.openMenuOnClick; + + if (!_this.state.isFocused) { + if (openMenuOnClick) { + _this.openAfterFocus = true; + } + + _this.focusInput(); + } else if (!_this.props.menuIsOpen) { + if (openMenuOnClick) { + _this.openMenu('first'); + } + } else { + //$FlowFixMe + if (event.target.tagName !== 'INPUT') { + _this.onMenuClose(); + } + } //$FlowFixMe + + + if (event.target.tagName !== 'INPUT') { + event.preventDefault(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + if (_this.props.isDisabled) return; + var _this$props4 = _this.props, + isMulti = _this$props4.isMulti, + menuIsOpen = _this$props4.menuIsOpen; + + _this.focusInput(); + + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } else { + _this.openMenu('first'); + } + + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + _this.clearValue(); + + event.stopPropagation(); + _this.openAfterFocus = false; + setTimeout(function () { + return _this.focusInput(); + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onScroll", function (event) { + if (typeof _this.props.closeMenuOnScroll === 'boolean') { + if (event.target instanceof HTMLElement && isDocumentElement(event.target)) { + _this.props.onMenuClose(); + } + } else if (typeof _this.props.closeMenuOnScroll === 'function') { + if (_this.props.closeMenuOnScroll(event)) { + _this.props.onMenuClose(); + } + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionStart", function () { + _this.setState({ + isComposing: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionEnd", function () { + _this.setState({ + isComposing: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (_ref4) { + var touches = _ref4.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + _this.initialTouchX = touch.clientX; + _this.initialTouchY = touch.clientY; + _this.userIsDragging = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (_ref5) { + var touches = _ref5.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + var deltaX = Math.abs(touch.clientX - _this.initialTouchX); + var deltaY = Math.abs(touch.clientY - _this.initialTouchY); + var moveThreshold = 5; + _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchEnd", function (event) { + if (_this.userIsDragging) return; // close the menu if the user taps outside + // we're checking on event.target here instead of event.currentTarget, because we want to assert information + // on events on child elements, not the document (which we've attached this handler to). + + if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) { + _this.blurInput(); + } // reset move vars + + + _this.initialTouchX = 0; + _this.initialTouchY = 0; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onControlMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onClearIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onDropdownIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (event) { + var inputValue = event.currentTarget.value; + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange(inputValue, { + action: 'input-change' + }); + + _this.onMenuOpen(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputFocus", function (event) { + var _this$props5 = _this.props, + isSearchable = _this$props5.isSearchable, + isMulti = _this$props5.isMulti; + + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + + _this.inputIsHiddenAfterUpdate = false; + + _this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + + _this.setState({ + isFocused: true + }); + + if (_this.openAfterFocus || _this.props.openMenuOnFocus) { + _this.openMenu('first'); + } + + _this.openAfterFocus = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputBlur", function (event) { + if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) { + _this.inputRef.focus(); + + return; + } + + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + + _this.onInputChange('', { + action: 'input-blur' + }); + + _this.onMenuClose(); + + _this.setState({ + focusedValue: null, + isFocused: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOptionHover", function (focusedOption) { + if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) { + return; + } + + _this.setState({ + focusedOption: focusedOption + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldHideSelectedOptions", function () { + var _this$props6 = _this.props, + hideSelectedOptions = _this$props6.hideSelectedOptions, + isMulti = _this$props6.isMulti; + if (hideSelectedOptions === undefined) return isMulti; + return hideSelectedOptions; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) { + var _this$props7 = _this.props, + isMulti = _this$props7.isMulti, + backspaceRemovesValue = _this$props7.backspaceRemovesValue, + escapeClearsValue = _this$props7.escapeClearsValue, + inputValue = _this$props7.inputValue, + isClearable = _this$props7.isClearable, + isDisabled = _this$props7.isDisabled, + menuIsOpen = _this$props7.menuIsOpen, + onKeyDown = _this$props7.onKeyDown, + tabSelectsValue = _this$props7.tabSelectsValue, + openMenuOnFocus = _this$props7.openMenuOnFocus; + var _this$state2 = _this.state, + isComposing = _this$state2.isComposing, + focusedOption = _this$state2.focusedOption, + focusedValue = _this$state2.focusedValue, + selectValue = _this$state2.selectValue; + if (isDisabled) return; + + if (typeof onKeyDown === 'function') { + onKeyDown(event); + + if (event.defaultPrevented) { + return; + } + } // Block option hover events when the user has just pressed a key + + + _this.blockOptionHover = true; + + switch (event.key) { + case 'ArrowLeft': + if (!isMulti || inputValue) return; + + _this.focusValue('previous'); + + break; + + case 'ArrowRight': + if (!isMulti || inputValue) return; + + _this.focusValue('next'); + + break; + + case 'Delete': + case 'Backspace': + if (inputValue) return; + + if (focusedValue) { + _this.removeValue(focusedValue); + } else { + if (!backspaceRemovesValue) return; + + if (isMulti) { + _this.popValue(); + } else if (isClearable) { + _this.clearValue(); + } + } + + break; + + case 'Tab': + if (isComposing) return; + + if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused + // option is already selected; it breaks the flow of navigation + openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) { + return; + } + + _this.selectOption(focusedOption); + + break; + + case 'Enter': + if (event.keyCode === 229) { + // ignore the keydown event from an Input Method Editor(IME) + // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode + break; + } + + if (menuIsOpen) { + if (!focusedOption) return; + if (isComposing) return; + + _this.selectOption(focusedOption); + + break; + } + + return; + + case 'Escape': + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange('', { + action: 'menu-close' + }); + + _this.onMenuClose(); + } else if (isClearable && escapeClearsValue) { + _this.clearValue(); + } + + break; + + case ' ': + // space + if (inputValue) { + return; + } + + if (!menuIsOpen) { + _this.openMenu('first'); + + break; + } + + if (!focusedOption) return; + + _this.selectOption(focusedOption); + + break; + + case 'ArrowUp': + if (menuIsOpen) { + _this.focusOption('up'); + } else { + _this.openMenu('last'); + } + + break; + + case 'ArrowDown': + if (menuIsOpen) { + _this.focusOption('down'); + } else { + _this.openMenu('first'); + } + + break; + + case 'PageUp': + if (!menuIsOpen) return; + + _this.focusOption('pageup'); + + break; + + case 'PageDown': + if (!menuIsOpen) return; + + _this.focusOption('pagedown'); + + break; + + case 'Home': + if (!menuIsOpen) return; + + _this.focusOption('first'); + + break; + + case 'End': + if (!menuIsOpen) return; + + _this.focusOption('last'); + + break; + + default: + return; + } + + event.preventDefault(); + }); + + var value = _props.value; + _this.cacheComponents = memoizeOne(_this.cacheComponents, exportedEqual).bind(_assertThisInitialized(_assertThisInitialized(_this))); + + _this.cacheComponents(_props.components); + + _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId); + + var _selectValue = cleanValue(value); + + var _menuOptions = _this.buildMenuOptions(_props, _selectValue); + + _this.state.menuOptions = _menuOptions; + _this.state.selectValue = _selectValue; + return _this; + } + + _createClass(Select, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListeningComposition(); + this.startListeningToTouch(); + + if (this.props.closeMenuOnScroll && document && document.addEventListener) { + // Listen to all scroll events, and filter them out inside of 'onScroll' + document.addEventListener('scroll', this.onScroll, true); + } + + if (this.props.autoFocus) { + this.focusInput(); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var _this$props8 = this.props, + options = _this$props8.options, + value = _this$props8.value, + inputValue = _this$props8.inputValue; // re-cache custom components + + this.cacheComponents(nextProps.components); // rebuild the menu options + + if (nextProps.value !== value || nextProps.options !== options || nextProps.inputValue !== inputValue) { + var selectValue = cleanValue(nextProps.value); + var menuOptions = this.buildMenuOptions(nextProps, selectValue); + var focusedValue = this.getNextFocusedValue(selectValue); + var focusedOption = this.getNextFocusedOption(menuOptions.focusable); + this.setState({ + menuOptions: menuOptions, + selectValue: selectValue, + focusedOption: focusedOption, + focusedValue: focusedValue + }); + } // some updates should toggle the state of the input visibility + + + if (this.inputIsHiddenAfterUpdate != null) { + this.setState({ + inputIsHidden: this.inputIsHiddenAfterUpdate + }); + delete this.inputIsHiddenAfterUpdate; + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + var _this$props9 = this.props, + isDisabled = _this$props9.isDisabled, + menuIsOpen = _this$props9.menuIsOpen; + var isFocused = this.state.isFocused; + + if ( // ensure focus is restored correctly when the control becomes enabled + isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens + isFocused && menuIsOpen && !prevProps.menuIsOpen) { + this.focusInput(); + } // scroll the focused option into view if necessary + + + if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) { + scrollIntoView(this.menuListRef, this.focusedOptionRef); + } + + this.scrollToFocusedOptionOnUpdate = false; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListeningComposition(); + this.stopListeningToTouch(); + document.removeEventListener('scroll', this.onScroll, true); + } + }, { + key: "onMenuOpen", + // ============================== + // Consumer Handlers + // ============================== + value: function onMenuOpen() { + this.props.onMenuOpen(); + } + }, { + key: "onMenuClose", + value: function onMenuClose() { + var _this$props10 = this.props, + isSearchable = _this$props10.isSearchable, + isMulti = _this$props10.isMulti; + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + this.onInputChange('', { + action: 'menu-close' + }); + this.props.onMenuClose(); + } + }, { + key: "onInputChange", + value: function onInputChange(newValue, actionMeta) { + this.props.onInputChange(newValue, actionMeta); + } // ============================== + // Methods + // ============================== + + }, { + key: "focusInput", + value: function focusInput() { + if (!this.inputRef) return; + this.inputRef.focus(); + } + }, { + key: "blurInput", + value: function blurInput() { + if (!this.inputRef) return; + this.inputRef.blur(); + } // aliased for consumers + + }, { + key: "openMenu", + value: function openMenu(focusOption) { + var _this$state3 = this.state, + menuOptions = _this$state3.menuOptions, + selectValue = _this$state3.selectValue, + isFocused = _this$state3.isFocused; + var isMulti = this.props.isMulti; + var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1; + + if (!isMulti) { + var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]); + + if (selectedIndex > -1) { + openAtIndex = selectedIndex; + } + } // only scroll if the menu isn't already open + + + this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef); + this.inputIsHiddenAfterUpdate = false; + this.onMenuOpen(); + this.setState({ + focusedValue: null, + focusedOption: menuOptions.focusable[openAtIndex] + }); + this.announceAriaLiveContext({ + event: 'menu' + }); + } + }, { + key: "focusValue", + value: function focusValue(direction) { + var _this$props11 = this.props, + isMulti = _this$props11.isMulti, + isSearchable = _this$props11.isSearchable; + var _this$state4 = this.state, + selectValue = _this$state4.selectValue, + focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing + + if (!isMulti) return; + this.setState({ + focusedOption: null + }); + var focusedIndex = selectValue.indexOf(focusedValue); + + if (!focusedValue) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'value' + }); + } + + var lastIndex = selectValue.length - 1; + var nextFocus = -1; + if (!selectValue.length) return; + + switch (direction) { + case 'previous': + if (focusedIndex === 0) { + // don't cycle from the start to the end + nextFocus = 0; + } else if (focusedIndex === -1) { + // if nothing is focused, focus the last value first + nextFocus = lastIndex; + } else { + nextFocus = focusedIndex - 1; + } + + break; + + case 'next': + if (focusedIndex > -1 && focusedIndex < lastIndex) { + nextFocus = focusedIndex + 1; + } + + break; + } + + if (nextFocus === -1) { + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + } + + this.setState({ + inputIsHidden: nextFocus === -1 ? false : true, + focusedValue: selectValue[nextFocus] + }); + } + }, { + key: "focusOption", + value: function focusOption() { + var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first'; + var pageSize = this.props.pageSize; + var _this$state5 = this.state, + focusedOption = _this$state5.focusedOption, + menuOptions = _this$state5.menuOptions; + var options = menuOptions.focusable; + if (!options.length) return; + var nextFocus = 0; // handles 'first' + + var focusedIndex = options.indexOf(focusedOption); + + if (!focusedOption) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'menu' + }); + } + + if (direction === 'up') { + nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1; + } else if (direction === 'down') { + nextFocus = (focusedIndex + 1) % options.length; + } else if (direction === 'pageup') { + nextFocus = focusedIndex - pageSize; + if (nextFocus < 0) nextFocus = 0; + } else if (direction === 'pagedown') { + nextFocus = focusedIndex + pageSize; + if (nextFocus > options.length - 1) nextFocus = options.length - 1; + } else if (direction === 'last') { + nextFocus = options.length - 1; + } + + this.scrollToFocusedOptionOnUpdate = true; + this.setState({ + focusedOption: options[nextFocus], + focusedValue: null + }); + this.announceAriaLiveContext({ + event: 'menu', + context: { + isDisabled: isOptionDisabled(options[nextFocus]) + } + }); + } + }, { + key: "getTheme", + // ============================== + // Getters + // ============================== + value: function getTheme() { + // Use the default theme if there are no customizations. + if (!this.props.theme) { + return defaultTheme; + } // If the theme prop is a function, assume the function + // knows how to merge the passed-in default theme with + // its own modifications. + + + if (typeof this.props.theme === 'function') { + return this.props.theme(defaultTheme); + } // Otherwise, if a plain theme object was passed in, + // overlay it with the default theme. + + + return _objectSpread({}, defaultTheme, this.props.theme); + } + }, { + key: "getCommonProps", + value: function getCommonProps() { + var clearValue = this.clearValue, + getStyles = this.getStyles, + setValue = this.setValue, + selectOption = this.selectOption, + props = this.props; + var classNamePrefix = props.classNamePrefix, + isMulti = props.isMulti, + isRtl = props.isRtl, + options = props.options; + var selectValue = this.state.selectValue; + var hasValue = this.hasValue(); + + var getValue = function getValue() { + return selectValue; + }; + + var cx = classNames.bind(null, classNamePrefix); + return { + cx: cx, + clearValue: clearValue, + getStyles: getStyles, + getValue: getValue, + hasValue: hasValue, + isMulti: isMulti, + isRtl: isRtl, + options: options, + selectOption: selectOption, + setValue: setValue, + selectProps: props, + theme: this.getTheme() + }; + } + }, { + key: "getNextFocusedValue", + value: function getNextFocusedValue(nextSelectValue) { + if (this.clearFocusValueOnUpdate) { + this.clearFocusValueOnUpdate = false; + return null; + } + + var _this$state6 = this.state, + focusedValue = _this$state6.focusedValue, + lastSelectValue = _this$state6.selectValue; + var lastFocusedIndex = lastSelectValue.indexOf(focusedValue); + + if (lastFocusedIndex > -1) { + var nextFocusedIndex = nextSelectValue.indexOf(focusedValue); + + if (nextFocusedIndex > -1) { + // the focused value is still in the selectValue, return it + return focusedValue; + } else if (lastFocusedIndex < nextSelectValue.length) { + // the focusedValue is not present in the next selectValue array by + // reference, so return the new value at the same index + return nextSelectValue[lastFocusedIndex]; + } + } + + return null; + } + }, { + key: "getNextFocusedOption", + value: function getNextFocusedOption(options) { + var lastFocusedOption = this.state.focusedOption; + return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0]; + } + }, { + key: "hasValue", + value: function hasValue() { + var selectValue = this.state.selectValue; + return selectValue.length > 0; + } + }, { + key: "hasOptions", + value: function hasOptions() { + return !!this.state.menuOptions.render.length; + } + }, { + key: "countOptions", + value: function countOptions() { + return this.state.menuOptions.focusable.length; + } + }, { + key: "isClearable", + value: function isClearable() { + var _this$props12 = this.props, + isClearable = _this$props12.isClearable, + isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable + // multi select, by default, IS clearable + + if (isClearable === undefined) return isMulti; + return isClearable; + } + }, { + key: "isOptionDisabled", + value: function isOptionDisabled$$1(option, selectValue) { + return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false; + } + }, { + key: "isOptionSelected", + value: function isOptionSelected(option, selectValue) { + var _this2 = this; + + if (selectValue.indexOf(option) > -1) return true; + + if (typeof this.props.isOptionSelected === 'function') { + return this.props.isOptionSelected(option, selectValue); + } + + var candidate = this.getOptionValue(option); + return selectValue.some(function (i) { + return _this2.getOptionValue(i) === candidate; + }); + } + }, { + key: "filterOption", + value: function filterOption(option, inputValue) { + return this.props.filterOption ? this.props.filterOption(option, inputValue) : true; + } + }, { + key: "formatOptionLabel", + value: function formatOptionLabel(data, context) { + if (typeof this.props.formatOptionLabel === 'function') { + var inputValue = this.props.inputValue; + var selectValue = this.state.selectValue; + return this.props.formatOptionLabel(data, { + context: context, + inputValue: inputValue, + selectValue: selectValue + }); + } else { + return this.getOptionLabel(data); + } + } + }, { + key: "formatGroupLabel", + value: function formatGroupLabel$$1(data) { + return this.props.formatGroupLabel(data); + } // ============================== + // Mouse Handlers + // ============================== + + }, { + key: "startListeningComposition", + // ============================== + // Composition Handlers + // ============================== + value: function startListeningComposition() { + if (document && document.addEventListener) { + document.addEventListener('compositionstart', this.onCompositionStart, false); + document.addEventListener('compositionend', this.onCompositionEnd, false); + } + } + }, { + key: "stopListeningComposition", + value: function stopListeningComposition() { + if (document && document.removeEventListener) { + document.removeEventListener('compositionstart', this.onCompositionStart); + document.removeEventListener('compositionend', this.onCompositionEnd); + } + } + }, { + key: "startListeningToTouch", + // ============================== + // Touch Handlers + // ============================== + value: function startListeningToTouch() { + if (document && document.addEventListener) { + document.addEventListener('touchstart', this.onTouchStart, false); + document.addEventListener('touchmove', this.onTouchMove, false); + document.addEventListener('touchend', this.onTouchEnd, false); + } + } + }, { + key: "stopListeningToTouch", + value: function stopListeningToTouch() { + if (document && document.removeEventListener) { + document.removeEventListener('touchstart', this.onTouchStart); + document.removeEventListener('touchmove', this.onTouchMove); + document.removeEventListener('touchend', this.onTouchEnd); + } + } + }, { + key: "buildMenuOptions", + // ============================== + // Menu Options + // ============================== + value: function buildMenuOptions(props, selectValue) { + var _this3 = this; + + var _props$inputValue = props.inputValue, + inputValue = _props$inputValue === void 0 ? '' : _props$inputValue, + options = props.options; + + var toOption = function toOption(option, id) { + var isDisabled = _this3.isOptionDisabled(option, selectValue); + + var isSelected = _this3.isOptionSelected(option, selectValue); + + var label = _this3.getOptionLabel(option); + + var value = _this3.getOptionValue(option); + + if (_this3.shouldHideSelectedOptions() && isSelected || !_this3.filterOption({ + label: label, + value: value, + data: option + }, inputValue)) { + return; + } + + var onHover = isDisabled ? undefined : function () { + return _this3.onOptionHover(option); + }; + var onSelect = isDisabled ? undefined : function () { + return _this3.selectOption(option); + }; + var optionId = "".concat(_this3.getElementId('option'), "-").concat(id); + return { + innerProps: { + id: optionId, + onClick: onSelect, + onMouseMove: onHover, + onMouseOver: onHover, + tabIndex: -1 + }, + data: option, + isDisabled: isDisabled, + isSelected: isSelected, + key: optionId, + label: label, + type: 'option', + value: value + }; + }; + + return options.reduce(function (acc, item, itemIndex) { + if (item.options) { + // TODO needs a tidier implementation + if (!_this3.hasGroups) _this3.hasGroups = true; + var items = item.options; + var children = items.map(function (child, i) { + var option = toOption(child, "".concat(itemIndex, "-").concat(i)); + if (option) acc.focusable.push(child); + return option; + }).filter(Boolean); + + if (children.length) { + var groupId = "".concat(_this3.getElementId('group'), "-").concat(itemIndex); + acc.render.push({ + type: 'group', + key: groupId, + data: item, + options: children + }); + } + } else { + var option = toOption(item, "".concat(itemIndex)); + + if (option) { + acc.render.push(option); + acc.focusable.push(item); + } + } + + return acc; + }, { + render: [], + focusable: [] + }); + } // ============================== + // Renderers + // ============================== + + }, { + key: "constructAriaLiveMessage", + value: function constructAriaLiveMessage() { + var _this$state7 = this.state, + ariaLiveContext = _this$state7.ariaLiveContext, + selectValue = _this$state7.selectValue, + focusedValue = _this$state7.focusedValue, + focusedOption = _this$state7.focusedOption; + var _this$props13 = this.props, + options = _this$props13.options, + menuIsOpen = _this$props13.menuIsOpen, + inputValue = _this$props13.inputValue, + screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select. + + var focusedValueMsg = focusedValue ? valueFocusAriaMessage({ + focusedValue: focusedValue, + getOptionLabel: this.getOptionLabel, + selectValue: selectValue + }) : ''; // An aria live message representing the currently focused option in the select. + + var focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({ + focusedOption: focusedOption, + getOptionLabel: this.getOptionLabel, + options: options + }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue. + + var resultsMsg = resultsAriaMessage({ + inputValue: inputValue, + screenReaderMessage: screenReaderStatus({ + count: this.countOptions() + }) + }); + return "".concat(focusedValueMsg, " ").concat(focusedOptionMsg, " ").concat(resultsMsg, " ").concat(ariaLiveContext); + } + }, { + key: "renderInput", + value: function renderInput() { + var _this$props14 = this.props, + isDisabled = _this$props14.isDisabled, + isSearchable = _this$props14.isSearchable, + inputId = _this$props14.inputId, + inputValue = _this$props14.inputValue, + tabIndex = _this$props14.tabIndex; + var Input = this.components.Input; + var inputIsHidden = this.state.inputIsHidden; + var id = inputId || this.getElementId('input'); + + if (!isSearchable) { + // use a dummy input to maintain focus/blur functionality + return React.createElement(DummyInput, { + id: id, + innerRef: this.getInputRef, + onBlur: this.onInputBlur, + onChange: noop, + onFocus: this.onInputFocus, + readOnly: true, + disabled: isDisabled, + tabIndex: tabIndex, + value: "" + }); + } // aria attributes makes the JSX "noisy", separated for clarity + + + var ariaAttributes = { + 'aria-autocomplete': 'list', + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'] + }; + var _this$commonProps = this.commonProps, + cx = _this$commonProps.cx, + theme = _this$commonProps.theme, + selectProps = _this$commonProps.selectProps; + return React.createElement(Input, _extends({ + autoCapitalize: "none", + autoComplete: "off", + autoCorrect: "off", + cx: cx, + getStyles: this.getStyles, + id: id, + innerRef: this.getInputRef, + isDisabled: isDisabled, + isHidden: inputIsHidden, + onBlur: this.onInputBlur, + onChange: this.handleInputChange, + onFocus: this.onInputFocus, + selectProps: selectProps, + spellCheck: "false", + tabIndex: tabIndex, + theme: theme, + type: "text", + value: inputValue + }, ariaAttributes)); + } + }, { + key: "renderPlaceholderOrValue", + value: function renderPlaceholderOrValue() { + var _this4 = this; + + var _this$components = this.components, + MultiValue = _this$components.MultiValue, + MultiValueContainer = _this$components.MultiValueContainer, + MultiValueLabel = _this$components.MultiValueLabel, + MultiValueRemove = _this$components.MultiValueRemove, + SingleValue = _this$components.SingleValue, + Placeholder = _this$components.Placeholder; + var commonProps = this.commonProps; + var _this$props15 = this.props, + controlShouldRenderValue = _this$props15.controlShouldRenderValue, + isDisabled = _this$props15.isDisabled, + isMulti = _this$props15.isMulti, + inputValue = _this$props15.inputValue, + placeholder = _this$props15.placeholder; + var _this$state8 = this.state, + selectValue = _this$state8.selectValue, + focusedValue = _this$state8.focusedValue, + isFocused = _this$state8.isFocused; + + if (!this.hasValue() || !controlShouldRenderValue) { + return inputValue ? null : React.createElement(Placeholder, _extends({}, commonProps, { + key: "placeholder", + isDisabled: isDisabled, + isFocused: isFocused + }), placeholder); + } + + if (isMulti) { + var selectValues = selectValue.map(function (opt) { + var isOptionFocused = opt === focusedValue; + return React.createElement(MultiValue, _extends({}, commonProps, { + components: { + Container: MultiValueContainer, + Label: MultiValueLabel, + Remove: MultiValueRemove + }, + isFocused: isOptionFocused, + isDisabled: isDisabled, + key: _this4.getOptionValue(opt), + removeProps: { + onClick: function onClick() { + return _this4.removeValue(opt); + }, + onTouchEnd: function onTouchEnd() { + return _this4.removeValue(opt); + }, + onMouseDown: function onMouseDown(e) { + e.preventDefault(); + e.stopPropagation(); + } + }, + data: opt + }), _this4.formatOptionLabel(opt, 'value')); + }); + return selectValues; + } + + if (inputValue) { + return null; + } + + var singleValue = selectValue[0]; + return React.createElement(SingleValue, _extends({}, commonProps, { + data: singleValue, + isDisabled: isDisabled + }), this.formatOptionLabel(singleValue, 'value')); + } + }, { + key: "renderClearIndicator", + value: function renderClearIndicator() { + var ClearIndicator = this.components.ClearIndicator; + var commonProps = this.commonProps; + var _this$props16 = this.props, + isDisabled = _this$props16.isDisabled, + isLoading = _this$props16.isLoading; + var isFocused = this.state.isFocused; + + if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) { + return null; + } + + var innerProps = { + onMouseDown: this.onClearIndicatorMouseDown, + onTouchEnd: this.onClearIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return React.createElement(ClearIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isFocused: isFocused + })); + } + }, { + key: "renderLoadingIndicator", + value: function renderLoadingIndicator() { + var LoadingIndicator = this.components.LoadingIndicator; + var commonProps = this.commonProps; + var _this$props17 = this.props, + isDisabled = _this$props17.isDisabled, + isLoading = _this$props17.isLoading; + var isFocused = this.state.isFocused; + if (!LoadingIndicator || !isLoading) return null; + var innerProps = { + 'aria-hidden': 'true' + }; + return React.createElement(LoadingIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderIndicatorSeparator", + value: function renderIndicatorSeparator() { + var _this$components2 = this.components, + DropdownIndicator = _this$components2.DropdownIndicator, + IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator + + if (!DropdownIndicator || !IndicatorSeparator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + return React.createElement(IndicatorSeparator, _extends({}, commonProps, { + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderDropdownIndicator", + value: function renderDropdownIndicator() { + var DropdownIndicator = this.components.DropdownIndicator; + if (!DropdownIndicator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + var innerProps = { + onMouseDown: this.onDropdownIndicatorMouseDown, + onTouchEnd: this.onDropdownIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return React.createElement(DropdownIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderMenu", + value: function renderMenu() { + var _this5 = this; + + var _this$components3 = this.components, + Group = _this$components3.Group, + GroupHeading = _this$components3.GroupHeading, + Menu$$1 = _this$components3.Menu, + MenuList$$1 = _this$components3.MenuList, + MenuPortal$$1 = _this$components3.MenuPortal, + LoadingMessage$$1 = _this$components3.LoadingMessage, + NoOptionsMessage$$1 = _this$components3.NoOptionsMessage, + Option = _this$components3.Option; + var commonProps = this.commonProps; + var _this$state9 = this.state, + focusedOption = _this$state9.focusedOption, + menuOptions = _this$state9.menuOptions; + var _this$props18 = this.props, + captureMenuScroll = _this$props18.captureMenuScroll, + inputValue = _this$props18.inputValue, + isLoading = _this$props18.isLoading, + loadingMessage = _this$props18.loadingMessage, + minMenuHeight = _this$props18.minMenuHeight, + maxMenuHeight = _this$props18.maxMenuHeight, + menuIsOpen = _this$props18.menuIsOpen, + menuPlacement = _this$props18.menuPlacement, + menuPosition = _this$props18.menuPosition, + menuPortalTarget = _this$props18.menuPortalTarget, + menuShouldBlockScroll = _this$props18.menuShouldBlockScroll, + menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView, + noOptionsMessage = _this$props18.noOptionsMessage, + onMenuScrollToTop = _this$props18.onMenuScrollToTop, + onMenuScrollToBottom = _this$props18.onMenuScrollToBottom; + if (!menuIsOpen) return null; // TODO: Internal Option Type here + + var render = function render(props) { + // for performance, the menu options in state aren't changed when the + // focused option changes so we calculate additional props based on that + var isFocused = focusedOption === props.data; + props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined; + return React.createElement(Option, _extends({}, commonProps, props, { + isFocused: isFocused + }), _this5.formatOptionLabel(props.data, 'menu')); + }; + + var menuUI; + + if (this.hasOptions()) { + menuUI = menuOptions.render.map(function (item) { + if (item.type === 'group') { + var type = item.type, + group = _objectWithoutProperties(item, ["type"]); + + var headingId = "".concat(item.key, "-heading"); + return React.createElement(Group, _extends({}, commonProps, group, { + Heading: GroupHeading, + headingProps: { + id: headingId + }, + label: _this5.formatGroupLabel(item.data) + }), item.options.map(function (option) { + return render(option); + })); + } else if (item.type === 'option') { + return render(item); + } + }); + } else if (isLoading) { + var message = loadingMessage({ + inputValue: inputValue + }); + if (message === null) return null; + menuUI = React.createElement(LoadingMessage$$1, commonProps, message); + } else { + var _message = noOptionsMessage({ + inputValue: inputValue + }); + + if (_message === null) return null; + menuUI = React.createElement(NoOptionsMessage$$1, commonProps, _message); + } + + var menuPlacementProps = { + minMenuHeight: minMenuHeight, + maxMenuHeight: maxMenuHeight, + menuPlacement: menuPlacement, + menuPosition: menuPosition, + menuShouldScrollIntoView: menuShouldScrollIntoView + }; + var menuElement = React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref6) { + var ref = _ref6.ref, + _ref6$placerProps = _ref6.placerProps, + placement = _ref6$placerProps.placement, + maxHeight = _ref6$placerProps.maxHeight; + return React.createElement(Menu$$1, _extends({}, commonProps, menuPlacementProps, { + innerRef: ref, + innerProps: { + onMouseDown: _this5.onMenuMouseDown, + onMouseMove: _this5.onMenuMouseMove + }, + isLoading: isLoading, + placement: placement + }), React.createElement(ScrollCaptorSwitch, { + isEnabled: captureMenuScroll, + onTopArrive: onMenuScrollToTop, + onBottomArrive: onMenuScrollToBottom + }, React.createElement(ScrollBlock, { + isEnabled: menuShouldBlockScroll + }, React.createElement(MenuList$$1, _extends({}, commonProps, { + innerRef: _this5.getMenuListRef, + isLoading: isLoading, + maxHeight: maxHeight + }), menuUI)))); + }); // positioning behaviour is almost identical for portalled and fixed, + // so we use the same component. the actual portalling logic is forked + // within the component based on `menuPosition` + + return menuPortalTarget || menuPosition === 'fixed' ? React.createElement(MenuPortal$$1, _extends({}, commonProps, { + appendTo: menuPortalTarget, + controlElement: this.controlRef, + menuPlacement: menuPlacement, + menuPosition: menuPosition + }), menuElement) : menuElement; + } + }, { + key: "renderFormField", + value: function renderFormField() { + var _this6 = this; + + var _this$props19 = this.props, + delimiter = _this$props19.delimiter, + isDisabled = _this$props19.isDisabled, + isMulti = _this$props19.isMulti, + name = _this$props19.name; + var selectValue = this.state.selectValue; + if (!name || isDisabled) return; + + if (isMulti) { + if (delimiter) { + var value = selectValue.map(function (opt) { + return _this6.getOptionValue(opt); + }).join(delimiter); + return React.createElement("input", { + name: name, + type: "hidden", + value: value + }); + } else { + var input = selectValue.length > 0 ? selectValue.map(function (opt, i) { + return React.createElement("input", { + key: "i-".concat(i), + name: name, + type: "hidden", + value: _this6.getOptionValue(opt) + }); + }) : React.createElement("input", { + name: name, + type: "hidden" + }); + return React.createElement("div", null, input); + } + } else { + var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : ''; + + return React.createElement("input", { + name: name, + type: "hidden", + value: _value + }); + } + } + }, { + key: "renderLiveRegion", + value: function renderLiveRegion() { + if (!this.state.isFocused) return null; + return React.createElement(A11yText, { + "aria-live": "assertive" + }, React.createElement("p", { + id: "aria-selection-event" + }, "\xA0", this.state.ariaLiveSelection), React.createElement("p", { + id: "aria-context" + }, "\xA0", this.constructAriaLiveMessage())); + } + }, { + key: "render", + value: function render() { + var _this$components4 = this.components, + Control = _this$components4.Control, + IndicatorsContainer = _this$components4.IndicatorsContainer, + SelectContainer = _this$components4.SelectContainer, + ValueContainer = _this$components4.ValueContainer; + var _this$props20 = this.props, + className = _this$props20.className, + id = _this$props20.id, + isDisabled = _this$props20.isDisabled, + menuIsOpen = _this$props20.menuIsOpen; + var isFocused = this.state.isFocused; + var commonProps = this.commonProps = this.getCommonProps(); + return React.createElement(SelectContainer, _extends({}, commonProps, { + className: className, + innerProps: { + id: id, + onKeyDown: this.onKeyDown + }, + isDisabled: isDisabled, + isFocused: isFocused + }), this.renderLiveRegion(), React.createElement(Control, _extends({}, commonProps, { + innerRef: this.getControlRef, + innerProps: { + onMouseDown: this.onControlMouseDown, + onTouchEnd: this.onControlTouchEnd + }, + isDisabled: isDisabled, + isFocused: isFocused, + menuIsOpen: menuIsOpen + }), React.createElement(ValueContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderPlaceholderOrValue(), this.renderInput()), React.createElement(IndicatorsContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField()); + } + }]); + + return Select; +}(Component); + +_defineProperty(Select, "defaultProps", defaultProps); + +var defaultProps$1 = { + defaultInputValue: '', + defaultMenuIsOpen: false, + defaultValue: null +}; + +var manageState = function manageState(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(StateManager, _Component); + + function StateManager() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, StateManager); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + inputValue: _this.props.inputValue !== undefined ? _this.props.inputValue : _this.props.defaultInputValue, + menuIsOpen: _this.props.menuIsOpen !== undefined ? _this.props.menuIsOpen : _this.props.defaultMenuIsOpen, + value: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value, actionMeta) { + _this.callProp('onChange', value, actionMeta); + + _this.setState({ + value: value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputChange", function (value, actionMeta) { + // TODO: for backwards compatibility, we allow the prop to return a new + // value, but now inputValue is a controllable prop we probably shouldn't + var newValue = _this.callProp('onInputChange', value, actionMeta); + + _this.setState({ + inputValue: newValue !== undefined ? newValue : value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuOpen", function () { + _this.callProp('onMenuOpen'); + + _this.setState({ + menuIsOpen: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuClose", function () { + _this.callProp('onMenuClose'); + + _this.setState({ + menuIsOpen: false + }); + }); + + return _this; + } + + _createClass(StateManager, [{ + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } // FIXME: untyped flow code, return any + + }, { + key: "getProp", + value: function getProp(key) { + return this.props[key] !== undefined ? this.props[key] : this.state[key]; + } // FIXME: untyped flow code, return any + + }, { + key: "callProp", + value: function callProp(name) { + if (typeof this.props[name] === 'function') { + var _this$props; + + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + return (_this$props = this.props)[name].apply(_this$props, args); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props2 = this.props, + defaultInputValue = _this$props2.defaultInputValue, + defaultMenuIsOpen = _this$props2.defaultMenuIsOpen, + defaultValue = _this$props2.defaultValue, + props = _objectWithoutProperties(_this$props2, ["defaultInputValue", "defaultMenuIsOpen", "defaultValue"]); + + return React.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + inputValue: this.getProp('inputValue'), + menuIsOpen: this.getProp('menuIsOpen'), + onChange: this.onChange, + onInputChange: this.onInputChange, + onMenuClose: this.onMenuClose, + onMenuOpen: this.onMenuOpen, + value: this.getProp('value') + })); + } + }]); + + return StateManager; + }(Component), _defineProperty(_class, "defaultProps", defaultProps$1), _temp; +}; + +var defaultProps$2 = { + cacheOptions: false, + defaultOptions: false, + filterOption: null +}; +var makeAsyncSelect = function makeAsyncSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Async, _Component); + + function Async(props) { + var _this; + + _classCallCheck(this, Async); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Async).call(this)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastRequest", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mounted", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "optionsCache", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (newValue, actionMeta) { + var _this$props = _this.props, + cacheOptions = _this$props.cacheOptions, + onInputChange = _this$props.onInputChange; // TODO + + var inputValue = handleInputChange(newValue, actionMeta, onInputChange); + + if (!inputValue) { + delete _this.lastRequest; + + _this.setState({ + inputValue: '', + loadedInputValue: '', + loadedOptions: [], + isLoading: false, + passEmptyOptions: false + }); + + return; + } + + if (cacheOptions && _this.optionsCache[inputValue]) { + _this.setState({ + inputValue: inputValue, + loadedInputValue: inputValue, + loadedOptions: _this.optionsCache[inputValue], + isLoading: false, + passEmptyOptions: false + }); + } else { + var request = _this.lastRequest = {}; + + _this.setState({ + inputValue: inputValue, + isLoading: true, + passEmptyOptions: !_this.state.loadedInputValue + }, function () { + _this.loadOptions(inputValue, function (options) { + if (!_this.mounted) return; + + if (options) { + _this.optionsCache[inputValue] = options; + } + + if (request !== _this.lastRequest) return; + delete _this.lastRequest; + + _this.setState({ + isLoading: false, + loadedInputValue: inputValue, + loadedOptions: options || [], + passEmptyOptions: false + }); + }); + }); + } + + return inputValue; + }); + + _this.state = { + defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined, + inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '', + isLoading: props.defaultOptions === true ? true : false, + loadedOptions: [], + passEmptyOptions: false + }; + return _this; + } + + _createClass(Async, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + this.mounted = true; + var defaultOptions = this.props.defaultOptions; + var inputValue = this.state.inputValue; + + if (defaultOptions === true) { + this.loadOptions(inputValue, function (options) { + if (!_this2.mounted) return; + var isLoading = !!_this2.lastRequest; + + _this2.setState({ + defaultOptions: options || [], + isLoading: isLoading + }); + }); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + // if the cacheOptions prop changes, clear the cache + if (nextProps.cacheOptions !== this.props.cacheOptions) { + this.optionsCache = {}; + } + + if (nextProps.defaultOptions !== this.props.defaultOptions) { + this.setState({ + defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined + }); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.mounted = false; + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "loadOptions", + value: function loadOptions(inputValue, callback) { + var loadOptions = this.props.loadOptions; + if (!loadOptions) return callback(); + var loader = loadOptions(inputValue, callback); + + if (loader && typeof loader.then === 'function') { + loader.then(callback, function () { + return callback(); + }); + } + } + }, { + key: "render", + value: function render() { + var _this3 = this; + + var _this$props2 = this.props, + loadOptions = _this$props2.loadOptions, + props = _objectWithoutProperties(_this$props2, ["loadOptions"]); + + var _this$state = this.state, + defaultOptions = _this$state.defaultOptions, + inputValue = _this$state.inputValue, + isLoading = _this$state.isLoading, + loadedInputValue = _this$state.loadedInputValue, + loadedOptions = _this$state.loadedOptions, + passEmptyOptions = _this$state.passEmptyOptions; + var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || []; + return React.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this3.select = _ref; + }, + options: options, + isLoading: isLoading, + onInputChange: this.handleInputChange + })); + } + }]); + + return Async; + }(Component), _defineProperty(_class, "defaultProps", defaultProps$2), _temp; +}; +var SelectState = manageState(Select); +var Async = makeAsyncSelect(SelectState); + +var compareOption = function compareOption() { + var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; + var option = arguments.length > 1 ? arguments[1] : undefined; + var candidate = String(inputValue).toLowerCase(); + var optionValue = String(option.value).toLowerCase(); + var optionLabel = String(option.label).toLowerCase(); + return optionValue === candidate || optionLabel === candidate; +}; + +var builtins = { + formatCreateLabel: function formatCreateLabel(inputValue) { + return "Create \"".concat(inputValue, "\""); + }, + isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) { + return !(!inputValue || selectValue.some(function (option) { + return compareOption(inputValue, option); + }) || selectOptions.some(function (option) { + return compareOption(inputValue, option); + })); + }, + getNewOptionData: function getNewOptionData(inputValue, optionLabel) { + return { + label: optionLabel, + value: inputValue, + __isNew__: true + }; + } +}; +var defaultProps$3 = _objectSpread({ + allowCreateWhileLoading: false, + createOptionPosition: 'last' +}, builtins); +var makeCreatableSelect = function makeCreatableSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Creatable, _Component); + + function Creatable(props) { + var _this; + + _classCallCheck(this, Creatable); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Creatable).call(this, props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + getNewOptionData = _this$props.getNewOptionData, + inputValue = _this$props.inputValue, + isMulti = _this$props.isMulti, + onChange = _this$props.onChange, + onCreateOption = _this$props.onCreateOption, + value = _this$props.value; + + if (actionMeta.action !== 'select-option') { + return onChange(newValue, actionMeta); + } + + var newOption = _this.state.newOption; + var valueArray = Array.isArray(newValue) ? newValue : [newValue]; + + if (valueArray[valueArray.length - 1] === newOption) { + if (onCreateOption) onCreateOption(inputValue);else { + var newOptionData = getNewOptionData(inputValue, inputValue); + var newActionMeta = { + action: 'create-option' + }; + + if (isMulti) { + onChange([].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newActionMeta); + } else { + onChange(newOptionData, newActionMeta); + } + } + return; + } + + onChange(newValue, actionMeta); + }); + + var options = props.options || []; + _this.state = { + newOption: undefined, + options: options + }; + return _this; + } + + _createClass(Creatable, [{ + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var allowCreateWhileLoading = nextProps.allowCreateWhileLoading, + createOptionPosition = nextProps.createOptionPosition, + formatCreateLabel = nextProps.formatCreateLabel, + getNewOptionData = nextProps.getNewOptionData, + inputValue = nextProps.inputValue, + isLoading = nextProps.isLoading, + isValidNewOption = nextProps.isValidNewOption, + value = nextProps.value; + var options = nextProps.options || []; + var newOption = this.state.newOption; + + if (isValidNewOption(inputValue, cleanValue(value), options)) { + newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue)); + } else { + newOption = undefined; + } + + this.setState({ + newOption: newOption, + options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options + }); + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var props = _extends({}, this.props); + + var options = this.state.options; + return React.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + options: options, + onChange: this.onChange + })); + } + }]); + + return Creatable; + }(Component), _defineProperty(_class, "defaultProps", defaultProps$3), _temp; +}; // TODO: do this in package entrypoint + +var SelectCreatable = makeCreatableSelect(Select); +var Creatable = manageState(SelectCreatable); + +var SelectCreatable$1 = makeCreatableSelect(Select); +var SelectCreatableState = manageState(SelectCreatable$1); +var AsyncCreatable = makeAsyncSelect(SelectCreatableState); + +// strip transition props off before spreading onto select component +// note we need to be explicit about innerRef for flow +var AnimatedInput = function AnimatedInput(WrappedComponent) { + return function (_ref) { + var inProp = _ref.in, + onExited = _ref.onExited, + appear = _ref.appear, + enter = _ref.enter, + exit = _ref.exit, + props = _objectWithoutProperties(_ref, ["in", "onExited", "appear", "enter", "exit"]); + + return React.createElement(WrappedComponent, props); + }; +}; + +var Fade = function Fade(_ref) { + var Tag = _ref.component, + _ref$duration = _ref.duration, + duration = _ref$duration === void 0 ? 1 : _ref$duration, + inProp = _ref.in, + onExited = _ref.onExited, + props = _objectWithoutProperties(_ref, ["component", "duration", "in", "onExited"]); + + var transition = { + entering: { + opacity: 0 + }, + entered: { + opacity: 1, + transition: "opacity ".concat(duration, "ms") + }, + exiting: { + opacity: 0 + }, + exited: { + opacity: 0 + } + }; + return React.createElement(Transition, { + mountOnEnter: true, + unmountOnExit: true, + in: inProp, + timeout: duration + }, function (state) { + var innerProps = { + style: _objectSpread({}, transition[state]) + }; + return React.createElement(Tag, _extends({ + innerProps: innerProps + }, props)); + }); +}; // ============================== +// Collapse Transition +// ============================== + +var collapseDuration = 260; +// wrap each MultiValue with a collapse transition; decreases width until +// finally removing from DOM +var Collapse = +/*#__PURE__*/ +function (_Component) { + _inherits(Collapse, _Component); + + function Collapse() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, Collapse); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Collapse)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "duration", collapseDuration); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rafID", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + width: 'auto' + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "transition", { + exiting: { + width: 0, + transition: "width ".concat(_this.duration, "ms ease-out") + }, + exited: { + width: 0 + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getWidth", function (ref) { + if (ref && isNaN(_this.state.width)) { + /* + Here we're invoking requestAnimationFrame with a callback invoking our + call to getBoundingClientRect and setState in order to resolve an edge case + around portalling. Certain portalling solutions briefly remove children from the DOM + before appending them to the target node. This is to avoid us trying to call getBoundingClientrect + while the Select component is in this state. + */ + // cannot use `offsetWidth` because it is rounded + _this.rafID = window.requestAnimationFrame(function () { + var _ref$getBoundingClien = ref.getBoundingClientRect(), + width = _ref$getBoundingClien.width; + + _this.setState({ + width: width + }); + }); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStyle", function (width) { + return { + overflow: 'hidden', + whiteSpace: 'nowrap', + width: width + }; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getTransition", function (state) { + return _this.transition[state]; + }); + + return _this; + } + + _createClass(Collapse, [{ + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (this.rafID) { + window.cancelAnimationFrame(this.rafID); + } + } // width must be calculated; cannot transition from `undefined` to `number` + + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props = this.props, + children = _this$props.children, + inProp = _this$props.in; + var width = this.state.width; + return React.createElement(Transition, { + enter: false, + mountOnEnter: true, + unmountOnExit: true, + in: inProp, + timeout: this.duration + }, function (state) { + var style = _objectSpread({}, _this2.getStyle(width), _this2.getTransition(state)); + + return React.createElement("div", { + ref: _this2.getWidth, + style: style + }, children); + }); + } + }]); + + return Collapse; +}(Component); + +var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) { + return function (_ref) { + var inProp = _ref.in, + onExited = _ref.onExited, + props = _objectWithoutProperties(_ref, ["in", "onExited"]); + + return React.createElement(Collapse, { + in: inProp, + onExited: onExited + }, React.createElement(WrappedComponent, _extends({ + cropWithEllipsis: inProp + }, props))); + }; +}; + +var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) { + return function (props) { + return React.createElement(Fade, _extends({ + component: WrappedComponent, + duration: props.isMulti ? collapseDuration : 1 + }, props)); + }; +}; + +var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) { + return function (props) { + return React.createElement(Fade, _extends({ + component: WrappedComponent + }, props)); + }; +}; + +// make ValueContainer a transition group +var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) { + return function (props) { + return React.createElement(TransitionGroup, _extends({ + component: WrappedComponent + }, props)); + }; +}; + +var makeAnimated = function makeAnimated() { + var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var components$$1 = defaultComponents({ + components: externalComponents + }); + + var Input = components$$1.Input, + MultiValue = components$$1.MultiValue, + Placeholder = components$$1.Placeholder, + SingleValue = components$$1.SingleValue, + ValueContainer = components$$1.ValueContainer, + rest = _objectWithoutProperties(components$$1, ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"]); + + return _objectSpread({ + Input: AnimatedInput(Input), + MultiValue: AnimatedMultiValue(MultiValue), + Placeholder: AnimatedPlaceholder(Placeholder), + SingleValue: AnimatedSingleValue(SingleValue), + ValueContainer: AnimatedValueContainer(ValueContainer) + }, rest); +}; + +var AnimatedComponents = makeAnimated(); +var Input$1 = AnimatedComponents.Input; +var MultiValue$1 = AnimatedComponents.MultiValue; +var Placeholder$1 = AnimatedComponents.Placeholder; +var SingleValue$1 = AnimatedComponents.SingleValue; +var ValueContainer$1 = AnimatedComponents.ValueContainer; +var index = memoizeOne(makeAnimated, exportedEqual); + +var index$1 = manageState(Select); + +export default index$1; +export { Select as SelectBase, Async, makeAsyncSelect, AsyncCreatable, Creatable, makeCreatableSelect, createFilter, index as makeAnimated, components, mergeStyles, defaultTheme }; diff --git a/dist/react-select.js b/dist/react-select.js new file mode 100644 index 0000000000..0e5ee09cab --- /dev/null +++ b/dist/react-select.js @@ -0,0 +1,5258 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('emotion'), require('react-dom'), require('prop-types'), require('react-input-autosize')) : + typeof define === 'function' && define.amd ? define(['react', 'emotion', 'react-dom', 'prop-types', 'react-input-autosize'], factory) : + (global = global || self, global.Select = factory(global.React, global.emotion, global.ReactDOM, global.PropTypes, global.AutosizeInput)); +}(this, function (React, emotion, reactDom, PropTypes, AutosizeInput) { 'use strict'; + + var React__default = 'default' in React ? React['default'] : React; + PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; + AutosizeInput = AutosizeInput && AutosizeInput.hasOwnProperty('default') ? AutosizeInput['default'] : AutosizeInput; + + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + 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 _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } + + return target; + } + + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) _setPrototypeOf(subClass, superClass); + } + + function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); + } + + function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); + } + + function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; + } + + function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; + } + + 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 _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } + } + + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); + } + + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + } + + var shallowEqual = function shallowEqual(newValue, oldValue) { + return newValue === oldValue; + }; + + var simpleIsEqual = function simpleIsEqual(newArgs, lastArgs) { + return newArgs.length === lastArgs.length && newArgs.every(function (newArg, index) { + return shallowEqual(newArg, lastArgs[index]); + }); + }; + + function index(resultFn, isEqual) { + if (isEqual === void 0) { + isEqual = simpleIsEqual; + } + + var lastThis; + var lastArgs = []; + var lastResult; + var calledOnce = false; + + var result = function result() { + for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) { + newArgs[_key] = arguments[_key]; + } + + if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) { + return lastResult; + } + + lastResult = resultFn.apply(this, newArgs); + calledOnce = true; + lastThis = this; + lastArgs = newArgs; + return lastResult; + }; + + return result; + } + + var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } + + var performanceNow = createCommonjsModule(function (module) { + // Generated by CoffeeScript 1.12.2 + (function () { + var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime; + + if (typeof performance !== "undefined" && performance !== null && performance.now) { + module.exports = function () { + return performance.now(); + }; + } else if (typeof process !== "undefined" && process !== null && process.hrtime) { + module.exports = function () { + return (getNanoSeconds() - nodeLoadTime) / 1e6; + }; + + hrtime = process.hrtime; + + getNanoSeconds = function getNanoSeconds() { + var hr; + hr = hrtime(); + return hr[0] * 1e9 + hr[1]; + }; + + moduleLoadTime = getNanoSeconds(); + upTime = process.uptime() * 1e9; + nodeLoadTime = moduleLoadTime - upTime; + } else if (Date.now) { + module.exports = function () { + return Date.now() - loadTime; + }; + + loadTime = Date.now(); + } else { + module.exports = function () { + return new Date().getTime() - loadTime; + }; + + loadTime = new Date().getTime(); + } + }).call(commonjsGlobal); + }); + + var root = typeof window === 'undefined' ? commonjsGlobal : window, + vendors = ['moz', 'webkit'], + suffix = 'AnimationFrame', + raf = root['request' + suffix], + caf = root['cancel' + suffix] || root['cancelRequest' + suffix]; + + for (var i = 0; !raf && i < vendors.length; i++) { + raf = root[vendors[i] + 'Request' + suffix]; + caf = root[vendors[i] + 'Cancel' + suffix] || root[vendors[i] + 'CancelRequest' + suffix]; + } // Some versions of FF have rAF but not cAF + + + if (!raf || !caf) { + var last = 0, + id$1 = 0, + queue = [], + frameDuration = 1000 / 60; + + raf = function raf(callback) { + if (queue.length === 0) { + var _now = performanceNow(), + next = Math.max(0, frameDuration - (_now - last)); + + last = next + _now; + setTimeout(function () { + var cp = queue.slice(0); // Clear queue here to prevent + // callbacks from appending listeners + // to the current frame's queue + + queue.length = 0; + + for (var i = 0; i < cp.length; i++) { + if (!cp[i].cancelled) { + try { + cp[i].callback(last); + } catch (e) { + setTimeout(function () { + throw e; + }, 0); + } + } + } + }, Math.round(next)); + } + + queue.push({ + handle: ++id$1, + callback: callback, + cancelled: false + }); + return id$1; + }; + + caf = function caf(handle) { + for (var i = 0; i < queue.length; i++) { + if (queue[i].handle === handle) { + queue[i].cancelled = true; + } + } + }; + } + + var raf_1 = function (fn) { + // Wrap in a new function to prevent + // `cancel` potentially being assigned + // to the native rAF function + return raf.call(root, fn); + }; + + var cancel = function () { + caf.apply(root, arguments); + }; + + var polyfill = function (object) { + if (!object) { + object = root; + } + + object.requestAnimationFrame = raf; + object.cancelAnimationFrame = caf; + }; + raf_1.cancel = cancel; + raf_1.polyfill = polyfill; + + // ============================== + // 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, cssKey, state, className) { + var arr = [cssKey, className]; + + if (state && prefix) { + for (var key in state) { + if (state.hasOwnProperty(key) && state[key]) { + arr.push("".concat(applyPrefixToName(prefix, key))); + } + } + } + + return arr.filter(function (i) { + return i; + }).map(function (i) { + return String(i).trim(); + }).join(' '); + } // ============================== + // Clean Value + // ============================== + + var cleanValue = function cleanValue(value) { + if (Array.isArray(value)) return value.filter(Boolean); + if (_typeof(value) === 'object' && value !== null) return [value]; + return []; + }; // ============================== + // Handle Input Change + // ============================== + + function handleInputChange(inputValue, actionMeta, onInputChange) { + if (onInputChange) { + var newValue = onInputChange(inputValue, actionMeta); + if (typeof newValue === 'string') return newValue; + } + + return inputValue; + } // ============================== + // Scroll Helpers + // ============================== + + function isDocumentElement(el) { + return [document.documentElement, document.body, window].indexOf(el) > -1; + } // Normalized Scroll Top + // ------------------------------ + + function getScrollTop(el) { + if (isDocumentElement(el)) { + return window.pageYOffset; + } + + return el.scrollTop; + } + function scrollTo(el, top) { + // with a scroll distance, we perform scroll on the element + if (isDocumentElement(el)) { + window.scrollTo(0, top); + return; + } + + el.scrollTop = top; + } // Get Scroll Parent + // ------------------------------ + + function getScrollParent(element) { + var style = getComputedStyle(element); + var excludeStaticParent = style.position === 'absolute'; + var overflowRx = /(auto|scroll)/; + var docEl = document.documentElement; // suck it, flow... + + if (style.position === 'fixed') return docEl; + + for (var parent = element; parent = parent.parentElement;) { + style = getComputedStyle(parent); + + if (excludeStaticParent && style.position === 'static') { + continue; + } + + if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) { + return parent; + } + } + + return docEl; + } // Animated Scroll To + // ------------------------------ + + /** + @param t: time (elapsed) + @param b: initial value + @param c: amount of change + @param d: duration + */ + + function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; + } + + function animatedScrollTo(element, to) { + var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200; + var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop; + var start = getScrollTop(element); + var change = to - start; + var increment = 10; + var currentTime = 0; + + function animateScroll() { + currentTime += increment; + var val = easeOutCubic(currentTime, start, change, duration); + scrollTo(element, val); + + if (currentTime < duration) { + raf_1(animateScroll); + } else { + callback(element); + } + } + + animateScroll(); + } // Scroll Into View + // ------------------------------ + + function scrollIntoView(menuEl, focusedEl) { + var menuRect = menuEl.getBoundingClientRect(); + var focusedRect = focusedEl.getBoundingClientRect(); + var overScroll = focusedEl.offsetHeight / 3; + + if (focusedRect.bottom + overScroll > menuRect.bottom) { + scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight)); + } else if (focusedRect.top - overScroll < menuRect.top) { + scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0)); + } + } // ============================== + // Get bounding client object + // ============================== + // cannot get keys using array notation with DOMRect + + function getBoundingClientObj(element) { + var rect = element.getBoundingClientRect(); + return { + bottom: rect.bottom, + height: rect.height, + left: rect.left, + right: rect.right, + top: rect.top, + width: rect.width + }; + } + // Touch Capability Detector + // ============================== + + function isTouchCapable() { + try { + document.createEvent('TouchEvent'); + return true; + } catch (e) { + return false; + } + } // ============================== + // Mobile Device Detector + // ============================== + + function isMobileDevice() { + try { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + } catch (e) { + return false; + } + } + + function 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, + scrollParentTop = _scrollParent$getBoun.top; + + var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(), + menuBottom = _menuEl$getBoundingCl.bottom, + menuHeight = _menuEl$getBoundingCl.height, + menuClientTop = _menuEl$getBoundingCl.top; // If not fixed position, need to possibly adjust based on scroll parent + + + var menuTop = isFixedPosition ? menuClientTop : menuClientTop - scrollParentTop; + + var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(), + containerTop = _menuEl$offsetParent$.top; + + var viewHeight = isFixedPosition ? window.innerHeight : scrollHeight; + var scrollTop = getScrollTop(scrollParent); + var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10); + var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10); + var viewSpaceAbove = containerTop - marginTop; + var viewSpaceBelow = viewHeight - menuTop; + var scrollSpaceAbove = viewSpaceAbove + scrollTop; + var scrollSpaceBelow = scrollHeight - scrollTop - menuTop; + var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom; + var scrollUp = scrollTop + menuTop - marginTop; + var scrollDuration = 160; + + switch (placement) { + case 'auto': + case 'bottom': + // 1: the menu will fit, do nothing + if (viewSpaceBelow >= menuHeight) { + return { + placement: 'bottom', + maxHeight: maxHeight + }; + } // 2: the menu will fit, if scrolled + + + if (scrollSpaceBelow >= menuHeight && !isFixedPosition) { + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollDown, scrollDuration); + } + + return { + placement: 'bottom', + maxHeight: maxHeight + }; + } // 3: the menu will fit, if constrained + + + if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) { + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollDown, scrollDuration); + } // we want to provide as much of the menu as possible to the user, + // so give them whatever is available below rather than the minHeight. + + + var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom; + return { + placement: 'bottom', + maxHeight: constrainedHeight + }; + } // 4. Forked beviour when there isn't enough space below + // AUTO: flip the menu, render above + + + if (placement === 'auto' || isFixedPosition) { + // may need to be constrained after flipping + var _constrainedHeight = maxHeight; + var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove; + + if (spaceAbove >= minHeight) { + _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight); + } + + return { + placement: 'top', + maxHeight: _constrainedHeight + }; + } // BOTTOM: allow browser to increase scrollable area and immediately set scroll + + + if (placement === 'bottom') { + scrollTo(scrollParent, scrollDown); // We might also need to constrain the height + + var _constrainedHeight2 = maxHeight; + + if (maxHeight > scrollHeight && !isFixedPosition) { + _constrainedHeight2 = scrollHeight - marginTop - marginBottom; + } + return { + placement: 'bottom', + maxHeight: _constrainedHeight2 + }; + } + + 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 _constrainedHeight3 = 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) { + _constrainedHeight3 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop; + } + + if (shouldScroll) { + animatedScrollTo(scrollParent, scrollUp, scrollDuration); + } + + return { + placement: 'top', + maxHeight: _constrainedHeight3 + }; + } // 4. not enough space, the browser WILL NOT increase scrollable area when + // absolutely positioned element rendered above the viewport (only below). + // Flip the menu, render below + + + return { + placement: 'bottom', + maxHeight: maxHeight + }; + + default: + throw new Error("Invalid placement provided \"".concat(placement, "\".")); + } // fulfil contract with flow: implicit return value of undefined + + + return defaultState; + } // Menu Component + // ------------------------------ + + function alignToControl(placement) { + var placementToCSSProp = { + bottom: 'top', + top: 'bottom' + }; + return placement ? placementToCSSProp[placement] : 'bottom'; + } + + var coercePlacement = function coercePlacement(p) { + return p === 'auto' ? 'bottom' : p; + }; + + var menuCSS = function menuCSS(_ref2) { + var _ref3; + + var placement = _ref2.placement, + _ref2$theme = _ref2.theme, + borderRadius = _ref2$theme.borderRadius, + spacing = _ref2$theme.spacing, + colors = _ref2$theme.colors; + return _ref3 = { + label: 'menu' + }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "backgroundColor", colors.neutral0), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _ref3; + }; // NOTE: internal only + + var MenuPlacer = + /*#__PURE__*/ + function (_Component) { + _inherits(MenuPlacer, _Component); + + function MenuPlacer() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, MenuPlacer); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MenuPlacer)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + maxHeight: _this.props.maxMenuHeight, + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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; + var getPortalPlacement = _this.context.getPortalPlacement; + 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 + }); + if (getPortalPlacement) getPortalPlacement(state); + + _this.setState(state); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getUpdatedProps", function () { + var menuPlacement = _this.props.menuPlacement; + var placement = _this.state.placement || coercePlacement(menuPlacement); + return _objectSpread({}, _this.props, { + placement: placement, + maxHeight: _this.state.maxHeight + }); + }); + + return _this; + } + + _createClass(MenuPlacer, [{ + key: "render", + value: function render() { + var children = this.props.children; + return children({ + ref: this.getPlacement, + placerProps: this.getUpdatedProps() + }); + } + }]); + + return MenuPlacer; + }(React.Component); + + _defineProperty(MenuPlacer, "contextTypes", { + getPortalPlacement: PropTypes.func + }); + + var Menu = function Menu(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerRef = props.innerRef, + innerProps = props.innerProps; + var cn = cx( + /*#__PURE__*/ + emotion.css(getStyles('menu', props)), { + menu: true + }, className); + return React__default.createElement("div", _extends({ + className: cn + }, innerProps, { + ref: innerRef + }), children); + }; + // Menu List + // ============================== + + var menuListCSS = function menuListCSS(_ref4) { + var maxHeight = _ref4.maxHeight, + baseUnit = _ref4.theme.spacing.baseUnit; + return { + maxHeight: maxHeight, + overflowY: 'auto', + paddingBottom: baseUnit, + paddingTop: baseUnit, + position: 'relative', + // required for offset[Height, Top] > keyboard scroll + WebkitOverflowScrolling: 'touch' + }; + }; + var MenuList = function MenuList(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isMulti = props.isMulti, + innerRef = props.innerRef; + return React__default.createElement("div", { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('menuList', props)), { + 'menu-list': true, + 'menu-list--is-multi': isMulti + }, className), + ref: innerRef + }, children); + }; // ============================== + // Menu Notices + // ============================== + + var noticeCSS = function noticeCSS(_ref5) { + var _ref5$theme = _ref5.theme, + baseUnit = _ref5$theme.spacing.baseUnit, + colors = _ref5$theme.colors; + return { + color: colors.neutral40, + padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px"), + textAlign: 'center' + }; + }; + + var noOptionsMessageCSS = noticeCSS; + var loadingMessageCSS = noticeCSS; + var NoOptionsMessage = function NoOptionsMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('noOptionsMessage', props)), { + 'menu-notice': true, + 'menu-notice--no-options': true + }, className) + }, innerProps), children); + }; + NoOptionsMessage.defaultProps = { + children: 'No options' + }; + var LoadingMessage = function LoadingMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('loadingMessage', props)), { + '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); + + function MenuPortal() { + var _getPrototypeOf3; + + var _this2; + + _classCallCheck(this, MenuPortal); + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MenuPortal)).call.apply(_getPrototypeOf3, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", { + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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: "getChildContext", + value: function getChildContext() { + return { + getPortalPlacement: this.getPortalPlacement + }; + } // callback for occassions where the menu must "flip" + + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + appendTo = _this$props2.appendTo, + children = _this$props2.children, + controlElement = _this$props2.controlElement, + menuPlacement = _this$props2.menuPlacement, + position = _this$props2.menuPosition, + getStyles = _this$props2.getStyles; + var isFixed = position === 'fixed'; // bail early if required elements aren't present + + if (!appendTo && !isFixed || !controlElement) { + return null; + } + + var placement = this.state.placement || coercePlacement(menuPlacement); + var rect = getBoundingClientObj(controlElement); + var scrollDistance = isFixed ? 0 : window.pageYOffset; + var offset = rect[placement] + scrollDistance; + var state = { + offset: offset, + position: position, + rect: rect + }; // same wrapper element whether fixed or portalled + + var menuWrapper = React__default.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css(getStyles('menuPortal', state)) + }, children); + return appendTo ? reactDom.createPortal(menuWrapper, appendTo) : menuWrapper; + } + }]); + + return MenuPortal; + }(React.Component); + + _defineProperty(MenuPortal, "childContextTypes", { + getPortalPlacement: PropTypes.func + }); + + var isArray = Array.isArray; + var keyList = Object.keys; + var hasProp = Object.prototype.hasOwnProperty; + + function equal(a, b) { + // fast-deep-equal index.js 2.0.1 + if (a === b) return true; + + if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') { + var arrA = isArray(a), + arrB = isArray(b), + i, + length, + key; + + if (arrA && arrB) { + length = a.length; + if (length != b.length) return false; + + for (i = length; i-- !== 0;) { + if (!equal(a[i], b[i])) return false; + } + + return true; + } + + if (arrA != arrB) return false; + var dateA = a instanceof Date, + dateB = b instanceof Date; + if (dateA != dateB) return false; + if (dateA && dateB) return a.getTime() == b.getTime(); + var regexpA = a instanceof RegExp, + regexpB = b instanceof RegExp; + if (regexpA != regexpB) return false; + if (regexpA && regexpB) return a.toString() == b.toString(); + var keys = keyList(a); + length = keys.length; + + if (length !== keyList(b).length) { + return false; + } + + for (i = length; i-- !== 0;) { + if (!hasProp.call(b, keys[i])) return false; + } // end fast-deep-equal + // Custom handling for React + + + for (i = length; i-- !== 0;) { + key = keys[i]; + + if (key === '_owner' && a.$$typeof) { + // React-specific: avoid traversing React elements' _owner. + // _owner contains circular references + // and is not needed when comparing the actual elements (and not their owners) + // .$$typeof and ._store on just reasonable markers of a react element + continue; + } else { + // all other properties should be traversed as usual + if (!equal(a[key], b[key])) return false; + } + } // fast-deep-equal index.js 2.0.1 + + + return true; + } + + return a !== a && b !== b; + } // end fast-deep-equal + + + function exportedEqual(a, b) { + try { + return equal(a, b); + } catch (error) { + if (error.message && error.message.match(/stack|recursion/i)) { + // warn on circular references, don't crash + // browsers give this different errors name and messages: + // chrome/safari: "RangeError", "Maximum call stack size exceeded" + // firefox: "InternalError", too much recursion" + // edge: "Error", "Out of stack space" + console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message); + return false; + } // some other error. we should definitely know about these + + + throw error; + } + } + + var diacritics = [{ + base: 'A', + letters: /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g + }, { + base: 'AA', + letters: /[\uA732]/g + }, { + base: 'AE', + letters: /[\u00C6\u01FC\u01E2]/g + }, { + base: 'AO', + letters: /[\uA734]/g + }, { + base: 'AU', + letters: /[\uA736]/g + }, { + base: 'AV', + letters: /[\uA738\uA73A]/g + }, { + base: 'AY', + letters: /[\uA73C]/g + }, { + base: 'B', + letters: /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g + }, { + base: 'C', + letters: /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g + }, { + base: 'D', + letters: /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g + }, { + base: 'DZ', + letters: /[\u01F1\u01C4]/g + }, { + base: 'Dz', + letters: /[\u01F2\u01C5]/g + }, { + base: 'E', + letters: /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g + }, { + base: 'F', + letters: /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g + }, { + base: 'G', + letters: /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g + }, { + base: 'H', + letters: /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g + }, { + base: 'I', + letters: /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g + }, { + base: 'J', + letters: /[\u004A\u24BF\uFF2A\u0134\u0248]/g + }, { + base: 'K', + letters: /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g + }, { + base: 'L', + letters: /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g + }, { + base: 'LJ', + letters: /[\u01C7]/g + }, { + base: 'Lj', + letters: /[\u01C8]/g + }, { + base: 'M', + letters: /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g + }, { + base: 'N', + letters: /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g + }, { + base: 'NJ', + letters: /[\u01CA]/g + }, { + base: 'Nj', + letters: /[\u01CB]/g + }, { + base: 'O', + letters: /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g + }, { + base: 'OI', + letters: /[\u01A2]/g + }, { + base: 'OO', + letters: /[\uA74E]/g + }, { + base: 'OU', + letters: /[\u0222]/g + }, { + base: 'P', + letters: /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g + }, { + base: 'Q', + letters: /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g + }, { + base: 'R', + letters: /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g + }, { + base: 'S', + letters: /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g + }, { + base: 'T', + letters: /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g + }, { + base: 'TZ', + letters: /[\uA728]/g + }, { + base: 'U', + letters: /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g + }, { + base: 'V', + letters: /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g + }, { + base: 'VY', + letters: /[\uA760]/g + }, { + base: 'W', + letters: /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g + }, { + base: 'X', + letters: /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g + }, { + base: 'Y', + letters: /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g + }, { + base: 'Z', + letters: /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g + }, { + base: 'a', + letters: /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g + }, { + base: 'aa', + letters: /[\uA733]/g + }, { + base: 'ae', + letters: /[\u00E6\u01FD\u01E3]/g + }, { + base: 'ao', + letters: /[\uA735]/g + }, { + base: 'au', + letters: /[\uA737]/g + }, { + base: 'av', + letters: /[\uA739\uA73B]/g + }, { + base: 'ay', + letters: /[\uA73D]/g + }, { + base: 'b', + letters: /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g + }, { + base: 'c', + letters: /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g + }, { + base: 'd', + letters: /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g + }, { + base: 'dz', + letters: /[\u01F3\u01C6]/g + }, { + base: 'e', + letters: /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g + }, { + base: 'f', + letters: /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g + }, { + base: 'g', + letters: /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g + }, { + base: 'h', + letters: /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g + }, { + base: 'hv', + letters: /[\u0195]/g + }, { + base: 'i', + letters: /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g + }, { + base: 'j', + letters: /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g + }, { + base: 'k', + letters: /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g + }, { + base: 'l', + letters: /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g + }, { + base: 'lj', + letters: /[\u01C9]/g + }, { + base: 'm', + letters: /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g + }, { + base: 'n', + letters: /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g + }, { + base: 'nj', + letters: /[\u01CC]/g + }, { + base: 'o', + letters: /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g + }, { + base: 'oi', + letters: /[\u01A3]/g + }, { + base: 'ou', + letters: /[\u0223]/g + }, { + base: 'oo', + letters: /[\uA74F]/g + }, { + base: 'p', + letters: /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g + }, { + base: 'q', + letters: /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g + }, { + base: 'r', + letters: /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g + }, { + base: 's', + letters: /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g + }, { + base: 't', + letters: /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g + }, { + base: 'tz', + letters: /[\uA729]/g + }, { + base: 'u', + letters: /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g + }, { + base: 'v', + letters: /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g + }, { + base: 'vy', + letters: /[\uA761]/g + }, { + base: 'w', + letters: /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g + }, { + base: 'x', + letters: /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g + }, { + base: 'y', + letters: /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g + }, { + base: 'z', + letters: /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g + }]; + var stripDiacritics = function stripDiacritics(str) { + for (var i = 0; i < diacritics.length; i++) { + str = str.replace(diacritics[i].letters, diacritics[i].base); + } + + return str; + }; + + var trimString = function trimString(str) { + return str.replace(/^\s+|\s+$/g, ''); + }; + + var defaultStringify = function defaultStringify(option) { + return "".concat(option.label, " ").concat(option.value); + }; + + var createFilter = function createFilter(config) { + return function (option, rawInput) { + var _ignoreCase$ignoreAcc = _objectSpread({ + ignoreCase: true, + ignoreAccents: true, + stringify: defaultStringify, + trim: true, + matchFrom: 'any' + }, config), + ignoreCase = _ignoreCase$ignoreAcc.ignoreCase, + ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents, + stringify = _ignoreCase$ignoreAcc.stringify, + trim = _ignoreCase$ignoreAcc.trim, + matchFrom = _ignoreCase$ignoreAcc.matchFrom; + + var input = trim ? trimString(rawInput) : rawInput; + var candidate = trim ? trimString(stringify(option)) : stringify(option); + + if (ignoreCase) { + input = input.toLowerCase(); + candidate = candidate.toLowerCase(); + } + + if (ignoreAccents) { + input = stripDiacritics(input); + candidate = stripDiacritics(candidate); + } + + return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1; + }; + }; + + var A11yText = function A11yText(props) { + return React__default.createElement("span", _extends({ + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css({ + label: 'a11yText', + zIndex: 9999, + border: 0, + clip: 'rect(1px, 1px, 1px, 1px)', + height: 1, + width: 1, + position: 'absolute', + overflow: 'hidden', + padding: 0, + whiteSpace: 'nowrap', + backgroundColor: 'red', + color: 'blue' + }) + }, props)); + }; + + var DummyInput = + /*#__PURE__*/ + function (_Component) { + _inherits(DummyInput, _Component); + + function DummyInput() { + _classCallCheck(this, DummyInput); + + return _possibleConstructorReturn(this, _getPrototypeOf(DummyInput).apply(this, arguments)); + } + + _createClass(DummyInput, [{ + key: "render", + value: function render() { + var _this$props = this.props, + inProp = _this$props.in, + out = _this$props.out, + onExited = _this$props.onExited, + appear = _this$props.appear, + enter = _this$props.enter, + exit = _this$props.exit, + innerRef = _this$props.innerRef, + emotion$$1 = _this$props.emotion, + props = _objectWithoutProperties(_this$props, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]); + + return React__default.createElement("input", _extends({ + ref: innerRef + }, props, { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css({ + label: 'dummyInput', + // get rid of any default styles + background: 0, + border: 0, + fontSize: 'inherit', + outline: 0, + padding: 0, + // important! without `width` browsers won't allow focus + width: 1, + // remove cursor on desktop + color: 'transparent', + // remove cursor on mobile whilst maintaining "scroll into view" behaviour + left: -100, + opacity: 0, + position: 'relative', + transform: 'scale(0)' + }) + })); + } + }]); + + return DummyInput; + }(React.Component); + + var NodeResolver = + /*#__PURE__*/ + function (_Component) { + _inherits(NodeResolver, _Component); + + function NodeResolver() { + _classCallCheck(this, NodeResolver); + + return _possibleConstructorReturn(this, _getPrototypeOf(NodeResolver).apply(this, arguments)); + } + + _createClass(NodeResolver, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.props.innerRef(reactDom.findDOMNode(this)); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.props.innerRef(null); + } + }, { + key: "render", + value: function render() { + return this.props.children; + } + }]); + + return NodeResolver; + }(React.Component); + + var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position']; + var LOCK_STYLES = { + boxSizing: 'border-box', + // account for possible declaration `width: 100%;` on body + overflow: 'hidden', + position: 'relative', + height: '100%' + }; + + function preventTouchMove(e) { + e.preventDefault(); + } + function allowTouchMove(e) { + e.stopPropagation(); + } + function preventInertiaScroll() { + var top = this.scrollTop; + var totalScroll = this.scrollHeight; + var currentScroll = top + this.offsetHeight; + + if (top === 0) { + this.scrollTop = 1; + } else if (currentScroll === totalScroll) { + this.scrollTop = top - 1; + } + } // `ontouchstart` check works on most browsers + // `maxTouchPoints` works on IE10/11 and Surface + + function isTouchDevice() { + return 'ontouchstart' in window || navigator.maxTouchPoints; + } + + var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); + var activeScrollLocks = 0; + + var ScrollLock = + /*#__PURE__*/ + function (_Component) { + _inherits(ScrollLock, _Component); + + function ScrollLock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollLock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollLock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "originalStyles", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "listenerOptions", { + capture: false, + passive: false + }); + + return _this; + } + + _createClass(ScrollLock, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + if (!canUseDOM) return; + var _this$props = this.props, + accountForScrollbars = _this$props.accountForScrollbars, + touchScrollTarget = _this$props.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; + + if (accountForScrollbars) { + // store any styles already applied to the body + STYLE_KEYS.forEach(function (key) { + var val = targetStyle && targetStyle[key]; + _this2.originalStyles[key] = val; + }); + } // apply the lock styles and padding if this is the first scroll lock + + + if (accountForScrollbars && activeScrollLocks < 1) { + var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0; + var clientWidth = document.body ? document.body.clientWidth : 0; + var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0; + Object.keys(LOCK_STYLES).forEach(function (key) { + var val = LOCK_STYLES[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + + if (targetStyle) { + targetStyle.paddingRight = "".concat(adjustedPadding, "px"); + } + } // account for touch devices + + + if (target && isTouchDevice()) { + // Mobile Safari ignores { overflow: hidden } declaration on the body. + target.addEventListener('touchmove', preventTouchMove, this.listenerOptions); // Allow scroll on provided target + + if (touchScrollTarget) { + touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, this.listenerOptions); + touchScrollTarget.addEventListener('touchmove', allowTouchMove, this.listenerOptions); + } + } // increment active scroll locks + + + activeScrollLocks += 1; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (!canUseDOM) return; + var _this$props2 = this.props, + accountForScrollbars = _this$props2.accountForScrollbars, + touchScrollTarget = _this$props2.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; // safely decrement active scroll locks + + activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any + + if (accountForScrollbars && activeScrollLocks < 1) { + STYLE_KEYS.forEach(function (key) { + var val = _this3.originalStyles[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + } // remove touch listeners + + + if (target && isTouchDevice()) { + target.removeEventListener('touchmove', preventTouchMove, this.listenerOptions); + + if (touchScrollTarget) { + touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, this.listenerOptions); + touchScrollTarget.removeEventListener('touchmove', allowTouchMove, this.listenerOptions); + } + } + } + }, { + key: "render", + value: function render() { + return null; + } + }]); + + return ScrollLock; + }(React.Component); + + _defineProperty(ScrollLock, "defaultProps", { + accountForScrollbars: true + }); + + // NOTE: + // We shouldn't need this after updating to React v16.3.0, which introduces: + // - createRef() https://reactjs.org/docs/react-api.html#reactcreateref + // - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref + var ScrollBlock = + /*#__PURE__*/ + function (_PureComponent) { + _inherits(ScrollBlock, _PureComponent); + + function ScrollBlock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollBlock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollBlock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + touchScrollTarget: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + if (ref === _this.state.touchScrollTarget) return; + + _this.setState({ + touchScrollTarget: ref + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurSelectInput", function () { + if (document.activeElement) { + document.activeElement.blur(); + } + }); + + return _this; + } + + _createClass(ScrollBlock, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + isEnabled = _this$props.isEnabled; + var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled + + if (!isEnabled) return children; + /* + * Div + * ------------------------------ + * blocks scrolling on non-body elements behind the menu + * NodeResolver + * ------------------------------ + * we need a reference to the scrollable element to "unlock" scroll on + * mobile devices + * ScrollLock + * ------------------------------ + * actually does the scroll locking + */ + + return React__default.createElement("div", null, React__default.createElement("div", { + onClick: this.blurSelectInput, + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css({ + position: 'fixed', + left: 0, + bottom: 0, + right: 0, + top: 0 + }) + }), React__default.createElement(NodeResolver, { + innerRef: this.getScrollTarget + }, children), touchScrollTarget ? React__default.createElement(ScrollLock, { + touchScrollTarget: touchScrollTarget + }) : null); + } + }]); + + return ScrollBlock; + }(React.PureComponent); + + var ScrollCaptor = + /*#__PURE__*/ + function (_Component) { + _inherits(ScrollCaptor, _Component); + + function ScrollCaptor() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollCaptor); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollCaptor)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isBottom", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isTop", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollTarget", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "touchStart", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cancelScroll", function (event) { + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEventDelta", function (event, delta) { + var _this$props = _this.props, + onBottomArrive = _this$props.onBottomArrive, + onBottomLeave = _this$props.onBottomLeave, + onTopArrive = _this$props.onTopArrive, + onTopLeave = _this$props.onTopLeave; + var _this$scrollTarget = _this.scrollTarget, + scrollTop = _this$scrollTarget.scrollTop, + scrollHeight = _this$scrollTarget.scrollHeight, + clientHeight = _this$scrollTarget.clientHeight; + var target = _this.scrollTarget; + var isDeltaPositive = delta > 0; + var availableScroll = scrollHeight - clientHeight - scrollTop; + var shouldCancelScroll = false; // reset bottom/top flags + + if (availableScroll > delta && _this.isBottom) { + if (onBottomLeave) onBottomLeave(event); + _this.isBottom = false; + } + + if (isDeltaPositive && _this.isTop) { + if (onTopLeave) onTopLeave(event); + _this.isTop = false; + } // bottom limit + + + if (isDeltaPositive && delta > availableScroll) { + if (onBottomArrive && !_this.isBottom) { + onBottomArrive(event); + } + + target.scrollTop = scrollHeight; + shouldCancelScroll = true; + _this.isBottom = true; // top limit + } else if (!isDeltaPositive && -delta > scrollTop) { + if (onTopArrive && !_this.isTop) { + onTopArrive(event); + } + + target.scrollTop = 0; + shouldCancelScroll = true; + _this.isTop = true; + } // cancel scroll + + + if (shouldCancelScroll) { + _this.cancelScroll(event); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onWheel", function (event) { + _this.handleEventDelta(event, event.deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (event) { + // set touch start so we can calculate touchmove delta + _this.touchStart = event.changedTouches[0].clientY; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (event) { + var deltaY = _this.touchStart - event.changedTouches[0].clientY; + + _this.handleEventDelta(event, deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + _this.scrollTarget = ref; + }); + + return _this; + } + + _createClass(ScrollCaptor, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListening(this.scrollTarget); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListening(this.scrollTarget); + } + }, { + key: "startListening", + value: function startListening(el) { + // bail early if no scroll available + if (!el) return; + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.addEventListener === 'function') { + el.addEventListener('wheel', this.onWheel, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "stopListening", + value: function stopListening(el) { + // bail early if no scroll available + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('wheel', this.onWheel, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "render", + value: function render() { + return React__default.createElement(NodeResolver, { + innerRef: this.getScrollTarget + }, this.props.children); + } + }]); + + return ScrollCaptor; + }(React.Component); + + var ScrollCaptorSwitch = + /*#__PURE__*/ + function (_Component2) { + _inherits(ScrollCaptorSwitch, _Component2); + + function ScrollCaptorSwitch() { + _classCallCheck(this, ScrollCaptorSwitch); + + return _possibleConstructorReturn(this, _getPrototypeOf(ScrollCaptorSwitch).apply(this, arguments)); + } + + _createClass(ScrollCaptorSwitch, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + isEnabled = _this$props2.isEnabled, + props = _objectWithoutProperties(_this$props2, ["isEnabled"]); + + return isEnabled ? React__default.createElement(ScrollCaptor, props) : this.props.children; + } + }]); + + return ScrollCaptorSwitch; + }(React.Component); + + _defineProperty(ScrollCaptorSwitch, "defaultProps", { + isEnabled: true + }); + + var instructionsAriaMessage = function instructionsAriaMessage(event) { + var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var isSearchable = context.isSearchable, + isMulti = context.isMulti, + label = context.label, + isDisabled = context.isDisabled; + + switch (event) { + case 'menu': + return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu, press Tab to select the option and exit the menu."); + + case 'input': + return "".concat(label ? label : 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : ''); + + case 'value': + return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'; + } + }; + var valueEventAriaMessage = function valueEventAriaMessage(event, context) { + var value = context.value, + isDisabled = context.isDisabled; + if (!value) return; + + switch (event) { + case 'deselect-option': + case 'pop-value': + case 'remove-value': + return "option ".concat(value, ", deselected."); + + case 'select-option': + return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected."); + } + }; + var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) { + var focusedValue = _ref.focusedValue, + getOptionLabel = _ref.getOptionLabel, + selectValue = _ref.selectValue; + return "value ".concat(getOptionLabel(focusedValue), " focused, ").concat(selectValue.indexOf(focusedValue) + 1, " of ").concat(selectValue.length, "."); + }; + var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) { + var focusedOption = _ref2.focusedOption, + getOptionLabel = _ref2.getOptionLabel, + options = _ref2.options; + return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, "."); + }; + var resultsAriaMessage = function resultsAriaMessage(_ref3) { + var inputValue = _ref3.inputValue, + screenReaderMessage = _ref3.screenReaderMessage; + return "".concat(screenReaderMessage).concat(inputValue ? ' for search term ' + inputValue : '', "."); + }; + + var formatGroupLabel = function formatGroupLabel(group) { + return group.label; + }; + var getOptionLabel = function getOptionLabel(option) { + return option.label; + }; + var getOptionValue = function getOptionValue(option) { + return option.value; + }; + var isOptionDisabled = function isOptionDisabled(option) { + return !!option.isDisabled; + }; + + var containerCSS = function containerCSS(_ref) { + var isDisabled = _ref.isDisabled, + isRtl = _ref.isRtl; + return { + label: 'container', + direction: isRtl ? 'rtl' : null, + pointerEvents: isDisabled ? 'none' : null, + // cancel mouse events when disabled + position: 'relative' + }; + }; + var SelectContainer = function SelectContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isDisabled = props.isDisabled, + isRtl = props.isRtl; + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('container', props)), { + '--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 = + /*#__PURE__*/ + function (_Component) { + _inherits(ValueContainer, _Component); + + function ValueContainer() { + _classCallCheck(this, ValueContainer); + + return _possibleConstructorReturn(this, _getPrototypeOf(ValueContainer).apply(this, arguments)); + } + + _createClass(ValueContainer, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + className = _this$props.className, + cx = _this$props.cx, + isMulti = _this$props.isMulti, + getStyles = _this$props.getStyles, + hasValue = _this$props.hasValue; + return React__default.createElement("div", { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('valueContainer', this.props)), { + 'value-container': true, + 'value-container--is-multi': isMulti, + 'value-container--has-value': hasValue + }, className) + }, children); + } + }]); + + return ValueContainer; + }(React.Component); // ============================== + // Indicator Container + // ============================== + + var indicatorsContainerCSS = function indicatorsContainerCSS() { + return { + alignItems: 'center', + alignSelf: 'stretch', + display: 'flex', + flexShrink: 0 + }; + }; + var IndicatorsContainer = function IndicatorsContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles; + return React__default.createElement("div", { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('indicatorsContainer', props)), { + 'indicators': true + }, className) + }, children); + }; + + // ============================== + // Dropdown & Clear Icons + // ============================== + var Svg = function Svg(_ref) { + var size = _ref.size, + props = _objectWithoutProperties(_ref, ["size"]); + + return React__default.createElement("svg", _extends({ + height: size, + width: size, + viewBox: "0 0 20 20", + "aria-hidden": "true", + focusable: "false", + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css({ + display: 'inline-block', + fill: 'currentColor', + lineHeight: 1, + stroke: 'currentColor', + strokeWidth: 0 + }) + }, props)); + }; + + var CrossIcon = function CrossIcon(props) { + return React__default.createElement(Svg, _extends({ + size: 20 + }, props), React__default.createElement("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__default.createElement(Svg, _extends({ + size: 20 + }, props), React__default.createElement("path", { + d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" + })); + }; // ============================== + // Dropdown & Clear Buttons + // ============================== + + var baseCSS = function baseCSS(_ref2) { + var isFocused = _ref2.isFocused, + _ref2$theme = _ref2.theme, + baseUnit = _ref2$theme.spacing.baseUnit, + colors = _ref2$theme.colors; + return { + label: 'indicatorContainer', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + ':hover': { + color: isFocused ? colors.neutral80 : colors.neutral40 + } + }; + }; + + var dropdownIndicatorCSS = baseCSS; + var DropdownIndicator = function DropdownIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('dropdownIndicator', props)), { + 'indicator': true, + 'dropdown-indicator': true + }, className) + }), children || React__default.createElement(DownChevron, null)); + }; + var clearIndicatorCSS = baseCSS; + var ClearIndicator = function ClearIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('clearIndicator', props)), { + 'indicator': true, + 'clear-indicator': true + }, className) + }), children || React__default.createElement(CrossIcon, null)); + }; // ============================== + // Separator + // ============================== + + var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) { + var isDisabled = _ref3.isDisabled, + _ref3$theme = _ref3.theme, + baseUnit = _ref3$theme.spacing.baseUnit, + colors = _ref3$theme.colors; + return { + label: 'indicatorSeparator', + alignSelf: 'stretch', + backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20, + marginBottom: baseUnit * 2, + marginTop: baseUnit * 2, + width: 1 + }; + }; + var IndicatorSeparator = function IndicatorSeparator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("span", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('indicatorSeparator', props)), { + 'indicator-separator': true + }, className) + })); + }; // ============================== + // Loading + // ============================== + + var keyframesName = 'react-select-loading-indicator'; + var keyframesInjected = false; + var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) { + var isFocused = _ref4.isFocused, + size = _ref4.size, + _ref4$theme = _ref4.theme, + colors = _ref4$theme.colors, + baseUnit = _ref4$theme.spacing.baseUnit; + return { + label: 'loadingIndicator', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + alignSelf: 'center', + fontSize: size, + lineHeight: 1, + marginRight: size, + textAlign: 'center', + verticalAlign: 'middle' + }; + }; + + var LoadingDot = function LoadingDot(_ref5) { + var color = _ref5.color, + delay = _ref5.delay, + offset = _ref5.offset; + return React__default.createElement("span", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css({ + animationDuration: '1s', + animationDelay: "".concat(delay, "ms"), + animationIterationCount: 'infinite', + animationName: keyframesName, + animationTimingFunction: 'ease-in-out', + backgroundColor: color, + borderRadius: '1em', + display: 'inline-block', + marginLeft: offset ? '1em' : null, + height: '1em', + verticalAlign: 'top', + width: '1em' + }) + }); + }; + + var LoadingIndicator = function LoadingIndicator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isFocused = props.isFocused, + isRtl = props.isRtl, + colors = props.theme.colors; + var color = isFocused ? colors.neutral80 : colors.neutral20; + + if (!keyframesInjected) { + // eslint-disable-next-line no-unused-expressions + emotion.injectGlobal("@keyframes ", keyframesName, "{0%,80%,100%{opacity:0;}40%{opacity:1;}};"); + keyframesInjected = true; + } + + return React__default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('loadingIndicator', props)), { + 'indicator': true, + 'loading-indicator': true + }, className) + }), React__default.createElement(LoadingDot, { + color: color, + delay: 0, + offset: isRtl + }), React__default.createElement(LoadingDot, { + color: color, + delay: 160, + offset: true + }), React__default.createElement(LoadingDot, { + color: color, + delay: 320, + offset: !isRtl + })); + }; + LoadingIndicator.defaultProps = { + size: 4 + }; + + var css = function css(_ref) { + var isDisabled = _ref.isDisabled, + isFocused = _ref.isFocused, + _ref$theme = _ref.theme, + colors = _ref$theme.colors, + borderRadius = _ref$theme.borderRadius, + spacing = _ref$theme.spacing; + return { + label: 'control', + alignItems: 'center', + backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0, + borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20, + borderRadius: borderRadius, + borderStyle: 'solid', + borderWidth: 1, + boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : null, + cursor: 'default', + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + minHeight: spacing.controlHeight, + outline: '0 !important', + position: 'relative', + transition: 'all 100ms', + '&:hover': { + borderColor: isFocused ? colors.primary : colors.neutral30 + } + }; + }; + + var Control = function Control(props) { + var children = props.children, + cx = props.cx, + getStyles = props.getStyles, + className = props.className, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + innerRef = props.innerRef, + innerProps = props.innerProps, + menuIsOpen = props.menuIsOpen; + return React__default.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('control', props)), { + '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, + label = props.label, + theme = props.theme, + selectProps = props.selectProps; + return React__default.createElement("div", { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('group', props)), { + 'group': true + }, className) + }, React__default.createElement(Heading, _extends({}, headingProps, { + selectProps: selectProps, + theme: theme, + getStyles: getStyles, + cx: cx + }), label), React__default.createElement("div", null, children)); + }; + + var groupHeadingCSS = function groupHeadingCSS(_ref2) { + var spacing = _ref2.theme.spacing; + return { + label: 'group', + color: '#999', + cursor: 'default', + display: 'block', + fontSize: '75%', + fontWeight: '500', + marginBottom: '0.25em', + paddingLeft: spacing.baseUnit * 3, + paddingRight: spacing.baseUnit * 3, + textTransform: 'uppercase' + }; + }; + var GroupHeading = function GroupHeading(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + theme = props.theme, + selectProps = props.selectProps, + cleanProps = _objectWithoutProperties(props, ["className", "cx", "getStyles", "theme", "selectProps"]); + + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('groupHeading', _objectSpread({ + theme: theme + }, cleanProps))), { + 'group-heading': true + }, className) + }, cleanProps)); + }; + + var inputCSS = function inputCSS(_ref) { + var isDisabled = _ref.isDisabled, + _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + margin: spacing.baseUnit / 2, + paddingBottom: spacing.baseUnit / 2, + paddingTop: spacing.baseUnit / 2, + visibility: isDisabled ? 'hidden' : 'visible', + color: colors.neutral80 + }; + }; + + var inputStyle = function inputStyle(isHidden) { + return { + label: 'input', + background: 0, + border: 0, + fontSize: 'inherit', + opacity: isHidden ? 0 : 1, + outline: 0, + padding: 0, + color: 'inherit' + }; + }; + + var Input = function Input(_ref2) { + var className = _ref2.className, + cx = _ref2.cx, + getStyles = _ref2.getStyles, + innerRef = _ref2.innerRef, + isHidden = _ref2.isHidden, + isDisabled = _ref2.isDisabled, + theme = _ref2.theme, + selectProps = _ref2.selectProps, + props = _objectWithoutProperties(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]); + + return React__default.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + emotion.css(getStyles('input', _objectSpread({ + theme: theme + }, props))) + }, React__default.createElement(AutosizeInput, _extends({ + className: cx(null, { + 'input': true + }, className), + inputRef: innerRef, + inputStyle: inputStyle(isHidden), + disabled: isDisabled + }, props))); + }; + + var multiValueCSS = function multiValueCSS(_ref) { + var _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + borderRadius = _ref$theme.borderRadius, + colors = _ref$theme.colors; + return { + label: 'multiValue', + backgroundColor: colors.neutral10, + borderRadius: borderRadius / 2, + display: 'flex', + margin: spacing.baseUnit / 2, + minWidth: 0 // resolves flex/text-overflow bug + + }; + }; + var multiValueLabelCSS = function multiValueLabelCSS(_ref2) { + var _ref2$theme = _ref2.theme, + borderRadius = _ref2$theme.borderRadius, + colors = _ref2$theme.colors, + cropWithEllipsis = _ref2.cropWithEllipsis; + return { + borderRadius: borderRadius / 2, + color: colors.neutral80, + fontSize: '85%', + overflow: 'hidden', + padding: 3, + paddingLeft: 6, + textOverflow: cropWithEllipsis ? 'ellipsis' : null, + whiteSpace: 'nowrap' + }; + }; + var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) { + var _ref3$theme = _ref3.theme, + spacing = _ref3$theme.spacing, + borderRadius = _ref3$theme.borderRadius, + colors = _ref3$theme.colors, + isFocused = _ref3.isFocused; + return { + alignItems: 'center', + borderRadius: borderRadius / 2, + backgroundColor: isFocused && colors.dangerLight, + display: 'flex', + paddingLeft: spacing.baseUnit, + paddingRight: spacing.baseUnit, + ':hover': { + backgroundColor: colors.dangerLight, + color: colors.danger + } + }; + }; + var MultiValueGeneric = function MultiValueGeneric(_ref4) { + var children = _ref4.children, + innerProps = _ref4.innerProps; + return React__default.createElement("div", innerProps, children); + }; + var MultiValueContainer = MultiValueGeneric; + var MultiValueLabel = MultiValueGeneric; + var MultiValueRemove = + /*#__PURE__*/ + function (_Component) { + _inherits(MultiValueRemove, _Component); + + function MultiValueRemove() { + _classCallCheck(this, MultiValueRemove); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValueRemove).apply(this, arguments)); + } + + _createClass(MultiValueRemove, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + innerProps = _this$props.innerProps; + return React__default.createElement("div", innerProps, children || React__default.createElement(CrossIcon, { + size: 14 + })); + } + }]); + + return MultiValueRemove; + }(React.Component); + + var MultiValue = + /*#__PURE__*/ + function (_Component2) { + _inherits(MultiValue, _Component2); + + function MultiValue() { + _classCallCheck(this, MultiValue); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValue).apply(this, arguments)); + } + + _createClass(MultiValue, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + children = _this$props2.children, + className = _this$props2.className, + components = _this$props2.components, + cx = _this$props2.cx, + data = _this$props2.data, + getStyles = _this$props2.getStyles, + innerProps = _this$props2.innerProps, + isDisabled = _this$props2.isDisabled, + removeProps = _this$props2.removeProps, + selectProps = _this$props2.selectProps; + var Container = components.Container, + Label = components.Label, + Remove = components.Remove; + + var containerInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('multiValue', this.props)), { + 'multi-value': true, + 'multi-value--is-disabled': isDisabled + }, className) + }, innerProps); + + var labelInnerProps = { + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('multiValueLabel', this.props)), { + 'multi-value__label': true + }, className) + }; + + var removeInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('multiValueRemove', this.props)), { + 'multi-value__remove': true + }, className) + }, removeProps); + + return React__default.createElement(Container, { + data: data, + innerProps: containerInnerProps, + selectProps: selectProps + }, React__default.createElement(Label, { + data: data, + innerProps: labelInnerProps, + selectProps: selectProps + }, children), React__default.createElement(Remove, { + data: data, + innerProps: removeInnerProps, + selectProps: selectProps + })); + } + }]); + + return MultiValue; + }(React.Component); + + _defineProperty(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: isSelected ? colors.primary : colors.primary50 + } + }; + }; + + var Option = function Option(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + isSelected = props.isSelected, + innerRef = props.innerRef, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('option', props)), { + 'option': true, + 'option--is-disabled': isDisabled, + 'option--is-focused': isFocused, + 'option--is-selected': isSelected + }, className) + }, innerProps), children); + }; + + var placeholderCSS = function placeholderCSS(_ref) { + var _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + label: 'placeholder', + color: colors.neutral50, + marginLeft: spacing.baseUnit / 2, + marginRight: spacing.baseUnit / 2, + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)' + }; + }; + + var Placeholder = function Placeholder(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('placeholder', props)), { + 'placeholder': true + }, className) + }, innerProps), children); + }; + + var css$1 = function css(_ref) { + var isDisabled = _ref.isDisabled, + _ref$theme = _ref.theme, + spacing = _ref$theme.spacing, + colors = _ref$theme.colors; + return { + label: 'singleValue', + color: isDisabled ? colors.neutral40 : colors.neutral80, + marginLeft: spacing.baseUnit / 2, + marginRight: spacing.baseUnit / 2, + maxWidth: "calc(100% - ".concat(spacing.baseUnit * 2, "px)"), + overflow: 'hidden', + position: 'absolute', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + top: '50%', + transform: 'translateY(-50%)' + }; + }; + + var SingleValue = function SingleValue(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + innerProps = props.innerProps; + return React__default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + emotion.css(getStyles('singleValue', props)), { + '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 _objectSpread({}, components, props.components); + }; + + var defaultStyles = { + clearIndicator: clearIndicatorCSS, + container: containerCSS, + control: css, + dropdownIndicator: dropdownIndicatorCSS, + group: groupCSS, + groupHeading: groupHeadingCSS, + indicatorsContainer: indicatorsContainerCSS, + indicatorSeparator: indicatorSeparatorCSS, + input: inputCSS, + loadingIndicator: loadingIndicatorCSS, + loadingMessage: loadingMessageCSS, + menu: menuCSS, + menuList: menuListCSS, + menuPortal: menuPortalCSS, + multiValue: multiValueCSS, + multiValueLabel: multiValueLabelCSS, + multiValueRemove: multiValueRemoveCSS, + noOptionsMessage: noOptionsMessageCSS, + option: optionCSS, + placeholder: placeholderCSS, + singleValue: css$1, + valueContainer: valueContainerCSS + }; // Merge Utility + // Allows consumers to extend a base Select with additional styles + + function mergeStyles(source) { + var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + // initialize with source styles + var styles = _objectSpread({}, source); // massage in target styles + + + Object.keys(target).forEach(function (key) { + if (source[key]) { + styles[key] = function (rsCss, props) { + return target[key](source[key](rsCss, props), props); + }; + } else { + styles[key] = target[key]; + } + }); + return styles; + } + + var colors = { + primary: '#2684FF', + primary75: '#4C9AFF', + primary50: '#B2D4FF', + primary25: '#DEEBFF', + danger: '#DE350B', + dangerLight: '#FFBDAD', + neutral0: 'hsl(0, 0%, 100%)', + neutral5: 'hsl(0, 0%, 95%)', + neutral10: 'hsl(0, 0%, 90%)', + neutral20: 'hsl(0, 0%, 80%)', + neutral30: 'hsl(0, 0%, 70%)', + neutral40: 'hsl(0, 0%, 60%)', + neutral50: 'hsl(0, 0%, 50%)', + neutral60: 'hsl(0, 0%, 40%)', + neutral70: 'hsl(0, 0%, 30%)', + neutral80: 'hsl(0, 0%, 20%)', + neutral90: 'hsl(0, 0%, 10%)' + }; + var borderRadius = 4; + var baseUnit = 4; + /* Used to calculate consistent margin/padding on elements */ + + var controlHeight = 38; + /* The minimum height of the control */ + + var menuGutter = baseUnit * 2; + /* The amount of space between the control and menu */ + + var spacing = { + baseUnit: baseUnit, + controlHeight: controlHeight, + menuGutter: menuGutter + }; + var defaultTheme = { + borderRadius: borderRadius, + colors: colors, + spacing: spacing + }; + + var defaultProps = { + backspaceRemovesValue: true, + blurInputOnSelect: isTouchCapable(), + captureMenuScroll: !isTouchCapable(), + closeMenuOnSelect: true, + closeMenuOnScroll: false, + components: {}, + controlShouldRenderValue: true, + escapeClearsValue: false, + filterOption: createFilter(), + formatGroupLabel: formatGroupLabel, + getOptionLabel: getOptionLabel, + getOptionValue: getOptionValue, + isDisabled: false, + isLoading: false, + isMulti: false, + isRtl: false, + isSearchable: true, + isOptionDisabled: isOptionDisabled, + loadingMessage: function loadingMessage() { + return 'Loading...'; + }, + maxMenuHeight: 300, + minMenuHeight: 140, + menuIsOpen: false, + menuPlacement: 'bottom', + menuPosition: 'absolute', + menuShouldBlockScroll: false, + menuShouldScrollIntoView: !isMobileDevice(), + noOptionsMessage: function noOptionsMessage() { + return 'No options'; + }, + openMenuOnFocus: false, + openMenuOnClick: true, + options: [], + pageSize: 5, + placeholder: 'Select...', + screenReaderStatus: function screenReaderStatus(_ref) { + var count = _ref.count; + return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available"); + }, + styles: {}, + tabIndex: '0', + tabSelectsValue: true + }; + var instanceId = 1; + + var Select = + /*#__PURE__*/ + function (_Component) { + _inherits(Select, _Component); + + // Misc. Instance Properties + // ------------------------------ + // TODO + // Refs + // ------------------------------ + // Lifecycle + // ------------------------------ + function Select(_props) { + var _this; + + _classCallCheck(this, Select); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, _props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + ariaLiveSelection: '', + ariaLiveContext: '', + focusedOption: null, + focusedValue: null, + inputIsHidden: false, + isFocused: false, + isComposing: false, + menuOptions: { + render: [], + focusable: [] + }, + selectValue: [] + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blockOptionHover", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearFocusValueOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "commonProps", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "components", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasGroups", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchX", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchY", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputIsHiddenAfterUpdate", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "instancePrefix", ''); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openAfterFocus", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollToFocusedOptionOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "userIsDragging", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "controlRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getControlRef", function (ref) { + _this.controlRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focusedOptionRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getFocusedOptionRef", function (ref) { + _this.focusedOptionRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "menuListRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getMenuListRef", function (ref) { + _this.menuListRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getInputRef", function (ref) { + _this.inputRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheComponents", function (components$$1) { + _this.components = defaultComponents({ + components: components$$1 + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focus", _this.focusInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blur", _this.blurInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + onChange = _this$props.onChange, + name = _this$props.name; + onChange(newValue, _objectSpread({}, actionMeta, { + name: name + })); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setValue", function (newValue) { + var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value'; + var option = arguments.length > 2 ? arguments[2] : undefined; + var _this$props2 = _this.props, + closeMenuOnSelect = _this$props2.closeMenuOnSelect, + isMulti = _this$props2.isMulti; + + _this.onInputChange('', { + action: 'set-value' + }); + + if (closeMenuOnSelect) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } // when the select value should change, we should reset focusedValue + + + _this.clearFocusValueOnUpdate = true; + + _this.onChange(newValue, { + action: action, + option: option + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "selectOption", function (newValue) { + var _this$props3 = _this.props, + blurInputOnSelect = _this$props3.blurInputOnSelect, + isMulti = _this$props3.isMulti; + var selectValue = _this.state.selectValue; + + if (isMulti) { + if (_this.isOptionSelected(newValue, selectValue)) { + var candidate = _this.getOptionValue(newValue); + + _this.setValue(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), 'deselect-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'deselect-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue([].concat(_toConsumableArray(selectValue), [newValue]), 'select-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue(newValue, 'select-option'); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + + if (blurInputOnSelect) { + _this.blurInput(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeValue", function (removedValue) { + var selectValue = _this.state.selectValue; + + var candidate = _this.getOptionValue(removedValue); + + _this.onChange(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), { + action: 'remove-value', + removedValue: removedValue + }); + + _this.announceAriaLiveSelection({ + event: 'remove-value', + context: { + value: removedValue ? _this.getOptionLabel(removedValue) : '' + } + }); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearValue", function () { + var isMulti = _this.props.isMulti; + + _this.onChange(isMulti ? [] : null, { + action: 'clear' + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "popValue", function () { + var selectValue = _this.state.selectValue; + var lastSelectedValue = selectValue[selectValue.length - 1]; + + _this.announceAriaLiveSelection({ + event: 'pop-value', + context: { + value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : '' + } + }); + + _this.onChange(selectValue.slice(0, selectValue.length - 1), { + action: 'pop-value', + removedValue: lastSelectedValue + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionLabel", function (data) { + return _this.props.getOptionLabel(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionValue", function (data) { + return _this.props.getOptionValue(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStyles", function (key, props) { + var base = defaultStyles[key](props); + base.boxSizing = 'border-box'; + var custom = _this.props.styles[key]; + return custom ? custom(base, props) : base; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementId", function (element) { + return "".concat(_this.instancePrefix, "-").concat(element); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveDescendentId", function () { + var menuIsOpen = _this.props.menuIsOpen; + var _this$state = _this.state, + menuOptions = _this$state.menuOptions, + focusedOption = _this$state.focusedOption; + if (!focusedOption || !menuIsOpen) return undefined; + var index$$1 = menuOptions.focusable.indexOf(focusedOption); + var option = menuOptions.render[index$$1]; + return option && option.key; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveSelection", function (_ref2) { + var event = _ref2.event, + context = _ref2.context; + + _this.setState({ + ariaLiveSelection: valueEventAriaMessage(event, context) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveContext", function (_ref3) { + var event = _ref3.event, + context = _ref3.context; + + _this.setState({ + ariaLiveContext: instructionsAriaMessage(event, _objectSpread({}, context, { + label: _this.props['aria-label'] + })) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseDown", function (event) { + if (event.button !== 0) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseMove", function (event) { + _this.blockOptionHover = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlMouseDown", function (event) { + var openMenuOnClick = _this.props.openMenuOnClick; + + if (!_this.state.isFocused) { + if (openMenuOnClick) { + _this.openAfterFocus = true; + } + + _this.focusInput(); + } else if (!_this.props.menuIsOpen) { + if (openMenuOnClick) { + _this.openMenu('first'); + } + } else { + //$FlowFixMe + if (event.target.tagName !== 'INPUT') { + _this.onMenuClose(); + } + } //$FlowFixMe + + + if (event.target.tagName !== 'INPUT') { + event.preventDefault(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + if (_this.props.isDisabled) return; + var _this$props4 = _this.props, + isMulti = _this$props4.isMulti, + menuIsOpen = _this$props4.menuIsOpen; + + _this.focusInput(); + + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } else { + _this.openMenu('first'); + } + + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + _this.clearValue(); + + event.stopPropagation(); + _this.openAfterFocus = false; + setTimeout(function () { + return _this.focusInput(); + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onScroll", function (event) { + if (typeof _this.props.closeMenuOnScroll === 'boolean') { + if (event.target instanceof HTMLElement && isDocumentElement(event.target)) { + _this.props.onMenuClose(); + } + } else if (typeof _this.props.closeMenuOnScroll === 'function') { + if (_this.props.closeMenuOnScroll(event)) { + _this.props.onMenuClose(); + } + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionStart", function () { + _this.setState({ + isComposing: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionEnd", function () { + _this.setState({ + isComposing: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (_ref4) { + var touches = _ref4.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + _this.initialTouchX = touch.clientX; + _this.initialTouchY = touch.clientY; + _this.userIsDragging = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (_ref5) { + var touches = _ref5.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + var deltaX = Math.abs(touch.clientX - _this.initialTouchX); + var deltaY = Math.abs(touch.clientY - _this.initialTouchY); + var moveThreshold = 5; + _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchEnd", function (event) { + if (_this.userIsDragging) return; // close the menu if the user taps outside + // we're checking on event.target here instead of event.currentTarget, because we want to assert information + // on events on child elements, not the document (which we've attached this handler to). + + if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) { + _this.blurInput(); + } // reset move vars + + + _this.initialTouchX = 0; + _this.initialTouchY = 0; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onControlMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onClearIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onDropdownIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (event) { + var inputValue = event.currentTarget.value; + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange(inputValue, { + action: 'input-change' + }); + + _this.onMenuOpen(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputFocus", function (event) { + var _this$props5 = _this.props, + isSearchable = _this$props5.isSearchable, + isMulti = _this$props5.isMulti; + + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + + _this.inputIsHiddenAfterUpdate = false; + + _this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + + _this.setState({ + isFocused: true + }); + + if (_this.openAfterFocus || _this.props.openMenuOnFocus) { + _this.openMenu('first'); + } + + _this.openAfterFocus = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputBlur", function (event) { + if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) { + _this.inputRef.focus(); + + return; + } + + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + + _this.onInputChange('', { + action: 'input-blur' + }); + + _this.onMenuClose(); + + _this.setState({ + focusedValue: null, + isFocused: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOptionHover", function (focusedOption) { + if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) { + return; + } + + _this.setState({ + focusedOption: focusedOption + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldHideSelectedOptions", function () { + var _this$props6 = _this.props, + hideSelectedOptions = _this$props6.hideSelectedOptions, + isMulti = _this$props6.isMulti; + if (hideSelectedOptions === undefined) return isMulti; + return hideSelectedOptions; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) { + var _this$props7 = _this.props, + isMulti = _this$props7.isMulti, + backspaceRemovesValue = _this$props7.backspaceRemovesValue, + escapeClearsValue = _this$props7.escapeClearsValue, + inputValue = _this$props7.inputValue, + isClearable = _this$props7.isClearable, + isDisabled = _this$props7.isDisabled, + menuIsOpen = _this$props7.menuIsOpen, + onKeyDown = _this$props7.onKeyDown, + tabSelectsValue = _this$props7.tabSelectsValue, + openMenuOnFocus = _this$props7.openMenuOnFocus; + var _this$state2 = _this.state, + isComposing = _this$state2.isComposing, + focusedOption = _this$state2.focusedOption, + focusedValue = _this$state2.focusedValue, + selectValue = _this$state2.selectValue; + if (isDisabled) return; + + if (typeof onKeyDown === 'function') { + onKeyDown(event); + + if (event.defaultPrevented) { + return; + } + } // Block option hover events when the user has just pressed a key + + + _this.blockOptionHover = true; + + switch (event.key) { + case 'ArrowLeft': + if (!isMulti || inputValue) return; + + _this.focusValue('previous'); + + break; + + case 'ArrowRight': + if (!isMulti || inputValue) return; + + _this.focusValue('next'); + + break; + + case 'Delete': + case 'Backspace': + if (inputValue) return; + + if (focusedValue) { + _this.removeValue(focusedValue); + } else { + if (!backspaceRemovesValue) return; + + if (isMulti) { + _this.popValue(); + } else if (isClearable) { + _this.clearValue(); + } + } + + break; + + case 'Tab': + if (isComposing) return; + + if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused + // option is already selected; it breaks the flow of navigation + openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) { + return; + } + + _this.selectOption(focusedOption); + + break; + + case 'Enter': + if (event.keyCode === 229) { + // ignore the keydown event from an Input Method Editor(IME) + // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode + break; + } + + if (menuIsOpen) { + if (!focusedOption) return; + if (isComposing) return; + + _this.selectOption(focusedOption); + + break; + } + + return; + + case 'Escape': + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange('', { + action: 'menu-close' + }); + + _this.onMenuClose(); + } else if (isClearable && escapeClearsValue) { + _this.clearValue(); + } + + break; + + case ' ': + // space + if (inputValue) { + return; + } + + if (!menuIsOpen) { + _this.openMenu('first'); + + break; + } + + if (!focusedOption) return; + + _this.selectOption(focusedOption); + + break; + + case 'ArrowUp': + if (menuIsOpen) { + _this.focusOption('up'); + } else { + _this.openMenu('last'); + } + + break; + + case 'ArrowDown': + if (menuIsOpen) { + _this.focusOption('down'); + } else { + _this.openMenu('first'); + } + + break; + + case 'PageUp': + if (!menuIsOpen) return; + + _this.focusOption('pageup'); + + break; + + case 'PageDown': + if (!menuIsOpen) return; + + _this.focusOption('pagedown'); + + break; + + case 'Home': + if (!menuIsOpen) return; + + _this.focusOption('first'); + + break; + + case 'End': + if (!menuIsOpen) return; + + _this.focusOption('last'); + + break; + + default: + return; + } + + event.preventDefault(); + }); + + var value = _props.value; + _this.cacheComponents = index(_this.cacheComponents, exportedEqual).bind(_assertThisInitialized(_assertThisInitialized(_this))); + + _this.cacheComponents(_props.components); + + _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId); + + var _selectValue = cleanValue(value); + + var _menuOptions = _this.buildMenuOptions(_props, _selectValue); + + _this.state.menuOptions = _menuOptions; + _this.state.selectValue = _selectValue; + return _this; + } + + _createClass(Select, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListeningComposition(); + this.startListeningToTouch(); + + if (this.props.closeMenuOnScroll && document && document.addEventListener) { + // Listen to all scroll events, and filter them out inside of 'onScroll' + document.addEventListener('scroll', this.onScroll, true); + } + + if (this.props.autoFocus) { + this.focusInput(); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var _this$props8 = this.props, + options = _this$props8.options, + value = _this$props8.value, + inputValue = _this$props8.inputValue; // re-cache custom components + + this.cacheComponents(nextProps.components); // rebuild the menu options + + if (nextProps.value !== value || nextProps.options !== options || nextProps.inputValue !== inputValue) { + var selectValue = cleanValue(nextProps.value); + var menuOptions = this.buildMenuOptions(nextProps, selectValue); + var focusedValue = this.getNextFocusedValue(selectValue); + var focusedOption = this.getNextFocusedOption(menuOptions.focusable); + this.setState({ + menuOptions: menuOptions, + selectValue: selectValue, + focusedOption: focusedOption, + focusedValue: focusedValue + }); + } // some updates should toggle the state of the input visibility + + + if (this.inputIsHiddenAfterUpdate != null) { + this.setState({ + inputIsHidden: this.inputIsHiddenAfterUpdate + }); + delete this.inputIsHiddenAfterUpdate; + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + var _this$props9 = this.props, + isDisabled = _this$props9.isDisabled, + menuIsOpen = _this$props9.menuIsOpen; + var isFocused = this.state.isFocused; + + if ( // ensure focus is restored correctly when the control becomes enabled + isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens + isFocused && menuIsOpen && !prevProps.menuIsOpen) { + this.focusInput(); + } // scroll the focused option into view if necessary + + + if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) { + scrollIntoView(this.menuListRef, this.focusedOptionRef); + } + + this.scrollToFocusedOptionOnUpdate = false; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListeningComposition(); + this.stopListeningToTouch(); + document.removeEventListener('scroll', this.onScroll, true); + } + }, { + key: "onMenuOpen", + // ============================== + // Consumer Handlers + // ============================== + value: function onMenuOpen() { + this.props.onMenuOpen(); + } + }, { + key: "onMenuClose", + value: function onMenuClose() { + var _this$props10 = this.props, + isSearchable = _this$props10.isSearchable, + isMulti = _this$props10.isMulti; + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + this.onInputChange('', { + action: 'menu-close' + }); + this.props.onMenuClose(); + } + }, { + key: "onInputChange", + value: function onInputChange(newValue, actionMeta) { + this.props.onInputChange(newValue, actionMeta); + } // ============================== + // Methods + // ============================== + + }, { + key: "focusInput", + value: function focusInput() { + if (!this.inputRef) return; + this.inputRef.focus(); + } + }, { + key: "blurInput", + value: function blurInput() { + if (!this.inputRef) return; + this.inputRef.blur(); + } // aliased for consumers + + }, { + key: "openMenu", + value: function openMenu(focusOption) { + var _this$state3 = this.state, + menuOptions = _this$state3.menuOptions, + selectValue = _this$state3.selectValue, + isFocused = _this$state3.isFocused; + var isMulti = this.props.isMulti; + var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1; + + if (!isMulti) { + var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]); + + if (selectedIndex > -1) { + openAtIndex = selectedIndex; + } + } // only scroll if the menu isn't already open + + + this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef); + this.inputIsHiddenAfterUpdate = false; + this.onMenuOpen(); + this.setState({ + focusedValue: null, + focusedOption: menuOptions.focusable[openAtIndex] + }); + this.announceAriaLiveContext({ + event: 'menu' + }); + } + }, { + key: "focusValue", + value: function focusValue(direction) { + var _this$props11 = this.props, + isMulti = _this$props11.isMulti, + isSearchable = _this$props11.isSearchable; + var _this$state4 = this.state, + selectValue = _this$state4.selectValue, + focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing + + if (!isMulti) return; + this.setState({ + focusedOption: null + }); + var focusedIndex = selectValue.indexOf(focusedValue); + + if (!focusedValue) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'value' + }); + } + + var lastIndex = selectValue.length - 1; + var nextFocus = -1; + if (!selectValue.length) return; + + switch (direction) { + case 'previous': + if (focusedIndex === 0) { + // don't cycle from the start to the end + nextFocus = 0; + } else if (focusedIndex === -1) { + // if nothing is focused, focus the last value first + nextFocus = lastIndex; + } else { + nextFocus = focusedIndex - 1; + } + + break; + + case 'next': + if (focusedIndex > -1 && focusedIndex < lastIndex) { + nextFocus = focusedIndex + 1; + } + + break; + } + + if (nextFocus === -1) { + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + } + + this.setState({ + inputIsHidden: nextFocus === -1 ? false : true, + focusedValue: selectValue[nextFocus] + }); + } + }, { + key: "focusOption", + value: function focusOption() { + var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first'; + var pageSize = this.props.pageSize; + var _this$state5 = this.state, + focusedOption = _this$state5.focusedOption, + menuOptions = _this$state5.menuOptions; + var options = menuOptions.focusable; + if (!options.length) return; + var nextFocus = 0; // handles 'first' + + var focusedIndex = options.indexOf(focusedOption); + + if (!focusedOption) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'menu' + }); + } + + if (direction === 'up') { + nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1; + } else if (direction === 'down') { + nextFocus = (focusedIndex + 1) % options.length; + } else if (direction === 'pageup') { + nextFocus = focusedIndex - pageSize; + if (nextFocus < 0) nextFocus = 0; + } else if (direction === 'pagedown') { + nextFocus = focusedIndex + pageSize; + if (nextFocus > options.length - 1) nextFocus = options.length - 1; + } else if (direction === 'last') { + nextFocus = options.length - 1; + } + + this.scrollToFocusedOptionOnUpdate = true; + this.setState({ + focusedOption: options[nextFocus], + focusedValue: null + }); + this.announceAriaLiveContext({ + event: 'menu', + context: { + isDisabled: isOptionDisabled(options[nextFocus]) + } + }); + } + }, { + key: "getTheme", + // ============================== + // Getters + // ============================== + value: function getTheme() { + // Use the default theme if there are no customizations. + if (!this.props.theme) { + return defaultTheme; + } // If the theme prop is a function, assume the function + // knows how to merge the passed-in default theme with + // its own modifications. + + + if (typeof this.props.theme === 'function') { + return this.props.theme(defaultTheme); + } // Otherwise, if a plain theme object was passed in, + // overlay it with the default theme. + + + return _objectSpread({}, defaultTheme, this.props.theme); + } + }, { + key: "getCommonProps", + value: function getCommonProps() { + var clearValue = this.clearValue, + getStyles = this.getStyles, + setValue = this.setValue, + selectOption = this.selectOption, + props = this.props; + var classNamePrefix = props.classNamePrefix, + isMulti = props.isMulti, + isRtl = props.isRtl, + options = props.options; + var selectValue = this.state.selectValue; + var hasValue = this.hasValue(); + + var getValue = function getValue() { + return selectValue; + }; + + var cx = classNames.bind(null, classNamePrefix); + return { + cx: cx, + clearValue: clearValue, + getStyles: getStyles, + getValue: getValue, + hasValue: hasValue, + isMulti: isMulti, + isRtl: isRtl, + options: options, + selectOption: selectOption, + setValue: setValue, + selectProps: props, + theme: this.getTheme() + }; + } + }, { + key: "getNextFocusedValue", + value: function getNextFocusedValue(nextSelectValue) { + if (this.clearFocusValueOnUpdate) { + this.clearFocusValueOnUpdate = false; + return null; + } + + var _this$state6 = this.state, + focusedValue = _this$state6.focusedValue, + lastSelectValue = _this$state6.selectValue; + var lastFocusedIndex = lastSelectValue.indexOf(focusedValue); + + if (lastFocusedIndex > -1) { + var nextFocusedIndex = nextSelectValue.indexOf(focusedValue); + + if (nextFocusedIndex > -1) { + // the focused value is still in the selectValue, return it + return focusedValue; + } else if (lastFocusedIndex < nextSelectValue.length) { + // the focusedValue is not present in the next selectValue array by + // reference, so return the new value at the same index + return nextSelectValue[lastFocusedIndex]; + } + } + + return null; + } + }, { + key: "getNextFocusedOption", + value: function getNextFocusedOption(options) { + var lastFocusedOption = this.state.focusedOption; + return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0]; + } + }, { + key: "hasValue", + value: function hasValue() { + var selectValue = this.state.selectValue; + return selectValue.length > 0; + } + }, { + key: "hasOptions", + value: function hasOptions() { + return !!this.state.menuOptions.render.length; + } + }, { + key: "countOptions", + value: function countOptions() { + return this.state.menuOptions.focusable.length; + } + }, { + key: "isClearable", + value: function isClearable() { + var _this$props12 = this.props, + isClearable = _this$props12.isClearable, + isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable + // multi select, by default, IS clearable + + if (isClearable === undefined) return isMulti; + return isClearable; + } + }, { + key: "isOptionDisabled", + value: function isOptionDisabled$$1(option, selectValue) { + return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false; + } + }, { + key: "isOptionSelected", + value: function isOptionSelected(option, selectValue) { + var _this2 = this; + + if (selectValue.indexOf(option) > -1) return true; + + if (typeof this.props.isOptionSelected === 'function') { + return this.props.isOptionSelected(option, selectValue); + } + + var candidate = this.getOptionValue(option); + return selectValue.some(function (i) { + return _this2.getOptionValue(i) === candidate; + }); + } + }, { + key: "filterOption", + value: function filterOption(option, inputValue) { + return this.props.filterOption ? this.props.filterOption(option, inputValue) : true; + } + }, { + key: "formatOptionLabel", + value: function formatOptionLabel(data, context) { + if (typeof this.props.formatOptionLabel === 'function') { + var inputValue = this.props.inputValue; + var selectValue = this.state.selectValue; + return this.props.formatOptionLabel(data, { + context: context, + inputValue: inputValue, + selectValue: selectValue + }); + } else { + return this.getOptionLabel(data); + } + } + }, { + key: "formatGroupLabel", + value: function formatGroupLabel$$1(data) { + return this.props.formatGroupLabel(data); + } // ============================== + // Mouse Handlers + // ============================== + + }, { + key: "startListeningComposition", + // ============================== + // Composition Handlers + // ============================== + value: function startListeningComposition() { + if (document && document.addEventListener) { + document.addEventListener('compositionstart', this.onCompositionStart, false); + document.addEventListener('compositionend', this.onCompositionEnd, false); + } + } + }, { + key: "stopListeningComposition", + value: function stopListeningComposition() { + if (document && document.removeEventListener) { + document.removeEventListener('compositionstart', this.onCompositionStart); + document.removeEventListener('compositionend', this.onCompositionEnd); + } + } + }, { + key: "startListeningToTouch", + // ============================== + // Touch Handlers + // ============================== + value: function startListeningToTouch() { + if (document && document.addEventListener) { + document.addEventListener('touchstart', this.onTouchStart, false); + document.addEventListener('touchmove', this.onTouchMove, false); + document.addEventListener('touchend', this.onTouchEnd, false); + } + } + }, { + key: "stopListeningToTouch", + value: function stopListeningToTouch() { + if (document && document.removeEventListener) { + document.removeEventListener('touchstart', this.onTouchStart); + document.removeEventListener('touchmove', this.onTouchMove); + document.removeEventListener('touchend', this.onTouchEnd); + } + } + }, { + key: "buildMenuOptions", + // ============================== + // Menu Options + // ============================== + value: function buildMenuOptions(props, selectValue) { + var _this3 = this; + + var _props$inputValue = props.inputValue, + inputValue = _props$inputValue === void 0 ? '' : _props$inputValue, + options = props.options; + + var toOption = function toOption(option, id) { + var isDisabled = _this3.isOptionDisabled(option, selectValue); + + var isSelected = _this3.isOptionSelected(option, selectValue); + + var label = _this3.getOptionLabel(option); + + var value = _this3.getOptionValue(option); + + if (_this3.shouldHideSelectedOptions() && isSelected || !_this3.filterOption({ + label: label, + value: value, + data: option + }, inputValue)) { + return; + } + + var onHover = isDisabled ? undefined : function () { + return _this3.onOptionHover(option); + }; + var onSelect = isDisabled ? undefined : function () { + return _this3.selectOption(option); + }; + var optionId = "".concat(_this3.getElementId('option'), "-").concat(id); + return { + innerProps: { + id: optionId, + onClick: onSelect, + onMouseMove: onHover, + onMouseOver: onHover, + tabIndex: -1 + }, + data: option, + isDisabled: isDisabled, + isSelected: isSelected, + key: optionId, + label: label, + type: 'option', + value: value + }; + }; + + return options.reduce(function (acc, item, itemIndex) { + if (item.options) { + // TODO needs a tidier implementation + if (!_this3.hasGroups) _this3.hasGroups = true; + var items = item.options; + var children = items.map(function (child, i) { + var option = toOption(child, "".concat(itemIndex, "-").concat(i)); + if (option) acc.focusable.push(child); + return option; + }).filter(Boolean); + + if (children.length) { + var groupId = "".concat(_this3.getElementId('group'), "-").concat(itemIndex); + acc.render.push({ + type: 'group', + key: groupId, + data: item, + options: children + }); + } + } else { + var option = toOption(item, "".concat(itemIndex)); + + if (option) { + acc.render.push(option); + acc.focusable.push(item); + } + } + + return acc; + }, { + render: [], + focusable: [] + }); + } // ============================== + // Renderers + // ============================== + + }, { + key: "constructAriaLiveMessage", + value: function constructAriaLiveMessage() { + var _this$state7 = this.state, + ariaLiveContext = _this$state7.ariaLiveContext, + selectValue = _this$state7.selectValue, + focusedValue = _this$state7.focusedValue, + focusedOption = _this$state7.focusedOption; + var _this$props13 = this.props, + options = _this$props13.options, + menuIsOpen = _this$props13.menuIsOpen, + inputValue = _this$props13.inputValue, + screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select. + + var focusedValueMsg = focusedValue ? valueFocusAriaMessage({ + focusedValue: focusedValue, + getOptionLabel: this.getOptionLabel, + selectValue: selectValue + }) : ''; // An aria live message representing the currently focused option in the select. + + var focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({ + focusedOption: focusedOption, + getOptionLabel: this.getOptionLabel, + options: options + }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue. + + var resultsMsg = resultsAriaMessage({ + inputValue: inputValue, + screenReaderMessage: screenReaderStatus({ + count: this.countOptions() + }) + }); + return "".concat(focusedValueMsg, " ").concat(focusedOptionMsg, " ").concat(resultsMsg, " ").concat(ariaLiveContext); + } + }, { + key: "renderInput", + value: function renderInput() { + var _this$props14 = this.props, + isDisabled = _this$props14.isDisabled, + isSearchable = _this$props14.isSearchable, + inputId = _this$props14.inputId, + inputValue = _this$props14.inputValue, + tabIndex = _this$props14.tabIndex; + var Input = this.components.Input; + var inputIsHidden = this.state.inputIsHidden; + var id = inputId || this.getElementId('input'); + + if (!isSearchable) { + // use a dummy input to maintain focus/blur functionality + return React__default.createElement(DummyInput, { + id: id, + innerRef: this.getInputRef, + onBlur: this.onInputBlur, + onChange: noop, + onFocus: this.onInputFocus, + readOnly: true, + disabled: isDisabled, + tabIndex: tabIndex, + value: "" + }); + } // aria attributes makes the JSX "noisy", separated for clarity + + + var ariaAttributes = { + 'aria-autocomplete': 'list', + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'] + }; + var _this$commonProps = this.commonProps, + cx = _this$commonProps.cx, + theme = _this$commonProps.theme, + selectProps = _this$commonProps.selectProps; + return React__default.createElement(Input, _extends({ + autoCapitalize: "none", + autoComplete: "off", + autoCorrect: "off", + cx: cx, + getStyles: this.getStyles, + id: id, + innerRef: this.getInputRef, + isDisabled: isDisabled, + isHidden: inputIsHidden, + onBlur: this.onInputBlur, + onChange: this.handleInputChange, + onFocus: this.onInputFocus, + selectProps: selectProps, + spellCheck: "false", + tabIndex: tabIndex, + theme: theme, + type: "text", + value: inputValue + }, ariaAttributes)); + } + }, { + key: "renderPlaceholderOrValue", + value: function renderPlaceholderOrValue() { + var _this4 = this; + + var _this$components = this.components, + MultiValue = _this$components.MultiValue, + MultiValueContainer = _this$components.MultiValueContainer, + MultiValueLabel = _this$components.MultiValueLabel, + MultiValueRemove = _this$components.MultiValueRemove, + SingleValue = _this$components.SingleValue, + Placeholder = _this$components.Placeholder; + var commonProps = this.commonProps; + var _this$props15 = this.props, + controlShouldRenderValue = _this$props15.controlShouldRenderValue, + isDisabled = _this$props15.isDisabled, + isMulti = _this$props15.isMulti, + inputValue = _this$props15.inputValue, + placeholder = _this$props15.placeholder; + var _this$state8 = this.state, + selectValue = _this$state8.selectValue, + focusedValue = _this$state8.focusedValue, + isFocused = _this$state8.isFocused; + + if (!this.hasValue() || !controlShouldRenderValue) { + return inputValue ? null : React__default.createElement(Placeholder, _extends({}, commonProps, { + key: "placeholder", + isDisabled: isDisabled, + isFocused: isFocused + }), placeholder); + } + + if (isMulti) { + var selectValues = selectValue.map(function (opt) { + var isOptionFocused = opt === focusedValue; + return React__default.createElement(MultiValue, _extends({}, commonProps, { + components: { + Container: MultiValueContainer, + Label: MultiValueLabel, + Remove: MultiValueRemove + }, + isFocused: isOptionFocused, + isDisabled: isDisabled, + key: _this4.getOptionValue(opt), + removeProps: { + onClick: function onClick() { + return _this4.removeValue(opt); + }, + onTouchEnd: function onTouchEnd() { + return _this4.removeValue(opt); + }, + onMouseDown: function onMouseDown(e) { + e.preventDefault(); + e.stopPropagation(); + } + }, + data: opt + }), _this4.formatOptionLabel(opt, 'value')); + }); + return selectValues; + } + + if (inputValue) { + return null; + } + + var singleValue = selectValue[0]; + return React__default.createElement(SingleValue, _extends({}, commonProps, { + data: singleValue, + isDisabled: isDisabled + }), this.formatOptionLabel(singleValue, 'value')); + } + }, { + key: "renderClearIndicator", + value: function renderClearIndicator() { + var ClearIndicator = this.components.ClearIndicator; + var commonProps = this.commonProps; + var _this$props16 = this.props, + isDisabled = _this$props16.isDisabled, + isLoading = _this$props16.isLoading; + var isFocused = this.state.isFocused; + + if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) { + return null; + } + + var innerProps = { + onMouseDown: this.onClearIndicatorMouseDown, + onTouchEnd: this.onClearIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return React__default.createElement(ClearIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isFocused: isFocused + })); + } + }, { + key: "renderLoadingIndicator", + value: function renderLoadingIndicator() { + var LoadingIndicator = this.components.LoadingIndicator; + var commonProps = this.commonProps; + var _this$props17 = this.props, + isDisabled = _this$props17.isDisabled, + isLoading = _this$props17.isLoading; + var isFocused = this.state.isFocused; + if (!LoadingIndicator || !isLoading) return null; + var innerProps = { + 'aria-hidden': 'true' + }; + return React__default.createElement(LoadingIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderIndicatorSeparator", + value: function renderIndicatorSeparator() { + var _this$components2 = this.components, + DropdownIndicator = _this$components2.DropdownIndicator, + IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator + + if (!DropdownIndicator || !IndicatorSeparator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + return React__default.createElement(IndicatorSeparator, _extends({}, commonProps, { + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderDropdownIndicator", + value: function renderDropdownIndicator() { + var DropdownIndicator = this.components.DropdownIndicator; + if (!DropdownIndicator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + var innerProps = { + onMouseDown: this.onDropdownIndicatorMouseDown, + onTouchEnd: this.onDropdownIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return React__default.createElement(DropdownIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderMenu", + value: function renderMenu() { + var _this5 = this; + + var _this$components3 = this.components, + Group = _this$components3.Group, + GroupHeading = _this$components3.GroupHeading, + Menu$$1 = _this$components3.Menu, + MenuList$$1 = _this$components3.MenuList, + MenuPortal$$1 = _this$components3.MenuPortal, + LoadingMessage$$1 = _this$components3.LoadingMessage, + NoOptionsMessage$$1 = _this$components3.NoOptionsMessage, + Option = _this$components3.Option; + var commonProps = this.commonProps; + var _this$state9 = this.state, + focusedOption = _this$state9.focusedOption, + menuOptions = _this$state9.menuOptions; + var _this$props18 = this.props, + captureMenuScroll = _this$props18.captureMenuScroll, + inputValue = _this$props18.inputValue, + isLoading = _this$props18.isLoading, + loadingMessage = _this$props18.loadingMessage, + minMenuHeight = _this$props18.minMenuHeight, + maxMenuHeight = _this$props18.maxMenuHeight, + menuIsOpen = _this$props18.menuIsOpen, + menuPlacement = _this$props18.menuPlacement, + menuPosition = _this$props18.menuPosition, + menuPortalTarget = _this$props18.menuPortalTarget, + menuShouldBlockScroll = _this$props18.menuShouldBlockScroll, + menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView, + noOptionsMessage = _this$props18.noOptionsMessage, + onMenuScrollToTop = _this$props18.onMenuScrollToTop, + onMenuScrollToBottom = _this$props18.onMenuScrollToBottom; + if (!menuIsOpen) return null; // TODO: Internal Option Type here + + var render = function render(props) { + // for performance, the menu options in state aren't changed when the + // focused option changes so we calculate additional props based on that + var isFocused = focusedOption === props.data; + props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined; + return React__default.createElement(Option, _extends({}, commonProps, props, { + isFocused: isFocused + }), _this5.formatOptionLabel(props.data, 'menu')); + }; + + var menuUI; + + if (this.hasOptions()) { + menuUI = menuOptions.render.map(function (item) { + if (item.type === 'group') { + var type = item.type, + group = _objectWithoutProperties(item, ["type"]); + + var headingId = "".concat(item.key, "-heading"); + return React__default.createElement(Group, _extends({}, commonProps, group, { + Heading: GroupHeading, + headingProps: { + id: headingId + }, + label: _this5.formatGroupLabel(item.data) + }), item.options.map(function (option) { + return render(option); + })); + } else if (item.type === 'option') { + return render(item); + } + }); + } else if (isLoading) { + var message = loadingMessage({ + inputValue: inputValue + }); + if (message === null) return null; + menuUI = React__default.createElement(LoadingMessage$$1, commonProps, message); + } else { + var _message = noOptionsMessage({ + inputValue: inputValue + }); + + if (_message === null) return null; + menuUI = React__default.createElement(NoOptionsMessage$$1, commonProps, _message); + } + + var menuPlacementProps = { + minMenuHeight: minMenuHeight, + maxMenuHeight: maxMenuHeight, + menuPlacement: menuPlacement, + menuPosition: menuPosition, + menuShouldScrollIntoView: menuShouldScrollIntoView + }; + var menuElement = React__default.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref6) { + var ref = _ref6.ref, + _ref6$placerProps = _ref6.placerProps, + placement = _ref6$placerProps.placement, + maxHeight = _ref6$placerProps.maxHeight; + return React__default.createElement(Menu$$1, _extends({}, commonProps, menuPlacementProps, { + innerRef: ref, + innerProps: { + onMouseDown: _this5.onMenuMouseDown, + onMouseMove: _this5.onMenuMouseMove + }, + isLoading: isLoading, + placement: placement + }), React__default.createElement(ScrollCaptorSwitch, { + isEnabled: captureMenuScroll, + onTopArrive: onMenuScrollToTop, + onBottomArrive: onMenuScrollToBottom + }, React__default.createElement(ScrollBlock, { + isEnabled: menuShouldBlockScroll + }, React__default.createElement(MenuList$$1, _extends({}, commonProps, { + innerRef: _this5.getMenuListRef, + isLoading: isLoading, + maxHeight: maxHeight + }), menuUI)))); + }); // positioning behaviour is almost identical for portalled and fixed, + // so we use the same component. the actual portalling logic is forked + // within the component based on `menuPosition` + + return menuPortalTarget || menuPosition === 'fixed' ? React__default.createElement(MenuPortal$$1, _extends({}, commonProps, { + appendTo: menuPortalTarget, + controlElement: this.controlRef, + menuPlacement: menuPlacement, + menuPosition: menuPosition + }), menuElement) : menuElement; + } + }, { + key: "renderFormField", + value: function renderFormField() { + var _this6 = this; + + var _this$props19 = this.props, + delimiter = _this$props19.delimiter, + isDisabled = _this$props19.isDisabled, + isMulti = _this$props19.isMulti, + name = _this$props19.name; + var selectValue = this.state.selectValue; + if (!name || isDisabled) return; + + if (isMulti) { + if (delimiter) { + var value = selectValue.map(function (opt) { + return _this6.getOptionValue(opt); + }).join(delimiter); + return React__default.createElement("input", { + name: name, + type: "hidden", + value: value + }); + } else { + var input = selectValue.length > 0 ? selectValue.map(function (opt, i) { + return React__default.createElement("input", { + key: "i-".concat(i), + name: name, + type: "hidden", + value: _this6.getOptionValue(opt) + }); + }) : React__default.createElement("input", { + name: name, + type: "hidden" + }); + return React__default.createElement("div", null, input); + } + } else { + var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : ''; + + return React__default.createElement("input", { + name: name, + type: "hidden", + value: _value + }); + } + } + }, { + key: "renderLiveRegion", + value: function renderLiveRegion() { + if (!this.state.isFocused) return null; + return React__default.createElement(A11yText, { + "aria-live": "assertive" + }, React__default.createElement("p", { + id: "aria-selection-event" + }, "\xA0", this.state.ariaLiveSelection), React__default.createElement("p", { + id: "aria-context" + }, "\xA0", this.constructAriaLiveMessage())); + } + }, { + key: "render", + value: function render() { + var _this$components4 = this.components, + Control = _this$components4.Control, + IndicatorsContainer = _this$components4.IndicatorsContainer, + SelectContainer = _this$components4.SelectContainer, + ValueContainer = _this$components4.ValueContainer; + var _this$props20 = this.props, + className = _this$props20.className, + id = _this$props20.id, + isDisabled = _this$props20.isDisabled, + menuIsOpen = _this$props20.menuIsOpen; + var isFocused = this.state.isFocused; + var commonProps = this.commonProps = this.getCommonProps(); + return React__default.createElement(SelectContainer, _extends({}, commonProps, { + className: className, + innerProps: { + id: id, + onKeyDown: this.onKeyDown + }, + isDisabled: isDisabled, + isFocused: isFocused + }), this.renderLiveRegion(), React__default.createElement(Control, _extends({}, commonProps, { + innerRef: this.getControlRef, + innerProps: { + onMouseDown: this.onControlMouseDown, + onTouchEnd: this.onControlTouchEnd + }, + isDisabled: isDisabled, + isFocused: isFocused, + menuIsOpen: menuIsOpen + }), React__default.createElement(ValueContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderPlaceholderOrValue(), this.renderInput()), React__default.createElement(IndicatorsContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField()); + } + }]); + + return Select; + }(React.Component); + + _defineProperty(Select, "defaultProps", defaultProps); + + var defaultProps$1 = { + defaultInputValue: '', + defaultMenuIsOpen: false, + defaultValue: null + }; + + var manageState = function manageState(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(StateManager, _Component); + + function StateManager() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, StateManager); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + inputValue: _this.props.inputValue !== undefined ? _this.props.inputValue : _this.props.defaultInputValue, + menuIsOpen: _this.props.menuIsOpen !== undefined ? _this.props.menuIsOpen : _this.props.defaultMenuIsOpen, + value: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value, actionMeta) { + _this.callProp('onChange', value, actionMeta); + + _this.setState({ + value: value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputChange", function (value, actionMeta) { + // TODO: for backwards compatibility, we allow the prop to return a new + // value, but now inputValue is a controllable prop we probably shouldn't + var newValue = _this.callProp('onInputChange', value, actionMeta); + + _this.setState({ + inputValue: newValue !== undefined ? newValue : value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuOpen", function () { + _this.callProp('onMenuOpen'); + + _this.setState({ + menuIsOpen: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuClose", function () { + _this.callProp('onMenuClose'); + + _this.setState({ + menuIsOpen: false + }); + }); + + return _this; + } + + _createClass(StateManager, [{ + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } // FIXME: untyped flow code, return any + + }, { + key: "getProp", + value: function getProp(key) { + return this.props[key] !== undefined ? this.props[key] : this.state[key]; + } // FIXME: untyped flow code, return any + + }, { + key: "callProp", + value: function callProp(name) { + if (typeof this.props[name] === 'function') { + var _this$props; + + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + return (_this$props = this.props)[name].apply(_this$props, args); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props2 = this.props, + defaultInputValue = _this$props2.defaultInputValue, + defaultMenuIsOpen = _this$props2.defaultMenuIsOpen, + defaultValue = _this$props2.defaultValue, + props = _objectWithoutProperties(_this$props2, ["defaultInputValue", "defaultMenuIsOpen", "defaultValue"]); + + return React__default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + inputValue: this.getProp('inputValue'), + menuIsOpen: this.getProp('menuIsOpen'), + onChange: this.onChange, + onInputChange: this.onInputChange, + onMenuClose: this.onMenuClose, + onMenuOpen: this.onMenuOpen, + value: this.getProp('value') + })); + } + }]); + + return StateManager; + }(React.Component), _defineProperty(_class, "defaultProps", defaultProps$1), _temp; + }; + + var defaultProps$2 = { + cacheOptions: false, + defaultOptions: false, + filterOption: null + }; + var makeAsyncSelect = function makeAsyncSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Async, _Component); + + function Async(props) { + var _this; + + _classCallCheck(this, Async); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Async).call(this)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastRequest", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mounted", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "optionsCache", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (newValue, actionMeta) { + var _this$props = _this.props, + cacheOptions = _this$props.cacheOptions, + onInputChange = _this$props.onInputChange; // TODO + + var inputValue = handleInputChange(newValue, actionMeta, onInputChange); + + if (!inputValue) { + delete _this.lastRequest; + + _this.setState({ + inputValue: '', + loadedInputValue: '', + loadedOptions: [], + isLoading: false, + passEmptyOptions: false + }); + + return; + } + + if (cacheOptions && _this.optionsCache[inputValue]) { + _this.setState({ + inputValue: inputValue, + loadedInputValue: inputValue, + loadedOptions: _this.optionsCache[inputValue], + isLoading: false, + passEmptyOptions: false + }); + } else { + var request = _this.lastRequest = {}; + + _this.setState({ + inputValue: inputValue, + isLoading: true, + passEmptyOptions: !_this.state.loadedInputValue + }, function () { + _this.loadOptions(inputValue, function (options) { + if (!_this.mounted) return; + + if (options) { + _this.optionsCache[inputValue] = options; + } + + if (request !== _this.lastRequest) return; + delete _this.lastRequest; + + _this.setState({ + isLoading: false, + loadedInputValue: inputValue, + loadedOptions: options || [], + passEmptyOptions: false + }); + }); + }); + } + + return inputValue; + }); + + _this.state = { + defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined, + inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '', + isLoading: props.defaultOptions === true ? true : false, + loadedOptions: [], + passEmptyOptions: false + }; + return _this; + } + + _createClass(Async, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + this.mounted = true; + var defaultOptions = this.props.defaultOptions; + var inputValue = this.state.inputValue; + + if (defaultOptions === true) { + this.loadOptions(inputValue, function (options) { + if (!_this2.mounted) return; + var isLoading = !!_this2.lastRequest; + + _this2.setState({ + defaultOptions: options || [], + isLoading: isLoading + }); + }); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + // if the cacheOptions prop changes, clear the cache + if (nextProps.cacheOptions !== this.props.cacheOptions) { + this.optionsCache = {}; + } + + if (nextProps.defaultOptions !== this.props.defaultOptions) { + this.setState({ + defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined + }); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.mounted = false; + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "loadOptions", + value: function loadOptions(inputValue, callback) { + var loadOptions = this.props.loadOptions; + if (!loadOptions) return callback(); + var loader = loadOptions(inputValue, callback); + + if (loader && typeof loader.then === 'function') { + loader.then(callback, function () { + return callback(); + }); + } + } + }, { + key: "render", + value: function render() { + var _this3 = this; + + var _this$props2 = this.props, + loadOptions = _this$props2.loadOptions, + props = _objectWithoutProperties(_this$props2, ["loadOptions"]); + + var _this$state = this.state, + defaultOptions = _this$state.defaultOptions, + inputValue = _this$state.inputValue, + isLoading = _this$state.isLoading, + loadedInputValue = _this$state.loadedInputValue, + loadedOptions = _this$state.loadedOptions, + passEmptyOptions = _this$state.passEmptyOptions; + var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || []; + return React__default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this3.select = _ref; + }, + options: options, + isLoading: isLoading, + onInputChange: this.handleInputChange + })); + } + }]); + + return Async; + }(React.Component), _defineProperty(_class, "defaultProps", defaultProps$2), _temp; + }; + var SelectState = manageState(Select); + var Async = makeAsyncSelect(SelectState); + + var compareOption = function compareOption() { + var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; + var option = arguments.length > 1 ? arguments[1] : undefined; + var candidate = String(inputValue).toLowerCase(); + var optionValue = String(option.value).toLowerCase(); + var optionLabel = String(option.label).toLowerCase(); + return optionValue === candidate || optionLabel === candidate; + }; + + var builtins = { + formatCreateLabel: function formatCreateLabel(inputValue) { + return "Create \"".concat(inputValue, "\""); + }, + isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) { + return !(!inputValue || selectValue.some(function (option) { + return compareOption(inputValue, option); + }) || selectOptions.some(function (option) { + return compareOption(inputValue, option); + })); + }, + getNewOptionData: function getNewOptionData(inputValue, optionLabel) { + return { + label: optionLabel, + value: inputValue, + __isNew__: true + }; + } + }; + var defaultProps$3 = _objectSpread({ + allowCreateWhileLoading: false, + createOptionPosition: 'last' + }, builtins); + var makeCreatableSelect = function makeCreatableSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Creatable, _Component); + + function Creatable(props) { + var _this; + + _classCallCheck(this, Creatable); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Creatable).call(this, props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + getNewOptionData = _this$props.getNewOptionData, + inputValue = _this$props.inputValue, + isMulti = _this$props.isMulti, + onChange = _this$props.onChange, + onCreateOption = _this$props.onCreateOption, + value = _this$props.value; + + if (actionMeta.action !== 'select-option') { + return onChange(newValue, actionMeta); + } + + var newOption = _this.state.newOption; + var valueArray = Array.isArray(newValue) ? newValue : [newValue]; + + if (valueArray[valueArray.length - 1] === newOption) { + if (onCreateOption) onCreateOption(inputValue);else { + var newOptionData = getNewOptionData(inputValue, inputValue); + var newActionMeta = { + action: 'create-option' + }; + + if (isMulti) { + onChange([].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newActionMeta); + } else { + onChange(newOptionData, newActionMeta); + } + } + return; + } + + onChange(newValue, actionMeta); + }); + + var options = props.options || []; + _this.state = { + newOption: undefined, + options: options + }; + return _this; + } + + _createClass(Creatable, [{ + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var allowCreateWhileLoading = nextProps.allowCreateWhileLoading, + createOptionPosition = nextProps.createOptionPosition, + formatCreateLabel = nextProps.formatCreateLabel, + getNewOptionData = nextProps.getNewOptionData, + inputValue = nextProps.inputValue, + isLoading = nextProps.isLoading, + isValidNewOption = nextProps.isValidNewOption, + value = nextProps.value; + var options = nextProps.options || []; + var newOption = this.state.newOption; + + if (isValidNewOption(inputValue, cleanValue(value), options)) { + newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue)); + } else { + newOption = undefined; + } + + this.setState({ + newOption: newOption, + options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options + }); + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var props = _extends({}, this.props); + + var options = this.state.options; + return React__default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + options: options, + onChange: this.onChange + })); + } + }]); + + return Creatable; + }(React.Component), _defineProperty(_class, "defaultProps", defaultProps$3), _temp; + }; // TODO: do this in package entrypoint + + var SelectCreatable = makeCreatableSelect(Select); + var Creatable = manageState(SelectCreatable); + + var SelectCreatable$1 = makeCreatableSelect(Select); + var SelectCreatableState = manageState(SelectCreatable$1); + var AsyncCreatable = makeAsyncSelect(SelectCreatableState); + + // This file exists as an entry point for bundling our umd builds. + var Select$1 = manageState(Select); + Select$1.Async = Async; + Select$1.AsyncCreatable = AsyncCreatable; + Select$1.Creatable = Creatable; + Select$1.SelectBase = Select; + Select$1.createFilter = createFilter; + Select$1.components = components; + Select$1.mergeStyles = mergeStyles; + Select$1.defaultTheme = defaultTheme; + + return Select$1; + +})); diff --git a/dist/react-select.min.js b/dist/react-select.min.js new file mode 100644 index 0000000000..e6e380c5c2 --- /dev/null +++ b/dist/react-select.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("emotion"),require("react-dom"),require("prop-types"),require("react-input-autosize")):"function"==typeof define&&define.amd?define(["react","emotion","react-dom","prop-types","react-input-autosize"],t):(e=e||self).Select=t(e.React,e.emotion,e.ReactDOM,e.PropTypes,e.AutosizeInput)}(this,function(e,t,n,o,u){"use strict";var i="default"in e?e.default:e;function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){for(var n=0;n=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}function v(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function E(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?v(e):t}function b(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t-1}function H(e){return R(e)?window.pageYOffset:e.scrollTop}function N(e,t){R(e)?window.scrollTo(0,t):e.scrollTop=t}function U(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:200,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:k,u=H(e),i=t-u,r=10,a=0;!function t(){var s,l=i*((s=(s=a+=r)/n-1)*s*s+1)+u;N(e,l),a=m)return{placement:"bottom",maxHeight:t};if(S>=m&&!r)return i&&U(s,w,160),{placement:"bottom",maxHeight:t};if(!r&&S>=o||r&&A>=o)return i&&U(s,w,160),{placement:"bottom",maxHeight:r?A-C:S-C};if("auto"===u||r){var I=t,M=r?F:D;return M>=o&&(I=Math.min(M-C-a.controlHeight,t)),{placement:"top",maxHeight:I}}if("bottom"===u){N(s,w);var L=t;return t>p&&!r&&(L=p-O-C),{placement:"bottom",maxHeight:L}}break;case"top":if(F>=m)return{placement:"top",maxHeight:t};if(D>=m&&!r)return i&&U(s,x,160),{placement:"top",maxHeight:t};if(!r&&D>=o||r&&F>=o){var V=t;return(!r&&D>=o||r&&F>=o)&&(V=r?F-O:D-O),i&&U(s,x,160),{placement:"top",maxHeight:V}}return{placement:"bottom",maxHeight:t};default:throw new Error('Invalid placement provided "'.concat(u,'".'))}return l}var W=function(e){return"auto"===e?"bottom":e},_=function(t){function n(){var e,t;a(this,n);for(var o=arguments.length,u=new Array(o),i=0;i-1}},re=function(e){return i.createElement("span",p({className:t.css({label:"a11yText",zIndex:9999,border:0,clip:"rect(1px, 1px, 1px, 1px)",height:1,width:1,position:"absolute",overflow:"hidden",padding:0,whiteSpace:"nowrap",backgroundColor:"red",color:"blue"})},e))},ae=function(n){function o(){return a(this,o),E(this,h(o).apply(this,arguments))}return f(o,e.Component),l(o,[{key:"render",value:function(){var e=this.props,n=(e.in,e.out,e.onExited,e.appear,e.enter,e.exit,e.innerRef),o=(e.emotion,g(e,["in","out","onExited","appear","enter","exit","innerRef","emotion"]));return i.createElement("input",p({ref:n},o,{className:t.css({label:"dummyInput",background:0,border:0,fontSize:"inherit",outline:0,padding:0,width:1,color:"transparent",left:-100,opacity:0,position:"relative",transform:"scale(0)"})}))}}]),o}(),se=function(t){function o(){return a(this,o),E(this,h(o).apply(this,arguments))}return f(o,e.Component),l(o,[{key:"componentDidMount",value:function(){this.props.innerRef(n.findDOMNode(this))}},{key:"componentWillUnmount",value:function(){this.props.innerRef(null)}},{key:"render",value:function(){return this.props.children}}]),o}(),le=["boxSizing","height","overflow","paddingRight","position"],ce={boxSizing:"border-box",overflow:"hidden",position:"relative",height:"100%"};function pe(e){e.preventDefault()}function de(e){e.stopPropagation()}function fe(){var e=this.scrollTop,t=this.scrollHeight,n=e+this.offsetHeight;0===e?this.scrollTop=1:n===t&&(this.scrollTop=e-1)}function he(){return"ontouchstart"in window||navigator.maxTouchPoints}var me=!("undefined"==typeof window||!window.document||!window.document.createElement),ge=0,ve=function(t){function n(){var e,t;a(this,n);for(var o=arguments.length,u=new Array(o),i=0;i0,h=c-p-l,m=!1;h>n&&t.isBottom&&(i&&i(e),t.isBottom=!1),f&&t.isTop&&(a&&a(e),t.isTop=!1),f&&n>h?(u&&!t.isBottom&&u(e),d.scrollTop=c,m=!0,t.isBottom=!0):!f&&-n>l&&(r&&!t.isTop&&r(e),d.scrollTop=0,m=!0,t.isTop=!0),m&&t.cancelScroll(e)}),c(v(v(t)),"onWheel",function(e){t.handleEventDelta(e,e.deltaY)}),c(v(v(t)),"onTouchStart",function(e){t.touchStart=e.changedTouches[0].clientY}),c(v(v(t)),"onTouchMove",function(e){var n=t.touchStart-e.changedTouches[0].clientY;t.handleEventDelta(e,n)}),c(v(v(t)),"getScrollTarget",function(e){t.scrollTarget=e}),t}return f(n,e.Component),l(n,[{key:"componentDidMount",value:function(){this.startListening(this.scrollTarget)}},{key:"componentWillUnmount",value:function(){this.stopListening(this.scrollTarget)}},{key:"startListening",value:function(e){e&&(e.scrollHeight<=e.clientHeight||("function"==typeof e.addEventListener&&e.addEventListener("wheel",this.onWheel,!1),"function"==typeof e.addEventListener&&e.addEventListener("touchstart",this.onTouchStart,!1),"function"==typeof e.addEventListener&&e.addEventListener("touchmove",this.onTouchMove,!1)))}},{key:"stopListening",value:function(e){e.scrollHeight<=e.clientHeight||("function"==typeof e.removeEventListener&&e.removeEventListener("wheel",this.onWheel,!1),"function"==typeof e.removeEventListener&&e.removeEventListener("touchstart",this.onTouchStart,!1),"function"==typeof e.removeEventListener&&e.removeEventListener("touchmove",this.onTouchMove,!1))}},{key:"render",value:function(){return i.createElement(se,{innerRef:this.getScrollTarget},this.props.children)}}]),n}(),ye=function(t){function n(){return a(this,n),E(this,h(n).apply(this,arguments))}return f(n,e.Component),l(n,[{key:"render",value:function(){var e=this.props,t=e.isEnabled,n=g(e,["isEnabled"]);return t?i.createElement(be,n):this.props.children}}]),n}();c(ye,"defaultProps",{isEnabled:!0});var Ce=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.isSearchable,o=t.isMulti,u=t.label,i=t.isDisabled;switch(e){case"menu":return"Use Up and Down to choose options".concat(i?"":", press Enter to select the currently focused option",", press Escape to exit the menu, press Tab to select the option and exit the menu.");case"input":return"".concat(u||"Select"," is focused ").concat(n?",type to refine list":"",", press Down to open the menu, ").concat(o?" press left to focus selected values":"");case"value":return"Use left and right to toggle between focused values, press Backspace to remove the currently focused value"}},Oe=function(e,t){var n=t.value,o=t.isDisabled;if(n)switch(e){case"deselect-option":case"pop-value":case"remove-value":return"option ".concat(n,", deselected.");case"select-option":return"option ".concat(n,o?" is disabled. Select another option.":", selected.")}},Fe=function(e){return!!e.isDisabled},Ae=function(n){function o(){return a(this,o),E(this,h(o).apply(this,arguments))}return f(o,e.Component),l(o,[{key:"render",value:function(){var e=this.props,n=e.children,o=e.className,u=e.cx,r=e.isMulti,a=e.getStyles,s=e.hasValue;return i.createElement("div",{className:u(t.css(a("valueContainer",this.props)),{"value-container":!0,"value-container--is-multi":r,"value-container--has-value":s},o)},n)}}]),o}(),De=function(e){var n=e.size,o=g(e,["size"]);return i.createElement("svg",p({height:n,width:n,viewBox:"0 0 20 20","aria-hidden":"true",focusable:"false",className:t.css({display:"inline-block",fill:"currentColor",lineHeight:1,stroke:"currentColor",strokeWidth:0})},o))},Se=function(e){return i.createElement(De,p({size:20},e),i.createElement("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"}))},we=function(e){return i.createElement(De,p({size:20},e),i.createElement("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"}))},xe=function(e){var t=e.isFocused,n=e.theme,o=n.spacing.baseUnit,u=n.colors;return{label:"indicatorContainer",color:t?u.neutral60:u.neutral20,display:"flex",padding:2*o,transition:"color 150ms",":hover":{color:t?u.neutral80:u.neutral40}}},Ie=xe,Me=xe,Le=!1,Ve=function(e){var n=e.color,o=e.delay,u=e.offset;return i.createElement("span",{className:t.css({animationDuration:"1s",animationDelay:"".concat(o,"ms"),animationIterationCount:"infinite",animationName:"react-select-loading-indicator",animationTimingFunction:"ease-in-out",backgroundColor:n,borderRadius:"1em",display:"inline-block",marginLeft:u?"1em":null,height:"1em",verticalAlign:"top",width:"1em"})})},Pe=function(e){var n=e.className,o=e.cx,u=e.getStyles,r=e.innerProps,a=e.isFocused,s=e.isRtl,l=e.theme.colors,c=a?l.neutral80:l.neutral20;return Le||(t.injectGlobal("@keyframes ","react-select-loading-indicator","{0%,80%,100%{opacity:0;}40%{opacity:1;}};"),Le=!0),i.createElement("div",p({},r,{className:o(t.css(u("loadingIndicator",e)),{indicator:!0,"loading-indicator":!0},n)}),i.createElement(Ve,{color:c,delay:0,offset:s}),i.createElement(Ve,{color:c,delay:160,offset:!0}),i.createElement(Ve,{color:c,delay:320,offset:!s}))};Pe.defaultProps={size:4};var ke=function(e){return{label:"input",background:0,border:0,fontSize:"inherit",opacity:e?0:1,outline:0,padding:0,color:"inherit"}},Be=function(e){var t=e.children,n=e.innerProps;return i.createElement("div",n,t)},Te=Be,Re=Be,He=function(t){function n(){return a(this,n),E(this,h(n).apply(this,arguments))}return f(n,e.Component),l(n,[{key:"render",value:function(){var e=this.props,t=e.children,n=e.innerProps;return i.createElement("div",n,t||i.createElement(Se,{size:14}))}}]),n}(),Ne=function(n){function o(){return a(this,o),E(this,h(o).apply(this,arguments))}return f(o,e.Component),l(o,[{key:"render",value:function(){var e=this.props,n=e.children,o=e.className,u=e.components,r=e.cx,a=e.data,s=e.getStyles,l=e.innerProps,c=e.isDisabled,p=e.removeProps,f=e.selectProps,h=u.Container,m=u.Label,g=u.Remove,v=d({className:r(t.css(s("multiValue",this.props)),{"multi-value":!0,"multi-value--is-disabled":c},o)},l),E={className:r(t.css(s("multiValueLabel",this.props)),{"multi-value__label":!0},o)},b=d({className:r(t.css(s("multiValueRemove",this.props)),{"multi-value__remove":!0},o)},p);return i.createElement(h,{data:a,innerProps:v,selectProps:f},i.createElement(m,{data:a,innerProps:E,selectProps:f},n),i.createElement(g,{data:a,innerProps:b,selectProps:f}))}}]),o}();c(Ne,"defaultProps",{cropWithEllipsis:!0});var Ue={ClearIndicator:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.innerProps;return i.createElement("div",p({},a,{className:u(t.css(r("clearIndicator",e)),{indicator:!0,"clear-indicator":!0},o)}),n||i.createElement(Se,null))},Control:function(e){var n=e.children,o=e.cx,u=e.getStyles,r=e.className,a=e.isDisabled,s=e.isFocused,l=e.innerRef,c=e.innerProps,d=e.menuIsOpen;return i.createElement("div",p({ref:l,className:o(t.css(u("control",e)),{control:!0,"control--is-disabled":a,"control--is-focused":s,"control--menu-is-open":d},r)},c),n)},DropdownIndicator:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.innerProps;return i.createElement("div",p({},a,{className:u(t.css(r("dropdownIndicator",e)),{indicator:!0,"dropdown-indicator":!0},o)}),n||i.createElement(we,null))},DownChevron:we,CrossIcon:Se,Group:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.Heading,s=e.headingProps,l=e.label,c=e.theme,d=e.selectProps;return i.createElement("div",{className:u(t.css(r("group",e)),{group:!0},o)},i.createElement(a,p({},s,{selectProps:d,theme:c,getStyles:r,cx:u}),l),i.createElement("div",null,n))},GroupHeading:function(e){var n=e.className,o=e.cx,u=e.getStyles,r=e.theme,a=(e.selectProps,g(e,["className","cx","getStyles","theme","selectProps"]));return i.createElement("div",p({className:o(t.css(u("groupHeading",d({theme:r},a))),{"group-heading":!0},n)},a))},IndicatorsContainer:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles;return i.createElement("div",{className:u(t.css(r("indicatorsContainer",e)),{indicators:!0},o)},n)},IndicatorSeparator:function(e){var n=e.className,o=e.cx,u=e.getStyles,r=e.innerProps;return i.createElement("span",p({},r,{className:o(t.css(u("indicatorSeparator",e)),{"indicator-separator":!0},n)}))},Input:function(e){var n=e.className,o=e.cx,r=e.getStyles,a=e.innerRef,s=e.isHidden,l=e.isDisabled,c=e.theme,f=(e.selectProps,g(e,["className","cx","getStyles","innerRef","isHidden","isDisabled","theme","selectProps"]));return i.createElement("div",{className:t.css(r("input",d({theme:c},f)))},i.createElement(u,p({className:o(null,{input:!0},n),inputRef:a,inputStyle:ke(s),disabled:l},f)))},LoadingIndicator:Pe,Menu:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.innerRef,s=e.innerProps,l=u(t.css(r("menu",e)),{menu:!0},o);return i.createElement("div",p({className:l},s,{ref:a}),n)},MenuList:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.isMulti,s=e.innerRef;return i.createElement("div",{className:u(t.css(r("menuList",e)),{"menu-list":!0,"menu-list--is-multi":a},o),ref:s},n)},MenuPortal:J,LoadingMessage:K,NoOptionsMessage:X,MultiValue:Ne,MultiValueContainer:Te,MultiValueLabel:Re,MultiValueRemove:He,Option:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.isDisabled,s=e.isFocused,l=e.isSelected,c=e.innerRef,d=e.innerProps;return i.createElement("div",p({ref:c,className:u(t.css(r("option",e)),{option:!0,"option--is-disabled":a,"option--is-focused":s,"option--is-selected":l},o)},d),n)},Placeholder:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.innerProps;return i.createElement("div",p({className:u(t.css(r("placeholder",e)),{placeholder:!0},o)},a),n)},SelectContainer:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.innerProps,s=e.isDisabled,l=e.isRtl;return i.createElement("div",p({className:u(t.css(r("container",e)),{"--is-disabled":s,"--is-rtl":l},o)},a),n)},SingleValue:function(e){var n=e.children,o=e.className,u=e.cx,r=e.getStyles,a=e.isDisabled,s=e.innerProps;return i.createElement("div",p({className:u(t.css(r("singleValue",e)),{"single-value":!0,"single-value--is-disabled":a},o)},s),n)},ValueContainer:Ae},je=function(e){return d({},Ue,e.components)},ze={clearIndicator:Me,container:function(e){var t=e.isDisabled;return{label:"container",direction:e.isRtl?"rtl":null,pointerEvents:t?"none":null,position:"relative"}},control:function(e){var t=e.isDisabled,n=e.isFocused,o=e.theme,u=o.colors,i=o.borderRadius,r=o.spacing;return{label:"control",alignItems:"center",backgroundColor:t?u.neutral5:u.neutral0,borderColor:t?u.neutral10:n?u.primary:u.neutral20,borderRadius:i,borderStyle:"solid",borderWidth:1,boxShadow:n?"0 0 0 1px ".concat(u.primary):null,cursor:"default",display:"flex",flexWrap:"wrap",justifyContent:"space-between",minHeight:r.controlHeight,outline:"0 !important",position:"relative",transition:"all 100ms","&:hover":{borderColor:n?u.primary:u.neutral30}}},dropdownIndicator:Ie,group:function(e){var t=e.theme.spacing;return{paddingBottom:2*t.baseUnit,paddingTop:2*t.baseUnit}},groupHeading:function(e){var t=e.theme.spacing;return{label:"group",color:"#999",cursor:"default",display:"block",fontSize:"75%",fontWeight:"500",marginBottom:"0.25em",paddingLeft:3*t.baseUnit,paddingRight:3*t.baseUnit,textTransform:"uppercase"}},indicatorsContainer:function(){return{alignItems:"center",alignSelf:"stretch",display:"flex",flexShrink:0}},indicatorSeparator:function(e){var t=e.isDisabled,n=e.theme,o=n.spacing.baseUnit,u=n.colors;return{label:"indicatorSeparator",alignSelf:"stretch",backgroundColor:t?u.neutral10:u.neutral20,marginBottom:2*o,marginTop:2*o,width:1}},input:function(e){var t=e.isDisabled,n=e.theme,o=n.spacing,u=n.colors;return{margin:o.baseUnit/2,paddingBottom:o.baseUnit/2,paddingTop:o.baseUnit/2,visibility:t?"hidden":"visible",color:u.neutral80}},loadingIndicator:function(e){var t=e.isFocused,n=e.size,o=e.theme,u=o.colors,i=o.spacing.baseUnit;return{label:"loadingIndicator",color:t?u.neutral60:u.neutral20,display:"flex",padding:2*i,transition:"color 150ms",alignSelf:"center",fontSize:n,lineHeight:1,marginRight:n,textAlign:"center",verticalAlign:"middle"}},loadingMessage:G,menu:function(e){var t,n=e.placement,o=e.theme,u=o.borderRadius,i=o.spacing,r=o.colors;return c(t={label:"menu"},function(e){return e?{bottom:"top",top:"bottom"}[e]:"bottom"}(n),"100%"),c(t,"backgroundColor",r.neutral0),c(t,"borderRadius",u),c(t,"boxShadow","0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)"),c(t,"marginBottom",i.menuGutter),c(t,"marginTop",i.menuGutter),c(t,"position","absolute"),c(t,"width","100%"),c(t,"zIndex",1),t},menuList:function(e){var t=e.maxHeight,n=e.theme.spacing.baseUnit;return{maxHeight:t,overflowY:"auto",paddingBottom:n,paddingTop:n,position:"relative",WebkitOverflowScrolling:"touch"}},menuPortal:function(e){var t=e.rect,n=e.offset,o=e.position;return{left:t.left,position:o,top:n,width:t.width,zIndex:1}},multiValue:function(e){var t=e.theme,n=t.spacing,o=t.borderRadius;return{label:"multiValue",backgroundColor:t.colors.neutral10,borderRadius:o/2,display:"flex",margin:n.baseUnit/2,minWidth:0}},multiValueLabel:function(e){var t=e.theme,n=t.borderRadius,o=t.colors,u=e.cropWithEllipsis;return{borderRadius:n/2,color:o.neutral80,fontSize:"85%",overflow:"hidden",padding:3,paddingLeft:6,textOverflow:u?"ellipsis":null,whiteSpace:"nowrap"}},multiValueRemove:function(e){var t=e.theme,n=t.spacing,o=t.borderRadius,u=t.colors;return{alignItems:"center",borderRadius:o/2,backgroundColor:e.isFocused&&u.dangerLight,display:"flex",paddingLeft:n.baseUnit,paddingRight:n.baseUnit,":hover":{backgroundColor:u.dangerLight,color:u.danger}}},noOptionsMessage:q,option:function(e){var t=e.isDisabled,n=e.isFocused,o=e.isSelected,u=e.theme,i=u.spacing,r=u.colors;return{label:"option",backgroundColor:o?r.primary:n?r.primary25:"transparent",color:t?r.neutral20:o?r.neutral0:"inherit",cursor:"default",display:"block",fontSize:"inherit",padding:"".concat(2*i.baseUnit,"px ").concat(3*i.baseUnit,"px"),width:"100%",userSelect:"none",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",":active":{backgroundColor:o?r.primary:r.primary50}}},placeholder:function(e){var t=e.theme,n=t.spacing;return{label:"placeholder",color:t.colors.neutral50,marginLeft:n.baseUnit/2,marginRight:n.baseUnit/2,position:"absolute",top:"50%",transform:"translateY(-50%)"}},singleValue:function(e){var t=e.isDisabled,n=e.theme,o=n.spacing,u=n.colors;return{label:"singleValue",color:t?u.neutral40:u.neutral80,marginLeft:o.baseUnit/2,marginRight:o.baseUnit/2,maxWidth:"calc(100% - ".concat(2*o.baseUnit,"px)"),overflow:"hidden",position:"absolute",textOverflow:"ellipsis",whiteSpace:"nowrap",top:"50%",transform:"translateY(-50%)"}},valueContainer:function(e){var t=e.theme.spacing;return{alignItems:"center",display:"flex",flex:1,flexWrap:"wrap",padding:"".concat(t.baseUnit/2,"px ").concat(2*t.baseUnit,"px"),WebkitOverflowScrolling:"touch",position:"relative",overflow:"hidden"}}};var We={borderRadius:4,colors:{primary:"#2684FF",primary75:"#4C9AFF",primary50:"#B2D4FF",primary25:"#DEEBFF",danger:"#DE350B",dangerLight:"#FFBDAD",neutral0:"hsl(0, 0%, 100%)",neutral5:"hsl(0, 0%, 95%)",neutral10:"hsl(0, 0%, 90%)",neutral20:"hsl(0, 0%, 80%)",neutral30:"hsl(0, 0%, 70%)",neutral40:"hsl(0, 0%, 60%)",neutral50:"hsl(0, 0%, 50%)",neutral60:"hsl(0, 0%, 40%)",neutral70:"hsl(0, 0%, 30%)",neutral80:"hsl(0, 0%, 20%)",neutral90:"hsl(0, 0%, 10%)"},spacing:{baseUnit:4,controlHeight:38,menuGutter:8}},_e={backspaceRemovesValue:!0,blurInputOnSelect:j(),captureMenuScroll:!j(),closeMenuOnSelect:!0,closeMenuOnScroll:!1,components:{},controlShouldRenderValue:!0,escapeClearsValue:!1,filterOption:ie(),formatGroupLabel:function(e){return e.label},getOptionLabel:function(e){return e.label},getOptionValue:function(e){return e.value},isDisabled:!1,isLoading:!1,isMulti:!1,isRtl:!1,isSearchable:!0,isOptionDisabled:Fe,loadingMessage:function(){return"Loading..."},maxMenuHeight:300,minMenuHeight:140,menuIsOpen:!1,menuPlacement:"bottom",menuPosition:"absolute",menuShouldBlockScroll:!1,menuShouldScrollIntoView:!function(){try{return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}catch(e){return!1}}(),noOptionsMessage:function(){return"No options"},openMenuOnFocus:!1,openMenuOnClick:!0,options:[],pageSize:5,placeholder:"Select...",screenReaderStatus:function(e){var t=e.count;return"".concat(t," result").concat(1!==t?"s":""," available")},styles:{},tabIndex:"0",tabSelectsValue:!0},Ye=1,qe=function(t){function n(e){var t;a(this,n),c(v(v(t=E(this,h(n).call(this,e)))),"state",{ariaLiveSelection:"",ariaLiveContext:"",focusedOption:null,focusedValue:null,inputIsHidden:!1,isFocused:!1,isComposing:!1,menuOptions:{render:[],focusable:[]},selectValue:[]}),c(v(v(t)),"blockOptionHover",!1),c(v(v(t)),"clearFocusValueOnUpdate",!1),c(v(v(t)),"commonProps",void 0),c(v(v(t)),"components",void 0),c(v(v(t)),"hasGroups",!1),c(v(v(t)),"initialTouchX",0),c(v(v(t)),"initialTouchY",0),c(v(v(t)),"inputIsHiddenAfterUpdate",void 0),c(v(v(t)),"instancePrefix",""),c(v(v(t)),"openAfterFocus",!1),c(v(v(t)),"scrollToFocusedOptionOnUpdate",!1),c(v(v(t)),"userIsDragging",void 0),c(v(v(t)),"controlRef",null),c(v(v(t)),"getControlRef",function(e){t.controlRef=e}),c(v(v(t)),"focusedOptionRef",null),c(v(v(t)),"getFocusedOptionRef",function(e){t.focusedOptionRef=e}),c(v(v(t)),"menuListRef",null),c(v(v(t)),"getMenuListRef",function(e){t.menuListRef=e}),c(v(v(t)),"inputRef",null),c(v(v(t)),"getInputRef",function(e){t.inputRef=e}),c(v(v(t)),"cacheComponents",function(e){t.components=je({components:e})}),c(v(v(t)),"focus",t.focusInput),c(v(v(t)),"blur",t.blurInput),c(v(v(t)),"onChange",function(e,n){var o=t.props;(0,o.onChange)(e,d({},n,{name:o.name}))}),c(v(v(t)),"setValue",function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"set-value",o=arguments.length>2?arguments[2]:void 0,u=t.props,i=u.closeMenuOnSelect,r=u.isMulti;t.onInputChange("",{action:"set-value"}),i&&(t.inputIsHiddenAfterUpdate=!r,t.onMenuClose()),t.clearFocusValueOnUpdate=!0,t.onChange(e,{action:n,option:o})}),c(v(v(t)),"selectOption",function(e){var n=t.props,o=n.blurInputOnSelect,u=n.isMulti,i=t.state.selectValue;if(u)if(t.isOptionSelected(e,i)){var r=t.getOptionValue(e);t.setValue(i.filter(function(e){return t.getOptionValue(e)!==r}),"deselect-option",e),t.announceAriaLiveSelection({event:"deselect-option",context:{value:t.getOptionLabel(e)}})}else t.isOptionDisabled(e,i)?t.announceAriaLiveSelection({event:"select-option",context:{value:t.getOptionLabel(e),isDisabled:!0}}):(t.setValue([].concat(b(i),[e]),"select-option",e),t.announceAriaLiveSelection({event:"select-option",context:{value:t.getOptionLabel(e)}}));else t.isOptionDisabled(e,i)?t.announceAriaLiveSelection({event:"select-option",context:{value:t.getOptionLabel(e),isDisabled:!0}}):(t.setValue(e,"select-option"),t.announceAriaLiveSelection({event:"select-option",context:{value:t.getOptionLabel(e)}}));o&&t.blurInput()}),c(v(v(t)),"removeValue",function(e){var n=t.state.selectValue,o=t.getOptionValue(e);t.onChange(n.filter(function(e){return t.getOptionValue(e)!==o}),{action:"remove-value",removedValue:e}),t.announceAriaLiveSelection({event:"remove-value",context:{value:e?t.getOptionLabel(e):""}}),t.focusInput()}),c(v(v(t)),"clearValue",function(){var e=t.props.isMulti;t.onChange(e?[]:null,{action:"clear"})}),c(v(v(t)),"popValue",function(){var e=t.state.selectValue,n=e[e.length-1];t.announceAriaLiveSelection({event:"pop-value",context:{value:n?t.getOptionLabel(n):""}}),t.onChange(e.slice(0,e.length-1),{action:"pop-value",removedValue:n})}),c(v(v(t)),"getOptionLabel",function(e){return t.props.getOptionLabel(e)}),c(v(v(t)),"getOptionValue",function(e){return t.props.getOptionValue(e)}),c(v(v(t)),"getStyles",function(e,n){var o=ze[e](n);o.boxSizing="border-box";var u=t.props.styles[e];return u?u(o,n):o}),c(v(v(t)),"getElementId",function(e){return"".concat(t.instancePrefix,"-").concat(e)}),c(v(v(t)),"getActiveDescendentId",function(){var e=t.props.menuIsOpen,n=t.state,o=n.menuOptions,u=n.focusedOption;if(u&&e){var i=o.focusable.indexOf(u),r=o.render[i];return r&&r.key}}),c(v(v(t)),"announceAriaLiveSelection",function(e){var n=e.event,o=e.context;t.setState({ariaLiveSelection:Oe(n,o)})}),c(v(v(t)),"announceAriaLiveContext",function(e){var n=e.event,o=e.context;t.setState({ariaLiveContext:Ce(n,d({},o,{label:t.props["aria-label"]}))})}),c(v(v(t)),"onMenuMouseDown",function(e){0===e.button&&(e.stopPropagation(),e.preventDefault(),t.focusInput())}),c(v(v(t)),"onMenuMouseMove",function(e){t.blockOptionHover=!1}),c(v(v(t)),"onControlMouseDown",function(e){var n=t.props.openMenuOnClick;t.state.isFocused?t.props.menuIsOpen?"INPUT"!==e.target.tagName&&t.onMenuClose():n&&t.openMenu("first"):(n&&(t.openAfterFocus=!0),t.focusInput()),"INPUT"!==e.target.tagName&&e.preventDefault()}),c(v(v(t)),"onDropdownIndicatorMouseDown",function(e){if(!(e&&"mousedown"===e.type&&0!==e.button||t.props.isDisabled)){var n=t.props,o=n.isMulti,u=n.menuIsOpen;t.focusInput(),u?(t.inputIsHiddenAfterUpdate=!o,t.onMenuClose()):t.openMenu("first"),e.preventDefault(),e.stopPropagation()}}),c(v(v(t)),"onClearIndicatorMouseDown",function(e){e&&"mousedown"===e.type&&0!==e.button||(t.clearValue(),e.stopPropagation(),t.openAfterFocus=!1,setTimeout(function(){return t.focusInput()}))}),c(v(v(t)),"onScroll",function(e){"boolean"==typeof t.props.closeMenuOnScroll?e.target instanceof HTMLElement&&R(e.target)&&t.props.onMenuClose():"function"==typeof t.props.closeMenuOnScroll&&t.props.closeMenuOnScroll(e)&&t.props.onMenuClose()}),c(v(v(t)),"onCompositionStart",function(){t.setState({isComposing:!0})}),c(v(v(t)),"onCompositionEnd",function(){t.setState({isComposing:!1})}),c(v(v(t)),"onTouchStart",function(e){var n=e.touches.item(0);n&&(t.initialTouchX=n.clientX,t.initialTouchY=n.clientY,t.userIsDragging=!1)}),c(v(v(t)),"onTouchMove",function(e){var n=e.touches.item(0);if(n){var o=Math.abs(n.clientX-t.initialTouchX),u=Math.abs(n.clientY-t.initialTouchY);t.userIsDragging=o>5||u>5}}),c(v(v(t)),"onTouchEnd",function(e){t.userIsDragging||(t.controlRef&&!t.controlRef.contains(e.target)&&t.menuListRef&&!t.menuListRef.contains(e.target)&&t.blurInput(),t.initialTouchX=0,t.initialTouchY=0)}),c(v(v(t)),"onControlTouchEnd",function(e){t.userIsDragging||t.onControlMouseDown(e)}),c(v(v(t)),"onClearIndicatorTouchEnd",function(e){t.userIsDragging||t.onClearIndicatorMouseDown(e)}),c(v(v(t)),"onDropdownIndicatorTouchEnd",function(e){t.userIsDragging||t.onDropdownIndicatorMouseDown(e)}),c(v(v(t)),"handleInputChange",function(e){var n=e.currentTarget.value;t.inputIsHiddenAfterUpdate=!1,t.onInputChange(n,{action:"input-change"}),t.onMenuOpen()}),c(v(v(t)),"onInputFocus",function(e){var n=t.props,o=n.isSearchable,u=n.isMulti;t.props.onFocus&&t.props.onFocus(e),t.inputIsHiddenAfterUpdate=!1,t.announceAriaLiveContext({event:"input",context:{isSearchable:o,isMulti:u}}),t.setState({isFocused:!0}),(t.openAfterFocus||t.props.openMenuOnFocus)&&t.openMenu("first"),t.openAfterFocus=!1}),c(v(v(t)),"onInputBlur",function(e){t.menuListRef&&t.menuListRef.contains(document.activeElement)?t.inputRef.focus():(t.props.onBlur&&t.props.onBlur(e),t.onInputChange("",{action:"input-blur"}),t.onMenuClose(),t.setState({focusedValue:null,isFocused:!1}))}),c(v(v(t)),"onOptionHover",function(e){t.blockOptionHover||t.state.focusedOption===e||t.setState({focusedOption:e})}),c(v(v(t)),"shouldHideSelectedOptions",function(){var e=t.props,n=e.hideSelectedOptions,o=e.isMulti;return void 0===n?o:n}),c(v(v(t)),"onKeyDown",function(e){var n=t.props,o=n.isMulti,u=n.backspaceRemovesValue,i=n.escapeClearsValue,r=n.inputValue,a=n.isClearable,s=n.isDisabled,l=n.menuIsOpen,c=n.onKeyDown,p=n.tabSelectsValue,d=n.openMenuOnFocus,f=t.state,h=f.isComposing,m=f.focusedOption,g=f.focusedValue,v=f.selectValue;if(!(s||"function"==typeof c&&(c(e),e.defaultPrevented))){switch(t.blockOptionHover=!0,e.key){case"ArrowLeft":if(!o||r)return;t.focusValue("previous");break;case"ArrowRight":if(!o||r)return;t.focusValue("next");break;case"Delete":case"Backspace":if(r)return;if(g)t.removeValue(g);else{if(!u)return;o?t.popValue():a&&t.clearValue()}break;case"Tab":if(h)return;if(e.shiftKey||!l||!p||!m||d&&t.isOptionSelected(m,v))return;t.selectOption(m);break;case"Enter":if(229===e.keyCode)break;if(l){if(!m)return;if(h)return;t.selectOption(m);break}return;case"Escape":l?(t.inputIsHiddenAfterUpdate=!1,t.onInputChange("",{action:"menu-close"}),t.onMenuClose()):a&&i&&t.clearValue();break;case" ":if(r)return;if(!l){t.openMenu("first");break}if(!m)return;t.selectOption(m);break;case"ArrowUp":l?t.focusOption("up"):t.openMenu("last");break;case"ArrowDown":l?t.focusOption("down"):t.openMenu("first");break;case"PageUp":if(!l)return;t.focusOption("pageup");break;case"PageDown":if(!l)return;t.focusOption("pagedown");break;case"Home":if(!l)return;t.focusOption("first");break;case"End":if(!l)return;t.focusOption("last");break;default:return}e.preventDefault()}});var o=e.value;t.cacheComponents=function(e,t){var n;void 0===t&&(t=y);var o,u=[],i=!1;return function(){for(var r=arguments.length,a=new Array(r),s=0;so.bottom?N(t,Math.min(n.offsetTop+n.clientHeight-t.offsetHeight+i,t.scrollHeight)):u.top-i-1&&(r=a)}this.scrollToFocusedOptionOnUpdate=!(u&&this.menuListRef),this.inputIsHiddenAfterUpdate=!1,this.onMenuOpen(),this.setState({focusedValue:null,focusedOption:n.focusable[r]}),this.announceAriaLiveContext({event:"menu"})}},{key:"focusValue",value:function(e){var t=this.props,n=t.isMulti,o=t.isSearchable,u=this.state,i=u.selectValue,r=u.focusedValue;if(n){this.setState({focusedOption:null});var a=i.indexOf(r);r||(a=-1,this.announceAriaLiveContext({event:"value"}));var s=i.length-1,l=-1;if(i.length){switch(e){case"previous":l=0===a?0:-1===a?s:a-1;break;case"next":a>-1&&a0&&void 0!==arguments[0]?arguments[0]:"first",t=this.props.pageSize,n=this.state,o=n.focusedOption,u=n.menuOptions.focusable;if(u.length){var i=0,r=u.indexOf(o);o||(r=-1,this.announceAriaLiveContext({event:"menu"})),"up"===e?i=r>0?r-1:u.length-1:"down"===e?i=(r+1)%u.length:"pageup"===e?(i=r-t)<0&&(i=0):"pagedown"===e?(i=r+t)>u.length-1&&(i=u.length-1):"last"===e&&(i=u.length-1),this.scrollToFocusedOptionOnUpdate=!0,this.setState({focusedOption:u[i],focusedValue:null}),this.announceAriaLiveContext({event:"menu",context:{isDisabled:Fe(u[i])}})}}},{key:"getTheme",value:function(){return this.props.theme?"function"==typeof this.props.theme?this.props.theme(We):d({},We,this.props.theme):We}},{key:"getCommonProps",value:function(){var e=this.clearValue,t=this.getStyles,n=this.setValue,o=this.selectOption,u=this.props,i=u.classNamePrefix,r=u.isMulti,a=u.isRtl,s=u.options,l=this.state.selectValue,c=this.hasValue();return{cx:function(e,t,n,o){var u=[t,o];if(n&&e)for(var i in n)n.hasOwnProperty(i)&&n[i]&&u.push("".concat(B(e,i)));return u.filter(function(e){return e}).map(function(e){return String(e).trim()}).join(" ")}.bind(null,i),clearValue:e,getStyles:t,getValue:function(){return l},hasValue:c,isMulti:r,isRtl:a,options:s,selectOption:o,setValue:n,selectProps:u,theme:this.getTheme()}}},{key:"getNextFocusedValue",value:function(e){if(this.clearFocusValueOnUpdate)return this.clearFocusValueOnUpdate=!1,null;var t=this.state,n=t.focusedValue,o=t.selectValue.indexOf(n);if(o>-1){if(e.indexOf(n)>-1)return n;if(o-1?t:e[0]}},{key:"hasValue",value:function(){return this.state.selectValue.length>0}},{key:"hasOptions",value:function(){return!!this.state.menuOptions.render.length}},{key:"countOptions",value:function(){return this.state.menuOptions.focusable.length}},{key:"isClearable",value:function(){var e=this.props,t=e.isClearable,n=e.isMulti;return void 0===t?n:t}},{key:"isOptionDisabled",value:function(e,t){return"function"==typeof this.props.isOptionDisabled&&this.props.isOptionDisabled(e,t)}},{key:"isOptionSelected",value:function(e,t){var n=this;if(t.indexOf(e)>-1)return!0;if("function"==typeof this.props.isOptionSelected)return this.props.isOptionSelected(e,t);var o=this.getOptionValue(e);return t.some(function(e){return n.getOptionValue(e)===o})}},{key:"filterOption",value:function(e,t){return!this.props.filterOption||this.props.filterOption(e,t)}},{key:"formatOptionLabel",value:function(e,t){if("function"==typeof this.props.formatOptionLabel){var n=this.props.inputValue,o=this.state.selectValue;return this.props.formatOptionLabel(e,{context:t,inputValue:n,selectValue:o})}return this.getOptionLabel(e)}},{key:"formatGroupLabel",value:function(e){return this.props.formatGroupLabel(e)}},{key:"startListeningComposition",value:function(){document&&document.addEventListener&&(document.addEventListener("compositionstart",this.onCompositionStart,!1),document.addEventListener("compositionend",this.onCompositionEnd,!1))}},{key:"stopListeningComposition",value:function(){document&&document.removeEventListener&&(document.removeEventListener("compositionstart",this.onCompositionStart),document.removeEventListener("compositionend",this.onCompositionEnd))}},{key:"startListeningToTouch",value:function(){document&&document.addEventListener&&(document.addEventListener("touchstart",this.onTouchStart,!1),document.addEventListener("touchmove",this.onTouchMove,!1),document.addEventListener("touchend",this.onTouchEnd,!1))}},{key:"stopListeningToTouch",value:function(){document&&document.removeEventListener&&(document.removeEventListener("touchstart",this.onTouchStart),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd))}},{key:"buildMenuOptions",value:function(e,t){var n=this,o=e.inputValue,u=void 0===o?"":o,i=e.options,r=function(e,o){var i=n.isOptionDisabled(e,t),r=n.isOptionSelected(e,t),a=n.getOptionLabel(e),s=n.getOptionValue(e);if(!(n.shouldHideSelectedOptions()&&r||!n.filterOption({label:a,value:s,data:e},u))){var l=i?void 0:function(){return n.onOptionHover(e)},c=i?void 0:function(){return n.selectOption(e)},p="".concat(n.getElementId("option"),"-").concat(o);return{innerProps:{id:p,onClick:c,onMouseMove:l,onMouseOver:l,tabIndex:-1},data:e,isDisabled:i,isSelected:r,key:p,label:a,type:"option",value:s}}};return i.reduce(function(e,t,o){if(t.options){n.hasGroups||(n.hasGroups=!0);var u=t.options.map(function(t,n){var u=r(t,"".concat(o,"-").concat(n));return u&&e.focusable.push(t),u}).filter(Boolean);if(u.length){var i="".concat(n.getElementId("group"),"-").concat(o);e.render.push({type:"group",key:i,data:t,options:u})}}else{var a=r(t,"".concat(o));a&&(e.render.push(a),e.focusable.push(t))}return e},{render:[],focusable:[]})}},{key:"constructAriaLiveMessage",value:function(){var e=this.state,t=e.ariaLiveContext,n=e.selectValue,o=e.focusedValue,u=e.focusedOption,i=this.props,r=i.options,a=i.menuIsOpen,s=i.inputValue,l=i.screenReaderStatus,c=o?function(e){var t=e.focusedValue,n=e.getOptionLabel,o=e.selectValue;return"value ".concat(n(t)," focused, ").concat(o.indexOf(t)+1," of ").concat(o.length,".")}({focusedValue:o,getOptionLabel:this.getOptionLabel,selectValue:n}):"",p=u&&a?function(e){var t=e.focusedOption,n=e.getOptionLabel,o=e.options;return"option ".concat(n(t)," focused").concat(t.isDisabled?" disabled":"",", ").concat(o.indexOf(t)+1," of ").concat(o.length,".")}({focusedOption:u,getOptionLabel:this.getOptionLabel,options:r}):"",d=function(e){var t=e.inputValue,n=e.screenReaderMessage;return"".concat(n).concat(t?" for search term "+t:"",".")}({inputValue:s,screenReaderMessage:l({count:this.countOptions()})});return"".concat(c," ").concat(p," ").concat(d," ").concat(t)}},{key:"renderInput",value:function(){var e=this.props,t=e.isDisabled,n=e.isSearchable,o=e.inputId,u=e.inputValue,r=e.tabIndex,a=this.components.Input,s=this.state.inputIsHidden,l=o||this.getElementId("input");if(!n)return i.createElement(ae,{id:l,innerRef:this.getInputRef,onBlur:this.onInputBlur,onChange:k,onFocus:this.onInputFocus,readOnly:!0,disabled:t,tabIndex:r,value:""});var c={"aria-autocomplete":"list","aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"]},d=this.commonProps,f=d.cx,h=d.theme,m=d.selectProps;return i.createElement(a,p({autoCapitalize:"none",autoComplete:"off",autoCorrect:"off",cx:f,getStyles:this.getStyles,id:l,innerRef:this.getInputRef,isDisabled:t,isHidden:s,onBlur:this.onInputBlur,onChange:this.handleInputChange,onFocus:this.onInputFocus,selectProps:m,spellCheck:"false",tabIndex:r,theme:h,type:"text",value:u},c))}},{key:"renderPlaceholderOrValue",value:function(){var e=this,t=this.components,n=t.MultiValue,o=t.MultiValueContainer,u=t.MultiValueLabel,r=t.MultiValueRemove,a=t.SingleValue,s=t.Placeholder,l=this.commonProps,c=this.props,d=c.controlShouldRenderValue,f=c.isDisabled,h=c.isMulti,m=c.inputValue,g=c.placeholder,v=this.state,E=v.selectValue,b=v.focusedValue,y=v.isFocused;if(!this.hasValue()||!d)return m?null:i.createElement(s,p({},l,{key:"placeholder",isDisabled:f,isFocused:y}),g);if(h)return E.map(function(t){var a=t===b;return i.createElement(n,p({},l,{components:{Container:o,Label:u,Remove:r},isFocused:a,isDisabled:f,key:e.getOptionValue(t),removeProps:{onClick:function(){return e.removeValue(t)},onTouchEnd:function(){return e.removeValue(t)},onMouseDown:function(e){e.preventDefault(),e.stopPropagation()}},data:t}),e.formatOptionLabel(t,"value"))});if(m)return null;var C=E[0];return i.createElement(a,p({},l,{data:C,isDisabled:f}),this.formatOptionLabel(C,"value"))}},{key:"renderClearIndicator",value:function(){var e=this.components.ClearIndicator,t=this.commonProps,n=this.props,o=n.isDisabled,u=n.isLoading,r=this.state.isFocused;if(!this.isClearable()||!e||o||!this.hasValue()||u)return null;var a={onMouseDown:this.onClearIndicatorMouseDown,onTouchEnd:this.onClearIndicatorTouchEnd,"aria-hidden":"true"};return i.createElement(e,p({},t,{innerProps:a,isFocused:r}))}},{key:"renderLoadingIndicator",value:function(){var e=this.components.LoadingIndicator,t=this.commonProps,n=this.props,o=n.isDisabled,u=n.isLoading,r=this.state.isFocused;if(!e||!u)return null;return i.createElement(e,p({},t,{innerProps:{"aria-hidden":"true"},isDisabled:o,isFocused:r}))}},{key:"renderIndicatorSeparator",value:function(){var e=this.components,t=e.DropdownIndicator,n=e.IndicatorSeparator;if(!t||!n)return null;var o=this.commonProps,u=this.props.isDisabled,r=this.state.isFocused;return i.createElement(n,p({},o,{isDisabled:u,isFocused:r}))}},{key:"renderDropdownIndicator",value:function(){var e=this.components.DropdownIndicator;if(!e)return null;var t=this.commonProps,n=this.props.isDisabled,o=this.state.isFocused,u={onMouseDown:this.onDropdownIndicatorMouseDown,onTouchEnd:this.onDropdownIndicatorTouchEnd,"aria-hidden":"true"};return i.createElement(e,p({},t,{innerProps:u,isDisabled:n,isFocused:o}))}},{key:"renderMenu",value:function(){var e=this,t=this.components,n=t.Group,o=t.GroupHeading,u=t.Menu,r=t.MenuList,a=t.MenuPortal,s=t.LoadingMessage,l=t.NoOptionsMessage,c=t.Option,d=this.commonProps,f=this.state,h=f.focusedOption,m=f.menuOptions,v=this.props,E=v.captureMenuScroll,b=v.inputValue,y=v.isLoading,C=v.loadingMessage,O=v.minMenuHeight,F=v.maxMenuHeight,A=v.menuIsOpen,D=v.menuPlacement,S=v.menuPosition,w=v.menuPortalTarget,x=v.menuShouldBlockScroll,I=v.menuShouldScrollIntoView,M=v.noOptionsMessage,L=v.onMenuScrollToTop,V=v.onMenuScrollToBottom;if(!A)return null;var P,k=function(t){var n=h===t.data;return t.innerRef=n?e.getFocusedOptionRef:void 0,i.createElement(c,p({},d,t,{isFocused:n}),e.formatOptionLabel(t.data,"menu"))};if(this.hasOptions())P=m.render.map(function(t){if("group"===t.type){t.type;var u=g(t,["type"]),r="".concat(t.key,"-heading");return i.createElement(n,p({},d,u,{Heading:o,headingProps:{id:r},label:e.formatGroupLabel(t.data)}),t.options.map(function(e){return k(e)}))}if("option"===t.type)return k(t)});else if(y){var B=C({inputValue:b});if(null===B)return null;P=i.createElement(s,d,B)}else{var T=M({inputValue:b});if(null===T)return null;P=i.createElement(l,d,T)}var R={minMenuHeight:O,maxMenuHeight:F,menuPlacement:D,menuPosition:S,menuShouldScrollIntoView:I},H=i.createElement(_,p({},d,R),function(t){var n=t.ref,o=t.placerProps,a=o.placement,s=o.maxHeight;return i.createElement(u,p({},d,R,{innerRef:n,innerProps:{onMouseDown:e.onMenuMouseDown,onMouseMove:e.onMenuMouseMove},isLoading:y,placement:a}),i.createElement(ye,{isEnabled:E,onTopArrive:L,onBottomArrive:V},i.createElement(Ee,{isEnabled:x},i.createElement(r,p({},d,{innerRef:e.getMenuListRef,isLoading:y,maxHeight:s}),P))))});return w||"fixed"===S?i.createElement(a,p({},d,{appendTo:w,controlElement:this.controlRef,menuPlacement:D,menuPosition:S}),H):H}},{key:"renderFormField",value:function(){var e=this,t=this.props,n=t.delimiter,o=t.isDisabled,u=t.isMulti,r=t.name,a=this.state.selectValue;if(r&&!o){if(u){if(n){var s=a.map(function(t){return e.getOptionValue(t)}).join(n);return i.createElement("input",{name:r,type:"hidden",value:s})}var l=a.length>0?a.map(function(t,n){return i.createElement("input",{key:"i-".concat(n),name:r,type:"hidden",value:e.getOptionValue(t)})}):i.createElement("input",{name:r,type:"hidden"});return i.createElement("div",null,l)}var c=a[0]?this.getOptionValue(a[0]):"";return i.createElement("input",{name:r,type:"hidden",value:c})}}},{key:"renderLiveRegion",value:function(){return this.state.isFocused?i.createElement(re,{"aria-live":"assertive"},i.createElement("p",{id:"aria-selection-event"}," ",this.state.ariaLiveSelection),i.createElement("p",{id:"aria-context"}," ",this.constructAriaLiveMessage())):null}},{key:"render",value:function(){var e=this.components,t=e.Control,n=e.IndicatorsContainer,o=e.SelectContainer,u=e.ValueContainer,r=this.props,a=r.className,s=r.id,l=r.isDisabled,c=r.menuIsOpen,d=this.state.isFocused,f=this.commonProps=this.getCommonProps();return i.createElement(o,p({},f,{className:a,innerProps:{id:s,onKeyDown:this.onKeyDown},isDisabled:l,isFocused:d}),this.renderLiveRegion(),i.createElement(t,p({},f,{innerRef:this.getControlRef,innerProps:{onMouseDown:this.onControlMouseDown,onTouchEnd:this.onControlTouchEnd},isDisabled:l,isFocused:d,menuIsOpen:c}),i.createElement(u,p({},f,{isDisabled:l}),this.renderPlaceholderOrValue(),this.renderInput()),i.createElement(n,p({},f,{isDisabled:l}),this.renderClearIndicator(),this.renderLoadingIndicator(),this.renderIndicatorSeparator(),this.renderDropdownIndicator())),this.renderMenu(),this.renderFormField())}}]),n}();c(qe,"defaultProps",_e);var Ge={defaultInputValue:"",defaultMenuIsOpen:!1,defaultValue:null},Xe=function(t){var n,o;return o=n=function(n){function o(){var e,t;a(this,o);for(var n=arguments.length,u=new Array(n),i=0;i1?n-1:0),u=1;u0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1?arguments[1]:void 0,n=String(e).toLowerCase(),o=String(t.value).toLowerCase(),u=String(t.label).toLowerCase();return o===n||u===n},Qe=d({allowCreateWhileLoading:!1,createOptionPosition:"last"},{formatCreateLabel:function(e){return'Create "'.concat(e,'"')},isValidNewOption:function(e,t,n){return!(!e||t.some(function(t){return $e(e,t)})||n.some(function(t){return $e(e,t)}))},getNewOptionData:function(e,t){return{label:t,value:e,__isNew__:!0}}}),et=function(t){var n,o;return o=n=function(n){function o(e){var t;a(this,o),c(v(v(t=E(this,h(o).call(this,e)))),"select",void 0),c(v(v(t)),"onChange",function(e,n){var o=t.props,u=o.getNewOptionData,i=o.inputValue,r=o.isMulti,a=o.onChange,s=o.onCreateOption,l=o.value;if("select-option"!==n.action)return a(e,n);var c=t.state.newOption,p=Array.isArray(e)?e:[e];if(p[p.length-1]!==c)a(e,n);else if(s)s(i);else{var d=u(i,i),f={action:"create-option"};a(r?[].concat(b(T(l)),[d]):d,f)}});var n=e.options||[];return t.state={newOption:void 0,options:n},t}return f(o,e.Component),l(o,[{key:"componentWillReceiveProps",value:function(e){var t=e.allowCreateWhileLoading,n=e.createOptionPosition,o=e.formatCreateLabel,u=e.getNewOptionData,i=e.inputValue,r=e.isLoading,a=e.isValidNewOption,s=e.value,l=e.options||[],c=this.state.newOption;c=a(i,T(s),l)?u(i,o(i)):void 0,this.setState({newOption:c,options:!t&&r||!c?l:"first"===n?[c].concat(b(l)):[].concat(b(l),[c])})}},{key:"focus",value:function(){this.select.focus()}},{key:"blur",value:function(){this.select.blur()}},{key:"render",value:function(){var e=this,n=p({},this.props),o=this.state.options;return i.createElement(t,p({},n,{ref:function(t){e.select=t},options:o,onChange:this.onChange}))}}]),o}(),c(n,"defaultProps",Qe),o},tt=Xe(et(qe)),nt=Je(Xe(et(qe))),ot=Xe(qe);return ot.Async=Ze,ot.AsyncCreatable=nt,ot.Creatable=tt,ot.SelectBase=qe,ot.createFilter=ie,ot.components=Ue,ot.mergeStyles=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=d({},e);return Object.keys(t).forEach(function(o){e[o]?n[o]=function(n,u){return t[o](e[o](n,u),u)}:n[o]=t[o]}),n},ot.defaultTheme=We,ot}); diff --git a/lib/Async.js b/lib/Async.js new file mode 100644 index 0000000000..a18dcfb705 --- /dev/null +++ b/lib/Async.js @@ -0,0 +1,246 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.makeAsyncSelect = exports.defaultProps = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _Select = _interopRequireDefault(require("./Select")); + +var _utils = require("./utils"); + +var _stateManager = _interopRequireDefault(require("./stateManager")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +var defaultProps = { + cacheOptions: false, + defaultOptions: false, + filterOption: null +}; +exports.defaultProps = defaultProps; + +var makeAsyncSelect = function makeAsyncSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Async, _Component); + + function Async(props) { + var _this; + + _classCallCheck(this, Async); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Async).call(this)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastRequest", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mounted", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "optionsCache", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (newValue, actionMeta) { + var _this$props = _this.props, + cacheOptions = _this$props.cacheOptions, + onInputChange = _this$props.onInputChange; // TODO + + var inputValue = (0, _utils.handleInputChange)(newValue, actionMeta, onInputChange); + + if (!inputValue) { + delete _this.lastRequest; + + _this.setState({ + inputValue: '', + loadedInputValue: '', + loadedOptions: [], + isLoading: false, + passEmptyOptions: false + }); + + return; + } + + if (cacheOptions && _this.optionsCache[inputValue]) { + _this.setState({ + inputValue: inputValue, + loadedInputValue: inputValue, + loadedOptions: _this.optionsCache[inputValue], + isLoading: false, + passEmptyOptions: false + }); + } else { + var request = _this.lastRequest = {}; + + _this.setState({ + inputValue: inputValue, + isLoading: true, + passEmptyOptions: !_this.state.loadedInputValue + }, function () { + _this.loadOptions(inputValue, function (options) { + if (!_this.mounted) return; + + if (options) { + _this.optionsCache[inputValue] = options; + } + + if (request !== _this.lastRequest) return; + delete _this.lastRequest; + + _this.setState({ + isLoading: false, + loadedInputValue: inputValue, + loadedOptions: options || [], + passEmptyOptions: false + }); + }); + }); + } + + return inputValue; + }); + + _this.state = { + defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined, + inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '', + isLoading: props.defaultOptions === true ? true : false, + loadedOptions: [], + passEmptyOptions: false + }; + return _this; + } + + _createClass(Async, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + this.mounted = true; + var defaultOptions = this.props.defaultOptions; + var inputValue = this.state.inputValue; + + if (defaultOptions === true) { + this.loadOptions(inputValue, function (options) { + if (!_this2.mounted) return; + var isLoading = !!_this2.lastRequest; + + _this2.setState({ + defaultOptions: options || [], + isLoading: isLoading + }); + }); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + // if the cacheOptions prop changes, clear the cache + if (nextProps.cacheOptions !== this.props.cacheOptions) { + this.optionsCache = {}; + } + + if (nextProps.defaultOptions !== this.props.defaultOptions) { + this.setState({ + defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined + }); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.mounted = false; + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "loadOptions", + value: function loadOptions(inputValue, callback) { + var loadOptions = this.props.loadOptions; + if (!loadOptions) return callback(); + var loader = loadOptions(inputValue, callback); + + if (loader && typeof loader.then === 'function') { + loader.then(callback, function () { + return callback(); + }); + } + } + }, { + key: "render", + value: function render() { + var _this3 = this; + + var _this$props2 = this.props, + loadOptions = _this$props2.loadOptions, + props = _objectWithoutProperties(_this$props2, ["loadOptions"]); + + var _this$state = this.state, + defaultOptions = _this$state.defaultOptions, + inputValue = _this$state.inputValue, + isLoading = _this$state.isLoading, + loadedInputValue = _this$state.loadedInputValue, + loadedOptions = _this$state.loadedOptions, + passEmptyOptions = _this$state.passEmptyOptions; + var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || []; + return _react.default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this3.select = _ref; + }, + options: options, + isLoading: isLoading, + onInputChange: this.handleInputChange + })); + } + }]); + + return Async; + }(_react.Component), _defineProperty(_class, "defaultProps", defaultProps), _temp; +}; + +exports.makeAsyncSelect = makeAsyncSelect; +var SelectState = (0, _stateManager.default)(_Select.default); + +var _default = makeAsyncSelect(SelectState); + +exports.default = _default; \ No newline at end of file diff --git a/lib/AsyncCreatable.js b/lib/AsyncCreatable.js new file mode 100644 index 0000000000..d0e1662000 --- /dev/null +++ b/lib/AsyncCreatable.js @@ -0,0 +1,23 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _Async = require("./Async"); + +var _Creatable = require("./Creatable"); + +var _stateManager = _interopRequireDefault(require("./stateManager")); + +var _Select = _interopRequireDefault(require("./Select")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var SelectCreatable = (0, _Creatable.makeCreatableSelect)(_Select.default); +var SelectCreatableState = (0, _stateManager.default)(SelectCreatable); + +var _default = (0, _Async.makeAsyncSelect)(SelectCreatableState); + +exports.default = _default; \ No newline at end of file diff --git a/lib/Creatable.js b/lib/Creatable.js new file mode 100644 index 0000000000..d00bf509fe --- /dev/null +++ b/lib/Creatable.js @@ -0,0 +1,211 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.makeCreatableSelect = exports.defaultProps = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _Select = _interopRequireDefault(require("./Select")); + +var _utils = require("./utils"); + +var _stateManager = _interopRequireDefault(require("./stateManager")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } + +function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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; } + +var compareOption = function compareOption() { + var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; + var option = arguments.length > 1 ? arguments[1] : undefined; + var candidate = String(inputValue).toLowerCase(); + var optionValue = String(option.value).toLowerCase(); + var optionLabel = String(option.label).toLowerCase(); + return optionValue === candidate || optionLabel === candidate; +}; + +var builtins = { + formatCreateLabel: function formatCreateLabel(inputValue) { + return "Create \"".concat(inputValue, "\""); + }, + isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) { + return !(!inputValue || selectValue.some(function (option) { + return compareOption(inputValue, option); + }) || selectOptions.some(function (option) { + return compareOption(inputValue, option); + })); + }, + getNewOptionData: function getNewOptionData(inputValue, optionLabel) { + return { + label: optionLabel, + value: inputValue, + __isNew__: true + }; + } +}; + +var defaultProps = _objectSpread({ + allowCreateWhileLoading: false, + createOptionPosition: 'last' +}, builtins); + +exports.defaultProps = defaultProps; + +var makeCreatableSelect = function makeCreatableSelect(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(Creatable, _Component); + + function Creatable(props) { + var _this; + + _classCallCheck(this, Creatable); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Creatable).call(this, props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + getNewOptionData = _this$props.getNewOptionData, + inputValue = _this$props.inputValue, + isMulti = _this$props.isMulti, + onChange = _this$props.onChange, + onCreateOption = _this$props.onCreateOption, + value = _this$props.value; + + if (actionMeta.action !== 'select-option') { + return onChange(newValue, actionMeta); + } + + var newOption = _this.state.newOption; + var valueArray = Array.isArray(newValue) ? newValue : [newValue]; + + if (valueArray[valueArray.length - 1] === newOption) { + if (onCreateOption) onCreateOption(inputValue);else { + var newOptionData = getNewOptionData(inputValue, inputValue); + var newActionMeta = { + action: 'create-option' + }; + + if (isMulti) { + onChange([].concat(_toConsumableArray((0, _utils.cleanValue)(value)), [newOptionData]), newActionMeta); + } else { + onChange(newOptionData, newActionMeta); + } + } + return; + } + + onChange(newValue, actionMeta); + }); + + var options = props.options || []; + _this.state = { + newOption: undefined, + options: options + }; + return _this; + } + + _createClass(Creatable, [{ + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var allowCreateWhileLoading = nextProps.allowCreateWhileLoading, + createOptionPosition = nextProps.createOptionPosition, + formatCreateLabel = nextProps.formatCreateLabel, + getNewOptionData = nextProps.getNewOptionData, + inputValue = nextProps.inputValue, + isLoading = nextProps.isLoading, + isValidNewOption = nextProps.isValidNewOption, + value = nextProps.value; + var options = nextProps.options || []; + var newOption = this.state.newOption; + + if (isValidNewOption(inputValue, (0, _utils.cleanValue)(value), options)) { + newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue)); + } else { + newOption = undefined; + } + + this.setState({ + newOption: newOption, + options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options + }); + } + }, { + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var props = _extends({}, this.props); + + var options = this.state.options; + return _react.default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + options: options, + onChange: this.onChange + })); + } + }]); + + return Creatable; + }(_react.Component), _defineProperty(_class, "defaultProps", defaultProps), _temp; +}; // TODO: do this in package entrypoint + + +exports.makeCreatableSelect = makeCreatableSelect; +var SelectCreatable = makeCreatableSelect(_Select.default); + +var _default = (0, _stateManager.default)(SelectCreatable); + +exports.default = _default; \ No newline at end of file diff --git a/lib/Select.js b/lib/Select.js new file mode 100644 index 0000000000..9fc11f44f9 --- /dev/null +++ b/lib/Select.js @@ -0,0 +1,1891 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.defaultProps = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _memoizeOne = _interopRequireDefault(require("memoize-one")); + +var _Menu = require("./components/Menu"); + +var _reactFastCompare = _interopRequireDefault(require("./internal/react-fast-compare")); + +var _filters = require("./filters"); + +var _index = require("./internal/index"); + +var _index2 = require("./accessibility/index"); + +var _utils = require("./utils"); + +var _builtins = require("./builtins"); + +var _index3 = require("./components/index"); + +var _styles = require("./styles"); + +var _theme = require("./theme"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } + +function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +var defaultProps = { + backspaceRemovesValue: true, + blurInputOnSelect: (0, _utils.isTouchCapable)(), + captureMenuScroll: !(0, _utils.isTouchCapable)(), + closeMenuOnSelect: true, + closeMenuOnScroll: false, + components: {}, + controlShouldRenderValue: true, + escapeClearsValue: false, + filterOption: (0, _filters.createFilter)(), + formatGroupLabel: _builtins.formatGroupLabel, + getOptionLabel: _builtins.getOptionLabel, + getOptionValue: _builtins.getOptionValue, + isDisabled: false, + isLoading: false, + isMulti: false, + isRtl: false, + isSearchable: true, + isOptionDisabled: _builtins.isOptionDisabled, + loadingMessage: function loadingMessage() { + return 'Loading...'; + }, + maxMenuHeight: 300, + minMenuHeight: 140, + menuIsOpen: false, + menuPlacement: 'bottom', + menuPosition: 'absolute', + menuShouldBlockScroll: false, + menuShouldScrollIntoView: !(0, _utils.isMobileDevice)(), + noOptionsMessage: function noOptionsMessage() { + return 'No options'; + }, + openMenuOnFocus: false, + openMenuOnClick: true, + options: [], + pageSize: 5, + placeholder: 'Select...', + screenReaderStatus: function screenReaderStatus(_ref) { + var count = _ref.count; + return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available"); + }, + styles: {}, + tabIndex: '0', + tabSelectsValue: true +}; +exports.defaultProps = defaultProps; +var instanceId = 1; + +var Select = +/*#__PURE__*/ +function (_Component) { + _inherits(Select, _Component); + + // Misc. Instance Properties + // ------------------------------ + // TODO + // Refs + // ------------------------------ + // Lifecycle + // ------------------------------ + function Select(_props) { + var _this; + + _classCallCheck(this, Select); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, _props)); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + ariaLiveSelection: '', + ariaLiveContext: '', + focusedOption: null, + focusedValue: null, + inputIsHidden: false, + isFocused: false, + isComposing: false, + menuOptions: { + render: [], + focusable: [] + }, + selectValue: [] + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blockOptionHover", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearFocusValueOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "commonProps", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "components", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasGroups", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchX", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "initialTouchY", 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputIsHiddenAfterUpdate", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "instancePrefix", ''); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openAfterFocus", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollToFocusedOptionOnUpdate", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "userIsDragging", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "controlRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getControlRef", function (ref) { + _this.controlRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focusedOptionRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getFocusedOptionRef", function (ref) { + _this.focusedOptionRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "menuListRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getMenuListRef", function (ref) { + _this.menuListRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inputRef", null); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getInputRef", function (ref) { + _this.inputRef = ref; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheComponents", function (components) { + _this.components = (0, _index3.defaultComponents)({ + components: components + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focus", _this.focusInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blur", _this.blurInput); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (newValue, actionMeta) { + var _this$props = _this.props, + onChange = _this$props.onChange, + name = _this$props.name; + onChange(newValue, _objectSpread({}, actionMeta, { + name: name + })); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setValue", function (newValue) { + var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value'; + var option = arguments.length > 2 ? arguments[2] : undefined; + var _this$props2 = _this.props, + closeMenuOnSelect = _this$props2.closeMenuOnSelect, + isMulti = _this$props2.isMulti; + + _this.onInputChange('', { + action: 'set-value' + }); + + if (closeMenuOnSelect) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } // when the select value should change, we should reset focusedValue + + + _this.clearFocusValueOnUpdate = true; + + _this.onChange(newValue, { + action: action, + option: option + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "selectOption", function (newValue) { + var _this$props3 = _this.props, + blurInputOnSelect = _this$props3.blurInputOnSelect, + isMulti = _this$props3.isMulti; + var selectValue = _this.state.selectValue; + + if (isMulti) { + if (_this.isOptionSelected(newValue, selectValue)) { + var candidate = _this.getOptionValue(newValue); + + _this.setValue(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), 'deselect-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'deselect-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue([].concat(_toConsumableArray(selectValue), [newValue]), 'select-option', newValue); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + } else { + if (!_this.isOptionDisabled(newValue, selectValue)) { + _this.setValue(newValue, 'select-option'); + + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue) + } + }); + } else { + // announce that option is disabled + _this.announceAriaLiveSelection({ + event: 'select-option', + context: { + value: _this.getOptionLabel(newValue), + isDisabled: true + } + }); + } + } + + if (blurInputOnSelect) { + _this.blurInput(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeValue", function (removedValue) { + var selectValue = _this.state.selectValue; + + var candidate = _this.getOptionValue(removedValue); + + _this.onChange(selectValue.filter(function (i) { + return _this.getOptionValue(i) !== candidate; + }), { + action: 'remove-value', + removedValue: removedValue + }); + + _this.announceAriaLiveSelection({ + event: 'remove-value', + context: { + value: removedValue ? _this.getOptionLabel(removedValue) : '' + } + }); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearValue", function () { + var isMulti = _this.props.isMulti; + + _this.onChange(isMulti ? [] : null, { + action: 'clear' + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "popValue", function () { + var selectValue = _this.state.selectValue; + var lastSelectedValue = selectValue[selectValue.length - 1]; + + _this.announceAriaLiveSelection({ + event: 'pop-value', + context: { + value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : '' + } + }); + + _this.onChange(selectValue.slice(0, selectValue.length - 1), { + action: 'pop-value', + removedValue: lastSelectedValue + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionLabel", function (data) { + return _this.props.getOptionLabel(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptionValue", function (data) { + return _this.props.getOptionValue(data); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStyles", function (key, props) { + var base = _styles.defaultStyles[key](props); + + base.boxSizing = 'border-box'; + var custom = _this.props.styles[key]; + return custom ? custom(base, props) : base; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementId", function (element) { + return "".concat(_this.instancePrefix, "-").concat(element); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveDescendentId", function () { + var menuIsOpen = _this.props.menuIsOpen; + var _this$state = _this.state, + menuOptions = _this$state.menuOptions, + focusedOption = _this$state.focusedOption; + if (!focusedOption || !menuIsOpen) return undefined; + var index = menuOptions.focusable.indexOf(focusedOption); + var option = menuOptions.render[index]; + return option && option.key; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveSelection", function (_ref2) { + var event = _ref2.event, + context = _ref2.context; + + _this.setState({ + ariaLiveSelection: (0, _index2.valueEventAriaMessage)(event, context) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "announceAriaLiveContext", function (_ref3) { + var event = _ref3.event, + context = _ref3.context; + + _this.setState({ + ariaLiveContext: (0, _index2.instructionsAriaMessage)(event, _objectSpread({}, context, { + label: _this.props['aria-label'] + })) + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseDown", function (event) { + if (event.button !== 0) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + _this.focusInput(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuMouseMove", function (event) { + _this.blockOptionHover = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlMouseDown", function (event) { + var openMenuOnClick = _this.props.openMenuOnClick; + + if (!_this.state.isFocused) { + if (openMenuOnClick) { + _this.openAfterFocus = true; + } + + _this.focusInput(); + } else if (!_this.props.menuIsOpen) { + if (openMenuOnClick) { + _this.openMenu('first'); + } + } else { + //$FlowFixMe + if (event.target.tagName !== 'INPUT') { + _this.onMenuClose(); + } + } //$FlowFixMe + + + if (event.target.tagName !== 'INPUT') { + event.preventDefault(); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + if (_this.props.isDisabled) return; + var _this$props4 = _this.props, + isMulti = _this$props4.isMulti, + menuIsOpen = _this$props4.menuIsOpen; + + _this.focusInput(); + + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = !isMulti; + + _this.onMenuClose(); + } else { + _this.openMenu('first'); + } + + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorMouseDown", function (event) { + // ignore mouse events that weren't triggered by the primary button + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + + _this.clearValue(); + + event.stopPropagation(); + _this.openAfterFocus = false; + setTimeout(function () { + return _this.focusInput(); + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onScroll", function (event) { + if (typeof _this.props.closeMenuOnScroll === 'boolean') { + if (event.target instanceof HTMLElement && (0, _utils.isDocumentElement)(event.target)) { + _this.props.onMenuClose(); + } + } else if (typeof _this.props.closeMenuOnScroll === 'function') { + if (_this.props.closeMenuOnScroll(event)) { + _this.props.onMenuClose(); + } + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionStart", function () { + _this.setState({ + isComposing: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCompositionEnd", function () { + _this.setState({ + isComposing: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (_ref4) { + var touches = _ref4.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + _this.initialTouchX = touch.clientX; + _this.initialTouchY = touch.clientY; + _this.userIsDragging = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (_ref5) { + var touches = _ref5.touches; + var touch = touches.item(0); + + if (!touch) { + return; + } + + var deltaX = Math.abs(touch.clientX - _this.initialTouchX); + var deltaY = Math.abs(touch.clientY - _this.initialTouchY); + var moveThreshold = 5; + _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchEnd", function (event) { + if (_this.userIsDragging) return; // close the menu if the user taps outside + // we're checking on event.target here instead of event.currentTarget, because we want to assert information + // on events on child elements, not the document (which we've attached this handler to). + + if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) { + _this.blurInput(); + } // reset move vars + + + _this.initialTouchX = 0; + _this.initialTouchY = 0; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onControlMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClearIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onClearIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDropdownIndicatorTouchEnd", function (event) { + if (_this.userIsDragging) return; + + _this.onDropdownIndicatorMouseDown(event); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleInputChange", function (event) { + var inputValue = event.currentTarget.value; + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange(inputValue, { + action: 'input-change' + }); + + _this.onMenuOpen(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputFocus", function (event) { + var _this$props5 = _this.props, + isSearchable = _this$props5.isSearchable, + isMulti = _this$props5.isMulti; + + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + + _this.inputIsHiddenAfterUpdate = false; + + _this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + + _this.setState({ + isFocused: true + }); + + if (_this.openAfterFocus || _this.props.openMenuOnFocus) { + _this.openMenu('first'); + } + + _this.openAfterFocus = false; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputBlur", function (event) { + if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) { + _this.inputRef.focus(); + + return; + } + + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + + _this.onInputChange('', { + action: 'input-blur' + }); + + _this.onMenuClose(); + + _this.setState({ + focusedValue: null, + isFocused: false + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOptionHover", function (focusedOption) { + if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) { + return; + } + + _this.setState({ + focusedOption: focusedOption + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldHideSelectedOptions", function () { + var _this$props6 = _this.props, + hideSelectedOptions = _this$props6.hideSelectedOptions, + isMulti = _this$props6.isMulti; + if (hideSelectedOptions === undefined) return isMulti; + return hideSelectedOptions; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) { + var _this$props7 = _this.props, + isMulti = _this$props7.isMulti, + backspaceRemovesValue = _this$props7.backspaceRemovesValue, + escapeClearsValue = _this$props7.escapeClearsValue, + inputValue = _this$props7.inputValue, + isClearable = _this$props7.isClearable, + isDisabled = _this$props7.isDisabled, + menuIsOpen = _this$props7.menuIsOpen, + onKeyDown = _this$props7.onKeyDown, + tabSelectsValue = _this$props7.tabSelectsValue, + openMenuOnFocus = _this$props7.openMenuOnFocus; + var _this$state2 = _this.state, + isComposing = _this$state2.isComposing, + focusedOption = _this$state2.focusedOption, + focusedValue = _this$state2.focusedValue, + selectValue = _this$state2.selectValue; + if (isDisabled) return; + + if (typeof onKeyDown === 'function') { + onKeyDown(event); + + if (event.defaultPrevented) { + return; + } + } // Block option hover events when the user has just pressed a key + + + _this.blockOptionHover = true; + + switch (event.key) { + case 'ArrowLeft': + if (!isMulti || inputValue) return; + + _this.focusValue('previous'); + + break; + + case 'ArrowRight': + if (!isMulti || inputValue) return; + + _this.focusValue('next'); + + break; + + case 'Delete': + case 'Backspace': + if (inputValue) return; + + if (focusedValue) { + _this.removeValue(focusedValue); + } else { + if (!backspaceRemovesValue) return; + + if (isMulti) { + _this.popValue(); + } else if (isClearable) { + _this.clearValue(); + } + } + + break; + + case 'Tab': + if (isComposing) return; + + if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused + // option is already selected; it breaks the flow of navigation + openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) { + return; + } + + _this.selectOption(focusedOption); + + break; + + case 'Enter': + if (event.keyCode === 229) { + // ignore the keydown event from an Input Method Editor(IME) + // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode + break; + } + + if (menuIsOpen) { + if (!focusedOption) return; + if (isComposing) return; + + _this.selectOption(focusedOption); + + break; + } + + return; + + case 'Escape': + if (menuIsOpen) { + _this.inputIsHiddenAfterUpdate = false; + + _this.onInputChange('', { + action: 'menu-close' + }); + + _this.onMenuClose(); + } else if (isClearable && escapeClearsValue) { + _this.clearValue(); + } + + break; + + case ' ': + // space + if (inputValue) { + return; + } + + if (!menuIsOpen) { + _this.openMenu('first'); + + break; + } + + if (!focusedOption) return; + + _this.selectOption(focusedOption); + + break; + + case 'ArrowUp': + if (menuIsOpen) { + _this.focusOption('up'); + } else { + _this.openMenu('last'); + } + + break; + + case 'ArrowDown': + if (menuIsOpen) { + _this.focusOption('down'); + } else { + _this.openMenu('first'); + } + + break; + + case 'PageUp': + if (!menuIsOpen) return; + + _this.focusOption('pageup'); + + break; + + case 'PageDown': + if (!menuIsOpen) return; + + _this.focusOption('pagedown'); + + break; + + case 'Home': + if (!menuIsOpen) return; + + _this.focusOption('first'); + + break; + + case 'End': + if (!menuIsOpen) return; + + _this.focusOption('last'); + + break; + + default: + return; + } + + event.preventDefault(); + }); + + var value = _props.value; + _this.cacheComponents = (0, _memoizeOne.default)(_this.cacheComponents, _reactFastCompare.default).bind(_assertThisInitialized(_assertThisInitialized(_this))); + + _this.cacheComponents(_props.components); + + _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId); + + var _selectValue = (0, _utils.cleanValue)(value); + + var _menuOptions = _this.buildMenuOptions(_props, _selectValue); + + _this.state.menuOptions = _menuOptions; + _this.state.selectValue = _selectValue; + return _this; + } + + _createClass(Select, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListeningComposition(); + this.startListeningToTouch(); + + if (this.props.closeMenuOnScroll && document && document.addEventListener) { + // Listen to all scroll events, and filter them out inside of 'onScroll' + document.addEventListener('scroll', this.onScroll, true); + } + + if (this.props.autoFocus) { + this.focusInput(); + } + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + var _this$props8 = this.props, + options = _this$props8.options, + value = _this$props8.value, + inputValue = _this$props8.inputValue; // re-cache custom components + + this.cacheComponents(nextProps.components); // rebuild the menu options + + if (nextProps.value !== value || nextProps.options !== options || nextProps.inputValue !== inputValue) { + var selectValue = (0, _utils.cleanValue)(nextProps.value); + var menuOptions = this.buildMenuOptions(nextProps, selectValue); + var focusedValue = this.getNextFocusedValue(selectValue); + var focusedOption = this.getNextFocusedOption(menuOptions.focusable); + this.setState({ + menuOptions: menuOptions, + selectValue: selectValue, + focusedOption: focusedOption, + focusedValue: focusedValue + }); + } // some updates should toggle the state of the input visibility + + + if (this.inputIsHiddenAfterUpdate != null) { + this.setState({ + inputIsHidden: this.inputIsHiddenAfterUpdate + }); + delete this.inputIsHiddenAfterUpdate; + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + var _this$props9 = this.props, + isDisabled = _this$props9.isDisabled, + menuIsOpen = _this$props9.menuIsOpen; + var isFocused = this.state.isFocused; + + if ( // ensure focus is restored correctly when the control becomes enabled + isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens + isFocused && menuIsOpen && !prevProps.menuIsOpen) { + this.focusInput(); + } // scroll the focused option into view if necessary + + + if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) { + (0, _utils.scrollIntoView)(this.menuListRef, this.focusedOptionRef); + } + + this.scrollToFocusedOptionOnUpdate = false; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListeningComposition(); + this.stopListeningToTouch(); + document.removeEventListener('scroll', this.onScroll, true); + } + }, { + key: "onMenuOpen", + // ============================== + // Consumer Handlers + // ============================== + value: function onMenuOpen() { + this.props.onMenuOpen(); + } + }, { + key: "onMenuClose", + value: function onMenuClose() { + var _this$props10 = this.props, + isSearchable = _this$props10.isSearchable, + isMulti = _this$props10.isMulti; + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + this.onInputChange('', { + action: 'menu-close' + }); + this.props.onMenuClose(); + } + }, { + key: "onInputChange", + value: function onInputChange(newValue, actionMeta) { + this.props.onInputChange(newValue, actionMeta); + } // ============================== + // Methods + // ============================== + + }, { + key: "focusInput", + value: function focusInput() { + if (!this.inputRef) return; + this.inputRef.focus(); + } + }, { + key: "blurInput", + value: function blurInput() { + if (!this.inputRef) return; + this.inputRef.blur(); + } // aliased for consumers + + }, { + key: "openMenu", + value: function openMenu(focusOption) { + var _this$state3 = this.state, + menuOptions = _this$state3.menuOptions, + selectValue = _this$state3.selectValue, + isFocused = _this$state3.isFocused; + var isMulti = this.props.isMulti; + var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1; + + if (!isMulti) { + var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]); + + if (selectedIndex > -1) { + openAtIndex = selectedIndex; + } + } // only scroll if the menu isn't already open + + + this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef); + this.inputIsHiddenAfterUpdate = false; + this.onMenuOpen(); + this.setState({ + focusedValue: null, + focusedOption: menuOptions.focusable[openAtIndex] + }); + this.announceAriaLiveContext({ + event: 'menu' + }); + } + }, { + key: "focusValue", + value: function focusValue(direction) { + var _this$props11 = this.props, + isMulti = _this$props11.isMulti, + isSearchable = _this$props11.isSearchable; + var _this$state4 = this.state, + selectValue = _this$state4.selectValue, + focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing + + if (!isMulti) return; + this.setState({ + focusedOption: null + }); + var focusedIndex = selectValue.indexOf(focusedValue); + + if (!focusedValue) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'value' + }); + } + + var lastIndex = selectValue.length - 1; + var nextFocus = -1; + if (!selectValue.length) return; + + switch (direction) { + case 'previous': + if (focusedIndex === 0) { + // don't cycle from the start to the end + nextFocus = 0; + } else if (focusedIndex === -1) { + // if nothing is focused, focus the last value first + nextFocus = lastIndex; + } else { + nextFocus = focusedIndex - 1; + } + + break; + + case 'next': + if (focusedIndex > -1 && focusedIndex < lastIndex) { + nextFocus = focusedIndex + 1; + } + + break; + } + + if (nextFocus === -1) { + this.announceAriaLiveContext({ + event: 'input', + context: { + isSearchable: isSearchable, + isMulti: isMulti + } + }); + } + + this.setState({ + inputIsHidden: nextFocus === -1 ? false : true, + focusedValue: selectValue[nextFocus] + }); + } + }, { + key: "focusOption", + value: function focusOption() { + var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first'; + var pageSize = this.props.pageSize; + var _this$state5 = this.state, + focusedOption = _this$state5.focusedOption, + menuOptions = _this$state5.menuOptions; + var options = menuOptions.focusable; + if (!options.length) return; + var nextFocus = 0; // handles 'first' + + var focusedIndex = options.indexOf(focusedOption); + + if (!focusedOption) { + focusedIndex = -1; + this.announceAriaLiveContext({ + event: 'menu' + }); + } + + if (direction === 'up') { + nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1; + } else if (direction === 'down') { + nextFocus = (focusedIndex + 1) % options.length; + } else if (direction === 'pageup') { + nextFocus = focusedIndex - pageSize; + if (nextFocus < 0) nextFocus = 0; + } else if (direction === 'pagedown') { + nextFocus = focusedIndex + pageSize; + if (nextFocus > options.length - 1) nextFocus = options.length - 1; + } else if (direction === 'last') { + nextFocus = options.length - 1; + } + + this.scrollToFocusedOptionOnUpdate = true; + this.setState({ + focusedOption: options[nextFocus], + focusedValue: null + }); + this.announceAriaLiveContext({ + event: 'menu', + context: { + isDisabled: (0, _builtins.isOptionDisabled)(options[nextFocus]) + } + }); + } + }, { + key: "getTheme", + // ============================== + // Getters + // ============================== + value: function getTheme() { + // Use the default theme if there are no customizations. + if (!this.props.theme) { + return _theme.defaultTheme; + } // If the theme prop is a function, assume the function + // knows how to merge the passed-in default theme with + // its own modifications. + + + if (typeof this.props.theme === 'function') { + return this.props.theme(_theme.defaultTheme); + } // Otherwise, if a plain theme object was passed in, + // overlay it with the default theme. + + + return _objectSpread({}, _theme.defaultTheme, this.props.theme); + } + }, { + key: "getCommonProps", + value: function getCommonProps() { + var clearValue = this.clearValue, + getStyles = this.getStyles, + setValue = this.setValue, + selectOption = this.selectOption, + props = this.props; + var classNamePrefix = props.classNamePrefix, + isMulti = props.isMulti, + isRtl = props.isRtl, + options = props.options; + var selectValue = this.state.selectValue; + var hasValue = this.hasValue(); + + var getValue = function getValue() { + return selectValue; + }; + + var cx = _utils.classNames.bind(null, classNamePrefix); + + return { + cx: cx, + clearValue: clearValue, + getStyles: getStyles, + getValue: getValue, + hasValue: hasValue, + isMulti: isMulti, + isRtl: isRtl, + options: options, + selectOption: selectOption, + setValue: setValue, + selectProps: props, + theme: this.getTheme() + }; + } + }, { + key: "getNextFocusedValue", + value: function getNextFocusedValue(nextSelectValue) { + if (this.clearFocusValueOnUpdate) { + this.clearFocusValueOnUpdate = false; + return null; + } + + var _this$state6 = this.state, + focusedValue = _this$state6.focusedValue, + lastSelectValue = _this$state6.selectValue; + var lastFocusedIndex = lastSelectValue.indexOf(focusedValue); + + if (lastFocusedIndex > -1) { + var nextFocusedIndex = nextSelectValue.indexOf(focusedValue); + + if (nextFocusedIndex > -1) { + // the focused value is still in the selectValue, return it + return focusedValue; + } else if (lastFocusedIndex < nextSelectValue.length) { + // the focusedValue is not present in the next selectValue array by + // reference, so return the new value at the same index + return nextSelectValue[lastFocusedIndex]; + } + } + + return null; + } + }, { + key: "getNextFocusedOption", + value: function getNextFocusedOption(options) { + var lastFocusedOption = this.state.focusedOption; + return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0]; + } + }, { + key: "hasValue", + value: function hasValue() { + var selectValue = this.state.selectValue; + return selectValue.length > 0; + } + }, { + key: "hasOptions", + value: function hasOptions() { + return !!this.state.menuOptions.render.length; + } + }, { + key: "countOptions", + value: function countOptions() { + return this.state.menuOptions.focusable.length; + } + }, { + key: "isClearable", + value: function isClearable() { + var _this$props12 = this.props, + isClearable = _this$props12.isClearable, + isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable + // multi select, by default, IS clearable + + if (isClearable === undefined) return isMulti; + return isClearable; + } + }, { + key: "isOptionDisabled", + value: function isOptionDisabled(option, selectValue) { + return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false; + } + }, { + key: "isOptionSelected", + value: function isOptionSelected(option, selectValue) { + var _this2 = this; + + if (selectValue.indexOf(option) > -1) return true; + + if (typeof this.props.isOptionSelected === 'function') { + return this.props.isOptionSelected(option, selectValue); + } + + var candidate = this.getOptionValue(option); + return selectValue.some(function (i) { + return _this2.getOptionValue(i) === candidate; + }); + } + }, { + key: "filterOption", + value: function filterOption(option, inputValue) { + return this.props.filterOption ? this.props.filterOption(option, inputValue) : true; + } + }, { + key: "formatOptionLabel", + value: function formatOptionLabel(data, context) { + if (typeof this.props.formatOptionLabel === 'function') { + var inputValue = this.props.inputValue; + var selectValue = this.state.selectValue; + return this.props.formatOptionLabel(data, { + context: context, + inputValue: inputValue, + selectValue: selectValue + }); + } else { + return this.getOptionLabel(data); + } + } + }, { + key: "formatGroupLabel", + value: function formatGroupLabel(data) { + return this.props.formatGroupLabel(data); + } // ============================== + // Mouse Handlers + // ============================== + + }, { + key: "startListeningComposition", + // ============================== + // Composition Handlers + // ============================== + value: function startListeningComposition() { + if (document && document.addEventListener) { + document.addEventListener('compositionstart', this.onCompositionStart, false); + document.addEventListener('compositionend', this.onCompositionEnd, false); + } + } + }, { + key: "stopListeningComposition", + value: function stopListeningComposition() { + if (document && document.removeEventListener) { + document.removeEventListener('compositionstart', this.onCompositionStart); + document.removeEventListener('compositionend', this.onCompositionEnd); + } + } + }, { + key: "startListeningToTouch", + // ============================== + // Touch Handlers + // ============================== + value: function startListeningToTouch() { + if (document && document.addEventListener) { + document.addEventListener('touchstart', this.onTouchStart, false); + document.addEventListener('touchmove', this.onTouchMove, false); + document.addEventListener('touchend', this.onTouchEnd, false); + } + } + }, { + key: "stopListeningToTouch", + value: function stopListeningToTouch() { + if (document && document.removeEventListener) { + document.removeEventListener('touchstart', this.onTouchStart); + document.removeEventListener('touchmove', this.onTouchMove); + document.removeEventListener('touchend', this.onTouchEnd); + } + } + }, { + key: "buildMenuOptions", + // ============================== + // Menu Options + // ============================== + value: function buildMenuOptions(props, selectValue) { + var _this3 = this; + + var _props$inputValue = props.inputValue, + inputValue = _props$inputValue === void 0 ? '' : _props$inputValue, + options = props.options; + + var toOption = function toOption(option, id) { + var isDisabled = _this3.isOptionDisabled(option, selectValue); + + var isSelected = _this3.isOptionSelected(option, selectValue); + + var label = _this3.getOptionLabel(option); + + var value = _this3.getOptionValue(option); + + if (_this3.shouldHideSelectedOptions() && isSelected || !_this3.filterOption({ + label: label, + value: value, + data: option + }, inputValue)) { + return; + } + + var onHover = isDisabled ? undefined : function () { + return _this3.onOptionHover(option); + }; + var onSelect = isDisabled ? undefined : function () { + return _this3.selectOption(option); + }; + var optionId = "".concat(_this3.getElementId('option'), "-").concat(id); + return { + innerProps: { + id: optionId, + onClick: onSelect, + onMouseMove: onHover, + onMouseOver: onHover, + tabIndex: -1 + }, + data: option, + isDisabled: isDisabled, + isSelected: isSelected, + key: optionId, + label: label, + type: 'option', + value: value + }; + }; + + return options.reduce(function (acc, item, itemIndex) { + if (item.options) { + // TODO needs a tidier implementation + if (!_this3.hasGroups) _this3.hasGroups = true; + var items = item.options; + var children = items.map(function (child, i) { + var option = toOption(child, "".concat(itemIndex, "-").concat(i)); + if (option) acc.focusable.push(child); + return option; + }).filter(Boolean); + + if (children.length) { + var groupId = "".concat(_this3.getElementId('group'), "-").concat(itemIndex); + acc.render.push({ + type: 'group', + key: groupId, + data: item, + options: children + }); + } + } else { + var option = toOption(item, "".concat(itemIndex)); + + if (option) { + acc.render.push(option); + acc.focusable.push(item); + } + } + + return acc; + }, { + render: [], + focusable: [] + }); + } // ============================== + // Renderers + // ============================== + + }, { + key: "constructAriaLiveMessage", + value: function constructAriaLiveMessage() { + var _this$state7 = this.state, + ariaLiveContext = _this$state7.ariaLiveContext, + selectValue = _this$state7.selectValue, + focusedValue = _this$state7.focusedValue, + focusedOption = _this$state7.focusedOption; + var _this$props13 = this.props, + options = _this$props13.options, + menuIsOpen = _this$props13.menuIsOpen, + inputValue = _this$props13.inputValue, + screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select. + + var focusedValueMsg = focusedValue ? (0, _index2.valueFocusAriaMessage)({ + focusedValue: focusedValue, + getOptionLabel: this.getOptionLabel, + selectValue: selectValue + }) : ''; // An aria live message representing the currently focused option in the select. + + var focusedOptionMsg = focusedOption && menuIsOpen ? (0, _index2.optionFocusAriaMessage)({ + focusedOption: focusedOption, + getOptionLabel: this.getOptionLabel, + options: options + }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue. + + var resultsMsg = (0, _index2.resultsAriaMessage)({ + inputValue: inputValue, + screenReaderMessage: screenReaderStatus({ + count: this.countOptions() + }) + }); + return "".concat(focusedValueMsg, " ").concat(focusedOptionMsg, " ").concat(resultsMsg, " ").concat(ariaLiveContext); + } + }, { + key: "renderInput", + value: function renderInput() { + var _this$props14 = this.props, + isDisabled = _this$props14.isDisabled, + isSearchable = _this$props14.isSearchable, + inputId = _this$props14.inputId, + inputValue = _this$props14.inputValue, + tabIndex = _this$props14.tabIndex; + var Input = this.components.Input; + var inputIsHidden = this.state.inputIsHidden; + var id = inputId || this.getElementId('input'); + + if (!isSearchable) { + // use a dummy input to maintain focus/blur functionality + return _react.default.createElement(_index.DummyInput, { + id: id, + innerRef: this.getInputRef, + onBlur: this.onInputBlur, + onChange: _utils.noop, + onFocus: this.onInputFocus, + readOnly: true, + disabled: isDisabled, + tabIndex: tabIndex, + value: "" + }); + } // aria attributes makes the JSX "noisy", separated for clarity + + + var ariaAttributes = { + 'aria-autocomplete': 'list', + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'] + }; + var _this$commonProps = this.commonProps, + cx = _this$commonProps.cx, + theme = _this$commonProps.theme, + selectProps = _this$commonProps.selectProps; + return _react.default.createElement(Input, _extends({ + autoCapitalize: "none", + autoComplete: "off", + autoCorrect: "off", + cx: cx, + getStyles: this.getStyles, + id: id, + innerRef: this.getInputRef, + isDisabled: isDisabled, + isHidden: inputIsHidden, + onBlur: this.onInputBlur, + onChange: this.handleInputChange, + onFocus: this.onInputFocus, + selectProps: selectProps, + spellCheck: "false", + tabIndex: tabIndex, + theme: theme, + type: "text", + value: inputValue + }, ariaAttributes)); + } + }, { + key: "renderPlaceholderOrValue", + value: function renderPlaceholderOrValue() { + var _this4 = this; + + var _this$components = this.components, + MultiValue = _this$components.MultiValue, + MultiValueContainer = _this$components.MultiValueContainer, + MultiValueLabel = _this$components.MultiValueLabel, + MultiValueRemove = _this$components.MultiValueRemove, + SingleValue = _this$components.SingleValue, + Placeholder = _this$components.Placeholder; + var commonProps = this.commonProps; + var _this$props15 = this.props, + controlShouldRenderValue = _this$props15.controlShouldRenderValue, + isDisabled = _this$props15.isDisabled, + isMulti = _this$props15.isMulti, + inputValue = _this$props15.inputValue, + placeholder = _this$props15.placeholder; + var _this$state8 = this.state, + selectValue = _this$state8.selectValue, + focusedValue = _this$state8.focusedValue, + isFocused = _this$state8.isFocused; + + if (!this.hasValue() || !controlShouldRenderValue) { + return inputValue ? null : _react.default.createElement(Placeholder, _extends({}, commonProps, { + key: "placeholder", + isDisabled: isDisabled, + isFocused: isFocused + }), placeholder); + } + + if (isMulti) { + var selectValues = selectValue.map(function (opt) { + var isOptionFocused = opt === focusedValue; + return _react.default.createElement(MultiValue, _extends({}, commonProps, { + components: { + Container: MultiValueContainer, + Label: MultiValueLabel, + Remove: MultiValueRemove + }, + isFocused: isOptionFocused, + isDisabled: isDisabled, + key: _this4.getOptionValue(opt), + removeProps: { + onClick: function onClick() { + return _this4.removeValue(opt); + }, + onTouchEnd: function onTouchEnd() { + return _this4.removeValue(opt); + }, + onMouseDown: function onMouseDown(e) { + e.preventDefault(); + e.stopPropagation(); + } + }, + data: opt + }), _this4.formatOptionLabel(opt, 'value')); + }); + return selectValues; + } + + if (inputValue) { + return null; + } + + var singleValue = selectValue[0]; + return _react.default.createElement(SingleValue, _extends({}, commonProps, { + data: singleValue, + isDisabled: isDisabled + }), this.formatOptionLabel(singleValue, 'value')); + } + }, { + key: "renderClearIndicator", + value: function renderClearIndicator() { + var ClearIndicator = this.components.ClearIndicator; + var commonProps = this.commonProps; + var _this$props16 = this.props, + isDisabled = _this$props16.isDisabled, + isLoading = _this$props16.isLoading; + var isFocused = this.state.isFocused; + + if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) { + return null; + } + + var innerProps = { + onMouseDown: this.onClearIndicatorMouseDown, + onTouchEnd: this.onClearIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return _react.default.createElement(ClearIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isFocused: isFocused + })); + } + }, { + key: "renderLoadingIndicator", + value: function renderLoadingIndicator() { + var LoadingIndicator = this.components.LoadingIndicator; + var commonProps = this.commonProps; + var _this$props17 = this.props, + isDisabled = _this$props17.isDisabled, + isLoading = _this$props17.isLoading; + var isFocused = this.state.isFocused; + if (!LoadingIndicator || !isLoading) return null; + var innerProps = { + 'aria-hidden': 'true' + }; + return _react.default.createElement(LoadingIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderIndicatorSeparator", + value: function renderIndicatorSeparator() { + var _this$components2 = this.components, + DropdownIndicator = _this$components2.DropdownIndicator, + IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator + + if (!DropdownIndicator || !IndicatorSeparator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + return _react.default.createElement(IndicatorSeparator, _extends({}, commonProps, { + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderDropdownIndicator", + value: function renderDropdownIndicator() { + var DropdownIndicator = this.components.DropdownIndicator; + if (!DropdownIndicator) return null; + var commonProps = this.commonProps; + var isDisabled = this.props.isDisabled; + var isFocused = this.state.isFocused; + var innerProps = { + onMouseDown: this.onDropdownIndicatorMouseDown, + onTouchEnd: this.onDropdownIndicatorTouchEnd, + 'aria-hidden': 'true' + }; + return _react.default.createElement(DropdownIndicator, _extends({}, commonProps, { + innerProps: innerProps, + isDisabled: isDisabled, + isFocused: isFocused + })); + } + }, { + key: "renderMenu", + value: function renderMenu() { + var _this5 = this; + + var _this$components3 = this.components, + Group = _this$components3.Group, + GroupHeading = _this$components3.GroupHeading, + Menu = _this$components3.Menu, + MenuList = _this$components3.MenuList, + MenuPortal = _this$components3.MenuPortal, + LoadingMessage = _this$components3.LoadingMessage, + NoOptionsMessage = _this$components3.NoOptionsMessage, + Option = _this$components3.Option; + var commonProps = this.commonProps; + var _this$state9 = this.state, + focusedOption = _this$state9.focusedOption, + menuOptions = _this$state9.menuOptions; + var _this$props18 = this.props, + captureMenuScroll = _this$props18.captureMenuScroll, + inputValue = _this$props18.inputValue, + isLoading = _this$props18.isLoading, + loadingMessage = _this$props18.loadingMessage, + minMenuHeight = _this$props18.minMenuHeight, + maxMenuHeight = _this$props18.maxMenuHeight, + menuIsOpen = _this$props18.menuIsOpen, + menuPlacement = _this$props18.menuPlacement, + menuPosition = _this$props18.menuPosition, + menuPortalTarget = _this$props18.menuPortalTarget, + menuShouldBlockScroll = _this$props18.menuShouldBlockScroll, + menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView, + noOptionsMessage = _this$props18.noOptionsMessage, + onMenuScrollToTop = _this$props18.onMenuScrollToTop, + onMenuScrollToBottom = _this$props18.onMenuScrollToBottom; + if (!menuIsOpen) return null; // TODO: Internal Option Type here + + var render = function render(props) { + // for performance, the menu options in state aren't changed when the + // focused option changes so we calculate additional props based on that + var isFocused = focusedOption === props.data; + props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined; + return _react.default.createElement(Option, _extends({}, commonProps, props, { + isFocused: isFocused + }), _this5.formatOptionLabel(props.data, 'menu')); + }; + + var menuUI; + + if (this.hasOptions()) { + menuUI = menuOptions.render.map(function (item) { + if (item.type === 'group') { + var type = item.type, + group = _objectWithoutProperties(item, ["type"]); + + var headingId = "".concat(item.key, "-heading"); + return _react.default.createElement(Group, _extends({}, commonProps, group, { + Heading: GroupHeading, + headingProps: { + id: headingId + }, + label: _this5.formatGroupLabel(item.data) + }), item.options.map(function (option) { + return render(option); + })); + } else if (item.type === 'option') { + return render(item); + } + }); + } else if (isLoading) { + var message = loadingMessage({ + inputValue: inputValue + }); + if (message === null) return null; + menuUI = _react.default.createElement(LoadingMessage, commonProps, message); + } else { + var _message = noOptionsMessage({ + inputValue: inputValue + }); + + if (_message === null) return null; + menuUI = _react.default.createElement(NoOptionsMessage, commonProps, _message); + } + + var menuPlacementProps = { + minMenuHeight: minMenuHeight, + maxMenuHeight: maxMenuHeight, + menuPlacement: menuPlacement, + menuPosition: menuPosition, + menuShouldScrollIntoView: menuShouldScrollIntoView + }; + + var menuElement = _react.default.createElement(_Menu.MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref6) { + var ref = _ref6.ref, + _ref6$placerProps = _ref6.placerProps, + placement = _ref6$placerProps.placement, + maxHeight = _ref6$placerProps.maxHeight; + return _react.default.createElement(Menu, _extends({}, commonProps, menuPlacementProps, { + innerRef: ref, + innerProps: { + onMouseDown: _this5.onMenuMouseDown, + onMouseMove: _this5.onMenuMouseMove + }, + isLoading: isLoading, + placement: placement + }), _react.default.createElement(_index.ScrollCaptor, { + isEnabled: captureMenuScroll, + onTopArrive: onMenuScrollToTop, + onBottomArrive: onMenuScrollToBottom + }, _react.default.createElement(_index.ScrollBlock, { + isEnabled: menuShouldBlockScroll + }, _react.default.createElement(MenuList, _extends({}, commonProps, { + innerRef: _this5.getMenuListRef, + isLoading: isLoading, + maxHeight: maxHeight + }), menuUI)))); + }); // positioning behaviour is almost identical for portalled and fixed, + // so we use the same component. the actual portalling logic is forked + // within the component based on `menuPosition` + + + return menuPortalTarget || menuPosition === 'fixed' ? _react.default.createElement(MenuPortal, _extends({}, commonProps, { + appendTo: menuPortalTarget, + controlElement: this.controlRef, + menuPlacement: menuPlacement, + menuPosition: menuPosition + }), menuElement) : menuElement; + } + }, { + key: "renderFormField", + value: function renderFormField() { + var _this6 = this; + + var _this$props19 = this.props, + delimiter = _this$props19.delimiter, + isDisabled = _this$props19.isDisabled, + isMulti = _this$props19.isMulti, + name = _this$props19.name; + var selectValue = this.state.selectValue; + if (!name || isDisabled) return; + + if (isMulti) { + if (delimiter) { + var value = selectValue.map(function (opt) { + return _this6.getOptionValue(opt); + }).join(delimiter); + return _react.default.createElement("input", { + name: name, + type: "hidden", + value: value + }); + } else { + var input = selectValue.length > 0 ? selectValue.map(function (opt, i) { + return _react.default.createElement("input", { + key: "i-".concat(i), + name: name, + type: "hidden", + value: _this6.getOptionValue(opt) + }); + }) : _react.default.createElement("input", { + name: name, + type: "hidden" + }); + return _react.default.createElement("div", null, input); + } + } else { + var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : ''; + + return _react.default.createElement("input", { + name: name, + type: "hidden", + value: _value + }); + } + } + }, { + key: "renderLiveRegion", + value: function renderLiveRegion() { + if (!this.state.isFocused) return null; + return _react.default.createElement(_index.A11yText, { + "aria-live": "assertive" + }, _react.default.createElement("p", { + id: "aria-selection-event" + }, "\xA0", this.state.ariaLiveSelection), _react.default.createElement("p", { + id: "aria-context" + }, "\xA0", this.constructAriaLiveMessage())); + } + }, { + key: "render", + value: function render() { + var _this$components4 = this.components, + Control = _this$components4.Control, + IndicatorsContainer = _this$components4.IndicatorsContainer, + SelectContainer = _this$components4.SelectContainer, + ValueContainer = _this$components4.ValueContainer; + var _this$props20 = this.props, + className = _this$props20.className, + id = _this$props20.id, + isDisabled = _this$props20.isDisabled, + menuIsOpen = _this$props20.menuIsOpen; + var isFocused = this.state.isFocused; + var commonProps = this.commonProps = this.getCommonProps(); + return _react.default.createElement(SelectContainer, _extends({}, commonProps, { + className: className, + innerProps: { + id: id, + onKeyDown: this.onKeyDown + }, + isDisabled: isDisabled, + isFocused: isFocused + }), this.renderLiveRegion(), _react.default.createElement(Control, _extends({}, commonProps, { + innerRef: this.getControlRef, + innerProps: { + onMouseDown: this.onControlMouseDown, + onTouchEnd: this.onControlTouchEnd + }, + isDisabled: isDisabled, + isFocused: isFocused, + menuIsOpen: menuIsOpen + }), _react.default.createElement(ValueContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderPlaceholderOrValue(), this.renderInput()), _react.default.createElement(IndicatorsContainer, _extends({}, commonProps, { + isDisabled: isDisabled + }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField()); + } + }]); + + return Select; +}(_react.Component); + +exports.default = Select; + +_defineProperty(Select, "defaultProps", defaultProps); \ No newline at end of file diff --git a/lib/accessibility/index.js b/lib/accessibility/index.js new file mode 100644 index 0000000000..daf4131530 --- /dev/null +++ b/lib/accessibility/index.js @@ -0,0 +1,71 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.resultsAriaMessage = exports.optionFocusAriaMessage = exports.valueFocusAriaMessage = exports.valueEventAriaMessage = exports.instructionsAriaMessage = void 0; + +var instructionsAriaMessage = function instructionsAriaMessage(event) { + var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var isSearchable = context.isSearchable, + isMulti = context.isMulti, + label = context.label, + isDisabled = context.isDisabled; + + switch (event) { + case 'menu': + return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu, press Tab to select the option and exit the menu."); + + case 'input': + return "".concat(label ? label : 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : ''); + + case 'value': + return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'; + } +}; + +exports.instructionsAriaMessage = instructionsAriaMessage; + +var valueEventAriaMessage = function valueEventAriaMessage(event, context) { + var value = context.value, + isDisabled = context.isDisabled; + if (!value) return; + + switch (event) { + case 'deselect-option': + case 'pop-value': + case 'remove-value': + return "option ".concat(value, ", deselected."); + + case 'select-option': + return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected."); + } +}; + +exports.valueEventAriaMessage = valueEventAriaMessage; + +var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) { + var focusedValue = _ref.focusedValue, + getOptionLabel = _ref.getOptionLabel, + selectValue = _ref.selectValue; + return "value ".concat(getOptionLabel(focusedValue), " focused, ").concat(selectValue.indexOf(focusedValue) + 1, " of ").concat(selectValue.length, "."); +}; + +exports.valueFocusAriaMessage = valueFocusAriaMessage; + +var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) { + var focusedOption = _ref2.focusedOption, + getOptionLabel = _ref2.getOptionLabel, + options = _ref2.options; + return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, "."); +}; + +exports.optionFocusAriaMessage = optionFocusAriaMessage; + +var resultsAriaMessage = function resultsAriaMessage(_ref3) { + var inputValue = _ref3.inputValue, + screenReaderMessage = _ref3.screenReaderMessage; + return "".concat(screenReaderMessage).concat(inputValue ? ' for search term ' + inputValue : '', "."); +}; + +exports.resultsAriaMessage = resultsAriaMessage; \ No newline at end of file diff --git a/lib/animated/Input.js b/lib/animated/Input.js new file mode 100644 index 0000000000..5724d4cb01 --- /dev/null +++ b/lib/animated/Input.js @@ -0,0 +1,32 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +// strip transition props off before spreading onto select component +// note we need to be explicit about innerRef for flow +var AnimatedInput = function AnimatedInput(WrappedComponent) { + return function (_ref) { + var inProp = _ref.in, + onExited = _ref.onExited, + appear = _ref.appear, + enter = _ref.enter, + exit = _ref.exit, + props = _objectWithoutProperties(_ref, ["in", "onExited", "appear", "enter", "exit"]); + + return _react.default.createElement(WrappedComponent, props); + }; +}; + +var _default = AnimatedInput; +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/MultiValue.js b/lib/animated/MultiValue.js new file mode 100644 index 0000000000..b3bea68820 --- /dev/null +++ b/lib/animated/MultiValue.js @@ -0,0 +1,37 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _transitions = require("./transitions"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +// strip transition props off before spreading onto actual component +var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) { + return function (_ref) { + var inProp = _ref.in, + onExited = _ref.onExited, + props = _objectWithoutProperties(_ref, ["in", "onExited"]); + + return _react.default.createElement(_transitions.Collapse, { + in: inProp, + onExited: onExited + }, _react.default.createElement(WrappedComponent, _extends({ + cropWithEllipsis: inProp + }, props))); + }; +}; + +var _default = AnimatedMultiValue; +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/Placeholder.js b/lib/animated/Placeholder.js new file mode 100644 index 0000000000..cdebfe7efe --- /dev/null +++ b/lib/animated/Placeholder.js @@ -0,0 +1,27 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _transitions = require("./transitions"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +// fade in when last multi-value removed, otherwise instant +var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) { + return function (props) { + return _react.default.createElement(_transitions.Fade, _extends({ + component: WrappedComponent, + duration: props.isMulti ? _transitions.collapseDuration : 1 + }, props)); + }; +}; + +var _default = AnimatedPlaceholder; +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/SingleValue.js b/lib/animated/SingleValue.js new file mode 100644 index 0000000000..ebddeb4e83 --- /dev/null +++ b/lib/animated/SingleValue.js @@ -0,0 +1,26 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _transitions = require("./transitions"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +// instant fade; all transition-group children must be transitions +var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) { + return function (props) { + return _react.default.createElement(_transitions.Fade, _extends({ + component: WrappedComponent + }, props)); + }; +}; + +var _default = AnimatedSingleValue; +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/ValueContainer.js b/lib/animated/ValueContainer.js new file mode 100644 index 0000000000..72172bb83b --- /dev/null +++ b/lib/animated/ValueContainer.js @@ -0,0 +1,26 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _reactTransitionGroup = require("react-transition-group"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +// make ValueContainer a transition group +var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) { + return function (props) { + return _react.default.createElement(_reactTransitionGroup.TransitionGroup, _extends({ + component: WrappedComponent + }, props)); + }; +}; + +var _default = AnimatedValueContainer; +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/index.js b/lib/animated/index.js new file mode 100644 index 0000000000..0d782e73ca --- /dev/null +++ b/lib/animated/index.js @@ -0,0 +1,70 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.ValueContainer = exports.SingleValue = exports.Placeholder = exports.MultiValue = exports.Input = void 0; + +var _memoizeOne = _interopRequireDefault(require("memoize-one")); + +var _reactFastCompare = _interopRequireDefault(require("../internal/react-fast-compare")); + +var _index = require("../components/index"); + +var _Input = _interopRequireDefault(require("./Input")); + +var _MultiValue = _interopRequireDefault(require("./MultiValue")); + +var _Placeholder = _interopRequireDefault(require("./Placeholder")); + +var _SingleValue = _interopRequireDefault(require("./SingleValue")); + +var _ValueContainer = _interopRequireDefault(require("./ValueContainer")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var makeAnimated = function makeAnimated() { + var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var components = (0, _index.defaultComponents)({ + components: externalComponents + }); + + var Input = components.Input, + MultiValue = components.MultiValue, + Placeholder = components.Placeholder, + SingleValue = components.SingleValue, + ValueContainer = components.ValueContainer, + rest = _objectWithoutProperties(components, ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"]); + + return _objectSpread({ + Input: (0, _Input.default)(Input), + MultiValue: (0, _MultiValue.default)(MultiValue), + Placeholder: (0, _Placeholder.default)(Placeholder), + SingleValue: (0, _SingleValue.default)(SingleValue), + ValueContainer: (0, _ValueContainer.default)(ValueContainer) + }, rest); +}; + +var AnimatedComponents = makeAnimated(); +var Input = AnimatedComponents.Input; +exports.Input = Input; +var MultiValue = AnimatedComponents.MultiValue; +exports.MultiValue = MultiValue; +var Placeholder = AnimatedComponents.Placeholder; +exports.Placeholder = Placeholder; +var SingleValue = AnimatedComponents.SingleValue; +exports.SingleValue = SingleValue; +var ValueContainer = AnimatedComponents.ValueContainer; +exports.ValueContainer = ValueContainer; + +var _default = (0, _memoizeOne.default)(makeAnimated, _reactFastCompare.default); + +exports.default = _default; \ No newline at end of file diff --git a/lib/animated/transitions.js b/lib/animated/transitions.js new file mode 100644 index 0000000000..64a1b1ec11 --- /dev/null +++ b/lib/animated/transitions.js @@ -0,0 +1,198 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Collapse = exports.collapseDuration = exports.Fade = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _reactTransitionGroup = require("react-transition-group"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var Fade = function Fade(_ref) { + var Tag = _ref.component, + _ref$duration = _ref.duration, + duration = _ref$duration === void 0 ? 1 : _ref$duration, + inProp = _ref.in, + onExited = _ref.onExited, + props = _objectWithoutProperties(_ref, ["component", "duration", "in", "onExited"]); + + var transition = { + entering: { + opacity: 0 + }, + entered: { + opacity: 1, + transition: "opacity ".concat(duration, "ms") + }, + exiting: { + opacity: 0 + }, + exited: { + opacity: 0 + } + }; + return _react.default.createElement(_reactTransitionGroup.Transition, { + mountOnEnter: true, + unmountOnExit: true, + in: inProp, + timeout: duration + }, function (state) { + var innerProps = { + style: _objectSpread({}, transition[state]) + }; + return _react.default.createElement(Tag, _extends({ + innerProps: innerProps + }, props)); + }); +}; // ============================== +// Collapse Transition +// ============================== + + +exports.Fade = Fade; +var collapseDuration = 260; +exports.collapseDuration = collapseDuration; + +// wrap each MultiValue with a collapse transition; decreases width until +// finally removing from DOM +var Collapse = +/*#__PURE__*/ +function (_Component) { + _inherits(Collapse, _Component); + + function Collapse() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, Collapse); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Collapse)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "duration", collapseDuration); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rafID", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + width: 'auto' + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "transition", { + exiting: { + width: 0, + transition: "width ".concat(_this.duration, "ms ease-out") + }, + exited: { + width: 0 + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getWidth", function (ref) { + if (ref && isNaN(_this.state.width)) { + /* + Here we're invoking requestAnimationFrame with a callback invoking our + call to getBoundingClientRect and setState in order to resolve an edge case + around portalling. Certain portalling solutions briefly remove children from the DOM + before appending them to the target node. This is to avoid us trying to call getBoundingClientrect + while the Select component is in this state. + */ + // cannot use `offsetWidth` because it is rounded + _this.rafID = window.requestAnimationFrame(function () { + var _ref$getBoundingClien = ref.getBoundingClientRect(), + width = _ref$getBoundingClien.width; + + _this.setState({ + width: width + }); + }); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStyle", function (width) { + return { + overflow: 'hidden', + whiteSpace: 'nowrap', + width: width + }; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getTransition", function (state) { + return _this.transition[state]; + }); + + return _this; + } + + _createClass(Collapse, [{ + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (this.rafID) { + window.cancelAnimationFrame(this.rafID); + } + } // width must be calculated; cannot transition from `undefined` to `number` + + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props = this.props, + children = _this$props.children, + inProp = _this$props.in; + var width = this.state.width; + return _react.default.createElement(_reactTransitionGroup.Transition, { + enter: false, + mountOnEnter: true, + unmountOnExit: true, + in: inProp, + timeout: this.duration + }, function (state) { + var style = _objectSpread({}, _this2.getStyle(width), _this2.getTransition(state)); + + return _react.default.createElement("div", { + ref: _this2.getWidth, + style: style + }, children); + }); + } + }]); + + return Collapse; +}(_react.Component); + +exports.Collapse = Collapse; \ No newline at end of file diff --git a/lib/builtins.js b/lib/builtins.js new file mode 100644 index 0000000000..13fe14a3af --- /dev/null +++ b/lib/builtins.js @@ -0,0 +1,30 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.isOptionDisabled = exports.getOptionValue = exports.getOptionLabel = exports.formatGroupLabel = void 0; + +var formatGroupLabel = function formatGroupLabel(group) { + return group.label; +}; + +exports.formatGroupLabel = formatGroupLabel; + +var getOptionLabel = function getOptionLabel(option) { + return option.label; +}; + +exports.getOptionLabel = getOptionLabel; + +var getOptionValue = function getOptionValue(option) { + return option.value; +}; + +exports.getOptionValue = getOptionValue; + +var isOptionDisabled = function isOptionDisabled(option) { + return !!option.isDisabled; +}; + +exports.isOptionDisabled = isOptionDisabled; \ No newline at end of file diff --git a/lib/components/Control.js b/lib/components/Control.js new file mode 100644 index 0000000000..75dc48d016 --- /dev/null +++ b/lib/components/Control.js @@ -0,0 +1,72 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.css = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +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 + } + }; +}; + +exports.css = css; + +var Control = function Control(props) { + var children = props.children, + cx = props.cx, + getStyles = props.getStyles, + className = props.className, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + innerRef = props.innerRef, + innerProps = props.innerProps, + menuIsOpen = props.menuIsOpen; + return _react.default.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('control', props)), { + 'control': true, + 'control--is-disabled': isDisabled, + 'control--is-focused': isFocused, + 'control--menu-is-open': menuIsOpen + }, className) + }, innerProps), children); +}; + +var _default = Control; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/Group.js b/lib/components/Group.js new file mode 100644 index 0000000000..1a6807967a --- /dev/null +++ b/lib/components/Group.js @@ -0,0 +1,97 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.GroupHeading = exports.groupHeadingCSS = exports.groupCSS = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var groupCSS = function groupCSS(_ref) { + var spacing = _ref.theme.spacing; + return { + paddingBottom: spacing.baseUnit * 2, + paddingTop: spacing.baseUnit * 2 + }; +}; + +exports.groupCSS = groupCSS; + +var Group = function Group(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + Heading = props.Heading, + headingProps = props.headingProps, + label = props.label, + theme = props.theme, + selectProps = props.selectProps; + return _react.default.createElement("div", { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('group', props)), { + 'group': true + }, className) + }, _react.default.createElement(Heading, _extends({}, headingProps, { + selectProps: selectProps, + theme: theme, + getStyles: getStyles, + cx: cx + }), label), _react.default.createElement("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' + }; +}; + +exports.groupHeadingCSS = groupHeadingCSS; + +var GroupHeading = function GroupHeading(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + theme = props.theme, + selectProps = props.selectProps, + cleanProps = _objectWithoutProperties(props, ["className", "cx", "getStyles", "theme", "selectProps"]); + + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('groupHeading', _objectSpread({ + theme: theme + }, cleanProps))), { + 'group-heading': true + }, className) + }, cleanProps)); +}; + +exports.GroupHeading = GroupHeading; +var _default = Group; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/Input.js b/lib/components/Input.js new file mode 100644 index 0000000000..8530a48bd3 --- /dev/null +++ b/lib/components/Input.js @@ -0,0 +1,85 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.inputCSS = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +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 + }; +}; + +exports.inputCSS = inputCSS; + +var inputStyle = function inputStyle(isHidden) { + return { + label: 'input', + background: 0, + border: 0, + fontSize: 'inherit', + opacity: isHidden ? 0 : 1, + outline: 0, + padding: 0, + color: 'inherit' + }; +}; + +var Input = function Input(_ref2) { + var className = _ref2.className, + cx = _ref2.cx, + getStyles = _ref2.getStyles, + innerRef = _ref2.innerRef, + isHidden = _ref2.isHidden, + isDisabled = _ref2.isDisabled, + theme = _ref2.theme, + selectProps = _ref2.selectProps, + props = _objectWithoutProperties(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]); + + return _react.default.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)(getStyles('input', _objectSpread({ + theme: theme + }, props))) + }, _react.default.createElement(_reactInputAutosize.default, _extends({ + className: cx(null, { + 'input': true + }, className), + inputRef: innerRef, + inputStyle: inputStyle(isHidden), + disabled: isDisabled + }, props))); +}; + +var _default = Input; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/Menu.js b/lib/components/Menu.js new file mode 100644 index 0000000000..7a86152802 --- /dev/null +++ b/lib/components/Menu.js @@ -0,0 +1,562 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getMenuPlacement = getMenuPlacement; +exports.MenuPortal = exports.menuPortalCSS = exports.LoadingMessage = exports.NoOptionsMessage = exports.loadingMessageCSS = exports.noOptionsMessageCSS = exports.MenuList = exports.menuListCSS = exports.default = exports.MenuPlacer = exports.menuCSS = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _emotion = require("emotion"); + +var _reactDom = require("react-dom"); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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 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 = (0, _utils.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, + scrollParentTop = _scrollParent$getBoun.top; + + var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(), + menuBottom = _menuEl$getBoundingCl.bottom, + menuHeight = _menuEl$getBoundingCl.height, + menuClientTop = _menuEl$getBoundingCl.top; // If not fixed position, need to possibly adjust based on scroll parent + + + var menuTop = isFixedPosition ? menuClientTop : menuClientTop - scrollParentTop; + + var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(), + containerTop = _menuEl$offsetParent$.top; + + var viewHeight = isFixedPosition ? window.innerHeight : scrollHeight; + var scrollTop = (0, _utils.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) { + (0, _utils.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) { + (0, _utils.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') { + (0, _utils.scrollTo)(scrollParent, scrollDown); // We might also need to constrain the height + + var _constrainedHeight2 = maxHeight; + + if (maxHeight > scrollHeight && !isFixedPosition) { + _constrainedHeight2 = scrollHeight - marginTop - marginBottom; + } + + ; + return { + placement: 'bottom', + maxHeight: _constrainedHeight2 + }; + } + + 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) { + (0, _utils.animatedScrollTo)(scrollParent, scrollUp, scrollDuration); + } + + return { + placement: 'top', + maxHeight: maxHeight + }; + } // 3: the menu will fit, if constrained + + + if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) { + var _constrainedHeight3 = 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) { + _constrainedHeight3 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop; + } + + if (shouldScroll) { + (0, _utils.animatedScrollTo)(scrollParent, scrollUp, scrollDuration); + } + + return { + placement: 'top', + maxHeight: _constrainedHeight3 + }; + } // 4. not enough space, the browser WILL NOT increase scrollable area when + // absolutely positioned element rendered above the viewport (only below). + // Flip the menu, render below + + + return { + placement: 'bottom', + maxHeight: maxHeight + }; + + default: + throw new Error("Invalid placement provided \"".concat(placement, "\".")); + } // fulfil contract with flow: implicit return value of undefined + + + return defaultState; +} // Menu Component +// ------------------------------ + + +function alignToControl(placement) { + var placementToCSSProp = { + bottom: 'top', + top: 'bottom' + }; + return placement ? placementToCSSProp[placement] : 'bottom'; +} + +var coercePlacement = function coercePlacement(p) { + return p === 'auto' ? 'bottom' : p; +}; + +var menuCSS = function menuCSS(_ref2) { + var _ref3; + + var placement = _ref2.placement, + _ref2$theme = _ref2.theme, + borderRadius = _ref2$theme.borderRadius, + spacing = _ref2$theme.spacing, + colors = _ref2$theme.colors; + return _ref3 = { + label: 'menu' + }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "backgroundColor", colors.neutral0), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _ref3; +}; // NOTE: internal only + + +exports.menuCSS = menuCSS; + +var MenuPlacer = +/*#__PURE__*/ +function (_Component) { + _inherits(MenuPlacer, _Component); + + function MenuPlacer() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, MenuPlacer); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MenuPlacer)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + maxHeight: _this.props.maxMenuHeight, + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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; + var getPortalPlacement = _this.context.getPortalPlacement; + 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 + }); + if (getPortalPlacement) getPortalPlacement(state); + + _this.setState(state); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getUpdatedProps", function () { + var menuPlacement = _this.props.menuPlacement; + var placement = _this.state.placement || coercePlacement(menuPlacement); + return _objectSpread({}, _this.props, { + placement: placement, + maxHeight: _this.state.maxHeight + }); + }); + + return _this; + } + + _createClass(MenuPlacer, [{ + key: "render", + value: function render() { + var children = this.props.children; + return children({ + ref: this.getPlacement, + placerProps: this.getUpdatedProps() + }); + } + }]); + + return MenuPlacer; +}(_react.Component); + +exports.MenuPlacer = MenuPlacer; + +_defineProperty(MenuPlacer, "contextTypes", { + getPortalPlacement: _propTypes.default.func +}); + +var Menu = function Menu(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerRef = props.innerRef, + innerProps = props.innerProps; + var cn = cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('menu', props)), { + menu: true + }, className); + return _react.default.createElement("div", _extends({ + className: cn + }, innerProps, { + ref: innerRef + }), children); +}; + +var _default = Menu; // ============================== +// Menu List +// ============================== + +exports.default = _default; + +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' + }; +}; + +exports.menuListCSS = menuListCSS; + +var MenuList = function MenuList(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isMulti = props.isMulti, + innerRef = props.innerRef; + return _react.default.createElement("div", { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('menuList', props)), { + 'menu-list': true, + 'menu-list--is-multi': isMulti + }, className), + ref: innerRef + }, children); +}; // ============================== +// Menu Notices +// ============================== + + +exports.MenuList = MenuList; + +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; +exports.noOptionsMessageCSS = noOptionsMessageCSS; +var loadingMessageCSS = noticeCSS; +exports.loadingMessageCSS = loadingMessageCSS; + +var NoOptionsMessage = function NoOptionsMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('noOptionsMessage', props)), { + 'menu-notice': true, + 'menu-notice--no-options': true + }, className) + }, innerProps), children); +}; + +exports.NoOptionsMessage = NoOptionsMessage; +NoOptionsMessage.defaultProps = { + children: 'No options' +}; + +var LoadingMessage = function LoadingMessage(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('loadingMessage', props)), { + 'menu-notice': true, + 'menu-notice--loading': true + }, className) + }, innerProps), children); +}; + +exports.LoadingMessage = LoadingMessage; +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 + }; +}; + +exports.menuPortalCSS = menuPortalCSS; + +var MenuPortal = +/*#__PURE__*/ +function (_Component2) { + _inherits(MenuPortal, _Component2); + + function MenuPortal() { + var _getPrototypeOf3; + + var _this2; + + _classCallCheck(this, MenuPortal); + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MenuPortal)).call.apply(_getPrototypeOf3, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", { + placement: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_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: "getChildContext", + value: function getChildContext() { + return { + getPortalPlacement: this.getPortalPlacement + }; + } // callback for occassions where the menu must "flip" + + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + appendTo = _this$props2.appendTo, + children = _this$props2.children, + controlElement = _this$props2.controlElement, + menuPlacement = _this$props2.menuPlacement, + position = _this$props2.menuPosition, + getStyles = _this$props2.getStyles; + var isFixed = position === 'fixed'; // bail early if required elements aren't present + + if (!appendTo && !isFixed || !controlElement) { + return null; + } + + var placement = this.state.placement || coercePlacement(menuPlacement); + var rect = (0, _utils.getBoundingClientObj)(controlElement); + var scrollDistance = isFixed ? 0 : window.pageYOffset; + var offset = rect[placement] + scrollDistance; + var state = { + offset: offset, + position: position, + rect: rect + }; // same wrapper element whether fixed or portalled + + var menuWrapper = _react.default.createElement("div", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)(getStyles('menuPortal', state)) + }, children); + + return appendTo ? (0, _reactDom.createPortal)(menuWrapper, appendTo) : menuWrapper; + } + }]); + + return MenuPortal; +}(_react.Component); + +exports.MenuPortal = MenuPortal; + +_defineProperty(MenuPortal, "childContextTypes", { + getPortalPlacement: _propTypes.default.func +}); \ No newline at end of file diff --git a/lib/components/MultiValue.js b/lib/components/MultiValue.js new file mode 100644 index 0000000000..57ff159d18 --- /dev/null +++ b/lib/components/MultiValue.js @@ -0,0 +1,215 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.MultiValueRemove = exports.MultiValueLabel = exports.MultiValueContainer = exports.MultiValueGeneric = exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _emotion = require("emotion"); + +var _indicators = require("./indicators"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +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 + + }; +}; + +exports.multiValueCSS = multiValueCSS; + +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' + }; +}; + +exports.multiValueLabelCSS = multiValueLabelCSS; + +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 + } + }; +}; + +exports.multiValueRemoveCSS = multiValueRemoveCSS; + +var MultiValueGeneric = function MultiValueGeneric(_ref4) { + var children = _ref4.children, + innerProps = _ref4.innerProps; + return _react.default.createElement("div", innerProps, children); +}; + +exports.MultiValueGeneric = MultiValueGeneric; +var MultiValueContainer = MultiValueGeneric; +exports.MultiValueContainer = MultiValueContainer; +var MultiValueLabel = MultiValueGeneric; +exports.MultiValueLabel = MultiValueLabel; + +var MultiValueRemove = +/*#__PURE__*/ +function (_Component) { + _inherits(MultiValueRemove, _Component); + + function MultiValueRemove() { + _classCallCheck(this, MultiValueRemove); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValueRemove).apply(this, arguments)); + } + + _createClass(MultiValueRemove, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + innerProps = _this$props.innerProps; + return _react.default.createElement("div", innerProps, children || _react.default.createElement(_indicators.CrossIcon, { + size: 14 + })); + } + }]); + + return MultiValueRemove; +}(_react.Component); + +exports.MultiValueRemove = MultiValueRemove; + +var MultiValue = +/*#__PURE__*/ +function (_Component2) { + _inherits(MultiValue, _Component2); + + function MultiValue() { + _classCallCheck(this, MultiValue); + + return _possibleConstructorReturn(this, _getPrototypeOf(MultiValue).apply(this, arguments)); + } + + _createClass(MultiValue, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + children = _this$props2.children, + className = _this$props2.className, + components = _this$props2.components, + cx = _this$props2.cx, + data = _this$props2.data, + getStyles = _this$props2.getStyles, + innerProps = _this$props2.innerProps, + isDisabled = _this$props2.isDisabled, + removeProps = _this$props2.removeProps, + selectProps = _this$props2.selectProps; + var Container = components.Container, + Label = components.Label, + Remove = components.Remove; + + var containerInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('multiValue', this.props)), { + 'multi-value': true, + 'multi-value--is-disabled': isDisabled + }, className) + }, innerProps); + + var labelInnerProps = { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('multiValueLabel', this.props)), { + 'multi-value__label': true + }, className) + }; + + var removeInnerProps = _objectSpread({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('multiValueRemove', this.props)), { + 'multi-value__remove': true + }, className) + }, removeProps); + + return _react.default.createElement(Container, { + data: data, + innerProps: containerInnerProps, + selectProps: selectProps + }, _react.default.createElement(Label, { + data: data, + innerProps: labelInnerProps, + selectProps: selectProps + }, children), _react.default.createElement(Remove, { + data: data, + innerProps: removeInnerProps, + selectProps: selectProps + })); + } + }]); + + return MultiValue; +}(_react.Component); + +_defineProperty(MultiValue, "defaultProps", { + cropWithEllipsis: true +}); + +var _default = MultiValue; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/Option.js b/lib/components/Option.js new file mode 100644 index 0000000000..f1da6b7f64 --- /dev/null +++ b/lib/components/Option.js @@ -0,0 +1,67 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.optionCSS = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +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: isSelected ? colors.primary : colors.primary50 + } + }; +}; + +exports.optionCSS = optionCSS; + +var Option = function Option(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + isFocused = props.isFocused, + isSelected = props.isSelected, + innerRef = props.innerRef, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({ + ref: innerRef, + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('option', props)), { + 'option': true, + 'option--is-disabled': isDisabled, + 'option--is-focused': isFocused, + 'option--is-selected': isSelected + }, className) + }, innerProps), children); +}; + +var _default = Option; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/Placeholder.js b/lib/components/Placeholder.js new file mode 100644 index 0000000000..d4f95b604b --- /dev/null +++ b/lib/components/Placeholder.js @@ -0,0 +1,49 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.placeholderCSS = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +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%)' + }; +}; + +exports.placeholderCSS = placeholderCSS; + +var Placeholder = function Placeholder(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('placeholder', props)), { + 'placeholder': true + }, className) + }, innerProps), children); +}; + +var _default = Placeholder; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/SingleValue.js b/lib/components/SingleValue.js new file mode 100644 index 0000000000..d035589d66 --- /dev/null +++ b/lib/components/SingleValue.js @@ -0,0 +1,56 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.css = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var css = 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%)' + }; +}; + +exports.css = css; + +var SingleValue = function SingleValue(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + isDisabled = props.isDisabled, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('singleValue', props)), { + 'single-value': true, + 'single-value--is-disabled': isDisabled + }, className) + }, innerProps), children); +}; + +var _default = SingleValue; +exports.default = _default; \ No newline at end of file diff --git a/lib/components/containers.js b/lib/components/containers.js new file mode 100644 index 0000000000..f4a5972fa4 --- /dev/null +++ b/lib/components/containers.js @@ -0,0 +1,153 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.IndicatorsContainer = exports.indicatorsContainerCSS = exports.ValueContainer = exports.valueContainerCSS = exports.SelectContainer = exports.containerCSS = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +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' + }; +}; + +exports.containerCSS = containerCSS; + +var SelectContainer = function SelectContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isDisabled = props.isDisabled, + isRtl = props.isRtl; + return _react.default.createElement("div", _extends({ + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('container', props)), { + '--is-disabled': isDisabled, + '--is-rtl': isRtl + }, className) + }, innerProps), children); +}; // ============================== +// Value Container +// ============================== + + +exports.SelectContainer = SelectContainer; + +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' + }; +}; + +exports.valueContainerCSS = valueContainerCSS; + +var ValueContainer = +/*#__PURE__*/ +function (_Component) { + _inherits(ValueContainer, _Component); + + function ValueContainer() { + _classCallCheck(this, ValueContainer); + + return _possibleConstructorReturn(this, _getPrototypeOf(ValueContainer).apply(this, arguments)); + } + + _createClass(ValueContainer, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + className = _this$props.className, + cx = _this$props.cx, + isMulti = _this$props.isMulti, + getStyles = _this$props.getStyles, + hasValue = _this$props.hasValue; + return _react.default.createElement("div", { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('valueContainer', this.props)), { + 'value-container': true, + 'value-container--is-multi': isMulti, + 'value-container--has-value': hasValue + }, className) + }, children); + } + }]); + + return ValueContainer; +}(_react.Component); // ============================== +// Indicator Container +// ============================== + + +exports.ValueContainer = ValueContainer; + +var indicatorsContainerCSS = function indicatorsContainerCSS() { + return { + alignItems: 'center', + alignSelf: 'stretch', + display: 'flex', + flexShrink: 0 + }; +}; + +exports.indicatorsContainerCSS = indicatorsContainerCSS; + +var IndicatorsContainer = function IndicatorsContainer(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles; + return _react.default.createElement("div", { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('indicatorsContainer', props)), { + 'indicators': true + }, className) + }, children); +}; + +exports.IndicatorsContainer = IndicatorsContainer; \ No newline at end of file diff --git a/lib/components/index.js b/lib/components/index.js new file mode 100644 index 0000000000..48e506ef41 --- /dev/null +++ b/lib/components/index.js @@ -0,0 +1,69 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.defaultComponents = exports.components = void 0; + +var _containers = require("./containers"); + +var _indicators = require("./indicators"); + +var _Control = _interopRequireDefault(require("./Control")); + +var _Group = _interopRequireWildcard(require("./Group")); + +var _Input = _interopRequireDefault(require("./Input")); + +var _Menu = _interopRequireWildcard(require("./Menu")); + +var _MultiValue = _interopRequireWildcard(require("./MultiValue")); + +var _Option = _interopRequireDefault(require("./Option")); + +var _Placeholder = _interopRequireDefault(require("./Placeholder")); + +var _SingleValue = _interopRequireDefault(require("./SingleValue")); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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; } + +var components = { + ClearIndicator: _indicators.ClearIndicator, + Control: _Control.default, + DropdownIndicator: _indicators.DropdownIndicator, + DownChevron: _indicators.DownChevron, + CrossIcon: _indicators.CrossIcon, + Group: _Group.default, + GroupHeading: _Group.GroupHeading, + IndicatorsContainer: _containers.IndicatorsContainer, + IndicatorSeparator: _indicators.IndicatorSeparator, + Input: _Input.default, + LoadingIndicator: _indicators.LoadingIndicator, + Menu: _Menu.default, + MenuList: _Menu.MenuList, + MenuPortal: _Menu.MenuPortal, + LoadingMessage: _Menu.LoadingMessage, + NoOptionsMessage: _Menu.NoOptionsMessage, + MultiValue: _MultiValue.default, + MultiValueContainer: _MultiValue.MultiValueContainer, + MultiValueLabel: _MultiValue.MultiValueLabel, + MultiValueRemove: _MultiValue.MultiValueRemove, + Option: _Option.default, + Placeholder: _Placeholder.default, + SelectContainer: _containers.SelectContainer, + SingleValue: _SingleValue.default, + ValueContainer: _containers.ValueContainer +}; +exports.components = components; + +var defaultComponents = function defaultComponents(props) { + return _objectSpread({}, components, props.components); +}; + +exports.defaultComponents = defaultComponents; \ No newline at end of file diff --git a/lib/components/indicators.js b/lib/components/indicators.js new file mode 100644 index 0000000000..2e37ef1dc5 --- /dev/null +++ b/lib/components/indicators.js @@ -0,0 +1,259 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.LoadingIndicator = exports.loadingIndicatorCSS = exports.IndicatorSeparator = exports.indicatorSeparatorCSS = exports.ClearIndicator = exports.clearIndicatorCSS = exports.DropdownIndicator = exports.dropdownIndicatorCSS = exports.DownChevron = exports.CrossIcon = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +// ============================== +// Dropdown & Clear Icons +// ============================== +var Svg = function Svg(_ref) { + var size = _ref.size, + props = _objectWithoutProperties(_ref, ["size"]); + + return _react.default.createElement("svg", _extends({ + height: size, + width: size, + viewBox: "0 0 20 20", + "aria-hidden": "true", + focusable: "false", + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)({ + display: 'inline-block', + fill: 'currentColor', + lineHeight: 1, + stroke: 'currentColor', + strokeWidth: 0 + }) + }, props)); +}; + +var CrossIcon = function CrossIcon(props) { + return _react.default.createElement(Svg, _extends({ + size: 20 + }, props), _react.default.createElement("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" + })); +}; + +exports.CrossIcon = CrossIcon; + +var DownChevron = function DownChevron(props) { + return _react.default.createElement(Svg, _extends({ + size: 20 + }, props), _react.default.createElement("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 +// ============================== + + +exports.DownChevron = DownChevron; + +var baseCSS = function baseCSS(_ref2) { + var isFocused = _ref2.isFocused, + _ref2$theme = _ref2.theme, + baseUnit = _ref2$theme.spacing.baseUnit, + colors = _ref2$theme.colors; + return { + label: 'indicatorContainer', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + ':hover': { + color: isFocused ? colors.neutral80 : colors.neutral40 + } + }; +}; + +var dropdownIndicatorCSS = baseCSS; +exports.dropdownIndicatorCSS = dropdownIndicatorCSS; + +var DropdownIndicator = function DropdownIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('dropdownIndicator', props)), { + 'indicator': true, + 'dropdown-indicator': true + }, className) + }), children || _react.default.createElement(DownChevron, null)); +}; + +exports.DropdownIndicator = DropdownIndicator; +var clearIndicatorCSS = baseCSS; +exports.clearIndicatorCSS = clearIndicatorCSS; + +var ClearIndicator = function ClearIndicator(props) { + var children = props.children, + className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('clearIndicator', props)), { + 'indicator': true, + 'clear-indicator': true + }, className) + }), children || _react.default.createElement(CrossIcon, null)); +}; // ============================== +// Separator +// ============================== + + +exports.ClearIndicator = ClearIndicator; + +var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) { + var isDisabled = _ref3.isDisabled, + _ref3$theme = _ref3.theme, + baseUnit = _ref3$theme.spacing.baseUnit, + colors = _ref3$theme.colors; + return { + label: 'indicatorSeparator', + alignSelf: 'stretch', + backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20, + marginBottom: baseUnit * 2, + marginTop: baseUnit * 2, + width: 1 + }; +}; + +exports.indicatorSeparatorCSS = indicatorSeparatorCSS; + +var IndicatorSeparator = function IndicatorSeparator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps; + return _react.default.createElement("span", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('indicatorSeparator', props)), { + 'indicator-separator': true + }, className) + })); +}; // ============================== +// Loading +// ============================== + + +exports.IndicatorSeparator = IndicatorSeparator; +var keyframesName = 'react-select-loading-indicator'; +var keyframesInjected = false; + +var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) { + var isFocused = _ref4.isFocused, + size = _ref4.size, + _ref4$theme = _ref4.theme, + colors = _ref4$theme.colors, + baseUnit = _ref4$theme.spacing.baseUnit; + return { + label: 'loadingIndicator', + color: isFocused ? colors.neutral60 : colors.neutral20, + display: 'flex', + padding: baseUnit * 2, + transition: 'color 150ms', + alignSelf: 'center', + fontSize: size, + lineHeight: 1, + marginRight: size, + textAlign: 'center', + verticalAlign: 'middle' + }; +}; + +exports.loadingIndicatorCSS = loadingIndicatorCSS; + +var LoadingDot = function LoadingDot(_ref5) { + var color = _ref5.color, + delay = _ref5.delay, + offset = _ref5.offset; + return _react.default.createElement("span", { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)({ + animationDuration: '1s', + animationDelay: "".concat(delay, "ms"), + animationIterationCount: 'infinite', + animationName: keyframesName, + animationTimingFunction: 'ease-in-out', + backgroundColor: color, + borderRadius: '1em', + display: 'inline-block', + marginLeft: offset ? '1em' : null, + height: '1em', + verticalAlign: 'top', + width: '1em' + }) + }); +}; + +var LoadingIndicator = function LoadingIndicator(props) { + var className = props.className, + cx = props.cx, + getStyles = props.getStyles, + innerProps = props.innerProps, + isFocused = props.isFocused, + isRtl = props.isRtl, + colors = props.theme.colors; + var color = isFocused ? colors.neutral80 : colors.neutral20; + + if (!keyframesInjected) { + // eslint-disable-next-line no-unused-expressions + (0, _emotion.injectGlobal)("@keyframes ", keyframesName, "{0%,80%,100%{opacity:0;}40%{opacity:1;}};"); + keyframesInjected = true; + } + + return _react.default.createElement("div", _extends({}, innerProps, { + className: cx( + /*#__PURE__*/ + (0, _emotion.css)(getStyles('loadingIndicator', props)), { + 'indicator': true, + 'loading-indicator': true + }, className) + }), _react.default.createElement(LoadingDot, { + color: color, + delay: 0, + offset: isRtl + }), _react.default.createElement(LoadingDot, { + color: color, + delay: 160, + offset: true + }), _react.default.createElement(LoadingDot, { + color: color, + delay: 320, + offset: !isRtl + })); +}; + +exports.LoadingIndicator = LoadingIndicator; +LoadingIndicator.defaultProps = { + size: 4 +}; \ No newline at end of file diff --git a/lib/diacritics.js b/lib/diacritics.js new file mode 100644 index 0000000000..22d6afd824 --- /dev/null +++ b/lib/diacritics.js @@ -0,0 +1,269 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.stripDiacritics = void 0; +var diacritics = [{ + base: 'A', + letters: /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g +}, { + base: 'AA', + letters: /[\uA732]/g +}, { + base: 'AE', + letters: /[\u00C6\u01FC\u01E2]/g +}, { + base: 'AO', + letters: /[\uA734]/g +}, { + base: 'AU', + letters: /[\uA736]/g +}, { + base: 'AV', + letters: /[\uA738\uA73A]/g +}, { + base: 'AY', + letters: /[\uA73C]/g +}, { + base: 'B', + letters: /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g +}, { + base: 'C', + letters: /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g +}, { + base: 'D', + letters: /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g +}, { + base: 'DZ', + letters: /[\u01F1\u01C4]/g +}, { + base: 'Dz', + letters: /[\u01F2\u01C5]/g +}, { + base: 'E', + letters: /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g +}, { + base: 'F', + letters: /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g +}, { + base: 'G', + letters: /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g +}, { + base: 'H', + letters: /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g +}, { + base: 'I', + letters: /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g +}, { + base: 'J', + letters: /[\u004A\u24BF\uFF2A\u0134\u0248]/g +}, { + base: 'K', + letters: /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g +}, { + base: 'L', + letters: /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g +}, { + base: 'LJ', + letters: /[\u01C7]/g +}, { + base: 'Lj', + letters: /[\u01C8]/g +}, { + base: 'M', + letters: /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g +}, { + base: 'N', + letters: /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g +}, { + base: 'NJ', + letters: /[\u01CA]/g +}, { + base: 'Nj', + letters: /[\u01CB]/g +}, { + base: 'O', + letters: /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g +}, { + base: 'OI', + letters: /[\u01A2]/g +}, { + base: 'OO', + letters: /[\uA74E]/g +}, { + base: 'OU', + letters: /[\u0222]/g +}, { + base: 'P', + letters: /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g +}, { + base: 'Q', + letters: /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g +}, { + base: 'R', + letters: /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g +}, { + base: 'S', + letters: /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g +}, { + base: 'T', + letters: /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g +}, { + base: 'TZ', + letters: /[\uA728]/g +}, { + base: 'U', + letters: /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g +}, { + base: 'V', + letters: /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g +}, { + base: 'VY', + letters: /[\uA760]/g +}, { + base: 'W', + letters: /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g +}, { + base: 'X', + letters: /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g +}, { + base: 'Y', + letters: /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g +}, { + base: 'Z', + letters: /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g +}, { + base: 'a', + letters: /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g +}, { + base: 'aa', + letters: /[\uA733]/g +}, { + base: 'ae', + letters: /[\u00E6\u01FD\u01E3]/g +}, { + base: 'ao', + letters: /[\uA735]/g +}, { + base: 'au', + letters: /[\uA737]/g +}, { + base: 'av', + letters: /[\uA739\uA73B]/g +}, { + base: 'ay', + letters: /[\uA73D]/g +}, { + base: 'b', + letters: /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g +}, { + base: 'c', + letters: /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g +}, { + base: 'd', + letters: /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g +}, { + base: 'dz', + letters: /[\u01F3\u01C6]/g +}, { + base: 'e', + letters: /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g +}, { + base: 'f', + letters: /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g +}, { + base: 'g', + letters: /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g +}, { + base: 'h', + letters: /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g +}, { + base: 'hv', + letters: /[\u0195]/g +}, { + base: 'i', + letters: /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g +}, { + base: 'j', + letters: /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g +}, { + base: 'k', + letters: /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g +}, { + base: 'l', + letters: /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g +}, { + base: 'lj', + letters: /[\u01C9]/g +}, { + base: 'm', + letters: /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g +}, { + base: 'n', + letters: /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g +}, { + base: 'nj', + letters: /[\u01CC]/g +}, { + base: 'o', + letters: /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g +}, { + base: 'oi', + letters: /[\u01A3]/g +}, { + base: 'ou', + letters: /[\u0223]/g +}, { + base: 'oo', + letters: /[\uA74F]/g +}, { + base: 'p', + letters: /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g +}, { + base: 'q', + letters: /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g +}, { + base: 'r', + letters: /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g +}, { + base: 's', + letters: /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g +}, { + base: 't', + letters: /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g +}, { + base: 'tz', + letters: /[\uA729]/g +}, { + base: 'u', + letters: /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g +}, { + base: 'v', + letters: /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g +}, { + base: 'vy', + letters: /[\uA761]/g +}, { + base: 'w', + letters: /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g +}, { + base: 'x', + letters: /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g +}, { + base: 'y', + letters: /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g +}, { + base: 'z', + letters: /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g +}]; + +var stripDiacritics = function stripDiacritics(str) { + for (var i = 0; i < diacritics.length; i++) { + str = str.replace(diacritics[i].letters, diacritics[i].base); + } + + return str; +}; + +exports.stripDiacritics = stripDiacritics; \ No newline at end of file diff --git a/lib/filters.js b/lib/filters.js new file mode 100644 index 0000000000..bccfe5a459 --- /dev/null +++ b/lib/filters.js @@ -0,0 +1,54 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.createFilter = void 0; + +var _diacritics = require("./diacritics"); + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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; } + +var trimString = function trimString(str) { + return str.replace(/^\s+|\s+$/g, ''); +}; + +var defaultStringify = function defaultStringify(option) { + return "".concat(option.label, " ").concat(option.value); +}; + +var createFilter = function createFilter(config) { + return function (option, rawInput) { + var _ignoreCase$ignoreAcc = _objectSpread({ + ignoreCase: true, + ignoreAccents: true, + stringify: defaultStringify, + trim: true, + matchFrom: 'any' + }, config), + ignoreCase = _ignoreCase$ignoreAcc.ignoreCase, + ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents, + stringify = _ignoreCase$ignoreAcc.stringify, + trim = _ignoreCase$ignoreAcc.trim, + matchFrom = _ignoreCase$ignoreAcc.matchFrom; + + var input = trim ? trimString(rawInput) : rawInput; + var candidate = trim ? trimString(stringify(option)) : stringify(option); + + if (ignoreCase) { + input = input.toLowerCase(); + candidate = candidate.toLowerCase(); + } + + if (ignoreAccents) { + input = (0, _diacritics.stripDiacritics)(input); + candidate = (0, _diacritics.stripDiacritics)(candidate); + } + + return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1; + }; +}; + +exports.createFilter = createFilter; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000000..7719bd5f5c --- /dev/null +++ b/lib/index.js @@ -0,0 +1,100 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "SelectBase", { + enumerable: true, + get: function get() { + return _Select.default; + } +}); +Object.defineProperty(exports, "Async", { + enumerable: true, + get: function get() { + return _Async.default; + } +}); +Object.defineProperty(exports, "makeAsyncSelect", { + enumerable: true, + get: function get() { + return _Async.makeAsyncSelect; + } +}); +Object.defineProperty(exports, "AsyncCreatable", { + enumerable: true, + get: function get() { + return _AsyncCreatable.default; + } +}); +Object.defineProperty(exports, "Creatable", { + enumerable: true, + get: function get() { + return _Creatable.default; + } +}); +Object.defineProperty(exports, "makeCreatableSelect", { + enumerable: true, + get: function get() { + return _Creatable.makeCreatableSelect; + } +}); +Object.defineProperty(exports, "createFilter", { + enumerable: true, + get: function get() { + return _filters.createFilter; + } +}); +Object.defineProperty(exports, "makeAnimated", { + enumerable: true, + get: function get() { + return _index.default; + } +}); +Object.defineProperty(exports, "components", { + enumerable: true, + get: function get() { + return _index2.components; + } +}); +Object.defineProperty(exports, "mergeStyles", { + enumerable: true, + get: function get() { + return _styles.mergeStyles; + } +}); +Object.defineProperty(exports, "defaultTheme", { + enumerable: true, + get: function get() { + return _theme.defaultTheme; + } +}); +exports.default = void 0; + +var _Select = _interopRequireDefault(require("./Select")); + +var _stateManager = _interopRequireDefault(require("./stateManager")); + +var _Async = _interopRequireWildcard(require("./Async")); + +var _AsyncCreatable = _interopRequireDefault(require("./AsyncCreatable")); + +var _Creatable = _interopRequireWildcard(require("./Creatable")); + +var _filters = require("./filters"); + +var _index = _interopRequireDefault(require("./animated/index")); + +var _index2 = require("./components/index"); + +var _styles = require("./styles"); + +var _theme = require("./theme"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var _default = (0, _stateManager.default)(_Select.default); + +exports.default = _default; \ No newline at end of file diff --git a/lib/index.js.flow b/lib/index.js.flow new file mode 100644 index 0000000000..6a6528bbe5 --- /dev/null +++ b/lib/index.js.flow @@ -0,0 +1,3 @@ +// @flow + +export * from '../src'; diff --git a/lib/index.umd.js b/lib/index.umd.js new file mode 100644 index 0000000000..4398e735da --- /dev/null +++ b/lib/index.umd.js @@ -0,0 +1,42 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _Select = _interopRequireDefault(require("./Select")); + +var _stateManager = _interopRequireDefault(require("./stateManager")); + +var _Async = _interopRequireDefault(require("./Async")); + +var _AsyncCreatable = _interopRequireDefault(require("./AsyncCreatable")); + +var _Creatable = _interopRequireDefault(require("./Creatable")); + +var _filters = require("./filters"); + +var _index = require("./components/index"); + +var _styles = require("./styles"); + +var _theme = require("./theme"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// This file exists as an entry point for bundling our umd builds. +// Both in rollup and in webpack, umd builds built from es6 modules are not +// compatible with mixed imports (which exist in index.js) +// This file does away with named imports in favor of a single export default. +var Select = (0, _stateManager.default)(_Select.default); +Select.Async = _Async.default; +Select.AsyncCreatable = _AsyncCreatable.default; +Select.Creatable = _Creatable.default; +Select.SelectBase = _Select.default; +Select.createFilter = _filters.createFilter; +Select.components = _index.components; +Select.mergeStyles = _styles.mergeStyles; +Select.defaultTheme = _theme.defaultTheme; +var _default = Select; +exports.default = _default; \ No newline at end of file diff --git a/lib/internal/A11yText.js b/lib/internal/A11yText.js new file mode 100644 index 0000000000..8cec7b0dd7 --- /dev/null +++ b/lib/internal/A11yText.js @@ -0,0 +1,41 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +// Assistive text to describe visual elements. Hidden for sighted users. +var A11yText = function A11yText(props) { + return _react.default.createElement("span", _extends({ + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)({ + label: 'a11yText', + zIndex: 9999, + border: 0, + clip: 'rect(1px, 1px, 1px, 1px)', + height: 1, + width: 1, + position: 'absolute', + overflow: 'hidden', + padding: 0, + whiteSpace: 'nowrap', + backgroundColor: 'red', + color: 'blue' + }) + }, props)); +}; + +var _default = A11yText; +exports.default = _default; \ No newline at end of file diff --git a/lib/internal/DummyInput.js b/lib/internal/DummyInput.js new file mode 100644 index 0000000000..bef1d5a290 --- /dev/null +++ b/lib/internal/DummyInput.js @@ -0,0 +1,95 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _emotion = require("emotion"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +var DummyInput = +/*#__PURE__*/ +function (_Component) { + _inherits(DummyInput, _Component); + + function DummyInput() { + _classCallCheck(this, DummyInput); + + return _possibleConstructorReturn(this, _getPrototypeOf(DummyInput).apply(this, arguments)); + } + + _createClass(DummyInput, [{ + key: "render", + value: function render() { + var _this$props = this.props, + inProp = _this$props.in, + out = _this$props.out, + onExited = _this$props.onExited, + appear = _this$props.appear, + enter = _this$props.enter, + exit = _this$props.exit, + innerRef = _this$props.innerRef, + emotion = _this$props.emotion, + props = _objectWithoutProperties(_this$props, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]); + + return _react.default.createElement("input", _extends({ + ref: innerRef + }, props, { + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)({ + label: 'dummyInput', + // get rid of any default styles + background: 0, + border: 0, + fontSize: 'inherit', + outline: 0, + padding: 0, + // important! without `width` browsers won't allow focus + width: 1, + // remove cursor on desktop + color: 'transparent', + // remove cursor on mobile whilst maintaining "scroll into view" behaviour + left: -100, + opacity: 0, + position: 'relative', + transform: 'scale(0)' + }) + })); + } + }]); + + return DummyInput; +}(_react.Component); + +exports.default = DummyInput; \ No newline at end of file diff --git a/lib/internal/NodeResolver.js b/lib/internal/NodeResolver.js new file mode 100644 index 0000000000..dce7e2c3c1 --- /dev/null +++ b/lib/internal/NodeResolver.js @@ -0,0 +1,61 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = require("react"); + +var _reactDom = require("react-dom"); + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +var NodeResolver = +/*#__PURE__*/ +function (_Component) { + _inherits(NodeResolver, _Component); + + function NodeResolver() { + _classCallCheck(this, NodeResolver); + + return _possibleConstructorReturn(this, _getPrototypeOf(NodeResolver).apply(this, arguments)); + } + + _createClass(NodeResolver, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.props.innerRef((0, _reactDom.findDOMNode)(this)); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.props.innerRef(null); + } + }, { + key: "render", + value: function render() { + return this.props.children; + } + }]); + + return NodeResolver; +}(_react.Component); + +exports.default = NodeResolver; \ No newline at end of file diff --git a/lib/internal/ScrollBlock.js b/lib/internal/ScrollBlock.js new file mode 100644 index 0000000000..695cdbe684 --- /dev/null +++ b/lib/internal/ScrollBlock.js @@ -0,0 +1,129 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _emotion = require("emotion"); + +var _NodeResolver = _interopRequireDefault(require("./NodeResolver")); + +var _index = _interopRequireDefault(require("./ScrollLock/index")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +// NOTE: +// We shouldn't need this after updating to React v16.3.0, which introduces: +// - createRef() https://reactjs.org/docs/react-api.html#reactcreateref +// - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref +var ScrollBlock = +/*#__PURE__*/ +function (_PureComponent) { + _inherits(ScrollBlock, _PureComponent); + + function ScrollBlock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollBlock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollBlock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + touchScrollTarget: null + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + if (ref === _this.state.touchScrollTarget) return; + + _this.setState({ + touchScrollTarget: ref + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurSelectInput", function () { + if (document.activeElement) { + document.activeElement.blur(); + } + }); + + return _this; + } + + _createClass(ScrollBlock, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + isEnabled = _this$props.isEnabled; + var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled + + if (!isEnabled) return children; + /* + * Div + * ------------------------------ + * blocks scrolling on non-body elements behind the menu + * NodeResolver + * ------------------------------ + * we need a reference to the scrollable element to "unlock" scroll on + * mobile devices + * ScrollLock + * ------------------------------ + * actually does the scroll locking + */ + + return _react.default.createElement("div", null, _react.default.createElement("div", { + onClick: this.blurSelectInput, + className: + /*#__PURE__*/ + + /*#__PURE__*/ + (0, _emotion.css)({ + position: 'fixed', + left: 0, + bottom: 0, + right: 0, + top: 0 + }) + }), _react.default.createElement(_NodeResolver.default, { + innerRef: this.getScrollTarget + }, children), touchScrollTarget ? _react.default.createElement(_index.default, { + touchScrollTarget: touchScrollTarget + }) : null); + } + }]); + + return ScrollBlock; +}(_react.PureComponent); + +exports.default = ScrollBlock; \ No newline at end of file diff --git a/lib/internal/ScrollCaptor.js b/lib/internal/ScrollCaptor.js new file mode 100644 index 0000000000..6f847297ea --- /dev/null +++ b/lib/internal/ScrollCaptor.js @@ -0,0 +1,231 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _NodeResolver = _interopRequireDefault(require("./NodeResolver")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +var ScrollCaptor = +/*#__PURE__*/ +function (_Component) { + _inherits(ScrollCaptor, _Component); + + function ScrollCaptor() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollCaptor); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollCaptor)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isBottom", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isTop", false); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollTarget", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "touchStart", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cancelScroll", function (event) { + event.preventDefault(); + event.stopPropagation(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEventDelta", function (event, delta) { + var _this$props = _this.props, + onBottomArrive = _this$props.onBottomArrive, + onBottomLeave = _this$props.onBottomLeave, + onTopArrive = _this$props.onTopArrive, + onTopLeave = _this$props.onTopLeave; + var _this$scrollTarget = _this.scrollTarget, + scrollTop = _this$scrollTarget.scrollTop, + scrollHeight = _this$scrollTarget.scrollHeight, + clientHeight = _this$scrollTarget.clientHeight; + var target = _this.scrollTarget; + var isDeltaPositive = delta > 0; + var availableScroll = scrollHeight - clientHeight - scrollTop; + var shouldCancelScroll = false; // reset bottom/top flags + + if (availableScroll > delta && _this.isBottom) { + if (onBottomLeave) onBottomLeave(event); + _this.isBottom = false; + } + + if (isDeltaPositive && _this.isTop) { + if (onTopLeave) onTopLeave(event); + _this.isTop = false; + } // bottom limit + + + if (isDeltaPositive && delta > availableScroll) { + if (onBottomArrive && !_this.isBottom) { + onBottomArrive(event); + } + + target.scrollTop = scrollHeight; + shouldCancelScroll = true; + _this.isBottom = true; // top limit + } else if (!isDeltaPositive && -delta > scrollTop) { + if (onTopArrive && !_this.isTop) { + onTopArrive(event); + } + + target.scrollTop = 0; + shouldCancelScroll = true; + _this.isTop = true; + } // cancel scroll + + + if (shouldCancelScroll) { + _this.cancelScroll(event); + } + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onWheel", function (event) { + _this.handleEventDelta(event, event.deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchStart", function (event) { + // set touch start so we can calculate touchmove delta + _this.touchStart = event.changedTouches[0].clientY; + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onTouchMove", function (event) { + var deltaY = _this.touchStart - event.changedTouches[0].clientY; + + _this.handleEventDelta(event, deltaY); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getScrollTarget", function (ref) { + _this.scrollTarget = ref; + }); + + return _this; + } + + _createClass(ScrollCaptor, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.startListening(this.scrollTarget); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.stopListening(this.scrollTarget); + } + }, { + key: "startListening", + value: function startListening(el) { + // bail early if no scroll available + if (!el) return; + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.addEventListener === 'function') { + el.addEventListener('wheel', this.onWheel, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.addEventListener === 'function') { + el.addEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "stopListening", + value: function stopListening(el) { + // bail early if no scroll available + if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢 + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('wheel', this.onWheel, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchstart', this.onTouchStart, false); + } + + if (typeof el.removeEventListener === 'function') { + el.removeEventListener('touchmove', this.onTouchMove, false); + } + } + }, { + key: "render", + value: function render() { + return _react.default.createElement(_NodeResolver.default, { + innerRef: this.getScrollTarget + }, this.props.children); + } + }]); + + return ScrollCaptor; +}(_react.Component); + +var ScrollCaptorSwitch = +/*#__PURE__*/ +function (_Component2) { + _inherits(ScrollCaptorSwitch, _Component2); + + function ScrollCaptorSwitch() { + _classCallCheck(this, ScrollCaptorSwitch); + + return _possibleConstructorReturn(this, _getPrototypeOf(ScrollCaptorSwitch).apply(this, arguments)); + } + + _createClass(ScrollCaptorSwitch, [{ + key: "render", + value: function render() { + var _this$props2 = this.props, + isEnabled = _this$props2.isEnabled, + props = _objectWithoutProperties(_this$props2, ["isEnabled"]); + + return isEnabled ? _react.default.createElement(ScrollCaptor, props) : this.props.children; + } + }]); + + return ScrollCaptorSwitch; +}(_react.Component); + +exports.default = ScrollCaptorSwitch; + +_defineProperty(ScrollCaptorSwitch, "defaultProps", { + isEnabled: true +}); \ No newline at end of file diff --git a/lib/internal/ScrollLock/constants.js b/lib/internal/ScrollLock/constants.js new file mode 100644 index 0000000000..b62b5d87a1 --- /dev/null +++ b/lib/internal/ScrollLock/constants.js @@ -0,0 +1,16 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.LOCK_STYLES = exports.STYLE_KEYS = void 0; +var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position']; +exports.STYLE_KEYS = STYLE_KEYS; +var LOCK_STYLES = { + boxSizing: 'border-box', + // account for possible declaration `width: 100%;` on body + overflow: 'hidden', + position: 'relative', + height: '100%' +}; +exports.LOCK_STYLES = LOCK_STYLES; \ No newline at end of file diff --git a/lib/internal/ScrollLock/index.js b/lib/internal/ScrollLock/index.js new file mode 100644 index 0000000000..9b1900f383 --- /dev/null +++ b/lib/internal/ScrollLock/index.js @@ -0,0 +1,165 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = require("react"); + +var _constants = require("./constants"); + +var _utils = require("./utils"); + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); +var activeScrollLocks = 0; + +var ScrollLock = +/*#__PURE__*/ +function (_Component) { + _inherits(ScrollLock, _Component); + + function ScrollLock() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, ScrollLock); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollLock)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "originalStyles", {}); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "listenerOptions", { + capture: false, + passive: false + }); + + return _this; + } + + _createClass(ScrollLock, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + if (!canUseDOM) return; + var _this$props = this.props, + accountForScrollbars = _this$props.accountForScrollbars, + touchScrollTarget = _this$props.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; + + if (accountForScrollbars) { + // store any styles already applied to the body + _constants.STYLE_KEYS.forEach(function (key) { + var val = targetStyle && targetStyle[key]; + _this2.originalStyles[key] = val; + }); + } // apply the lock styles and padding if this is the first scroll lock + + + if (accountForScrollbars && activeScrollLocks < 1) { + var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0; + var clientWidth = document.body ? document.body.clientWidth : 0; + var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0; + Object.keys(_constants.LOCK_STYLES).forEach(function (key) { + var val = _constants.LOCK_STYLES[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + + if (targetStyle) { + targetStyle.paddingRight = "".concat(adjustedPadding, "px"); + } + } // account for touch devices + + + if (target && (0, _utils.isTouchDevice)()) { + // Mobile Safari ignores { overflow: hidden } declaration on the body. + target.addEventListener('touchmove', _utils.preventTouchMove, this.listenerOptions); // Allow scroll on provided target + + if (touchScrollTarget) { + touchScrollTarget.addEventListener('touchstart', _utils.preventInertiaScroll, this.listenerOptions); + touchScrollTarget.addEventListener('touchmove', _utils.allowTouchMove, this.listenerOptions); + } + } // increment active scroll locks + + + activeScrollLocks += 1; + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (!canUseDOM) return; + var _this$props2 = this.props, + accountForScrollbars = _this$props2.accountForScrollbars, + touchScrollTarget = _this$props2.touchScrollTarget; + var target = document.body; + var targetStyle = target && target.style; // safely decrement active scroll locks + + activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any + + if (accountForScrollbars && activeScrollLocks < 1) { + _constants.STYLE_KEYS.forEach(function (key) { + var val = _this3.originalStyles[key]; + + if (targetStyle) { + targetStyle[key] = val; + } + }); + } // remove touch listeners + + + if (target && (0, _utils.isTouchDevice)()) { + target.removeEventListener('touchmove', _utils.preventTouchMove, this.listenerOptions); + + if (touchScrollTarget) { + touchScrollTarget.removeEventListener('touchstart', _utils.preventInertiaScroll, this.listenerOptions); + touchScrollTarget.removeEventListener('touchmove', _utils.allowTouchMove, this.listenerOptions); + } + } + } + }, { + key: "render", + value: function render() { + return null; + } + }]); + + return ScrollLock; +}(_react.Component); + +exports.default = ScrollLock; + +_defineProperty(ScrollLock, "defaultProps", { + accountForScrollbars: true +}); \ No newline at end of file diff --git a/lib/internal/ScrollLock/utils.js b/lib/internal/ScrollLock/utils.js new file mode 100644 index 0000000000..ac8d325145 --- /dev/null +++ b/lib/internal/ScrollLock/utils.js @@ -0,0 +1,35 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.preventTouchMove = preventTouchMove; +exports.allowTouchMove = allowTouchMove; +exports.preventInertiaScroll = preventInertiaScroll; +exports.isTouchDevice = isTouchDevice; + +function preventTouchMove(e) { + e.preventDefault(); +} + +function allowTouchMove(e) { + e.stopPropagation(); +} + +function preventInertiaScroll() { + var top = this.scrollTop; + var totalScroll = this.scrollHeight; + var currentScroll = top + this.offsetHeight; + + if (top === 0) { + this.scrollTop = 1; + } else if (currentScroll === totalScroll) { + this.scrollTop = top - 1; + } +} // `ontouchstart` check works on most browsers +// `maxTouchPoints` works on IE10/11 and Surface + + +function isTouchDevice() { + return 'ontouchstart' in window || navigator.maxTouchPoints; +} \ No newline at end of file diff --git a/lib/internal/index.js b/lib/internal/index.js new file mode 100644 index 0000000000..0d07271929 --- /dev/null +++ b/lib/internal/index.js @@ -0,0 +1,47 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "A11yText", { + enumerable: true, + get: function get() { + return _A11yText.default; + } +}); +Object.defineProperty(exports, "DummyInput", { + enumerable: true, + get: function get() { + return _DummyInput.default; + } +}); +Object.defineProperty(exports, "NodeResolver", { + enumerable: true, + get: function get() { + return _NodeResolver.default; + } +}); +Object.defineProperty(exports, "ScrollBlock", { + enumerable: true, + get: function get() { + return _ScrollBlock.default; + } +}); +Object.defineProperty(exports, "ScrollCaptor", { + enumerable: true, + get: function get() { + return _ScrollCaptor.default; + } +}); + +var _A11yText = _interopRequireDefault(require("./A11yText")); + +var _DummyInput = _interopRequireDefault(require("./DummyInput")); + +var _NodeResolver = _interopRequireDefault(require("./NodeResolver")); + +var _ScrollBlock = _interopRequireDefault(require("./ScrollBlock")); + +var _ScrollCaptor = _interopRequireDefault(require("./ScrollCaptor")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/lib/internal/react-fast-compare.js b/lib/internal/react-fast-compare.js new file mode 100644 index 0000000000..8bcbd260a4 --- /dev/null +++ b/lib/internal/react-fast-compare.js @@ -0,0 +1,100 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exportedEqual; + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +var isArray = Array.isArray; +var keyList = Object.keys; +var hasProp = Object.prototype.hasOwnProperty; + +function equal(a, b) { + // fast-deep-equal index.js 2.0.1 + if (a === b) return true; + + if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') { + var arrA = isArray(a), + arrB = isArray(b), + i, + length, + key; + + if (arrA && arrB) { + length = a.length; + if (length != b.length) return false; + + for (i = length; i-- !== 0;) { + if (!equal(a[i], b[i])) return false; + } + + return true; + } + + if (arrA != arrB) return false; + var dateA = a instanceof Date, + dateB = b instanceof Date; + if (dateA != dateB) return false; + if (dateA && dateB) return a.getTime() == b.getTime(); + var regexpA = a instanceof RegExp, + regexpB = b instanceof RegExp; + if (regexpA != regexpB) return false; + if (regexpA && regexpB) return a.toString() == b.toString(); + var keys = keyList(a); + length = keys.length; + + if (length !== keyList(b).length) { + return false; + } + + for (i = length; i-- !== 0;) { + if (!hasProp.call(b, keys[i])) return false; + } // end fast-deep-equal + // Custom handling for React + + + for (i = length; i-- !== 0;) { + key = keys[i]; + + if (key === '_owner' && a.$$typeof) { + // React-specific: avoid traversing React elements' _owner. + // _owner contains circular references + // and is not needed when comparing the actual elements (and not their owners) + // .$$typeof and ._store on just reasonable markers of a react element + continue; + } else { + // all other properties should be traversed as usual + if (!equal(a[key], b[key])) return false; + } + } // fast-deep-equal index.js 2.0.1 + + + return true; + } + + return a !== a && b !== b; +} // end fast-deep-equal + + +function exportedEqual(a, b) { + try { + return equal(a, b); + } catch (error) { + if (error.message && error.message.match(/stack|recursion/i)) { + // warn on circular references, don't crash + // browsers give this different errors name and messages: + // chrome/safari: "RangeError", "Maximum call stack size exceeded" + // firefox: "InternalError", too much recursion" + // edge: "Error", "Out of stack space" + console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message); + return false; + } // some other error. we should definitely know about these + + + throw error; + } +} + +; \ No newline at end of file diff --git a/lib/stateManager.js b/lib/stateManager.js new file mode 100644 index 0000000000..c78aef8641 --- /dev/null +++ b/lib/stateManager.js @@ -0,0 +1,172 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.defaultProps = void 0; + +var _react = _interopRequireWildcard(require("react")); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +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; } + +var defaultProps = { + defaultInputValue: '', + defaultMenuIsOpen: false, + defaultValue: null +}; +exports.defaultProps = defaultProps; + +var manageState = function manageState(SelectComponent) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inherits(StateManager, _Component); + + function StateManager() { + var _getPrototypeOf2; + + var _this; + + _classCallCheck(this, StateManager); + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args))); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "select", void 0); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { + inputValue: _this.props.inputValue !== undefined ? _this.props.inputValue : _this.props.defaultInputValue, + menuIsOpen: _this.props.menuIsOpen !== undefined ? _this.props.menuIsOpen : _this.props.defaultMenuIsOpen, + value: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value, actionMeta) { + _this.callProp('onChange', value, actionMeta); + + _this.setState({ + value: value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInputChange", function (value, actionMeta) { + // TODO: for backwards compatibility, we allow the prop to return a new + // value, but now inputValue is a controllable prop we probably shouldn't + var newValue = _this.callProp('onInputChange', value, actionMeta); + + _this.setState({ + inputValue: newValue !== undefined ? newValue : value + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuOpen", function () { + _this.callProp('onMenuOpen'); + + _this.setState({ + menuIsOpen: true + }); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMenuClose", function () { + _this.callProp('onMenuClose'); + + _this.setState({ + menuIsOpen: false + }); + }); + + return _this; + } + + _createClass(StateManager, [{ + key: "focus", + value: function focus() { + this.select.focus(); + } + }, { + key: "blur", + value: function blur() { + this.select.blur(); + } // FIXME: untyped flow code, return any + + }, { + key: "getProp", + value: function getProp(key) { + return this.props[key] !== undefined ? this.props[key] : this.state[key]; + } // FIXME: untyped flow code, return any + + }, { + key: "callProp", + value: function callProp(name) { + if (typeof this.props[name] === 'function') { + var _this$props; + + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + return (_this$props = this.props)[name].apply(_this$props, args); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props2 = this.props, + defaultInputValue = _this$props2.defaultInputValue, + defaultMenuIsOpen = _this$props2.defaultMenuIsOpen, + defaultValue = _this$props2.defaultValue, + props = _objectWithoutProperties(_this$props2, ["defaultInputValue", "defaultMenuIsOpen", "defaultValue"]); + + return _react.default.createElement(SelectComponent, _extends({}, props, { + ref: function ref(_ref) { + _this2.select = _ref; + }, + inputValue: this.getProp('inputValue'), + menuIsOpen: this.getProp('menuIsOpen'), + onChange: this.onChange, + onInputChange: this.onInputChange, + onMenuClose: this.onMenuClose, + onMenuOpen: this.onMenuOpen, + value: this.getProp('value') + })); + } + }]); + + return StateManager; + }(_react.Component), _defineProperty(_class, "defaultProps", defaultProps), _temp; +}; + +var _default = manageState; +exports.default = _default; \ No newline at end of file diff --git a/lib/styles.js b/lib/styles.js new file mode 100644 index 0000000000..2f8f044d41 --- /dev/null +++ b/lib/styles.js @@ -0,0 +1,78 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.mergeStyles = mergeStyles; +exports.defaultStyles = void 0; + +var _containers = require("./components/containers"); + +var _Control = require("./components/Control"); + +var _Group = require("./components/Group"); + +var _indicators = require("./components/indicators"); + +var _Input = require("./components/Input"); + +var _Placeholder = require("./components/Placeholder"); + +var _Option = require("./components/Option"); + +var _Menu = require("./components/Menu"); + +var _SingleValue = require("./components/SingleValue"); + +var _MultiValue = require("./components/MultiValue"); + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +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; } + +var defaultStyles = { + clearIndicator: _indicators.clearIndicatorCSS, + container: _containers.containerCSS, + control: _Control.css, + dropdownIndicator: _indicators.dropdownIndicatorCSS, + group: _Group.groupCSS, + groupHeading: _Group.groupHeadingCSS, + indicatorsContainer: _containers.indicatorsContainerCSS, + indicatorSeparator: _indicators.indicatorSeparatorCSS, + input: _Input.inputCSS, + loadingIndicator: _indicators.loadingIndicatorCSS, + loadingMessage: _Menu.loadingMessageCSS, + menu: _Menu.menuCSS, + menuList: _Menu.menuListCSS, + menuPortal: _Menu.menuPortalCSS, + multiValue: _MultiValue.multiValueCSS, + multiValueLabel: _MultiValue.multiValueLabelCSS, + multiValueRemove: _MultiValue.multiValueRemoveCSS, + noOptionsMessage: _Menu.noOptionsMessageCSS, + option: _Option.optionCSS, + placeholder: _Placeholder.placeholderCSS, + singleValue: _SingleValue.css, + valueContainer: _containers.valueContainerCSS +}; // Merge Utility +// Allows consumers to extend a base Select with additional styles + +exports.defaultStyles = defaultStyles; + +function mergeStyles(source) { + var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + // initialize with source styles + var styles = _objectSpread({}, source); // massage in target styles + + + Object.keys(target).forEach(function (key) { + if (source[key]) { + styles[key] = function (rsCss, props) { + return target[key](source[key](rsCss, props), props); + }; + } else { + styles[key] = target[key]; + } + }); + return styles; +} \ No newline at end of file diff --git a/lib/theme.js b/lib/theme.js new file mode 100644 index 0000000000..32295dbb65 --- /dev/null +++ b/lib/theme.js @@ -0,0 +1,48 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.defaultTheme = exports.spacing = exports.colors = void 0; +var colors = { + primary: '#2684FF', + primary75: '#4C9AFF', + primary50: '#B2D4FF', + primary25: '#DEEBFF', + danger: '#DE350B', + dangerLight: '#FFBDAD', + neutral0: 'hsl(0, 0%, 100%)', + neutral5: 'hsl(0, 0%, 95%)', + neutral10: 'hsl(0, 0%, 90%)', + neutral20: 'hsl(0, 0%, 80%)', + neutral30: 'hsl(0, 0%, 70%)', + neutral40: 'hsl(0, 0%, 60%)', + neutral50: 'hsl(0, 0%, 50%)', + neutral60: 'hsl(0, 0%, 40%)', + neutral70: 'hsl(0, 0%, 30%)', + neutral80: 'hsl(0, 0%, 20%)', + neutral90: 'hsl(0, 0%, 10%)' +}; +exports.colors = colors; +var borderRadius = 4; +var baseUnit = 4; +/* Used to calculate consistent margin/padding on elements */ + +var controlHeight = 38; +/* The minimum height of the control */ + +var menuGutter = baseUnit * 2; +/* The amount of space between the control and menu */ + +var spacing = { + baseUnit: baseUnit, + controlHeight: controlHeight, + menuGutter: menuGutter +}; +exports.spacing = spacing; +var defaultTheme = { + borderRadius: borderRadius, + colors: colors, + spacing: spacing +}; +exports.defaultTheme = defaultTheme; \ No newline at end of file diff --git a/lib/types.js b/lib/types.js new file mode 100644 index 0000000000..9a390c31f7 --- /dev/null +++ b/lib/types.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/lib/utils.js b/lib/utils.js new file mode 100644 index 0000000000..f27cd9c818 --- /dev/null +++ b/lib/utils.js @@ -0,0 +1,260 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.classNames = classNames; +exports.handleInputChange = handleInputChange; +exports.isDocumentElement = isDocumentElement; +exports.normalizedHeight = normalizedHeight; +exports.getScrollTop = getScrollTop; +exports.scrollTo = scrollTo; +exports.getScrollParent = getScrollParent; +exports.animatedScrollTo = animatedScrollTo; +exports.scrollIntoView = scrollIntoView; +exports.getBoundingClientObj = getBoundingClientObj; +exports.toKey = toKey; +exports.isTouchCapable = isTouchCapable; +exports.isMobileDevice = isMobileDevice; +exports.cleanValue = exports.emptyString = exports.noop = void 0; + +var _raf = _interopRequireDefault(require("raf")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +// ============================== +// NO OP +// ============================== +var noop = function noop() {}; + +exports.noop = noop; + +var emptyString = function emptyString() { + return ''; +}; // ============================== +// 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' +*/ + + +exports.emptyString = emptyString; + +function applyPrefixToName(prefix, name) { + if (!name) { + return prefix; + } else if (name[0] === '-') { + return prefix + name; + } else { + return prefix + '__' + name; + } +} + +function classNames(prefix, cssKey, state, className) { + var arr = [cssKey, className]; + + if (state && prefix) { + for (var key in state) { + if (state.hasOwnProperty(key) && state[key]) { + arr.push("".concat(applyPrefixToName(prefix, key))); + } + } + } + + return arr.filter(function (i) { + return i; + }).map(function (i) { + return String(i).trim(); + }).join(' '); +} // ============================== +// Clean Value +// ============================== + + +var cleanValue = function cleanValue(value) { + if (Array.isArray(value)) return value.filter(Boolean); + if (_typeof(value) === 'object' && value !== null) return [value]; + return []; +}; // ============================== +// Handle Input Change +// ============================== + + +exports.cleanValue = cleanValue; + +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)/; + 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) { + (0, _raf.default)(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 + }; +} + +// ============================== +// String to Key (kebabify) +// ============================== +function toKey(str) { + return str.replace(/\W/g, '-'); +} // ============================== +// 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; + } +} \ No newline at end of file