@jetbrains/ring-ui 7.0.81 → 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/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,7 +15,7 @@ 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';
@@ -79,6 +79,7 @@ export default class Popup extends PureComponent {
     parent;
     container;
     ringPopupTarget;
+    cssPositioningFromContext;
     clickStartedInsidePopup = false;
     shouldUseShortcuts() {
         const { shortcuts, hidden } = this.props;
@@ -145,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;
@@ -285,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,

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.81",
+  "version": "7.0.82",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"