@jetbrains/ring-ui-built 6.0.38 → 6.0.39

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/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/package.json

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