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

package/components/button-ng/button-ng.js

@@ -166,7 +166,7 @@ class ButtonController extends RingAngularComponent {
     }
 
     $compile(icon)($scope);
-  }
+  };
 }
 
 function changeTheme(element, data) {

package/components/button-set-ng/button-set-ng.js

@@ -3,6 +3,8 @@
  */
 import angular from 'angular';
 
+import buttonSetStyles from '../button-set/button-set.css';
+
 const angularModule = angular.module('Ring.button-set', []);
 
 function rgButtonSet() {
@@ -11,7 +13,7 @@ function rgButtonSet() {
     replace: true,
     scope: false,
     transclude: true,
-    template: require('./button-set-ng.html')
+    template: `<div class="${buttonSetStyles.buttonSet}" ng-transclude></div>`
   };
 }
 

package/components/checkbox/checkbox.css

@@ -89,7 +89,7 @@
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell,
   &:indeterminate[checked] + .cell,
-  &:indeterminate[data-checked=true] + .cell {
+  &:indeterminate[data-checked="true"] + .cell {
     border-color: var(--ring-border-hover-color);
     background-color: var(--ring-selected-background-color);
   }

package/components/code/code.js

@@ -14,11 +14,8 @@ function noop() {}
 
 const registerLanguage = memoize(async language => {
   const languageExports = await import(
-    /* webpackChunkName: "highlight-[request]", webpackPrefetch: true */
-    // https://github.com/babel/babel-eslint/issues/799#issuecomment-567598343
-    // can't migrate to @babel/eslint-parser yet: https://github.com/babel/babel/issues/11975
-    // eslint-disable-next-line prefer-template
-    'highlight.js/lib/languages/' + language
+    /* webpackChunkName: "highlight-[request]" */
+    `highlight.js/lib/languages/${language}`
   );
   highlight.registerLanguage(language, languageExports.default);
 });

package/components/confirm/confirm.js

@@ -64,6 +64,7 @@ export default class Confirm extends PureComponent {
 
     return (
       <Dialog
+        label={text || description}
         className={className}
         onEscPress={this.onEscPress}
         show={show}

package/components/confirm-service/confirm-service.js

@@ -38,20 +38,20 @@ export default function confirm({
           renderConfirm({...props, inProgress: true});
           return Promise.resolve(onBeforeConfirm()).
             then(() => {
-              renderConfirm({show: false});
+              renderConfirm({...props, show: false});
               resolve();
             }).
             catch(err => {
-              renderConfirm({show: false});
+              renderConfirm({...props, show: false});
               reject(err);
             });
         }
-        renderConfirm({show: false});
+        renderConfirm({...props, show: false});
         return resolve();
       },
 
       onReject: () => {
-        renderConfirm({show: false});
+        renderConfirm({...props, show: false});
         reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
       }
     };
@@ -61,5 +61,5 @@ export default function confirm({
 }
 
 export function hideConfirm() {
-  renderConfirm({show: false});
+  renderConfirm({text: '', show: false});
 }

package/components/content-layout/content-layout.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media, small-screen-media from '../global/global.css';
+@value unit, extra-small-screen-media, small-screen-media from "../global/global.css";
 @value sidebarWidth: calc(unit * 30);
 
 .contentLayout {

package/components/data-list/data-list.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value height, compensate from '../table/table.css';
+@value height, compensate from "../table/table.css";
 
 .dataListWrapper {
   position: relative;

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

@@ -25,7 +25,8 @@ export default class DateInput extends React.PureComponent {
     onInput: PropTypes.func,
     onActivate: PropTypes.func,
     onConfirm: PropTypes.func,
-    onClear: PropTypes.func
+    onClear: PropTypes.func,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,16 +79,16 @@ export default class DateInput extends React.PureComponent {
       time, name, hoverDate,
       date, displayFormat, translations,
       onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
     } = this.props;
 
     let displayText = '';
     if (active && hoverDate) {
-      displayText = displayFormat(hoverDate);
+      displayText = displayFormat(hoverDate, locale);
     } else if (active && text != null) {
       displayText = text;
     } else if (date) {
-      displayText = displayFormat(date);
+      displayText = displayFormat(date, locale);
     } else if (name === 'time') {
       displayText = time || '';
     }

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);
   }
@@ -136,7 +136,7 @@
   color: var(--ring-secondary-color);
 }
 
-.weekday {
+.weekday.weekday {
   display: inline-block;
 
   width: cellSize;
@@ -145,7 +145,7 @@
   text-transform: capitalize;
 }
 
-.weekend {
+.weekend.weekend {
   color: var(--ring-error-color);
 }
 
@@ -160,7 +160,7 @@
   box-shadow: 0 -1px var(--ring-line-color);
 }
 
-.months {
+.months.months {
   position: absolute;
   top: 0;
   right: yearWidth;
@@ -173,7 +173,7 @@
   left: 0;
 }
 
-.month {
+.month.month {
   display: flex;
   flex-wrap: wrap;
 
@@ -181,7 +181,7 @@
   margin: calc(unit * 2);
 }
 
-.month > * {
+.month.month > * {
   flex-shrink: 0;
 
   height: cellSize;
@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -209,7 +211,9 @@
 
 .day {
   composes: resetButton;
+}
 
+.day.day {
   position: relative;
 
   flex-basis: cellSize;
@@ -226,25 +230,25 @@
   }
 }
 
-.between {
+.between.between {
   transition: none;
 
   background-color: var(--ring-selected-background-color);
 }
 
-.activeBetween {
+.activeBetween.activeBetween {
   transition: none;
 
   background-color: var(--ring-date-picker-hover-color);
 }
 
-.current {
+.current.current {
   color: var(--ring-dark-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-main-color);
 }
 
-.active {
+.active.active {
   transition: none;
 
   color: var(--ring-link-hover-color);
@@ -252,17 +256,17 @@
   background-color: var(--ring-date-picker-hover-color);
 }
 
-.disabled {
+.disabled.disabled {
   cursor: not-allowed;
 
   color: var(--ring-disabled-color);
 }
 
-.from {
+.from.from {
   border-radius: var(--ring-border-radius) 0 0 var(--ring-border-radius);
 }
 
-.to {
+.to.to {
   border-radius: 0 var(--ring-border-radius) var(--ring-border-radius) 0;
 }
 
@@ -280,7 +284,7 @@
     width: calc(unit * 2);
     height: 100%;
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -323,7 +327,7 @@
     width: calc(unit * 23);
     height: calc(unit * 8);
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -355,7 +359,7 @@
       width: calc(unit * 2);
       height: 100%;
 
-      content: '';
+      content: "";
       transition: background-color var(--ring-ease);
     }
   }
@@ -390,13 +394,13 @@
   }
 }
 
-.empty {
+.empty.empty {
   pointer-events: none;
 
   opacity: 0;
 }
 
-.today {
+.today.today {
   position: relative;
 
   font-weight: bold;
@@ -407,7 +411,7 @@
   top: 0;
   left: calc(unit * 0.5);
 
-  content: '•';
+  content: "•";
 
   font-size: var(--ring-font-size-smaller);
 }
@@ -441,7 +445,9 @@
 .monthName {
   composes: hoverable;
   composes: resetButton;
+}
 
+.monthName.monthName {
   position: relative;
 
   width: 100%;
@@ -449,12 +455,16 @@
   height: cellSize;
   padding-left: calc(unit * 1.5);
 
+  text-transform: capitalize;
+
   line-height: cellSize;
 }
 
 .monthSlider {
   composes: resetButton;
+}
 
+.monthSlider.monthSlider {
   position: absolute;
   z-index: var(--ring-fixed-z-index);
   right: 0;
@@ -474,7 +484,7 @@
   opacity: 0.3;
 }
 
-.dragging.dragging {
+.dragging {
   cursor: grabbing;
 
   opacity: 0.35;
@@ -505,7 +515,9 @@
 .year {
   composes: hoverable;
   composes: resetButton;
+}
 
+.year.year {
   position: relative;
 
   width: 100%;
@@ -519,7 +531,7 @@
   line-height: yearHeight;
 }
 
-.currentYear {
+.currentYear.currentYear {
   cursor: auto;
   transition: none;
 

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>