@jetbrains/ring-ui-built 6.0.37 → 6.0.39

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

@@ -1,4 +1,4 @@
-import { Component, ReactNode, HTMLAttributes } from 'react';
+import { Component, 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])";
@@ -26,6 +26,7 @@ export default class TabTrap extends Component<TabTrapProps> {
         focusBackOnClose: boolean;
         focusBackOnExit: boolean;
     };
+    constructor(props: TabTrapProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
     previousFocusedNode?: Element | null;

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

@@ -1,5 +1,4 @@
 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 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.object.to-string.js';
 import { Component } from 'react';
@@ -23,13 +22,14 @@ var FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:
  * @name TabTrap
  */
 var TabTrap = /*#__PURE__*/function (_Component) {
-  function TabTrap() {
+  function TabTrap(props) {
     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));
+    _this = _callSuper(this, TabTrap, [props]);
+    // 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 componentDidMount because it's too late, some children might have already
+    // focused itself.
     _defineProperty(_this, "previousFocusedNode", void 0);
     _defineProperty(_this, "trapWithoutFocus", void 0);
     _defineProperty(_this, "restoreFocus", function () {
@@ -104,19 +104,26 @@ var TabTrap = /*#__PURE__*/function (_Component) {
       }
       _this.trapButtonNode = node;
     });
+    _this.previousFocusedNode = document.activeElement;
     return _this;
   }
   _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();
+      } else if (!this.props.trapDisabled) {
+        var _this$node2, _this$node3;
+        var previousFocusedElementIsInContainer = this.previousFocusedNode && ((_this$node2 = this.node) === null || _this$node2 === void 0 ? void 0 : _this$node2.contains(this.previousFocusedNode));
+        // 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 = (_this$node3 = this.node) === null || _this$node3 === void 0 ? void 0 : _this$node3.contains(document.activeElement);
+        if (!this.node || !previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer) {
+          var _this$trapButtonNode;
+          this.trapWithoutFocus = true;
+          (_this$trapButtonNode = this.trapButtonNode) === null || _this$trapButtonNode === void 0 || _this$trapButtonNode.focus();
+        }
       }
     }
   }, {

package/components/table/header.js

@@ -27,6 +27,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
+import 'memoize-one';
 import '../control-help/control-help.js';
 import 'core-js/modules/es.regexp.to-string.js';
 import '@jetbrains/icons/unsorted-10px';

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

@@ -9,6 +9,7 @@ import '../global/prop-types.js';
 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 'core-js/modules/es.array.map.js';
 import 'classnames';
 import '@jetbrains/icons/chevron-right';

package/components/table/row.js

@@ -65,6 +65,7 @@ import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import 'core-js/modules/es.array.reduce.js';
+import 'memoize-one';
 
 var _excluded = ["item", "columns", "selectable", "selected", "showFocus", "draggable", "alwaysShowDragHandle", "dragHandleTitle", "level", "collapsible", "parentCollapsible", "collapsed", "maxColSpan", "onCollapse", "onExpand", "showDisabledSelection", "onSelect", "checkboxTooltip", "innerRef", "focused", "autofocus", "onFocusReset", "onFocusRestore", "onHover", "className", "metaColumnClassName", "data-test"];
 var DragHandle = function DragHandle(_ref) {

package/components/table/smart-table.js

@@ -13,6 +13,7 @@ import '../global/prop-types.js';
 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 '../global/get-uid.js';
 import 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/shortcuts.js';

package/components/table/table.js

@@ -20,6 +20,7 @@ import '../global/prop-types.js';
 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 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/core.js';
 import 'core-js/modules/es.array.find-index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "6.0.37",
+  "version": "6.0.39",
   "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",