@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/Cell/Readme.md

@@ -1,58 +1,96 @@
 Надстройка над SimpleCell, позволяющая удалять, перетаскивать и выделять ячейки.
 
 ```jsx
-  class Example extends React.Component {
-
-    constructor() {
-      this.state = {
-        activePanel: 'list',
-        removeList: ['Михаил Андриевский', 'Вадим Дорохов', 'Саша Колобов'],
-        draggingList: ['Say', 'Hello', 'To', 'My', 'Little', 'Friend']
-      };
-    }
+const [removeList, updateRemoveList] = React.useState(['Михаил Андриевский', 'Вадим Дорохов', 'Саша Колобов']);
+const [draggingList, updateDraggingList] = React.useState(['Say', 'Hello', 'To', 'My', 'Little', 'Friend']);
+const [dragAndSelectList, updateDragAndSelectList] = React.useState([{ label: 'Фотографии', defaultChecked: true }, { label: 'Музыка' }, { label: 'Видео' }]);
+const [dragAndRemoveList, updateDragAndRemoveList] = React.useState(['Евгения Полозова', 'Артур Стамбульцян', 'Владимир Клепов']);
+
+const removeFromList = (idx, list, updateListFn) => {
+  const _list = [...list];
+  _list.splice(idx, 1);
+  updateListFn(_list);
+}
+
+const reorderList = ({ from, to }, list, updateListFn) => {
+  const _list = [...list];
+  _list.splice(from, 1);
+  _list.splice(to, 0, list[from]);
+  updateListFn(_list);
+}
+
+<View activePanel="list">
+  <Panel id="list">
+    <PanelHeader>Cell</PanelHeader>
+
+
+    <Group header={<Header subtitle={<code>mode="selectable"</code>}>Выделение</Header>}>
+      <Cell mode="selectable" before={<Avatar />}>Артур Стамбульцян</Cell>
+      <Cell mode="selectable" before={<Avatar />}>Игорь Федоров</Cell>
+      <Cell mode="selectable" disabled before={<Avatar />}>Михаил Лихачев</Cell>
+    </Group>
 
-    render() {
-      return (
-        <View activePanel={this.state.activePanel}>
-          <Panel id="list">
-            <PanelHeader>
-              Cell
-            </PanelHeader>
-            <Group header={<Header mode="secondary">Выделение</Header>}>
-              <Cell selectable before={<Avatar />}>Артур Стамбульцян</Cell>
-              <Cell selectable before={<Avatar />}>Игорь Федоров</Cell>
-              <Cell selectable disabled before={<Avatar />}>Михаил Лихачев</Cell>
-            </Group>
-            {this.state.removeList.length > 0 &&
-              <Group header={<Header mode="secondary">Удаление</Header>}>
-                <List>
-                  {this.state.removeList.map((item, index) => (
-                    <Cell key={item} removable onRemove={() => {
-                      this.setState({
-                        removeList: [...this.state.removeList.slice(0, index), ...this.state.removeList.slice(index + 1)]
-                      })
-                    }}>{item}</Cell>
-                  ))}
-                </List>
-              </Group>
-            }
-            <Group header={<Header mode="secondary">Перетаскивание</Header>}>
-              <List>
-                {this.state.draggingList.map((item) => (
-                  <Cell before={<Avatar />} key={item} draggable onDragFinish={({ from, to }) => {
-                    const draggingList = [...this.state.draggingList];
-                    draggingList.splice(from, 1);
-                    draggingList.splice(to, 0, this.state.draggingList[from]);
-                    this.setState({ draggingList });
-                  }}>{item}</Cell>
-                ))}
-              </List>
-            </Group>
-          </Panel>
-        </View>
-      )
+
+    {removeList.length > 0 &&
+    <Group header={<Header subtitle={<code>mode="removable"</code>}>Удаление</Header>}>
+      <List>
+        {removeList.map((item, idx) => (
+          <Cell
+            key={item}
+            mode="removable"
+            onRemove={() => removeFromList(idx, removeList, updateRemoveList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
     }
-  }
 
-  <Example />
+
+    <Group header={<Header subtitle={<code>draggable</code>}>Перетаскивание</Header>}>
+      <List>
+        {draggingList.map((item) => (
+          <Cell
+            key={item}
+            before={<Avatar />}
+            draggable
+            onDragFinish={({ from, to }) => reorderList({from, to}, draggingList, updateDraggingList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
+
+
+    <Group header={<Header subtitle={<code>draggable mode="selectable"</code>}>Перетаскивание c выделением</Header>}>
+      <List>
+        {dragAndSelectList.map(({ label, ...restItem }) => (
+          <Cell
+            key={label}
+            mode="selectable"
+            draggable
+            before={<Avatar mode="app" size={32} />}
+            onDragFinish={({ from, to }) => reorderList({from, to}, dragAndSelectList, updateDragAndSelectList)}
+            {...restItem}
+          >{label}</Cell>
+        ))}
+      </List>
+    </Group>
+
+    {dragAndRemoveList.length > 0 &&
+    <Group header={<Header subtitle={<code>draggable mode="removable"</code>} >Перетаскивание c удалением</Header>}>
+      <List>
+        {dragAndRemoveList.map((item, idx) => (
+          <Cell
+            key={item}
+            mode="removable"
+            draggable
+            before={<Avatar />}
+            onRemove={() => removeFromList(idx, dragAndRemoveList, updateDragAndRemoveList)}
+            onDragFinish={({ from, to }) => reorderList({from, to}, dragAndRemoveList, updateDragAndRemoveList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
+    }
+  </Panel>
+</View>
 ```

package/src/components/Cell/useDraggable.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { TouchEvent } from '../Touch/Touch';
+import { CellProps } from './Cell';
+
+export interface DraggableProps {
+  onDragStart: () => void;
+  onDragEnd: () => void;
+  onDragMove: (e: TouchEvent) => void;
+}
+
+interface UseDraggableProps extends DraggableProps {
+  dragging: boolean;
+  rootElRef: any;
+}
+
+export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>) => {
+  const [dragging, setDragging] = React.useState<boolean>(false);
+  const rootElRef = React.useRef(null);
+
+  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);
+  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);
+  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);
+  const [dragShift, setDragShift] = React.useState<number>(0);
+  const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);
+
+  const onDragStart = () => {
+    const rootEl = rootElRef.current;
+
+    setDragging(true);
+
+    const _siblings: HTMLElement[] = Array.from(rootEl.parentElement.childNodes);
+    const idx = _siblings.indexOf(rootEl);
+
+    setDragStartIndex(idx);
+    setDragEndIndex(idx);
+    setSiblings(_siblings);
+    setDragShift(0);
+  };
+
+  const onDragMove = (e: TouchEvent) => {
+    e.originalEvent.preventDefault();
+
+    const rootEl = rootElRef.current;
+
+    rootEl.style.transform = `translateY(${e.shiftY}px)`;
+    const rootGesture = rootEl.getBoundingClientRect();
+
+    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+    setDragShift(e.shiftY);
+    setDragEndIndex(dragStartIndex);
+
+    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
+      const siblingGesture = sibling.getBoundingClientRect();
+      const siblingHalfHeight = siblingGesture.height / 2;
+
+      const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+      const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+
+      if (dragStartIndex < siblingIndex) {
+        if (rootOverSibling) {
+          if (dragDirection === 'down') {
+            sibling.style.transform = 'translateY(-100%)';
+          }
+
+          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
+        }
+        if (rootUnderSibling && dragDirection === 'up') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      } else if (dragStartIndex > siblingIndex) {
+        if (rootUnderSibling) {
+          if (dragDirection === 'up') {
+            sibling.style.transform = 'translateY(100%)';
+          }
+
+          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
+        }
+        if (rootOverSibling && dragDirection === 'down') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      }
+    });
+  };
+
+  const onDragEnd = () => {
+    const [from, to] = [dragStartIndex, dragEndIndex];
+
+    siblings.forEach((sibling: HTMLElement) => {
+      sibling.style.transform = null;
+    });
+
+    setSiblings(undefined);
+    setDragEndIndex(undefined);
+    setDragStartIndex(undefined);
+    setDragDirection(undefined);
+    setDragShift(undefined);
+
+    setDragging(false);
+
+    onDragFinish && onDragFinish({ from, to });
+  };
+
+  const useDraggableProps: UseDraggableProps = {
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    dragging,
+    rootElRef,
+  };
+
+  return useDraggableProps;
+};

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { classNames } from '../../lib/classNames';
 import Spinner from '../Spinner/Spinner';
 import CustomScrollView from '../CustomScrollView/CustomScrollView';
@@ -247,7 +247,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
         getRef={getRef}
         disabled={disabled}
         onInputChange={handleInputChange}
-        after={<Icon20Dropdown />}
+        after={<DropdownIcon />}
       />
       {opened &&
         <div

package/src/components/Counter/Counter.tsx

@@ -6,7 +6,7 @@ import Caption from '../Typography/Caption/Caption';
 import Text from '../Typography/Text/Text';
 import { VKCOM } from '../../lib/platform';
 import { hasReactNode } from '../../lib/utils';
-import { HasPlatform } from '../../types';
+import { HasComponent, HasPlatform } from '../../types';
 import './Counter.css';
 
 export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -17,7 +17,7 @@ export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: 's' | 'm';
 }
 
-type CounterTypographyProps = Pick<CounterProps, 'size'> & HasPlatform & { Component?: React.ElementType };
+type CounterTypographyProps = Pick<CounterProps, 'size'> & HasPlatform & HasComponent;
 
 const CounterTypography: React.FC<CounterTypographyProps> = ({ size, platform, ...restProps }) => {
   return size === 's'

package/src/components/CustomSelect/CustomSelect.tsx

@@ -4,18 +4,19 @@ import { debounce, setRef } from '../../lib/utils';
 import { classNames } from '../../lib/classNames';
 import { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import CustomScrollView from '../CustomScrollView/CustomScrollView';
-import { SizeType, withAdaptivity } from '../../hoc/withAdaptivity';
+import { withAdaptivity } from '../../hoc/withAdaptivity';
 import { withPlatform } from '../../hoc/withPlatform';
 import CustomSelectOption, { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
 import { getClassName } from '../../helpers/getClassName';
 import { FormFieldProps } from '../FormField/FormField';
 import { HasPlatform } from '../../types';
 import Input from '../Input/Input';
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import Caption from '../Typography/Caption/Caption';
 import { warnOnce } from '../../lib/warnOnce';
 import Spinner from '../Spinner/Spinner';
 import { defaultFilterFn } from '../../lib/select';
+import { is } from '../../lib/is';
 import './CustomSelect.css';
 
 const findIndexAfter = (options: CustomSelectOptionInterface[], startIndex = -1) => {
@@ -149,7 +150,6 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
     }
   }
 
-  public state: CustomSelectState;
   private keyboardInput: string;
   private isControlledOutside: boolean;
   private selectEl: HTMLSelectElement;
@@ -451,7 +451,8 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
   handleKeyUp = debounce(this.resetKeyboardInput, 1000);
 
   componentDidUpdate(prevProps: CustomSelectProps) {
-    if (prevProps.value !== this.props.value || prevProps.options !== this.props.options) {
+    // Внутри useEffect и так is, можно убрать
+    if (!is(prevProps.value, this.props.value) || prevProps.options !== this.props.options) {
       if (process.env.NODE_ENV === 'development') {
         checkOptionsValueType(this.props.options);
       }
@@ -574,7 +575,7 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
-            after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+            after={<DropdownIcon />}
             placeholder={restProps.placeholder}
           /> :
           <SelectMimicry

package/src/components/DatePicker/DatePicker.tsx

@@ -163,11 +163,11 @@ const DatePickerNative: React.FC<DatePickerProps & Partial<DatePickerDateFormat>
 };
 
 const DatePicker: React.FC<DatePickerProps> = ({ hasMouse, defaultValue, ...props }) => {
-  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(defaultValue || {
-    day: 0,
-    month: 0,
-    year: 0,
-  });
+  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({
+    day: defaultValue?.day || 0,
+    month: defaultValue?.month || 0,
+    year: defaultValue?.year || 0,
+  }));
 
   const onDateChange = React.useCallback((update: DatePickerDateFormat) => {
     setValue(update);

package/src/components/DropdownIcon/DropdownIcon.css

@@ -0,0 +1,3 @@
+.DropdownIcon {
+  cursor: pointer;
+}

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Icon20Dropdown, Icon24ChevronDown } from '@vkontakte/icons';
+import { SizeType } from '../AdaptivityProvider/AdaptivityContext';
+import { getClassName } from '../../helpers/getClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import './DropdownIcon.css';
+
+export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const Icon = sizeY === SizeType.COMPACT
+    ? Icon20Dropdown
+    : Icon24ChevronDown;
+
+  return (
+    <Icon vkuiClass={getClassName('DropdownIcon', platform)} {...props} />
+  );
+};

package/src/components/Epic/Readme.md

@@ -29,7 +29,7 @@ const Example = withAdaptivity(({ viewWidth }) => {
       style={{ justifyContent: "center" }}
     >
       {isDesktop && (
-        <SplitCol fixed width="280px" maxWidth="280px">
+        <SplitCol fixed width={280} maxWidth={280}>
           <Panel>
             {hasHeader && <PanelHeader />}
             <Group>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useTimeout } from '../../hooks/useTimeout';
+import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { noop } from '../../lib/utils';
+import { HasComponent, HasRootRef } from '../../types';
+import { AppRootContext } from '../AppRoot/AppRootContext';
+
+const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
+
+export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
+  onClose?: (props?: any) => void;
+  restoreFocus?: boolean;
+  timeout?: number;
+}
+
+export const FocusTrap: React.FC<FocusTrapProps> = ({
+  Component = 'div',
+  onClose = noop,
+  restoreFocus = true,
+  timeout = 0,
+  getRootRef,
+  children,
+  ...restProps
+}) => {
+  const ref = useExternRef<HTMLElement>(getRootRef);
+
+  const { document, window } = useDOM();
+  const activeElement = document.activeElement as HTMLElement;
+
+  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[]>(null);
+  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);
+
+  // HANDLE TRAP MOUNT
+
+  const { keyboardInput } = React.useContext(AppRootContext);
+  const focusOnTrapMount = useTimeout(() => {
+    if (keyboardInput && !ref.current?.contains(activeElement) && focusableNodes?.length) {
+      focusableNodes[0].focus();
+    }
+  }, timeout);
+  useIsomorphicLayoutEffect(() => {
+    focusOnTrapMount.set();
+  }, []);
+
+  // HANDLE FOCUSABLE NODES
+
+  useIsomorphicLayoutEffect(() => {
+    if (!ref.current) {
+      return noop();
+    }
+
+    const nodes: HTMLElement[] = [];
+    // eslint-disable-next-line no-restricted-properties
+    ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {
+      const { display, visibility } = window.getComputedStyle(focusableEl);
+
+      if (display !== 'none' && visibility !== 'hidden') {
+        nodes.push(focusableEl as HTMLElement);
+      }
+    });
+
+    if (nodes?.length) {
+      setFocusableNodes(nodes);
+    }
+
+    return noop();
+  }, [children]);
+
+  // HANDLE TRAP UNMOUNT
+
+  const focusOnTrapUnmount = useTimeout(() => {
+    if (restoreFocusTo) {
+      restoreFocusTo.focus();
+    }
+  }, timeout);
+  useIsomorphicLayoutEffect(() => {
+    if (restoreFocus) {
+      setRestoreFocusTo(activeElement);
+
+      return () => {
+        focusOnTrapUnmount.set();
+      };
+    }
+
+    return noop();
+  }, [restoreFocus]);
+
+  const onDocumentKeydown = (e: KeyboardEvent) => {
+    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {
+      const lastIdx = focusableNodes.length - 1;
+      const targetIdx = focusableNodes.findIndex((node) => node === e.target);
+
+      const shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;
+
+      if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {
+        e.preventDefault();
+
+        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
+
+        if (node !== activeElement) {
+          node.focus();
+        }
+
+        return false;
+      }
+    }
+
+    if (pressedKey(e) === Keys.ESCAPE) {
+      onClose();
+    }
+
+    return true;
+  };
+  useGlobalEventListener(document, 'keydown', onDocumentKeydown, { capture: true });
+
+  return (
+    <Component ref={ref} {...restProps}>
+      {children}
+    </Component>
+  );
+};

package/src/components/FocusVisible/FocusVisible.css

@@ -1,5 +1,7 @@
 .AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-.Tappable:focus-visible > .FocusVisible {
+.Tappable:focus-visible > .FocusVisible,
+.AppRoot--keyboard-input input:focus ~ .FocusVisible,
+input:focus-visible ~ .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -14,7 +16,9 @@
 }
 
 .AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-.Tappable:focus-visible > .FocusVisible--outside {
+.Tappable:focus-visible > .FocusVisible--outside,
+.AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
+input:focus-visible ~ .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -29,7 +33,9 @@
  */
 @media (prefers-reduced-motion: no-preference) {
   .AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-  .Tappable:focus-visible > .FocusVisible {
+  .Tappable:focus-visible > .FocusVisible,
+  .AppRoot--keyboard-input input:focus ~ .FocusVisible,
+  input:focus-visible ~ .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
@@ -40,7 +46,9 @@
   }
 
   .AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-  .Tappable:focus-visible > .FocusVisible--outside {
+  .Tappable:focus-visible > .FocusVisible--outside,
+  .AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
+  input:focus-visible ~ .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;

package/src/components/FormField/FormField.css

@@ -1,7 +1,6 @@
 .FormField {
   position: relative;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
   padding: 1px;
   box-sizing: border-box;

package/src/components/FormField/FormField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { hasReactNode } from '../../lib/utils';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import './FormField.css';
@@ -17,8 +17,8 @@ export interface FormFieldProps {
 interface FormFieldOwnProps extends
   React.AllHTMLAttributes<HTMLElement>,
   HasRootRef<HTMLElement>,
+  HasComponent,
   FormFieldProps {
-  Component?: React.ElementType;
   disabled?: boolean;
 }
 

package/src/components/FormItem/FormItem.css

@@ -3,9 +3,13 @@
   padding: 12px var(--formitem_padding);
 }
 
+.FormItem--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .FormItem__removable {
   flex-grow: 1;
-  flex-shrink: initial;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
@@ -52,19 +56,6 @@
   --formitem_padding: 12px;
 }
 
-.FormItem--ios.FormItem--removable {
-  padding-left: 0;
-  margin-left: 0;
-}
-
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--withTop {
-  margin-top: -28px;
-}
-
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--sizeY-compact.FormItem--withTop {
-  margin-top: -26px;
-}
-
 /**
  * CMP:
  * FormLayoutGroup
@@ -81,3 +72,11 @@
 .FormLayoutGroup--horizontal .FormItem + .FormItem {
   margin-left: 24px;
 }
+
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop {
+  margin-top: -28px;
+}
+
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop.FormItem--sizeY-compact {
+  margin-top: -26px;
+}

package/src/components/FormItem/FormItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { classNames } from '../../lib/classNames';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -11,11 +11,10 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { Removable, RemovableProps } from '../Removable/Removable';
 import './FormItem.css';
 
-export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLElement> {
+export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
   top?: React.ReactNode;
   bottom?: React.ReactNode;
   status?: 'default' | 'error' | 'valid';
-  Component?: React.ElementType;
   /**
    * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
    */