@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/select/select__popup.js

@@ -55,14 +55,14 @@ export default class SelectPopup extends PureComponent {
         tags: null,
         ringPopupTarget: null,
         onSelectAll: noop,
-        onEmptyPopupEnter: noop
+        onEmptyPopupEnter: noop,
     };
     state = {
         popupFilterShortcutsOptions: {
             modal: true,
-            disabled: true
+            disabled: true,
         },
-        tagsActiveIndex: null
+        tagsActiveIndex: null,
     };
     componentDidMount() {
         window.document.addEventListener('mouseup', this.mouseUpHandler);
@@ -80,16 +80,13 @@ export default class SelectPopup extends PureComponent {
     }
     caret;
     handleNavigation(event, navigateLeft) {
-        if (this.isEventTargetFilter(event) && this.caret != null &&
-            Number(this.caret.getPosition()) > 0 ||
+        if ((this.isEventTargetFilter(event) && this.caret != null && Number(this.caret.getPosition()) > 0) ||
             !Array.isArray(this.props.selected)) {
             return;
         }
         let newIndex = null;
         if (navigateLeft) {
-            newIndex = this.state.tagsActiveIndex === null
-                ? this.props.selected.length - 1
-                : this.state.tagsActiveIndex - 1;
+            newIndex = this.state.tagsActiveIndex === null ? this.props.selected.length - 1 : this.state.tagsActiveIndex - 1;
         }
         else if (this.state.tagsActiveIndex !== null) {
             newIndex = this.state.tagsActiveIndex + 1;
@@ -99,7 +96,7 @@ export default class SelectPopup extends PureComponent {
             this.focusFilter();
         }
         this.setState({
-            tagsActiveIndex: newIndex
+            tagsActiveIndex: newIndex,
         });
     }
     removeTag(tag, event) {
@@ -110,7 +107,7 @@ export default class SelectPopup extends PureComponent {
         if (_tag) {
             this.onListSelect(_tag, event, { tryKeepOpen: true });
             this.setState({
-                tagsActiveIndex: null
+                tagsActiveIndex: null,
             });
             this.focusFilter();
         }
@@ -150,8 +147,8 @@ export default class SelectPopup extends PureComponent {
         this.setState({
             popupFilterShortcutsOptions: {
                 modal: true,
-                disabled: shortcutsDisabled
-            }
+                disabled: shortcutsDisabled,
+            },
         });
     }
     mouseDownHandler = () => {
@@ -184,9 +181,7 @@ export default class SelectPopup extends PureComponent {
         if (this.props.filter || this.props.tags) {
             return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
           {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
-          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
-                    ? this.props.filter.placeholder
-                    : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
+          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
         </div>);
         }
         return null;
@@ -195,7 +190,7 @@ export default class SelectPopup extends PureComponent {
     handleTagClick = memoize((tag) => () => {
         if (Array.isArray(this.props.selected)) {
             this.setState({
-                tagsActiveIndex: this.props.selected.indexOf(tag)
+                tagsActiveIndex: this.props.selected.indexOf(tag),
             });
         }
     });
@@ -206,17 +201,17 @@ export default class SelectPopup extends PureComponent {
         return undefined;
     }
     getTags() {
-        return Array.isArray(this.props.selected) && (<div>
-        <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled} customTagComponent={this.getCustomTag(this.props.tags)}/>
-      </div>);
+        return (Array.isArray(this.props.selected) && (<div>
+          <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled} customTagComponent={this.getCustomTag(this.props.tags)}/>
+        </div>));
     }
     getFilterWithTags() {
         if (this.props.tags) {
             const classes = classNames([
                 styles.filterWithTags,
                 {
-                    [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
-                }
+                    [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled,
+                },
             ]);
             return (<div className={classes}>
           {this.getTags()}
@@ -228,13 +223,13 @@ export default class SelectPopup extends PureComponent {
     getBottomLine() {
         const { loading, message, data } = this.props;
         const hasMoreThanOneItem = data.length > 1;
-        return (loading || message) && (<div className={classNames(styles.bottomLine, {
-                [styles.bottomLineOverItem]: hasMoreThanOneItem
+        return ((loading || message) && (<div className={classNames(styles.bottomLine, {
+                [styles.bottomLineOverItem]: hasMoreThanOneItem,
             })}>
-        {loading && <LoaderInline />}
+          {loading && <LoaderInline />}
 
-        {message && (<div className={styles.message}>{message}</div>)}
-      </div>);
+          {message && <div className={styles.message}>{message}</div>}
+        </div>));
     }
     handleListResize = () => {
         this.forceUpdate();
@@ -263,16 +258,14 @@ export default class SelectPopup extends PureComponent {
     getSelectAll = () => {
         const multiple = this.props.multiple;
         const activeFilters = this.props.data.filter(item => !item.disabled);
-        return Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
-        {activeFilters.length === 0
-                ? (<span />)
-                : (<Button text inline onClick={this.handleSelectAll}>
-                {activeFilters.length !== this.props.selected.length
-                        ? multiple.selectAllLabel || 'Select all'
-                        : multiple.deselectAllLabel || 'Deselect all'}
-              </Button>)}
-        {multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (<Text info>{`${this.props.selected.length} selected`}</Text>)}
-      </div>);
+        return (Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
+          {activeFilters.length === 0 ? (<span />) : (<Button text inline onClick={this.handleSelectAll}>
+              {activeFilters.length !== this.props.selected.length
+                    ? multiple.selectAllLabel || 'Select all'
+                    : multiple.deselectAllLabel || 'Deselect all'}
+            </Button>)}
+          {multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (<Text info>{`${this.props.selected.length} selected`}</Text>)}
+        </div>));
     };
     // Cache the value because this method is called
     // inside `render` function which can be called N times
@@ -293,7 +286,7 @@ export default class SelectPopup extends PureComponent {
         const anchorNode = this.props.anchorElement;
         const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
         return anchorNode != null
-            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0)), minMaxHeight), userDefinedMaxHeight)
+            ? Math.min(directions.reduce((maxHeight, direction) => Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0), minMaxHeight), userDefinedMaxHeight)
             : userDefinedMaxHeight;
     });
     popupRef = (el) => {
@@ -310,38 +303,34 @@ export default class SelectPopup extends PureComponent {
     composedFilterRef = createComposedRef();
     shortcutsScope = getUID('select-popup-');
     shortcutsMap = {
-        tab: this.tabPress
+        tab: this.tabPress,
     };
     popupFilterShortcutsMap = {
-        up: event => (this.list && this.list.upHandler(event)),
-        down: event => (this.list && this.list.downHandler(event)),
-        home: event => (this.list && this.list.homeHandler(event)),
-        end: event => (this.list && this.list.endHandler(event)),
-        enter: event => (this.list
-            ? this.list.enterHandler(event)
-            : this.props.onEmptyPopupEnter(event)),
+        up: event => this.list && this.list.upHandler(event),
+        down: event => this.list && this.list.downHandler(event),
+        home: event => this.list && this.list.homeHandler(event),
+        end: event => this.list && this.list.endHandler(event),
+        enter: event => (this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event)),
         esc: event => this.props.onCloseAttempt(event, true),
         tab: event => this.tabPress(event),
         backspace: event => this.handleBackspace(event),
         del: () => this.removeSelectedTag(),
         left: event => this.handleNavigation(event, true),
-        right: event => this.handleNavigation(event)
+        right: event => this.handleNavigation(event),
     };
     render() {
-        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter } = this.props;
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
         const classes = classNames(styles.popup, className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
-                const selectAll = multiple && typeof multiple === 'object' && !multiple.limit &&
-                    multiple.selectAll && this.getSelectAll();
+                const selectAll = multiple && typeof multiple === 'object' && !multiple.limit && multiple.selectAll && this.getSelectAll();
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
                 return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
               <div dir={dir}>
-                {!hidden && filter &&
-                        (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+                {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}
                 {/* Add empty div to prevent the change of List position in DOM*/}
                 {hidden ? <div /> : filterWithTags}

package/components/shortcuts/core.js

@@ -4,7 +4,7 @@ class Shortcuts {
     ALLOW_SHORTCUTS_SELECTOR = '.ring-js-shortcuts';
     ROOT_SCOPE = {
         scopeId: 'ROOT',
-        options: {}
+        options: {},
     };
     _scopes = {};
     _scopeChain = [];
@@ -72,7 +72,7 @@ class Shortcuts {
      */
     bindMap(map, options) {
         if (!(map instanceof Object)) {
-            throw new Error('Shortcuts map shouldn\'t be empty');
+            throw new Error("Shortcuts map shouldn't be empty");
         }
         for (const key in map) {
             if (map.hasOwnProperty(key)) {
@@ -148,7 +148,7 @@ class Shortcuts {
         return { scopeId, options };
     }
     hasKey(key, scope) {
-        return !!(this._scopes[scope]?.[key]);
+        return !!this._scopes[scope]?.[key];
     }
     _defaultFilter = (e, element, key) => {
         // if the element or its parents have the class "ring-js-shortcuts" then no need to stop
@@ -157,8 +157,7 @@ class Shortcuts {
             key == null ||
             element.matches(this.ALLOW_SHORTCUTS_SELECTOR) ||
             element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null ||
-            (element.dataset.enabledShortcuts != null &&
-                element.dataset.enabledShortcuts.split(',').includes(key))) {
+            (element.dataset.enabledShortcuts != null && element.dataset.enabledShortcuts.split(',').includes(key))) {
             return false;
         }
         const elementContentEditableAttribute = element.contentEditable;
@@ -168,7 +167,10 @@ class Shortcuts {
     };
     _getKeyboardEventType(params) {
         if (!params.type && sniffr.os.name === 'windows') {
-            const isSystemShortcut = typeof params.key === 'string' && params.key.match(/ctrl/i) && params.key.match(/shift/i) && params.key.match(/[0-9]/);
+            const isSystemShortcut = typeof params.key === 'string' &&
+                params.key.match(/ctrl/i) &&
+                params.key.match(/shift/i) &&
+                params.key.match(/[0-9]/);
             /**
              * Windows system shortcuts (ctrl+shift+[0-9] are caught by the OS on 'keydown', so let's use 'keyup'
              */

package/components/shortcuts/shortcut-title.js

@@ -17,7 +17,7 @@ const macSymbolsMap = {
     left: '←',
     up: '↑',
     right: '→',
-    down: '↓'
+    down: '↓',
 };
 const winSymbolsMap = {
     enter: 'Enter',
@@ -37,14 +37,14 @@ const winSymbolsMap = {
     left: '←',
     up: '↑',
     right: '→',
-    down: '↓'
+    down: '↓',
 };
 export function getShortcutTitle(shortcut) {
     const MAC_OS = sniffer.os.name === 'macos';
     const KEY_SEPARATOR = MAC_OS ? '' : '+';
     const symbolsMap = MAC_OS ? macSymbolsMap : winSymbolsMap;
-    return shortcut.
-        split(/\+/g).
-        map(symbol => symbolsMap[symbol] || symbol.toUpperCase()).
-        join(KEY_SEPARATOR);
+    return shortcut
+        .split(/\+/g)
+        .map(symbol => symbolsMap[symbol] || symbol.toUpperCase())
+        .join(KEY_SEPARATOR);
 }

package/components/shortcuts/shortcuts.js

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import shortcuts from './core';
 export default class Shortcuts extends PureComponent {
     static defaultProps = {
-        options: {}
+        options: {},
     };
     componentDidMount() {
         if (!this.props.disabled) {

package/components/sidebar/sidebar.css

@@ -28,7 +28,9 @@
 
   padding-top: calc(2 * var(--ring-unit));
 
-  transition: right 0.5s ease, visibility 0.5s;
+  transition:
+    right 0.5s ease,
+    visibility 0.5s;
 
   border: solid 1px var(--ring-line-color);
   border-right-width: 0;

package/components/slider/slider.css

@@ -1,5 +1,3 @@
-@value dark from "../global/variables_dark.css";
-
 .slider {
   --ring-slider-thumb-color: var(--ring-content-background-color);
   --ring-slider-thumb-border: var(--ring-main-color);
@@ -22,7 +20,7 @@
   }
 }
 
-.dark, :global(.ring-ui-theme-dark) {
+:global(.ring-ui-theme-dark) {
   .slider {
     --ring-slider-thumb-color: var(--ring-main-color);
     --ring-slider-thumb-border: var(--ring-white-text-color);
@@ -53,7 +51,7 @@
   left: 0;
 
   height: inherit;
-  margin-top:calc(var(--ring-unit) / -2);
+  margin-top: calc(var(--ring-unit) / -2);
 
   border-radius: calc(var(--ring-unit) / 2);
 
@@ -85,7 +83,9 @@
 
   border-radius: var(--ring-unit);
   background-color: var(--ring-slider-thumb-color);
-  box-shadow: 0 1px 2px 0 var(--ring-popup-secondary-shadow-color), 0 2px 8px 0 var(--ring-popup-shadow-components);
+  box-shadow:
+    0 1px 2px 0 var(--ring-popup-secondary-shadow-color),
+    0 2px 8px 0 var(--ring-popup-shadow-components);
 
   &.disabled {
     cursor: default;
@@ -124,7 +124,7 @@
 .markValue {
   position: absolute;
 
-  margin-top:  calc(var(--ring-unit) * -4);
+  margin-top: calc(var(--ring-unit) * -4);
   margin-left: calc(var(--ring-unit) / -4);
 
   transform: translateX(calc(-50% + 2px));
@@ -157,17 +157,17 @@
   line-height: var(--ring-line-height-lowest);
 
   &::after {
-      position: absolute;
-      top: 100%;
-      left: calc(50% - 3px);
+    position: absolute;
+    top: 100%;
+    left: calc(50% - 3px);
 
-      content: ' ';
+    content: " ";
 
-      border-top: 3px solid var(--ring-main-color);
+    border-top: 3px solid var(--ring-main-color);
 
-      border-right: 3px solid transparent;
-      border-left: 3px solid transparent;
-    }
+    border-right: 3px solid transparent;
+    border-left: 3px solid transparent;
+  }
 
   &.disabled {
     color: var(--ring-slider-tag-disabled-text-color);

package/components/slider/slider.js

@@ -6,7 +6,7 @@ import Shortcuts from '../shortcuts/shortcuts';
 import getUID from '../global/get-uid';
 import styles from './slider.css';
 import { adjustValues, calculateMarks, calculateValue, HUNDRED, toPercent, toRange, validateValue } from './slider.utils';
-export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange }) => {
+export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange, }) => {
     const ref = useRef(null);
     const previouslyDragged = useRef(false);
     const [values, setValues] = useState(defaultValue ?? min);
@@ -126,19 +126,19 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
     return (<div ref={ref} role="presentation" // contains interactive elements
      className={classNames(styles.slider, className, {
             [styles.disabled]: disabled,
-            [styles.marked]: !!marks || showTag
+            [styles.marked]: !!marks || showTag,
         })} tabIndex={-1} onMouseDown={handleMouseDown}>
       <Shortcuts map={shortcutsMap} scope={shortcutsScope}/>
       <div className={classNames(styles.rail, {
             [styles.rounded]: !showTicks,
-            [styles.disabled]: disabled
+            [styles.disabled]: disabled,
         })}/>
       <div style={{
             left: `${trackStart}%`,
-            width: `${trackLength}%`
+            width: `${trackLength}%`,
         }} className={classNames(styles.track, {
             [styles.rounded]: !showTicks,
-            [styles.disabled]: disabled
+            [styles.disabled]: disabled,
         })}/>
       {validValues.map((numValue, index) => {
             const percent = toPercent(numValue, min, max);
@@ -147,7 +147,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             <Fragment key={index}>
             <div tabIndex={0} aria-label="Pick value" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
                     [styles.disabled]: disabled,
-                    [styles.dragged]: isDragging && draggedIndex === index
+                    [styles.dragged]: isDragging && draggedIndex === index,
                 })} onMouseDown={handleMouseDown}/>
             {showTag && (<div style={{ left: `${percent}%` }} className={classNames(styles.tag, { [styles.disabled]: disabled })} role="tooltip">
                 {renderTag ? renderTag(numValue) : numValue}
@@ -171,7 +171,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             // eslint-disable-next-line react/no-array-index-key
             key={index} className={classNames(styles.tick, {
                     [styles.active]: isActive,
-                    [styles.disabled]: disabled
+                    [styles.disabled]: disabled,
                 })} style={{ left: `${percent}%` }}/>);
         })}
     </div>);

package/components/tab-trap/tab-trap.js

@@ -31,14 +31,11 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
             focusFirst();
         }
         else if (!trapDisabled) {
-            const previousFocusedElementIsInContainer = previousFocusedNodeRef.current &&
-                nodeRef.current?.contains(previousFocusedNodeRef.current);
+            const previousFocusedElementIsInContainer = previousFocusedNodeRef.current && nodeRef.current?.contains(previousFocusedNodeRef.current);
             // The component wrapped in TabTrap can already have a focused element (e.g. Date Picker),
             // so we need to check if it does. If so, we don't need to focus anything.
-            const currentlyFocusedElementIsInContainer = nodeRef.current?.
-                contains(document.activeElement);
-            if (!nodeRef.current ||
-                (!previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer)) {
+            const currentlyFocusedElementIsInContainer = nodeRef.current?.contains(document.activeElement);
+            if (!nodeRef.current || (!previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer)) {
                 trapWithoutFocusRef.current = true;
                 trapButtonNodeRef.current?.focus();
             }
@@ -66,8 +63,7 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         if (!node) {
             return;
         }
-        const tabables = [...node.querySelectorAll(FOCUSABLE_ELEMENTS)].
-            filter(item => item.tabIndex >= 0);
+        const tabables = [...node.querySelectorAll(FOCUSABLE_ELEMENTS)].filter(item => item.tabIndex >= 0);
         const toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
         if (toBeFocused) {
             toBeFocused.focus();
@@ -79,7 +75,9 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         }
         if (focusBackOnExit) {
             const prevFocused = event.nativeEvent.relatedTarget;
-            if (prevFocused != null && nodeRef.current != null && prevFocused instanceof Element &&
+            if (prevFocused != null &&
+                nodeRef.current != null &&
+                prevFocused instanceof Element &&
                 nodeRef.current.contains(prevFocused)) {
                 restoreFocus();
             }

package/components/table/cell.js

@@ -5,6 +5,8 @@ import style from './table.css';
 export default class Cell extends PureComponent {
     render() {
         const classes = classNames(style.cell, this.props.className);
-        return (<td {...this.props} className={classes} data-test={dataTests('ring-table-cell', this.props['data-test'])}>{this.props.children}</td>);
+        return (<td {...this.props} className={classes} data-test={dataTests('ring-table-cell', this.props['data-test'])}>
+        {this.props.children}
+      </td>);
     }
 }

package/components/table/disable-hover-hoc.js

@@ -3,7 +3,7 @@ export default function disableHoverHOC(ComposedComponent) {
     return class DisableHover extends PureComponent {
         static defaultProps = ComposedComponent.defaultProps;
         state = {
-            disabledHover: false
+            disabledHover: false,
         };
         componentDidMount() {
             document.addEventListener('mousemove', this.onMouseMove);
@@ -25,7 +25,7 @@ export default function disableHoverHOC(ComposedComponent) {
             }
         };
         render() {
-            return (<ComposedComponent {...this.props} disabledHover={this.state.disabledHover}/>);
+            return <ComposedComponent {...this.props} disabledHover={this.state.disabledHover}/>;
         }
     };
 }

package/components/table/header-cell.js

@@ -7,7 +7,7 @@ import dataTests from '../global/data-tests';
 import style from './table.css';
 export default class HeaderCell extends PureComponent {
     static defaultProps = {
-        onSort: () => { }
+        onSort: () => { },
     };
     sortable;
     sorted;
@@ -30,11 +30,13 @@ export default class HeaderCell extends PureComponent {
             [style.headerCellSortable]: this.sortable,
             [style.headerCellSorted]: this.sorted,
             [style.sortedUp]: sortOrder && this.sorted,
-            [style.cellRight]: column.rightAlign
+            [style.cellRight]: column.rightAlign,
         });
         return (<th {...restProps} className={classes} onClick={this.onClick} data-test={dataTests('ring-table-header-cell', dataTest)}>
         {/* onClick only used to stop propagation */}
-        <span onClick={this.onChildrenClick} role="presentation">{this.props.children}</span>
+        <span onClick={this.onChildrenClick} role="presentation">
+          {this.props.children}
+        </span>
 
         {column.getHeaderValue ? column.getHeaderValue() : column.title}
 

package/components/table/header.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
 import { Column, SortParams } from './header-cell';
 export interface HeaderProps {
     columns: readonly Column[];
@@ -13,14 +13,6 @@ export interface HeaderProps {
     sortOrder: boolean;
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
-    maxColSpan?: number;
-}
-declare module 'react-waypoint' {
-    namespace Waypoint {
-        interface WaypointProps {
-            children?: ReactNode;
-        }
-    }
 }
 export default class Header extends PureComponent<HeaderProps> {
     static defaultProps: {
@@ -36,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

@@ -14,7 +14,7 @@ export default class Header extends PureComponent {
         onSort: () => { },
         onCheckboxChange: () => { },
         sortKey: 'id',
-        sortOrder: true
+        sortOrder: true,
     };
     id = getUID('table-header-');
     onCheckboxFocus = (event) => {
@@ -24,18 +24,12 @@ export default class Header extends PureComponent {
         const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
         const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
         const metaColumn = (<div className={metaColumnClasses}>
-        {selectable &&
-                (<Checkbox aria-labelledby={this.id} disabled={checkboxDisabled} checked={checked} onChange={onCheckboxChange} onFocus={this.onCheckboxFocus}/>)}
+        {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>);
         });
@@ -45,13 +39,17 @@ export default class Header extends PureComponent {
         const regularCells = this.createCells();
         return (<thead id={this.id} data-test="ring-table-header" style={{ top: topStickOffset }} className={classNames({
                 [style.tableHead]: true,
-                [style.subHeaderSticky]: sticky
+                [style.subHeaderSticky]: sticky,
             })}>
         {caption && (<tr data-test="ring-table-header-row">
-            <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">{caption}</th>
+            <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">
+              {caption}
+            </th>
           </tr>)}
 
-        <tr className={style.subHeader} data-test="ring-table-header-row">{regularCells}</tr>
+        <tr className={style.subHeader} data-test="ring-table-header-row">
+          {regularCells}
+        </tr>
       </thead>);
     }
 }

package/components/table/multitable.js

@@ -66,12 +66,14 @@ export default class MultiTable extends PureComponent {
         down: this.onDownPress,
         esc: this.onEscPress,
         'command+a': this.onCmdAPress,
-        'ctrl+a': this.onCmdAPress
+        'ctrl+a': this.onCmdAPress,
     };
     render() {
-        return (<div data-test="ring-multitable">{Children.map(this.props.children, child => {
+        return (<div data-test="ring-multitable">
+        {Children.map(this.props.children, child => {
                 const props = { shortcuts: this.shortcuts };
                 return cloneElement(child, props);
-            })}</div>);
+            })}
+      </div>);
     }
 }

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;