@jetbrains/kotlin-web-site-ui 4.2.0-alpha.4 → 4.3.0-alpha.0

package/out/components/header/header.js

@@ -1,6 +1,7 @@
 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';
 import styles from './header.module.pcss.js';
@@ -14,8 +15,14 @@ import classNames from 'classnames';
 import { SearchWrapper } from './search-wrapper/search-wrapper.js';
 import { isMacOs } from './is-macos.js';
 import { KEY_K_CODE } from './key-codes.js';
-import useResizeObserver from '@react-hook/resize-observer';
-const BREAKPOINT_XS = 640;
+var SearchResultView;
+
+(function (SearchResultView) {
+  SearchResultView[SearchResultView["Narrow"] = 0] = "Narrow";
+  SearchResultView[SearchResultView["Wide"] = 1] = "Wide";
+})(SearchResultView || (SearchResultView = {}));
+
+const MENU_POPUP_BREAKPOINT = 640;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,
@@ -27,7 +34,8 @@ const Header = forwardRef(({
   linkHandler,
   isPlayground,
   isUrlActive,
-  searchConfig
+  searchConfig,
+  resultViewType = SearchResultView.Narrow
 }, forwardedRef) => {
   const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
   const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
@@ -38,9 +46,9 @@ const Header = forwardRef(({
   useImperativeHandle(forwardedRef, () => headerRef.current);
   const [isMenuPopupVisible, setMenuPopupVisible] = useState(false);
   useLayoutEffect(() => {
-    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= BREAKPOINT_XS);
+    setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
-  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= BREAKPOINT_XS));
+  useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
   const handleSearchButtonClick = useCallback(() => {
     setSearchBoxVisible(!isSearchBoxVisible);
   }, []);
@@ -60,7 +68,7 @@ const Header = forwardRef(({
     }
   }, []);
   useEffect(() => {
-    if (typeof document !== `undefined`) {
+    if (typeof document !== `undefined` && resultViewType === SearchResultView.Narrow) {
       document.addEventListener('keydown', fullSearchKeyHandler);
       const focusManager = new FocusManager();
       return () => {
@@ -91,7 +99,8 @@ const Header = forwardRef(({
     closeHandler: handleSearchClose,
     isMobile: isMenuPopupVisible,
     fullSearchActive: fullSearchActive,
-    setFullSearchActive: setFullSearchActive
+    setFullSearchActive: setFullSearchActive,
+    searchBoxViewType: resultViewType
   })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
     items: itemsWithoutHomeSection,
     theme: dropdownTheme,
@@ -107,4 +116,4 @@ const Header = forwardRef(({
     linkHandler: linkHandler
   })))));
 });
-export { Header };
+export { Header, SearchResultView };

package/out/components/header/index.css

@@ -56,7 +56,7 @@
 }
 
 .ktl-header-module_border_paN11 {
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
 }
 
 @media (max-width: 640px) {
@@ -411,18 +411,39 @@
     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;
         right: 0;
     }
 }
+
+
+@media (min-width: 640px) and (max-width: 1024px) {
+    .ktl-quick-search-module_apiReferenceWrapper_jv98t {
+        width: calc(100vw - 64px);
+        left: auto;
+        right: 0;
+    }
+}
+
+
+@media (min-width: 1024px) {
+    .ktl-quick-search-module_apiReferenceWrapper_jv98t {
+        left: auto;
+        right: 0;
+        width: 1000px;
+    }
+}
+
 .ktl-loading-module_loader_B2IQl {
     margin-top: 4px;
 }
@@ -683,7 +704,7 @@
 
 .ktl-menu-popup-module_menu-popup_Q68IE {
     display: none;
-    padding: 8px 0;
+    padding: 8px 0 56px 0;
     background: var(--ktl-dark-100);
     position: fixed;
     top: var(--ktl-header-height-mobile);
@@ -751,19 +772,13 @@
     font-size: 19px;
     line-height: 28px;
     font-weight: 400;
-    color: rgba(255, 255, 255, 0.75);
+    color: #ffffff;
     text-decoration: none;
-    padding: 12px 16px 12px 16px;
+    padding: 12px 7px 12px 16px;
     transition: color var(--ktl-transition-xfast),
     background-color var(--ktl-transition-xfast);
 }
 
-.ktl-menu-list-item-module_menu-item_Aruue:hover {
-        color: rgba(255, 255, 255, 1);
-        background: rgba(255, 255, 255, 0.1);
-        text-decoration: none;
-    }
-
 .ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active_jHfJR {
         color: var(--ktl-light-text-hard);
         background: rgba(255, 255, 255, 1);
@@ -805,8 +820,8 @@
 }
 
 .ktl-menu-list-module_menu-item-group_mFvUE {
-    margin: 8px 0;
-    padding: 8px 0;
+    margin: 8px 0 8px 0;
+    padding: 4px 0 8px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.3);
 }
 
@@ -837,7 +852,6 @@
 }
 
 .ktl-logo-small-module_icon_NyEog {
-  width: 24px;
-  height: 24px;
-  margin-left: -4px;
+  width: 20px;
+  height: 20px;
 }

package/out/components/header/logo-small/kotlin-logo-small.svg.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-var _radialGradient, _path;
+var _path, _defs;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -21,27 +21,29 @@ function _extends() {
 }
 
 const SvgKotlinLogoSmall = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, props), _radialGradient || (_radialGradient = /*#__PURE__*/React.createElement("radialGradient", {
+  width: 20,
+  height: 20,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M20 20H0V0h20L9.793 9.855 20 20Z",
+  fill: "url(#kotlin-logo-small_svg__a)"
+})), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
   id: "kotlin-logo-small_svg__a",
-  cx: 22.432,
-  cy: 3.493,
-  r: 21.679,
-  gradientTransform: "translate(-.19 .042) scale(.9998)",
-  gradientUnits: "userSpaceOnUse"
+  cx: 0,
+  cy: 0,
+  r: 1,
+  gradientUnits: "userSpaceOnUse",
+  gradientTransform: "translate(19.335 .822) scale(22.9097)"
 }, /*#__PURE__*/React.createElement("stop", {
   offset: 0.003,
-  stopColor: "#e44857"
+  stopColor: "#EF4857"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 0.469,
-  stopColor: "#c711e1"
+  stopColor: "#D211EC"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: 1,
-  stopColor: "#7f52ff"
-}))), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fill: "url(#kotlin-logo-small_svg__a)",
-  d: "M22.87 21.68H3.94V2.76h18.93l-9.66 9.32z"
-})));
+  stopColor: "#7F52FF"
+})))));
 
 export { SvgKotlinLogoSmall as default };

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

@@ -4,17 +4,19 @@ import { useTextStyles } from '@rescui/typography';
 import classNames from 'classnames';
 import { isMacOs } from '../../is-macos.js';
 import styles from './list.module.pcss.js';
+import { SearchResultView } from '../../header.js';
 
 const ResultsList = ({
   results,
   searchString,
-  toggleFullSearch
+  toggleFullSearch,
+  resultListViewType
 }) => {
   const textCn = useTextStyles();
   return React__default.createElement("div", {
-    className: styles.results,
+    className: classNames(styles.results),
     "data-test": 'quick-search-results'
-  }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, results.length ? React__default.createElement(React__default.Fragment, null, resultListViewType === SearchResultView.Narrow && React__default.createElement("div", {
     className: styles.topBar
   }, React__default.createElement("div", {
     className: classNames(textCn('rs-text-3'), styles.searchString)

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { ThemeProvider } from '@rescui/ui-contexts';
+import classNames from 'classnames';
 import { ResultsList } from './list/list.js';
 import { EmptyResult } from './empty/empty.js';
 import { LoadingResults } from './loading/loading.js';
@@ -9,13 +10,18 @@ const QuickSearch = ({
   results,
   searchString,
   toggleFullSearch,
-  placeholder
+  placeholder,
+  quickSearchBoxViewType
 }) => {
+  const wrapperClassName = classNames(styles.wrapper, {
+    [styles.apiReferenceWrapper]: quickSearchBoxViewType
+  });
+
   if (placeholder) {
     return React__default.createElement(ThemeProvider, {
       theme: 'dark'
     }, React__default.createElement("div", {
-      className: styles.wrapper
+      className: wrapperClassName
     }, React__default.createElement(EmptyResult, {
       placeholder: placeholder
     })));
@@ -25,16 +31,17 @@ const QuickSearch = ({
     return React__default.createElement(ThemeProvider, {
       theme: 'dark'
     }, React__default.createElement("div", {
-      className: styles.wrapper
+      className: wrapperClassName
     }, React__default.createElement(ResultsList, {
       results: results,
       searchString: searchString,
-      toggleFullSearch: toggleFullSearch
+      toggleFullSearch: toggleFullSearch,
+      resultListViewType: quickSearchBoxViewType
     })));
   }
 
   return React__default.createElement("div", {
-    className: styles.wrapper
+    className: wrapperClassName
   }, React__default.createElement(LoadingResults, null));
 };
 

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

@@ -1,4 +1,5 @@
 var styles = {
-  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ"
+  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ",
+  "apiReferenceWrapper": "ktl-quick-search-module_apiReferenceWrapper_jv98t"
 };
 export { styles as default };

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

@@ -6,7 +6,7 @@ const Result = ({
   hit
 }) => {
   const textCn = useTextStyles();
-  const hitTitle = hit.title === hit.mainTitle ? hit.highlightedTitle : `${hit.mainTitle}: ${hit.highlightedTitle}`;
+  const hitTitle = !hit.mainTitle || hit.title === hit.mainTitle ? hit.highlightedTitle : `${hit.mainTitle}: ${hit.highlightedTitle}`;
   return React__default.createElement("a", {
     className: styles.result,
     href: hit.url

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

@@ -11,13 +11,14 @@ const SearchBox = ({
   closeHandler,
   isMobile,
   fullSearchActive,
-  setFullSearchActive
+  setFullSearchActive,
+  searchBoxViewType
 }) => {
   const [searchInput, setSearchInput] = useState('');
   const {
     hits,
     placeholder
-  } = useSearch(searchInput, 25);
+  } = useSearch(searchInput, fullSearchActive ? 25 : 75);
   const escHandler = useCallback(event => {
     if (event.keyCode === ESC_CODE) {
       closeHandler();
@@ -62,7 +63,8 @@ const SearchBox = ({
     results: hits,
     searchString: searchInput,
     toggleFullSearch: toggleFullSearch,
-    placeholder: placeholder
+    placeholder: placeholder,
+    quickSearchBoxViewType: searchBoxViewType
   }), fullSearchActive && React__default.createElement(FullSearch, {
     toggleFullSearch: toggleFullSearch,
     searchString: searchInput,

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

@@ -30,14 +30,14 @@
   height: 64px;
   background: #ffffff;
   padding: 0 32px;
-  box-shadow: inset 0 -1px 0 0 var(--ktl-light-dark-20);
+  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
   transition: color var(--ktl-transition-fast),
   background-color var(--ktl-transition-fast);
 }
 
 .ktl-top-menu-module_top-menu-dark-theme_aNBxr {
   background: #1b1b1b;
-  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
 }
 
 .ktl-top-menu-module_logo_CNH2W {
@@ -109,7 +109,7 @@
 .ktl-vertical-menu-module_button_zqr20 {
     border: none;
     background: none;
-    height: 100%;
+    height: 52px;
     width: 100%;
     max-width: 100%;
     padding: 0;
@@ -117,6 +117,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    color: #fff;
 }
 
 .ktl-vertical-menu-module_button-text_aXith {
@@ -126,9 +127,9 @@
 }
 
 .ktl-vertical-menu-module_icon_-Ieat {
-    width: 12px;
-    height: 6px;
-    margin-left: 6px;
+    width: 14px;
+    height: 8px;
+    margin-left: 13px;
     transition: transform ease-in-out var(--ktl-transition-xfast);
     flex: 0 0 auto;
 }
@@ -144,6 +145,7 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     justify-content: space-between;
     background: #ffffff;
+    margin-bottom: 8px;
 }
 
 .ktl-vertical-menu-module_dropdown-list_N3KWV {

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

@@ -47,11 +47,13 @@ const VerticalMenu = ({
       [styles.dropdownMenuExpanded]: isExpanded
     })
   }, React__default.createElement("button", {
-    className: classNames(styles.button, textCn('rs-text-2')),
+    className: classNames(styles.button),
     "aria-haspopup": "true",
     onClick: handleOpen
   }, React__default.createElement("span", {
-    className: styles.buttonText
+    className: textCn('rs-text-2', {
+      hardness: 'hard'
+    })
   }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
     className: styles.icon
   })), !!portalRoot && isExpanded && createPortal(React__default.createElement(VerticalMenuDropDown, {
@@ -108,7 +110,9 @@ const VerticalMenuDropDown = ({
   })), items.map((item, index) => React__default.createElement("a", {
     key: item.url,
     href: item.url,
-    className: classNames(styles.dropdownItem, textCn('rs-text-1'), {
+    className: classNames(styles.dropdownItem, textCn('rs-text-1', {
+      hardness: 'hard'
+    }), {
       [styles.dropdownItemActive]: index === activeIndex
     }),
     onClick: event => linkHandler?.(event, item.url),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.2.0-alpha.4",
+  "version": "4.3.0-alpha.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -47,7 +47,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.11.5",
     "@react-hook/resize-observer": "^1.2.5",
-    "@rescui/button": "^0.6.9",
+    "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
     "@rescui/icons": "^0.8.2",