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

package/components/table/row.js

@@ -14,9 +14,9 @@ import Cell from './cell';
 import style from './table.css';
 const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
     const classes = classNames(style.dragHandle, {
-        [style.visibleDragHandle]: alwaysShowDragHandle
+        [style.visibleDragHandle]: alwaysShowDragHandle,
     });
-    return (<Button data-movable-handle title={dragHandleTitle} className={classes} icon={dragIcon}/>);
+    return <Button data-movable-handle title={dragHandleTitle} className={classes} icon={dragIcon}/>;
 };
 export default class Row extends PureComponent {
     static defaultProps = {
@@ -34,7 +34,7 @@ export default class Row extends PureComponent {
         parentCollapsible: false,
         collapsed: false,
         onCollapse: () => { },
-        onExpand: () => { }
+        onExpand: () => { },
     };
     id = getUID('table-row-');
     onMouseEnter = (e) => {
@@ -70,59 +70,52 @@ 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,
-            [style.rowSelected]: selected
+            [style.rowSelected]: selected,
         });
         const testAttrs = {
             'data-test-focused': showFocus || undefined,
-            'data-test-selected': selected || undefined
+            'data-test-selected': selected || undefined,
         };
         const metaColumnClasses = classNames(metaColumnClassName, style.metaColumn);
         const SUBITEM_OFFSET = 30;
         const COLLAPSIBLE_PARENT_OFFSET = 20;
         const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
         const metaColumnStyle = {
-            paddingLeft: `${gap}px`
+            paddingLeft: `${gap}px`,
         };
         const metaColumn = (<div className={metaColumnClasses} style={metaColumnStyle}>
-        {draggable && (<DragHandle alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle}/>)}
+        {draggable && <DragHandle alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle}/>}
 
-        {selectable &&
-                (<Tooltip title={checkboxTooltip}>
-              <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
-            </Tooltip>)}
+        {selectable && (<Tooltip title={checkboxTooltip}>
+            <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+          </Tooltip>)}
 
-        {!selectable && showDisabledSelection &&
-                (<Tooltip title={checkboxTooltip}>
-              <Checkbox aria-labelledby={this.id} checked={selected} disabled/>
-            </Tooltip>)}
+        {!selectable && showDisabledSelection && (<Tooltip title={checkboxTooltip}>
+            <Checkbox aria-labelledby={this.id} checked={selected} disabled/>
+          </Tooltip>)}
 
-        {collapsible && collapsed &&
-                (<Button className={style.rowCollapseExpandButton} icon={chevronRightIcon} onClick={() => onExpand(item)}/>)}
+        {collapsible && collapsed && (<Button className={style.rowCollapseExpandButton} icon={chevronRightIcon} onClick={() => onExpand(item)}/>)}
 
-        {collapsible && !collapsed &&
-                (<Button className={style.rowCollapseExpandButton} icon={chevronDownIcon} onClick={() => onCollapse(item)}/>)}
+        {collapsible && !collapsed && (<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}
+          {index === 0 && showMetaColumn && metaColumn}
           {value}
         </Cell>);
         });
-        return (<tr id={this.id} ref={this.composedRowRef(this.rowRef, innerRef)} className={classes} tabIndex={0} data-test={dataTests('ring-table-row', dataTest)} {...testAttrs} {...restProps} onMouseMove={this.onMouseEnter} onClick={this.onClick} onDoubleClick={this.onDoubleClick}>{cells}</tr>);
+        return (<tr id={this.id} ref={this.composedRowRef(this.rowRef, innerRef)} className={classes} tabIndex={0} data-test={dataTests('ring-table-row', dataTest)} {...testAttrs} {...restProps} onMouseMove={this.onMouseEnter} onClick={this.onClick} onDoubleClick={this.onDoubleClick}>
+        {cells}
+      </tr>);
     }
 }

package/components/table/selection-adapter.js

@@ -5,6 +5,6 @@ export default function selectionAdapter(getSelection) {
         },
         get items() {
             return [...getSelection().getActive()];
-        }
+        },
     };
 }

package/components/table/selection-shortcuts-hoc.js

@@ -113,7 +113,7 @@ export default function selectionShortcutsHOC(ComposedComponent) {
             space: this.onSpacePress,
             esc: this.onEscPress,
             'command+a': this.onCmdAPress,
-            'ctrl+a': this.onCmdAPress
+            'ctrl+a': this.onCmdAPress,
         };
         render() {
             const { selection, selectable, onSelect, shortcuts, ...restProps } = this.props;
@@ -124,7 +124,7 @@ export default function selectionShortcutsHOC(ComposedComponent) {
         ...ComposedComponent.defaultProps,
         selectable: true,
         onSelect: () => { },
-        shortcuts: {}
+        shortcuts: {},
     };
     return SelectionShortcuts;
 }

package/components/table/selection.d.ts

@@ -1,6 +1,5 @@
 export interface SelectionItem {
     id: string | number;
-    [key: string]: unknown;
 }
 export interface TableSelectionConfig<T extends SelectionItem> {
     data?: readonly T[] | undefined;
@@ -17,13 +16,13 @@ export interface CloneWithConfig<T> {
 }
 export default class Selection<T extends SelectionItem> {
     private _rawData;
-    protected _getChildren: ((item: T) => readonly T[]);
+    protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;
     protected _selected: Set<T>;
     protected _focused: T | null;
     private _getKey;
     protected _isItemSelectable: (item: T) => boolean | undefined;
-    constructor({ data, selected, focused, getKey, getChildren, isItemSelectable }?: TableSelectionConfig<T>);
+    constructor({ data, selected, focused, getKey, getChildren, isItemSelectable, }?: TableSelectionConfig<T>);
     protected _buildData(data: readonly T[] | null | undefined): Set<T>;
     protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
     cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;

package/components/table/selection.js

@@ -6,7 +6,7 @@ export default class Selection {
     _focused;
     _getKey;
     _isItemSelectable;
-    constructor({ data = [], selected = new Set(), focused = null, getKey = item => item.id, getChildren = () => [], isItemSelectable = () => true } = {}) {
+    constructor({ data = [], selected = new Set(), focused = null, getKey = item => item.id, getChildren = () => [], isItemSelectable = () => true, } = {}) {
         this._rawData = data;
         this._getChildren = getChildren;
         this._data = this._buildData(data);
@@ -25,8 +25,7 @@ export default class Selection {
         const newData = data || this._rawData;
         let newSelected;
         if (data && !selected) {
-            newSelected = new Set([...this._buildData(newData)].
-                filter(item => [...this._selected].some(it => this._getKey(item) === this._getKey(it))));
+            newSelected = new Set([...this._buildData(newData)].filter(item => [...this._selected].some(it => this._getKey(item) === this._getKey(it))));
             newSelected = this._buildSelected(this._buildData(newData), newSelected);
         }
         else if (selected) {
@@ -41,10 +40,10 @@ export default class Selection {
         return new this.constructor({
             data: newData,
             selected: newSelected,
-            focused: (data && !focused) ? cloneFocus() : newFocused,
+            focused: data && !focused ? cloneFocus() : newFocused,
             getKey: this._getKey,
             getChildren: this._getChildren,
-            isItemSelectable: this._isItemSelectable
+            isItemSelectable: this._isItemSelectable,
         });
     }
     focus(value) {

package/components/table/simple-table.js

@@ -6,16 +6,16 @@ import Selection from './selection';
 class SimpleTable extends PureComponent {
     static defaultProps = {
         selectable: false,
-        wideFirstColumn: false
+        wideFirstColumn: false,
     };
     state = {
         selection: new Selection({
-            data: this.props.data
-        })
+            data: this.props.data,
+        }),
     };
     classes = classNames(style.disabledHover, this.props.className);
     render() {
-        return (<Table {...this.props} className={this.classes} {...this.state}/>);
+        return <Table {...this.props} className={this.classes} {...this.state}/>;
     }
 }
 export default SimpleTable;

package/components/table/smart-table.js

@@ -3,13 +3,13 @@ import Table from './table';
 import Selection from './selection';
 class SmartTable extends PureComponent {
     static defaultProps = {
-        onSelectionChange: () => { }
+        onSelectionChange: () => { },
     };
     state = {
         selection: new Selection({
             data: this.props.data,
-            isItemSelectable: this.props.isItemSelectable
-        })
+            isItemSelectable: this.props.isItemSelectable,
+        }),
     };
     UNSAFE_componentWillReceiveProps(nextProps) {
         const { data, isItemSelectable, selection } = nextProps;
@@ -18,7 +18,7 @@ class SmartTable extends PureComponent {
         }
         else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
             this.setState({
-                selection: new Selection({ data, isItemSelectable })
+                selection: new Selection({ data, isItemSelectable }),
             });
         }
     }
@@ -27,7 +27,7 @@ class SmartTable extends PureComponent {
         this.props.onSelectionChange(selection);
     };
     render() {
-        return (<Table {...this.props} selection={this.state.selection} onSelect={this.onSelect}/>);
+        return <Table {...this.props} selection={this.state.selection} onSelect={this.onSelect}/>;
     }
 }
 export default SmartTable;

package/components/table/table.css

@@ -1,9 +1,10 @@
 @import "../global/variables.css";
 
-@value compensate: 2px;
-@value compensated: calc(calc(4 * var(--ring-unit)) - compensate);
-
 .tableWrapper {
+  --ring-table-compensate: 2px;
+  --ring-table-compensated:  calc(calc(4 * var(--ring-unit)) - var(--ring-table-compensate));
+  --ring-table-top: -3px;
+
   position: relative;
 }
 
@@ -109,7 +110,7 @@
 .row {
   outline: none;
 
-  line-height: compensated;
+  line-height: var(--ring-table-compensated);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
@@ -194,17 +195,15 @@
   float: left;
 
   height: 16px;
-  padding-right: compensate;
+  padding-right: var(--ring-table-compensate);
 }
 
 .metaColumn.headerMetaColumn {
   padding-top: 1px;
 }
 
-@value top: -3px;
-
 .dragHandle {
-  top: top;
+  top: var(--ring-table-top);
   left: calc(-2 * var(--ring-unit));
 
   cursor: grab;
@@ -216,7 +215,7 @@
 .dragHandle.dragHandle {
   position: absolute;
 
-  height: calc(calc(4 * var(--ring-unit)) - top);
+  height: calc(calc(4 * var(--ring-unit)) - var(--ring-table-top));
   padding: 0;
 }
 

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

@@ -44,11 +44,11 @@ export class Table extends PureComponent {
         isDisabledSelectionVisible: () => false,
         getCheckboxTooltip: () => undefined,
         RowComponent: Row,
-        wideFirstColumn: false
+        wideFirstColumn: false,
     };
     state = {
         shortcutsScope: getUID('ring-table-'),
-        userSelectNone: false
+        userSelectNone: false,
     };
     componentDidMount() {
         document.addEventListener('mouseup', this.onMouseUp);
@@ -108,13 +108,19 @@ 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,
+            caption,
+            selectable,
+            draggable,
+            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;
@@ -123,24 +129,22 @@ export class Table extends PureComponent {
         headerProps.checkboxDisabled = this.props.data.length === 0;
         const wrapperClasses = classNames({
             [style.tableWrapper]: true,
-            [style.loading]: loading
+            [style.loading]: loading,
         });
         const classes = classNames(this.props.className, {
             [style.table]: true,
             [style.wideFirstColumn]: this.props.wideFirstColumn,
             [style.multiSelection]: selection.getSelected().size > 0,
             [style.userSelectNone]: this.state.userSelectNone,
-            [style.disabledHover]: this.props.disabledHover
+            [style.disabledHover]: this.props.disabledHover,
         });
         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>);
-            const tbody = Array.isArray(children) && children.length > 0
-                ? children
-                : empty;
+            const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
             return (<table className={classes} data-test="ring-table">
           <Header {...headerProps}/>
           <tbody {...props} data-test="ring-table-body">
@@ -153,22 +157,17 @@ 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)}/>);
-            return isDragged
-                ? (<table style={{ ...props.style }} className={style.draggingTable}>
-            <tbody>{row}</tbody>
-          </table>)
-                : row;
+            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>
+        </table>) : (row);
         };
         return (<div className={wrapperClasses} data-test="ring-table-wrapper" ref={this.props.innerRef}>
-        {focused &&
-                (<Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>)}
+        {focused && <Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>}
 
         {/* Handler detects that user holds Shift key */}
         <div role="presentation" onMouseDown={this.onMouseDown}>
-          {draggable
-                ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>)
-                : renderList({ children: data.map((value, index) => renderItem({ value, index })) })}
+          {draggable ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>) : (renderList({ children: data.map((value, index) => renderItem({ value, index })) }))}
         </div>
 
         {loading && (<div className={style.loadingOverlay}>

package/components/table/table.stories.json

@@ -1,21 +1,45 @@
 [
-  {"id": 1, "country": "Russia", "city": "Moscow", "url": "https://en.wikipedia.org/wiki/Russia", "children": [
-    {"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
-    {"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
-  ]},
+  {
+    "id": 1,
+    "country": "Russia",
+    "city": "Moscow",
+    "url": "https://en.wikipedia.org/wiki/Russia",
+    "children": [
+      {"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
+      {"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
+    ]
+  },
   {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
   {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
-  {"id": 4, "country": "USA", "city": "NYC", "url": "https://en.wikipedia.org/wiki/USA", "children": [
-    {"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
-    {"id": 42, "country": "New York", "city": "NYC", "url": "https://en.wikipedia.org/wiki/New York", "children": [
-      {"id": 421, "country": "NYC", "city": "NYC", "url": "https://en.wikipedia.org/wiki/NYC", "children": [
-        {"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
-        {"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
-        {"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
-      ]}
-    ]},
-    {"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
-  ]},
+  {
+    "id": 4,
+    "country": "USA",
+    "city": "NYC",
+    "url": "https://en.wikipedia.org/wiki/USA",
+    "children": [
+      {"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
+      {
+        "id": 42,
+        "country": "New York",
+        "city": "NYC",
+        "url": "https://en.wikipedia.org/wiki/New York",
+        "children": [
+          {
+            "id": 421,
+            "country": "NYC",
+            "city": "NYC",
+            "url": "https://en.wikipedia.org/wiki/NYC",
+            "children": [
+              {"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
+              {"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
+              {"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
+            ]
+          }
+        ]
+      },
+      {"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
+    ]
+  },
   {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
   {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
   {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
@@ -24,7 +48,12 @@
   {"id": 11, "country": "China", "city": "Beijing", "url": "https://en.wikipedia.org/wiki/China"},
   {"id": 12, "country": "Germany", "city": "Berlin", "url": "https://en.wikipedia.org/wiki/Germany"},
   {"id": 13, "country": "Luxembourg", "city": "Luxembourg", "url": "https://en.wikipedia.org/wiki/Luxembourg"},
-  {"id": 14, "country": "Belgium", "city": "Brussels", "url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"},
+  {
+    "id": 14,
+    "country": "Belgium",
+    "city": "Brussels",
+    "url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"
+  },
   {"id": 15, "country": "Italy", "city": "Rome", "url": "https://en.wikipedia.org/wiki/Italy"},
   {"id": 16, "country": "Spain", "city": "Madrid", "url": "https://en.wikipedia.org/wiki/Spain"},
   {"id": 17, "country": "Portugal", "city": "Lisbon", "url": "https://en.wikipedia.org/wiki/Portugal"},

package/components/tabs/collapsible-more.d.ts

@@ -17,5 +17,5 @@ export interface MoreButtonProps {
     morePopupItemClassName?: string | undefined;
     morePopupBeforeEnd: ReactNode;
 }
-export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => import("react").JSX.Element | null>;
+export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }: MoreButtonProps) => import("react").JSX.Element | null>;
 export declare const FakeMoreButton: import("react").MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => import("react").JSX.Element>;

package/components/tabs/collapsible-more.js

@@ -13,14 +13,11 @@ export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassNa
     const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
     return (<Link title={'More'} className={classnames} {...restProps}>
       {'More'}
-      <Icon glyph={chevronDownIcon} className={styles.chevron}/></Link>);
+      <Icon glyph={chevronDownIcon} className={styles.chevron}/>
+    </Link>);
 };
-const morePopupDirections = [
-    Directions.BOTTOM_CENTER,
-    Directions.BOTTOM_LEFT,
-    Directions.BOTTOM_RIGHT
-];
-export const MoreButton = memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }) => {
+const morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
+export const MoreButton = memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }) => {
     const onSelectHandler = useCallback((listItem) => {
         if (listItem.disabled === true || listItem.custom === true) {
             return;
@@ -33,25 +30,25 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
         const popupItems = getTabTitles({
             items,
             selected,
-            collapsed: true
+            collapsed: true,
         }).map(tab => {
             const disabled = tab.props.disabled === true;
             const custom = tab.props.child.type === CustomItem;
-            return ({
+            return {
                 template: tab,
                 key: tab.key,
                 rgItemType: ListProps.Type.CUSTOM,
                 className: morePopupItemClassName,
                 disabled,
-                custom
-            });
+                custom,
+            };
         });
         if (morePopupBeforeEnd) {
             popupItems.push({
                 template: morePopupBeforeEnd,
                 key: 'before-end-content',
                 className: styles.morePopupBeforeEnd,
-                rgItemType: ListProps.Type.CUSTOM
+                rgItemType: ListProps.Type.CUSTOM,
             });
         }
         return popupItems;
@@ -62,10 +59,10 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
         return null;
     }
     return (<div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
-      <Dropdown hoverMode anchor={popupAnchor}>
-        {popup}
-      </Dropdown>
-    </div>);
+        <Dropdown hoverMode anchor={popupAnchor}>
+          {popup}
+        </Dropdown>
+      </div>);
 });
 MoreButton.displayName = 'MoreButton';
 export const FakeMoreButton = memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={classNames(styles.moreButton, styles.title)}>

package/components/tabs/collapsible-tab.js

@@ -4,7 +4,7 @@ import styles from './tabs.css';
 import TabLink from './tab-link';
 import { CustomItem } from './custom-item';
 function noop() { }
-const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect = noop, collapsed = false, tabIndex }) {
+const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect = noop, collapsed = false, tabIndex, }) {
     if (child == null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
     }
@@ -14,7 +14,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
         [styles.collapsed]: collapsed,
         [activeClassName ?? '']: selected,
         [collapsedClassName ?? '']: collapsed,
-        [collapsedActiveClassName ?? '']: collapsed && selected
+        [collapsedActiveClassName ?? '']: collapsed && selected,
     });
     return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });

package/components/tabs/collapsible-tabs.d.ts

@@ -11,6 +11,6 @@ export interface CollapsibleTabsProps {
     initialVisibleItems?: number | null | undefined;
     morePopupBeforeEnd?: ReactNode;
 }
-export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps) => import("react").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps) => import("react").JSX.Element>;
+export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element>;
 export default _default;