@vkontakte/vkui 4.20.0 → 4.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.20.0",
+  "version": "4.22.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -37,12 +37,12 @@
     "@types/jest": "^26.0.15",
     "@types/jest-image-snapshot": "^4.1.3",
     "@types/node": "^12.7.2",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.8.5",
+    "@types/react": "^16.14.20",
+    "@types/react-dom": "^16.9.14",
     "@types/webpack-dev-server": "^3.11.1",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.0.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.27.3",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.109.0",
     "@vkontakte/vk-bridge": "^2.1.3",
@@ -101,6 +101,10 @@
     "webpack-merge": "^4.2.2",
     "yargs": "^15.4.1"
   },
+  "resolutions": {
+    "@types/react": "^16.14.20",
+    "@types/react-dom": "^16.9.14"
+  },
   "bin": {
     "generate_scheme": "./tasks/generate_scheme.js"
   },

package/src/components/ActionSheet/ActionSheet.tsx

@@ -13,6 +13,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { warnOnce } from '../../lib/warnOnce';
 import { SharedDropdownProps, PopupDirection, ToggleRef } from './types';
+import { noop } from '@vkontakte/vkjs';
 import './ActionSheet.css';
 
 export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -53,11 +54,10 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   const [closing, setClosing] = React.useState(false);
   const onClose = () => setClosing(true);
 
-  const [_closeAction, setCloseAction] = React.useState<VoidFunction>();
+  const closeAction = React.useRef<VoidFunction>(noop);
   const afterClose = () => {
     restProps.onClose();
-    _closeAction && _closeAction();
-    setCloseAction(undefined);
+    closeAction.current();
   };
 
   if (process.env.NODE_ENV === 'development' && !restProps.onClose) {
@@ -86,7 +86,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     event.persist();
 
     if (autoclose) {
-      setCloseAction(() => action && action(event));
+      closeAction.current = () => action && action(event);
       setClosing(true);
     } else {
       action && action(event);
@@ -111,7 +111,6 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
       <ActionSheetContext.Provider value={contextValue}>
         <DropdownComponent
           closing={closing}
-          onTransitionEnd={closing && !isDesktop ? afterClose : null}
           timeout={timeout}
           {...restProps as Omit<SharedDropdownProps, 'closing'>}
           onClose={onClose}

package/src/components/ActionSheet/Readme.md

@@ -11,7 +11,7 @@ ActionSheet – имитация [нативного компонента](https
 > В коде примера ниже можно посмотреть, как добавить такой элемент.
 Для Android версии он не нужен.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const [popout, setPopout] = useState(null);
 const onClose = () => setPopout(null);
 const [filter, setFilter] = useState('best');
@@ -192,17 +192,21 @@ const openBaseTop = () => setPopout(
 
 React.useEffect(openBase, []);
 
-<View popout={popout} activePanel="panel">
-  <Panel id="panel">
-    <PanelHeader>ActionSheet</PanelHeader>
-    <Group>
-      <CellButton getRootRef={baseTargetRef} onClick={openBase}>Базовый список</CellButton>
-      <CellButton getRootRef={iconsTargetRef} onClick={openIcons}>Список с иконками</CellButton>
-      <CellButton getRootRef={subtitleTargetRef} onClick={openSubtitle}>С подзаголовком</CellButton>
-      <CellButton getRootRef={selectableTargetRef} onClick={openSelectable}>Выделяемые</CellButton>
-      <CellButton getRootRef={titleTargetRef} onClick={openTitle}>C заголовком</CellButton>
-      <CellButton getRootRef={baseTopTargetRef} onClick={openBaseTop}>Базовый список, открывается наверх на десктопах</CellButton>
-    </Group>
-  </Panel>
-</View>
+<SplitLayout popout={popout}>
+  <SplitCol>
+  <View activePanel="panel">
+    <Panel id="panel">
+      <PanelHeader>ActionSheet</PanelHeader>
+      <Group>
+        <CellButton getRootRef={baseTargetRef} onClick={openBase}>Базовый список</CellButton>
+        <CellButton getRootRef={iconsTargetRef} onClick={openIcons}>Список с иконками</CellButton>
+        <CellButton getRootRef={subtitleTargetRef} onClick={openSubtitle}>С подзаголовком</CellButton>
+        <CellButton getRootRef={selectableTargetRef} onClick={openSelectable}>Выделяемые</CellButton>
+        <CellButton getRootRef={titleTargetRef} onClick={openTitle}>C заголовком</CellButton>
+        <CellButton getRootRef={baseTopTargetRef} onClick={openBaseTop}>Базовый список, открывается наверх на десктопах</CellButton>
+      </Group>
+    </Panel>
+  </View>
+  </SplitCol>
+</SplitLayout>
 ```

package/src/components/Alert/Readme.md

@@ -22,7 +22,7 @@
 > 4. В VKCOM версии возможно только горизонтальное расположение кнопок.
 > 5.  Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 class Example extends React.Component {
   constructor(props) {
     super(props);
@@ -96,16 +96,20 @@ class Example extends React.Component {
 
   render() {
     return (
-      <View popout={this.state.popout} activePanel="alert">
-        <Panel id="alert">
-          <PanelHeader>Alert</PanelHeader>
-          <Group>
-            <CellButton onClick={this.openAction}>Лишить права</CellButton>
-            <CellButton onClick={this.openDeleteion}>Удалить документ</CellButton>
-            {this.state.actionsLog.map((value, i) => <Div key={i}>{value}</Div>)}
-          </Group>
-        </Panel>
-      </View>
+      <SplitLayout popout={this.state.popout}>
+        <SplitCol>
+        <View activePanel="alert">
+          <Panel id="alert">
+            <PanelHeader>Alert</PanelHeader>
+            <Group>
+              <CellButton onClick={this.openAction}>Лишить права</CellButton>
+              <CellButton onClick={this.openDeleteion}>Удалить документ</CellButton>
+              {this.state.actionsLog.map((value, i) => <Div key={i}>{value}</Div>)}
+            </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     )
   }
 }

package/src/components/Avatar/Avatar.tsx

@@ -106,10 +106,13 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
+export const AVATAR_DEFAULT_SIZE = 48;
+export const AVATAR_DEFAULT_SHADOW = true;
+
 Avatar.defaultProps = {
-  size: 48,
+  size: AVATAR_DEFAULT_SIZE,
   mode: 'default',
-  shadow: true,
+  shadow: AVATAR_DEFAULT_SHADOW,
 };
 
 export default Avatar;

package/src/components/Banner/Banner.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -75,17 +76,15 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: React.ReactNode;
 }
 
-interface BannerTypographyProps extends Pick<BannerProps, 'size'> {
-  Component?: React.ElementType;
-}
+type BannerTypographyProps = Pick<BannerProps, 'size'> & HasComponent;
 
-const BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }: BannerTypographyProps) => {
+const BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {
   return size === 'm'
     ? <Title level="2" weight="medium" {...restProps} />
     : <Headline weight="medium" {...restProps} />;
 };
 
-const BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }: BannerTypographyProps) => {
+const BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {
   return size === 'm'
     ? <Text weight="regular" {...restProps} />
     : <Subhead weight="regular" {...restProps} />;

package/src/components/Button/Button.css

@@ -4,9 +4,9 @@
   box-sizing: border-box;
   text-decoration: none;
   border: none;
-  min-height: 30px;
+  min-height: 28px;
   margin: 0;
-  padding: 1px 16px;
+  padding: 0;
   user-select: none;
   border-radius: 8px;
   max-width: 100%;
@@ -24,8 +24,10 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 100%;
+  min-height: inherit;
+  padding: 1px 16px;
   text-align: center;
+  box-sizing: border-box;
 }
 
 .Button--aln-left .Button__in {
@@ -59,16 +61,13 @@
 }
 
 .Button__content {
-  padding-top: 4px;
-  padding-bottom: 6px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .Button__content--caps {
-  padding-top: 7px;
-  padding-bottom: 7px;
+  transform: translateY(0);
 }
 
 .Button__spinner {
@@ -130,21 +129,6 @@
   color: var(--white);
 }
 
-.Button--sz-m {
-  min-height: 36px;
-}
-
-.Button--sz-m .Button__content {
-  padding-top: 5px;
-  padding-bottom: 7px;
-}
-
-.Button--sz-l {
-  min-height: 44px;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .Button--sz-l .Button__before:not(:last-child) {
   margin-right: 8px;
 }
@@ -153,31 +137,29 @@
   margin-left: 8px;
 }
 
-.Button--sz-l .Button__content {
-  padding-top: 10px;
-  padding-bottom: 12px;
-}
-
 .Button--sz-l .Button__in {
   justify-content: center;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.Button:not(.Button--sz-s) .Button__content {
+  transform: translateY(-1px);
 }
 
 /**
  * iOS
  */
 .Button--ios {
+  min-height: 26px;
   border-radius: 10px;
 }
 
-.Button--ios.Button--sz-l .Button__content {
-  padding-top: 9px;
-  padding-bottom: 11px;
-}
-
 /**
  * VKCOM
  */
 .Button--vkcom {
+  min-height: 26px;
   border-radius: 4px;
 }
 
@@ -190,36 +172,27 @@
 /**
  * sizeY COMPACT
  */
-.Button--sizeY-compact {
-  min-height: 26px;
-}
-
-.Button--sizeY-compact .Button__content {
-  padding-top: 3px;
-  padding-bottom: 5px;
-}
-
-.Button--sizeY-compact .Button__content--caps {
-  padding-top: 5px;
-  padding-bottom: 5px;
+.Button--sz-m {
+  min-height: 32px;
 }
 
-.Button--sizeY-compact.Button--sz-m {
-  min-height: 32px;
+.Button--sz-l {
+  min-height: 36px;
 }
 
-.Button--sizeY-compact.Button--sz-m .Button__content {
-  padding-top: 4px;
-  padding-bottom: 6px;
+/**
+ * sizeY REGULAR
+ */
+.Button--sizeY-regular {
+  min-height: 30px;
 }
 
-.Button--sizeY-compact.Button--sz-l {
+.Button--sizeY-regular.Button--sz-m {
   min-height: 36px;
 }
 
-.Button--sizeY-compact.Button--sz-l .Button__content {
-  padding-top: 6px;
-  padding-bottom: 8px;
+.Button--sizeY-regular.Button--sz-l {
+  min-height: 44px;
 }
 
 /**

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import Title from '../Typography/Title/Title';
 import Text from '../Typography/Text/Text';
 import Subhead from '../Typography/Subhead/Subhead';
 import Caption from '../Typography/Caption/Caption';
-import { HasAlign } from '../../types';
+import { HasAlign, HasComponent } from '../../types';
 import { usePlatform } from '../../hooks/usePlatform';
 import { AdaptivityProps, SizeType, withAdaptivity } from '../../hoc/withAdaptivity';
 import { Platform, IOS, VKCOM } from '../../lib/platform';
@@ -24,12 +24,11 @@ export interface VKUIButtonProps extends HasAlign {
 
 export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}
 
-interface ButtonTypographyProps {
+interface ButtonTypographyProps extends HasComponent {
   size: ButtonProps['size'];
   platform: Platform;
   sizeY: AdaptivityProps['sizeY'];
   children?: ButtonProps['children'];
-  Component?: React.ElementType;
 }
 
 const ButtonTypography: React.FC<ButtonTypographyProps> = (props: ButtonTypographyProps) => {

package/src/components/Card/Readme.md

@@ -4,22 +4,22 @@
       <PanelHeader>Card</PanelHeader>
       <Group>
       <Group mode="plain" header={<Header mode="secondary">Дефолтный стиль</Header>}>
-        <CardGrid>
-          <Card size="l">
+        <CardGrid size="l">
+          <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
       <Group mode="plain" header={<Header mode="secondary">С внутренней обводкой</Header>}>
-        <CardGrid>
-          <Card size="l" mode="outline">
+        <CardGrid size="l">
+          <Card mode="outline">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
       <Group mode="plain" header={<Header mode="secondary">С внешней тенью</Header>}>
-        <CardGrid>
-          <Card size="l" mode="shadow">
+        <CardGrid size="l">
+          <Card mode="shadow">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>

package/src/components/CardScroll/CardScroll.tsx

@@ -46,7 +46,10 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 
   function getScrollToRight(offset: number): number {
     const containerWidth = refContainer.current.offsetWidth;
-    const slide = Array.from(refContainer.current.children).find((el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth) as HTMLElement;
+    const slide = Array.prototype.find.call(
+      refContainer.current.children,
+      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,
+    ) as HTMLElement;
 
     if (!slide) {
       return offset;

package/src/components/Cell/Cell.css

@@ -1,93 +1,56 @@
-.Cell {
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.FormItem .Cell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
 .List--dragging .Cell:not(.Cell--dragging) {
   transition: transform .3s ease;
+  pointer-events: none;
 }
 
-.List--dragging .Cell--dragging,
 .Cell--dragging {
   background-color: var(--background_content);
   box-shadow: 0 0 5px rgba(0, 0, 0, .25);
   z-index: 3;
 }
 
-.Cell__dragger {
-  position: relative;
-}
-
-.Cell .Cell__dragger .Icon {
-  color: var(--icon_secondary);
-}
-
-.Cell__checkbox {
-  display: none;
+.Cell--selectable.Cell--disabled {
+  opacity: .6;
 }
 
-.Cell--selectable .Cell__marker {
+.Cell__checkbox,
+.Cell__dragger {
   position: relative;
   flex-shrink: 0;
-  width: 24px;
-  height: 24px;
   margin-right: 16px;
-  padding: 0;
-  color: var(--icon_tertiary);
 }
 
-.Cell--selectable .Cell__marker-in--checked {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  color: var(--accent);
-}
-
-.Cell--selectable.Cell--disabled {
-  opacity: .6;
+.Cell__dragger {
+  z-index: 2;
 }
 
-.Cell--selectable .Cell__checkbox:checked ~ .Cell__marker .Cell__marker-in--checked {
-  visibility: initial;
+.Cell__content {
+  max-width: 100%;
+  min-width: 0;
 }
 
-.Cell--removable .SimpleCell {
-  max-width: 100%;
+.Cell--removable .Cell__content {
   flex-grow: 1;
-  min-width: 0;
-  padding-right: 2px;
-  flex-shrink: initial;
-  overflow: hidden;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 /**
  * iOS
  */
-.Cell--ios .Cell__in {
-  transition: transform .6s var(--ios-easing);
+.Cell--ios .Cell__dragger {
+  margin-right: 0;
+  margin-left: 12px;
 }
 
-.Cell--ios.Cell--selectable .Cell__marker {
+.Cell--ios .Cell__checkbox {
   margin-right: 12px;
 }
 
-.Cell--ios.Cell--removable .SimpleCell {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 /**
- * ANDROID & VKCOM
+ * CMP:
+ * FormItem
  */
-.Cell--android .Cell__dragger,
-.Cell--vkcom .Cell__dragger {
-  padding-right: 16px;
+.FormItem > .Cell {
+  margin: 0 calc(-1 * var(--formitem_padding));
 }