@atlaskit/quick-search 8.0.9

package/dist/esm/components/Results/index.js

@@ -0,0 +1,4 @@
+export { default as ContainerResult } from './ContainerResult';
+export { default as ObjectResult } from './ObjectResult';
+export { default as PersonResult } from './PersonResult';
+export { default as ResultBase } from './ResultBase';

package/dist/esm/components/Results/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,108 @@
+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";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+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 Spinner from '@atlaskit/spinner';
+import styled from 'styled-components';
+import { SearchBox, SearchFieldBaseInner, SearchInner, SearchInput, SearchFieldBaseOuter, SearchInputControlsContainer, SearchInputTypeAhead } from './styled';
+export var controlKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'ArrowRight'];
+var SpinnerParent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 20px;\n  margin-left: 10px;\n  margin-top: 10px;\n"])));
+
+var Search = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Search, _React$PureComponent);
+
+  var _super = _createSuper(Search);
+
+  function Search() {
+    var _this;
+
+    _classCallCheck(this, Search);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
+      var onKeyDown = _this.props.onKeyDown;
+
+      if (!controlKeys.includes(event.key)) {
+        return;
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+
+      event.stopPropagation();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setInputRef", function (ref) {
+      _this.inputRef = ref;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderInputControls", function () {
+      return _this.props.inputControls ? /*#__PURE__*/React.createElement(SearchInputControlsContainer, null, _this.props.inputControls) : null;
+    });
+
+    return _this;
+  }
+
+  _createClass(Search, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          onBlur = _this$props.onBlur,
+          onInput = _this$props.onInput,
+          placeholder = _this$props.placeholder,
+          isLoading = _this$props.isLoading,
+          value = _this$props.value,
+          autocomplete = _this$props.autocompleteText;
+      return /*#__PURE__*/React.createElement(SearchInner, null, /*#__PURE__*/React.createElement(SearchBox, null, /*#__PURE__*/React.createElement(SearchFieldBaseOuter, null, /*#__PURE__*/React.createElement(SearchFieldBaseInner, null, autocomplete && /*#__PURE__*/React.createElement(SearchInputTypeAhead, {
+        spellCheck: false,
+        type: "text",
+        value: "".concat(autocomplete),
+        readOnly: true,
+        tabIndex: -1
+      }), /*#__PURE__*/React.createElement(SearchInput, {
+        autoFocus: true,
+        innerRef: this.setInputRef,
+        onBlur: onBlur,
+        onInput: onInput,
+        placeholder: placeholder,
+        spellCheck: false,
+        type: "text",
+        value: value,
+        onChange: function onChange() {} // Suppresses the console warning, we handle onChange by using onKeyDown instead.
+        ,
+        onKeyDown: this.onInputKeyDown
+      }), isLoading && /*#__PURE__*/React.createElement(SpinnerParent, null, /*#__PURE__*/React.createElement(Spinner, {
+        size: "small"
+      })))), this.renderInputControls()), children);
+    }
+  }]);
+
+  return Search;
+}(React.PureComponent);
+
+_defineProperty(Search, "defaultProps", {
+  isLoading: false,
+  onBlur: function onBlur() {},
+  placeholder: 'Search'
+});
+
+export { Search as default };

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

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

package/dist/esm/components/constants.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+export var ATLASKIT_QUICKSEARCH_NS = 'atlaskit.navigation.quick-search';
+export var QS_ANALYTICS_EV_CLOSE = "".concat(ATLASKIT_QUICKSEARCH_NS, ".close");
+export var QS_ANALYTICS_EV_KB_CTRLS_USED = "".concat(ATLASKIT_QUICKSEARCH_NS, ".keyboard-controls-used");
+export var QS_ANALYTICS_EV_OPEN = "".concat(ATLASKIT_QUICKSEARCH_NS, ".open");
+export var QS_ANALYTICS_EV_QUERY_ENTERED = "".concat(ATLASKIT_QUICKSEARCH_NS, ".query-entered");
+export var QS_ANALYTICS_EV_SUBMIT = "".concat(ATLASKIT_QUICKSEARCH_NS, ".submit");

package/dist/esm/components/context.js

@@ -0,0 +1,13 @@
+import React from '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);
+  }
+};
+export var ResultContext = /*#__PURE__*/React.createContext(defaultState);
+export var SelectedResultIdContext = /*#__PURE__*/React.createContext(null);

package/dist/esm/components/decorateWithAnalyticsData.js

@@ -0,0 +1,64 @@
+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 _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 { 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 = /*#__PURE__*/function (_React$Component) {
+    _inherits(DecorateWithAnalyticsData, _React$Component);
+
+    var _super = _createSuper(DecorateWithAnalyticsData);
+
+    function DecorateWithAnalyticsData() {
+      var _this;
+
+      _classCallCheck(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));
+
+      _defineProperty(_assertThisInitialized(_this), "countChildren", function () {
+        return React.Children.toArray(_this.props.children).reduce(function (total, group) {
+          return isReactElement(group) ? total + React.Children.count(group.props.children) : total;
+        }, 0);
+      });
+
+      return _this;
+    }
+
+    _createClass(DecorateWithAnalyticsData, [{
+      key: "render",
+      value: function 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));
+      }
+    }]);
+
+    return DecorateWithAnalyticsData;
+  }(React.Component), _defineProperty(_class, "defaultProps", {
+    children: [],
+    value: ''
+  }), _temp;
+}

package/dist/esm/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 (function (element) {
+  var type = element && element.type;
+  var hasFunctionAsType = !!type && typeof type === 'function';
+  var hasProps = element && element.props;
+  return hasFunctionAsType && hasProps;
+});

package/dist/esm/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/esm/version.json

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

package/dist/types/components/QuickSearch.d.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import { ResultData, SelectedResultId } from './Results/types';
+import { ResultContextType } from './context';
+import { ResultBase } from './Results/ResultBase';
+export declare type Props = {
+    /** Search results in the form of ResultItemGroups containing Result components */
+    children: React.ReactNode;
+    /** Set search loading state */
+    isLoading?: boolean;
+    /** onBlur callback for search input */
+    onSearchBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** onInput callback for search input */
+    onSearchInput?: (event: React.FormEvent<HTMLInputElement>, isAutocompleted?: boolean) => void;
+    /** onKeyDown callback for search input */
+    onSearchKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Called when the user submits the search form without selecting a result */
+    onSearchSubmit?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder text for search input field */
+    placeholder?: string;
+    /** Value of the search input field */
+    value?: string;
+    /** Corresponds to the `resultId` of the selected result */
+    selectedResultId?: SelectedResultId;
+    /** Optional way of being notified when the selected result changes due to keyboard nav */
+    onSelectedResultIdChanged?: (id: SelectedResultId) => void;
+    firePrivateAnalyticsEvent?: (eventName: string, eventData: Object) => void;
+    /** React component to be used for rendering links */
+    linkComponent?: React.ComponentType<any>;
+    /** The elements to render to the right of the search input. */
+    inputControls?: React.ReactNode;
+    /** One string that is used to autocomplete the current search query */
+    autocompleteText?: string;
+};
+export declare type State = {
+    selectedResultId: SelectedResultId;
+    context: ResultContextType;
+    value?: string;
+};
+export declare class QuickSearch extends React.Component<Props, State> {
+    static defaultProps: {
+        children: never[];
+        firePrivateAnalyticsEvent: (_: any) => void;
+        isLoading: boolean;
+        onSearchBlur: (_: any) => void;
+        onSearchKeyDown: (_: any) => void;
+        onSearchSubmit: (_: any) => void;
+        placeholder: string;
+        value: string;
+    };
+    inputSearchRef?: React.Ref<any>;
+    flatResults: Array<ResultBase>;
+    hasSearchQueryEventFired: boolean;
+    hasKeyDownEventFired: boolean;
+    lastKeyPressed: string;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    fireKeyboardControlEvent(selectedResultId: SelectedResultId): void;
+    /**
+     * 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
+     */
+    adjustSelectedResultIndex: (adjustment: number) => void;
+    /** Select next result */
+    selectNext: () => void;
+    /** Select previous result */
+    selectPrevious: () => void;
+    /**
+     * Callback for register results in flatResults
+     */
+    handleRegisterResult: (result: ResultBase) => void;
+    /**
+     * Callback for unregister results in flatResults
+     * It will reconcile a list of results for keyboard navigation after every update.
+     * 1. Component starts with an empty list of results
+     * 2. componentDidMount / componentDidUpdate lifecycle methods in ResultBase will be invoked
+     * 3. All ResultBase components call registerResult() in order to register itself in quick search
+     * 4. All ResultBase components call unregisterResult() in order to unregister itself in quick search
+     */
+    handleUnregisterResult: (result: ResultBase) => void;
+    /**
+     * Callback for mouseEnter events on individual results
+     * Move selection to hovered result
+     */
+    handleResultMouseEnter: (resultData: ResultData) => void;
+    /**
+     * Callback for mouseLeave events on individual results
+     * Clear result selection
+     */
+    handleResultMouseLeave: () => void;
+    /**
+     * Clear result selection when search input is blurred
+     */
+    handleSearchBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInput: (event: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * Keyboard controls
+     * Up - Select previous result
+     * Down - Select next result
+     * Enter - Submit selected result
+     * Tab / ArrowRight - Accept autocomplete
+     */
+    handleSearchKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    acceptAutocomplete: (event: React.KeyboardEvent<HTMLInputElement>, text?: string | undefined) => void;
+    setSearchInputRef: (refs: any) => void;
+    focusSearchInput: () => void;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<Props, any>;
+/**
+ * HOCs:
+ * `decorateWithAnalyticsData` - Wrapper that decorates analytics events with additional data.
+ * `withAnalytics` - Injects analytics firing methods that are picked up by
+ * @atlaskit/analytics/AnalyticsListener.
+ */
+export default _default;

package/dist/types/components/ResultItem/ResultItem.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+declare type Props = {
+    /** Text to appear to the right of the text. It has a lower font-weight. */
+    caption?: string;
+    /** Location to link out to on click. This is passed down to the custom link component if one is provided. */
+    href?: string;
+    /** Target frame for item `href` link to be aimed at. */
+    target?: string;
+    /** React element to appear to the left of the text. This should be an @atlaskit/icon component. */
+    icon?: React.ReactNode;
+    /** Makes the navigation item appear with reduced padding and font size. */
+    isCompact?: boolean;
+    /** Set whether the item should be highlighted as selected. Selected items have a different background color. */
+    isSelected?: boolean;
+    /** Set whether the item has been highlighted using mouse navigation. Mouse selected items will not display the selectedIcon. */
+    isMouseSelected?: boolean;
+    /** Function to be called on click. This is passed down to a custom link component, if one is provided.  */
+    onClick?(e: MouseEvent): void;
+    /** Standard onmouseenter event */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** Standard onmouseleave event */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** Text to be shown alongside the main `text`. */
+    subText?: React.ReactNode;
+    /** Main text to be displayed as the item. Accepts a react component but in most cases this should just be a string. */
+    text?: React.ReactNode;
+    /** React component to be placed to the right of the main text. */
+    textAfter?: React.ReactNode;
+    /** React component to be placed to the right of the main text when the item is selected with keyboard navigation. */
+    selectedIcon?: React.ReactNode;
+    /** React component to be used for rendering links */
+    linkComponent?: React.ComponentType;
+};
+declare class ResultItem extends React.PureComponent<Props> {
+    static defaultProps: Partial<Props>;
+    render(): JSX.Element;
+}
+export default ResultItem;

package/dist/types/components/ResultItem/ResultItemGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    /** Text to appear as heading above group. Will be auto-capitalised. */
+    title: React.ReactNode;
+    /** React Elements to be displayed within the group. This should generally be a collection of ResultItems. */
+    children?: React.ReactNode;
+};
+export default class ResultItemGroup extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export {};