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

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

@@ -8,7 +8,7 @@ import '../global/data-tests.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';

package/components/user-card/tooltip.js

@@ -7,7 +7,7 @@ import { jsx } from 'react/jsx-runtime';
 import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';

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

@@ -11,7 +11,7 @@ import '../global/url.js';
 import '../global/dom.js';
 import '../global/memoize.js';
 import '../avatar/fallback-avatar.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/get-uid.js';
 import '../avatar/avatar-size.js';
 import 'react/jsx-runtime';

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.2",
+  "version": "8.0.0-beta.4",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -97,11 +97,11 @@
   "readmeFilename": "README.md",
   "devDependencies": {},
   "peerDependencies": {
-    "@types/react": ">=18.0.0",
-    "@types/react-dom": ">=18.0.0",
+    "@types/react": ">=19.2.0",
+    "@types/react-dom": ">=19.2.0",
     "core-js": ">=3.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -112,11 +112,11 @@
     }
   },
   "dependencies": {
-    "@jetbrains/icons": "^5.22.0",
+    "@jetbrains/icons": "^5.23.0",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
-    "date-fns": "^4.3.0",
+    "date-fns": "^4.4.0",
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",

package/components/_helpers/table2.js

@@ -1,3 +0,0 @@
-var style = {"row":"ring-table-row","dragHandle":"ring-table-dragHandle","tableWrapper":"ring-table-tableWrapper","table":"ring-table-table","userSelectNone":"ring-table-userSelectNone","headerCell":"ring-table-headerCell ring-global-font-smaller-lower ring-global-font-smaller ring-global-font-lower ring-global-font","headerCellSorted":"ring-table-headerCellSorted","headerCellSortable":"ring-table-headerCellSortable","sorter":"ring-table-sorter","sortedUp":"ring-table-sortedUp","icon":"ring-table-icon","caption":"ring-table-caption","tableHead":"ring-table-tableHead","subHeaderSticky":"ring-table-subHeaderSticky","disabledHover":"ring-table-disabledHover","rowSelected":"ring-table-rowSelected","rowFocused":"ring-table-rowFocused","cell":"ring-table-cell ring-global-ellipsis","loadingOverlay":"ring-table-loadingOverlay","wideFirstColumn":"ring-table-wideFirstColumn","cellUnlimited":"ring-table-cellUnlimited","cellRight":"ring-table-cellRight","metaColumn":"ring-table-metaColumn","headerMetaColumn":"ring-table-headerMetaColumn","visibleDragHandle":"ring-table-visibleDragHandle","rowCollapseExpandButton":"ring-table-rowCollapseExpandButton","draggingRow":"ring-table-draggingRow","draggingTable":"ring-table-draggingTable","tableMessage":"ring-table-tableMessage"};
-
-export { style as s };

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/global/use-event-callback.d.ts

@@ -1 +0,0 @@
-export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -1,44 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { useRef, useLayoutEffect } from 'react';
-
-// TODO deprecate in favor of useEffectEvent after dropping support for React < 19.2
-function useEventCallback(fn) {
-  const $ = c(4);
-  if ($[0] !== "889dd896626d55d7ee8b6d837575138afdbc32f6790b79c2a3b63812dc174b4f") {
-    for (let $i = 0; $i < 4; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "889dd896626d55d7ee8b6d837575138afdbc32f6790b79c2a3b63812dc174b4f";
-  }
-  const ref = useRef(null);
-  let t0;
-  if ($[1] !== fn) {
-    t0 = () => {
-      ref.current = fn;
-    };
-    $[1] = fn;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  useLayoutEffect(t0);
-  let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = (...t2) => {
-      const args = t2;
-      const {
-        current
-      } = ref;
-      if (current === null || current === undefined) {
-        throw new Error("callback created in useEventCallback can only be called from event handlers");
-      }
-      return current(...args);
-    };
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
-}
-
-export { useEventCallback as default };

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

@@ -1,24 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export declare function SortButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
-/**
- * Include it in a column header to make the column deletable.
- * Beware that `column.name ?? String(column.key)` is used in the aria-label.
- * Handle clicks with {@link TableProps.onColumnDelete}.
- */
-export declare function DeleteColumnButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-export declare function TableRow(props: {
-    ref?: React.Ref<HTMLTableRowElement>;
-} & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
-/**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
- */
-export declare function TableCell(props: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;

package/components/table/table-base.js

@@ -1,311 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { useContext } from 'react';
-import classNames from 'classnames';
-import unsortedIcon from '@jetbrains/icons/unsorted-12px';
-import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
-import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
-import trashIcon from '@jetbrains/icons/trash-12px';
-import Icon from '../icon/icon.js';
-import { TablePropsContext, ColumnIndexContext } from './table-const.js';
-import { s as styles } from '../_helpers/table.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'util-deprecate';
-import '../icon/icon.constants.js';
-import '../_helpers/icon-svg.js';
-import '../global/memoize.js';
-
-function SortButton(props) {
-  var _column$sortOrder;
-  const $ = c(21);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
-    for (let $i = 0; $i < 21; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
-  }
-  const tableProps = useContext(TablePropsContext);
-  const columnIndex = useContext(ColumnIndexContext);
-  const column = tableProps?.columns[columnIndex];
-  if (!tableProps || !column) {
-    return null;
-  }
-  const sortOrder = (_column$sortOrder = column.sortOrder) !== null && _column$sortOrder !== void 0 ? _column$sortOrder : "none";
-  const glyph = sortOrder === "none" ? unsortedIcon : sortOrder === "ascending" ? arrowUpIcon : arrowDownIcon;
-  let children;
-  let className;
-  let onClick;
-  let restProps;
-  if ($[1] !== props) {
-    ({
-      className,
-      children,
-      onClick,
-      ...restProps
-    } = props);
-    $[1] = props;
-    $[2] = children;
-    $[3] = className;
-    $[4] = onClick;
-    $[5] = restProps;
-  } else {
-    children = $[2];
-    className = $[3];
-    onClick = $[4];
-    restProps = $[5];
-  }
-  let t0;
-  if ($[6] !== columnIndex || $[7] !== onClick || $[8] !== sortOrder || $[9] !== tableProps) {
-    t0 = function handleClick(e) {
-      onClick?.(e);
-      if (!e.defaultPrevented) {
-        const sequence = ["none", "ascending", "descending"];
-        const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
-        tableProps.onSort?.(columnIndex, nextOrder);
-      }
-    };
-    $[6] = columnIndex;
-    $[7] = onClick;
-    $[8] = sortOrder;
-    $[9] = tableProps;
-    $[10] = t0;
-  } else {
-    t0 = $[10];
-  }
-  const handleClick = t0;
-  let t1;
-  if ($[11] !== className) {
-    t1 = classNames(styles.headerButton, className);
-    $[11] = className;
-    $[12] = t1;
-  } else {
-    t1 = $[12];
-  }
-  let t2;
-  if ($[13] !== glyph) {
-    t2 = /*#__PURE__*/jsx(Icon, {
-      glyph: glyph,
-      "aria-hidden": true
-    });
-    $[13] = glyph;
-    $[14] = t2;
-  } else {
-    t2 = $[14];
-  }
-  let t3;
-  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t1 || $[19] !== t2) {
-    t3 = /*#__PURE__*/jsxs("button", {
-      type: "button",
-      className: t1,
-      onClick: handleClick,
-      ...restProps,
-      children: [children, " ", t2]
-    });
-    $[15] = children;
-    $[16] = handleClick;
-    $[17] = restProps;
-    $[18] = t1;
-    $[19] = t2;
-    $[20] = t3;
-  } else {
-    t3 = $[20];
-  }
-  return t3;
-}
-/**
- * Include it in a column header to make the column deletable.
- * Beware that `column.name ?? String(column.key)` is used in the aria-label.
- * Handle clicks with {@link TableProps.onColumnDelete}.
- */
-function DeleteColumnButton(props) {
-  var _column$name;
-  const $ = c(17);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
-    for (let $i = 0; $i < 17; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
-  }
-  const tableProps = useContext(TablePropsContext);
-  const columnIndex = useContext(ColumnIndexContext);
-  const column = tableProps?.columns[columnIndex];
-  if (!tableProps || !column) {
-    return null;
-  }
-  let className;
-  let onClick;
-  let restProps;
-  if ($[1] !== props) {
-    ({
-      className,
-      onClick,
-      ...restProps
-    } = props);
-    $[1] = props;
-    $[2] = className;
-    $[3] = onClick;
-    $[4] = restProps;
-  } else {
-    className = $[2];
-    onClick = $[3];
-    restProps = $[4];
-  }
-  let t0;
-  if ($[5] !== columnIndex || $[6] !== onClick || $[7] !== tableProps) {
-    t0 = function handleClick(e) {
-      onClick?.(e);
-      if (!e.defaultPrevented) {
-        tableProps.onColumnDelete?.(columnIndex);
-      }
-    };
-    $[5] = columnIndex;
-    $[6] = onClick;
-    $[7] = tableProps;
-    $[8] = t0;
-  } else {
-    t0 = $[8];
-  }
-  const handleClick = t0;
-  let t1;
-  if ($[9] !== className) {
-    t1 = classNames(styles.headerButton, styles.deleteColumnButton, className);
-    $[9] = className;
-    $[10] = t1;
-  } else {
-    t1 = $[10];
-  }
-  const t2 = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}`;
-  let t3;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/jsx(Icon, {
-      glyph: trashIcon
-    });
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  let t4;
-  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t1 || $[15] !== t2) {
-    t4 = /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: t1,
-      onClick: handleClick,
-      "aria-label": t2,
-      ...restProps,
-      children: t3
-    });
-    $[12] = handleClick;
-    $[13] = restProps;
-    $[14] = t1;
-    $[15] = t2;
-    $[16] = t4;
-  } else {
-    t4 = $[16];
-  }
-  return t4;
-}
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-function TableRow(props) {
-  const $ = c(11);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
-    for (let $i = 0; $i < 11; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
-  }
-  let className;
-  let ref;
-  let restProps;
-  if ($[1] !== props) {
-    ({
-      ref,
-      className,
-      ...restProps
-    } = props);
-    $[1] = props;
-    $[2] = className;
-    $[3] = ref;
-    $[4] = restProps;
-  } else {
-    className = $[2];
-    ref = $[3];
-    restProps = $[4];
-  }
-  let t0;
-  if ($[5] !== className) {
-    t0 = classNames(styles.row, className);
-    $[5] = className;
-    $[6] = t0;
-  } else {
-    t0 = $[6];
-  }
-  const classes = t0;
-  let t1;
-  if ($[7] !== classes || $[8] !== ref || $[9] !== restProps) {
-    t1 = /*#__PURE__*/jsx("tr", {
-      ref: ref,
-      className: classes,
-      ...restProps
-    });
-    $[7] = classes;
-    $[8] = ref;
-    $[9] = restProps;
-    $[10] = t1;
-  } else {
-    t1 = $[10];
-  }
-  return t1;
-}
-/**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
- */
-function TableCell(props) {
-  const $ = c(9);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
-    for (let $i = 0; $i < 9; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
-  }
-  let className;
-  let restProps;
-  if ($[1] !== props) {
-    ({
-      className,
-      ...restProps
-    } = props);
-    $[1] = props;
-    $[2] = className;
-    $[3] = restProps;
-  } else {
-    className = $[2];
-    restProps = $[3];
-  }
-  let t0;
-  if ($[4] !== className) {
-    t0 = classNames(styles.cell, className);
-    $[4] = className;
-    $[5] = t0;
-  } else {
-    t0 = $[5];
-  }
-  const classes = t0;
-  let t1;
-  if ($[6] !== classes || $[7] !== restProps) {
-    t1 = /*#__PURE__*/jsx("td", {
-      className: classes,
-      ...restProps
-    });
-    $[6] = classes;
-    $[7] = restProps;
-    $[8] = t1;
-  } else {
-    t1 = $[8];
-  }
-  return t1;
-}
-
-export { DeleteColumnButton, SortButton, TableCell, TableRow };

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

@@ -1,53 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import type { TableProps } from './table';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * Minimal usage requires the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `renderCell` (not required, but usually needed)
- *
- * ## Selection
- *
- * Following three props support the selection:
- *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
- *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
- *
- * ## Sorting
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the 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.
- *
- * ## 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> & ComponentPropsWithoutRef<'table'>): import("react").JSX.Element;