@jetbrains/kotlin-web-site-ui 4.0.0-alpha.0 → 4.0.0-alpha.3

package/out/components/header/header.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { ThemeProvider } from '@rescui/ui-contexts';
 import useResizeObserver from '@react-hook/resize-observer';
 import { LogoLarge } from './logo-large/logo-large.js';
@@ -33,36 +32,32 @@ const Header = forwardRef(({
     setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
   }, [headerRef]);
   useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
-  return jsx(ThemeProvider, Object.assign({
+  return React__default.createElement(ThemeProvider, {
     theme: 'dark'
-  }, {
-    children: jsxs("header", Object.assign({
-      ref: headerRef,
-      className: classNames(styles.headerMenu, className, {
-        [styles.withMenuPopup]: menuPopupExpanded,
-        [styles.border]: hasBorder
-      })
-    }, {
-      children: [isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? jsx(LogoSmall, {
-        homeTitle: currentTitle,
-        homeUrl: currentUrl
-      }, void 0) : jsx(LogoLarge, {
-        productWebUrl: productWebUrl
-      }, void 0), !isMenuPopupVisible && jsx(HorizontalMenu, {
-        items: items,
-        theme: dropdownTheme,
-        linkHandler: linkHandler
-      }, void 0), jsx(SearchButton, {
-        onClick: onSearchClick,
-        isActive: hasSearch && !!onSearchClick
-      }, void 0), isMenuPopupVisible && jsx(MenuPopup, {
-        items: items,
-        setExpand: setMenuPopupExpanded,
-        isExpanded: menuPopupExpanded,
-        headerRef: headerRef,
-        linkHandler: linkHandler
-      }, void 0)]
-    }), void 0)
-  }), void 0);
+  }, React__default.createElement("header", {
+    ref: headerRef,
+    className: classNames(styles.headerMenu, className, {
+      [styles.withMenuPopup]: menuPopupExpanded,
+      [styles.border]: hasBorder
+    })
+  }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
+    homeTitle: currentTitle,
+    homeUrl: currentUrl
+  }) : React__default.createElement(LogoLarge, {
+    productWebUrl: productWebUrl
+  }), !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
+    items: items,
+    theme: dropdownTheme,
+    linkHandler: linkHandler
+  }), React__default.createElement(SearchButton, {
+    onClick: onSearchClick,
+    isActive: hasSearch && !!onSearchClick
+  }), isMenuPopupVisible && React__default.createElement(MenuPopup, {
+    items: items,
+    setExpand: setMenuPopupExpanded,
+    isExpanded: menuPopupExpanded,
+    headerRef: headerRef,
+    linkHandler: linkHandler
+  })));
 });
 export { Header };

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

@@ -1,6 +1,5 @@
-import { useState, useEffect, createElement } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import classNames from 'classnames';
+import React__default, { useState, useEffect } from 'react';
 import styles from './horizontal-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
 
@@ -11,28 +10,24 @@ const DropdownMenu = ({
   linkHandler
 }) => {
   const textCn = useTextStyles();
-  return jsx("ul", Object.assign({
+  return React__default.createElement("ul", {
     className: classNames(styles.dropdownMenu, textCn('rs-text-2'), {
       [styles.dropdownMenuExpanded]: isExpanded,
       [styles.dropdownMenuAlignRight]: alignRight
     })
-  }, {
-    children: items.map((item, key) => {
-      const Tag = !item.isActive && item.url ? 'a' : 'span';
-      return jsx("li", {
-        children: jsx(Tag, Object.assign({
-          className: classNames(styles.dropdownMenuItem, {
-            [styles.active]: item.isActive
-          })
-        }, item.url ? {
-          href: item.url,
-          onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-        } : {}, {
-          children: item.title
-        }), void 0)
-      }, key);
-    })
-  }), void 0);
+  }, items.map((item, key) => {
+    const Tag = !item.isActive && item.url ? 'a' : 'span';
+    return React__default.createElement("li", {
+      key: key
+    }, React__default.createElement(Tag, Object.assign({
+      className: classNames(styles.dropdownMenuItem, {
+        [styles.active]: item.isActive
+      })
+    }, item.url ? {
+      href: item.url,
+      onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
+    } : {}), item.title));
+  }));
 };
 
 const HorizontalMenuItem = ({
@@ -48,27 +43,25 @@ const HorizontalMenuItem = ({
 
   const handleEnter = () => onMouseEnter(item);
 
-  return jsxs("li", Object.assign({
+  return React__default.createElement("li", {
     className: styles.menuItemWrap,
     onMouseEnter: handleEnter,
     onMouseLeave: onMouseLeave
-  }, {
-    children: [createElement(Tag, Object.assign({}, item.url ? {
-      href: item.url,
-      onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-    } : {}, {
-      key: item.title,
-      className: classNames(styles.menuItem, textCn('rs-text-2'), {
-        [styles.itemActive]: item.isActive,
-        [styles.expanded]: isExpanded && !!item.items?.length
-      })
-    }), item.title), !!item.items?.length && jsx(DropdownMenu, {
-      items: item.items,
-      isExpanded: isExpanded,
-      alignRight: isLast,
-      linkHandler: linkHandler
-    }, void 0)]
-  }), void 0);
+  }, React__default.createElement(Tag, Object.assign({}, item.url ? {
+    href: item.url,
+    onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
+  } : {}, {
+    key: item.title,
+    className: classNames(styles.menuItem, textCn('rs-text-2'), {
+      [styles.itemActive]: item.isActive,
+      [styles.expanded]: isExpanded && !!item.items?.length
+    })
+  }), item.title), !!item.items?.length && React__default.createElement(DropdownMenu, {
+    items: item.items,
+    isExpanded: isExpanded,
+    alignRight: isLast,
+    linkHandler: linkHandler
+  }));
 };
 
 const HorizontalMenu = ({
@@ -87,24 +80,21 @@ const HorizontalMenu = ({
 
   const handleLeave = () => setActiveIndex(-1);
 
-  return jsx("nav", Object.assign({
+  return React__default.createElement("nav", {
     className: classNames(styles.nav, {
       [styles.darkTheme]: theme === 'dark'
     })
-  }, {
-    children: jsx("ul", Object.assign({
-      className: styles.menuList
-    }, {
-      children: items.map((item, index) => jsx(HorizontalMenuItem, {
-        item: item,
-        onMouseEnter: handleEnter,
-        onMouseLeave: handleLeave,
-        isExpanded: index === debouncedActiveIndex,
-        isLast: index === items.length - 1,
-        linkHandler: linkHandler
-      }, index))
-    }), void 0)
-  }), void 0);
+  }, React__default.createElement("ul", {
+    className: styles.menuList
+  }, items.map((item, index) => React__default.createElement(HorizontalMenuItem, {
+    item: item,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    isExpanded: index === debouncedActiveIndex,
+    isLast: index === items.length - 1,
+    key: index,
+    linkHandler: linkHandler
+  }))));
 };
 
 export { HorizontalMenu };

package/out/components/header/index.css

@@ -347,7 +347,7 @@
   display: block;
 }
 
-.button {
+.ktl-menu-button-module_button_wB9Mx {
   display: flex;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -367,8 +367,8 @@
   color: var(--ktl-color-white-light);
 }
 
-  .button:hover,
-  .button :focus {
+  .ktl-menu-button-module_button_wB9Mx:hover,
+  .ktl-menu-button-module_button_wB9Mx :focus {
     color: #ffffff;
   }
 

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,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import styles from './menu-button.pcss.js';
+import React__default from 'react';
+import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgHamburgerIcon from './hamburger-icon.svg.js';
 import SvgCloseIcon from './close-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-button/menu-button.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "button": "ktl-menu-button-module_button_wB9Mx"
+};
+export { styles as default };

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,4 +1,4 @@
-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';
@@ -7,16 +7,14 @@ const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return jsx("button", Object.assign({
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
     }),
     "aria-label": "Search",
     onClick: onClick
-  }, {
-    children: jsx(SvgSearch, {}, void 0)
-  }), void 0);
+  }, React__default.createElement(SvgSearch, null));
 };
 
 export { 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 };