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

package/components/_helpers/dialog.js

@@ -0,0 +1,3 @@
+var styles = {"islandContent":"ring-island-content","header":"ring-island-header","islandTitle":"ring-island-title","scrollableWrapper":"ring-island-scrollableWrapper","panel":"ring-panel-panel","container":"ring-dialog-container","nativeDialog":"ring-dialog-nativeDialog","innerContainer":"ring-dialog-innerContainer","content":"ring-dialog-content","resized":"ring-dialog-resized","clickableOverlay":"ring-dialog-clickableOverlay","closeIcon":"ring-dialog-closeIcon","closeButton":"ring-dialog-closeButton","moveHandle":"ring-dialog-moveHandle","movable":"ring-dialog-movable","resizeHandle":"ring-dialog-resizeHandle","resizeMarker":"ring-dialog-resizeMarker","documentWithoutScroll":"ring-dialog-documentWithoutScroll","popupTarget":"ring-dialog-popupTarget","dense":"ring-dialog-dense"};
+
+export { styles as s };

package/components/auth/iframe-flow.js

@@ -11,7 +11,6 @@ import '../login-dialog/login-dialog.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';
@@ -31,6 +30,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';
@@ -40,14 +52,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';

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

@@ -12,7 +12,6 @@ import '../global/schedule-raf.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
 import 'react-dom';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/header.js';
@@ -32,18 +31,24 @@ 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 '../global/get-viewport-size.js';
+import '../dialog/dialog-body-scroll-preventer.js';
 import 'scrollbar-width';
-import '@jetbrains/icons/chevron-down';
-import '@jetbrains/icons/chevron-12px-down';
+import '../_helpers/dialog.js';
+import '../dialog/dialog-controls.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
 import '../_helpers/button.classes.js';
+import '../dialog/dialog-geometry.js';
 import '../_helpers/heading.js';
 
 var styles = {"dialog":"ring-auth-dialog-dialog","content":"ring-auth-dialog-content ring-global-font","button":"ring-auth-dialog-button","firstButton":"ring-auth-dialog-firstButton ring-auth-dialog-button","title":"ring-auth-dialog-title","logo":"ring-auth-dialog-logo","error":"ring-auth-dialog-error"};

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

@@ -15,7 +15,6 @@ import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
 import '../dialog/dialog.js';
 import 'react-dom';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/header.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 '../heading/heading.js';
 import '../_helpers/heading.js';
 
@@ -54,6 +59,9 @@ 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(/*#__PURE__*/jsx(ControlsHeightContext, {
     value: getGlobalControlsHeight(),
     children: /*#__PURE__*/jsx(AuthDialog, {

package/components/confirm/confirm.js

@@ -8,7 +8,6 @@ import HeaderWrapper from '../island/header.js';
 import ContentWrapper from '../island/content.js';
 import Panel from '../panel/panel.js';
 import 'react-dom';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/adaptive-island-hoc.js';
@@ -32,18 +31,24 @@ 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 '../global/get-viewport-size.js';
+import '../dialog/dialog-body-scroll-preventer.js';
 import 'scrollbar-width';
-import '@jetbrains/icons/chevron-down';
-import '@jetbrains/icons/chevron-12px-down';
+import '../_helpers/dialog.js';
+import '../dialog/dialog-controls.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
 import '../_helpers/button.classes.js';
+import '../dialog/dialog-geometry.js';
 
 class Confirm extends PureComponent {
   static defaultProps = {
@@ -77,6 +82,23 @@ class Confirm extends PureComponent {
       onReject,
       native
     } = this.props;
+    const actions = [/*#__PURE__*/jsx(Button, {
+      "data-test": "confirm-reject-button",
+      onClick: onReject,
+      disabled: inProgress,
+      primary: cancelIsDefault,
+      children: rejectLabel
+    }, 'reject'), /*#__PURE__*/jsx(Button, {
+      "data-test": "confirm-ok-button",
+      primary: !cancelIsDefault,
+      loader: inProgress,
+      disabled: inProgress,
+      onClick: onConfirm,
+      children: confirmLabel
+    }, 'confirm')];
+    if (cancelIsDefault) {
+      actions.reverse();
+    }
     return /*#__PURE__*/jsxs(Dialog, {
       label: text || (typeof description === 'string' ? description : undefined),
       className: className,
@@ -89,21 +111,8 @@ class Confirm extends PureComponent {
         children: text
       }), description && /*#__PURE__*/jsx(ContentWrapper, {
         children: description
-      }), /*#__PURE__*/jsxs(Panel, {
-        children: [/*#__PURE__*/jsx(Button, {
-          "data-test": "confirm-ok-button",
-          primary: !cancelIsDefault,
-          loader: inProgress,
-          disabled: inProgress,
-          onClick: onConfirm,
-          children: confirmLabel
-        }), /*#__PURE__*/jsx(Button, {
-          "data-test": "confirm-reject-button",
-          onClick: onReject,
-          disabled: inProgress,
-          primary: cancelIsDefault,
-          children: rejectLabel
-        })]
+      }), /*#__PURE__*/jsx(Panel, {
+        children: actions
       })]
     });
   }

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

@@ -6,7 +6,6 @@ import 'react';
 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';
@@ -26,6 +25,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';
@@ -36,15 +49,7 @@ import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
-import '../global/configuration.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 '../panel/panel.js';
 
 const containerElement = document.createElement('div');
@@ -53,6 +58,9 @@ 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

package/components/dialog/dialog-body-scroll-preventer.js

@@ -1,2 +1,49 @@
-import 'scrollbar-width';
-export { d as default, p as preventerFactory } from '../_helpers/dialog-body-scroll-preventer.js';
+import scrollbarWidth from 'scrollbar-width';
+import { s as styles } from '../_helpers/dialog.js';
+
+const isPrevented = new Set();
+let previousDocumentWidth = null;
+const prevent = key => {
+  if (isPrevented.has(key)) {
+    return;
+  }
+  isPrevented.add(key);
+  if (isPrevented.size > 1) {
+    return;
+  }
+  const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight || getComputedStyle(document.documentElement).overflowY === 'scroll';
+  document.documentElement.classList.add(styles.documentWithoutScroll);
+  const scrollWidth = scrollbarWidth();
+  const {
+    scrollbarGutter
+  } = getComputedStyle(document.documentElement);
+  const documentHasScrollbarGutter = scrollbarGutter === 'stable' || scrollbarGutter === 'both-edges';
+  if (documentHasScroll && scrollWidth !== null && scrollWidth !== undefined && scrollWidth > 0 && !documentHasScrollbarGutter) {
+    previousDocumentWidth = document.documentElement.style.width;
+    document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
+  }
+};
+const reset = key => {
+  if (isPrevented.size === 0) {
+    return;
+  }
+  isPrevented.delete(key);
+  if (isPrevented.size > 0) {
+    return;
+  }
+  document.documentElement.classList.remove(styles.documentWithoutScroll);
+  if (previousDocumentWidth !== null && previousDocumentWidth !== undefined) {
+    document.documentElement.style.width = previousDocumentWidth;
+    previousDocumentWidth = null;
+  }
+};
+const preventerFactory = key => {
+  const preventerKey = key || Math.random();
+  return {
+    prevent: () => prevent(preventerKey),
+    reset: () => reset(preventerKey)
+  };
+};
+var dialogBodyScrollPreventer = preventerFactory('default-preventer');
+
+export { dialogBodyScrollPreventer as default, preventerFactory };

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,113 @@
+import { c } from 'react/compiler-runtime';
+import 'react';
+import closeIcon from '@jetbrains/icons/close';
+import resizeIcon from '@jetbrains/icons/resize-corner-12px';
+import { Button } from '../button/button.js';
+import Icon from '../icon/icon.js';
+import { s as styles } from '../_helpers/dialog.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'classnames';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/chevron-12px-down';
+import '../link/clickable-link.js';
+import '../global/controls-height.js';
+import 'util-deprecate';
+import '../global/configuration.js';
+import '../_helpers/button.classes.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+
+const resizeDirections = ['n', 'ne', 'e', 's', 'sw', 'w', 'nw', 'se'];
+function DialogControls(t0) {
+  const $ = c(16);
+  if ($[0] !== "3b5393fdb3ab1f8cc9dae0ff6911750d56209b75ddbd239bbce35cfb2f2ab34c") {
+    for (let $i = 0; $i < 16; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "3b5393fdb3ab1f8cc9dae0ff6911750d56209b75ddbd239bbce35cfb2f2ab34c";
+  }
+  const {
+    movable,
+    resizable,
+    showCloseButton,
+    closeButtonTitle,
+    onCloseClick,
+    onStartInteraction,
+    onStopInteraction
+  } = t0;
+  let t1;
+  if ($[1] !== movable || $[2] !== onStopInteraction) {
+    t1 = movable && /*#__PURE__*/jsx("div", {
+      "aria-hidden": "true",
+      className: styles.moveHandle,
+      "data-ring-dialog-move-handle": "",
+      "data-test": "ring-dialog-move-handle",
+      onLostPointerCapture: onStopInteraction
+    });
+    $[1] = movable;
+    $[2] = onStopInteraction;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== closeButtonTitle || $[5] !== onCloseClick || $[6] !== showCloseButton) {
+    t2 = showCloseButton && /*#__PURE__*/jsx(Button, {
+      icon: closeIcon,
+      "data-test": "ring-dialog-close-button",
+      className: styles.closeButton,
+      iconClassName: styles.closeIcon,
+      onClick: onCloseClick,
+      title: closeButtonTitle,
+      "aria-label": closeButtonTitle || "close dialog"
+    });
+    $[4] = closeButtonTitle;
+    $[5] = onCloseClick;
+    $[6] = showCloseButton;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== onStartInteraction || $[9] !== onStopInteraction || $[10] !== resizable) {
+    t3 = resizable && /*#__PURE__*/jsxs(Fragment, {
+      children: [resizeDirections.map(direction => /*#__PURE__*/jsx("div", {
+        "aria-hidden": "true",
+        className: styles.resizeHandle,
+        "data-resize-direction": direction,
+        "data-test": `ring-dialog-resize-handle-${direction}`,
+        onPointerDown: event => onStartInteraction(event, direction),
+        onPointerUp: onStopInteraction,
+        onPointerCancel: onStopInteraction,
+        onLostPointerCapture: onStopInteraction
+      }, direction)), /*#__PURE__*/jsx(Icon, {
+        "aria-hidden": "true",
+        className: styles.resizeMarker,
+        "data-test": "ring-dialog-resize-marker",
+        glyph: resizeIcon
+      })]
+    });
+    $[8] = onStartInteraction;
+    $[9] = onStopInteraction;
+    $[10] = resizable;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+    t4 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t1, t2, t3]
+    });
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
+}
+
+export { DialogControls as default };

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,63 @@
+import 'core-js/modules/es.array.includes.js';
+
+const MIN_WIDTH = 256;
+const MIN_HEIGHT = 160;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getNativeTabIndex = autoFocusFirst => autoFocusFirst ? undefined : -1;
+const getTrapDisabled = (trapFocus, trapDisabled) => trapDisabled !== null && trapDisabled !== void 0 ? trapDisabled : !trapFocus;
+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
+  };
+};
+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))
+});
+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
+  };
+};
+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
+  };
+};
+
+export { fitGeometry, getNativeTabIndex, getResizeMinimum, getTrapDisabled, moveGeometry, resizeGeometry };

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>;