@jetbrains/ring-ui 6.0.5-beta.0 → 6.0.5

package/components/popup/position.js

@@ -0,0 +1,202 @@
+import { getDocumentScrollLeft, getDocumentScrollTop, getRect, getWindowHeight, isMounted } from '../global/dom';
+import { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts';
+export { Dimension, Directions, MaxHeight, MinWidth };
+function getScrollingCoordinates(container) {
+    if (container !== null) {
+        return {
+            top: container.scrollTop,
+            left: container.scrollLeft
+        };
+    }
+    return {
+        top: getDocumentScrollTop(),
+        left: getDocumentScrollLeft()
+    };
+}
+function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
+    const popupWidth = popup.offsetWidth;
+    const popupHeight = popup.offsetHeight;
+    const anchorBottom = anchorTop + anchorRect.height;
+    const anchorRight = anchorLeft + anchorRect.width;
+    const popupLeft = anchorLeft - popupWidth;
+    const popupTop = anchorTop - popupHeight;
+    const popupRightToLeft = anchorRight - popupWidth;
+    const popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
+    const popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
+    const popupBottomToTop = anchorBottom - popupHeight;
+    return {
+        [Directions.BOTTOM_RIGHT]: { left: anchorLeft, top: anchorBottom + offset },
+        [Directions.BOTTOM_LEFT]: { left: popupRightToLeft, top: anchorBottom + offset },
+        [Directions.BOTTOM_CENTER]: { left: popupHorizontalCenter, top: anchorBottom + offset },
+        [Directions.TOP_RIGHT]: { left: anchorLeft, top: popupTop - offset },
+        [Directions.TOP_LEFT]: { left: popupRightToLeft, top: popupTop - offset },
+        [Directions.TOP_CENTER]: { left: popupHorizontalCenter, top: popupTop - offset },
+        [Directions.LEFT_BOTTOM]: { left: popupLeft - offset, top: anchorTop },
+        [Directions.LEFT_TOP]: { left: popupLeft - offset, top: popupBottomToTop },
+        [Directions.LEFT_CENTER]: { left: popupLeft - offset, top: popupVerticalCenter },
+        [Directions.RIGHT_BOTTOM]: { left: anchorRight + offset, top: anchorTop },
+        [Directions.RIGHT_TOP]: { left: anchorRight + offset, top: popupBottomToTop },
+        [Directions.RIGHT_CENTER]: { left: anchorRight + offset, top: popupVerticalCenter }
+    };
+}
+function verticalOverflow(styles, scrollingCoordinates, attrs) {
+    const containerHeight = attrs.container !== null
+        ? attrs.container.clientHeight
+        : getWindowHeight();
+    const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
+    const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
+    const topOverflow = Math.max(viewportMinX - styles.top, 0);
+    const popupHeight = attrs.popup.clientHeight;
+    const verticalDiff = styles.top + popupHeight - viewportMaxX;
+    const bottomOverflow = Math.max(verticalDiff, 0);
+    return topOverflow + bottomOverflow;
+}
+function horizontalOverflow(styles, scrollingCoordinates, attrs) {
+    const containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
+    const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
+    const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
+    const leftOverflow = Math.max(viewportMinY - styles.left, 0);
+    const popupWidth = attrs.popup.clientWidth;
+    const horizontalDiff = styles.left + popupWidth - viewportMaxY;
+    const rightOverflow = Math.max(horizontalDiff, 0);
+    return leftOverflow + rightOverflow;
+}
+export const positionPropKeys = [
+    'directions',
+    'autoPositioning',
+    'autoCorrectTopOverflow',
+    'sidePadding',
+    'top',
+    'left',
+    'offset',
+    'maxHeight',
+    'minWidth'
+];
+const defaultcontainerRect = {
+    top: 0,
+    left: 0
+};
+function handleTopOffScreen({ sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll }) {
+    const BORDER_COMPENSATION = 1;
+    const { TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP } = Directions;
+    const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+    if (!openedToTop) {
+        return styles;
+    }
+    const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+    const attachingPointY = (isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom);
+    const effectiveHeight = maxHeight && typeof maxHeight === 'number'
+        ? Math.min(popupScrollHeight, maxHeight)
+        : popupScrollHeight;
+    const hypotheticalTop = attachingPointY - effectiveHeight;
+    if (hypotheticalTop <= sidePadding) {
+        styles.top = sidePadding + scroll.top;
+        styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
+    }
+    return styles;
+}
+export function maxHeightForDirection(direction, anchorNode, containerNode) {
+    const container = containerNode || document.documentElement;
+    const domRect = anchorNode.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const containerTop = domRect.top < 0
+        ? containerRect.top
+        : Math.max(containerRect.top, 0);
+    const topMaxHeight = Math.max(domRect.top - containerTop, 0);
+    const containerHeight = Math.max(containerRect.height, 
+    // XXX
+    // If container is the document element
+    // then we check client height too because we may have situation when
+    // "height" from "getBoundingClientRect" less then "clientHeight".
+    container === document.documentElement ? container.clientHeight : 0);
+    const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
+    switch (direction) {
+        case Directions.TOP_LEFT:
+        case Directions.TOP_CENTER:
+        case Directions.TOP_RIGHT:
+            return topMaxHeight;
+        case Directions.BOTTOM_LEFT:
+        case Directions.BOTTOM_CENTER:
+        case Directions.BOTTOM_RIGHT:
+            return bottomMaxHeight;
+        case Directions.LEFT_BOTTOM:
+        case Directions.RIGHT_BOTTOM:
+            return domRect.height + bottomMaxHeight;
+        case Directions.LEFT_TOP:
+        case Directions.RIGHT_TOP:
+            return domRect.height + topMaxHeight;
+        case Directions.RIGHT_CENTER:
+        case Directions.LEFT_CENTER:
+            return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
+        default:
+            return null;
+    }
+}
+export default function position(attrs) {
+    const { popup, anchor, container, directions, autoPositioning, sidePadding, top, left, offset, maxHeight, minWidth, autoCorrectTopOverflow = true } = attrs;
+    let styles = {
+        top: 0,
+        left: 0
+    };
+    let chosenDirection = null;
+    const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
+    const defaultAnchor = container !== null ? container : document.body;
+    const anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
+    const scroll = getScrollingCoordinates(container);
+    const anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
+    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) {
+            styles = directionsMatrix[directions[0]];
+            chosenDirection = directions[0];
+        }
+        else {
+            const sortedByIncreasingOverflow = directions.
+                // Fall back to the first option
+                concat(directions[0]).filter(direction => directionsMatrix[direction]).
+                map(direction => ({ styles: directionsMatrix[direction], direction })).
+                sort(({ styles: stylesA }, { styles: stylesB }) => {
+                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;
+            chosenDirection = sortedByIncreasingOverflow[0].direction;
+        }
+        // because of the anchor negative margin top and left also may become negative
+        ['left', 'top'].forEach(key => {
+            if (styles[key] < 0) {
+                styles[key] = 0;
+            }
+        });
+    }
+    if (maxHeight === MaxHeight.SCREEN || maxHeight === 'screen') {
+        // this feature works properly only when direction is BOTTOM_* or *_BOTTOM
+        styles.maxHeight = window.innerHeight + scroll.top - styles.top - Dimension.MARGIN;
+    }
+    else if (maxHeight) {
+        styles.maxHeight = maxHeight;
+    }
+    if (autoCorrectTopOverflow) {
+        styles = handleTopOffScreen({
+            sidePadding,
+            styles,
+            anchorRect,
+            maxHeight,
+            direction: chosenDirection,
+            popupScrollHeight: popup?.scrollHeight ?? 0,
+            scroll
+        });
+    }
+    if (minWidth === MinWidth.TARGET || minWidth === 'target') {
+        styles.minWidth = anchorRect.width;
+    }
+    else if (minWidth) {
+        styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
+    }
+    return { styles, direction: chosenDirection };
+}

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

@@ -0,0 +1,80 @@
+import React, { 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: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
+    };
+    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;
+        autoPositioningOnScroll: 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(): React.JSX.Element;
+}
+export type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
+export declare const ListProps: {
+    Type: typeof import("../list/consts").Type;
+    Dimension: {
+        ITEM_PADDING: number;
+        ITEM_HEIGHT: number;
+        COMPACT_ITEM_HEIGHT: number;
+        SEPARATOR_HEIGHT: number;
+        SEPARATOR_FIRST_HEIGHT: number;
+        SEPARATOR_TEXT_HEIGHT: number;
+        TITLE_HEIGHT: number;
+        INNER_PADDING: number;
+        MARGIN: number;
+    };
+};

package/components/popup-menu/popup-menu.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popup from '../popup/popup';
+import List from '../list/list';
+const { children, ...popupPropTypes } = Popup.propTypes || {};
+/**
+ * @name Popup Menu
+ */
+export default class PopupMenu extends Popup {
+    static isItemType = List.isItemType;
+    static ListProps = List.ListProps;
+    static defaultProps = {
+        ...List.defaultProps,
+        ...Popup.defaultProps,
+        renderOptimization: false,
+        closeOnSelect: false
+    };
+    onSelect = (item, event) => {
+        if (this.props.closeOnSelect) {
+            this._onCloseAttempt(event);
+        }
+        this.props.onSelect(item, event);
+    };
+    list;
+    listRef = (el) => {
+        this.list = el;
+    };
+    /** @override */
+    getInternalContent() {
+        const { className, ...props } = this.props;
+        return (<div>
+        <List ref={this.listRef} {...props} maxHeight={this.popup && parseFloat(this.popup.style.maxHeight)} shortcuts={this.shouldUseShortcuts()} onSelect={this.onSelect}/>
+      </div>);
+    }
+}
+PopupMenu.propTypes = {
+    ...popupPropTypes,
+    ...List.propTypes,
+    closeOnSelect: PropTypes.bool
+};
+export const { ListProps } = List;

package/components/progress-bar/progress-bar.css

@@ -0,0 +1,82 @@
+@import "../global/variables.css";
+
+@value dark from "../global/variables_dark.css";
+
+:root {
+  --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
+  --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.6);
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  --ring-progress-bar-background-color: rgba(255, 255, 255, 0.3);
+  --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.4);
+}
+
+.progressBar {
+  position: relative;
+  z-index: 1; /* Required to see border-radius on animated background */
+
+  overflow: hidden;
+
+  height: calc(var(--ring-unit) / 2);
+  margin-bottom: calc(var(--ring-unit) / 2);
+
+  border-radius: 2px;
+  background-color: var(--ring-progress-bar-background-color);
+}
+
+.globalMode {
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+
+  background: transparent;
+}
+
+.line {
+  float: left;
+
+  width: 0;
+  height: 100%;
+
+  transition: width 0.6s ease;
+  text-align: center;
+
+  color: var(--ring-content-background-color);
+  border-radius: 2px;
+  background-color: var(--ring-main-color);
+
+  line-height: calc(var(--ring-unit) / 2);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    content: "";
+    animation: progress-bar 2500ms linear infinite;
+
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--ring-progress-bar-line-background-color), rgba(0, 0, 0, 0));
+    background-repeat: no-repeat;
+
+    .staticLineColor &  {
+      animation: none;
+
+      background-image: var(--ring-progress-bar-line-background-color);
+    }
+  }
+}
+
+@keyframes progress-bar {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}

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

@@ -0,0 +1,64 @@
+import React, { 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;
+    staticColor?: boolean;
+}
+/**
+ * @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>;
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.Requireable<boolean>;
+    };
+    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(): React.JSX.Element;
+}
+export type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/components/progress-bar/progress-bar.js

@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './progress-bar.css';
+/**
+ * @name Progress Bar
+ */
+export default class ProgressBar extends PureComponent {
+    /**
+     * @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, max) {
+        const HUNDRED_PERCENT = 100;
+        const percents = (value * HUNDRED_PERCENT) / max;
+        return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
+    }
+    static propTypes = {
+        label: PropTypes.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.bool,
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.string,
+        style: PropTypes.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.number,
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.number,
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.bool
+    };
+    static defaultProps = {
+        max: 1.0,
+        value: 0,
+        label: 'Progress'
+    };
+    progressbarWrapper;
+    progressbarWrapperRef = (el) => {
+        this.progressbarWrapper = el;
+    };
+    progressbar;
+    progressbarRef = (el) => {
+        this.progressbar = el;
+    };
+    render() {
+        const { className, global, max, value, label, staticColor, ...otherProps } = this.props;
+        const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
+        const classes = classNames(styles.progressBar, className, {
+            [styles.globalMode]: global,
+            [styles.staticLineColor]: staticColor
+        });
+        return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>
+        <div className={styles.line} ref={this.progressbarRef} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} style={{ width }}/>
+      </div>);
+    }
+}