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

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

@@ -32,7 +32,10 @@ const Chapters = ({
   }, React__default.createElement("h4", {
     className: classNames(textCn('rs-h4'), styles.headliner)
   }, React__default.createElement("a", {
-    className: classNames(styles.chapterTitle, textCn('rs-link')),
+    className: classNames(styles.chapterTitle, textCn('rs-link', {
+      mode: 'clear',
+      hardness: 'hard'
+    })),
     href: url,
     id: chapterId,
     dangerouslySetInnerHTML: {

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,17 +16,9 @@ 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]);
@@ -37,11 +28,13 @@ const FullSearch = ({
     className: styles.fullSearch
   }, 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 +45,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 getExtendedHits from '../result/get-extended-hits.js';
+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 = [],
@@ -24,7 +41,10 @@ const HitList = ({
     }, React__default.createElement("h3", {
       className: textCn('rs-h3')
     }, React__default.createElement("a", {
-      className: classNames(styles.titleLink, textCn('rs-link')),
+      className: classNames(styles.titleLink, textCn('rs-link', {
+        mode: 'clear',
+        hardness: 'hard'
+      })),
       href: url,
       dangerouslySetInnerHTML: {
         __html: title

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

@@ -1,5 +1,6 @@
 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';
@@ -60,8 +61,10 @@ const Header = forwardRef(({
   useEffect(() => {
     if (typeof document !== `undefined`) {
       document.addEventListener('keydown', fullSearchKeyHandler);
+      const focusManager = new FocusManager();
       return () => {
         document.removeEventListener('keydown', fullSearchKeyHandler);
+        focusManager.destroy();
       };
     }
   }, [fullSearchKeyHandler]);

package/out/components/header/index.css

@@ -275,11 +275,12 @@
 .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 {
         background: rgba(255, 255, 255, 0.1);
+        text-decoration: none;
     }
     .ktl-result-module_result_EKhUw:focus {
         outline: none;
@@ -292,6 +293,7 @@
 
 .ktl-result-module_resultTitle_DSpAT {
     margin-bottom: 6px;
+    overflow-wrap: break-word;
 }
 
 .ktl-result-module_text_fWBKG {
@@ -300,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;
@@ -321,6 +329,7 @@
     border-radius: 24px;
     cursor: pointer;
     flex-shrink: 0;
+    transform: translateY(-6px);
 }
 
 .ktl-list-module_advancedSearch_XNy88:hover {
@@ -332,22 +341,49 @@
         box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
     }
 
+.ktl-list-module_searchString_rJnxa {
+    height: 40px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
 @media (min-width: 768px) {
     .ktl-list-module_results_LlxqY {
         max-height: 434px;
     }
+
     .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;
@@ -371,6 +407,12 @@
     transform: translateY(100%);
 }
 
+@media (min-width: 880px) and (max-width: 1008px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        bottom: 12px;
+    }
+}
+
 @media (min-width: 768px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
         left: 0;
@@ -390,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 {
@@ -408,7 +446,7 @@
 .ktl-full-search-module_header_Wltw0 {
     width: 100%;
     padding-top: 120px;
-    padding-bottom: 24px;
+    padding-bottom: 14px;
     position: sticky;
     top: 0;
     left: 0;
@@ -416,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;
 }
@@ -431,14 +463,12 @@
         display: block;
     }
 }
-.ktl-loading-module_loader_B2IQl {
-    margin: 24px 0;
-}
-    .ktl-loading-module_loader_B2IQl > svg {
+.ktl-loading-module_loader_B2IQl > svg {
         fill: #6B57FF;
     }
 .ktl-empty-module_wrapper_cNB8Y {
     display: block;
+    margin-top: 26px;
 }
 
 .ktl-empty-module_title_p2FMj {
@@ -457,9 +487,13 @@
 }
 
 .ktl-chapters-module_chapterTitle_b6Rdz {
-    border-bottom-color: transparent;
+    //border-bottom-color: transparent;
 }
 
+.ktl-chapters-module_chapterTitle_b6Rdz:hover {
+        //border-bottom-color: #19191C;
+    }
+
 .ktl-chapters-module_chapterTitle_b6Rdz em {
         background: rgba(127, 82, 255, 0.2);
         font-style: normal;
@@ -494,12 +528,13 @@
 .ktl-chapters-module_moreButton_98oqy {
     margin-top: 12px;
 }
-.ktl-hit-list-module_hitList_1MP6m {
-    margin: 24px 0;
+.ktl-hit-list-module_switcher_bt6Xx {
+    display: flex;
+    justify-content: flex-end;
 }
 
-.ktl-hit-list-module_titleLink_rdJ6u {
-    border-bottom-color: transparent;
+.ktl-hit-list-module_hitList_1MP6m {
+    margin: 50px 0;
 }
 
 .ktl-hit-list-module_titleLink_rdJ6u em {

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,6 +1,7 @@
-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';
 import { isMacOs } from '../../is-macos.js';
 import styles from './list.module.pcss.js';
 
@@ -10,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: textCn('rs-text-3')
+    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

@@ -1,6 +1,7 @@
 var styles = {
   "results": "ktl-list-module_results_LlxqY",
   "topBar": "ktl-list-module_topBar_OO0XT",
-  "advancedSearch": "ktl-list-module_advancedSearch_XNy88"
+  "advancedSearch": "ktl-list-module_advancedSearch_XNy88",
+  "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,9 @@ 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(Input, {
-    placeholder: QuickSearchPlaceholder,
     iconType: 'left',
     value: searchInput,
     onChange: handleInput,

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.1",
+  "version": "4.1.0-alpha.4",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -29,11 +29,12 @@
     "@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",
     "react-dom": ">= 16.8.6 < 18",
-    "react-outside-click-handler": "^1.3.0",
+    "react-outside-click-handler": "1.x",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -47,8 +48,9 @@
     "@react-hook/resize-observer": "^1.2.5",
     "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
-    "@rescui/icons": "^0.2.0",
-    "@rescui/input": "^0.1.2",
+    "@rescui/focus-manager": "^0.1.1",
+    "@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",