@jetbrains/ring-ui 4.1.0-beta.8 → 4.1.3

package/components/date-picker/date-picker.js

@@ -90,7 +90,8 @@ export default class DatePicker extends PureComponent {
     disabled: PropTypes.bool,
     minDate: dateType,
     maxDate: dateType,
-    translations: PropTypes.object
+    translations: PropTypes.object,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -101,10 +102,10 @@ export default class DatePicker extends PureComponent {
     from: null,
     to: null,
     clear: false,
-    displayFormat: date => (date ? formatDate(date, 'd MMM yyyy') : ''),
-    displayMonthFormat: date => (date ? formatDate(date, 'd MMM') : ''),
-    displayDayFormat: date => (date ? formatDate(date, 'd') : ''),
-    displayTimeFormat: date => (date ? formatDate(date, 'HH:mm') : ''),
+    displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', {locale}) : ''),
+    displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', {locale}) : ''),
+    displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', {locale}) : ''),
+    displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', {locale}) : ''),
     datePlaceholder: 'Set a date',
     dateTimePlaceholder: 'Set date and time',
     rangePlaceholder: 'Set a period',
@@ -194,7 +195,8 @@ export default class DatePicker extends PureComponent {
       displayFormat,
       displayMonthFormat,
       displayDayFormat,
-      translations
+      translations,
+      locale
     } = this.props;
 
     const date = this.parse(this.props.date);
@@ -204,27 +206,27 @@ export default class DatePicker extends PureComponent {
 
     let text;
     if (!range && !withTime) {
-      text = date ? displayFormat(date) : datePlaceholder || translations.setDate;
+      text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
     } else if (!range && withTime) {
       if (!date && !time) {
         text = dateTimePlaceholder || translations.setDateTime;
       } else {
-        text = `${date && displayFormat(date) || '—'}, ${time || '—'}`;
+        text = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
       }
     } else if (!from && !to) {
       text = rangePlaceholder || translations.setPeriod;
     } else if (!to) {
-      text = `${displayFormat(from)} —`;
+      text = `${displayFormat(from, locale)} —`;
     } else if (!from) {
-      text = `— ${displayFormat(to)}`;
+      text = `— ${displayFormat(to, locale)}`;
     } else if (!isSameYear(from, to)) {
-      text = `${displayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameMonth(from, to)) {
-      text = `${displayMonthFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameDay(from, to)) {
-      text = `${displayDayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else {
-      text = `${displayFormat(to)}`;
+      text = `${displayFormat(to, locale)}`;
     }
 
     return text;

package/components/date-picker/date-popup.js

@@ -47,7 +47,8 @@ export default class DatePopup extends Component {
     hidden: PropTypes.bool,
     fromPlaceholder: PropTypes.string,
     toPlaceholder: PropTypes.string,
-    timePlaceholder: PropTypes.string
+    timePlaceholder: PropTypes.string,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -77,7 +78,7 @@ export default class DatePopup extends Component {
 
   componentDidMount() {
     if (this.componentRef.current) {
-      this.componentRef.current.addEventListener('wheel', this.handleWheel);
+      this.componentRef.current.addEventListener('wheel', this.handleWheel, {passive: true});
     }
   }
 
@@ -278,15 +279,26 @@ export default class DatePopup extends Component {
   handleScroll = scrollDate => this.setState({scrollDate});
 
   onClear = e => {
-    this.setState({
-      active: undefined
-    });
+    let changes;
+
+    if (this.props.range) {
+      changes = {
+        from: null,
+        to: null
+      };
+
+    } else {
+      changes = {
+        date: null
+      };
+    }
 
+    this.select(changes);
     this.props.onClear(e);
   };
 
   render() {
-    const {range, hidden, withTime, time} = this.props;
+    const {range, hidden, withTime, time, locale} = this.props;
     const parsedDate = this.parse(this.props.date, 'date');
     const parsedTo = this.parse(this.props.to, 'to');
 
@@ -380,6 +392,7 @@ export default class DatePopup extends Component {
                 onInput={this.handleInput}
                 onConfirm={this.handleConfirm(name)}
                 onClear={onClear}
+                locale={locale}
               />
             );
           })}
@@ -402,12 +415,13 @@ export default class DatePopup extends Component {
                   onInput={this.handleInput}
                   onConfirm={this.handleConfirm('time')}
                   onClear={clearable && this.onClear || undefined}
+                  locale={locale}
                 />
               )
               : ('')
           }
         </div>
-        <Weekdays/>
+        <Weekdays locale={locale}/>
         <div
           className={styles.calendar}
         >
@@ -415,6 +429,7 @@ export default class DatePopup extends Component {
             {...calendarProps}
             onHover={this.hoverHandler}
             onSelect={this.selectHandler}
+            locale={locale}
           />
           <Years {...calendarProps}/>
         </div>

package/components/date-picker/month-names.js

@@ -21,7 +21,7 @@ class MonthName extends PureComponent {
   };
 
   render() {
-    const {month} = this.props;
+    const {month, locale} = this.props;
 
     return (
       <button
@@ -34,7 +34,7 @@ class MonthName extends PureComponent {
         )}
         onClick={this.handleClick}
       >
-        {format(month, 'MMM')}
+        {format(month, 'LLL', {locale})}
       </button>
     );
   }
@@ -42,11 +42,12 @@ class MonthName extends PureComponent {
 
 MonthName.propTypes = {
   month: dateType,
-  onScrollChange: PropTypes.func
+  onScrollChange: PropTypes.func,
+  locale: PropTypes.string
 };
 
 export default function MonthNames(props) {
-  const {scrollDate} = props;
+  const {scrollDate, locale} = props;
   const months = [];
   for (let i = 0; i < YEAR; i++) {
     const middleDay = set(scrollDate, {month: i, date: MIDDLE_DAY});
@@ -73,6 +74,7 @@ export default function MonthNames(props) {
           key={+month}
           month={month}
           onScrollChange={props.onScrollChange}
+          locale={locale}
         />
       ))}
       {props.currentRange &&
@@ -97,5 +99,6 @@ export default function MonthNames(props) {
 MonthNames.propTypes = {
   scrollDate: dateType,
   onScrollChange: PropTypes.func,
-  currentRange: PropTypes.arrayOf(dateType)
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
 };

package/components/date-picker/month.js

@@ -5,6 +5,8 @@ import format from 'date-fns/format';
 import getDay from 'date-fns/getDay';
 import setDay from 'date-fns/setDay';
 
+import PropTypes from 'prop-types';
+
 import Day from './day';
 import {dateType, WEEK, weekdays} from './consts';
 import styles from './date-picker.css';
@@ -12,6 +14,7 @@ import styles from './date-picker.css';
 export default function Month(props) {
   const start = props.month;
   const end = endOfMonth(start);
+  const {locale} = props;
 
   // pad with empty cells starting from last friday
   const weekday = getDay(start);
@@ -25,7 +28,7 @@ export default function Month(props) {
   return (
     <div className={styles.month}>
       <span className={styles.monthTitle}>
-        {format(props.month, 'MMMM')}
+        {format(props.month, 'LLLL', {locale})}
       </span>
       {days.map(date => (
         <Day
@@ -40,5 +43,6 @@ export default function Month(props) {
 }
 
 Month.propTypes = {
-  month: dateType
+  month: dateType,
+  locale: PropTypes.string
 };

package/components/date-picker/weekdays.js

@@ -5,13 +5,17 @@ import format from 'date-fns/format';
 import setDay from 'date-fns/setDay';
 import startOfDay from 'date-fns/startOfDay';
 
+import PropTypes from 'prop-types';
+
 import {weekdays} from './consts';
 import styles from './date-picker.css';
 
-export default function Weekdays() {
+export default function Weekdays(props) {
   const days = Object.keys(weekdays).
     map(key => startOfDay(setDay(new Date(), weekdays[key])));
 
+  const {locale} = props;
+
   return (
     <div className={styles.weekdays}>
       {days.map(day => (
@@ -24,9 +28,13 @@ export default function Weekdays() {
           )}
           key={+day}
         >
-          {format(day, 'EEEEEE')}
+          {format(day, 'EEEEEE', {locale})}
         </span>
       ))}
     </div>
   );
 }
+
+Weekdays.propTypes = {
+  locale: PropTypes.string
+};

package/components/dialog/dialog.examples.js

@@ -55,6 +55,7 @@ export const basic = ({onAction}) => {
           </Group>
 
           <Dialog
+            label="Dialog"
             show={show}
             onCloseAttempt={this.cancelDialog}
             trapFocus
@@ -124,6 +125,7 @@ export const withScroll = ({onAction}) => {
           </div>
 
           <Dialog
+            label="Dialog"
             show={this.state.show}
             onCloseAttempt={this.cancelDialog}
             trapFocus
@@ -167,7 +169,7 @@ export const WithOverflowScrollOnHtml = () => {
     <div className="container">
       <div>Scroll down</div>
       <Button className="button" onClick={() => setOpen(true)}>Show dialog</Button>
-      <Dialog show={open} onCloseAttempt={() => setOpen(false)}>
+      <Dialog label="Dialog" show={open} onCloseAttempt={() => setOpen(false)}>
         <Header>Dialog title</Header>
       </Dialog>
     </div>

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-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';