@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.4

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 scrollPreventerFactory 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,
@@ -117,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();
 
@@ -150,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

@@ -47,7 +47,7 @@ const reset = key => {
   }
 };
 
-const preventerFactory = key => {
+export const preventerFactory = key => {
   const preventerKey = key || Math.random();
 
   return {
@@ -56,4 +56,4 @@ const preventerFactory = key => {
   };
 };
 
-export default preventerFactory;
+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 scrollPreventerFactory 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);
@@ -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/anchor.js

@@ -11,6 +11,7 @@ import styles from './dropdown.css';
 
 const Anchor = ({children, className, ...restProps}) => (
   <Button
+    data-test-ring-dropdown-anchor
     text
     className={classNames(styles.anchor, className)}
     {...restProps}

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;