@jetbrains/ring-ui 7.0.124 → 8.0.0-beta.10

package/components/island/adaptive-island-hoc.js

@@ -17,11 +17,11 @@ export default function adaptiveIslandHOC(ComposedComponent) {
             }
         };
         render() {
-            return (<PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
+            return (<PhaseContext value={this.state.phase}>
+          <ScrollHandlerContext value={this.onContentScroll}>
             <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>);
+          </ScrollHandlerContext>
+        </PhaseContext>);
         }
     };
 }

package/components/island/content.d.ts

@@ -1,11 +1,13 @@
-import { Component, type HTMLAttributes } from 'react';
+import { Component, type Ref, type HTMLAttributes } from 'react';
 import createResizeDetector from 'element-resize-detector';
 export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
+    ref?: Ref<Content>;
     fade?: boolean | null | undefined;
     onScrollToBottom?: (() => void) | null | undefined;
     scrollableWrapperClassName?: string | null | undefined;
 }
 export interface IslandContentInnerProps extends IslandContentProps {
+    ref?: Ref<Content>;
     onScroll: (node: HTMLElement) => void;
     bottomBorder: boolean;
 }
@@ -29,5 +31,8 @@ declare class Content extends Component<IslandContentInnerProps> {
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
     render(): import("react").JSX.Element;
 }
-declare const ContentWrapper: import("react").ForwardRefExoticComponent<IslandContentProps & import("react").RefAttributes<Content>>;
+declare const ContentWrapper: {
+    ({ ...props }: IslandContentProps): import("react").JSX.Element;
+    displayName: string;
+};
 export default ContentWrapper;

package/components/island/content.js

@@ -1,4 +1,4 @@
-import { forwardRef, Component } from 'react';
+import { Component } from 'react';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
 import scheduleRAF from '../global/schedule-raf';
@@ -57,7 +57,7 @@ class Content extends Component {
         this.calculateScrollPosition();
     };
     render() {
-        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
+        const { ref, children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
         const { scrolledToTop, scrolledToBottom } = this.state;
         const classes = classNames(styles.content, className, {
             [styles.contentWithTopFade]: fade && !scrolledToTop,
@@ -75,11 +75,11 @@ class Content extends Component {
       </div>);
     }
 }
-const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
+const ContentWrapper = ({ ...props }) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
         const addProps = onScroll ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps} ref={ref}/>;
+        return <Content {...props} {...addProps}/>;
     }}
-  </ScrollHandlerContext.Consumer>));
+  </ScrollHandlerContext.Consumer>);
 ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/{table → legacy-table}/cell.js

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Cell extends PureComponent {
     render() {
         const classes = classNames(style.cell, this.props.className);

package/components/{table → legacy-table}/header-cell.js

@@ -4,7 +4,7 @@ import sortableIcon from '@jetbrains/icons/unsorted-12px';
 import sortedIcon from '@jetbrains/icons/chevron-12px-down';
 import Icon from '../icon/icon';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class HeaderCell extends PureComponent {
     static defaultProps = {
         onSort: () => { },

package/components/{table → legacy-table}/header.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import HeaderCell from './header-cell';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Header extends PureComponent {
     static defaultProps = {
         selectable: true,

package/components/legacy-table/legacy-table.css

@@ -0,0 +1,260 @@
+@import '../global/variables.css';
+
+.tableWrapper {
+  --ring-table-compensate: 2px;
+  --ring-table-compensated: calc(calc(4 * var(--ring-unit)) - var(--ring-table-compensate));
+  --ring-table-top: -3px;
+
+  position: relative;
+  font-variant-numeric: var(--ring-font-variant-numeric);
+}
+
+.table {
+  width: 100%;
+
+  border-spacing: 0;
+}
+
+.userSelectNone {
+  user-select: none;
+}
+
+.headerCell {
+  composes: font-smaller-lower from '../global/global.css';
+
+  box-sizing: border-box;
+  height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 5);
+
+  text-align: left;
+  white-space: nowrap;
+
+  color: var(--ring-secondary-color);
+
+  font-weight: normal;
+}
+
+.headerCell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:last-child {
+  width: 100%;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.headerCell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.headerCell.headerCellSorted {
+  font-weight: var(--ring-font-weight-bold);
+}
+
+.headerCell.headerCellSortable {
+  cursor: pointer;
+}
+
+.headerCell .sorter {
+  position: absolute;
+  top: 5px;
+
+  display: none;
+
+  margin-left: 5px;
+
+  user-select: none;
+}
+
+.headerCell.headerCellSortable .sorter {
+  display: inline-block;
+}
+
+.sortedUp .icon {
+  transform: rotate(180deg);
+  transform-origin: center 44%;
+}
+
+.caption {
+  padding-top: var(--ring-unit);
+  padding-bottom: 6px;
+
+  color: var(--ring-text-color);
+  border-bottom: 0;
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height-lower);
+}
+
+.tableHead::after {
+  position: absolute;
+
+  width: 100%;
+
+  height: 1px;
+
+  content: '';
+
+  background-color: var(--ring-line-color);
+}
+
+.subHeaderSticky {
+  position: sticky;
+
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+
+  background-color: rgba(var(--ring-content-background-components), 0.9);
+}
+
+.row {
+  outline: none;
+
+  line-height: var(--ring-table-compensated);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.table:not(.disabledHover) .row:hover {
+  background-color: var(--ring-hover-background-color);
+}
+
+.rowSelected {
+  background-color: var(--ring-selected-background-color);
+}
+
+.rowFocused {
+  background-color: var(--ring-hover-background-color);
+}
+/* stylelint-disable-next-line selector-max-specificity */
+.rowFocused .cell:nth-child(1) {
+  box-shadow: inset 2px 0 var(--ring-main-color);
+}
+
+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(--ring-table-loader-background-color);
+}
+
+.cell {
+  composes: ellipsis from '../global/global.css';
+
+  box-sizing: content-box;
+
+  min-width: 0;
+
+  height: calc(4 * var(--ring-unit));
+  padding: 0;
+  padding-right: calc(var(--ring-unit) * 5);
+
+  color: var(--ring-text-color);
+}
+
+.cell:first-child {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+.cell:last-child {
+  width: 100%;
+
+  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
+
+  max-width: 0;
+  padding-right: calc(var(--ring-unit) * 4);
+}
+
+.wideFirstColumn .cell:first-child {
+  min-width: calc(var(--ring-unit) * 37);
+  max-width: calc(var(--ring-unit) * 77);
+}
+
+.cell:first-child:only-child {
+  width: initial;
+  max-width: none;
+}
+
+.cellUnlimited {
+  width: 100%;
+}
+
+.cellRight {
+  text-align: right;
+}
+
+.metaColumn {
+  position: relative;
+
+  float: left;
+
+  height: 16px;
+  padding-right: var(--ring-table-compensate);
+}
+
+.metaColumn.headerMetaColumn {
+  padding-top: 1px;
+}
+
+.dragHandle {
+  top: var(--ring-table-top);
+  left: calc(-2 * var(--ring-unit));
+
+  cursor: grab;
+
+  opacity: 0;
+}
+
+/* override button */
+.dragHandle.dragHandle {
+  position: absolute;
+
+  height: calc(calc(4 * var(--ring-unit)) - var(--ring-table-top));
+  padding: 0;
+}
+
+.dragHandle.visibleDragHandle,
+.row:hover .dragHandle {
+  opacity: 1;
+}
+
+.rowCollapseExpandButton {
+  padding-right: calc(var(--ring-unit) / 2);
+  padding-left: 7px;
+}
+
+.draggingRow {
+  z-index: var(--ring-overlay-z-index);
+
+  background-color: var(--ring-hover-background-color);
+}
+
+.draggingRow .dragHandle {
+  cursor: grabbing;
+
+  opacity: 1;
+}
+
+.draggingRow .dragHandle svg {
+  color: var(--ring-main-color);
+}
+
+.draggingTable {
+  z-index: var(--ring-overlay-z-index);
+
+  border-spacing: 0;
+}
+
+.tableMessage {
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+
+  color: var(--ring-secondary-color);
+}

package/components/{table → legacy-table}/multitable.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent, type ReactElement } from 'react';
 import { type TableAttrs } from './table';
-import { type SelectionItem } from './selection';
+import { type SelectionItem } from '../global/table-selection';
 type TableComponent = ReactElement<TableAttrs<SelectionItem>>;
 export interface MultiTableProps {
     children: TableComponent[];

package/components/{table → legacy-table}/row.d.ts

@@ -55,7 +55,7 @@ export default class Row<T extends object> extends PureComponent<RowProps<T>> {
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
-    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => void>;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => () => void>;
     render(): React.JSX.Element;
 }
 export type RowAttrs<T extends object> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/{table → legacy-table}/row.js

@@ -11,7 +11,7 @@ import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import { createComposedRef } from '../global/compose-refs';
 import Cell from './cell';
-import style from './table.css';
+import style from './legacy-table.css';
 const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
     const classes = classNames(style.dragHandle, {
         [style.visibleDragHandle]: alwaysShowDragHandle,

package/components/legacy-table/selection-adapter.d.ts

@@ -0,0 +1,6 @@
+import type TableSelection from '../global/table-selection';
+import type { SelectionItem } from '../global/table-selection';
+export default function selectionAdapter(getSelection: () => TableSelection<SelectionItem>): {
+    readonly size: number;
+    readonly items: SelectionItem[];
+};

package/components/{table → legacy-table}/selection-shortcuts-hoc.d.ts

@@ -1,16 +1,16 @@
 import { type ComponentClass } from 'react';
 import { type ShortcutsMap } from '../shortcuts/core';
-import type Selection from './selection';
+import type TableSelection from '../global/table-selection';
 export interface SelectionShortcutsOuterProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable?: boolean | undefined;
-    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    onSelect?: ((selection: TableSelection<T>) => void) | undefined;
     shortcuts?: ShortcutsMap | undefined;
 }
 export interface SelectionShortcutsAddProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable: boolean;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     shortcutsMap: ShortcutsMap;
 }
 export type SelectionShortcutsProps<T extends object, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;

package/components/{table → legacy-table}/simple-table.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SimpleTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect' | 'selectable'> {
 }
 declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleTableProps<T>> {
@@ -9,7 +9,7 @@ declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleT
         wideFirstColumn: boolean;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     classes: string;
     render(): import("react").JSX.Element;

package/components/{table → legacy-table}/simple-table.js

@@ -1,15 +1,15 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Table from './table';
-import Selection from './selection';
-import style from './table.css';
+import TableSelection from '../global/table-selection';
+import style from './legacy-table.css';
 class SimpleTable extends PureComponent {
     static defaultProps = {
         selectable: false,
         wideFirstColumn: false,
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
         }),
     };

package/components/{table → legacy-table}/smart-table.d.ts

@@ -1,19 +1,19 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
-    onSelectionChange: (selection: Selection<T>) => void;
-    selection?: Selection<T>;
+    onSelectionChange: (selection: TableSelection<T>) => void;
+    selection?: TableSelection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static defaultProps: {
         onSelectionChange: () => void;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     render(): import("react").JSX.Element;
 }
 export default SmartTable;

package/components/{table → legacy-table}/smart-table.js

@@ -1,12 +1,12 @@
 import { PureComponent } from 'react';
 import Table from './table';
-import Selection from './selection';
+import TableSelection from '../global/table-selection';
 class SmartTable extends PureComponent {
     static defaultProps = {
         onSelectionChange: () => { },
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
             isItemSelectable: this.props.isItemSelectable,
         }),
@@ -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 TableSelection({ data, isItemSelectable }),
             });
         }
     }

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

@@ -0,0 +1,109 @@
+/**
+ * @name Table
+ */
+import { Component, PureComponent, type ReactNode, type SyntheticEvent } from 'react';
+import * as React from 'react';
+import { type OnChangeMeta } from 'react-movable/lib/types';
+import { type FocusSensorAddProps, type FocusSensorProps } from '../global/focus-sensor-hoc';
+import { type SelectionShortcutsAddProps, type SelectionShortcutsProps } from './selection-shortcuts-hoc';
+import { type DisableHoverAddProps, type DisableHoverProps } from './disable-hover-hoc';
+import Row from './row-with-focus-sensor';
+import { type Column, type SortParams } from './header-cell';
+export interface ReorderParams<T> {
+    data: T[];
+    oldIndex: number;
+    newIndex: number;
+}
+export interface TableProps<T extends object> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
+    data: readonly T[];
+    columns: readonly Column<T>[] | ((item: T | null) => readonly Column<T>[]);
+    isItemSelectable: (item: T) => boolean;
+    loading: boolean;
+    onSort: (params: SortParams) => void;
+    onReorder: (params: ReorderParams<T>) => void;
+    getItemKey: (item: T) => string | number;
+    sortKey: string;
+    sortOrder: boolean;
+    draggable: boolean;
+    alwaysShowDragHandle: boolean;
+    dragHandleTitle?: string;
+    stickyHeader: boolean;
+    wideFirstColumn: boolean;
+    getItemLevel: (item: T) => number;
+    getItemClassName: (item: T) => string | null | undefined;
+    getMetaColumnClassName: (item: T) => string | null | undefined;
+    getItemDataTest: (item: T) => string | null | undefined;
+    isItemCollapsible: (item: T) => boolean;
+    isParentCollapsible: (item: T) => boolean;
+    isItemCollapsed: (item: T) => boolean;
+    onItemCollapse: (item: T) => void;
+    onItemExpand: (item: T) => void;
+    onItemDoubleClick: (item: T) => void;
+    onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    remoteSelection: boolean;
+    isDisabledSelectionVisible: (item: T) => boolean;
+    getCheckboxTooltip: (item: T) => string | undefined;
+    className?: string | null | undefined;
+    wrapperClassName?: string | null | undefined;
+    headerClassName?: string | null | undefined;
+    cellClassName?: string | null | undefined;
+    loaderClassName?: string | undefined;
+    caption?: string | null | undefined;
+    stickyHeaderOffset?: string | undefined;
+    renderEmpty?: (() => ReactNode) | null | undefined;
+    RowComponent: typeof Row;
+    renderLoader?: ((loaderClassName?: string) => ReactNode) | null | undefined;
+}
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export declare class Table<T extends object> extends PureComponent<TableProps<T>> {
+    static defaultProps: {
+        isItemSelectable: () => boolean;
+        loading: boolean;
+        onSort: () => void;
+        onReorder: () => void;
+        getItemKey: (item: object) => string | number;
+        sortKey: string;
+        sortOrder: boolean;
+        draggable: boolean;
+        alwaysShowDragHandle: boolean;
+        stickyHeader: boolean;
+        getItemLevel: () => number;
+        getItemClassName: () => null;
+        getMetaColumnClassName: () => null;
+        getItemDataTest: () => null;
+        isItemCollapsible: () => boolean;
+        isParentCollapsible: () => boolean;
+        isItemCollapsed: () => boolean;
+        onItemCollapse: () => void;
+        onItemExpand: () => void;
+        onItemDoubleClick: () => void;
+        onItemClick: () => void;
+        remoteSelection: boolean;
+        isDisabledSelectionVisible: () => boolean;
+        getCheckboxTooltip: () => undefined;
+        RowComponent: typeof Row;
+        wideFirstColumn: boolean;
+    };
+    state: {
+        shortcutsScope: string;
+        userSelectNone: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }: TableProps<T>): void;
+    componentWillUnmount(): void;
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseUp: () => void;
+    onRowFocus: (row: T) => void;
+    onRowSelect: (row: T, selected: boolean) => void;
+    onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
+    onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
+    restoreFocusWithoutScroll: () => void;
+    render(): React.JSX.Element;
+}
+export type TableAttrs<T extends object> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
+export default class TableContainer<T extends object> extends Component<TableAttrs<T>> {
+    Table: React.ComponentClass<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, any>;
+    render(): React.JSX.Element;
+}