@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/popup/position.js

@@ -1,202 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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: 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;
-        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: typeof import("../list/consts").Dimension;
-};

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

@@ -1,41 +0,0 @@
-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

@@ -1,83 +0,0 @@
-@import "../global/variables.css";
-
-@value dark from "../global/variables_dark.css";
-@value unit from "../global/global.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(unit / 2);
-  margin-bottom: calc(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(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

@@ -1,64 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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>);
-    }
-}

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

@@ -1,7 +0,0 @@
-/**
- * @name Progress Bar Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import ProgressBar from '../progress-bar/progress-bar';
-
-export default angularComponentFactory(ProgressBar, 'ProgressBar').name;

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

@@ -1,52 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import RingProgressBar from './progress-bar-ng';
-
-const disableAnimations = window.location.search.includes('block-animations');
-
-export default {
-  title: 'Legacy Angular/Progress Bar Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Progress Bar.'
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [RingProgressBar]).
-    controller('ExampleCtrl', function controller($interval) {
-      this.value = disableAnimations ? 0.5 : 0;
-
-      if (!disableAnimations) {
-        $interval(() => {
-          const currentValue = this.value;
-          this.value = currentValue >= 1 ? 0 : currentValue + 0.1;
-        }, 500);
-      }
-    });
-  return `
-      <div ng-controller="ExampleCtrl as ctrl">
-        <div style="height: 25px; padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
-        </div>
-        <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
-        </div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Progress Bar Ng';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .example-progress > * {
-    width: 288px;
-  }
-</style>`
-};