@jetbrains/kotlin-web-site-ui 4.1.0-alpha.5 → 4.1.0-alpha.8

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

@@ -407,7 +407,7 @@
     transform: translateY(100%);
 }
 
-@media (min-width: 640px) and (max-width: 704px) {
+@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: scroll;
 }
 
 .ktl-full-search-module_closeSearch_5vYDG {
@@ -463,6 +463,7 @@
         display: block;
     }
 }
+
 .ktl-loading-module_loader_B2IQl {
     margin-top: 4px;
 }
@@ -551,6 +552,60 @@
     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;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+}
+
+.ktl-search-box-module_customClearButton_yecGK > svg {
+        fill: #ffffff;
+        opacity: 0.7;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-search-box-module_customClearButton_yecGK:focus {
+        outline: none;
+        box-shadow: rgb(107 87 255 / 80%) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:focus > svg {
+            opacity: 1;
+        }
+
 @media (max-width: 767px) {
     .ktl-search-box-module_searchBox_0SgE9 {
         background: var(--ktl-dark-100);
@@ -564,6 +619,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,15 +42,22 @@ 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,
     onChange: handleInput,
     onClear: isMobile ? closeHandler : handleClear,
     icon: React__default.createElement(SearchIcon, null),
-    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement(ErrorIcon, null),
+    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement("button", {
+      className: styles.customClearButton
+    }, 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,7 @@
 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",
+  "customClearButton": "ktl-search-box-module_customClearButton_yecGK"
 };
 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.5",
+  "version": "4.1.0-alpha.8",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -24,12 +24,12 @@
   },
   "peerDependencies": {
     "@rescui/checkbox": "0.x",
+    "@rescui/focus-manager": "0.x",
     "@rescui/icons": "0.x",
     "@rescui/input": "0.x",
     "@rescui/tooltip": "0.x",
     "@rescui/typography": "0.x",
     "@rescui/ui-contexts": "0.x",
-    "@rescui/focus-manager": "0.x",
     "algoliasearch": "4.x",
     "formik": "2.x",
     "react": ">= 16.8.6 < 18",