@jetbrains/ring-ui 6.0.60 → 6.0.62

package/components/table/header.d.ts

@@ -14,7 +14,6 @@ export interface HeaderProps {
     sortOrder: boolean;
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
-    maxColSpan?: number;
 }
 declare module 'react-waypoint' {
     namespace Waypoint {
@@ -51,7 +50,7 @@ export default class Header extends PureComponent<HeaderProps> {
     };
     id: string;
     onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    createCells(widths?: never[]): (import("react").JSX.Element | null)[];
+    createCells(widths?: never[]): import("react").JSX.Element[];
     render(): import("react").JSX.Element;
 }
 export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;

package/components/table/header.js

@@ -42,15 +42,10 @@ export default class Header extends PureComponent {
         {selectable &&
                 (<Checkbox aria-labelledby={this.id} disabled={checkboxDisabled} checked={checked} onChange={onCheckboxChange} onFocus={this.onCheckboxFocus}/>)}
       </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}>
+            return (<HeaderCell key={column.id} data-test={column.id} {...props}>
           {index === 0 && (draggable || selectable) && metaColumn}
         </HeaderCell>);
         });

package/components/table/row.d.ts

@@ -6,7 +6,6 @@ import { SelectionItem } from './selection';
 export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
     item: T;
     columns: readonly Column<T>[] | ((item: T) => readonly Column<T>[]);
-    maxColSpan?: number;
     selectable: boolean;
     showFocus: boolean;
     draggable: boolean;

package/components/table/row.js

@@ -75,7 +75,7 @@ export default class Row extends PureComponent {
     };
     composedRowRef = createComposedRef();
     render() {
-        const { item, columns: columnProps, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, maxColSpan, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps } = this.props;
+        const { item, columns: columnProps, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(className, {
             [style.row]: true,
             [style.rowFocused]: showFocus,
@@ -112,17 +112,12 @@ export default class Row extends PureComponent {
                 (<Button className={style.rowCollapseExpandButton} icon={chevronDownIcon} onClick={() => onCollapse(item)}/>)}
       </div>);
         const columns = typeof columnProps === 'function' ? columnProps(item) : columnProps;
-        let colSpan = 0;
         const cells = columns.map((column, index) => {
             const getValue = column.getValue || (() => item[column.id]);
             const getDataTest = column.getDataTest || (() => column.id);
             const value = getValue(item, column);
             const cellClasses = classNames({ [style.cellRight]: column.rightAlign }, column.className);
             const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
-            colSpan += column.colSpan || 1;
-            if (colSpan > (maxColSpan || Infinity)) {
-                return null;
-            }
             return (<Cell colSpan={column.colSpan} key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
           {index === 0 && (showMetaColumn) && metaColumn}
           {value}

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

@@ -22,7 +22,6 @@ declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleT
         onSort?: import("react").Validator<((params: import("./header-cell").SortParams) => void) | null | undefined> | undefined;
         sortKey?: import("react").Validator<string | null | undefined> | undefined;
         sortOrder?: import("react").Validator<boolean | null | undefined> | undefined;
-        maxColSpan?: import("react").Validator<number | null | undefined> | undefined;
         alwaysShowDragHandle?: import("react").Validator<boolean | null | undefined> | undefined;
         dragHandleTitle?: import("react").Validator<string | null | undefined> | undefined;
         onReorder?: import("react").Validator<((params: import("./table").ReorderParams<SelectionItem>) => void) | null | undefined> | undefined;

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

@@ -26,7 +26,6 @@ declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTab
         onSort?: import("react").Validator<((params: import("./header-cell").SortParams) => void) | null | undefined> | undefined;
         sortKey?: import("react").Validator<string | null | undefined> | undefined;
         sortOrder?: import("react").Validator<boolean | null | undefined> | undefined;
-        maxColSpan?: import("react").Validator<number | null | undefined> | undefined;
         alwaysShowDragHandle?: import("react").Validator<boolean | null | undefined> | undefined;
         dragHandleTitle?: import("react").Validator<string | null | undefined> | undefined;
         onReorder?: import("react").Validator<((params: import("./table").ReorderParams<SelectionItem>) => void) | null | undefined> | undefined;

package/components/table/table.d.ts

@@ -18,7 +18,6 @@ export interface ReorderParams<T> {
 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;

package/components/table/table.js

@@ -111,13 +111,14 @@ export class Table extends PureComponent {
         window.scrollTo(scrollX, scrollY);
     };
     render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty, maxColSpan, RowComponent } = this.props;
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, 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 = {
             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;
         const allSelectedSize = selection.selectAll().getSelected().size;
@@ -137,7 +138,7 @@ export class Table extends PureComponent {
         });
         const renderList = ({ children, props }) => {
             const empty = (<tr>
-          <td colSpan={this.props.columns.length || 1} className={style.tableMessage}>
+          <td colSpan={columnsArray.length || 1} className={style.tableMessage}>
             {renderEmpty ? renderEmpty() : null}
           </td>
         </tr>);
@@ -156,7 +157,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} maxColSpan={maxColSpan} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
+            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
             return isDragged
                 ? (<table style={{ ...props.style }} className={style.draggingTable}>
             <tbody>{row}</tbody>

package/components/tooltip/tooltip.js

@@ -97,7 +97,12 @@ export default class Tooltip extends Component {
     addListeners() {
         if (this.containerNode != null) {
             this.listeners.add(this.containerNode, 'mouseover', this.tryToShowPopup);
-            this.listeners.add(this.containerNode, 'mouseout', this.hidePopup);
+            this.listeners.add(this.containerNode, 'mouseout', ev => {
+                if (ev.relatedTarget && this.popup?.container?.contains(ev.relatedTarget)) {
+                    return;
+                }
+                this.hidePopup();
+            });
         }
         this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), { passive: true });
     }
@@ -120,7 +125,7 @@ export default class Tooltip extends Component {
         return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
         <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
           {children}
-          <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
+          <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} onMouseOut={this.hidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
         </span>
       </TooltipContext.Provider>);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.60",
+  "version": "6.0.62",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",