@jetbrains/ring-ui 7.0.102 → 7.0.104

package/components/button/button.css

@@ -11,6 +11,8 @@
   --ring-button-loader-components: var(--ring-main-components);
   --ring-button-white-text-disabled-color: var(--ring-white-text-color);
   --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
+  --ring-button-border-radius-left: var(--ring-border-radius);
+  --ring-button-border-radius-right: var(--ring-border-radius);
 }
 
 :global(.ring-ui-theme-dark) {
@@ -66,7 +68,8 @@
   color: var(--ring-button-text-color);
 
   border: 0;
-  border-radius: var(--ring-border-radius);
+  border-radius: var(--ring-button-border-radius-left) var(--ring-button-border-radius-right)
+    var(--ring-button-border-radius-right) var(--ring-button-border-radius-left);
   outline: 0;
 
   background-color: var(--ring-button-background-color);
@@ -386,7 +389,10 @@
 
   overflow: hidden;
 
-  border-radius: calc(var(--ring-border-radius) - 1px);
+  border-top-left-radius: max(0px, calc(var(--ring-button-border-radius-left) - 1px));
+  border-top-right-radius: max(0px, calc(var(--ring-button-border-radius-right) - 1px));
+  border-bottom-right-radius: max(0px, calc(var(--ring-button-border-radius-right) - 1px));
+  border-bottom-left-radius: max(0px, calc(var(--ring-button-border-radius-left) - 1px));
   background-color: var(--ring-button-default-background-color);
 
   &::before {
@@ -414,7 +420,10 @@
   bottom: 0;
   left: 0;
 
-  border-radius: var(--ring-border-radius);
+  border-top-left-radius: var(--ring-button-border-radius-left);
+  border-top-right-radius: var(--ring-button-border-radius-right);
+  border-bottom-right-radius: var(--ring-button-border-radius-right);
+  border-bottom-left-radius: var(--ring-button-border-radius-left);
 }
 
 .delayed::after {

package/components/button-group/button-group.css

@@ -118,24 +118,32 @@
 /* stylelint-disable selector-max-specificity */
 .buttonGroup .button.button:hover:not(:disabled),
 .buttonGroup .button.button:active:not(:disabled) {
-  border-radius: var(--ring-border-radius);
+  --ring-button-border-radius-left: var(--ring-border-radius);
+  --ring-button-border-radius-right: var(--ring-border-radius);
+
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button.button:focus-visible {
-  border-radius: var(--ring-border-radius);
+  --ring-button-border-radius-left: var(--ring-border-radius);
+  --ring-button-border-radius-right: var(--ring-border-radius);
+
   box-shadow:
     var(--ring-button-shadow) var(--ring-border-hover-color),
     0 0 0 1px var(--ring-border-hover-color);
 }
 
 .buttonGroup .button.button.active {
-  border-radius: var(--ring-border-radius);
+  --ring-button-border-radius-left: var(--ring-border-radius);
+  --ring-button-border-radius-right: var(--ring-border-radius);
+
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button:focus-visible.active {
-  border-radius: var(--ring-border-radius);
+  --ring-button-border-radius-left: var(--ring-border-radius);
+  --ring-button-border-radius-right: var(--ring-border-radius);
+
   box-shadow:
     var(--ring-button-shadow) var(--ring-button-border-color),
     0 0 0 1px var(--ring-border-hover-color);
@@ -151,11 +159,15 @@
   composes: buttonGroup from '../button-toolbar/button-toolbar.css';
 }
 
-.common button,
-.common .button {
+.common button {
   border-radius: 0;
 }
 
+.common .button {
+  --ring-button-border-radius-left: 0;
+  --ring-button-border-radius-right: 0;
+}
+
 .split button,
 .split .button {
   margin: 0 0 0 -1px;
@@ -173,39 +185,29 @@
   }
 }
 
-.common > button:first-child,
-.common > .button:first-child,
-.common > :first-child .button {
+.common > button:first-child {
   margin: 0;
 
   border-top-left-radius: var(--ring-border-radius);
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-/* stylelint-disable selector-max-specificity */
-.common > button:first-child > div:first-child,
-.common > .button:first-child > div:first-child,
-.common > :first-child .button > div:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.common > .button:first-child,
+.common > :first-child .button {
+  --ring-button-border-radius-left: var(--ring-border-radius);
+
+  margin: 0;
 }
-/* stylelint-enable */
 
-.common > .button:last-child,
-.common > button:last-child,
-.common > :last-child .button {
+.common > button:last-child {
   border-top-right-radius: var(--ring-border-radius);
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-/* stylelint-disable selector-max-specificity */
-.common > .button:last-child > div:first-child,
-.common > button:last-child > div:first-child,
-.common > :last-child .button > div:first-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.common > .button:last-child,
+.common > :last-child .button {
+  --ring-button-border-radius-right: var(--ring-border-radius);
 }
-/* stylelint-enable */
 
 .split .flat:not(:last-child) {
   margin-right: 1px;

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.102",
+  "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}),
   ];