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

package/components/tab-trap/tab-trap.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 import * as React from 'react';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
+    ref?: React.Ref<TabTrapObject>;
     children: ReactNode;
     trapDisabled?: boolean;
     autoFocusFirst?: boolean;
@@ -11,8 +12,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
 /**
  * @name TabTrap
  */
-interface TabTrap {
+export interface TabTrapObject {
     node: HTMLElement | null;
 }
-declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
-export default TabTrap;
+export default function TabTrap({ ref, children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps }: TabTrapProps): React.JSX.Element;

package/components/tab-trap/tab-trap.js

@@ -1,21 +1,21 @@
-import { c } from 'react-compiler-runtime';
-import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useRef, useImperativeHandle, useEffect } from 'react';
 import { isNodeInVisiblePartOfPage } from '../global/dom.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"trapButton":"ring-tab-trap-trapButton"};
 
 const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-// eslint-disable-next-line no-shadow
-const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
-  const $ = c(38);
-  if ($[0] !== "2100b1464fbf6825dd3f080feb9e20c095c3f9f9256eec8ae18adf474c19d1f2") {
-    for (let $i = 0; $i < 38; $i += 1) {
+function TabTrap(t0) {
+  const $ = c(39);
+  if ($[0] !== "daf3c9f73144edaae4842be22241426b0a063f37615637c8bca095939d2fdeaf") {
+    for (let $i = 0; $i < 39; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "2100b1464fbf6825dd3f080feb9e20c095c3f9f9256eec8ae18adf474c19d1f2";
+    $[0] = "daf3c9f73144edaae4842be22241426b0a063f37615637c8bca095939d2fdeaf";
   }
   let children;
+  let ref;
   let restProps;
   let t1;
   let t2;
@@ -23,6 +23,7 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
   let t4;
   if ($[1] !== t0) {
     ({
+      ref,
       children,
       trapDisabled: t1,
       autoFocusFirst: t2,
@@ -32,18 +33,20 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
     } = t0);
     $[1] = t0;
     $[2] = children;
-    $[3] = restProps;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
-    $[7] = t4;
+    $[3] = ref;
+    $[4] = restProps;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
   } else {
     children = $[2];
-    restProps = $[3];
-    t1 = $[4];
-    t2 = $[5];
-    t3 = $[6];
-    t4 = $[7];
+    ref = $[3];
+    restProps = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
   }
   const trapDisabled = t1 === undefined ? false : t1;
   const autoFocusFirst = t2 === undefined ? true : t2;
@@ -59,20 +62,20 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
   }
   let t5;
   let t6;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = () => ({
       node: nodeRef.current
     });
     t6 = [];
-    $[8] = t5;
-    $[9] = t6;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t5 = $[8];
-    t6 = $[9];
+    t5 = $[9];
+    t6 = $[10];
   }
   useImperativeHandle(ref, t5, t6);
   let t7;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
     t7 = function restoreFocusIfUnmounted(orElse) {
       const previousFocusedNode = previousFocusedNodeRef.current;
       if (previousFocusedNode instanceof HTMLElement && previousFocusedNode.focus && isNodeInVisiblePartOfPage(previousFocusedNode) && mountedRef.current === false) {
@@ -83,13 +86,13 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         orElse?.();
       }
     };
-    $[10] = t7;
+    $[11] = t7;
   } else {
-    t7 = $[10];
+    t7 = $[11];
   }
   const restoreFocusIfUnmounted = t7;
   let t8;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
     t8 = function focusElement(t9) {
       const first = t9 === undefined ? true : t9;
       const node = nodeRef.current;
@@ -102,30 +105,30 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         toBeFocused.focus();
       }
     };
-    $[11] = t8;
+    $[12] = t8;
   } else {
-    t8 = $[11];
+    t8 = $[12];
   }
   const focusElement = t8;
   let t9;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
     t9 = () => focusElement(true);
-    $[12] = t9;
+    $[13] = t9;
   } else {
-    t9 = $[12];
+    t9 = $[13];
   }
   const focusFirst = t9;
   let t10;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
     t10 = () => focusElement(false);
-    $[13] = t10;
+    $[14] = t10;
   } else {
-    t10 = $[13];
+    t10 = $[14];
   }
   const focusLast = t10;
   let t11;
   let t12;
-  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
     t11 = () => {
       mountedRef.current = true;
       return () => {
@@ -133,16 +136,16 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       };
     };
     t12 = [];
-    $[14] = t11;
-    $[15] = t12;
+    $[15] = t11;
+    $[16] = t12;
   } else {
-    t11 = $[14];
-    t12 = $[15];
+    t11 = $[15];
+    t12 = $[16];
   }
   useEffect(t11, t12);
   let t13;
   let t14;
-  if ($[16] !== autoFocusFirst || $[17] !== focusBackOnClose || $[18] !== trapDisabled) {
+  if ($[17] !== autoFocusFirst || $[18] !== focusBackOnClose || $[19] !== trapDisabled) {
     t13 = () => {
       if (autoFocusFirst) {
         focusFirst();
@@ -163,18 +166,18 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       };
     };
     t14 = [autoFocusFirst, trapDisabled, focusBackOnClose, focusFirst];
-    $[16] = autoFocusFirst;
-    $[17] = focusBackOnClose;
-    $[18] = trapDisabled;
-    $[19] = t13;
-    $[20] = t14;
+    $[17] = autoFocusFirst;
+    $[18] = focusBackOnClose;
+    $[19] = trapDisabled;
+    $[20] = t13;
+    $[21] = t14;
   } else {
-    t13 = $[19];
-    t14 = $[20];
+    t13 = $[20];
+    t14 = $[21];
   }
   useEffect(t13, t14);
   let t15;
-  if ($[21] !== focusBackOnExit) {
+  if ($[22] !== focusBackOnExit) {
     t15 = function focusLastIfEnabled(event) {
       if (trapWithoutFocusRef.current) {
         return;
@@ -188,14 +191,14 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         focusLast();
       }
     };
-    $[21] = focusBackOnExit;
-    $[22] = t15;
+    $[22] = focusBackOnExit;
+    $[23] = t15;
   } else {
-    t15 = $[22];
+    t15 = $[23];
   }
   const focusLastIfEnabled = t15;
   let t16;
-  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
     t16 = function handleBlurIfWithoutFocus(event_0) {
       if (!trapWithoutFocusRef.current) {
         return;
@@ -210,13 +213,13 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       }
       focusLast();
     };
-    $[23] = t16;
+    $[24] = t16;
   } else {
-    t16 = $[23];
+    t16 = $[24];
   }
   const handleBlurIfWithoutFocus = t16;
   let t17;
-  if ($[24] !== focusBackOnExit) {
+  if ($[25] !== focusBackOnExit) {
     t17 = function restoreFocusOrFocusFirst() {
       if (focusBackOnExit) {
         restoreFocusIfUnmounted(focusFirst);
@@ -224,30 +227,30 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         focusFirst();
       }
     };
-    $[24] = focusBackOnExit;
-    $[25] = t17;
+    $[25] = focusBackOnExit;
+    $[26] = t17;
   } else {
-    t17 = $[25];
+    t17 = $[26];
   }
   const restoreFocusOrFocusFirst = t17;
   if (trapDisabled) {
     let t18;
-    if ($[26] !== children || $[27] !== restProps) {
+    if ($[27] !== children || $[28] !== restProps) {
       t18 = /*#__PURE__*/jsx("div", {
         ref: nodeRef,
         ...restProps,
         children: children
       });
-      $[26] = children;
-      $[27] = restProps;
-      $[28] = t18;
+      $[27] = children;
+      $[28] = restProps;
+      $[29] = t18;
     } else {
-      t18 = $[28];
+      t18 = $[29];
     }
     return t18;
   }
   let t18;
-  if ($[29] !== focusLastIfEnabled) {
+  if ($[30] !== focusLastIfEnabled) {
     t18 = /*#__PURE__*/jsx("div", {
       tabIndex: 0,
       ref: trapButtonNodeRef,
@@ -256,40 +259,40 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       onBlur: handleBlurIfWithoutFocus,
       "data-trap-button": true
     });
-    $[29] = focusLastIfEnabled;
-    $[30] = t18;
+    $[30] = focusLastIfEnabled;
+    $[31] = t18;
   } else {
-    t18 = $[30];
+    t18 = $[31];
   }
   let t19;
-  if ($[31] !== restoreFocusOrFocusFirst) {
+  if ($[32] !== restoreFocusOrFocusFirst) {
     t19 = /*#__PURE__*/jsx("div", {
       tabIndex: 0,
       onFocus: restoreFocusOrFocusFirst,
       "data-trap-button": true
     });
-    $[31] = restoreFocusOrFocusFirst;
-    $[32] = t19;
+    $[32] = restoreFocusOrFocusFirst;
+    $[33] = t19;
   } else {
-    t19 = $[32];
+    t19 = $[33];
   }
   let t20;
-  if ($[33] !== children || $[34] !== restProps || $[35] !== t18 || $[36] !== t19) {
+  if ($[34] !== children || $[35] !== restProps || $[36] !== t18 || $[37] !== t19) {
     t20 = /*#__PURE__*/jsxs("div", {
       ref: nodeRef,
       ...restProps,
       children: [t18, children, t19]
     });
-    $[33] = children;
-    $[34] = restProps;
-    $[35] = t18;
-    $[36] = t19;
-    $[37] = t20;
+    $[34] = children;
+    $[35] = restProps;
+    $[36] = t18;
+    $[37] = t19;
+    $[38] = t20;
   } else {
-    t20 = $[37];
+    t20 = $[38];
   }
   return t20;
-});
+}
 function _temp(item) {
   return item.tabIndex >= 0;
 }

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

@@ -1,25 +1,36 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 export interface DefaultItemRendererProps {
     /**
-     * Installed on the `<tr>` element
+     * The index of the `data` item to render.
      */
-    ref?: React.RefObject<HTMLTableRowElement | null>;
+    index: number;
     /**
-     * The index of the `data` item to render
+     * 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`.
      */
-    index: number;
+    keyboardFocusable?: boolean;
     /**
-     * Changes the highlight on hover and applies the pointer cursor.
-     * Note that `false` doesn't mean it cannot handle `onClick`.
+     * Changes the background on hover and applies the pointer cursor.
+     * Note that `false` does not mean the row cannot handle `onClick`.
      */
     clickable?: boolean;
+    /**
+     * If true, the row is highlighted as selected, that is, with the
+     * a different background color.
+     */
+    selected?: boolean;
     /**
      * A level of a nested item. Results in an indent for columns with `indent: true`.
-     * 0, negative and not set mean no indent.
+     * 0, negative values, and an unset value mean no indent.
      */
     level?: number;
 }
 /**
  * @see TableProps.renderItem
  */
-export declare function DefaultItemRenderer<T>({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }: DefaultItemRendererProps & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;