@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.1

package/components/hub-source/hub-source.js

@@ -1,7 +1,7 @@
 const defaultOptions = {
     searchMax: 20,
     searchSideThreshold: 100,
-    queryFormatter: query => `${query} or ${query}*`
+    queryFormatter: query => `${query} or ${query}*`,
 };
 /**
  * HubSource is designed to speed up search requests for small installations.
@@ -62,15 +62,13 @@ export default class HubSource {
     processResults(res) {
         const items = res[this.relativeUrl] || [];
         if (this.isClientSideSearch) {
-            return items.
-                filter(it => this.filterFn(it)).
-                slice(0, this.options.searchMax);
+            return items.filter(it => this.filterFn(it)).slice(0, this.options.searchMax);
         }
         return items;
     }
     async sideDetectionRequest(params, query) {
         const res = await this.makeCachedRequest(HubSource.mergeParams(params, {
-            $top: this.options.searchSideThreshold
+            $top: this.options.searchSideThreshold,
         }));
         this.isClientSideSearch = this.checkIsClientSideSearch(res);
         if (!this.isClientSideSearch) {
@@ -80,13 +78,13 @@ export default class HubSource {
     }
     doClientSideSearch(params) {
         return this.makeCachedRequest(HubSource.mergeParams(params, {
-            $top: this.constructor.TOP_ALL
+            $top: this.constructor.TOP_ALL,
         }));
     }
     doServerSideSearch(params, query) {
         return this.makeRequest(HubSource.mergeParams(params, {
             query: this.formatQuery(query),
-            $top: this.options.searchMax
+            $top: this.options.searchMax,
         }));
     }
     getValueFromSuitableSource(query, params) {

package/components/hub-source/hub-source__user.js

@@ -8,7 +8,7 @@ export function convertUserForCard(hubUser, serverUri = '') {
         banReason: hubUser.banReason,
         email: hubUser.profile?.email?.email,
         avatarUrl: hubUser.profile?.avatar?.url,
-        href: `${serverUri}users/${hubUser.id}`
+        href: `${serverUri}users/${hubUser.id}`,
     };
 }
 export function createHubUserCardSource(auth, userId, fields = DEFAULT_FIELDS) {

package/components/hub-source/hub-source__users-groups.js

@@ -1,7 +1,7 @@
 import HubSource from './hub-source';
 const defaultOptions = {
     searchMax: 20,
-    searchSideThreshold: 200
+    searchSideThreshold: 200,
 };
 export default class HubSourceUsersGroups {
     auth;
@@ -14,11 +14,11 @@ export default class HubSourceUsersGroups {
         this.usersSource = new HubSource(auth, 'users', {
             searchMax: this.options.searchMax,
             searchSideThreshold: this.options.searchSideThreshold,
-            queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+            queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`,
         });
         this.groupsSource = new HubSource(auth, 'usergroups', {
             searchMax: this.options.searchMax,
-            searchSideThreshold: this.options.searchSideThreshold
+            searchSideThreshold: this.options.searchSideThreshold,
         });
     }
     static wrapMultiwordQuery(query) {
@@ -32,19 +32,18 @@ export default class HubSourceUsersGroups {
             return () => true;
         }
         const normalizedQuery = query.toLowerCase();
-        return (it) => (it.name.toLowerCase().indexOf(normalizedQuery) !== -1 ||
-            it.login.toLowerCase().indexOf(normalizedQuery) !== -1);
+        return (it) => it.name.toLowerCase().indexOf(normalizedQuery) !== -1 || it.login.toLowerCase().indexOf(normalizedQuery) !== -1;
     }
     getUsers(query = '') {
         return this.usersSource.get(query, {
             fields: 'id,name,login,total,profile/avatar/url',
-            orderBy: 'name'
+            orderBy: 'name',
         }, this.createUsersFilterFn(query));
     }
     getGroups(query = '') {
         return this.groupsSource.get(query, {
             fields: 'id,name,total,userCount,iconUrl',
-            orderBy: 'name'
+            orderBy: 'name',
         });
     }
     getUserAndGroups(query) {

package/components/i18n/README.md

@@ -5,6 +5,7 @@ All messages should be stored in a messages.json, using that format https://www.
 ### How to use
 
 1. Using your project i18n tooling, construct an object with localised messages, like:
+
 ```
 // You can use https://ttag.js.org/ for example:
 const localised = {
@@ -25,15 +26,13 @@ const localised = {
 setTranslations(localised);
 ```
 
-3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.  
+3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.
 
 ```
   <I18nContextHolder messages={localised}>
     <App />
   </I18nContextHolder>
-```  
-
-
+```
 
 ### Utilities
 

package/components/i18n/i18n-context.js

@@ -3,13 +3,11 @@ import * as React from 'react';
 import { getTranslations, setTranslations, translate } from './i18n';
 export const I18nContext = React.createContext({
     messages: getTranslations(),
-    translate
+    translate,
 });
 export const I18nContextHolder = ({ children, messages }) => {
     useEffect(() => {
         setTranslations(messages);
     }, [messages]);
-    return (<I18nContext.Provider value={{ messages, translate }}>
-      {children}
-    </I18nContext.Provider>);
+    return <I18nContext.Provider value={{ messages, translate }}>{children}</I18nContext.Provider>;
 };

package/components/icon/icon.js

@@ -11,11 +11,11 @@ const warnSize = deprecate(() => { }, `\`size\`, \`width\` and \`height\` props
 
 We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
 export default class Icon extends PureComponent {
-    static defaultProps = ({
+    static defaultProps = {
         className: '',
         color: Color.DEFAULT,
-        glyph: ''
-    });
+        glyph: '',
+    };
     static Color = Color;
     static Size = Size;
     warnSize() {
@@ -34,7 +34,7 @@ export default class Icon extends PureComponent {
             this.warnSize();
             return {
                 width: size,
-                height: size
+                height: size,
             };
         }
         return undefined;
@@ -46,12 +46,10 @@ export default class Icon extends PureComponent {
         }
         const classes = classNames(styles.icon, {
             [styles[color]]: !!color,
-            [styles.loading]: loading
+            [styles.loading]: loading,
         }, className);
-        return (<span {...restProps} className={classes}>
-        {typeof Glyph === 'string'
-                ? <IconSVG src={Glyph} style={this.getStyle()}/>
-                : <Glyph className={styles.glyph} style={this.getStyle()}/>}
+        return (<span data-test="ring-icon" {...restProps} className={classes}>
+        {typeof Glyph === 'string' ? (<IconSVG src={Glyph} style={this.getStyle()}/>) : (<Glyph className={styles.glyph} style={this.getStyle()}/>)}
       </span>);
     }
 }

package/components/icon/icon__svg.js

@@ -23,7 +23,7 @@ function serializeAttrs(map) {
 }
 function extractSVGProps(svgNode) {
     const map = svgNode.attributes;
-    return (map.length > 0) ? serializeAttrs(map) : null;
+    return map.length > 0 ? serializeAttrs(map) : null;
 }
 const getSVGFromSource = memoize((src) => {
     const svgContainer = document.createElement('div');
@@ -37,21 +37,21 @@ const getSVGFromSource = memoize((src) => {
     }
     return {
         props: extractSVGProps(svg),
-        html: svg.innerHTML
+        html: svg.innerHTML,
     };
 });
 function isCompatibilityMode(iconSrc) {
-    const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
-    const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
+    const hasWidth = /width="[\d\.]+"/gi.test(iconSrc);
+    const hasHeight = /height="[\d\.]+"/gi.test(iconSrc);
     return !hasWidth || !hasHeight;
 }
 function IconSVG({ src, className, ...rest }) {
     const glyphClasses = classNames(styles.glyph, {
-        [styles.compatibilityMode]: isCompatibilityMode(src)
+        [styles.compatibilityMode]: isCompatibilityMode(src),
     }, className);
     const { props, html } = getSVGFromSource(src);
     return (<svg {...props} {...rest} className={glyphClasses} dangerouslySetInnerHTML={{
-            __html: html
+            __html: html,
         }}/>);
 }
 export default memo(IconSVG);

package/components/input/input.js

@@ -28,10 +28,10 @@ export class Input extends PureComponent {
         size: Size.M,
         onChange: noop,
         inputRef: noop,
-        enableShortcuts: ['esc']
+        enableShortcuts: ['esc'],
     };
     state = {
-        empty: true
+        empty: true,
     };
     componentDidMount() {
         this.frame = requestAnimationFrame(() => this.adapt());
@@ -53,10 +53,9 @@ export class Input extends PureComponent {
     }
     checkValue() {
         this.setState({
-            empty: !this.input?.value
+            empty: !this.input?.value,
         });
-        if (this.props.multiline &&
-            this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
+        if (this.props.multiline && this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
             this.stretch(this.input);
         }
     }
@@ -103,7 +102,7 @@ export class Input extends PureComponent {
             [styles.empty]: empty,
             [styles.withIcon]: icon != null,
             [styles.clearable]: clearable,
-            [styles.borderless]: borderless
+            [styles.borderless]: borderless,
         });
         const inputClasses = classNames(styles.input, inputClassName);
         const text = value != null ? value : children;
@@ -115,22 +114,20 @@ export class Input extends PureComponent {
             id: this.getId(),
             placeholder,
             'aria-label': typeof label === 'string' && label ? label : placeholder,
-            'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
+            'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null,
         };
         return (<I18nContext.Consumer>
         {({ translate }) => (<div className={classes} data-test="ring-input">
-            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>
+                {label}
+              </ControlLabel>)}
             <div className={styles.container}>
               {icon && <Icon glyph={icon} className={styles.icon}/>}
-              {multiline
-                    ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
-                    : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
+              {multiline ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>) : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
               {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
               {afterInput}
             </div>
-            {error
-                    ? <div className={styles.errorText}>{error}</div>
-                    : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}
+            {error ? (<div className={styles.errorText}>{error}</div>) : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}
           </div>)}
       </I18nContext.Consumer>);
     }

package/components/input-size/input-size.stories.js

@@ -4,7 +4,7 @@ import './input-size.css';
 import '../error-bubble/error-bubble-legacy.css';
 
 export default {
-  title: 'Style-only/Input Sizes'
+  title: 'Style-only/Input Sizes',
 };
 
 export const basic = () => (
@@ -12,48 +12,68 @@ export const basic = () => (
     <h3 className="example-block">Inputs</h3>
     <div className="example-block">
       <div className="ring-error-bubble-wrapper">
-        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs"/>
-        <label htmlFor="extra-short-input" className="ring-error-bubble active">Extra-short Input</label>
+        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs" />
+        <label htmlFor="extra-short-input" className="ring-error-bubble active">
+          Extra-short Input
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <input id="short-input" type="number" className="ring-input ring-input-size_s"/>
-        <label htmlFor="short-input" className="ring-error-bubble active">Short Input</label>
+        <input id="short-input" type="number" className="ring-input ring-input-size_s" />
+        <label htmlFor="short-input" className="ring-error-bubble active">
+          Short Input
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <input id="medium-input" type="number" className="ring-input ring-input-size_m"/>
-        <label htmlFor="medium-input" className="ring-error-bubble active">Medium Input</label>
+        <input id="medium-input" type="number" className="ring-input ring-input-size_m" />
+        <label htmlFor="medium-input" className="ring-error-bubble active">
+          Medium Input
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <input id="long-input" type="number" className="ring-input ring-input-size_l"/>
-        <label htmlFor="long-input" className="ring-error-bubble active">Long Input</label>
+        <input id="long-input" type="number" className="ring-input ring-input-size_l" />
+        <label htmlFor="long-input" className="ring-error-bubble active">
+          Long Input
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <input id="full-width-input" type="number" className="ring-input"/>
-        <label htmlFor="full-width-input" className="ring-error-bubble active">Full-width Input</label>
+        <input id="full-width-input" type="number" className="ring-input" />
+        <label htmlFor="full-width-input" className="ring-error-bubble active">
+          Full-width Input
+        </label>
       </div>
     </div>
 
     <h3 className="example-block">Textareas</h3>
     <div className="example-block">
       <div className="ring-error-bubble-wrapper">
-        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs"/>
-        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">Extra-short Textarea</label>
+        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs" />
+        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">
+          Extra-short Textarea
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <textarea id="short-textarea" className="ring-input ring-input-size_s"/>
-        <label htmlFor="short-textarea" className="ring-error-bubble active">Short Textarea</label>
+        <textarea id="short-textarea" className="ring-input ring-input-size_s" />
+        <label htmlFor="short-textarea" className="ring-error-bubble active">
+          Short Textarea
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <textarea id="medium-textarea" className="ring-input ring-input-size_m"/>
-        <label htmlFor="medium-textarea" className="ring-error-bubble active">Medium Textarea</label>
+        <textarea id="medium-textarea" className="ring-input ring-input-size_m" />
+        <label htmlFor="medium-textarea" className="ring-error-bubble active">
+          Medium Textarea
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <textarea id="long-textarea" className="ring-input ring-input-size_l"/>
-        <label htmlFor="long-textarea" className="ring-error-bubble active">Long Textarea</label>
+        <textarea id="long-textarea" className="ring-input ring-input-size_l" />
+        <label htmlFor="long-textarea" className="ring-error-bubble active">
+          Long Textarea
+        </label>
       </div>
       <div className="ring-error-bubble-wrapper">
-        <textarea id="full-width-textarea" className="ring-input"/>
-        <label htmlFor="full-width-textarea" className="ring-error-bubble active">Full-width Textarea</label>
+        <textarea id="full-width-textarea" className="ring-input" />
+        <label htmlFor="full-width-textarea" className="ring-error-bubble active">
+          Full-width Textarea
+        </label>
       </div>
     </div>
   </div>
@@ -68,5 +88,5 @@ basic.parameters = {
     margin: 16px;
     max-width: 600px;
   }
-</style>`
+</style>`,
 };

package/components/island/adaptive-island-hoc.js

@@ -7,7 +7,7 @@ export const ScrollHandlerContext = createContext(null);
 export default function adaptiveIslandHOC(ComposedComponent) {
     return class AdaptiveIsland extends Component {
         state = {
-            phase: null
+            phase: null,
         };
         onContentScroll = ({ scrollTop, scrollHeight, clientHeight }) => {
             if (scrollHeight - clientHeight >=

package/components/island/content.js

@@ -12,11 +12,11 @@ class Content extends Component {
         fade: true,
         bottomBorder: false,
         onScroll: noop,
-        onScrollToBottom: noop
+        onScrollToBottom: noop,
     };
     state = {
         scrolledToTop: true,
-        scrolledToBottom: false
+        scrolledToBottom: false,
     };
     componentWillUnmount() {
         this.scrollableNode = null;
@@ -63,14 +63,12 @@ class Content extends Component {
             [styles.contentWithTopFade]: fade && !scrolledToTop,
             [styles.contentWithBottomFade]: fade && !scrolledToBottom,
             [styles.withTransparentBottomBorder]: bottomBorder,
-            [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
+            [styles.withBottomBorder]: bottomBorder && !scrolledToBottom,
         });
         const scrollableWrapperClasses = classNames(styles.scrollableWrapper, scrollableWrapperClassName);
         return (<div {...restProps} data-test="ring-island-content" className={classes}>
         <div tabIndex={tabIndex} className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.calculateScrollPosition : noop}>
-          {fade && (<div ref={this.setWrapper}>
-              {children}
-            </div>)}
+          {fade && <div ref={this.setWrapper}>{children}</div>}
 
           {!fade && children}
         </div>

package/components/island/header.js

@@ -10,7 +10,7 @@ const Start = {
     PADDING_BOTTOM: 0,
     X: 0,
     Y: 0,
-    SPACING: 0
+    SPACING: 0,
 };
 const End = {
     FONT_SIZE: 13,
@@ -20,12 +20,12 @@ const End = {
     // Compensation
     X: 0.4,
     Y: 0.1,
-    SPACING: 1.09
+    SPACING: 1.09,
 };
 const BORDER_APPEAR_PHASE = 0.5;
 class Header extends Component {
     static defaultProps = {
-        wrapWithTitle: true
+        wrapWithTitle: true,
     };
     style(name) {
         return interpolateLinear(Start[name], End[name], this.props.phase ?? 0);
@@ -33,31 +33,29 @@ class Header extends Component {
     render() {
         const { children, className, wrapWithTitle, border, phase, ...restProps } = this.props;
         const classes = classNames(styles.header, className, {
-            [styles.withBottomBorder]: border || phase != null && phase >= BORDER_APPEAR_PHASE
+            [styles.withBottomBorder]: border || (phase != null && phase >= BORDER_APPEAR_PHASE),
         });
         const headerStyle = phase != null
             ? {
                 lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
                 paddingTop: this.style('PADDING_TOP'),
-                paddingBottom: this.style('PADDING_BOTTOM')
+                paddingBottom: this.style('PADDING_BOTTOM'),
             }
             : undefined;
         const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
-        const titleStyle = (phase != null && phase < 1)
+        const titleStyle = phase != null && phase < 1
             ? {
                 fontSize: Start.FONT_SIZE,
                 transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
-                letterSpacing: this.style('SPACING')
+                letterSpacing: this.style('SPACING'),
             }
             : undefined;
         return (<div {...restProps} data-test="ring-island-header" className={classes} style={headerStyle}>
-        {wrapWithTitle &&
-                (<h2 className={styles.title} style={titleStyle}>
+        {wrapWithTitle && (<h2 className={styles.title} style={titleStyle}>
             {children}
           </h2>)}
 
         {!wrapWithTitle && children}
-
       </div>);
     }
 }

package/components/island/island.css

@@ -1,9 +1,9 @@
 @import "../global/variables.css";
 
-@value gradientStart: rgba(255, 255, 255, 0);
-@value gradientStop: var(--ring-content-background-color);
-
 .island {
+  --ring-island-gradient-start: rgba(255, 255, 255, 0);
+  --ring-island-gradient-stop: var(--ring-content-background-color);
+
   display: flex;
   flex-direction: column;
 
@@ -103,7 +103,7 @@
 
   opacity: 0.8;
 
-  background: linear-gradient(to top, gradientStart, gradientStop);
+  background: linear-gradient(to top, var(--ring-island-gradient-start), var(--ring-island-gradient-stop));
 }
 
 .contentWithTopFade:first-child::before {
@@ -127,5 +127,5 @@
   opacity: 0.8;
   border-bottom-right-radius: var(--ring-border-radius);
   border-bottom-left-radius: var(--ring-border-radius);
-  background: linear-gradient(to bottom, gradientStart, gradientStop);
+  background: linear-gradient(to bottom, var(--ring-island-gradient-start), var(--ring-island-gradient-stop));
 }

package/components/island/island.js

@@ -11,7 +11,7 @@ export default class Island extends Component {
         const { children, className, narrow, withoutPaddings, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.island, className, {
             [styles.narrowIsland]: narrow,
-            [styles.withoutPaddings]: withoutPaddings
+            [styles.withoutPaddings]: withoutPaddings,
         });
         return (<div {...restProps} className={classes} data-test={dataTests('ring-island', dataTest)}>
         {children}

package/components/link/clickableLink.js

@@ -20,6 +20,8 @@ export default class ClickableLink extends PureComponent {
     };
     render() {
         const { onConditionalClick, onPlainLeftClick, activeClassName, href, children, ...restProps } = this.props;
-        return <a href={href} {...restProps} onClick={this.onClick}>{children}</a>;
+        return (<a href={href} {...restProps} onClick={this.onClick}>
+        {children}
+      </a>);
     }
 }

package/components/link/link.js

@@ -8,19 +8,21 @@ export function linkHOC(ComposedComponent) {
     return class Link extends PureComponent {
         render() {
             const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, children, onPlainLeftClick, onClick, ...restProps } = this.props;
-            const useButton = pseudo || !isCustom && href == null;
+            const useButton = pseudo || (!isCustom && href == null);
             const classes = classNames(styles.link, className, {
                 [styles.active]: active,
                 [styles.inherit]: inherit,
                 [styles.hover]: hover,
-                [styles.pseudo]: useButton
+                [styles.pseudo]: useButton,
             });
             let props = restProps;
             if (isCustom && !props.activeClassName) {
                 props = { ...props, activeClassName: styles.active };
             }
             if (useButton) {
-                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{children}</button>);
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>
+            {children}
+          </button>);
             }
             return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
           {children}

package/components/list/consts.js

@@ -20,6 +20,6 @@ export const Dimension = {
     SEPARATOR_TEXT_HEIGHT: 18,
     TITLE_HEIGHT: 42,
     INNER_PADDING: 8,
-    MARGIN: 8
+    MARGIN: 8,
 };
 export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.d.ts

@@ -163,7 +163,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     containerRef: (el: HTMLElement | null) => void;
     private _inner?;
     get inner(): HTMLElement | null | undefined;
-    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild }: RenderVirtualizedInnerParams): import("react").JSX.Element;
+    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild, }: RenderVirtualizedInnerParams): import("react").JSX.Element;
     renderVirtualized(maxHeight: number | null | undefined, rowCount: number): import("react").JSX.Element;
     renderSimple(maxHeight: number | null | undefined, rowCount: number): import("react").JSX.Element;
     id: string;