@jetbrains/ring-ui 7.0.93 → 7.0.95

package/components/auth/auth-core.d.ts

@@ -80,6 +80,7 @@ export interface AuthConfig extends TokenValidatorConfig {
     translations?: AuthTranslations | null | undefined;
     userParams?: RequestParams | undefined;
     waitForRedirectTimeout: number;
+    rpInitiatedLogout: boolean;
 }
 type AuthPayloadMap = {
     userChange: [AuthUser | undefined | void, void];
@@ -120,6 +121,7 @@ declare class Auth implements HTTPAuth {
     static DEFAULT_CONFIG: Omit<AuthConfig, "serverUri">;
     static API_PATH: string;
     static API_AUTH_PATH: string;
+    static API_LOGOUT_PATH: string;
     static API_PROFILE_PATH: string;
     static CLOSE_BACKEND_DOWN_MESSAGE: string;
     static CLOSE_WINDOW_MESSAGE: string;
@@ -187,7 +189,10 @@ declare class Auth implements HTTPAuth {
     private _extractErrorMessage;
     private _showBackendDownDialog;
     /**
-     * Wipe accessToken and redirect to auth page with required authorization
+     * Wipe accessToken and redirect to logout endpoint.
+     * Uses RP-initiated logout flow (oauth2/logout) when rpInitiatedLogout config is enabled,
+     * falls back to oauth2/auth redirect otherwise.
+     * See: https://youtrack.jetbrains.com/projects/HUB/articles/HUB-A-43#rp-initiated-logout
      */
     logout(extraParams?: Record<string, unknown>): Promise<void>;
     private _runEmbeddedLogin;

package/components/auth/auth-core.js

@@ -43,12 +43,14 @@ const DEFAULT_CONFIG = {
     onBackendDown: () => () => { },
     defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
     waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
+    rpInitiatedLogout: true,
     translations: null,
 };
 class Auth {
     static DEFAULT_CONFIG = DEFAULT_CONFIG;
     static API_PATH = 'api/rest/';
     static API_AUTH_PATH = 'oauth2/auth';
+    static API_LOGOUT_PATH = 'oauth2/logout';
     static API_PROFILE_PATH = 'users/me';
     static CLOSE_BACKEND_DOWN_MESSAGE = 'backend-check-succeeded';
     static CLOSE_WINDOW_MESSAGE = 'close-login-window';
@@ -106,6 +108,7 @@ class Auth {
         this._domainStorage = new AuthStorage({ messagePrefix: 'domain-message-' });
         this._requestBuilder = new AuthRequestBuilder({
             authorization: this.config.serverUri + Auth.API_PATH + Auth.API_AUTH_PATH,
+            logout: this.config.serverUri + Auth.API_PATH + Auth.API_LOGOUT_PATH,
             clientId,
             redirect,
             redirectUri,
@@ -633,20 +636,24 @@ class Auth {
         });
     }
     /**
-     * Wipe accessToken and redirect to auth page with required authorization
+     * Wipe accessToken and redirect to logout endpoint.
+     * Uses RP-initiated logout flow (oauth2/logout) when rpInitiatedLogout config is enabled,
+     * falls back to oauth2/auth redirect otherwise.
+     * See: https://youtrack.jetbrains.com/projects/HUB/articles/HUB-A-43#rp-initiated-logout
      */
     async logout(extraParams) {
-        const requestParams = {
-            request_credentials: 'required',
-            ...extraParams,
-        };
         await this._checkBackendsStatusesIfEnabled();
         await this.listeners.trigger('logout');
         this._updateDomainUser(null);
         await this._storage?.wipeToken();
-        const authRequest = await this._requestBuilder?.prepareAuthRequest(requestParams);
-        if (authRequest) {
-            this._redirectCurrentPage(authRequest.url);
+        const request = this.config.rpInitiatedLogout
+            ? await this._requestBuilder?.prepareLogoutRequest(extraParams)
+            : await this._requestBuilder?.prepareAuthRequest({
+                request_credentials: 'required',
+                ...extraParams,
+            });
+        if (request) {
+            this._redirectCurrentPage(request.url);
         }
     }
     async _runEmbeddedLogin() {

package/components/auth/request-builder.d.ts

@@ -3,6 +3,7 @@ import type { AuthState } from './storage';
 import type AuthStorage from './storage';
 export interface AuthRequestBuilderConfig {
     authorization: string;
+    logout?: string | null | undefined;
     redirectUri?: string | null | undefined;
     requestCredentials?: string | null | undefined;
     clientId?: string | null | undefined;
@@ -38,6 +39,17 @@ export default class AuthRequestBuilder {
         url: string;
         stateId: string;
     }>;
+    /**
+     * Build a logout URL for RP-initiated logout flow.
+     * See: https://youtrack.jetbrains.com/projects/HUB/articles/HUB-A-43#rp-initiated-logout
+     *
+     * @param {object=} extraParams additional query parameters for logout request
+     * @return {Promise.<{url: string, stateId: string}>} logout URL with required parameters
+     */
+    prepareLogoutRequest(extraParams?: Record<string, unknown> | null | undefined): Promise<{
+        url: string;
+        stateId: string;
+    }>;
     /**
      * @param {string} id
      * @param {StoredState} storedState

package/components/auth/request-builder.js

@@ -51,6 +51,33 @@ export default class AuthRequestBuilder {
             stateId,
         };
     }
+    /**
+     * Build a logout URL for RP-initiated logout flow.
+     * See: https://youtrack.jetbrains.com/projects/HUB/articles/HUB-A-43#rp-initiated-logout
+     *
+     * @param {object=} extraParams additional query parameters for logout request
+     * @return {Promise.<{url: string, stateId: string}>} logout URL with required parameters
+     */
+    async prepareLogoutRequest(extraParams) {
+        if (!this.config.logout) {
+            throw new Error('Logout URL is not configured');
+        }
+        // eslint-disable-next-line no-underscore-dangle
+        const stateId = AuthRequestBuilder._uuid();
+        const logoutParams = {
+            client_id: this.config.clientId,
+            state: stateId,
+            ...extraParams,
+        };
+        await this._saveState(stateId, {
+            restoreLocation: window.location.href,
+            scopes: [...this.config.scopes],
+        });
+        return {
+            url: encodeURL(this.config.logout, logoutParams),
+            stateId,
+        };
+    }
     /**
      * @param {string} id
      * @param {StoredState} storedState

package/components/avatar-stack/avatar-stack.js

@@ -6,7 +6,8 @@ import { fontSizes } from '../avatar/avatar-info';
 import styles from './avatar-stack.css';
 export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
     const [dropdownOpen, setDropdownOpen] = useState(false);
-    return (<div className={classNames(styles.avatarStack, className, styles[`size${size}`], {
+    const sizeClass = size !== Size.Size16 && size !== Size.Size18 && size !== Size.Size48 ? styles[`size${size}`] : undefined;
+    return (<div className={classNames(styles.avatarStack, className, sizeClass, {
             [styles.hovered]: dropdownOpen,
         })} {...restProps} style={{ height: size, ...restProps.style }}>
       {Children.map(children, (child, index) => (<div className={styles.item} style={{ '--ring-avatar-stack-index': index }}>

package/components/button/button.classes.js

@@ -4,7 +4,7 @@ export function getButtonClasses({ className, active, disabled, loader, primary,
     const iconOnly = (icon || iconRight) && !children;
     const primaryBlock = primary && !inline;
     const withNormalIcon = iconOnly && inline && !active && !danger && !primary && !disabled;
-    return classNames(styles.button, className, styles[`height${height}`], inline ? styles.inline : styles.block, {
+    return classNames(styles.button, className, height && styles[`height${height}`], inline ? styles.inline : styles.block, {
         [styles.active]: active,
         [styles.danger]: danger,
         [styles.delayed]: delayed,

package/components/data-list/data-list.js

@@ -64,7 +64,6 @@ class DataList extends PureComponent {
         const classes = classNames(className, {
             [styles.dataList]: true,
             [styles.disabledHover]: disabledHover,
-            [styles.multiSelection]: selection.getSelected().size > 0,
         });
         return (<div className={styles.dataListWrapper} data-test='ring-data-list' ref={innerRef}>
         {focused && <Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>}

package/components/date-picker/date-input.js

@@ -75,7 +75,7 @@ export default class DateInput extends React.PureComponent {
                         .replace('{{name}}', name);
             }
         })();
-        const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
+        const classes = classNames(styles.filter, name !== 'time' && styles[`${name}Input`], divider && (name === 'from' || name === 'time') && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
         return (<Input autoComplete='off' borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
     }
 }

package/components/date-picker/date-picker.js

@@ -151,7 +151,7 @@ export default class DatePicker extends PureComponent {
         <Icon glyph={chevronDownIcon} className={styles.chevronDownIcon}/>
       </div>);
         const { className, popupClassName, clear, inline, dropdownProps, translations, ...datePopupProps } = this.props;
-        const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
+        const classes = classNames(styles.datePicker, className, this.props.size && styles[`size${this.props.size}`], {
             [styles.inline]: inline,
         });
         return (<Dropdown className={classes} disabled={this.props.disabled} data-test='ring-date-picker' anchor={inline ? (<Link data-test-ring-dropdown-anchor className={styles.anchor} disabled={this.props.disabled ?? false} pseudo>

package/components/date-picker/day.js

@@ -43,7 +43,10 @@ export default class Day extends Component {
     render() {
         const { day, from, currentRange, activeRange, empty, locale } = this.props;
         const reverse = activeRange && activeRange[1] === from;
-        const dayInWeek = getDayNumInWeek(locale, getDay(day)) + 1;
+        // eslint-disable-next-line no-magic-numbers
+        const dayInWeek = (getDayNumInWeek(locale, getDay(day)) + 1);
+        // eslint-disable-next-line no-magic-numbers
+        const dayInWeekClass = dayInWeek !== 3 && dayInWeek !== 4 && styles[`Day${dayInWeek}`];
         function makeSpreadRange(range) {
             return range && [range[0], addDays(range[1], 1)];
         }
@@ -52,7 +55,7 @@ export default class Day extends Component {
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work
-        <button type='button' className={classNames(styles.day, styles[`Day${dayInWeek}`], {
+        <button type='button' className={classNames(styles.day, dayInWeekClass, {
                 [styles.current]: ['date', 'from', 'to'].some(this.is),
                 [styles.active]: !disabled && this.is('activeDate'),
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),

package/components/dialog/dialog.js

@@ -127,7 +127,6 @@ export default class Dialog extends PureComponent {
                     [styles.closeButtonInside]: closeButtonInside,
                 })} iconClassName={classNames(styles.closeIcon, {
                     [styles.closeIconOutside]: !closeButtonInside,
-                    [styles.closeIconInside]: closeButtonInside,
                 })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
           </AdaptiveIsland>
         </div>

package/components/editable-heading/editable-heading.js

@@ -44,8 +44,8 @@ export const EditableHeading = (props) => {
         [styles.multiline]: multiline,
         [styles.selectionMode]: isInSelectionMode,
     });
-    const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
-    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const headingClasses = classNames(styles.heading, headingClassName, size !== Size.AUTO && styles[`size${size}`]);
+    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, size !== Size.AUTO && inputStyles[`size${size}`], level !== Levels.H4 && styles[`level${level}`], inputClassName);
     const stretch = (el) => {
         if (!el || !el.style) {
             return;
@@ -114,7 +114,7 @@ export const EditableHeading = (props) => {
         {!disabled && isEditing ? (<>
             <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-            {!multiline ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>) : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
+            {!multiline ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>) : (<div className={classNames(styles.textareaWrapper, size !== Size.AUTO && inputStyles[`size${size}`])}>
                 <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
                 {!isScrolledToBottom && <div className={styles.textareaFade}/>}
               </div>)}
@@ -137,7 +137,7 @@ export const EditableHeading = (props) => {
           </>)}
       </div>
 
-      {isEditing && error && <div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>}
+      {isEditing && error && (<div className={classNames(styles.errorText, size !== Size.AUTO && inputStyles[`size${size}`])}>{error}</div>)}
     </>);
 };
 export default React.memo(EditableHeading);

package/components/header/profile.js

@@ -48,13 +48,11 @@ export default class Profile extends PureComponent {
             showApplyChangedUser && {
                 rgItemType,
                 label: translations?.applyChangedUser ?? translate('applyChangedUser'),
-                className: styles.profileMenuItem,
                 onClick: onRevertPostponement,
             },
             showLogIn && {
                 rgItemType,
                 label: translations?.login ?? translate('login'),
-                className: styles.profileMenuItem,
                 onClick: onRevertPostponement,
             },
             {
@@ -67,7 +65,6 @@ export default class Profile extends PureComponent {
             showSwitchUser && {
                 rgItemType,
                 label: translations?.switchUser ?? translate('switchUser'),
-                className: styles.profileMenuItem,
                 onClick: onSwitchUser,
             },
             showLogOut && {

package/components/header/tray.js

@@ -1,7 +1,7 @@
 import { Children, Component } from 'react';
 import classNames from 'classnames';
 import styles from './header.css';
-const wrapChild = (child) => child && <div className={styles.trayItem}>{child}</div>;
+const wrapChild = (child) => child && <div>{child}</div>;
 export default class Tray extends Component {
     render() {
         const { children, className, ...restProps } = this.props;

package/components/icon/icon.js

@@ -47,8 +47,7 @@ export default class Icon extends PureComponent {
         if (!Glyph) {
             return null;
         }
-        const classes = classNames(styles.icon, {
-            [styles[color]]: !!color,
+        const classes = classNames(styles.icon, color && styles[color], {
             [styles.loading]: loading,
         }, className);
         return (<span data-test='ring-icon' {...restProps} className={classes}>

package/components/input/input.d.ts

@@ -7,7 +7,7 @@ declare function noop(): void;
  * @name Input
  */
 declare enum Size {
-    AUTO = "Auto",
+    AUTO = "AUTO",
     S = "S",
     M = "M",
     L = "L",

package/components/input/input.js

@@ -17,7 +17,7 @@ function noop() { }
  */
 var Size;
 (function (Size) {
-    Size["AUTO"] = "Auto";
+    Size["AUTO"] = "AUTO";
     Size["S"] = "S";
     Size["M"] = "M";
     Size["L"] = "L";
@@ -100,7 +100,7 @@ export class Input extends PureComponent {
         label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
-        const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
+        const classes = classNames(className, styles.outerContainer, size && size !== Size.AUTO && styles[`size${size}`], styles[`height${height}`], {
             'ring-js-shortcuts': enableShortcuts === true,
             [styles.error]: error !== null && error !== undefined,
             [styles.empty]: empty,

package/components/query-assist/query-assist.js

@@ -691,16 +691,23 @@ export default class QueryAssist extends Component {
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
         const actions = this.renderActions();
-        const containerClasses = classNames(className, inputStyles[`size${huge ? Size.FULL : size}`], {
+        let sizeClass;
+        if (huge) {
+            sizeClass = inputStyles[`size${Size.FULL}`];
+        }
+        else if (size !== Size.AUTO) {
+            sizeClass = inputStyles[`size${size}`];
+        }
+        else {
+            sizeClass = undefined;
+        }
+        const containerClasses = classNames(className, sizeClass, {
             [styles.queryAssist]: true,
-            [styles.withIcon]: (renderGlass && !huge) || renderLoader,
             [styles.huge]: huge,
             [styles.queryAssistDisabled]: this.props.disabled,
         });
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
-            [styles.inputGap]: actions.length || (this.isRenderingGlassOrLoader() && !glass),
-            [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
             [styles.inputRevertOrder]: !glass || huge,
         });
         const placeholderStyles = classNames({
@@ -715,7 +722,7 @@ export default class QueryAssist extends Component {
 
               {renderGlass && !huge && (<Icon glyph={searchIcon} className={classNames(styles.icon, this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} ref={this.glassRef} data-test='query-assist-search-icon'/>)}
 
-              {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
+              {renderLoader && (<div className={classNames(styles.icon, {
                         [styles.loaderOnTheRight]: !glass && !huge,
                         [styles.loaderActive]: renderLoader,
                     })} ref={this.loaderRef}>
@@ -739,7 +746,7 @@ export default class QueryAssist extends Component {
               <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT, PopupMenu.PopupProps.Directions.BOTTOM_LEFT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test='ring-query-assist-popup' hint={this.props.hint} shortcutsMap={this.listShortcutsMap} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)} {...this.props.menuProps}/>
 
               {glass && huge && (<div className={styles.rightSearchButton} data-test='query-assist-search-button'>
-                  <Icon glyph={searchIcon} className={classNames(styles.rightSearchIcon, this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test='query-assist-search-icon'/>
+                  <Icon glyph={searchIcon} className={classNames(this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test='query-assist-search-icon'/>
                 </div>)}
             </div>)}
         </I18nContext.Consumer>

package/components/select/select.js

@@ -801,7 +801,8 @@ export default class Select extends Component {
         const dataTest = this.props['data-test'];
         const { selectedLabel } = this.props;
         const { shortcutsEnabled } = this.state;
-        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.getHeight()}`], {
+        const height = this.getHeight();
+        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, height !== ControlsHeight.M && styles[`height${height}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
             [styles.disabled]: this.props.disabled,
         });
@@ -836,7 +837,7 @@ export default class Select extends Component {
                         : undefined} icon={this.props.filterIcon} afterInput={iconsNode}/>
               {this._renderPopup()}
             </div>
-            {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
+            {this.props.error && (<div className={classNames(inputStyles.errorText, this.props.size !== Size.AUTO && inputStyles[`size${this.props.size}`])}>
                 {this.props.error}
               </div>)}
           </>);

package/components/table/header.js

@@ -47,9 +47,7 @@ export default class Header extends PureComponent {
             </th>
           </tr>)}
 
-        <tr className={style.subHeader} data-test='ring-table-header-row'>
-          {regularCells}
-        </tr>
+        <tr data-test='ring-table-header-row'>{regularCells}</tr>
       </thead>);
     }
 }

package/components/table/table.js

@@ -135,14 +135,10 @@ export class Table extends PureComponent {
         headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
         headerProps.onCheckboxChange = this.onCheckboxChange;
         headerProps.checkboxDisabled = this.props.data.length === 0;
-        const wrapperClasses = classNames({
-            [style.tableWrapper]: true,
-            [style.loading]: loading,
-        }, this.props.wrapperClassName);
+        const wrapperClasses = classNames(style.tableWrapper, this.props.wrapperClassName);
         const classes = classNames(this.props.className, {
             [style.table]: true,
             [style.wideFirstColumn]: this.props.wideFirstColumn,
-            [style.multiSelection]: selection.getSelected().size > 0,
             [style.userSelectNone]: this.state.userSelectNone,
             [style.disabledHover]: this.props.disabledHover,
         });

package/components/tabs/collapsible-more.js

@@ -61,7 +61,7 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
       </div>);
 });
 MoreButton.displayName = 'MoreButton';
-export const FakeMoreButton = memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={classNames(styles.moreButton, styles.title)}>
+export const FakeMoreButton = memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={styles.title}>
     <AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChildren} tabIndex={-1} disabled/>
   </div>));
 FakeMoreButton.displayName = 'FakeMoreButton';

package/components/tabs/collapsible-tab.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import TabLink from './tab-link';
 import { CustomItem } from './custom-item';
+import { getTabId } from './tabs.utils';
 import styles from './tabs.css';
 const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, collapsed = false, tabIndex, }) {
     if (child === null || typeof child !== 'object' || child.type === CustomItem) {
@@ -15,7 +16,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, c
     return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });
 const getTabTitles = ({ items, selected = '0', collapsed, onSelect = () => undefined, ...props }) => items.map((tab, index) => {
-    const key = tab.props.id || String(index);
+    const key = getTabId(tab, index);
     const isSelected = selected === key;
     return (<TabTitle key={key} handleSelect={onSelect(key)} selected={isSelected} child={tab} collapsed={collapsed} {...props}/>);
 });

package/components/tabs/dumb-tabs.d.ts

@@ -16,7 +16,11 @@ export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'chil
 }
 declare class Tabs extends PureComponent<TabsProps> {
     handleSelect: (arg: string) => () => void | undefined;
-    getTabTitle: (child: ReactElement<TabProps>, i: number) => React.JSX.Element;
+    getSelectedItem(): {
+        selectedItem: ReactElement<TabProps, string | React.JSXElementConstructor<any>>;
+        selectedKey: string;
+    };
+    getTabTitle(selectedKey: string, child: ReactElement<TabProps>, i: number): React.JSX.Element;
     render(): React.JSX.Element;
 }
 export type TabsAttrs = React.JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;

package/components/tabs/dumb-tabs.js

@@ -6,34 +6,44 @@ import dataTests from '../global/data-tests';
 import TabLink from './tab-link';
 import CollapsibleTabs from './collapsible-tabs';
 import { CustomItem } from './custom-item';
+import { getTabId } from './tabs.utils';
 import styles from './tabs.css';
 export { CustomItem };
 class Tabs extends PureComponent {
     handleSelect = memoize((key) => () => this.props.onSelect?.(key));
-    getTabTitle = (child, i) => {
+    getSelectedItem() {
+        const { selected, children } = this.props;
+        const childrenArray = React.Children.toArray(children).filter(Boolean);
+        const selectedIndex = childrenArray.findIndex((tab, i) => getTabId(tab, i) === selected);
+        const actualSelectedIndex = selectedIndex === -1 ? childrenArray.findIndex(tab => tab.type !== CustomItem) : selectedIndex;
+        const selectedItem = childrenArray[actualSelectedIndex];
+        return { selectedItem, selectedKey: getTabId(selectedItem, actualSelectedIndex) };
+    }
+    getTabTitle(selectedKey, child, i) {
         if (child === null || typeof child !== 'object' || child.type === CustomItem) {
             return child;
         }
-        const { selected, onSelect } = this.props;
-        const { title, titleProps, id, disabled, href, className, activeClassName } = child.props;
-        const key = id || String(i);
-        const isSelected = key === selected;
+        const { onSelect } = this.props;
+        const { title, titleProps, disabled, href, className, activeClassName } = child.props;
+        const key = getTabId(child, i);
+        const isSelected = key === selectedKey;
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected,
         });
         return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={onSelect ? this.handleSelect(key) : undefined} {...titleProps}/>);
-    };
+    }
     render() {
         const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, onSelect, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).filter(Boolean);
+        const { selectedItem, selectedKey } = this.getSelectedItem();
         return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
-        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={onSelect ? this.handleSelect : undefined} selected={selected}>
+        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={onSelect ? this.handleSelect : undefined} selected={selectedKey}>
             {childrenArray}
-          </CollapsibleTabs>) : (<div className={styles.titles}>{childrenArray.map(this.getTabTitle)}</div>)}
-        <div className={classNames(tabContainerClassName)}>
-          {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
-        </div>
+          </CollapsibleTabs>) : (<div className={styles.titles}>
+            {childrenArray.map((tab, index) => this.getTabTitle(selectedKey, tab, index))}
+          </div>)}
+        <div className={classNames(tabContainerClassName)}>{selectedItem}</div>
       </div>);
     }
 }

package/components/tabs/tab-link.js

@@ -3,13 +3,19 @@ import Link from '../link/link';
 import styles from './tabs.css';
 function TabLink({ isSelected, title, collapsed, ...restProps }) {
     const renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
-    return (<Link {...restProps}>
+    return (<Link {...restProps} data-test-selected={isSelected}>
       <div className={styles.container}>
         <span className={styles.visible}>{renderedTitle}</span>
         {/* hack for preserving constant tab width*/}
-        <span className={styles.hidden}>{renderedTitle}</span>
-        <span className={styles.hiddenBold}>{renderedTitle}</span>
-        <span className={styles.hiddenRegular}>{renderedTitle}</span>
+        <span aria-hidden className={styles.hidden}>
+          {renderedTitle}
+        </span>
+        <span aria-hidden className={styles.hiddenBold}>
+          {renderedTitle}
+        </span>
+        <span aria-hidden className={styles.hiddenRegular}>
+          {renderedTitle}
+        </span>
       </div>
     </Link>);
 }

package/components/tabs/tabs.utils.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TabProps } from './tab';
+export declare const getTabId: (tab: ReactElement<TabProps> | undefined, index: number) => string;

package/components/tabs/tabs.utils.js

@@ -0,0 +1 @@
+export const getTabId = (tab, index) => tab?.props.id || String(index);

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

@@ -229,7 +229,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 classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
+        const classes = classNames(styles.tagsInput, size !== Size.AUTO && [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,
         }, this.props.className);
@@ -240,7 +240,7 @@ export default class TagsInput extends PureComponent {
             {label}
           </ControlLabel>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+        <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>
       </div>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.93",
+  "version": "7.0.95",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -63,7 +63,8 @@
     "postpublish": "pinst --enable",
     "postrelease-ci": "git push --follow-tags",
     "prea11y-audit": "playwright install",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && npm run prebuild:tsc && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prebuild:tsc": "(npm run type-check:create-d-ts && tsc --project tsconfig-build.json) ; npm run type-check:cleanup-d-ts",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
@@ -79,7 +80,11 @@
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
     "stylelint": "stylelint --ignore-path .stylelintignore '**/*.css'",
     "test": "vitest src",
-    "type-check": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig-build.json",
+    "type-check": "(npm run type-check:create-d-ts && npm run type-check:main && npm run type-check:build) ; npm run type-check:cleanup-d-ts",
+    "type-check:create-d-ts": "npx tcm src && npx tcm .storybook",
+    "type-check:main": "tsc --noEmit -p tsconfig.json",
+    "type-check:build": "tsc --noEmit -p tsconfig-build.json",
+    "type-check:cleanup-d-ts": "rimraf src/**/*.css.d.ts .storybook/*.css.d.ts .storybook/**/*.css.d.ts",
     "update-styles": "node scripts/update-styles.mjs",
     "validate-tc-config": "mvn --file .teamcity/pom.xml org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate -e"
   },
@@ -101,6 +106,7 @@
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@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-json": "^6.1.0",
@@ -173,6 +179,7 @@
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.16",
+    "typed-css-modules": "^0.9.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.55.0",
     "vitest": "^4.0.18",

package/typings.d.ts

@@ -1,8 +1,3 @@
-declare module '*.css' {
-  const styles: Record<string, string>;
-  export default styles;
-}
-
 declare module '*.svg' {
   const source: string;
   export default source;