@atlaskit/quick-search 8.0.9

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/components/QuickSearch.js

@@ -0,0 +1,447 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuickSearch = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _analytics = require("@atlaskit/analytics");
+
+var _Search = _interopRequireDefault(require("./Search/Search"));
+
+var _context = require("./context");
+
+var _decorateWithAnalyticsData = _interopRequireDefault(require("./decorateWithAnalyticsData"));
+
+var _constants = require("./constants");
+
+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) { (0, _defineProperty2.default)(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/**
+ * Get the result ID of a result by its index in the flatResults array
+ * Returns null for a failed index or if resultId is empty|undefined
+ */
+var getResultIdByIndex = function getResultIdByIndex(array, index) {
+  if (array && index !== null && array[index] && array[index].props && array[index].props.resultId) {
+    return array[index].props.resultId;
+  }
+
+  return null;
+};
+/**
+ * Find a result in the flatResults array by its ID
+ * Returns the result object or null
+ */
+
+
+var getResultById = function getResultById(array, id) {
+  return array && array.find(function (result) {
+    return result.props && result.props.resultId === id;
+  }) || null;
+};
+/**
+ * Get a result's index in the flatResults array by its ID
+ * Returns a numeric index or null
+ */
+
+
+var getResultIndexById = function getResultIndexById(array, id) {
+  if (!array) {
+    return null;
+  }
+
+  var result = getResultById(array, id);
+
+  if (!result) {
+    return null;
+  }
+
+  var index = array.indexOf(result);
+  return index >= 0 ? index : null;
+};
+
+var adjustIndex = function adjustIndex(arrayLength, currentIndex, adjustment) {
+  if (arrayLength === 0) {
+    return null;
+  }
+
+  if (adjustment === 0) {
+    return currentIndex;
+  } // If nothing is selected, select the element on the end
+
+
+  if (currentIndex === null) {
+    return adjustment > 0 ? 0 : arrayLength - 1;
+  } // Adjust current index, wrapping around if necessary
+
+
+  var adjustedIndex = (currentIndex + adjustment) % arrayLength; // Correct for negative indices
+
+  return adjustedIndex >= 0 ? adjustedIndex : adjustedIndex + arrayLength;
+};
+
+var QuickSearch = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(QuickSearch, _React$Component);
+
+  var _super = _createSuper(QuickSearch);
+
+  function QuickSearch(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuickSearch);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "flatResults", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasSearchQueryEventFired", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasKeyDownEventFired", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lastKeyPressed", '');
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "adjustSelectedResultIndex", function (adjustment) {
+      var currentIndex = getResultIndexById(_this.flatResults, _this.state.selectedResultId);
+      var newIndex = adjustIndex(_this.flatResults.length, currentIndex, adjustment);
+      var selectedResultId = getResultIdByIndex(_this.flatResults, newIndex);
+
+      _this.setState({
+        selectedResultId: selectedResultId
+      });
+
+      if (selectedResultId) {
+        _this.fireKeyboardControlEvent(selectedResultId);
+      }
+
+      if (_this.props.onSelectedResultIdChanged) {
+        _this.props.onSelectedResultIdChanged(selectedResultId);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectNext", function () {
+      _this.adjustSelectedResultIndex(+1);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectPrevious", function () {
+      _this.adjustSelectedResultIndex(-1);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRegisterResult", function (result) {
+      if (!getResultById(_this.flatResults, result.props.resultId)) {
+        _this.flatResults.push(result);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleUnregisterResult", function (result) {
+      var resultIndex = getResultIndexById(_this.flatResults, result.props.resultId);
+
+      if (resultIndex !== null && +resultIndex >= 0) {
+        _this.flatResults.splice(resultIndex, 1);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResultMouseEnter", function (resultData) {
+      _this.setState({
+        selectedResultId: resultData && resultData.resultId
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResultMouseLeave", function () {
+      _this.setState({
+        selectedResultId: null
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchBlur", function (event) {
+      _this.props.onSearchBlur(event);
+
+      _this.setState({
+        selectedResultId: null
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInput", function (event) {
+      var onSearchInput = _this.props.onSearchInput;
+
+      _this.setState({
+        value: event.currentTarget.value
+      });
+
+      if (onSearchInput) {
+        onSearchInput(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchKeyDown", function (event) {
+      var firePrivateAnalyticsEvent = _this.props.firePrivateAnalyticsEvent;
+
+      _this.props.onSearchKeyDown(event);
+
+      _this.lastKeyPressed = event.key; // Need to check for keyCode for up/down/enter in case user is composing using an IME
+      // fixes https://ecosystem.atlassian.net/browse/DS-6518
+
+      if (event.key === 'ArrowUp' && event.keyCode === (0, _keycode.default)('up')) {
+        event.preventDefault(); // Don't move cursor around in search input field
+
+        _this.selectPrevious();
+      } else if (event.key === 'ArrowDown' && event.keyCode === (0, _keycode.default)('down')) {
+        event.preventDefault(); // Don't move cursor around in search input field
+
+        _this.selectNext();
+      } else if (event.key === 'Enter' && event.keyCode === (0, _keycode.default)('enter')) {
+        // shift key pressed or no result selected
+        if (event.shiftKey || !_this.state.selectedResultId) {
+          if (firePrivateAnalyticsEvent) {
+            firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_SUBMIT, {
+              newTab: false,
+              // enter always open in the same tab
+              resultCount: _this.flatResults.length,
+              method: 'shortcut'
+            });
+          }
+
+          _this.props.onSearchSubmit(event);
+        } else {
+          event.preventDefault(); // Don't fire submit event from input
+
+          var result = getResultById(_this.flatResults, _this.state.selectedResultId);
+
+          if (!result || !result.props) {
+            return;
+          } // Capture when users are using the keyboard to submit
+
+
+          if (typeof firePrivateAnalyticsEvent === 'function') {
+            _this.fireKeyboardControlEvent(_this.state.selectedResultId);
+
+            firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_SUBMIT, _objectSpread(_objectSpread({}, result.getAnalyticsData()), {}, {
+              method: 'returnKey',
+              newTab: false,
+              // enter always open in the same tab
+              resultCount: _this.flatResults.length
+            }));
+          }
+
+          var _preventDefault = false;
+
+          if (result.props.onClick) {
+            result.props.onClick({
+              resultId: result.props.resultId,
+              type: result.props.type,
+              event: Object.assign({}, event, {
+                preventDefault: function preventDefault() {
+                  _preventDefault = true;
+                },
+                stopPropagation: function stopPropagation() {}
+              })
+            });
+          }
+
+          if (result.props.href && !_preventDefault) {
+            window.location.assign(result.props.href);
+          }
+        }
+      } else if (event.key === 'Tab' || event.key === 'ArrowRight') {
+        var autocompleteText = _this.props.autocompleteText;
+
+        if (autocompleteText && autocompleteText.length > 0 && // multiple Tab or ArrowRight
+        autocompleteText.slice(-1) !== ' ') {
+          _this.acceptAutocomplete(event, autocompleteText);
+
+          event.preventDefault();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "acceptAutocomplete", function (event, text) {
+      var onSearchInput = _this.props.onSearchInput;
+      var newValue = "".concat(text, " ");
+
+      if (_this.inputSearchRef) {
+        _this.setState({
+          value: newValue
+        }); // @ts-ignore unchecked
+
+
+        _this.inputSearchRef.value = newValue;
+      }
+
+      if (onSearchInput) {
+        onSearchInput(event, true);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSearchInputRef", function (refs) {
+      if (refs && refs.inputRef) {
+        _this.inputSearchRef = refs.inputRef;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusSearchInput", function () {
+      if (_this.inputSearchRef && // @ts-ignore unchecked
+      typeof _this.inputSearchRef.focus === 'function') {
+        // @ts-ignore unchecked
+        _this.inputSearchRef.focus();
+      }
+    });
+    _this.state = {
+      /** Select first result by default if `selectedResultId` prop is not provided */
+      selectedResultId: _this.props.selectedResultId || null,
+      context: {
+        registerResult: _this.handleRegisterResult,
+        unregisterResult: _this.handleUnregisterResult,
+        onMouseEnter: _this.handleResultMouseEnter,
+        onMouseLeave: _this.handleResultMouseLeave,
+        sendAnalytics: _this.props.firePrivateAnalyticsEvent,
+        getIndex: function getIndex(resultId) {
+          return getResultIndexById(_this.flatResults, resultId);
+        },
+        linkComponent: _this.props.linkComponent
+      },
+      value: props.value
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuickSearch, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+      if (firePrivateAnalyticsEvent) {
+        firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_OPEN, {});
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+      if (firePrivateAnalyticsEvent) {
+        firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_CLOSE, {});
+      }
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.children !== this.props.children) {
+        this.setState({
+          selectedResultId: nextProps.selectedResultId || null
+        });
+      } else if (nextProps.selectedResultId !== this.props.selectedResultId && nextProps.selectedResultId !== this.state.selectedResultId) {
+        this.setState({
+          selectedResultId: nextProps.selectedResultId || null
+        });
+      } // keep context state in sync
+
+
+      var _this$state$context = this.state.context,
+          sendAnalytics = _this$state$context.sendAnalytics,
+          linkComponent = _this$state$context.linkComponent;
+
+      if (sendAnalytics !== nextProps.firePrivateAnalyticsEvent || linkComponent !== nextProps.linkComponent) {
+        this.setState({
+          context: _objectSpread(_objectSpread({}, this.state.context), {}, {
+            sendAnalytics: nextProps.firePrivateAnalyticsEvent,
+            linkComponent: nextProps.linkComponent
+          })
+        });
+      }
+      /**
+       * Capture whether user needed to query in order to find their target result.
+       * Only fire once per mount. Only fire when a search term is entered and the previous search
+       * term was empty.
+       */
+
+
+      if (!this.hasSearchQueryEventFired && !this.props.value && nextProps.value) {
+        this.hasSearchQueryEventFired = true;
+        var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+        if (firePrivateAnalyticsEvent) {
+          firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_QUERY_ENTERED, {});
+        }
+      }
+    }
+  }, {
+    key: "fireKeyboardControlEvent",
+    value: function fireKeyboardControlEvent(selectedResultId) {
+      var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+      if (firePrivateAnalyticsEvent) {
+        var result = getResultById(this.flatResults, selectedResultId);
+
+        if (result) {
+          firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_KB_CTRLS_USED, _objectSpread(_objectSpread({}, result.getAnalyticsData()), {}, {
+            key: this.lastKeyPressed,
+            resultCount: this.flatResults.length
+          }));
+        }
+      }
+
+      this.lastKeyPressed = '';
+    }
+    /**
+     * Uses the virtual list, this.flatResults, to move the selection across grouped results as if
+     * results were in a single, circular list.
+     *
+     * Process:
+     * 1. Finds the index of the selected result in the flatResults array,
+     * 2. Increments or decrements this index by the supplied adjustment amount,
+     * 3. Sets the new selectedResultId based on the modifed index
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_Search.default, {
+        isLoading: this.props.isLoading,
+        inputControls: this.props.inputControls,
+        onBlur: this.handleSearchBlur,
+        onInput: this.onInput,
+        onKeyDown: this.handleSearchKeyDown,
+        placeholder: this.props.placeholder,
+        value: this.state.value,
+        autocompleteText: this.props.autocompleteText,
+        ref: this.setSearchInputRef
+      }, /*#__PURE__*/_react.default.createElement(_context.ResultContext.Provider, {
+        value: this.state.context
+      }, /*#__PURE__*/_react.default.createElement(_context.SelectedResultIdContext.Provider, {
+        value: this.state.selectedResultId
+      }, this.props.children)));
+    }
+  }]);
+  return QuickSearch;
+}(_react.default.Component);
+/**
+ * HOCs:
+ * `decorateWithAnalyticsData` - Wrapper that decorates analytics events with additional data.
+ * `withAnalytics` - Injects analytics firing methods that are picked up by
+ * @atlaskit/analytics/AnalyticsListener.
+ */
+
+
+exports.QuickSearch = QuickSearch;
+(0, _defineProperty2.default)(QuickSearch, "defaultProps", {
+  children: [],
+  firePrivateAnalyticsEvent: function firePrivateAnalyticsEvent(_) {},
+  isLoading: false,
+  onSearchBlur: function onSearchBlur(_) {},
+  onSearchKeyDown: function onSearchKeyDown(_) {},
+  onSearchSubmit: function onSearchSubmit(_) {},
+  placeholder: 'Search',
+  value: ''
+});
+
+var _default = (0, _decorateWithAnalyticsData.default)( // @ts-ignore
+(0, _analytics.withAnalytics)(QuickSearch, {}, {}));
+
+exports.default = _default;