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

package/components/table/default-item-renderer.d.ts

@@ -5,13 +5,10 @@ export interface DefaultItemRendererProps {
      */
     index: number;
     /**
-     * If true, the row will be focusable with up/down arrow keys.
+     * If `true`, the row will be focusable with up/down arrow keys.
      * Focus is implemented using the
      * ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
      * technique, that is, only the focused row has `tabIndex={0}`.
-     *
-     * To focus the row on click or other user interaction, add e.g. `onClick()`
-     * and invoke `focusRow(e.currentTarget)` imported from `table-row-focus.ts`.
      */
     keyboardFocusable?: boolean;
     /**
@@ -20,17 +17,33 @@ export interface DefaultItemRendererProps {
      */
     clickable?: boolean;
     /**
-     * If true, the row is highlighted as selected, that is, with the
-     * a different background color.
+     * If `true`, the row is highlighted as selected with a different background color.
      */
     selected?: boolean;
     /**
-     * A level of a nested item. Results in an indent for columns with `indent: true`.
-     * 0, negative values, and an unset value mean no indent.
+     * The nesting level of an item. Applies an indent for columns with
+     * `Column.indent` set to `true`. `0`, negative values, and an unset value
+     * mean no indent.
      */
     level?: number;
+    /**
+     * When set to `true`, does not control item virtualization.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer,
+     * and track the visibility yourself.
+     */
+    noItemVirtualization?: boolean;
 }
 /**
- * @see TableProps.renderItem
+ * Standard component for rendering a table row.
+ *
+ * Renders an item using the table's column definitions and lets you
+ * configure item-scoped behavior such as selection, keyboard navigation,
+ * event handlers, `className`, and `ref`.
+ *
+ * Note that row-level click and keyboard handlers are not discoverable
+ * by assistive technologies. Make sure that any functionality relying on
+ * them (such as selection or expand/collapse) is also available through
+ * accessible controls, such as checkboxes or buttons with accessible
+ * labels.
  */
-export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;

package/components/table/default-item-renderer.js

@@ -1,40 +1,31 @@
 import { c } from 'react/compiler-runtime';
 import { useRef, use } from 'react';
 import classNames from 'classnames';
-import { mergeRefs } from 'react-merge-refs';
-import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const.js';
-import { useIsIntersectingListener } from '../global/intersection-observer-context.js';
+import { TablePropsContext, ColumnAnimationContext } from './table-const.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { useItemVirtualization } from './item-virtualization.js';
 import { TableRow, TableCell } from './table-primitives.js';
 import { s as styles } from '../_helpers/table.js';
 import { jsx } from 'react/jsx-runtime';
-import '@jetbrains/icons/unsorted-12px';
-import '@jetbrains/icons/arrow-12px-down';
-import '@jetbrains/icons/arrow-12px-up';
-import '@jetbrains/icons/trash-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 'memoize-one';
+import '../global/intersection-observer-context.js';
+import '../internal/virtual-items.js';
+import '../global/schedule-with-cleanup.js';
 
-const INDENT_SIZE = 24;
-/**
- * @see TableProps.renderItem
- */
 function DefaultItemRenderer(t0) {
-  const $ = c(35);
-  if ($[0] !== "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c") {
-    for (let $i = 0; $i < 35; $i += 1) {
+  const $ = c(39);
+  if ($[0] !== "814543263ebfe37ed20c6e2945771deb8a681b9bdb7c32cb1fc590d5f0122c82") {
+    for (let $i = 0; $i < 39; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c";
+    $[0] = "814543263ebfe37ed20c6e2945771deb8a681b9bdb7c32cb1fc590d5f0122c82";
   }
   let className;
   let clickable;
   let index;
   let keyboardFocusable;
   let level;
+  let noItemVirtualization;
   let restProps;
   let selected;
   let userRef;
@@ -45,6 +36,7 @@ function DefaultItemRenderer(t0) {
       clickable,
       selected,
       level,
+      noItemVirtualization,
       ref: userRef,
       className,
       ...restProps
@@ -55,123 +47,137 @@ function DefaultItemRenderer(t0) {
     $[4] = index;
     $[5] = keyboardFocusable;
     $[6] = level;
-    $[7] = restProps;
-    $[8] = selected;
-    $[9] = userRef;
+    $[7] = noItemVirtualization;
+    $[8] = restProps;
+    $[9] = selected;
+    $[10] = userRef;
   } else {
     className = $[2];
     clickable = $[3];
     index = $[4];
     keyboardFocusable = $[5];
     level = $[6];
-    restProps = $[7];
-    selected = $[8];
-    userRef = $[9];
+    noItemVirtualization = $[7];
+    restProps = $[8];
+    selected = $[9];
+    userRef = $[10];
   }
   const localRef = useRef(null);
-  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+  const composedRef = useComposedRef(userRef, localRef);
   let t1;
-  if ($[10] !== collapseItemIntoSpacer) {
-    t1 = isIntersecting => {
-      if (localRef.current && !isIntersecting) {
-        collapseItemIntoSpacer(localRef.current.getBoundingClientRect().height);
-      }
+  if ($[11] !== noItemVirtualization) {
+    t1 = (t2, _i, t3) => {
+      const [isIntersecting] = t2;
+      const [element] = t3;
+      return isIntersecting === false && !noItemVirtualization && element?.isConnected && !element.contains(document.activeElement) && !element.previousElementSibling?.contains(document.activeElement) && !element.nextElementSibling?.contains(document.activeElement) ? element.getBoundingClientRect().height : undefined;
     };
-    $[10] = collapseItemIntoSpacer;
-    $[11] = t1;
+    $[11] = noItemVirtualization;
+    $[12] = t1;
   } else {
-    t1 = $[11];
+    t1 = $[12];
   }
-  useIsIntersectingListener(localRef, t1);
+  const t2 = t1;
+  let t3;
+  if ($[13] !== index || $[14] !== t2) {
+    t3 = {
+      index,
+      refs: localRef,
+      onIntersectionChange: t2
+    };
+    $[13] = index;
+    $[14] = t2;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  useItemVirtualization(t3);
   const tableProps = use(TablePropsContext);
   if (!tableProps) {
     return null;
   }
+  const animatedColumn = use(ColumnAnimationContext);
   const {
     data,
     columns
   } = tableProps;
   const item = data[index];
-  let t2;
-  if ($[12] !== userRef) {
-    t2 = mergeRefs([userRef, localRef]);
-    $[12] = userRef;
-    $[13] = t2;
-  } else {
-    t2 = $[13];
-  }
-  const t3 = clickable && styles.clickableRow;
-  const t4 = selected && styles.selectedRow;
-  let t5;
-  if ($[14] !== className || $[15] !== t3 || $[16] !== t4) {
-    t5 = classNames(className, t3, t4);
-    $[14] = className;
-    $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
+  const t4 = clickable && styles.clickableRow;
+  const t5 = selected && styles.selectedRow;
+  let t6;
+  if ($[16] !== className || $[17] !== t4 || $[18] !== t5) {
+    t6 = classNames(className, t4, t5);
+    $[16] = className;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
   } else {
-    t5 = $[17];
+    t6 = $[19];
   }
-  let t6;
-  if ($[18] !== columns || $[19] !== data || $[20] !== index || $[21] !== item || $[22] !== level) {
-    let t7;
-    if ($[24] !== data || $[25] !== index || $[26] !== item || $[27] !== level) {
-      t7 = (column, columnIndex) => {
+  let t7;
+  if ($[20] !== animatedColumn || $[21] !== columns || $[22] !== data || $[23] !== index || $[24] !== item || $[25] !== level) {
+    let t8;
+    if ($[27] !== animatedColumn || $[28] !== data || $[29] !== index || $[30] !== item || $[31] !== level) {
+      t8 = (column, columnIndex) => {
         var _column$renderCell;
+        const {
+          key,
+          tdClassName,
+          indent
+        } = column;
         return /*#__PURE__*/jsx(TableCell, {
-          className: column.tdClassName?.(item, index, data),
-          style: column.indent && level != null && level > 0 ? {
-            paddingInlineStart: `${level * INDENT_SIZE}px`
+          className: classNames(columnIndex === animatedColumn?.columnIndex && animatedColumn.cellClassName, typeof tdClassName === "function" ? tdClassName(item, index, data) : tdClassName),
+          style: indent && level != null && level > 0 ? {
+            paddingInlineStart: `${level * 24}px`
           } : undefined,
-          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex)
-        }, column.key);
+          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex, key)
+        }, key);
       };
-      $[24] = data;
-      $[25] = index;
-      $[26] = item;
-      $[27] = level;
-      $[28] = t7;
+      $[27] = animatedColumn;
+      $[28] = data;
+      $[29] = index;
+      $[30] = item;
+      $[31] = level;
+      $[32] = t8;
     } else {
-      t7 = $[28];
+      t8 = $[32];
     }
-    t6 = columns.map(t7);
-    $[18] = columns;
-    $[19] = data;
-    $[20] = index;
-    $[21] = item;
-    $[22] = level;
-    $[23] = t6;
+    t7 = columns.map(t8);
+    $[20] = animatedColumn;
+    $[21] = columns;
+    $[22] = data;
+    $[23] = index;
+    $[24] = item;
+    $[25] = level;
+    $[26] = t7;
   } else {
-    t6 = $[23];
+    t7 = $[26];
   }
-  let t7;
-  if ($[29] !== keyboardFocusable || $[30] !== restProps || $[31] !== t2 || $[32] !== t5 || $[33] !== t6) {
-    t7 = /*#__PURE__*/jsx(TableRow, {
-      ref: t2,
+  let t8;
+  if ($[33] !== composedRef || $[34] !== keyboardFocusable || $[35] !== restProps || $[36] !== t6 || $[37] !== t7) {
+    t8 = /*#__PURE__*/jsx(TableRow, {
+      ref: composedRef,
       keyboardFocusable: keyboardFocusable,
-      className: t5,
+      className: t6,
       ...restProps,
-      children: t6
+      children: t7
     });
-    $[29] = keyboardFocusable;
-    $[30] = restProps;
-    $[31] = t2;
-    $[32] = t5;
-    $[33] = t6;
-    $[34] = t7;
+    $[33] = composedRef;
+    $[34] = keyboardFocusable;
+    $[35] = restProps;
+    $[36] = t6;
+    $[37] = t7;
+    $[38] = t8;
   } else {
-    t7 = $[34];
+    t8 = $[38];
   }
-  return t7;
+  return t8;
 }
-function getDefaultCellValue(item, columnIndex) {
+function getDefaultCellValue(item, columnIndex, columnKey) {
   if (Array.isArray(item)) {
-    var _item$columnIndex;
-    return String((_item$columnIndex = item[columnIndex]) !== null && _item$columnIndex !== void 0 ? _item$columnIndex : '');
+    return String(item[columnIndex]);
   }
   if (item !== null && typeof item === 'object') {
-    var _Object$values$column;
-    return String((_Object$values$column = Object.values(item)[columnIndex]) !== null && _Object$values$column !== void 0 ? _Object$values$column : '');
+    return String(item[String(columnKey)]);
   }
   if (columnIndex === 0) {
     return String(item);

package/components/table/internal/column-animation.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import type { Column } from '../table-props';
+import type { ColumnAnimation } from '../table-const';
+export interface ReorderSpec {
+    fromIndex: number;
+    insertionIndex: number;
+}
+export type ExpectColumnReorder = (reorderSpec: ReorderSpec) => void;
+export declare function useColumnAnimation<T>({ disabled, tableRef, columns, }: {
+    disabled: boolean | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    columns: readonly Column<T>[];
+}): {
+    columnAnimation: ColumnAnimation | null;
+    expectColumnReorder: ExpectColumnReorder;
+};

package/components/table/internal/table-header.d.ts

@@ -0,0 +1,4 @@
+import { type ExpectColumnReorder } from './column-animation';
+export declare function TableHeader<T>({ expectColumnReorder }: {
+    expectColumnReorder: ExpectColumnReorder;
+}): import("react").JSX.Element | null;

package/components/table/internal/virtual-items.d.ts

@@ -0,0 +1,34 @@
+import { type RefObject } from 'react';
+export type VirtualItem = MaterializedItem | Spacer;
+interface MaterializedItem {
+    type: 'materialized';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+type CollapseItemIntoSpacerCallback = (index: number, height: number) => void;
+export declare const CollapseItemIntoSpacerContext: import("react").Context<CollapseItemIntoSpacerCallback>;
+export declare function useVirtualItems<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    data: readonly T[];
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (item: T, index: number, items: readonly T[]) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    intersectionObserverHandle: import("../../global/intersection-observer-context").IntersectionObserverHandle;
+    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};

package/components/table/item-virtualization.d.ts

@@ -0,0 +1,35 @@
+import { type RefObject } from 'react';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export declare function useItemVirtualization({ index, refs, onIntersectionChange, }: {
+    /**
+     * Index of the item.
+     */
+    index: number;
+    /**
+     * One or more elements representing this item.
+     *
+     * When multiple elements are provided, the virtualization callback receives
+     * the intersection state of all of them.
+     *
+     * If you pass multiple refs, memoize the array (for example with `useMemo()`)
+     * to avoid restarting observation on every render.
+     */
+    refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
+    /**
+     * Invoked when the `isIntersecting` state of the observed elements changes.
+     * Consider wrapping a callback to `useCallback()` to avoid restarting observation on every render.
+     *
+     * @param intersectionStates - Current intersection state of every observed element.
+     * Entries are initially `undefined` until the corresponding element
+     * has been reported by `IntersectionObserver`.
+     * @param changedIndex - Index of the element whose intersection state changed.
+     * @param elements - The observed elements. Note that some elements may
+     * already be disconnected from the DOM when this callback is invoked.
+     * Use additional checks like `element.isConnected`.
+     * @returns Return the height of an item to collapse the item into spacer,
+     * or `undefined` to keep the item rendered.
+     */
+    onIntersectionChange: (intersectionStates: (boolean | undefined)[], changedIndex: number, elements: (Element | null)[]) => number | undefined;
+}): void;

package/components/table/item-virtualization.js

@@ -0,0 +1,71 @@
+import { c } from 'react/compiler-runtime';
+import { use, useEffect } from 'react';
+import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
+import { CollapseItemIntoSpacerContext } from '../internal/virtual-items.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+import 'react/jsx-runtime';
+
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+function useItemVirtualization(t0) {
+  const $ = c(8);
+  if ($[0] !== "15177a0e107705dc6d84a0fc97d3302da4c04a0058a1b771c145ee537ccae2cf") {
+    for (let $i = 0; $i < 8; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "15177a0e107705dc6d84a0fc97d3302da4c04a0058a1b771c145ee537ccae2cf";
+  }
+  const {
+    index,
+    refs,
+    onIntersectionChange
+  } = t0;
+  const handle = use(IntersectionObserverContext);
+  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+  let t1;
+  let t2;
+  if ($[1] !== collapseItemIntoSpacer || $[2] !== handle || $[3] !== index || $[4] !== onIntersectionChange || $[5] !== refs) {
+    t1 = () => {
+      const intersectionStates = Array.isArray(refs) ? refs.map(_temp) : [undefined];
+      const elements = Array.isArray(refs) ? refs.map(_temp2) : [refs.current];
+      const cleanups = [];
+      elements.forEach((element, elementIndex) => {
+        if (!element) {
+          return;
+        }
+        const cleanup = handle.observe(element, isIntersecting => {
+          intersectionStates[elementIndex] = isIntersecting;
+          const height = onIntersectionChange(intersectionStates, elementIndex, elements);
+          if (height != null) {
+            collapseItemIntoSpacer(index, height);
+          }
+        });
+        cleanups.push(cleanup);
+      });
+      return () => cleanups.forEach(_temp3);
+    };
+    t2 = [collapseItemIntoSpacer, handle, index, onIntersectionChange, refs];
+    $[1] = collapseItemIntoSpacer;
+    $[2] = handle;
+    $[3] = index;
+    $[4] = onIntersectionChange;
+    $[5] = refs;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+}
+function _temp3(cleanup_0) {
+  return cleanup_0();
+}
+function _temp2(r) {
+  return r.current;
+}
+function _temp() {}
+
+export { useItemVirtualization };

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

@@ -1,8 +1,42 @@
-import type { TableProps } from './table';
+import type { TableProps } from './table-props';
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 export declare const TablePropsContext: import("react").Context<TableProps<unknown> | null>;
-export declare const ColumnIndexContext: import("react").Context<number>;
-export declare const CollapseItemIntoSpacerContext: import("react").Context<(height: number) => void>;
+/**
+ * Information about a column reorder animation.
+ *
+ * Available through {@link ColumnAnimationContext} to allow custom cell
+ * renderers to animate reordered columns consistently with the default
+ * table renderer.
+ */
+export interface ColumnAnimation {
+    /**
+     * Index of the column being animated.
+     */
+    columnIndex: number;
+    /**
+     * Current animation phase.
+     */
+    phase: 'initial' | 'fade-out';
+    /**
+     * CSS class to apply to the animated cell or another element used to
+     * render the animation.
+     *
+     * The class only defines the `background-color` and `transition`
+     * properties.
+     */
+    cellClassName: string;
+}
+/**
+ * Provides information about the currently animated column.
+ *
+ * Use in a custom cell renderer to animate reordered columns
+ * consistently with the default table renderer.
+ */
+export declare const ColumnAnimationContext: import("react").Context<ColumnAnimation | null>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 export declare const defaultRowHeight = 37;
-export declare const defaultLookaheadPx = 400;
-export declare const defaultRetentionMarginPx = 450;
-export declare const defaultMinScrollAndResizeDeltaPx = 50;

package/components/table/table-const.js

@@ -1,11 +1,20 @@
 import { createContext } from 'react';
 
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 const TablePropsContext = /*#__PURE__*/createContext(null);
-const ColumnIndexContext = /*#__PURE__*/createContext(-1);
-const CollapseItemIntoSpacerContext = /*#__PURE__*/createContext(() => {});
+/**
+ * Provides information about the currently animated column.
+ *
+ * Use in a custom cell renderer to animate reordered columns
+ * consistently with the default table renderer.
+ */
+const ColumnAnimationContext = /*#__PURE__*/createContext(null);
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 const defaultRowHeight = 37;
-const defaultLookaheadPx = 400;
-const defaultRetentionMarginPx = 450;
-const defaultMinScrollAndResizeDeltaPx = 50;
 
-export { CollapseItemIntoSpacerContext, ColumnIndexContext, TablePropsContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight };
+export { ColumnAnimationContext, TablePropsContext, defaultRowHeight };

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

@@ -1,15 +1,4 @@
-import { type ComponentPropsWithRef } from 'react';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export declare function SortButton<T>({ className, children, onClick, ...restProps }: ComponentPropsWithRef<'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>({ className, onClick, ...restProps }: ComponentPropsWithRef<'button'>): import("react").JSX.Element | null;
+import type { ComponentPropsWithRef } from 'react';
 export interface TableRowProps {
     /**
      * @see DefaultItemRendererProps.keyboardFocusable
@@ -17,12 +6,16 @@ export interface TableRowProps {
     keyboardFocusable?: boolean;
 }
 /**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
+ * @internal
+ */
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
  */
 export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'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`.
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
  */
 export declare function TableCell(props: ComponentPropsWithRef<'td'>): import("react").JSX.Element;