@atlaskit/quick-search 8.2.4 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/quick-search
 
+## 9.0.0
+
+### Major Changes
+
+- [#105355](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105355)
+  [`ca71694e29a27`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca71694e29a27) -
+  Removed dependency on `@atlaskit/item` and replaced its usage with `@atlaskit/menu`. The following
+  ResultItem props have been **removed** as a result of this change:
+
+  - onMouseEnter
+  - onMouseLeave
+  - isCompact
+  - linkComponent
+
+  Additionally the following types have changed:
+
+  - ResultItemGroup's `title` prop has been restricted to `string`
+  - ResultItem's `onClick` prop has been changed to
+    `(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void` to match that of
+    `@atlaskit/menu`'s LinkItem types
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.2.4
 
 ### Patch Changes

package/dist/cjs/components/ResultItem/ResultItem.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,13 +13,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _item = _interopRequireWildcard(require("@atlaskit/item"));
+var _menu = require("@atlaskit/menu");
 var _styled = require("./styled");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var Item = (0, _item.withItemClick)((0, _item.withItemFocus)(_item.default));
 var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
   function ResultItem() {
     (0, _classCallCheck2.default)(this, ResultItem);
@@ -39,18 +35,14 @@ var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
       var wrappedSubText = this.props.subText ? /*#__PURE__*/_react.default.createElement(_styled.ResultItemSubText, null, this.props.subText) : null;
       var interactiveWrapperProps = {
         onClick: this.props.onClick,
-        onMouseEnter: this.props.onMouseEnter,
-        onMouseLeave: this.props.onMouseLeave,
         href: this.props.href
       };
-      return /*#__PURE__*/_react.default.createElement(Item, (0, _extends2.default)({
-        elemBefore: icon,
-        elemAfter: after,
-        description: wrappedSubText,
+      return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
+        iconBefore: icon,
+        iconAfter: after,
+        description: wrappedSubText || undefined,
         isSelected: this.props.isSelected,
-        isCompact: this.props.isCompact,
-        target: this.props.target,
-        linkComponent: this.props.linkComponent
+        target: this.props.target
       }, interactiveWrapperProps), this.props.text, wrappedCaption);
     }
   }]);

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

@@ -11,8 +11,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
-var _item = require("@atlaskit/item");
-var _styled = require("./styled");
+var _menu = require("@atlaskit/menu");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var ResultItemGroup = exports.default = /*#__PURE__*/function (_React$Component) {
@@ -27,10 +26,9 @@ var ResultItemGroup = exports.default = /*#__PURE__*/function (_React$Component)
       var _this$props = this.props,
         title = _this$props.title,
         children = _this$props.children;
-      var wrappedTitle = /*#__PURE__*/_react.default.createElement(_styled.ResultItemGroupHeader, null, /*#__PURE__*/_react.default.createElement(_styled.ResultItemGroupTitle, null, title));
-      return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
-        title: wrappedTitle
-      }, children);
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.Section, {
+        title: title
+      }, children));
     }
   }]);
 }(_react.default.Component);

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

@@ -4,26 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResultItemTextAfter = exports.ResultItemSubText = exports.ResultItemIcon = exports.ResultItemGroupTitle = exports.ResultItemGroupHeader = exports.ResultItemCaption = exports.ResultItemAfterWrapper = exports.ResultItemAfter = void 0;
+exports.ResultItemTextAfter = exports.ResultItemSubText = exports.ResultItemIcon = exports.ResultItemCaption = exports.ResultItemAfterWrapper = exports.ResultItemAfter = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("@atlaskit/theme/colors");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ResultItemGroupHeader = exports.ResultItemGroupHeader = _styledComponents.default.div({
-  display: 'flex',
-  marginLeft: "var(--ds-space-negative-150, -12px)",
-  marginTop: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ResultItemGroupTitle = exports.ResultItemGroupTitle = _styledComponents.default.div({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var ResultItemAfter = exports.ResultItemAfter = _styledComponents.default.div(function (props) {
   return {

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

@@ -120,11 +120,9 @@ var ResultBase = exports.ResultBase = /*#__PURE__*/function (_React$PureComponen
         href = _this$props3.href,
         target = _this$props3.target,
         icon = _this$props3.icon,
-        isCompact = _this$props3.isCompact,
         subText = _this$props3.subText,
         text = _this$props3.text,
-        resultId = _this$props3.resultId,
-        context = _this$props3.context;
+        resultId = _this$props3.resultId;
       var isMouseSelected = this.state.isMouseSelected;
       return /*#__PURE__*/_react.default.createElement(_context.SelectedResultIdContext.Consumer, null, function (selectedResultId) {
         return /*#__PURE__*/_react.default.createElement(_ResultItem.default, {
@@ -132,17 +130,13 @@ var ResultBase = exports.ResultBase = /*#__PURE__*/function (_React$PureComponen
           href: href,
           target: target,
           icon: icon,
-          isCompact: isCompact,
           isSelected: resultId === selectedResultId,
           onClick: _this2.handleClick,
-          onMouseEnter: _this2.handleMouseEnter,
-          onMouseLeave: _this2.handleMouseLeave,
           isMouseSelected: isMouseSelected,
           subText: subText,
           text: text,
           textAfter: elemAfter,
-          selectedIcon: selectedIcon,
-          linkComponent: context.linkComponent
+          selectedIcon: selectedIcon
         });
       });
     }

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

@@ -1,9 +1,8 @@
 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 { LinkItem } from '@atlaskit/menu';
 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;
@@ -15,18 +14,14 @@ class ResultItem extends React.PureComponent {
     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,
+    return /*#__PURE__*/React.createElement(LinkItem, _extends({
+      iconBefore: icon,
+      iconAfter: after,
+      description: wrappedSubText || undefined,
       isSelected: this.props.isSelected,
-      isCompact: this.props.isCompact,
-      target: this.props.target,
-      linkComponent: this.props.linkComponent
+      target: this.props.target
     }, interactiveWrapperProps), this.props.text, wrappedCaption);
   }
 }

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

@@ -1,15 +1,13 @@
 import React from 'react';
-import { ItemGroup } from '@atlaskit/item';
-import { ResultItemGroupTitle, ResultItemGroupHeader } from './styled';
+import { MenuGroup, Section } from '@atlaskit/menu';
 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);
+    return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Section, {
+      title: title
+    }, children));
   }
 }

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

@@ -1,21 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ResultItemGroupHeader = styled.div({
-  display: 'flex',
-  marginLeft: "var(--ds-space-negative-150, -12px)",
-  marginTop: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ResultItemGroupTitle = styled.div({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const ResultItemAfter = styled.div(props => ({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

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

@@ -93,11 +93,9 @@ export class ResultBase extends React.PureComponent {
       href,
       target,
       icon,
-      isCompact,
       subText,
       text,
-      resultId,
-      context
+      resultId
     } = this.props;
     const {
       isMouseSelected
@@ -107,17 +105,13 @@ export class ResultBase extends React.PureComponent {
       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
+      selectedIcon: selectedIcon
     }));
   }
 }

package/dist/esm/components/ResultItem/ResultItem.js

@@ -8,9 +8,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import baseItem, { withItemClick, withItemFocus } from '@atlaskit/item';
+import { LinkItem } from '@atlaskit/menu';
 import { ResultItemAfter, ResultItemAfterWrapper, ResultItemCaption, ResultItemIcon, ResultItemTextAfter, ResultItemSubText } from './styled';
-var Item = withItemClick(withItemFocus(baseItem));
 var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
   function ResultItem() {
     _classCallCheck(this, ResultItem);
@@ -29,18 +28,14 @@ var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
       var wrappedSubText = this.props.subText ? /*#__PURE__*/React.createElement(ResultItemSubText, null, this.props.subText) : null;
       var 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,
+      return /*#__PURE__*/React.createElement(LinkItem, _extends({
+        iconBefore: icon,
+        iconAfter: after,
+        description: wrappedSubText || undefined,
         isSelected: this.props.isSelected,
-        isCompact: this.props.isCompact,
-        target: this.props.target,
-        linkComponent: this.props.linkComponent
+        target: this.props.target
       }, interactiveWrapperProps), this.props.text, wrappedCaption);
     }
   }]);

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

@@ -6,8 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { ItemGroup } from '@atlaskit/item';
-import { ResultItemGroupTitle, ResultItemGroupHeader } from './styled';
+import { MenuGroup, Section } from '@atlaskit/menu';
 var ResultItemGroup = /*#__PURE__*/function (_React$Component) {
   function ResultItemGroup() {
     _classCallCheck(this, ResultItemGroup);
@@ -20,10 +19,9 @@ var ResultItemGroup = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         title = _this$props.title,
         children = _this$props.children;
-      var wrappedTitle = /*#__PURE__*/React.createElement(ResultItemGroupHeader, null, /*#__PURE__*/React.createElement(ResultItemGroupTitle, null, title));
-      return /*#__PURE__*/React.createElement(ItemGroup, {
-        title: wrappedTitle
-      }, children);
+      return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Section, {
+        title: title
+      }, children));
     }
   }]);
 }(React.Component);

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

@@ -1,21 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ResultItemGroupHeader = styled.div({
-  display: 'flex',
-  marginLeft: "var(--ds-space-negative-150, -12px)",
-  marginTop: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ResultItemGroupTitle = styled.div({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export var ResultItemAfter = styled.div(function (props) {
   return {

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

@@ -115,11 +115,9 @@ export var ResultBase = /*#__PURE__*/function (_React$PureComponent) {
         href = _this$props3.href,
         target = _this$props3.target,
         icon = _this$props3.icon,
-        isCompact = _this$props3.isCompact,
         subText = _this$props3.subText,
         text = _this$props3.text,
-        resultId = _this$props3.resultId,
-        context = _this$props3.context;
+        resultId = _this$props3.resultId;
       var isMouseSelected = this.state.isMouseSelected;
       return /*#__PURE__*/React.createElement(SelectedResultIdContext.Consumer, null, function (selectedResultId) {
         return /*#__PURE__*/React.createElement(ResultItem, {
@@ -127,17 +125,13 @@ export var ResultBase = /*#__PURE__*/function (_React$PureComponent) {
           href: href,
           target: target,
           icon: icon,
-          isCompact: isCompact,
           isSelected: resultId === selectedResultId,
           onClick: _this2.handleClick,
-          onMouseEnter: _this2.handleMouseEnter,
-          onMouseLeave: _this2.handleMouseLeave,
           isMouseSelected: isMouseSelected,
           subText: subText,
           text: text,
           textAfter: elemAfter,
-          selectedIcon: selectedIcon,
-          linkComponent: context.linkComponent
+          selectedIcon: selectedIcon
         });
       });
     }

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

@@ -8,18 +8,12 @@ type Props = {
     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;
+    onClick?(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): 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. */
@@ -28,8 +22,6 @@ type Props = {
     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>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
     /** Text to appear as heading above group. Will be auto-capitalised. */
-    title: React.ReactNode;
+    title: string;
     /** React Elements to be displayed within the group. This should generally be a collection of ResultItems. */
     children?: React.ReactNode;
 };

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

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-export declare const ResultItemGroupHeader: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const ResultItemGroupTitle: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ResultItemAfter: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     shouldTakeSpace: boolean;
 }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/dist/types-ts4.5/components/ResultItem/ResultItem.d.ts

@@ -8,18 +8,12 @@ type Props = {
     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;
+    onClick?(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): 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. */
@@ -28,8 +22,6 @@ type Props = {
     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>;

package/dist/types-ts4.5/components/ResultItem/ResultItemGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
     /** Text to appear as heading above group. Will be auto-capitalised. */
-    title: React.ReactNode;
+    title: string;
     /** React Elements to be displayed within the group. This should generally be a collection of ResultItems. */
     children?: React.ReactNode;
 };

package/dist/types-ts4.5/components/ResultItem/styled.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-export declare const ResultItemGroupHeader: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const ResultItemGroupTitle: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ResultItemAfter: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     shouldTakeSpace: boolean;
 }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/quick-search",
-	"version": "8.2.4",
+	"version": "9.0.0",
 	"description": "A quick-search component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
 	"dependencies": {
 		"@atlaskit/analytics": "^8.2.0",
 		"@atlaskit/avatar": "^21.17.0",
-		"@atlaskit/item": "^12.1.0",
+		"@atlaskit/menu": "^2.13.8",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"keycode": "^2.1.7"
 	},