@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.11

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;
@@ -39,18 +37,18 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
   --ring-main-error-hover-components: 156, 78, 78;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
-  --ring-main-warning-components: 224, 137, 87;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08957 */
-  --ring-main-warning-hover-components: 199, 125, 85;
-  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #C77D55 */
+  --ring-main-warning-components: 214, 174, 88;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #D6AE58 */
+  --ring-main-warning-hover-components: 186, 151, 82;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #BA9752 */
   --ring-main-purple-components: 149, 90, 224;
   --ring-main-purple-color: rgb(var(--ring-main-purple-components)); /* #955AE0 */
   --ring-main-purple-hover-components: 129, 80, 190;
   --ring-main-purple-hover-color: rgb(var(--ring-main-purple-hover-components)); /* #8150BE */
   --ring-icon-error-components: 227, 119, 116;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #E37774 */
-  --ring-icon-warning-components: 224, 136, 85;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E08855 */
+  --ring-icon-warning-components: 214, 174, 88;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #D6AE58 */
   --ring-icon-success-components: 95, 173, 101;
   --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5FAD65 */
   --ring-icon-highlight-components: 214, 174, 88;
@@ -65,10 +63,10 @@
   --ring-error-border-color: rgb(var(--ring-error-border-components)); /* #7A4343 */
   --ring-error-border-hover-components: 156, 78, 78;
   --ring-error-border-hover-color: rgb(var(--ring-error-border-hover-components)); /* #9C4E4E */
-  --ring-warning-border-components: 130, 88, 69;
-  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #825845 */
-  --ring-warning-border-hover-components: 163, 107, 78;
-  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #A36B4E */
+  --ring-warning-border-components: 130, 106, 65;
+  --ring-warning-border-color: rgb(var(--ring-warning-border-components)); /* #826A41 */
+  --ring-warning-border-hover-components: 158, 129, 74;
+  --ring-warning-border-hover-color: rgb(var(--ring-warning-border-hover-components)); /* #9E814A */
   --ring-highlight-border-components: 130, 106, 65;
   --ring-highlight-border-color: rgb(var(--ring-highlight-border-components)); /* #826A41 */
   --ring-highlight-border-hover-components: 158, 129, 74;
@@ -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,16 +89,14 @@
   --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;
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
   --ring-error-components: 227, 119, 116;
   --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
-  --ring-warning-components: 224, 137, 87;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08957 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 242, 197, 92;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #F2C55C */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 95, 173, 101;
   --ring-success-color: rgb(var(--ring-success-components)); /* #5FAD65 */ /* Prefer using success icon + regular text color */
   --ring-purple-text-components: 181, 137, 236;
@@ -140,8 +134,8 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #4E5157 */
   --ring-removed-background-components: 94, 56, 56;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3838 */
-  --ring-warning-background-components: 97, 68, 56;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #614438 */
+  --ring-warning-background-components: 94, 77, 51;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5E4D33 */
   --ring-highlight-background-components: 94, 77, 51;
   --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #5E4D33 */
   --ring-added-background-components: 55, 82, 57;
@@ -153,12 +147,11 @@
   --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 */
-  --ring-warning-subtle-background-components: 69, 50, 43;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #45322B */
+  --ring-warning-subtle-background-components: 61, 50, 35;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #3D3223 */
   --ring-highlight-subtle-background-components: 61, 50, 35;
   --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #3D3223 */
   --ring-added-subtle-background-components: 37, 54, 39;
@@ -171,8 +164,8 @@
   --ring-success-container-light-color: rgb(var(--ring-success-container-light-components)); /* #222D25 */
   --ring-error-container-light-components: 54, 38, 39;
   --ring-error-container-light-color: rgb(var(--ring-error-container-light-components)); /* #362627 */
-  --ring-warning-container-light-components: 53, 42, 39;
-  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #352A27 */
+  --ring-warning-container-light-components: 49, 42, 35;
+  --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #312A23 */
   --ring-highlight-container-light-components: 49, 42, 35;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #312A23 */
   --ring-grey-container-light-components: 43, 45, 48;

package/components/header/header.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value link, active from '../link/link.css';
+@value link, active as linkActive from '../link/link.css';
 
 :root,
 :host {
@@ -41,7 +41,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }
@@ -72,7 +72,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }

package/components/http/http.d.ts

@@ -20,7 +20,7 @@ export interface RequestParams<RawBody extends boolean = true | false> extends F
 export type RequestParamsWithoutMethod<RawBody extends boolean = boolean> = Omit<RequestParams<RawBody>, 'method'>;
 export interface HTTPAuth {
     requestToken(): Promise<string | null> | string | null;
-    forceTokenUpdate(): Promise<string | null>;
+    forceTokenUpdate(failedToken?: string | null): Promise<string | null>;
 }
 export default class HTTP implements Partial<HTTPAuth> {
     baseUrl: string | null | undefined;
@@ -28,7 +28,7 @@ export default class HTTP implements Partial<HTTPAuth> {
     fetchConfig: RequestInit;
     requestToken?: () => Promise<string | null> | string | null;
     shouldRefreshToken?: (error: string) => boolean;
-    forceTokenUpdate?: () => Promise<string | null>;
+    forceTokenUpdate?: (failedToken?: string | null) => Promise<string | null>;
     constructor(auth?: HTTPAuth, baseUrl?: string | null | undefined, fetchConfig?: RequestInit);
     setAuth: (auth: HTTPAuth) => void;
     setBaseUrl: (baseUrl: string | null | undefined) => void;

package/components/http/http.js

@@ -50,7 +50,7 @@ export default class HTTP {
     setAuth = (auth) => {
         this.requestToken = () => auth.requestToken();
         this.shouldRefreshToken = auth.constructor.shouldRefreshToken;
-        this.forceTokenUpdate = () => auth.forceTokenUpdate();
+        this.forceTokenUpdate = failedToken => auth.forceTokenUpdate(failedToken);
     };
     setBaseUrl = (baseUrl) => {
         this.baseUrl = baseUrl;
@@ -97,23 +97,12 @@ export default class HTTP {
         const contentType = response.headers.get('content-type');
         const isJson = contentType && contentType.indexOf('application/json') !== -1;
         if (!response.ok) {
-            let resJson;
-            try {
-                resJson = await (isJson ? response.json() : response.text());
-            }
-            catch (err) {
-                // noop
-            }
+            const resJson = await (isJson ? response.json() : response.text());
             throw new HTTPError(response, resJson);
         }
-        try {
-            const parsedResponse = await (isJson ? response.json() : { data: await response.text() });
-            this._storeRequestMeta(parsedResponse, response);
-            return parsedResponse;
-        }
-        catch (err) {
-            return response;
-        }
+        const parsedResponse = await (isJson ? response.json() : { data: await response.text() });
+        this._storeRequestMeta(parsedResponse, response);
+        return parsedResponse;
     }
     fetch = async (url, params = {}) => {
         const { body, query = {}, ...fetchConfig } = params;
@@ -141,7 +130,7 @@ export default class HTTP {
             }
             const shouldRefreshToken = typeof error.data.error === 'string' ? this.shouldRefreshToken?.(error.data.error) : false;
             if (shouldRefreshToken) {
-                token = await this.forceTokenUpdate?.();
+                token = await this.forceTokenUpdate?.(token);
                 response = await this._performRequest(url, token, params);
                 return this._processResponse(response);
             }

package/components/i18n/i18n-context.js

@@ -9,5 +9,5 @@ export const I18nContextHolder = ({ children, messages }) => {
     useEffect(() => {
         setTranslations(messages);
     }, [messages]);
-    return <I18nContext.Provider value={{ messages, translate }}>{children}</I18nContext.Provider>;
+    return <I18nContext value={{ messages, translate }}>{children}</I18nContext>;
 };

package/components/i18n/i18n.d.ts

@@ -23,6 +23,7 @@ export declare function getTranslations(): Partial<{
     addSecondDate: string;
     addTime: string;
     selectName: string;
+    selectDate: string;
     setDate: string;
     setDateTime: string;
     setPeriod: string;

package/components/i18n/messages.json

@@ -19,6 +19,7 @@
   "addSecondDate": "Add second date",
   "addTime": "Add time",
   "selectName": "Select {{name}}",
+  "selectDate": "Select a date",
   "setDate": "Set a date",
   "setDateTime": "Set date and time",
   "setPeriod": "Set a period",

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/input/input.d.ts

@@ -69,7 +69,7 @@ export declare class Input extends PureComponent<InputProps> {
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => () => void>;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/components/island/adaptive-island-hoc.js

@@ -17,11 +17,11 @@ export default function adaptiveIslandHOC(ComposedComponent) {
             }
         };
         render() {
-            return (<PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
+            return (<PhaseContext value={this.state.phase}>
+          <ScrollHandlerContext value={this.onContentScroll}>
             <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>);
+          </ScrollHandlerContext>
+        </PhaseContext>);
         }
     };
 }

package/components/island/content.d.ts

@@ -1,11 +1,13 @@
-import { Component, type HTMLAttributes } from 'react';
+import { Component, type Ref, type HTMLAttributes } from 'react';
 import createResizeDetector from 'element-resize-detector';
 export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
+    ref?: Ref<Content>;
     fade?: boolean | null | undefined;
     onScrollToBottom?: (() => void) | null | undefined;
     scrollableWrapperClassName?: string | null | undefined;
 }
 export interface IslandContentInnerProps extends IslandContentProps {
+    ref?: Ref<Content>;
     onScroll: (node: HTMLElement) => void;
     bottomBorder: boolean;
 }
@@ -29,5 +31,8 @@ declare class Content extends Component<IslandContentInnerProps> {
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
     render(): import("react").JSX.Element;
 }
-declare const ContentWrapper: import("react").ForwardRefExoticComponent<IslandContentProps & import("react").RefAttributes<Content>>;
+declare const ContentWrapper: {
+    ({ ...props }: IslandContentProps): import("react").JSX.Element;
+    displayName: string;
+};
 export default ContentWrapper;

package/components/island/content.js

@@ -1,4 +1,4 @@
-import { forwardRef, Component } from 'react';
+import { Component } from 'react';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
 import scheduleRAF from '../global/schedule-raf';
@@ -57,7 +57,7 @@ class Content extends Component {
         this.calculateScrollPosition();
     };
     render() {
-        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
+        const { ref, children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
         const { scrolledToTop, scrolledToBottom } = this.state;
         const classes = classNames(styles.content, className, {
             [styles.contentWithTopFade]: fade && !scrolledToTop,
@@ -75,11 +75,11 @@ class Content extends Component {
       </div>);
     }
 }
-const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
+const ContentWrapper = ({ ...props }) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
         const addProps = onScroll ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps} ref={ref}/>;
+        return <Content {...props} {...addProps}/>;
     }}
-  </ScrollHandlerContext.Consumer>));
+  </ScrollHandlerContext.Consumer>);
 ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/island/header.js

@@ -56,7 +56,7 @@ class Header extends Component {
             }
             : undefined;
         const titleStyle = this.getTitleStyle(phase);
-        return (<div {...restProps} data-test='ring-island-header' className={classes} style={headerStyle}>
+        return (<div {...restProps} data-ring-island-header='' data-test='ring-island-header' className={classes} style={headerStyle}>
         {wrapWithTitle && (<h2 className={styles.title} style={titleStyle}>
             {children}
           </h2>)}

package/components/legacy-table/cell.js

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Cell extends PureComponent {
     render() {
         const classes = classNames(style.cell, this.props.className);

package/components/legacy-table/header-cell.js

@@ -4,7 +4,7 @@ import sortableIcon from '@jetbrains/icons/unsorted-12px';
 import sortedIcon from '@jetbrains/icons/chevron-12px-down';
 import Icon from '../icon/icon';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class HeaderCell extends PureComponent {
     static defaultProps = {
         onSort: () => { },

package/components/legacy-table/header.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import HeaderCell from './header-cell';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Header extends PureComponent {
     static defaultProps = {
         selectable: true,

package/components/legacy-table/multitable.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent, type ReactElement } from 'react';
 import { type TableAttrs } from './table';
-import { type SelectionItem } from './selection';
+import { type SelectionItem } from '../global/table-selection';
 type TableComponent = ReactElement<TableAttrs<SelectionItem>>;
 export interface MultiTableProps {
     children: TableComponent[];

package/components/legacy-table/row.d.ts

@@ -55,7 +55,7 @@ export default class Row<T extends object> extends PureComponent<RowProps<T>> {
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
-    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => void>;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => () => void>;
     render(): React.JSX.Element;
 }
 export type RowAttrs<T extends object> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/legacy-table/row.js

@@ -11,7 +11,7 @@ import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import { createComposedRef } from '../global/compose-refs';
 import Cell from './cell';
-import style from './table.css';
+import style from './legacy-table.css';
 const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
     const classes = classNames(style.dragHandle, {
         [style.visibleDragHandle]: alwaysShowDragHandle,

package/components/legacy-table/selection-adapter.d.ts

@@ -1,6 +1,6 @@
-import type Selection from './selection';
-import type { SelectionItem } from './selection';
-export default function selectionAdapter(getSelection: () => Selection<SelectionItem>): {
+import type TableSelection from '../global/table-selection';
+import type { SelectionItem } from '../global/table-selection';
+export default function selectionAdapter(getSelection: () => TableSelection<SelectionItem>): {
     readonly size: number;
     readonly items: SelectionItem[];
 };

package/components/legacy-table/selection-shortcuts-hoc.d.ts

@@ -1,16 +1,16 @@
 import { type ComponentClass } from 'react';
 import { type ShortcutsMap } from '../shortcuts/core';
-import type Selection from './selection';
+import type TableSelection from '../global/table-selection';
 export interface SelectionShortcutsOuterProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable?: boolean | undefined;
-    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    onSelect?: ((selection: TableSelection<T>) => void) | undefined;
     shortcuts?: ShortcutsMap | undefined;
 }
 export interface SelectionShortcutsAddProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable: boolean;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     shortcutsMap: ShortcutsMap;
 }
 export type SelectionShortcutsProps<T extends object, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;

package/components/legacy-table/simple-table.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SimpleTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect' | 'selectable'> {
 }
 declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleTableProps<T>> {
@@ -9,7 +9,7 @@ declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleT
         wideFirstColumn: boolean;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     classes: string;
     render(): import("react").JSX.Element;

package/components/legacy-table/simple-table.js

@@ -1,15 +1,15 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Table from './table';
-import Selection from './selection';
-import style from './table.css';
+import TableSelection from '../global/table-selection';
+import style from './legacy-table.css';
 class SimpleTable extends PureComponent {
     static defaultProps = {
         selectable: false,
         wideFirstColumn: false,
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
         }),
     };

package/components/legacy-table/smart-table.d.ts

@@ -1,19 +1,19 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
-    onSelectionChange: (selection: Selection<T>) => void;
-    selection?: Selection<T>;
+    onSelectionChange: (selection: TableSelection<T>) => void;
+    selection?: TableSelection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static defaultProps: {
         onSelectionChange: () => void;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     render(): import("react").JSX.Element;
 }
 export default SmartTable;

package/components/legacy-table/smart-table.js

@@ -1,12 +1,12 @@
 import { PureComponent } from 'react';
 import Table from './table';
-import Selection from './selection';
+import TableSelection from '../global/table-selection';
 class SmartTable extends PureComponent {
     static defaultProps = {
         onSelectionChange: () => { },
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
             isItemSelectable: this.props.isItemSelectable,
         }),
@@ -18,7 +18,7 @@ class SmartTable extends PureComponent {
         }
         else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
             this.setState({
-                selection: new Selection({ data, isItemSelectable }),
+                selection: new TableSelection({ data, isItemSelectable }),
             });
         }
     }

package/components/legacy-table/table.js

@@ -13,7 +13,7 @@ import Header from './header';
 import selectionShortcutsHOC from './selection-shortcuts-hoc';
 import disableHoverHOC from './disable-hover-hoc';
 import Row from './row-with-focus-sensor';
-import style from './table.css';
+import style from './legacy-table.css';
 /**
  * Interactive table with selection and keyboard navigation support.
  */

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/login-dialog/service.js

@@ -7,9 +7,12 @@ const reactRoot = createRoot(containerElement);
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    if (!containerElement.isConnected) {
+        document.body.appendChild(containerElement);
+    }
+    reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
       <LoginDialog {...props}/>
-    </ControlsHeightContext.Provider>);
+    </ControlsHeightContext>);
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {

package/components/panel/panel.css

@@ -13,6 +13,6 @@
   }
 
   & > button:not(:last-child) {
-    margin-right: var(--ring-unit);
+    margin-inline-end: var(--ring-unit);
   }
 }