@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,31 +1,48 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable from '../Tappable/Tappable';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode, noop } from '../../lib/utils';
-import Subhead from '../Typography/Subhead/Subhead';
-import Title from '../Typography/Title/Title';
-import Text from '../Typography/Text/Text';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { Icon16Done, Icon24Done } from '@vkontakte/icons';
-import { ActionSheetContext } from '../ActionSheet/ActionSheetContext';
-import Caption from '../Typography/Caption/Caption';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import './ActionSheetItem.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable from "../Tappable/Tappable";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode, noop } from "../../lib/utils";
+import Subhead from "../Typography/Subhead/Subhead";
+import Title from "../Typography/Title/Title";
+import Text from "../Typography/Text/Text";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { Icon16Done, Icon24Done } from "@vkontakte/icons";
+import {
+  ActionSheetContext,
+  ActionSheetContextType,
+} from "../ActionSheet/ActionSheetContext";
+import Caption from "../Typography/Caption/Caption";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import "./ActionSheetItem.css";
 
-export interface ActionSheetItemProps extends
-  React.HTMLAttributes<HTMLElement>,
-  React.AnchorHTMLAttributes<HTMLElement>,
-  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'>,
-  AdaptivityProps {
-  mode?: 'default' | 'destructive' | 'cancel';
+export interface ActionSheetItemProps
+  extends React.HTMLAttributes<HTMLElement>,
+    React.AnchorHTMLAttributes<HTMLElement>,
+    Pick<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "name" | "checked" | "value"
+    >,
+    AdaptivityProps {
+  mode?: "default" | "destructive" | "cancel";
   before?: React.ReactNode;
   meta?: React.ReactNode;
   subtitle?: React.ReactNode;
   autoclose?: boolean;
   selectable?: boolean;
   disabled?: boolean;
+  /**
+   * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.
+   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
+   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
@@ -43,15 +60,17 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   onChange,
   onClick,
   sizeY,
+  onImmediateClick,
   ...restProps
 }: ActionSheetItemProps) => {
   const platform = usePlatform();
-  const { onItemClick = () => noop, isDesktop } = React.useContext(ActionSheetContext);
+  const { onItemClick = () => noop, isDesktop } =
+    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);
 
-  let Component: React.ElementType = restProps.href ? 'a' : 'div';
+  let Component: React.ElementType = restProps.href ? "a" : "div";
 
   if (selectable) {
-    Component = 'label';
+    Component = "label";
   }
 
   const isCompact = hasReactNode(subtitle) || hasReactNode(meta) || selectable;
@@ -59,70 +78,88 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   return (
     <Tappable
       {...restProps}
-      onClick={selectable ? onClick : onItemClick(onClick, autoclose)}
-      activeMode="ActionSheetItem--active"
-      vkuiClass={
-        classNames(
-          getClassName('ActionSheetItem', platform),
-          `ActionSheetItem--${mode}`,
-          `ActionSheetItem--sizeY-${sizeY}`,
-          {
-            'ActionSheetItem--compact': isCompact,
-            'ActionSheetItem--desktop': isDesktop,
-            'ActionSheetItem--withSubtitle': hasReactNode(subtitle),
-          },
-        )
+      onClick={
+        selectable
+          ? onClick
+          : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
       }
+      activeMode="ActionSheetItem--active"
+      vkuiClass={classNames(
+        getClassName("ActionSheetItem", platform),
+        `ActionSheetItem--${mode}`,
+        `ActionSheetItem--sizeY-${sizeY}`,
+        {
+          "ActionSheetItem--compact": isCompact,
+          "ActionSheetItem--desktop": isDesktop,
+          "ActionSheetItem--withSubtitle": hasReactNode(subtitle),
+        }
+      )}
       Component={Component}
     >
-      {hasReactNode(before) && <div vkuiClass="ActionSheetItem__before">{before}</div>}
+      {hasReactNode(before) && (
+        <div vkuiClass="ActionSheetItem__before">{before}</div>
+      )}
       <div vkuiClass="ActionSheetItem__container">
         <div vkuiClass="ActionSheetItem__content">
-          {sizeY === SizeType.COMPACT ?
+          {sizeY === SizeType.COMPACT ? (
             <React.Fragment>
               <Text
-                weight={mode === 'cancel' ? 'medium' : 'regular'}
+                weight={mode === "cancel" ? "medium" : "regular"}
                 vkuiClass="ActionSheetItem__children"
               >
                 {children}
               </Text>
-              {hasReactNode(meta) &&
-                <Text
-                  weight="regular"
-                  vkuiClass="ActionSheetItem__meta"
-                >
+              {hasReactNode(meta) && (
+                <Text weight="regular" vkuiClass="ActionSheetItem__meta">
                   {meta}
                 </Text>
-              }
+              )}
             </React.Fragment>
-            :
+          ) : (
             <React.Fragment>
               <Title
-                weight={mode === 'cancel' ? 'medium' : 'regular'}
-                level={isCompact || hasReactNode(before) || platform === ANDROID ? '3' : '2'}
+                weight={mode === "cancel" ? "medium" : "regular"}
+                level={
+                  isCompact || hasReactNode(before) || platform === ANDROID
+                    ? "3"
+                    : "2"
+                }
                 vkuiClass="ActionSheetItem__children"
               >
                 {children}
               </Title>
-              {hasReactNode(meta) &&
+              {hasReactNode(meta) && (
                 <Title
                   weight="regular"
-                  level={isCompact || hasReactNode(before) || platform === ANDROID ? '3' : '2'}
+                  level={
+                    isCompact || hasReactNode(before) || platform === ANDROID
+                      ? "3"
+                      : "2"
+                  }
                   vkuiClass="ActionSheetItem__meta"
                 >
                   {meta}
                 </Title>
-              }
+              )}
             </React.Fragment>
-          }
+          )}
         </div>
-        {hasReactNode(subtitle) && (sizeY === SizeType.COMPACT ?
-          <Caption weight="regular" vkuiClass="ActionSheetItem__subtitle" level="1">{subtitle}</Caption>
-          :
-          <Subhead weight="regular" vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
-        )}
+        {hasReactNode(subtitle) &&
+          (sizeY === SizeType.COMPACT ? (
+            <Caption
+              weight="regular"
+              vkuiClass="ActionSheetItem__subtitle"
+              level="1"
+            >
+              {subtitle}
+            </Caption>
+          ) : (
+            <Subhead weight="regular" vkuiClass="ActionSheetItem__subtitle">
+              {subtitle}
+            </Subhead>
+          ))}
       </div>
-      {selectable &&
+      {selectable && (
         <div vkuiClass="ActionSheetItem__after">
           <input
             type="radio"
@@ -130,7 +167,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             name={name}
             value={value}
             onChange={onChange}
-            onClick={onItemClick(noop, autoclose)}
+            onClick={onItemClick(noop, noop, Boolean(autoclose))}
             defaultChecked={defaultChecked}
             checked={checked}
             disabled={restProps.disabled}
@@ -139,13 +176,14 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             {platform === VKCOM ? <Icon24Done /> : <Icon16Done />}
           </div>
         </div>
-      }
+      )}
     </Tappable>
   );
 };
 
 ActionSheetItem.defaultProps = {
-  mode: 'default',
+  mode: "default",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(ActionSheetItem, { sizeY: true });

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
+import { hasHover, hasMouse } from "@vkontakte/vkjs";
 
 export enum SizeType {
-  COMPACT = 'compact',
-  REGULAR = 'regular',
+  COMPACT = "compact",
+  REGULAR = "regular",
 }
 
 export enum ViewWidth {
@@ -16,7 +17,7 @@ export enum ViewWidth {
 export enum ViewHeight {
   EXTRA_SMALL = 1,
   SMALL,
-  MEDIUM
+  MEDIUM,
 }
 
 export interface SizeProps {
@@ -37,15 +38,25 @@ export interface AdaptivityProps extends SizeProps {
    * @ignore
    */
   hasMouse?: boolean;
+  /**
+   * @ignore
+   */
+  deviceHasHover?: boolean;
 }
 
 export interface AdaptivityContextInterface extends SizeProps {
-  viewWidth?: ViewWidth;
-  viewHeight?: ViewHeight;
-  hasMouse?: boolean;
+  viewWidth: ViewWidth;
+  viewHeight: ViewHeight;
+  hasMouse: boolean;
+  deviceHasHover: boolean;
 }
 
-export const AdaptivityContext = React.createContext<AdaptivityContextInterface>({
-  sizeX: SizeType.COMPACT,
-  sizeY: SizeType.REGULAR,
-});
+export const AdaptivityContext =
+  React.createContext<AdaptivityContextInterface>({
+    sizeX: SizeType.COMPACT,
+    sizeY: SizeType.REGULAR,
+    hasMouse,
+    deviceHasHover: hasHover,
+    viewWidth: 0,
+    viewHeight: 0,
+  });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
-import { hasMouse as _hasMouse } from '@vkontakte/vkjs';
-import { AdaptivityContext, AdaptivityContextInterface, SizeType, ViewHeight, ViewWidth } from './AdaptivityContext';
-import { useDOM } from '../../lib/dom';
-
-export interface AdaptivityProviderProps extends AdaptivityContextInterface {
-  children?: React.ReactNode;
-}
+import * as React from "react";
+import { hasMouse as _hasMouse, hasHover as _hasHover } from "@vkontakte/vkjs";
+import {
+  AdaptivityContext,
+  AdaptivityProps,
+  SizeType,
+  ViewHeight,
+  ViewWidth,
+} from "./AdaptivityContext";
+import { useDOM } from "../../lib/dom";
 
 export const DESKTOP_SIZE = 1280;
 export const TABLET_SIZE = 1024;
@@ -15,8 +17,10 @@ export const MOBILE_SIZE = 320;
 export const MOBILE_LANDSCAPE_HEIGHT = 414;
 export const MEDIUM_HEIGHT = 720;
 
-export default function AdaptivityProvider(props: AdaptivityProviderProps) {
-  const adaptivityRef = React.useRef<AdaptivityContextInterface>(null);
+const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
+  const adaptivityRef = React.useRef<ReturnType<
+    typeof calculateAdaptivity
+  > | null>(null);
   const [, updateAdaptivity] = React.useState({});
 
   const { window } = useDOM();
@@ -25,21 +29,30 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
     adaptivityRef.current = calculateAdaptivity(
       window ? window.innerWidth : 0,
       window ? window.innerHeight : 0,
-      props,
+      props
     );
   }
 
   React.useEffect(() => {
     function onResize() {
-      const calculated = calculateAdaptivity(window.innerWidth, window.innerHeight, props);
-      const { viewWidth, viewHeight, sizeX, sizeY, hasMouse } = adaptivityRef.current;
+      if (adaptivityRef.current === null) {
+        return;
+      }
+      const calculated = calculateAdaptivity(
+        window!.innerWidth,
+        window!.innerHeight,
+        props
+      );
+      const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } =
+        adaptivityRef.current;
 
       if (
         viewWidth !== calculated.viewWidth ||
         viewHeight !== calculated.viewHeight ||
         sizeX !== calculated.sizeX ||
         sizeY !== calculated.sizeY ||
-        hasMouse !== calculated.hasMouse
+        hasMouse !== calculated.hasMouse ||
+        deviceHasHover !== calculated.deviceHasHover
       ) {
         adaptivityRef.current = calculated;
         updateAdaptivity({});
@@ -47,26 +60,40 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
     }
 
     onResize();
-    window.addEventListener('resize', onResize, false);
+    window!.addEventListener("resize", onResize, false);
 
     return () => {
-      window.removeEventListener('resize', onResize, false);
+      window!.removeEventListener("resize", onResize, false);
     };
-  }, [props.viewWidth, props.viewHeight, props.sizeX, props.sizeY, props.hasMouse]);
+  }, [
+    props.viewWidth,
+    props.viewHeight,
+    props.sizeX,
+    props.sizeY,
+    props.hasMouse,
+    props.deviceHasHover,
+    window,
+    props,
+  ]);
 
   return (
     <AdaptivityContext.Provider value={adaptivityRef.current}>
       {props.children}
     </AdaptivityContext.Provider>
   );
-}
+};
 
-function calculateAdaptivity(windowWidth: number, windowHeight: number, props: AdaptivityProviderProps) {
+function calculateAdaptivity(
+  windowWidth: number,
+  windowHeight: number,
+  props: AdaptivityProps
+) {
   let viewWidth = ViewWidth.SMALL_MOBILE;
   let viewHeight = ViewHeight.SMALL;
   let sizeY = SizeType.REGULAR;
   let sizeX = SizeType.REGULAR;
-  let hasMouse = typeof props.hasMouse === 'boolean' ? props.hasMouse : _hasMouse;
+  let hasMouse = props.hasMouse ?? _hasMouse;
+  let deviceHasHover = props.deviceHasHover ?? _hasHover;
 
   if (windowWidth >= DESKTOP_SIZE) {
     viewWidth = ViewWidth.DESKTOP;
@@ -95,12 +122,18 @@ function calculateAdaptivity(windowWidth: number, windowHeight: number, props: A
     sizeX = SizeType.COMPACT;
   }
 
-  if (viewWidth >= ViewWidth.SMALL_TABLET && hasMouse || viewHeight <= ViewHeight.EXTRA_SMALL) {
+  if (
+    (viewWidth >= ViewWidth.SMALL_TABLET && hasMouse) ||
+    viewHeight <= ViewHeight.EXTRA_SMALL
+  ) {
     sizeY = SizeType.COMPACT;
   }
 
   props.sizeX && (sizeX = props.sizeX);
   props.sizeY && (sizeY = props.sizeY);
 
-  return { viewWidth, viewHeight, sizeX, sizeY, hasMouse };
+  return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }
+
+// eslint-disable-next-line import/no-default-export
+export default AdaptivityProvider;

package/src/components/AdaptivityProvider/Readme.md

@@ -1,3 +1,3 @@
-Компонент, прокидывающий вниз данные об [адаптивности](#!/Adaptivity). Изначально, рассчитывает `sizeX`, `sizeY`, 
-`viewWidth` и `viewHeight` самостоятельно, основываясь на `window`. Все эти 4 сущности можно переопределить, передав их в 
-качестве свойств. 
+Компонент, прокидывающий вниз данные об [адаптивности](#!/Adaptivity). Все параметры, которые можно прокинуть через
+props, компонент по умолчанию вычисляет самостоятельно. Передавать их с помощью props стоит в тех случаях, когда
+вы точно уверены, что ваш сайт, например, будет открываться только на мобильных устройствах.

package/src/components/Alert/Alert.css

@@ -13,7 +13,7 @@
   height: 100%;
   background-color: var(--modal_card_background);
   z-index: 1;
-  content: '';
+  content: "";
   border-radius: inherit;
 }
 
@@ -41,12 +41,12 @@
   width: 270px;
   border-radius: 12px;
   overflow: hidden;
-  animation: vkui-animation-ios-alert-intro .3s var(--ios-easing);
+  animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing);
 }
 
 .Alert--ios.Alert--closing {
   opacity: 0;
-  transition: opacity .3s var(--ios-easing);
+  transition: opacity 0.3s var(--ios-easing);
 }
 
 .Alert--ios .Alert__content {
@@ -59,7 +59,7 @@
 }
 
 .Alert--ios .Alert__content::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   height: 1px;
@@ -95,7 +95,7 @@
 }
 
 .Alert--ios .Alert__action::after {
-  content: '';
+  content: "";
   position: absolute;
   background: var(--action_sheet_separator);
 }
@@ -145,22 +145,22 @@
 @media (min-resolution: 2dppx) {
   .Alert--ios .Alert__content::after,
   .Alert--ios.Alert--v .Alert__action::after {
-    transform: scaleY(.5);
+    transform: scaleY(0.5);
   }
 
   .Alert--ios.Alert--h .Alert__action::after {
-    transform: scaleX(.5);
+    transform: scaleX(0.5);
   }
 }
 
 @media (min-resolution: 3dppx) {
   .Alert--ios .Alert__content::after,
   .Alert--ios.Alert--v .Alert__action::after {
-    transform: scaleY(.33);
+    transform: scaleY(0.33);
   }
 
   .Alert--ios.Alert--h .Alert__action::after {
-    transform: scaleX(.33);
+    transform: scaleX(0.33);
   }
 }
 
@@ -178,9 +178,9 @@
 .Alert--android {
   min-width: 280px;
   margin: auto 24px;
-  box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .3), 0 0 35px 0 rgba(0, 0, 0, .22);
+  box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.3), 0 0 35px 0 rgba(0, 0, 0, 0.22);
   border-radius: 12px;
-  animation: vkui-animation-android-alert-intro .2s ease;
+  animation: vkui-animation-android-alert-intro 0.2s ease;
 }
 
 .Alert--desktop.Alert--android {
@@ -189,9 +189,10 @@
 
 .Alert--android.Alert--closing,
 .Alert--vkcom.Alert--closing {
-  transform: scale(.95);
+  transform: scale(0.95);
   opacity: 0;
-  transition: transform .2s var(--android-easing), opacity .2s var(--android-easing);
+  transition: transform 0.2s var(--android-easing),
+    opacity 0.2s var(--android-easing);
 }
 
 .Alert--android .Alert__content {
@@ -245,11 +246,11 @@
  */
 
 .Alert--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 0 96px rgba(0, 0, 0, .16);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   width: 400px;
   margin: auto 24px;
-  animation: vkui-animation-android-alert-intro .2s ease;
+  animation: vkui-animation-android-alert-intro 0.2s ease;
 }
 
 .Alert--vkcom .Alert__content {
@@ -286,7 +287,7 @@
 @keyframes vkui-animation-android-alert-intro {
   from {
     opacity: 0;
-    transform: scale(.95);
+    transform: scale(0.95);
   }
 
   to {