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

package/components/table/table.js

@@ -1,48 +1,52 @@
 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 { useVirtualItems, SpacerRow, VirtualizationContext } from '../internal/virtualization.js';
 import { DefaultItemRenderer } from './default-item-renderer.js';
-import { ColumnAnimationContext, TablePropsContext, defaultRowHeight } from './table-const.js';
+import { TablePropsContext, defaultRowHeight } from './table-const.js';
 import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex.js';
-import { useColumnAnimation } from '../internal/column-animation.js';
+import { useReorderAnimationContextValue, ReorderAnimationContext } from '../internal/reorder-animation-context.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 { useReorderLayoutContextValue, ReorderLayoutContext } from '../internal/reorder-layout-context.js';
 import { s as styles } from '../_helpers/table.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import '../global/intersection-observer-context.js';
 import '../global/schedule-with-cleanup.js';
 import './item-virtualization.js';
+import './reorder-item-layout.js';
 import 'memoize-one';
-import '../global/parse-css-duration.js';
-import '@jetbrains/icons/arrow-12px-down';
-import '@jetbrains/icons/arrow-12px-up';
+import '../internal/reorder-handle.js';
 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 '../global/parse-css-duration.js';
+import '@jetbrains/icons/arrow-12px-down';
+import '@jetbrains/icons/arrow-12px-up';
+import '@jetbrains/icons/settings-12px';
+import '@jetbrains/icons/trash-12px';
+import '@jetbrains/icons/unsorted-12px';
 import '../global/is-within-interactive-element.js';
 
 function Table(props) {
-  const $ = c(67);
-  if ($[0] !== "1440c2302382a13607fbec3a1414b9f71b4289aa94d28f71036161709e9e4ef7") {
-    for (let $i = 0; $i < 67; $i += 1) {
+  const $ = c(68);
+  if ($[0] !== "0b2671256cf6184450b7f5a987c20b706c8cb7e8a0bf848df36efecc0eb647dc") {
+    for (let $i = 0; $i < 68; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "1440c2302382a13607fbec3a1414b9f71b4289aa94d28f71036161709e9e4ef7";
+    $[0] = "0b2671256cf6184450b7f5a987c20b706c8cb7e8a0bf848df36efecc0eb647dc";
   }
   let className;
   let columns;
   let data;
   let getKey;
   let noColumnReorderAnimation;
+  let noItemReorderAnimation;
   let renderItem;
   let restProps;
   let scrollerRef;
@@ -64,70 +68,76 @@ function Table(props) {
       onColumnDelete,
       onColumnReorder,
       noColumnReorderAnimation: t8,
-      renderItem: t9,
-      virtualizeRows: t10,
-      scrollerRef: t11,
-      estimateHeight: t12,
-      lookaheadPx: t13,
-      retentionMarginPx: t14,
-      minScrollAndResizeDeltaPx: t15,
+      canReorderItem,
+      onItemReorder,
+      noItemReorderAnimation: t9,
+      renderItem: t10,
+      virtualizeRows: t11,
+      scrollerRef: t12,
+      estimateHeight: t13,
+      lookaheadPx: t14,
+      retentionMarginPx: t15,
+      minScrollAndResizeDeltaPx: t16,
       columnEditing,
       onColumnEditingRequest,
       columnEditButton,
       theadClassName,
       theadTrClassName,
-      tbodyClassName: t16,
-      ref: t17,
-      className: t18,
-      ...t19
+      tbodyClassName: t17,
+      ref: t18,
+      className: t19,
+      ...t20
     } = 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;
+    noItemReorderAnimation = t9;
+    renderItem = t10;
+    t0 = t11;
+    scrollerRef = t12;
+    t1 = t13;
+    t2 = t14;
+    t3 = t15;
+    t4 = t16;
+    tbodyClassName = t17;
+    userRef = t18;
+    className = t19;
+    restProps = t20;
     $[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;
+    $[7] = noItemReorderAnimation;
+    $[8] = renderItem;
+    $[9] = restProps;
+    $[10] = scrollerRef;
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = tbodyClassName;
+    $[17] = 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];
+    noItemReorderAnimation = $[7];
+    renderItem = $[8];
+    restProps = $[9];
+    scrollerRef = $[10];
+    t0 = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    tbodyClassName = $[16];
+    userRef = $[17];
   }
   const virtualizeRows = t0 === undefined ? false : t0;
   const estimateHeight = t1 === undefined ? _temp : t1;
@@ -136,53 +146,26 @@ function Table(props) {
   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) {
+  if ($[18] !== columns || $[19] !== data || $[20] !== noColumnReorderAnimation || $[21] !== noItemReorderAnimation) {
     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,
+      noColumnReorderAnimation,
+      noItemReorderAnimation,
       tableRef: localRef,
+      data,
       columns
     };
-    $[25] = columns;
-    $[26] = noColumnReorderAnimation;
-    $[27] = t6;
+    $[18] = columns;
+    $[19] = data;
+    $[20] = noColumnReorderAnimation;
+    $[21] = noItemReorderAnimation;
+    $[22] = t5;
   } else {
-    t6 = $[27];
+    t5 = $[22];
   }
-  const {
-    columnAnimation,
-    expectColumnReorder
-  } = useColumnAnimation(t6);
-  let t7;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = e => {
+  const reorderAnimationContextValue = useReorderAnimationContextValue(t5);
+  let t6;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = function handleRowNavigation(e) {
       if (e.defaultPrevented || isWithinNavigableElement(e.target)) {
         return;
       }
@@ -205,35 +188,60 @@ function Table(props) {
         }
       }
     };
-    $[28] = t7;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  const handleRowNavigation = t6;
+  let t7;
+  if ($[24] !== data || $[25] !== estimateHeight || $[26] !== lookaheadPx || $[27] !== minScrollAndResizeDeltaPx || $[28] !== retentionMarginPx || $[29] !== scrollerRef || $[30] !== virtualizeRows) {
+    t7 = {
+      enabled: virtualizeRows,
+      data,
+      scrollerRef,
+      tableRef: localRef,
+      estimateHeight,
+      lookaheadPx,
+      retentionMarginPx,
+      minScrollAndResizeDeltaPx
+    };
+    $[24] = data;
+    $[25] = estimateHeight;
+    $[26] = lookaheadPx;
+    $[27] = minScrollAndResizeDeltaPx;
+    $[28] = retentionMarginPx;
+    $[29] = scrollerRef;
+    $[30] = virtualizeRows;
+    $[31] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[31];
   }
-  const handleRowNavigation = t7;
+  const {
+    virtualItems,
+    virtualizationContextValue
+  } = useVirtualItems(t7);
+  const itemReorderLayoutContextValue = useReorderLayoutContextValue();
   let t8;
-  if ($[29] !== className) {
+  if ($[32] !== className) {
     t8 = classNames(styles.table, className);
-    $[29] = className;
-    $[30] = t8;
+    $[32] = className;
+    $[33] = t8;
   } else {
-    t8 = $[30];
+    t8 = $[33];
   }
   const t9 = useComposedRef(userRef, localRef);
   let t10;
-  if ($[31] !== expectColumnReorder) {
-    t10 = /*#__PURE__*/jsx(TableHeader, {
-      expectColumnReorder: expectColumnReorder
-    });
-    $[31] = expectColumnReorder;
-    $[32] = t10;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/jsx(TableHeader, {});
+    $[34] = t10;
   } else {
-    t10 = $[32];
+    t10 = $[34];
   }
   const t11 = virtualizeRows ? virtualItems : data;
   let t12;
-  if ($[33] !== columns || $[34] !== data || $[35] !== getKey || $[36] !== renderItem || $[37] !== t11 || $[38] !== virtualizeRows) {
+  if ($[35] !== columns || $[36] !== data || $[37] !== getKey || $[38] !== renderItem || $[39] !== t11 || $[40] !== virtualizeRows) {
     let t13;
-    if ($[40] !== columns || $[41] !== data || $[42] !== getKey || $[43] !== renderItem || $[44] !== virtualizeRows) {
+    if ($[42] !== columns || $[43] !== data || $[44] !== getKey || $[45] !== renderItem || $[46] !== virtualizeRows) {
       t13 = (item, index) => {
         let dataItem;
         let dataItemIndex;
@@ -260,103 +268,102 @@ function Table(props) {
           })
         }, getKey(dataItem, dataItemIndex, data));
       };
-      $[40] = columns;
-      $[41] = data;
-      $[42] = getKey;
-      $[43] = renderItem;
-      $[44] = virtualizeRows;
-      $[45] = t13;
+      $[42] = columns;
+      $[43] = data;
+      $[44] = getKey;
+      $[45] = renderItem;
+      $[46] = virtualizeRows;
+      $[47] = t13;
     } else {
-      t13 = $[45];
+      t13 = $[47];
     }
     t12 = t11.map(t13);
-    $[33] = columns;
-    $[34] = data;
-    $[35] = getKey;
-    $[36] = renderItem;
-    $[37] = t11;
-    $[38] = virtualizeRows;
-    $[39] = t12;
+    $[35] = columns;
+    $[36] = data;
+    $[37] = getKey;
+    $[38] = renderItem;
+    $[39] = t11;
+    $[40] = virtualizeRows;
+    $[41] = t12;
   } else {
-    t12 = $[39];
+    t12 = $[41];
   }
   let t13;
-  if ($[46] !== t12 || $[47] !== tbodyClassName) {
-    t13 = /*#__PURE__*/jsx("tbody", {
-      className: tbodyClassName,
-      onKeyDown: handleRowNavigation,
+  if ($[48] !== itemReorderLayoutContextValue || $[49] !== t12) {
+    t13 = /*#__PURE__*/jsx(ReorderLayoutContext, {
+      value: itemReorderLayoutContextValue,
       children: t12
     });
-    $[46] = t12;
-    $[47] = tbodyClassName;
-    $[48] = t13;
+    $[48] = itemReorderLayoutContextValue;
+    $[49] = t12;
+    $[50] = t13;
   } else {
-    t13 = $[48];
+    t13 = $[50];
   }
   let t14;
-  if ($[49] !== collapseItemIntoSpacer || $[50] !== t13) {
-    t14 = /*#__PURE__*/jsx(CollapseItemIntoSpacerContext, {
-      value: collapseItemIntoSpacer,
+  if ($[51] !== t13 || $[52] !== virtualizationContextValue) {
+    t14 = /*#__PURE__*/jsx(VirtualizationContext, {
+      value: virtualizationContextValue,
       children: t13
     });
-    $[49] = collapseItemIntoSpacer;
-    $[50] = t13;
-    $[51] = t14;
+    $[51] = t13;
+    $[52] = virtualizationContextValue;
+    $[53] = t14;
   } else {
-    t14 = $[51];
+    t14 = $[53];
   }
   let t15;
-  if ($[52] !== intersectionObserverHandle || $[53] !== t14) {
-    t15 = /*#__PURE__*/jsx(IntersectionObserverContext, {
-      value: intersectionObserverHandle,
+  if ($[54] !== t14 || $[55] !== tbodyClassName) {
+    t15 = /*#__PURE__*/jsx("tbody", {
+      className: tbodyClassName,
+      onKeyDown: handleRowNavigation,
       children: t14
     });
-    $[52] = intersectionObserverHandle;
-    $[53] = t14;
-    $[54] = t15;
+    $[54] = t14;
+    $[55] = tbodyClassName;
+    $[56] = t15;
   } else {
-    t15 = $[54];
+    t15 = $[56];
   }
   let t16;
-  if ($[55] !== restProps || $[56] !== t10 || $[57] !== t15 || $[58] !== t8 || $[59] !== t9) {
+  if ($[57] !== restProps || $[58] !== t15 || $[59] !== t8 || $[60] !== 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;
+    $[57] = restProps;
+    $[58] = t15;
+    $[59] = t8;
+    $[60] = t9;
+    $[61] = t16;
   } else {
-    t16 = $[60];
+    t16 = $[61];
   }
   let t17;
-  if ($[61] !== columnAnimation || $[62] !== t16) {
-    t17 = /*#__PURE__*/jsx(ColumnAnimationContext, {
-      value: columnAnimation,
+  if ($[62] !== reorderAnimationContextValue || $[63] !== t16) {
+    t17 = /*#__PURE__*/jsx(ReorderAnimationContext, {
+      value: reorderAnimationContextValue,
       children: t16
     });
-    $[61] = columnAnimation;
-    $[62] = t16;
-    $[63] = t17;
+    $[62] = reorderAnimationContextValue;
+    $[63] = t16;
+    $[64] = t17;
   } else {
-    t17 = $[63];
+    t17 = $[64];
   }
   let t18;
-  if ($[64] !== props || $[65] !== t17) {
+  if ($[65] !== props || $[66] !== t17) {
     t18 = /*#__PURE__*/jsx(TablePropsContext, {
       value: props,
       children: t17
     });
-    $[64] = props;
-    $[65] = t17;
-    $[66] = t18;
+    $[65] = props;
+    $[66] = t17;
+    $[67] = t18;
   } else {
-    t18 = $[66];
+    t18 = $[67];
   }
   return t18;
 }

package/components/user-agreement/service.js

@@ -11,8 +11,9 @@ import '../global/get-uid.js';
 import 'react';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -30,6 +31,11 @@ import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
 import '../global/configuration.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import '../_helpers/link.js';

package/components/user-card/card.js

@@ -28,8 +28,9 @@ import '../alert-service/alert-service.js';
 import 'react-dom/client';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../loader-inline/loader-inline.js';
 import '../button/button.js';
@@ -40,6 +41,11 @@ import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/icon-svg.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import '../clipboard/clipboard-fallback.js';

package/components/user-card/smart-user-card-tooltip.d.ts

@@ -10,6 +10,6 @@ export default class SmartUserCardTooltip extends Component<SmartUserCardTooltip
         loading: boolean;
     };
     loadUser: () => Promise<void>;
-    renderNoUser: () => "" | import("react").JSX.Element;
+    renderNoUser: () => import("react").JSX.Element | "";
     render(): import("react").JSX.Element;
 }

package/components/user-card/smart-user-card-tooltip.js

@@ -51,9 +51,15 @@ import '../alert-service/alert-service.js';
 import 'react-dom/client';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import '../clipboard/clipboard-fallback.js';
 import '../tag/tag.js';

package/components/user-card/tooltip.js

@@ -49,10 +49,16 @@ import '../alert-service/alert-service.js';
 import 'react-dom/client';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../loader-inline/loader-inline.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import '../clipboard/clipboard-fallback.js';
 import '../tag/tag.js';

package/components/user-card/user-card.js

@@ -25,8 +25,9 @@ import '../alert-service/alert-service.js';
 import 'react-dom/client';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
@@ -39,6 +40,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import '../clipboard/clipboard-fallback.js';

package/components/util-stories.d.ts

@@ -19,9 +19,9 @@ export declare function createRandom(seed: bigint): {
     /**
      * Up to random n items (in random order) from the array
      */
-    <T>(array: T[], n: number): T[];
+    <T>(array: readonly T[], n: number): T[];
     /**
      * Random item from the array
      */
-    <T>(array: T[]): T;
+    <T>(array: readonly T[]): T;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -120,7 +120,7 @@
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
-    "focus-trap": "^8.2.1",
+    "focus-trap": "^8.2.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",