@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/InfoRow/InfoRow.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
 import "./InfoRow.css";
 
@@ -10,28 +8,20 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
   header: React.ReactNode;
 }
 
-const InfoRow: React.FunctionComponent<InfoRowProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/InfoRow
+ */
+export const InfoRow: React.FunctionComponent<InfoRowProps> = ({
   header,
   children,
   ...restProps
-}: InfoRowProps) => {
-  const platform = usePlatform();
-
-  return (
-    <Headline
-      {...restProps}
-      vkuiClass={getClassName("InfoRow", platform)}
-      weight="regular"
-    >
-      {hasReactNode(header) && (
-        <Subhead Component="span" vkuiClass="InfoRow__header">
-          {header}
-        </Subhead>
-      )}
-      {children}
-    </Headline>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default InfoRow;
+}: InfoRowProps) => (
+  <Headline {...restProps} vkuiClass="InfoRow" weight="3">
+    {hasReactNode(header) && (
+      <Subhead Component="span" vkuiClass="InfoRow__header">
+        {header}
+      </Subhead>
+    )}
+    {children}
+  </Headline>
+);

package/src/components/InitialsAvatar/InitialsAvatar.css

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

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
 import { classNames } from "../../lib/classNames";
-import Avatar, { AVATAR_DEFAULT_SIZE, AvatarProps } from "../Avatar/Avatar";
+import { AVATAR_DEFAULT_SIZE, Avatar, AvatarProps } from "../Avatar/Avatar";
 import "./InitialsAvatar.css";
 
 /**
@@ -62,7 +62,10 @@ function getInitialsFontSize(avatarSize: number) {
   return calculatedFontSize + evenFix;
 }
 
-export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/InitialsAvatar
+ */
+export const InitialsAvatar = ({
   size = AVATAR_DEFAULT_SIZE,
   children,
   gradientColor,

package/src/components/Input/Input.tsx

@@ -47,6 +47,9 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Input
+ */
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });

package/src/components/Link/Link.tsx

@@ -1,12 +1,18 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import "./Link.css";
 
 export type LinkProps = TappableProps;
 
-const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Link
+ */
+export const Link: React.FC<LinkProps> = ({
+  children,
+  ...restProps
+}: LinkProps) => {
   const platform = usePlatform();
 
   return (
@@ -22,6 +28,3 @@ const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Link;

package/src/components/List/List.tsx

@@ -5,10 +5,12 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
-const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
+/**
+ * @see https://vkcom.github.io/VKUI/#/List
+ */
+export const List: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ children, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => {
   const platform = usePlatform();
   const [isDragging, toggleDrag] = React.useState(false);
 
@@ -27,6 +29,3 @@ const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default List;

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
-import Text from "../Typography/Text/Text";
-import Tappable from "../../components/Tappable/Tappable";
+import { Text } from "../Typography/Text/Text";
+import { Tappable } from "../../components/Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
 
@@ -49,6 +49,9 @@ export interface MiniInfoCellProps
   textLevel?: "primary" | "secondary";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
+ */
 export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
   props: MiniInfoCellProps
 ) => {
@@ -77,7 +80,7 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
       <span vkuiClass="MiniInfoCell__icon">{before}</span>
       <Text
         vkuiClass="MiniInfoCell__content"
-        weight={mode === "more" ? "medium" : "regular"}
+        weight={mode === "more" ? "2" : undefined}
       >
         {children}
       </Text>

package/src/components/MiniInfoCell/Readme.md

@@ -16,14 +16,14 @@ function MiniInfoCellExample() {
       <ModalPage
         header={
           <ModalPageHeader
-            left={
+            before={
               (platform === ANDROID || platform === VKCOM) && (
                 <PanelHeaderButton onClick={closeModal}>
                   <Icon24Cancel />
                 </PanelHeaderButton>
               )
             }
-            right={
+            after={
               platform === IOS && (
                 <PanelHeaderButton onClick={closeModal}>
                   <Icon24Dismiss />

package/src/components/ModalCard/ModalCard.tsx

@@ -3,12 +3,9 @@ import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
 import { HasPlatform } from "../../types";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
-import ModalRootContext, {
+  ModalRootContext,
   useModalRegistry,
 } from "../ModalRoot/ModalRootContext";
 import { ModalType } from "../ModalRoot/types";
@@ -22,6 +19,7 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalCard.css";
 
 export interface ModalCardProps
@@ -32,35 +30,36 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
-const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
-  props
-) => {
-  const {
-    icon,
-    header,
-    subheader,
-    children,
-    actions,
-    actionsLayout,
-    onClose,
-    platform,
-    viewWidth,
-    viewHeight,
-    hasMouse,
-    nav,
-    ...restProps
-  } = props;
-
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+const ModalCardComponent: React.FC<
+  ModalCardProps & AdaptivityContextInterface
+> = ({
+  icon,
+  header,
+  subheader,
+  children,
+  actions,
+  actionsLayout = "horizontal",
+  onClose,
+  platform,
+  viewWidth,
+  viewHeight,
+  hasMouse,
+  nav,
+  id,
+  ...restProps
+}) => {
+  const isDesktop = useAdaptivityIsDesktop();
 
   const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.CARD);
+  const { refs } = useModalRegistry(
+    getNavId({ nav, id }, warn),
+    ModalType.CARD
+  );
 
   return (
     <div
       {...restProps}
+      id={id}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalCard", platform), {
         "ModalCard--desktop": isDesktop,
@@ -82,13 +81,13 @@ const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   );
 };
 
-ModalCard.defaultProps = {
-  actionsLayout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(withPlatform(ModalCard), {
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCard
+ */
+export const ModalCard = withAdaptivity(withPlatform(ModalCardComponent), {
   viewWidth: true,
   viewHeight: true,
   hasMouse: true,
 });
+
+ModalCard.displayName = "ModalCard";

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,22 +1,19 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import {
-  ViewHeight,
-  ViewWidth,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
+import { ViewWidth, withAdaptivity } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, IOS } from "../../lib/platform";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { ANDROID, IOS, Platform } from "../../lib/platform";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
 import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalCardBase.css";
 
 export interface ModalCardBaseProps
@@ -58,6 +55,9 @@ export interface ModalCardBaseProps
   dismissLabel?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCardBase
+ */
 export const ModalCardBase = withAdaptivity<
   ModalCardBaseProps & AdaptivityContextInterface
 >(
@@ -77,12 +77,11 @@ export const ModalCardBase = withAdaptivity<
     ...restProps
   }) => {
     const platform = usePlatform();
-    const isDesktop =
-      viewWidth >= ViewWidth.SMALL_TABLET &&
-      (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+    const isDesktop = useAdaptivityIsDesktop();
     const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
-    const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
+    const canShowCloseBtn =
+      viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
     const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;
 
     return (
@@ -114,9 +113,7 @@ export const ModalCardBase = withAdaptivity<
             </Title>
           )}
           {hasReactNode(subheader) && (
-            <Headline weight="regular" vkuiClass="ModalCardBase__subheader">
-              {subheader}
-            </Headline>
+            <Subhead vkuiClass="ModalCardBase__subheader">{subheader}</Subhead>
           )}
 
           {children}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,21 +1,26 @@
 import * as React from "react";
 import { Icon20Cancel } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./ModalDismissButton.css";
 
 export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 
-const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
-  props: ModalDismissButtonProps
-) => {
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
+ */
+export const ModalDismissButton: React.FC<ModalDismissButtonProps> = ({
+  "aria-label": ariaLabel = "Закрыть",
+  ...restProps
+}: ModalDismissButtonProps) => {
   const platform = usePlatform();
 
   return (
     <Tappable
       vkuiClass={getClassName("ModalDismissButton", platform)}
-      {...props}
+      {...restProps}
+      aria-label={ariaLabel}
       activeMode="ModalDismissButton--active"
       hoverMode="ModalDismissButton--hover"
     >
@@ -23,10 +28,3 @@ const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
     </Tappable>
   );
 };
-
-ModalDismissButton.defaultProps = {
-  "aria-label": "Закрыть",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalDismissButton;

package/src/components/ModalPage/ModalPage.tsx

@@ -7,20 +7,18 @@ import {
 } from "../ModalRoot/ModalRootContext";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useOrientationChange } from "../../hooks/useOrientationChange";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { multiRef } from "../../lib/utils";
 import { ModalType } from "../ModalRoot/types";
 import { getNavId, NavIdProps } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
+import { Platform } from "../../lib/platform";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalPage.css";
 
 export interface ModalPageProps
@@ -59,28 +57,28 @@ export interface ModalPageProps
 }
 
 const warn = warnOnce("ModalPage");
-const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
-  props
-) => {
-  const { updateModalHeight } = React.useContext(ModalRootContext);
 
-  const {
-    children,
-    header,
-    viewWidth,
-    viewHeight,
-    sizeX,
-    hasMouse,
-    onOpen,
-    onOpened,
-    onClose,
-    onClosed,
-    settlingHeight,
-    dynamicContentHeight,
-    getModalContentRef,
-    nav,
-    ...restProps
-  } = props;
+const ModalPageComponent: React.FC<
+  ModalPageProps & AdaptivityContextInterface
+> = ({
+  children,
+  header,
+  viewWidth,
+  viewHeight,
+  sizeX,
+  hasMouse,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+  settlingHeight, // 75
+  dynamicContentHeight,
+  getModalContentRef,
+  nav,
+  id,
+  ...restProps
+}) => {
+  const { updateModalHeight } = React.useContext(ModalRootContext);
 
   const platform = usePlatform();
   const orientation = useOrientationChange();
@@ -91,17 +89,20 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     updateModalHeight,
   ]);
 
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
+  const isDesktop = useAdaptivityIsDesktop();
+  const canShowCloseBtn =
+    viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
 
   const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);
+  const { refs } = useModalRegistry(
+    getNavId({ nav, id }, warn),
+    ModalType.PAGE
+  );
 
   return (
     <div
       {...restProps}
+      id={id}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ModalPage", platform),
@@ -137,14 +138,14 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   );
 };
 
-ModalPage.defaultProps = {
-  settlingHeight: 75,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ModalPage, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPage
+ */
+export const ModalPage = withAdaptivity(ModalPageComponent, {
   viewWidth: true,
   viewHeight: true,
   sizeX: true,
   hasMouse: true,
 });
+
+ModalPage.displayName = "ModalPage";

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { HasRef } from "../../types";
 import { VKCOM } from "../../lib/platform";
-import PanelHeader, { PanelHeaderProps } from "../PanelHeader/PanelHeader";
-import Separator from "../Separator/Separator";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { Separator } from "../Separator/Separator";
+import { PanelHeader, PanelHeaderProps } from "../PanelHeader/PanelHeader";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalPageHeader.css";
 
 export interface ModalPageHeaderProps
@@ -15,25 +14,25 @@ export interface ModalPageHeaderProps
     Omit<PanelHeaderProps, "fixed" | "shadow">,
     HasRef<HTMLDivElement> {}
 
-const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
+ */
+export const ModalPageHeader = ({
   children,
-  separator,
+  separator = true,
   getRef,
   ...restProps
 }: ModalPageHeaderProps) => {
   const platform = usePlatform();
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const hasSeparator = separator && platform === VKCOM;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   return (
     <div
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
-        "ModalPageHeader--desktop": isDesktop,
-      })}
+      vkuiClass={classNames(
+        getClassName("ModalPageHeader", platform),
+        isDesktop && "ModalPageHeader--desktop"
+      )}
       ref={getRef}
     >
       <PanelHeader
@@ -49,10 +48,3 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
     </div>
   );
 };
-
-ModalPageHeader.defaultProps = {
-  separator: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalPageHeader;