@jetbrains/kotlin-web-site-ui 4.0.0 → 4.1.0-alpha.2

package/out/components/header/full-search/full-search.js

@@ -0,0 +1,70 @@
+import React__default, { useState, useContext, useCallback } from 'react';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import Input from '@rescui/input';
+import Switcher from '@rescui/switcher';
+import { CloseIcon, ErrorIcon } from '@rescui/icons';
+import styles from './full-search.module.pcss.js';
+import { useSearch } from '../search-wrapper/use-search.js';
+import { ResultsList } from './results-list/results-list.js';
+import SearchContext from '../search-wrapper/search-context.js';
+
+const FullSearch = ({
+  searchString,
+  killSearch
+}) => {
+  const [inputValue, setInputValue] = useState(searchString);
+  const {
+    hits,
+    placeholder
+  } = useSearch(inputValue, 75);
+  const {
+    matching,
+    matchingOptions,
+    setMatching
+  } = useContext(SearchContext);
+  const clearSearch = useCallback(() => {
+    setInputValue('');
+  }, []);
+  const handleSwitcherChange = useCallback(value => {
+    setMatching(value);
+  }, []);
+  const handleInputChange = useCallback(e => {
+    setInputValue(e.target.value);
+  }, [inputValue]);
+  return React__default.createElement(ThemeProvider, {
+    theme: 'light'
+  }, React__default.createElement("div", {
+    className: styles.fullSearch
+  }, React__default.createElement("div", {
+    className: styles.header
+  }, React__default.createElement("button", {
+    className: styles.closeSearch,
+    onClick: killSearch
+  }, React__default.createElement(CloseIcon, {
+    size: 'l'
+  })), React__default.createElement("div", {
+    className: styles.wrapper
+  }, React__default.createElement(Input, {
+    placeholder: 'Search',
+    value: inputValue,
+    onClear: clearSearch,
+    onChange: handleInputChange,
+    clearIcon: React__default.createElement(ErrorIcon, null),
+    size: 'l',
+    autoFocus: true
+  }), React__default.createElement("div", {
+    className: styles.switcher
+  }, React__default.createElement(Switcher, {
+    value: matching,
+    onChange: handleSwitcherChange,
+    options: matchingOptions,
+    size: 'xs'
+  })))), React__default.createElement("div", {
+    className: styles.wrapper
+  }, inputValue && React__default.createElement(ResultsList, {
+    placeholder: placeholder,
+    hits: hits
+  }))));
+};
+
+export { FullSearch };

package/out/components/header/full-search/full-search.module.pcss.js

@@ -0,0 +1,9 @@
+var styles = {
+  "fullSearch": "ktl-full-search-module_fullSearch_MTU8t",
+  "closeSearch": "ktl-full-search-module_closeSearch_5vYDG",
+  "wrapper": "ktl-full-search-module_wrapper_9rxXb",
+  "header": "ktl-full-search-module_header_Wltw0",
+  "switcher": "ktl-full-search-module_switcher_o1RgM",
+  "results": "ktl-full-search-module_results_svcSE"
+};
+export { styles as default };

package/out/components/header/full-search/hit-list/get-extended-hits.js

@@ -0,0 +1,55 @@
+const groupHitsByPageId = ungroupedHits => ungroupedHits.reduce((groups, currentHit) => {
+  const currentGroup = groups.find(group => group.name === currentHit.mainTitle);
+
+  if (currentGroup) {
+    currentGroup.hits.push(currentHit);
+    return groups;
+  }
+
+  const newGroup = {
+    name: currentHit.mainTitle,
+    hits: [currentHit]
+  };
+  return [...groups, newGroup];
+}, []);
+
+const getChapterName = fullName => fullName.split(':')[1] || fullName;
+
+const highlightChaptersTitles = chapters => chapters.map(chapter => ({ ...chapter,
+  highlightedTitle: getChapterName(chapter.highlightedTitle)
+}));
+
+const getExtendedHits = hits => {
+  try {
+    const groupedHits = groupHitsByPageId(hits);
+    return groupedHits.map(group => {
+      const mainHit = group.hits.find(hit => hit.title === group.name);
+
+      if (mainHit) {
+        const chapters = group.hits.filter(hit => hit.title !== group.name);
+        return { ...mainHit,
+          title: mainHit.highlightedTitle,
+          chapters: highlightChaptersTitles(chapters)
+        };
+      }
+
+      const {
+        url,
+        breadcrumb,
+        ...restHitProps
+      } = group.hits[0];
+      return { ...restHitProps,
+        title: group.name,
+        url: url.split('#')[0],
+        breadcrumb,
+        chapters: highlightChaptersTitles(group.hits)
+      };
+    });
+  } catch (error) {
+    // reportError(error, { func: 'getExtendedHits' });
+    console.log('error');
+    return [];
+  }
+};
+
+export { getExtendedHits as default };

package/out/components/header/full-search/hit-list/hit-list.js

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import getExtendedHits from './get-extended-hits.js';
+import { Chapters } from '../chapters/chapters.js';
+import classNames from 'classnames';
+import styles from './hit-list.module.pcss.js';
+
+const HitList = ({
+  hits
+}) => {
+  const textCn = useTextStyles();
+  const extendedHits = getExtendedHits(hits);
+  return React__default.createElement(React__default.Fragment, null, extendedHits.map(({
+    title,
+    snippet,
+    chapters = [],
+    url,
+    breadcrumb
+  }, pageIndex) => {
+    const isHitWithChapters = chapters.length > 0;
+    return React__default.createElement("div", {
+      className: styles.hitList,
+      key: pageIndex
+    }, React__default.createElement("h3", {
+      className: textCn('rs-h3')
+    }, React__default.createElement("a", {
+      className: classNames(styles.titleLink, textCn('rs-link', {
+        mode: 'clear',
+        hardness: 'hard'
+      })),
+      href: url,
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    })), isHitWithChapters ? React__default.createElement(Chapters, {
+      chapters: chapters,
+      hitIndex: pageIndex
+    }) : React__default.createElement("div", {
+      className: classNames(textCn('rs-text-2')),
+      dangerouslySetInnerHTML: {
+        __html: snippet
+      }
+    }));
+  }));
+};
+
+export { HitList };

package/out/components/header/full-search/hit-list/hit-list.module.pcss.js

@@ -0,0 +1,5 @@
+var styles = {
+  "hitList": "ktl-hit-list-module_hitList_1MP6m",
+  "titleLink": "ktl-hit-list-module_titleLink_rdJ6u"
+};
+export { styles as default };

package/out/components/header/full-search/loading/loading.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { LoadingIcon } from '@rescui/icons';
+import styles from './loading.module.pcss.js';
+
+const FullSearchLoader = () => {
+  return React__default.createElement("div", {
+    className: styles.loader
+  }, React__default.createElement(LoadingIcon, null));
+};
+
+export { FullSearchLoader };

package/out/components/header/full-search/loading/loading.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "loader": "ktl-loading-module_loader_B2IQl"
+};
+export { styles as default };

package/out/components/header/full-search/results-list/results-list.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import { FullSearchLoader } from '../loading/loading.js';
+import { FullSearchEmpty } from '../empty/empty.js';
+import { HitList } from '../hit-list/hit-list.js';
+
+const ResultsList = ({
+  placeholder,
+  hits
+}) => {
+  if (placeholder) {
+    return React__default.createElement(FullSearchEmpty, {
+      placeholder: placeholder
+    });
+  }
+
+  if (hits.length) {
+    return React__default.createElement(HitList, {
+      hits: hits
+    });
+  }
+
+  return React__default.createElement(FullSearchLoader, null);
+};
+
+export { ResultsList };

package/out/components/header/header.js

@@ -1,19 +1,24 @@
-import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect, useCallback, useEffect } from 'react';
 import { ThemeProvider } from '@rescui/ui-contexts';
+import FocusManager from '@rescui/focus-manager';
 import useResizeObserver from '@react-hook/resize-observer';
+import OutsideClickHandler from 'react-outside-click-handler';
 import { LogoLarge } from './logo-large/logo-large.js';
 import styles from './header.module.pcss.js';
 import { getNavScheme } from './nav-scheme.js';
 import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
 import { SearchButton } from './search-button/search-button.js';
+import { SearchBox } from './search-box/search-box.js';
 import { MenuPopup } from './menu-popup/menu-popup.js';
 import { LogoSmall } from './logo-small/logo-small.js';
 import classNames from 'classnames';
+import { SearchWrapper } from './search-wrapper/search-wrapper.js';
+import { isMacOs } from './is-macos.js';
+import { KEY_K_CODE } from './key-codes.js';
 const MENU_POPUP_BREAKPOINT = 640;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,
-  onSearchClick,
   currentUrl,
   currentTitle,
   className,
@@ -21,10 +26,13 @@ const Header = forwardRef(({
   dropdownTheme = 'dark',
   linkHandler,
   isPlayground,
-  isUrlActive
+  isUrlActive,
+  searchConfig
 }, forwardedRef) => {
   const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
   const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
+  const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
+  const [fullSearchActive, setFullSearchActive] = useState(false);
   const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
   const headerRef = useRef(null);
   useImperativeHandle(forwardedRef, () => headerRef.current);
@@ -32,8 +40,39 @@ const Header = forwardRef(({
     setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
   useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
+  const handleSearchButtonClick = useCallback(() => {
+    setSearchBoxVisible(!isSearchBoxVisible);
+  }, []);
+  const handleSearchClose = useCallback(() => {
+    setSearchBoxVisible(false);
+    setFullSearchActive(false);
+  }, []);
+  const fullSearchKeyHandler = useCallback(event => {
+    const isMacOsHotkeyPressed = isMacOs() && event.keyCode === KEY_K_CODE && event.metaKey;
+    const isOtherPlatformsHotkeyPressed = !isMacOs() && event.keyCode === KEY_K_CODE && event.ctrlKey;
+
+    if (isMacOsHotkeyPressed || isOtherPlatformsHotkeyPressed) {
+      event.preventDefault();
+      event.stopPropagation();
+      setSearchBoxVisible(true);
+      setFullSearchActive(true);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      document.addEventListener('keydown', fullSearchKeyHandler);
+      document.addEventListener('DOMContentLoaded', () => {
+        new FocusManager();
+      });
+      return () => {
+        document.removeEventListener('keydown', fullSearchKeyHandler);
+      };
+    }
+  }, [fullSearchKeyHandler]);
   return React__default.createElement(ThemeProvider, {
     theme: 'dark'
+  }, React__default.createElement(SearchWrapper, {
+    searchConfig: searchConfig
   }, React__default.createElement("header", {
     ref: headerRef,
     className: classNames(styles.headerMenu, className, {
@@ -45,19 +84,26 @@ const Header = forwardRef(({
     homeUrl: currentUrl
   }) : React__default.createElement(LogoLarge, {
     productWebUrl: productWebUrl
-  }), !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
+  }), isSearchBoxVisible ? React__default.createElement(OutsideClickHandler, {
+    onOutsideClick: handleSearchClose
+  }, React__default.createElement(SearchBox, {
+    closeHandler: handleSearchClose,
+    isMobile: isMenuPopupVisible,
+    fullSearchActive: fullSearchActive,
+    setFullSearchActive: setFullSearchActive
+  })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
     items: items,
     theme: dropdownTheme,
     linkHandler: linkHandler
   }), React__default.createElement(SearchButton, {
-    onClick: onSearchClick,
-    isActive: hasSearch && !!onSearchClick
+    onClick: handleSearchButtonClick,
+    isActive: hasSearch
   }), isMenuPopupVisible && React__default.createElement(MenuPopup, {
     items: items,
     setExpand: setMenuPopupExpanded,
     isExpanded: menuPopupExpanded,
     headerRef: headerRef,
     linkHandler: linkHandler
-  })));
+  })))));
 });
 export { Header };

package/out/components/header/index.css

@@ -272,6 +272,265 @@
     }
 }
 
+.ktl-result-module_result_EKhUw {
+    box-sizing: border-box;
+    display: block;
+    padding: 16px 32px;
+    text-decoration: none;
+}
+    .ktl-result-module_result_EKhUw:hover {
+        background: rgba(255, 255, 255, 0.1);
+        text-decoration: none;
+    }
+    .ktl-result-module_result_EKhUw:focus {
+        outline: none;
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw em {
+        background-color: rgba(127,82,255,0.3);
+        font-style: normal;
+    }
+
+.ktl-result-module_resultTitle_DSpAT {
+    margin-bottom: 6px;
+}
+
+.ktl-result-module_text_fWBKG {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.ktl-list-module_results_LlxqY {
+    box-sizing: border-box;
+    max-height: 305px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    color: #fff;
+    overflow-y: scroll;
+}
+
+.ktl-list-module_topBar_OO0XT {
+    display: none;
+}
+
+.ktl-list-module_advancedSearch_XNy88 {
+    display: inline-block;
+    background: transparent;
+    border: 0;
+    padding: 6px 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.ktl-list-module_advancedSearch_XNy88:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+
+.ktl-list-module_advancedSearch_XNy88:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+    }
+
+.ktl-list-module_advancedSearchTitle_sHR3T {
+    color: #ffffff;
+}
+
+@media (min-width: 768px) {
+    .ktl-list-module_results_LlxqY {
+        max-height: 434px;
+    }
+
+    .ktl-list-module_topBar_OO0XT {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 34px 32px 14px 32px;
+    }
+}
+.ktl-empty-module_empty_xh1i- {
+    box-sizing: border-box;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    padding: 32px;
+}
+.ktl-loading-module_loading_CtOhW {
+    box-sizing: border-box;
+    height: 92px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+}
+    .ktl-loading-module_loading_CtOhW > svg {
+        fill: #6B57FF;
+    }
+.ktl-quick-search-module_wrapper_kkbQQ {
+    box-sizing: border-box;
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: -8px;
+    transform: translateY(100%);
+}
+
+@media (min-width: 768px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        left: 0;
+        right: 0;
+    }
+}
+.ktl-full-search-module_fullSearch_MTU8t {
+    display: none;
+    box-sizing: border-box;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    overflow: scroll;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    top: 40px;
+    right: 40px;
+}
+
+.ktl-full-search-module_wrapper_9rxXb {
+    max-width: 704px;
+    margin: 0 auto;
+}
+
+.ktl-full-search-module_header_Wltw0 {
+    width: 100%;
+    padding-top: 120px;
+    padding-bottom: 24px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    margin-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+.ktl-loading-module_loader_B2IQl {
+    margin: 24px 0;
+}
+    .ktl-loading-module_loader_B2IQl > svg {
+        fill: #6B57FF;
+    }
+.ktl-empty-module_wrapper_cNB8Y {
+    display: block;
+}
+
+.ktl-empty-module_title_p2FMj {
+    margin-bottom: 24px;
+}
+
+.ktl-empty-module_image_6Xr6L {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+.ktl-chapters-module_chapters_J0wLB {
+    border-left: 1px solid var(--ktl-light-dark-20);
+    padding-left: 12px;
+    margin-top: 24px;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz {
+    //border-bottom-color: transparent;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz:hover {
+        //border-bottom-color: #19191C;
+    }
+
+.ktl-chapters-module_chapterTitle_b6Rdz em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_singleChapter_zSmx2:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+.ktl-chapters-module_headliner_ZBuf9 {
+    margin: 0;
+}
+
+.ktl-chapters-module_snippet_yROJo {
+    margin-top: 8px;
+    color: rgba(39, 40, 44, 0.7);
+}
+
+.ktl-chapters-module_snippet_yROJo em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_extraSection_lsZfw {
+    display: none;
+}
+
+.ktl-chapters-module_visibleSection_wQyvM {
+    display: block;
+}
+
+.ktl-chapters-module_moreButton_98oqy {
+    margin-top: 12px;
+}
+.ktl-hit-list-module_hitList_1MP6m {
+    margin: 24px 0;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-search-box-module_searchBox_0SgE9 {
+    position: relative;
+    width: 408px;
+}
+
+@media (max-width: 767px) {
+    .ktl-search-box-module_searchBox_0SgE9 {
+        background: var(--ktl-dark-100);
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

package/out/components/header/is-macos.js

@@ -0,0 +1,5 @@
+function isMacOs() {
+  return window.navigator.appVersion.indexOf('Mac') !== -1;
+}
+
+export { isMacOs };

package/out/components/header/key-codes.js

@@ -0,0 +1,3 @@
+const ESC_CODE = 27;
+const KEY_K_CODE = 75;
+export { ESC_CODE, KEY_K_CODE };

package/out/components/header/quick-search/empty/empty.js

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import styles from './empty.module.pcss.js';
+
+const EmptyResult = ({
+  placeholder
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: styles.empty
+  }, React__default.createElement("div", {
+    className: textCn('rs-h4')
+  }, placeholder));
+};
+
+export { EmptyResult };

package/out/components/header/quick-search/empty/empty.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "empty": "ktl-empty-module_empty_xh1i-"
+};
+export { styles as default };

package/out/components/header/quick-search/list/list.js

@@ -0,0 +1,32 @@
+import React__default, { useMemo } from 'react';
+import { Result } from '../result/result.js';
+import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
+import { isMacOs } from '../../is-macos.js';
+import styles from './list.module.pcss.js';
+
+const ResultsList = ({
+  results,
+  searchString,
+  toggleFullSearch
+}) => {
+  const textCn = useTextStyles();
+  const controlledSearchString = useMemo(() => searchString.length > 5 ? `${searchString.substring(0, 5)}...` : searchString, [searchString]);
+  return React__default.createElement("div", {
+    className: styles.results
+  }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.topBar
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3')
+  }, "Showing results for \u00AB", controlledSearchString, "\u00BB"), React__default.createElement("button", {
+    className: styles.advancedSearch,
+    onClick: toggleFullSearch
+  }, React__default.createElement("div", {
+    className: classNames(textCn('rs-text-3'), styles.advancedSearchTitle)
+  }, "Advanced search ", isMacOs() ? '⌘K' : 'Ctrl+K'))), results.map((searchResult, index) => React__default.createElement(Result, {
+    key: index,
+    hit: searchResult
+  }))) : null);
+};
+
+export { ResultsList };

package/out/components/header/quick-search/list/list.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "results": "ktl-list-module_results_LlxqY",
+  "topBar": "ktl-list-module_topBar_OO0XT",
+  "advancedSearch": "ktl-list-module_advancedSearch_XNy88",
+  "advancedSearchTitle": "ktl-list-module_advancedSearchTitle_sHR3T"
+};
+export { styles as default };