@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/popup/popup.target.js

@@ -1,27 +0,0 @@
-import React, {createContext, forwardRef} from 'react';
-import PropTypes from 'prop-types';
-
-export const PopupTargetContext = createContext();
-export const PopupTarget = forwardRef(
-  function PopupTarget({id, children, ...restProps}, ref) {
-    const isFunctionChild = typeof children === 'function';
-    const target = (
-      <div
-        {...restProps}
-        data-portaltarget={id}
-        ref={ref}
-      >
-        {!isFunctionChild && children}
-      </div>
-    );
-    return (
-      <PopupTargetContext.Provider value={id}>
-        {isFunctionChild ? children(target) : target}
-      </PopupTargetContext.Provider>
-    );
-  }
-);
-PopupTarget.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-};

package/components/popup/popup.test.js

@@ -1,242 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import {getRect, getStyles} from '../global/dom';
-import simulateCombo from '../../test-helpers/simulate-combo';
-
-import Popup from './popup';
-import {MinWidth} from './popup.consts';
-
-describe('Popup', () => {
-  const shallowPopup = props => shallow(<Popup {...{children: '', ...props}}/>);
-  const mountPopup = props => mount(<Popup {...{children: '', ...props}}/>);
-
-  it('should create component', () => {
-    const popup = shallowPopup();
-    popup.should.exist;
-  });
-
-  it('should allow pass DOM node as a target', () => {
-    const targetNode = document.createElement('div');
-    const instance = mountPopup({target: targetNode}).instance();
-    const popupElement = instance.popup;
-    targetNode.contains(popupElement).should.be.true;
-  });
-
-  it('should attempt to close by pressing esc', () => {
-    const onCloseAttempt = sandbox.stub();
-    mountPopup({onCloseAttempt});
-
-    simulateCombo('esc');
-
-    onCloseAttempt.should.have.been.called;
-  });
-
-  describe('close by pointer down', () => {
-    const downEvent = new PointerEvent('pointerdown', {
-      bubbles: true,
-      cancelable: false
-    });
-    let clock;
-
-    beforeEach(() => {
-      clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-    });
-
-    it('should attempt to close by pointer down outside the element', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({onCloseAttempt});
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.have.been.called;
-    });
-
-    it('should pass event to onCloseAttempt callback when closing by document pointer down event', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({onCloseAttempt});
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.have.been.calledWith(sinon.match({type: 'pointerdown'}));
-    });
-
-    it('should not close popup if popup hidden', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({
-        hidden: true,
-        onCloseAttempt
-      });
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.not.have.been.called;
-    });
-
-    it('should be closed by pointer down event outside the element after show', () => {
-      const onCloseAttempt = sandbox.stub();
-      const wrapper = mountPopup({
-        onCloseAttempt
-      });
-
-      wrapper.setProps({hidden: false}, () => {
-        clock.tick();
-        document.body.dispatchEvent(downEvent);
-        onCloseAttempt.should.have.been.called;
-      });
-    });
-
-    it('shouldn\'t be closed by pointer down event inside the element', () => {
-      const onCloseAttempt = sandbox.stub();
-      const instance = mountPopup({onCloseAttempt}).instance();
-
-      clock.tick();
-      instance.popup.dispatchEvent(downEvent);
-      onCloseAttempt.should.not.have.been.called;
-    });
-  });
-
-  describe('positioning', () => {
-    let element;
-    beforeEach(() => {
-      sandbox.stub(window, 'requestAnimationFrame').callsFake(cb => cb());
-    });
-
-    afterEach(() => {
-      if (element && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    });
-
-    it('top-left direction', () => {
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.TOP_LEFT],
-        anchorElement: element
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left + elementOffset.width - popupElement.clientWidth);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top - popupElement.clientHeight);
-    });
-
-    it('should limit top by sidePadding if opens to the top', () => {
-      const SIDE_PADDING = 8;
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.TOP_LEFT],
-        anchorElement: element,
-        sidePadding: SIDE_PADDING,
-        children: <div style={{height: '300px'}}>{'foo'}</div>
-      }).instance();
-
-      getStyles(instance.popup).top.should.equal(`${SIDE_PADDING}px`);
-    });
-
-    it('bottom-right corner', () => {
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
-        anchorElement: element
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top + elementOffset.height);
-    });
-
-    it('should add specified offset', () => {
-      const OFFSET = 10;
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
-        anchorElement: element,
-        left: OFFSET,
-        top: OFFSET
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left + OFFSET);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top + elementOffset.height + OFFSET);
-    });
-
-    it('Should support minWidth = MinWidth.TARGET', () => {
-      element = document.createElement('div');
-      element.setAttribute('style', 'width: 50px; padding-left: 20px;');
-      document.body.append(element);
-
-      const instance = mountPopup({
-        minWidth: MinWidth.TARGET,
-        anchorElement: element,
-        hidden: false
-      }).instance();
-
-      // eslint-disable-next-line no-magic-numbers
-      parseInt(getStyles(instance.popup).minWidth, 10).should.equal(70);
-      element.remove();
-    });
-
-    it('Should support minWidth = number in pixels if anchor width is less than minWidth', () => {
-      element = document.createElement('div');
-      element.setAttribute('style', 'width: 50px;');
-      document.body.append(element);
-
-      const WIDTH = 345;
-      const instance = mountPopup({
-        minWidth: WIDTH, hidden: false, anchorElement: element
-      }).instance();
-
-      parseInt(instance.popup.style.minWidth, 10).should.equal(WIDTH);
-    });
-
-    it('Should use width of anchor if it is bigger than minWidth', () => {
-      const WIDTH = 345;
-
-      element = document.createElement('div');
-      element.setAttribute('style', `width: ${WIDTH}px;`);
-      document.body.append(element);
-
-      const instance = mountPopup({
-        minWidth: 20, hidden: false, anchorElement: element
-      }).instance();
-
-      parseInt(instance.popup.style.minWidth, 10).should.equal(WIDTH);
-    });
-  });
-});

package/components/popup/position.test.js

@@ -1,192 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import {maxHeightForDirection} from './position';
-import {Directions} from './popup.consts';
-
-describe('position', () => {
-  describe('maxHeightForDirection', () => {
-    it('should return max height for specified direction relative to container', () => {
-      const containerNode = createNode({},
-        createClientRectMock({
-          top: 10,
-          left: 10,
-          width: 30,
-          height: 40
-        })
-      );
-
-      const topMaxHeight = 20;
-      const bottomMaxHeight = 10;
-
-      const anchorNode = createNode({},
-        createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + topMaxHeight,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        })
-      );
-
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should NOT include scroll height when calculate max height', () => {
-      const containerNode = createNode(
-        {
-          scrollTop: 10,
-          scrollHeight: 50
-        },
-        createClientRectMock({
-          top: 10,
-          left: 10,
-          width: 30,
-          height: 30
-        })
-      );
-
-      const anchorNode = createNode({
-        getBoundingClientRect: () => (createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + 10,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        }))
-      });
-
-      const topMaxHeight = 10;
-      const bottomMaxHeight = 10;
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should handle case when both element out of the top border of viewport', () => {
-      const containerNode = createNode({},
-        createClientRectMock({
-          top: -50,
-          left: 10,
-          width: 30,
-          height: 30
-        })
-      );
-
-      const anchorNode = createNode({},
-        createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + 10,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        })
-      );
-
-      const topMaxHeight = 10;
-      const bottomMaxHeight = 10;
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should cover all defined directions', () => {
-      const anchorNode = createNode();
-      Object.keys(Directions).forEach(key => {
-        maxHeightForDirection(Directions[key], anchorNode).
-          should.not.be.undefined;
-      });
-    });
-  });
-
-
-  function checkMaxHeight(anchorNode, containerNode, [topMaxHeight, bottomMaxHeight]) {
-    const expectedValues = [
-      topMaxHeight,
-      bottomMaxHeight,
-      bottomMaxHeight + anchorNode.getBoundingClientRect().height,
-      topMaxHeight + anchorNode.getBoundingClientRect().height,
-      Math.min(bottomMaxHeight / 2, topMaxHeight / 2) +
-        anchorNode.getBoundingClientRect().height / 2
-    ];
-
-    [
-      [
-        Directions.TOP_LEFT,
-        Directions.TOP_RIGHT,
-        Directions.TOP_CENTER
-      ],
-      [
-        Directions.BOTTOM_LEFT,
-        Directions.BOTTOM_RIGHT,
-        Directions.BOTTOM_CENTER
-      ],
-      [
-        Directions.RIGHT_BOTTOM,
-        Directions.LEFT_BOTTOM
-      ],
-      [
-        Directions.RIGHT_TOP,
-        Directions.LEFT_TOP
-      ],
-      [
-        Directions.RIGHT_CENTER,
-        Directions.LEFT_CENTER
-      ]
-    ].forEach((directions, i) => {
-      directions.forEach(d => {
-        maxHeightForDirection(d, anchorNode, containerNode).
-          should.
-          be.
-          equal(expectedValues[i]);
-      });
-    });
-  }
-
-
-  function createNode(data, domRect = {}) {
-    if (
-      domRect.hasOwnProperty('height') &&
-      !data.hasOwnProperty('scrollHeight')) {
-      data.scrollHeight = domRect.height;
-    }
-
-    return {
-      scrollTop: 0,
-      getBoundingClientRect: sandbox.stub().returns(domRect),
-      ...data
-    };
-  }
-
-
-  function createClientRectMock(data = {}) {
-    if (
-      data.hasOwnProperty('left') &&
-      data.hasOwnProperty('width') &&
-      !data.hasOwnProperty('right')
-    ) {
-      data.right = data.left + data.width;
-    }
-
-    if (
-      data.hasOwnProperty('top') &&
-      data.hasOwnProperty('height') &&
-      !data.hasOwnProperty('bottom')
-    ) {
-      data.bottom = data.top + data.height;
-    }
-
-    return {
-      height: 0,
-      width: 0,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      ...data
-    };
-  }
-});

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

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import PopupMenu, {ListProps} from '@jetbrains/ring-ui/components/popup-menu/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.js

@@ -1,58 +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 propTypes = {
-    ...popupPropTypes,
-    ...List.propTypes,
-    closeOnSelect: PropTypes.bool
-  };
-
-  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);
-  };
-
-  listRef = el => {
-    this.list = el;
-  };
-
-  /** @override */
-  getInternalContent() {
-    const {className, ...props} = this.props;
-
-    return (
-      <div>
-        <List
-          ref={this.listRef}
-          {...props}
-          maxHeight={this.popup && this.popup.style.maxHeight}
-          shortcuts={this.shouldUseShortcuts()}
-          onSelect={this.onSelect}
-        />
-      </div>
-    );
-  }
-}
-
-export const {ListProps} = List;

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import PopupMenu from './popup-menu';
-
-describe('Popup Menu', () => {
-  const shallowPopupMenu = props => shallow(<PopupMenu {...props}/>);
-  const mountPopupMenu = props => mount(<PopupMenu {...props}/>);
-
-  it('should create component', () => {
-    shallowPopupMenu().should.exist;
-  });
-
-  it('should have List', () => {
-    const list = mountPopupMenu().instance().list;
-    list.should.exist;
-
-    // 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: [
-      {}
-    ]});
-
-    shallow(wrapper.instance().list.renderItem({index: 1})).should.exist;
-  });
-});

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

@@ -1,56 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Theme from '@jetbrains/ring-ui/components/global/theme';
-
-import ProgressBar from '@jetbrains/ring-ui/components/progress-bar/progress-bar';
-
-const disableAnimations = window.location.search.includes('block-animations');
-
-export default {
-  title: 'Components/Progress Bar',
-  decorators: [reactDecorator()]
-};
-
-export const basic = () => {
-  class ProgressBarDemo extends Component {
-    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';