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

package/components/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
-import TabTrap, { type TabTrapProps } from '../tab-trap/tab-trap';
+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;
@@ -43,8 +43,16 @@ export default class Dialog extends PureComponent<DialogProps> {
         esc: (event: KeyboardEvent) => void;
     };
     dialog?: HTMLElement | null;
-    dialogRef: (tabTrap: TabTrap | null) => void;
+    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

@@ -1,22 +1,24 @@
 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';
 import '../_helpers/island.js';
 import '../island/header.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../island/content.js';
 import 'element-resize-detector';
 import '../global/schedule-raf.js';
@@ -26,22 +28,25 @@ 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 'util-deprecate';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.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();
       }
@@ -139,10 +160,113 @@ class Dialog extends PureComponent {
     };
   };
   dialog;
-  dialogRef = tabTrap => {
-    this.dialog = tabTrap && tabTrap.node;
+  dialogRef = tabTrapObj => {
+    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/dropdown/anchor.js

@@ -1,4 +1,4 @@
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import 'react';
 import 'classnames';
 import '../button/button.js';
@@ -6,12 +6,12 @@ export { A as default } from '../_helpers/anchor.js';
 import 'react/jsx-runtime';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button.classes.js';

package/components/dropdown/dropdown.js

@@ -4,18 +4,18 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import { isArray } from '../global/typescript-utils.js';
 import { s as styles, A as Anchor } from '../_helpers/anchor.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 
 class Dropdown extends Component {

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type Ref, type ReactNode } from 'react';
+import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type ReactNode } from 'react';
 import { type SelectHandlerParams } from '../list/list';
 import { type AnchorProps, type DropdownAttrs, type DropdownChildrenFunction } from '../dropdown/dropdown';
 import PopupMenu, { type PopupMenuAttrs } from '../popup-menu/popup-menu';
@@ -10,6 +10,7 @@ export interface DropdownAnchorWrapperProps extends AnchorProps {
 }
 type OnSelectHandler<T> = ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
 export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+    ref?: React.Ref<PopupMenu<T> | null>;
     anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     data?: readonly ListDataItem<T>[] | undefined;
     ariaLabel?: string | null | undefined;
@@ -17,9 +18,8 @@ export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anc
     menuProps?: PopupMenuAttrs<T> | null | undefined;
     children?: DropdownChildrenFunction;
 }
-declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
-    ref?: Ref<PopupMenu>;
-}) => ReactElement | null) & {
+declare function DropdownMenu<T = unknown>({ ref, id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }: DropdownMenuProps<T>): import("react").JSX.Element;
+declare const _default: typeof DropdownMenu & {
     ListProps: {
         Type: typeof import("../list/consts").Type;
         Dimension: {