@jetbrains/ring-ui 4.0.53 → 4.0.57

package/components/alert/container.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value alert from './alert.css';
+@value alert from "./alert.css";
 
 .alertContainer {
   position: fixed;

package/components/avatar/avatar.css

@@ -5,7 +5,9 @@
   object-fit: cover;
   object-position: center;
 
-  border-radius: var(--ring-border-radius); /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
 }
 
 .subavatar {

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -19,7 +19,7 @@
     width: 0;
     height: calc(unit * 5);
 
-    content: '';
+    content: "";
     vertical-align: middle;
   }
 }
@@ -49,7 +49,7 @@
     width: 100%;
     height: 100%;
 
-    content: '';
+    content: "";
 
     background-color: rgba(0, 0, 0, 0.8);
   }

package/components/button/button.css

@@ -451,7 +451,7 @@
     width: calc(100% + loaderWidth);
     height: 100%;
 
-    content: '';
+    content: "";
     animation: progress 1s linear infinite;
 
     background-repeat: repeat;
@@ -460,7 +460,7 @@
 }
 
 .delayed .content::after {
-  content: '…';
+  content: "…";
 }
 
 .short {

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/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);
   }
@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -280,7 +282,7 @@
     width: calc(unit * 2);
     height: 100%;
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -323,7 +325,7 @@
     width: calc(unit * 23);
     height: calc(unit * 8);
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -355,7 +357,7 @@
       width: calc(unit * 2);
       height: 100%;
 
-      content: '';
+      content: "";
       transition: background-color var(--ring-ease);
     }
   }
@@ -407,7 +409,7 @@
   top: 0;
   left: calc(unit * 0.5);
 
-  content: '•';
+  content: "•";
 
   font-size: var(--ring-font-size-smaller);
 }
@@ -449,6 +451,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/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-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/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/global/global.css

@@ -11,7 +11,7 @@ Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
     display: block;
     clear: both;
 
-    content: '';
+    content: "";
   }
 }
 

package/components/global/variables.css

@@ -87,7 +87,14 @@
   --ring-ease: 0.3s ease-out;
   --ring-fast-ease: 0.15s ease-out;
   --ring-font-family: system-ui, Arial, sans-serif;
-  --ring-font-family-monospace: Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier, monospace;
+  --ring-font-family-monospace:
+    Menlo,
+    "Bitstream Vera Sans Mono",
+    "Ubuntu Mono",
+    Consolas,
+    "Courier New",
+    Courier,
+    monospace;
 
   /* Common z-index-values */
 

package/components/grid/grid.css

@@ -1,23 +1,24 @@
 @import "../global/variables.css";
 
-@value unit, breakpoint-small, breakpoint-middle, breakpoint-large, large-screen-media, middle-screen-media, small-screen-media from '../global/global.css';
+@value unit, breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
+@value large-screen-media, middle-screen-media, small-screen-media from "../global/global.css";
 @value gutterWidth: (unit*2);
 @value gutterCompensation: calc(gutterWidth / -2);
 @value outerMargin: calc(unit*2);
 @value containerSmall: calc(breakpoint-small + gutterWidth);
 @value containerMedium: calc(breakpoint-middle + gutterWidth);
 @value containerLarge: calc(breakpoint-large + gutterWidth);
-@value width-1: 8.33333333%;
-@value width-2: 16.66666667%;
+@value width-1: 8.3333%;
+@value width-2: 16.6667%;
 @value width-3: 25%;
-@value width-4: 33.33333333%;
-@value width-5: 41.66666667%;
+@value width-4: 33.3333%;
+@value width-5: 41.6667%;
 @value width-6: 50%;
-@value width-7: 58.33333333%;
-@value width-8: 66.66666667%;
+@value width-7: 58.3333%;
+@value width-8: 66.6667%;
 @value width-9: 75%;
-@value width-10: 83.33333333%;
-@value width-11: 91.66666667%;
+@value width-10: 83.3333%;
+@value width-11: 91.6667%;
 @value width-12: 100%;
 
 .container-fluid,

package/components/header/header.css

@@ -152,7 +152,7 @@
     width: unit;
     height: unit;
 
-    content: '';
+    content: "";
 
     border: 1px solid var(--ring-dark-text-color);
     border-radius: 50%;

package/components/icon/icon.css

@@ -16,22 +16,22 @@
 
   pointer-events: none;
 
-  &[width='10'] {
+  &[width="10"] {
     vertical-align: -1px;
   }
 
-  &[width='14'] {
+  &[width="14"] {
     margin-right: -2px;
     margin-left: 0;
 
     vertical-align: -3px;
   }
 
-  &[width='16'] {
+  &[width="16"] {
     vertical-align: -3px;
   }
 
-  &[width='20'] {
+  &[width="20"] {
     vertical-align: -2px;
   }
 
@@ -44,6 +44,7 @@
 }
 
 /* HACK: This media query hack makes styles applied for WebKit browsers only */
+/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   .glyph {
     width: auto; /* Safari size bug workaround, see https://youtrack.jetbrains.com/issue/RG-1983 */

package/components/island/island.css

@@ -96,12 +96,13 @@
   width: 100%;
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
 
   pointer-events: none;
 
   opacity: 0.8;
-  background: linear-gradient(to top, gradientStart, gradientStop); /* stylelint-disable-line function-linear-gradient-no-nonstandard-direction */
+
+  background: linear-gradient(to top, gradientStart, gradientStop);
 }
 
 .contentWithTopFade:first-child::before {
@@ -119,7 +120,7 @@
   width: 100%;
   height: calc(unit * 3);
 
-  content: '';
+  content: "";
   pointer-events: none;
 
   opacity: 0.8;

package/components/island-legacy/island-legacy.css

@@ -70,7 +70,9 @@
 
 :global(.ring-island__header-btn),
 :global(.ring-island__header-button:hover) {
-  background: var(--ring-hover-background-color) linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
+  background:
+    var(--ring-hover-background-color)
+    linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
 }
 
 :global(.ring-island__header-btn),

package/components/loader-inline/loader-inline.css

@@ -49,7 +49,7 @@
     width: calc(unit * 2);
     height: calc(unit * 2);
 
-    content: '';
+    content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
   }
 }

package/components/loader-screen/loader-screen.css

@@ -14,7 +14,7 @@
 
     height: 100%;
 
-    content: '';
+    content: "";
 
     vertical-align: middle;
   }

package/components/message/message.css

@@ -28,7 +28,7 @@
     bottom: 0;
     left: 0;
 
-    content: '';
+    content: "";
 
     border-radius: var(--ring-border-radius);
 

package/components/progress-bar/progress-bar.css

@@ -61,7 +61,7 @@
     bottom: 0;
     left: 0;
 
-    content: '';
+    content: "";
     animation: progress-bar 2500ms linear infinite;
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));

package/components/query-assist/query-assist.css

@@ -161,7 +161,7 @@
 }
 
 .queryAssist {
-  composes: font from '../global/global.css';
+  composes: font from "../global/global.css";
 
   position: relative;
 

package/components/select/select.css

@@ -248,3 +248,7 @@
 
   color: inherit;
 }
+
+.avatar {
+  vertical-align: -6px;
+}

package/components/select/select.examples.js

@@ -36,6 +36,7 @@ export default {
 };
 
 export const withAFilterAndTags = args => <Select {...args}/>;
+export const withAvatars = args => <Select {...args}/>;
 
 {
   const avatarUrl = `${hubConfig.serverUri}/api/rest/avatar/default?username=blue`;
@@ -77,6 +78,12 @@ export const withAFilterAndTags = args => <Select {...args}/>;
     data: tags,
     selected: [tags[0]]
   };
+
+  withAvatars.args = {
+    data: tags,
+    selected: tags[4],
+    type: Select.Type.BUTTON
+  };
 }
 
 withAFilterAndTags.storyName = 'with a filter and tags';

package/components/select/select.js

@@ -220,6 +220,7 @@ export default class Select extends Component {
 
   static propTypes = {
     className: PropTypes.string,
+    buttonClassName: PropTypes.string,
     id: PropTypes.string,
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     allowAny: PropTypes.bool,
@@ -1034,10 +1035,12 @@ export default class Select extends Component {
   }
 
   _getAvatar() {
-    return this.state.selected && this.state.selected.avatar && (
+    return this.state.selected &&
+      (this.state.selected.avatar || this.state.selected.showGeneratedAvatar) && (
       <Avatar
         className={styles.avatar}
         url={this.state.selected.avatar}
+        username={this.state.selected.username}
         size={AvatarSize.Size20}
       />
     );
@@ -1152,6 +1155,7 @@ export default class Select extends Component {
                 id={this.props.id}
                 onClick={this._clickHandler}
                 className={classNames(
+                  this.props.buttonClassName,
                   styles.buttonValue,
                   {
                     [styles.buttonValueOpen]: this.state.showPopup
@@ -1192,7 +1196,7 @@ export default class Select extends Component {
               onClick={this._clickHandler}
               type="button"
               disabled={this.props.disabled}
-              className={classNames(styles.value, {
+              className={classNames(this.props.buttonClassName, styles.value, {
                 [styles.open]: this.state.showPopup,
                 [styles.label]: this._selectionIsEmpty()
               })}

package/components/shortcuts-hint-ng/shortcuts-hint-ng.css

@@ -43,7 +43,7 @@
 
   height: calc(unit / 2);
 
-  content: '';
+  content: "";
 }
 
 :global(.shortcuts-hint__search-input-wrapper) {

package/components/sidebar/sidebar.css

@@ -63,6 +63,7 @@
   width: calc(6 * unit);
   height: calc(6 * unit);
   object-fit: contain;
+
   padding: 0 calc(2 * unit) 0 calc(4 * unit);
 }
 

package/components/table-legacy/table-legacy.css

@@ -75,7 +75,7 @@
 }
 
 :global(.ring-table__title_border::after) {
-  content: '';
+  content: "";
 }
 
 :global(.ring-table__title_nested) {
@@ -239,7 +239,7 @@
 }
 
 :global(.ring-table__column-list:not(:last-child)::after) {
-  content: ', ';
+  content: ", ";
 }
 
 :global(.ring-table__row) {

package/components/tag/tag.css

@@ -56,7 +56,10 @@
 }
 
 .tagAngled {
-  margin-bottom: -5px !important; /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
+  /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
+
+  margin-bottom: -5px !important;
+
   margin-left: unit;
   padding-left: calc(unit / 2);
 
@@ -73,7 +76,7 @@
     width: 12px;
     height: 12px;
 
-    content: '';
+    content: "";
     transform: scaleY(1.177) rotate(45deg);
     transform-origin: 0 0;
 

package/components/user-agreement/user-agreement.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media from '../global/global.css';
+@value unit, extra-small-screen-media from "../global/global.css";
 
 .agreementDialog {
   padding-bottom: 80px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.0.53",
+  "version": "4.0.57",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -55,7 +55,7 @@
     "test-ci": "karma start karma-ci.conf.js",
     "test-watch": "karma start karma-watch.conf.js",
     "prerelease-ci": "git pull",
-    "release-ci": "lerna publish --yes",
+    "release-ci": "lerna publish --no-verify-access --yes",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable"
   },
@@ -65,29 +65,29 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/eslint-parser": "^7.15.8",
+    "@babel/cli": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.0",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.0.41",
-    "@jetbrains/stylelint-config": "^2.0.1",
-    "@primer/octicons": "^16.0.0",
-    "@storybook/addon-a11y": "6.3.11",
-    "@storybook/addon-docs": "6.3.10",
-    "@storybook/addon-essentials": "6.3.11",
+    "@jetbrains/generator-ring-ui": "^4.0.44",
+    "@jetbrains/stylelint-config": "^3.0.1",
+    "@primer/octicons": "^16.1.1",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-storyshots": "6.3.2",
     "@storybook/addon-storyshots-puppeteer": "6.3.2",
-    "@storybook/addon-storysource": "6.3.11",
-    "@storybook/addons": "6.3.10",
+    "@storybook/addon-storysource": "6.3.12",
+    "@storybook/addons": "6.3.12",
     "@storybook/builder-webpack5": "6.3.12",
     "@storybook/client-api": "6.3.12",
-    "@storybook/core": "6.3.11",
-    "@storybook/html": "6.3.10",
-    "@storybook/manager-webpack5": "^6.3.10",
-    "@storybook/source-loader": "6.3.10",
-    "@storybook/theming": "6.3.10",
+    "@storybook/core": "6.3.12",
+    "@storybook/html": "6.3.12",
+    "@storybook/manager-webpack5": "^6.3.12",
+    "@storybook/source-loader": "6.3.12",
+    "@storybook/theming": "6.3.12",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.3.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
     "angular-route": "^1.8.2",
@@ -98,32 +98,32 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.18.2",
+    "core-js": "^3.19.1",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
-    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.25.1",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "events": "^3.3.0",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.2",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^3.0.0",
-    "jest": "~27.2.5",
+    "imports-loader": "^3.1.1",
+    "jest": "~27.3.1",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.8",
     "karma-chrome-launcher": "3.1.0",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^11.2.3",
+    "lint-staged": "^11.2.6",
     "merge-options": "^3.0.4",
-    "mocha": "^9.1.2",
+    "mocha": "^9.1.3",
     "pinst": "^2.1.6",
     "puppeteer": "^10.4.0",
     "raw-loader": "^4.0.2",
@@ -131,16 +131,16 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "sinon": "^11.1.2",
+    "sinon": "^12.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.0.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.11",
     "terser-webpack-plugin": "^5.2.4",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.58.2",
-    "webpack-cli": "^4.9.0",
+    "webpack": "^5.62.1",
+    "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
   },
@@ -148,17 +148,17 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.58.2"
+    "webpack": "^5.62.1"
   },
   "dependencies": {
-    "@babel/core": "^7.15.8",
+    "@babel/core": "^7.16.0",
     "@jetbrains/angular-elastic": "^2.5.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.1",
-    "@jetbrains/icons": "^3.17.1",
-    "@jetbrains/logos": "^1.4.24",
+    "@jetbrains/icons": "^3.18.0",
+    "@jetbrains/logos": "^1.4.25",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@ungap/url-search-params": "^0.2.2",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-define": "^2.0.1",
     "browserslist": "^4.16.6",
     "change-case": "^4.1.1",
@@ -166,7 +166,7 @@
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
     "conic-gradient": "^1.0.0",
-    "css-loader": "^6.4.0",
+    "css-loader": "^6.5.1",
     "date-fns": "^2.25.0",
     "deep-equal": "^2.0.4",
     "element-resize-detector": "^1.2.3",
@@ -178,28 +178,28 @@
     "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.0.1",
     "interpolate-loader": "^2.0.1",
-    "just-debounce-it": "^1.5.0",
-    "memoize-one": "^5.2.1",
-    "postcss": "^8.3.9",
+    "just-debounce-it": "^2.1.1",
+    "memoize-one": "^6.0.0",
+    "postcss": "^8.3.11",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^6.7.0",
     "prop-types": "^15.7.2",
     "react-markdown": "^5.0.3",
-    "react-movable": "^2.5.4",
+    "react-movable": "^3.0.2",
     "react-virtualized": "^9.22.3",
     "react-waypoint": "^10.1.0",
-    "remark-breaks": "^3.0.1",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^1.0.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
-    "style-loader": "~3.3.0",
+    "style-loader": "~3.3.1",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },
@@ -207,5 +207,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "9d7767ca07052d0b00c87604095ba7a23f19473f"
+  "gitHead": "736f0f0c8252b75e92b902a12cea670c864787ad"
 }