@jetbrains/kotlin-web-site-ui 4.2.0 → 4.3.0-alpha.0

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/top-menu/index.css

@@ -13,7 +13,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);
 }
@@ -29,15 +30,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 {
@@ -48,7 +48,7 @@
 
 @media (max-width: 640px) {
   .ktl-top-menu-module_top-menu_PRX9X {
-    height: 48px;
+    height: var(--ktl-header-height-mobile);
     padding: 0 16px;
     grid-gap: 16px;
     grid-template-columns: 1fr auto;
@@ -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);
@@ -96,140 +90,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;
+    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 };

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

@@ -0,0 +1,123 @@
+import React__default, { useState, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+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 VerticalMenu = ({
+  homeUrl,
+  title,
+  mobileTitle = 'Overview',
+  items,
+  activeIndex,
+  linkHandler,
+  mobileOverview = true,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+
+  let _items = (mobileOverview ? [{
+    title: mobileTitle,
+    url: homeUrl
+  }] : []).concat(items);
+
+  const _activeIndex = mobileOverview ? activeIndex + 1 : activeIndex;
+
+  const activeItem = _items[_activeIndex];
+  const [isExpanded, setIsExpanded] = useState(false);
+  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
+    })
+  }, React__default.createElement("button", {
+    className: classNames(styles.button),
+    "aria-haspopup": "true",
+    onClick: handleOpen
+  }, React__default.createElement("span", {
+    className: textCn('rs-text-2', {
+      hardness: 'hard'
+    })
+  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), !!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'
+    })
+  }, React__default.createElement("div", {
+    className: styles.dropdownHeader
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-2')
+  }, title), React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
+    onClick: onClose
+  })), items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-1', {
+      hardness: 'hard'
+    }), {
+      [styles.dropdownItemActive]: index === activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined
+  }, item.title)));
+};
+
+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/out/components/typography/index.css

@@ -13,7 +13,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);
 }

package/out/components/youtube-player/index.css

@@ -13,7 +13,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);
 }

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",
+  "version": "4.3.0-alpha.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [

package/out/components/header/menu-popup/menu-button/close-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 16,
-  height: 16,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
-  fill: "currentColor"
-})));
-
-export { SvgCloseIcon as default };

package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
-  fill: "currentColor"
-})));
-
-export { SvgHamburgerIcon as default };