@jetbrains/ring-ui-built 6.0.38 → 6.0.40

package/components/checkbox/checkbox.d.ts

@@ -42,5 +42,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     render(): import("react").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -7,7 +7,7 @@ import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
 import minusIcon from '@jetbrains/icons/remove-12px';
 import Icon from '../icon/icon.js';
 import { refObject } from '../global/prop-types.js';
-import composeRefs from '../global/composeRefs.js';
+import { createComposedRef } from '../global/composeRefs.js';
 import ControlHelp from '../control-help/control-help.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
@@ -43,6 +43,7 @@ var Checkbox = /*#__PURE__*/function (_PureComponent) {
       }
       _this.input = el;
     });
+    _defineProperty(_this, "composedInputRef", createComposedRef());
     return _this;
   }
   _inherits(Checkbox, _PureComponent);
@@ -86,7 +87,7 @@ var Checkbox = /*#__PURE__*/function (_PureComponent) {
         "data-test": "ring-checkbox",
         children: [/*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({}, restProps), {}, {
           "data-checked": restProps.checked,
-          ref: composeRefs(this.inputRef, inputRef),
+          ref: this.composedInputRef(this.inputRef, inputRef),
           type: "checkbox",
           className: classes
         })), /*#__PURE__*/jsx("div", {

package/components/data-list/data-list.js

@@ -19,6 +19,7 @@ import '../global/composeRefs.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 import '../table/selection.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.index-of.js';
@@ -55,7 +56,6 @@ import '../loader-inline/loader-inline.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
-import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.string.replace.js';

package/components/data-list/title.js

@@ -13,10 +13,10 @@ import '../global/composeRefs.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.regexp.exec.js';

package/components/date-picker/date-input.d.ts

@@ -35,6 +35,7 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: DateInputProps): void;
     static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
     context: React.ContextType<typeof DateInput.contextType>;

package/components/date-picker/date-input.js

@@ -54,7 +54,6 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "input", void 0);
     _defineProperty(_this, "inputRef", function (el) {
       _this.input = el;
-      _this.updateInput(_this.props);
     });
     _defineProperty(_this, "handleChange", function (e) {
       return _this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name);
@@ -66,6 +65,11 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
   }
   _inherits(DateInput, _React$PureComponent);
   return _createClass(DateInput, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updateInput(this.props);
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props = this.props,

package/components/date-picker/date-picker.js

@@ -132,6 +132,7 @@ var PopupComponent = function PopupComponent(_ref) {
     ref: popupRef,
     directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT]
   }, restProps), {}, {
+    trapFocus: true,
     children: /*#__PURE__*/jsx(DatePopup, _objectSpread2(_objectSpread2({
       onClear: onClear
     }, datePopupProps), {}, {

package/components/global/composeRefs.d.ts

@@ -1,3 +1,5 @@
 import { Ref } from 'react';
-export default function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare const _default: typeof composeRefs;
+export default _default;
 export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;

package/components/global/composeRefs.js

@@ -1,6 +1,7 @@
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import memoizeOne from 'memoize-one';
+import deprecate from 'util-deprecate';
 
 function composeRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -16,8 +17,10 @@ function composeRefs() {
     });
   };
 }
+// TODO remove export in 7.0, composeRefs should be used only in createComposedRef and in useComposedRefs in the future
+var composeRefs$1 = deprecate(composeRefs, 'composeRefs is deprecated and will be removed in 7.0. Use createComposedRef instead.');
 function createComposedRef() {
   return memoizeOne(composeRefs);
 }
 
-export { createComposedRef, composeRefs as default };
+export { createComposedRef, composeRefs$1 as default };

package/components/global/focus-sensor-hoc.js

@@ -3,11 +3,12 @@ import 'core-js/modules/es.array.concat.js';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { refObject } from './prop-types.js';
-import composeRefs from './composeRefs.js';
+import { createComposedRef } from './composeRefs.js';
 import { jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 
 var _excluded = ["innerRef", "focused", "onFocusReset", "onFocusRestore"],
   _excluded2 = ["autofocus", "focused", "onFocus", "onBlur", "innerRef", "scrollOnTableFocus"];
@@ -42,6 +43,7 @@ function focusSensorHOC(ComposedComponent) {
           _this.node = node;
         }
       });
+      _defineProperty(_this, "composedRef", createComposedRef());
       _defineProperty(_this, "onFocusCapture", function (_ref2) {
         var _this$node;
         var target = _ref2.target;
@@ -137,7 +139,7 @@ function focusSensorHOC(ComposedComponent) {
           _this$props4.scrollOnTableFocus;
           var rest = _objectWithoutProperties(_this$props4, _excluded2);
         return /*#__PURE__*/jsx(ComposedComponent, _objectSpread2(_objectSpread2({}, rest), {}, {
-          innerRef: composeRefs(innerRef, this.onRefUpdate),
+          innerRef: this.composedRef(innerRef, this.onRefUpdate),
           focused: this.state.focused,
           onFocusReset: this.onFocusReset,
           onFocusRestore: this.onFocusRestore

package/components/global/rerender-hoc.js

@@ -1,11 +1,12 @@
 import { a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
 import { forwardRef, Component } from 'react';
-import composeRefs from './composeRefs.js';
+import { createComposedRef } from './composeRefs.js';
 import { jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 
 function rerenderHOC(ComposedComponent) {
   var Rerenderer = /*#__PURE__*/function (_Component) {
@@ -17,6 +18,7 @@ function rerenderHOC(ComposedComponent) {
       }
       _this = _callSuper(this, Rerenderer, [].concat(args));
       _defineProperty(_this, "state", _this.props.props);
+      _defineProperty(_this, "composedRef", createComposedRef());
       return _this;
     }
     _inherits(Rerenderer, _Component);
@@ -24,7 +26,7 @@ function rerenderHOC(ComposedComponent) {
       key: "render",
       value: function render() {
         var _this2 = this;
-        var _ref = composeRefs(this.props.forwardedRef);
+        var _ref = this.composedRef(this.props.forwardedRef);
         return /*#__PURE__*/jsx(ComposedComponent, _objectSpread2(_objectSpread2({}, this.state), {}, {
           ref: function ref(instance) {
             return _ref(instance != null ? _objectSpread2(_objectSpread2({}, instance), {}, {

package/components/list/list__item.js

@@ -38,8 +38,8 @@ import '@jetbrains/icons/remove-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import 'memoize-one';
-import '../control-help/control-help.js';
 import 'util-deprecate';
+import '../control-help/control-help.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.string.starts-with.js';

package/components/select/select.d.ts

@@ -259,6 +259,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getAvatar;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     getShortcutsMap(): {
         enter: () => true | undefined;
         esc: (event: KeyboardEvent) => boolean | undefined;

package/components/select/select.js

@@ -33,7 +33,7 @@ import rerenderHOC from '../global/rerender-hoc.js';
 import fuzzyHighlight from '../global/fuzzy-highlight.js';
 import memoize from '../global/memoize.js';
 import { I18nContext } from '../i18n/i18n-context.js';
-import composeRefs from '../global/composeRefs.js';
+import { createComposedRef } from '../global/composeRefs.js';
 import { refObject } from '../global/prop-types.js';
 import { isArray } from '../global/typescript-utils.js';
 import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
@@ -633,6 +633,7 @@ var Select = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "filterRef", function (el) {
       _this.filter = el;
     });
+    _defineProperty(_this, "composedFilterRef", createComposedRef());
     return _this;
   }
   _inherits(Select, _Component);
@@ -1010,7 +1011,7 @@ var Select = /*#__PURE__*/function (_Component) {
                 autoComplete: "off",
                 id: this.props.id,
                 onClick: this._clickHandler,
-                inputRef: composeRefs(this.filterRef, this.props.filterRef),
+                inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef),
                 disabled: this.props.disabled,
                 value: this.state.filterValue,
                 borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,

package/components/select/select__popup.d.ts

@@ -126,6 +126,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     shortcutsScope: string;
     shortcutsMap: {
         tab: (event: Event) => void;

package/components/select/select__popup.js

@@ -27,7 +27,7 @@ import { Button } from '../button/button.js';
 import Text from '../text/text.js';
 import { ControlsHeight } from '../global/controls-height.js';
 import { refObject } from '../global/prop-types.js';
-import composeRefs from '../global/composeRefs.js';
+import { createComposedRef } from '../global/composeRefs.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
 import { S as SelectFilter, m as modules_b607bec2 } from '../_helpers/select__filter.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -237,6 +237,7 @@ var SelectPopup = /*#__PURE__*/function (_PureComponent) {
       _this.filter = el;
       _this.caret = el && new Caret(el);
     });
+    _defineProperty(_this, "composedFilterRef", createComposedRef());
     _defineProperty(_this, "shortcutsScope", getUID('select-popup-'));
     _defineProperty(_this, "shortcutsMap", {
       tab: _this.tabPress
@@ -396,7 +397,7 @@ var SelectPopup = /*#__PURE__*/function (_PureComponent) {
             rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
             rgShortcutsMap: this.popupFilterShortcutsMap,
             value: this.props.filterValue,
-            inputRef: composeRefs(this.filterRef, this.props.filterRef),
+            inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef),
             onBlur: this.popupFilterOnBlur,
             onFocus: this.onFilterFocus,
             className: "ring-js-shortcuts",

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

@@ -1,44 +1,18 @@
-import { Component, ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 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> {
     children: ReactNode;
-    trapDisabled: boolean;
-    autoFocusFirst: boolean;
-    focusBackOnClose: boolean;
-    focusBackOnExit: boolean;
+    trapDisabled?: boolean;
+    autoFocusFirst?: boolean;
+    focusBackOnClose?: boolean;
+    focusBackOnExit?: boolean;
 }
 /**
  * @name TabTrap
  */
-export default class TabTrap extends Component<TabTrapProps> {
-    static propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        trapDisabled: PropTypes.Requireable<boolean>;
-        autoFocusFirst: PropTypes.Requireable<boolean>;
-        focusBackOnClose: PropTypes.Requireable<boolean>;
-        focusBackOnExit: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        trapDisabled: boolean;
-        autoFocusFirst: boolean;
-        focusBackOnClose: boolean;
-        focusBackOnExit: boolean;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    previousFocusedNode?: Element | null;
-    trapWithoutFocus?: boolean;
-    restoreFocus: () => void;
-    node?: HTMLElement | null;
-    containerRef: (node: HTMLElement | null) => void;
-    focusElement: (first?: boolean) => void;
-    focusFirst: () => void;
-    focusLast: () => void;
-    focusLastIfEnabled: (event: React.FocusEvent) => void;
-    handleBlurIfWithoutFocus: (event: React.FocusEvent) => void;
-    trapButtonNode?: HTMLElement | null;
-    trapButtonRef: (node: HTMLElement | null) => void;
-    render(): React.JSX.Element;
+interface TabTrap {
+    node: HTMLElement | null;
 }
+declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
+export default TabTrap;

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

@@ -1,8 +1,7 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper, j as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { c as _objectWithoutProperties, j as _toConsumableArray, d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.object.to-string.js';
-import { Component } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { isNodeInVisiblePartOfPage } from '../global/dom.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -19,165 +18,161 @@ var modules_6dce58ae = {"light":"light_rui_2ac4","trapButton":"trapButton_rui_11
 
 var _excluded = ["children", "trapDisabled", "autoFocusFirst", "focusBackOnClose", "focusBackOnExit"];
 var FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-/**
- * @name TabTrap
- */
-var TabTrap = /*#__PURE__*/function (_Component) {
-  function TabTrap() {
-    var _this;
-    _classCallCheck(this, TabTrap);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, TabTrap, [].concat(args));
-    _defineProperty(_this, "previousFocusedNode", void 0);
-    _defineProperty(_this, "trapWithoutFocus", void 0);
-    _defineProperty(_this, "restoreFocus", function () {
-      var _this2 = _this,
-        previousFocusedNode = _this2.previousFocusedNode;
-      if (previousFocusedNode instanceof HTMLElement && previousFocusedNode.focus && isNodeInVisiblePartOfPage(previousFocusedNode)) {
-        previousFocusedNode.focus({
-          preventScroll: true
-        });
-      }
-    });
-    _defineProperty(_this, "node", void 0);
-    _defineProperty(_this, "containerRef", function (node) {
-      if (!node) {
-        return;
-      }
-      _this.node = node;
-    });
-    _defineProperty(_this, "focusElement", function () {
-      var first = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var _this3 = _this,
-        node = _this3.node;
-      if (!node) {
-        return;
-      }
-      var tabables = _toConsumableArray(node.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(function (item) {
-        return item.tabIndex >= 0;
-      });
-      var toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
-      if (toBeFocused) {
-        toBeFocused.focus();
+// eslint-disable-next-line @typescript-eslint/no-shadow
+var TabTrap = /*#__PURE__*/forwardRef(function TabTrap(_ref, ref) {
+  var children = _ref.children,
+    _ref$trapDisabled = _ref.trapDisabled,
+    trapDisabled = _ref$trapDisabled === void 0 ? false : _ref$trapDisabled,
+    _ref$autoFocusFirst = _ref.autoFocusFirst,
+    autoFocusFirst = _ref$autoFocusFirst === void 0 ? true : _ref$autoFocusFirst,
+    _ref$focusBackOnClose = _ref.focusBackOnClose,
+    focusBackOnClose = _ref$focusBackOnClose === void 0 ? true : _ref$focusBackOnClose,
+    _ref$focusBackOnExit = _ref.focusBackOnExit,
+    focusBackOnExit = _ref$focusBackOnExit === void 0 ? false : _ref$focusBackOnExit,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var nodeRef = useRef(null);
+  var trapButtonNodeRef = useRef(null);
+  var previousFocusedNodeRef = useRef(null);
+  var trapWithoutFocusRef = useRef(false);
+  var mountedRef = useRef(false);
+  // It's the same approach as in focus-trap-react:
+  // https://github.com/focus-trap/focus-trap-react/commit/3b22fca9eebeb883edc89548850fe5a5b9d6d50e
+  // We can't do it in useEffect because it's too late, some children might have already
+  // focused itself.
+  if (previousFocusedNodeRef.current === null) {
+    previousFocusedNodeRef.current = document.activeElement;
+  }
+  useImperativeHandle(ref, function () {
+    return {
+      node: nodeRef.current
+    };
+  }, []);
+  var focusFirst = useCallback(function () {
+    return focusElement(true);
+  }, []);
+  var focusLast = function focusLast() {
+    return focusElement(false);
+  };
+  useEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    if (autoFocusFirst) {
+      focusFirst();
+    } else if (!trapDisabled) {
+      var _nodeRef$current, _nodeRef$current2;
+      var previousFocusedElementIsInContainer = previousFocusedNodeRef.current && ((_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 ? void 0 : _nodeRef$current.contains(previousFocusedNodeRef.current));
+      // The component wrapped in TabTrap can already have a focused element (e.g. Date Picker),
+      // so we need to check if it does. If so, we don't need to focus anything.
+      var currentlyFocusedElementIsInContainer = (_nodeRef$current2 = nodeRef.current) === null || _nodeRef$current2 === void 0 ? void 0 : _nodeRef$current2.contains(document.activeElement);
+      if (!nodeRef.current || !previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer) {
+        var _trapButtonNodeRef$cu;
+        trapWithoutFocusRef.current = true;
+        (_trapButtonNodeRef$cu = trapButtonNodeRef.current) === null || _trapButtonNodeRef$cu === void 0 || _trapButtonNodeRef$cu.focus();
       }
-    });
-    _defineProperty(_this, "focusFirst", function () {
-      return _this.focusElement(true);
-    });
-    _defineProperty(_this, "focusLast", function () {
-      return _this.focusElement(false);
-    });
-    _defineProperty(_this, "focusLastIfEnabled", function (event) {
-      if (_this.trapWithoutFocus) {
-        return;
+    }
+    return function () {
+      if (focusBackOnClose) {
+        restoreFocus();
       }
-      if (_this.props.focusBackOnExit) {
-        var prevFocused = event.nativeEvent.relatedTarget;
-        if (prevFocused != null && _this.node != null && prevFocused instanceof Element && _this.node.contains(prevFocused)) {
-          _this.restoreFocus();
+    };
+  }, [autoFocusFirst, trapDisabled, focusBackOnClose, focusFirst]);
+  function restoreFocus() {
+    var previousFocusedNode = previousFocusedNodeRef.current;
+    if (previousFocusedNode instanceof HTMLElement && previousFocusedNode.focus && isNodeInVisiblePartOfPage(previousFocusedNode)) {
+      // If no delay is added, restoring focus caused by pressing Enter will trigger
+      // the onClick event on the previousFocusedNode, e.g.
+      // https://youtrack.jetbrains.com/issue/RG-2450/Anchor-should-be-focused-after-closing-datepicker#focus=Comments-27-10044234.0-0.
+      setTimeout(function () {
+        // This is to prevent the focus from being restored the first time
+        // componentWillUnmount is called in StrictMode.
+        if (!mountedRef.current) {
+          previousFocusedNode.focus({
+            preventScroll: true
+          });
         }
-      } else {
-        _this.focusLast();
-      }
-    });
-    _defineProperty(_this, "handleBlurIfWithoutFocus", function (event) {
-      var _this$node;
-      if (!_this.trapWithoutFocus) {
-        return;
-      }
-      _this.trapWithoutFocus = false;
-      var newFocused = event.nativeEvent.relatedTarget;
-      if (!newFocused) {
-        return;
-      }
-      if (newFocused instanceof Element && (_this$node = _this.node) !== null && _this$node !== void 0 && _this$node.contains(newFocused)) {
-        return;
-      }
-      _this.focusLast();
-    });
-    _defineProperty(_this, "trapButtonNode", void 0);
-    _defineProperty(_this, "trapButtonRef", function (node) {
-      if (!node) {
-        return;
-      }
-      _this.trapButtonNode = node;
+      });
+    }
+  }
+  function focusElement() {
+    var first = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var node = nodeRef.current;
+    if (!node) {
+      return;
+    }
+    var tabables = _toConsumableArray(node.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(function (item) {
+      return item.tabIndex >= 0;
     });
-    return _this;
+    var toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
+    if (toBeFocused) {
+      toBeFocused.focus();
+    }
   }
-  _inherits(TabTrap, _Component);
-  return _createClass(TabTrap, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.previousFocusedNode = document.activeElement;
-      if (this.props.autoFocusFirst) {
-        this.focusFirst();
-      } else if (!this.props.trapDisabled && (!this.node || !this.node.contains(this.previousFocusedNode))) {
-        var _this$trapButtonNode;
-        this.trapWithoutFocus = true;
-        (_this$trapButtonNode = this.trapButtonNode) === null || _this$trapButtonNode === void 0 || _this$trapButtonNode.focus();
-      }
+  function focusLastIfEnabled(event) {
+    if (trapWithoutFocusRef.current) {
+      return;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.props.focusBackOnClose) {
-        this.restoreFocus();
+    if (focusBackOnExit) {
+      var prevFocused = event.nativeEvent.relatedTarget;
+      if (prevFocused != null && nodeRef.current != null && prevFocused instanceof Element && nodeRef.current.contains(prevFocused)) {
+        restoreFocus();
       }
+    } else {
+      focusLast();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        trapDisabled = _this$props.trapDisabled;
-        _this$props.autoFocusFirst;
-        _this$props.focusBackOnClose;
-        var focusBackOnExit = _this$props.focusBackOnExit,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      if (trapDisabled) {
-        return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-          ref: this.containerRef
-        }, restProps), {}, {
-          children: children
-        }));
-      }
-      return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
-        ref: this.containerRef
-      }, restProps), {}, {
-        children: [/*#__PURE__*/jsx("div", {
-          // It never actually stays focused
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex: 0,
-          ref: this.trapButtonRef,
-          className: modules_6dce58ae.trapButton,
-          onFocus: this.focusLastIfEnabled,
-          onBlur: this.handleBlurIfWithoutFocus,
-          "data-trap-button": true
-        }), children, /*#__PURE__*/jsx("div", {
-          // It never actually stays focused
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex: 0,
-          onFocus: focusBackOnExit ? this.restoreFocus : this.focusFirst,
-          "data-trap-button": true
-        })]
-      }));
+  }
+  function handleBlurIfWithoutFocus(event) {
+    var _nodeRef$current3;
+    if (!trapWithoutFocusRef.current) {
+      return;
+    }
+    trapWithoutFocusRef.current = false;
+    var newFocused = event.nativeEvent.relatedTarget;
+    if (!newFocused) {
+      return;
     }
-  }]);
-}(Component);
-_defineProperty(TabTrap, "propTypes", {
+    if (newFocused instanceof Element && (_nodeRef$current3 = nodeRef.current) !== null && _nodeRef$current3 !== void 0 && _nodeRef$current3.contains(newFocused)) {
+      return;
+    }
+    focusLast();
+  }
+  if (trapDisabled) {
+    return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
+      ref: nodeRef
+    }, restProps), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
+    ref: nodeRef
+  }, restProps), {}, {
+    children: [/*#__PURE__*/jsx("div", {
+      // It never actually stays focused
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      ref: trapButtonNodeRef,
+      className: modules_6dce58ae.trapButton,
+      onFocus: focusLastIfEnabled,
+      onBlur: handleBlurIfWithoutFocus,
+      "data-trap-button": true
+    }), children, /*#__PURE__*/jsx("div", {
+      // It never actually stays focused
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      onFocus: focusBackOnExit ? restoreFocus : focusFirst,
+      "data-trap-button": true
+    })]
+  }));
+});
+TabTrap.propTypes = {
   children: PropTypes.node.isRequired,
   trapDisabled: PropTypes.bool,
   autoFocusFirst: PropTypes.bool,
   focusBackOnClose: PropTypes.bool,
   focusBackOnExit: PropTypes.bool
-});
-_defineProperty(TabTrap, "defaultProps", {
-  trapDisabled: false,
-  autoFocusFirst: true,
-  focusBackOnClose: true,
-  focusBackOnExit: false
-});
+};
 
 export { FOCUSABLE_ELEMENTS, TabTrap as default };

package/components/table/row-with-focus-sensor.js

@@ -10,6 +10,7 @@ import '../global/composeRefs.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 import 'core-js/modules/es.array.map.js';
 import 'classnames';
 import '@jetbrains/icons/chevron-right';
@@ -19,7 +20,6 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.regexp.exec.js';

package/components/table/row.d.ts

@@ -56,6 +56,7 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: HTMLElement | null) => void>;
     render(): React.JSX.Element;
 }
 export type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/row.js

@@ -12,7 +12,7 @@ import { Button } from '../button/button.js';
 import Tooltip from '../tooltip/tooltip.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import getUID from '../global/get-uid.js';
-import composeRefs from '../global/composeRefs.js';
+import { createComposedRef } from '../global/composeRefs.js';
 import Cell from './cell.js';
 import { m as modules_1db4bbca } from '../_helpers/table.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -122,6 +122,7 @@ var Row = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_this, "rowRef", function (el) {
       _this.row = el;
     });
+    _defineProperty(_this, "composedRowRef", createComposedRef());
     return _this;
   }
   _inherits(Row, _PureComponent);
@@ -249,7 +250,7 @@ var Row = /*#__PURE__*/function (_PureComponent) {
       });
       return /*#__PURE__*/jsx("tr", _objectSpread2(_objectSpread2(_objectSpread2({
         id: this.id,
-        ref: composeRefs(this.rowRef, innerRef),
+        ref: this.composedRowRef(this.rowRef, innerRef),
         className: classes,
         tabIndex: 0,
         "data-test": joinDataTestAttributes('ring-table-row', dataTest)

package/components/table/smart-table.js

@@ -14,6 +14,7 @@ import '../global/composeRefs.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 import '../global/get-uid.js';
 import 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/shortcuts.js';
@@ -46,7 +47,6 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.string.replace.js';

package/components/table/table.js

@@ -21,6 +21,7 @@ import '../global/composeRefs.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
+import 'util-deprecate';
 import 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/core.js';
 import 'core-js/modules/es.array.find-index.js';
@@ -50,7 +51,6 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
-import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
 import 'core-js/modules/es.string.replace.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "6.0.38",
+  "version": "6.0.40",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -41,9 +41,9 @@
     "screenshots-test-ci": "npm --prefix packages/screenshots run test-ci",
     "screenshots-gather": "npm --prefix packages/screenshots run gather",
     "build-stories": "storybook build --quiet -c .storybook -o storybook-dist",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
     "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
-    "postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
+    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",