react-cm-ui/core/inputs/select/select.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _reactSelect = _interopRequireDefault(require("react-select"));

var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));

var _constants = require("../../global/constants");

var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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) { "@babel/helpers - typeof"; 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var propTypes = {
  /**
   * Override or extend the styles applied to Select.
   */
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string
  }),

  /**
  * Assign additional class names to Select.
  */
  className: _propTypes["default"].string,

  /**
  * A Select can clear its value using close icon
  */
  clearable: _propTypes["default"].bool,

  /**
  * A Select can create custom options
  */
  creatable: _propTypes["default"].bool,

  /**
  * Deprecated prop. Please use `disabled` instead.
  */
  disable: _propTypes["default"].bool,

  /**
  * A Select can be disabled
  */
  disabled: _propTypes["default"].bool,

  /**
  * Supply style to dropdown menu container
  */
  dropdownMenuContainerStyle: _propTypes["default"].shape({}),

  /**
  * Supply dropdown menu maximum height
  */
  dropdownMenuMaxHeight: _propTypes["default"].number,

  /**
  * Supply dropdown menu minimum height
  */
  dropdownMenuMinHeight: _propTypes["default"].number,

  /**
  * Supply dropdown menu style
  */
  dropdownMenuStyle: _propTypes["default"].shape({}),

  /**
   * Indicates that the Select has an error.
   */
  error: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),

  /**
   * A Select will be resized to its parent container's width.
   */
  fluid: _propTypes["default"].bool,

  /**
   * The `id` of the Select.
   */
  id: _propTypes["default"].string,

  /**
   * The label for the Select.
   */
  label: _propTypes["default"].string,

  /**
   * Whether to match the value, label or both values of each selection option when filtering.
   * enums:any, label, value
   */
  matchProp: _propTypes["default"].oneOf(['any', 'label', 'value']),

  /**
   * A Select can have multiple values
   */
  multiple: _propTypes["default"].bool,

  /**
   * Placeholder displayed when there are no matching search results or a falsy value to hide it
   * (can also be a react component)
   */
  noResultsText: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),

  /**
   * The onChange event handler.
   */
  onChange: _propTypes["default"].func,

  /**
   * The onClose event handler.
   */
  onClose: _propTypes["default"].func,

  /**
   * The onOpen event handler.
   */
  onOpen: _propTypes["default"].func,

  /**
   * A Select can have custom option component
   */
  optionComponent: _propTypes["default"].func,

  /**
   * Supply a list of options that the user can select from.
   */
  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),

  /**
   * Supply a placeholder text for the best UX.
   */
  placeholder: _propTypes["default"].string,

  /**
   * Supply a custom label option, when creatable is true
   */
  promptTextCreator: _propTypes["default"].func,

  /**
   * A Select can be required
   */
  required: _propTypes["default"].bool,

  /**
  * A Select can enable option search
  */
  searchable: _propTypes["default"].bool,

  /**
   * Indicates whether or not the Select can be focused.
   */
  tabIndex: _propTypes["default"].number,

  /**
   * Underlined Select selection.
   */
  underline: _propTypes["default"].bool,
  value: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].shape({})), _propTypes["default"].shape({}), _propTypes["default"].string]),
  valueComponent: _propTypes["default"].func
};
var defaultProps = {
  classes: null,
  className: null,
  clearable: false,
  creatable: false,
  error: null,
  disable: false,
  disabled: false,
  dropdownMenuContainerStyle: null,
  dropdownMenuMaxHeight: 180,
  dropdownMenuMinHeight: null,
  dropdownMenuStyle: null,
  fluid: false,
  id: null,
  label: null,
  matchProp: 'any',
  multiple: false,
  noResultsText: 'No results found',
  onChange: null,
  onClose: undefined,
  onOpen: undefined,
  optionComponent: null,
  options: [],
  promptTextCreator: undefined,
  placeholder: null,
  required: false,
  searchable: false,
  tabIndex: -1,
  underline: false,
  value: {},
  valueComponent: undefined
};

var CustomReactSelect = /*#__PURE__*/function (_ReactSelect) {
  _inherits(CustomReactSelect, _ReactSelect);

  var _super = _createSuper(CustomReactSelect);

  function CustomReactSelect() {
    _classCallCheck(this, CustomReactSelect);

    return _super.apply(this, arguments);
  }

  _createClass(CustomReactSelect, [{
    key: "renderHiddenField",
    value: function renderHiddenField(valueArray) {
      var _this$props = this.props,
          menuContainerStyle = _this$props.menuContainerStyle,
          menuStyle = _this$props.menuStyle,
          multi = _this$props.multi,
          removeSelected = _this$props.removeSelected;
      var options = this.filterOptions(multi && removeSelected ? valueArray : null); // eslint-disable-next-line no-underscore-dangle

      this._visibleOptions = options;
      var menu = this.renderMenu(options, valueArray);

      var styles = _objectSpread(_objectSpread({}, menuContainerStyle), {}, {
        visibility: 'hidden'
      });

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "Select-menu-outer",
        style: styles
      }, /*#__PURE__*/_react["default"].createElement("div", {
        role: "listbox",
        tabIndex: -1,
        className: "Select-menu" // eslint-disable-next-line no-underscore-dangle
        ,
        id: "".concat(this._instancePrefix, "-list"),
        style: menuStyle
      }, menu));
    }
  }]);

  return CustomReactSelect;
}(_reactSelect["default"]);

var CustomCreatableSelect = function CustomCreatableSelect(props) {
  return /*#__PURE__*/_react["default"].createElement(CustomReactSelect // eslint-disable-next-line react/jsx-props-no-spreading
  , props);
};

var useStyles = (0, _makeStyles["default"])(function (theme) {
  var p = theme.palette,
      spacing = theme.spacing,
      typography = theme.typography;
  var darkThemeBoxShadow = '0 4px 4px 0 rgba(0, 0, 0, 0.43)'; // Control Options

  var selectInputBg = p.background.primary;
  var selectInputBgFocus = p.background.contrastPrimary;
  var selectInputBgDisabled = p.background.secondary;
  var selectInputBorderColor = p.border.primary;
  var selectInputBorderRadius = '3px';
  var selectInputBorderFocus = p.cyan[500];
  var selectInputBorderWidth = 1;
  var selectInputArrowColorFocus = p.text.contrastText;
  var selectInputHeight = 44;
  var selectInputInternalHeight = selectInputHeight - selectInputBorderWidth * 2;
  var selectInputPlaceholder = p.text.secondary;
  var selectTextColor = p.text.primary;
  var selectTextColorFocus = p.text.contrastText;
  var selectLinkHoverColor = selectInputBgFocus;
  var selectPaddingHorizontal = 11; // Menu Options

  var selectMenuBg = p.grey[500];
  var selectMenuBorderRadius = 3;
  var selectMenuMarginTop = 4;
  var selectMenuPaddingVertical = 11;
  var selectMenuZindex = 1000;
  var selectOptionBg = selectMenuBg;
  var selectOptionColor = p.text.contrastText;
  var selectOptionFocusedColor = p.text.primary;
  var selectOptionFocusedBg = p.background.primary;
  var selectOptionSelectedColor = p.text.primary;
  var selectOptionSelectedBg = p.background.primary;
  var selectOptionDisabledColor = p.text.secondary;
  var selectOptionMarginVertical = 4;
  var selectOptionPaddingHorizontal = 22;
  var selectOptionPaddingVertical = 7;
  var selectNoresultsColor = p.text.contrastText; // clear "x" button

  var selectClearSize = "floor((".concat(selectInputHeight, " / 2))");
  var selectClearColor = '#999';
  var selectClearHoverColor = '#D0021B';
  var selectClearWidth = 16; // arrow indicator

  var selectArrowColor = '#999';
  var selectArrowColorHover = '#666';
  var selectArrowWidth = 16; // loading indicator

  var selectLoadingSize = 16;
  var selectLoadingColor = selectTextColor;
  var selectLoadingColorBg = selectInputBorderColor; // multi-select item

  var selectItemBorderRadius = 2;
  var selectItemGutter = 5;
  var selectItemFontSize = '.9em';
  var selectItemColor = '#08c';
  var selectItemBg = '#f2f9fc';
  var selectItemBorderColor = selectItemBg;
  var selectItemDisabledBg = '#fcfcfc';
  var selectItemDisabledBorderColor = selectItemDisabledBg;
  return {
    '@keyframes selectAnimationSpin': {
      to: {
        transform: 'rotate(1turn)'
      }
    },
    '@keyframes selectAnimationFadeIn': {
      from: {
        opacity: 0
      },
      to: {
        opacity: 1
      }
    },
    errorMessage: {
      color: p.error.main,
      fontSize: typography.pxToRem(14),
      marginTop: spacing(0.5)
    },
    hasError: {},
    isFluid: {},
    isUnderlined: {},
    label: {
      marginBottom: 8
    },
    requiredIndicator: {
      color: p.error.main,
      display: 'inline-block',
      fontSize: typography.pxToRem(14),
      marginLeft: 3
    },
    root: {
      display: 'inline-block',
      minWidth: 200,
      position: 'relative',
      '&$isFluid': {
        display: 'block'
      },
      '& .Select': {
        position: 'relative',
        '&, & div, & input, & span': {
          boxSizing: 'border-box'
        },
        '&.is-disabled': {
          '& > .Select-control': {
            backgroundColor: selectInputBgDisabled,
            '&:hover': {
              boxShadow: 'none'
            }
          },
          '& .Select-arrow-zone': {
            cursor: 'default',
            pointerEvents: 'none',
            '& .ui.icon .icon-use-path': {
              fill: p.grey[400]
            }
          }
        }
      },
      '& .Select-control': {
        backgroundColor: selectInputBg,
        border: "".concat(selectInputBorderWidth, "px solid ").concat(selectInputBorderColor),
        borderCollapse: 'separate',
        borderColor: "".concat(selectInputBorderColor, " ").concat(selectInputBorderColor, " ").concat(selectInputBorderColor),
        borderRadius: selectInputBorderRadius,
        borderSpacing: 0,
        color: selectTextColor,
        cursor: 'default',
        display: 'table',
        height: selectInputHeight,
        outline: 'none',
        position: 'relative',
        width: '100%',
        '&:hover': {
          boxShadow: '0 1px 0 rgba(0, 0, 0, 0.06)'
        },
        '& .Select-input:focus': {
          outline: 'none'
        }
      },
      '&$hasError .Select-control': {
        borderColor: p.error.main
      },
      '& .is-searchable.is-open > .Select-control': {
        cursor: 'text'
      },
      '& .is-open:not(.Select--multi) > .Select-control': {
        backgroundColor: selectInputBgFocus,
        borderColor: "".concat(selectInputBorderColor, " ").concat(selectInputBorderColor, " ").concat(selectInputBorderColor),
        color: selectTextColorFocus,
        '& .Select-arrow': {
          borderColor: "transparent transparent ".concat(selectArrowColor),
          borderWidth: "0 ".concat(selectArrowWidth, " ").concat(selectArrowWidth),
          top: -2
        },
        '& .Select-value-label': {
          color: "".concat(p.text.contrastText, " !important")
        },
        '& .Select-arrow-zone, & .Select-clear-zone': {
          '& .ui.icon .icon-use-path': {
            fill: selectInputArrowColorFocus
          }
        }
      },
      '& .is-searchable.is-focused:not(.is-open) > .Select-control': {
        cursor: 'text'
      },
      '& .is-focused:not(.is-open) > .Select-control': {
        borderColor: "".concat(selectInputBorderFocus, " ").concat(selectInputBorderFocus, " ").concat(selectInputBorderFocus),
        boxShadow: [['inset 0 1px 2px rgba(0, 0, 0, 0.1)'], ["0 0 5px -1px rgba(".concat(selectInputBorderFocus, ", 50%)")]]
      },
      '& .Select-placeholder, & .Select--single > .Select-control .Select-value': {
        bottom: 0,
        color: selectInputPlaceholder,
        left: 0,
        lineHeight: "".concat(selectInputInternalHeight, "px"),
        maxWidth: '100%',
        overflow: 'hidden',
        paddingLeft: selectPaddingHorizontal,
        paddingRight: selectPaddingHorizontal,
        position: 'absolute',
        right: 0,
        textOverflow: 'ellipsis',
        top: 0,
        whiteSpace: 'nowrap'
      },
      '& .has-value.Select--single > .Select-control .Select-value, & .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value': {
        '& .Select-value-label': {
          color: selectTextColor
        },
        '& a.Select-value-label': {
          cursor: 'pointer',
          textDecoration: 'none',
          '&:hover, &:focus': {
            color: selectLinkHoverColor,
            outline: 'none',
            textDecoration: 'underline'
          }
        }
      },
      '& .Select-input': {
        height: "".concat(selectInputInternalHeight, "px"),
        paddingLeft: selectPaddingHorizontal,
        paddingRight: selectPaddingHorizontal,
        verticalAlign: 'middle',
        '& > input': {
          background: 'none transparent',
          border: '0 none',
          boxShadow: 'none',
          cursor: 'default',
          display: 'inline-block',
          fontFamily: 'inherit',
          fontSize: 'inherit',
          margin: 0,
          outline: 'none',
          lineHeight: '14px',
          padding: "".concat((selectInputInternalHeight - 14) / 2 - 2, "px 0 ").concat((selectInputInternalHeight - 14) / 2 + 2, "px"),
          WebkitAppearance: 'none',
          '& .is-focused &': {
            cursor: 'text'
          }
        }
      },
      '& .has-value.is-pseudo-focused .Select-input': {
        opacity: 0
      },
      '& .Select-control:not(.is-searchable) > .Select-input': {
        outline: 'none'
      },
      '& .Select-loading-zone': {
        cursor: 'pointer',
        display: 'table-cell',
        position: 'relative',
        textAlign: 'center',
        verticalAlign: 'middle',
        width: selectLoadingSize
      },
      '& .Select-loading': {
        animation: '$selectAnimationSpin 400ms infinite linear',
        border: "floor((".concat(selectLoadingSize / 8, ")) solid ").concat(selectLoadingColorBg),
        borderRadius: '50%',
        borderRightColor: selectLoadingColor,
        boxSizing: 'border-box',
        display: 'inline-block',
        height: selectLoadingSize,
        position: 'relative',
        width: selectLoadingSize,
        verticalAlign: 'middle'
      },
      '& .Select-clear-zone': {
        animation: '$selectAnimationFadeIn 200ms',
        color: selectClearColor,
        cursor: 'pointer',
        display: 'table-cell',
        paddingRight: 11,
        position: 'relative',
        textAlign: 'center',
        verticalAlign: 'middle',
        width: selectClearWidth,
        '& > div': {
          alignItems: 'center',
          display: 'flex',
          justifyContent: 'center'
        },
        '&:hover': {
          color: selectClearHoverColor
        }
      },
      '& .Select-clear': {
        display: 'inline-block',
        fontSize: selectClearSize,
        lineHeight: 1
      },
      '& .Select--multi .Select-clear-zone': {
        width: selectClearWidth
      },
      '& .Select-multi-value-wrapper': {
        position: 'relative'
      },
      '& .Select .Select-aria-only': {
        display: 'inline-block',
        height: 1,
        width: 1,
        margin: '-1px',
        clip: 'rect(0,0,0,0)',
        overflow: 'hidden'
      },
      '& .Select-arrow-zone': {
        cursor: 'pointer',
        display: 'table-cell',
        paddingBottom: 0,
        paddingRight: 11,
        position: 'relative',
        textAlign: 'center',
        verticalAlign: 'middle',
        width: selectArrowWidth,
        '& > div': {
          alignItems: 'center',
          display: 'flex',
          justifyContent: 'center'
        }
      },
      '& .Select-arrow': {
        borderColor: "".concat(selectArrowColor, " transparent transparent"),
        borderStyle: 'solid',
        borderWidth: "".concat(selectArrowWidth, " ").concat(selectArrowWidth, " (").concat(selectArrowWidth, " / 2)"),
        display: 'inline-block',
        height: 0,
        position: 'relative',
        width: 0
      },
      '& .is-open .Select-arrow, & .Select-arrow-zone:hover > .Select-arrow': {
        borderTopColor: selectArrowColorHover
      },
      '& .Select-menu-outer': {
        backgroundColor: selectMenuBg,
        borderRadius: selectMenuBorderRadius,
        boxShadow: darkThemeBoxShadow,
        boxSizing: 'border-box',
        marginTop: selectMenuMarginTop,
        WebkitOverflowScrolling: 'touch',
        paddingBottom: selectMenuPaddingVertical,
        paddingTop: selectMenuPaddingVertical,
        position: 'absolute',
        top: '100%',
        width: '100%',
        zIndex: selectMenuZindex
      },
      '& .Select-option': {
        backgroundColor: selectOptionBg,
        boxSizing: 'border-box',
        color: selectOptionColor,
        cursor: 'pointer',
        display: 'block',
        fontSize: '14px',
        fontWeight: theme.typography.fontWeightMedium,
        margin: "".concat(selectOptionMarginVertical, "px 0"),
        padding: "".concat(selectOptionPaddingVertical, "px ").concat(selectOptionPaddingHorizontal, "px"),
        whiteSpace: 'nowrap',
        '&.is-selected': {
          backgroundColor: selectOptionSelectedBg,
          color: selectOptionSelectedColor
        },
        '&.is-focused, &:hover': {
          backgroundColor: selectOptionFocusedBg,
          color: selectOptionFocusedColor
        },
        '&.is-disabled': {
          backgroundColor: theme.palette.grey[500],
          color: selectOptionDisabledColor,
          cursor: 'not-allowed'
        }
      },
      '& .Select-noresults': {
        boxSizing: 'border-box',
        color: selectNoresultsColor,
        cursor: 'default',
        display: 'block',
        padding: "".concat(selectOptionPaddingVertical, "px ").concat(selectOptionPaddingHorizontal, "px")
      },
      '& .Select.Select--multi': {
        '& .Select-control': {
          backgroundColor: selectInputBg
        },
        '& .Select-input': {
          marginLeft: selectPaddingHorizontal,
          padding: 0,
          verticalAlign: 'middle'
        },
        '&.has-value .Select-input': {
          marginLeft: selectItemGutter
        },
        '& .Select-value': {
          alignItems: 'flex-start',
          backgroundColor: theme.palette.grey[100],
          border: "1px solid ".concat(theme.palette.border.primary),
          borderRadius: selectItemBorderRadius,
          color: 'p.text.primary',
          display: 'inline-flex',
          flexDirection: 'row-reverse',
          fontSize: selectItemFontSize,
          height: 30,
          justifyContent: 'flex-start',
          marginLeft: 6,
          marginTop: 6,
          verticalAlign: 'top'
        },
        '& .Select-value-label, & .Select-value-icon': {
          alignItems: 'center',
          alignSelf: 'stretch',
          display: 'inline-flex',
          flex: '0 1 auto',
          justifyContent: 'center',
          verticalAlign: 'middle'
        },
        '& .Select-value-label': {
          borderBottomLeftRadius: selectItemBorderRadius,
          borderTopLeftRadius: selectItemBorderRadius,
          cursor: 'default',
          fontSize: 14,
          padding: '0 11px'
        },
        '& a.Select-value-label': {
          color: selectItemColor,
          cursor: 'pointer',
          textDecoration: 'none',
          '&:hover': {
            textDecoration: 'underline'
          }
        },
        '& .Select-value-icon': {
          border: "1px solid ".concat(p.border.primary),
          borderBottomRightRadius: selectItemBorderRadius,
          borderRightRadius: selectItemBorderRadius,
          borderTopRightRadius: selectItemBorderRadius,
          color: p.text.secondary,
          cursor: 'pointer',
          lineHeight: 1,
          margin: '-1px -1px -1px 0',
          padding: '0 9px',
          position: 'relative',
          speak: 'none',
          textTransform: 'none',
          transition: [['background-color 150ms linear'], ['border-color 150ms linear'], ['color 150ms linear']],
          '&:hover, &:focus': {
            backgroundColor: p.grey[400],
            borderColor: p.grey[400],
            color: p.text.contrastText
          },
          '&:active': {
            backgroundColor: selectItemBorderColor
          }
        },
        '&.is-open > .Select-control .Select-arrow-zone .ui.icon .icon-use-path': {
          fill: p.cyan
        }
      },
      '& .Select--multi.is-disabled': {
        '& > .Select-control': {
          backgroundColor: selectInputBgDisabled,
          '&:hover': {
            boxShadow: 'none'
          }
        },
        '& .Select-value-icon': {
          cursor: 'not-allowed',
          borderRight: "1px solid ".concat(selectItemDisabledBorderColor),
          '&:hover, &:focus, &:active': {
            backgroundColor: selectItemDisabledBg
          }
        }
      },
      '&$isUnderlined': {
        '& .Select--single .Select-control': {
          borderLeft: 0,
          borderRadius: 0,
          borderRight: 0,
          borderTop: 0,
          fontSize: '14px',
          height: 32,
          '&:hover': {
            boxShadow: 'none'
          },
          '& .Select-placeholder': {
            lineHeight: '33px',
            paddingLeft: 0,
            paddingRight: 0
          },
          '& .Select-value': {
            lineHeight: '33px',
            paddingLeft: 0
          },
          '& .Select-input': {
            height: 32,
            paddingLeft: 0,
            '& > input': {
              color: p.text.primary,
              padding: '7px 0 11px'
            }
          },
          '& .Select-arrow-zone': {
            paddingRight: 0,
            width: 10
          },
          '& .ui.icon-times': {
            height: 10,
            width: 10
          }
        },
        '& .is-open:not(.Select--multi).Select--single > .Select-control': {
          backgroundColor: p.background.primary,
          borderBottomColor: selectInputBorderColor,
          boxShadow: 'none',
          color: p.text.primary,
          '& .Select-arrow-zone .icon-use-path': {
            fill: "".concat(p.cyan[500], " !important")
          }
        }
      }
    }
  };
});
/**
 * The Select component represents a control that provides a menu of options.
 */
// eslint-disable-next-line prefer-arrow-callback

var Select = /*#__PURE__*/_react["default"].forwardRef(function Select(props, ref) {
  var _ClassNames;

  var className = props.className,
      isClearable = props.clearable,
      isCreatable = props.creatable,
      disableProp = props.disable,
      disabledProp = props.disabled,
      dropdownMenuContainerStyle = props.dropdownMenuContainerStyle,
      dropdownMenuStyle = props.dropdownMenuStyle,
      dropdownMenuMaxHeight = props.dropdownMenuMaxHeight,
      dropdownMenuMinHeight = props.dropdownMenuMinHeight,
      error = props.error,
      isFluid = props.fluid,
      id = props.id,
      label = props.label,
      matchProp = props.matchProp,
      multiple = props.multiple,
      noResultsText = props.noResultsText,
      onChangeProp = props.onChange,
      onClose = props.onClose,
      onOpenProp = props.onOpen,
      optionComponent = props.optionComponent,
      options = props.options,
      placeholder = props.placeholder,
      promptTextCreator = props.promptTextCreator,
      required = props.required,
      isSearchable = props.searchable,
      tabIndex = props.tabIndex,
      isUnderlined = props.underline,
      value = props.value,
      valueComponent = props.valueComponent,
      otherProps = _objectWithoutProperties(props, ["className", "clearable", "creatable", "disable", "disabled", "dropdownMenuContainerStyle", "dropdownMenuStyle", "dropdownMenuMaxHeight", "dropdownMenuMinHeight", "error", "fluid", "id", "label", "matchProp", "multiple", "noResultsText", "onChange", "onClose", "onOpen", "optionComponent", "options", "placeholder", "promptTextCreator", "required", "searchable", "tabIndex", "underline", "value", "valueComponent"]);

  var classes = useStyles(props);
  var innerMenuRef = (0, _react.useRef)();
  var menuScrollBarRef = (0, _react.useRef)();
  var focusedOptionRef = (0, _react.useRef)();

  var _React$useState = _react["default"].useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      scrollToFocusedOption = _React$useState2[0],
      setScrollToFocusedOption = _React$useState2[1];

  _react["default"].useEffect(function () {
    if (scrollToFocusedOption && focusedOptionRef && focusedOptionRef.current && innerMenuRef && innerMenuRef.current && menuScrollBarRef && menuScrollBarRef.current) {
      var focusedDOM = focusedOptionRef.current;
      var focusedRect = focusedDOM.getBoundingClientRect();
      var innerMenuDOM = innerMenuRef.current;
      var innerMenuRect = innerMenuDOM.getBoundingClientRect();

      if (focusedRect.bottom > innerMenuRect.bottom) {
        menuScrollBarRef.current.scrollTop(focusedDOM.offsetTop + focusedDOM.clientHeight - innerMenuDOM.offsetHeight);
      } else if (focusedRect.top < innerMenuRect.top) {
        menuScrollBarRef.current.scrollTop(focusedDOM.offsetTop);
      }

      setScrollToFocusedOption(false);
    }
  }, [scrollToFocusedOption]);

  var onChange = function onChange(selectedOption) {
    if ((0, _lodash.isFunction)(onChangeProp)) {
      onChangeProp(selectedOption);
    }
  };

  var menuRenderer = function menuRenderer(params) {
    var items = (0, _lodash.map)(params.options, function (o, i) {
      var isFocused = o === params.focusedOption;
      var isSelected = params.valueArray && params.valueArray.some(function (x) {
        return x[params.valueKey] === o[params.valueKey];
      });
      var optionClass = (0, _classnames["default"])('Select-option', params.optionClassName, {
        'is-disabled': o.disabled,
        'is-focused': isFocused,
        'is-selected': isSelected
      });

      if (optionComponent) {
        var OptionComponent = optionComponent;
        return /*#__PURE__*/_react["default"].createElement(OptionComponent, {
          className: optionClass,
          focusOption: params.focusOption,
          isDisabled: o.disabled,
          isFocused: isFocused,
          isSelected: isSelected,
          key: "select-option-key-".concat(i),
          onFocus: params.onFocus,
          onSelect: params.selectValue,
          option: o,
          ref: isFocused ? focusedOptionRef : undefined
        });
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        "aria-selected": isSelected,
        className: optionClass,
        key: "select-option-key-".concat(i),
        onClick: function onClick() {
          return params.selectValue(o);
        },
        onFocus: _lodash.noop,
        onKeyDown: _lodash.noop,
        onMouseOver: function onMouseOver() {
          return params.focusOption(o);
        },
        ref: isFocused ? focusedOptionRef : undefined,
        role: "option",
        tabIndex: 0
      }, o.label);
    });
    return /*#__PURE__*/_react["default"].createElement("div", {
      ref: innerMenuRef
    }, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
      autoHeight: true,
      autoHeightMax: dropdownMenuMaxHeight || 180,
      autoHeightMin: dropdownMenuMinHeight,
      autoHide: true,
      className: "select-menu-scrollbar",
      ref: menuScrollBarRef
    }, items));
  };

  var onInputKeyDown = function onInputKeyDown(event) {
    switch (event.keyCode) {
      case 38: // up

      case 40:
        // down
        setScrollToFocusedOption(true);
        break;

      default:
    }
  };

  var onOpen = function onOpen() {
    if ((0, _lodash.isFunction)(onOpenProp)) {
      onOpenProp();
    }

    if (menuScrollBarRef && menuScrollBarRef.current && value) {
      var itemHeight = menuScrollBarRef.current.getScrollHeight() / (0, _lodash.size)(options);
      var pageSize = menuScrollBarRef.current.getClientHeight() / itemHeight;
      var selectionIndex = (0, _lodash.findIndex)(options, function (o) {
        if (matchProp === 'any') {
          var hasValue = (0, _lodash.has)(o, 'value');
          var hasLabel = (0, _lodash.has)(o, 'label');

          if (!hasValue && !hasLabel) {
            return false;
          }

          return hasValue && o.value === value.value || o.value === value || hasLabel && o.label === value.label || o.label === value;
        }

        return o[matchProp] === value[matchProp];
      });
      var scrollRatio = selectionIndex / pageSize;

      if (scrollRatio >= 1) {
        menuScrollBarRef.current.scrollTop(scrollRatio * pageSize * itemHeight);
      }
    }
  };

  var rootClasses = (0, _classnames["default"])(_constants.UI_CLASS_NAME, _constants.BEM_SELECT, classes.root, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.hasError, !!error), _defineProperty(_ClassNames, classes.isFluid, isFluid), _defineProperty(_ClassNames, classes.isUnderlined, isUnderlined), _ClassNames));
  var showRequiredIndicator = required && (0, _lodash.isEmpty)(value);
  var ReactSelectComponent = isCreatable ? _reactSelect["default"].Creatable : CustomReactSelect;
  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, otherProps, {
    className: rootClasses,
    id: id,
    ref: ref
  }), label &&
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
  _react["default"].createElement("label", {
    className: (0, _classnames["default"])('label', classes.label)
  }, label, required && showRequiredIndicator ? /*#__PURE__*/_react["default"].createElement("span", {
    className: classes.requiredIndicator
  }, "*") : null), /*#__PURE__*/_react["default"].createElement(ReactSelectComponent, {
    arrowRenderer: function arrowRenderer() {
      if (isCreatable) {
        return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          compact: true,
          size: 16,
          title: "Select",
          type: "plus"
        }));
      }

      if (isUnderlined) {
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          compact: true,
          size: 10,
          title: "Select",
          type: "caret-down"
        });
      }

      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        compact: true,
        size: 16,
        title: "Select",
        type: "chevron-down"
      }));
    },
    clearRenderer: function clearRenderer() {
      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        compact: true,
        size: 16,
        title: "Clear Selection",
        type: "times"
      }));
    },
    clearable: isClearable,
    disabled: disabledProp || disableProp,
    matchProp: !isCreatable ? matchProp : null,
    menuContainerStyle: dropdownMenuContainerStyle,
    menuRenderer: menuRenderer,
    menuStyle: dropdownMenuStyle,
    multi: multiple,
    noResultsText: noResultsText,
    onClose: onClose,
    onInputKeyDown: onInputKeyDown,
    onOpen: onOpen,
    name: "firstSelect",
    onChange: onChange,
    optionComponent: optionComponent,
    options: options,
    promptTextCreator: isCreatable && promptTextCreator,
    placeholder: placeholder,
    searchable: isSearchable,
    tabIndex: tabIndex,
    value: value,
    valueComponent: valueComponent
  }, isCreatable && CustomCreatableSelect), (0, _lodash.isString)(error) && !!error && /*#__PURE__*/_react["default"].createElement("p", {
    className: classes.errorMessage
  }, error));
});

Select.propTypes = propTypes;
Select.defaultProps = defaultProps;
var _default = Select;
exports["default"] = _default;