@atlaskit/help 7.14.1 → 7.14.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/help
 
+## 7.14.3
+
+### Patch Changes
+
+- [#110491](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110491)
+  [`a49d7ed81fc11`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a49d7ed81fc11) -
+  [ux] adding tabs to Ai enabled IPH
+- Updated dependencies
+
+## 7.14.2
+
+### Patch Changes
+
+- [#110345](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110345)
+  [`3b17474e79cff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b17474e79cff) -
+  [ux] refactoring placement of search bar and back button
+
 ## 7.14.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };

package/dist/cjs/components/Article/ArticleLoadingFail/index.js

@@ -17,7 +17,7 @@ var _styled = require("./styled");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var ArticleLoadingFail = exports.ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var ArticleWasHelpfulNoButton = exports.ArticleWasHelpfulNoButton = function ArticleWasHelpfulNoButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -13,7 +13,7 @@ var _messages = require("../../../../messages");
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var ArticleWasHelpfulYesButton = exports.ArticleWasHelpfulYesButton = function ArticleWasHelpfulYesButton(_ref) {
   var _ref$isSelected = _ref.isSelected,

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -43,7 +43,7 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var buttonStyles = (0, _react2.css)({
   padding: '0',

package/dist/cjs/components/Article/HelpArticle/index.js

@@ -65,7 +65,7 @@ var HelpArticle = exports.HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.14.1"
+      packageVersion: "7.14.3"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

package/dist/cjs/components/Article/WhatsNewArticle/index.js

@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var WhatsNewArticle = exports.WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/cjs/components/Article/index.js

@@ -36,8 +36,9 @@ var transitionStyles = {
     left: '100%'
   }
 };
-var Article = exports.Article = function Article() {
+var Article = exports.Article = function Article(_ref) {
   var _history$length;
+  var isAiEnabled = _ref.isAiEnabled;
   var _useNavigationContext = (0, _navigationContext.useNavigationContext)(),
     view = _useNavigationContext.view,
     articleId = _useNavigationContext.articleId,
@@ -114,7 +115,24 @@ var Article = exports.Article = function Article() {
       setShowArticle(view === _constants.VIEW.ARTICLE || view === _constants.VIEW.WHATS_NEW_ARTICLE);
     }
   }, [view, showArticle]);
-  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+  return isAiEnabled ? /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    in: showArticle,
+    timeout: _constants.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
+    enter: !skipArticleSlideInAnimation,
+    onEntered: onArticleEntered,
+    onExit: onArticleExit,
+    unmountOnExit: true,
+    mountOnEnter: true
+  }, function (state) {
+    return /*#__PURE__*/_react.default.createElement(_styled.ArticleContainerAi, {
+      ref: articleContainerRef,
+      style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled'])
+    }, /*#__PURE__*/_react.default.createElement(_ArticleContent.default, {
+      currentArticle: currentArticle,
+      onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
+      onWhatsNewArticleLoadingFailTryAgainButtonClick: reloadWhatsNewArticle && handleOnWhatsNewArticleLoadingFailTryAgainButtonClick
+    }));
+  }) : /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: showArticle,
     timeout: _constants.SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
     enter: !skipArticleSlideInAnimation,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleContainer = void 0;
+exports.ArticleContainerAi = exports.ArticleContainer = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 /**
  * @jsxRuntime classic
@@ -28,4 +28,23 @@ var ArticleContainer = exports.ArticleContainer = _styled.default.div({
   overflowX: 'hidden',
   overflowY: 'auto',
   zIndex: 2
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ArticleContainerAi = exports.ArticleContainerAi = _styled.default.div({
+  paddingLeft: "var(--ds-space-300, 24px)",
+  paddingRight: "var(--ds-space-300, 24px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  position: 'absolute',
+  height: "calc(100% - ".concat("var(--ds-space-800, 60px)", ")"),
+  width: '100%',
+  top: "var(--ds-space-800, 60px)",
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  left: '100%',
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 2
 });

package/dist/cjs/components/ArticlesList/ArticlesListItem/index.js

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var highlightText = function highlightText(text) {
   if (!text) {

package/dist/cjs/components/BackButton/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BackButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _reactTransitionGroup = require("react-transition-group");
+var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _messages = require("../../messages");
+var _styled = require("../styled");
+var _constants = require("../constants");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Animation
+var defaultStyle = {
+  transition: "left ".concat(_constants.TRANSITION_DURATION_MS, "ms, opacity ").concat(_constants.TRANSITION_DURATION_MS, "ms"),
+  left: "var(--ds-space-300, 24px)",
+  opacity: 0
+};
+var transitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+var BackButton = exports.BackButton = function BackButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    formatMessage = _ref.intl.formatMessage;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var handleOnClick = function handleOnClick(event) {
+    if (onClick) {
+      var _analyticsEvent = createAnalyticsEvent({
+        action: 'clicked'
+      });
+      onClick(event, _analyticsEvent);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    in: isVisible,
+    timeout: _constants.TRANSITION_DURATION_MS,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, function (state) {
+    return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
+      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+    }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      onClick: function onClick(event) {
+        if (state === 'entered') {
+          handleOnClick(event);
+        }
+      },
+      appearance: "subtle",
+      iconBefore: /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
+        color: "currentColor",
+        label: "",
+        LEGACY_size: "medium"
+      })
+    }, formatMessage(_messages.messages.help_panel_search_back)));
+  });
+};
+var BackButtonWithContext = function BackButtonWithContext(props) {
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      componentName: 'backButton',
+      packageName: "@atlaskit/help",
+      packageVersion: "7.14.3"
+    }
+  }, /*#__PURE__*/_react.default.createElement(BackButton, props));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(BackButtonWithContext);

package/dist/cjs/components/Help.js

@@ -52,7 +52,7 @@ var Help = exports.Help = /*#__PURE__*/function (_React$PureComponent) {
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(LocaleIntlProvider, null, /*#__PURE__*/_react.default.createElement(_headerContext.HeaderContextProvider, rest.header, /*#__PURE__*/_react.default.createElement(_homeContext.HomeContextProvider, (0, _extends2.default)({}, rest.home, {
         homeContent: children
-      }), /*#__PURE__*/_react.default.createElement(_helpArticleContext.HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/_react.default.createElement(_relatedArticlesContext.RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/_react.default.createElement(_searchContext.SearchContextProvider, rest.search, /*#__PURE__*/_react.default.createElement(_whatsNewArticleContext.WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/_react.default.createElement(_navigationContext.NavigationContextProvider, rest.navigation, /*#__PURE__*/_react.default.createElement(_aiAgentContext.AiContextProvider, rest.ai, /*#__PURE__*/_react.default.createElement(_HelpContent.default, {
+      }), /*#__PURE__*/_react.default.createElement(_helpArticleContext.HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/_react.default.createElement(_relatedArticlesContext.RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/_react.default.createElement(_searchContext.SearchContextProvider, rest.search, /*#__PURE__*/_react.default.createElement(_whatsNewArticleContext.WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/_react.default.createElement(_aiAgentContext.AiContextProvider, rest.ai, /*#__PURE__*/_react.default.createElement(_navigationContext.NavigationContextProvider, rest.navigation, /*#__PURE__*/_react.default.createElement(_HelpContent.default, {
         footer: footer
       }))))))))));
     }

package/dist/cjs/components/HelpContent.js

@@ -23,11 +23,18 @@ var _Article = _interopRequireDefault(require("./Article"));
 var _WhatsNewButton = _interopRequireDefault(require("./WhatsNew/WhatsNewButton"));
 var _WhatsNewResults = _interopRequireDefault(require("./WhatsNew/WhatsNewResults"));
 var _HelpContentButton = _interopRequireDefault(require("./HelpContentButton"));
+var _BackButton = _interopRequireDefault(require("./BackButton"));
 var _styled = require("./styled");
+var _Tabs = require("./Tabs");
+var _aiChat = _interopRequireDefault(require("@atlaskit/icon/core/ai-chat"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../messages");
 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; }
 var HelpContent = exports.HelpContent = function HelpContent(_ref) {
-  var footer = _ref.footer;
+  var footer = _ref.footer,
+    formatMessage = _ref.intl.formatMessage;
   // TODO: this will enable all the features and refactors related to AI
   var _useAiContext = (0, _aiAgentContext.useAiContext)(),
     isAiEnabled = _useAiContext.isAiEnabled;
@@ -61,7 +68,7 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
   }, [navigateBack, onBackButtonClick]);
   (0, _react.useEffect)(function () {
     var handler;
-    if (isOverlayVisible) {
+    if (isOverlayVisible && !isAiEnabled) {
       handler = setTimeout(function () {
         setIsOverlayFullyVisible(isOverlayVisible);
       }, _constants.HIDE_CONTENT_DELAY);
@@ -73,15 +80,45 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
         clearTimeout(handler);
       }
     };
-  }, [isOverlayVisible]);
-  return /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
-    onBackButtonClick: handleOnBackButtonClick,
+  }, [isOverlayVisible, isAiEnabled]);
+
+  // Values for tabs
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeTab = _useState4[0],
+    setActiveTab = _useState4[1];
+  var handleTabClick = function handleTabClick(index) {
+    setActiveTab(index);
+    // add custom event here via props
+  };
+  var tabs = [{
+    label: formatMessage(_messages.messages.help_ai_tab),
+    icon: /*#__PURE__*/_react.default.createElement(_aiChat.default, {
+      label: formatMessage(_messages.messages.help_ai_tab)
+    })
+  }, {
+    label: formatMessage(_messages.messages.help_search_tab),
+    icon: /*#__PURE__*/_react.default.createElement(_search.default, {
+      label: formatMessage(_messages.messages.help_search_tab)
+    })
+  }];
+  var HelpLayoutWithAi = /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
     onCloseButtonClick: onClose,
-    isBackbuttonVisible: canNavigateBack,
-    footer: !isAiEnabled ? footer : undefined,
-    headerContent: onSearch && /*#__PURE__*/_react.default.createElement(_SearchInput.default, null),
     isAiEnabled: isAiEnabled
-  }, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyContainer, null, /*#__PURE__*/_react.default.createElement(_styled.HelpBody, null, /*#__PURE__*/_react.default.createElement(_SearchResults.default, null), /*#__PURE__*/_react.default.createElement(_Article.default, null), /*#__PURE__*/_react.default.createElement(_styled.Home, {
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
+    activeTab: activeTab,
+    onTabClick: handleTabClick,
+    tabs: tabs
+  }), activeTab === 0 && /*#__PURE__*/_react.default.createElement("div", null, "ai agent here"), activeTab === 1 && /*#__PURE__*/_react.default.createElement(_styled.HelpBodyContainer, null, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyAi, null, /*#__PURE__*/_react.default.createElement(_BackButton.default, {
+    onClick: handleOnBackButtonClick,
+    isVisible: canNavigateBack
+  }), onSearch && /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    isAiEnabled: true
+  }), /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+    isAiEnabled: true
+  }), /*#__PURE__*/_react.default.createElement(_Article.default, {
+    isAiEnabled: true
+  }), /*#__PURE__*/_react.default.createElement(_styled.HomeAi, {
     isOverlayFullyVisible: isOverlayFullyVisible,
     isOverlayVisible: isOverlayVisible
   }, homeContent, onSearchWhatsNewArticles && onGetWhatsNewArticle && /*#__PURE__*/_react.default.createElement(_WhatsNewButton.default, {
@@ -90,8 +127,25 @@ var HelpContent = exports.HelpContent = function HelpContent(_ref) {
     return /*#__PURE__*/_react.default.createElement(_HelpContentButton.default, (0, _extends2.default)({
       key: defaultOption.id
     }, defaultOption));
-  }))), /*#__PURE__*/_react.default.createElement(_WhatsNewResults.default, null), isAiEnabled && footer && /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, {
+  }))), /*#__PURE__*/_react.default.createElement(_WhatsNewResults.default, null), footer && /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, {
     "data-testid": "inside-footer"
   }, footer)));
+  var HelpLayoutWithoutAi = /*#__PURE__*/_react.default.createElement(_helpLayout.default, {
+    onBackButtonClick: handleOnBackButtonClick,
+    onCloseButtonClick: onClose,
+    isBackbuttonVisible: canNavigateBack,
+    footer: footer,
+    headerContent: onSearch && /*#__PURE__*/_react.default.createElement(_SearchInput.default, null)
+  }, /*#__PURE__*/_react.default.createElement(_styled.HelpBodyContainer, null, /*#__PURE__*/_react.default.createElement(_styled.HelpBody, null, /*#__PURE__*/_react.default.createElement(_SearchResults.default, null), /*#__PURE__*/_react.default.createElement(_Article.default, null), /*#__PURE__*/_react.default.createElement(_styled.Home, {
+    isOverlayFullyVisible: isOverlayFullyVisible,
+    isOverlayVisible: isOverlayVisible
+  }, homeContent, onSearchWhatsNewArticles && onGetWhatsNewArticle && /*#__PURE__*/_react.default.createElement(_WhatsNewButton.default, {
+    productName: productName
+  }), homeOptions && homeOptions.map(function (defaultOption) {
+    return /*#__PURE__*/_react.default.createElement(_HelpContentButton.default, (0, _extends2.default)({
+      key: defaultOption.id
+    }, defaultOption));
+  }))), /*#__PURE__*/_react.default.createElement(_WhatsNewResults.default, null)));
+  return isAiEnabled ? HelpLayoutWithAi : HelpLayoutWithoutAi;
 };
-var _default = exports.default = HelpContent;
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

package/dist/cjs/components/HelpContentButton/index.js

@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,

package/dist/cjs/components/RelatedArticles/index.js

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var packageName = "@atlaskit/help";
-var packageVersion = "7.14.1";
+var packageVersion = "7.14.3";
 var buttonStyles = (0, _react2.css)({
   padding: '0',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/cjs/components/Search/SearchInput/index.js

@@ -19,7 +19,9 @@ var _reactIntlNext = require("react-intl-next");
 var _Requests = require("../../../model/Requests");
 var _searchContext = require("../../contexts/searchContext");
 var _messages = require("../../../messages");
+var _constants2 = require("../../constants");
 var _styled = require("./styled");
+var _navigationContext = require("../../contexts/navigationContext");
 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; }
 /**
@@ -32,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.1"
+  packageVersion: "7.14.3"
 };
 var buttonStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -41,7 +43,11 @@ var buttonStyles = (0, _react2.css)({
   height: "".concat((0, _constants.gridSize)() * 3, "px")
 });
 var SearchInput = exports.SearchInput = function SearchInput(_ref) {
-  var formatMessage = _ref.intl.formatMessage;
+  var formatMessage = _ref.intl.formatMessage,
+    _ref$isAiEnabled = _ref.isAiEnabled,
+    isAiEnabled = _ref$isAiEnabled === void 0 ? false : _ref$isAiEnabled;
+  var _useNavigationContext = (0, _navigationContext.useNavigationContext)(),
+    view = _useNavigationContext.view;
   var _useSearchContext = (0, _searchContext.useSearchContext)(),
     searchValue = _useSearchContext.searchValue,
     searchState = _useSearchContext.searchState,
@@ -88,7 +94,38 @@ var SearchInput = exports.SearchInput = function SearchInput(_ref) {
   if (inputRef && inputRef.current) {
     inputRef.current.value = searchValue;
   }
-  return (0, _react2.jsx)(_styled.SearchInputContainer, null, (0, _react2.jsx)(_textfield.default, {
+  if (view === _constants2.VIEW.ARTICLE || view === _constants2.VIEW.WHATS_NEW_ARTICLE) {
+    return null;
+  }
+  return isAiEnabled ? (0, _react2.jsx)(_styled.SearchInputContainerAi, null, (0, _react2.jsx)(_textfield.default, {
+    title: "Help articles search input",
+    autoComplete: "off",
+    ref: inputRef,
+    name: "help-search-input",
+    elemBeforeInput: (0, _react2.jsx)(_styled.SearchIconContainer, null, (0, _react2.jsx)(_search.default, {
+      LEGACY_margin: "0 2px",
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    elemAfterInput: (0, _react2.jsx)(_styled.CloseButtonAndSpinnerContainer, null, searchState === _Requests.REQUEST_STATE.loading && (0, _react2.jsx)(_spinner.default, {
+      size: "small"
+    }), searchValue !== '' && (0, _react2.jsx)(_customThemeButton.default, {
+      css: buttonStyles,
+      appearance: "subtle",
+      onClick: handleOnClearButtonClick,
+      spacing: "none",
+      "aria-label": "Clear field"
+    }, (0, _react2.jsx)(_closeEditorClose.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }))),
+    placeholder: formatMessage(_messages.messages.help_search_placeholder),
+    onChange: handleOnInputChange,
+    onKeyPress: handleOnKeyPress,
+    value: searchValue
+  })) : (0, _react2.jsx)(_styled.SearchInputContainer, null, (0, _react2.jsx)(_textfield.default, {
     title: "Help articles search input",
     autoComplete: "off",
     ref: inputRef,

package/dist/cjs/components/Search/SearchInput/styled.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchInputContainer = exports.SearchIconContainer = exports.CloseButtonAndSpinnerContainer = void 0;
+exports.SearchInputContainerAi = exports.SearchInputContainer = exports.SearchIconContainer = exports.CloseButtonAndSpinnerContainer = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 /**
  * @jsxRuntime classic
@@ -21,6 +21,20 @@ var SearchInputContainer = exports.SearchInputContainer = _styled.default.div({
   boxSizing: 'border-box'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchInputContainerAi = exports.SearchInputContainerAi = _styled.default.div({
+  width: "calc(100% - ".concat("var(--ds-space-300, 24px)", " - ", "var(--ds-space-300, 24px)", ")"),
+  height: "var(--ds-space-400, 32px)",
+  marginLeft: "var(--ds-space-300, 24px)",
+  marginRight: "var(--ds-space-300, 24px)",
+  marginTop: "var(--ds-space-200, 14px)",
+  marginBottom: "var(--ds-space-200, 14px)",
+  order: 0,
+  flex: '0 1 auto',
+  alignSelf: 'auto',
+  boxSizing: 'border-box'
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var SearchIconContainer = exports.SearchIconContainer = _styled.default.div({
   width: "var(--ds-space-300, 24px)",

package/dist/cjs/components/Search/SearchResults/index.js

@@ -47,7 +47,9 @@ var transitionStyles = {
     visibility: 'hidden'
   }
 };
-var SearchResults = exports.SearchResults = function SearchResults() {
+var SearchResults = exports.SearchResults = function SearchResults(_ref) {
+  var _ref$isAiEnabled = _ref.isAiEnabled,
+    isAiEnabled = _ref$isAiEnabled === void 0 ? false : _ref$isAiEnabled;
   var _useSearchContext = (0, _searchContext.useSearchContext)(),
     searchState = _useSearchContext.searchState,
     searchResult = _useSearchContext.searchResult,
@@ -84,7 +86,48 @@ var SearchResults = exports.SearchResults = function SearchResults() {
       setSuggestionsCount(0);
     }
   }, [searchResult]);
-  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+  return isAiEnabled ? /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    in: view === _constants.VIEW.SEARCH && isSearchResultVisible,
+    timeout: _constants.FADEIN_OVERLAY_TRANSITION_DURATION_MS
+  }, function (state) {
+    return /*#__PURE__*/_react.default.createElement(_styled.SearchResultsContainerAi, {
+      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: liveRegionRef,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        position: 'absolute',
+        // hidden visually, but accessible
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        width: 1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        height: 1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        margin: -1,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        border: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        padding: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        clip: 'rect(0 0 0 0)',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        overflow: 'hidden'
+      }
+    }, suggestionsCount > 0 && "".concat(suggestionsCount, " suggestion").concat(suggestionsCount !== 1 ? 's' : '', " available for typed text."), suggestionsCount === 0 && 'No suggestions available.'), searchState !== _Requests.REQUEST_STATE.error && searchResult !== null && searchResult.length > 0 && state !== 'exited' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchResults.default, {
+      searchResult: searchResult,
+      onSearchResultItemClick: handleOnSearchResultItemClick
+    }), /*#__PURE__*/_react.default.createElement(_SearchExternalSite.default, {
+      searchExternalUrl: searchExternalUrl,
+      onSearchExternalUrlClick: onSearchExternalUrlClick
+    })), searchState !== _Requests.REQUEST_STATE.error && searchResult !== null && searchResult.length === 0 && /*#__PURE__*/_react.default.createElement(_SearchResultsEmpty.default, {
+      searchExternalUrl: searchExternalUrl,
+      onSearchExternalUrlClick: onSearchExternalUrlClick
+    }), searchState === _Requests.REQUEST_STATE.error && /*#__PURE__*/_react.default.createElement(_SearchResultsError.default, {
+      onSearch: onSearch
+    }));
+  }) : /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: view === _constants.VIEW.SEARCH && isSearchResultVisible,
     timeout: _constants.FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, function (state) {

package/dist/cjs/components/Search/SearchResults/styled.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchResultsList = exports.SearchResultsContainer = exports.SearchResultSearchExternalSiteContainer = exports.SearchResultEmptyMessageText = exports.SearchResultEmptyMessageImage = exports.SearchResultEmptyMessageHeaderText = void 0;
+exports.SearchResultsList = exports.SearchResultsContainerAi = exports.SearchResultsContainer = exports.SearchResultSearchExternalSiteContainer = exports.SearchResultEmptyMessageText = exports.SearchResultEmptyMessageImage = exports.SearchResultEmptyMessageHeaderText = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 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); }
@@ -32,6 +32,22 @@ var SearchResultsContainer = exports.SearchResultsContainer = _styled.default.di
   padding: "0 ".concat("var(--ds-space-200, 16px)")
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SearchResultsContainerAi = exports.SearchResultsContainerAi = _styled.default.div({
+  position: 'absolute',
+  height: "calc(100% - ".concat("var(--ds-space-800, 60px)", ")"),
+  width: '100%',
+  top: "var(--ds-space-800, 60px)",
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  flex: 1,
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  zIndex: 10,
+  padding: "0 ".concat("var(--ds-space-200, 16px)")
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var SearchResultsList = exports.SearchResultsList = _styled.default.div({
   paddingTop: "var(--ds-space-300, 24px)",

package/dist/cjs/components/Tabs/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = require("./styled");
+var _primitives = require("@atlaskit/primitives");
+var Tab = function Tab(_ref) {
+  var label = _ref.label,
+    index = _ref.index,
+    _onClick = _ref.onClick,
+    isActive = _ref.isActive,
+    icon = _ref.icon;
+  return /*#__PURE__*/_react.default.createElement(_styled.TabLabel, {
+    isActive: isActive,
+    onClick: function onClick() {
+      return _onClick(index);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.100",
+    alignBlock: "center",
+    alignInline: "center"
+  }, icon, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    color: isActive ? 'color.text.selected' : 'color.text'
+  }, label)));
+};
+var Tabs = exports.Tabs = function Tabs(_ref2) {
+  var activeTab = _ref2.activeTab,
+    onTabClick = _ref2.onTabClick,
+    tabs = _ref2.tabs;
+  return /*#__PURE__*/_react.default.createElement(_styled.TabContainer, null, /*#__PURE__*/_react.default.createElement(_styled.TabLabels, null, tabs.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(Tab, {
+      key: index,
+      label: tab.label,
+      index: index,
+      onClick: onTabClick,
+      isActive: activeTab === index,
+      icon: tab.icon
+    });
+  })));
+};