@jetbrains/ring-ui 6.0.22 → 6.0.24

package/components/list/list.css

@@ -291,6 +291,10 @@
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ring-content-background-color));
 }
 
+.overscrollNone {
+  overscroll-behavior: none;
+}
+
 .disabled {
   pointer-events: none;
 

package/components/list/list.d.ts

@@ -45,6 +45,7 @@ export interface ListProps<T = unknown> {
     compact?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;
     hidden?: boolean | null | undefined;
+    preventListOverscroll?: boolean | undefined;
 }
 export declare const ActiveItemContext: {
     ValueContext: React.Context<string | undefined>;
@@ -114,6 +115,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
         disableScrollToActive: PropTypes.Requireable<boolean>;
         hidden: PropTypes.Requireable<boolean>;
         ariaLabel: PropTypes.Requireable<string>;
+        preventListOverscroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         data: never[];

package/components/list/list.js

@@ -86,7 +86,8 @@ export default class List extends Component {
         compact: PropTypes.bool,
         disableScrollToActive: PropTypes.bool,
         hidden: PropTypes.bool,
-        ariaLabel: PropTypes.string
+        ariaLabel: PropTypes.string,
+        preventListOverscroll: PropTypes.bool
     };
     static defaultProps = {
         data: [],
@@ -515,7 +516,7 @@ export default class List extends Component {
         const dirOverride = { direction: 'inherit' }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
         return (<AutoSizer disableHeight onResize={this.props.onResize}>
         {({ width }) => (<div ref={registerChild}>
-            <VirtualizedList aria-label={this.props.ariaLabel} ref={this.virtualizedListRef} className="ring-list__i" autoHeight={autoHeight} style={maxHeight ? { maxHeight, height: 'auto', ...dirOverride } : dirOverride} autoContainerWidth height={height} width={width} isScrolling={isScrolling} onScroll={e => {
+            <VirtualizedList aria-label={this.props.ariaLabel} ref={this.virtualizedListRef} className={classNames('ring-list__i', { [styles.overscrollNone]: this.props.preventListOverscroll })} autoHeight={autoHeight} style={maxHeight ? { maxHeight, height: 'auto', ...dirOverride } : dirOverride} autoContainerWidth height={height} width={width} isScrolling={isScrolling} onScroll={e => {
                     onChildScroll(e);
                     this.scrollEndHandler();
                 }} scrollTop={scrollTop} rowCount={rowCount} estimatedRowSize={this.defaultItemHeight()} rowHeight={this._cache.rowHeight} rowRenderer={this.renderItem} overscanRowCount={this._bufferSize} 

package/components/radio/radio.css

@@ -40,7 +40,7 @@
 
   &::after {
     position: absolute;
-    top: 3px;
+    top: 50%;
     left: 3px;
 
     width: var(--ring-unit);
@@ -50,7 +50,7 @@
 
     transition: opacity var(--ring-fast-ease), transform var(--ring-fast-ease);
 
-    transform: scale(0);
+    transform: scale(0) translateY(-50%);
 
     opacity: 0;
 
@@ -84,7 +84,7 @@
     &::after {
       transition: none;
 
-      transform: scale(1);
+      transform: scale(1) translateY(-50%);
 
       opacity: 1;
     }

package/components/select/select-popup.css

@@ -44,10 +44,6 @@
   overscroll-behavior: contain;
 }
 
-.popupOverscrollNone {
-  overscroll-behavior: none;
-}
-
 .filterWrapper {
   position: relative;
 

package/components/select/select__popup.js

@@ -252,9 +252,7 @@ export default class SelectPopup extends PureComponent {
             if (this.props.toolbar) {
                 maxHeight -= TOOLBAR_HEIGHT;
             }
-            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} className={this.props.preventListOverscroll
-                    ? styles.popupOverscrollNone
-                    : undefined} renderOptimization={this.props.renderOptimization}/>);
+            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} preventListOverscroll={this.props.preventListOverscroll} renderOptimization={this.props.renderOptimization}/>);
         }
         return null;
     }

package/components/toggle/toggle.css

@@ -72,7 +72,7 @@
 
   &::before {
     position: absolute;
-    top: calc(padding - 1px);
+    top: 50%;
     left: -1px;
 
     box-sizing: border-box;
@@ -84,7 +84,7 @@
 
     transition: transform timing-function duration;
 
-    transform: translateX(padding);
+    transform: translateX(padding) translateY(-50%);
 
     border: solid 1px var(--ring-switch-border-color);
 
@@ -122,7 +122,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(var(--ring-unit) * 1.5 - padding));
+    transform: translateX(calc(var(--ring-unit) * 1.5 - padding)) translateY(-50%);
   }
 }
 
@@ -147,7 +147,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(12px);
+    transform: translateX(12px) translateY(-50%);
   }
 }
 
@@ -172,7 +172,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(var(--ring-unit) * 2 - padding));
+    transform: translateX(calc(var(--ring-unit) * 2 - padding)) translateY(-50%);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.22",
+  "version": "6.0.24",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",