fix: add export of TabFieldVerticalProps (rework exports)

src/dialog/CheckBoxControl/CheckBoxControl.tsx

@@ -10,7 +10,7 @@ export interface CheckBoxControlProps
     onChange: (value: CheckBoxControlProps['value']) => void;
 }
 
-function CheckBoxControl({value, onChange, ...props}: CheckBoxControlProps) {
+export function CheckBoxControl({value, onChange, ...props}: CheckBoxControlProps) {
     const onCheckBoxChange = useCallback(() => onChange(!value), [onChange, value]);
     const {children, ...rest} = props || {};
 
@@ -28,5 +28,3 @@ CheckBoxControl.getDefaultValue = function () {
 CheckBoxControl.isEmpty = function (value: CheckBoxControlProps['value']) {
     return typeof value !== 'boolean' || !value;
 };
-
-export default CheckBoxControl;

src/dialog/CheckBoxControl/index.ts

@@ -0,0 +1 @@
+export * from './CheckBoxControl';

src/dialog/CollapsibleSection/index.ts

@@ -0,0 +1 @@
+export * from './CollapsibleSection';

src/dialog/Condition/Condition.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import {Field} from 'react-final-form';
 
 interface Props<T = any> {
     when: string;
     isActive: (value: T) => boolean;
     children: React.ReactNode;
 }
 
-function Condition<T>({when, isActive, children}: Props<T>) {
+export function Condition<T>({when, isActive, children}: Props<T>) {
     return (
         <Field name={when} subscription={{value: true}}>
             {({input: {value}}) => (isActive(value) ? children : null)}
         </Field>
     );
 }
-
-export default Condition;

src/dialog/Condition/index.ts

@@ -0,0 +1 @@
+export * from './Condition';

src/dialog/CustomBlock/CustomBlock.tsx

@@ -7,13 +7,11 @@ export interface CustomBlockProps {
     children: React.ReactNode;
 }
 
-class CustomBlock extends React.Component<CustomBlockProps> {
+export class CustomBlock extends React.Component<CustomBlockProps> {
     static renderLabel = () => null;
     static getDefaultValue = () => undefined;
 
     render() {
         return this.props.children || null;
     }
 }
-
-export default CustomBlock;

src/dialog/CustomBlock/index.ts

@@ -0,0 +1 @@
+export * from './CustomBlock';

src/dialog/Dialog/Dialog.tsx

@@ -1,11 +1,11 @@
 import React, {Component, Fragment} from 'react';
-import _reduce from 'lodash/reduce';
-import _find from 'lodash/find';
-import _findIndex from 'lodash/findIndex';
-import _isEqual from 'lodash/isEqual';
-import _get from 'lodash/get';
-import _isEmpty from 'lodash/isEmpty';
-import _map from 'lodash/map';
+import reduce_ from 'lodash/reduce';
+import find_ from 'lodash/find';
+import findIndex_ from 'lodash/findIndex';
+import isEqual_ from 'lodash/isEqual';
+import get_ from 'lodash/get';
+import isEmpty_ from 'lodash/isEmpty';
+import map_ from 'lodash/map';
 import {
     Dialog as CommonDialog,
     DialogFooterProps,
@@ -21,26 +21,29 @@
 import {OnChange} from 'react-final-form-listeners';
 
 import {InfoIcon, TooltipIcon, WarningIcon} from '../Icon/Icon';
-import TextControl, {TextControlProps} from '../TextControl/TextControl';
-import TextAreaControl, {TextAreaControlProps} from '../TextAreaControl/TextAreaControl';
-import {SelectControl, SelectControlProps} from '../SelectControl/SelectControl';
-import TumblerControl, {TumblerControlProps} from '../TumblerControl/TumblerControl';
-import PlainText, {PlainTextProps} from '../PlainText/PlainText';
-import CheckBoxControl, {CheckBoxControlProps} from '../CheckBoxControl/CheckBoxControl';
-import Condition from '../Condition/Condition';
-import CustomBlock, {CustomBlockProps} from '../CustomBlock/CustomBlock';
-import RadioButtonControl, {
-    RadioButtonControlProps,
-} from '../RadioButtonControl/RadioButtonControl';
-import EditableList, {EditableListProps} from '../EditableList/EditableList';
-import EditableManyLists, {EditableManyListsProps} from '../EditableManyLists/EditableManyLists';
-import MultiTextControl, {MultiTextControlProps} from '../MultiTextControl/MultiTextControl';
-import TabField, {TabFieldProps, TabItem} from '../TabField/TabField';
+import {TextControl, TextControlProps} from '../TextControl';
+import {TextAreaControl, TextAreaControlProps} from '../TextAreaControl';
+import {SelectControl, SelectControlProps} from '../SelectControl';
+import {TumblerControl, TumblerControlProps} from '../TumblerControl';
+import {PlainText, PlainTextProps} from '../PlainText';
+import {CheckBoxControl, CheckBoxControlProps} from '../CheckBoxControl';
+import {Condition} from '../Condition';
+import {CustomBlock, CustomBlockProps} from '../CustomBlock';
+import {RadioButtonControl, RadioButtonControlProps} from '../RadioButtonControl';
+import {EditableList, EditableListProps} from '../EditableList';
+import {EditableManyLists, EditableManyListsProps} from '../EditableManyLists';
+import {MultiTextControl, MultiTextControlProps} from '../MultiTextControl';
+import {
+    TabField,
+    TabFieldProps,
+    TabFieldVertical,
+    TabFieldVerticalProps,
+    TabItem,
+} from '../TabField';
 import {checkTabId, getTabId, applyFunctions} from './utils';
 import {useStableEventHandler} from '../../helpers/useStableEventHendler';
 
 import './Dialog.scss';
-import TabFieldVertical, {TabFieldVerticalProps} from '../TabField/TabFieldVertical';
 
 import i18n from './i18n';
 import {
@@ -96,8 +99,8 @@
     return isTabControl(field.type);
 }
 
 function isArrayOfTabs<F>(v: any): v is Array<TabbedField<F>> {
     return Dialog.hasTabs(v);
 }
 
 function isTabControl(type?: string) {
@@ -131,10 +134,10 @@
     return undefined;
 }
 
 function checkFieldsSpec(props: {fields: Array<any>}) {
     const error = checkTabSpecCorrectness(props.fields);
     if (error) {
         console.error(
             'Tab specification is wrong, please recheck provided `field` property',
             error,
         );
@@ -145,8 +148,8 @@
 
 export interface ControlField<
     T extends string = string,
     V = any,
     E = Record<string, any>,
     FormValues = unknown,
 > {
     name: string;
@@ -161,7 +164,7 @@
         | ((
               allValues: FormValues,
               options: {
                   form: FormApi<any>;
                   input: FieldInputProps<V>;
                   field: ControlField<T, V, E, FormValues>;
               },
@@ -170,7 +173,7 @@
 
     visibilityCondition?: {
         when: FieldName;
         isActive: (v: any) => boolean;
     };
 
     className?: string;
@@ -188,7 +191,7 @@
         oldValue: V,
         field: ControlField<T, V>,
         fullName: string,
         form: FormApi<any>,
         formValues: FormState<any>,
     ) => void;
     error?: () => void;
@@ -385,7 +388,7 @@
     static getDefaultValues<T extends TabbedField<F>, F>(
         fields: FieldsType<T, F> = [],
     ): Record<string, any> {
-        return _reduce(
+        return reduce_(
             fields,
             (acc, item) => {
                 const field = item as ArrayElement<typeof fields>;
@@ -432,7 +435,7 @@
             }
         }
 
-        return _isEmpty(res) ? null : res;
+        return isEmpty_(res) ? null : res;
     }
 
     static hasTabs<TabT extends TabbedField<FieldT>, FieldT extends ControlField>(
@@ -584,7 +587,7 @@
         fields: FieldsType<TabT, FieldT>,
         dst: Array<{name: Calculation['field']; subscribers: Calculation['updates']}> = [],
     ) {
-        return _reduce(
+        return reduce_(
             fields,
             (acc, field) => {
                 const item = field as ArrayElement<typeof fields>;
@@ -906,7 +909,7 @@
         if (!visibilityCondition) {
             return true;
         }
-        const value = _get(values, visibilityCondition.when);
+        const value = get_(values, visibilityCondition.when);
         return visibilityCondition.isActive(value);
     }
 
@@ -929,19 +932,19 @@
             active?: boolean,
             options: {userOptions?: any} = {},
         ) => {
-            const tabSpec = _find(fields, (fieldSpec) => fieldSpec.name === fieldName);
+            const tabSpec = find_(fields, (fieldSpec) => fieldSpec.name === fieldName);
             const {onCreateTab} = tabSpec || {};
             if (!tabSpec?.multiple) {
                 return;
             }
 
             const {userOptions} = options;
 
-            const index = _findIndex(values[fieldName], this.isActiveTab);
+            const index = findIndex_(values[fieldName], this.isActiveTab);
             const {id: _id, ...srcTabData} = values[fieldName][index === -1 ? 0 : index];
             const newTabData = onCreateTab ? onCreateTab(srcTabData, {userOptions}) : srcTabData;
             if (newTabData.id === undefined) {
-                const ids = new Set(_map(values[fieldName], ({id}) => String(id)));
+                const ids = new Set(map_(values[fieldName], ({id}) => String(id)));
                 for (let i = 0; i <= ids.size; ++i) {
                     const id = String(i + 1);
                     if (!ids.has(id)) {
@@ -960,7 +963,7 @@
         };
 
         const removeTab = (tabItemToDelete: TabItem) => {
-            const tabIndexToDelete = _findIndex(tabItems, (item) => item.id === tabItemToDelete.id);
+            const tabIndexToDelete = findIndex_(tabItems, (item) => item.id === tabItemToDelete.id);
             if (tabIndexToDelete < 0) {
                 return;
             }
@@ -1206,7 +1209,7 @@
 
         return (
             <Form
-                initialValuesEqual={_isEqual}
+                initialValuesEqual={isEqual_}
                 keepDirtyOnReinitialize={true}
                 {...formExtras}
                 onSubmit={this.onApply}

src/dialog/Dialog/index.ts

@@ -0,0 +1 @@
+export * from './Dialog';

src/dialog/EditableList/EditableList.tsx

@@ -72,7 +72,7 @@ interface State {
     showAll: boolean;
 }
 
-class EditableList<T = any> extends React.Component<EditableListProps<T>, State> {
+export class EditableList<T = any> extends React.Component<EditableListProps<T>, State> {
     static defaultProps = {
         value: [],
     };
@@ -140,5 +140,3 @@ class EditableList<T = any> extends React.Component<EditableListProps<T>, State>
         );
     }
 }
-
-export default EditableList;

src/dialog/EditableList/index.ts

@@ -0,0 +1 @@
+export * from './EditableList';

src/dialog/EditableManyLists/EditableManyLists.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {dfCN} from '../../helpers/cn';
 
-import EditableList, {EditableListItemType, EditableListProps} from '../EditableList/EditableList';
+import {EditableList, EditableListItemType, EditableListProps} from '../EditableList';
 import './EditableManyLists.scss';
 
 const block = dfCN('editable-many-lists');
@@ -24,7 +24,7 @@ export interface EditableManyListsItemType<T> {
     data: Array<EditableListItemType<T>>;
 }
 
-class EditableManyLists<T> extends React.Component<EditableManyListsProps<T>> {
+export class EditableManyLists<T> extends React.Component<EditableManyListsProps<T>> {
     static getDefaultValue() {
         return [];
     }
@@ -63,5 +63,3 @@ class EditableManyLists<T> extends React.Component<EditableManyListsProps<T>> {
         );
     }
 }
-
-export default EditableManyLists;

src/dialog/EditableManyLists/index.ts

@@ -0,0 +1 @@
+export * from './EditableManyLists';

src/dialog/FocusBlurContainer/FocusBlurContainer.tsx

@@ -5,7 +5,7 @@ import {applyFunctions} from '../Dialog/utils';
 
 function noop() {}
 
-interface FocusBlurContainerProps {
+export interface FocusBlurContainerProps {
     children?: React.ReactNode;
     className?: string;
     onFocus?: () => void;

src/dialog/FocusBlurContainer/index.ts

@@ -0,0 +1 @@
+export * from './FocusBlurContainer';

src/dialog/Icon/index.ts

@@ -0,0 +1 @@
+export * from './Icon';

src/dialog/MultiTextControl/LabelsGroup/LabelsGroup.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import _map from 'lodash/map';
+import map_ from 'lodash/map';
 import {Button, Label} from '@gravity-ui/uikit';
 import {dfCN} from '../../../helpers/cn';
 import withCollapsible from '../../../hoc/withCollapsible';
@@ -9,7 +9,7 @@ import {ArrayElement} from '../../types';
 
 const block = dfCN('labels-group');
 
-type Props = {
+export type LabelGroupProps = {
     items: Array<{name: string; isDefault?: boolean}>;
     visibleCount: number;
     disabled?: boolean;
@@ -21,9 +21,9 @@ type Props = {
     renderToggler?: () => React.ReactNode;
 };
 
-type ItemType = ArrayElement<Props['items']>;
+type ItemType = ArrayElement<LabelGroupProps['items']>;
 
-class LabelsGroup extends Component<Props> {
+class LabelsGroupComponent extends Component<LabelGroupProps> {
     handleLabelClick = (label: ItemType) => {
         const {onClick} = this.props;
         if (typeof onClick === 'function') {
@@ -68,7 +68,7 @@ class LabelsGroup extends Component<Props> {
 
         return (
             <div className={block()}>
-                {_map(items, (label) => this.renderLabel(label))}
+                {map_(items, (label) => this.renderLabel(label))}
                 {renderToggler?.()}
                 {onRemoveAll && items.length > 0 && (
                     <Button
@@ -85,4 +85,4 @@ class LabelsGroup extends Component<Props> {
     }
 }
 
-export default withCollapsible(LabelsGroup);
+export const LabelsGroup = withCollapsible(LabelsGroupComponent);

src/dialog/MultiTextControl/MultiTextControl.tsx

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import _find from 'lodash/find';
-import _findIndex from 'lodash/findIndex';
+import find_ from 'lodash/find';
+import findIndex_ from 'lodash/findIndex';
 import {TextInput, TextInputProps} from '@gravity-ui/uikit';
 
 import {dfCN} from '../../helpers/cn';
-import LabelsGroup from './LabelsGroup/LabelsGroup';
+import {LabelsGroup} from './LabelsGroup/LabelsGroup';
 import {FocusBlurContainer} from '../FocusBlurContainer/FocusBlurContainer';
 
 import type {ArrayElement} from '../types';
@@ -32,7 +32,7 @@ interface State {
     currentLabel: string;
 }
 
-class MultiTextControl extends Component<MultiTextControlProps, State> {
+export class MultiTextControl extends Component<MultiTextControlProps, State> {
     static ENTER = 13;
 
     static hasErrorRenderer = true;
@@ -46,7 +46,7 @@ class MultiTextControl extends Component<MultiTextControlProps, State> {
     }
 
     static remove(theItem: ItemType, items: Array<ItemType>) {
-        const index = _findIndex(items, (anItem) => theItem.name === anItem.name);
+        const index = findIndex_(items, (anItem) => theItem.name === anItem.name);
         if (index > -1) {
             const copy = [...items];
             copy.splice(index, 1);
@@ -68,7 +68,7 @@ class MultiTextControl extends Component<MultiTextControlProps, State> {
         if (currentLabel?.length > 0) {
             const {onChange, value: labels} = this.props;
 
-            if (!_find(labels, (label) => label.name === currentLabel)) {
+            if (!find_(labels, (label) => label.name === currentLabel)) {
                 onChange(labels.concat({name: currentLabel}));
             }
             this.setState({currentLabel: ''});
@@ -118,5 +118,3 @@ class MultiTextControl extends Component<MultiTextControlProps, State> {
         );
     }
 }
-
-export default MultiTextControl;

src/dialog/MultiTextControl/index.ts

@@ -0,0 +1 @@
+export * from './MultiTextControl';

src/dialog/PlainText/PlainText.tsx

@@ -12,7 +12,7 @@ export type PlainTextProps = {
     placeholder?: React.ReactNode;
 };
 
-class PlainText extends React.Component<PlainTextProps> {
+export class PlainText extends React.Component<PlainTextProps> {
     static getDefaultValue() {
         return '';
     }
@@ -31,5 +31,3 @@ class PlainText extends React.Component<PlainTextProps> {
         );
     }
 }
-
-export default PlainText;

src/dialog/PlainText/index.ts

@@ -0,0 +1 @@
+export * from './PlainText';

src/dialog/RadioButtonControl/RadioButtonControl.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import _map from 'lodash/map';
+import map_ from 'lodash/map';
 import {RadioButton, RadioButtonProps} from '@gravity-ui/uikit';
 
 RadioButtonControl.defaultProps = {
@@ -20,7 +20,7 @@ export interface RadioButtonControlProps extends Omit<RadioButtonProps, 'onChang
     options?: Array<{value: string; label: React.ReactNode}>;
 }
 
-function RadioButtonControl({value, onChange, ...props}: RadioButtonControlProps) {
+export function RadioButtonControl({value, onChange, ...props}: RadioButtonControlProps) {
     const onRadioChange = useCallback(
         (evt: React.ChangeEvent<HTMLInputElement>) => onChange(evt.target.value),
         [onChange],
@@ -29,13 +29,11 @@ function RadioButtonControl({value, onChange, ...props}: RadioButtonControlProps
 
     return (
         <RadioButton {...rest} size={size} value={value} onChange={onRadioChange}>
-            {_map(options, ({value, label}) => (
+            {map_(options, ({value, label}) => (
                 <RadioButton.Option value={value} key={value}>
                     {label}
                 </RadioButton.Option>
             ))}
         </RadioButton>
     );
 }
-
-export default RadioButtonControl;

src/dialog/RadioButtonControl/index.ts

@@ -0,0 +1 @@
+export * from './RadioButtonControl';

src/dialog/SelectControl/index.ts

@@ -0,0 +1 @@
+export * from './SelectControl';