@jetbrains/kotlin-web-site-ui 4.0.0-alpha.2 → 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/components/header/header.js

@@ -0,0 +1,105 @@
+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,
+  currentUrl,
+  currentTitle,
+  className,
+  hasBorder = true,
+  dropdownTheme = 'dark',
+  linkHandler,
+  isPlayground,
+  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);
+  useLayoutEffect(() => {
+    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, {
+      [styles.withMenuPopup]: menuPopupExpanded,
+      [styles.border]: hasBorder
+    })
+  }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
+    homeTitle: currentTitle,
+    homeUrl: currentUrl
+  }) : React__default.createElement(LogoLarge, {
+    productWebUrl: productWebUrl
+  }), 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: 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/horizontal-menu/horizontal-menu.js

@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import React__default, { useState, useEffect } from 'react';
+import styles from './horizontal-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const DropdownMenu = ({
+  items,
+  isExpanded,
+  alignRight,
+  linkHandler
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("ul", {
+    className: classNames(styles.dropdownMenu, textCn('rs-text-2'), {
+      [styles.dropdownMenuExpanded]: isExpanded,
+      [styles.dropdownMenuAlignRight]: alignRight
+    })
+  }, items.map((item, key) => {
+    const Tag = !item.isActive && item.url ? 'a' : 'span';
+    return React__default.createElement("li", {
+      key: key
+    }, React__default.createElement(Tag, Object.assign({
+      className: classNames(styles.dropdownMenuItem, {
+        [styles.active]: item.isActive
+      })
+    }, item.url ? {
+      href: item.url,
+      onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
+    } : {}), item.title));
+  }));
+};
+
+const HorizontalMenuItem = ({
+  item,
+  onMouseEnter,
+  onMouseLeave,
+  isExpanded,
+  isLast,
+  linkHandler
+}) => {
+  const Tag = item.isActive || !item.url ? 'span' : 'a';
+  const textCn = useTextStyles();
+
+  const handleEnter = () => onMouseEnter(item);
+
+  return React__default.createElement("li", {
+    className: styles.menuItemWrap,
+    onMouseEnter: handleEnter,
+    onMouseLeave: onMouseLeave
+  }, React__default.createElement(Tag, Object.assign({}, item.url ? {
+    href: item.url,
+    onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
+  } : {}, {
+    key: item.title,
+    className: classNames(styles.menuItem, textCn('rs-text-2'), {
+      [styles.itemActive]: item.isActive,
+      [styles.expanded]: isExpanded && !!item.items?.length
+    })
+  }), item.title), !!item.items?.length && React__default.createElement(DropdownMenu, {
+    items: item.items,
+    isExpanded: isExpanded,
+    alignRight: isLast,
+    linkHandler: linkHandler
+  }));
+};
+
+const HorizontalMenu = ({
+  items,
+  theme,
+  linkHandler
+}) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [debouncedActiveIndex, setDebouncedActiveIndex] = useState(activeIndex);
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedActiveIndex(activeIndex), activeIndex !== -1 ? 200 : 400);
+    return () => clearTimeout(handler);
+  }, [activeIndex]);
+
+  const handleEnter = item => setActiveIndex(items.findIndex(val => val === item));
+
+  const handleLeave = () => setActiveIndex(-1);
+
+  return React__default.createElement("nav", {
+    className: classNames(styles.nav, {
+      [styles.darkTheme]: theme === 'dark'
+    })
+  }, React__default.createElement("ul", {
+    className: styles.menuList
+  }, items.map((item, index) => React__default.createElement(HorizontalMenuItem, {
+    item: item,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    isExpanded: index === debouncedActiveIndex,
+    isLast: index === items.length - 1,
+    key: index,
+    linkHandler: linkHandler
+  }))));
+};
+
+export { HorizontalMenu };

package/out/components/header/{logo-large → components/header/logo-large}/logo-large.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './logo-large.module.pcss.js';
 import SvgKotlinLogoLarge from './kotlin-logo-large.svg.js';
 import classNames from 'classnames';
@@ -11,25 +11,19 @@ const LogoLarge = ({
 }) => {
   const version = productWebUrl ? getProductVersion(productWebUrl) : null;
   const textCn = useTextStyles();
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     className: classNames(styles.container, className, textCn('rs-text-3', {
       hardness: 'average'
     }))
-  }, {
-    children: [jsx("a", Object.assign({
-      className: styles.link,
-      href: KOTLINLANG_URL,
-      "aria-label": "Kotlin Home Page"
-    }, {
-      children: jsx(SvgKotlinLogoLarge, {}, void 0)
-    }), void 0), version && jsx("a", Object.assign({
-      className: classNames(styles.versionTag),
-      href: productWebUrl,
-      target: "_blank"
-    }, {
-      children: version
-    }), void 0)]
-  }), void 0);
+  }, React__default.createElement("a", {
+    className: styles.link,
+    href: KOTLINLANG_URL,
+    "aria-label": "Kotlin Home Page"
+  }, React__default.createElement(SvgKotlinLogoLarge, null)), version && React__default.createElement("a", {
+    className: classNames(styles.versionTag),
+    href: productWebUrl,
+    target: "_blank"
+  }, version));
 };
 
 function getProductVersion(productWebUrl) {

package/out/components/header/components/header/logo-small/logo-small.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import SvgKotlinLogoSmall from './kotlin-logo-small.svg.js';
+import styles from './logo-small.module.pcss.js';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { KOTLINLANG_URL } from '../consts.js';
+
+const LogoSmall = ({
+  homeTitle,
+  homeUrl,
+  className
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: classNames(styles.logoSmall, className)
+  }, React__default.createElement("a", {
+    href: KOTLINLANG_URL,
+    className: styles.iconWrap
+  }, React__default.createElement(SvgKotlinLogoSmall, {
+    className: styles.icon
+  })), React__default.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.link, textCn('rs-h3'))
+  }, homeTitle));
+};
+
+export { LogoSmall };

package/out/components/header/{menu-popup → components/header/menu-popup}/menu-button/menu-button.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgHamburgerIcon from './hamburger-icon.svg.js';
@@ -8,15 +8,13 @@ const MenuButton = ({
   onClick,
   isExpanded
 }) => {
-  return jsx("button", Object.assign({
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button),
     "aria-haspopup": "true",
     "aria-label": "Open the navigation",
     onClick: onClick
-  }, {
-    children: isExpanded ? jsx(SvgCloseIcon, {}, void 0) : jsx(SvgHamburgerIcon, {}, void 0)
-  }), void 0);
+  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
 };
 
 export { MenuButton };

package/out/components/header/{menu-popup → components/header/menu-popup}/menu-popup.js

@@ -1,5 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
 import styles from './menu-popup.module.pcss.js';
 import classNames from 'classnames';
 import { MenuButton } from './menu-button/menu-button.js';
@@ -16,7 +15,7 @@ const MenuListItem = ({
     '--level': level
   };
   const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
-  return jsx(Tag, Object.assign({}, item.url ? {
+  return React__default.createElement(Tag, Object.assign({}, item.url ? {
     href: item.url,
     onClick: handleClick
   } : {}, {
@@ -26,9 +25,7 @@ const MenuListItem = ({
       [styles.activeWithChild]: item.items && item.items.length
     }),
     style: style
-  }, {
-    children: item.title
-  }), void 0);
+  }), item.title);
 };
 
 const MenuList = ({
@@ -36,19 +33,17 @@ const MenuList = ({
   level,
   linkHandler
 }) => {
-  return jsx(Fragment, {
-    children: items.map((item, i) => jsxs(Fragment$1, {
-      children: [jsx(MenuListItem, {
-        item: item,
-        level: level,
-        linkHandler: linkHandler
-      }, void 0), item.items && item.items.length > 0 && jsx(MenuList, {
-        items: item.items,
-        level: level + 1,
-        linkHandler: linkHandler
-      }, void 0)]
-    }, i))
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  }))));
 };
 
 const MenuPopup = ({
@@ -81,24 +76,20 @@ const MenuPopup = ({
 
     setExpand(!isExpanded);
   }, [isExpanded, navRef]);
-  return jsxs(Fragment, {
-    children: [jsx(MenuButton, {
-      onClick: handleClick,
-      isExpanded: isExpanded
-    }, void 0), jsx("nav", Object.assign({
-      style: navStyle,
-      ref: navRef,
-      className: classNames(styles.menuPopup, textCn('rs-text-2'), {
-        [styles.menuPopupExpanded]: isExpanded
-      })
-    }, {
-      children: jsx(MenuList, {
-        items: items,
-        level: 0,
-        linkHandler: linkHandler
-      }, void 0)
-    }), void 0)]
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuButton, {
+    onClick: handleClick,
+    isExpanded: isExpanded
+  }), React__default.createElement("nav", {
+    style: navStyle,
+    ref: navRef,
+    className: classNames(styles.menuPopup, textCn('rs-text-2'), {
+      [styles.menuPopupExpanded]: isExpanded
+    })
+  }, React__default.createElement(MenuList, {
+    items: items,
+    level: 0,
+    linkHandler: linkHandler
+  })));
 };
 
 export { MenuPopup };