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

package/components/tag/tag.js

@@ -29,7 +29,8 @@ export default class Tag extends PureComponent {
     textColor: PropTypes.string,
 
     children: PropTypes.node,
-    className: PropTypes.string
+    className: PropTypes.string,
+    render: PropTypes.func
   };
 
   static defaultProps = {
@@ -37,7 +38,8 @@ export default class Tag extends PureComponent {
     onClick: () => {},
     readOnly: false,
     disabled: false,
-    focused: false
+    focused: false,
+    render: props => <button type="button" {...props}/>
   };
 
   state = {
@@ -155,23 +157,24 @@ export default class Tag extends PureComponent {
       this.props.className
     );
 
-    const {backgroundColor, textColor} = this.props;
+    const {backgroundColor, textColor, render} = this.props;
 
     return (
       <span className={styles.container}>
-        <button
-          type="button"
-          data-test="ring-tag"
-          className={classes}
-          ref={this.tagRef}
-          onClick={this.props.onClick}
-          style={{backgroundColor, color: textColor}}
-        >
-          {this.renderAvatar()}
-          {this.renderCustomIcon()}
-          {this.renderImage()}
-          <span className={styles.content}>{this.props.children}</span>
-        </button>
+        {render({
+          'data-test': 'ring-tag',
+          className: classes,
+          ref: this.tagRef,
+          onClick: this.props.onClick,
+          style: {backgroundColor, color: textColor},
+          children: (
+            <>
+              {this.renderAvatar()}
+              {this.renderCustomIcon()}
+              {this.renderImage()}
+              <span className={styles.content}>{this.props.children}</span>
+            </>)
+        })}
         {this.renderRemoveIcon()}
       </span>
     );

package/components/tags-input/tag-input.examples.js

@@ -116,7 +116,7 @@ export const autoOpenInADialog = () => {
   return (
     <>
       <Button>Button</Button>
-      <Dialog show trapFocus autoFocusFirst={false}>
+      <Dialog label="Tags" show trapFocus autoFocusFirst={false}>
         <Content>
           <TagsInput tags={tags} dataSource={dataSource} autoOpen/>
         </Content>

package/components/tags-input/tags-input.js

@@ -70,6 +70,11 @@ export default class TagsInput extends PureComponent {
     placeholder: 'Select an option'
   };
 
+  constructor(props) {
+    super(props);
+    this.ngModelStateField = TagsInput.ngModelStateField;
+  }
+
   state = {
     tags: [],
     prevTags: null,
@@ -102,8 +107,6 @@ export default class TagsInput extends PureComponent {
     this.node = node;
   };
 
-  ngModelStateField = TagsInput.ngModelStateField;
-
   getInputNode() {
     if (!this.input) {
       this.input = this.select.filter;

package/components/template-ng/template-ng.js

@@ -39,7 +39,7 @@ class RgTemplateController extends RingAngularComponent {
     if (rgTemplateClass) {
       this.$inject.$element.contents().addClass(rgTemplateClass);
     }
-  }
+  };
 
   cleanup() {
     if (this.currentScope) {

package/components/tooltip/tooltip.js

@@ -20,7 +20,7 @@ export default class Tooltip extends Component {
     delay: PropTypes.number,
     selfOverflowOnly: PropTypes.bool,
     popupProps: PropTypes.object,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    title: PropTypes.node,
     children: PropTypes.node,
     'data-test': PropTypes.string
   };
@@ -133,15 +133,20 @@ export default class Tooltip extends Component {
     const {children, 'data-test': dataTest,
       title, delay, selfOverflowOnly, popupProps, ...restProps} = this.props;
 
+    const ariaProps = typeof title === 'string' && !!title
+      ? {'aria-label': title, role: 'tooltip'}
+      : {};
+
     const {onNestedTooltipShow, onNestedTooltipHide} = this;
 
     return (
       <TooltipContext.Provider value={{onNestedTooltipShow, onNestedTooltipHide}}>
         <span
+          {...ariaProps}
           {...restProps}
           ref={this.containerRef}
           data-test={dataTests('ring-tooltip', dataTest)}
-          data-test-title={title}
+          data-test-title={typeof title === 'string' ? title : undefined}
         >
           {children}
           <Popup

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/components/user-agreement/user-agreement.examples.js

@@ -34,12 +34,15 @@ dialog.args = {
 dialog.argTypes = {
   onRemindLater: {}
 };
+dialog.parameters = {
+  actions: {argTypesRegex: '^on(?!RemindLater).*'}
+};
 dialog.storyName = 'dialog';
 
 function noop() {}
 export const service = ({
-  onGetUserAgreemen,
-  onGetUserConsent,
+  onGetUserAgreement = noop,
+  onGetUserConsent = noop,
   onSetUserConsent = noop,
   onAccept,
   onDecline,
@@ -59,7 +62,7 @@ export const service = ({
 
   const agreementService = new UserAgreementService({
     getUserAgreement: () => {
-      onGetUserAgreemen(fakeUserAgreement);
+      onGetUserAgreement(fakeUserAgreement);
       return fakeUserAgreement;
     },
     getUserConsent: () => {
@@ -93,7 +96,7 @@ export const service = ({
 };
 
 service.argTypes = {
-  onGetUserAgreemen: {},
+  onGetUserAgreement: {},
   onGetUserConsent: {},
   onSetUserConsent: {},
   onAccept: {},

package/components/user-agreement/user-agreement.js

@@ -76,6 +76,7 @@ export default class UserAgreement extends PureComponent {
 
     return (
       <Dialog
+        label={translations.userAgreement}
         show={show}
         className={classNames(style.agreementDialog, className)}
         contentClassName={style.dialogContent}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.0-beta.9",
+  "version": "4.1.1",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -57,7 +57,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"
   },
@@ -67,32 +67,31 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/eslint-parser": "^7.14.3",
+    "@babel/cli": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.0.9",
-    "@jetbrains/stylelint-config": "^2.0.1",
+    "@jetbrains/generator-ring-ui": "^4.1.1",
+    "@jetbrains/stylelint-config": "^3.0.2",
+    "@primer/octicons": "^16.1.1",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@storybook/addon-a11y": "6.2.9",
-    "@storybook/addon-docs": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-storyshots": "6.2.9",
-    "@storybook/addon-storyshots-puppeteer": "6.2.9",
-    "@storybook/addon-storysource": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/builder-webpack5": "6.2.9",
-    "@storybook/client-api": "6.2.9",
-    "@storybook/core": "6.2.9",
-    "@storybook/html": "6.2.9",
-    "@storybook/source-loader": "6.2.9",
-    "@storybook/theming": "6.2.9",
-    "@testing-library/dom": "^7.31.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
-    "@ungap/url-search-params": "^0.2.2",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@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.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/builder-webpack5": "6.3.12",
+    "@storybook/client-api": "6.3.12",
+    "@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.5.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
     "angular-route": "^1.8.2",
@@ -100,124 +99,122 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
-    "chai-dom": "^1.9.0",
+    "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.13.0",
+    "core-js": "^3.19.1",
     "enzyme": "^3.11.0",
-    "eslint": "^7.27.0",
-    "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-plugin-angular": "^4.0.1",
+    "eslint": "^8.2.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.23.3",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
     "events": "^3.3.0",
     "glob": "^7.1.6",
-    "html-loader-jest": "^0.2.1",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^6.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~26.6.3",
-    "jest-teamcity": "^1.9.0",
-    "karma": "^6.3.2",
+    "imports-loader": "^3.1.1",
+    "jest": "~27.3.1",
+    "jest-teamcity": "^1.10.0",
+    "karma": "^6.3.9",
     "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.0.0",
+    "lint-staged": "^12.1.2",
     "merge-options": "^3.0.4",
-    "mocha": "^8.4.0",
+    "mocha": "^9.1.3",
     "pinst": "^2.1.6",
-    "process": "^0.11.10",
-    "puppeteer": "^9.1.1",
+    "puppeteer": "^10.4.0",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "regenerator-runtime": "^0.13.7",
-    "rollup": "^2.45.2",
+    "regenerator-runtime": "^0.13.9",
+    "rollup": "^2.60.0",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-styles": "^3.14.1",
-    "sinon": "^11.1.0",
+    "sinon": "^12.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.1.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.11",
-    "terser-webpack-plugin": "^5.1.2",
+    "terser-webpack-plugin": "^5.2.5",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.31.2",
-    "webpack-cli": "^4.7.0",
+    "webpack": "^5.64.1",
+    "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
-    "yo": "^4.2.0"
+    "yo": "^4.3.0"
   },
   "peerDependencies": {
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.31.2"
+    "webpack": "^5.64.1"
   },
   "dependencies": {
-    "@babel/core": "^7.14.3",
+    "@babel/core": "^7.16.0",
     "@jetbrains/angular-elastic": "^2.5.1",
-    "@jetbrains/babel-preset-jetbrains": "^2.2.3",
-    "@jetbrains/icons": "^3.14.1",
-    "@jetbrains/logos": "^1.4.16",
+    "@jetbrains/babel-preset-jetbrains": "^2.3.1",
+    "@jetbrains/icons": "^3.18.0",
+    "@jetbrains/logos": "^1.4.27",
     "@jetbrains/postcss-require-hover": "^0.1.2",
-    "angular-sanitize": "^1.8.2",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-define": "^2.0.0",
+    "@ungap/url-search-params": "^0.2.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-transform-define": "^2.0.1",
     "browserslist": "^4.16.6",
     "change-case": "^4.1.1",
     "classnames": "^2.3.1",
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
     "conic-gradient": "^1.0.0",
-    "css-loader": "^5.2.6",
-    "date-fns": "^2.21.3",
+    "css-loader": "^6.5.1",
+    "date-fns": "^2.26.0",
     "deep-equal": "^2.0.4",
-    "element-resize-detector": "^1.2.2",
+    "element-resize-detector": "^1.2.3",
     "es6-error": "^4.1.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "extricate-loader": "^3.0.0",
     "fastdom": "^1.0.10",
     "file-loader": "^6.2.0",
-    "focus-trap": "^6.4.0",
+    "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^1.3.2",
-    "imports-loader": "^3.0.0",
+    "html-loader": "^3.0.1",
     "interpolate-loader": "^2.0.1",
-    "just-debounce-it": "^1.5.0",
-    "memoize-one": "^5.2.1",
-    "postcss": "^8.3.0",
+    "just-debounce-it": "^3.0.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": "^5.3.0",
+    "postcss-loader": "^6.2.0",
     "postcss-modules-values-replace": "^3.4.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "^7.0.1",
     "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": "^2.0.2",
+    "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-inject": "^0.3.0",
-    "style-loader": "~2.0.0",
+    "style-loader": "~3.3.1",
+    "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },
   "engines": {
     "node": ">=7.4",
-    "npm": "^6.0.0"
+    "npm": ">=6.0.0"
   },
-  "gitHead": "97cc6ecf6c3338eb27e3e224be2796e26ab702cf"
+  "gitHead": "735256fde0ff2c663fa1293c677bbf419c928a32"
 }

package/webpack.config.js

@@ -1,11 +1,13 @@
 const path = require('path');
 
+const deprecate = require('util-deprecate');
+
 (function checkWebpack() {
   const webpackVersion = require('webpack').version;
   const isObsoleteWebpack = webpackVersion.startsWith('4');
   if (isObsoleteWebpack) {
-    // eslint-disable-next-line no-console
-    console.log(`[WARN]: RingUI is used with Webpack@"${webpackVersion}". Ring UI requires Webpack@>=5`);
+    // TODO remove in 5.0
+    deprecate(() => null, `[WARN]: RingUI is used with Webpack@"${webpackVersion}". Ring UI requires Webpack@>=5`)();
   }
 }());
 
@@ -30,7 +32,7 @@ function createConfig() {
         loader: require.resolve('css-loader'),
         options: {
           modules: {
-            localIdentName: '[local]_[hash:3]'
+            localIdentName: '[local]_[hash:4]'
           },
           importLoaders: 1
         }
@@ -66,12 +68,6 @@ function createConfig() {
     }
   };
 
-  const htmlLoader = {
-    test: /-ng(\\|\/)\S*(-ng|-ng__)\S*\.html$/,
-    include: componentsPath,
-    loader: require.resolve('html-loader')
-  };
-
   const gifLoader = {
     test: /\.gif$/,
     include: componentsPath,
@@ -82,7 +78,6 @@ function createConfig() {
     cssLoader,
     externalCssLoader,
     babelLoader,
-    htmlLoader,
     gifLoader
   };
 
@@ -117,6 +112,15 @@ module.exports = {
     },
     get vfileLoader() {
       throw new Error('***Ring UI embedded "vfileLoader" removed in 4.0. Please install and use own instance if you need it.***');
+    },
+    get htmlLoader() {
+      // eslint-disable-next-line no-console
+      console.warn('RingUI\'s "loaders.htmlLoader" is deprecated and will be removed soon. Please don\'t use it in your build');
+      return {
+        test: /-ng(\\|\/)\S*(-ng|-ng__)\S*\.html$/,
+        include: componentsPath,
+        loader: require.resolve('html-loader')
+      };
     }
   }
 };

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

@@ -1 +0,0 @@
-<div class="${require('../button-set/button-set.css').buttonSet}" ng-transclude></div>

package/components/footer-ng/footer-ng.html

@@ -1,13 +0,0 @@
-<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
-  <div ng-class=":: $ctrl.styles.columnLeft">
-    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnCenter">
-    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnRight">
-    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-</footer>

package/components/form-ng/form-ng__error-bubble.html

@@ -1,3 +0,0 @@
-<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
-  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
-</div>

package/components/table-legacy-ng/table-legacy-ng.html

@@ -1,4 +0,0 @@
-<div>
-  <table class="ring-table" ng-transclude>
-  </table>
-</div>

package/components/table-legacy-ng/table-legacy-ng__column.html

@@ -1,12 +0,0 @@
-<td class="ring-table__column"
-    ng-class="{
-    'ring-table__column_limited': isLimited,
-    'ring-table__column_unlimited': isUnlimited,
-    'ring-table__column_right': isAlignRight,
-    'ring-table__avatar': isAvatar,
-    'ring-table__column_wide': isWide,
-    'ring-table__column_gray': isGray,
-    'ring-table__column_snuggle-right': isPullRight,
-    'ring-table__column_snuggle-left': isPullLeft
-    }" ng-transclude>
-</td>

package/components/table-legacy-ng/table-legacy-ng__header.html

@@ -1,4 +0,0 @@
-<thead>
-  <tr class="ring-table__header" ng-transclude></tr>
-  <tr class="ring-table__header ring-table__header_sticky" rg-place-under="{{stickToSelector}}" ng-transclude></tr>
-</thead>

package/components/table-legacy-ng/table-legacy-ng__pager.html

@@ -1,7 +0,0 @@
-<rg-pager
-  total="pagerCtrl.total"
-  current-page="pagerCtrl.getPage()"
-  page-size="pagerCtrl.top"
-  on-page-change="pagerCtrl.onPageChange"
-  disable-page-size-selector="true"
-></rg-pager>

package/components/table-legacy-ng/table-legacy-ng__row.html

@@ -1,12 +0,0 @@
-<tr ng-click="rowCtrl.setActiveItem(rowCtrl.rowItem)"
-  ng-mouseover="rowCtrl.onMouseOver(rowCtrl.rowItem)"
-  ng-mouseout="rowCtrl.onMouseOut(rowCtrl.rowItem)"
-  class="ring-table__row" ng-class="{
-    'ring-table__row_active': rowCtrl.rowItem.active,
-    'ring-table__row_checked': rowCtrl.rowItem.checked,
-    'ring-table__row_active-checked': rowCtrl.rowItem.active && !rowCtrl.hasCheckedItems(),
-    'ring-table__row_implicit': rowCtrl.rowItem.implicit,
-    'ring-table__row_expanded': rowCtrl.rowItem.expanded,
-    'ring-table__row_unselectable': rowCtrl.rowItem.unselectable
-    }" ng-transclude>
-</tr>

package/components/table-legacy-ng/table-legacy-ng__title.html

@@ -1,9 +0,0 @@
-<th class="ring-table__title"
-    ng-class="{
-    'ring-table__title_border': isBorder,
-    'ring-table__title_active': isActive,
-    'ring-table__column_snuggle-right': isPullRight,
-    'ring-table__column_snuggle-left': isPullLeft,
-    'ring-table__column_align-right' : isAlignRight
-    }" ng-transclude>
-</th>