@jetbrains/kotlin-web-site-ui 4.0.1 → 4.1.0-alpha.10

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

@@ -0,0 +1,105 @@
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
+import useScrollbarSize from 'react-scrollbar-size';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import Input from '@rescui/input';
+import Button from '@rescui/button';
+import Switcher from '@rescui/switcher';
+import { CloseIcon, ErrorIcon } from '@rescui/icons';
+import { useSearch } from '../search-wrapper/use-search.js';
+import { ResultsList } from './results-list/results-list.js';
+import SearchContext from '../search-wrapper/search-context.js';
+import styles from './full-search.module.pcss.js';
+
+const FullSearch = ({
+  searchString,
+  killSearch
+}) => {
+  const [isScrollbarCompensated, setIsScrollbarCompensated] = useState(false);
+  const [inputValue, setInputValue] = useState(searchString);
+  const {
+    hits,
+    placeholder
+  } = useSearch(inputValue, 75);
+  const {
+    matching,
+    matchingOptions,
+    setMatching
+  } = useContext(SearchContext);
+  const ref = useRef(null);
+  const headerRef = useRef(null);
+  const listRef = useRef(null);
+  const isResultsVisible = hits.length > 0 && inputValue;
+  const handleSwitcherChange = useCallback(value => {
+    setMatching(value);
+  }, []);
+  const clearSearch = useCallback(() => {
+    setInputValue('');
+  }, []);
+  const handleInputChange = useCallback(e => {
+    setInputValue(e.target.value);
+  }, [inputValue]); // Scrollbar compensation
+
+  const {
+    width
+  } = useScrollbarSize();
+  useLayoutEffect(() => {
+    if (headerRef.current && listRef.current) {
+      const countedHeight = headerRef.current.offsetHeight + listRef.current.offsetHeight;
+
+      if (isResultsVisible) {
+        setIsScrollbarCompensated(countedHeight < window.innerWidth);
+      } else {
+        setIsScrollbarCompensated(true);
+      }
+    }
+  }, [hits, inputValue]);
+  return React__default.createElement(ThemeProvider, {
+    theme: 'light'
+  }, React__default.createElement("div", {
+    className: styles.fullSearch,
+    style: {
+      paddingRight: isScrollbarCompensated ? `${width}px` : 0
+    },
+    tabIndex: 1000,
+    ref: ref
+  }, React__default.createElement("div", {
+    className: styles.header,
+    ref: headerRef
+  }, React__default.createElement("div", {
+    className: styles.closeSearch
+  }, React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
+    onClick: killSearch
+  })), React__default.createElement("div", {
+    className: styles.wrapper
+  }, React__default.createElement(Input, {
+    placeholder: 'Search',
+    value: inputValue,
+    onChange: handleInputChange,
+    onClear: clearSearch,
+    clearIcon: React__default.createElement("button", {
+      className: styles.fullSearchClearButton
+    }, React__default.createElement(ErrorIcon, {
+      size: 'l'
+    })),
+    size: 'l',
+    autoFocus: true
+  }), isResultsVisible && 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,
+    ref: listRef
+  }, 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,10 @@
+var styles = {
+  "fullSearch": "ktl-full-search-module_fullSearch_MTU8t",
+  "closeSearch": "ktl-full-search-module_closeSearch_5vYDG",
+  "fullSearchClearButton": "ktl-full-search-module_fullSearchClearButton_DGS6T",
+  "wrapper": "ktl-full-search-module_wrapper_9rxXb",
+  "header": "ktl-full-search-module_header_Wltw0",
+  "results": "ktl-full-search-module_results_svcSE",
+  "switcher": "ktl-full-search-module_switcher_o1RgM"
+};
+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 classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import getExtendedHits from './get-extended-hits.js';
+import { Chapters } from '../chapters/chapters.js';
+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,13 @@
+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, {
+    size: 'l'
+  }));
+};
+
+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,14 @@ const Header = forwardRef(({
   dropdownTheme = 'dark',
   linkHandler,
   isPlayground,
-  isUrlActive
+  isUrlActive,
+  searchConfig,
+  noScrollClassName
 }, 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 +41,47 @@ 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);
+      const focusManager = new FocusManager();
+      return () => {
+        document.removeEventListener('keydown', fullSearchKeyHandler);
+        focusManager.destroy();
+      };
+    }
+  }, [fullSearchKeyHandler]);
+  useEffect(() => {
+    if (typeof document !== `undefined` && noScrollClassName) {
+      if (fullSearchActive) {
+        document.body.classList.add(noScrollClassName);
+      } else {
+        document.body.classList.remove(noScrollClassName);
+      }
+    }
+  }, [fullSearchActive]);
   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 +93,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 };