@vkontakte/vkui 4.19.0 → 4.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.19.0",
+  "version": "4.22.0",
   "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) {
@@ -67,7 +67,9 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
-  const fallbackTransitionFinish = useTimeout(afterClose, platform === IOS ? 300 : 200);
+  const timeout = platform === IOS ? 300 : 200;
+
+  const fallbackTransitionFinish = useTimeout(afterClose, timeout);
   React.useEffect(() => {
     if (closing) {
       if (isDesktop) {
@@ -84,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);
@@ -109,9 +111,9 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
       <ActionSheetContext.Provider value={contextValue}>
         <DropdownComponent
           closing={closing}
-          onClose={onClose}
-          onTransitionEnd={closing && !isDesktop ? afterClose : null}
+          timeout={timeout}
           {...restProps as Omit<SharedDropdownProps, 'closing'>}
+          onClose={onClose}
         >
           {(hasReactNode(header) || hasReactNode(text)) &&
             <header vkuiClass="ActionSheet__header">

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -3,6 +3,7 @@ import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SharedDropdownProps } from './types';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import './ActionSheet.css';
 
 const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
@@ -19,7 +20,7 @@ export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
   const baseClaseName = getClassName('ActionSheet', platform);
 
   return (
-    <div
+    <FocusTrap
       {...restProps}
       onClick={stopPropagation}
       vkuiClass={classNames(baseClaseName, {
@@ -27,6 +28,6 @@ export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
       })}
     >
       {children}
-    </div>
+    </FocusTrap>
   );
 };

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -8,6 +8,7 @@ import { warnOnce } from '../../lib/warnOnce';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { useEventListener } from '../../hooks/useEventListener';
 import { SharedDropdownProps } from './types';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import './ActionSheet.css';
 
 const warn = warnOnce('ActionSheet');
@@ -53,7 +54,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
     });
   }, [toggleRef]);
 
-  const bodyClickListener = useEventListener('click', (e) => {
+  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {
     const dropdownElement = elementRef?.current;
     if (dropdownElement && !dropdownElement.contains(e.target as Node)) {
       onClose();
@@ -66,17 +67,20 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
     });
   }, []);
 
+  const onClick = React.useCallback((e) => e.stopPropagation(), []);
+
   return (
-    <div
+    <FocusTrap
+      onClose={onClose}
       {...restProps}
-      ref={elementRef}
-      onClick={(e) => e.stopPropagation()}
+      getRootRef={elementRef}
+      onClick={onClick}
       style={dropdownStyles}
       vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', {
         'ActionSheet--closing': closing,
       }, `ActionSheet--sizeY-${sizeY}`)}
     >
       {children}
-    </div>
+    </FocusTrap>
   );
 };

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/ActionSheet/types.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { FocusTrapProps } from '../FocusTrap/FocusTrap';
 
 export type PopupDirection = 'top' | 'bottom' | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');
 export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
 
-export interface SharedDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SharedDropdownProps extends React.AllHTMLAttributes<HTMLElement>, FocusTrapProps {
   closing: boolean;
-  onClose: VoidFunction;
   toggleRef: ToggleRef;
   popupDirection: PopupDirection;
 }

package/src/components/Alert/Alert.tsx

@@ -14,6 +14,7 @@ import Headline from '../Typography/Headline/Headline';
 import Title from '../Typography/Title/Title';
 import Caption from '../Typography/Caption/Caption';
 import ModalDismissButton from '../ModalDismissButton/ModalDismissButton';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import './Alert.css';
 
 export type AlertActionInterface = AlertProps['actions'][0] & React.AnchorHTMLAttributes<HTMLElement>;
@@ -59,6 +60,10 @@ class Alert extends React.Component<AlertProps, AlertState> {
     actions: [],
   };
 
+  private get timeout(): number {
+    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300;
+  }
+
   onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {
     const { action, autoclose } = item;
 
@@ -94,7 +99,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
       this.element.current.addEventListener(transitionEvent.name, eventHandler);
     } else {
       clearTimeout(this.transitionFinishTimeout);
-      this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300);
+      this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.timeout);
     }
   }
 
@@ -180,10 +185,12 @@ class Alert extends React.Component<AlertProps, AlertState> {
         style={style}
         onClick={this.onClose}
       >
-        <div
+        <FocusTrap
           {...restProps}
-          ref={this.element}
+          getRootRef={this.element}
           onClick={this.stopPropagation}
+          onClose={this.onClose}
+          timeout={this.timeout}
           vkuiClass={classNames(getClassName('Alert', platform), {
             'Alert--v': resolvedActionsLayout === 'vertical',
             'Alert--h': resolvedActionsLayout === 'horizontal',
@@ -200,7 +207,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
           <footer vkuiClass="Alert__actions">
             {actions.map(this.renderAction)}
           </footer>
-        </div>
+        </FocusTrap>
       </PopoutWrapper>
     );
   }

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/AppRoot/AppRoot.tsx

@@ -135,6 +135,7 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
       appRoot: rootRef,
       portalRoot: portalRoot,
       embedded: mode === 'embedded',
+      keyboardInput: isKeyboardInputActive,
     }}>
       <ScrollContext.Provider value={scrollController}>
         <IconSettingsProvider classPrefix="vkui" globalClasses={!noLegacyClasses}>

package/src/components/AppRoot/AppRootContext.ts

@@ -4,6 +4,7 @@ export interface AppRootContextInterface {
   appRoot?: React.RefObject<HTMLDivElement>;
   portalRoot?: HTMLDivElement;
   embedded?: boolean;
+  keyboardInput?: boolean;
 }
 
 export const AppRootContext = React.createContext<AppRootContextInterface>({

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>