@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/Header/Header.tsx

@@ -5,10 +5,10 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { HasComponent, HasPlatform, HasRootRef } from "../../types";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { Caption } from "../Typography/Caption/Caption";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import "./Header.css";
 
@@ -50,7 +50,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   if (platform === Platform.VKCOM) {
     switch (mode) {
       case "primary":
-        return <Headline weight="regular" {...restProps} />;
+        return <Headline weight="3" {...restProps} />;
       case "secondary":
       case "tertiary":
         return <Caption {...restProps} />;
@@ -60,7 +60,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   switch (mode) {
     case "primary":
     case "tertiary":
-      return <Headline weight="medium" {...restProps} />;
+      return <Headline weight="2" {...restProps} />;
     case "secondary":
       return <Caption weight="1" caps {...restProps} />;
   }
@@ -68,33 +68,9 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   return null;
 };
 
-type HeaderAsideProps = Pick<HeaderProps, "aside"> & HasPlatform & HasComponent;
-
-const HeaderAside: React.FC<HeaderAsideProps> = ({
-  platform,
-  ...restProps
-}) => {
-  return platform === Platform.VKCOM ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Text weight="regular" {...restProps} />
-  );
-};
-
-type HeaderSubtitleProps = Pick<HeaderProps, "subtitle" | "mode"> &
-  HasComponent;
-
-const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
-  mode,
-  ...restProps
-}) => {
-  return mode === "secondary" ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Caption {...restProps} />
-  );
-};
-
+/**
+ * @see https://vkcom.github.io/VKUI/#/Header
+ */
 const Header: React.FC<HeaderProps> = ({
   mode,
   children,
@@ -107,6 +83,9 @@ const Header: React.FC<HeaderProps> = ({
 }: HeaderProps) => {
   const platform = usePlatform();
 
+  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
+  const SubtitleTypography = mode === "secondary" ? Subhead : Caption;
+
   return (
     <header
       {...restProps}
@@ -146,24 +125,16 @@ const Header: React.FC<HeaderProps> = ({
         </HeaderContent>
 
         {hasReactNode(subtitle) && (
-          <HeaderSubtitle
-            vkuiClass="Header__subtitle"
-            Component="span"
-            mode={mode}
-          >
+          <SubtitleTypography vkuiClass="Header__subtitle" Component="span">
             {subtitle}
-          </HeaderSubtitle>
+          </SubtitleTypography>
         )}
       </div>
 
       {hasReactNode(aside) && (
-        <HeaderAside
-          vkuiClass="Header__aside"
-          Component="span"
-          platform={platform}
-        >
+        <AsideTypography vkuiClass="Header__aside" Component="span">
           {aside}
-        </HeaderAside>
+        </AsideTypography>
       )}
     </header>
   );

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -39,6 +39,9 @@ export interface HorizontalCellProps
   disabled?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalCell
+ */
 export const HorizontalCell: React.FC<HorizontalCellProps> = ({
   className,
   header,

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -220,6 +220,9 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ */
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });

package/src/components/IconButton/IconButton.tsx

@@ -16,6 +16,10 @@ export interface IconButtonProps extends TappableProps {
 }
 
 const warn = warnOnce("IconButton");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
 const IconButton: React.FC<IconButtonProps> = ({
   icon,
   sizeY,

package/src/components/InfoRow/InfoRow.css

@@ -7,7 +7,7 @@
 .InfoRow__header {
   display: block;
   margin-bottom: 2px;
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -62,6 +62,9 @@ function getInitialsFontSize(avatarSize: number) {
   return calculatedFontSize + evenFix;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/InitialsAvatar
+ */
 export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
   size = AVATAR_DEFAULT_SIZE,
   children,

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

@@ -6,6 +6,9 @@ import "./Link.css";
 
 export type LinkProps = TappableProps;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Link
+ */
 const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
   const platform = usePlatform();
 

package/src/components/List/List.tsx

@@ -5,6 +5,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/List
+ */
 const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
   children,
   ...restProps

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -2,7 +2,7 @@ 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 { 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

@@ -29,6 +29,9 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCard
+ */
 const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   props
 ) => {

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,7 +1,7 @@
 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";
@@ -55,6 +55,9 @@ export interface ModalCardBaseProps
   dismissLabel?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCardBase
+ */
 export const ModalCardBase = withAdaptivity<
   ModalCardBaseProps & AdaptivityContextInterface
 >(
@@ -110,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

@@ -7,6 +7,9 @@ import "./ModalDismissButton.css";
 
 export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
+ */
 const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
   props: ModalDismissButtonProps
 ) => {

package/src/components/ModalPage/ModalPage.tsx

@@ -57,6 +57,10 @@ export interface ModalPageProps
 }
 
 const warn = warnOnce("ModalPage");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPage
+ */
 const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   props
 ) => {

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,10 +1,10 @@
 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 { useAdaptivityIsDesktop } 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 "./ModalPageHeader.css";
@@ -14,9 +14,12 @@ 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) => {
@@ -26,10 +29,10 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
 
   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
@@ -45,10 +48,3 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
     </div>
   );
 };
-
-ModalPageHeader.defaultProps = {
-  separator: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalPageHeader;

package/src/components/ModalPageHeader/Readme.md

@@ -1,5 +1,5 @@
 Шапка в модальных страницах.
-Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `left` и `right` для иконок и название модальной страницы, передаваемое как `children`.
+Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `before` и `after` для иконок и название модальной страницы, передаваемое как `children`.
 
 ### Требования по расположению кнопок
 
@@ -16,7 +16,7 @@ const platform = usePlatform();
 
 return (
   <ModalPageHeader
-    left={
+    before={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>
@@ -25,7 +25,7 @@ return (
         )}
       </Fragment>
     }
-    right={
+    after={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>

package/src/components/ModalRoot/ModalRoot.css

@@ -41,7 +41,7 @@
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_android));
+  top: calc(var(--safe-area-inset-top) + var(--panelheader_height));
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -47,6 +47,9 @@ const ModalRootComponent: React.FC<
 
 ModalRootComponent.displayName = "ModalRoot";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalRoot
+ */
 export const ModalRoot = withAdaptivity(ModalRootComponent, {
   viewWidth: true,
   viewHeight: true,

package/src/components/ModalRoot/Readme.md

@@ -65,7 +65,11 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
       {...props}
       header={
         <ModalPageHeader
-          right={
+          before={
+            isMobile &&
+            platform === ANDROID && <PanelHeaderClose onClick={onClose} />
+          }
+          after={
             isMobile &&
             platform === IOS && (
               <PanelHeaderButton onClick={onClose}>
@@ -73,10 +77,6 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
               </PanelHeaderButton>
             )
           }
-          left={
-            isMobile &&
-            platform === ANDROID && <PanelHeaderClose onClick={onClose} />
-          }
         >
           Dynamic modal
         </ModalPageHeader>
@@ -157,19 +157,19 @@ const App = withPlatform(
               settlingHeight={100}
               header={
                 <ModalPageHeader
-                  right={
+                  before={
+                    isMobile &&
+                    platform === ANDROID && (
+                      <PanelHeaderClose onClick={this.modalBack} />
+                    )
+                  }
+                  after={
                     platform === IOS && (
                       <PanelHeaderButton onClick={this.modalBack}>
                         <Icon24Dismiss />
                       </PanelHeaderButton>
                     )
                   }
-                  left={
-                    isMobile &&
-                    platform === ANDROID && (
-                      <PanelHeaderClose onClick={this.modalBack} />
-                    )
-                  }
                 >
                   @{this.randomUser.screen_name}
                 </ModalPageHeader>
@@ -225,10 +225,10 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     isMobile && <PanelHeaderClose onClick={this.modalBack} />
                   }
-                  right={<PanelHeaderSubmit onClick={this.modalBack} />}
+                  after={<PanelHeaderSubmit onClick={this.modalBack} />}
                 >
                   Фильтры
                 </ModalPageHeader>
@@ -309,7 +309,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >
@@ -342,7 +342,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >
@@ -370,7 +370,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >

package/src/components/NativeSelect/NativeSelect.tsx

@@ -3,15 +3,13 @@ import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
-import Headline from "../Typography/Headline/Headline";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
+import { SelectType, SelectTypography } from "../Select/Select";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
@@ -26,6 +24,7 @@ export interface NativeSelectProps
     AdaptivityProps {
   placeholder?: string;
   multiline?: boolean;
+  selectType?: keyof typeof SelectType;
 }
 
 export interface SelectState {
@@ -49,11 +48,12 @@ const NativeSelectComponent: React.FC<
   sizeX,
   sizeY,
   multiline,
+  selectType = SelectType.default,
   ...restProps
 }) => {
   const platform = usePlatform();
   const [title, setTitle] = React.useState("");
-  const [notSelected, setNotSelected] = React.useState(false);
+  const [empty, setEmpty] = React.useState(false);
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
   const selectRef = useExternRef(getRef);
   useIsomorphicLayoutEffect(() => {
@@ -61,24 +61,22 @@ const NativeSelectComponent: React.FC<
       selectRef.current?.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
-      setNotSelected(selectedOption.value === "" && placeholder != null);
+      setEmpty(selectedOption.value === "" && placeholder != null);
     }
   }, [value, children]);
 
-  const TypographyComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
-
   return (
     <FormField
       Component="label"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Select", platform), {
-        ["Select--not-selected"]: notSelected,
-        [`Select--align-${align}`]: !!align,
-        [`Select--sizeX--${sizeX}`]: !!sizeX,
-        [`Select--sizeY--${sizeY}`]: !!sizeY,
-        "Select--multiline": multiline,
-      })}
+      vkuiClass={classNames(
+        getClassName("Select", platform),
+        `Select--${selectType}`,
+        empty && "Select--empty",
+        multiline && "Select--multiline",
+        align && `Select--align-${align}`,
+        `Select--sizeX-${sizeX}`,
+        `Select--sizeY-${sizeY}`
+      )}
       className={className}
       style={style}
       getRootRef={getRootRef}
@@ -96,17 +94,17 @@ const NativeSelectComponent: React.FC<
         {placeholder && <option value="">{placeholder}</option>}
         {children}
       </select>
-      <TypographyComponent
-        Component="div"
-        weight="regular"
-        vkuiClass="Select__container"
-      >
-        <span vkuiClass="Select__title">{title}</span>
-      </TypographyComponent>
+      <div vkuiClass="Select__container">
+        {/* TODO v5.0.0 поправить под новую адаптивность */}
+        <SelectTypography vkuiClass="Select__title">{title}</SelectTypography>
+      </div>
     </FormField>
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/NativeSelect
+ */
 export const NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true,

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 
-interface TransitionContextProps {
+export interface TransitionContextProps {
   entering: boolean;
 }
 const TransitionContext = React.createContext<TransitionContextProps>({
   entering: false,
 });
 export const useNavTransition = () => React.useContext(TransitionContext);
+
 export const NavTransitionProvider: React.FC<TransitionContextProps> = ({
   children,
   entering,