@vkontakte/vkui 4.21.0 → 4.22.2

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[] = [...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/CustomSelect/CustomSelect.tsx

@@ -4,14 +4,14 @@ 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';
@@ -150,7 +150,6 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
     }
   }
 
-  public state: CustomSelectState;
   private keyboardInput: string;
   private isControlledOutside: boolean;
   private selectEl: HTMLSelectElement;
@@ -576,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/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

@@ -135,6 +135,7 @@ const Example = withAdaptivity(({ viewWidth }) => {
               onClick={onStoryChange}
               selected={activeStory === 'profile'}
               data-story="profile"
+              indicator={<Badge mode="prominent" />}
               text="Профиль"
             ><Icon28UserCircleOutline /></TabbarItem>
           </Tabbar>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -54,14 +54,17 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
 
     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);
-      }
-    });
+    Array.prototype.forEach.call(
+      // eslint-disable-next-line no-restricted-properties
+      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
+      (focusableEl: Element) => {
+        const { display, visibility } = window.getComputedStyle(focusableEl);
+
+        if (display !== 'none' && visibility !== 'hidden') {
+          nodes.push(focusableEl as HTMLElement);
+        }
+      },
+    );
 
     if (nodes?.length) {
       setFocusableNodes(nodes);

package/src/components/FormItem/FormItem.css

@@ -56,14 +56,6 @@
   --formitem_padding: 12px;
 }
 
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--withTop {
-  margin-top: -28px;
-}
-
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--sizeY-compact.FormItem--withTop {
-  margin-top: -26px;
-}
-
 /**
  * CMP:
  * FormLayoutGroup
@@ -80,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/FormLayoutGroup/FormLayoutGroup.css

@@ -3,9 +3,10 @@
   padding: 12px var(--formitem_padding);
 }
 
-.FormLayoutGroup--horizontal.FormLayoutGroup--removable {
-  padding-left: 0;
-  padding-right: 0;
+.FormLayoutGroup__removable {
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /**
@@ -14,3 +15,8 @@
 .FormLayoutGroup--ios {
   --formitem_padding: 12px;
 }
+
+.FormLayoutGroup--removable {
+  padding-left: 0;
+  padding-right: 0;
+}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -42,7 +42,16 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
       )}
       {...restProps}>
       {isRemovable
-        ? <Removable align="start" removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootEl?.current)}>{children}</Removable>
+        ? (
+          <Removable
+            vkuiClass="FormLayoutGroup__removable"
+            align="start"
+            removePlaceholder={removePlaceholder}
+            onRemove={(e) => onRemove(e, rootEl?.current)}
+          >
+            {children}
+          </Removable>
+        )
         : children
       }
     </div>

package/src/components/GridAvatar/GridAvatar.css

@@ -0,0 +1,37 @@
+.GridAvatar__in {
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+
+  --grid-avatar-image-offset: 2px;
+}
+
+.GridAvatar__item {
+  width: calc(50% - var(--grid-avatar-image-offset) / 2);
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+.GridAvatar--images-1 .GridAvatar__item {
+  width: 100%;
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item {
+  height: calc(50% - var(--grid-avatar-image-offset) / 2);
+}
+
+.GridAvatar--images-2 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(1n + 3) {
+  margin-left: var(--grid-avatar-image-offset);
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(odd) {
+  margin-bottom: var(--grid-avatar-image-offset);
+}

package/src/components/GridAvatar/GridAvatar.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
+import { classNames } from '../../lib/classNames';
+import { warnOnce } from '../../lib/warnOnce';
+import { HasRootRef } from '../../types';
+import './GridAvatar.css';
+
+export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+  src?: string[];
+  size?: number;
+  shadow?: boolean;
+}
+
+const MIN_GRID_LENGTH = 1;
+const MAX_GRID_LENGTH = 4;
+
+const warn = warnOnce('GridAvatar');
+
+export const GridAvatar: React.FC<GridAvatarProps> = ({
+  src = [],
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  ...restProps
+}: GridAvatarProps) => {
+  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {
+    warn(`Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`);
+  }
+
+  const count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));
+
+  return (
+    <Avatar
+      {...restProps}
+      vkuiClass={classNames(
+        'GridAvatar',
+        `GridAvatar--images-${count}`,
+      )}
+      shadow={shadow}
+      size={size}
+    >
+      <div vkuiClass="GridAvatar__in">
+        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
+          return (
+            <div
+              key={i}
+              vkuiClass="GridAvatar__item"
+              style={{ backgroundImage: `url(${src})` }}
+            >
+            </div>
+          );
+        })}
+      </div>
+    </Avatar>
+  );
+};

package/src/components/GridAvatar/Readme.md

@@ -0,0 +1,12 @@
+Отображение нескольких аватаров в сетке от 1 до 4 элементов.
+
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+  <GridAvatar />
+  <GridAvatar src={[getAvatarUrl('user_ji')]} />
+  <GridAvatar src={[getAvatarUrl('user_wayshev'), getAvatarUrl('user_mm')]} />
+  <GridAvatar src={[getAvatarUrl('user_arthurstam'), getAvatarUrl('user_xyz'), getAvatarUrl('user_ox')]} />
+  <GridAvatar src={[getAvatarUrl('user_ilyagrshn'), getAvatarUrl('user_tc'), getAvatarUrl('user_lihachyov'), getAvatarUrl('user_va')]} />
+</div>
+```

package/src/components/InitialsAvatar/InitialsAvatar.css

@@ -0,0 +1,53 @@
+.InitialsAvatar {
+  overflow: hidden;
+  background: #99a2ad;
+  background: linear-gradient(135deg, #b1b6bd, #99a2ad);
+}
+
+.InitialsAvatar__text {
+  font-family: var(--font-tt);
+  font-weight: 600;
+  color: var(--white); /* stylelint-disable-line plugin/only-tokens-are-allowed */
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.InitialsAvatar--color-red {
+  background: #e52e40;
+  background: linear-gradient(135deg, #ff7583, #e52e40);
+}
+
+.InitialsAvatar--color-pink {
+  background: #e62e6b;
+  background: linear-gradient(135deg, #ff8880, #e62e6b);
+}
+
+.InitialsAvatar--color-orange {
+  background: #e66b2e;
+  background: linear-gradient(135deg, #ffbf80, #e66b2e);
+}
+
+.InitialsAvatar--color-yellow {
+  background: #e7a902;
+  background: linear-gradient(135deg, #ffd54f, #e7a902);
+}
+
+.InitialsAvatar--color-green {
+  background: #6cd97e;
+  background: linear-gradient(135deg, #6cd97e, #12b212);
+}
+
+.InitialsAvatar--color-l-blue {
+  background: #2bb4d6;
+  background: linear-gradient(135deg, #7df1fa, #2bb4d6);
+}
+
+.InitialsAvatar--color-blue {
+  background: #3f8ae0;
+  background: linear-gradient(135deg, #6cf, #3f8ae0);
+}
+
+.InitialsAvatar--color-violet {
+  background: #8f3fe0;
+  background: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}