, or , or using non-SVG elements ' + 'in an parent. Try inspecting the child nodes of the element ' + 'with React ID `%s`.', updatedIndex, parentID) : invariant(false) : undefined; + var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ComboBox).call(this, props, context)); - initialChildren = initialChildren || {}; - initialChildren[parentID] = initialChildren[parentID] || []; - initialChildren[parentID][updatedIndex] = updatedChild; + _this.focusOption = _this.focusOption.bind(_this); + _this.handleButtonClick = _this.handleButtonClick.bind(_this); + _this.handleInputBlur = _this.handleInputBlur.bind(_this); + _this.handleInputChange = _this.handleInputChange.bind(_this); + _this.handleInputClick = _this.handleInputClick.bind(_this); + _this.handleInputFocus = _this.handleInputFocus.bind(_this); + _this.handleInputKeyUp = _this.handleInputKeyUp.bind(_this); + _this.handleKeydown = _this.handleKeydown.bind(_this); + _this.handleOptionBlur = _this.handleOptionBlur.bind(_this); + _this.handleOptionFocus = _this.handleOptionFocus.bind(_this); + _this.handleOptionKeyDown = _this.handleOptionKeyDown.bind(_this); + _this.handleOptionMouseEnter = _this.handleOptionMouseEnter.bind(_this); + _this.hideList = _this.hideList.bind(_this); + _this.selectOption = _this.selectOption.bind(_this); - updatedChildren = updatedChildren || []; - updatedChildren.push(updatedChild); + _this.state = { + value: props.value, + // the value displayed in the input + inputValue: _this.findInitialInputValue(), + isOpen: false, + focusedIndex: null, + matchedAutocompleteOption: null, + // this prevents crazy jumpiness since we focus options on mouseenter + usingKeyboard: false, + activedescendant: null, + listId: 'ic-tokeninput-list-' + ++guid, + menu: { + children: [], + activedescendant: null, + isEmpty: true } - } + }; + return _this; + } - var renderedMarkup; - // markupList is either a list of markup or just a list of elements - if (markupList.length && typeof markupList[0] === 'string') { - renderedMarkup = Danger.dangerouslyRenderMarkup(markupList); - } else { - renderedMarkup = markupList; + _createClass(ComboBox, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ menu: this.makeMenu(this.props.children) }); } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(newProps) { + var _this2 = this; - // Remove updated children first so that `toIndex` is consistent. - if (updatedChildren) { - for (var j = 0; j < updatedChildren.length; j++) { - updatedChildren[j].parentNode.removeChild(updatedChildren[j]); - } + this.setState({ menu: this.makeMenu(newProps.children) }, function () { + if (newProps.children.length && (_this2.isOpen || document.activeElement === _this2.refs.input)) { + if (!_this2.state.menu.children.length) { + return; + } + _this2.setState({ isOpen: true }, function () { + _this2.refs.list.scrollTop = 0; + }); + } else { + _this2.hideList(); + } + }); } - - for (var k = 0; k < updates.length; k++) { - update = updates[k]; - switch (update.type) { - case ReactMultiChildUpdateTypes.INSERT_MARKUP: - insertChildAt(update.parentNode, renderedMarkup[update.markupIndex], update.toIndex); - break; - case ReactMultiChildUpdateTypes.MOVE_EXISTING: - insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex); - break; - case ReactMultiChildUpdateTypes.SET_MARKUP: - setInnerHTML(update.parentNode, update.content); - break; - case ReactMultiChildUpdateTypes.TEXT_CONTENT: - setTextContent(update.parentNode, update.content); - break; - case ReactMultiChildUpdateTypes.REMOVE_NODE: - // Already removed by the for-loop above. - break; - } + }, { + key: 'getClassName', + value: function getClassName() { + return (0, _classnames2.default)(this.props.className, 'ic-tokeninput', { + 'ic-tokeninput-is-open': this.state.isOpen + }); } - } - - }; - - ReactPerf.measureMethods(DOMChildrenOperations, 'DOMChildrenOperations', { - updateTextContent: 'updateTextContent' - }); - module.exports = DOMChildrenOperations; - /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) - -/***/ }, -/* 9 */ -/***/ function(module, exports, __webpack_require__) { - - /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2013-2015, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @providesModule Danger - * @typechecks static-only - */ - - 'use strict'; + /** + * We don't create the components, the user supplies them, + * so before rendering we attach handlers to facilitate communication from + * the ComboboxOption to the Combobox. + */ - var ExecutionEnvironment = __webpack_require__(10); + }, { + key: 'makeMenu', + value: function makeMenu(children) { + var _this3 = this; + + var activedescendant = void 0; + var isEmpty = true; + + // Should this instead use React.addons.cloneWithProps or React.cloneElement? + var _children = _react2.default.Children.map(children, function (child, index) { + // console.log(child.type, ComboboxOption.type) + if (child.type !== _option2.default) { + // allow random elements to live in this list + return child; + } + isEmpty = false; + // TODO: cloneWithProps and map instead of altering the children in-place + var props = child.props; + + var newProps = { + onBlur: _this3.handleOptionBlur, + onClick: _this3.selectOption.bind(_this3, child), + onFocus: _this3.handleOptionFocus, + onKeyDown: _this3.handleOptionKeyDown.bind(_this3, child), + onMouseEnter: _this3.handleOptionMouseEnter.bind(_this3, index), + isSelected: _this3.state.value === props.value + }; - var createNodesFromMarkup = __webpack_require__(11); - var emptyFunction = __webpack_require__(16); - var getMarkupWrap = __webpack_require__(15); - var invariant = __webpack_require__(14); + if (_this3.state.value === props.value) { + // need an ID for WAI-ARIA + newProps.id = props.id || 'ic-tokeninput-selected-' + ++guid; + activedescendant = props.id; + } - var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/; - var RESULT_INDEX_ATTR = 'data-danger-index'; + return _react2.default.cloneElement(child, newProps); + }); - /** - * Extracts the `nodeName` from a string of markup. - * - * NOTE: Extracting the `nodeName` does not require a regular expression match - * because we make assumptions about React-generated markup (i.e. there are no - * spaces surrounding the opening tag and there is at least one attribute). - * - * @param {string} markup String of markup. - * @return {string} Node name of the supplied markup. - * @see http://jsperf.com/extract-nodename - */ - function getNodeName(markup) { - return markup.substring(1, markup.indexOf(' ')); - } + return { + children: _children, + activedescendant: activedescendant, + isEmpty: isEmpty + }; + } - var Danger = { + /** + * When the user begins typing again we need to clear out any state that has + * to do with an existing or potential selection. + */ - /** - * Renders markup into an array of nodes. The markup is expected to render - * into a list of root nodes. Also, the length of `resultList` and - * `markupList` should be the same. - * - * @param {array} markupList List of markup strings to render. - * @return {array} List of rendered nodes. - * @internal - */ - dangerouslyRenderMarkup: function (markupList) { - !ExecutionEnvironment.canUseDOM ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + 'thread. Make sure `window` and `document` are available globally ' + 'before requiring React when unit testing or use ' + 'ReactDOMServer.renderToString for server rendering.') : invariant(false) : undefined; - var nodeName; - var markupByNodeName = {}; - // Group markup by `nodeName` if a wrap is necessary, else by '*'. - for (var i = 0; i < markupList.length; i++) { - !markupList[i] ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Missing markup.') : invariant(false) : undefined; - nodeName = getNodeName(markupList[i]); - nodeName = getMarkupWrap(nodeName) ? nodeName : '*'; - markupByNodeName[nodeName] = markupByNodeName[nodeName] || []; - markupByNodeName[nodeName][i] = markupList[i]; + }, { + key: 'clearSelectedState', + value: function clearSelectedState(cb) { + this.setState({ + focusedIndex: null, + inputValue: null, + value: null, + matchedAutocompleteOption: null, + activedescendant: null + }, cb); + } + }, { + key: 'handleInputChange', + value: function handleInputChange() { + var _this4 = this; + + var value = this.refs.input.value; + + this.clearSelectedState(function () { + _this4.props.onInput(value); + }); + } + }, { + key: 'handleInputFocus', + value: function handleInputFocus() { + this.maybeShowList(); + } + }, { + key: 'handleInputClick', + value: function handleInputClick() { + this.maybeShowList(); + } + }, { + key: 'maybeShowList', + value: function maybeShowList() { + if (this.props.showListOnFocus) { + this.showList(); + } + } + }, { + key: 'handleInputBlur', + value: function handleInputBlur() { + var focusedAnOption = this.state.focusedIndex !== null && this.state.focusedIndex !== undefined; + if (focusedAnOption) { + return; + } + this.maybeSelectAutocompletedOption(); + this.hideList(); + } + }, { + key: 'handleOptionBlur', + value: function handleOptionBlur() { + // don't want to hide the list if we focused another option + this.blurTimer = setTimeout(this.hideList, 0); + } + }, { + key: 'handleOptionFocus', + value: function handleOptionFocus() { + // see `handleOptionBlur` + clearTimeout(this.blurTimer); + } + }, { + key: 'handleInputKeyUp', + value: function handleInputKeyUp(event) { + if (this.state.menu.isEmpty + // autocompleting while backspacing feels super weird, so let's not + || event.keyCode === K_BACKSPACE || !this.props.autocomplete.match(/both|inline/)) return; + } + }, { + key: 'handleButtonClick', + value: function handleButtonClick() { + if (this.state.isOpen) { + this.hideList(); + } else { + this.showList(); + } + this.focusInput(); + } + }, { + key: 'showList', + value: function showList() { + if (!this.state.menu.children.length) { + return; + } + this.setState({ isOpen: true }); + } + }, { + key: 'hideList', + value: function hideList() { + this.setState({ + isOpen: false, + focusedIndex: null + }); + } + }, { + key: 'hideOnEscape', + value: function hideOnEscape(event) { + this.hideList(); + this.focusInput(); + event.preventDefault(); + } + }, { + key: 'focusInput', + value: function focusInput() { + this.refs.input.focus(); + } + }, { + key: 'selectInput', + value: function selectInput() { + this.refs.input.select(); + } + }, { + key: 'handleKeydown', + value: function handleKeydown(event) { + var handlerName = KEYDOWN_MAPS.inputKeydownMap[event.keyCode]; + if (!handlerName) { + return null; + } + this.setState({ usingKeyboard: true }); + return this[handlerName].call(this, event); + } + }, { + key: 'handleOptionKeyDown', + value: function handleOptionKeyDown(child, event) { + var handlerName = KEYDOWN_MAPS.optionKeydownMap[event.keyCode]; + if (!handlerName) { + // if the user starts typing again while focused on an option, move focus + // to the inpute, select so it wipes out any existing value + this.selectInput(); + return; + } + event.preventDefault(); + this.setState({ usingKeyboard: true }); + this[handlerName].call(this, child); + } + }, { + key: 'handleOptionMouseEnter', + value: function handleOptionMouseEnter(index) { + if (this.state.usingKeyboard) { + this.setState({ usingKeyboard: false }); + } else { + this.focusOptionAtIndex(index); + } + } + }, { + key: 'selectOnEnter', + value: function selectOnEnter(event) { + event.preventDefault(); + this.maybeSelectAutocompletedOption(); } - var resultList = []; - var resultListAssignmentCount = 0; - for (nodeName in markupByNodeName) { - if (!markupByNodeName.hasOwnProperty(nodeName)) { - continue; + }, { + key: 'maybeSelectAutocompletedOption', + value: function maybeSelectAutocompletedOption() { + if (!this.state.matchedAutocompleteOption) { + this.selectText(); + } else { + this.selectOption(this.state.matchedAutocompleteOption, { focus: false }); } - var markupListByNodeName = markupByNodeName[nodeName]; + } + }, { + key: 'selectOption', + value: function selectOption(child) { + var _this5 = this; - // This for-in loop skips the holes of the sparse array. The order of - // iteration should follow the order of assignment, which happens to match - // numerical index order, but we don't rely on that. - var resultIndex; - for (resultIndex in markupListByNodeName) { - if (markupListByNodeName.hasOwnProperty(resultIndex)) { - var markup = markupListByNodeName[resultIndex]; + var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; - // Push the requested markup with an additional RESULT_INDEX_ATTR - // attribute. If the markup does not start with a < character, it - // will be discarded below (with an appropriate console.error). - markupListByNodeName[resultIndex] = markup.replace(OPEN_TAG_NAME_EXP, - // This index will be parsed back out below. - '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" '); + this.setState({ + // value: child.props.value, + // inputValue: getLabel(child), + matchedAutocompleteOption: null + }, function () { + _this5.props.onSelect(child.props.value, child); + _this5.hideList(); + _this5.clearSelectedState(); // added + if (options.focus !== false) { + _this5.selectInput(); } + }); + this.refs.input.value = ''; // added + } + }, { + key: 'selectText', + value: function selectText() { + var value = this.refs.input.value; + if (!value) { + return; + } + this.props.onSelect(value); + this.clearSelectedState(); + this.refs.input.value = ''; // added + } + }, { + key: 'focusNext', + value: function focusNext(event) { + if (event.preventDefault) { + event.preventDefault(); } - // Render each group of markup with similar wrapping `nodeName`. - var renderNodes = createNodesFromMarkup(markupListByNodeName.join(''), emptyFunction // Do nothing special with + +