@jetbrains/kotlin-web-site-ui 4.3.0-next-layout.7 → 4.4.0-alpha.0

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

@@ -0,0 +1,123 @@
+import React__default, { useState, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import styles from './vertical-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
+import { useTheme } from '@rescui/ui-contexts';
+import Button from '@rescui/button';
+import { CloseIcon } from '@rescui/icons';
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { createPortal } from 'react-dom';
+
+const VerticalMenu = ({
+  homeUrl,
+  title,
+  mobileTitle = 'Overview',
+  items,
+  activeIndex,
+  linkHandler,
+  mobileOverview = true,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+
+  let _items = (mobileOverview ? [{
+    title: mobileTitle,
+    url: homeUrl
+  }] : []).concat(items);
+
+  const _activeIndex = mobileOverview ? activeIndex + 1 : activeIndex;
+
+  const activeItem = _items[_activeIndex];
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [portalRoot, setPortalRoot] = useState(null);
+  const handleOpen = useCallback(() => {
+    setIsExpanded(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsExpanded(false);
+  }, []);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      setPortalRoot(document.body);
+    }
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNames(styles.dropdownMenu, {
+      [styles.dropdownMenuExpanded]: isExpanded
+    })
+  }, React__default.createElement("button", {
+    className: classNames(styles.button),
+    "aria-haspopup": "true",
+    onClick: handleOpen
+  }, React__default.createElement("span", {
+    className: textCn('rs-text-2', {
+      hardness: 'hard'
+    })
+  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), !!portalRoot && isExpanded && createPortal(React__default.createElement(VerticalMenuDropDown, {
+    title: title,
+    activeIndex: _activeIndex,
+    items: _items,
+    onClose: handleClose,
+    linkHandler: linkHandler,
+    topMenuRef: topMenuRef
+  }), portalRoot)));
+};
+
+const VerticalMenuDropDown = ({
+  title,
+  onClose,
+  items,
+  linkHandler,
+  activeIndex,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+  const theme = useTheme();
+  const navRef = useRef(null);
+  const [navStyle, setNavStyle] = useState({});
+  useEffect(() => {
+    if (navRef.current) {
+      disableBodyScroll(navRef.current);
+    }
+
+    return clearAllBodyScrollLocks;
+  }, []);
+  useLayoutEffect(() => {
+    if (topMenuRef.current) {
+      setNavStyle({
+        top: topMenuRef.current.getBoundingClientRect().top
+      });
+    }
+  }, [topMenuRef]);
+  return React__default.createElement("nav", {
+    ref: navRef,
+    style: navStyle,
+    className: classNames(styles.dropdownList, {
+      [styles.dropdownListDarkTheme]: theme === 'dark'
+    })
+  }, React__default.createElement("div", {
+    className: styles.dropdownHeader
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-2')
+  }, title), React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
+    onClick: onClose
+  })), items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-1', {
+      hardness: 'hard'
+    }), {
+      [styles.dropdownItemActive]: index === activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined
+  }, item.title)));
+};
+
+export { VerticalMenu };

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

@@ -0,0 +1,13 @@
+var styles = {
+  "verticalMenu": "ktl-vertical-menu-module_vertical-menu_aLIbw",
+  "button": "ktl-vertical-menu-module_button_zqr20",
+  "buttonText": "ktl-vertical-menu-module_button-text_aXith",
+  "icon": "ktl-vertical-menu-module_icon_-Ieat",
+  "dropdownHeader": "ktl-vertical-menu-module_dropdown-header_77lTy",
+  "dropdownList": "ktl-vertical-menu-module_dropdown-list_N3KWV",
+  "dropdownItem": "ktl-vertical-menu-module_dropdown-item_XLfp4",
+  "dropdownItemActive": "ktl-vertical-menu-module_dropdown-item-active_iBUbj",
+  "verticalMenuExpanded": "ktl-vertical-menu-module_vertical-menu-expanded_kFaaI",
+  "dropdownListDarkTheme": "ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw"
+};
+export { styles as default };

package/out/components/typography/index.css

@@ -14,7 +14,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }

package/out/components/youtube-player/index.css

@@ -14,7 +14,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.3.0-next-layout.7",
+  "version": "4.4.0-alpha.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -59,22 +59,26 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-essentials": "^6.2.8",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/builder-webpack5": "^6.3.0-alpha.13",
-    "@storybook/react": "^6.2.8",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
     "@svgr/rollup": "^6.2.1",
     "@svgr/webpack": "^5.5.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/cookie": "^0.4.1",
     "@types/fs-extra": "^9.0.13",
+    "@types/node": "^18.11.9",
+    "@types/postcss-import": "^14.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.13.1",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/sha.js": "^2.4.0",
+    "@types/webpack": "^5.28.0",
     "@types/youtube": "^0.0.45",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -99,7 +103,7 @@
     "formik": "^2.2.9",
     "fs-extra": "^10.0.1",
     "mini-css-extract-plugin": "1.4.0",
-    "postcss": "^8.2.12",
+    "postcss": "^8.4.19",
     "postcss-custom-media": "^8.0.0",
     "postcss-for": "^2.1.1",
     "postcss-import": "^14.1.0",
@@ -108,14 +112,17 @@
     "postcss-nested": "^5.0.5",
     "postcss-remove-global": "^0.1.1",
     "prettier": "2.2.1",
+    "prop-types": "^15.8.1",
     "query-string": "^7.0.1",
     "react": "^16.8.6",
+    "react-cache": "^2.0.0-alpha.1",
     "react-dom": "^16.8.6",
     "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",
+    "require-from-string": "^2.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -125,7 +132,7 @@
     "svgo-loader": "^3.0.0",
     "the-platform": "^0.10.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.2.4",
+    "typescript": "^4.9.3",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "whatwg-fetch": "^3.6.2"

package/out/components/header/menu-popup/menu-button/close-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 16,
-  height: 16,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
-  fill: "currentColor"
-})));
-
-export { SvgCloseIcon as default };

package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
-  fill: "currentColor"
-})));
-
-export { SvgHamburgerIcon as default };

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

@@ -1,71 +0,0 @@
-import React__default, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import styles from './dropdown-menu.module.pcss.js';
-import { useTextStyles } from '@rescui/typography';
-import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
-import { useTheme } from '@rescui/ui-contexts';
-
-const DropdownMenu = ({
-  homeUrl,
-  title,
-  mobileTitle = 'Overview',
-  items,
-  activeIndex,
-  linkHandler,
-  mobileOverview = true
-}) => {
-  const theme = useTheme();
-  const textCn = useTextStyles();
-  const [portalRoot, setPortalRoot] = React__default.useState(null);
-  React__default.useEffect(() => {
-    if (typeof document !== `undefined`) {
-      setPortalRoot(document.body);
-    }
-  }, []);
-
-  let _items = (mobileOverview ? [{
-    title: mobileTitle,
-    url: homeUrl
-  }] : []).concat(items);
-
-  const _activeIndex = mobileOverview ? activeIndex + 1 : activeIndex;
-
-  const activeItem = _items[_activeIndex];
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const handleClick = () => setIsExpanded(!isExpanded);
-
-  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,15 +0,0 @@
-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",
-  "dropdownItem": "ktl-dropdown-menu-module_dropdown-item_X3tZ-",
-  "dropdownItemActive": "ktl-dropdown-menu-module_dropdown-item-active_99q9X",
-  "overlay": "ktl-dropdown-menu-module_overlay_segRo",
-  "overlayVisible": "ktl-dropdown-menu-module_overlay-visible_MjwEF",
-  "dropdownMenuExpanded": "ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy",
-  "dropdownListDarkTheme": "ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol"
-};
-export { styles as default };