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

package/out/components/header/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/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/components/header/full-search/hit-list/hit-list.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import getExtendedHits from '../result/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')),
+      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/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/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/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/components/header/full-search/result/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/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 → components/header/header.js}

@@ -1,19 +1,23 @@
-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 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 '../../helper/is-macos.js';
+import { KEY_K_CODE } from '../../helper/key-codes.js';
 const MENU_POPUP_BREAKPOINT = 640;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,
-  onSearchClick,
   currentUrl,
   currentTitle,
   className,
@@ -21,10 +25,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 +39,36 @@ 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);
+      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 +80,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/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/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/components/header/quick-search/list/list.js

@@ -0,0 +1,31 @@
+import React__default, { useMemo } from 'react';
+import { Result } from '../result/result.js';
+import { useTextStyles } from '@rescui/typography';
+import { isMacOs } from '../../../../helper/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: textCn('rs-text-3')
+  }, "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/components/header/quick-search/list/list.module.pcss.js

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

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { LoadingIcon } from '@rescui/icons';
+import styles from './loading.module.pcss.js';
+
+const LoadingResults = () => {
+  return React__default.createElement("div", {
+    className: styles.loading
+  }, React__default.createElement(LoadingIcon, {
+    theme: 'dark',
+    size: 'l'
+  }));
+};
+
+export { LoadingResults };

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

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

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

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import { ResultsList } from './list/list.js';
+import { EmptyResult } from './empty/empty.js';
+import { LoadingResults } from './loading/loading.js';
+import styles from './quick-search.module.pcss.js';
+
+const QuickSearch = ({
+  results,
+  searchString,
+  toggleFullSearch,
+  placeholder
+}) => {
+  if (placeholder) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(EmptyResult, {
+      placeholder: placeholder
+    })));
+  }
+
+  if (results.length > 0) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(ResultsList, {
+      results: results,
+      searchString: searchString,
+      toggleFullSearch: toggleFullSearch
+    })));
+  }
+
+  return React__default.createElement("div", {
+    className: styles.wrapper
+  }, React__default.createElement(LoadingResults, null));
+};
+
+export { QuickSearch };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ"
+};
+export { styles as default };

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import styles from './result.module.pcss.js';
+
+const Result = ({
+  hit
+}) => {
+  const textCn = useTextStyles();
+  const hitTitle = hit.title === hit.mainTitle ? hit.highlightedTitle : `${hit.mainTitle}: ${hit.highlightedTitle}`;
+  return React__default.createElement("a", {
+    className: styles.result,
+    href: hit.url
+  }, React__default.createElement("div", {
+    className: styles.resultTitle
+  }, React__default.createElement("div", {
+    className: textCn('rs-h4'),
+    dangerouslySetInnerHTML: {
+      __html: hitTitle
+    }
+  })), React__default.createElement("div", {
+    className: styles.text
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3'),
+    dangerouslySetInnerHTML: {
+      __html: hit.snippet
+    }
+  })));
+};
+
+export { Result };

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

@@ -0,0 +1,6 @@
+var styles = {
+  "result": "ktl-result-module_result_EKhUw",
+  "resultTitle": "ktl-result-module_resultTitle_DSpAT",
+  "text": "ktl-result-module_text_fWBKG"
+};
+export { styles as default };

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

@@ -0,0 +1,69 @@
+import React__default, { useState, useCallback, useEffect } from 'react';
+import Input from '@rescui/input';
+import { SearchIcon, CloseIcon, ErrorIcon } from '@rescui/icons';
+import { QuickSearch } from '../quick-search/quick-search.js';
+import { FullSearch } from '../full-search/full-search.js';
+import styles from './search-box.module.pcss.js';
+import { useSearch } from '../search-wrapper/use-search.js';
+import { isMacOs } from '../../../helper/is-macos.js';
+import { ESC_CODE } from '../../../helper/key-codes.js';
+
+const SearchBox = ({
+  closeHandler,
+  isMobile,
+  fullSearchActive,
+  setFullSearchActive
+}) => {
+  const [searchInput, setSearchInput] = useState('');
+  const {
+    hits,
+    placeholder
+  } = useSearch(searchInput, 25);
+  const escHandler = useCallback(event => {
+    if (event.keyCode === ESC_CODE) {
+      closeHandler();
+    }
+  }, [closeHandler]);
+  const handleInput = useCallback(e => {
+    setSearchInput(e.target.value);
+  }, []);
+  const handleClear = useCallback(() => {
+    setSearchInput('');
+  }, []);
+  const toggleFullSearch = useCallback(() => {
+    setFullSearchActive(!fullSearchActive);
+  }, [fullSearchActive]);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      document.addEventListener('keydown', escHandler);
+      return () => {
+        document.removeEventListener('keydown', escHandler);
+      };
+    }
+  }, [escHandler]);
+  const QuickSearchPlaceholder = isMobile ? 'Search' : `${isMacOs() ? '⌘K' : 'Ctrl+K'} for advanced search`;
+  return React__default.createElement("div", {
+    className: styles.searchBox
+  }, React__default.createElement(Input, {
+    placeholder: QuickSearchPlaceholder,
+    iconType: 'left',
+    value: searchInput,
+    onChange: handleInput,
+    onClear: isMobile ? closeHandler : handleClear,
+    icon: React__default.createElement(SearchIcon, null),
+    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement(ErrorIcon, null),
+    autoFocus: true
+  }), searchInput && React__default.createElement(QuickSearch, {
+    results: hits,
+    searchString: searchInput,
+    toggleFullSearch: toggleFullSearch,
+    placeholder: placeholder
+  }), fullSearchActive && React__default.createElement(FullSearch, {
+    toggleFullSearch: toggleFullSearch,
+    searchString: searchInput,
+    results: hits,
+    killSearch: closeHandler
+  }));
+};
+
+export { SearchBox };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "searchBox": "ktl-search-box-module_searchBox_0SgE9"
+};
+export { styles as default };