@jetbrains/ring-ui 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

@@ -26,6 +26,9 @@ export default class DateInput extends React.PureComponent {
         onClear: PropTypes.func,
         locale: PropTypes.object
     };
+    componentDidMount() {
+        this.updateInput(this.props);
+    }
     componentDidUpdate(prevProps) {
         const { text, active } = this.props;
         if (text !== prevProps.text || active !== prevProps.active) {
@@ -36,7 +39,6 @@ export default class DateInput extends React.PureComponent {
     input;
     inputRef = (el) => {
         this.input = el;
-        this.updateInput(this.props);
     };
     updateInput({ text, active }) {
         const el = this.input;

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

@@ -28,7 +28,7 @@ const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopu
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
         Popup.PopupProps.Directions.TOP_RIGHT
-    ]} {...restProps}>
+    ]} {...restProps} trapFocus>
     <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
 PopupComponent.propTypes = {

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

@@ -21,15 +21,29 @@ export default class TabTrap extends Component {
         focusBackOnClose: true,
         focusBackOnExit: false
     };
-    componentDidMount() {
+    constructor(props) {
+        super(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.
         this.previousFocusedNode = document.activeElement;
+    }
+    componentDidMount() {
         if (this.props.autoFocusFirst) {
             this.focusFirst();
         }
-        else if (!this.props.trapDisabled &&
-            (!this.node || !this.node.contains(this.previousFocusedNode))) {
-            this.trapWithoutFocus = true;
-            this.trapButtonNode?.focus();
+        else if (!this.props.trapDisabled) {
+            const previousFocusedElementIsInContainer = this.previousFocusedNode &&
+                this.node?.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.
+            const currentlyFocusedElementIsInContainer = this.node?.contains(document.activeElement);
+            if (!this.node ||
+                (!previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer)) {
+                this.trapWithoutFocus = true;
+                this.trapButtonNode?.focus();
+            }
         }
     }
     componentWillUnmount() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.38",
+  "version": "6.0.39",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -45,9 +45,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",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@babel/cli": "^7.24.7",
     "@babel/eslint-parser": "^7.24.7",
-    "@csstools/css-parser-algorithms": "^2.6.1",
+    "@csstools/css-parser-algorithms": "^2.7.0",
     "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@jetbrains/eslint-config": "^5.4.2",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
@@ -112,21 +112,21 @@
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.12.0",
     "axe-playwright": "^2.0.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001638",
+    "caniuse-lite": "^1.0.30001639",
     "chai": "^5.1.1",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
     "core-js": "^3.37.1",
-    "cpy-cli": "^3.1.1",
+    "cpy-cli": "^5.0.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-webpack": "^0.13.8",
@@ -167,7 +167,7 @@
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "~5.5.2",
+    "typescript": "~5.5.3",
     "vitest": "^1.6.0",
     "vitest-teamcity-reporter": "^0.3.0",
     "wallaby-webpack": "^3.9.16",
@@ -226,13 +226,13 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-calc": "^10.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^9.5.14",
+    "postcss-preset-env": "^9.5.15",
     "prop-types": "^15.8.1",
     "react-movable": "^3.2.0",
     "react-virtualized": "^9.22.5",