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

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

@@ -96,23 +96,7 @@
   --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 {
+.ktl-vertical-menu-module_vertical-menu_aLIbw {
     display: block;
     height: 100%;
     justify-self: flex-start;
@@ -122,7 +106,7 @@
     max-width: 100%;
 }
 
-.ktl-dropdown-menu-module_button_OYsuv {
+.ktl-vertical-menu-module_button_zqr20 {
     border: none;
     background: none;
     height: 100%;
@@ -135,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;
@@ -149,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;
@@ -157,82 +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;
         }
 
-@-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

@@ -4,7 +4,7 @@ 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';
+import { VerticalMenu } from './vertical-menu/vertical-menu.js';
 import useResizeObserver from '@react-hook/resize-observer';
 const BREAKPOINT_XS = 640;
 const TopMenu = forwardRef(({
@@ -36,14 +36,15 @@ const TopMenu = forwardRef(({
     href: homeUrl,
     className: classNames(styles.logo, textCn('rs-h3')),
     onClick: event => linkHandler(event, homeUrl)
-  }, title), isMobileMenuVisible ? React__default.createElement(DropdownMenu, {
+  }, title), isMobileMenuVisible ? React__default.createElement(VerticalMenu, {
     items: items,
     activeIndex: activeIndex,
     linkHandler: linkHandler,
     title: title,
     mobileTitle: mobileTitle,
     homeUrl: homeUrl,
-    mobileOverview: mobileOverview
+    mobileOverview: mobileOverview,
+    topMenuRef: menuRef
   }) : React__default.createElement(HorizontalMenu, {
     items: items,
     activeIndex: activeIndex,

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

@@ -1,34 +1,25 @@
-import React__default, { useState, useRef, useEffect, useCallback } 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 { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+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] = useState(null);
-  const navRef = useRef(null);
-  useEffect(() => {
-    if (typeof document !== `undefined`) {
-      setPortalRoot(document.body);
-    }
-
-    return clearAllBodyScrollLocks;
-  }, []);
 
   let _items = (mobileOverview ? [{
     title: mobileTitle,
@@ -39,13 +30,18 @@ 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 [portalRoot, setPortalRoot] = useState(null);
+  const handleOpen = useCallback(() => {
+    setIsExpanded(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsExpanded(false);
+  }, []);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      setPortalRoot(document.body);
     }
-
-    setIsExpanded(!isExpanded);
-  }, [isExpanded, navRef]);
+  }, []);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classNames(styles.dropdownMenu, {
       [styles.dropdownMenuExpanded]: isExpanded
@@ -53,13 +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'
     })
@@ -71,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.3",
+  "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 };