@kineticdata/react 5.1.2 → 6.0.0

package/lib/components/common/Typeahead.js

@@ -1,13 +1,21 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { createRef, Fragment } from 'react';
-import Autosuggest from 'react-autosuggest';
-import { fromJS, is, List } from 'immutable';
-import { debounce } from 'lodash-es';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Typeahead = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAutosuggest = _interopRequireDefault(require("react-autosuggest"));
+var _immutable = require("immutable");
+var _lodashEs = require("lodash-es");
 var initialState = {
   editing: false,
   searchField: null,
@@ -15,23 +23,17 @@ var initialState = {
   refocus: false,
   result: null
 };
-export var Typeahead = /*#__PURE__*/function (_React$Component) {
-  _inherits(Typeahead, _React$Component);
-
-  var _super = _createSuper(Typeahead);
-
+var Typeahead = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Typeahead, _React$Component);
+  var _super = (0, _createSuper2["default"])(Typeahead);
   function Typeahead(props) {
     var _this;
-
-    _classCallCheck(this, Typeahead);
-
+    (0, _classCallCheck2["default"])(this, Typeahead);
     _this = _super.call(this, props);
-
     _this.edit = function (event) {
       if (event.type === 'click' || event.type === 'keydown' && (event.keyCode === 13 || event.keyCode === 32)) {
         event.preventDefault();
         event.stopPropagation();
-
         if (!_this.props.disabled) {
           _this.setState({
             editing: true
@@ -39,34 +41,28 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
         }
       }
     };
-
     _this.remove = function (i) {
       return function (event) {
         if (event) {
           event.preventDefault();
           event.stopPropagation();
         }
-
         if (!_this.props.disabled) {
           _this.props.onChange(_this.props.multiple ? _this.props.value["delete"](i) : null);
         }
       };
     };
-
     _this.onHighlight = function (_ref) {
       var suggestion = _ref.suggestion;
-
       if (typeof _this.props.onHighlight === 'function') {
         _this.props.onHighlight(suggestion);
       }
     };
-
     _this.onSuggestionsResponse = function (searchedValue) {
       return function (_ref2) {
         var suggestions = _ref2.suggestions,
-            error = _ref2.error,
-            nextPageToken = _ref2.nextPageToken;
-
+          error = _ref2.error,
+          nextPageToken = _ref2.nextPageToken;
         if (searchedValue === _this.state.searchValue) {
           // when multiple mode is enabled we don't want to allow the same
           // suggestion to be selected twice, we compare existing selections to
@@ -74,34 +70,31 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
           // this is necessary because one of the objects may have additional fields
           // but should be treated as equal to an object without those fields.
           var mappedValues = _this.props.multiple && _this.props.value.map(_this.props.getSuggestionValue);
-
           var filtered = suggestions.map(function (suggestion) {
-            return fromJS(suggestion);
+            return (0, _immutable.fromJS)(suggestion);
           }).filter(function (suggestion) {
             return !_this.props.multiple || !mappedValues.includes(_this.props.getSuggestionValue(suggestion));
           });
-          var customSuggestion = _this.props.custom && // if the current searchValue matches an existing suggestion we do not
+          var customSuggestion = _this.props.custom &&
+          // if the current searchValue matches an existing suggestion we do not
           // include it as a custom option
           filtered.filter(function (suggestion) {
             return _this.props.getSuggestionValue(suggestion) === _this.state.searchValue;
-          }).length === 0 && fromJS(_this.props.custom(_this.state.searchValue));
-
+          }).length === 0 && (0, _immutable.fromJS)(_this.props.custom(_this.state.searchValue));
           _this.setState({
             result: {
               error: error,
               nextPageToken: nextPageToken,
-              suggestions: customSuggestion ? [].concat(_toConsumableArray(filtered), [customSuggestion]) : filtered,
+              suggestions: customSuggestion ? [].concat((0, _toConsumableArray2["default"])(filtered), [customSuggestion]) : filtered,
               customSuggestion: customSuggestion
             }
           });
         }
       };
     };
-
     _this.onSuggestionsFetchRequested = function (_ref3) {
       var searchValue = _ref3.value,
-          reason = _ref3.reason;
-
+        reason = _ref3.reason;
       if (reason === 'escape-pressed' && _this.state.searchValue === '') {
         _this.setState(initialState);
       } else if (reason !== 'suggestion-selected') {
@@ -115,11 +108,9 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
-
     _this.onSuggestionsClearRequested = function () {
       _this.setState(initialState);
     };
-
     _this.setSearchField = function (searchField) {
       return function () {
         _this.setState({
@@ -127,48 +118,40 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
         });
       };
     };
-
     _this.onSuggestionSelected = function (event, _ref4) {
       var method = _ref4.method,
-          suggestion = _ref4.suggestion;
-
+        suggestion = _ref4.suggestion;
       // Prevent form submission if enter key is used to select suggestion.
       if (method === 'enter') {
         event.preventDefault();
-      } // Update state if single search or query is multiple and should be cleared
-
-
+      }
+      // Update state if single search or query is multiple and should be cleared
       if (!_this.props.multiple || !event.ctrlKey && !event.metaKey && !event.shiftKey) {
         _this.setState(_this.props.multiple ? {
           searchValue: ''
         } : initialState);
       }
-
       _this.props.onChange(_this.props.multiple ? _this.props.value.push(suggestion) : suggestion);
     };
-
     _this.state = initialState;
-    _this.autosuggest = createRef();
-    _this.focusRef = createRef();
-    _this.search = debounce(function () {
+    _this.autosuggest = /*#__PURE__*/(0, _react.createRef)();
+    _this.focusRef = /*#__PURE__*/(0, _react.createRef)();
+    _this.search = (0, _lodashEs.debounce)(function () {
       var _this$props;
-
       (_this$props = _this.props).search.apply(_this$props, arguments);
     }, 150);
-    _this.renderInputComponent = renderInputComponent.bind(_assertThisInitialized(_this));
-    _this.renderSuggestion = renderSuggestion.bind(_assertThisInitialized(_this));
-    _this.renderSuggestionsContainer = renderSuggestionsContainer.bind(_assertThisInitialized(_this));
-    _this.renderSelections = renderSelections.bind(_assertThisInitialized(_this));
+    _this.renderInputComponent = renderInputComponent.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.renderSuggestion = renderSuggestion.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.renderSuggestionsContainer = renderSuggestionsContainer.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.renderSelections = renderSelections.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
   }
-
-  _createClass(Typeahead, [{
+  (0, _createClass2["default"])(Typeahead, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState, snapshot) {
       var searchLongEnough = !this.props.minSearchLength || this.state.searchValue.length >= this.props.minSearchLength;
       var searchChanged = this.state.searchField !== prevState.searchField || this.state.searchValue !== prevState.searchValue;
-      var valueChanged = !is(this.props.value, prevProps.value);
-
+      var valueChanged = !(0, _immutable.is)(this.props.value, prevProps.value);
       if (this.state.editing) {
         if (searchChanged || valueChanged || !prevState.editing) {
           // Always clear the result even if the search value is not long enough,
@@ -176,24 +159,20 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
           this.setState({
             result: null
           });
-
           if (searchLongEnough) {
             this.search(this.state.searchField, this.state.searchValue, this.onSuggestionsResponse(this.state.searchValue));
           }
-        } // If the previous state was not editing then we make sure the Autosuggest
+        }
+        // If the previous state was not editing then we make sure the Autosuggest
         // input element is focused because it may not be visible before this.
-
-
         if (!prevState.editing) {
           this.autosuggest.current.input.focus();
         }
       }
-
       if (this.state.refocus && !prevState.refocus) {
         if (this.focusRef.current) {
           this.focusRef.current.focus();
         }
-
         this.setState({
           refocus: false
         });
@@ -203,13 +182,13 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props$component = this.props.components.SelectionsContainer,
-          SelectionsContainer = _this$props$component === void 0 ? SelectionsContainerDefault : _this$props$component;
-      return /*#__PURE__*/React.createElement(SelectionsContainer, {
+        SelectionsContainer = _this$props$component === void 0 ? SelectionsContainerDefault : _this$props$component;
+      return /*#__PURE__*/_react["default"].createElement(SelectionsContainer, {
         disabled: this.props.disabled,
         multiple: this.props.multiple,
         value: this.props.value,
         selections: this.props.multiple || !this.state.editing ? this.renderSelections() : null,
-        input: (this.props.multiple || this.state.editing) && /*#__PURE__*/React.createElement(Autosuggest, {
+        input: (this.props.multiple || this.state.editing) && /*#__PURE__*/_react["default"].createElement(_reactAutosuggest["default"], {
           alwaysRenderSuggestions: true,
           getSuggestionValue: this.props.getSuggestionValue,
           highlightFirstSuggestion: !this.props.noAutoHighlight,
@@ -218,7 +197,10 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
             onBlur: this.props.onBlur,
             onChange: onChangeNOOP,
             onFocus: this.props.onFocus,
-            selection: this.props.value
+            selection: this.props.value,
+            placeholder: this.props.placeholder,
+            id: this.props.id,
+            form: this.props.form
           },
           onSuggestionHighlighted: this.onHighlight,
           onSuggestionSelected: this.onSuggestionSelected,
@@ -233,33 +215,32 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-
   return Typeahead;
-}(React.Component); // RENDER HELPERS below need to bind to the Typeahead instance because they use
+}(_react["default"].Component); // RENDER HELPERS below need to bind to the Typeahead instance because they use
 // methods / props / state. They could be defined in the class instead but since
 // they do not alter state at all they were moved here to make that class
 // hopefully easier to comprehend. They are intended to be passed to the
 // corresponding (by name) props of the Autosuggest component.
 // https://github.com/moroshko/react-autosuggest#render-suggestions-container-prop
-
+exports.Typeahead = Typeahead;
 function renderSuggestionsContainer(_ref5) {
   var containerProps = _ref5.containerProps,
-      children = _ref5.children;
+    children = _ref5.children;
   var _this$props2 = this.props,
-      _this$props2$componen = _this$props2.components,
-      _this$props2$componen2 = _this$props2$componen.Status,
-      Status = _this$props2$componen2 === void 0 ? StatusDefault : _this$props2$componen2,
-      _this$props2$componen3 = _this$props2$componen.SuggestionsContainer,
-      SuggestionsContainer = _this$props2$componen3 === void 0 ? SuggestionsContainerDefault : _this$props2$componen3,
-      custom = _this$props2.custom,
-      getStatusProps = _this$props2.getStatusProps,
-      minSearchLength = _this$props2.minSearchLength,
-      setSearchField = this.setSearchField,
-      state = this.state;
-  return /*#__PURE__*/React.createElement(SuggestionsContainer, {
+    _this$props2$componen = _this$props2.components,
+    _this$props2$componen2 = _this$props2$componen.Status,
+    Status = _this$props2$componen2 === void 0 ? StatusDefault : _this$props2$componen2,
+    _this$props2$componen3 = _this$props2$componen.SuggestionsContainer,
+    SuggestionsContainer = _this$props2$componen3 === void 0 ? SuggestionsContainerDefault : _this$props2$componen3,
+    custom = _this$props2.custom,
+    getStatusProps = _this$props2.getStatusProps,
+    minSearchLength = _this$props2.minSearchLength,
+    setSearchField = this.setSearchField,
+    state = this.state;
+  return /*#__PURE__*/_react["default"].createElement(SuggestionsContainer, {
     containerProps: containerProps,
     open: state.editing
-  }, /*#__PURE__*/React.createElement(Status, getStatusProps({
+  }, /*#__PURE__*/_react["default"].createElement(Status, getStatusProps({
     searchField: state.searchField,
     setSearchField: setSearchField,
     error: state.result && state.result.error,
@@ -270,124 +251,126 @@ function renderSuggestionsContainer(_ref5) {
     pending: !state.result,
     custom: !!custom
   })), children);
-} // https://github.com/moroshko/react-autosuggest#render-suggestion-prop
-
+}
 
+// https://github.com/moroshko/react-autosuggest#render-suggestion-prop
 function renderSuggestion(suggestion, _ref6) {
   var isHighlighted = _ref6.isHighlighted;
   var _this$props3 = this.props,
-      _this$props3$componen = _this$props3.components.Suggestion,
-      Suggestion = _this$props3$componen === void 0 ? SuggestionDefault : _this$props3$componen,
-      getSuggestionValue = _this$props3.getSuggestionValue;
+    _this$props3$componen = _this$props3.components.Suggestion,
+    Suggestion = _this$props3$componen === void 0 ? SuggestionDefault : _this$props3$componen,
+    getSuggestionValue = _this$props3.getSuggestionValue;
   var custom = this.state.result && this.state.result.customSuggestion === suggestion;
-  return /*#__PURE__*/React.createElement(Suggestion, {
+  return /*#__PURE__*/_react["default"].createElement(Suggestion, {
     active: isHighlighted,
     custom: custom,
     suggestion: suggestion,
     suggestionValue: getSuggestionValue(suggestion)
   });
-} // https://github.com/moroshko/react-autosuggest#renderinputcomponent-optional
-
+}
 
+// https://github.com/moroshko/react-autosuggest#renderinputcomponent-optional
 function renderInputComponent(inputProps) {
   var _this$props$component2 = this.props.components.Input,
-      Input = _this$props$component2 === void 0 ? TypeaheadInputDefault : _this$props$component2;
-  return /*#__PURE__*/React.createElement(Input, {
+    Input = _this$props$component2 === void 0 ? TypeaheadInputDefault : _this$props$component2;
+  return /*#__PURE__*/_react["default"].createElement(Input, {
     inputProps: inputProps
   });
-} // Another render helper like the ones above but not actually for Autosuggest,
-// just meant to cleanup the render function of Typeahead.
-
+}
 
+// Another render helper like the ones above but not actually for Autosuggest,
+// just meant to cleanup the render function of Typeahead.
 function renderSelections() {
   var edit = this.edit,
-      focusRef = this.focusRef,
-      _this$props4 = this.props,
-      _this$props4$componen = _this$props4.components.Selection,
-      Selection = _this$props4$componen === void 0 ? SelectionDefault : _this$props4$componen,
-      disabled = _this$props4.disabled,
-      getSuggestionValue = _this$props4.getSuggestionValue,
-      multiple = _this$props4.multiple,
-      value = _this$props4.value,
-      remove = this.remove;
-  return (multiple ? value : List.of(value)).map(function (selection, i) {
+    focusRef = this.focusRef,
+    _this$props4 = this.props,
+    _this$props4$componen = _this$props4.components.Selection,
+    Selection = _this$props4$componen === void 0 ? SelectionDefault : _this$props4$componen,
+    disabled = _this$props4.disabled,
+    getSuggestionValue = _this$props4.getSuggestionValue,
+    multiple = _this$props4.multiple,
+    value = _this$props4.value,
+    placeholder = _this$props4.placeholder,
+    id = _this$props4.id,
+    form = _this$props4.form,
+    remove = this.remove;
+  return (multiple ? value : _immutable.List.of(value)).map(function (selection, i) {
     var suggestionValue = getSuggestionValue(selection);
-    return /*#__PURE__*/React.createElement(Selection, {
+    return /*#__PURE__*/_react["default"].createElement(Selection, {
       key: suggestionValue,
       disabled: disabled,
       edit: !multiple ? edit : null,
       focusRef: !multiple ? focusRef : null,
       remove: multiple ? remove(i) : remove(),
       selection: selection,
-      suggestionValue: suggestionValue
+      suggestionValue: suggestionValue,
+      placeholder: !multiple ? placeholder : null,
+      id: !multiple ? id : null,
+      form: form
     });
   });
-} // DEFAULT COMPONENTS below render minimally useful content. They can and should
+}
+
+// DEFAULT COMPONENTS below render minimally useful content. They can and should
 // be overridden by the components prop passed to Typeahead. If they need props
 // or state from the Typeahead instance there will be a render* helper above
 // that will bind to it.
 
-
 var StatusDefault = function StatusDefault(props) {
-  return /*#__PURE__*/React.createElement("div", null, props.info && /*#__PURE__*/React.createElement("div", null, props.info, /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_react["default"].createElement("div", null, props.info && /*#__PURE__*/_react["default"].createElement("div", null, props.info, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: props.clearFilterField
-  }, "\xD7")), props.warning && /*#__PURE__*/React.createElement("div", null, props.warning), props.filterFieldOptions && props.filterFieldOptions.map(function (_ref7, i) {
+  }, "\xD7")), props.warning && /*#__PURE__*/_react["default"].createElement("div", null, props.warning), props.filterFieldOptions && props.filterFieldOptions.map(function (_ref7, i) {
     var label = _ref7.label,
-        onClick = _ref7.onClick;
-    return /*#__PURE__*/React.createElement("button", {
+      onClick = _ref7.onClick;
+    return /*#__PURE__*/_react["default"].createElement("button", {
       onClick: onClick,
       key: i
     }, label);
   }));
 };
-
 var SuggestionsContainerDefault = function SuggestionsContainerDefault(_ref8) {
   var children = _ref8.children,
-      containerProps = _ref8.containerProps,
-      open = _ref8.open;
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, containerProps, {
+    containerProps = _ref8.containerProps,
+    open = _ref8.open;
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, containerProps, {
     style: open ? {} : {
       display: 'none'
     }
   }), children);
 };
-
 var SelectionsContainerDefault = function SelectionsContainerDefault(_ref9) {
   var selections = _ref9.selections,
-      input = _ref9.input;
-  return /*#__PURE__*/React.createElement(Fragment, null, selections, input);
+    input = _ref9.input;
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, selections, input);
 };
-
 var SelectionDefault = function SelectionDefault(_ref10) {
   var selection = _ref10.selection,
-      remove = _ref10.remove,
-      edit = _ref10.edit,
-      suggestionValue = _ref10.suggestionValue;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, suggestionValue || /*#__PURE__*/React.createElement("em", null, "None")), edit && /*#__PURE__*/React.createElement("button", {
+    remove = _ref10.remove,
+    edit = _ref10.edit,
+    suggestionValue = _ref10.suggestionValue;
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", null, suggestionValue || /*#__PURE__*/_react["default"].createElement("em", null, "None")), edit && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: edit
-  }, suggestionValue ? 'edit' : 'add'), selection && /*#__PURE__*/React.createElement("button", {
+  }, suggestionValue ? 'edit' : 'add'), selection && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: remove
   }, "remove"));
 };
-
 var SuggestionDefault = function SuggestionDefault(_ref11) {
   var active = _ref11.active,
-      suggestionValue = _ref11.suggestionValue;
-  return /*#__PURE__*/React.createElement("div", null, active ? /*#__PURE__*/React.createElement("strong", null, suggestionValue) : suggestionValue);
+    suggestionValue = _ref11.suggestionValue;
+  return /*#__PURE__*/_react["default"].createElement("div", null, active ? /*#__PURE__*/_react["default"].createElement("strong", null, suggestionValue) : suggestionValue);
 };
-
 var TypeaheadInputDefault = function TypeaheadInputDefault(_ref12) {
   var inputProps = _ref12.inputProps;
-  return /*#__PURE__*/React.createElement("input", inputProps);
-}; // This is passed to the Autosuggest input but we do not want to update that
+  return /*#__PURE__*/_react["default"].createElement("input", inputProps);
+};
+
+// This is passed to the Autosuggest input but we do not want to update that
 // value when pressing up/down and we do not want to set that input when a
 // suggestion is clicked so we are making this a noop. Instead we update the
 // searchValue state when `onSuggestionsFetchRequested` is called.
-
-
 var onChangeNOOP = function onChangeNOOP(event, _ref13) {
   var newValue = _ref13.newValue,
-      method = _ref13.method;
+    method = _ref13.method;
 };

package/lib/components/common/UserSelect.js

@@ -1,25 +1,29 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React from 'react';
-import { Typeahead } from './Typeahead';
-import { fetchUsers } from '../../apis';
-import { Map } from 'immutable';
-var emailPattern = /^.+@.+\..+$/;
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserSelect = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _Typeahead = require("./Typeahead");
+var _apis = require("../../apis");
+var _immutable = require("immutable");
+var emailPattern = /^.+@.+\..+$/;
 var validateCustomOption = function validateCustomOption(value) {
   return value.match(emailPattern);
 };
-
 var fields = {
   username: 'Username',
   displayName: 'Display Name',
   email: 'Email'
 };
-
 var searchUsers = function searchUsers(_ref) {
   var _ref$search = _ref.search,
-      search = _ref$search === void 0 ? Map() : _ref$search;
+    search = _ref$search === void 0 ? (0, _immutable.Map)() : _ref$search;
   return function (searchField, value, callback) {
-    return fetchUsers({
+    return (0, _apis.fetchUsers)({
       q: Object.keys(fields).filter(function (field) {
         return !searchField || field === searchField;
       }).map(function (field) {
@@ -30,8 +34,8 @@ var searchUsers = function searchUsers(_ref) {
       "public": !!search.get('public')
     }).then(function (_ref2) {
       var users = _ref2.users,
-          error = _ref2.error,
-          nextPageToken = _ref2.nextPageToken;
+        error = _ref2.error,
+        nextPageToken = _ref2.nextPageToken;
       return {
         suggestions: users || [],
         error: error,
@@ -40,13 +44,12 @@ var searchUsers = function searchUsers(_ref) {
     }).then(callback);
   };
 };
-
 var userToValue = function userToValue(user) {
   return user && (user.get('username') || user.get('email') || '') || '';
-}; // Converts a typed in value to an option object. Used when adding custom values
-// when allowNew is true.
-
+};
 
+// Converts a typed in value to an option object. Used when adding custom values
+// when allowNew is true.
 var valueToCustomUser = function valueToCustomUser(_ref3) {
   var allowNew = _ref3.allowNew;
   return function (value) {
@@ -55,26 +58,23 @@ var valueToCustomUser = function valueToCustomUser(_ref3) {
     } : null : null;
   };
 };
-
 var getStatusProps = function getStatusProps(_ref4) {
   var _ref4$search = _ref4.search,
-      search = _ref4$search === void 0 ? Map() : _ref4$search,
-      _ref4$messages = _ref4.messages;
+    search = _ref4$search === void 0 ? (0, _immutable.Map)() : _ref4$search,
+    _ref4$messages = _ref4.messages;
   _ref4$messages = _ref4$messages === void 0 ? {} : _ref4$messages;
-
   var _ref4$messages$short = _ref4$messages["short"],
-      _short = _ref4$messages$short === void 0 ? 'Type to find a user.' : _ref4$messages$short,
-      _ref4$messages$empty = _ref4$messages.empty,
-      empty = _ref4$messages$empty === void 0 ? 'No matching users.' : _ref4$messages$empty,
-      _ref4$messages$custom = _ref4$messages.custom,
-      custom = _ref4$messages$custom === void 0 ? 'No matching users. You may also enter a valid email.' : _ref4$messages$custom,
-      _ref4$messages$pendin = _ref4$messages.pending,
-      pending = _ref4$messages$pendin === void 0 ? 'Searching...' : _ref4$messages$pendin,
-      _ref4$messages$more = _ref4$messages.more,
-      more = _ref4$messages$more === void 0 ? "Too many users, first ".concat(search.get('limit') || '', " shown. Please refine your search.") : _ref4$messages$more,
-      _ref4$messages$error = _ref4$messages.error,
-      error = _ref4$messages$error === void 0 ? 'There was an error fetching users.' : _ref4$messages$error;
-
+    _short = _ref4$messages$short === void 0 ? 'Type to find a user.' : _ref4$messages$short,
+    _ref4$messages$empty = _ref4$messages.empty,
+    empty = _ref4$messages$empty === void 0 ? 'No matching users.' : _ref4$messages$empty,
+    _ref4$messages$custom = _ref4$messages.custom,
+    custom = _ref4$messages$custom === void 0 ? 'No matching users. You may also enter a valid email.' : _ref4$messages$custom,
+    _ref4$messages$pendin = _ref4$messages.pending,
+    pending = _ref4$messages$pendin === void 0 ? 'Searching...' : _ref4$messages$pendin,
+    _ref4$messages$more = _ref4$messages.more,
+    more = _ref4$messages$more === void 0 ? "Too many users, first ".concat(search.get('limit') || '', " shown. Please refine your search.") : _ref4$messages$more,
+    _ref4$messages$error = _ref4$messages.error,
+    error = _ref4$messages$error === void 0 ? 'There was an error fetching users.' : _ref4$messages$error;
   return function (props) {
     return {
       meta: props.searchField ? "Find Users by ".concat(fields[props.searchField]) : null,
@@ -82,10 +82,9 @@ var getStatusProps = function getStatusProps(_ref4) {
       warning: props.error || props.more || props.empty ? props.error && props.error.key === 'too_many_matches' ? 'Too many users to display. Please refine your search below.' : props.more ? more : props.empty && !props.custom ? empty : props.empty && props.custom ? custom : error : null,
       clearFilterField: props.searchField ? props.setSearchField(null) : null,
       filterFieldOptions: props.error && props.error.key === 'too_many_matches' ? Object.entries(props.error.errorData.matches).map(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-            field = _ref6[0],
-            count = _ref6[1];
-
+        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+          field = _ref6[0],
+          count = _ref6[1];
         return {
           field: field,
           count: count,
@@ -97,9 +96,8 @@ var getStatusProps = function getStatusProps(_ref4) {
     };
   };
 };
-
-export var UserSelect = function UserSelect(props) {
-  return /*#__PURE__*/React.createElement(Typeahead, {
+var UserSelect = function UserSelect(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Typeahead.Typeahead, {
     components: props.components || {},
     disabled: props.disabled,
     multiple: props.multiple,
@@ -112,6 +110,9 @@ export var UserSelect = function UserSelect(props) {
     onChange: props.onChange,
     onFocus: props.onFocus,
     onBlur: props.onBlur,
-    placeholder: props.placeholder
+    placeholder: props.placeholder,
+    id: props.id,
+    form: props.form
   });
-};
+};
+exports.UserSelect = UserSelect;