@jetbrains/ring-ui 4.1.0-beta.13 → 4.1.0-beta.17

package/components/date-picker/date-picker.css

@@ -96,7 +96,7 @@
     position: absolute;
     right: unit;
 
-    content: '—';
+    content: "—";
 
     line-height: calc(4 * unit - 2px);
   }
@@ -123,7 +123,7 @@
     position: absolute;
     left: calc(-1 * unit);
 
-    content: ',';
+    content: ",";
 
     line-height: calc(4 * unit - 3px);
   }
@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -282,7 +284,7 @@
     width: calc(unit * 2);
     height: 100%;
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -325,7 +327,7 @@
     width: calc(unit * 23);
     height: calc(unit * 8);
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -357,7 +359,7 @@
       width: calc(unit * 2);
       height: 100%;
 
-      content: '';
+      content: "";
       transition: background-color var(--ring-ease);
     }
   }
@@ -409,7 +411,7 @@
   top: 0;
   left: calc(unit * 0.5);
 
-  content: '•';
+  content: "•";
 
   font-size: var(--ring-font-size-smaller);
 }
@@ -453,6 +455,8 @@
   height: cellSize;
   padding-left: calc(unit * 1.5);
 
+  text-transform: capitalize;
+
   line-height: cellSize;
 }
 

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});
     }
   }
 
@@ -297,7 +298,7 @@ export default class DatePopup extends Component {
   };
 
   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');
 
@@ -391,6 +392,7 @@ export default class DatePopup extends Component {
                 onInput={this.handleInput}
                 onConfirm={this.handleConfirm(name)}
                 onClear={onClear}
+                locale={locale}
               />
             );
           })}
@@ -413,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}
         >
@@ -426,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-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';
@@ -16,6 +14,7 @@ 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);
@@ -273,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));
       }
     };
 
@@ -365,7 +364,7 @@ class DialogService extends RingAngularComponent {
 
   unregister = () => {
     Reflect.deleteProperty(this, 'ctrl');
-  }
+  };
 }
 
 class DialogInSidebarService extends DialogService {
@@ -491,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';

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