@atlaskit/quick-search 8.0.9

package/dist/es2019/components/ResultItem/ResultItem.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import baseItem, { withItemClick, withItemFocus } from '@atlaskit/item';
+import { ResultItemAfter, ResultItemAfterWrapper, ResultItemCaption, ResultItemIcon, ResultItemTextAfter, ResultItemSubText } from './styled';
+const Item = withItemClick(withItemFocus(baseItem));
+
+class ResultItem extends React.PureComponent {
+  render() {
+    const icon = this.props.icon ? /*#__PURE__*/React.createElement(ResultItemIcon, null, this.props.icon) : null;
+    const textAfter = this.props.textAfter ? /*#__PURE__*/React.createElement(ResultItemTextAfter, null, this.props.textAfter) : null;
+    const after = this.props.textAfter || this.props.selectedIcon ? /*#__PURE__*/React.createElement(ResultItemAfterWrapper, null, /*#__PURE__*/React.createElement(ResultItemAfter, {
+      shouldTakeSpace: !!this.props.textAfter
+    }, textAfter, this.props.isSelected && !this.props.isMouseSelected ? this.props.selectedIcon : null)) : null;
+    const wrappedCaption = this.props.caption ? /*#__PURE__*/React.createElement(ResultItemCaption, null, this.props.caption) : null;
+    const wrappedSubText = this.props.subText ? /*#__PURE__*/React.createElement(ResultItemSubText, null, this.props.subText) : null;
+    const interactiveWrapperProps = {
+      onClick: this.props.onClick,
+      onMouseEnter: this.props.onMouseEnter,
+      onMouseLeave: this.props.onMouseLeave,
+      href: this.props.href
+    };
+    return /*#__PURE__*/React.createElement(Item, _extends({
+      elemBefore: icon,
+      elemAfter: after,
+      description: wrappedSubText,
+      isSelected: this.props.isSelected,
+      isCompact: this.props.isCompact,
+      target: this.props.target,
+      linkComponent: this.props.linkComponent
+    }, interactiveWrapperProps), this.props.text, wrappedCaption);
+  }
+
+}
+
+_defineProperty(ResultItem, "defaultProps", {
+  isSelected: false,
+  isMouseSelected: false
+});
+
+export default ResultItem;

package/dist/es2019/components/ResultItem/ResultItemGroup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ItemGroup } from '@atlaskit/item';
+import { ResultItemGroupTitle, ResultItemGroupHeader } from './styled';
+export default class ResultItemGroup extends React.Component {
+  render() {
+    const {
+      title,
+      children
+    } = this.props;
+    const wrappedTitle = /*#__PURE__*/React.createElement(ResultItemGroupHeader, null, /*#__PURE__*/React.createElement(ResultItemGroupTitle, null, title));
+    return /*#__PURE__*/React.createElement(ItemGroup, {
+      title: wrappedTitle
+    }, children);
+  }
+
+}

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import { gridSize } from '@atlaskit/theme/constants';
+import { N200 } from '@atlaskit/theme/colors';
+export const ResultItemGroupHeader = styled.div`
+  display: flex;
+  margin-left: -${gridSize() * 1.5}px;
+  margin-top: ${gridSize() * 1.5}px;
+`;
+export const ResultItemGroupTitle = styled.div`
+  font-size: 11px;
+  line-height: ${gridSize() * 2}px;
+  font-weight: 600;
+`;
+export const ResultItemAfter = styled.div`
+  min-width: ${({
+  shouldTakeSpace
+}) => shouldTakeSpace ? '24px' : 0};
+`;
+export const ResultItemAfterWrapper = styled.div`
+  display: flex;
+`;
+export const ResultItemCaption = styled.span`
+  color: ${N200};
+  font-size: 12px;
+  margin-left: ${gridSize()}px;
+`;
+export const ResultItemSubText = styled.span`
+  font-size: 12px;
+  color: ${N200};
+`;
+export const ResultItemIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: padding 200ms;
+
+  > * {
+    flex: 1 0 auto;
+  }
+
+  /* We need to ensure that any image passed in as a child (<img/>, <svg/>
+    etc.) receives the correct width, height and border radius. We don't
+    currently assume that the image passed in is the correct dimensions, or has
+    width / height 100% */
+  > img {
+    height: ${gridSize() * 3}px;
+    width: ${gridSize() * 3}px;
+  }
+`;
+export const ResultItemTextAfter = styled.div`
+  position: relative;
+  z-index: 1;
+`;

package/dist/es2019/components/Results/ContainerResult.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import ResultBase from './ResultBase';
+
+/**
+ * Generic result type for Atlassian containers.
+ */
+export default class ContainerResult extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getAvatar", () => {
+      if (this.props.avatar) {
+        return this.props.avatar;
+      }
+
+      return /*#__PURE__*/React.createElement(Avatar, {
+        borderColor: "transparent",
+        src: this.props.avatarUrl,
+        appearance: "square",
+        size: "small",
+        status: this.props.isPrivate ? 'locked' : null
+      });
+    });
+  }
+
+  render() {
+    const {
+      name,
+      isPrivate,
+      type = 'container',
+      subText,
+      ...commonResultProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResultBase, _extends({}, commonResultProps, {
+      type: type,
+      text: name,
+      subText: subText,
+      icon: this.getAvatar()
+    }));
+  }
+
+}

package/dist/es2019/components/Results/ObjectResult.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import ResultBase from './ResultBase';
+
+/**
+ * Generic result type for Atlassian objects.
+ */
+export default class ObjectResult extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getAvatar", () => {
+      if (this.props.avatar) {
+        return this.props.avatar;
+      }
+
+      return /*#__PURE__*/React.createElement(Avatar, {
+        borderColor: "transparent",
+        src: this.props.avatarUrl,
+        appearance: "square",
+        size: "small",
+        status: this.props.isPrivate ? 'locked' : null,
+        testId: "object-result"
+      });
+    });
+  }
+
+  getSubtext() {
+    const {
+      objectKey,
+      containerName
+    } = this.props;
+
+    if (objectKey && containerName) {
+      return /*#__PURE__*/React.createElement("span", null, objectKey, " \xB7 ", containerName);
+    }
+
+    return containerName || objectKey;
+  }
+
+  render() {
+    const {
+      name,
+      containerName,
+      isPrivate,
+      objectKey,
+      type = 'object',
+      ...commonResultProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResultBase, _extends({}, commonResultProps, {
+      type: type,
+      text: name,
+      subText: this.getSubtext(),
+      icon: this.getAvatar()
+    }));
+  }
+
+}

package/dist/es2019/components/Results/PersonResult.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import ResultBase from './ResultBase';
+export default class PersonResult extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getMention", () => this.props.mentionName ? `${this.props.mentionPrefix}${this.props.mentionName}` : undefined);
+
+    _defineProperty(this, "getAvatar", () => {
+      if (this.props.avatar) {
+        return this.props.avatar;
+      }
+
+      return /*#__PURE__*/React.createElement(Avatar, {
+        presence: this.props.presenceState,
+        size: "small",
+        src: this.props.avatarUrl
+      });
+    });
+  }
+
+  render() {
+    const {
+      name,
+      mentionName,
+      mentionPrefix,
+      presenceMessage,
+      presenceState,
+      type = 'person',
+      ...commonResultProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResultBase, _extends({}, commonResultProps, {
+      type: type,
+      text: name,
+      subText: presenceMessage,
+      caption: this.getMention(),
+      icon: this.getAvatar()
+    }));
+  }
+
+}
+
+_defineProperty(PersonResult, "defaultProps", {
+  mentionPrefix: '@',
+  presenceState: null // No presence indicator by default
+
+});

package/dist/es2019/components/Results/ResultBase.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { QS_ANALYTICS_EV_SUBMIT } from '../constants';
+import ResultItem from '../ResultItem/ResultItem';
+import { ResultContext, SelectedResultIdContext } from '../context';
+export class ResultBase extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      isMouseSelected: false
+    });
+
+    _defineProperty(this, "handleClick", e => {
+      const {
+        onClick,
+        resultId,
+        type,
+        context
+      } = this.props;
+
+      if (context.sendAnalytics) {
+        context.sendAnalytics(QS_ANALYTICS_EV_SUBMIT, { ...this.getAnalyticsData(),
+          method: 'click',
+          newTab: e && (e.metaKey || e.shiftKey || e.ctrlKey)
+        });
+      }
+
+      if (onClick) {
+        onClick({
+          resultId,
+          type,
+          event: e
+        });
+      }
+    });
+
+    _defineProperty(this, "handleMouseEnter", event => {
+      this.props.context.onMouseEnter({
+        resultId: this.props.resultId,
+        type: this.props.type,
+        event
+      });
+      this.setState({
+        isMouseSelected: true
+      });
+    });
+
+    _defineProperty(this, "handleMouseLeave", () => {
+      this.props.context.onMouseLeave();
+      this.setState({
+        isMouseSelected: false
+      });
+    });
+  }
+
+  registerResult() {
+    const {
+      context
+    } = this.props;
+    context.registerResult(this);
+  }
+
+  componentDidMount() {
+    this.registerResult();
+  }
+
+  componentDidUpdate() {
+    this.registerResult();
+  }
+
+  componentWillUnmount() {
+    const {
+      context
+    } = this.props;
+    context.unregisterResult(this);
+  }
+
+  getAnalyticsData() {
+    const {
+      resultId,
+      analyticsData,
+      type,
+      context
+    } = this.props;
+    return {
+      index: context.getIndex(resultId),
+      type,
+      resultId,
+      ...(analyticsData instanceof Function ? analyticsData() : analyticsData)
+    };
+  }
+
+  render() {
+    const {
+      caption,
+      elemAfter,
+      selectedIcon,
+      href,
+      target,
+      icon,
+      isCompact,
+      subText,
+      text,
+      resultId,
+      context
+    } = this.props;
+    const {
+      isMouseSelected
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SelectedResultIdContext.Consumer, null, selectedResultId => /*#__PURE__*/React.createElement(ResultItem, {
+      caption: caption,
+      href: href,
+      target: target,
+      icon: icon,
+      isCompact: isCompact,
+      isSelected: resultId === selectedResultId,
+      onClick: this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      isMouseSelected: isMouseSelected,
+      subText: subText,
+      text: text,
+      textAfter: elemAfter,
+      selectedIcon: selectedIcon,
+      linkComponent: context.linkComponent
+    }));
+  }
+
+}
+
+_defineProperty(ResultBase, "defaultProps", {
+  type: 'base',
+  context: {
+    registerResult: result => {},
+    unregisterResult: result => {},
+    onMouseEnter: resultData => {},
+    onMouseLeave: () => {},
+    // @ts-ignore
+    sendAnalytics: (string, data) => {},
+    getIndex: () => null
+  },
+  analyticsData: {}
+});
+
+export default (props => /*#__PURE__*/React.createElement(ResultContext.Consumer, null, context => /*#__PURE__*/React.createElement(ResultBase, _extends({
+  context: context
+}, props))));

package/dist/es2019/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/es2019/components/Results/types.js

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

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

@@ -0,0 +1,80 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 const controlKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'ArrowRight'];
+const SpinnerParent = styled.div`
+  height: 20px;
+  margin-left: 10px;
+  margin-top: 10px;
+`;
+export default class Search extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "onInputKeyDown", event => {
+      const {
+        onKeyDown
+      } = this.props;
+
+      if (!controlKeys.includes(event.key)) {
+        return;
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+
+      event.stopPropagation();
+    });
+
+    _defineProperty(this, "setInputRef", ref => {
+      this.inputRef = ref;
+    });
+
+    _defineProperty(this, "renderInputControls", () => {
+      return this.props.inputControls ? /*#__PURE__*/React.createElement(SearchInputControlsContainer, null, this.props.inputControls) : null;
+    });
+  }
+
+  render() {
+    const {
+      children,
+      onBlur,
+      onInput,
+      placeholder,
+      isLoading,
+      value,
+      autocompleteText: autocomplete
+    } = this.props;
+    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: `${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: () => {} // 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);
+  }
+
+}
+
+_defineProperty(Search, "defaultProps", {
+  isLoading: false,
+  onBlur: () => {},
+  placeholder: 'Search'
+});