@atlaskit/quick-search 8.0.9

package/dist/cjs/components/context.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedResultIdContext = exports.ResultContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultState = {
+  sendAnalytics: function sendAnalytics() {},
+  onMouseEnter: function onMouseEnter() {},
+  onMouseLeave: function onMouseLeave() {},
+  registerResult: function registerResult() {},
+  unregisterResult: function unregisterResult() {},
+  getIndex: function getIndex(n) {
+    return Number(n);
+  }
+};
+
+var ResultContext = /*#__PURE__*/_react.default.createContext(defaultState);
+
+exports.ResultContext = ResultContext;
+
+var SelectedResultIdContext = /*#__PURE__*/_react.default.createContext(null);
+
+exports.SelectedResultIdContext = SelectedResultIdContext;

package/dist/cjs/components/decorateWithAnalyticsData.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = decorateWithAnalyticsData;
+
+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 _analytics = require("@atlaskit/analytics");
+
+var _isReactElement = _interopRequireDefault(require("./isReactElement"));
+
+var _constants = require("./constants");
+
+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; } }
+
+function decorateWithAnalyticsData(WrappedQuickSearch) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(DecorateWithAnalyticsData, _React$Component);
+
+    var _super = _createSuper(DecorateWithAnalyticsData);
+
+    function DecorateWithAnalyticsData() {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, DecorateWithAnalyticsData);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "countChildren", function () {
+        return _react.default.Children.toArray(_this.props.children).reduce(function (total, group) {
+          return (0, _isReactElement.default)(group) ? total + _react.default.Children.count(group.props.children) : total;
+        }, 0);
+      });
+      return _this;
+    }
+
+    (0, _createClass2.default)(DecorateWithAnalyticsData, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/_react.default.createElement(_analytics.AnalyticsDecorator, {
+          matchPrivate: true,
+          match: _constants.QS_ANALYTICS_EV_SUBMIT,
+          data: {
+            resultCount: this.countChildren(),
+            queryLength: this.props.value.length
+          }
+        }, /*#__PURE__*/_react.default.createElement(WrappedQuickSearch, this.props));
+      }
+    }]);
+    return DecorateWithAnalyticsData;
+  }(_react.default.Component), (0, _defineProperty2.default)(_class, "defaultProps", {
+    children: [],
+    value: ''
+  }), _temp;
+}

package/dist/cjs/components/isReactElement.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Heuristically check whether an element is a react element or not.
+ * React elements have constructors for their type property but native elements use strings.
+ */
+var _default = function _default(element) {
+  var type = element && element.type;
+  var hasFunctionAsType = !!type && typeof type === 'function';
+  var hasProps = element && element.props;
+  return hasFunctionAsType && hasProps;
+};
+
+exports.default = _default;

package/dist/cjs/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AkNavigationItemGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ResultItemGroup.default;
+  }
+});
+Object.defineProperty(exports, "ResultItemGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ResultItemGroup.default;
+  }
+});
+Object.defineProperty(exports, "AkNavigationItem", {
+  enumerable: true,
+  get: function get() {
+    return _ResultItem.default;
+  }
+});
+Object.defineProperty(exports, "AkQuickSearch", {
+  enumerable: true,
+  get: function get() {
+    return _QuickSearch.default;
+  }
+});
+Object.defineProperty(exports, "QuickSearch", {
+  enumerable: true,
+  get: function get() {
+    return _QuickSearch.default;
+  }
+});
+Object.defineProperty(exports, "AkSearch", {
+  enumerable: true,
+  get: function get() {
+    return _Search.default;
+  }
+});
+Object.defineProperty(exports, "ObjectResult", {
+  enumerable: true,
+  get: function get() {
+    return _ObjectResult.default;
+  }
+});
+Object.defineProperty(exports, "PersonResult", {
+  enumerable: true,
+  get: function get() {
+    return _PersonResult.default;
+  }
+});
+Object.defineProperty(exports, "ContainerResult", {
+  enumerable: true,
+  get: function get() {
+    return _ContainerResult.default;
+  }
+});
+Object.defineProperty(exports, "ResultBase", {
+  enumerable: true,
+  get: function get() {
+    return _ResultBase.default;
+  }
+});
+exports.quickSearchResultTypes = void 0;
+
+var resultTypes = _interopRequireWildcard(require("./components/Results"));
+
+exports.quickSearchResultTypes = resultTypes;
+
+var _ResultItemGroup = _interopRequireDefault(require("./components/ResultItem/ResultItemGroup"));
+
+var _ResultItem = _interopRequireDefault(require("./components/ResultItem/ResultItem"));
+
+var _QuickSearch = _interopRequireDefault(require("./components/QuickSearch"));
+
+var _Search = _interopRequireDefault(require("./components/Search/Search"));
+
+var _ObjectResult = _interopRequireDefault(require("./components/Results/ObjectResult"));
+
+var _PersonResult = _interopRequireDefault(require("./components/Results/PersonResult"));
+
+var _ContainerResult = _interopRequireDefault(require("./components/Results/ContainerResult"));
+
+var _ResultBase = _interopRequireDefault(require("./components/Results/ResultBase"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

package/dist/cjs/version.json

@@ -0,0 +1,4 @@
+{
+	"name": "@atlaskit/quick-search",
+	"version": "8.0.9"
+}

package/dist/es2019/components/QuickSearch.js

@@ -0,0 +1,417 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import keycode from 'keycode';
+import { withAnalytics } from '@atlaskit/analytics';
+import AkSearch from './Search/Search';
+import { ResultContext, SelectedResultIdContext } from './context';
+import decorateWithAnalyticsData from './decorateWithAnalyticsData';
+import { QS_ANALYTICS_EV_CLOSE, QS_ANALYTICS_EV_KB_CTRLS_USED, QS_ANALYTICS_EV_OPEN, QS_ANALYTICS_EV_QUERY_ENTERED, QS_ANALYTICS_EV_SUBMIT } from './constants';
+
+/**
+ * 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
+ */
+const 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
+ */
+
+
+const getResultById = (array, id) => array && array.find(result => 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
+ */
+
+
+const getResultIndexById = (array, id) => {
+  if (!array) {
+    return null;
+  }
+
+  const result = getResultById(array, id);
+
+  if (!result) {
+    return null;
+  }
+
+  const index = array.indexOf(result);
+  return index >= 0 ? index : null;
+};
+
+const 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
+
+
+  const adjustedIndex = (currentIndex + adjustment) % arrayLength; // Correct for negative indices
+
+  return adjustedIndex >= 0 ? adjustedIndex : adjustedIndex + arrayLength;
+};
+
+export class QuickSearch extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "flatResults", []);
+
+    _defineProperty(this, "hasSearchQueryEventFired", false);
+
+    _defineProperty(this, "hasKeyDownEventFired", false);
+
+    _defineProperty(this, "lastKeyPressed", '');
+
+    _defineProperty(this, "adjustSelectedResultIndex", adjustment => {
+      const currentIndex = getResultIndexById(this.flatResults, this.state.selectedResultId);
+      const newIndex = adjustIndex(this.flatResults.length, currentIndex, adjustment);
+      const selectedResultId = getResultIdByIndex(this.flatResults, newIndex);
+      this.setState({
+        selectedResultId
+      });
+
+      if (selectedResultId) {
+        this.fireKeyboardControlEvent(selectedResultId);
+      }
+
+      if (this.props.onSelectedResultIdChanged) {
+        this.props.onSelectedResultIdChanged(selectedResultId);
+      }
+    });
+
+    _defineProperty(this, "selectNext", () => {
+      this.adjustSelectedResultIndex(+1);
+    });
+
+    _defineProperty(this, "selectPrevious", () => {
+      this.adjustSelectedResultIndex(-1);
+    });
+
+    _defineProperty(this, "handleRegisterResult", result => {
+      if (!getResultById(this.flatResults, result.props.resultId)) {
+        this.flatResults.push(result);
+      }
+    });
+
+    _defineProperty(this, "handleUnregisterResult", result => {
+      const resultIndex = getResultIndexById(this.flatResults, result.props.resultId);
+
+      if (resultIndex !== null && +resultIndex >= 0) {
+        this.flatResults.splice(resultIndex, 1);
+      }
+    });
+
+    _defineProperty(this, "handleResultMouseEnter", resultData => {
+      this.setState({
+        selectedResultId: resultData && resultData.resultId
+      });
+    });
+
+    _defineProperty(this, "handleResultMouseLeave", () => {
+      this.setState({
+        selectedResultId: null
+      });
+    });
+
+    _defineProperty(this, "handleSearchBlur", event => {
+      this.props.onSearchBlur(event);
+      this.setState({
+        selectedResultId: null
+      });
+    });
+
+    _defineProperty(this, "onInput", event => {
+      const {
+        onSearchInput
+      } = this.props;
+      this.setState({
+        value: event.currentTarget.value
+      });
+
+      if (onSearchInput) {
+        onSearchInput(event);
+      }
+    });
+
+    _defineProperty(this, "handleSearchKeyDown", event => {
+      const {
+        firePrivateAnalyticsEvent
+      } = this.props;
+      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 === keycode('up')) {
+        event.preventDefault(); // Don't move cursor around in search input field
+
+        this.selectPrevious();
+      } else if (event.key === 'ArrowDown' && event.keyCode === keycode('down')) {
+        event.preventDefault(); // Don't move cursor around in search input field
+
+        this.selectNext();
+      } else if (event.key === 'Enter' && event.keyCode === keycode('enter')) {
+        // shift key pressed or no result selected
+        if (event.shiftKey || !this.state.selectedResultId) {
+          if (firePrivateAnalyticsEvent) {
+            firePrivateAnalyticsEvent(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
+
+          const 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(QS_ANALYTICS_EV_SUBMIT, { ...result.getAnalyticsData(),
+              method: 'returnKey',
+              newTab: false,
+              // enter always open in the same tab
+              resultCount: this.flatResults.length
+            });
+          }
+
+          let preventDefault = false;
+
+          if (result.props.onClick) {
+            result.props.onClick({
+              resultId: result.props.resultId,
+              type: result.props.type,
+              event: Object.assign({}, event, {
+                preventDefault() {
+                  preventDefault = true;
+                },
+
+                stopPropagation() {}
+
+              })
+            });
+          }
+
+          if (result.props.href && !preventDefault) {
+            window.location.assign(result.props.href);
+          }
+        }
+      } else if (event.key === 'Tab' || event.key === 'ArrowRight') {
+        const {
+          autocompleteText
+        } = this.props;
+
+        if (autocompleteText && autocompleteText.length > 0 && // multiple Tab or ArrowRight
+        autocompleteText.slice(-1) !== ' ') {
+          this.acceptAutocomplete(event, autocompleteText);
+          event.preventDefault();
+        }
+      }
+    });
+
+    _defineProperty(this, "acceptAutocomplete", (event, text) => {
+      const {
+        onSearchInput
+      } = this.props;
+      const newValue = `${text} `;
+
+      if (this.inputSearchRef) {
+        this.setState({
+          value: newValue
+        }); // @ts-ignore unchecked
+
+        this.inputSearchRef.value = newValue;
+      }
+
+      if (onSearchInput) {
+        onSearchInput(event, true);
+      }
+    });
+
+    _defineProperty(this, "setSearchInputRef", refs => {
+      if (refs && refs.inputRef) {
+        this.inputSearchRef = refs.inputRef;
+      }
+    });
+
+    _defineProperty(this, "focusSearchInput", () => {
+      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: resultId => {
+          return getResultIndexById(this.flatResults, resultId);
+        },
+        linkComponent: this.props.linkComponent
+      },
+      value: props.value
+    };
+  }
+
+  componentDidMount() {
+    const {
+      firePrivateAnalyticsEvent
+    } = this.props;
+
+    if (firePrivateAnalyticsEvent) {
+      firePrivateAnalyticsEvent(QS_ANALYTICS_EV_OPEN, {});
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      firePrivateAnalyticsEvent
+    } = this.props;
+
+    if (firePrivateAnalyticsEvent) {
+      firePrivateAnalyticsEvent(QS_ANALYTICS_EV_CLOSE, {});
+    }
+  }
+
+  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
+
+
+    const {
+      sendAnalytics,
+      linkComponent
+    } = this.state.context;
+
+    if (sendAnalytics !== nextProps.firePrivateAnalyticsEvent || linkComponent !== nextProps.linkComponent) {
+      this.setState({
+        context: { ...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;
+      const {
+        firePrivateAnalyticsEvent
+      } = this.props;
+
+      if (firePrivateAnalyticsEvent) {
+        firePrivateAnalyticsEvent(QS_ANALYTICS_EV_QUERY_ENTERED, {});
+      }
+    }
+  }
+
+  fireKeyboardControlEvent(selectedResultId) {
+    const {
+      firePrivateAnalyticsEvent
+    } = this.props;
+
+    if (firePrivateAnalyticsEvent) {
+      const result = getResultById(this.flatResults, selectedResultId);
+
+      if (result) {
+        firePrivateAnalyticsEvent(QS_ANALYTICS_EV_KB_CTRLS_USED, { ...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
+   */
+
+
+  render() {
+    return /*#__PURE__*/React.createElement(AkSearch, {
+      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.createElement(ResultContext.Provider, {
+      value: this.state.context
+    }, /*#__PURE__*/React.createElement(SelectedResultIdContext.Provider, {
+      value: this.state.selectedResultId
+    }, this.props.children)));
+  }
+
+}
+/**
+ * HOCs:
+ * `decorateWithAnalyticsData` - Wrapper that decorates analytics events with additional data.
+ * `withAnalytics` - Injects analytics firing methods that are picked up by
+ * @atlaskit/analytics/AnalyticsListener.
+ */
+
+_defineProperty(QuickSearch, "defaultProps", {
+  children: [],
+  firePrivateAnalyticsEvent: _ => {},
+  isLoading: false,
+  onSearchBlur: _ => {},
+  onSearchKeyDown: _ => {},
+  onSearchSubmit: _ => {},
+  placeholder: 'Search',
+  value: ''
+});
+
+export default decorateWithAnalyticsData( // @ts-ignore
+withAnalytics(QuickSearch, {}, {}));