@jetbrains/ring-ui 5.0.32 → 5.0.33

package/components/dialog/dialog.css

@@ -124,3 +124,11 @@
   font-size: 24px;
   line-height: 28px;
 }
+
+.dense .header {
+  padding-top: calc(unit * 2);
+}
+
+.dense .panel {
+  padding-bottom: calc(unit * 2);
+}

package/components/dialog/dialog.d.ts

@@ -15,6 +15,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
     'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
 }
 /**
  * @name Dialog

package/components/dialog/dialog.js

@@ -100,7 +100,7 @@ export default class Dialog extends PureComponent {
         this.dialog = tabTrap && tabTrap.node;
     };
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
@@ -110,7 +110,7 @@ export default class Dialog extends PureComponent {
                 // click handler is duplicated in close button
                 role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
               <div className={styles.innerContainer}>
-                <AdaptiveIsland className={classNames(styles.content, contentClassName)} data-test="ring-dialog" role="dialog" aria-label={label}>
+                <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
                   {children}
                   {showCloseButton &&
                     (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {

package/components/tags-input/tags-input.css

@@ -1,29 +1,19 @@
 @import "../global/variables.css";
 
+@value unit from "../global/global.css";
 @value outerContainer, container, input from "../input/input.css";
 
 .tagsInput {
-  padding-top: 2px;
-  padding-bottom: 2px;
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: 3px;
 
-  white-space: normal;
-}
-
-.tagsInputLegacyMode {
-  padding-top: 0;
-  padding-bottom: 1px;
-
-  border: 1px solid var(--ring-borders-color);
-  background-color: var(--ring-content-background-color);
-
-  & .tagsList {
-    padding-top: 1px;
+  box-sizing: border-box;
 
-    line-height: 20px;
-  }
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-  & .tag {
-    margin-right: 2px;
+  & * {
+    box-sizing: border-box;
   }
 }
 
@@ -35,10 +25,6 @@
   & .input {
     background-color: transparent;
   }
-
-  & .underline {
-    border-bottom-style: dashed;
-  }
 }
 
 .tagsInputFocused {
@@ -46,16 +32,41 @@
 }
 
 .tagsList {
-  display: inline-block;
-
-  box-sizing: border-box;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
   width: 100%;
-  margin-bottom: -1px;
 
-  padding-left: 2px;
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
+
+  cursor: text;
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
+
+  font: inherit;
+
+  caret-color: var(--ring-main-color);
+
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
 
-  line-height: 22px;
+    border-color: var(--ring-border-hover-color);
+  }
 }
 
 .tagsSelect {
@@ -69,24 +80,3 @@
     line-height: calc(var(--ring-line-height) - 2px);
   }
 }
-
-.underline {
-  height: 1px;
-
-  border-bottom: var(--ring-borders-color) 1px solid;
-}
-
-.focusUnderline {
-  width: 0;
-  height: 2px;
-
-  margin-top: -1px;
-
-  transition: width 0.15s ease-out;
-
-  background: var(--ring-main-color);
-
-  @nest .tagsInputFocused & {
-    width: 100%;
-  }
-}

package/components/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/components/tags-input/tags-input.js

@@ -7,6 +7,10 @@ import TagsList from '../tags-list/tags-list';
 import Caret from '../caret/caret';
 import memoize from '../global/memoize';
 import rerenderHOC from '../global/rerender-hoc';
+import { Size } from '../input/input';
+import { ControlsHeightContext } from '../global/controls-height';
+import getUID from '../global/get-uid';
+import inputStyles from '../input/input.css';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -34,7 +38,6 @@ export default class TagsInput extends PureComponent {
         disabled: PropTypes.bool,
         autoOpen: PropTypes.bool,
         renderOptimization: PropTypes.bool,
-        legacyMode: PropTypes.bool,
         filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ fn: PropTypes.func })]),
         loadingMessage: PropTypes.string,
         notFoundMessage: PropTypes.string,
@@ -51,10 +54,10 @@ export default class TagsInput extends PureComponent {
         disabled: false,
         autoOpen: false,
         renderOptimization: true,
-        legacyMode: false,
         allowAddNewTags: false,
         filter: { fn: () => true },
-        placeholder: 'Select an option'
+        placeholder: 'Select an option',
+        size: Size.M
     };
     constructor(props) {
         super(props);
@@ -85,6 +88,8 @@ export default class TagsInput extends PureComponent {
     }
     static ngModelStateField = 'tags';
     ngModelStateField;
+    static contextType = ControlsHeightContext;
+    id = getUID('ring-tags-list-');
     node;
     nodeRef = (node) => {
         this.node = node;
@@ -244,21 +249,21 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { legacyMode, disabled, canNotBeEmpty, allowAddNewTags, filter } = this.props;
-        const classes = classNames(styles.tagsInput, {
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
+        const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
-            [styles.tagsInputFocused]: focused,
-            [styles.tagsInputLegacyMode]: legacyMode
+            [styles.tagsInputFocused]: focused
         }, this.props.className);
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
+                    [inputStyles.disabledLabel]: disabled
+                })}>{label}</label>)}
+
         <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
-          <Select ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
+          <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
         </TagsList>
-
-        {!legacyMode && <div className={styles.underline}/>}
-        {!legacyMode && <div className={styles.focusUnderline}/>}
       </div>);
     }
 }

package/dist/_helpers/dialog__body-scroll-preventer.js

@@ -1,6 +1,6 @@
 import scrollbarWidth from 'scrollbar-width';
 
-var modules_5e9b8c03 = {"unit":"8px","header":"header_rui_1d72","container":"container_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIcon":"closeIcon_rui_381e","closeButton":"closeButton_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e"};
+var modules_5e9b8c03 = {"unit":"8px","header":"header_rui_1d72","container":"container_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIcon":"closeIcon_rui_381e","closeButton":"closeButton_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e","dense":"dense_rui_381e"};
 
 const isPrevented = new Set();
 let previousDocumentWidth = null;

package/dist/dialog/dialog.d.ts

@@ -15,6 +15,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
     'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
 }
 /**
  * @name Dialog

package/dist/dialog/dialog.js

@@ -124,6 +124,7 @@ class Dialog extends PureComponent {
       portalTarget,
       label,
       closeButtonTitle,
+      dense,
       ...restProps
     } = this.props;
     const classes = classNames(modules_5e9b8c03.container, className);
@@ -148,7 +149,9 @@ class Dialog extends PureComponent {
     }), /*#__PURE__*/React.createElement("div", {
       className: modules_5e9b8c03.innerContainer
     }, /*#__PURE__*/React.createElement(AdaptiveIsland, {
-      className: classNames(modules_5e9b8c03.content, contentClassName),
+      className: classNames(modules_5e9b8c03.content, contentClassName, {
+        [modules_5e9b8c03.dense]: dense
+      }),
       "data-test": "ring-dialog",
       role: "dialog",
       "aria-label": label