@jetbrains/ring-ui 8.0.0-beta.6 → 8.0.0-beta.8

package/babel.config.js

@@ -1,5 +1,3 @@
-const browserslist = require('browserslist');
-
 module.exports = function config(api) {
   api.cache(true);
 
@@ -12,12 +10,6 @@ module.exports = function config(api) {
           panicThreshold: 'all_errors',
         },
       ],
-      [
-        'babel-plugin-transform-define',
-        {
-          SUPPORTED_BROWSERS: browserslist(),
-        },
-      ],
     ],
     presets: [
       [

package/components/avatar/avatar-info.js

@@ -3,13 +3,11 @@ import { Size } from './avatar-size';
 import styles from './avatar.css';
 export const fontSizes = {
     [Size.Size16]: 9,
-    [Size.Size18]: 9,
     [Size.Size20]: 9,
     [Size.Size24]: 11,
     [Size.Size28]: 12,
     [Size.Size32]: 14,
     [Size.Size40]: 16,
-    [Size.Size48]: 16,
     [Size.Size56]: 22,
 };
 export default function AvatarInfo({ size, children }) {

package/components/avatar/avatar-size.d.ts

@@ -3,14 +3,10 @@
  */
 export declare enum Size {
     Size16 = 16,
-    /** @deprecated */
-    Size18 = 18,
     Size20 = 20,
     Size24 = 24,
     Size28 = 28,
     Size32 = 32,
     Size40 = 40,
-    /** @deprecated */
-    Size48 = 48,
     Size56 = 56
 }

package/components/avatar/avatar-size.js

@@ -4,14 +4,10 @@
 export var Size;
 (function (Size) {
     Size[Size["Size16"] = 16] = "Size16";
-    /** @deprecated */
-    Size[Size["Size18"] = 18] = "Size18";
     Size[Size["Size20"] = 20] = "Size20";
     Size[Size["Size24"] = 24] = "Size24";
     Size[Size["Size28"] = 28] = "Size28";
     Size[Size["Size32"] = 32] = "Size32";
     Size[Size["Size40"] = 40] = "Size40";
-    /** @deprecated */
-    Size[Size["Size48"] = 48] = "Size48";
     Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));

package/components/avatar/avatar.js

@@ -1,15 +1,12 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
-import memoize from '../global/memoize';
 import FallbackAvatar from './fallback-avatar';
 import { Size } from './avatar-size';
 import AvatarInfo from './avatar-info';
 import styles from './avatar.css';
 export { Size };
-const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 export default class Avatar extends PureComponent {
     static defaultProps = {
         dpr: getPixelRatio(),
@@ -28,9 +25,6 @@ export default class Avatar extends PureComponent {
     };
     render() {
         const { size, url, dpr, style, round, subavatar, subavatarSize, username, info, skipParams, ...restProps } = this.props;
-        if ([Size.Size18, Size.Size48].includes(size)) {
-            warnSize(size)();
-        }
         const sizeString = `${size}px`;
         const subavatarSizeString = `${subavatarSize}px`;
         const styleObj = {

package/components/avatar/fallback-avatar.js

@@ -31,12 +31,6 @@ const SizesSquare = {
         fontSize: '8px',
         textAnchor: 'middle',
     },
-    [Size.Size18]: {
-        radius: 4,
-        text: { x: 9, y: 13 },
-        fontSize: '11px',
-        textAnchor: 'middle',
-    },
     [Size.Size20]: {
         radius: 4,
         text: { x: 2, y: 10 },
@@ -69,13 +63,6 @@ const SizesSquare = {
         letterSpacing: 1,
         underscore: { x: 5, y: 32, width: 15, height: 2.5 },
     },
-    [Size.Size48]: {
-        radius: 4,
-        text: { x: 3, y: 21 },
-        fontSize: '19px',
-        letterSpacing: 1,
-        underscore: { x: 5, y: 32, width: 15, height: 2.5 },
-    },
     [Size.Size56]: {
         radius: 4,
         text: { x: 4, y: 28 },
@@ -92,13 +79,6 @@ const SizesRound = {
         textAnchor: 'middle',
         dominantBaseline: 'middle',
     },
-    [Size.Size18]: {
-        radius: 4,
-        fontSize: '11px',
-        text: { x: '50%', y: '54%' },
-        textAnchor: 'middle',
-        dominantBaseline: 'middle',
-    },
     [Size.Size20]: {
         radius: 4,
         fontSize: '9px',
@@ -136,14 +116,6 @@ const SizesRound = {
         textAnchor: 'middle',
         dominantBaseline: 'middle',
     },
-    [Size.Size48]: {
-        radius: 4,
-        fontSize: '19px',
-        letterSpacing: 1,
-        text: { x: '50%', y: '54%' },
-        textAnchor: 'middle',
-        dominantBaseline: 'middle',
-    },
     [Size.Size56]: {
         radius: 4,
         fontSize: '26px',

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

@@ -6,7 +6,7 @@ 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);
-    const sizeClass = size !== Size.Size16 && size !== Size.Size18 && size !== Size.Size48 ? styles[`size${size}`] : undefined;
+    const sizeClass = size !== Size.Size16 ? styles[`size${size}`] : undefined;
     return (<div className={classNames(styles.avatarStack, className, sizeClass, {
             [styles.hovered]: dropdownOpen,
         })} {...restProps} style={{ height: size, ...restProps.style }}>

package/components/button/button.css

@@ -235,12 +235,12 @@
 }
 
 .primaryBlock {
-  --ring-button-default-background-color: var(--ring-button-primary-background-color);
+  --ring-button-default-background-color: var(--ring-main-color);
   --ring-button-hover-background-color: var(--ring-main-hover-color);
-  --ring-button-pressed-background-color: var(--ring-button-primary-background-color);
-  --ring-button-active-background-color: var(--ring-button-primary-background-color);
+  --ring-button-pressed-background-color: var(--ring-main-color);
+  --ring-button-active-background-color: var(--ring-main-color);
   --ring-button-active-hover-background-color: var(--ring-main-hover-color);
-  --ring-button-active-pressed-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-color);
   --ring-button-disabled-background-color: var(--ring-border-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
   --ring-button-active-border-color: var(--ring-button-primary-border-color);

package/components/button/button.d.ts

@@ -15,10 +15,6 @@ export interface ButtonBaseProps {
     secondary?: boolean | null | undefined;
     ghost?: boolean | null | undefined;
     short?: boolean | null | undefined;
-    /**
-     * @deprecated Use inline instead
-     */
-    text?: boolean | null | undefined;
     inline?: boolean | null | undefined;
     dropdown?: boolean | null | undefined;
     disabled?: boolean | undefined;

package/components/button/button.js

@@ -3,13 +3,11 @@ import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
-import deprecate from 'util-deprecate';
 import Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickable-link';
 import { ControlsHeightContext } from '../global/controls-height';
 import { getButtonClasses } from './button.classes';
 import styles from './button.css';
-const warnText = deprecate(() => { }, 'Button: "text" prop is deprecated and will be removed in 8.0. Use inline instead.');
 function removeLinkProps(props) {
     const { download, href, hrefLang, media, ping, target, type, referrerPolicy, onConditionalClick, onPlainLeftClick, activeClassName, ...restProps } = props;
     return restProps;
@@ -30,13 +28,10 @@ export class Button extends PureComponent {
     render() {
         const { 
         // Modifiers
-        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, text, dropdown, height, 
+        active, danger, delayed, loader, primary, success, error, secondary, ghost, short, dropdown, height, 
         // Props
         icon, iconRight, iconSize, iconClassName, iconRightClassName, iconSuppressSizeWarning, className, children, inline, disabled, ...props } = this.props;
-        const isInline = inline ?? text ?? !!icon;
-        if (text) {
-            warnText();
-        }
+        const isInline = inline ?? !!icon;
         const classes = getButtonClasses({
             ...this.props,
             inline: isInline,

package/components/global/variables.css

@@ -20,8 +20,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
-  --ring-border-disabled-active-components: var(--ring-border-hover-components);
-  --ring-border-disabled-active-color: var(--ring-border-hover-color); /* TODO: remove in 8.0 in favor of --ring-border-hover-color */
   --ring-icon-disabled-components: 168, 173, 189;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #A8ADBD */
   --ring-border-hover-components: 160, 189, 248;
@@ -36,8 +34,6 @@
   --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: 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;
@@ -94,8 +90,6 @@
   --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.1);
   --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
-  --ring-pinned-shadow-components: 108, 112, 126;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-components: 219, 59, 75;
   --ring-button-danger-hover-color: rgb(var(--ring-button-danger-hover-components)); /* #DB3B4B */
   --ring-button-primary-border-components: 46, 85, 163;
@@ -108,8 +102,6 @@
   /* Text */
   --ring-search-components: 112, 156, 245;
   --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
-  --ring-hint-components: 46, 85, 163;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */ /* TODO: remove in 8.0 */
   --ring-link-components: 49, 95, 189;
   --ring-link-color: rgb(var(--ring-link-components)); /* #315FBD */
   --ring-link-hover-components: 46, 85, 163;
@@ -167,8 +159,6 @@
   --ring-disabled-selected-background-components: 235, 236, 240;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
   --ring-button-danger-active-color: var(--ring-error-container-light-color); /* #FAD4D8 */
-  --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4); /* TODO remove in 8.0 */
-  --ring-button-primary-background-color: var(--ring-main-color); /* TODO remove in 8.0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
   --ring-removed-subtle-background-components: 255, 235, 236;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFEBEC */

package/components/global/variables.interface.d.ts

@@ -19,11 +19,9 @@ export interface RingCSSProperties {
     '--ring-popup-border-color'?: Property.BorderColor;
     '--ring-popup-shadow-color'?: Property.Color;
     '--ring-message-shadow-color'?: Property.Color;
-    '--ring-pinned-shadow-color'?: Property.Color;
     '--ring-button-danger-hover-color'?: Property.Color;
     '--ring-button-primary-border-color'?: Property.Color;
     '--ring-search-color'?: Property.Color;
-    '--ring-hint-color'?: Property.Color;
     '--ring-link-color'?: Property.Color;
     '--ring-link-hover-color'?: Property.Color;
     '--ring-error-color'?: Property.Color;
@@ -49,8 +47,6 @@ export interface RingCSSProperties {
     '--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;
     '--ring-code-background-color'?: Property.BackgroundColor;
     '--ring-code-color'?: Property.Color;
     '--ring-code-comment-color'?: Property.Color;

package/components/global/variables_dark.css

@@ -15,8 +15,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
   --ring-border-selected-disabled-components: 90, 93, 99;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
-  --ring-border-disabled-active-components: var(--ring-border-hover-components);
-  --ring-border-disabled-active-color: var(--ring-border-hover-color); /* TODO: remove in 8.0 in favor of --ring-border-hover-color */
   --ring-icon-disabled-components: 111, 115, 122;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #6F737A */
   --ring-border-hover-components: 55, 95, 173;
@@ -82,8 +80,6 @@
   --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
   --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
-  --ring-pinned-shadow-components: 0, 0, 0;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-color: var(--ring-error-color);
   --ring-button-primary-border-components: 153, 187, 255;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #99BBFF */
@@ -93,8 +89,6 @@
   --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 
   /* Text */
-  --ring-hint-components: 134, 138, 145;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #868A91 */ /* TODO: remove in 8.0 */
   --ring-link-components: 153, 187, 255;
   --ring-link-color: rgb(var(--ring-link-components)); /* #99BBFF */
   --ring-link-hover-components: 107, 155, 250;
@@ -153,7 +147,6 @@
   --ring-disabled-selected-background-components: 67, 69, 74;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #43454A */
   --ring-button-danger-active-color: var(--ring-error-container-light-color); /* #5E3838 */
-  --ring-button-primary-background-color: var(--ring-main-color); /* TODO remove in 8.0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #2B2D3050 */
   --ring-removed-subtle-background-components: 64, 41, 41;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #402929 */

package/components/icon/icon.css

@@ -11,11 +11,6 @@
 
   pointer-events: none;
 
-  /* TODO remove in 8.0 */
-  &[width='10'] {
-    vertical-align: -1px;
-  }
-
   &[width='12'] {
     vertical-align: -1px;
   }
@@ -71,25 +66,3 @@
 .white {
   color: var(--ring-white-text-color);
 }
-
-.loading {
-  animation-name: icon-loading;
-  animation-duration: 1200ms;
-  animation-iteration-count: infinite;
-}
-
-@keyframes icon-loading {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-
-    opacity: 0.5;
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

package/components/icon/icon.d.ts

@@ -19,7 +19,6 @@ export interface IconProps extends HTMLAttributes<HTMLElement> {
      * @deprecated Use icons with appropriate intrinsic sizes instead
      */
     width?: number | undefined;
-    loading?: boolean | null | undefined;
     suppressSizeWarning?: boolean | null | undefined;
 }
 export default class Icon extends PureComponent<IconProps> {

package/components/icon/icon.js

@@ -43,13 +43,11 @@ export default class Icon extends PureComponent {
         return undefined;
     }
     render() {
-        const { className, size, color, loading, glyph: Glyph, width, height, suppressSizeWarning, ...restProps } = this.props;
+        const { className, size, color, glyph: Glyph, width, height, suppressSizeWarning, ...restProps } = this.props;
         if (!Glyph) {
             return null;
         }
-        const classes = classNames(styles.icon, color && styles[color], {
-            [styles.loading]: loading,
-        }, className);
+        const classes = classNames(styles.icon, color && styles[color], className);
         return (<span data-test='ring-icon' {...restProps} className={classes}>
         {typeof Glyph === 'string' ? (<IconSVG src={Glyph} style={this.getStyle()}/>) : (<Glyph className={styles.glyph} style={this.getStyle()}/>)}
       </span>);

package/components/list/consts.d.ts

@@ -9,7 +9,6 @@ export declare enum Type {
     SEPARATOR = 0,
     LINK = 1,
     ITEM = 2,
-    HINT = 3,// doesn't work, TODO remove in 8.0
     CUSTOM = 4,
     TITLE = 5,
     MARGIN = 6

package/components/list/consts.js

@@ -6,7 +6,6 @@ export var Type;
     Type[Type["SEPARATOR"] = 0] = "SEPARATOR";
     Type[Type["LINK"] = 1] = "LINK";
     Type[Type["ITEM"] = 2] = "ITEM";
-    Type[Type["HINT"] = 3] = "HINT";
     Type[Type["CUSTOM"] = 4] = "CUSTOM";
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";

package/components/list/list.d.ts

@@ -43,10 +43,6 @@ export interface ListProps<T = unknown> {
     maxHeight?: number | null | undefined;
     activeIndex?: number | null | undefined;
     useMouseUp?: boolean | null | undefined;
-    /**
-     * @deprecated No longer used. Visibility is detected automatically via IntersectionObserver. Will be removed in Ring UI 8.0.
-     */
-    visible?: boolean | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     compact?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;

package/components/select/select-popup.d.ts

@@ -4,7 +4,7 @@
 import { type ComponentType, type CSSProperties, PureComponent, type ReactNode, type Ref, type SyntheticEvent } from 'react';
 import * as React from 'react';
 import { type IconType } from '../icon/icon';
-import Popup from '../popup/popup';
+import Popup, { type PopupAttrs } from '../popup/popup';
 import { type Directions } from '../popup/position';
 import List, { type SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
@@ -60,6 +60,7 @@ export interface SelectPopupProps<T = unknown> {
     ringPopupTarget: string | null;
     onSelectAll: (isSelectAll: boolean) => void;
     onEmptyPopupEnter: (e: KeyboardEvent) => void;
+    popupProps?: Partial<PopupAttrs> | undefined;
     className?: string | null | undefined;
     compact?: boolean | null | undefined;
     dir?: 'ltr' | 'rtl' | undefined;

package/components/select/select-popup.js

@@ -323,8 +323,8 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event),
     };
     render() {
-        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
-        const classes = classNames(styles.popup, className);
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, popupProps, } = this.props;
+        const classes = classNames(styles.popup, className, popupProps?.className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
@@ -332,7 +332,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || normalizePopupTarget(ringPopupTarget));
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
+                return (<Popup {...popupProps} trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={{ ...popupProps?.style, ...style }} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

package/components/select/select.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, Component, type ComponentType, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, type RefCallback, type SyntheticEvent } from 'react';
 import * as React from 'react';
+import { type PopupAttrs } from '../popup/popup';
 import { type SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { type LabelType } from '../control-label/control-label';
@@ -99,6 +100,7 @@ export interface BaseSelectProps<T = unknown> {
     getInitial?: (() => string) | null | undefined;
     minWidth?: number | undefined;
     popupClassName?: string | null | undefined;
+    popupProps?: Partial<PopupAttrs> | undefined;
     popupStyle?: CSSProperties | undefined;
     top?: number | undefined;
     left?: number | undefined;

package/components/select/select.js

@@ -47,9 +47,7 @@ const getStyle = memoize((iconsLength) => ({
 }));
 const isInputMode = (type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
-    if (List.isItemType(List.ListProps.Type.SEPARATOR, item) ||
-        List.isItemType(List.ListProps.Type.HINT, item) ||
-        typeof item.label !== 'string') {
+    if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || typeof item.label !== 'string') {
         return null;
     }
     return item.label.toLowerCase();
@@ -456,7 +454,7 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
+                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} popupProps={this.props.popupProps} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
                  filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId} preventListOverscroll={this.props.preventListOverscroll}/>);
             }}
       </I18nContext.Consumer>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.6",
+  "version": "8.0.0-beta.8",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -226,8 +226,6 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
-    "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.4",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -251,7 +249,6 @@
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
-    "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.4.0",

package/components/content-layout/content-layout.css

@@ -1,109 +0,0 @@
-@import '../global/variables.css';
-
-@value extra-small-screen-media, small-screen-media from '../global/global.css';
-
-.contentLayout {
-  --ring-content-layout-sidebar-width: calc(var(--ring-unit) * 30);
-
-  position: relative;
-
-  display: flex;
-  flex-flow: row nowrap;
-}
-
-.contentLayoutContent {
-  align-self: flex-start;
-  flex-grow: 2;
-
-  width: 100%; /* without this hack IE11 render contentLayoutContent wider than its container */
-  margin: 0 calc(var(--ring-unit) * 4);
-}
-
-.sidebarContainer {
-  min-width: var(--ring-content-layout-sidebar-width);
-  max-width: var(--ring-content-layout-sidebar-width);
-}
-
-.sidebarContainerRight {
-  order: 1;
-}
-
-.sidebar {
-  overflow: auto;
-
-  box-sizing: border-box;
-  min-width: var(--ring-content-layout-sidebar-width);
-  max-width: var(--ring-content-layout-sidebar-width);
-  height: 100%;
-  padding-right: calc(var(--ring-unit) * 2);
-  padding-left: calc(var(--ring-unit) * 4);
-}
-
-.sidebarRight {
-  padding-right: calc(var(--ring-unit) * 4);
-  padding-left: calc(var(--ring-unit) * 2);
-}
-
-.sidebarFixedTop {
-  top: 0;
-  bottom: 0;
-
-  &.sidebarFixedTop {
-    position: fixed;
-  }
-}
-
-.sidebarFixedBottom.sidebarFixedBottom {
-  position: absolute;
-  top: auto;
-  bottom: 0;
-}
-
-.bottomMarker {
-  position: absolute;
-  bottom: 0;
-}
-
-.contentLayoutResponsive {
-  @media extra-small-screen-media, small-screen-media {
-    & .contentLayoutContent {
-      margin: 0 16px;
-    }
-
-    & .sidebar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-
-      box-sizing: content-box;
-      padding: 0 16px;
-    }
-
-    & .sidebarFixedTop {
-      position: fixed;
-    }
-
-    & .sidebarFixedBottom {
-      top: auto;
-    }
-
-    & .sidebarRight {
-      right: 0;
-      left: auto;
-    }
-
-    & .sidebarContainer {
-      min-width: 0;
-      max-width: 0;
-    }
-  }
-
-  @media extra-small-screen-media {
-    & .sidebar {
-      width: 80%;
-      min-width: 0;
-      max-width: none;
-    }
-  }
-}

package/components/content-layout/content-layout.d.ts

@@ -1,20 +0,0 @@
-import { Component, type HTMLAttributes } from 'react';
-export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
-    responsive: boolean;
-    contentClassName?: string | null | undefined;
-}
-/**
- * @name Content Layout
- * @deprecated Will be removed in Ring UI 8.0.
- */
-export default class ContentLayout extends Component<ContentLayoutProps> {
-    static defaultProps: {
-        responsive: boolean;
-    };
-    state: {
-        contentNode: null;
-    };
-    saveContentNode: (contentNode: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
-}
-export { default as Sidebar } from './sidebar';