@jetbrains/ring-ui-built 7.0.114 → 8.0.0-beta.2

package/components/global/intersection-observer-context.js

@@ -0,0 +1,140 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, createContext, useContext } from 'react';
+
+/**
+ * Usage:
+ *
+ * ```tsx
+ * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ *   <YourComponent />
+ * </IntersectionObserverContext.Provider>
+ *
+ * function YourComponent() {
+ *   // Contains the current isIntersecting value
+ *   const isIntersecting = useIsIntersecting(elementRef);
+ *   // Or, to get updates instead:
+ *   useIsIntersectingListener(elementRef, newIsIntersecting => {
+ *     // ...
+ *   })
+ * }
+ * ```
+ */
+const IntersectionObserverContext = /*#__PURE__*/createContext(null);
+function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
+  const $ = c(6);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 6; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const [handle, setHandle] = useState(null);
+  let t0;
+  let t1;
+  if ($[1] !== rootMargin || $[2] !== rootRef || $[3] !== scrollMargin) {
+    t0 = () => {
+      const root = rootRef?.current;
+      const elementToOnChange = new Map();
+      const observer = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          const onChange = elementToOnChange.get(entry.target);
+          onChange?.(entry.isIntersecting);
+        }
+      }, {
+        root,
+        rootMargin: rootMargin != null ? `${rootMargin}px` : undefined,
+        scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined
+      });
+      setHandle({
+        observe(element, onChange_0) {
+          elementToOnChange.set(element, onChange_0);
+          observer.observe(element);
+          return () => {
+            elementToOnChange.delete(element);
+            observer.unobserve(element);
+          };
+        }
+      });
+      return () => {
+        observer.disconnect();
+        setHandle(null);
+      };
+    };
+    t1 = [rootRef, rootMargin, scrollMargin];
+    $[1] = rootMargin;
+    $[2] = rootRef;
+    $[3] = scrollMargin;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  useEffect(t0, t1);
+  return handle;
+}
+function useIsIntersecting(elementRef) {
+  const $ = c(5);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const handle = useContext(IntersectionObserverContext);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  let t0;
+  let t1;
+  if ($[1] !== elementRef || $[2] !== handle) {
+    t0 = () => {
+      const element = elementRef.current;
+      if (!element || !handle) {
+        return;
+      }
+      return handle.observe(element, setIsIntersecting);
+    };
+    t1 = [handle, elementRef, setIsIntersecting];
+    $[1] = elementRef;
+    $[2] = handle;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+  return isIntersecting;
+}
+function useIsIntersectingListener(elementRef, onChange) {
+  const $ = c(6);
+  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+    for (let $i = 0; $i < 6; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+  }
+  const handle = useContext(IntersectionObserverContext);
+  let t0;
+  let t1;
+  if ($[1] !== elementRef || $[2] !== handle || $[3] !== onChange) {
+    t0 = () => {
+      const element = elementRef.current;
+      if (!element || !handle) {
+        return;
+      }
+      return handle.observe(element, onChange);
+    };
+    t1 = [handle, elementRef, onChange];
+    $[1] = elementRef;
+    $[2] = handle;
+    $[3] = onChange;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  useEffect(t0, t1);
+}
+
+export { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting, useIsIntersectingListener };

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

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/table2.js';
 import { jsx } from 'react/jsx-runtime';
 
 class Cell extends PureComponent {

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

@@ -1,10 +1,10 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import sortableIcon from '@jetbrains/icons/unsorted-12px';
+import unsortedIcon from '@jetbrains/icons/unsorted-12px';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
 import Icon from '../icon/icon.js';
 import joinDataTestAttributes from '../global/data-tests.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/table2.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
@@ -46,7 +46,7 @@ class HeaderCell extends PureComponent {
     } = this.props;
     this.sortable = column.sortable === true;
     this.sorted = sortKey === column.id;
-    const glyph = this.sorted ? chevron12pxDown : sortableIcon;
+    const glyph = this.sorted ? chevron12pxDown : unsortedIcon;
     const classes = classNames(className, column.headerClassName, {
       [style.headerCell]: true,
       [style.headerCellSortable]: this.sortable,

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Checkbox from '../checkbox/checkbox.js';
 import getUID from '../global/get-uid.js';
 import HeaderCell from './header-cell.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/table2.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';

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

@@ -44,7 +44,7 @@ import '../popup/popup.target.js';
 import '../popup/position-css.js';
 import '../_helpers/theme.js';
 import './cell.js';
-import '../_helpers/table.js';
+import '../_helpers/table2.js';
 
 const getContainer = () => focusSensorHOC(Row);
 class RowWithFocusSensorCallbacks extends PureComponent {

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

@@ -11,7 +11,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import getUID from '../global/get-uid.js';
 import { createComposedRef } from '../global/compose-refs.js';
 import Cell from './cell.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/table2.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';

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

@@ -4,7 +4,7 @@
 export interface SelectionItem {
     id: string | number;
 }
-export interface TableSelectionConfig<T extends object> {
+export interface TableSelectionConfig<T> {
     data?: readonly T[] | undefined;
     selected?: Set<T> | undefined;
     focused?: T | null | undefined;
@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T extends object> {
+export default class Selection<T> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;

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

@@ -15,7 +15,7 @@ let Selection$1 = class Selection {
     focused = null,
     getKey = item => {
       // Default behavior stays backward compatible: use item's "id" if present
-      if ('id' in item) {
+      if (item && typeof item === 'object' && 'id' in item) {
         return item.id;
       }
       // If there's no id provided on item and no getKey supplied, fail fast with a clear message

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

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import classNames from 'classnames';
 import TableContainer from './table.js';
 import Selection$1 from './selection.js';
-import { s as style } from '../_helpers/table.js';
+import { s as style } from '../_helpers/table2.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-movable';
 import '../global/focus-sensor-hoc.js';

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

@@ -32,7 +32,7 @@ import '../global/data-tests.js';
 import './header-cell.js';
 import '@jetbrains/icons/unsorted-12px';
 import '@jetbrains/icons/chevron-12px-down';
-import '../_helpers/table.js';
+import '../_helpers/table2.js';
 import './selection-shortcuts-hoc.js';
 import './disable-hover-hoc.js';
 import './row-with-focus-sensor.js';

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;
+}