@jetbrains/ring-ui 7.0.80 → 7.0.82

package/components/dialog/dialog.js

@@ -9,7 +9,7 @@ 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, PopupTargetContext } from '../popup/popup.target';
+import { normalizePopupTarget, 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';
@@ -144,12 +144,13 @@ export default class Dialog extends PureComponent {
         }
         return (show && (<PopupTargetContext.Consumer>
           {contextTarget => {
+                const normalizedContextTarget = normalizePopupTarget(contextTarget);
                 let targetElement = document.body;
                 if (portalTarget instanceof HTMLElement) {
                     targetElement = portalTarget;
                 }
-                else if (contextTarget !== undefined) {
-                    const container = getPopupContainer(contextTarget);
+                else if (normalizedContextTarget !== undefined) {
+                    const container = getPopupContainer(normalizedContextTarget);
                     if (container) {
                         targetElement = container;
                     }

package/components/dropdown/dropdown.css

@@ -4,6 +4,10 @@
   display: inline-block;
 }
 
+.clickInterceptor {
+  display: contents;
+}
+
 .anchor.anchor {
   margin-inline: -3px;
   padding-inline: 3px;

package/components/dropdown/dropdown.js

@@ -125,10 +125,12 @@ export default class Dropdown extends Component {
             onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
             dontCloseOnAnchorClick: true,
         };
-        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
-        // anchorElement should be a `button` or an `a`
-        role='presentation' onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
-        {anchorElement}
+        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
+        {clickMode ? (<div data-test='ring-dropdown-anchor-click-interceptor' className={styles.clickInterceptor} onClick={this.onClick} 
+            // anchorElement should be a `button` or an `a`
+            role='presentation'>
+            {anchorElement}
+          </div>) : (anchorElement)}
         {typeof children === 'function'
                 ? children(childProps)
                 : cloneElement(children, childProps)}

package/components/popup/popup.d.ts

@@ -94,6 +94,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     parent?: HTMLElement | null;
     container?: HTMLElement | null;
     ringPopupTarget?: string | Element;
+    private cssPositioningFromContext;
     clickStartedInsidePopup: boolean;
     shouldUseShortcuts(): boolean;
     listeners: Listeners;

package/components/popup/popup.js

@@ -15,33 +15,11 @@ import TabTrap from '../tab-trap/tab-trap';
 import { getConfiguration } from '../global/configuration';
 import position from './position';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
-import { PopupTargetContext, PopupTarget } from './popup.target';
+import { PopupTargetContext, PopupTarget, normalizePopupTarget } from './popup.target';
 import { setCSSAnchorPositioning, supportsCSSAnchorPositioning } from './position-css';
 import { ThemeContext, WithThemeClasses } from '../global/theme';
 import styles from './popup.css';
 export { PopupTargetContext, PopupTarget };
-const isPossibleClientSideNavigation = (event) => {
-    const target = event.target;
-    const link = target.closest('a');
-    // Taken from https://github.com/nanostores/router/blob/80a333db4cf0789fda21a02715ebabca15192642/index.js#L58-L69
-    return (link &&
-        event.button === 0 && // Left mouse button
-        link.target !== '_blank' && // Not for new tab
-        link.origin === location.origin && // Not external link
-        link.rel !== 'external' && // Not external link
-        link.target !== '_self' && // Now manually disabled
-        !link.download && // Not download link
-        !event.altKey && // Not download link by user
-        !event.metaKey && // Not open in new tab by user
-        !event.ctrlKey && // Not open in new tab by user
-        !event.shiftKey && // Not open in new window by user
-        !event.defaultPrevented);
-};
-const stop = (event) => {
-    if (!isPossibleClientSideNavigation(event)) {
-        event.stopPropagation();
-    }
-};
 export const getPopupContainer = (target) => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
@@ -101,6 +79,7 @@ export default class Popup extends PureComponent {
     parent;
     container;
     ringPopupTarget;
+    cssPositioningFromContext;
     clickStartedInsidePopup = false;
     shouldUseShortcuts() {
         const { shortcuts, hidden } = this.props;
@@ -167,9 +146,7 @@ export default class Popup extends PureComponent {
         if (!supportsCSSAnchorPositioning()) {
             return false;
         }
-        return this.props.cssPositioning !== undefined
-            ? this.props.cssPositioning
-            : getConfiguration().popupsCssPositioning;
+        return this.props.cssPositioning ?? this.cssPositioningFromContext ?? getConfiguration().popupsCssPositioning;
     }
     _updatePosition = () => {
         const popup = this.popup;
@@ -307,7 +284,10 @@ export default class Popup extends PureComponent {
         {theme => (<WithThemeClasses theme={theme.theme}>
             {themeClasses => (<PopupTargetContext.Consumer>
                 {value => {
-                        this.ringPopupTarget = value;
+                        this.ringPopupTarget = normalizePopupTarget(value);
+                        if (!(typeof value === 'string' || value instanceof Element)) {
+                            this.cssPositioningFromContext = value?.cssPositioning;
+                        }
                         const classes = classNames(className, theme.passToPopups ? themeClasses : null, styles.popup, {
                             [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
                             [styles.attached]: attached,
@@ -315,11 +295,7 @@ export default class Popup extends PureComponent {
                             [styles.showing]: showing,
                             [styles.largeBorderRadius]: largeBorderRadius,
                         });
-                        return (<span 
-                        // prevent bubbling through portal
-                        onClick={stop} 
-                        // This handler only blocks bubbling through React portal
-                        role='presentation' ref={this.portalRef}>
+                        return (<span ref={this.portalRef}>
                       {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
 
                       {client !== false &&

package/components/popup/popup.target.d.ts

@@ -1,7 +1,13 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export declare const PopupTargetContext: import("react").Context<string | Element | undefined>;
+interface ComplexConfig {
+    target: string | Element | undefined;
+    cssPositioning?: boolean;
+}
+export declare const PopupTargetContext: import("react").Context<string | Element | ComplexConfig | undefined>;
 export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     id: string;
     children: ReactNode | ((target: ReactNode) => ReactNode);
 }
+export declare function normalizePopupTarget(value: string | Element | undefined | ComplexConfig): string | Element | undefined;
 export declare const PopupTarget: import("react").ForwardRefExoticComponent<PopupTargetProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/components/popup/popup.target.js

@@ -1,5 +1,8 @@
 import { createContext, forwardRef } from 'react';
 export const PopupTargetContext = createContext(undefined);
+export function normalizePopupTarget(value) {
+    return typeof value === 'string' || value instanceof Element ? value : value?.target;
+}
 export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {
     const target = (<div {...restProps} data-portaltarget={id} ref={ref}>
       {typeof children !== 'function' && children}

package/components/select/select-popup.js

@@ -10,7 +10,7 @@ import memoizeOne from 'memoize-one';
 import Icon from '../icon/icon';
 import Popup, { getPopupContainer } from '../popup/popup';
 import { maxHeightForDirection } from '../popup/position';
-import { PopupTargetContext } from '../popup/popup.target';
+import { normalizePopupTarget, PopupTargetContext } from '../popup/popup.target';
 import List from '../list/list';
 import LoaderInline from '../loader-inline/loader-inline';
 import shortcutsHOC from '../shortcuts/shortcuts-hoc';
@@ -329,7 +329,7 @@ export default class SelectPopup extends PureComponent {
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
                 const selectAll = multiple && typeof multiple === 'object' && !multiple.limit && multiple.selectAll && this.getSelectAll();
-                const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
+                const list = this.getList(this.props.ringPopupTarget || normalizePopupTarget(ringPopupTarget));
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
                 return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.80",
+  "version": "7.0.82",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"