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

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

@@ -25,7 +25,8 @@ const FullSearch = ({
   return React__default.createElement(ThemeProvider, {
     theme: 'light'
   }, React__default.createElement("div", {
-    className: styles.fullSearch
+    className: styles.fullSearch,
+    tabIndex: 1000
   }, React__default.createElement("div", {
     className: styles.header
   }, React__default.createElement("div", {

package/out/components/header/full-search/loading/loading.js

@@ -5,7 +5,9 @@ import styles from './loading.module.pcss.js';
 const FullSearchLoader = () => {
   return React__default.createElement("div", {
     className: styles.loader
-  }, React__default.createElement(LoadingIcon, null));
+  }, React__default.createElement(LoadingIcon, {
+    size: 'l'
+  }));
 };
 
 export { FullSearchLoader };

package/out/components/header/header.js

@@ -27,7 +27,8 @@ const Header = forwardRef(({
   linkHandler,
   isPlayground,
   isUrlActive,
-  searchConfig
+  searchConfig,
+  noScrollClassName
 }, forwardedRef) => {
   const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
   const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
@@ -68,6 +69,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, {

package/out/components/header/index.css

@@ -407,7 +407,7 @@
     transform: translateY(100%);
 }
 
-@media (min-width: 880px) and (max-width: 1008px) {
+@media (min-width: 640px) and (max-width: 768px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
         bottom: 12px;
     }
@@ -428,7 +428,7 @@
     top: 0;
     left: 0;
     background: #ffffff;
-    overflow: scroll;
+    overflow-y: auto;
 }
 
 .ktl-full-search-module_closeSearch_5vYDG {
@@ -446,7 +446,7 @@
 .ktl-full-search-module_header_Wltw0 {
     width: 100%;
     padding-top: 120px;
-    padding-bottom: 14px;
+    padding-bottom: 10px;
     position: sticky;
     top: 0;
     left: 0;
@@ -463,12 +463,15 @@
         display: block;
     }
 }
-.ktl-loading-module_loader_B2IQl > svg {
+.ktl-loading-module_loader_B2IQl {
+    margin-top: 4px;
+}
+    .ktl-loading-module_loader_B2IQl > svg {
         fill: #6B57FF;
     }
 .ktl-empty-module_wrapper_cNB8Y {
     display: block;
-    margin-top: 26px;
+    margin-top: 30px;
 }
 
 .ktl-empty-module_title_p2FMj {
@@ -531,6 +534,7 @@
 .ktl-hit-list-module_switcher_bt6Xx {
     display: flex;
     justify-content: flex-end;
+    margin-top: 4px;
 }
 
 .ktl-hit-list-module_hitList_1MP6m {
@@ -547,6 +551,32 @@
     width: 408px;
 }
 
+.ktl-search-box-module_searchInput_ba2QS {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e {
+    margin: 0;
+    padding: 0 8px;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e > svg {
+        fill: #ffffff;
+    }
+
 @media (max-width: 767px) {
     .ktl-search-box-module_searchBox_0SgE9 {
         background: var(--ktl-dark-100);
@@ -560,6 +590,12 @@
     }
 }
 
+@media (min-width: 768px) {
+    .ktl-search-box-module_searchMobileClose_fBF7e {
+        display: none;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

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

@@ -42,6 +42,8 @@ const SearchBox = ({
   }, [escHandler]);
   return React__default.createElement("div", {
     className: styles.searchBox
+  }, React__default.createElement("div", {
+    className: styles.searchInput
   }, React__default.createElement(Input, {
     iconType: 'left',
     value: searchInput,
@@ -50,7 +52,10 @@ const SearchBox = ({
     icon: React__default.createElement(SearchIcon, null),
     clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement(ErrorIcon, null),
     autoFocus: true
-  }), searchInput && React__default.createElement(QuickSearch, {
+  }), isMobile && React__default.createElement("button", {
+    className: styles.searchMobileClose,
+    onClick: closeHandler
+  }, React__default.createElement(CloseIcon, null))), searchInput && React__default.createElement(QuickSearch, {
     results: hits,
     searchString: searchInput,
     toggleFullSearch: toggleFullSearch,

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

@@ -1,4 +1,6 @@
 var styles = {
-  "searchBox": "ktl-search-box-module_searchBox_0SgE9"
+  "searchBox": "ktl-search-box-module_searchBox_0SgE9",
+  "searchInput": "ktl-search-box-module_searchInput_ba2QS",
+  "searchMobileClose": "ktl-search-box-module_searchMobileClose_fBF7e"
 };
 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.1.0-alpha.4",
+  "version": "4.1.0-alpha.7",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [