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

package/components/auth-dialog-service/auth-dialog-service.js

@@ -10,6 +10,9 @@ export const reactRoot = createRoot(containerElement);
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
+    if (!containerElement.isConnected) {
+        document.body.appendChild(containerElement);
+    }
     reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
       <AuthDialog {...props}/>
     </ControlsHeightContext>);

package/components/confirm/confirm.js

@@ -27,17 +27,21 @@ export default class Confirm extends PureComponent {
     };
     render() {
         const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject, native, } = this.props;
+        const actions = [
+            <Button key='reject' data-test='confirm-reject-button' onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
+        {rejectLabel}
+      </Button>,
+            <Button key='confirm' data-test='confirm-ok-button' primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
+        {confirmLabel}
+      </Button>,
+        ];
+        if (cancelIsDefault) {
+            actions.reverse();
+        }
         return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test='ring-confirm' native={native}>
         {text && <Header>{text}</Header>}
         {description && <Content>{description}</Content>}
-        <Panel>
-          <Button data-test='confirm-ok-button' primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
-            {confirmLabel}
-          </Button>
-          <Button data-test='confirm-reject-button' onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
-            {rejectLabel}
-          </Button>
-        </Panel>
+        <Panel>{actions}</Panel>
       </Dialog>);
     }
 }

package/components/confirm-service/confirm-service.js

@@ -7,6 +7,9 @@ export const reactRoot = createRoot(containerElement);
  * Renders Confirm into virtual node to skip maintaining container
  */
 function renderConfirm(props) {
+    if (!containerElement.isConnected) {
+        document.body.appendChild(containerElement);
+    }
     const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
     reactRoot.render(<ControlsHeightContext value={buttonsHeight}>
       <Confirm {...restProps}/>

package/components/dialog/dialog-controls.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { InteractionDirection } from './dialog-geometry';
+interface DialogControlsProps {
+    movable: boolean | undefined;
+    resizable: boolean | undefined;
+    showCloseButton: boolean;
+    closeButtonTitle: string | undefined;
+    onCloseClick: React.MouseEventHandler<HTMLElement>;
+    onStartInteraction: (event: React.PointerEvent<HTMLElement>, direction: InteractionDirection) => void;
+    onStopInteraction: React.PointerEventHandler<HTMLElement>;
+}
+export default function DialogControls({ movable, resizable, showCloseButton, closeButtonTitle, onCloseClick, onStartInteraction, onStopInteraction, }: DialogControlsProps): React.JSX.Element;
+export {};

package/components/dialog/dialog-controls.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import closeIcon from '@jetbrains/icons/close';
+import resizeIcon from '@jetbrains/icons/resize-corner-12px';
+import Button from '../button/button';
+import Icon from '../icon/icon';
+import styles from './dialog.css';
+const resizeDirections = ['n', 'ne', 'e', 's', 'sw', 'w', 'nw', 'se'];
+export default function DialogControls({ movable, resizable, showCloseButton, closeButtonTitle, onCloseClick, onStartInteraction, onStopInteraction, }) {
+    return (<>
+      {movable && (<div aria-hidden='true' className={styles.moveHandle} data-ring-dialog-move-handle='' data-test='ring-dialog-move-handle' onLostPointerCapture={onStopInteraction}/>)}
+      {showCloseButton && (<Button icon={closeIcon} data-test='ring-dialog-close-button' className={styles.closeButton} iconClassName={styles.closeIcon} onClick={onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+      {resizable && (<>
+          {resizeDirections.map(direction => (<div aria-hidden='true' className={styles.resizeHandle} data-resize-direction={direction} data-test={`ring-dialog-resize-handle-${direction}`} key={direction} onPointerDown={event => onStartInteraction(event, direction)} onPointerUp={onStopInteraction} onPointerCancel={onStopInteraction} onLostPointerCapture={onStopInteraction}/>))}
+          <Icon aria-hidden='true' className={styles.resizeMarker} data-test='ring-dialog-resize-marker' glyph={resizeIcon}/>
+        </>)}
+    </>);
+}

package/components/dialog/dialog-geometry.d.ts

@@ -0,0 +1,31 @@
+export type ResizeDirection = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+export type InteractionDirection = 'move' | ResizeDirection;
+export interface Geometry {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface DialogState {
+    shortcutsScope: string;
+    geometry: Geometry | null;
+    resized: boolean;
+}
+export interface Interaction {
+    pointerId: number;
+    direction: InteractionDirection;
+    startX: number;
+    startY: number;
+    minWidth: number;
+    minHeight: number;
+    geometry: Geometry;
+}
+export declare const getNativeTabIndex: (autoFocusFirst: boolean | undefined) => -1 | undefined;
+export declare const getTrapDisabled: (trapFocus: boolean, trapDisabled: boolean | undefined) => boolean;
+export declare const getResizeMinimum: (element: Element) => {
+    minWidth: number;
+    minHeight: number;
+};
+export declare const moveGeometry: (start: Geometry, dx: number, dy: number, viewportWidth: number, viewportHeight: number) => Geometry;
+export declare const fitGeometry: (geometry: Geometry, viewportWidth: number, viewportHeight: number) => Geometry;
+export declare const resizeGeometry: ({ geometry: start, direction, minWidth, minHeight }: Interaction, dx: number, dy: number, viewportWidth: number, viewportHeight: number) => Geometry;

package/components/dialog/dialog-geometry.js

@@ -0,0 +1,48 @@
+const MIN_WIDTH = 256;
+const MIN_HEIGHT = 160;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const getNativeTabIndex = (autoFocusFirst) => (autoFocusFirst ? undefined : -1);
+export const getTrapDisabled = (trapFocus, trapDisabled) => trapDisabled ?? !trapFocus;
+export const getResizeMinimum = (element) => {
+    const { minWidth, minHeight } = getComputedStyle(element);
+    const parsedWidth = parseFloat(minWidth);
+    const parsedHeight = parseFloat(minHeight);
+    return {
+        minWidth: Number.isNaN(parsedWidth) ? MIN_WIDTH : parsedWidth,
+        minHeight: Number.isNaN(parsedHeight) ? MIN_HEIGHT : parsedHeight,
+    };
+};
+export const moveGeometry = (start, dx, dy, viewportWidth, viewportHeight) => ({
+    ...start,
+    left: clamp(start.left + dx, 0, Math.max(0, viewportWidth - start.width)),
+    top: clamp(start.top + dy, 0, Math.max(0, viewportHeight - start.height)),
+});
+export const fitGeometry = (geometry, viewportWidth, viewportHeight) => {
+    const width = Math.min(geometry.width, viewportWidth);
+    const height = Math.min(geometry.height, viewportHeight);
+    return {
+        left: clamp(geometry.left, 0, Math.max(0, viewportWidth - width)),
+        top: clamp(geometry.top, 0, Math.max(0, viewportHeight - height)),
+        width,
+        height,
+    };
+};
+export const resizeGeometry = ({ geometry: start, direction, minWidth, minHeight }, dx, dy, viewportWidth, viewportHeight) => {
+    let left = start.left;
+    let right = start.left + start.width;
+    let top = start.top;
+    let bottom = start.top + start.height;
+    if (direction.includes('w')) {
+        left = clamp(start.left + dx, 0, right - Math.min(minWidth, right));
+    }
+    else if (direction.includes('e')) {
+        right = clamp(right + dx, left + Math.min(minWidth, viewportWidth - left), viewportWidth);
+    }
+    if (direction.includes('n')) {
+        top = clamp(start.top + dy, 0, bottom - Math.min(minHeight, bottom));
+    }
+    else if (direction.includes('s')) {
+        bottom = clamp(bottom + dy, top + Math.min(minHeight, viewportHeight - top), viewportHeight);
+    }
+    return { left, top, width: right - left, height: bottom - top };
+};

package/components/dialog/dialog.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value header, scrollableWrapper from '../island/island.css';
+@value content as islandContent, header, title as islandTitle, scrollableWrapper from '../island/island.css';
 @value panel from '../panel/panel.css';
 
 .container {
@@ -41,40 +41,58 @@
 }
 
 .content {
+  --dialog-padding: calc(var(--ring-unit) * 2.5);
+
   position: relative;
 
-  width: calc(var(--ring-unit) * 58);
-  min-height: calc(var(--ring-unit) * 15);
+  box-sizing: border-box;
+  width: calc(var(--ring-unit) * 57.5);
+  min-width: var(--ring-dialog-min-width, calc(var(--ring-unit) * 32));
+  min-height: var(--ring-dialog-min-height, calc(var(--ring-unit) * 20));
   margin: auto;
+  padding: var(--dialog-padding);
 
   cursor: default;
   overflow-wrap: break-word;
 
   & .scrollableWrapper {
-    padding-bottom: var(--ring-unit);
+    padding: var(--ring-unit) var(--dialog-padding) 0;
+  }
+
+  & .islandContent {
+    width: calc(100% + var(--dialog-padding) * 2);
+    min-height: calc(var(--ring-unit) * 5);
+    margin-inline: calc(var(--dialog-padding) * -1);
   }
 
   & .panel {
-    margin-top: 0;
-    padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
+    margin-top: auto;
+    padding: calc(var(--ring-unit) * 3) 0 0;
 
-    border-top: 0;
+    text-align: end;
 
+    border-top: 0;
     background-color: transparent;
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .panel > button:not(:last-child) {
-    margin-right: var(--ring-unit);
+    margin-inline-end: var(--ring-unit);
   }
 }
 
-.contentCloseButtonOutside {
-  max-width: calc(100dvw - var(--ring-unit) * 8);
+.content {
+  max-width: calc(100dvw - var(--ring-unit) * 4);
+  max-height: calc(100dvh - var(--ring-unit) * 8);
 }
 
-.contentCloseButtonInside {
-  max-width: calc(100dvw - var(--ring-unit) * 4);
+.resized .content.content {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
 }
 
 .content.content {
@@ -91,10 +109,6 @@
   cursor: pointer;
 }
 
-.closeIconOutside.closeIconOutside {
-  color: var(--ring-icon-hover-color);
-}
-
 .clickableOverlay:hover + * .closeIcon {
   color: var(--ring-link-hover-color);
 }
@@ -105,18 +119,132 @@
 
 .closeButton.closeButton {
   position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  inset-block-start: calc(var(--ring-unit) * 2);
+  inset-inline-end: calc(var(--ring-unit) * 2);
 
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.closeButtonOutside {
+.moveHandle {
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+  right: 0;
+  left: 0;
+
+  height: var(--dialog-padding);
+
+  cursor: move;
+  touch-action: none;
+}
+
+.movable .header {
+  cursor: move;
+  touch-action: none;
+}
+
+.resizeHandle {
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+
+  touch-action: none;
+}
+
+.resizeHandle[data-resize-direction='n'],
+.resizeHandle[data-resize-direction='s'] {
+  right: var(--ring-unit);
+  left: var(--ring-unit);
+
+  height: var(--ring-unit);
+
+  cursor: ns-resize;
+}
+
+.resizeHandle[data-resize-direction='n'] {
+  top: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='s'] {
+  bottom: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='e'],
+.resizeHandle[data-resize-direction='w'] {
   top: var(--ring-unit);
-  right: calc(var(--ring-unit) * -3);
+  bottom: var(--ring-unit);
+
+  width: var(--ring-unit);
+
+  cursor: ew-resize;
 }
 
-.closeButtonInside {
-  top: calc(var(--ring-unit) * 2);
-  right: calc(var(--ring-unit) * 2);
+.resizeHandle[data-resize-direction='e'] {
+  right: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='w'] {
+  left: calc(var(--ring-unit) * -0.5);
+}
+
+.resizeHandle[data-resize-direction='ne'],
+.resizeHandle[data-resize-direction='se'],
+.resizeHandle[data-resize-direction='sw'],
+.resizeHandle[data-resize-direction='nw'] {
+  width: calc(var(--ring-unit) * 1.5);
+  height: calc(var(--ring-unit) * 1.5);
+}
+
+.resizeHandle[data-resize-direction='ne'] {
+  top: calc(var(--ring-unit) * -0.5);
+  right: calc(var(--ring-unit) * -0.5);
+
+  cursor: nesw-resize;
+}
+
+.resizeHandle[data-resize-direction='se'] {
+  right: calc(var(--ring-unit) * -0.5);
+  bottom: calc(var(--ring-unit) * -0.5);
+
+  width: calc(var(--ring-unit) * 2.5);
+  height: calc(var(--ring-unit) * 2.5);
+
+  cursor: nwse-resize;
+}
+
+.resizeHandle[data-resize-direction='sw'] {
+  bottom: calc(var(--ring-unit) * -0.5);
+  left: calc(var(--ring-unit) * -0.5);
+
+  cursor: nesw-resize;
+}
+
+.resizeHandle[data-resize-direction='nw'] {
+  top: calc(var(--ring-unit) * -0.5);
+  left: calc(var(--ring-unit) * -0.5);
+
+  cursor: nwse-resize;
+}
+
+.resizeMarker {
+  position: absolute;
+  bottom: calc(var(--ring-unit) * 0.5);
+  inset-inline-end: calc(var(--ring-unit) * 0.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: calc(var(--ring-unit) * 1.5);
+  height: calc(var(--ring-unit) * 1.5);
+
+  pointer-events: none;
+
+  color: var(--ring-secondary-color);
+
+  &:dir(rtl) {
+    transform: scaleX(-1);
+  }
 }
 
 .documentWithoutScroll {
@@ -141,16 +269,27 @@
 }
 
 .innerContainer .header {
-  padding-top: calc(var(--ring-unit) * 4);
+  width: calc(100% + var(--dialog-padding) * 2);
+  margin-inline: calc(var(--dialog-padding) * -1);
 
-  font-size: 24px;
-  line-height: 28px;
+  padding-block: 0;
+  padding-inline: var(--dialog-padding) calc(var(--dialog-padding) + var(--ring-unit) * 3);
+  padding-block-start: 0 !important;
+
+  font-size: calc(var(--ring-unit) * 2.5);
+  line-height: calc(var(--ring-unit) * 3);
 }
 
-.dense .header {
-  padding-top: calc(var(--ring-unit) * 2);
+.innerContainer .islandTitle {
+  float: none;
+
+  text-align: start;
+}
+
+.dense {
+  --dialog-padding: calc(var(--ring-unit) * 2);
 }
 
 .dense .panel {
-  padding-bottom: calc(var(--ring-unit) * 2);
+  padding-top: calc(var(--ring-unit) * 2);
 }

package/components/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
 import { type TabTrapObject, type TabTrapProps } from '../tab-trap/tab-trap';
+import { type DialogState, type Interaction, type InteractionDirection } from './dialog-geometry';
 import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;
@@ -11,8 +12,9 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
     shortcutOptions: ShortcutsScopeOptions;
-    closeButtonInside: boolean;
     closeButtonTitle?: string;
+    movable?: boolean;
+    resizable?: boolean;
     trapFocus: boolean;
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
@@ -22,11 +24,9 @@ export interface DialogProps extends Partial<TabTrapProps> {
     modal?: boolean;
     preventBodyScroll?: boolean;
 }
-export default class Dialog extends PureComponent<DialogProps> {
+export default class Dialog extends PureComponent<DialogProps, DialogState> {
     static defaultProps: Partial<DialogProps>;
-    state: {
-        shortcutsScope: string;
-    };
+    state: DialogState;
     componentDidMount(): void;
     componentDidUpdate(prevProps: DialogProps): void;
     componentWillUnmount(): void;
@@ -45,6 +45,14 @@ export default class Dialog extends PureComponent<DialogProps> {
     dialog?: HTMLElement | null;
     dialogRef: (tabTrapObj: TabTrapObject | null) => void;
     nativeDialog: React.RefObject<HTMLDialogElement | null>;
+    innerContainer: React.RefObject<HTMLDivElement | null>;
+    interaction: Interaction | null;
+    resizeMinimum: Pick<Interaction, 'minWidth' | 'minHeight'> | null;
+    fitGeometryToViewport: () => void;
+    startInteraction: (event: React.PointerEvent<HTMLElement>, direction: InteractionDirection) => void;
+    continueInteraction: (event: React.PointerEvent<HTMLElement>) => void;
+    stopInteraction: (event: React.PointerEvent<HTMLElement>) => void;
+    startMove: (event: React.PointerEvent<HTMLElement>) => void;
     render(): false | React.JSX.Element;
 }
 export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -2,20 +2,19 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
 import { AdaptiveIsland } from '../island/island';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import Shortcuts from '../shortcuts/shortcuts';
 import TabTrap from '../tab-trap/tab-trap';
-import Button from '../button/button';
 import { normalizePopupTarget, PopupTarget, PopupTargetContext } from '../popup/popup.target';
 import { getPopupContainer } from '../popup/popup';
+import getViewportSize from '../global/get-viewport-size';
 import { preventerFactory as scrollPreventerFactory } from './dialog-body-scroll-preventer';
+import DialogControls from './dialog-controls';
+import { fitGeometry, getNativeTabIndex, getResizeMinimum, getTrapDisabled, moveGeometry, resizeGeometry, } from './dialog-geometry';
 import styles from './dialog.css';
-/**
- * @name Dialog
- */
+/** @name Dialog */
 function noop() { }
 export default class Dialog extends PureComponent {
     static defaultProps = {
@@ -25,21 +24,22 @@ export default 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-'),
-    };
+    state = { shortcutsScope: getUID('ring-dialog-'), geometry: null, resized: false };
     componentDidMount() {
         const { show, native } = this.props;
         if (native && show) {
             this.toggleNativeDialog();
         }
+        window.addEventListener('resize', this.fitGeometryToViewport);
         this.toggleScrollPreventer();
     }
     componentDidUpdate(prevProps) {
@@ -49,15 +49,23 @@ export default 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 = scrollPreventerFactory(getUID('preventer-'));
     uid = getUID('dialog-');
     toggleNativeDialog() {
-        const { show, modal } = this.props;
+        const { show, modal, autoFocusFirst } = this.props;
         if (this.nativeDialog.current) {
             if (show) {
                 this.nativeDialog.current.removeAttribute('open');
@@ -67,6 +75,9 @@ export default 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();
@@ -99,42 +110,112 @@ export default class Dialog extends PureComponent {
                 this.props.onCloseAttempt(event);
             }
         };
-        return {
-            esc: onEscape,
-        };
+        return { esc: onEscape };
     };
     dialog;
     dialogRef = (tabTrapObj) => {
         this.dialog = tabTrapObj && tabTrapObj.node;
     };
     nativeDialog = createRef();
+    innerContainer = 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) => {
+        if ((event.button ?? 0) !== 0 || !this.innerContainer.current) {
+            return;
+        }
+        const { left, top, width, height } = this.innerContainer.current.getBoundingClientRect();
+        const resizeMinimum = 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, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, movable, resizable, autoFocusFirst, focusBackOnClose, focusBackOnExit, trapDisabled, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         const content = (<>
-        <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
+        <Shortcuts disabled={!show} map={shortcutsMap} scope={this.state.shortcutsScope} options={shortcutOptions}/>
         {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
             // click handler is duplicated in close button
             role='presentation' className={styles.clickableOverlay} onClick={this.handleClick} data-test='ring-dialog-overlay'/>)}
-        <div className={styles.innerContainer}>
+        <div 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}>
           <AdaptiveIsland className={classNames(styles.content, contentClassName, {
                 [styles.dense]: dense,
-                [styles.contentCloseButtonOutside]: !closeButtonInside,
-                [styles.contentCloseButtonInside]: closeButtonInside,
-            })} data-test='ring-dialog' role='dialog' aria-label={label}>
+                [styles.movable]: movable,
+            })} data-test='ring-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}
-            {showCloseButton && (<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'}/>)}
+            <DialogControls movable={movable} resizable={resizable} showCloseButton={showCloseButton} closeButtonTitle={closeButtonTitle} onCloseClick={this.onCloseClick} onStartInteraction={this.startInteraction} onStopInteraction={this.stopInteraction}/>
           </AdaptiveIsland>
         </div>
       </>);
         if (native) {
-            return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog} data-rg-modal-dialog-container={modal ? '' : undefined}>
+            return (<dialog {...restProps} aria-label={label} className={classNames(styles.nativeDialog, className)} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.nativeDialog} tabIndex={getNativeTabIndex(autoFocusFirst)} onCancel={event => event.preventDefault()} data-rg-modal-dialog-container={modal ? '' : undefined}>
           <PopupTarget id={this.uid} className={styles.popupTarget}>
             {target => (<>
                 {content}
@@ -157,7 +238,7 @@ export default class Dialog extends PureComponent {
                     }
                 }
                 return createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
-                {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} data-rg-modal-dialog-container='' ref={this.dialogRef} className={classes} role='presentation' {...restProps}>
+                {target => (<TabTrap trapDisabled={getTrapDisabled(trapFocus, trapDisabled)} autoFocusFirst={autoFocusFirst} focusBackOnClose={focusBackOnClose} focusBackOnExit={focusBackOnExit} data-test={dataTests('ring-dialog-container', dataTest)} data-rg-modal-dialog-container='' ref={this.dialogRef} className={classes} role='presentation' {...restProps}>
                     {content}
                     {target}
                   </TabTrap>)}

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,5 @@
+const getViewportSize = () => ({
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: document.documentElement.clientHeight || window.innerHeight,
+});
+export default getViewportSize;

package/components/http/http.js

@@ -97,23 +97,12 @@ export default 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 { body, query = {}, ...fetchConfig } = params;

package/components/island/header.js

@@ -56,7 +56,7 @@ class Header extends Component {
             }
             : undefined;
         const titleStyle = this.getTitleStyle(phase);
-        return (<div {...restProps} data-test='ring-island-header' className={classes} style={headerStyle}>
+        return (<div {...restProps} data-ring-island-header='' data-test='ring-island-header' className={classes} style={headerStyle}>
         {wrapWithTitle && (<h2 className={styles.title} style={titleStyle}>
             {children}
           </h2>)}

package/components/login-dialog/service.js

@@ -7,6 +7,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(<ControlsHeightContext value={getGlobalControlsHeight()}>
       <LoginDialog {...props}/>
     </ControlsHeightContext>);

package/components/panel/panel.css

@@ -13,6 +13,6 @@
   }
 
   & > button:not(:last-child) {
-    margin-right: var(--ring-unit);
+    margin-inline-end: var(--ring-unit);
   }
 }

package/components/user-agreement/service.js

@@ -188,6 +188,9 @@ export default class UserAgreementService {
                     preview,
                     ...restOptions,
                 };
+                if (!this.container.isConnected) {
+                    document.body.appendChild(this.container);
+                }
                 this.reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
             <UserAgreement {...props}/>
           </ControlsHeightContext>);

package/components/user-agreement/user-agreement.css

@@ -2,10 +2,6 @@
 
 @value extra-small-screen-media from '../global/global.css';
 
-.agreementDialog {
-  padding-bottom: 80px;
-}
-
 .dialogContent {
   width: 600px;
 
@@ -17,13 +13,11 @@
 }
 
 .suggestion {
+  margin-inline-end: var(--ring-unit);
+
   padding-bottom: var(--ring-unit);
 
   white-space: nowrap;
 
   font-size: 12px;
 }
-
-.remindLaterButton {
-  float: right;
-}

package/components/user-agreement/user-agreement.js

@@ -2,7 +2,6 @@
  * @name User Agreement
  */
 import { PureComponent } from 'react';
-import classNames from 'classnames';
 import Dialog from '../dialog/dialog';
 import { Content, Header } from '../island/island';
 import Panel from '../panel/panel';
@@ -29,26 +28,25 @@ export default class UserAgreement extends PureComponent {
         const { translations, onAccept, onDecline, onClose, onRemindLater, children, show, preview, className } = this.props;
         return (<I18nContext.Consumer>
         {/* eslint-disable-next-line complexity */}
-        {({ translate }) => (<Dialog label={translations?.userAgreement ?? translate('userAgreement')} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test='user-agreement'>
+        {({ translate }) => (<Dialog label={translations?.userAgreement ?? translate('userAgreement')} show={show} className={className ?? undefined} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test='user-agreement'>
             <Header>{translations?.userAgreement ?? translate('userAgreement')}</Header>
             <Content tabIndex={0} fade onScrollToBottom={this.onScrollToBottom}>
               {children}
             </Content>
             {!preview && (<Panel>
                 {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations?.scrollToAccept ?? translate('scrollToAccept')}</div>)}
-                <Button primary disabled={!scrolledDown} onClick={onAccept} data-test='accept'>
-                  {translations?.accept ?? translate('accept')}
-                </Button>
-                <Button onClick={onDecline} autoFocus data-test='decline'>
-                  {translations?.decline ?? translate('decline')}
-                </Button>
-
                 {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>
                     {translations?.scrollToAccept ?? translate('scrollToAccept')}
                   </span>)}
-                {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test='later'>
+                <Button onClick={onDecline} autoFocus data-test='decline'>
+                  {translations?.decline ?? translate('decline')}
+                </Button>
+                {onRemindLater && (<Button onClick={onRemindLater} data-test='later'>
                     {translations?.remindLater ?? translate('remindLater')}
                   </Button>)}
+                <Button primary disabled={!scrolledDown} onClick={onAccept} data-test='accept'>
+                  {translations?.accept ?? translate('accept')}
+                </Button>
               </Panel>)}
             {preview && (<Panel>
                 <Button onClick={onClose} autoFocus data-test='close'>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.10",
+  "version": "8.0.0-beta.11",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -218,7 +218,7 @@
     "@babel/core": "^7.29.7",
     "@babel/preset-typescript": "^8.0.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.23.0",
+    "@jetbrains/icons": "^5.23.3",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -240,8 +240,8 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.15",
-    "postcss-calc": "^10.1.1",
+    "postcss": "^8.5.25",
+    "postcss-calc": "^11.0.1",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",
@@ -258,7 +258,7 @@
     "util-deprecate": "^1.0.2"
   },
   "engines": {
-    "node": ">=14.0",
+    "node": "^22.22.3 || ^24.15 || >=26.0",
     "npm": ">=6.0.0"
   },
   "bugs": {