Merge 6.x into Master

.storybook/preview.ts

@@ -4,7 +4,7 @@ import 'file-loader?name=ring-ui-favicon.ico!@jetbrains/logos/ring-ui/favicon.ic
 import {Component} from '@storybook/addon-docs';
 import {Parameters} from '@storybook/react';
 
-import Theme, {applyTheme} from '../src/global/theme';
+import Theme, {applyTheme, GLOBAL_DARK_CLASS_NAME} from '../src/global/theme';
 
 import styles from './preview.css';
 import strictModeDecorator from './strict-mode-decorator';
@@ -41,7 +41,14 @@ export const parameters = {
     }
   },
   actions: {argTypesRegex: '^on.*'},
-  backgrounds: {disable: true}
+  backgrounds: {disable: true},
+  themes: {
+    default: 'Light',
+    list: [
+      {name: 'Light', color: '#FFF'},
+      {name: 'Dark', class: GLOBAL_DARK_CLASS_NAME, color: '#23272b'}
+    ]
+  }
 };
 
 export const decorators = [

src/badge/badge.tsx

@@ -1,6 +1,5 @@
 import {PureComponent, HTMLAttributes} from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 
 import dataTests from '../global/data-tests';
 
@@ -14,15 +13,12 @@ export interface BadgeProps extends HTMLAttributes<HTMLElement> {
   'data-test'?: string | null | undefined
 }
 
-const warn = deprecate(() => {}, 'Badge is deprecated and will be removed in RingUI 7.0. Use Tag instead.');
-
 /**
  * @name Badge
  */
 // TODO remove in 7.0
 export default class Badge extends PureComponent<BadgeProps> {
   render() {
-    warn();
     const {
       // Modifiers
       gray,

src/date-picker/date-picker.tsx

@@ -1,4 +1,4 @@
-import {PureComponent, Ref} from 'react';
+import {PureComponent, Ref, ButtonHTMLAttributes} from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import type {Locale} from 'date-fns';
@@ -91,6 +91,7 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
   disabled?: boolean | null | undefined
   parseDateInput: (input: string | null | undefined) => Date | null
   size?: Size
+  buttonAttributes?: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'>
 }
 
 /**
@@ -286,6 +287,7 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
                 className={styles.anchor}
                 text={false}
                 disabled={this.props.disabled ?? false}
+                {...this.props.buttonAttributes}
               >
                 {anchorContent}
               </Button>

src/dialog/dialog.tsx

@@ -38,6 +38,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
   dense?: boolean | null | undefined
   native?: boolean
   modal?: boolean
+  preventBodyScroll?: boolean
 }
 
 /**
@@ -58,7 +59,8 @@ export default class Dialog extends PureComponent<DialogProps> {
     shortcutOptions: {modal: false},
     trapFocus: false,
     autoFocusFirst: true,
-    modal: true
+    modal: true,
+    preventBodyScroll: true
   };
 
   state = {
@@ -108,6 +110,9 @@ export default class Dialog extends PureComponent<DialogProps> {
   }
 
   toggleScrollPreventer() {
+    if (!this.props.preventBodyScroll) {
+      return;
+    }
     if (this.props.show) {
       this.scrollPreventer.prevent();
     } else {
@@ -149,7 +154,7 @@ export default class Dialog extends PureComponent<DialogProps> {
     const {show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick,
       children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside,
       portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal,
-      ...restProps} = this.props;
+      preventBodyScroll, ...restProps} = this.props;
     const classes = classNames(styles.container, className);
     const shortcutsMap = this.getShortcutsMap();
     const content = (

src/query-assist/query-assist.tsx

@@ -316,7 +316,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
       props.focus !== this.props.focus ||
       props.actions !== this.props.actions ||
       props.loader !== this.props.loader ||
-      props.glass !== this.props.glass;
+      props.glass !== this.props.glass ||
+      props.className !== this.props.className;
   }
 
   componentDidUpdate(prevProps: QueryAssistProps) {

src/table/header.tsx

@@ -21,7 +21,6 @@ export interface HeaderProps {
   sortOrder: boolean
   caption?: string | null | undefined
   checkboxDisabled?: boolean | undefined
-  maxColSpan?: number
 }
 
 export default class Header extends PureComponent<HeaderProps> {
@@ -68,20 +67,14 @@ export default class Header extends PureComponent<HeaderProps> {
       </div>
     );
 
-    let colSpan = 0;
     return columns.map((column, index) => {
       const columnStyle = widths[index] ? {width: widths[index]} : undefined;
       const props = {column, onSort, sortKey, sortOrder, style: columnStyle};
-      colSpan += column.colSpan || 1;
-      if (colSpan > (this.props.maxColSpan || Infinity)) {
-        return null;
-      }
 
       return (
         <HeaderCell
           key={column.id}
           data-test={column.id}
-          colSpan={column.colSpan}
           {...props}
         >
           {index === 0 && (draggable || selectable) && metaColumn}

src/table/row.tsx

@@ -48,7 +48,6 @@ export interface RowProps<T extends SelectionItem> extends Omit<
 >, FocusSensorAddProps<HTMLTableRowElement> {
   item: T
   columns: readonly Column<T>[] | ((item: T) => readonly Column<T>[])
-  maxColSpan?: number
   selectable: boolean
   showFocus: boolean
   draggable: boolean
@@ -138,7 +137,7 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     const {
       item, columns: columnProps, selectable, selected,
       showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level,
-      collapsible, parentCollapsible, collapsed, maxColSpan,
+      collapsible, parentCollapsible, collapsed,
       onCollapse, onExpand, showDisabledSelection, onSelect,
       checkboxTooltip, innerRef, focused, autofocus, onFocusReset,
       onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps
@@ -223,7 +222,7 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     );
 
     const columns = typeof columnProps === 'function' ? columnProps(item) : columnProps;
-    let colSpan = 0;
+
     const cells = columns.map((column, index) => {
       const getValue = column.getValue || (() => item[column.id] as ReactNode);
       const getDataTest = column.getDataTest || (() => column.id);
@@ -232,10 +231,6 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
       const showMetaColumn =
         draggable || selectable || collapsible || showDisabledSelection || !!level;
 
-      colSpan += column.colSpan || 1;
-      if (colSpan > (maxColSpan || Infinity)) {
-        return null;
-      }
       return (
         <Cell
           colSpan={column.colSpan}

src/table/table.stories.tsx

@@ -302,8 +302,7 @@ EmptyTable.args = {
     }
   ],
   renderEmpty: () => 'Empty table',
-  selectable: false,
-  maxColSpan: 3
+  selectable: false
 };
 EmptyTable.storyName = 'empty table';
 

src/table/table.tsx

@@ -36,7 +36,6 @@ export interface TableProps<T extends SelectionItem> extends
   FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
   data: readonly T[]
   columns: readonly Column<T>[] | ((item:T|null)=>readonly Column<T>[])
-  maxColSpan?:number;
   isItemSelectable: (item: T) => boolean
   loading: boolean
   onSort: (params: SortParams) => void
@@ -184,17 +183,19 @@ export class Table<T extends SelectionItem> extends PureComponent<TableProps<T>>
       loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader,
       stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed,
       onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip,
-      onItemDoubleClick, onItemClick, renderEmpty, maxColSpan, RowComponent
+      onItemDoubleClick, onItemClick, renderEmpty, RowComponent
     } = this.props;
 
 
     // NOTE: Do not construct new object per render because it causes all rows rerendering
 
+    const columnsArray = typeof columns === 'function' ? columns(null) : columns;
+
     const headerProps: HeaderAttrs = {
       caption, selectable, draggable,
-      columns: typeof columns === 'function' ? columns(null) : columns, onSort, sortKey, sortOrder,
+      columns: columnsArray, onSort, sortKey, sortOrder,
       sticky: stickyHeader,
-      topStickOffset: stickyHeaderOffset, maxColSpan: this.props.maxColSpan
+      topStickOffset: stickyHeaderOffset
     };
 
     const selectedSize = selection.getSelected().size;
@@ -220,7 +221,7 @@ export class Table<T extends SelectionItem> extends PureComponent<TableProps<T>>
       const empty = (
         <tr>
           <td
-            colSpan={this.props.columns.length || 1}
+            colSpan={columnsArray.length || 1}
             className={style.tableMessage}
           >
             {renderEmpty ? renderEmpty() : null}
@@ -273,7 +274,6 @@ export class Table<T extends SelectionItem> extends PureComponent<TableProps<T>>
           dragHandleTitle={dragHandleTitle}
           columns={columns}
           data-test={getItemDataTest(value)}
-          maxColSpan={maxColSpan}
           {...restProps}
           key={restProps.key ?? getItemKey(value)}
         />

src/tooltip/tooltip.tsx

@@ -127,7 +127,13 @@ export default class Tooltip extends Component<TooltipProps> {
   addListeners() {
     if (this.containerNode != null) {
       this.listeners.add(this.containerNode, 'mouseenter', this.tryToShowPopup);
-      this.listeners.add(this.containerNode, 'mouseleave', this.hidePopup);
+      this.listeners.add(this.containerNode, 'mouseleave', ev => {
+        if (ev.relatedTarget && this.popup?.container?.contains(ev.relatedTarget as Node)) {
+          return;
+        }
+
+        this.hidePopup();
+      });
     }
     this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), {passive: true});
   }
@@ -178,6 +184,7 @@ export default class Tooltip extends Component<TooltipProps> {
               maxHeight={400}
               className={classNames(styles.tooltip, {[styles.long]: long})}
               attached={false}
+              onMouseOut={this.hidePopup}
               top={4}
               dontCloseOnAnchorClick
               ref={this.popupRef}