@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/popup/position.ts

@@ -0,0 +1,315 @@
+import {
+  getDocumentScrollLeft,
+  getDocumentScrollTop,
+  getRect,
+  getWindowHeight,
+  isMounted,
+  Rect
+} from '../global/dom';
+
+import {Dimension, Directions, MaxHeight, MinWidth} from './popup.consts';
+
+export {Dimension, Directions, MaxHeight, MinWidth};
+
+function getScrollingCoordinates(container: Element | null) {
+  if (container !== null) {
+    return {
+      top: container.scrollTop,
+      left: container.scrollLeft
+    };
+  }
+
+  return {
+    top: getDocumentScrollTop(),
+    left: getDocumentScrollLeft()
+  };
+}
+
+function getPositionStyles(
+  popup: Element,
+  anchorRect: Rect,
+  anchorLeft: number,
+  anchorTop: number,
+  offset: number
+) {
+  const popupWidth = popup.clientWidth;
+  const popupHeight = popup.clientHeight;
+
+  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}
+  };
+}
+
+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
+}
+
+interface OverflowAttrs extends PositionAttrs {
+  popup: Element
+}
+
+function verticalOverflow(
+  styles: PositionStyles,
+  scrollingCoordinates: Position,
+  attrs: OverflowAttrs
+) {
+  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: PositionStyles,
+  scrollingCoordinates: Position,
+  attrs: OverflowAttrs
+) {
+  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'
+] as const;
+
+const defaultcontainerRect = {
+  top: 0,
+  left: 0
+};
+
+interface TopOffScreenParams {
+  sidePadding: number
+  styles: PositionStyles
+  anchorRect: Rect
+  maxHeight: number | 'screen' | null | undefined
+  popupScrollHeight: number
+  direction: Directions | null
+  scroll: Position
+}
+
+function handleTopOffScreen({
+  sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll
+}: TopOffScreenParams) {
+  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: Directions,
+  anchorNode: Element,
+  containerNode?: Element | null
+) {
+  const container = containerNode || document.documentElement;
+  const domRect = anchorNode.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const topMaxHeight = Math.max(domRect.top - containerRect.top, 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: PositionAttrs) {
+  const {
+    popup,
+    anchor,
+    container,
+    directions,
+    autoPositioning,
+    sidePadding,
+    top,
+    left,
+    offset,
+    maxHeight,
+    minWidth,
+    autoCorrectTopOverflow = true
+  } = attrs;
+
+  let styles: PositionStyles = {
+    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'] as const).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.examples.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import PopupMenu, {ListProps} from './popup-menu';
+
+export default {
+  title: 'Components/PopupMenu',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a popup menu.',
+    hermione: {captureSelector: '*[data-test~=ring-popup]'},
+    a11y: {element: '*[data-test~=ring-popup]'}
+  }
+};
+
+export const basic = () => {
+  const data = [
+    {label: 'Item'},
+    {label: 'Link to jetbrains.com', href: 'http://www.jetbrains.com'},
+    {rgItemType: ListProps.Type.SEPARATOR},
+    {rgItemType: ListProps.Type.LINK, label: 'Link Item'},
+    {
+      rgItemType: ListProps.Type.LINK,
+      label: 'Link Item With Additional Class',
+      className: 'test'
+    },
+    {rgItemType: ListProps.Type.SEPARATOR, description: 'Separator With Description'},
+    {rgItemType: ListProps.Type.TITLE, label: 'Title'},
+    {rgItemType: ListProps.Type.ITEM, label: '1 Element in group'},
+    {rgItemType: ListProps.Type.ITEM, label: '2 Element in group'}
+  ];
+
+  return <PopupMenu data={data}/>;
+};
+
+basic.storyName = 'PopupMenu';

package/components/popup-menu/popup-menu.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import List from '../list/list';
+
+import PopupMenu, {PopupMenuAttrs} from './popup-menu';
+
+
+describe('Popup Menu', () => {
+  const shallowPopupMenu = (props?: PopupMenuAttrs) => shallow(<PopupMenu {...props}/>);
+  const mountPopupMenu = (props?: Partial<PopupMenuAttrs>) =>
+    mount<PopupMenu>(<PopupMenu {...props}/>);
+
+  it('should create component', () => {
+    shallowPopupMenu().should.exist;
+  });
+
+  it('should have List', () => {
+    const list = mountPopupMenu().instance().list;
+    should.exist(list);
+
+    // We need it to maintain compatibility between Popup Menu and List
+    list?.props.data.length.should.equal(0);
+  });
+
+  it('should pass params to List', () => {
+    const wrapper = mountPopupMenu({data: [
+      {}
+    ]});
+
+    const maybeList = wrapper.instance().list;
+    should.exist(maybeList);
+    const list = maybeList as List;
+
+    shallow(list.renderItem({index: 1})).should.exist;
+  });
+});

package/components/popup-menu/popup-menu.tsx

@@ -0,0 +1,69 @@
+import React, {SyntheticEvent, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+
+import Popup, {BasePopupProps, PopupProps} from '../popup/popup';
+import List, {ListProps as ListPropsType} from '../list/list';
+import {ListDataItem} from '../list/consts';
+
+const {children, ...popupPropTypes} =
+  (Popup as unknown as ComponentType<PopupProps>).propTypes || {};
+
+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 = List.isItemType;
+  static ListProps = List.ListProps;
+
+  static defaultProps = {
+    ...List.defaultProps,
+    ...Popup.defaultProps,
+    renderOptimization: false,
+    closeOnSelect: false
+  };
+
+  onSelect = (item: ListDataItem<T>, event: Event | SyntheticEvent) => {
+    if (this.props.closeOnSelect) {
+      this._onCloseAttempt(event);
+    }
+    this.props.onSelect(item, event);
+  };
+
+  list?: List<T> | null;
+  listRef = (el: List<T> | null) => {
+    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 as ComponentType<unknown>).propTypes = {
+  ...popupPropTypes,
+  ...List.propTypes,
+  closeOnSelect: PropTypes.bool
+};
+
+export type PopupMenuAttrs<T = unknown> =
+  JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>
+
+export const {ListProps} = List;

package/components/progress-bar/progress-bar.examples.tsx

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Theme from '../global/theme';
+
+import ProgressBar from './progress-bar';
+
+const disableAnimations = window.location.search.includes('block-animations');
+
+export default {
+  title: 'Components/Progress Bar',
+  decorators: [reactDecorator()]
+};
+
+export const basic = () => {
+  interface ProgressBarDemoState {
+    value: number
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  class ProgressBarDemo extends Component<{}, ProgressBarDemoState> {
+    state = {
+      value: disableAnimations ? 0.5 : 0
+    };
+
+    componentDidMount() {
+      if (disableAnimations) {
+        return;
+      }
+      setInterval(
+        () => this.setState(({value}) => ({value: value >= 1 ? 0 : value + 0.1})),
+        500
+      );
+    }
+
+    render() {
+      const {value} = this.state;
+
+      return (
+        <div>
+          <div style={{height: '25px', paddingTop: '25px'}}>
+            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
+          </div>
+
+          <div style={{height: '25px', paddingTop: '25px', background: '#000'}}>
+            <ProgressBar label="Progress" value={value} theme={Theme.DARK} style={{width: 288}}/>
+          </div>
+
+          <div style={{height: '25px', paddingTop: '25px', background: '#F0F0F0'}}>
+            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return <ProgressBarDemo/>;
+};
+
+basic.storyName = 'Progress Bar';

package/components/progress-bar/progress-bar.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Theme from '../global/theme';
+
+import ProgressBar, {ProgressBarAttrs} from './progress-bar';
+import styles from './progress-bar.css';
+
+describe('Progress Bar', () => {
+  const shallowProgressBar = (props?: ProgressBarAttrs) => shallow(
+    <ProgressBar label="Progress" {...props}/>);
+  const mountProgressBar = (props?: ProgressBarAttrs) =>
+    mount(<ProgressBar label="Progress" {...props}/>).find<ProgressBar>(ProgressBar);
+
+  it('should create component', () => {
+    shallowProgressBar().should.exist;
+  });
+
+  describe('default value for attributes', () => {
+    it('should set default value for max attribute', () => {
+      mountProgressBar().should.have.prop('max', 1.0);
+    });
+  });
+
+  describe('client interaction with progress bar API', () => {
+    it('should set max value for progress bar', () => {
+      const MAX = 100;
+
+      const wrapper = mountProgressBar({
+        max: MAX
+      });
+
+      wrapper.should.have.prop('max', MAX);
+    });
+
+    it('should set progress task value', () => {
+      const MIDDLE = 0.5;
+
+      const wrapper = mountProgressBar({
+        value: MIDDLE
+      });
+
+      wrapper.should.have.prop('value', MIDDLE);
+    });
+
+    it('should set additional classes(modifiers) to the component', () => {
+      const wrapper = mountProgressBar({
+        className: 'test-class'
+      });
+
+      wrapper.instance().progressbarWrapper!.should.have.class('test-class');
+    });
+
+    it('should set light modifier', () => {
+      const wrapper = mountProgressBar({
+        theme: Theme.DARK
+      });
+      wrapper.instance().progressbarWrapper!.
+        should.have.class(styles.dark);
+    });
+
+    it('should set global modifier', () => {
+      const wrapper = mountProgressBar({
+        global: true
+      });
+
+      wrapper.instance().progressbarWrapper!.
+        should.have.class(styles.globalMode);
+    });
+  });
+
+  /**
+   * Test internal(DOM) representation of the
+   * component's state
+   */
+  describe('#render', () => {
+    it('should set min value to equal zero', () => {
+      const wrapper = mountProgressBar();
+      wrapper.instance().progressbar!.should.have.attr('aria-valuemin', '0');
+    });
+
+    it('should update max value in DOM', () => {
+      const wrapper = mountProgressBar({
+        max: 100
+      });
+
+      wrapper.instance().progressbar!.should.have.attr('aria-valuemax', '100');
+    });
+
+    it('should update progress value in DOM', () => {
+      const wrapper = mountProgressBar({
+        value: 0.5
+      });
+
+      wrapper.instance().progressbar!.should.have.attr('aria-valuenow', '0.5');
+      wrapper.instance().progressbar!.should.have.attr('style').match(/width: 50%;/);
+    });
+
+    it('should set width equal 100% if progress value more than max value', () => {
+      const wrapper = mountProgressBar({
+        max: 1.0,
+        value: 10
+      });
+
+      wrapper.instance().progressbar!.should.have.attr('style').match(/width: 100%;/);
+    });
+
+    it('should not set style if value is not a number', () => {
+      const wrapper = mountProgressBar({
+        value: undefined
+      });
+      wrapper.instance().progressbar!.should.not.have.attr('style');
+    });
+  });
+});