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

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

@@ -1,34 +1,70 @@
-import React__default, { useState, useCallback } from 'react';
+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';
 import Button from '@rescui/button';
+import Switcher from '@rescui/switcher';
 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';
+import styles from './full-search.module.pcss.js';
 
 const FullSearch = ({
   searchString,
   killSearch
 }) => {
+  const [isScrollbarCompensated, setIsScrollbarCompensated] = useState(false);
   const [inputValue, setInputValue] = useState(searchString);
   const {
     hits,
     placeholder
   } = useSearch(inputValue, 75);
+  const {
+    matching,
+    matchingOptions,
+    setMatching
+  } = useContext(SearchContext);
+  const ref = useRef(null);
+  const headerRef = useRef(null);
+  const listRef = useRef(null);
+  const isResultsVisible = hits.length > 0 && inputValue;
+  const handleSwitcherChange = useCallback(value => {
+    setMatching(value);
+  }, []);
   const clearSearch = useCallback(() => {
     setInputValue('');
   }, []);
   const handleInputChange = useCallback(e => {
     setInputValue(e.target.value);
-  }, [inputValue]);
+  }, [inputValue]); // Scrollbar compensation
+
+  const {
+    width
+  } = useScrollbarSize();
+  useLayoutEffect(() => {
+    if (headerRef.current && listRef.current) {
+      const countedHeight = headerRef.current.offsetHeight + listRef.current.offsetHeight;
+
+      if (isResultsVisible) {
+        setIsScrollbarCompensated(countedHeight < window.innerWidth);
+      } else {
+        setIsScrollbarCompensated(true);
+      }
+    }
+  }, [hits, inputValue]);
   return React__default.createElement(ThemeProvider, {
     theme: 'light'
   }, React__default.createElement("div", {
     className: styles.fullSearch,
-    tabIndex: 1000
+    style: {
+      paddingRight: isScrollbarCompensated ? `${width}px` : 0
+    },
+    tabIndex: 1000,
+    ref: ref
   }, React__default.createElement("div", {
-    className: styles.header
+    className: styles.header,
+    ref: headerRef
   }, React__default.createElement("div", {
     className: styles.closeSearch
   }, React__default.createElement(Button, {
@@ -41,13 +77,25 @@ const FullSearch = ({
   }, React__default.createElement(Input, {
     placeholder: 'Search',
     value: inputValue,
-    onClear: clearSearch,
     onChange: handleInputChange,
-    clearIcon: React__default.createElement(ErrorIcon, null),
+    onClear: clearSearch,
+    clearIcon: React__default.createElement("button", {
+      className: styles.fullSearchClearButton
+    }, React__default.createElement(ErrorIcon, {
+      size: 'l'
+    })),
     size: 'l',
     autoFocus: true
-  }))), React__default.createElement("div", {
-    className: styles.wrapper
+  }), isResultsVisible && React__default.createElement("div", {
+    className: styles.switcher
+  }, React__default.createElement(Switcher, {
+    value: matching,
+    onChange: handleSwitcherChange,
+    options: matchingOptions,
+    size: 'xs'
+  })))), React__default.createElement("div", {
+    className: styles.wrapper,
+    ref: listRef
   }, inputValue && React__default.createElement(ResultsList, {
     placeholder: placeholder,
     hits: hits

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

@@ -1,8 +1,10 @@
 var styles = {
   "fullSearch": "ktl-full-search-module_fullSearch_MTU8t",
   "closeSearch": "ktl-full-search-module_closeSearch_5vYDG",
+  "fullSearchClearButton": "ktl-full-search-module_fullSearchClearButton_DGS6T",
   "wrapper": "ktl-full-search-module_wrapper_9rxXb",
   "header": "ktl-full-search-module_header_Wltw0",
-  "results": "ktl-full-search-module_results_svcSE"
+  "results": "ktl-full-search-module_results_svcSE",
+  "switcher": "ktl-full-search-module_switcher_o1RgM"
 };
 export { styles as default };

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

@@ -1,8 +1,6 @@
-import React__default, { useContext, useCallback } from 'react';
+import React__default 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 styles from './hit-list.module.pcss.js';
@@ -12,22 +10,7 @@ const HitList = ({
 }) => {
   const textCn = useTextStyles();
   const extendedHits = getExtendedHits(hits);
-  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(({
+  return React__default.createElement(React__default.Fragment, null, extendedHits.map(({
     title,
     snippet,
     chapters = [],

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

@@ -1,5 +1,4 @@
 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/index.css

@@ -419,50 +419,6 @@
         right: 0;
     }
 }
-.ktl-full-search-module_fullSearch_MTU8t {
-    display: none;
-    box-sizing: border-box;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background: #ffffff;
-    overflow-y: auto;
-}
-
-.ktl-full-search-module_closeSearch_5vYDG {
-    position: absolute;
-    top: 40px;
-    right: 40px;
-    display: flex;
-}
-
-.ktl-full-search-module_wrapper_9rxXb {
-    max-width: 704px;
-    margin: 0 auto;
-}
-
-.ktl-full-search-module_header_Wltw0 {
-    width: 100%;
-    padding-top: 120px;
-    padding-bottom: 10px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    background: #ffffff;
-    z-index: 10;
-}
-
-.ktl-full-search-module_results_svcSE {
-    margin-top: 14px;
-}
-
-@media (min-width: 768px) {
-    .ktl-full-search-module_fullSearch_MTU8t {
-        display: block;
-    }
-}
 .ktl-loading-module_loader_B2IQl {
     margin-top: 4px;
 }
@@ -531,14 +487,8 @@
 .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: 50px 0;
+    margin: 40px 0 50px 0;
 }
 
 .ktl-hit-list-module_titleLink_rdJ6u em {
@@ -546,6 +496,85 @@
         font-style: normal;
     }
 
+.ktl-full-search-module_fullSearch_MTU8t {
+    display: none;
+    box-sizing: border-box;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    overflow-y: auto;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    display: flex;
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T > svg {
+        opacity: 0.7;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus > svg {
+            opacity: 1;
+        }
+
+.ktl-full-search-module_wrapper_9rxXb {
+    max-width: 704px;
+    margin: 0 auto;
+}
+
+.ktl-full-search-module_header_Wltw0 {
+    width: 100%;
+    padding-top: 120px;
+    padding-bottom: 10px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+
 .ktl-search-box-module_searchBox_0SgE9 {
     position: relative;
     width: 408px;
@@ -577,6 +606,34 @@
         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: rgba(107, 87, 255, 0.8) 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);

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

@@ -50,7 +50,9 @@ const SearchBox = ({
     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
   }), isMobile && React__default.createElement("button", {
     className: styles.searchMobileClose,

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

@@ -1,6 +1,7 @@
 var styles = {
   "searchBox": "ktl-search-box-module_searchBox_0SgE9",
   "searchInput": "ktl-search-box-module_searchInput_ba2QS",
-  "searchMobileClose": "ktl-search-box-module_searchMobileClose_fBF7e"
+  "searchMobileClose": "ktl-search-box-module_searchMobileClose_fBF7e",
+  "customClearButton": "ktl-search-box-module_customClearButton_yecGK"
 };
 export { styles as default };

package/out/components/top-menu/dropdown-menu/dropdown-menu.js

@@ -44,7 +44,9 @@ const DropdownMenu = ({
   }, React__default.createElement("button", {
     className: classNames(styles.button, textCn('rs-text-2')),
     "aria-haspopup": "true"
-  }, React__default.createElement("span", null, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+  }, React__default.createElement("span", {
+    className: styles.buttonText
+  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
     className: styles.icon
   })), React__default.createElement("nav", {
     className: classNames(styles.dropdownList, {

package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js

@@ -1,6 +1,7 @@
 var styles = {
   "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
   "button": "ktl-dropdown-menu-module_button_OYsuv",
+  "buttonText": "ktl-dropdown-menu-module_button-text_SJmh-",
   "icon": "ktl-dropdown-menu-module_icon_GGhMI",
   "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
   "fadein": "ktl-dropdown-menu-module_fadein_MySnq",

package/out/components/top-menu/index.css

@@ -51,6 +51,7 @@
     height: 48px;
     padding: 0 16px;
     grid-gap: 16px;
+    grid-template-columns: 1fr auto;
   }
 
   .ktl-top-menu-module_logo_CNH2W {
@@ -105,12 +106,15 @@
   height: 100%;
   justify-self: flex-start;
   white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .ktl-dropdown-menu-module_button_OYsuv {
   border: none;
   background: none;
   height: 100%;
+  max-width: 100%;
   padding: 0;
   margin: 0;
   display: flex;
@@ -119,11 +123,18 @@
   cursor: pointer;
 }
 
+.ktl-dropdown-menu-module_button-text_SJmh- {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 0 1 auto;
+}
+
 .ktl-dropdown-menu-module_icon_GGhMI {
   width: 12px;
   height: 6px;
   margin-left: 6px;
   transition: transform ease-in-out var(--ktl-transition-xfast);
+  flex: 0 0 auto;
 }
 
 .ktl-dropdown-menu-module_dropdown-list_Ylkvt {

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.7",
+  "version": "4.1.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -24,17 +24,18 @@
   },
   "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",
     "react-dom": ">= 16.8.6 < 18",
     "react-outside-click-handler": "1.x",
+    "react-scrollbar-size": "5.x",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -112,6 +113,7 @@
     "react-modal": "^3.14.4",
     "react-outside-click-handler": "^1.3.0",
     "react-remove-scroll-bar": "^2.2.0",
+    "react-scrollbar-size": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",