@atlaskit/quick-search 8.0.9

package/dist/es2019/components/Search/styled.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+import { gridSize } from '@atlaskit/theme/constants';
+import { N0, N500, B200, placeholderText, N50 } from '@atlaskit/theme/colors';
+const inputRightPadding = gridSize() * 2;
+export const SearchBox = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 1; /* required to keep the search box on top of icons in results when sticky */
+  background-color: ${N0};
+  color: ${N500};
+  display: flex;
+  height: 36px;
+  z-index: 10;
+`;
+export const SearchFieldBaseOuter = styled.div`
+  display: flex;
+  flex: 1;
+  margin-right: auto;
+  padding-bottom: 2px;
+  border-bottom: 2px solid ${B200};
+`;
+export const SearchFieldBaseInner = styled.div`
+  position: relative;
+  align-items: center;
+  padding-right: ${inputRightPadding}px; /* pad search text from FieldBase's isLoading spinner */
+  display: flex;
+  flex-grow: 1;
+`;
+export const SearchInner = styled.div`
+  padding-right: ${gridSize() * 3}px;
+`;
+export const getPlaceholderStyle = style => css`
+  &::-webkit-input-placeholder {
+    ${style};
+  }
+  &::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    ${style} opacity: 1;
+  }
+  &::-ms-input-placeholder {
+    /* Microsoft Edge */
+    ${style};
+  }
+  &:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    ${style} opacity: 1;
+  }
+  &:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    ${style};
+  }
+`;
+export const getPlaceholderColor = css`
+  color: ${placeholderText};
+`;
+export const SearchInput = styled.input`
+  background-color: transparent;
+  border: 0;
+  color: ${N500};
+  flex-grow: 1;
+  font-size: 1.4em;
+  outline: 0;
+  // Safari adds 2px margin-left
+  margin-left: 0;
+  ${getPlaceholderStyle(getPlaceholderColor)};
+`;
+export const SearchInputTypeAhead = styled(SearchInput)`
+  color: ${N50};
+  position: absolute;
+  width: calc(100% - ${inputRightPadding}px);
+  z-index: -1;
+`;
+export const SearchInputControlsContainer = styled.span`
+  padding-left: ${gridSize() * 3}px;
+`;
+SearchInputControlsContainer.displayName = 'SearchInputControlsContainer'; // required for testing

package/dist/es2019/components/constants.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+export const ATLASKIT_QUICKSEARCH_NS = 'atlaskit.navigation.quick-search';
+export const QS_ANALYTICS_EV_CLOSE = `${ATLASKIT_QUICKSEARCH_NS}.close`;
+export const QS_ANALYTICS_EV_KB_CTRLS_USED = `${ATLASKIT_QUICKSEARCH_NS}.keyboard-controls-used`;
+export const QS_ANALYTICS_EV_OPEN = `${ATLASKIT_QUICKSEARCH_NS}.open`;
+export const QS_ANALYTICS_EV_QUERY_ENTERED = `${ATLASKIT_QUICKSEARCH_NS}.query-entered`;
+export const QS_ANALYTICS_EV_SUBMIT = `${ATLASKIT_QUICKSEARCH_NS}.submit`;

package/dist/es2019/components/context.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const defaultState = {
+  sendAnalytics: () => {},
+  onMouseEnter: () => {},
+  onMouseLeave: () => {},
+  registerResult: () => {},
+  unregisterResult: () => {},
+  getIndex: n => Number(n)
+};
+export const ResultContext = /*#__PURE__*/React.createContext(defaultState);
+export const SelectedResultIdContext = /*#__PURE__*/React.createContext(null);

package/dist/es2019/components/decorateWithAnalyticsData.js

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { AnalyticsDecorator } from '@atlaskit/analytics';
+import isReactElement from './isReactElement';
+import { QS_ANALYTICS_EV_SUBMIT } from './constants';
+export default function decorateWithAnalyticsData(WrappedQuickSearch) {
+  var _class, _temp;
+
+  return _temp = _class = class DecorateWithAnalyticsData extends React.Component {
+    constructor(...args) {
+      super(...args);
+
+      _defineProperty(this, "countChildren", () => {
+        return React.Children.toArray(this.props.children).reduce((total, group) => isReactElement(group) ? total + React.Children.count(group.props.children) : total, 0);
+      });
+    }
+
+    render() {
+      return /*#__PURE__*/React.createElement(AnalyticsDecorator, {
+        matchPrivate: true,
+        match: QS_ANALYTICS_EV_SUBMIT,
+        data: {
+          resultCount: this.countChildren(),
+          queryLength: this.props.value.length
+        }
+      }, /*#__PURE__*/React.createElement(WrappedQuickSearch, this.props));
+    }
+
+  }, _defineProperty(_class, "defaultProps", {
+    children: [],
+    value: ''
+  }), _temp;
+}

package/dist/es2019/components/isReactElement.js

@@ -0,0 +1,10 @@
+/**
+ * Heuristically check whether an element is a react element or not.
+ * React elements have constructors for their type property but native elements use strings.
+ */
+export default (element => {
+  const type = element && element.type;
+  const hasFunctionAsType = !!type && typeof type === 'function';
+  const hasProps = element && element.props;
+  return hasFunctionAsType && hasProps;
+});

package/dist/es2019/index.js

@@ -0,0 +1,23 @@
+import * as resultTypes from './components/Results';
+/*
+ This component is exported in two different ways.
+
+ v0: A legacy, backwards compatible API from when quick-search was living inside @atlaskit/navigation. This API
+ is deprecated and will be removed in the next major version.
+
+ v1: An API tailored to a stand-alone quick-search component.
+*/
+// API v0 Exports:
+
+export { default as AkNavigationItemGroup } from './components/ResultItem/ResultItemGroup';
+export { default as AkNavigationItem } from './components/ResultItem/ResultItem';
+export { default as AkQuickSearch } from './components/QuickSearch';
+export { default as AkSearch } from './components/Search/Search';
+export { resultTypes as quickSearchResultTypes }; // API v1 Exports:
+
+export { default as QuickSearch } from './components/QuickSearch';
+export { default as ResultItemGroup } from './components/ResultItem/ResultItemGroup';
+export { default as ObjectResult } from './components/Results/ObjectResult';
+export { default as PersonResult } from './components/Results/PersonResult';
+export { default as ContainerResult } from './components/Results/ContainerResult';
+export { default as ResultBase } from './components/Results/ResultBase'; // types

package/dist/es2019/version.json

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

package/dist/esm/components/QuickSearch.js

@@ -0,0 +1,442 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 _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 _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; } }
+
+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
+ */
+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;
+};
+
+export var QuickSearch = /*#__PURE__*/function (_React$Component) {
+  _inherits(QuickSearch, _React$Component);
+
+  var _super = _createSuper(QuickSearch);
+
+  function QuickSearch(props) {
+    var _this;
+
+    _classCallCheck(this, QuickSearch);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "flatResults", []);
+
+    _defineProperty(_assertThisInitialized(_this), "hasSearchQueryEventFired", false);
+
+    _defineProperty(_assertThisInitialized(_this), "hasKeyDownEventFired", false);
+
+    _defineProperty(_assertThisInitialized(_this), "lastKeyPressed", '');
+
+    _defineProperty(_assertThisInitialized(_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);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectNext", function () {
+      _this.adjustSelectedResultIndex(+1);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectPrevious", function () {
+      _this.adjustSelectedResultIndex(-1);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRegisterResult", function (result) {
+      if (!getResultById(_this.flatResults, result.props.resultId)) {
+        _this.flatResults.push(result);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleUnregisterResult", function (result) {
+      var resultIndex = getResultIndexById(_this.flatResults, result.props.resultId);
+
+      if (resultIndex !== null && +resultIndex >= 0) {
+        _this.flatResults.splice(resultIndex, 1);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResultMouseEnter", function (resultData) {
+      _this.setState({
+        selectedResultId: resultData && resultData.resultId
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResultMouseLeave", function () {
+      _this.setState({
+        selectedResultId: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSearchBlur", function (event) {
+      _this.props.onSearchBlur(event);
+
+      _this.setState({
+        selectedResultId: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onInput", function (event) {
+      var onSearchInput = _this.props.onSearchInput;
+
+      _this.setState({
+        value: event.currentTarget.value
+      });
+
+      if (onSearchInput) {
+        onSearchInput(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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 === 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
+
+          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(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();
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setSearchInputRef", function (refs) {
+      if (refs && refs.inputRef) {
+        _this.inputSearchRef = refs.inputRef;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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;
+  }
+
+  _createClass(QuickSearch, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+      if (firePrivateAnalyticsEvent) {
+        firePrivateAnalyticsEvent(QS_ANALYTICS_EV_OPEN, {});
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
+
+      if (firePrivateAnalyticsEvent) {
+        firePrivateAnalyticsEvent(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(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(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.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)));
+    }
+  }]);
+
+  return QuickSearch;
+}(React.Component);
+/**
+ * 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: function firePrivateAnalyticsEvent(_) {},
+  isLoading: false,
+  onSearchBlur: function onSearchBlur(_) {},
+  onSearchKeyDown: function onSearchKeyDown(_) {},
+  onSearchSubmit: function onSearchSubmit(_) {},
+  placeholder: 'Search',
+  value: ''
+});
+
+export default decorateWithAnalyticsData( // @ts-ignore
+withAnalytics(QuickSearch, {}, {}));