@jetbrains/ring-ui-built 7.0.0-beta.12 → 7.0.0-beta.13

package/components/badge/badge.js

@@ -1,7 +1,6 @@
 import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import deprecate from 'util-deprecate';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_6c9187df } from '../_helpers/badge.js';
 import { jsx } from 'react/jsx-runtime';
@@ -9,14 +8,8 @@ import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 
 const _excluded = ["gray", "valid", "invalid", "disabled", "className", "children", "data-test"];
-const warn = deprecate(() => {}, 'Badge is deprecated and will be removed in RingUI 7.0. Use Tag instead.');
-/**
- * @name Badge
- */
-// TODO remove in 7.0
 class Badge extends PureComponent {
   render() {
-    warn();
     const _this$props = this.props,
       {
         // Modifiers

package/components/data-list/data-list.mock.js

@@ -9,7 +9,6 @@ import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
-import 'util-deprecate';
 import '../_helpers/badge.js';
 
 const items = [{

package/components/date-picker/date-picker.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, ButtonHTMLAttributes } from 'react';
 import * as React from 'react';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
@@ -28,6 +28,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'>;
 };
 /**
  * @name Date Picker

package/components/date-picker/date-picker.js

@@ -258,13 +258,14 @@ class DatePicker extends PureComponent {
         disabled: (_this$props$disabled = this.props.disabled) !== null && _this$props$disabled !== void 0 ? _this$props$disabled : false,
         pseudo: true,
         children: this.getAnchorText()
-      }) : /*#__PURE__*/jsx(Button, {
+      }) : /*#__PURE__*/jsx(Button, _objectSpread2(_objectSpread2({
         "data-test-ring-dropdown-anchor": true,
         className: modules_0c7b7d96.anchor,
         text: false,
-        disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false,
+        disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false
+      }, this.props.buttonAttributes), {}, {
         children: anchorContent
-      })
+      }))
     }, dropdownProps), {}, {
       children: /*#__PURE__*/jsx(PopupComponent, {
         className: popupClassName,

package/components/dialog/dialog.d.ts

@@ -20,6 +20,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     dense?: boolean | null | undefined;
     native?: boolean;
     modal?: boolean;
+    preventBodyScroll?: boolean;
 }
 export default class Dialog extends PureComponent<DialogProps> {
     static defaultProps: Partial<DialogProps>;

package/components/dialog/dialog.js

@@ -39,7 +39,7 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import 'scrollbar-width';
 
-const _excluded = ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget", "label", "closeButtonTitle", "dense", "shortcutOptions", "native", "modal"];
+const _excluded = ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget", "label", "closeButtonTitle", "dense", "shortcutOptions", "native", "modal", "preventBodyScroll"];
 function noop() {}
 class Dialog extends PureComponent {
   constructor() {
@@ -118,6 +118,9 @@ class Dialog extends PureComponent {
     }
   }
   toggleScrollPreventer() {
+    if (!this.props.preventBodyScroll) {
+      return;
+    }
     if (this.props.show) {
       this.scrollPreventer.prevent();
     } else {
@@ -145,7 +148,8 @@ class Dialog extends PureComponent {
         dense,
         shortcutOptions,
         native,
-        modal
+        modal,
+        preventBodyScroll
       } = _this$props,
       restProps = _objectWithoutProperties(_this$props, _excluded);
     const classes = classNames(modules_5e9b8c03.container, className);
@@ -226,7 +230,8 @@ _defineProperty(Dialog, "defaultProps", {
   },
   trapFocus: false,
   autoFocusFirst: true,
-  modal: true
+  modal: true,
+  preventBodyScroll: true
 });
 
 export { Dialog as default };

package/components/query-assist/query-assist.js

@@ -560,7 +560,7 @@ class QueryAssist extends Component {
     this._pushHistory(this.state);
   }
   shouldComponentUpdate(props, state) {
-    return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass;
+    return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass || props.className !== this.props.className;
   }
   componentDidUpdate(prevProps) {
     const {

package/components/table/header.d.ts

@@ -13,7 +13,6 @@ export interface HeaderProps {
     sortOrder: boolean;
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
-    maxColSpan?: number;
 }
 export default class Header extends PureComponent<HeaderProps> {
     static defaultProps: {
@@ -29,7 +28,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

@@ -56,7 +56,6 @@ class Header extends PureComponent {
         onFocus: this.onCheckboxFocus
       })
     });
-    let colSpan = 0;
     return columns.map((column, index) => {
       const columnStyle = widths[index] ? {
         width: widths[index]
@@ -68,13 +67,8 @@ class Header extends PureComponent {
         sortOrder,
         style: columnStyle
       };
-      colSpan += column.colSpan || 1;
-      if (colSpan > (this.props.maxColSpan || Infinity)) {
-        return null;
-      }
       return /*#__PURE__*/jsx(HeaderCell, _objectSpread2(_objectSpread2({
-        "data-test": column.id,
-        colSpan: column.colSpan
+        "data-test": column.id
       }, props), {}, {
         children: index === 0 && (draggable || selectable) && metaColumn
       }), column.id);

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

@@ -45,7 +45,7 @@ import '../_helpers/theme.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'memoize-one';
 
-const _excluded = ["item", "columns", "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"];
+const _excluded = ["item", "columns", "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"];
 const DragHandle = _ref => {
   let {
     alwaysShowDragHandle,
@@ -125,7 +125,6 @@ class Row extends PureComponent {
         collapsible,
         parentCollapsible,
         collapsed,
-        maxColSpan,
         onCollapse,
         onExpand,
         showDisabledSelection,
@@ -192,7 +191,6 @@ class Row extends PureComponent {
       })]
     });
     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);
@@ -201,10 +199,6 @@ class Row extends PureComponent {
         [modules_1db4bbca.cellRight]: column.rightAlign
       }, column.className);
       const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
-      colSpan += column.colSpan || 1;
-      if (colSpan > (maxColSpan || Infinity)) {
-        return null;
-      }
       return /*#__PURE__*/jsxs(Cell, {
         colSpan: column.colSpan,
         className: cellClasses,

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

@@ -190,21 +190,20 @@ class Table extends PureComponent {
       onItemDoubleClick,
       onItemClick,
       renderEmpty,
-      maxColSpan,
       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,
+      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;
@@ -229,7 +228,7 @@ class Table extends PureComponent {
       } = _ref3;
       const empty = /*#__PURE__*/jsx("tr", {
         children: /*#__PURE__*/jsx("td", {
-          colSpan: this.props.columns.length || 1,
+          colSpan: columnsArray.length || 1,
           className: modules_1db4bbca.tableMessage,
           children: renderEmpty ? renderEmpty() : null
         })
@@ -286,8 +285,7 @@ class Table extends PureComponent {
         alwaysShowDragHandle: alwaysShowDragHandle,
         dragHandleTitle: dragHandleTitle,
         columns: columns,
-        "data-test": getItemDataTest(value),
-        maxColSpan: maxColSpan
+        "data-test": getItemDataTest(value)
       }, restProps), {}, {
         key: (_restProps$key = restProps.key) !== null && _restProps$key !== void 0 ? _restProps$key : getItemKey(value)
       }));

package/components/tooltip/tooltip.js

@@ -127,7 +127,13 @@ class Tooltip extends Component {
   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 => {
+        var _this$popup;
+        if (ev.relatedTarget && (_this$popup = this.popup) !== null && _this$popup !== void 0 && (_this$popup = _this$popup.container) !== null && _this$popup !== void 0 && _this$popup.contains(ev.relatedTarget)) {
+          return;
+        }
+        this.hidePopup();
+      });
     }
     this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), {
       passive: true
@@ -177,6 +183,7 @@ class Tooltip extends Component {
               [modules_cd5e45a9.long]: long
             }),
             attached: false,
+            onMouseOut: this.hidePopup,
             top: 4,
             dontCloseOnAnchorClick: true,
             ref: this.popupRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.0-beta.12",
+  "version": "7.0.0-beta.13",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
-    "lint:js": "eslint",
+    "lint:js": "ESLINT_USE_FLAT_CONFIG=false eslint",
     "lint": "npm run lint:js . && npm run stylelint",
     "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
-    "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
+    "lint-ci": "ESLINT_USE_FLAT_CONFIG=false eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
     "stylelint-ci": "stylelint --ignore-path .eslintignore --custom-formatter './jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
     "stylelint": "stylelint --ignore-path .eslintignore '**/*.css'",
     "validate-tc-config": "mvn --file .teamcity/pom.xml org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate -e",