@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/components/dialog/dialog.js

@@ -13,7 +13,7 @@ import Button from '../button/button';
 
 import {PopupTarget} from '../popup/popup.target';
 
-import ScrollPreventer from './dialog__body-scroll-preventer';
+import {preventerFactory as scrollPreventerFactory} from './dialog__body-scroll-preventer';
 import styles from './dialog.css';
 
 /**
@@ -24,6 +24,7 @@ function noop() {}
 
 export default class Dialog extends PureComponent {
   static propTypes = {
+    label: PropTypes.string,
     className: PropTypes.string,
     contentClassName: PropTypes.string,
     children: PropTypes.oneOfType([
@@ -47,6 +48,7 @@ export default class Dialog extends PureComponent {
   };
 
   static defaultProps = {
+    label: 'Dialog',
     onOverlayClick: noop,
     onEscPress: noop,
     onCloseClick: noop,
@@ -72,16 +74,18 @@ export default class Dialog extends PureComponent {
   }
 
   componentWillUnmount() {
-    ScrollPreventer.reset();
+    this.scrollPreventer.reset();
   }
 
+  scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
+
   uid = getUID('dialog-');
 
   toggleScrollPreventer() {
     if (this.props.show) {
-      ScrollPreventer.prevent();
+      this.scrollPreventer.prevent();
     } else {
-      ScrollPreventer.reset();
+      this.scrollPreventer.reset();
     }
   }
 
@@ -115,7 +119,7 @@ export default class Dialog extends PureComponent {
   render() {
     const {show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick,
       children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside,
-      portalTarget, ...restProps} = this.props;
+      portalTarget, label, ...restProps} = this.props;
     const classes = classNames(styles.container, className);
     const shortcutsMap = this.getShortcutsMap();
 
@@ -148,6 +152,7 @@ export default class Dialog extends PureComponent {
                   className={classNames(styles.content, contentClassName)}
                   data-test="ring-dialog"
                   role="dialog"
+                  aria-label={label}
                 >
                   {children}
                   {showCloseButton &&

package/components/dialog/dialog.test.js

@@ -6,7 +6,7 @@ import styles from './dialog.css';
 
 describe('Dialog', () => {
   const children = <div/>;
-  const mountDialog = props => mount(<Dialog {...props} trapFocus={false}/>);
+  const mountDialog = props => mount(<Dialog label="Dialog" {...props} trapFocus={false}/>);
 
   it('should create component', () => {
     mountDialog({show: true, children}).should.have.type(Dialog);

package/components/dialog/dialog__body-scroll-preventer.js

@@ -2,38 +2,58 @@ import scrollbarWidth from 'scrollbar-width';
 
 import styles from './dialog.css';
 
-let isPrevented = false;
+const isPrevented = new Set();
 let previousDocumentWidth = null;
 
-export default {
-  prevent() {
-    if (isPrevented) {
-      return;
-    }
-    isPrevented = true;
-    const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
-      getComputedStyle(document.documentElement).overflowY === 'scroll';
-    document.documentElement.classList.add(styles.documentWithoutScroll);
-
-    const scrollWidth = scrollbarWidth();
-
-    if (documentHasScroll && scrollWidth > 0) {
-      previousDocumentWidth = document.documentElement.style.width;
-      document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
-    }
-  },
-
-  reset() {
-    if (!isPrevented) {
-      return;
-    }
-    isPrevented = false;
-
-    document.documentElement.classList.remove(styles.documentWithoutScroll);
-
-    if (previousDocumentWidth !== null) {
-      document.documentElement.style.width = previousDocumentWidth;
-      previousDocumentWidth = null;
-    }
+const prevent = key => {
+  if (isPrevented.has(key)) {
+    return;
+  }
+
+  isPrevented.add(key);
+
+  if (isPrevented.size > 1) {
+    return;
+  }
+
+  const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
+    getComputedStyle(document.documentElement).overflowY === 'scroll';
+  document.documentElement.classList.add(styles.documentWithoutScroll);
+
+  const scrollWidth = scrollbarWidth();
+
+  if (documentHasScroll && scrollWidth > 0) {
+    previousDocumentWidth = document.documentElement.style.width;
+    document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
+  }
+};
+
+const reset = key => {
+  if (isPrevented.size === 0) {
+    return;
+  }
+
+  isPrevented.delete(key);
+
+  if (isPrevented.size > 0) {
+    return;
+  }
+
+  document.documentElement.classList.remove(styles.documentWithoutScroll);
+
+  if (previousDocumentWidth !== null) {
+    document.documentElement.style.width = previousDocumentWidth;
+    previousDocumentWidth = null;
   }
 };
+
+export const preventerFactory = key => {
+  const preventerKey = key || Math.random();
+
+  return {
+    prevent: () => prevent(preventerKey),
+    reset: () => reset(preventerKey)
+  };
+};
+
+export default preventerFactory('default-preventer');

package/components/dialog-ng/dialog-ng.js

@@ -1,7 +1,5 @@
 import angular from 'angular';
 
-import angularSanitize from 'angular-sanitize';
-
 import {createFocusTrap} from 'focus-trap';
 
 import {getRect, getStyles} from '../global/dom';
@@ -10,12 +8,13 @@ import shortcuts from '../shortcuts/core';
 import RingButton from '../button-ng/button-ng';
 import PromisedClickNg from '../promised-click-ng/promised-click-ng';
 import rgCompilerModuleName from '../compiler-ng/compiler-ng';
-import ScrollPreventer from '../dialog/dialog__body-scroll-preventer';
+import {preventerFactory as scrollPreventerFactory} from '../dialog/dialog__body-scroll-preventer';
 import '../form/form.css';
 import dialogStyles from '../dialog/dialog.css';
 import islandStyles from '../island/island.css';
 
 import styles from './dialog-ng.css';
+import dialogTemplate from './dialog-ng__template';
 
 /**
  * @name Dialog Ng
@@ -23,12 +22,12 @@ import styles from './dialog-ng.css';
 
 const angularModule = angular.module(
   'Ring.dialog',
-  [angularSanitize, RingButton, PromisedClickNg, rgCompilerModuleName]
+  [RingButton, PromisedClickNg, rgCompilerModuleName]
 );
 
 class DialogController extends RingAngularComponent {
   static $inject = ['$scope', '$q', 'dialog', '$element', 'dialogInSidebar', '$compile',
-    '$injector', '$controller', 'rgCompiler'];
+    '$injector', '$controller', 'rgCompiler', '$sce'];
 
   constructor(...args) {
     super(...args);
@@ -36,6 +35,7 @@ class DialogController extends RingAngularComponent {
     this.styles = styles;
     this.dialogStyles = dialogStyles;
     this.islandStyles = islandStyles;
+    this.scrollPreventer = scrollPreventerFactory();
 
     this.$inject.$q((resolve, reject) => {
       this.resolve = resolve;
@@ -134,7 +134,7 @@ class DialogController extends RingAngularComponent {
     const {$q, $scope} = this.$inject;
 
     if (!this.inSidebar) {
-      ScrollPreventer.prevent();
+      this.scrollPreventer.prevent();
       if (config && config.trapFocus === true) {
         this.focusTrap.activate();
       }
@@ -195,7 +195,7 @@ class DialogController extends RingAngularComponent {
 
   hide = () => {
     if (!this.inSidebar) {
-      ScrollPreventer.reset();
+      this.scrollPreventer.reset();
     }
 
     this.active = false;
@@ -272,7 +272,7 @@ class DialogController extends RingAngularComponent {
         }];
         this.serverErrorFields.push(errorField);
       } else {
-        this.error = this.getErrorMessage(errorResponse);
+        this.error = this.$inject.$sce.trustAsHtml(this.getErrorMessage(errorResponse));
       }
     };
 
@@ -364,7 +364,7 @@ class DialogService extends RingAngularComponent {
 
   unregister = () => {
     Reflect.deleteProperty(this, 'ctrl');
-  }
+  };
 }
 
 class DialogInSidebarService extends DialogService {
@@ -490,7 +490,7 @@ function rgDialogDirective($timeout) {
       active: '=?'
     },
     replace: true,
-    template: require('./dialog-ng.html'),
+    template: dialogTemplate,
     controllerAs: 'dialog',
     link
   };

package/components/dialog-ng/{dialog-ng.html → dialog-ng__template.js}

@@ -1,4 +1,4 @@
-<div
+export default `<div
   ng-show="dialog.active"
   ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
   ng-click="dialog.handleClick($event)"
@@ -66,4 +66,4 @@
       <div tabindex="-1" ng-show="false" data-anchor="focus-trap-fallback"></div>
     </div>
   </div>
-</div>
+</div>`;

package/components/dropdown/dropdown.examples.js

@@ -3,12 +3,14 @@ import chevronDownIcon from '@jetbrains/icons/chevron-down';
 
 import reactDecorator from '../../.storybook/react-decorator';
 
+import {ActiveItemContext} from '../list/list';
+
 import Popup from '@jetbrains/ring-ui/components/popup/popup';
 import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
 import Button from '@jetbrains/ring-ui/components/button/button';
 import Link from '@jetbrains/ring-ui/components/link/link';
 import {Input} from '@jetbrains/ring-ui/components/input/input';
-
+import getUID from '@jetbrains/ring-ui/components/global/get-uid';
 import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
 
 export default {
@@ -45,6 +47,39 @@ export const withCustomAnchorAndPopup = () => (
   </Dropdown>
 );
 
+export const withCustomAnchorAndPopupAndContentAccessibilityHandling = () => {
+  const listId = getUID('popup-menu-list-id');
+
+  return (
+    <ActiveItemContext.Provider>
+      <Dropdown anchor={({active}) => (
+        <ActiveItemContext.ValueContext.Consumer>
+          {activeItemId => {
+            const anchorAriaProps = active && activeItemId
+              ? {'aria-owns': listId, 'aria-activedescendant': activeItemId}
+              : {};
+            return (
+              <Button
+                {...anchorAriaProps}
+                delayed
+              >Edit</Button>
+            );
+          }}
+        </ActiveItemContext.ValueContext.Consumer>
+      )}
+      >
+        <PopupMenu
+          id={listId}
+          ariaLabel="My options menu"
+          closeOnSelect
+          activateFirstItem
+          data={['Cut', 'Copy', 'Paste'].map(label => ({label, key: label.toLowerCase()}))}
+        />
+      </Dropdown>
+    </ActiveItemContext.Provider>
+  );
+};
+
 withCustomAnchorAndPopup.storyName = 'with custom anchor and popup';
 
 export const withActiveClassName = () => (

package/components/dropdown/dropdown.test.js

@@ -76,11 +76,11 @@ describe('Dropdown', () => {
     popup.isVisible().should.be.false;
   });
 
-  it('should hide popup on outside click', done => {
+  it('should hide popup on outside pointer down event', done => {
     mountDropdown();
     Simulate.click(anchor);
     setTimeout(() => {
-      document.dispatchEvent(new Event('click'));
+      document.dispatchEvent(new PointerEvent('pointerdown'));
       popup.isVisible().should.be.false;
       done();
     }, 0);

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

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

package/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,117 @@
+import React, {useMemo, cloneElement} from 'react';
+import PropTypes from 'prop-types';
+
+import List, {ActiveItemContext} from '../list/list';
+import Dropdown from '../dropdown/dropdown';
+import PopupMenu from '../popup-menu/popup-menu';
+import getUID from '../global/get-uid';
+import Anchor from '../dropdown/anchor';
+
+const {children, ...dropdownPropTypes} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType
+} = PopupMenu.propTypes || {};
+
+const defaultAriaLabel = 'Dropdown menu';
+
+function DropdownAnchorWrapper({anchor, pinned, active, activeListItemId, listId, ...restProps}) {
+  const anchorAriaProps = useMemo(() => ({
+    ...(listId ? {'aria-haspopup': 'true'} : {}),
+    ...(activeListItemId ? {'aria-activedescendant': activeListItemId, 'aria-owns': listId} : {}),
+    ...(active ? {'aria-expanded': 'true'} : {})
+  }), [active, activeListItemId, listId]);
+
+  const anchorProps = useMemo(
+    () => ({active, pinned, ...restProps, ...anchorAriaProps}),
+    [pinned, active, restProps, anchorAriaProps]
+  );
+
+  const anchorComponentProps = useMemo(
+    () => ({...anchorProps, pinned: `${anchorProps.pinned}`}),
+    [anchorProps]
+  );
+
+  if (typeof anchor === 'string') {
+    return (
+      <Anchor
+        {...anchorComponentProps}
+      >{anchor}</Anchor>
+    );
+  }
+  if (typeof anchor === 'function') {
+    return anchor(({active, pinned, ...restProps}), anchorAriaProps);
+  }
+  if (!Array.isArray(anchor)) {
+    return cloneElement(
+      anchor,
+      typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps
+    );
+  }
+  return (
+    <div {...anchorAriaProps}>{anchor}</div>
+  );
+}
+
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+
+const DropdownMenu = React.forwardRef(function DropdownMenu(
+  {id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps},
+  forwardedRef
+) {
+  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+
+  return (
+    <ActiveItemContext.Provider>
+      <Dropdown
+        anchor={({pinned, active, ...restAnchorProps}) => (
+          <ActiveItemContext.ValueContext.Consumer>
+            {activeItemId => (
+              <DropdownAnchorWrapper
+                anchor={anchor}
+                pinned={pinned}
+                active={active}
+                activeListItemId={activeItemId}
+                listId={listId}
+                {...restAnchorProps}
+              />
+            )}
+          </ActiveItemContext.ValueContext.Consumer>
+        )}
+        {...restDropdownProps}
+      >
+        <PopupMenu
+          ref={forwardedRef}
+          id={listId}
+          ariaLabel={ariaLabel || defaultAriaLabel}
+          closeOnSelect
+          activateFirstItem
+          data={data}
+          onSelect={onSelect}
+          {...menuProps}
+        />
+      </Dropdown>
+    </ActiveItemContext.Provider>
+  );
+});
+
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+
+DropdownMenu.ListProps = List.ListProps;
+
+export default DropdownMenu;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import PopupMenu from '../popup-menu/popup-menu';
+import Anchor from '../dropdown/anchor';
+
+import DropdownMenu from './dropdown-menu';
+
+const waitForCondition = (condition, rejectMessage) => new Promise((resolve, reject) => {
+  const interval = 10;
+  const maxWaitingTime = 2000;
+  let remainingTime = maxWaitingTime;
+
+  const intervalId = setInterval(() => {
+    if (condition()) {
+      clearInterval(intervalId);
+      resolve();
+    } else if (remainingTime < 0) {
+      clearInterval(intervalId);
+      reject(new Error(rejectMessage));
+    } else {
+      remainingTime -= interval;
+    }
+  }, interval);
+});
+
+describe('Dropdown Menu', () => {
+  const shallowDropdownMenu = props => shallow(<DropdownMenu id="test-list-id" {...props}/>);
+  const mountDropdownMenu = props => mount(<DropdownMenu id="test-list-id" {...props}/>);
+
+  const mountAndWaitForMenuContent = async props => {
+    const wrapper = mountDropdownMenu(props);
+
+    wrapper.find('button').getDOMNode().click();
+    await waitForCondition(
+      () => !!wrapper.find(PopupMenu).length,
+      'List was not rendered in a dropdown menu'
+    );
+
+    return wrapper;
+  };
+
+  it('should create component', () => {
+    shallowDropdownMenu({anchor: 'Anchor text'}).should.exist;
+  });
+
+  it('should open List', async () => {
+    const wrapper = await mountAndWaitForMenuContent({anchor: 'Anchor text'});
+
+    const list = wrapper.find(PopupMenu).instance().list;
+    list.should.exist;
+
+    //We need it to maintain compatibility between Dropdown Menu and List
+    list.props.data.length.should.equal(0);
+  });
+
+  it('should pass params to List', async () => {
+    const wrapper = await mountAndWaitForMenuContent({
+      anchor: 'Anchor text',
+      data: [{key: 'key1'}]
+    });
+
+    shallow(wrapper.find(PopupMenu).instance().list.renderItem({index: 1})).should.exist;
+  });
+
+  it('should add accessibility attributes to anchor', async () => {
+    const wrapper = await mountAndWaitForMenuContent({
+      anchor: 'Anchor text',
+      data: [{key: 'key1'}, {key: 'key2'}]
+    });
+
+    const anchorProps = wrapper.update().find(Anchor).props();
+    anchorProps['aria-owns'].should.equal('test-list-id');
+    anchorProps['aria-activedescendant'].should.contain(':key1');
+  });
+});

package/components/error-bubble/error-bubble-legacy.css

@@ -44,7 +44,7 @@
   width: unit;
   height: unit;
 
-  content: '';
+  content: "";
   transform: rotate(45deg);
 
   border: 1px solid var(--ring-popup-border-color);

package/components/error-bubble/error-bubble.css

@@ -46,7 +46,7 @@
   width: unit;
   height: unit;
 
-  content: '';
+  content: "";
   transform: rotate(45deg);
 
   border: 1px solid var(--ring-popup-border-color);

package/components/error-bubble/error-bubble.examples.js

@@ -57,7 +57,7 @@ export const inDialogForm = () => {
       const {value} = this.state;
 
       return (
-        <Dialog show>
+        <Dialog label="Dialog" show>
           <Header>Dialog example</Header>
           <Content>
             <form className="ring-form">

package/components/error-page/error-page.css

@@ -15,10 +15,10 @@
   width: 100%;
   height: 100%;
 
-  content: '';
+  content: "";
 }
 
 .enabled::before {
   opacity: 0.06;
-  background: url('error-page.gif');
+  background: url("error-page.gif");
 }

package/components/footer-ng/footer-ng.js

@@ -4,8 +4,6 @@ import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../footer/footer.css';
 import {copyright} from '../footer/footer';
 
-import template from './footer-ng.html';
-
 /**
  * @name Footer Ng
  */
@@ -22,7 +20,19 @@ class rgFooterComponent extends RingAngularComponent {
     right: '?rgFooterRight'
   };
 
-  static template = template;
+  static template = `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
+  <div ng-class=":: $ctrl.styles.columnLeft">
+    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnCenter">
+    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnRight">
+    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+</footer>`;
 }
 
 class rgFooterLineComponent extends RingAngularComponent {

package/components/form/form.css

@@ -96,7 +96,7 @@
   display: block;
   clear: both;
 
-  content: '';
+  content: "";
 }
 
 :global(.ring-form__group_united) {
@@ -167,7 +167,7 @@
 
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
   vertical-align: middle;
 }
 

package/components/form-ng/form-ng.js

@@ -54,7 +54,9 @@ angularModule.directive('rgErrorBubble', function rgErrorBubbleDirective(getForm
     },
 
     replace: true,
-    template: require('./form-ng__error-bubble.html'),
+    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
+  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
+</div>`,
 
     link: function link(scope, iElement, iAttrs) {
       scope.style = {};