@jetbrains/ring-ui 4.2.0 → 4.2.3

package/components/analytics/analytics__ga-plugin.js

@@ -36,6 +36,7 @@ export default class AnalyticsGAPlugin {
     }
 
     ga('set', 'anonymizeIp', true);
+    ga('set', 'location', domain || '/');
     ga('set', 'allowAdFeatures', false);
   }
 

package/components/select/select.examples.js

@@ -5,6 +5,8 @@ import warningIcon from '@jetbrains/icons/warning';
 import reactDecorator from '../../.storybook/react-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
+import Text from '../text/text';
+
 import Link from '@jetbrains/ring-ui/components/link/link';
 import Popup from '@jetbrains/ring-ui/components/popup/popup';
 import List from '@jetbrains/ring-ui/components/list/list';
@@ -961,6 +963,31 @@ export const multipleWithSelectAllAndDisabledItem = args => <Select {...args}/>;
 multipleWithSelectAllAndDisabledItem.storyName = 'multiple with select all and disabled item';
 multipleWithSelectAllAndDisabledItem.parameters = {hermione: {skip: true}};
 
+export const multipleWithSelectAllAndCustomLabels = args => <Select {...args}/>;
+{
+  const data = [
+    {label: 'One long label', key: '1'},
+    {label: 'Two long label', key: '2'},
+    {label: 'Three long label', key: '3'}
+  ];
+
+  const multipleConfig = {
+    selectAll: true,
+    selectAllLabel: 'All Items',
+    deselectAllLabel: 'None Items',
+    renderSelectedItemsDescription: selected => <Text info>{`${selected.length} items selected`}</Text>
+  };
+
+  multipleWithSelectAllAndCustomLabels.args = {
+    filter: true,
+    multiple: multipleConfig,
+    selected: [data[1]],
+    data
+  };
+}
+
+multipleWithSelectAllAndCustomLabels.storyName = 'multiple with select all and custom labels';
+multipleWithSelectAllAndCustomLabels.parameters = {hermione: {skip: true}};
 
 export const multipleWithLimit = args => <Select {...args}/>;
 {

package/components/select/select__popup.js

@@ -63,7 +63,10 @@ export default class SelectPopup extends PureComponent {
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
       label: PropTypes.string,
       limit: PropTypes.number,
-      selectAll: PropTypes.bool
+      selectAll: PropTypes.bool,
+      selectAllLabel: PropTypes.string,
+      deselectAllLabel: PropTypes.string,
+      renderSelectedItemsDescription: PropTypes.func
     })]),
     left: PropTypes.bool,
     loading: PropTypes.bool,
@@ -406,12 +409,15 @@ export default class SelectPopup extends PureComponent {
                 onClick={this.handleSelectAll}
               >
                 {activeFilters.length !== this.props.selected.length
-                  ? 'Select all'
-                  : 'Deselect all'}
+                  ? this.props.multiple.selectAllLabel || 'Select all'
+                  : this.props.multiple.deselectAllLabel || 'Deselect all'}
               </Button>
             )
         }
-        <Text info>{`${this.props.selected.length} selected`}</Text>
+        {this.props.multiple.renderSelectedItemsDescription
+          ?.(this.props.selected, activeFilters.length) || (
+          <Text info>{`${this.props.selected.length} selected`}</Text>
+        )}
       </div>
     );
   };

package/components/select-ng/select-ng__lazy.js

@@ -12,7 +12,11 @@ class SelectLazy {
     this.props = props || {};
     this.type = type;
     this.node = container;
-    this.selectRef = selectRef;
+    this.selectInstance = null;
+    this.selectRef = node => {
+      this.selectInstance = node;
+      selectRef(node);
+    };
     this._popup = {
       isVisible: angular.noop
     };
@@ -65,6 +69,8 @@ class SelectLazy {
     this.detachEvents();
     if (this.type === 'dropdown') {
       render(this.reactSelect, this.container);
+      // Hack for React17, where click event is not triggered on just rendered Select node
+      this.selectInstance?._openPopupIfClosed?.();
     } else {
       hydrate(this.reactSelect, this.container);
     }

package/dist/analytics/analytics__ga-plugin.js

@@ -46,6 +46,7 @@ class AnalyticsGAPlugin {
     }
 
     ga('set', 'anonymizeIp', true);
+    ga('set', 'location', domain || '/');
     ga('set', 'allowAdFeatures', false);
   }
 

package/dist/select/select__popup.js

@@ -158,6 +158,8 @@ class SelectPopup extends PureComponent {
     _defineProperty(this, "handleSelectAll", () => this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length));
 
     _defineProperty(this, "getSelectAll", () => {
+      var _this$props$multiple$, _this$props$multiple;
+
       const activeFilters = this.props.data.filter(item => !item.disabled);
       return /*#__PURE__*/React.createElement("div", {
         className: modules_b607bec2.selectAll
@@ -165,7 +167,7 @@ class SelectPopup extends PureComponent {
         text: true,
         inline: true,
         onClick: this.handleSelectAll
-      }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
+      }, activeFilters.length !== this.props.selected.length ? this.props.multiple.selectAllLabel || 'Select all' : this.props.multiple.deselectAllLabel || 'Deselect all'), ((_this$props$multiple$ = (_this$props$multiple = this.props.multiple).renderSelectedItemsDescription) === null || _this$props$multiple$ === void 0 ? void 0 : _this$props$multiple$.call(_this$props$multiple, this.props.selected, activeFilters.length)) || /*#__PURE__*/React.createElement(Text, {
         info: true
       }, "".concat(this.props.selected.length, " selected")));
     });
@@ -502,7 +504,10 @@ _defineProperty(SelectPopup, "propTypes", {
   multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     label: PropTypes.string,
     limit: PropTypes.number,
-    selectAll: PropTypes.bool
+    selectAll: PropTypes.bool,
+    selectAllLabel: PropTypes.string,
+    deselectAllLabel: PropTypes.string,
+    renderSelectedItemsDescription: PropTypes.func
   })]),
   left: PropTypes.bool,
   loading: PropTypes.bool,

package/dist/select-ng/select-ng__lazy.js

@@ -95,7 +95,13 @@ class SelectLazy {
     this.props = props || {};
     this.type = type;
     this.node = container;
-    this.selectRef = selectRef;
+    this.selectInstance = null;
+
+    this.selectRef = node => {
+      this.selectInstance = node;
+      selectRef(node);
+    };
+
     this._popup = {
       isVisible: angular.noop
     };
@@ -148,7 +154,11 @@ class SelectLazy {
     this.detachEvents();
 
     if (this.type === 'dropdown') {
-      render(this.reactSelect, this.container);
+      var _this$selectInstance, _this$selectInstance$;
+
+      render(this.reactSelect, this.container); // Hack for React17, where click event is not triggered on just rendered Select node
+
+      (_this$selectInstance = this.selectInstance) === null || _this$selectInstance === void 0 ? void 0 : (_this$selectInstance$ = _this$selectInstance._openPopupIfClosed) === null || _this$selectInstance$ === void 0 ? void 0 : _this$selectInstance$.call(_this$selectInstance);
     } else {
       hydrate(this.reactSelect, this.container);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.2.0",
+  "version": "4.2.3",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -70,7 +70,7 @@
     "@babel/cli": "^7.17.6",
     "@babel/eslint-parser": "^7.17.0",
     "@jetbrains/eslint-config": "^5.3.2",
-    "@jetbrains/generator-ring-ui": "^4.1.9",
+    "@jetbrains/generator-ring-ui": "^4.1.10",
     "@jetbrains/stylelint-config": "^3.0.2",
     "@primer/octicons": "^17.0.0",
     "@rollup/plugin-babel": "^5.3.1",
@@ -81,20 +81,20 @@
     "@storybook/addon-storyshots": "6.5.0-alpha.59",
     "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.59",
     "@storybook/addon-storysource": "6.5.0-alpha.59",
-    "@storybook/addons": "6.5.0-alpha.59",
-    "@storybook/builder-webpack5": "6.5.0-alpha.59",
+    "@storybook/addons": "6.5.0-alpha.64",
+    "@storybook/builder-webpack5": "6.5.0-alpha.64",
     "@storybook/client-api": "6.5.0-alpha.59",
-    "@storybook/core": "6.5.0-alpha.59",
+    "@storybook/core": "6.5.0-alpha.64",
     "@storybook/html": "6.5.0-alpha.59",
     "@storybook/manager-webpack5": "6.5.0-alpha.59",
     "@storybook/source-loader": "6.5.0-alpha.59",
     "@storybook/theming": "6.5.0-alpha.59",
     "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.4",
+    "@testing-library/user-event": "^14.1.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
-    "angular-route": "^1.8.2",
+    "angular-route": "^1.8.3",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-require-context-hook": "^1.0.0",
     "chai": "^4.3.6",
@@ -147,7 +147,7 @@
     "teamcity-service-messages": "^0.1.12",
     "terser-webpack-plugin": "^5.3.1",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
@@ -156,7 +156,7 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.70.0"
+    "webpack": "^5.72.0"
   },
   "peerDependenciesMeta": {
     "webpack": {
@@ -221,5 +221,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "986c4b2e86d7e83388dc77b38bd9d62e1657b747"
+  "gitHead": "9d293b7a0089eab3fbadaffb55a1ede32367c2df"
 }