@jetbrains/ring-ui 7.0.100 → 7.0.102

package/components/button/button.css

@@ -130,7 +130,7 @@
 }
 
 .inline {
-  --ring-button-text-color: var(--ring-action-link-color);
+  --ring-button-text-color: var(--ring-link-color);
   --ring-button-background-color: transparent;
 
   display: inline;

package/components/expand/collapsible-group.css

@@ -0,0 +1,138 @@
+@import '../global/variables.css';
+
+.expand .collapseRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.expand {
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-line-color);
+  border-radius: var(--ring-border-radius-large);
+  outline: none;
+  background: var(--ring-content-background-color);
+}
+
+.hovered {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.expanded {
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.focused {
+  box-shadow: 0 0 0 2px var(--ring-border-hover-color), var(--ring-popup-shadow);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 1.5);
+
+  height: 28px;
+}
+
+.headerButton {
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(var(--ring-unit) * 1.5);
+
+  cursor: pointer;
+  text-align: left;
+
+  color: inherit;
+
+  border: 0;
+  background: transparent;
+
+  font: inherit;
+}
+
+.headerButton:focus-visible {
+  outline: none;
+}
+
+.headerStatic {
+  display: block;
+
+  padding: calc(var(--ring-unit) * 1.5);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex: 1;
+
+  min-width: 0;
+}
+
+.avatarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  flex-shrink: 0;
+}
+
+.title {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--ring-unit);
+
+  min-width: 0;
+}
+
+.subtitle {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.subtitleChevron {
+  color: var(--ring-secondary-color);
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+
+  flex-shrink: 0;
+  justify-content: center;
+
+  width: calc(var(--ring-unit) * 3);
+  height: calc(var(--ring-unit) * 3);
+
+  border-radius: calc(var(--ring-unit) / 2);
+  background: var(--ring-secondary-background-color);
+}
+
+.toggleIcon {
+  color: var(--ring-secondary-color);
+}
+
+.body {
+  padding: 0 calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}

package/components/expand/collapsible-group.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface CollapsibleGroupProps {
+    avatar?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string | null | undefined;
+    defaultExpanded?: boolean;
+    expanded?: boolean | null | undefined;
+    onChange?: (expanded: boolean) => void;
+    disableAnimation?: boolean;
+    interactive?: boolean;
+    'data-test'?: string | null | undefined;
+}
+declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default CollapsibleGroup;

package/components/expand/collapsible-group.js

@@ -0,0 +1,73 @@
+import React, { forwardRef, useContext, useState } from 'react';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-12px-down';
+import Icon from '../icon/icon';
+import Collapse from '../collapse/collapse';
+import CollapseContent from '../collapse/collapse-content';
+import { CollapseContext } from '../collapse/collapse-context';
+import styles from './collapsible-group.css';
+function CollapsibleGroupHeaderContent({ avatar, titleContent, subtitle }) {
+    const { collapsed } = useContext(CollapseContext);
+    return (<span className={styles.header}>
+      <span className={styles.headerContent}>
+        <span className={styles.avatarGroup}>
+          {avatar}
+          <span className={styles.title}>{titleContent}</span>
+        </span>
+        {subtitle ? (<span className={styles.subtitleGroup}>
+            <Icon className={styles.subtitleChevron} glyph={chevronRightIcon} aria-hidden/>
+            <span className={styles.subtitle}>{subtitle}</span>
+          </span>) : null}
+      </span>
+      <span className={styles.toggle} aria-hidden>
+        <Icon className={styles.toggleIcon} glyph={collapsed ? chevronRightIcon : chevronDownIcon}/>
+      </span>
+    </span>);
+}
+function CollapsibleGroupHeader({ avatar, titleContent, subtitle, ...buttonProps }) {
+    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    return (<button type='button' {...buttonProps} className={styles.headerButton} onClick={setCollapsed} aria-controls={`collapse-content-${id}`} aria-expanded={!collapsed}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </button>);
+}
+function CollapsibleGroupHeaderStatic({ avatar, titleContent, subtitle }) {
+    return (<span className={styles.headerStatic}>
+      <CollapsibleGroupHeaderContent avatar={avatar} titleContent={titleContent} subtitle={subtitle}/>
+    </span>);
+}
+const CollapsibleGroup = forwardRef(({ avatar, title, subtitle, children, className, defaultExpanded = false, expanded = null, onChange = () => { }, disableAnimation = false, interactive = true, 'data-test': dataTest, }, ref) => {
+    const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const isExpanded = expanded ?? innerExpanded;
+    const handleChange = (collapsed) => {
+        const nextExpanded = !collapsed;
+        if (expanded == null) {
+            setInnerExpanded(nextExpanded);
+        }
+        onChange(nextExpanded);
+    };
+    const onBlur = (event) => {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+            return;
+        }
+        setFocused(false);
+    };
+    const classes = classNames(styles.expand, className, {
+        [styles.hovered]: hovered,
+        [styles.expanded]: isExpanded,
+        [styles.focused]: focused,
+    });
+    return (<div ref={ref} className={classes} data-test={dataTest}>
+        <Collapse defaultCollapsed={!defaultExpanded} collapsed={expanded == null ? null : !expanded} onChange={handleChange} disableAnimation={disableAnimation} className={styles.collapseRoot}>
+          {interactive ? (<CollapsibleGroupHeader avatar={avatar} titleContent={title} subtitle={subtitle} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={onBlur}/>) : (<CollapsibleGroupHeaderStatic avatar={avatar} titleContent={title} subtitle={subtitle}/>)}
+          <CollapseContent>
+            <div className={styles.body}>{children}</div>
+          </CollapseContent>
+        </Collapse>
+      </div>);
+});
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+export default CollapsibleGroup;

package/components/global/variables.css

@@ -36,8 +36,8 @@
   --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
   --ring-main-components: 51, 105, 214;
   --ring-main-color: rgb(var(--ring-main-components)); /* #3369D6 */
-  --ring-action-link-components: 46, 85, 163;
-  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #2E55A3 */ /* TODO: remove in 8.0 in favor of --ring-link-color */
+  --ring-action-link-components: var(--ring-link-components);
+  --ring-action-link-color: var(--ring-link-color); /* #315FBD */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 49, 95, 189;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #315FBD */
   --ring-main-success-components: 31, 128, 57;

package/components/global/variables_dark.css

@@ -29,8 +29,6 @@
   --ring-border-accent-color: rgb(var(--ring-border-accent-components)); /* #366ACF */
   --ring-main-components: 54, 106, 207;
   --ring-main-color: rgb(var(--ring-main-components)); /* #366ACF */
-  --ring-action-link-components: 153, 187, 255;
-  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #99BBFF */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 55, 95, 173;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #375FAD */
   --ring-main-success-components: 78, 128, 82;

package/components/select/chevron-button.css

@@ -0,0 +1,13 @@
+.chevronButton {
+  padding: 0 2px;
+
+  transition: none;
+
+  color: inherit;
+}
+
+.chevronIcon {
+  transition: none;
+
+  color: inherit;
+}

package/components/select/chevron-button.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type ControlsHeight } from '../global/configuration';
+export default function ChevronButton({ className, disabled, height, ...props }: {
+    disabled?: boolean | null | undefined;
+    height?: ControlsHeight | undefined;
+} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/components/select/chevron-button.js

@@ -0,0 +1,7 @@
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import classNames from 'classnames';
+import Button from '../button/button';
+import styles from './chevron-button.css';
+export default function ChevronButton({ className, disabled, height, ...props }) {
+    return (<Button title='Toggle options popup' className={classNames(styles.chevronButton, className)} iconClassName={styles.chevronIcon} icon={chevronDownIcon} disabled={disabled ?? false} height={height} {...props}/>);
+}

package/components/select/select.css

@@ -231,17 +231,3 @@
   min-width: calc(var(--ring-unit) * 30);
   max-width: calc(var(--ring-unit) * 40);
 }
-
-.chevron.chevron {
-  padding: 0 2px;
-
-  transition: none;
-
-  color: inherit;
-}
-
-.chevronIcon.chevronIcon {
-  transition: none;
-
-  color: inherit;
-}

package/components/select/select.js

@@ -2,7 +2,6 @@
 import { Component, Fragment, } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close-12px';
 import { dequal } from 'dequal';
 import { Anchor } from '../dropdown/dropdown';
@@ -23,6 +22,7 @@ import { createComposedRef } from '../global/compose-refs';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import SelectPopup from './select-popup';
+import ChevronButton from './chevron-button';
 import inputStyles from '../input/input.css';
 import styles from './select.css';
 /**
@@ -770,7 +770,7 @@ export default class Select extends Component {
             icons.push(<Button title='Clear selection' data-test='ring-clear-select' className={styles.clearIcon} key='close' disabled={this.props.disabled} onClick={this.clear} height={height} icon={closeIcon}/>);
         }
         if (!hideArrow) {
-            icons.push(<Button title='Toggle options popup' className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key='hide' disabled={this.props.disabled} height={height} onClick={this._clickHandler}/>);
+            icons.push(<ChevronButton key='chevron' disabled={this.props.disabled} height={height} onClick={this._clickHandler}/>);
         }
         return icons;
     }

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

@@ -34,6 +34,8 @@
   --ring-input-padding-start: var(--ring-input-padding-inline);
   --ring-input-padding-end: var(--ring-input-padding-inline);
 
+  position: relative;
+
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -42,7 +44,7 @@
 
   margin: 0;
   padding-top: var(--ring-input-padding-block);
-  padding-right: var(--ring-input-padding-end);
+  padding-right: calc(var(--ring-input-padding-end) + var(--ring-line-height));
   padding-bottom: var(--ring-input-padding-block);
   padding-left: var(--ring-input-padding-start);
 
@@ -57,18 +59,28 @@
   background: transparent;
 
   font: inherit;
+  row-gap: calc(var(--ring-unit) / 2);
 
   caret-color: var(--ring-main-color);
 
   [dir='rtl'] & {
     padding-right: var(--ring-input-padding-start);
-    padding-left: var(--ring-input-padding-end);
+    padding-left: calc(var(--ring-input-padding-end) + var(--ring-line-height));
+  }
+
+  &.error {
+    border-color: var(--ring-error-color);
   }
 
-  &:hover {
+  &:hover:not(.error) {
     transition: none;
 
     border-color: var(--ring-border-hover-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    .tagInputChevronButton {
+      color: var(--ring-main-color);
+    }
   }
 
   &:focus-within {
@@ -98,3 +110,17 @@
     line-height: calc(var(--ring-line-height) - 2px);
   }
 }
+
+.tagInputChevronButton {
+  position: absolute;
+  right: 0;
+
+  height: var(--ring-line-height);
+
+  color: var(--ring-secondary-color);
+
+  [dir='rtl'] & {
+    right: auto;
+    left: 0;
+  }
+}

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

@@ -45,6 +45,7 @@ export interface TagsInputProps {
     label?: ReactNode;
     labelType?: LabelType;
     id?: string | undefined;
+    error?: ReactNode | null | undefined;
 }
 interface TagsInputState {
     tags: TagType[];

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

@@ -12,13 +12,14 @@ import { Size } from '../input/input';
 import { ControlsHeightContext } from '../global/controls-height';
 import getUID from '../global/get-uid';
 import ControlLabel from '../control-label/control-label';
+import ChevronButton from '../select/chevron-button';
 import inputStyles from '../input/input.css';
 import styles from './tags-input.css';
 function noop() { }
 /**
  * @name Tags Input
  */
-const POPUP_VERTICAL_SHIFT = 2;
+const POPUP_VERTICAL_SHIFT = -2;
 export default class TagsInput extends PureComponent {
     static defaultProps = {
         dataSource: noop,
@@ -118,7 +119,9 @@ export default class TagsInput extends PureComponent {
         }, this.focusInput);
     }
     clickHandler = (event) => {
-        if (event.target !== this.node && event.target.parentElement !== this.node) {
+        if (event.target !== this.node &&
+            event.target.parentElement !== this.node &&
+            !this.node?.querySelector(`.${styles.tagInputChevronButton}`)?.contains(event.target)) {
             return;
         }
         // eslint-disable-next-line no-underscore-dangle
@@ -228,7 +231,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, error, } = this.props;
         const classes = classNames(styles.tagsInput, size !== Size.AUTO && [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,
@@ -240,8 +243,9 @@ export default class TagsInput extends PureComponent {
             {label}
           </ControlLabel>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
-          <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} hint={this.props.hint}/>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={classNames(styles.tagsList, error != null && styles.error)} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <ChevronButton className={styles.tagInputChevronButton}/>
+          <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} hint={this.props.hint} error={error} targetElement={this.node}/>
         </TagsList>
       </div>);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.100",
+  "version": "7.0.102",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -103,8 +103,8 @@
     "@babel/eslint-parser": "^7.28.6",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
-    "@eslint/compat": "^2.0.2",
-    "@eslint/eslintrc": "^3.3.4",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.1",
     "@jetbrains/eslint-config": "^6.0.5",
@@ -113,15 +113,15 @@
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
     "@primer/octicons": "^19.22.0",
-    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.2.14",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/addon-themes": "^10.2.14",
+    "@storybook/addon-a11y": "10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-themes": "^10.2.16",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.2.14",
+    "@storybook/react-webpack5": "10.2.16",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -136,7 +136,7 @@
     "@vitest/eslint-plugin": "^1.6.9",
     "acorn": "^8.16.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001770",
+    "caniuse-lite": "^1.0.30001777",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
@@ -154,7 +154,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.14",
+    "eslint-plugin-storybook": "^10.2.16",
     "eslint-plugin-unicorn": "^63.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
@@ -166,7 +166,7 @@
     "jest": "~30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.3.1",
+    "lint-staged": "^16.3.2",
     "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -179,18 +179,18 @@
     "rollup": "^4.59.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.2.14",
+    "storybook": "10.2.16",
     "stylelint": "^17.4.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.3.16",
+    "terser-webpack-plugin": "^5.3.17",
     "typed-css-modules": "^0.9.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.18",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.105.3",
+    "webpack": "^5.105.4",
     "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
@@ -223,7 +223,7 @@
     "@types/element-resize-detector": "^1.1.6",
     "@types/react-virtualized": "9.22.3",
     "@types/util-deprecate": "^1.0.4",
-    "babel-loader": "10.0.0",
+    "babel-loader": "10.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "browserslist": "^4.28.1",
@@ -241,7 +241,7 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-calc": "^10.1.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",