@jetbrains/ring-ui 7.0.103 → 7.0.104

package/components/header/profile.js

@@ -58,7 +58,6 @@ export default class Profile extends PureComponent {
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
-                target: '_self', // Full page reload in Angular
                 href: profileUrl,
                 LinkComponent,
             },

package/components/list/list.d.ts

@@ -43,6 +43,9 @@ export interface ListProps<T = unknown> {
     maxHeight?: number | null | undefined;
     activeIndex?: number | null | undefined;
     useMouseUp?: boolean | null | undefined;
+    /**
+     * @deprecated No longer used. Visibility is detected automatically via IntersectionObserver. Will be removed in Ring UI 8.0.
+     */
     visible?: boolean | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     compact?: boolean | null | undefined;
@@ -130,6 +133,8 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     virtualizedList?: VirtualizedList | null;
     unmounted?: boolean;
     container?: HTMLElement | null;
+    private intersectionObserver?;
+    private wasVisible;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;

package/components/list/list.js

@@ -122,6 +122,17 @@ export default class List extends Component {
         if (!this.props.renderOptimization) {
             this.scrollToActive();
         }
+        if (this.props.renderOptimization && this.container && typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver(entries => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting && !this.wasVisible && this.virtualizedList) {
+                        this.virtualizedList.recomputeRowHeights();
+                    }
+                    this.wasVisible = entry.isIntersecting;
+                }
+            });
+            this.intersectionObserver.observe(this.container);
+        }
     }
     shouldComponentUpdate(nextProps, nextState) {
         return (Object.keys(nextProps).some(key => !Object.is(nextProps[key], this.props[key])) ||
@@ -145,6 +156,7 @@ export default class List extends Component {
         this.checkOverflow();
     }
     componentWillUnmount() {
+        this.intersectionObserver?.disconnect();
         this.unmounted = true;
     }
     scheduleScrollListener = scheduleRAF();
@@ -157,6 +169,8 @@ export default class List extends Component {
     virtualizedList;
     unmounted;
     container;
+    intersectionObserver;
+    wasVisible = false;
     // eslint-disable-next-line no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items

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

@@ -9,7 +9,7 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
     const trapButtonNodeRef = useRef(null);
     const previousFocusedNodeRef = useRef(null);
     const trapWithoutFocusRef = useRef(false);
-    const mountedRef = useRef(false);
+    const mountedRef = useRef(undefined);
     // 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
@@ -18,16 +18,16 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         previousFocusedNodeRef.current = document.activeElement;
     }
     useImperativeHandle(ref, () => ({ node: nodeRef.current }), []);
-    function restoreFocus() {
+    function restoreFocusIfUnmounted(orElse) {
         const previousFocusedNode = previousFocusedNodeRef.current;
         if (previousFocusedNode instanceof HTMLElement &&
             previousFocusedNode.focus &&
-            isNodeInVisiblePartOfPage(previousFocusedNode)) {
-            // This is to prevent the focus from being restored the first time
-            // componentWillUnmount is called in StrictMode.
-            if (!mountedRef.current) {
-                previousFocusedNode.focus({ preventScroll: true });
-            }
+            isNodeInVisiblePartOfPage(previousFocusedNode) &&
+            mountedRef.current === false) {
+            previousFocusedNode.focus({ preventScroll: true });
+        }
+        else {
+            orElse?.();
         }
     }
     function focusElement(first = true) {
@@ -65,7 +65,7 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         }
         return () => {
             if (focusBackOnClose) {
-                restoreFocus();
+                restoreFocusIfUnmounted();
             }
         };
     }, [autoFocusFirst, trapDisabled, focusBackOnClose, focusFirst]);
@@ -76,7 +76,7 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         if (focusBackOnExit) {
             const prevFocused = event.nativeEvent.relatedTarget;
             if (prevFocused && nodeRef.current && prevFocused instanceof Element && nodeRef.current.contains(prevFocused)) {
-                restoreFocus();
+                restoreFocusIfUnmounted(focusLast);
             }
         }
         else {
@@ -97,6 +97,14 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         }
         focusLast();
     }
+    function restoreFocusOrFocusFirst() {
+        if (focusBackOnExit) {
+            restoreFocusIfUnmounted(focusFirst);
+        }
+        else {
+            focusFirst();
+        }
+    }
     if (trapDisabled) {
         return (<div ref={nodeRef} {...restProps}>
         {children}
@@ -111,7 +119,7 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
       <div 
     // It never actually stays focused
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    tabIndex={0} onFocus={focusBackOnExit ? restoreFocus : focusFirst} data-trap-button/>
+    tabIndex={0} onFocus={restoreFocusOrFocusFirst} data-trap-button/>
     </div>);
 });
 export default TabTrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.103",
+  "version": "7.0.104",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -191,7 +191,7 @@
     "vitest": "^4.0.18",
     "vitest-teamcity-reporter": "^0.4.1",
     "webpack": "^5.105.4",
-    "webpack-cli": "^6.0.1",
+    "webpack-cli": "^7.0.0",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -243,7 +243,6 @@
     "memoize-one": "^6.0.0",
     "postcss": "^8.5.8",
     "postcss-calc": "^10.1.1",
-    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",

package/postcss.config.js

@@ -10,7 +10,6 @@ module.exports = () => {
       },
     }),
     require('postcss-font-family-system-ui')({browsers: ['last 2 versions']}),
-    require('postcss-flexbugs-fixes')(),
     require('@jetbrains/postcss-require-hover')(),
     require('postcss-calc')({mediaQueries: true}),
   ];