@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.4

package/components/table/table.js

@@ -1,26 +1,367 @@
-import Table from './table-component.js';
-import 'react/compiler-runtime';
-import 'react';
-import 'classnames';
-import 'react-merge-refs';
-import '../global/intersection-observer-context.js';
-import './table-virtualize.js';
-import '../_helpers/table.js';
-import 'react/jsx-runtime';
-import './default-item-renderer.js';
-import './table-const.js';
-import './table-primitives.js';
-import '@jetbrains/icons/unsorted-12px';
+import { c } from 'react/compiler-runtime';
+import { useRef, Fragment } from 'react';
+import classNames from 'classnames';
+import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
+import { useVirtualItems, SpacerRow, CollapseItemIntoSpacerContext } from '../internal/virtual-items.js';
+import { DefaultItemRenderer } from './default-item-renderer.js';
+import { ColumnAnimationContext, TablePropsContext, defaultRowHeight } from './table-const.js';
+import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex.js';
+import { useColumnAnimation } from '../internal/column-animation.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { TableHeader } from '../internal/table-header.js';
+import { keyboardFocusableAttrName } from './table-primitives.js';
+import { isWithinNavigableElement } from '../global/is-within-navigable-element.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../global/schedule-with-cleanup.js';
+import './item-virtualization.js';
+import 'memoize-one';
+import '../global/parse-css-duration.js';
 import '@jetbrains/icons/arrow-12px-down';
 import '@jetbrains/icons/arrow-12px-up';
+import '@jetbrains/icons/drag-12px';
+import '@jetbrains/icons/settings-12px';
 import '@jetbrains/icons/trash-12px';
+import '@jetbrains/icons/unsorted-12px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
-import './table-row-focus.js';
-
+import '../global/is-within-interactive-element.js';
 
+function Table(props) {
+  const $ = c(67);
+  if ($[0] !== "1440c2302382a13607fbec3a1414b9f71b4289aa94d28f71036161709e9e4ef7") {
+    for (let $i = 0; $i < 67; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "1440c2302382a13607fbec3a1414b9f71b4289aa94d28f71036161709e9e4ef7";
+  }
+  let className;
+  let columns;
+  let data;
+  let getKey;
+  let noColumnReorderAnimation;
+  let renderItem;
+  let restProps;
+  let scrollerRef;
+  let t0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tbodyClassName;
+  let userRef;
+  if ($[1] !== props) {
+    const {
+      data: t5,
+      columns: t6,
+      getKey: t7,
+      noHeader,
+      stickyHeader,
+      onSort,
+      onColumnDelete,
+      onColumnReorder,
+      noColumnReorderAnimation: t8,
+      renderItem: t9,
+      virtualizeRows: t10,
+      scrollerRef: t11,
+      estimateHeight: t12,
+      lookaheadPx: t13,
+      retentionMarginPx: t14,
+      minScrollAndResizeDeltaPx: t15,
+      columnEditing,
+      onColumnEditingRequest,
+      columnEditButton,
+      theadClassName,
+      theadTrClassName,
+      tbodyClassName: t16,
+      ref: t17,
+      className: t18,
+      ...t19
+    } = props;
+    data = t5;
+    columns = t6;
+    getKey = t7;
+    noColumnReorderAnimation = t8;
+    renderItem = t9;
+    t0 = t10;
+    scrollerRef = t11;
+    t1 = t12;
+    t2 = t13;
+    t3 = t14;
+    t4 = t15;
+    tbodyClassName = t16;
+    userRef = t17;
+    className = t18;
+    restProps = t19;
+    $[1] = props;
+    $[2] = className;
+    $[3] = columns;
+    $[4] = data;
+    $[5] = getKey;
+    $[6] = noColumnReorderAnimation;
+    $[7] = renderItem;
+    $[8] = restProps;
+    $[9] = scrollerRef;
+    $[10] = t0;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = tbodyClassName;
+    $[16] = userRef;
+  } else {
+    className = $[2];
+    columns = $[3];
+    data = $[4];
+    getKey = $[5];
+    noColumnReorderAnimation = $[6];
+    renderItem = $[7];
+    restProps = $[8];
+    scrollerRef = $[9];
+    t0 = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    tbodyClassName = $[15];
+    userRef = $[16];
+  }
+  const virtualizeRows = t0 === undefined ? false : t0;
+  const estimateHeight = t1 === undefined ? _temp : t1;
+  const lookaheadPx = t2 === undefined ? 400 : t2;
+  const retentionMarginPx = t3 === undefined ? 450 : t3;
+  const minScrollAndResizeDeltaPx = t4 === undefined ? 50 : t4;
+  const localRef = useRef(null);
+  let t5;
+  if ($[17] !== data || $[18] !== estimateHeight || $[19] !== lookaheadPx || $[20] !== minScrollAndResizeDeltaPx || $[21] !== retentionMarginPx || $[22] !== scrollerRef || $[23] !== virtualizeRows) {
+    t5 = {
+      enabled: virtualizeRows,
+      data,
+      scrollerRef,
+      tableRef: localRef,
+      estimateHeight,
+      lookaheadPx,
+      retentionMarginPx,
+      minScrollAndResizeDeltaPx
+    };
+    $[17] = data;
+    $[18] = estimateHeight;
+    $[19] = lookaheadPx;
+    $[20] = minScrollAndResizeDeltaPx;
+    $[21] = retentionMarginPx;
+    $[22] = scrollerRef;
+    $[23] = virtualizeRows;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  const {
+    virtualItems,
+    intersectionObserverHandle,
+    collapseItemIntoSpacer
+  } = useVirtualItems(t5);
+  let t6;
+  if ($[25] !== columns || $[26] !== noColumnReorderAnimation) {
+    t6 = {
+      disabled: noColumnReorderAnimation,
+      tableRef: localRef,
+      columns
+    };
+    $[25] = columns;
+    $[26] = noColumnReorderAnimation;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  const {
+    columnAnimation,
+    expectColumnReorder
+  } = useColumnAnimation(t6);
+  let t7;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = e => {
+      if (e.defaultPrevented || isWithinNavigableElement(e.target)) {
+        return;
+      }
+      const arrowUp = e.key === "ArrowUp";
+      const arrowDown = e.key === "ArrowDown";
+      if (!arrowUp && !arrowDown) {
+        return;
+      }
+      const currentRow = e.target.closest("tr");
+      if (currentRow?.parentElement?.parentElement !== localRef.current) {
+        return;
+      }
+      let candidate = currentRow;
+      while (candidate) {
+        candidate = arrowUp ? candidate.previousElementSibling : candidate.nextElementSibling;
+        if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+          focusWithTemporaryTabIndex(candidate);
+          e.preventDefault();
+          return;
+        }
+      }
+    };
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  const handleRowNavigation = t7;
+  let t8;
+  if ($[29] !== className) {
+    t8 = classNames(styles.table, className);
+    $[29] = className;
+    $[30] = t8;
+  } else {
+    t8 = $[30];
+  }
+  const t9 = useComposedRef(userRef, localRef);
+  let t10;
+  if ($[31] !== expectColumnReorder) {
+    t10 = /*#__PURE__*/jsx(TableHeader, {
+      expectColumnReorder: expectColumnReorder
+    });
+    $[31] = expectColumnReorder;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  const t11 = virtualizeRows ? virtualItems : data;
+  let t12;
+  if ($[33] !== columns || $[34] !== data || $[35] !== getKey || $[36] !== renderItem || $[37] !== t11 || $[38] !== virtualizeRows) {
+    let t13;
+    if ($[40] !== columns || $[41] !== data || $[42] !== getKey || $[43] !== renderItem || $[44] !== virtualizeRows) {
+      t13 = (item, index) => {
+        let dataItem;
+        let dataItemIndex;
+        if (virtualizeRows) {
+          const virtualItem = item;
+          if (virtualItem.type === "spacer") {
+            return /*#__PURE__*/jsx(SpacerRow, {
+              spacer: virtualItem,
+              colSpan: columns.length
+            }, virtualItem.key);
+          }
+          dataItemIndex = virtualItem.index;
+          if (dataItemIndex < 0 || dataItemIndex >= data.length) {
+            return null;
+          }
+          dataItem = data[dataItemIndex];
+        } else {
+          dataItem = item;
+          dataItemIndex = index;
+        }
+        return /*#__PURE__*/jsx(Fragment, {
+          children: renderItem ? renderItem(dataItem, dataItemIndex, data) : /*#__PURE__*/jsx(DefaultItemRenderer, {
+            index: dataItemIndex
+          })
+        }, getKey(dataItem, dataItemIndex, data));
+      };
+      $[40] = columns;
+      $[41] = data;
+      $[42] = getKey;
+      $[43] = renderItem;
+      $[44] = virtualizeRows;
+      $[45] = t13;
+    } else {
+      t13 = $[45];
+    }
+    t12 = t11.map(t13);
+    $[33] = columns;
+    $[34] = data;
+    $[35] = getKey;
+    $[36] = renderItem;
+    $[37] = t11;
+    $[38] = virtualizeRows;
+    $[39] = t12;
+  } else {
+    t12 = $[39];
+  }
+  let t13;
+  if ($[46] !== t12 || $[47] !== tbodyClassName) {
+    t13 = /*#__PURE__*/jsx("tbody", {
+      className: tbodyClassName,
+      onKeyDown: handleRowNavigation,
+      children: t12
+    });
+    $[46] = t12;
+    $[47] = tbodyClassName;
+    $[48] = t13;
+  } else {
+    t13 = $[48];
+  }
+  let t14;
+  if ($[49] !== collapseItemIntoSpacer || $[50] !== t13) {
+    t14 = /*#__PURE__*/jsx(CollapseItemIntoSpacerContext, {
+      value: collapseItemIntoSpacer,
+      children: t13
+    });
+    $[49] = collapseItemIntoSpacer;
+    $[50] = t13;
+    $[51] = t14;
+  } else {
+    t14 = $[51];
+  }
+  let t15;
+  if ($[52] !== intersectionObserverHandle || $[53] !== t14) {
+    t15 = /*#__PURE__*/jsx(IntersectionObserverContext, {
+      value: intersectionObserverHandle,
+      children: t14
+    });
+    $[52] = intersectionObserverHandle;
+    $[53] = t14;
+    $[54] = t15;
+  } else {
+    t15 = $[54];
+  }
+  let t16;
+  if ($[55] !== restProps || $[56] !== t10 || $[57] !== t15 || $[58] !== t8 || $[59] !== t9) {
+    t16 = /*#__PURE__*/jsxs("table", {
+      className: t8,
+      ref: t9,
+      ...restProps,
+      children: [t10, t15]
+    });
+    $[55] = restProps;
+    $[56] = t10;
+    $[57] = t15;
+    $[58] = t8;
+    $[59] = t9;
+    $[60] = t16;
+  } else {
+    t16 = $[60];
+  }
+  let t17;
+  if ($[61] !== columnAnimation || $[62] !== t16) {
+    t17 = /*#__PURE__*/jsx(ColumnAnimationContext, {
+      value: columnAnimation,
+      children: t16
+    });
+    $[61] = columnAnimation;
+    $[62] = t16;
+    $[63] = t17;
+  } else {
+    t17 = $[63];
+  }
+  let t18;
+  if ($[64] !== props || $[65] !== t17) {
+    t18 = /*#__PURE__*/jsx(TablePropsContext, {
+      value: props,
+      children: t17
+    });
+    $[64] = props;
+    $[65] = t17;
+    $[66] = t18;
+  } else {
+    t18 = $[66];
+  }
+  return t18;
+}
+function _temp() {
+  return defaultRowHeight;
+}
 
 export { Table as default };

package/components/tooltip/tooltip.js

@@ -4,7 +4,7 @@ import Popup from '../popup/popup.js';
 import { Listeners } from '../global/dom.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import scheduleRAF from '../global/schedule-raf.js';
-import { T as Theme, b as ThemeProvider } from '../_helpers/theme.js';
+import { T as Theme, a as ThemeProvider } from '../_helpers/theme.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react-dom';
 import '../global/get-uid.js';

package/components/user-agreement/service.js

@@ -8,13 +8,8 @@ import { ControlsHeightContext, getGlobalControlsHeight } from '../global/contro
 import UserAgreement from './user-agreement.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/get-uid.js';
-import '../alert/container.js';
 import 'react';
-import 'react-dom';
 import 'classnames';
-import '../global/data-tests.js';
-import '../link/clickable-link.js';
-import '../_helpers/link.js';
 import '@jetbrains/icons/exception';
 import '@jetbrains/icons/checkmark';
 import '@jetbrains/icons/warning';
@@ -26,13 +21,18 @@ import '../_helpers/icon-svg.js';
 import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../loader-inline/loader-inline.js';
+import '../global/data-tests.js';
 import '../global/dom.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
+import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
-import '../_helpers/theme.js';
 import '../global/configuration.js';
+import '../_helpers/theme.js';
+import '../alert/container.js';
+import 'react-dom';
+import '../_helpers/link.js';
 import '../dialog/dialog.js';
 import '../island/island.js';
 import '../island/adaptive-island-hoc.js';

package/components/util-stories.d.ts

@@ -1 +1,27 @@
 export declare const hideAddonsPanelParam = "hideAddonsPanel";
+export declare function createRandom(seed: bigint): {
+    /**
+     * Fractional in [0, 1)
+     */
+    (): number;
+    /**
+     * Integer in [0, to)
+     */
+    (to: number): number;
+    /**
+     * Integer in [from, to)
+     */
+    (from: number, to: number): number;
+    /**
+     * Date in [from, to)
+     */
+    (from: Date, to: Date): Date;
+    /**
+     * Up to random n items (in random order) from the array
+     */
+    <T>(array: T[], n: number): T[];
+    /**
+     * Random item from the array
+     */
+    <T>(array: T[]): T;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-beta.4",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -112,7 +112,7 @@
     }
   },
   "dependencies": {
-    "@jetbrains/icons": "^5.22.0",
+    "@jetbrains/icons": "^5.23.0",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",

package/components/date-picker/use-intersection-observer.d.ts

@@ -1,6 +0,0 @@
-import { type RefObject } from 'react';
-export declare function useIntersectionObserver(containerRef: RefObject<HTMLElement | null>, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observeVisibility(element: Element, setVisible: (isVisible: boolean) => void): () => void;
-}
-export declare function useVisibility(handle: IntersectionObserverHandle | null, elementRef: RefObject<Element | null>): boolean;

package/components/date-picker/use-intersection-observer.js

@@ -1,93 +0,0 @@
-import { c } from 'react/compiler-runtime';
-import { useState, useEffect } from 'react';
-
-function useIntersectionObserver(containerRef, t0) {
-  const $ = c(5);
-  if ($[0] !== "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a") {
-    for (let $i = 0; $i < 5; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a";
-  }
-  const scrollMargin = t0 === undefined ? 0 : t0;
-  const [handle, setHandle] = useState(null);
-  let t1;
-  let t2;
-  if ($[1] !== containerRef || $[2] !== scrollMargin) {
-    t1 = () => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      const elementToSetVisible = new Map();
-      const observer = new IntersectionObserver(entries => {
-        for (const entry of entries) {
-          const setVisible = elementToSetVisible.get(entry.target);
-          setVisible?.(entry.isIntersecting);
-        }
-      }, {
-        root: container,
-        ...(scrollMargin ? {
-          scrollMargin: `${scrollMargin}px`
-        } : {})
-      });
-      setHandle({
-        observeVisibility(element, setVisible_0) {
-          elementToSetVisible.set(element, setVisible_0);
-          observer.observe(element);
-          return () => {
-            elementToSetVisible.delete(element);
-            observer.unobserve(element);
-          };
-        }
-      });
-      return () => {
-        observer.disconnect();
-        setHandle(null);
-      };
-    };
-    t2 = [containerRef, scrollMargin];
-    $[1] = containerRef;
-    $[2] = scrollMargin;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t1 = $[3];
-    t2 = $[4];
-  }
-  useEffect(t1, t2);
-  return handle;
-}
-function useVisibility(handle, elementRef) {
-  const $ = c(5);
-  if ($[0] !== "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a") {
-    for (let $i = 0; $i < 5; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a";
-  }
-  const [isVisible, setIsVisible] = useState(false);
-  let t0;
-  let t1;
-  if ($[1] !== elementRef || $[2] !== handle) {
-    t0 = () => {
-      const element = elementRef.current;
-      if (!element || !handle) {
-        return;
-      }
-      return handle.observeVisibility(element, setIsVisible);
-    };
-    t1 = [handle, elementRef, setIsVisible];
-    $[1] = elementRef;
-    $[2] = handle;
-    $[3] = t0;
-    $[4] = t1;
-  } else {
-    t0 = $[3];
-    t1 = $[4];
-  }
-  useEffect(t0, t1);
-  return isVisible;
-}
-
-export { useIntersectionObserver, useVisibility };

package/components/global/composeRefs.d.ts

@@ -1,6 +0,0 @@
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-declare const createComposedRef: typeof _createComposedRef;
-export { createComposedRef };

package/components/global/composeRefs.js

@@ -1,9 +0,0 @@
-import { createComposedRef as createComposedRef$1 } from './compose-refs.js';
-import 'memoize-one';
-
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-const createComposedRef = createComposedRef$1;
-
-export { createComposedRef };

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

@@ -1,80 +0,0 @@
-import { type ComponentPropsWithRef } from 'react';
-import type { TableProps } from './table';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * For every prop and component referenced here, see the corresponding docs
- * for detailed behavior.
- *
- * ## Minimal usage
- *
- * You need the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `name` (not required but needed in most cases)
- *   - `renderCell` (not required but needed in most cases)
- *
- * ## Selection
- *
- * Selection is handled on item level via `renderItem` (often with
- * `DefaultItemRenderer`) and its props:
- *
- * - `clickable`
- * - `selected`
- * - `onClick` or `onPointerUp`, etc.
- *
- * You may use the TableSelection from `global/table-selection.ts` for the selection control:
- *
- * - `selected={tableSelection.isSelected(item)}`
- * - `onClick={() => setTableSelection(tableSelection.toggle(item))}`
- *
- * See the stories for examples with this utility.
- *
- * Additionally, for accessibility, you will likely need a cell with a checkbox
- * to toggle item selection.
- *
- * ## Sorting
- *
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`. Do not leave `undefined`
- *   for accessibility reasons.
- * - Handle `TableProps.onSort` callback in the client code. It is expected
- *   to update `columns` by setting the new `sortOrder` value for
- *   the corresponding column, and updating the data accordingly.
- *
- * ## Focus
- *
- * The table supports the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
- * technique to focus rows with the up/down arrow keys and, possibly, with the pointer.
- * To support it, use the following props of the `DefaultItemRenderer`:
- *
- * - `keyboardFocusable`
- * - Possibly `onClick` invoking `focusRow(e.currentTarget)`
- *
- * In your custom row renderer, use `TableRow`, which also has the `keyboardFocusable` prop.
- *
- * ## Deleting columns
- *
- * You need the following to support deleting columns:
- *
- * - Make sure the `column` has a proper `name` or `key` prop, which will be
- *   automatically included in the aria-label of `<DeleteColumnButton />`.
- * - Include `<DeleteColumnButton />` in a column header
- * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
- *   to update `columns` by removing the corresponding column.
- *
- * ## Row virtualization
- *
- * To render only rows near the viewport and replace others with spacers, use:
- *
- * - `virtualizeRows`
- * - `scrollerRef` — required when the scrollable container is not the whole document
- * - `estimateHeight` — recommended when rows are expected to be taller than
- *   the default height (e.g. multiline or custom content)
- * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
- */
-export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): import("react").JSX.Element;