@atlaskit/help 7.14.0 → 7.14.2

package/dist/cjs/components/styled.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Home = exports.HelpFooter = exports.HelpBodyContainer = exports.HelpBody = void 0;
+exports.HomeAi = exports.Home = exports.HelpFooter = exports.HelpBodyContainer = exports.HelpBodyAi = exports.HelpBody = exports.BackButtonContainer = 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); }
@@ -43,6 +43,16 @@ var HelpBody = exports.HelpBody = _styled.default.div({
   overflowX: 'hidden',
   overflowY: 'auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var HelpBodyAi = exports.HelpBodyAi = _styled.default.div({
+  width: '100%',
+  boxSizing: 'border-box',
+  order: 0,
+  flex: '1 1 auto',
+  alignSelf: 'auto',
+  position: 'relative'
+});
 // 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 Home = exports.Home = _styled.default.div(function (props) {
   return {
@@ -56,6 +66,21 @@ var Home = exports.Home = _styled.default.div(function (props) {
   };
 });
 
+// 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 HomeAi = exports.HomeAi = _styled.default.div(function (props) {
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    display: props.isOverlayFullyVisible ? 'none' : 'block',
+    // height: `calc(100% - ${token('space.800', '60px')})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    overflow: props.isOverlayVisible ? 'hidden' : 'auto',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    paddingRight: "var(--ds-space-200, 16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    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 HelpFooter = exports.HelpFooter = _styled.default.div({
   padding: "var(--ds-space-100, 8px)".concat(" 0"),
@@ -66,4 +91,12 @@ var HelpFooter = exports.HelpFooter = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
   justifyContent: 'space-between'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var BackButtonContainer = exports.BackButtonContainer = _styled.default.div({
+  position: 'absolute',
+  marginTop: "var(--ds-space-200, 14px)",
+  left: "var(--ds-space-100, 8px)",
+  height: "var(--ds-space-400, 32px)"
 });

package/dist/cjs/messages.js

@@ -265,5 +265,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'help.show_more_button.label_less',
     defaultMessage: 'Show less',
     description: '"Show less" text'
+  },
+  help_panel_search_back: {
+    id: 'helpPanel.search.back',
+    defaultMessage: 'Back',
+    description: ''
   }
 });

package/dist/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'help',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };

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

@@ -10,7 +10,7 @@ import { LoadingErrorMessage, LoadingErrorButtonContainer, LoadingErrorHeading }
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

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

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

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

@@ -30,7 +30,7 @@ const FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 const buttonStyles = css({
   padding: '0',

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

@@ -60,7 +60,7 @@ export const HelpArticle = ({
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "7.14.0"
+      packageVersion: "7.14.2"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

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

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 const analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const WhatsNewArticle = ({
   intl: {

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

@@ -3,7 +3,7 @@ import { Transition } from 'react-transition-group';
 import { useNavigationContext } from '../contexts/navigationContext';
 import { useHelpArticleContext } from '../contexts/helpArticleContext';
 import { SLIDEIN_OVERLAY_TRANSITION_DURATION_MS, VIEW } from '../constants';
-import { ArticleContainer } from './styled';
+import { ArticleContainer, ArticleContainerAi } from './styled';
 import ArticleContent from './ArticleContent';
 // Animation
 const defaultStyle = {
@@ -22,7 +22,9 @@ const transitionStyles = {
     left: '100%'
   }
 };
-export const Article = () => {
+export const Article = ({
+  isAiEnabled
+}) => {
   var _history$length;
   const {
     view,
@@ -93,7 +95,31 @@ export const Article = () => {
       setShowArticle(view === VIEW.ARTICLE || view === VIEW.WHATS_NEW_ARTICLE);
     }
   }, [view, showArticle]);
-  return /*#__PURE__*/React.createElement(Transition, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(Transition, {
+    in: showArticle,
+    timeout: SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
+    enter: !skipArticleSlideInAnimation,
+    onEntered: onArticleEntered,
+    onExit: onArticleExit,
+    unmountOnExit: true,
+    mountOnEnter: true
+  }, state => {
+    return /*#__PURE__*/React.createElement(ArticleContainerAi, {
+      ref: articleContainerRef,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ...defaultStyle,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ...transitionStyles[state],
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ...enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']
+      }
+    }, /*#__PURE__*/React.createElement(ArticleContent, {
+      currentArticle: currentArticle,
+      onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
+      onWhatsNewArticleLoadingFailTryAgainButtonClick: reloadWhatsNewArticle && handleOnWhatsNewArticleLoadingFailTryAgainButtonClick
+    }));
+  }) : /*#__PURE__*/React.createElement(Transition, {
     in: showArticle,
     timeout: SLIDEIN_OVERLAY_TRANSITION_DURATION_MS,
     enter: !skipArticleSlideInAnimation,

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

@@ -20,4 +20,23 @@ export const ArticleContainer = styled.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
+export const ArticleContainerAi = styled.div({
+  paddingLeft: "var(--ds-space-300, 24px)",
+  paddingRight: "var(--ds-space-300, 24px)",
+  paddingBottom: "var(--ds-space-200, 16px)",
+  position: 'absolute',
+  height: `calc(100% - ${"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/es2019/components/ArticlesList/ArticlesListItem/index.js

@@ -8,7 +8,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 const highlightText = text => {
   if (!text) {

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
+import { Transition } from 'react-transition-group';
+import ArrowleftIcon from '@atlaskit/icon/core/migration/arrow-left';
+import Button from '@atlaskit/button/standard-button';
+import { messages } from '../../messages';
+import { BackButtonContainer } from '../styled';
+import { TRANSITION_DURATION_MS } from '../constants';
+// Animation
+const defaultStyle = {
+  transition: `left ${TRANSITION_DURATION_MS}ms, opacity ${TRANSITION_DURATION_MS}ms`,
+  left: "var(--ds-space-300, 24px)",
+  opacity: 0
+};
+const transitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+export const BackButton = ({
+  onClick,
+  isVisible = true,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const handleOnClick = event => {
+    if (onClick) {
+      const analyticsEvent = createAnalyticsEvent({
+        action: 'clicked'
+      });
+      onClick(event, analyticsEvent);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Transition, {
+    in: isVisible,
+    timeout: TRANSITION_DURATION_MS,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, state => /*#__PURE__*/React.createElement(BackButtonContainer, {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ...defaultStyle,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ...transitionStyles[state]
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: event => {
+      if (state === 'entered') {
+        handleOnClick(event);
+      }
+    },
+    appearance: "subtle",
+    iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
+      color: "currentColor",
+      label: "",
+      LEGACY_size: "medium"
+    })
+  }, formatMessage(messages.help_panel_search_back))));
+};
+const BackButtonWithContext = props => {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      componentName: 'backButton',
+      packageName: "@atlaskit/help",
+      packageVersion: "7.14.2"
+    }
+  }, /*#__PURE__*/React.createElement(BackButton, props));
+};
+export default injectIntl(BackButtonWithContext);

package/dist/es2019/components/Help.js

@@ -28,7 +28,7 @@ export class Help extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/React.createElement(LocaleIntlProvider, null, /*#__PURE__*/React.createElement(HeaderContextProvider, rest.header, /*#__PURE__*/React.createElement(HomeContextProvider, _extends({}, rest.home, {
       homeContent: children
-    }), /*#__PURE__*/React.createElement(HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/React.createElement(RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/React.createElement(SearchContextProvider, rest.search, /*#__PURE__*/React.createElement(WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/React.createElement(NavigationContextProvider, rest.navigation, /*#__PURE__*/React.createElement(AiContextProvider, rest.ai, /*#__PURE__*/React.createElement(HelpContent, {
+    }), /*#__PURE__*/React.createElement(HelpArticleContextProvider, rest.helpArticle, /*#__PURE__*/React.createElement(RelatedArticlesContextProvider, rest.relatedArticles, /*#__PURE__*/React.createElement(SearchContextProvider, rest.search, /*#__PURE__*/React.createElement(WhatsNewArticleProvider, rest.whatsNew, /*#__PURE__*/React.createElement(AiContextProvider, rest.ai, /*#__PURE__*/React.createElement(NavigationContextProvider, rest.navigation, /*#__PURE__*/React.createElement(HelpContent, {
       footer: footer
     }))))))))));
   }

package/dist/es2019/components/HelpContent.js

@@ -14,7 +14,8 @@ import ArticleComponent from './Article';
 import WhatsNewButton from './WhatsNew/WhatsNewButton';
 import WhatsNewResults from './WhatsNew/WhatsNewResults';
 import HelpContentButton from './HelpContentButton';
-import { HelpBodyContainer, HelpBody, Home } from './styled';
+import BackButton from './BackButton';
+import { HelpBodyContainer, HelpBody, Home, HomeAi, HelpBodyAi } from './styled';
 import { HelpFooter } from './styled';
 export const HelpContent = ({
   footer
@@ -55,7 +56,7 @@ export const HelpContent = ({
   }, [navigateBack, onBackButtonClick]);
   useEffect(() => {
     let handler;
-    if (isOverlayVisible) {
+    if (isOverlayVisible && !isAiEnabled) {
       handler = setTimeout(() => {
         setIsOverlayFullyVisible(isOverlayVisible);
       }, HIDE_CONTENT_DELAY);
@@ -67,14 +68,36 @@ export const HelpContent = ({
         clearTimeout(handler);
       }
     };
-  }, [isOverlayVisible]);
-  return /*#__PURE__*/React.createElement(HelpLayout, {
+  }, [isOverlayVisible, isAiEnabled]);
+  return isAiEnabled ? /*#__PURE__*/React.createElement(HelpLayout, {
+    onCloseButtonClick: onClose,
+    isAiEnabled: true
+  }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBodyAi, null, /*#__PURE__*/React.createElement(BackButton, {
+    onClick: handleOnBackButtonClick,
+    isVisible: canNavigateBack
+  }), onSearch && /*#__PURE__*/React.createElement(SearchInput, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(SearchResults, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(ArticleComponent, {
+    isAiEnabled: true
+  }), /*#__PURE__*/React.createElement(HomeAi, {
+    isOverlayFullyVisible: isOverlayFullyVisible,
+    isOverlayVisible: isOverlayVisible
+  }, homeContent, onSearchWhatsNewArticles && onGetWhatsNewArticle && /*#__PURE__*/React.createElement(WhatsNewButton, {
+    productName: productName
+  }), homeOptions && homeOptions.map(defaultOption => {
+    return /*#__PURE__*/React.createElement(HelpContentButton, _extends({
+      key: defaultOption.id
+    }, defaultOption));
+  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null), footer && /*#__PURE__*/React.createElement(HelpFooter, {
+    "data-testid": "inside-footer"
+  }, footer))) : /*#__PURE__*/React.createElement(HelpLayout, {
     onBackButtonClick: handleOnBackButtonClick,
     onCloseButtonClick: onClose,
     isBackbuttonVisible: canNavigateBack,
-    footer: !isAiEnabled ? footer : undefined,
-    headerContent: onSearch && /*#__PURE__*/React.createElement(SearchInput, null),
-    isAiEnabled: isAiEnabled
+    footer: footer,
+    headerContent: onSearch && /*#__PURE__*/React.createElement(SearchInput, null)
   }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBody, null, /*#__PURE__*/React.createElement(SearchResults, null), /*#__PURE__*/React.createElement(ArticleComponent, null), /*#__PURE__*/React.createElement(Home, {
     isOverlayFullyVisible: isOverlayFullyVisible,
     isOverlayVisible: isOverlayVisible
@@ -84,8 +107,6 @@ export const HelpContent = ({
     return /*#__PURE__*/React.createElement(HelpContentButton, _extends({
       key: defaultOption.id
     }, defaultOption));
-  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null), isAiEnabled && footer && /*#__PURE__*/React.createElement(HelpFooter, {
-    "data-testid": "inside-footer"
-  }, footer)));
+  }))), /*#__PURE__*/React.createElement(WhatsNewResults, null)));
 };
 export default HelpContent;

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 const HelpContentButton = ({
   id = '',

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

@@ -21,7 +21,7 @@ import { Text } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const packageName = "@atlaskit/help";
-const packageVersion = "7.14.0";
+const packageVersion = "7.14.2";
 const buttonStyles = css({
   padding: '0',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

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

@@ -17,11 +17,13 @@ import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
 import { messages } from '../../../messages';
-import { SearchInputContainer, SearchIconContainer, CloseButtonAndSpinnerContainer } from './styled';
+import { VIEW } from '../../constants';
+import { SearchInputContainer, SearchInputContainerAi, SearchIconContainer, CloseButtonAndSpinnerContainer } from './styled';
+import { useNavigationContext } from '../../contexts/navigationContext';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 const buttonStyles = 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
@@ -32,8 +34,12 @@ const buttonStyles = css({
 export const SearchInput = ({
   intl: {
     formatMessage
-  }
+  },
+  isAiEnabled = false
 }) => {
+  const {
+    view
+  } = useNavigationContext();
   const {
     searchValue,
     searchState,
@@ -82,7 +88,38 @@ export const SearchInput = ({
   if (inputRef && inputRef.current) {
     inputRef.current.value = searchValue;
   }
-  return jsx(SearchInputContainer, null, jsx(Textfield, {
+  if (view === VIEW.ARTICLE || view === VIEW.WHATS_NEW_ARTICLE) {
+    return null;
+  }
+  return isAiEnabled ? jsx(SearchInputContainerAi, null, jsx(Textfield, {
+    title: "Help articles search input",
+    autoComplete: "off",
+    ref: inputRef,
+    name: "help-search-input",
+    elemBeforeInput: jsx(SearchIconContainer, null, jsx(SearchIcon, {
+      LEGACY_margin: "0 2px",
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    elemAfterInput: jsx(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && jsx(Spinner, {
+      size: "small"
+    }), searchValue !== '' && jsx(Button, {
+      css: buttonStyles,
+      appearance: "subtle",
+      onClick: handleOnClearButtonClick,
+      spacing: "none",
+      "aria-label": "Clear field"
+    }, jsx(EditorCloseIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    }))),
+    placeholder: formatMessage(messages.help_search_placeholder),
+    onChange: handleOnInputChange,
+    onKeyPress: handleOnKeyPress,
+    value: searchValue
+  })) : jsx(SearchInputContainer, null, jsx(Textfield, {
     title: "Help articles search input",
     autoComplete: "off",
     ref: inputRef,

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

@@ -13,6 +13,20 @@ export const SearchInputContainer = styled.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
+export const SearchInputContainerAi = styled.div({
+  width: `calc(100% - ${"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
 export const SearchIconContainer = styled.div({
   width: "var(--ds-space-300, 24px)",

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

@@ -9,7 +9,7 @@ import SearchResultsList from './SearchResults';
 import SearchExternalSite from './SearchExternalSite';
 import SearchResultsEmpty from './SearchResultsEmpty';
 import SearchResultsError from './SearchResultsError';
-import { SearchResultsContainer } from './styled';
+import { SearchResultsContainer, SearchResultsContainerAi } from './styled';
 const defaultStyle = {
   transition: `opacity ${FADEIN_OVERLAY_TRANSITION_DURATION_MS}ms`,
   opacity: 0,
@@ -33,7 +33,9 @@ const transitionStyles = {
     visibility: 'hidden'
   }
 };
-export const SearchResults = () => {
+export const SearchResults = ({
+  isAiEnabled = false
+}) => {
   const {
     searchState,
     searchResult,
@@ -69,7 +71,51 @@ export const SearchResults = () => {
       setSuggestionsCount(0);
     }
   }, [searchResult]);
-  return /*#__PURE__*/React.createElement(Transition, {
+  return isAiEnabled ? /*#__PURE__*/React.createElement(Transition, {
+    in: view === VIEW.SEARCH && isSearchResultVisible,
+    timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
+  }, state => /*#__PURE__*/React.createElement(SearchResultsContainerAi, {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ...defaultStyle,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ...transitionStyles[state]
+    }
+  }, /*#__PURE__*/React.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 && `${suggestionsCount} suggestion${suggestionsCount !== 1 ? 's' : ''} available for typed text.`, suggestionsCount === 0 && 'No suggestions available.'), searchState !== REQUEST_STATE.error && searchResult !== null && searchResult.length > 0 && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResultsList, {
+    searchResult: searchResult,
+    onSearchResultItemClick: handleOnSearchResultItemClick
+  }), /*#__PURE__*/React.createElement(SearchExternalSite, {
+    searchExternalUrl: searchExternalUrl,
+    onSearchExternalUrlClick: onSearchExternalUrlClick
+  })), searchState !== REQUEST_STATE.error && searchResult !== null && searchResult.length === 0 && /*#__PURE__*/React.createElement(SearchResultsEmpty, {
+    searchExternalUrl: searchExternalUrl,
+    onSearchExternalUrlClick: onSearchExternalUrlClick
+  }), searchState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(SearchResultsError, {
+    onSearch: onSearch
+  }))) : /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS
   }, state => /*#__PURE__*/React.createElement(SearchResultsContainer, {

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

@@ -21,6 +21,22 @@ export const SearchResultsContainer = styled.div({
   padding: `0 ${"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
+export const SearchResultsContainerAi = styled.div({
+  position: 'absolute',
+  height: `calc(100% - ${"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 ${"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
 export const SearchResultsList = styled.div({
   paddingTop: "var(--ds-space-300, 24px)",

package/dist/es2019/components/WhatsNew/WhatsNewButton/index.js

@@ -11,7 +11,7 @@ import { ARTICLE_TYPE } from '../../../model/Help';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'WhatsNewButton',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const WhatsNewButton = ({
   productName,

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/index.js

@@ -8,7 +8,7 @@ import { WhatsNewResultListItemWrapper, WhatsNewResultListItemTitleContainer, Wh
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "7.14.0"
+  packageVersion: "7.14.2"
 };
 export const WhatsNewResultListItem = ({
   intl: {

package/dist/es2019/components/constants.js

@@ -13,4 +13,6 @@ export let VIEW = /*#__PURE__*/function (VIEW) {
 // Animation related consts
 export const SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 export const FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
-export const HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
+export const HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
+// Animation related consts
+export const TRANSITION_DURATION_MS = 220;