@jetbrains/ring-ui 7.0.0-beta.1 → 7.0.0-beta.3

package/components/alert-service/alert-service.js

@@ -71,11 +71,11 @@ class AlertService {
             timeout,
             isClosing: false,
             onCloseRequest: () => {
-                onCloseRequest && onCloseRequest();
+                onCloseRequest?.();
                 this.startAlertClosing(alert);
             },
             onClose: () => {
-                onClose && onClose();
+                onClose?.();
                 this.removeWithoutAnimation(alert.key);
             },
             ...restOptions

package/components/auth/auth__core.d.ts

@@ -1,6 +1,6 @@
 import Listeners, { Handler } from '../global/listeners';
 import HTTP, { HTTPAuth, RequestParams } from '../http/http';
-import AuthDialogService from '../auth-dialog-service/auth-dialog-service';
+import type AuthDialogService from '../auth-dialog-service/auth-dialog-service';
 import AuthStorage, { AuthState } from './storage';
 import { AuthError, AuthResponse } from './response-parser';
 import AuthRequestBuilder from './request-builder';

package/components/breadcrumbs/breadcrumbs.css

@@ -4,4 +4,5 @@
   color: var(--ring-borders-color);
 
   font-size: 16px;
+  line-height: 16px;
 }

package/components/dialog/dialog.js

@@ -85,7 +85,12 @@ export default class Dialog extends PureComponent {
         if (this.nativeDialog.current != null) {
             if (show) {
                 this.nativeDialog.current.removeAttribute('open');
-                modal ? this.nativeDialog.current.showModal() : this.nativeDialog.current.show();
+                if (modal) {
+                    this.nativeDialog.current.showModal();
+                }
+                else {
+                    this.nativeDialog.current.show();
+                }
             }
             else {
                 this.nativeDialog.current.close();

package/components/global/composeRefs.d.ts

@@ -1,5 +1,2 @@
 import { Ref } from 'react';
-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,4 @@
 import memoizeOne from 'memoize-one';
-import deprecate from 'util-deprecate';
 function composeRefs(...refs) {
     return (value) => refs.forEach(ref => {
         if (typeof ref === 'function') {
@@ -10,8 +9,6 @@ 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/theme.d.ts

@@ -4,6 +4,9 @@ declare enum Theme {
     LIGHT = "light",
     DARK = "dark"
 }
+export declare const ThemeContext: import("react").Context<{
+    theme: Theme.LIGHT | Theme.DARK;
+}>;
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
 export declare function useThemeClasses(theme: Theme): string;
 export interface WithThemeClassesProps {

package/components/global/theme.js

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, forwardRef, useContext } from 'react';
+import { useMemo, useState, useEffect, forwardRef, useContext, createContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
@@ -12,6 +12,8 @@ var Theme;
     Theme["LIGHT"] = "light";
     Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
+export const ThemeContext = createContext({ theme: Theme.LIGHT });
+const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
 const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 export function useTheme() {
     const [dark, setDark] = useState(darkMatcher.matches);
@@ -27,6 +29,7 @@ export function useThemeClasses(theme) {
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     return classNames({
         [styles.dark]: resolvedTheme === Theme.DARK,
+        [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
         [defaultStyles.light]: resolvedTheme === Theme.LIGHT
     });
 }
@@ -38,11 +41,11 @@ export function applyTheme(theme, container) {
     if (theme === Theme.DARK) {
         container.classList.remove(defaultStyles.light);
         container.classList.add(styles.dark);
-        container.classList.add('ring-ui-theme-dark');
+        container.classList.add(GLOBAL_DARK_CLASS_NAME);
     }
     else {
         container.classList.remove(styles.dark);
-        container.classList.remove('ring-ui-theme-dark');
+        container.classList.remove(GLOBAL_DARK_CLASS_NAME);
         container.classList.add(defaultStyles.light);
     }
 }
@@ -50,6 +53,7 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
+    const themeValue = useMemo(() => ({ theme: resolvedTheme }), [resolvedTheme]);
     useEffect(() => {
         if (target != null) {
             applyTheme(resolvedTheme, target);
@@ -57,14 +61,16 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
+    return (<ThemeContext.Provider value={themeValue}>
+      <div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
             ? (<PopupTarget id={id}>
-              {popupTarget => (<>
-                  {children}
-                  {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
-                </>)}
-            </PopupTarget>)
+                {popupTarget => (<>
+                    {children}
+                    {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                  </>)}
+              </PopupTarget>)
             : children}
-    </div>);
+      </div>
+    </ThemeContext.Provider>);
 });
 export default Theme;

package/components/header/header.css

@@ -97,26 +97,13 @@
   padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
 }
 
-.scrollableSection {
+.links {
   display: flex;
-  overflow: auto;
   flex-direction: column;
 
   min-height: calc(var(--ring-unit) * 5);
 }
 
-.withTopBorder {
-  box-shadow: inset 0 1px 0 var(--ring-line-color);
-}
-
-.withBottomBorder {
-  box-shadow: inset 0 -1px 0 var(--ring-line-color);
-}
-
-.withTopBorder.withBottomBorder {
-  box-shadow: inset 0 -1px 0 var(--ring-line-color), inset 0 1px 0 var(--ring-line-color);
-}
-
 .tray {
   align-items: flex-end;
 

package/components/header/header.d.ts

@@ -30,7 +30,6 @@ export default Header;
 export { default as Logo } from './logo';
 export { default as Tray } from './tray';
 export { default as HeaderIcon } from './header-icon';
-export { default as TrayIcon } from './tray-icon';
 export { default as Profile } from './profile';
 export { default as SmartProfile } from './smart-profile';
 export { default as Services } from './services';

package/components/header/header.js

@@ -41,7 +41,6 @@ export default Header;
 export { default as Logo } from './logo';
 export { default as Tray } from './tray';
 export { default as HeaderIcon } from './header-icon';
-export { default as TrayIcon } from './tray-icon';
 export { default as Profile } from './profile';
 export { default as SmartProfile } from './smart-profile';
 export { default as Services } from './services';

package/components/header/links.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export default function Links({ className, ...restProps }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/components/header/links.js

@@ -0,0 +1,7 @@
+import classNames from 'classnames';
+import ScrollableSection from '../scrollable-section/scrollable-section';
+import styles from './header.css';
+// currently only supports vertical header
+export default function Links({ className, ...restProps }) {
+    return (<ScrollableSection {...restProps} className={classNames(styles.links, className)}/>);
+}

package/components/icon/icon__svg.js

@@ -30,7 +30,12 @@ const getSVGFromSource = memoize((src) => {
     const svgContainer = document.createElement('div');
     svgContainer.innerHTML = src;
     const svg = svgContainer.firstElementChild;
-    svg.remove ? svg.remove() : svgContainer.removeChild(svg);
+    if (svg.remove) {
+        svg.remove();
+    }
+    else {
+        svgContainer.removeChild(svg);
+    }
     return {
         props: extractSVGProps(svg),
         html: svg.innerHTML

package/components/input/input.js

@@ -77,7 +77,7 @@ export class Input extends PureComponent {
     };
     composedInputRef = createComposedRef();
     clear = (e) => {
-        this.props.onClear && this.props.onClear(e);
+        this.props.onClear?.(e);
     };
     handleInputChange = (e) => {
         if (!this.props.multiline) {

package/components/list/list.js

@@ -407,7 +407,7 @@ export default class List extends Component {
         const isString = typeof identificator === 'string' || identificator instanceof String;
         if (identificator && !isString) {
             warnEmptyKey();
-            `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
+            return `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
         }
         return `${itemProps.rgItemType}_${identificator}`;
     }

package/components/scrollable-section/scrollable-section.css

@@ -0,0 +1,31 @@
+
+
+.scrollableSection {
+  --ring-scrollable-section-top-shadow: transparent;
+  --ring-scrollable-section-right-shadow: transparent;
+  --ring-scrollable-section-bottom-shadow: transparent;
+  --ring-scrollable-section-left-shadow: transparent;
+
+  overflow: auto;
+
+  box-shadow: inset 0 1px 0 var(--ring-scrollable-section-top-shadow),
+              inset -1px 0 0 var(--ring-scrollable-section-right-shadow),
+              inset 0 -1px 0 var(--ring-scrollable-section-bottom-shadow),
+              inset 1px 0 0 var(--ring-scrollable-section-left-shadow);
+}
+
+.withTopBorder {
+  --ring-scrollable-section-top-shadow: var(--ring-line-color);
+}
+
+.withRightBorder {
+  --ring-scrollable-section-right-shadow: var(--ring-line-color);
+}
+
+.withBottomBorder {
+  --ring-scrollable-section-bottom-shadow: var(--ring-line-color);
+}
+
+.withLeftBorder {
+  --ring-scrollable-section-left-shadow: var(--ring-line-color);
+}

package/components/{header → scrollable-section}/scrollable-section.js

@@ -1,16 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import styles from './header.css';
-// currently only supports vertical header
+import styles from './scrollable-section.css';
 export default function ScrollableSection({ className, ...restProps }) {
-    const [scrolledToTop, setScrolledToTop] = useState(true);
-    const [scrolledToBottom, setScrolledToBottom] = useState(true);
+    const [scrolledToTop, setScrolledToTop] = useState(false);
+    const [scrolledToRight, setScrolledToRight] = useState(false);
+    const [scrolledToBottom, setScrolledToBottom] = useState(false);
+    const [scrolledToLeft, setScrolledToLeft] = useState(false);
     const ref = useRef(null);
     const calculateScrollPosition = useCallback(() => {
         if (ref.current != null) {
-            const { scrollTop, scrollHeight, offsetHeight } = ref.current;
+            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth } = ref.current;
             setScrolledToTop(scrollTop === 0);
+            setScrolledToRight(offsetWidth + scrollLeft >= scrollWidth);
             setScrolledToBottom(offsetHeight + scrollTop >= scrollHeight);
+            setScrolledToLeft(scrollLeft === 0);
         }
     }, []);
     useEffect(() => {
@@ -20,6 +23,8 @@ export default function ScrollableSection({ className, ...restProps }) {
     }, [calculateScrollPosition]);
     return (<div {...restProps} className={classNames(styles.scrollableSection, className, {
             [styles.withTopBorder]: !scrolledToTop,
-            [styles.withBottomBorder]: !scrolledToBottom
+            [styles.withRightBorder]: !scrolledToRight,
+            [styles.withBottomBorder]: !scrolledToBottom,
+            [styles.withLeftBorder]: !scrolledToLeft
         })} ref={ref} onScroll={calculateScrollPosition}/>);
 }

package/components/select/select.js

@@ -560,7 +560,9 @@ export default class Select extends Component {
                 this.props.onChange(fakeSelected, event);
             });
         }
-        !this._popup?.isVisible() && this.props.onBeforeOpen();
+        if (!this._popup?.isVisible()) {
+            this.props.onBeforeOpen();
+        }
         this.setState({ filterValue }, () => {
             this._showPopup();
         });
@@ -573,7 +575,9 @@ export default class Select extends Component {
     _redrawPopup = () => {
         if (this.props.multiple) {
             setTimeout(() => {
-                this.isInputMode() && this.clearFilter();
+                if (this.isInputMode()) {
+                    this.clearFilter();
+                }
                 this._showPopup();
             }, 0);
         }
@@ -620,13 +624,10 @@ export default class Select extends Component {
                 let nextSelection;
                 if (!prevState.multipleMap[selected.key]) {
                     nextSelection = currentSelection.concat(selected);
-                    this.props.onSelect && this.props.onSelect(selected, event);
                 }
                 else {
                     nextSelection = currentSelection.filter(item => item.key !== selected.key);
-                    this.props.onDeselect && this.props.onDeselect(selected);
                 }
-                this.props.onChange(nextSelection, event);
                 const nextState = {
                     filterValue: '',
                     selected: nextSelection,
@@ -648,6 +649,13 @@ export default class Select extends Component {
                 }
                 return { ...prevState, ...nextState };
             }, () => {
+                if (this.state.multipleMap[selected.key]) {
+                    this.props.onSelect?.(selected, event);
+                }
+                else {
+                    this.props.onDeselect?.(selected);
+                }
+                this.props.onChange(this.state.selected, event);
                 if (tryKeepOpen) {
                     this._redrawPopup();
                 }
@@ -667,14 +675,14 @@ export default class Select extends Component {
                     filter(item => !this.props.selected.
                     find(selectedItem => item.key === selectedItem.key)).
                     forEach(item => {
-                    this.props.onSelect && this.props.onSelect(item);
+                    this.props.onSelect?.(item);
                 });
             }
             else {
                 nextSelection = [];
                 currentSelection.
                     forEach(item => {
-                    this.props.onDeselect && this.props.onDeselect(item);
+                    this.props.onDeselect?.(item);
                 });
             }
             this.props.onChange(nextSelection, event);

package/components/select/select__filter.js

@@ -17,7 +17,12 @@ export default class SelectFilter extends Component {
     focus() {
         const { input } = this;
         if (input && input !== document.activeElement) {
-            sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+            if (sniffr.browser.name === 'firefox') {
+                input.select();
+            }
+            else {
+                input.focus();
+            }
         }
     }
     blur() {

package/components/table/table.js

@@ -46,8 +46,7 @@ export class Table extends PureComponent {
         isDisabledSelectionVisible: () => false,
         getCheckboxTooltip: () => undefined,
         RowComponent: Row,
-        //TODO: change to false in 7.0
-        wideFirstColumn: true
+        wideFirstColumn: false
     };
     state = {
         shortcutsScope: getUID('ring-table-'),

package/components/tag/tag.css

@@ -29,8 +29,7 @@
   line-height: var(--ring-line-height);
 }
 
-.tag,
-.tagAngled::before {
+.tag {
   transition: background-color var(--ring-ease);
 
   background-color: var(--ring-tag-background-color);
@@ -61,62 +60,18 @@
 }
 
 .focused,
-.focused.tagAngled::before,
 .tag:focus-visible,
-.tagAngled:focus-visible::before,
-.tag:hover,
-.tagAngled:hover::before {
+.tag:hover {
   transition: none;
 
   background-color: var(--ring-tag-hover-background-color);
 }
 
-.tagAngled {
-  /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
-
-  margin-bottom: -5px !important;
-
-  margin-left: var(--ring-unit);
-  padding-left: calc(var(--ring-unit) / 2);
-
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  &::before {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-
-    box-sizing: border-box;
-    width: 12px;
-    height: 12px;
-
-    content: "";
-    transform: scaleY(1.177) rotate(45deg);
-    transform-origin: 0 0;
-
-    border: none;
-  }
-
-  &.focused,
-  &:focus {
-    box-shadow: 0 0 0 1px var(--ring-border-hover-color) inset, 0 0 0 1px var(--ring-border-hover-color);
-  }
-
-  &:focus::before {
-    box-shadow:
-      1px -1px var(--ring-border-hover-color) inset,
-      -0.8px 0.8px 0 0.5px var(--ring-border-hover-color);
-  }
-}
-
 .content {
   composes: ellipsis from "../global/global.css";
 }
 
-.disabled.tag,
-.disabled.tagAngled::before {
+.disabled.tag {
   pointer-events: none;
 
   color: var(--ring-disabled-color);

package/components/tag/tag.d.ts

@@ -20,7 +20,6 @@ export interface TagProps {
     icon?: string | undefined;
     avatar?: string | null | undefined;
     rgTagTitle?: string | undefined;
-    angled?: boolean | null | undefined;
     textColor?: string | undefined;
     backgroundColor?: string | undefined;
 }
@@ -38,7 +37,6 @@ export default class Tag extends PureComponent<TagProps> {
         readOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         focused: PropTypes.Requireable<boolean>;
-        angled: PropTypes.Requireable<boolean>;
         backgroundColor: PropTypes.Requireable<string>;
         textColor: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/components/tag/tag.js

@@ -3,12 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close-12px';
-import deprecate from 'util-deprecate';
 import Icon from '../icon/icon';
 import Button from '../button/button';
 import { ControlsHeight } from '../global/controls-height';
 import styles from './tag.css';
-const warnAngled = deprecate(() => { }, 'Tag angled prop is deprecated and will be removed in Ring UI 7.0');
 /**
  * @name Tag
  */
@@ -23,7 +21,6 @@ export default class Tag extends PureComponent {
         readOnly: PropTypes.bool,
         disabled: PropTypes.bool,
         focused: PropTypes.bool,
-        angled: PropTypes.bool,
         backgroundColor: PropTypes.string,
         textColor: PropTypes.string,
         children: PropTypes.node,
@@ -105,13 +102,9 @@ export default class Tag extends PureComponent {
         return null;
     }
     render() {
-        if (this.props.angled) {
-            warnAngled();
-        }
         const classes = classNames('ring-js-shortcuts', styles.tag, {
             [styles.focused]: this.state.focused,
             [styles.disabled]: this.props.disabled,
-            [styles.tagAngled]: this.props.angled,
             [styles.withRemove]: !this.props.readOnly
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.3",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -77,9 +77,9 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@babel/cli": "^7.24.8",
-    "@babel/eslint-parser": "^7.24.8",
-    "@csstools/css-parser-algorithms": "^2.7.0",
-    "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
+    "@babel/eslint-parser": "^7.25.1",
+    "@csstools/css-parser-algorithms": "^3.0.0",
+    "@csstools/stylelint-no-at-nest-rule": "^3.0.0",
     "@jetbrains/eslint-config": "^5.4.2",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/stylelint-config": "^4.0.2",
@@ -88,20 +88,20 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
-    "@storybook/addon-a11y": "8.2.6",
-    "@storybook/addon-docs": "8.2.6",
-    "@storybook/addon-essentials": "8.2.6",
-    "@storybook/components": "8.2.6",
-    "@storybook/manager-api": "8.2.6",
-    "@storybook/preview-api": "8.2.6",
-    "@storybook/react": "8.2.6",
-    "@storybook/react-webpack5": "8.2.6",
+    "@storybook/addon-a11y": "8.2.7",
+    "@storybook/addon-docs": "8.2.7",
+    "@storybook/addon-essentials": "8.2.7",
+    "@storybook/components": "8.2.7",
+    "@storybook/manager-api": "8.2.7",
+    "@storybook/preview-api": "8.2.7",
+    "@storybook/react": "8.2.7",
+    "@storybook/react-webpack5": "8.2.7",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "8.2.6",
+    "@storybook/theming": "8.2.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/chai": "^4.3.16",
+    "@types/chai": "^4.3.17",
     "@types/chai-as-promised": "^7.1.8",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
@@ -112,20 +112,20 @@
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.12.1",
     "axe-playwright": "^2.0.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001643",
+    "caniuse-lite": "^1.0.30001649",
     "chai": "^5.1.1",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.37.1",
+    "core-js": "^3.38.0",
     "cpy-cli": "^5.0.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
@@ -140,12 +140,12 @@
     "glob": "^11.0.0",
     "html-webpack-plugin": "^5.6.0",
     "http-server": "^14.1.1",
-    "husky": "^9.1.1",
+    "husky": "^9.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.8",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -156,21 +156,21 @@
     "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.19.0",
+    "rollup": "^4.20.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^18.0.0",
-    "sinon-chai": "^3.7.0",
+    "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.2.6",
+    "storybook": "8.2.7",
     "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^16.7.0",
+    "stylelint": "^16.8.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.5.4",
-    "vitest": "^2.0.4",
-    "vitest-teamcity-reporter": "^0.3.0",
+    "vitest": "^2.0.5",
+    "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
@@ -196,7 +196,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.25.2",
     "@babel/preset-typescript": "^7.24.7",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
     "@jetbrains/icons": "^4.4.0",
@@ -210,7 +210,7 @@
     "@ungap/url-search-params": "^0.2.2",
     "babel-loader": "9.1.3",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.23.2",
+    "browserslist": "^4.23.3",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",

package/components/global/react-render-adapter.d.ts

@@ -1 +0,0 @@
-export declare const setClient: () => void;

package/components/global/react-render-adapter.js

@@ -1,3 +0,0 @@
-import deprecate from 'util-deprecate';
-// TODO remove in 7.0
-export const setClient = deprecate(() => { }, 'setClient does nothing in Ring UI 6.0 and will be removed in 7.0');

package/components/header/tray-icon.d.ts

@@ -1 +0,0 @@
-export { type HeaderIconSpecificProps as TrayIconSpecificProps, default } from './header-icon';

package/components/header/tray-icon.js

@@ -1,2 +0,0 @@
-// TODO remove this file in 7.0
-export { default } from './header-icon';

package/components/palette/palette.css

@@ -1,220 +0,0 @@
-/* stylelint-disable color-no-hex */
-
-/**
-  TODO: Drop in Ring UI 7.0
- */
-
-:global(.ring-palette_color-0) {
-  color: #444;
-  background-color: transparent;
-}
-
-:global(.ring-palette_color-1),
-:global(.ring-palette_tone-0-0) {
-  color: #888;
-  background-color: #e6e6e6;
-}
-
-:global(.ring-palette_color-2),
-:global(.ring-palette_tone-1-0) {
-  color: #4da400;
-  background-color: #e6f6cf;
-}
-
-:global(.ring-palette_color-3),
-:global(.ring-palette_tone-2-0) {
-  color: #45818e;
-  background-color: #d8f7f3;
-}
-
-:global(.ring-palette_color-4),
-:global(.ring-palette_tone-3-0) {
-  color: #3d85c6;
-  background-color: #e0f1fb;
-}
-
-:global(.ring-palette_color-5),
-:global(.ring-palette_tone-4-0) {
-  color: #dc5766;
-  background-color: #fce5f1;
-}
-
-:global(.ring-palette_color-6),
-:global(.ring-palette_tone-5-0) {
-  color: #b45f06;
-  background-color: #ffee9c;
-}
-
-:global(.ring-palette_color-7),
-:global(.ring-palette_tone-6-0) {
-  color: #b45f06;
-  background-color: #f7e9c1;
-}
-
-:global(.ring-palette_color-8),
-:global(.ring-palette_tone-0-1) {
-  color: #444;
-  background-color: #bababa;
-}
-
-:global(.ring-palette_color-9),
-:global(.ring-palette_tone-1-1) {
-  color: #444;
-  background-color: #b7e281;
-}
-
-:global(.ring-palette_color-10),
-:global(.ring-palette_tone-2-1) {
-  color: #444;
-  background-color: #92e1d5;
-}
-
-:global(.ring-palette_color-11),
-:global(.ring-palette_tone-3-1) {
-  color: #444;
-  background-color: #a6e0fc;
-}
-
-:global(.ring-palette_color-12),
-:global(.ring-palette_tone-4-1) {
-  color: #444;
-  background-color: #ffc8ea;
-}
-
-:global(.ring-palette_color-13),
-:global(.ring-palette_tone-5-1) {
-  color: #444;
-  background-color: #fed74a;
-}
-
-:global(.ring-palette_color-14),
-:global(.ring-palette_tone-6-1) {
-  color: #444;
-  background-color: #e0c378;
-}
-
-:global(.ring-palette_color-15),
-:global(.ring-palette_tone-0-2) {
-  color: #fff;
-  background-color: #878787;
-}
-
-:global(.ring-palette_color-16),
-:global(.ring-palette_tone-1-2) {
-  color: #fff;
-  background-color: #7dbd36;
-}
-
-:global(.ring-palette_color-17),
-:global(.ring-palette_tone-2-2) {
-  color: #fff;
-  background-color: #25beb2;
-}
-
-:global(.ring-palette_color-18),
-:global(.ring-palette_tone-3-2) {
-  color: #fff;
-  background-color: #42a3df;
-}
-
-:global(.ring-palette_color-19),
-:global(.ring-palette_tone-4-2) {
-  color: #fff;
-  background-color: #ff7bc3;
-}
-
-:global(.ring-palette_color-20),
-:global(.ring-palette_tone-5-2) {
-  color: #fff;
-  background-color: #ff7123;
-}
-
-:global(.ring-palette_color-21),
-:global(.ring-palette_tone-6-2) {
-  color: #fff;
-  background-color: #ce6700;
-}
-
-:global(.ring-palette_color-22),
-:global(.ring-palette_tone-0-3) {
-  color: #fff;
-  background-color: #4d4d4d;
-}
-
-:global(.ring-palette_color-23),
-:global(.ring-palette_tone-1-3) {
-  color: #fff;
-  background-color: #409600;
-}
-
-:global(.ring-palette_color-24),
-:global(.ring-palette_tone-2-3) {
-  color: #fff;
-  background-color: #2f9890;
-}
-
-:global(.ring-palette_color-25),
-:global(.ring-palette_tone-3-3) {
-  color: #fff;
-  background-color: #0070e4;
-}
-
-:global(.ring-palette_color-26),
-:global(.ring-palette_tone-4-3) {
-  color: #fff;
-  background-color: #dc0083;
-}
-
-:global(.ring-palette_color-27),
-:global(.ring-palette_tone-5-3) {
-  color: #fff;
-  background-color: #e30000;
-}
-
-:global(.ring-palette_color-28),
-:global(.ring-palette_tone-6-3) {
-  color: #fff;
-  background-color: #8d5100;
-}
-
-:global(.ring-palette_color-29),
-:global(.ring-palette_tone-0-4) {
-  color: #fff;
-  background-color: #1a1a1a;
-}
-
-:global(.ring-palette_color-30),
-:global(.ring-palette_tone-1-4) {
-  color: #fff;
-  background-color: #246512;
-}
-
-:global(.ring-palette_color-31),
-:global(.ring-palette_tone-2-4) {
-  color: #fff;
-  background-color: #00665e;
-}
-
-:global(.ring-palette_color-32),
-:global(.ring-palette_tone-3-4) {
-  color: #fff;
-  background-color: #0050a1;
-}
-
-:global(.ring-palette_color-33),
-:global(.ring-palette_tone-4-4) {
-  color: #fff;
-  background-color: #900052;
-}
-
-:global(.ring-palette_color-34),
-:global(.ring-palette_tone-5-4) {
-  color: #fff;
-  background-color: #8e1600;
-}
-
-:global(.ring-palette_color-35),
-:global(.ring-palette_tone-6-4) {
-  color: #fff;
-  background-color: #553000;
-}