@jetbrains/ring-ui 7.0.103 → 7.0.105

package/components/auth/auth-core.js

@@ -45,7 +45,7 @@ const DEFAULT_CONFIG = {
     defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
     waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
     tokenRefreshRetryDelays: TOKEN_REFRESH_RETRY_DELAYS,
-    rpInitiatedLogout: true,
+    rpInitiatedLogout: false,
     translations: null,
 };
 class Auth {

package/components/avatar/avatar.css

@@ -12,12 +12,6 @@
   border-radius: 50%;
 }
 
-.avatarShadow {
-  /* See https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */
-
-  filter: url('avatar-shadow-filter.svg#inset-shadow');
-}
-
 .avatarInfo {
   display: flex;
   align-items: center;

package/components/avatar/avatar.js

@@ -75,10 +75,10 @@ export default class Avatar extends PureComponent {
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
             return (<div>
-          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(classes, styles.avatarShadow)} style={styleObj} src={src} alt='User avatar'/>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classes} style={styleObj} src={src} alt='User avatar'/>
           <img {...restProps} data-test='avatar' onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt='Subavatar'/>
         </div>);
         }
-        return (<img {...restProps} data-test='avatar' onError={this.handleError} onLoad={this.handleSuccess} className={classNames(classes, styles.avatarShadow)} style={styleObj} src={src} alt='User avatar'/>);
+        return (<img {...restProps} data-test='avatar' onError={this.handleError} onLoad={this.handleSuccess} className={classes} style={styleObj} src={src} alt='User avatar'/>);
     }
 }

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

package/components/avatar/avatar-shadow-filter.svg

@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
-  <defs>
-    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
-      <feComponentTransfer in="SourceAlpha">
-        <feFuncA type="table" tableValues="1 0" />
-      </feComponentTransfer>
-      <feGaussianBlur stdDeviation="4"/>
-      <feOffset dx="0" dy="0" result="offsetblur"/>
-      <feFlood flood-color="rgba(0, 0, 0, 0.07)"/>
-      <feComposite in2="offsetblur" operator="in"/>
-      <feComposite in="SourceAlpha" operator="in" />
-      <feMerge>
-        <feMergeNode in="SourceGraphic" />
-        <feMergeNode />
-      </feMerge>
-    </filter>
-  </defs>
-</svg>