@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/select/select__popup.d.ts

@@ -105,7 +105,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     getFilterWithTags(): JSX.Element | null;
     getBottomLine(): "" | JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | undefined): JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): JSX.Element | null;
     handleSelectAll: () => void;
     getSelectAll: () => false | JSX.Element;
     private _adjustListMaxHeight;

package/components/select/{select__popup.jsx → 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

@@ -1,12 +1,14 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from '../global/react-render-adapter';
 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
   };
@@ -375,9 +376,15 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         return sizes[ctrl.size] || sizes.FULL;
       }
 
+      function selectRef(instance) {
+        if (instance != null) {
+          ctrl.selectInstance = instance;
+        }
+      }
+
       function reRenderSelect(props) {
-        if (ctrl.selectInstance.node) {
-          ctrl.selectInstance.rerender(props);
+        if (ctrl.selectInstance?.node) {
+          ctrl.selectInstance.rerender({...props, ref: selectRef});
         }
       }
 
@@ -417,6 +424,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);
@@ -516,9 +524,14 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         ctrl.config = angular.extend({}, ctrl.defaultConfig, ctrl.config || {});
 
         if (getType() === 'suggest' || getType() === 'input') {
-          ctrl.selectInstance = render(<RerenderableSelect {...ctrl.config}/>, container);
+          render(
+            <RerenderableSelect
+              ref={selectRef}
+              {...ctrl.config}
+            />,
+            container);
         } else {
-          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType());
+          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType(), selectRef);
         }
 
         // Preserve existing contents of the directive

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

@@ -1,17 +1,18 @@
 import angular from 'angular';
 
-import {render, hydrate} from 'react-dom';
 import React from 'react';
 
+import {render, hydrate} from '../global/react-render-adapter';
 import {RerenderableSelect} from '../select/select';
 
 class SelectLazy {
-  constructor(container, props, ctrl, type) {
+  constructor(container, props, ctrl, type, selectRef) {
     this.container = container;
     this.ctrl = ctrl;
     this.props = props || {};
     this.type = type;
     this.node = container;
+    this.selectRef = selectRef;
     this._popup = {
       isVisible: angular.noop
     };
@@ -38,15 +39,20 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick);
+    this.container.addEventListener('click', this.onClick, {capture: true});
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick);
+    this.container.removeEventListener('click', this.onClick, {capture: true});
   }
 
   render(props) {
-    this.reactSelect = <RerenderableSelect {...Object.assign({}, this.props, props || {})}/>;
+    this.reactSelect = (
+      <RerenderableSelect
+        ref={this.selectRef}
+        {...Object.assign({}, this.props, props || {})}
+      />
+    );
     this.props = this.reactSelect.props;
 
     if (this.type !== 'dropdown') {
@@ -58,11 +64,9 @@ class SelectLazy {
   _clickHandler() {
     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();
+      render(this.reactSelect, this.container);
     } else {
-      this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
+      hydrate(this.reactSelect, this.container);
     }
   }
 }

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

@@ -67,7 +67,9 @@ describe('Select Lazy', () => {
 
 
   function renderLazySelect(type = 'button') {
-    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type);
+    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type, instance => {
+      ctrl.selectInstance = instance;
+    });
     lazySelect.render();
     return lazySelect;
   }

package/components/shortcuts/shortcuts-hoc.d.ts

@@ -12,12 +12,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: (P & ShortcutsHOCProps) | Readonly<P & ShortcutsHOCProps>): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -38,12 +36,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: P & ShortcutsHOCProps, context: any): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;

package/components/shortcuts/shortcuts.d.ts

@@ -24,5 +24,5 @@ export default class Shortcuts extends PureComponent<ShortcutsProps> {
     componentWillUnmount(): void;
     turnShorcutsOn(): void;
     turnShorcutsOff(): void;
-    render(): {} | null;
+    render(): true | import("react").ReactChild | import("react").ReactFragment | null;
 }

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/tab-trap/tab-trap.d.ts

@@ -13,7 +13,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
  */
 export default class TabTrap extends Component<TabTrapProps> {
     static propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         trapDisabled: PropTypes.Requireable<boolean>;
         autoFocusFirst: PropTypes.Requireable<boolean>;
         focusBackOnClose: PropTypes.Requireable<boolean>;

package/components/table/disable-hover-hoc.d.ts

@@ -13,12 +13,10 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<DisableHoverProps<P>>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -42,12 +40,10 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<DisableHoverProps<P>>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/table/header.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
+import { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import { Column, SortParams } from './header-cell';
@@ -16,6 +16,13 @@ export interface HeaderProps {
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
 }
+declare module 'react-waypoint' {
+    namespace Waypoint {
+        interface WaypointProps {
+            children?: ReactNode;
+        }
+    }
+}
 export default class Header extends PureComponent<HeaderProps> {
     static propTypes: {
         caption: PropTypes.Requireable<string>;

package/components/table/row-with-focus-sensor.d.ts

@@ -3,10 +3,10 @@ import { FocusSensorProps } from '../global/focus-sensor-hoc';
 import Row, { RowProps } from './row';
 import { SelectionItem } from './selection';
 export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
-    onFocus: (item: T) => void;
-    onSelect: (item: T, selected: boolean) => void;
-    onCollapse: (item: T) => void;
-    onExpand: (item: T) => void;
+    onFocus?: (item: T) => void;
+    onSelect?: (item: T, selected: boolean) => void;
+    onCollapse?: (item: T) => void;
+    onExpand?: (item: T) => void;
 }
 export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
     RowWithFocusSensor: React.ComponentType<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>>;

package/components/table/{row-with-focus-sensor.jsx → row-with-focus-sensor.js}

@@ -6,16 +6,16 @@ export default class RowWithFocusSensorCallbacks extends PureComponent {
     // https://stackoverflow.com/a/53882322/6304152
     RowWithFocusSensor = getContainer();
     onFocus = () => {
-        this.props.onFocus(this.props.item);
+        this.props.onFocus?.(this.props.item);
     };
     onSelect = (item, selected) => {
-        this.props.onSelect(item, selected);
+        this.props.onSelect?.(item, selected);
     };
     onCollapse = () => {
-        this.props.onCollapse(this.props.item);
+        this.props.onCollapse?.(this.props.item);
     };
     onExpand = () => {
-        this.props.onExpand(this.props.item);
+        this.props.onExpand?.(this.props.item);
     };
     render() {
         return (<this.RowWithFocusSensor {...this.props} onFocus={this.onFocus} onSelect={this.onSelect} onCollapse={this.onCollapse} onExpand={this.onExpand}/>);

package/components/table/row.d.ts

@@ -54,3 +54,4 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     rowRef: (el: HTMLElement | null) => void;
     render(): JSX.Element;
 }
+export declare type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/smart-table.d.ts

@@ -4,6 +4,7 @@ import { TableAttrs } from './table';
 import Selection, { SelectionItem } from './selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
     onSelectionChange: (selection: Selection<T>) => void;
+    selection?: Selection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static propTypes: {

package/components/table/{smart-table.jsx → smart-table.js}

@@ -19,11 +19,15 @@ class SmartTable extends PureComponent {
         })
     };
     UNSAFE_componentWillReceiveProps(nextProps) {
-        const { data, isItemSelectable } = nextProps;
-        if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
-            const selection = new Selection({ data, isItemSelectable });
+        const { data, isItemSelectable, selection } = nextProps;
+        if (this.props.remoteSelection && this.props.selection !== selection) {
             this.setState({ selection });
         }
+        else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
+            this.setState({
+                selection: new Selection({ data, isItemSelectable })
+            });
+        }
     }
     onSelect = (selection) => {
         this.setState({ selection });

package/components/table/table.d.ts

@@ -103,12 +103,10 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
@@ -132,12 +130,10 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };

package/components/tabs/{collapsible-more.jsx → collapsible-more.js}

@@ -27,11 +27,11 @@ const morePopupDirections = [
     Directions.BOTTOM_RIGHT
 ];
 export const MoreButton = React.memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }) => {
-    const onSelectHandler = React.useCallback(listItem => {
+    const onSelectHandler = React.useCallback((listItem) => {
         if (listItem.disabled === true || listItem.custom === true) {
             return;
         }
-        const cb = onSelect(listItem.key);
+        const cb = onSelect(String(listItem.key));
         cb();
     }, [onSelect]);
     const hasActiveChild = React.useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);

package/components/tabs/{collapsible-tab.jsx → 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/collapsible-tabs.d.ts

@@ -15,7 +15,7 @@ export interface CollapsibleTabsProps {
 export declare const CollapsibleTabs: {
     ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
     propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         selected: PropTypes.Requireable<string>;
         onSelect: PropTypes.Validator<(...args: any[]) => any>;
         moreClassName: PropTypes.Requireable<string>;
@@ -29,7 +29,7 @@ export declare const CollapsibleTabs: {
 declare const _default: React.MemoExoticComponent<{
     ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
     propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         selected: PropTypes.Requireable<string>;
         onSelect: PropTypes.Validator<(...args: any[]) => any>;
         moreClassName: PropTypes.Requireable<string>;

package/components/tabs/{collapsible-tabs.jsx → collapsible-tabs.js}

@@ -42,7 +42,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
         onSelect,
         selected
     ]);
-    const adjustTabs = React.useCallback(entry => {
+    const adjustTabs = React.useCallback((entry) => {
         const containerWidth = entry.contentRect.width;
         const { tabs: tabsSizes, more = 0 } = elements.sizes;
         let renderMore = children.some(tab => tab.props.alwaysHidden);

package/components/tabs/custom-item.d.ts

@@ -4,6 +4,6 @@ import { TabProps } from './tab';
 export declare const CustomItem: {
     ({ children }: TabProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
 };