@jetbrains/kotlin-web-site-ui 4.0.0-alpha.2 → 4.0.1

package/out/components/header/logo-large/logo-large.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './logo-large.module.pcss.js';
 import SvgKotlinLogoLarge from './kotlin-logo-large.svg.js';
 import classNames from 'classnames';
@@ -11,25 +11,19 @@ const LogoLarge = ({
 }) => {
   const version = productWebUrl ? getProductVersion(productWebUrl) : null;
   const textCn = useTextStyles();
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     className: classNames(styles.container, className, textCn('rs-text-3', {
       hardness: 'average'
     }))
-  }, {
-    children: [jsx("a", Object.assign({
-      className: styles.link,
-      href: KOTLINLANG_URL,
-      "aria-label": "Kotlin Home Page"
-    }, {
-      children: jsx(SvgKotlinLogoLarge, {}, void 0)
-    }), void 0), version && jsx("a", Object.assign({
-      className: classNames(styles.versionTag),
-      href: productWebUrl,
-      target: "_blank"
-    }, {
-      children: version
-    }), void 0)]
-  }), void 0);
+  }, React__default.createElement("a", {
+    className: styles.link,
+    href: KOTLINLANG_URL,
+    "aria-label": "Kotlin Home Page"
+  }, React__default.createElement(SvgKotlinLogoLarge, null)), version && React__default.createElement("a", {
+    className: classNames(styles.versionTag),
+    href: productWebUrl,
+    target: "_blank"
+  }, version));
 };
 
 function getProductVersion(productWebUrl) {

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import SvgKotlinLogoSmall from './kotlin-logo-small.svg.js';
 import styles from './logo-small.module.pcss.js';
 import classNames from 'classnames';
@@ -11,23 +11,17 @@ const LogoSmall = ({
   className
 }) => {
   const textCn = useTextStyles();
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     className: classNames(styles.logoSmall, className)
-  }, {
-    children: [jsx("a", Object.assign({
-      href: KOTLINLANG_URL,
-      className: styles.iconWrap
-    }, {
-      children: jsx(SvgKotlinLogoSmall, {
-        className: styles.icon
-      }, void 0)
-    }), void 0), jsx("a", Object.assign({
-      href: homeUrl,
-      className: classNames(styles.link, textCn('rs-h3'))
-    }, {
-      children: homeTitle
-    }), void 0)]
-  }), void 0);
+  }, React__default.createElement("a", {
+    href: KOTLINLANG_URL,
+    className: styles.iconWrap
+  }, React__default.createElement(SvgKotlinLogoSmall, {
+    className: styles.icon
+  })), React__default.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.link, textCn('rs-h3'))
+  }, homeTitle));
 };
 
 export { LogoSmall };

package/out/components/header/menu-popup/menu-button/menu-button.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgHamburgerIcon from './hamburger-icon.svg.js';
@@ -8,15 +8,13 @@ const MenuButton = ({
   onClick,
   isExpanded
 }) => {
-  return jsx("button", Object.assign({
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button),
     "aria-haspopup": "true",
     "aria-label": "Open the navigation",
     onClick: onClick
-  }, {
-    children: isExpanded ? jsx(SvgCloseIcon, {}, void 0) : jsx(SvgHamburgerIcon, {}, void 0)
-  }), void 0);
+  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
 };
 
 export { MenuButton };

package/out/components/header/menu-popup/menu-popup.js

@@ -1,5 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
 import styles from './menu-popup.module.pcss.js';
 import classNames from 'classnames';
 import { MenuButton } from './menu-button/menu-button.js';
@@ -16,7 +15,7 @@ const MenuListItem = ({
     '--level': level
   };
   const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
-  return jsx(Tag, Object.assign({}, item.url ? {
+  return React__default.createElement(Tag, Object.assign({}, item.url ? {
     href: item.url,
     onClick: handleClick
   } : {}, {
@@ -26,9 +25,7 @@ const MenuListItem = ({
       [styles.activeWithChild]: item.items && item.items.length
     }),
     style: style
-  }, {
-    children: item.title
-  }), void 0);
+  }), item.title);
 };
 
 const MenuList = ({
@@ -36,19 +33,17 @@ const MenuList = ({
   level,
   linkHandler
 }) => {
-  return jsx(Fragment, {
-    children: items.map((item, i) => jsxs(Fragment$1, {
-      children: [jsx(MenuListItem, {
-        item: item,
-        level: level,
-        linkHandler: linkHandler
-      }, void 0), item.items && item.items.length > 0 && jsx(MenuList, {
-        items: item.items,
-        level: level + 1,
-        linkHandler: linkHandler
-      }, void 0)]
-    }, i))
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  }))));
 };
 
 const MenuPopup = ({
@@ -81,24 +76,20 @@ const MenuPopup = ({
 
     setExpand(!isExpanded);
   }, [isExpanded, navRef]);
-  return jsxs(Fragment, {
-    children: [jsx(MenuButton, {
-      onClick: handleClick,
-      isExpanded: isExpanded
-    }, void 0), jsx("nav", Object.assign({
-      style: navStyle,
-      ref: navRef,
-      className: classNames(styles.menuPopup, textCn('rs-text-2'), {
-        [styles.menuPopupExpanded]: isExpanded
-      })
-    }, {
-      children: jsx(MenuList, {
-        items: items,
-        level: 0,
-        linkHandler: linkHandler
-      }, void 0)
-    }), void 0)]
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuButton, {
+    onClick: handleClick,
+    isExpanded: isExpanded
+  }), React__default.createElement("nav", {
+    style: navStyle,
+    ref: navRef,
+    className: classNames(styles.menuPopup, textCn('rs-text-2'), {
+      [styles.menuPopupExpanded]: isExpanded
+    })
+  }, React__default.createElement(MenuList, {
+    items: items,
+    level: 0,
+    linkHandler: linkHandler
+  })));
 };
 
 export { MenuPopup };

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

@@ -1,22 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './search-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgSearch from './search.svg.js';
+const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
 
 const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return jsx("button", Object.assign({
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
     }),
+    "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
     "aria-label": "Search",
     onClick: onClick
-  }, {
-    children: jsx(SvgSearch, {}, void 0)
-  }), void 0);
+  }, React__default.createElement(SvgSearch, null));
 };
 
-export { SearchButton };
+export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };

package/out/components/popup/popup.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import ReactModal from 'react-modal';
 import { LayeringConsumer, LayeringProvider } from '@rescui/ui-contexts';
 import { CloseIcon, LoadingIcon } from '@rescui/icons';
@@ -17,45 +17,39 @@ const Popup = ({
   ariaHideApp = false,
   ...restProps
 }) => {
-  return jsx(LayeringConsumer, {
-    children: ({
-      popupZIndex
-    }) => jsx(LayeringProvider, Object.assign({
-      baseLayer: "popup"
-    }, {
-      children: jsxs(ReactModal, Object.assign({
-        isOpen: isOpen,
-        className: styles.popup,
-        overlayClassName: styles.overlay,
-        onRequestClose: onRequestClose,
-        shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-        shouldCloseOnEsc: shouldCloseOnEsc
-      }, restProps, {
-        ariaHideApp: ariaHideApp,
-        style: {
-          overlay: {
-            zIndex: popupZIndex
-          }
-        }
-      }, {
-        children: [!busy && showOuterCloseButton && jsx(Button, {
-          mode: 'rock',
-          theme: 'light',
-          icon: jsx(CloseIcon, {}, void 0),
-          className: styles.close,
-          onClick: onRequestClose,
-          "data-test": "close-button"
-        }, void 0), busy ? jsx(LoadingIcon, {
-          size: "l",
-          theme: "dark",
-          mode: "rock",
-          "data-test": "loading-icon"
-        }, void 0) : children, jsx(RemoveScrollBar, {
-          gapMode: "margin"
-        }, void 0)]
-      }), void 0)
-    }), void 0)
-  }, void 0);
+  return React.createElement(LayeringConsumer, null, ({
+    popupZIndex
+  }) => React.createElement(LayeringProvider, {
+    baseLayer: "popup"
+  }, React.createElement(ReactModal, Object.assign({
+    isOpen: isOpen,
+    className: styles.popup,
+    overlayClassName: styles.overlay,
+    onRequestClose: onRequestClose,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+    shouldCloseOnEsc: shouldCloseOnEsc
+  }, restProps, {
+    ariaHideApp: ariaHideApp,
+    style: {
+      overlay: {
+        zIndex: popupZIndex
+      }
+    }
+  }), !busy && showOuterCloseButton && React.createElement(Button, {
+    mode: 'rock',
+    theme: 'light',
+    icon: React.createElement(CloseIcon, null),
+    className: styles.close,
+    onClick: onRequestClose,
+    "data-test": "close-button"
+  }), busy ? React.createElement(LoadingIcon, {
+    size: "l",
+    theme: "dark",
+    mode: "rock",
+    "data-test": "loading-icon"
+  }) : children, React.createElement(RemoveScrollBar, {
+    gapMode: "margin"
+  }))));
 };
 
 export { Popup };

package/out/components/quotes-slider/quites-slider.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import cn from 'classnames';
 import SvgQuote from './quote.svg.js';
@@ -33,68 +32,39 @@ const QuotesSlider = ({
     [styles.controlActive]: index + 1 < totalSlides
   });
   const quoteTextClass = large ? 'ktl-subtitle' : 'ktl-text-1';
-  return jsx("div", Object.assign({
+  return React__default.createElement("div", {
     className: styles.quotesSlider
-  }, {
-    children: jsxs("div", Object.assign({
-      className: styles.content
-    }, {
-      children: [jsx("div", Object.assign({
-        className: styles.iconContainer
-      }, {
-        children: jsx(SvgQuote, {}, void 0)
-      }), void 0), jsxs("div", {
-        children: [quotes.length > 1 ? jsx(SwipeableViews, Object.assign({
-          index: index,
-          onChangeIndex: handleChangeIndex
-        }, {
-          children: quotes.map((quote, i) => jsx("p", Object.assign({
-            className: quoteTextClass
-          }, {
-            children: quote.text
-          }), i))
-        }), void 0) : jsx("p", Object.assign({
-          className: quoteTextClass
-        }, {
-          children: quotes[0].text
-        }), void 0), jsxs("div", Object.assign({
-          className: styles.nav
-        }, {
-          children: [jsx("div", Object.assign({
-            className: styles.title
-          }, {
-            children: jsx("p", Object.assign({
-              className: "ktl-text-2"
-            }, {
-              children: slideTitle
-            }), void 0)
-          }), void 0), quotes.length > 1 && jsxs("div", Object.assign({
-            className: styles.controls
-          }, {
-            children: [jsx("div", Object.assign({
-              className: prevButtonClass,
-              onClick: handlePrevSlide
-            }, {
-              children: jsx(SvgSliderArrow, {}, void 0)
-            }), void 0), jsx("div", Object.assign({
-              className: styles.slidesCount
-            }, {
-              children: jsxs("p", Object.assign({
-                className: "ktl-text-2"
-              }, {
-                children: [index + 1, "/", totalSlides]
-              }), void 0)
-            }), void 0), jsx("div", Object.assign({
-              className: nextButtonClass,
-              onClick: handleNextSlide
-            }, {
-              children: jsx(SvgSliderArrow, {}, void 0)
-            }), void 0)]
-          }), void 0)]
-        }), void 0)]
-      }, void 0)]
-    }), void 0)
-  }), void 0);
+  }, React__default.createElement("div", {
+    className: styles.content
+  }, React__default.createElement("div", {
+    className: styles.iconContainer
+  }, React__default.createElement(SvgQuote, null)), React__default.createElement("div", null, quotes.length > 1 ? React__default.createElement(SwipeableViews, {
+    index: index,
+    onChangeIndex: handleChangeIndex
+  }, quotes.map((quote, i) => React__default.createElement("p", {
+    className: quoteTextClass,
+    key: i
+  }, quote.text))) : React__default.createElement("p", {
+    className: quoteTextClass
+  }, quotes[0].text), React__default.createElement("div", {
+    className: styles.nav
+  }, React__default.createElement("div", {
+    className: styles.title
+  }, React__default.createElement("p", {
+    className: "ktl-text-2"
+  }, slideTitle)), quotes.length > 1 && React__default.createElement("div", {
+    className: styles.controls
+  }, React__default.createElement("div", {
+    className: prevButtonClass,
+    onClick: handlePrevSlide
+  }, React__default.createElement(SvgSliderArrow, null)), React__default.createElement("div", {
+    className: styles.slidesCount
+  }, React__default.createElement("p", {
+    className: "ktl-text-2"
+  }, index + 1, "/", totalSlides)), React__default.createElement("div", {
+    className: nextButtonClass,
+    onClick: handleNextSlide
+  }, React__default.createElement(SvgSliderArrow, null)))))));
 };
 
 export { QuotesSlider };

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

@@ -1,4 +1,3 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -37,45 +36,36 @@ const DropdownMenu = ({
 
   const handleClick = () => setIsExpanded(!isExpanded);
 
-  return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      className: classNames(styles.dropdownMenu, {
-        [styles.dropdownMenuExpanded]: isExpanded
-      }),
-      onClick: handleClick
-    }, {
-      children: [jsxs("button", Object.assign({
-        className: classNames(styles.button, textCn('rs-text-2')),
-        "aria-haspopup": "true"
-      }, {
-        children: [jsx("span", {
-          children: activeItem.title
-        }, void 0), jsx(SvgArrowDropdownIcon, {
-          className: styles.icon
-        }, void 0)]
-      }), void 0), jsx("nav", Object.assign({
-        className: classNames(styles.dropdownList, {
-          [styles.dropdownListDarkTheme]: theme === 'dark'
-        })
-      }, {
-        children: _items.map((item, index) => jsx("a", Object.assign({
-          href: item.url,
-          className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
-            [styles.dropdownItemActive]: index === _activeIndex
-          }),
-          onClick: event => linkHandler?.(event, item.url),
-          target: item.isExternal ? '_blank' : undefined
-        }, {
-          children: item.title
-        }), item.url))
-      }), void 0)]
-    }), void 0), !!portalRoot && ReactDOM.createPortal(jsx("div", {
-      className: classNames(styles.overlay, {
-        [styles.overlayVisible]: isExpanded
-      }),
-      onClick: handleClick
-    }, void 0), portalRoot)]
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNames(styles.dropdownMenu, {
+      [styles.dropdownMenuExpanded]: isExpanded
+    }),
+    onClick: handleClick
+  }, React__default.createElement("button", {
+    className: classNames(styles.button, textCn('rs-text-2')),
+    "aria-haspopup": "true"
+  }, React__default.createElement("span", {
+    className: styles.buttonText
+  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), React__default.createElement("nav", {
+    className: classNames(styles.dropdownList, {
+      [styles.dropdownListDarkTheme]: theme === 'dark'
+    })
+  }, _items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
+      [styles.dropdownItemActive]: index === _activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined
+  }, item.title)))), !!portalRoot && ReactDOM.createPortal(React__default.createElement("div", {
+    className: classNames(styles.overlay, {
+      [styles.overlayVisible]: isExpanded
+    }),
+    onClick: handleClick
+  }), portalRoot));
 };
 
 export { DropdownMenu };

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/horizontal-menu/horizontal-menu.js

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import classNames from 'classnames';
 import styles from './horizontal-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
@@ -11,21 +10,19 @@ const HorizontalMenuItem = ({
 }) => {
   const textCn = useTextStyles();
   const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
-  return isActive ? jsx("span", Object.assign({
+  return isActive ? React__default.createElement("span", {
+    key: item.url,
     className: styles.itemActive
-  }, {
-    children: item.title
-  }), item.url) : jsx("a", Object.assign({
+  }, item.title) : React__default.createElement("a", {
     href: item.url,
+    key: item.url,
     className: classNames(styles.item, textCn('rs-link', {
       hardness: 'average',
       mode: 'clear'
     })),
     onClick: handleLink,
     target: item.isExternal ? '_blank' : undefined
-  }, {
-    children: item.title
-  }), item.url);
+  }, item.title);
 };
 
 const HorizontalMenu = ({
@@ -34,15 +31,14 @@ const HorizontalMenu = ({
   linkHandler
 }) => {
   const textCn = useTextStyles();
-  return jsx("nav", Object.assign({
+  return React__default.createElement("nav", {
     className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
-  }, {
-    children: items.map((item, index) => jsx(HorizontalMenuItem, {
-      isActive: index === activeIndex,
-      item: item,
-      linkHandler: linkHandler
-    }, item.url))
-  }), void 0);
+  }, items.map((item, index) => React__default.createElement(HorizontalMenuItem, {
+    key: item.url,
+    isActive: index === activeIndex,
+    item: item,
+    linkHandler: linkHandler
+  })));
 };
 
 export { HorizontalMenu };

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 {