@jetbrains/ring-ui 5.0.31 → 5.0.33

package/dist/tags-input/tags-input.d.ts

@@ -1,8 +1,10 @@
-import React, { Component, PureComponent, SyntheticEvent } from 'react';
+import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
+import { Size } from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
 declare function noop(): void;
 export interface ToggleTagParams {
@@ -22,7 +24,6 @@ export interface TagsInputProps {
     disabled: boolean;
     autoOpen: boolean;
     renderOptimization: boolean;
-    legacyMode: boolean;
     allowAddNewTags: boolean;
     filter: boolean | Filter;
     placeholder: string;
@@ -30,6 +31,9 @@ export interface TagsInputProps {
     tags?: readonly TagType[] | null | undefined;
     loadingMessage?: string | undefined;
     notFoundMessage?: string | undefined;
+    size: Size;
+    height?: ControlsHeight | undefined;
+    label?: ReactNode;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -61,7 +65,6 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         disabled: PropTypes.Requireable<boolean>;
         autoOpen: PropTypes.Requireable<boolean>;
         renderOptimization: PropTypes.Requireable<boolean>;
-        legacyMode: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
             fn: PropTypes.Requireable<(...args: any[]) => any>;
         }> | null | undefined>>;
@@ -80,12 +83,12 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         disabled: boolean;
         autoOpen: boolean;
         renderOptimization: boolean;
-        legacyMode: boolean;
         allowAddNewTags: boolean;
         filter: {
             fn: () => boolean;
         };
         placeholder: string;
+        size: Size;
     };
     constructor(props: TagsInputProps);
     state: TagsInputState;
@@ -95,6 +98,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     componentDidMount(): void;
     static ngModelStateField: string;
     ngModelStateField: string;
+    static contextType: React.Context<ControlsHeight>;
+    id: string;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
     input?: HTMLInputElement | null;

package/dist/tags-input/tags-input.js

@@ -8,6 +8,10 @@ import TagsList from '../tags-list/tags-list.js';
 import Caret from '../caret/caret.js';
 import memoize from '../global/memoize.js';
 import rerenderHOC from '../global/rerender-hoc.js';
+import { Size } from '../input/input.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
+import getUID from '../global/get-uid.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
@@ -24,13 +28,11 @@ import '../icon/icon__svg.js';
 import '../button/button.js';
 import 'focus-visible';
 import '../link/clickableLink.js';
-import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
-import '../global/get-uid.js';
 import '../popup/popup.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
@@ -64,10 +66,6 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
-import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
-import '../_helpers/input.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
@@ -77,9 +75,11 @@ import '../shortcuts/shortcuts-hoc.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 import '../tag/tag.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../global/react-render-adapter.js';
 
-var modules_5aa8aaf3 = {"outerContainer":"outerContainer_rui_e356","container":"container_rui_e356","input":"input_rui_e356","tagsInput":"tagsInput_rui_1a67","tagsInputLegacyMode":"tagsInputLegacyMode_rui_1a67","tagsList":"tagsList_rui_1a67","tag":"tag_rui_1a67","tagsInputDisabled":"tagsInputDisabled_rui_1a67","underline":"underline_rui_1a67","tagsInputFocused":"tagsInputFocused_rui_1a67","tagsSelect":"tagsSelect_rui_1a67","focusUnderline":"focusUnderline_rui_1a67"};
+var modules_5aa8aaf3 = {"unit":"8px","outerContainer":"outerContainer_rui_e356","container":"container_rui_e356","input":"input_rui_e356","tagsInput":"tagsInput_rui_1a67","tagsInputDisabled":"tagsInputDisabled_rui_1a67","tagsInputFocused":"tagsInputFocused_rui_1a67","tagsList":"tagsList_rui_1a67","tagsSelect":"tagsSelect_rui_1a67"};
 
 function noop() {}
 /**
@@ -107,6 +107,8 @@ class TagsInput extends PureComponent {
 
     _defineProperty(this, "ngModelStateField", void 0);
 
+    _defineProperty(this, "id", getUID('ring-tags-list-'));
+
     _defineProperty(this, "node", void 0);
 
     _defineProperty(this, "nodeRef", node => {
@@ -390,16 +392,17 @@ class TagsInput extends PureComponent {
       activeIndex
     } = this.state;
     const {
-      legacyMode,
       disabled,
       canNotBeEmpty,
       allowAddNewTags,
-      filter
+      filter,
+      size,
+      height = this.context,
+      label
     } = this.props;
-    const classes = classNames(modules_5aa8aaf3.tagsInput, {
+    const classes = classNames(modules_5aa8aaf3.tagsInput, [modules_88cfaf40[`size${size}`]], [modules_88cfaf40[`height${height}`]], {
       [modules_5aa8aaf3.tagsInputDisabled]: disabled,
-      [modules_5aa8aaf3.tagsInputFocused]: focused,
-      [modules_5aa8aaf3.tagsInputLegacyMode]: legacyMode
+      [modules_5aa8aaf3.tagsInputFocused]: focused
     }, this.props.className);
     return /*#__PURE__*/React.createElement("div", {
       // it transfers focus to input
@@ -408,7 +411,12 @@ class TagsInput extends PureComponent {
       onKeyDown: this.handleKeyDown,
       onClick: this.clickHandler,
       ref: this.nodeRef
-    }, /*#__PURE__*/React.createElement(TagsList, {
+    }, label && /*#__PURE__*/React.createElement("label", {
+      htmlFor: this.id,
+      className: classNames(modules_88cfaf40.label, {
+        [modules_88cfaf40.disabledLabel]: disabled
+      })
+    }, label), /*#__PURE__*/React.createElement(TagsList, {
       tags: tags,
       activeIndex: activeIndex,
       disabled: disabled,
@@ -418,6 +426,7 @@ class TagsInput extends PureComponent {
       tagClassName: modules_5aa8aaf3.tag,
       handleClick: this.handleClick
     }, /*#__PURE__*/React.createElement(Select, {
+      id: this.id,
       ref: this.selectRef,
       size: Select.Size.AUTO,
       type: Select.Type.INPUT_WITHOUT_CONTROLS,
@@ -443,11 +452,7 @@ class TagsInput extends PureComponent {
       disabled: this.props.disabled,
       loadingMessage: this.props.loadingMessage,
       notFoundMessage: this.props.notFoundMessage
-    })), !legacyMode && /*#__PURE__*/React.createElement("div", {
-      className: modules_5aa8aaf3.underline
-    }), !legacyMode && /*#__PURE__*/React.createElement("div", {
-      className: modules_5aa8aaf3.focusUnderline
-    }));
+    })));
   }
 
 }
@@ -473,7 +478,6 @@ _defineProperty(TagsInput, "propTypes", {
   disabled: PropTypes.bool,
   autoOpen: PropTypes.bool,
   renderOptimization: PropTypes.bool,
-  legacyMode: PropTypes.bool,
   filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     fn: PropTypes.func
   })]),
@@ -493,16 +497,18 @@ _defineProperty(TagsInput, "defaultProps", {
   disabled: false,
   autoOpen: false,
   renderOptimization: true,
-  legacyMode: false,
   allowAddNewTags: false,
   filter: {
     fn: () => true
   },
-  placeholder: 'Select an option'
+  placeholder: 'Select an option',
+  size: Size.M
 });
 
 _defineProperty(TagsInput, "ngModelStateField", 'tags');
 
+_defineProperty(TagsInput, "contextType", ControlsHeightContext);
+
 const RerenderableTagsInput = rerenderHOC(TagsInput);
 
 export { RerenderableTagsInput, TagsInput as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.31",
+  "version": "5.0.33",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -73,11 +73,11 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
+    "@babel/cli": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
     "@jetbrains/eslint-config": "^5.4.1",
     "@jetbrains/stylelint-config": "^3.0.2",
-    "@primer/octicons": "^17.5.0",
+    "@primer/octicons": "^17.6.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -136,8 +136,8 @@
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^4.0.1",
-    "jest": "~29.0.3",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest": "~29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
     "jest-teamcity": "^1.10.0",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "3.1.1",
@@ -145,7 +145,7 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
-    "lerna": "^5.5.2",
+    "lerna": "^5.5.4",
     "lint-staged": "^13.0.3",
     "merge-options": "^3.0.4",
     "mocha": "^10.0.0",
@@ -163,11 +163,11 @@
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "stylelint": "^14.12.1",
+    "stylelint": "^14.13.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.6",
-    "typescript": "~4.8.3",
+    "typescript": "~4.8.4",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
@@ -194,11 +194,11 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.19.3",
     "@babel/preset-typescript": "^7.18.6",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^3.19.1",
-    "@jetbrains/logos": "^2.2.4",
+    "@jetbrains/logos": "^2.2.7",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.6",
     "@types/deep-equal": "^1.0.1",
@@ -232,7 +232,7 @@
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^3.1.1",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.17",
     "postcss-calc": "^8.2.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
@@ -259,5 +259,5 @@
     "node": ">=14.0",
     "npm": ">=6.0.0"
   },
-  "gitHead": "e8e24573cc2391bd814538c2b8a43684df802e5d"
+  "gitHead": "4bff84b6bce0294e76e9cb8d8e292d84e7a1aaac"
 }