@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Cell/Readme.md

@@ -1,66 +1,109 @@
 Надстройка над SimpleCell, позволяющая удалять, перетаскивать и выделять ячейки.
 
 ```jsx
-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 [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>
-
-
-    {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
+      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>
-    }
 
+    {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>
+    )}
 
-    <Group header={<Header subtitle={<code>draggable</code>}>Перетаскивание</Header>}>
+    <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>
+            onDragFinish={({ from, to }) =>
+              reorderList({ from, to }, draggingList, updateDraggingList)
+            }
+          >
+            {item}
+          </Cell>
         ))}
       </List>
     </Group>
 
-
-    <Group header={<Header subtitle={<code>draggable mode="selectable"</code>}>Перетаскивание c выделением</Header>}>
+    <Group
+      header={
+        <Header subtitle={<code>draggable mode="selectable"</code>}>
+          Перетаскивание c выделением
+        </Header>
+      }
+    >
       <List>
         {dragAndSelectList.map(({ label, ...restItem }) => (
           <Cell
@@ -68,29 +111,53 @@ const reorderList = ({ from, to }, list, updateListFn) => {
             mode="selectable"
             draggable
             before={<Avatar mode="app" size={32} />}
-            onDragFinish={({ from, to }) => reorderList({from, to}, dragAndSelectList, updateDragAndSelectList)}
+            onDragFinish={({ from, to }) =>
+              reorderList(
+                { from, to },
+                dragAndSelectList,
+                updateDragAndSelectList
+              )
+            }
             {...restItem}
-          >{label}</Cell>
+          >
+            {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>
-    }
+    {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>
+</View>;
 ```

package/src/components/Cell/useDraggable.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { TouchEvent } from '../Touch/Touch';
-import { CellProps } from './Cell';
+import * as React from "react";
+import { TouchEvent } from "../Touch/Touch";
+import { CellProps } from "./Cell";
 
 export interface DraggableProps {
   onDragStart: () => void;
@@ -13,7 +13,9 @@ interface UseDraggableProps extends DraggableProps {
   rootElRef: any;
 }
 
-export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>) => {
+export const useDraggable = ({
+  onDragFinish,
+}: Pick<CellProps, "onDragFinish">) => {
   const [dragging, setDragging] = React.useState<boolean>(false);
   const rootElRef = React.useRef(null);
 
@@ -21,7 +23,9 @@ export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>)
   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 [dragDirection, setDragDirection] = React.useState<"down" | "up">(
+    undefined
+  );
 
   const onDragStart = () => {
     const rootEl = rootElRef.current;
@@ -45,7 +49,7 @@ export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>)
     rootEl.style.transform = `translateY(${e.shiftY}px)`;
     const rootGesture = rootEl.getBoundingClientRect();
 
-    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+    setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
     setDragShift(e.shiftY);
     setDragEndIndex(dragStartIndex);
 
@@ -53,30 +57,32 @@ export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>)
       const siblingGesture = sibling.getBoundingClientRect();
       const siblingHalfHeight = siblingGesture.height / 2;
 
-      const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-      const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+      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%)';
+          if (dragDirection === "down") {
+            sibling.style.transform = "translateY(-100%)";
           }
 
           setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
         }
-        if (rootUnderSibling && dragDirection === 'up') {
-          sibling.style.transform = 'translateY(0)';
+        if (rootUnderSibling && dragDirection === "up") {
+          sibling.style.transform = "translateY(0)";
         }
       } else if (dragStartIndex > siblingIndex) {
         if (rootUnderSibling) {
-          if (dragDirection === 'up') {
-            sibling.style.transform = 'translateY(100%)';
+          if (dragDirection === "up") {
+            sibling.style.transform = "translateY(100%)";
           }
 
           setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
         }
-        if (rootOverSibling && dragDirection === 'down') {
-          sibling.style.transform = 'translateY(0)';
+        if (rootOverSibling && dragDirection === "down") {
+          sibling.style.transform = "translateY(0)";
         }
       }
     });

package/src/components/CellButton/CellButton.css

@@ -18,7 +18,7 @@
 }
 
 .CellButton[disabled] {
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .CellButton--centered {

package/src/components/CellButton/CellButton.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';
-import './CellButton.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import "./CellButton.css";
 
 export interface CellButtonProps extends SimpleCellProps {
-  mode?: 'primary' | 'danger';
+  mode?: "primary" | "danger";
   centered?: boolean;
 }
 
 const CellButton: React.FC<CellButtonProps> = ({
   centered = false,
-  mode = 'primary',
+  mode = "primary",
   ...restProps
 }: CellButtonProps) => {
   const platform = usePlatform();
@@ -22,11 +22,11 @@ const CellButton: React.FC<CellButtonProps> = ({
       stopPropagation={true}
       {...restProps}
       vkuiClass={classNames(
-        getClassName('CellButton', platform),
+        getClassName("CellButton", platform),
         `CellButton--${mode}`,
         {
-          ['CellButton--centered']: centered,
-        },
+          ["CellButton--centered"]: centered,
+        }
       )}
     />
   );

package/src/components/CellButton/Readme.md

@@ -7,16 +7,46 @@
       <CellButton mode="danger">Удалить беседу</CellButton>
     </Group>
     <Group header={<Header mode="secondary">Иконки</Header>}>
-      <CellButton before={<Icon28AddOutline />}>Добавить родственника</CellButton>
-      <CellButton before={<Icon28DeleteOutline />} mode="danger">Удалить беседу</CellButton>
+      <CellButton before={<Icon28AddOutline />}>
+        Добавить родственника
+      </CellButton>
+      <CellButton before={<Icon28DeleteOutline />} mode="danger">
+        Удалить беседу
+      </CellButton>
     </Group>
     <Group header={<Header mode="secondary">Аватарки</Header>}>
-      <CellButton before={<Avatar shadow={false} size={40}><Icon24Add /></Avatar>}>Добавить участников</CellButton>
-      <CellButton before={<Avatar shadow={false} size={48}><Icon28AddOutline /></Avatar>}>Создать беседу</CellButton>
-      <CellButton before={<Avatar shadow={false} size={72} mode="image"><Icon28AddOutline /></Avatar>}>Создать плейлист</CellButton>
+      <CellButton
+        before={
+          <Avatar shadow={false} size={40}>
+            <Icon24Add />
+          </Avatar>
+        }
+      >
+        Добавить участников
+      </CellButton>
+      <CellButton
+        before={
+          <Avatar shadow={false} size={48}>
+            <Icon28AddOutline />
+          </Avatar>
+        }
+      >
+        Создать беседу
+      </CellButton>
+      <CellButton
+        before={
+          <Avatar shadow={false} size={72} mode="image">
+            <Icon28AddOutline />
+          </Avatar>
+        }
+      >
+        Создать плейлист
+      </CellButton>
     </Group>
     <Group header={<Header mode="secondary">Центрирование</Header>}>
-      <CellButton centered before={<Icon24Add />}>Создать беседу</CellButton>
+      <CellButton centered before={<Icon24Add />}>
+        Создать беседу
+      </CellButton>
     </Group>
   </Panel>
 </View>

package/src/components/Checkbox/Checkbox.css

@@ -14,16 +14,13 @@
 
 .Checkbox__container {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
 }
 
 .Checkbox__icon {
   flex-shrink: 0;
-  box-sizing: border-box;
   margin-right: 12px;
-  border-radius: 4px;
-  display: flex;
 }
 
 .Checkbox__icon--on {
@@ -41,8 +38,23 @@
   word-break: break-word;
 }
 
+.Checkbox__description {
+  color: var(--text_secondary);
+  display: block;
+  margin-bottom: 12px;
+  margin-top: 2px;
+}
+
+.Checkbox__children {
+  margin-top: 12px;
+}
+
+.Checkbox__children:last-child {
+  margin-bottom: 12px;
+}
+
 .Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--on {
-  display: flex;
+  display: block;
 }
 
 .Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--off {
@@ -50,59 +62,66 @@
 }
 
 .Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: .6;
+  opacity: 0.6;
 }
 
+/**
+ * iOS
+ */
+
 .Checkbox--ios {
   padding: 0 12px;
 }
 
-.Checkbox--ios .Checkbox__icon {
-  margin-top: 10px;
-}
-
-.Checkbox--ios.Checkbox--sizeY-compact .Checkbox__icon {
-  margin-top: 8px;
-}
-
-.Checkbox--ios .Checkbox__content {
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
+/**
+ * Android
+ */
 
 .Checkbox--android {
   padding: 0 16px;
 }
 
-.Checkbox--android .Checkbox__icon {
-  margin-top: 10px;
-}
+/**
+ * sizeY COMPACT
+ */
 
-.Checkbox--android.Checkbox--sizeY-compact .Checkbox__icon {
+.Checkbox--sizeY-compact .Checkbox__children {
   margin-top: 8px;
 }
 
-.Checkbox--android .Checkbox__content {
-  margin-top: 12px;
-  margin-bottom: 12px;
+.Checkbox--sizeY-compact .Checkbox__children:last-child {
+  margin-bottom: 8px;
+}
+
+.Checkbox--sizeY-compact .Checkbox__description {
+  margin-bottom: 8px;
 }
 
+/**
+ * VKCOM
+ */
+
 .Checkbox--vkcom {
   padding: 0 16px;
 }
 
 .Checkbox--vkcom .Checkbox__icon {
-  border-radius: 3px;
-  padding: 1px;
-  border-width: 1px;
-  margin-top: 8px;
+  margin-right: 10px;
 }
 
 .Checkbox--vkcom .Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: .4;
+  opacity: 0.4;
 }
 
-.Checkbox--sizeY-compact .Checkbox__content {
+.Checkbox--vkcom .Checkbox__children {
   margin-top: 8px;
+}
+
+.Checkbox--vkcom .Checkbox__children:last-child {
+  margin-bottom: 8px;
+}
+
+.Checkbox--vkcom .Checkbox__description {
+  margin-top: 1px;
   margin-bottom: 8px;
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -1,23 +1,36 @@
-import * as React from 'react';
-import Tappable, { ACTIVE_EFFECT_DELAY } from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { IOS, VKCOM } from '../../lib/platform';
+import * as React from "react";
+import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { IOS, VKCOM } from "../../lib/platform";
 
-import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff } from '@vkontakte/icons';
+import {
+  Icon20CheckBoxOn,
+  Icon20CheckBoxOff,
+  Icon24CheckBoxOn,
+  Icon24CheckBoxOff,
+} from "@vkontakte/icons";
 
-import { HasRef, HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import Text from '../Typography/Text/Text';
-import Headline from '../Typography/Headline/Headline';
-import './Checkbox.css';
+import { HasRef, HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import Text from "../Typography/Text/Text";
+import Headline from "../Typography/Headline/Headline";
+import { hasReactNode } from "../../lib/utils";
+import Caption from "../Typography/Caption/Caption";
+import "./Checkbox.css";
 
-export interface CheckboxProps extends
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HasRootRef<HTMLLabelElement>,
-  HasRef<HTMLInputElement>,
-  AdaptivityProps { }
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRootRef<HTMLLabelElement>,
+    HasRef<HTMLInputElement>,
+    AdaptivityProps {
+  description?: React.ReactNode;
+}
 
 export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   children,
@@ -25,38 +38,66 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   style,
   getRootRef,
   getRef,
+  description,
   sizeY,
   ...restProps
 }: CheckboxProps) => {
   const platform = usePlatform();
 
-  const ContentComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  const ContentComponent =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
 
   return (
     <Tappable
       Component="label"
-      vkuiClass={classNames(getClassName('Checkbox', platform), `Checkbox--sizeY-${sizeY}`)}
+      vkuiClass={classNames(
+        getClassName("Checkbox", platform),
+        `Checkbox--sizeY-${sizeY}`
+      )}
       className={className}
       style={style}
       disabled={restProps.disabled}
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       getRootRef={getRootRef}
     >
-      <input {...restProps} type="checkbox" vkuiClass="Checkbox__input" ref={getRef} />
+      <input
+        {...restProps}
+        type="checkbox"
+        vkuiClass="Checkbox__input"
+        ref={getRef}
+      />
       <div vkuiClass="Checkbox__container">
         <div vkuiClass="Checkbox__icon Checkbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM
-            ? <Icon20CheckBoxOn />
-            : <Icon24CheckBoxOn />
-          }
+          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+            <Icon20CheckBoxOn />
+          ) : (
+            <Icon24CheckBoxOn />
+          )}
         </div>
         <div vkuiClass="Checkbox__icon Checkbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM
-            ? <Icon20CheckBoxOff />
-            : <Icon24CheckBoxOff />
-          }
+          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+            <Icon20CheckBoxOff />
+          ) : (
+            <Icon24CheckBoxOff />
+          )}
         </div>
-        <ContentComponent weight="regular" vkuiClass="Checkbox__content">{children}</ContentComponent>
+        <ContentComponent
+          weight="regular"
+          vkuiClass="Checkbox__content"
+          Component="div"
+        >
+          <div vkuiClass="Checkbox__children">{children}</div>
+          {hasReactNode(description) && (
+            <Caption
+              level="1"
+              Component="span"
+              weight="regular"
+              vkuiClass="Checkbox__description"
+            >
+              {description}
+            </Caption>
+          )}
+        </ContentComponent>
       </div>
     </Tappable>
   );