@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/dist/popup/popup.js

@@ -9,7 +9,7 @@ import { Listeners, getStyles } from '../global/dom.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import TabTrap from '../tab-trap/tab-trap.js';
-import position, { positionPropKeys } from './position.js';
+import position from './position.js';
 import { Display, DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
 export { PopupTarget, PopupTargetContext } from './popup.target.js';
@@ -18,7 +18,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var modules_2f69e2e2 = {"popup":"popup_rui_8cd0 font_rui_750f","hidden":"hidden_rui_8cd0","showing":"showing_rui_8cd0","attached":"attached_rui_8cd0"};
+var modules_2f69e2e2 = {"popup":"popup_rui_c0b0 font_rui_750f","hidden":"hidden_rui_c0b0","showing":"showing_rui_c0b0","attached":"attached_rui_c0b0"};
 
 const stop = e => e.stopPropagation();
 
@@ -37,6 +37,16 @@ class Popup extends PureComponent {
       display: Display.SHOWING
     });
 
+    _defineProperty(this, "popup", void 0);
+
+    _defineProperty(this, "node", void 0);
+
+    _defineProperty(this, "parent", void 0);
+
+    _defineProperty(this, "container", void 0);
+
+    _defineProperty(this, "ringPopupTarget", void 0);
+
     _defineProperty(this, "listeners", new Listeners());
 
     _defineProperty(this, "redrawScheduler", scheduleRAF(true));
@@ -79,25 +89,30 @@ class Popup extends PureComponent {
     });
 
     _defineProperty(this, "_updatePosition", () => {
-      if (this.popup) {
-        this.popup.style.position = 'absolute';
+      const popup = this.popup;
+
+      if (popup) {
+        popup.style.position = 'absolute';
 
         if (this.isVisible()) {
           const {
             styles: style,
             direction
           } = this.position();
-          Object.keys(style).forEach(key => {
-            const value = style[key];
+          Object.entries(style).forEach(_ref => {
+            let [key, value] = _ref;
+            const propKey = key;
 
             if (typeof value === 'number') {
-              this.popup.style[key] = `${value}px`;
+              popup.style[propKey] = `${value}px`;
             } else {
-              this.popup.style[key] = value.toString();
+              popup.style[propKey] = value.toString();
             }
           });
 
-          this._updateDirection(direction);
+          if (direction != null) {
+            this._updateDirection(direction);
+          }
         }
 
         this.setState(this.calculateDisplay);
@@ -110,6 +125,8 @@ class Popup extends PureComponent {
       }
     });
 
+    _defineProperty(this, "_listenersEnabled", void 0);
+
     _defineProperty(this, "_onEscPress", evt => {
       this.props.onEscPress(evt);
 
@@ -117,7 +134,9 @@ class Popup extends PureComponent {
     });
 
     _defineProperty(this, "_onDocumentClick", evt => {
-      if (this.container && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && this._getAnchor() && this._getAnchor().contains(evt.target)) {
+      var _this$_getAnchor;
+
+      if (this.container && evt.target instanceof Node && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && evt.target instanceof Node && (_this$_getAnchor = this._getAnchor()) !== null && _this$_getAnchor !== void 0 && _this$_getAnchor.contains(evt.target)) {
         return;
       }
 
@@ -184,28 +203,42 @@ class Popup extends PureComponent {
   }
 
   position() {
-    const positionProps = positionPropKeys.reduce((acc, key) => {
-      acc[key] = this.props[key];
-      return acc;
-    }, {});
+    const {
+      directions,
+      autoPositioning,
+      autoCorrectTopOverflow,
+      sidePadding,
+      top,
+      left,
+      offset,
+      maxHeight,
+      minWidth
+    } = this.props;
     const container = this.getContainer();
     return position({
       popup: this.popup,
       container: container && getStyles(container).position !== 'static' ? container : null,
       anchor: this._getAnchor(),
-      ...positionProps
+      directions,
+      autoPositioning,
+      autoCorrectTopOverflow,
+      sidePadding,
+      top,
+      left,
+      offset,
+      maxHeight,
+      minWidth
     });
   }
 
   _getAnchor() {
     return this.props.anchorElement || this.parent;
   }
+
   /**
    * @param {boolean} enable
    * @private
    */
-
-
   _setListenersEnabled(enable) {
     if (enable && !this._listenersEnabled) {
       setTimeout(() => {
@@ -313,7 +346,39 @@ class Popup extends PureComponent {
 
 }
 
-_defineProperty(Popup, "propTypes", {
+_defineProperty(Popup, "defaultProps", {
+  shortcuts: true,
+  hidden: false,
+
+  onOutsideClick() {},
+
+  onEscPress() {},
+
+  onCloseAttempt() {},
+
+  dontCloseOnAnchorClick: false,
+  keepMounted: false,
+  directions: DEFAULT_DIRECTIONS,
+  autoPositioning: true,
+  autoCorrectTopOverflow: true,
+  left: 0,
+  top: 0,
+  offset: 0,
+  sidePadding: 8,
+  attached: false,
+  trapFocus: false,
+  autoFocusFirst: false,
+  legacy: false
+});
+
+_defineProperty(Popup, "PopupProps", {
+  Directions,
+  Dimension,
+  MinWidth,
+  MaxHeight
+});
+
+Popup.propTypes = {
   anchorElement: PropTypes.instanceOf(Node),
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
   className: PropTypes.string,
@@ -328,10 +393,8 @@ _defineProperty(Popup, "propTypes", {
   dontCloseOnAnchorClick: PropTypes.bool,
   shortcuts: PropTypes.bool,
   keepMounted: PropTypes.bool,
-  // pass this prop to preserve the popup's DOM state while hidden
   'data-test': PropTypes.string,
   client: PropTypes.bool,
-  // true means that it's never used in SSR
   directions: PropTypes.arrayOf(PropTypes.string),
   autoPositioning: PropTypes.bool,
   autoCorrectTopOverflow: PropTypes.bool,
@@ -341,7 +404,6 @@ _defineProperty(Popup, "propTypes", {
   minWidth: PropTypes.number,
   sidePadding: PropTypes.number,
   attached: PropTypes.bool,
-  // Popup adjacent to an input, without upper border and shadow
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseOver: PropTypes.func,
@@ -352,38 +414,6 @@ _defineProperty(Popup, "propTypes", {
   // set to true whenever popup contains focusable and scrollable content
   trapFocus: PropTypes.bool,
   autoFocusFirst: PropTypes.bool
-});
-
-_defineProperty(Popup, "defaultProps", {
-  shortcuts: true,
-  hidden: false,
-
-  onOutsideClick() {},
-
-  onEscPress() {},
-
-  onCloseAttempt() {},
-
-  dontCloseOnAnchorClick: false,
-  keepMounted: false,
-  directions: DEFAULT_DIRECTIONS,
-  autoPositioning: true,
-  autoCorrectTopOverflow: true,
-  left: 0,
-  top: 0,
-  offset: 0,
-  sidePadding: 8,
-  attached: false,
-  trapFocus: false,
-  autoFocusFirst: false,
-  legacy: false
-});
-
-_defineProperty(Popup, "PopupProps", {
-  Directions,
-  Dimension,
-  MinWidth,
-  MaxHeight
-});
+};
 
 export { Popup as default, getPopupContainer };

package/dist/popup/popup.target.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export declare const PopupTargetContext: React.Context<string | undefined>;
+export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    id: string;
+    children: ReactNode | ((target: ReactNode) => ReactNode);
+}
+export declare const PopupTarget: React.ForwardRefExoticComponent<PopupTargetProps & React.RefAttributes<HTMLDivElement>>;

package/dist/popup/popup.target.js

@@ -2,21 +2,20 @@ import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const PopupTargetContext = /*#__PURE__*/createContext();
+const PopupTargetContext = /*#__PURE__*/createContext(undefined);
 const PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
   let {
     id,
     children,
     ...restProps
   } = _ref;
-  const isFunctionChild = typeof children === 'function';
   const target = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     "data-portaltarget": id,
     ref: ref
-  }), !isFunctionChild && children);
+  }), typeof children !== 'function' && children);
   return /*#__PURE__*/React.createElement(PopupTargetContext.Provider, {
     value: id
-  }, isFunctionChild ? children(target) : target);
+  }, typeof children === 'function' ? children(target) : target);
 });
 PopupTarget.propTypes = {
   id: PropTypes.string.isRequired,

package/dist/popup/position.d.ts

@@ -0,0 +1,30 @@
+import { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts';
+export { Dimension, Directions, MaxHeight, MinWidth };
+interface Position {
+    top: number;
+    left: number;
+}
+export interface PositionStyles extends Position {
+    maxHeight?: number;
+    minWidth?: number;
+}
+export interface PositionAttrs {
+    popup: Element | null | undefined;
+    anchor: Element | null | undefined;
+    container: Element | null;
+    directions: readonly Directions[];
+    autoPositioning: boolean;
+    sidePadding: number;
+    top: number;
+    left: number;
+    offset: number;
+    maxHeight: number | 'screen' | null | undefined;
+    minWidth: number | 'target' | null | undefined;
+    autoCorrectTopOverflow: boolean;
+}
+export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
+export default function position(attrs: PositionAttrs): {
+    styles: PositionStyles;
+    direction: Directions | null;
+};

package/dist/popup/position.js

@@ -126,15 +126,15 @@ function handleTopOffScreen(_ref) {
     RIGHT_TOP,
     LEFT_TOP
   } = Directions;
-  const openedToTop = [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+  const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
 
   if (!openedToTop) {
     return styles;
   }
 
-  const isAttachedToAnchorTop = [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+  const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
   const attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
-  const effectiveHeight = maxHeight ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
+  const effectiveHeight = maxHeight && typeof maxHeight === 'number' ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
   const hypotheticalTop = attachingPointY - effectiveHeight;
 
   if (hypotheticalTop <= sidePadding) {
@@ -212,6 +212,9 @@ function position(attrs) {
   const anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
 
   if (popup) {
+    const overflowAttrs = { ...attrs,
+      popup
+    };
     const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
 
     if (!autoPositioning || directions.length === 1) {
@@ -229,8 +232,8 @@ function position(attrs) {
         let {
           styles: stylesB
         } = _ref3;
-        const overflowA = verticalOverflow(stylesA, scroll, attrs) + horizontalOverflow(stylesA, scroll, attrs);
-        const overflowB = verticalOverflow(stylesB, scroll, attrs) + horizontalOverflow(stylesB, scroll, attrs);
+        const overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) + horizontalOverflow(stylesA, scroll, overflowAttrs);
+        const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
         return overflowA - overflowB;
       });
       styles = sortedByIncreasingOverflow[0].styles;
@@ -253,13 +256,15 @@ function position(attrs) {
   }
 
   if (autoCorrectTopOverflow) {
+    var _popup$scrollHeight;
+
     styles = handleTopOffScreen({
       sidePadding,
       styles,
       anchorRect,
       maxHeight,
       direction: chosenDirection,
-      popupScrollHeight: popup.scrollHeight,
+      popupScrollHeight: (_popup$scrollHeight = popup === null || popup === void 0 ? void 0 : popup.scrollHeight) !== null && _popup$scrollHeight !== void 0 ? _popup$scrollHeight : 0,
       scroll
     });
   }

package/dist/popup-menu/popup-menu.d.ts

@@ -0,0 +1,59 @@
+import { SyntheticEvent } from 'react';
+import Popup, { BasePopupProps } from '../popup/popup';
+import List, { ListProps as ListPropsType } from '../list/list';
+import { ListDataItem } from '../list/consts';
+export interface PopupMenuProps<T = unknown> extends Omit<ListPropsType<T>, 'maxHeight' | 'hidden'>, Omit<BasePopupProps, 'onMouseOut'> {
+    closeOnSelect: boolean;
+}
+/**
+ * @name Popup Menu
+ */
+export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
+    static isItemType: <T_1>(listItemType: import("../list/consts").Type, item: ListDataItem<T_1>) => boolean;
+    static ListProps: {
+        Type: typeof import("../list/consts").Type;
+        Dimension: typeof import("../list/consts").Dimension;
+    };
+    static defaultProps: {
+        renderOptimization: boolean;
+        closeOnSelect: boolean;
+        shortcuts: boolean;
+        hidden: boolean;
+        onOutsideClick(): void;
+        onEscPress(): void;
+        onCloseAttempt(): void;
+        dontCloseOnAnchorClick: boolean;
+        keepMounted: boolean;
+        directions: import("../popup/popup.consts").Directions[];
+        autoPositioning: boolean;
+        autoCorrectTopOverflow: boolean;
+        left: number;
+        top: number;
+        offset: number;
+        sidePadding: number;
+        attached: boolean;
+        trapFocus: boolean;
+        autoFocusFirst: boolean;
+        legacy: boolean;
+        data: never[];
+        restoreActiveIndex: boolean;
+        activateSingleItem: boolean;
+        activateFirstItem: boolean;
+        onMouseOut: () => void;
+        onSelect: () => void;
+        onScrollToBottom: () => void;
+        onResize: () => void;
+        disableMoveDownOverflow: boolean;
+        ariaLabel: string;
+    };
+    onSelect: (item: ListDataItem<T>, event: Event | SyntheticEvent) => void;
+    list?: List<T> | null;
+    listRef: (el: List<T> | null) => void;
+    /** @override */
+    getInternalContent(): JSX.Element;
+}
+export declare type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
+export declare const ListProps: {
+    Type: typeof import("../list/consts").Type;
+    Dimension: typeof import("../list/consts").Dimension;
+};

package/dist/popup-menu/popup-menu.js

@@ -71,6 +71,8 @@ class PopupMenu extends Popup {
       this.props.onSelect(item, event);
     });
 
+    _defineProperty(this, "list", void 0);
+
     _defineProperty(this, "listRef", el => {
       this.list = el;
     });
@@ -85,7 +87,7 @@ class PopupMenu extends Popup {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(List, _extends({
       ref: this.listRef
     }, props, {
-      maxHeight: this.popup && this.popup.style.maxHeight,
+      maxHeight: this.popup && parseFloat(this.popup.style.maxHeight),
       shortcuts: this.shouldUseShortcuts(),
       onSelect: this.onSelect
     })));
@@ -97,17 +99,16 @@ _defineProperty(PopupMenu, "isItemType", List.isItemType);
 
 _defineProperty(PopupMenu, "ListProps", List.ListProps);
 
-_defineProperty(PopupMenu, "propTypes", { ...popupPropTypes,
-  ...List.propTypes,
-  closeOnSelect: PropTypes.bool
-});
-
 _defineProperty(PopupMenu, "defaultProps", { ...List.defaultProps,
   ...Popup.defaultProps,
   renderOptimization: false,
   closeOnSelect: false
 });
 
+PopupMenu.propTypes = { ...popupPropTypes,
+  ...List.propTypes,
+  closeOnSelect: PropTypes.bool
+};
 const {
   ListProps
 } = List;

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,58 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
+    max: number;
+    value: number;
+    label: string;
+    global?: boolean | null | undefined;
+}
+/**
+ * @name Progress Bar
+ */
+export default class ProgressBar extends PureComponent<ProgressBarProps> {
+    /**
+     * @param {number} value The progress task value
+     * @param {number} max The maximum value
+     * @return {number} The progress task value in percents
+     * @private
+     */
+    static toPercent(value: number, max: number): number;
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        /**
+         * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+         * Should be placed directly inside body, will be positioned right below .ring-header
+         * if placed adjacent to it.
+         * @type {boolean}
+         */
+        global: PropTypes.Requireable<boolean>;
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        /**
+         * A floating point number that specifies minimum completion rate for a task to be considered
+         * complete. Default value is 1.0.
+         * @type {number}
+         */
+        max: PropTypes.Requireable<number>;
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        max: number;
+        value: number;
+        label: string;
+    };
+    progressbarWrapper?: (HTMLElement | null);
+    progressbarWrapperRef: (el: HTMLElement | null) => void;
+    progressbar?: (HTMLElement | null);
+    progressbarRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+export declare type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/dist/progress-bar/progress-bar.js

@@ -2,9 +2,8 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Theme from '../global/theme.js';
 
-var modules_fb7af416 = {"unit":"8px","light":"light_rui_d044","progressBar":"progressBar_rui_d044","dark":"dark_rui_d044","line":"line_rui_d044","globalMode":"globalMode_rui_d044","progress-bar":"progressBar_rui_d044"};
+var modules_fb7af416 = {"dark":"dark_rui_bd73","unit":"8px","progressBar":"progressBar_rui_a2aa","globalMode":"globalMode_rui_a2aa","line":"line_rui_a2aa","progress-bar":"progressBar_rui_a2aa"};
 
 /**
  * @name Progress Bar
@@ -14,10 +13,14 @@ class ProgressBar extends PureComponent {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "progressbarWrapper", void 0);
+
     _defineProperty(this, "progressbarWrapperRef", el => {
       this.progressbarWrapper = el;
     });
 
+    _defineProperty(this, "progressbar", void 0);
+
     _defineProperty(this, "progressbarRef", el => {
       this.progressbar = el;
     });
@@ -37,7 +40,6 @@ class ProgressBar extends PureComponent {
 
   render() {
     const {
-      theme,
       className,
       global,
       max,
@@ -45,10 +47,8 @@ class ProgressBar extends PureComponent {
       label,
       ...otherProps
     } = this.props;
-    const width = value ? `${ProgressBar.toPercent(value, max)}%` : null;
+    const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
     const classes = classNames(modules_fb7af416.progressBar, className, {
-      [modules_fb7af416.light]: theme === Theme.LIGHT,
-      [modules_fb7af416.dark]: theme === Theme.DARK,
       [modules_fb7af416.globalMode]: global
     });
     return /*#__PURE__*/React.createElement("div", _extends({}, otherProps, {
@@ -72,7 +72,6 @@ class ProgressBar extends PureComponent {
 
 _defineProperty(ProgressBar, "propTypes", {
   label: PropTypes.string,
-  theme: PropTypes.string,
 
   /**
    * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
@@ -106,7 +105,6 @@ _defineProperty(ProgressBar, "propTypes", {
 _defineProperty(ProgressBar, "defaultProps", {
   max: 1.0,
   value: 0,
-  theme: Theme.LIGHT,
   label: 'Progress'
 });
 

package/dist/progress-bar-ng/progress-bar-ng.js

@@ -8,7 +8,6 @@ import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';
 import 'prop-types';
 import 'classnames';
-import '../global/theme.js';
 
 var progressBarNg = angularComponentFactory(ProgressBar, 'ProgressBar').name;
 

package/dist/promised-click-ng/promised-click-ng.js

@@ -5,12 +5,12 @@ import { applyMethodToClasses } from '../global/dom.js';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { LOADER_BACKGROUND_SELECTOR } from '../button-ng/button-ng.js';
 import 'classnames';
-import '../global/theme.js';
-import 'react';
 import '../icon-ng/icon-ng.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
+import '../global/controls-height.js';
+import 'react';
 
 /**
  * @name Promised Click Ng