@jetbrains/ring-ui 6.0.63 → 6.0.65

package/components/dialog/dialog.d.ts

@@ -1,6 +1,5 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
 import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
@@ -24,26 +23,6 @@ export interface DialogProps extends Partial<TabTrapProps> {
     preventBodyScroll?: boolean;
 }
 export default class Dialog extends PureComponent<DialogProps> {
-    static propTypes: {
-        label: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        contentClassName: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        show: PropTypes.Validator<boolean>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        closeButtonInside: PropTypes.Requireable<boolean>;
-        closeButtonTitle: PropTypes.Requireable<string>;
-        onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
-        onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
-        shortcutOptions: PropTypes.Requireable<object>;
-        onCloseAttempt: PropTypes.Requireable<(...args: any[]) => any>;
-        trapFocus: PropTypes.Requireable<boolean>;
-        portalTarget: PropTypes.Requireable<HTMLElement>;
-        autoFocusFirst: PropTypes.Requireable<boolean>;
-        'data-test': PropTypes.Requireable<string>;
-        preventBodyScroll: PropTypes.Requireable<boolean>;
-    };
     static defaultProps: Partial<DialogProps>;
     state: {
         shortcutsScope: string;
@@ -68,4 +47,4 @@ export default class Dialog extends PureComponent<DialogProps> {
     nativeDialog: React.RefObject<HTMLDialogElement>;
     render(): false | React.JSX.Element;
 }
-export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
+export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -1,7 +1,6 @@
 import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
 import { AdaptiveIsland } from '../island/island';
@@ -10,7 +9,8 @@ import dataTests from '../global/data-tests';
 import Shortcuts from '../shortcuts/shortcuts';
 import TabTrap from '../tab-trap/tab-trap';
 import Button from '../button/button';
-import { PopupTarget } from '../popup/popup.target';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
+import { getPopupContainer } from '../popup/popup';
 import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
 import styles from './dialog.css';
 /**
@@ -18,32 +18,6 @@ import styles from './dialog.css';
  */
 function noop() { }
 export default class Dialog extends PureComponent {
-    static propTypes = {
-        label: PropTypes.string,
-        className: PropTypes.string,
-        contentClassName: PropTypes.string,
-        children: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.node),
-            PropTypes.node
-        ]),
-        show: PropTypes.bool.isRequired,
-        showCloseButton: PropTypes.bool,
-        closeButtonInside: PropTypes.bool,
-        closeButtonTitle: PropTypes.string,
-        onOverlayClick: PropTypes.func,
-        onEscPress: PropTypes.func,
-        onCloseClick: PropTypes.func,
-        shortcutOptions: PropTypes.object,
-        // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
-        // Use it if you don't need different behaviors for this cases.
-        onCloseAttempt: PropTypes.func,
-        // focusTrap may break popups inside dialog, so use it carefully
-        trapFocus: PropTypes.bool,
-        portalTarget: PropTypes.instanceOf(HTMLElement),
-        autoFocusFirst: PropTypes.bool,
-        'data-test': PropTypes.string,
-        preventBodyScroll: PropTypes.bool
-    };
     static defaultProps = {
         label: 'Dialog',
         onOverlayClick: noop,
@@ -87,7 +61,12 @@ export default class Dialog extends PureComponent {
         if (this.nativeDialog.current != null) {
             if (show) {
                 this.nativeDialog.current.removeAttribute('open');
-                modal ? this.nativeDialog.current.showModal() : this.nativeDialog.current.show();
+                if (modal) {
+                    this.nativeDialog.current.showModal();
+                }
+                else {
+                    this.nativeDialog.current.show();
+                }
             }
             else {
                 this.nativeDialog.current.close();
@@ -137,30 +116,48 @@ export default class Dialog extends PureComponent {
         <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
         {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
             // click handler is duplicated in close button
-            role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
+            role="presentation" className={styles.clickableOverlay} onClick={this.handleClick} data-test="ring-dialog-overlay"/>)}
         <div className={styles.innerContainer}>
-          <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
+          <AdaptiveIsland className={classNames(styles.content, contentClassName, {
+                [styles.dense]: dense
+            })} data-test="ring-dialog" role="dialog" aria-label={label}>
             {children}
-            {showCloseButton &&
-                (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
-                        [styles.closeButtonOutside]: !closeButtonInside,
-                        [styles.closeButtonInside]: closeButtonInside
-                    })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+            {showCloseButton && (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
+                    [styles.closeButtonOutside]: !closeButtonInside,
+                    [styles.closeButtonInside]: closeButtonInside
+                })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
           </AdaptiveIsland>
         </div>
       </>);
         if (native) {
             return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog}>
           <PopupTarget id={this.uid} className={styles.popupTarget}>
-            {target => <>{content}{target}</>}
+            {target => (<>
+                {content}
+                {target}
+              </>)}
           </PopupTarget>
         </dialog>);
         }
-        return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
-        {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
-              {content}
-              {target}
-            </TabTrap>)}
-      </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body);
+        return (show && (<PopupTargetContext.Consumer>
+          {contextTarget => {
+                let targetElement = document.body;
+                if (portalTarget instanceof HTMLElement) {
+                    targetElement = portalTarget;
+                }
+                else if (contextTarget != null) {
+                    const container = getPopupContainer(contextTarget);
+                    if (container != null) {
+                        targetElement = container;
+                    }
+                }
+                return createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+                {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
+                    {content}
+                    {target}
+                  </TabTrap>)}
+              </PopupTarget>, targetElement);
+            }}
+        </PopupTargetContext.Consumer>));
     }
 }

package/components/global/focus-sensor-hoc.js

@@ -28,7 +28,8 @@ export default function focusSensorHOC(ComposedComponent) {
         }
         componentDidUpdate(prevProps) {
             const { focused } = this.props;
-            if (focused && !prevProps.focused) {
+            const isInFocus = this.node?.contains(document.activeElement);
+            if (focused && (!isInFocus || !prevProps.focused)) {
                 this.onFocusRestore();
             }
             else if (!focused && prevProps.focused) {

package/components/popup/popup.d.ts

@@ -53,7 +53,6 @@ export interface PopupProps extends BasePopupProps {
 }
 interface PopupState {
     display: Display;
-    client?: boolean;
     direction?: Directions;
 }
 /**
@@ -98,7 +97,6 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     uid: string;
     calculateDisplay: (prevState: PopupState) => {
         display: Display;
-        client?: boolean;
         direction?: Directions;
     };
     static PopupProps: {
@@ -120,6 +118,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     private _redraw;
     private _getAnchor;
     private _listenersEnabled?;
+    private _prevTimeout?;
     /**
      * @param {boolean} enable
      * @private

package/components/popup/popup.js

@@ -71,9 +71,6 @@ export default class Popup extends PureComponent {
         display: Display.SHOWING
     };
     componentDidMount() {
-        if (!this.props.client) {
-            this.setState({ client: true });
-        }
         if (!this.props.hidden) {
             this._setListenersEnabled(true);
         }
@@ -195,13 +192,15 @@ export default class Popup extends PureComponent {
         return this.props.anchorElement || this.parent;
     }
     _listenersEnabled;
+    _prevTimeout;
     /**
      * @param {boolean} enable
      * @private
      */
     _setListenersEnabled(enable) {
         if (enable && !this._listenersEnabled) {
-            setTimeout(() => {
+            clearTimeout(this._prevTimeout);
+            this._prevTimeout = window.setTimeout(() => {
                 this._listenersEnabled = true;
                 this.listeners.add(window, 'resize', this._redraw);
                 if (this.props.autoPositioningOnScroll) {
@@ -218,6 +217,7 @@ export default class Popup extends PureComponent {
         }
         if (!enable && this._listenersEnabled) {
             this.listeners.removeAll();
+            clearTimeout(this._prevTimeout);
             this._listenersEnabled = false;
         }
     }
@@ -283,7 +283,7 @@ export default class Popup extends PureComponent {
               {this.shouldUseShortcuts() &&
                         (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
-              {(client || this.state.client) && (keepMounted || !hidden) && createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
+              {client !== false && (keepMounted || !hidden) && createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
                   <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
                     // mouse handlers are used to track clicking on inner elements
                     role="presentation">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.63",
+  "version": "6.0.65",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",