@jetbrains/ring-ui 5.0.151 → 5.0.152

package/components/table/header.d.ts

@@ -1,6 +1,5 @@
 import React, { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import { Waypoint } from 'react-waypoint';
 import { Column, SortParams } from './header-cell';
 export interface HeaderProps {
     columns: readonly Column[];
@@ -49,18 +48,8 @@ export default class Header extends PureComponent<HeaderProps> {
         sortKey: string;
         sortOrder: boolean;
     };
-    state: {
-        fixed: boolean;
-        headerWidth: undefined;
-        widths: never[];
-    };
     id: string;
     onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    private _columnsRowNode?;
-    storeColumnsRowNode: (node: HTMLElement | null) => void;
-    onScrollIn: () => void;
-    onScrollOut: ({ currentPosition }: Waypoint.CallbackArgs) => void;
-    calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined): void;
     createCells(widths?: never[]): React.JSX.Element[];
     render(): React.JSX.Element;
 }

package/components/table/header.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Waypoint } from 'react-waypoint';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import style from './table.css';
@@ -32,39 +31,10 @@ export default class Header extends PureComponent {
         sortKey: 'id',
         sortOrder: true
     };
-    state = {
-        fixed: false,
-        headerWidth: undefined,
-        widths: []
-    };
     id = getUID('table-header-');
     onCheckboxFocus = (event) => {
         event.currentTarget.blur();
     };
-    _columnsRowNode;
-    storeColumnsRowNode = (node) => {
-        if (node) {
-            this._columnsRowNode = node;
-            this.calculateColumnsWidths(node);
-        }
-    };
-    onScrollIn = () => {
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: false });
-    };
-    onScrollOut = ({ currentPosition }) => {
-        if (currentPosition !== 'above') {
-            return;
-        }
-        this.calculateColumnsWidths(this._columnsRowNode);
-        this.setState({ fixed: true });
-    };
-    calculateColumnsWidths(columnsRowNode) {
-        this.setState({
-            headerWidth: columnsRowNode?.clientWidth,
-            widths: [...columnsRowNode?.childNodes ?? []].map(column => (column instanceof Element ? column.clientWidth : 0))
-        });
-    }
     createCells(widths = []) {
         const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
         const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
@@ -82,30 +52,16 @@ export default class Header extends PureComponent {
     }
     render() {
         const { caption, sticky, topStickOffset } = this.props;
-        const { fixed, widths, headerWidth } = this.state;
         const regularCells = this.createCells();
-        const waypointChild = (<tr data-test="ring-table-header-row">
-        {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
-        {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
-        {/*eslint-disable-next-line react/no-array-index-key*/}
-        {regularCells.map((c, i) => <td key={i}/>)}
-      </tr>);
-        return (<thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
+        return (<thead id={this.id} data-test="ring-table-header" style={{ top: topStickOffset }} className={classNames({
+                [style.tableHead]: true,
+                [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>
           </tr>)}
 
-        {sticky &&
-                (<Waypoint topOffset={topStickOffset} onEnter={this.onScrollIn} onLeave={this.onScrollOut}>
-            {waypointChild}
-          </Waypoint>)}
-
-        <tr className={style.subHeader} ref={this.storeColumnsRowNode} data-test="ring-table-header-row">{regularCells}</tr>
-
-        {fixed && sticky &&
-                (<tr className={style.subHeaderFixed} style={{ width: headerWidth, top: topStickOffset }} data-test="ring-table-header-row">
-              {this.createCells(widths)}
-            </tr>)}
+        <tr className={style.subHeader} data-test="ring-table-header-row">{regularCells}</tr>
       </thead>);
     }
 }

package/components/table/table.css

@@ -101,34 +101,13 @@
   background-color: var(--ring-line-color);
 }
 
-.subHeaderFixed::after {
-  position: absolute;
-  top: 24px;
-
-  height: 1px;
-
-  content: "";
-
-  background-color: var(--ring-line-color);
-}
-
-.subHeader::after {
-  right: calc(unit * 4);
-  left: calc(unit * 4);
-}
+.subHeaderSticky {
+  position: sticky;
 
-.subHeaderFixed {
-  position: fixed;
   z-index: var(--ring-fixed-z-index);
   top: 0;
 
-  opacity: 0.9;
-  background-color: var(--ring-content-background-color);
-}
-
-.subHeaderFixed::after {
-  right: 0;
-  left: 0;
+  background-color: rgba(var(--ring-content-background-components), 0.9);
 }
 
 .row {

package/components/tags-input/tags-input.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
+import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
@@ -6,6 +6,7 @@ import Caret from '../caret/caret';
 import { Size } from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
+import { TagAttrs } from '../tag/tag';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -17,7 +18,7 @@ export interface TagsInputProps {
     dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
     onAddTag: (params: ToggleTagParams) => void;
     onRemoveTag: (params: ToggleTagParams) => void;
-    customTagComponent: Component;
+    customTagComponent: ComponentType<TagAttrs>;
     maxPopupHeight: number;
     minPopupWidth: number;
     canNotBeEmpty: boolean;

package/components/tags-input/tags-input.js

@@ -264,7 +264,7 @@ export default class TagsInput extends PureComponent {
                     [inputStyles.disabledLabel]: disabled
                 })}>{label}</label>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
           <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>
         </TagsList>
       </div>);

package/dist/_helpers/table.js

@@ -1,3 +1,3 @@
-var modules_1db4bbca = {"unit":"i__const_unit_0","height":"32px","compensate":"2px","compensated":"30px","top":"-3px","row":"row_rui_23fe","dragHandle":"dragHandle_rui_23fe","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_23fe","table":"table_rui_23fe","userSelectNone":"userSelectNone_rui_23fe","headerCell":"headerCell_rui_23fe font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","headerCellSorted":"headerCellSorted_rui_23fe","headerCellSortable":"headerCellSortable_rui_23fe","sorter":"sorter_rui_23fe","sortedUp":"sortedUp_rui_23fe","icon":"icon_rui_23fe","caption":"caption_rui_23fe","tableHead":"tableHead_rui_23fe","subHeaderFixed":"subHeaderFixed_rui_23fe","subHeader":"subHeader_rui_23fe","disabledHover":"disabledHover_rui_23fe","rowSelected":"rowSelected_rui_23fe","rowFocused":"rowFocused_rui_23fe","cell":"cell_rui_23fe ellipsis_rui_8bff","loadingOverlay":"loadingOverlay_rui_23fe","cellUnlimited":"cellUnlimited_rui_23fe","cellRight":"cellRight_rui_23fe","metaColumn":"metaColumn_rui_23fe","headerMetaColumn":"headerMetaColumn_rui_23fe","visibleDragHandle":"visibleDragHandle_rui_23fe","rowCollapseExpandButton":"rowCollapseExpandButton_rui_23fe","draggingRow":"draggingRow_rui_23fe","draggingTable":"draggingTable_rui_23fe","tableMessage":"tableMessage_rui_23fe"};
+var modules_1db4bbca = {"unit":"i__const_unit_0","height":"32px","compensate":"2px","compensated":"30px","top":"-3px","row":"row_rui_23fe","dragHandle":"dragHandle_rui_23fe","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_23fe","table":"table_rui_23fe","userSelectNone":"userSelectNone_rui_23fe","headerCell":"headerCell_rui_23fe font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","headerCellSorted":"headerCellSorted_rui_23fe","headerCellSortable":"headerCellSortable_rui_23fe","sorter":"sorter_rui_23fe","sortedUp":"sortedUp_rui_23fe","icon":"icon_rui_23fe","caption":"caption_rui_23fe","tableHead":"tableHead_rui_23fe","subHeaderSticky":"subHeaderSticky_rui_23fe","disabledHover":"disabledHover_rui_23fe","rowSelected":"rowSelected_rui_23fe","rowFocused":"rowFocused_rui_23fe","cell":"cell_rui_23fe ellipsis_rui_8bff","loadingOverlay":"loadingOverlay_rui_23fe","cellUnlimited":"cellUnlimited_rui_23fe","cellRight":"cellRight_rui_23fe","metaColumn":"metaColumn_rui_23fe","headerMetaColumn":"headerMetaColumn_rui_23fe","visibleDragHandle":"visibleDragHandle_rui_23fe","rowCollapseExpandButton":"rowCollapseExpandButton_rui_23fe","draggingRow":"draggingRow_rui_23fe","draggingTable":"draggingTable_rui_23fe","tableMessage":"tableMessage_rui_23fe"};
 
 export { modules_1db4bbca as m };