@jetbrains/kotlin-web-site-ui 4.1.0-alpha.3 → 4.1.0-alpha.6

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

@@ -1,12 +1,11 @@
-import React__default, { useState, useContext, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { ThemeProvider } from '@rescui/ui-contexts';
 import Input from '@rescui/input';
-import Switcher from '@rescui/switcher';
+import Button from '@rescui/button';
 import { CloseIcon, ErrorIcon } from '@rescui/icons';
 import styles from './full-search.module.pcss.js';
 import { useSearch } from '../search-wrapper/use-search.js';
 import { ResultsList } from './results-list/results-list.js';
-import SearchContext from '../search-wrapper/search-context.js';
 
 const FullSearch = ({
   searchString,
@@ -17,31 +16,26 @@ const FullSearch = ({
     hits,
     placeholder
   } = useSearch(inputValue, 75);
-  const {
-    matching,
-    matchingOptions,
-    setMatching
-  } = useContext(SearchContext);
   const clearSearch = useCallback(() => {
     setInputValue('');
   }, []);
-  const handleSwitcherChange = useCallback(value => {
-    setMatching(value);
-  }, []);
   const handleInputChange = useCallback(e => {
     setInputValue(e.target.value);
   }, [inputValue]);
   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("button", {
-    className: styles.closeSearch,
+  }, React__default.createElement("div", {
+    className: styles.closeSearch
+  }, React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
     onClick: killSearch
-  }, React__default.createElement(CloseIcon, {
-    size: 'l'
   })), React__default.createElement("div", {
     className: styles.wrapper
   }, React__default.createElement(Input, {
@@ -52,14 +46,7 @@ const FullSearch = ({
     clearIcon: React__default.createElement(ErrorIcon, null),
     size: 'l',
     autoFocus: true
-  }), React__default.createElement("div", {
-    className: styles.switcher
-  }, React__default.createElement(Switcher, {
-    value: matching,
-    onChange: handleSwitcherChange,
-    options: matchingOptions,
-    size: 'xs'
-  })))), React__default.createElement("div", {
+  }))), React__default.createElement("div", {
     className: styles.wrapper
   }, inputValue && React__default.createElement(ResultsList, {
     placeholder: placeholder,

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

@@ -3,7 +3,6 @@ var styles = {
   "closeSearch": "ktl-full-search-module_closeSearch_5vYDG",
   "wrapper": "ktl-full-search-module_wrapper_9rxXb",
   "header": "ktl-full-search-module_header_Wltw0",
-  "switcher": "ktl-full-search-module_switcher_o1RgM",
   "results": "ktl-full-search-module_results_svcSE"
 };
 export { styles as default };

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

@@ -1,8 +1,10 @@
-import React__default from 'react';
+import React__default, { useContext, useCallback } from 'react';
+import classNames from 'classnames';
 import { useTextStyles } from '@rescui/typography';
+import Switcher from '@rescui/switcher';
+import SearchContext from '../../search-wrapper/search-context.js';
 import getExtendedHits from './get-extended-hits.js';
 import { Chapters } from '../chapters/chapters.js';
-import classNames from 'classnames';
 import styles from './hit-list.module.pcss.js';
 
 const HitList = ({
@@ -10,7 +12,22 @@ const HitList = ({
 }) => {
   const textCn = useTextStyles();
   const extendedHits = getExtendedHits(hits);
-  return React__default.createElement(React__default.Fragment, null, extendedHits.map(({
+  const {
+    matching,
+    matchingOptions,
+    setMatching
+  } = useContext(SearchContext);
+  const handleSwitcherChange = useCallback(value => {
+    setMatching(value);
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.switcher
+  }, React__default.createElement(Switcher, {
+    value: matching,
+    onChange: handleSwitcherChange,
+    options: matchingOptions,
+    size: 'xs'
+  })), extendedHits.map(({
     title,
     snippet,
     chapters = [],

package/out/components/header/full-search/hit-list/hit-list.module.pcss.js

@@ -1,4 +1,5 @@
 var styles = {
+  "switcher": "ktl-hit-list-module_switcher_bt6Xx",
   "hitList": "ktl-hit-list-module_hitList_1MP6m",
   "titleLink": "ktl-hit-list-module_titleLink_rdJ6u"
 };

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

@@ -275,7 +275,7 @@
 .ktl-result-module_result_EKhUw {
     box-sizing: border-box;
     display: block;
-    padding: 16px 32px;
+    padding: 16px;
     text-decoration: none;
 }
     .ktl-result-module_result_EKhUw:hover {
@@ -293,6 +293,7 @@
 
 .ktl-result-module_resultTitle_DSpAT {
     margin-bottom: 6px;
+    overflow-wrap: break-word;
 }
 
 .ktl-result-module_text_fWBKG {
@@ -301,6 +302,12 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+@media (min-width: 768px) {
+    .ktl-result-module_result_EKhUw {
+        padding: 16px 32px;
+    }
+}
 .ktl-list-module_results_LlxqY {
     box-sizing: border-box;
     max-height: 305px;
@@ -322,6 +329,7 @@
     border-radius: 24px;
     cursor: pointer;
     flex-shrink: 0;
+    transform: translateY(-6px);
 }
 
 .ktl-list-module_advancedSearch_XNy88:hover {
@@ -333,8 +341,12 @@
         box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
     }
 
-.ktl-list-module_advancedSearchTitle_sHR3T {
-    color: #ffffff;
+.ktl-list-module_searchString_rJnxa {
+    height: 40px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
 @media (min-width: 768px) {
@@ -344,16 +356,34 @@
 
     .ktl-list-module_topBar_OO0XT {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        padding: 34px 32px 14px 32px;
+        padding: 34px 32px 4px 32px;
     }
 }
 .ktl-empty-module_empty_xh1i- {
     box-sizing: border-box;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: #323236;
-    padding: 32px;
+    padding: 16px;
+}
+
+.ktl-empty-module_resultString_-8dzl {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+    .ktl-empty-module_empty_xh1i- {
+        padding: 32px;
+    }
+
+    .ktl-empty-module_resultString_-8dzl {
+        -webkit-line-clamp: 2;
+    }
 }
 .ktl-loading-module_loading_CtOhW {
     box-sizing: border-box;
@@ -377,6 +407,12 @@
     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;
@@ -396,14 +432,10 @@
 }
 
 .ktl-full-search-module_closeSearch_5vYDG {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: none;
-    cursor: pointer;
     position: absolute;
     top: 40px;
     right: 40px;
+    display: flex;
 }
 
 .ktl-full-search-module_wrapper_9rxXb {
@@ -414,7 +446,7 @@
 .ktl-full-search-module_header_Wltw0 {
     width: 100%;
     padding-top: 120px;
-    padding-bottom: 24px;
+    padding-bottom: 10px;
     position: sticky;
     top: 0;
     left: 0;
@@ -422,12 +454,6 @@
     z-index: 10;
 }
 
-.ktl-full-search-module_switcher_o1RgM {
-    margin-top: 14px;
-    display: flex;
-    justify-content: flex-end;
-}
-
 .ktl-full-search-module_results_svcSE {
     margin-top: 14px;
 }
@@ -438,13 +464,14 @@
     }
 }
 .ktl-loading-module_loader_B2IQl {
-    margin: 24px 0;
+    margin-top: 4px;
 }
     .ktl-loading-module_loader_B2IQl > svg {
         fill: #6B57FF;
     }
 .ktl-empty-module_wrapper_cNB8Y {
     display: block;
+    margin-top: 30px;
 }
 
 .ktl-empty-module_title_p2FMj {
@@ -504,8 +531,14 @@
 .ktl-chapters-module_moreButton_98oqy {
     margin-top: 12px;
 }
+.ktl-hit-list-module_switcher_bt6Xx {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 4px;
+}
+
 .ktl-hit-list-module_hitList_1MP6m {
-    margin: 24px 0;
+    margin: 50px 0;
 }
 
 .ktl-hit-list-module_titleLink_rdJ6u em {
@@ -518,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);
@@ -531,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/quick-search/empty/empty.js

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
 import styles from './empty.module.pcss.js';
 
 const EmptyResult = ({
@@ -9,7 +10,7 @@ const EmptyResult = ({
   return React__default.createElement("div", {
     className: styles.empty
   }, React__default.createElement("div", {
-    className: textCn('rs-h4')
+    className: classNames(textCn('rs-h4'), styles.resultString)
   }, placeholder));
 };
 

package/out/components/header/quick-search/empty/empty.module.pcss.js

@@ -1,4 +1,5 @@
 var styles = {
-  "empty": "ktl-empty-module_empty_xh1i-"
+  "empty": "ktl-empty-module_empty_xh1i-",
+  "resultString": "ktl-empty-module_resultString_-8dzl"
 };
 export { styles as default };

package/out/components/header/quick-search/list/list.js

@@ -1,4 +1,4 @@
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
 import { Result } from '../result/result.js';
 import { useTextStyles } from '@rescui/typography';
 import classNames from 'classnames';
@@ -11,18 +11,19 @@ const ResultsList = ({
   toggleFullSearch
 }) => {
   const textCn = useTextStyles();
-  const controlledSearchString = useMemo(() => searchString.length > 5 ? `${searchString.substring(0, 5)}...` : searchString, [searchString]);
   return React__default.createElement("div", {
     className: styles.results
   }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.topBar
   }, React__default.createElement("div", {
-    className: textCn('rs-text-3')
-  }, "Showing results for \u00AB", controlledSearchString, "\u00BB"), React__default.createElement("button", {
+    className: classNames(textCn('rs-text-3'), styles.searchString)
+  }, "Showing results for \u00AB", searchString, "\u00BB"), React__default.createElement("button", {
     className: styles.advancedSearch,
     onClick: toggleFullSearch
   }, React__default.createElement("div", {
-    className: classNames(textCn('rs-text-3'), styles.advancedSearchTitle)
+    className: classNames(textCn('rs-text-3', {
+      hardness: 'hard'
+    }))
   }, "Advanced search ", isMacOs() ? '⌘K' : 'Ctrl+K'))), results.map((searchResult, index) => React__default.createElement(Result, {
     key: index,
     hit: searchResult

package/out/components/header/quick-search/list/list.module.pcss.js

@@ -2,6 +2,6 @@ var styles = {
   "results": "ktl-list-module_results_LlxqY",
   "topBar": "ktl-list-module_topBar_OO0XT",
   "advancedSearch": "ktl-list-module_advancedSearch_XNy88",
-  "advancedSearchTitle": "ktl-list-module_advancedSearchTitle_sHR3T"
+  "searchString": "ktl-list-module_searchString_rJnxa"
 };
 export { styles as default };

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

@@ -5,7 +5,6 @@ import { QuickSearch } from '../quick-search/quick-search.js';
 import { FullSearch } from '../full-search/full-search.js';
 import styles from './search-box.module.pcss.js';
 import { useSearch } from '../search-wrapper/use-search.js';
-import { isMacOs } from '../is-macos.js';
 import { ESC_CODE } from '../key-codes.js';
 
 const SearchBox = ({
@@ -41,11 +40,11 @@ const SearchBox = ({
       };
     }
   }, [escHandler]);
-  const QuickSearchPlaceholder = isMobile ? 'Search' : `${isMacOs() ? '⌘K' : 'Ctrl+K'} for advanced search`;
   return React__default.createElement("div", {
     className: styles.searchBox
+  }, React__default.createElement("div", {
+    className: styles.searchInput
   }, React__default.createElement(Input, {
-    placeholder: QuickSearchPlaceholder,
     iconType: 'left',
     value: searchInput,
     onChange: handleInput,
@@ -53,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.3",
+  "version": "4.1.0-alpha.6",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -49,8 +49,8 @@
     "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
-    "@rescui/icons": "^0.2.0",
-    "@rescui/input": "^0.1.2",
+    "@rescui/icons": "^0.8.2",
+    "@rescui/input": "^0.4.6",
     "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
     "@rescui/typography": "^0.7.3",