@jetbrains/ring-ui 4.0.56 → 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-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);
   }
@@ -282,7 +282,7 @@
     width: calc(unit * 2);
     height: 100%;
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -325,7 +325,7 @@
     width: calc(unit * 23);
     height: calc(unit * 8);
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -357,7 +357,7 @@
       width: calc(unit * 2);
       height: 100%;
 
-      content: '';
+      content: "";
       transition: background-color var(--ring-ease);
     }
   }
@@ -409,7 +409,7 @@
   top: 0;
   left: calc(unit * 0.5);
 
-  content: '•';
+  content: "•";
 
   font-size: var(--ring-font-size-smaller);
 }

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.56",
+  "version": "4.0.57",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -65,11 +65,11 @@
   },
   "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.43",
-    "@jetbrains/stylelint-config": "^2.0.1",
+    "@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",
@@ -98,7 +98,7 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.19.0",
+    "core-js": "^3.19.1",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
     "eslint-import-resolver-webpack": "^0.13.2",
@@ -111,17 +111,17 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^3.1.0",
+    "imports-loader": "^3.1.1",
     "jest": "~27.3.1",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.3.5",
+    "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.3",
     "pinst": "^2.1.6",
@@ -131,15 +131,15 @@
     "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.59.1",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
@@ -148,13 +148,13 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.59.1"
+    "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/icons": "^3.18.0",
     "@jetbrains/logos": "^1.4.25",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@ungap/url-search-params": "^0.2.2",
@@ -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,9 +178,9 @@
     "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^3.0.0",
+    "html-loader": "^3.0.1",
     "interpolate-loader": "^2.0.1",
-    "just-debounce-it": "^2.0.0",
+    "just-debounce-it": "^2.1.1",
     "memoize-one": "^6.0.0",
     "postcss": "^8.3.11",
     "postcss-calc": "^8.0.0",
@@ -191,7 +191,7 @@
     "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.2",
@@ -207,5 +207,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "47f9adf1d43b1494f1df7af9ea28a00713c11696"
+  "gitHead": "736f0f0c8252b75e92b902a12cea670c864787ad"
 }