@jetbrains/ring-ui 5.0.9 → 5.0.12

package/components/button/button.css

@@ -69,7 +69,8 @@
   &.active {
     transition: none;
 
-    box-shadow: inset 0 0 0 2px var(--ring-main-color);
+    background-color: var(--ring-hover-background-color);
+    box-shadow: button-shadow var(--ring-main-color);
   }
 
   &:global(.focus-visible).active {
@@ -83,6 +84,10 @@
     box-shadow: button-shadow var(--ring-border-disabled-color);
   }
 
+  &[disabled].active {
+    background-color: var(--ring-disabled-selected-background-color);
+  }
+
   &[disabled],
   &[disabled].withIcon {
     color: var(--ring-disabled-color);

package/components/button-group/button-group.css

@@ -105,13 +105,13 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: inset 0 0 0 2px var(--ring-main-color);
+  box-shadow: button-shadow var(--ring-main-color);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button:global(.focus-visible).active {
   border-radius: var(--ring-border-radius);
-  box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+  box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */

package/components/button-group/button-group.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caption from './caption';
 export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
     split?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
 }
 /**
  * @name Button Group

package/components/button-group/button-group.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import dataTests from '../global/data-tests';
 import Caption from './caption';
 import styles from './button-group.css';
 /**
@@ -12,9 +13,9 @@ export default class ButtonGroup extends PureComponent {
         className: PropTypes.string
     };
     render() {
-        const { className, split, ...restProps } = this.props;
+        const { className, split, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(split ? styles.split : styles.buttonGroup, className);
-        return (<div {...restProps} className={classes}/>);
+        return (<div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>);
     }
 }
 export { Caption };

package/components/button-set/button-set.d.ts

@@ -1,12 +1,16 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
 /**
  * @name Button Set
  */
-export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonSet extends PureComponent<ButtonSetProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/components/button-set/button-set.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
 import styles from './button-set.css';
 /**
  * @name Button Set
@@ -8,12 +9,14 @@ import styles from './button-set.css';
 export default class ButtonSet extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
-        className: PropTypes.string
+        className: PropTypes.string,
+        'data-test': PropTypes.string
     };
     render() {
-        const classes = classNames(styles.buttonSet, this.props.className);
-        return (<div {...this.props} className={classes}>
-        {this.props.children}
+        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.buttonSet, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-set', dataTest)} className={classes}>
+        {children}
       </div>);
     }
 }

package/components/button-toolbar/button-toolbar.d.ts

@@ -1,12 +1,16 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
 /**
  * @name Button Toolbar
 */
-export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/components/button-toolbar/button-toolbar.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import dataTests from '../global/data-tests';
 import styles from './button-toolbar.css';
 /**
  * @name Button Toolbar
@@ -8,11 +9,12 @@ import styles from './button-toolbar.css';
 export default class ButtonToolbar extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
-        className: PropTypes.string
+        className: PropTypes.string,
+        'data-test': PropTypes.string
     };
     render() {
-        const { className } = this.props;
+        const { className, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.buttonToolbar, className);
-        return (<div {...this.props} className={classes}/>);
+        return (<div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>);
     }
 }

package/components/code/code.js

@@ -81,7 +81,7 @@ export default class Code extends PureComponent {
             [styles.inline]: inline,
             [styles.softWrap]: softWrap
         });
-        return (<Tag className={classes}>
+        return (<Tag className={classes} data-test="ring-code">
         <code 
         // should be focusable because it can be scrollable
         tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>

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

@@ -90,7 +90,7 @@
 
 .anchor {
   min-width: calc(unit * 30);
-  padding: 0 calc(unit * 1.5) 0 unit;
+  padding: 0 unit;
 
   text-align: start;
 }
@@ -102,6 +102,8 @@
 
 .chevronDownIcon {
   margin-left: auto;
+
+  color: var(--ring-icon-secondary-color);
 }
 
 .fromInput {

package/components/global/variables.css

@@ -58,6 +58,7 @@
   --ring-warning-background-color: #faeccd;
   --ring-added-background-color: #d8f0d8;
   --ring-disabled-background-color: #f5f5f5;
+  --ring-disabled-selected-background-color: #e8e8e8;
   --ring-button-danger-active-color: #ffe7e8;
   --ring-button-loader-background: #33a3ff;
   --ring-button-primary-background-color: #1a98ff;

package/components/global/variables.d.ts

@@ -48,6 +48,7 @@ export interface RingCSSProperties {
     '--ring-warning-background-color'?: Property.BackgroundColor;
     '--ring-added-background-color'?: Property.BackgroundColor;
     '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
     '--ring-button-danger-active-color'?: Property.BackgroundColor;
     '--ring-button-loader-background'?: Property.BackgroundColor;
     '--ring-button-primary-background-color'?: Property.BackgroundColor;

package/components/global/variables_dark.css

@@ -48,6 +48,7 @@
   --ring-warning-background-color: #593d01;
   --ring-added-background-color: #365947;
   --ring-disabled-background-color: #303030;
+  --ring-disabled-selected-background-color: #363636;
   --ring-button-danger-active-color: #26080a;
   --ring-button-primary-background-color: #007ee5;
 

package/components/markdown/markdown.d.ts

@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
 import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
     inline?: boolean | null | undefined;
+    plugins?: Options['remarkPlugins'];
 }
 export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**

package/components/select/select.css

@@ -41,7 +41,7 @@
 .icons {
   position: absolute;
   top: -3px;
-  right: calc(unit * 1.5);
+  right: 5px;
 
   transition: color var(--ring-ease);
 

package/components/select/select.js

@@ -35,7 +35,7 @@ var Type;
     Type["INLINE"] = "INLINE";
     Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
-const ICONS_OFFSET = 12;
+const ICONS_OFFSET = 5;
 const ICON_WIDTH = 20;
 const getStyle = memoize((iconsLength) => ({
     paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH

package/dist/_helpers/_rollupPluginBabelHelpers.js

@@ -14,7 +14,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -27,7 +27,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 

package/dist/button-group/button-group.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caption from './caption';
 export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
     split?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
 }
 /**
  * @name Button Group

package/dist/button-group/button-group.js

@@ -2,8 +2,10 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
 export { default as Caption } from './caption.js';
 import { m as modules_1068e447 } from '../_helpers/button-group.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name Button Group
@@ -14,10 +16,12 @@ class ButtonGroup extends PureComponent {
     const {
       className,
       split,
+      'data-test': dataTest,
       ...restProps
     } = this.props;
     const classes = classNames(split ? modules_1068e447.split : modules_1068e447.buttonGroup, className);
     return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": joinDataTestAttributes('ring-button-group', dataTest),
       className: classes
     }));
   }

package/dist/button-set/button-set.d.ts

@@ -1,12 +1,16 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
 /**
  * @name Button Set
  */
-export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonSet extends PureComponent<ButtonSetProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/dist/button-set/button-set.js

@@ -2,7 +2,9 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_fd849143 } from '../_helpers/button-set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name Button Set
@@ -10,17 +12,25 @@ import { m as modules_fd849143 } from '../_helpers/button-set.js';
 
 class ButtonSet extends PureComponent {
   render() {
-    const classes = classNames(modules_fd849143.buttonSet, this.props.className);
-    return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
+    const {
+      className,
+      'data-test': dataTest,
+      children,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_fd849143.buttonSet, className);
+    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": joinDataTestAttributes('ring-button-set', dataTest),
       className: classes
-    }), this.props.children);
+    }), children);
   }
 
 }
 
 _defineProperty(ButtonSet, "propTypes", {
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'data-test': PropTypes.string
 });
 
 export { ButtonSet as default };

package/dist/button-toolbar/button-toolbar.d.ts

@@ -1,12 +1,16 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
 /**
  * @name Button Toolbar
 */
-export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/dist/button-toolbar/button-toolbar.js

@@ -2,7 +2,9 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name Button Toolbar
@@ -11,10 +13,13 @@ import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
 class ButtonToolbar extends PureComponent {
   render() {
     const {
-      className
+      className,
+      'data-test': dataTest,
+      ...restProps
     } = this.props;
     const classes = classNames(modules_34154ec0.buttonToolbar, className);
-    return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
+    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": joinDataTestAttributes('ring-button-toolbar', dataTest),
       className: classes
     }));
   }
@@ -23,7 +28,8 @@ class ButtonToolbar extends PureComponent {
 
 _defineProperty(ButtonToolbar, "propTypes", {
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'data-test': PropTypes.string
 });
 
 export { ButtonToolbar as default };

package/dist/code/code.js

@@ -105,7 +105,8 @@ class Code extends PureComponent {
       [modules_66c414ea.softWrap]: softWrap
     });
     return /*#__PURE__*/React.createElement(Tag, {
-      className: classes
+      className: classes,
+      "data-test": "ring-code"
     }, /*#__PURE__*/React.createElement("code", {
       // should be focusable because it can be scrollable
       tabIndex: inline ? -1 : 0,

package/dist/global/variables.d.ts

@@ -48,6 +48,7 @@ export interface RingCSSProperties {
     '--ring-warning-background-color'?: Property.BackgroundColor;
     '--ring-added-background-color'?: Property.BackgroundColor;
     '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-selected-background-color'?: Property.BackgroundColor;
     '--ring-button-danger-active-color'?: Property.BackgroundColor;
     '--ring-button-loader-background'?: Property.BackgroundColor;
     '--ring-button-primary-background-color'?: Property.BackgroundColor;

package/dist/markdown/markdown.d.ts

@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
 import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
     inline?: boolean | null | undefined;
+    plugins?: Options['remarkPlugins'];
 }
 export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**

package/dist/old-browsers-message/white-list.js

@@ -7,12 +7,12 @@ const MAJOR_VERSION_INDEX = 0;
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
 
-if (!["and_chr 90", "and_uc 12.12", "chrome 89", "chrome 88", "edge 89", "firefox 86", "ios_saf 14.0-14.4", "safari 14", "samsung 13.0"]) {
+if (!["and_chr 102", "chrome 102", "chrome 101", "chrome 100", "edge 101", "firefox 100", "ios_saf 15.4", "ios_saf 15.2-15.3", "ios_saf 14.5-14.8", "safari 15.4"]) {
   // eslint-disable-next-line no-console
   console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
 
-const SUPPORTED = ["and_chr 90", "and_uc 12.12", "chrome 89", "chrome 88", "edge 89", "firefox 86", "ios_saf 14.0-14.4", "safari 14", "samsung 13.0"] || [];
+const SUPPORTED = ["and_chr 102", "chrome 102", "chrome 101", "chrome 100", "edge 101", "firefox 100", "ios_saf 15.4", "ios_saf 15.2-15.3", "ios_saf 14.5-14.8", "safari 15.4"] || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
 const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
   var _item$match;

package/dist/pager/pager.js

@@ -22,6 +22,7 @@ import 'util-deprecate';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import 'core-js/modules/es.string.replace.js';
+import '../global/data-tests.js';
 import '../button-group/caption.js';
 import '../_helpers/button-group.js';
 import '../_helpers/button-toolbar.js';
@@ -29,7 +30,6 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
-import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../avatar/avatar.js';

package/dist/pager-ng/pager-ng.js

@@ -26,6 +26,7 @@ import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../button-group/button-group.js';
+import '../global/data-tests.js';
 import '../button-group/caption.js';
 import '../_helpers/button-group.js';
 import '../button-toolbar/button-toolbar.js';
@@ -35,7 +36,6 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
-import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../avatar/avatar.js';

package/dist/select/select.js

@@ -102,7 +102,7 @@ var Type;
   Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
 
-const ICONS_OFFSET = 12;
+const ICONS_OFFSET = 5;
 const ICON_WIDTH = 20;
 const getStyle = memoize(iconsLength => ({
   paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH