@jetbrains/ring-ui 7.0.101 → 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,12 +59,13 @@
   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 {
@@ -73,6 +76,11 @@
     transition: none;
 
     border-color: var(--ring-border-hover-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    .tagInputChevronButton {
+      color: var(--ring-main-color);
+    }
   }
 
   &:focus-within {
@@ -102,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.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
@@ -241,7 +244,8 @@ export default class TagsInput extends PureComponent {
           </ControlLabel>)}
 
         <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}>
-          <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}/>
+          <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.101",
+  "version": "7.0.102",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"