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

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/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import styles from './dropdown-menu.module.pcss.js';
@@ -7,6 +7,7 @@ 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 { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 
 const DropdownMenu = ({
   homeUrl,
@@ -19,11 +20,14 @@ const DropdownMenu = ({
 }) => {
   const theme = useTheme();
   const textCn = useTextStyles();
-  const [portalRoot, setPortalRoot] = React__default.useState(null);
-  React__default.useEffect(() => {
+  const [portalRoot, setPortalRoot] = useState(null);
+  const navRef = useRef(null);
+  useEffect(() => {
     if (typeof document !== `undefined`) {
       setPortalRoot(document.body);
     }
+
+    return clearAllBodyScrollLocks;
   }, []);
 
   let _items = (mobileOverview ? [{
@@ -35,9 +39,13 @@ const DropdownMenu = ({
 
   const activeItem = _items[_activeIndex];
   const [isExpanded, setIsExpanded] = useState(false);
+  const handleClick = useCallback(() => {
+    if (navRef.current) {
+      isExpanded ? enableBodyScroll(navRef.current) : disableBodyScroll(navRef.current);
+    }
 
-  const handleClick = () => setIsExpanded(!isExpanded);
-
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, navRef]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classNames(styles.dropdownMenu, {
       [styles.dropdownMenuExpanded]: isExpanded
@@ -51,6 +59,7 @@ const DropdownMenu = ({
   }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
     className: styles.icon
   })), React__default.createElement("nav", {
+    ref: navRef,
     className: classNames(styles.dropdownList, {
       [styles.dropdownListDarkTheme]: theme === 'dark'
     })

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);
@@ -119,7 +113,7 @@
 }
 
 .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-    display: none;
+    display: block;
     height: 100%;
     justify-self: flex-start;
     white-space: nowrap;
@@ -225,12 +219,6 @@
             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;

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 useResizeObserver from '@react-hook/resize-observer';
+const BREAKPOINT_XS = 640;
+const TopMenu = forwardRef(({
   homeUrl,
   title,
   mobileTitle,
@@ -15,21 +16,27 @@ 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(DropdownMenu, {
     items: items,
     activeIndex: activeIndex,
     linkHandler: linkHandler,
@@ -37,11 +44,10 @@ const TopMenu = ({
     mobileTitle: mobileTitle,
     homeUrl: homeUrl,
     mobileOverview: mobileOverview
-  }), React__default.createElement(HorizontalMenu, {
+  }) : React__default.createElement(HorizontalMenu, {
     items: items,
     activeIndex: activeIndex,
     linkHandler: linkHandler
   }), children);
-};
-
+});
 export { TopMenu };

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.3",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [