@jetbrains/ring-ui 6.0.39 → 6.0.41

package/components/auth/down-notification.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 .title {
-  font-weight: 600;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .error {

package/components/badge/badge.js

@@ -1,11 +1,14 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import deprecate from 'util-deprecate';
 import dataTests from '../global/data-tests';
 import style from './badge.css';
+const warn = deprecate(() => { }, 'Badge is deprecated and will be removed in RingUI 7.0. Use Tag instead.');
 /**
  * @name Badge
  */
+// TODO remove in 7.0
 export default class Badge extends PureComponent {
     static propTypes = {
         gray: PropTypes.bool,
@@ -17,6 +20,7 @@ export default class Badge extends PureComponent {
         'data-test': PropTypes.string
     };
     render() {
+        warn();
         const { 
         // Modifiers
         gray, valid, invalid, disabled, 

package/components/button/button.css

@@ -365,9 +365,9 @@
 }
 
 .dropdownIcon {
-  margin-right: -2px;
+  margin-right: -3px;
 
-  margin-left: 2px;
+  margin-left: 3px;
 
   transition: color var(--ring-ease);
 

package/components/button/button.js

@@ -2,7 +2,7 @@ import { createRef, PureComponent } from 'react';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import chevronDown from '@jetbrains/icons/chevron-10px';
+import chevronDown from '@jetbrains/icons/chevron-down';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickableLink';
 import { ControlsHeightContext } from '../global/controls-height';

package/components/checkbox/checkbox.d.ts

@@ -42,5 +42,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     render(): import("react").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -5,7 +5,7 @@ import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
 import minusIcon from '@jetbrains/icons/remove-12px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import ControlHelp from '../control-help/control-help';
 import styles from './checkbox.css';
 /**
@@ -55,6 +55,7 @@ export default class Checkbox extends PureComponent {
         }
         this.input = el;
     };
+    composedInputRef = createComposedRef();
     render() {
         const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, help, ...restProps } = this.props;
         const classes = classNames(styles.input, className);
@@ -62,7 +63,7 @@ export default class Checkbox extends PureComponent {
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
         return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
-        <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
+        <input {...restProps} data-checked={restProps.checked} ref={this.composedInputRef(this.inputRef, inputRef)} type="checkbox" className={classes}/>
         <div className={styles.cellWrapper}>
           <span className={cellClasses}>
             <Icon glyph={checkmarkIcon} className={styles.check}/>

package/components/code/highlight.css

@@ -40,7 +40,7 @@
   & :global(.hljs-type) {
     color: var(--ring-code-keyword-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-name),
@@ -61,7 +61,7 @@
   & :global(.hljs-attr) {
     color: var(--ring-code-field-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-tag) > :global(.hljs-attr),
@@ -82,7 +82,7 @@
   & :global(.hljs-string) {
     color: var(--ring-code-string-color);
 
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 
   & :global(.hljs-doctag) {
@@ -107,6 +107,6 @@
   }
 
   & :global(.hljs-strong) {
-    font-weight: bold;
+    font-weight: var(--ring-font-weight-bold);
   }
 }

package/components/date-picker/date-picker.css

@@ -259,7 +259,7 @@
 
   text-transform: capitalize;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 
   @supports (flex-basis: 1px) {
     flex-basis: calc(var(--ring-unit) * 12);
@@ -462,7 +462,7 @@
 .today.today {
   position: relative;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .today::before {

package/components/editable-heading/editable-heading.css

@@ -101,7 +101,7 @@
   background-color: transparent;
 
   font-family: var(--ring-font-family);
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
   line-height: 28px;
 
   &::placeholder {

package/components/error-bubble/error-bubble.css

@@ -16,9 +16,8 @@
 
 .errorBubble {
   box-sizing: border-box;
-  min-height: calc(var(--ring-unit) * 3);
-  padding-right: calc(var(--ring-unit) * 2);
-  padding-left: calc(var(--ring-unit) * 2);
+  min-height: calc(var(--ring-unit) * 4);
+  padding: calc(var(--ring-unit) - 1px) calc(var(--ring-unit) * 1.5 - 1px);
 
   white-space: nowrap;
 
@@ -30,13 +29,13 @@
   background: var(--ring-popup-background-color);
   box-shadow: var(--ring-popup-shadow);
 
-  font-size: 12px;
-  line-height: 22px;
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
 .errorBubble::before {
   position: absolute;
-  top: var(--ring-unit);
+  top: calc(var(--ring-unit) * 1.5);
   left: -4px;
 
   display: block;

package/components/form/form.css

@@ -66,7 +66,7 @@
 
   margin-bottom: calc(var(--ring-unit));
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-form__main-title) {
@@ -145,7 +145,7 @@
 /* End of special fix */
 
 :global(.ring-form__label_title) {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-form__control) {

package/components/global/composeRefs.d.ts

@@ -1,3 +1,5 @@
 import { Ref } from 'react';
-export default function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare const _default: typeof composeRefs;
+export default _default;
 export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;

package/components/global/composeRefs.js

@@ -1,5 +1,6 @@
 import memoizeOne from 'memoize-one';
-export default function composeRefs(...refs) {
+import deprecate from 'util-deprecate';
+function composeRefs(...refs) {
     return (value) => refs.forEach(ref => {
         if (typeof ref === 'function') {
             ref(value);
@@ -9,6 +10,8 @@ export default function composeRefs(...refs) {
         }
     });
 }
+// TODO remove export in 7.0, composeRefs should be used only in createComposedRef and in useComposedRefs in the future
+export default deprecate(composeRefs, 'composeRefs is deprecated and will be removed in 7.0. Use createComposedRef instead.');
 export function createComposedRef() {
     return memoizeOne((composeRefs));
 }

package/components/global/focus-sensor-hoc.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { refObject } from './prop-types';
-import composeRefs from './composeRefs';
+import { createComposedRef } from './composeRefs';
 function extractPropTypes({ propTypes }) {
     if (propTypes == null) {
         return propTypes;
@@ -46,6 +46,7 @@ export default function focusSensorHOC(ComposedComponent) {
                 this.node = node;
             }
         };
+        composedRef = createComposedRef();
         onFocusCapture = ({ target }) => {
             if (this._skipNextCapture) {
                 this._skipNextCapture = false;
@@ -79,7 +80,7 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         render() {
             const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
-            return (<ComposedComponent {...rest} innerRef={composeRefs(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
+            return (<ComposedComponent {...rest} innerRef={this.composedRef(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
         }
     }
     FocusSensor.propTypes = {

package/components/global/rerender-hoc.js

@@ -1,10 +1,11 @@
 import { Component, forwardRef } from 'react';
-import composeRefs from './composeRefs';
+import { createComposedRef } from './composeRefs';
 export default function rerenderHOC(ComposedComponent) {
     class Rerenderer extends Component {
         state = this.props.props;
+        composedRef = createComposedRef();
         render() {
-            const ref = composeRefs(this.props.forwardedRef);
+            const ref = this.composedRef(this.props.forwardedRef);
             return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
     }

package/components/global/variables.css

@@ -128,7 +128,7 @@
   --ring-code-tag-background-components: 239, 239, 239;
   --ring-code-tag-background-color: rgb(var(--ring-code-tag-background-components)); /* #efefef */
   --ring-code-tag-color: var(--ring-code-keyword-color);
-  --ring-code-tag-font-weight: bold;
+  --ring-code-tag-font-weight: var(--ring-font-weight-bold);
   --ring-code-field-components: 102, 14, 122;
   --ring-code-field-color: rgb(var(--ring-code-field-components)); /* #660e7a */
   --ring-code-attribute-components: 0, 0, 255;
@@ -144,10 +144,10 @@
   /* Metrics */
   --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
-  --ring-font-size-larger: 15px;
+  --ring-font-size-larger: 16px;
   --ring-font-size: 14px;
   --ring-font-size-smaller: 12px;
-  --ring-line-height-taller: 21px;
+  --ring-line-height-taller: 24px;
   --ring-line-height: 20px;
   --ring-line-height-lower: 18px;
   --ring-line-height-lowest: 16px;
@@ -162,6 +162,7 @@
     "Courier New",
     Courier,
     monospace;
+  --ring-font-weight-bold: 600;
 
   /* Common z-index-values */
 

package/components/header/services.css

@@ -10,7 +10,7 @@
 }
 
 .active {
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .item {

package/components/heading/heading.css

@@ -11,6 +11,8 @@
   &:is(h4) {
     margin-top: var(--ring-line-height);
 
+    font-weight: var(--ring-font-weight-bold);
+
     &:first-child {
       margin-top: 0;
     }
@@ -66,3 +68,7 @@
   letter-spacing: 2px;
   text-transform: uppercase;
 }
+
+.heading.bold {
+  font-weight: var(--ring-font-weight-bold);
+}

package/components/heading/heading.d.ts

@@ -18,8 +18,11 @@ export default Heading;
 export interface H1Props extends HTMLAttributes<HTMLHeadingElement> {
     caps?: boolean | null | undefined;
 }
-declare const H1: ComponentType<H1Props>;
-declare const H2: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
-declare const H3: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
-declare const H4: ComponentType<HTMLAttributes<HTMLHeadingElement>>;
+declare const H1: import("react").NamedExoticComponent<H1Props>;
+declare const H2: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
+declare const H3: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
+export interface H4Props extends HTMLAttributes<HTMLHeadingElement> {
+    bold?: boolean | null | undefined;
+}
+declare const H4: import("react").NamedExoticComponent<H4Props>;
 export { H1, H2, H3, H4 };

package/components/heading/heading.js

@@ -29,24 +29,22 @@ Heading.propTypes = {
 };
 Heading.Levels = Levels;
 export default Heading;
-function makeHeading(level, useCaps) {
-    const H = memo(({ className, caps, ...restProps }) => {
-        const classes = classNames(className, {
-            [styles.caps]: useCaps && caps
-        });
-        return (<Heading {...restProps} level={level} className={classes}/>);
-    });
-    H.displayName = `H${level}`;
-    H.propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        // use only for short h1 headers, no longer than three words
-        caps: PropTypes.bool
-    };
-    return H;
-}
-const H1 = makeHeading(Levels.H1, true);
-const H2 = makeHeading(Levels.H2);
-const H3 = makeHeading(Levels.H3);
-const H4 = makeHeading(Levels.H4);
+const warnCaps = deprecate(() => { }, 'H1 caps prop is deprecated and will be removed in Ring UI 7.0');
+const H1 = memo(function H1({ className, caps, ...restProps }) {
+    if (caps) {
+        warnCaps();
+    }
+    const classes = classNames(className, { [styles.caps]: caps });
+    return <Heading {...restProps} level={Levels.H1} className={classes}/>;
+});
+const H2 = memo(function H2(props) {
+    return <Heading {...props} level={Levels.H2}/>;
+});
+const H3 = memo(function H3(props) {
+    return <Heading {...props} level={Levels.H3}/>;
+});
+const H4 = memo(function H4({ className, bold, ...restProps }) {
+    const classes = classNames(className, { [styles.bold]: bold });
+    return <Heading {...restProps} className={classes} level={Levels.H4}/>;
+});
 export { H1, H2, H3, H4 };

package/components/island/island.css

@@ -51,7 +51,7 @@
 
   font-size: inherit;
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .narrowIsland .header {

package/components/island-legacy/island-legacy.css

@@ -90,7 +90,7 @@
 
   padding: 0 calc(var(--ring-unit) * 4);
 
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-island__content) {

package/components/query-assist/query-assist.css

@@ -131,7 +131,7 @@
 }
 
 .highlight {
-  font-weight: 600;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 .service {

package/components/select/select.d.ts

@@ -259,6 +259,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getAvatar;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     getShortcutsMap(): {
         enter: () => true | undefined;
         esc: (event: KeyboardEvent) => boolean | undefined;

package/components/select/select.js

@@ -19,7 +19,7 @@ import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
 import memoize from '../global/memoize';
 import { I18nContext } from '../i18n/i18n-context';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import { refObject } from '../global/prop-types';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
@@ -777,6 +777,7 @@ export default class Select extends Component {
     filterRef = (el) => {
         this.filter = el;
     };
+    composedFilterRef = createComposedRef();
     getShortcutsMap() {
         return {
             enter: this._onEnter,
@@ -815,7 +816,7 @@ export default class Select extends Component {
             case Type.INPUT: return (<>
           <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={composeRefs(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
             // Input with error style without description
             error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({

package/components/select/select__popup.d.ts

@@ -126,6 +126,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     shortcutsScope: string;
     shortcutsMap: {
         tab: (event: Event) => void;

package/components/select/select__popup.js

@@ -24,7 +24,7 @@ import Button from '../button/button';
 import Text from '../text/text';
 import { ControlsHeight } from '../global/controls-height';
 import { refObject } from '../global/prop-types';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts';
 import SelectFilter from './select__filter';
 import styles from './select-popup.css';
@@ -186,7 +186,7 @@ export default class SelectPopup extends PureComponent {
         if (this.props.filter || this.props.tags) {
             return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
           {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
-          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={composeRefs(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
+          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
                     ? this.props.filter.placeholder
                     : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
         </div>);
@@ -309,6 +309,7 @@ export default class SelectPopup extends PureComponent {
         this.filter = el;
         this.caret = el && new Caret(el);
     };
+    composedFilterRef = createComposedRef();
     shortcutsScope = getUID('select-popup-');
     shortcutsMap = {
         tab: this.tabPress

package/components/sidebar/sidebar.css

@@ -98,7 +98,7 @@
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);
-  font-weight: bold;
+  font-weight: var(--ring-font-weight-bold);
 }
 
 :global(.ring-sidebar__section-text) {

package/components/tab-trap/tab-trap.d.ts

@@ -1,45 +1,18 @@
-import { Component, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
-    trapDisabled: boolean;
-    autoFocusFirst: boolean;
-    focusBackOnClose: boolean;
-    focusBackOnExit: boolean;
+    trapDisabled?: boolean;
+    autoFocusFirst?: boolean;
+    focusBackOnClose?: boolean;
+    focusBackOnExit?: boolean;
 }
 /**
  * @name TabTrap
  */
-export default class TabTrap extends Component<TabTrapProps> {
-    static propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        trapDisabled: PropTypes.Requireable<boolean>;
-        autoFocusFirst: PropTypes.Requireable<boolean>;
-        focusBackOnClose: PropTypes.Requireable<boolean>;
-        focusBackOnExit: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        trapDisabled: boolean;
-        autoFocusFirst: boolean;
-        focusBackOnClose: boolean;
-        focusBackOnExit: boolean;
-    };
-    constructor(props: TabTrapProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    previousFocusedNode?: Element | null;
-    trapWithoutFocus?: boolean;
-    restoreFocus: () => void;
-    node?: HTMLElement | null;
-    containerRef: (node: HTMLElement | null) => void;
-    focusElement: (first?: boolean) => void;
-    focusFirst: () => void;
-    focusLast: () => void;
-    focusLastIfEnabled: (event: React.FocusEvent) => void;
-    handleBlurIfWithoutFocus: (event: React.FocusEvent) => void;
-    trapButtonNode?: HTMLElement | null;
-    trapButtonRef: (node: HTMLElement | null) => void;
-    render(): React.JSX.Element;
+interface TabTrap {
+    node: HTMLElement | null;
 }
+declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
+export default TabTrap;