@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/components/radio/radio.css

@@ -74,11 +74,12 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-borders-color);
+    border-color: var(--ring-border-unselected-disabled-color);
+    background-color: var(--ring-disabled-background-color);
   }
 
   &:checked + .circle {
-    border-color: var(--ring-border-hover-color);
+    border-color: var(--ring-main-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
@@ -101,8 +102,13 @@
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled]:checked + .circle::after {
-    opacity: 0.5;
+  &[disabled]:checked + .circle {
+    border-color: var(--ring-border-disabled-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      background-color: var(--ring-border-disabled-color);
+    }
   }
 
   &[disabled] ~ .label {

package/components/select/select.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button-shadow from "../button/button.css";
 
 .select {
   position: relative;
@@ -39,8 +40,8 @@
 
 .icons {
   position: absolute;
-  top: -2px;
-  right: 0;
+  top: -3px;
+  right: calc(unit * 1.5);
 
   transition: color var(--ring-ease);
 
@@ -55,15 +56,8 @@
   }
 
   @nest .inputMode & {
-    top: 12px;
-
     font-size: var(--ring-font-size);
   }
-
-  @nest .buttonMode & {
-    top: -4px;
-    right: unit;
-  }
 }
 
 .selectedIcon {
@@ -87,10 +81,6 @@
   vertical-align: -1px;
 }
 
-.clearIcon.clearIcon > span > span {
-  color: var(--ring-icon-secondary-color);
-}
-
 .sizeS {
   width: calc(unit * 12);
 }
@@ -111,8 +101,7 @@
   max-width: 100%;
 }
 
-.buttonMode,
-.materialMode {
+.buttonMode {
   position: relative;
 
   cursor: pointer;
@@ -168,14 +157,18 @@
   display: block;
 
   width: 100%;
+  padding-left: unit;
 
   text-align: left;
   vertical-align: calc(0 - unit);
 }
 
-.buttonValueOpen {
-  border-color: var(--ring-selected-background-color);
-  background-color: var(--ring-selected-background-color);
+.buttonValue:global(.focus-visible) {
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+.buttonValueOpen.buttonValueOpen {
+  box-shadow: button-shadow var(--ring-main-color);
 }
 
 .label {
@@ -186,6 +179,7 @@
 
 .select:hover .value,
 .select:hover .icons,
+:global(.focus-visible) + .icons,
 .value:focus,
 .value:focus + .icons,
 .open,
@@ -207,23 +201,6 @@
   }
 }
 
-.selectedLabel {
-  position: absolute;
-  top: calc(unit * -1.5);
-  left: 0;
-
-  overflow: hidden;
-
-  max-width: 100%;
-
-  text-overflow: ellipsis;
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
 .avatar {
   margin-right: 4px;
 
@@ -236,9 +213,10 @@
 }
 
 .chevron.chevron {
-  padding: 0;
+  padding: 0 3px;
 
   transition: none;
+  vertical-align: -1px;
 
   color: inherit;
 }
@@ -249,6 +227,10 @@
   color: inherit;
 }
 
-.avatar {
+.heightS .avatar {
   vertical-align: -6px;
 }
+
+.heightS .icons {
+  top: -5px;
+}

package/components/select/select.d.ts

@@ -1,9 +1,9 @@
 import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
-import Theme from '../global/theme';
 import { ListDataItem } from '../list/consts';
 import { Directions } from '../popup/popup.consts';
+import { ControlsHeight } from '../global/controls-height';
 import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
 /**
  * @name Select
@@ -17,7 +17,6 @@ declare enum Type {
     INPUT = "INPUT",
     CUSTOM = "CUSTOM",
     INLINE = "INLINE",
-    MATERIAL = "MATERIAL",
     INPUT_WITHOUT_CONTROLS = "INPUT_WITHOUT_CONTROLS"
 }
 declare type SelectItemData<T> = T & {
@@ -78,6 +77,7 @@ export interface BaseSelectProps<T = unknown> {
     onDone: () => void;
     onReset: () => void;
     dir: 'ltr' | 'rtl';
+    height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
     buttonClassName?: string | null | undefined;
@@ -93,7 +93,6 @@ export interface BaseSelectProps<T = unknown> {
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;
-    theme?: string | null | undefined;
     customAnchor?: ((props: CustomAnchorProps) => ReactNode) | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;
@@ -188,9 +187,9 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
     state: SelectState<T>;
     componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>): void;
+    static contextType: React.Context<ControlsHeight>;
     static Type: typeof Type;
     static Size: typeof Size;
-    static Theme: typeof Theme;
     id: string;
     shortcutsScope: string;
     listId: string;
@@ -221,6 +220,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     filterValue(setValue: string): void;
     isInputMode(): boolean;
     _clickHandler: () => void;
+    _openPopupIfClosed: () => void;
     _filterChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
     private _setFilter;
     private _rebuildMultipleMap;
@@ -235,8 +235,6 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;
-    button?: HTMLElement | null;
-    buttonRef: (el: HTMLElement | null) => void;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
     getShortcutsMap(): {

package/components/select/select.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import chevronDownIcon from '@jetbrains/icons/chevron-10px';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close';
 import deepEqual from 'deep-equal';
 import { Anchor } from '../dropdown/dropdown';
@@ -15,9 +15,9 @@ import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
-import Theme from '../global/theme';
 import memoize from '../global/memoize';
 import { isArray } from '../global/typescript-utils';
+import { ControlsHeightContext } from '../global/controls-height';
 import SelectPopup from './select__popup';
 import styles from './select.css';
 /**
@@ -33,12 +33,12 @@ var Type;
     Type["INPUT"] = "INPUT";
     Type["CUSTOM"] = "CUSTOM";
     Type["INLINE"] = "INLINE";
-    Type["MATERIAL"] = "MATERIAL";
     Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
+const ICONS_OFFSET = 12;
 const ICON_WIDTH = 20;
 const getStyle = memoize((iconsLength) => ({
-    paddingRight: iconsLength * ICON_WIDTH
+    paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
 }));
 const isInputMode = (type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
@@ -183,7 +183,7 @@ export default class Select extends Component {
         disabled: false,
         loadingMessage: 'Loading...',
         notFoundMessage: 'No options found',
-        type: Type.MATERIAL,
+        type: Type.BUTTON,
         size: Size.M,
         targetElement: null,
         hideSelected: false,
@@ -290,9 +290,9 @@ export default class Select extends Component {
             onChange(selected);
         }
     }
+    static contextType = ControlsHeightContext;
     static Type = Type;
     static Size = Size;
-    static Theme = Theme;
     id = getUID('select-');
     shortcutsScope = this.id;
     listId = `${this.id}:list`;
@@ -508,6 +508,13 @@ export default class Select extends Component {
             }
         }
     };
+    _openPopupIfClosed = () => {
+        if (this.props.disabled || this.state.showPopup) {
+            return;
+        }
+        this.props.onBeforeOpen();
+        this._showPopup();
+    };
     _filterChangeHandler = (e) => {
         this._setFilter(e.currentTarget.value, e);
     };
@@ -738,10 +745,6 @@ export default class Select extends Component {
         return !Array.isArray(this.state.selected) &&
             (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (<Avatar className={styles.avatar} url={this.state.selected.avatar} username={this.state.selected.username} size={AvatarSize.Size20}/>);
     }
-    button;
-    buttonRef = (el) => {
-        this.button = el;
-    };
     filter;
     filterRef = (el) => {
         this.filter = el;
@@ -762,7 +765,7 @@ export default class Select extends Component {
     renderSelect(activeItemId) {
         const dataTest = this.props['data-test'];
         const { shortcutsEnabled } = this.state;
-        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, {
+        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
             [styles.disabled]: this.props.disabled
         });
@@ -779,20 +782,19 @@ export default class Select extends Component {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT: return (<div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
           {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-          <Input {...ariaProps} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
+          <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({
                         ...this.getShortcutsMap(),
                         ...this._popup?.list?.shortcutsMap
                     })
-                    : undefined}/>
-          {this.props.type === Type.INPUT && iconsNode}
+                    : undefined} afterInput={this.props.type === Type.INPUT && iconsNode}/>
           {this._renderPopup()}
         </div>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
-              <Button {...ariaProps} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
+              <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
                         [styles.buttonValueOpen]: this.state.showPopup
                     })} disabled={this.props.disabled} style={style} data-test="ring-select__button ring-select__focus">
                 {this._getAvatar()}
@@ -801,20 +803,6 @@ export default class Select extends Component {
               {iconsNode}
             </div>
             {this._renderPopup()}
-          </div>);
-            case Type.MATERIAL:
-                return (<div ref={this.nodeRef} className={classNames(classes, styles.materialMode)} data-test={dataTests('ring-select', dataTest)}>
-            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            {!this._selectionIsEmpty() && this.props.selectedLabel && (<span className={styles.selectedLabel}>{this.props.selectedLabel}</span>)}
-            <button {...ariaProps} id={this.props.id} onClick={this._clickHandler} type="button" disabled={this.props.disabled} className={classNames(this.props.buttonClassName, styles.value, {
-                        [styles.open]: this.state.showPopup,
-                        [styles.label]: this._selectionIsEmpty()
-                    })} aria-label={this._getLabel()} style={style} data-test="ring-select__focus" ref={this.buttonRef}>
-              {this._getAvatar()}
-              {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
-            </button>
-            {iconsNode}
-            {this._renderPopup()}
           </div>);
             case Type.INLINE:
                 return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
@@ -912,7 +900,6 @@ Select.propTypes = {
     hideArrow: PropTypes.bool,
     compact: PropTypes.bool,
     size: PropTypes.oneOf(Object.values(Size)),
-    theme: PropTypes.string,
     customAnchor: PropTypes.func,
     disableMoveOverflow: PropTypes.bool,
     disableScrollToActive: PropTypes.bool,

package/components/select/select__filter.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import Input from '../input/input';
 import sniffr from '../global/sniffer';
 import { ActiveItemContext } from '../list/list';
+import { ControlsHeight } from '../global/controls-height';
 import styles from './select-popup.css';
 function noop() { }
 export default class SelectFilter extends Component {
@@ -34,7 +35,7 @@ export default class SelectFilter extends Component {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
         return (<ActiveItemContext.ValueContext.Consumer>
-        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless height={ControlsHeight.L} inputRef={this.inputRef} className={classes}/>)}
       </ActiveItemContext.ValueContext.Consumer>);
     }
 }

package/components/select/select__popup.js

@@ -24,7 +24,6 @@ import Text from '../text/text';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts';
 import SelectFilter from './select__filter';
 import styles from './select-popup.css';
-const INPUT_MARGIN_COMPENSATION = -14;
 const FILTER_HEIGHT = 35;
 const TOOLBAR_HEIGHT = 49;
 function noop() { }
@@ -321,7 +320,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} directions={directions} top={top || (isInputMode ? INPUT_MARGIN_COMPENSATION : undefined)} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
               <div dir={dir}>
                 {!hidden && filter &&
                         (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}

package/components/select-ng/select-ng.examples.js

@@ -175,6 +175,7 @@ export const asModelLazy = () => {
 };
 
 asModelLazy.storyName = 'as model lazy';
+asModelLazy.parameters = {storyshots: false};
 
 export const withPromise = () => {
   angular.module(APP_NAME, [SelectNG]).controller('testCtrl', function ctrl($timeout, $q) {

package/components/select-ng/select-ng.js

@@ -7,6 +7,8 @@ import getEventKey from '../global/get-event-key';
 import Select, {RerenderableSelect} from '../select/select';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng';
 
+import {ControlsHeight} from '../global/controls-height';
+
 import SelectNgOptions from './select-ng__options';
 import SelectLazy from './select-ng__lazy';
 
@@ -23,7 +25,6 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
   const types = {
     input: Select.Type.INPUT,
     button: Select.Type.BUTTON,
-    material: Select.Type.MATERIAL,
     dropdown: Select.Type.CUSTOM,
     suggest: Select.Type.INPUT
   };
@@ -417,6 +418,7 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
           notFoundMessage: ctrl.notFoundMessage || RingMessageBundle.select_options_not_found(),
           targetElement: getType() === 'dropdown' ? element : null,
           size: getSelectSize(),
+          height: ControlsHeight.S,
           onBeforeOpen: () => {
             resetMemorizedOptions();
             ctrl.loadOptionsToSelect(ctrl.query);

package/components/select-ng/select-ng.test.js

@@ -131,7 +131,7 @@ describe('Select Ng', () => {
 
     it('Should use default type "Button" if type is not passed', () => {
       compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-      ctrl.selectInstance.props.type.should.equal(Select.Type.MATERIAL);
+      ctrl.selectInstance.props.type.should.equal(Select.Type.BUTTON);
     });
 
     it('Should support type "input"', () => {

package/components/select-ng/select-ng__lazy.js

@@ -59,11 +59,10 @@ class SelectLazy {
     this.detachEvents();
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
-      // In "dropdown" mode we don't click select itself, so need to force click handler
-      this.ctrl.selectInstance._clickHandler();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
     }
+    this.ctrl.selectInstance._openPopupIfClosed();
   }
 }
 

package/components/shortcuts-hint-ng/shortcuts-hint-ng.css

@@ -54,7 +54,7 @@
 
 :global(.shortcuts-hint__search-icon) {
   position: absolute;
-  top: 18px;
+  top: -1px;
   right: 0;
 
   width: calc(unit * 2);

package/components/shortcuts-hint-ng/shortcuts-hint-ng.examples.js

@@ -10,7 +10,7 @@ export default {
 
   parameters: {
     notes: 'Displays a popup listing all registered shortcuts.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'}
+    hermione: {captureSelector: '*[data-test~=ring-dialog-container]'}
   }
 };
 

package/components/tabs/collapsible-tab.js

@@ -9,7 +9,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
     if (child == null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
     }
-    const { title, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
+    const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
     const titleClasses = classNames(styles.title, className, {
         [styles.selected]: selected,
         [styles.collapsed]: collapsed,
@@ -17,7 +17,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
         [collapsedClassName ?? '']: collapsed,
         [collapsedActiveClassName ?? '']: collapsed && selected
     });
-    return (<TabLink title={title} isSelected={selected} active href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed}/>);
+    return (<TabLink title={title} isSelected={selected} active href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });
 TabTitle.propTypes = {
     child: PropTypes.element,

package/components/tabs/dumb-tabs.d.ts

@@ -1,12 +1,11 @@
-import React, { ComponentPropsWithRef, PureComponent, ReactElement } from 'react';
+import { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import Theme, { ThemeProps } from '../global/theme';
 import { CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';
 import { TabProps } from './tab';
 export { CustomItem };
 declare type Children = readonly Children[] | ReactElement<TabProps> | null | boolean;
-export interface TabsProps extends ThemeProps, Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
+export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
     children: Children;
     onSelect: (key: string) => void;
     className?: string | null | undefined;
@@ -15,7 +14,6 @@ export interface TabsProps extends ThemeProps, Omit<CollapsibleTabsProps, 'onSel
 }
 declare class Tabs extends PureComponent<TabsProps> {
     static propTypes: {
-        theme: PropTypes.Requireable<string>;
         selected: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
@@ -27,110 +25,9 @@ declare class Tabs extends PureComponent<TabsProps> {
     static defaultProps: {
         onSelect(): void;
     };
-    static Theme: typeof Theme;
     handleSelect: (arg: string) => () => void;
     getTabTitle: (child: ReactElement<TabProps>, i: number) => JSX.Element;
     render(): JSX.Element;
 }
-declare const ThemedTabs: React.NamedExoticComponent<Omit<(Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "className" | "href" | "children" | "theme" | "data-test" | "selected" | "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems" | "autoCollapse"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "onSelect">> & Partial<Pick<{
-    onSelect(): void;
-}, never>>) | (Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, never>, "href"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-    theme: PropTypes.Requireable<string>;
-    selected: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    href: PropTypes.Requireable<string>;
-    children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    'data-test': PropTypes.Requireable<string>;
-    autoCollapse: PropTypes.Requireable<boolean>;
-}>, "href"> & Pick<TabsProps, never>, keyof TabsProps>> & Partial<Pick<Partial<TabsProps> & {
-    onSelect(): void;
-}, never>>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Tabs>> & {
-    readonly type: React.ForwardRefExoticComponent<Omit<(Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "className" | "href" | "children" | "theme" | "data-test" | "selected" | "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems" | "autoCollapse"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<{
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, "moreClassName" | "moreActiveClassName" | "morePopupClassName" | "morePopupItemClassName" | "morePopupBeforeEnd" | "initialVisibleItems">, "onSelect">> & Partial<Pick<{
-        onSelect(): void;
-    }, never>>) | (Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, never>, "href"> & Partial<Pick<Pick<TabsProps, keyof TabsProps> & Pick<PropTypes.InferProps<React.WeakValidationMap<TabsProps> & {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    }>, "href"> & Pick<TabsProps, never>, keyof TabsProps>> & Partial<Pick<Partial<TabsProps> & {
-        onSelect(): void;
-    }, never>>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Tabs>>;
-} & {
-    prototype: Tabs;
-    propTypes: {
-        theme: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        href: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-test': PropTypes.Requireable<string>;
-        autoCollapse: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        onSelect(): void;
-    };
-    Theme: typeof Theme;
-    contextType?: React.Context<any> | undefined;
-};
-export declare type TabsAttrs = ComponentPropsWithRef<typeof ThemedTabs>;
-export default ThemedTabs;
+export declare type TabsAttrs = JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
+export default Tabs;