@jetbrains/kotlin-web-site-ui 4.3.0-next-layout.7 → 4.4.0-alpha.0

package/out/components/header/menu-popup/menu-list/menu-list.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "menuItemGroup": "ktl-menu-list-module_menu-item-group_mFvUE"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.js

@@ -0,0 +1,28 @@
+import React__default, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './menu-list-item.module.pcss.js';
+
+const MenuListItem = ({
+  item,
+  level,
+  linkHandler
+}) => {
+  const Tag = item.url ? 'a' : 'span';
+  const style = {
+    '--level': level
+  };
+  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
+  return React__default.createElement(Tag, { ...(item.url ? {
+      href: item.url,
+      onClick: handleClick
+    } : {}),
+    className: classNames(styles.menuItem, {
+      [styles.menuItemRoot]: level === 0,
+      [styles.active]: item.isActive,
+      [styles.activeWithChild]: item.items && item.items.length
+    }),
+    style: style
+  }, item.title);
+};
+
+export { MenuListItem };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "menuItem": "ktl-menu-list-item-module_menu-item_Aruue",
+  "active": "ktl-menu-list-item-module_active_jHfJR",
+  "activeWithChild": "ktl-menu-list-item-module_active-with-child_ier2a",
+  "menuItemRoot": "ktl-menu-list-item-module_menu-item-root_Rzcqb"
+};
+export { styles as default };

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

@@ -1,51 +1,11 @@
-import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import styles from './menu-popup.module.pcss.js';
 import classNames from 'classnames';
 import { MenuButton } from './menu-button/menu-button.js';
+import { MenuList } from './menu-list/menu-list.js';
 import { useTextStyles } from '@rescui/typography';
 import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 
-const MenuListItem = ({
-  item,
-  level,
-  linkHandler
-}) => {
-  const Tag = item.url ? 'a' : 'span';
-  const style = {
-    '--level': level
-  };
-  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
-  return React__default.createElement(Tag, Object.assign({}, item.url ? {
-    href: item.url,
-    onClick: handleClick
-  } : {}, {
-    className: classNames(styles.menuItem, {
-      [styles.menuItemRoot]: level === 0,
-      [styles.active]: item.isActive,
-      [styles.activeWithChild]: item.items && item.items.length
-    }),
-    style: style
-  }), item.title);
-};
-
-const MenuList = ({
-  items,
-  level,
-  linkHandler
-}) => {
-  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 = ({
   items,
   isExpanded,
@@ -58,7 +18,7 @@ const MenuPopup = ({
   const [navStyle, setNavStyle] = useState({});
   useEffect(() => {
     return () => {
-      setExpand(false);
+      // setExpand(false);
       clearAllBodyScrollLocks();
     };
   }, []);

package/out/components/header/menu-popup/menu-popup.module.pcss.js

@@ -1,9 +1,5 @@
 var styles = {
   "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
-  "menuItem": "ktl-menu-popup-module_menu-item_fPvF-",
-  "active": "ktl-menu-popup-module_active_iqTAj",
-  "activeWithChild": "ktl-menu-popup-module_active-with-child_tAzCG",
-  "menuItemRoot": "ktl-menu-popup-module_menu-item-root_gA9d2",
   "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
 };
 export { styles as default };

package/out/components/header/nav-scheme.js

@@ -1,4 +1,6 @@
 import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
+const HOME_TITLE = 'Home';
+const HOME_URL = '/';
 const SOLUTIONS_TITLE = 'Solutions';
 const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform Mobile';
 const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
@@ -32,6 +34,9 @@ const KOTLIN_DOCS_URL = `/docs/home.html`;
 const KMM_DOCS_TITLE = 'KMM';
 const KMM_DOCS_URL = `/docs/mobile/home.html`;
 const navScheme = [{
+  title: HOME_TITLE,
+  url: HOME_URL
+}, {
   title: SOLUTIONS_TITLE,
   url: null,
   items: [{
@@ -80,8 +85,9 @@ const navScheme = [{
   }]
 }];
 
-function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
-  return navScheme.map(({
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
+  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
+  return controlledNavScheme.map(({
     title,
     url,
     items
@@ -132,4 +138,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
   return url;
 }
 
-export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };

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

@@ -2,13 +2,15 @@ import React__default from 'react';
 import styles from './search-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgSearch from './search.svg.js';
+import { SearchIcon } from '@rescui/icons';
+import Button from '@rescui/button';
 const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
 
 const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return React__default.createElement("button", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
@@ -16,7 +18,16 @@ const SearchButton = ({
     "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
     "aria-label": "Search",
     onClick: onClick
-  }, React__default.createElement(SvgSearch, null));
+  }, React__default.createElement(SvgSearch, null)), React__default.createElement("div", {
+    className: styles.mobileButton
+  }, React__default.createElement(Button, {
+    "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
+    "aria-label": "Search",
+    onClick: onClick,
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(SearchIcon, null)
+  })));
 };
 
 export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };

package/out/components/header/search-button/search-button.module.pcss.js

@@ -1,5 +1,6 @@
 var styles = {
   "button": "ktl-search-button-module_button_YHJPv",
-  "active": "ktl-search-button-module_active_lUmdh"
+  "active": "ktl-search-button-module_active_lUmdh",
+  "mobileButton": "ktl-search-button-module_mobileButton_KT2YP"
 };
 export { styles as default };

package/out/components/popup/popup.js

@@ -21,21 +21,21 @@ const Popup = ({
     popupZIndex
   }) => React.createElement(LayeringProvider, {
     baseLayer: "popup"
-  }, React.createElement(ReactModal, Object.assign({
+  }, React.createElement(ReactModal, {
     isOpen: isOpen,
     className: styles.popup,
     overlayClassName: styles.overlay,
     onRequestClose: onRequestClose,
     shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-    shouldCloseOnEsc: shouldCloseOnEsc
-  }, restProps, {
+    shouldCloseOnEsc: shouldCloseOnEsc,
+    ...restProps,
     ariaHideApp: ariaHideApp,
     style: {
       overlay: {
         zIndex: popupZIndex
       }
     }
-  }), !busy && showOuterCloseButton && React.createElement(Button, {
+  }, !busy && showOuterCloseButton && React.createElement(Button, {
     mode: 'rock',
     theme: 'light',
     icon: React.createElement(CloseIcon, null),

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

@@ -14,7 +14,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -30,15 +31,14 @@
   height: 64px;
   background: #ffffff;
   padding: 0 32px;
-  z-index: var(--ktl-top-menu-z-index);
-  box-shadow: inset 0 -1px 0 0 var(--ktl-light-dark-20);
+  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
   transition: color var(--ktl-transition-fast),
   background-color var(--ktl-transition-fast);
 }
 
 .ktl-top-menu-module_top-menu-dark-theme_aNBxr {
   background: #1b1b1b;
-  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
 }
 
 .ktl-top-menu-module_logo_CNH2W {
@@ -49,8 +49,8 @@
 
 @media (max-width: 640px) {
   .ktl-top-menu-module_top-menu_PRX9X {
-    height: 48px;
-    padding: 0 16px;
+    height: var(--ktl-header-height-mobile);
+    padding: 0 6px 0 4px;
     grid-gap: 16px;
     grid-template-columns: 1fr auto;
   }
@@ -76,12 +76,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);
@@ -98,140 +92,113 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
-.ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-  display: none;
-  height: 100%;
-  justify-self: flex-start;
-  white-space: nowrap;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.ktl-dropdown-menu-module_button_OYsuv {
-  border: none;
-  background: none;
-  height: 100%;
-  max-width: 100%;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-}
-
-.ktl-dropdown-menu-module_button-text_SJmh- {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
-.ktl-dropdown-menu-module_icon_GGhMI {
-  width: 12px;
-  height: 6px;
-  margin-left: 6px;
-  transition: transform ease-in-out var(--ktl-transition-xfast);
-  flex: 0 0 auto;
+.ktl-vertical-menu-module_vertical-menu_aLIbw {
+    display: block;
+    height: 100%;
+    justify-self: flex-start;
+    white-space: nowrap;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.ktl-vertical-menu-module_button_zqr20 {
+    border: none;
+    background: none;
+    height: 52px;
+    width: 100%;
+    max-width: 100%;
+    padding: 0 0 0 12px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: #fff;
 }
 
-.ktl-dropdown-menu-module_dropdown-list_Ylkvt {
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 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;
+.ktl-vertical-menu-module_button-text_aXith {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
 }
 
-.ktl-dropdown-menu-module_dropdown-item_X3tZ- {
-  padding: 8px 16px;
-  text-decoration: none;
-  transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
+.ktl-vertical-menu-module_icon_-Ieat {
+    width: 14px;
+    height: 8px;
+    margin-left: 13px;
+    transition: transform ease-in-out var(--ktl-transition-xfast);
+    flex: 0 0 auto;
 }
 
-.ktl-dropdown-menu-module_dropdown-item_X3tZ-: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 {
-    background: var(--ktl-dark-100);
+.ktl-vertical-menu-module_dropdown-header_77lTy {
+    /* workaround */
+    margin-top: calc(var(--ktl-header-height-mobile) * -1);
+    display: flex;
     color: #ffffff;
-  }
-
-.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_overlay-visible_MjwEF {
-  display: block;
-  opacity: 1;
-}
-
-.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_icon_GGhMI {
-    transform: scale(1, -1);
-  }
+    align-items: center;
+    height: var(--ktl-header-height-mobile);
+    padding: 0 0 0 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    justify-content: space-between;
+    background: #ffffff;
+    margin-bottom: 8px;
+}
 
-.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
+.ktl-vertical-menu-module_dropdown-list_N3KWV {
     display: flex;
     flex-direction: column;
     opacity: 1;
-  }
-
-.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
-  background: var(--ktl-dark-bg-hard);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: var(--ktl-mobile-dropdown-list-z-index);
+}
+
+.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-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #ffffff;
+.ktl-vertical-menu-module_dropdown-item_XLfp4:hover {
+        background: rgba(39, 40, 44, 0.1);
+        color: #27282c;
     }
 
-.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
-      color: var(--ktl-light-text-hard);
-      background: #ffffff;
+.ktl-vertical-menu-module_dropdown-item_XLfp4.ktl-vertical-menu-module_dropdown-item-active_iBUbj {
+        background: var(--ktl-dark-100);
+        color: #ffffff;
     }
 
-@media (max-width: 640px) {
-  .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-    display: block;
-  }
-}
+.ktl-vertical-menu-module_vertical-menu-expanded_kFaaI .ktl-vertical-menu-module_icon_-Ieat {
+        transform: scale(1, -1);
+    }
 
-@-webkit-keyframes ktl-dropdown-menu-module_fadein_MySnq {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw {
+    background: rgba(39, 40, 44, 1);
 }
 
-@keyframes ktl-dropdown-menu-module_fadein_MySnq {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+.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-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;
+        }
+

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 };