@jetbrains/ring-ui-built 8.0.0-beta.10 → 8.0.0-beta.11

package/components/dialog/dialog.js

@@ -1,16 +1,18 @@
 import { PureComponent, createRef } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
 import { AdaptiveIsland } from '../island/island.js';
 import getUID from '../global/get-uid.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import TabTrap from '../tab-trap/tab-trap.js';
-import { Button } from '../button/button.js';
 import { PopupTarget, PopupTargetContext, normalizePopupTarget } from '../popup/popup.target.js';
 import { getPopupContainer } from '../popup/popup.js';
-import { p as preventerFactory, s as styles } from '../_helpers/dialog-body-scroll-preventer.js';
+import getViewportSize from '../global/get-viewport-size.js';
+import { preventerFactory } from './dialog-body-scroll-preventer.js';
+import DialogControls from './dialog-controls.js';
+import { fitGeometry, getResizeMinimum, moveGeometry, resizeGeometry, getNativeTabIndex, getTrapDisabled } from './dialog-geometry.js';
+import { s as styles } from '../_helpers/dialog.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
@@ -26,6 +28,15 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../global/dom.js';
+import '../global/configuration.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/position-css.js';
+import '../_helpers/theme.js';
+import 'scrollbar-width';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
+import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../icon/icon.js';
@@ -35,13 +46,7 @@ import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
-import '../popup/position.js';
-import '../popup/popup.consts.js';
-import '../popup/position-css.js';
-import '../_helpers/theme.js';
-import 'scrollbar-width';
 
 function noop() {}
 class Dialog extends PureComponent {
@@ -52,17 +57,21 @@ class Dialog extends PureComponent {
     onCloseClick: noop,
     onCloseAttempt: noop,
     showCloseButton: false,
-    closeButtonInside: false,
+    movable: true,
+    resizable: true,
     shortcutOptions: {
       modal: false
     },
     trapFocus: false,
     autoFocusFirst: true,
+    native: true,
     modal: true,
     preventBodyScroll: true
   };
   state = {
-    shortcutsScope: getUID('ring-dialog-')
+    shortcutsScope: getUID('ring-dialog-'),
+    geometry: null,
+    resized: false
   };
   componentDidMount() {
     const {
@@ -72,6 +81,7 @@ class Dialog extends PureComponent {
     if (native && show) {
       this.toggleNativeDialog();
     }
+    window.addEventListener('resize', this.fitGeometryToViewport);
     this.toggleScrollPreventer();
   }
   componentDidUpdate(prevProps) {
@@ -84,9 +94,16 @@ class Dialog extends PureComponent {
     }
     if (prevProps.show !== this.props.show) {
       this.toggleScrollPreventer();
+      if (show) {
+        this.fitGeometryToViewport();
+      } else {
+        this.interaction = null;
+      }
     }
   }
   componentWillUnmount() {
+    window.removeEventListener('resize', this.fitGeometryToViewport);
+    this.interaction = null;
     this.scrollPreventer.reset();
   }
   scrollPreventer = preventerFactory(getUID('preventer-'));
@@ -94,7 +111,8 @@ class Dialog extends PureComponent {
   toggleNativeDialog() {
     const {
       show,
-      modal
+      modal,
+      autoFocusFirst
     } = this.props;
     if (this.nativeDialog.current) {
       if (show) {
@@ -104,6 +122,9 @@ class Dialog extends PureComponent {
         } else {
           this.nativeDialog.current.show();
         }
+        if (!autoFocusFirst && !this.nativeDialog.current.querySelector('[autofocus]')) {
+          this.nativeDialog.current.focus();
+        }
       } else {
         this.nativeDialog.current.close();
       }
@@ -143,6 +164,109 @@ class Dialog extends PureComponent {
     this.dialog = tabTrapObj && tabTrapObj.node;
   };
   nativeDialog = /*#__PURE__*/createRef();
+  innerContainer = /*#__PURE__*/createRef();
+  interaction = null;
+  resizeMinimum = null;
+  fitGeometryToViewport = () => {
+    this.setState(({
+      geometry
+    }) => {
+      if (!geometry) {
+        return null;
+      }
+      const {
+        width,
+        height
+      } = getViewportSize();
+      return {
+        geometry: fitGeometry(geometry, width, height)
+      };
+    });
+  };
+  startInteraction = (event, direction) => {
+    var _event$button, _this$resizeMinimum;
+    if (((_event$button = event.button) !== null && _event$button !== void 0 ? _event$button : 0) !== 0 || !this.innerContainer.current) {
+      return;
+    }
+    const {
+      left,
+      top,
+      width,
+      height
+    } = this.innerContainer.current.getBoundingClientRect();
+    const resizeMinimum = (_this$resizeMinimum = this.resizeMinimum) !== null && _this$resizeMinimum !== void 0 ? _this$resizeMinimum : getResizeMinimum(this.innerContainer.current.firstElementChild);
+    if (direction !== 'move') {
+      this.resizeMinimum = resizeMinimum;
+    }
+    this.interaction = {
+      pointerId: event.pointerId,
+      direction,
+      startX: event.clientX,
+      startY: event.clientY,
+      ...resizeMinimum,
+      geometry: {
+        left,
+        top,
+        width,
+        height
+      }
+    };
+    this.setState(({
+      resized
+    }) => ({
+      geometry: {
+        left,
+        top,
+        width,
+        height
+      },
+      resized: resized || direction !== 'move'
+    }));
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+  };
+  continueInteraction = event => {
+    const interaction = this.interaction;
+    if (!interaction || interaction.pointerId !== event.pointerId) {
+      return;
+    }
+    const dx = event.clientX - interaction.startX;
+    const dy = event.clientY - interaction.startY;
+    const {
+      width: viewportWidth,
+      height: viewportHeight
+    } = getViewportSize();
+    const start = interaction.geometry;
+    if (interaction.direction === 'move') {
+      this.setState({
+        geometry: moveGeometry(start, dx, dy, viewportWidth, viewportHeight)
+      });
+      return;
+    }
+    this.setState({
+      geometry: resizeGeometry(interaction, dx, dy, viewportWidth, viewportHeight),
+      resized: true
+    });
+  };
+  stopInteraction = event => {
+    if (this.interaction?.pointerId !== event.pointerId) {
+      return;
+    }
+    this.interaction = null;
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    }
+  };
+  startMove = event => {
+    const target = event.target;
+    if (!this.props.movable || !(target instanceof Element)) {
+      return;
+    }
+    const handle = target.closest('[data-ring-dialog-move-handle], [data-ring-island-header]');
+    if (handle?.parentElement === event.currentTarget) {
+      this.startInteraction(event, 'move');
+    }
+  };
   render() {
     const {
       show,
@@ -156,7 +280,6 @@ class Dialog extends PureComponent {
       contentClassName,
       trapFocus,
       'data-test': dataTest,
-      closeButtonInside,
       portalTarget,
       label,
       closeButtonTitle,
@@ -165,15 +288,22 @@ class Dialog extends PureComponent {
       native,
       modal,
       preventBodyScroll,
+      movable,
+      resizable,
+      autoFocusFirst,
+      focusBackOnClose,
+      focusBackOnExit,
+      trapDisabled,
       ...restProps
     } = this.props;
     const classes = classNames(styles.container, className);
     const shortcutsMap = this.getShortcutsMap();
     const content = /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Shortcuts, {
+        disabled: !show,
         map: shortcutsMap,
         scope: this.state.shortcutsScope,
-        options: this.props.shortcutOptions
+        options: shortcutOptions
       }), (onOverlayClick !== noop || onCloseAttempt !== noop) && /*#__PURE__*/jsx("div", {
         // click handler is duplicated in close button
         role: "presentation",
@@ -181,37 +311,52 @@ class Dialog extends PureComponent {
         onClick: this.handleClick,
         "data-test": "ring-dialog-overlay"
       }), /*#__PURE__*/jsx("div", {
-        className: styles.innerContainer,
+        ref: this.innerContainer,
+        "data-test": "ring-dialog-inner-container",
+        className: classNames(styles.innerContainer, {
+          [styles.resized]: this.state.resized
+        }),
+        style: this.state.geometry ? {
+          position: 'fixed',
+          left: this.state.geometry.left,
+          top: this.state.geometry.top,
+          width: this.state.resized ? this.state.geometry.width : undefined,
+          height: this.state.resized ? this.state.geometry.height : undefined
+        } : undefined,
         children: /*#__PURE__*/jsxs(AdaptiveIsland, {
           className: classNames(styles.content, contentClassName, {
             [styles.dense]: dense,
-            [styles.contentCloseButtonOutside]: !closeButtonInside,
-            [styles.contentCloseButtonInside]: closeButtonInside
+            [styles.movable]: movable
           }),
           "data-test": "ring-dialog",
-          role: "dialog",
-          "aria-label": label,
-          children: [children, showCloseButton && /*#__PURE__*/jsx(Button, {
-            icon: closeIcon,
-            "data-test": "ring-dialog-close-button",
-            className: classNames(styles.closeButton, {
-              [styles.closeButtonOutside]: !closeButtonInside,
-              [styles.closeButtonInside]: closeButtonInside
-            }),
-            iconClassName: classNames(styles.closeIcon, {
-              [styles.closeIconOutside]: !closeButtonInside
-            }),
-            onClick: this.onCloseClick,
-            title: closeButtonTitle,
-            "aria-label": closeButtonTitle || 'close dialog'
+          role: native ? undefined : 'dialog',
+          "aria-label": native ? undefined : label,
+          onPointerDown: this.startMove,
+          onPointerMove: this.continueInteraction,
+          onPointerUp: this.stopInteraction,
+          onPointerCancel: this.stopInteraction,
+          onLostPointerCapture: this.stopInteraction,
+          children: [children, /*#__PURE__*/jsx(DialogControls, {
+            movable: movable,
+            resizable: resizable,
+            showCloseButton: showCloseButton,
+            closeButtonTitle: closeButtonTitle,
+            onCloseClick: this.onCloseClick,
+            onStartInteraction: this.startInteraction,
+            onStopInteraction: this.stopInteraction
           })]
         })
       })]
     });
     if (native) {
       return /*#__PURE__*/jsx("dialog", {
+        ...restProps,
+        "aria-label": label,
         className: classNames(styles.nativeDialog, className),
+        "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
         ref: this.nativeDialog,
+        tabIndex: getNativeTabIndex(autoFocusFirst),
+        onCancel: event => event.preventDefault(),
         "data-rg-modal-dialog-container": modal ? '' : undefined,
         children: /*#__PURE__*/jsx(PopupTarget, {
           id: this.uid,
@@ -238,7 +383,10 @@ class Dialog extends PureComponent {
           id: this.uid,
           className: styles.popupTarget,
           children: target => /*#__PURE__*/jsxs(TabTrap, {
-            trapDisabled: !trapFocus,
+            trapDisabled: getTrapDisabled(trapFocus, trapDisabled),
+            autoFocusFirst: autoFocusFirst,
+            focusBackOnClose: focusBackOnClose,
+            focusBackOnExit: focusBackOnExit,
             "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
             "data-rg-modal-dialog-container": "",
             ref: this.dialogRef,

package/components/global/get-viewport-size.d.ts

@@ -0,0 +1,5 @@
+declare const getViewportSize: () => {
+    width: number;
+    height: number;
+};
+export default getViewportSize;

package/components/global/get-viewport-size.js

@@ -0,0 +1,6 @@
+const getViewportSize = () => ({
+  width: document.documentElement.clientWidth || window.innerWidth,
+  height: document.documentElement.clientHeight || window.innerHeight
+});
+
+export { getViewportSize as default };

package/components/http/http.js

@@ -123,23 +123,14 @@ class HTTP {
     const contentType = response.headers.get('content-type');
     const isJson = contentType && contentType.indexOf('application/json') !== -1;
     if (!response.ok) {
-      let resJson;
-      try {
-        resJson = await (isJson ? response.json() : response.text());
-      } catch (err) {
-        // noop
-      }
+      const resJson = await (isJson ? response.json() : response.text());
       throw new HTTPError(response, resJson);
     }
-    try {
-      const parsedResponse = await (isJson ? response.json() : {
-        data: await response.text()
-      });
-      this._storeRequestMeta(parsedResponse, response);
-      return parsedResponse;
-    } catch (err) {
-      return response;
-    }
+    const parsedResponse = await (isJson ? response.json() : {
+      data: await response.text()
+    });
+    this._storeRequestMeta(parsedResponse, response);
+    return parsedResponse;
   }
   fetch = async (url, params = {}) => {
     const {

package/components/island/header.js

@@ -69,6 +69,7 @@ class Header extends Component {
     const titleStyle = this.getTitleStyle(phase);
     return /*#__PURE__*/jsxs("div", {
       ...restProps,
+      "data-ring-island-header": "",
       "data-test": "ring-island-header",
       className: classes,
       style: headerStyle,
@@ -82,11 +83,11 @@ class Header extends Component {
 }
 const HeaderWrapper = props => {
   const $ = c(3);
-  if ($[0] !== "dbbfd9db484c81cb5d8abfe2d50de2fd9035c22d61c0a499e8f82dfe385f2c0e") {
+  if ($[0] !== "c6a29785d66819f6abbf7d95f1a562648cf4504e6b12c510c29c3956144b0c88") {
     for (let $i = 0; $i < 3; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "dbbfd9db484c81cb5d8abfe2d50de2fd9035c22d61c0a499e8f82dfe385f2c0e";
+    $[0] = "c6a29785d66819f6abbf7d95f1a562648cf4504e6b12c510c29c3956144b0c88";
   }
   let t0;
   if ($[1] !== props) {

package/components/login-dialog/login-dialog.js

@@ -8,7 +8,6 @@ import ContentWrapper from '../island/content.js';
 import LoaderScreen from '../loader-screen/loader-screen.js';
 import { HUB_AUTH_PAGE_OPENED } from '../auth/background-flow.js';
 import 'react-dom';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/adaptive-island-hoc.js';
@@ -25,6 +24,20 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../global/dom.js';
+import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../global/configuration.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/position-css.js';
+import '../_helpers/theme.js';
+import '../global/get-viewport-size.js';
+import '../dialog/dialog-body-scroll-preventer.js';
+import 'scrollbar-width';
+import '../_helpers/dialog.js';
+import '../dialog/dialog-controls.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
@@ -35,16 +48,8 @@ import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
-import '../popup/popup.target.js';
-import '../popup/popup.js';
-import '../popup/position.js';
-import '../popup/popup.consts.js';
-import '../popup/position-css.js';
-import '../_helpers/theme.js';
-import '../_helpers/dialog-body-scroll-preventer.js';
-import 'scrollbar-width';
+import '../dialog/dialog-geometry.js';
 import '../loader/loader.js';
 import '../_helpers/loader-core.js';
 import '../auth/response-parser.js';

package/components/login-dialog/service.js

@@ -8,7 +8,6 @@ import '../global/configuration.js';
 import '../dialog/dialog.js';
 import 'react-dom';
 import 'classnames';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/adaptive-island-hoc.js';
@@ -28,6 +27,19 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../global/dom.js';
+import '../popup/popup.target.js';
+import '../popup/popup.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/position-css.js';
+import '../_helpers/theme.js';
+import '../global/get-viewport-size.js';
+import '../dialog/dialog-body-scroll-preventer.js';
+import 'scrollbar-width';
+import '../_helpers/dialog.js';
+import '../dialog/dialog-controls.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
@@ -37,14 +49,7 @@ import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
-import '../popup/popup.target.js';
-import '../popup/popup.js';
-import '../popup/position.js';
-import '../popup/popup.consts.js';
-import '../popup/position-css.js';
-import '../_helpers/theme.js';
-import '../_helpers/dialog-body-scroll-preventer.js';
-import 'scrollbar-width';
+import '../dialog/dialog-geometry.js';
 import '../loader-screen/loader-screen.js';
 import '../loader/loader.js';
 import '../_helpers/loader-core.js';
@@ -58,6 +63,9 @@ const reactRoot = createRoot(containerElement);
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
+  if (!containerElement.isConnected) {
+    document.body.appendChild(containerElement);
+  }
   reactRoot.render(/*#__PURE__*/jsx(ControlsHeightContext, {
     value: getGlobalControlsHeight(),
     children: /*#__PURE__*/jsx(LoginDialog, {