@jetbrains/kotlin-web-site-ui 0.0.0-foundation-changes.1

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

@@ -0,0 +1,115 @@
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+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]);
+  useLayoutEffect(() => {
+    if (ref.current) disableBodyScroll(ref.current);
+  }, [ref]);
+  useEffect(() => {
+    return clearAllBodyScrollLocks;
+  }, []);
+  return React__default.createElement(ThemeProvider, {
+    theme: 'light'
+  }, React__default.createElement("div", {
+    className: styles.fullSearch,
+    style: {
+      paddingRight: isScrollbarCompensated ? `${width}px` : 0
+    },
+    tabIndex: 1000,
+    ref: ref,
+    "data-test": 'full-search'
+  }, 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,
+    "data-test": 'close-full-search'
+  })), React__default.createElement("div", {
+    className: styles.wrapper,
+    "data-test": 'full-search-input'
+  }, 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,49 @@
+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("div", {
+    "data-test": 'full-search-results'
+  }, 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'), styles.snippet),
+      dangerouslySetInnerHTML: {
+        __html: snippet
+      }
+    }));
+  }));
+};
+
+export { HitList };

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

@@ -0,0 +1,6 @@
+var styles = {
+  "hitList": "ktl-hit-list-module_hitList_1MP6m",
+  "titleLink": "ktl-hit-list-module_titleLink_rdJ6u",
+  "snippet": "ktl-hit-list-module_snippet_WmrYL"
+};
+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

@@ -0,0 +1,121 @@
+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';
+var SearchResultView;
+
+(function (SearchResultView) {
+  SearchResultView[SearchResultView["Narrow"] = 0] = "Narrow";
+  SearchResultView[SearchResultView["Wide"] = 1] = "Wide";
+})(SearchResultView || (SearchResultView = {}));
+
+const MENU_POPUP_BREAKPOINT = 640;
+const Header = forwardRef(({
+  productWebUrl,
+  hasSearch = false,
+  currentUrl,
+  currentTitle,
+  className,
+  hasBorder = true,
+  dropdownTheme = 'dark',
+  linkHandler,
+  isPlayground,
+  isUrlActive,
+  searchConfig,
+  resultViewType = SearchResultView.Narrow
+}, forwardedRef) => {
+  const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
+  const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
+  const [fullSearchActive, setFullSearchActive] = useState(false);
+  const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
+  const itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
+  const headerRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => headerRef.current);
+  const [isMenuPopupVisible, setMenuPopupVisible] = useState(false);
+  useLayoutEffect(() => {
+    const headerWidth = headerRef.current?.getBoundingClientRect?.().width ?? 0;
+    setMenuPopupVisible(!!headerWidth && headerWidth <= MENU_POPUP_BREAKPOINT);
+  }, [headerRef]);
+  useResizeObserver(headerRef, entry => setMenuPopupVisible(!!entry.contentRect.width && 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` && resultViewType === SearchResultView.Narrow) {
+      document.addEventListener('keydown', fullSearchKeyHandler);
+      const focusManager = new FocusManager();
+      return () => {
+        document.removeEventListener('keydown', fullSearchKeyHandler);
+        focusManager.destroy();
+      };
+    }
+  }, [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 || menuPopupExpanded
+    }),
+    "data-test": 'header'
+  }, 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,
+    searchBoxViewType: resultViewType
+  })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
+    items: itemsWithoutHomeSection,
+    theme: dropdownTheme,
+    linkHandler: linkHandler
+  }), !menuPopupExpanded && React__default.createElement(SearchButton, {
+    isMobile: isMenuPopupVisible,
+    onClick: handleSearchButtonClick,
+    isActive: hasSearch
+  }), isMenuPopupVisible && React__default.createElement(MenuPopup, {
+    items: items,
+    setExpand: setMenuPopupExpanded,
+    isExpanded: menuPopupExpanded,
+    headerRef: headerRef,
+    linkHandler: linkHandler
+  })))));
+});
+export { Header, SearchResultView };

package/out/components/header/header.module.pcss.js

@@ -0,0 +1,5 @@
+var styles = {
+  "headerMenu": "ktl-header-module_header-menu_wh71L",
+  "border": "ktl-header-module_border_paN11"
+};
+export { styles as default };

package/out/components/header/horizontal-menu/horizontal-menu.js

@@ -0,0 +1,101 @@
+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, {
+      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, { ...(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/horizontal-menu/horizontal-menu.module.pcss.js

@@ -0,0 +1,16 @@
+var styles = {
+  "nav": "ktl-horizontal-menu-module_nav_gbA7M",
+  "menuList": "ktl-horizontal-menu-module_menu-list_TJnOF",
+  "menuItemWrap": "ktl-horizontal-menu-module_menu-item-wrap_j6zB-",
+  "menuItem": "ktl-horizontal-menu-module_menu-item_CXDEW",
+  "expanded": "ktl-horizontal-menu-module_expanded_3GFPc",
+  "itemActive": "ktl-horizontal-menu-module_item-active_Zca2K",
+  "dropdownMenu": "ktl-horizontal-menu-module_dropdown-menu_jwdWI",
+  "fadeIn": "ktl-horizontal-menu-module_fade-in_FGwhC",
+  "darkTheme": "ktl-horizontal-menu-module_dark-theme_gfxx6",
+  "dropdownMenuItem": "ktl-horizontal-menu-module_dropdown-menu-item_9gjwH",
+  "active": "ktl-horizontal-menu-module_active_m5fs-",
+  "dropdownMenuExpanded": "ktl-horizontal-menu-module_dropdown-menu-expanded_eX8Jy",
+  "dropdownMenuAlignRight": "ktl-horizontal-menu-module_dropdown-menu-align-right_YeB-9"
+};
+export { styles as default };