npm - @jetbrains/kotlin-web-site-ui - Versions diffs - 4.2.0-alpha.4 → 4.2.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/out/components/footer/index.css CHANGED Viewed

@@ -29,8 +29,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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);
 }
@@ -86,8 +85,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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);
 }
@@ -143,8 +141,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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/header/full-search/full-search.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
 import useScrollbarSize from 'react-scrollbar-size';
 import { ThemeProvider } from '@rescui/ui-contexts';
 import Input from '@rescui/input';
@@ -54,12 +53,6 @@ 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 CHANGED Viewed

@@ -1,6 +1,7 @@
 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';
@@ -14,8 +15,14 @@ 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';
-import useResizeObserver from '@react-hook/resize-observer';
-const BREAKPOINT_XS = 640;
+var SearchResultView;
+(function (SearchResultView) {
+  SearchResultView[SearchResultView["Narrow"] = 0] = "Narrow";
+  SearchResultView[SearchResultView["Wide"] = 1] = "Wide";
+})(SearchResultView || (SearchResultView = {}));
+const MENU_POPUP_BREAKPOINT = 640;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,
@@ -27,20 +34,21 @@ const Header = forwardRef(({
   linkHandler,
   isPlayground,
   isUrlActive,
-  searchConfig
+  searchConfig,
+  noScrollClassName,
+  resultViewType = SearchResultView.Narrow
 }, 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(() => {
-    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= BREAKPOINT_XS);
+    setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
-  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= BREAKPOINT_XS));
+  useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
   const handleSearchButtonClick = useCallback(() => {
     setSearchBoxVisible(!isSearchBoxVisible);
   }, []);
@@ -60,7 +68,7 @@ const Header = forwardRef(({
     }
   }, []);
   useEffect(() => {
-    if (typeof document !== `undefined`) {
+    if (typeof document !== `undefined` && resultViewType === SearchResultView.Narrow) {
       document.addEventListener('keydown', fullSearchKeyHandler);
       const focusManager = new FocusManager();
       return () => {
@@ -69,6 +77,15 @@ 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, {
@@ -77,7 +94,7 @@ const Header = forwardRef(({
     ref: headerRef,
     className: classNames(styles.headerMenu, className, {
       [styles.withMenuPopup]: menuPopupExpanded,
-      [styles.border]: hasBorder || menuPopupExpanded
+      [styles.border]: hasBorder
     }),
     "data-test": 'header'
   }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
@@ -91,12 +108,13 @@ const Header = forwardRef(({
     closeHandler: handleSearchClose,
     isMobile: isMenuPopupVisible,
     fullSearchActive: fullSearchActive,
-    setFullSearchActive: setFullSearchActive
+    setFullSearchActive: setFullSearchActive,
+    searchBoxViewType: resultViewType
   })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
-    items: itemsWithoutHomeSection,
+    items: items,
     theme: dropdownTheme,
     linkHandler: linkHandler
-  }), !menuPopupExpanded && React__default.createElement(SearchButton, {
+  }), React__default.createElement(SearchButton, {
     onClick: handleSearchButtonClick,
     isActive: hasSearch
   }), isMenuPopupVisible && React__default.createElement(MenuPopup, {
@@ -107,4 +125,4 @@ const Header = forwardRef(({
     linkHandler: linkHandler
   })))));
 });
-export { Header };
+export { Header, SearchResultView };

package/out/components/header/index.css CHANGED Viewed

@@ -38,8 +38,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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);
 }
@@ -61,7 +60,7 @@
 @media (max-width: 640px) {
   .ktl-header-module_header-menu_wh71L {
-    padding: 0 0 0 16px;
+    padding: 0 16px;
     height: var(--ktl-header-height-mobile);
   }
@@ -85,8 +84,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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);
 }
@@ -228,8 +226,7 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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);
 }
@@ -267,13 +264,12 @@
 @media (max-width: 640px) {
   .ktl-search-button-module_button_YHJPv {
     display: none;
+    margin: 0 16px 0 0;
   }
-}
-@media (min-width: 641px) {
-  .ktl-search-button-module_mobileButton_KT2YP {
-    display: none;
-  }
+    .ktl-search-button-module_button_YHJPv.ktl-search-button-module_active_lUmdh {
+      display: flex;
+    }
 }
 .ktl-result-module_result_EKhUw {
@@ -411,18 +407,39 @@
     transform: translateY(100%);
 }
 @media (min-width: 640px) and (max-width: 768px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
         bottom: 12px;
     }
 }
 @media (min-width: 768px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
         left: 0;
         right: 0;
     }
 }
+@media (min-width: 640px) and (max-width: 1024px) {
+    .ktl-quick-search-module_apiReferenceWrapper_jv98t {
+        width: calc(100vw - 64px);
+        left: auto;
+        right: 0;
+    }
+}
+@media (min-width: 1024px) {
+    .ktl-quick-search-module_apiReferenceWrapper_jv98t {
+        left: auto;
+        right: 0;
+        width: 1000px;
+    }
+}
 .ktl-loading-module_loader_B2IQl {
     margin-top: 4px;
 }
@@ -675,27 +692,64 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-mobile-dropdown-list-z-index: 907;
-  --ktl-header-height-mobile: 52px;
+  --ktl-header-height-mobile: 48px;
   --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-menu-popup-module_menu-popup_Q68IE {
-    display: none;
-    padding: 8px 0;
-    background: var(--ktl-dark-100);
-    position: fixed;
-    top: var(--ktl-header-height-mobile);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-    z-index: var(--ktl-top-menu-z-index);
+  display: none;
+  padding: 8px 0;
+  background: var(--ktl-dark-100);
+  position: fixed;
+  top: var(--ktl-header-height-mobile);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  z-index: var(--ktl-top-menu-z-index);
+}
+.ktl-menu-popup-module_menu-item_fPvF- {
+  --level: 0;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.75);
+  text-decoration: none;
+  padding: 8px 16px 8px calc(16px + (var(--level) * 24px));
+  transition: color var(--ktl-transition-xfast),
+    background-color var(--ktl-transition-xfast);
+}
+.ktl-menu-popup-module_menu-item_fPvF-:hover {
+    color: rgba(255, 255, 255, 1);
+    background: rgba(255, 255, 255, 0.1);
+    text-decoration: none;
+  }
+.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active_iqTAj {
+    color: var(--ktl-light-text-hard);
+    background: rgba(255, 255, 255, 1);
+    cursor: default;
+    text-decoration: none;
+  }
+.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active-with-child_tAzCG {
+    background: none;
+    color: rgba(255, 255, 255, 1);
+  }
+.ktl-menu-popup-module_menu-item-root_gA9d2 {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
 }
 .ktl-menu-popup-module_menu-popup-expanded_ggrp9 {
-    display: block;
+  display: block;
 }
 .ktl-menu-button-module_button_wB9Mx {
@@ -709,8 +763,8 @@
   background: none;
   padding: 0;
   margin: 0;
-  width: var(--ktl-header-height-mobile);
-  height: var(--ktl-header-height-mobile);
+  width: 24px;
+  height: 24px;
   align-items: center;
   justify-content: center;
   transition: color var(--ktl-transition-xfast),
@@ -723,97 +777,6 @@
     color: #ffffff;
   }
-:root {
-  --ktl-light-grey: #f4f4f4;
-  --ktl-dark-100: rgba(39, 40, 44, 1);
-  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
-  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
-  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
-  --ktl-transition-xfast: 100ms;
-  --ktl-transition-fast: 300ms;
-  --ktl-color-primary-light-theme: #7f52ff;
-  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
-  --ktl-light-text-hard: rgba(39, 40, 44, 1);
-  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
-  --ktl-overlay-z-index: 900;
-  --ktl-top-menu-z-index: 905;
-  --ktl-header-z-index: 906;
-  --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-menu-list-item-module_menu-item_Aruue {
-    --level: 0;
-    display: flex;
-    align-items: center;
-    font-size: 19px;
-    line-height: 28px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 0.75);
-    text-decoration: none;
-    padding: 12px 16px 12px 16px;
-    transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
-}
-.ktl-menu-list-item-module_menu-item_Aruue:hover {
-        color: rgba(255, 255, 255, 1);
-        background: rgba(255, 255, 255, 0.1);
-        text-decoration: none;
-    }
-.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active_jHfJR {
-        color: var(--ktl-light-text-hard);
-        background: rgba(255, 255, 255, 1);
-        cursor: default;
-        text-decoration: none;
-    }
-.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active-with-child_ier2a {
-        background: none;
-        color: rgba(255, 255, 255, 0.7);
-    }
-.ktl-menu-list-item-module_menu-item-root_Rzcqb:not(a) {
-        font-size: 13px;
-        text-transform: uppercase;
-        line-height: 20px;
-        color: rgba(255, 255, 255, 0.7);
-    }
-:root {
-  --ktl-light-grey: #f4f4f4;
-  --ktl-dark-100: rgba(39, 40, 44, 1);
-  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
-  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
-  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
-  --ktl-transition-xfast: 100ms;
-  --ktl-transition-fast: 300ms;
-  --ktl-color-primary-light-theme: #7f52ff;
-  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
-  --ktl-light-text-hard: rgba(39, 40, 44, 1);
-  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
-  --ktl-overlay-z-index: 900;
-  --ktl-top-menu-z-index: 905;
-  --ktl-header-z-index: 906;
-  --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-menu-list-module_menu-item-group_mFvUE {
-    margin: 8px 0;
-    padding: 8px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
-}
-.ktl-menu-list-module_menu-item-group_mFvUE:not(:last-child) {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
 .ktl-logo-small-module_logo-small_iGY12 {
   flex-grow: 1;
   display: flex;
@@ -824,7 +787,6 @@
 .ktl-logo-small-module_link_SKXAa {
   color: rgba(255, 255, 255, 1);
   text-decoration: none;
-  font-size: 16px;
 }
 .ktl-logo-small-module_icon-wrap_6hRnO {
@@ -833,7 +795,9 @@
   align-items: center;
   justify-items: center;
   height: 100%;
-  margin-right: 12px;
+  margin-right: 16px;
+  padding-right: 16px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
 }
 .ktl-logo-small-module_icon_NyEog {

package/out/components/header/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import './index.css';
 import { Header } from './header.js';
 export { Header as default } from './header.js';
-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 } from './nav-scheme.js';
+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 } from './nav-scheme.js';

package/out/components/header/logo-small/logo-small.js CHANGED Viewed

@@ -20,7 +20,7 @@ const LogoSmall = ({
     className: styles.icon
   })), React__default.createElement("a", {
     href: homeUrl,
-    className: classNames(styles.link, textCn('rs-h4'))
+    className: classNames(styles.link, textCn('rs-h3'))
   }, homeTitle));
 };

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

@@ -0,0 +1,35 @@
+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 ADDED Viewed

@@ -0,0 +1,35 @@
+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 };

package/out/components/header/menu-popup/menu-button/menu-button.js CHANGED Viewed

@@ -1,23 +1,20 @@
 import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
-import Button from '@rescui/button';
-import { CloseIcon, HamburgerIcon } from '@rescui/icons';
+import SvgHamburgerIcon from './hamburger-icon.svg.js';
+import SvgCloseIcon from './close-icon.svg.js';
 const MenuButton = ({
   onClick,
   isExpanded
 }) => {
-  return React__default.createElement(Button, {
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button),
     "aria-haspopup": "true",
     "aria-label": "Open the navigation",
-    onClick: onClick,
-    size: 'l',
-    mode: 'clear',
-    icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
-  });
+    onClick: onClick
+  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
 };
 export { MenuButton };

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

@@ -1,11 +1,51 @@
-import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } 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,

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

@@ -1,5 +1,9 @@
 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 CHANGED Viewed

@@ -1,6 +1,4 @@
 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/`;
@@ -34,9 +32,6 @@ 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: [{
@@ -85,9 +80,8 @@ const navScheme = [{
   }]
 }];
-function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
-  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
-  return controlledNavScheme.map(({
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
+  return navScheme.map(({
     title,
     url,
     items
@@ -138,4 +132,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, 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 };
+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 };