feat(Reorder): add component reorder

packages/vkui/src/components/Cell/Cell.tsx

@@ -7,9 +7,9 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRootRef } from '../../types';
 import { Removable, type RemovableProps } from '../Removable/Removable';
+import { Reorder } from '../Reorder/Reorder';
 import { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';
-import { CellDragger } from './CellDragger/CellDragger';
 import { DEFAULT_DRAGGABLE_LABEL } from './constants';
 import styles from './Cell.module.css';
 
@@ -98,15 +98,13 @@ export const Cell: React.FC<CellProps> & {
   const rootElRef = useExternRef(getRootRef);
 
   const dragger = draggable ? (
-    <CellDragger
-      elRef={rootElRef}
+    <Reorder.Trigger
       className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}
       onDragStateChange={setDragging}
-      onDragFinish={onDragFinish}
       data-testid={draggerTestId}
     >
-      {draggerLabel}
-    </CellDragger>
+      <Reorder.TriggerIcon>{draggerLabel}</Reorder.TriggerIcon>
+    </Reorder.Trigger>
   ) : null;
 
   let checkbox;
@@ -166,6 +164,7 @@ export const Cell: React.FC<CellProps> & {
   if (removable) {
     return (
       <Removable
+        Component={draggable ? Reorder.Item : undefined}
         className={classNames(cellClasses, className)}
         style={style}
         getRootRef={rootElRef}
@@ -188,7 +187,16 @@ export const Cell: React.FC<CellProps> & {
     );
   }
 
-  return (
+  return draggable ? (
+    <Reorder.Item
+      className={classNames(cellClasses, className)}
+      style={style}
+      getRootRef={rootElRef}
+      onReorder={onDragFinish}
+    >
+      <SimpleCell {...simpleCellProps} />
+    </Reorder.Item>
+  ) : (
     <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>
       <SimpleCell {...simpleCellProps} />
     </div>

packages/vkui/src/components/List/List.module.css

@@ -2,7 +2,3 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 }
-
-.placeholder {
-  display: none;
-}

packages/vkui/src/components/List/List.tsx

@@ -1,35 +1,36 @@
 import * as React from 'react';
-import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';
+import { classNames } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';
-import { RootComponent } from '../RootComponent/RootComponent';
+import { Reorder, type ReorderProps } from '../Reorder/Reorder';
 import styles from './List.module.css';
 
-export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
-  /**
-   * Задает отступ между элементами.
-   */
-  gap?: number;
-};
+export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> &
+  Pick<ReorderProps, 'onReorder'> & {
+    /**
+     * Задает отступ между элементами.
+     */
+    gap?: number;
+  };
 
 /**
  * @see https://vkui.io/components/cell#list
  */
-export const List = ({ children, gap = 0, ...restProps }: ListProps): React.ReactNode => {
+export const List = ({
+  children,
+  gap = 0,
+  onReorder,
+  className,
+  ...restProps
+}: ListProps): React.ReactNode => {
   return (
-    <RootComponent
+    <Reorder.Root
       role="list"
-      baseClassName={styles.host}
-      baseStyle={{
-        gridGap: gap,
-      }}
+      className={classNames(styles.host, className)}
+      gap={gap}
+      onReorder={onReorder}
       {...restProps}
     >
       {children}
-      <div
-        aria-hidden
-        {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}
-        className={styles.placeholder}
-      ></div>
-    </RootComponent>
+    </Reorder.Root>
   );
 };

packages/vkui/src/components/Removable/Removable.tsx

@@ -5,7 +5,7 @@ import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getTextFromChildren } from '../../lib/children';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { IconButton } from '../IconButton/IconButton';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { RemovableIos } from './RemovableIos';
@@ -95,6 +95,7 @@ export interface RemovableIosRenderProps {
 
 interface RemovableOwnProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,
+    HasComponent,
     RemovableProps {
   /**
    * Расположение кнопки удаления.

packages/vkui/src/components/Reorder/Reorder.stories.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon28MessageOutline } from '@vkontakte/icons';
+import { noop } from '@vkontakte/vkjs';
+import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { createStoryParameters } from '../../testing/storybook/createStoryParameters';
+import { Avatar } from '../Avatar/Avatar.tsx';
+import { Flex } from '../Flex/Flex.tsx';
+import { Group } from '../Group/Group';
+import { IconButton } from '../IconButton/IconButton.tsx';
+import { SimpleCell } from '../SimpleCell/SimpleCell.tsx';
+import { Reorder, type ReorderProps } from './Reorder';
+
+const story: Meta<ReorderProps> = {
+  title: 'Utils/Reorder',
+  component: Reorder,
+  parameters: createStoryParameters('Reorder', CanvasFullLayout, DisableCartesianParam),
+  tags: ['Утилиты'],
+};
+
+export default story;
+
+type Story = StoryObj<
+  ReorderProps<{
+    avatarUrl: string;
+    name: string;
+    screenName: string;
+  }>
+>;
+
+export const Playground: Story = {
+  render: function Render({ items, ...args }) {
+    const [draggingList, updateDraggingList] = React.useState(items);
+
+    const onDragFinish: ReorderProps['onReorder'] = (swappedItems) => {
+      updateDraggingList(Reorder.onReorder(swappedItems, draggingList));
+    };
+
+    return (
+      <Reorder.Root gap={10} onReorder={onDragFinish} {...args}>
+        {draggingList.map((item) => (
+          <SimpleCell
+            key={item.screenName}
+            Component={Reorder.Item}
+            hasHover={false}
+            before={
+              <Flex align="center" gap={10}>
+                <Reorder.Trigger>
+                  <Reorder.TriggerIcon>Перенести ячейку</Reorder.TriggerIcon>
+                </Reorder.Trigger>
+                <Avatar size={48} src={item.avatarUrl} />
+              </Flex>
+            }
+            after={
+              <IconButton label="Написать сообщение" onClick={noop}>
+                <Icon28MessageOutline />
+              </IconButton>
+            }
+            subtitle={item.screenName}
+            onClick={noop}
+          >
+            {item.name}
+          </SimpleCell>
+        ))}
+      </Reorder.Root>
+    );
+  },
+  args: {
+    items: [
+      {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/61377022',
+        name: 'Эльдар Мухаметханов',
+        screenName: 'e.muhamethanov',
+      },
+      {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/5850354',
+        name: 'Ином Мирджамолов',
+        screenName: 'inomdzhon',
+      },
+      {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/7431217',
+        name: 'Вика Жижонкова',
+        screenName: 'BlackySoul',
+      },
+      {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/14944123',
+        name: 'Даниил Суворов',
+        screenName: 'SevereCloud',
+      },
+      {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/32414396',
+        name: 'Никита Денисов',
+        screenName: 'qurle',
+      },
+    ],
+  },
+  decorators: [
+    (Component, context) => (
+      <Group>
+        <Component {...context.args} />
+      </Group>
+    ),
+    withSinglePanel,
+    withVKUILayout,
+  ],
+};