@jetbrains/kotlin-web-site-ui 4.2.0-alpha.2 → 4.2.0-alpha.4

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

@@ -1,4 +1,5 @@
-import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
+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';
@@ -53,6 +54,12 @@ const FullSearch = ({
       }
     }
   }, [hits, inputValue]);
+  useLayoutEffect(() => {
+    if (ref.current) disableBodyScroll(ref.current);
+  }, [ref]);
+  useEffect(() => {
+    return clearAllBodyScrollLocks;
+  }, []);
   return React__default.createElement(ThemeProvider, {
     theme: 'light'
   }, React__default.createElement("div", {

package/out/components/header/header.js

@@ -1,7 +1,6 @@
 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';
@@ -15,7 +14,8 @@ 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;
+import useResizeObserver from '@react-hook/resize-observer';
+const BREAKPOINT_XS = 640;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,
@@ -27,21 +27,20 @@ const Header = forwardRef(({
   linkHandler,
   isPlayground,
   isUrlActive,
-  searchConfig,
-  noScrollClassName
+  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 itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
   const headerRef = useRef(null);
   useImperativeHandle(forwardedRef, () => headerRef.current);
+  const [isMenuPopupVisible, setMenuPopupVisible] = useState(false);
   useLayoutEffect(() => {
-    setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
+    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= BREAKPOINT_XS);
   }, [headerRef]);
-  useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
+  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= BREAKPOINT_XS));
   const handleSearchButtonClick = useCallback(() => {
     setSearchBoxVisible(!isSearchBoxVisible);
   }, []);
@@ -70,15 +69,6 @@ const Header = forwardRef(({
       };
     }
   }, [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, {

package/out/components/top-menu/index.css

@@ -75,12 +75,6 @@
   color: var(--ktl-color-primary-light-theme);
 }
 
-@media (max-width: 640px) {
-  .ktl-horizontal-menu-module_horizontal-menu_pB2-S {
-    display: none;
-  }
-}
-
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);
@@ -102,24 +96,8 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
-.ktl-dropdown-menu-module_overlay_segRo {
-    display: none;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    background-color: var(--ktl-color-dark-40);
-    z-index: var(--ktl-overlay-z-index);
-    -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-            animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-}
-
-.ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-    display: none;
+.ktl-vertical-menu-module_vertical-menu_aLIbw {
+    display: block;
     height: 100%;
     justify-self: flex-start;
     white-space: nowrap;
@@ -128,7 +106,7 @@
     max-width: 100%;
 }
 
-.ktl-dropdown-menu-module_button_OYsuv {
+.ktl-vertical-menu-module_button_zqr20 {
     border: none;
     background: none;
     height: 100%;
@@ -141,13 +119,13 @@
     cursor: pointer;
 }
 
-.ktl-dropdown-menu-module_button-text_SJmh- {
+.ktl-vertical-menu-module_button-text_aXith {
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 0 1 auto;
 }
 
-.ktl-dropdown-menu-module_icon_GGhMI {
+.ktl-vertical-menu-module_icon_-Ieat {
     width: 12px;
     height: 6px;
     margin-left: 6px;
@@ -155,7 +133,9 @@
     flex: 0 0 auto;
 }
 
-.ktl-dropdown-menu-module_dropdown-header_fa92T {
+.ktl-vertical-menu-module_dropdown-header_77lTy {
+    /* workaround */
+    margin-top: calc(var(--ktl-header-height-mobile) * -1);
     display: flex;
     color: #ffffff;
     align-items: center;
@@ -163,88 +143,58 @@
     padding: 0 0 0 16px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     justify-content: space-between;
+    background: #ffffff;
 }
 
-.ktl-dropdown-menu-module_dropdown-list_Ylkvt {
-    display: none;
+.ktl-vertical-menu-module_dropdown-list_N3KWV {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #ffffff;
-    opacity: 0;
-    -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-            animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
     z-index: var(--ktl-mobile-dropdown-list-z-index);
 }
 
-.ktl-dropdown-menu-module_dropdown-item_X3tZ- {
+.ktl-vertical-menu-module_dropdown-item_XLfp4 {
     padding: 12px 16px;
     text-decoration: none;
     transition: color var(--ktl-transition-xfast),
     background-color var(--ktl-transition-xfast);
 }
 
-.ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
+.ktl-vertical-menu-module_dropdown-item_XLfp4:hover {
         background: rgba(39, 40, 44, 0.1);
         color: #27282c;
     }
 
-.ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
+.ktl-vertical-menu-module_dropdown-item_XLfp4.ktl-vertical-menu-module_dropdown-item-active_iBUbj {
         background: var(--ktl-dark-100);
         color: #ffffff;
     }
 
-.ktl-dropdown-menu-module_overlay-visible_MjwEF {
-    display: block;
-    opacity: 1;
-}
-
-.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_icon_GGhMI {
+.ktl-vertical-menu-module_vertical-menu-expanded_kFaaI .ktl-vertical-menu-module_icon_-Ieat {
         transform: scale(1, -1);
     }
 
-.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
-        display: flex;
-        flex-direction: column;
-        opacity: 1;
-    }
-
-.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
+.ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw {
     background: rgba(39, 40, 44, 1);
 }
 
-.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
+.ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw .ktl-vertical-menu-module_dropdown-header_77lTy {
+        background: rgba(39, 40, 44, 1);
+    }
+
+.ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw .ktl-vertical-menu-module_dropdown-item_XLfp4:hover {
             background: rgba(255, 255, 255, 0.1);
             color: #ffffff;
         }
 
-.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
+.ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw .ktl-vertical-menu-module_dropdown-item_XLfp4.ktl-vertical-menu-module_dropdown-item-active_iBUbj {
             color: var(--ktl-light-text-hard);
             background: #ffffff;
         }
 
-@media (max-width: 640px) {
-    .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-        display: block;
-    }
-}
-
-@-webkit-keyframes ktl-dropdown-menu-module_fadein_MySnq {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes ktl-dropdown-menu-module_fadein_MySnq {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}

package/out/components/top-menu/top-menu.js

@@ -1,12 +1,13 @@
-import React__default from 'react';
+import React__default, { forwardRef, useRef, useImperativeHandle, useState, useLayoutEffect } from 'react';
 import { useTheme } from '@rescui/ui-contexts';
 import classNames from 'classnames';
 import styles from './top-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
 import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
-import { DropdownMenu } from './dropdown-menu/dropdown-menu.js';
-
-const TopMenu = ({
+import { VerticalMenu } from './vertical-menu/vertical-menu.js';
+import useResizeObserver from '@react-hook/resize-observer';
+const BREAKPOINT_XS = 640;
+const TopMenu = forwardRef(({
   homeUrl,
   title,
   mobileTitle,
@@ -15,33 +16,39 @@ const TopMenu = ({
   linkHandler = () => {},
   className,
   children,
-  forwardedRef,
   mobileOverview
-}) => {
+}, forwardedRef) => {
   const theme = useTheme();
   const textCn = useTextStyles();
+  const menuRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => menuRef.current);
+  const [isMobileMenuVisible, setMobileMenuVisible] = useState(false);
+  useLayoutEffect(() => {
+    setMobileMenuVisible((menuRef.current?.getBoundingClientRect?.().width ?? 0) <= BREAKPOINT_XS);
+  }, [menuRef]);
+  useResizeObserver(menuRef, entry => setMobileMenuVisible(entry.contentRect.width <= BREAKPOINT_XS));
   return React__default.createElement("div", {
+    ref: menuRef,
     className: classNames(styles.topMenu, className, {
       [styles.topMenuDarkTheme]: theme === 'dark'
-    }),
-    ref: forwardedRef
+    })
   }, React__default.createElement("a", {
     href: homeUrl,
     className: classNames(styles.logo, textCn('rs-h3')),
     onClick: event => linkHandler(event, homeUrl)
-  }, title), React__default.createElement(DropdownMenu, {
+  }, title), isMobileMenuVisible ? React__default.createElement(VerticalMenu, {
     items: items,
     activeIndex: activeIndex,
     linkHandler: linkHandler,
     title: title,
     mobileTitle: mobileTitle,
     homeUrl: homeUrl,
-    mobileOverview: mobileOverview
-  }), React__default.createElement(HorizontalMenu, {
+    mobileOverview: mobileOverview,
+    topMenuRef: menuRef
+  }) : React__default.createElement(HorizontalMenu, {
     items: items,
     activeIndex: activeIndex,
     linkHandler: linkHandler
   }), children);
-};
-
+});
 export { TopMenu };

package/out/components/top-menu/{dropdown-menu/dropdown-menu.js → vertical-menu/vertical-menu.js}

@@ -1,30 +1,25 @@
-import React__default, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import React__default, { useState, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
 import classNames from 'classnames';
-import styles from './dropdown-menu.module.pcss.js';
+import styles from './vertical-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
 import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
 import { useTheme } from '@rescui/ui-contexts';
 import Button from '@rescui/button';
 import { CloseIcon } from '@rescui/icons';
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { createPortal } from 'react-dom';
 
-const DropdownMenu = ({
+const VerticalMenu = ({
   homeUrl,
   title,
   mobileTitle = 'Overview',
   items,
   activeIndex,
   linkHandler,
-  mobileOverview = true
+  mobileOverview = true,
+  topMenuRef
 }) => {
-  const theme = useTheme();
   const textCn = useTextStyles();
-  const [portalRoot, setPortalRoot] = React__default.useState(null);
-  React__default.useEffect(() => {
-    if (typeof document !== `undefined`) {
-      setPortalRoot(document.body);
-    }
-  }, []);
 
   let _items = (mobileOverview ? [{
     title: mobileTitle,
@@ -35,9 +30,18 @@ const DropdownMenu = ({
 
   const activeItem = _items[_activeIndex];
   const [isExpanded, setIsExpanded] = useState(false);
-
-  const handleClick = () => setIsExpanded(!isExpanded);
-
+  const [portalRoot, setPortalRoot] = useState(null);
+  const handleOpen = useCallback(() => {
+    setIsExpanded(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsExpanded(false);
+  }, []);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      setPortalRoot(document.body);
+    }
+  }, []);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classNames(styles.dropdownMenu, {
       [styles.dropdownMenuExpanded]: isExpanded
@@ -45,12 +49,50 @@ const DropdownMenu = ({
   }, React__default.createElement("button", {
     className: classNames(styles.button, textCn('rs-text-2')),
     "aria-haspopup": "true",
-    onClick: handleClick
+    onClick: handleOpen
   }, React__default.createElement("span", {
     className: styles.buttonText
   }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
     className: styles.icon
-  })), React__default.createElement("nav", {
+  })), !!portalRoot && isExpanded && createPortal(React__default.createElement(VerticalMenuDropDown, {
+    title: title,
+    activeIndex: _activeIndex,
+    items: _items,
+    onClose: handleClose,
+    linkHandler: linkHandler,
+    topMenuRef: topMenuRef
+  }), portalRoot)));
+};
+
+const VerticalMenuDropDown = ({
+  title,
+  onClose,
+  items,
+  linkHandler,
+  activeIndex,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+  const theme = useTheme();
+  const navRef = useRef(null);
+  const [navStyle, setNavStyle] = useState({});
+  useEffect(() => {
+    if (navRef.current) {
+      disableBodyScroll(navRef.current);
+    }
+
+    return clearAllBodyScrollLocks;
+  }, []);
+  useLayoutEffect(() => {
+    if (topMenuRef.current) {
+      setNavStyle({
+        top: topMenuRef.current.getBoundingClientRect().top
+      });
+    }
+  }, [topMenuRef]);
+  return React__default.createElement("nav", {
+    ref: navRef,
+    style: navStyle,
     className: classNames(styles.dropdownList, {
       [styles.dropdownListDarkTheme]: theme === 'dark'
     })
@@ -62,21 +104,16 @@ const DropdownMenu = ({
     mode: 'clear',
     size: 'l',
     icon: React__default.createElement(CloseIcon, null),
-    onClick: handleClick
-  })), _items.map((item, index) => React__default.createElement("a", {
+    onClick: onClose
+  })), items.map((item, index) => React__default.createElement("a", {
     key: item.url,
     href: item.url,
     className: classNames(styles.dropdownItem, textCn('rs-text-1'), {
-      [styles.dropdownItemActive]: index === _activeIndex
+      [styles.dropdownItemActive]: index === activeIndex
     }),
     onClick: event => linkHandler?.(event, item.url),
     target: item.isExternal ? '_blank' : undefined
-  }, item.title)))), !!portalRoot && ReactDOM.createPortal(React__default.createElement("div", {
-    className: classNames(styles.overlay, {
-      [styles.overlayVisible]: isExpanded
-    }),
-    onClick: handleClick
-  }), portalRoot));
+  }, item.title)));
 };
 
-export { DropdownMenu };
+export { VerticalMenu };

package/out/components/top-menu/vertical-menu/vertical-menu.module.pcss.js

@@ -0,0 +1,13 @@
+var styles = {
+  "verticalMenu": "ktl-vertical-menu-module_vertical-menu_aLIbw",
+  "button": "ktl-vertical-menu-module_button_zqr20",
+  "buttonText": "ktl-vertical-menu-module_button-text_aXith",
+  "icon": "ktl-vertical-menu-module_icon_-Ieat",
+  "dropdownHeader": "ktl-vertical-menu-module_dropdown-header_77lTy",
+  "dropdownList": "ktl-vertical-menu-module_dropdown-list_N3KWV",
+  "dropdownItem": "ktl-vertical-menu-module_dropdown-item_XLfp4",
+  "dropdownItemActive": "ktl-vertical-menu-module_dropdown-item-active_iBUbj",
+  "verticalMenuExpanded": "ktl-vertical-menu-module_vertical-menu-expanded_kFaaI",
+  "dropdownListDarkTheme": "ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw"
+};
+export { styles as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.2.0-alpha.2",
+  "version": "4.2.0-alpha.4",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [

package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js

@@ -1,16 +0,0 @@
-var styles = {
-  "overlay": "ktl-dropdown-menu-module_overlay_segRo",
-  "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
-  "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
-  "button": "ktl-dropdown-menu-module_button_OYsuv",
-  "buttonText": "ktl-dropdown-menu-module_button-text_SJmh-",
-  "icon": "ktl-dropdown-menu-module_icon_GGhMI",
-  "dropdownHeader": "ktl-dropdown-menu-module_dropdown-header_fa92T",
-  "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
-  "dropdownItem": "ktl-dropdown-menu-module_dropdown-item_X3tZ-",
-  "dropdownItemActive": "ktl-dropdown-menu-module_dropdown-item-active_99q9X",
-  "overlayVisible": "ktl-dropdown-menu-module_overlay-visible_MjwEF",
-  "dropdownMenuExpanded": "ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy",
-  "dropdownListDarkTheme": "ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol"
-};
-export { styles as default };