@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -1,26 +1,43 @@
-import * as React from 'react';
-import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from '@vkontakte/icons';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
-import { ANDROID, VKCOM, IOS } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, SizeType, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import './PanelHeaderBack.css';
+import * as React from "react";
+import {
+  Icon28ChevronBack,
+  Icon28ChevronLeftOutline,
+  Icon28ArrowLeftOutline,
+} from "@vkontakte/icons";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  SizeType,
+  AdaptivityProps,
+} from "../../hoc/withAdaptivity";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import "./PanelHeaderBack.css";
 
-export type PanelHeaderBackProps = PanelHeaderButtonProps & AdaptivityProps & {
-  'aria-label'?: string;
-};
+export type PanelHeaderBackProps = PanelHeaderButtonProps &
+  AdaptivityProps & {
+    "aria-label"?: string;
+  };
 
-const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({ label, sizeX, ...restProps }: PanelHeaderButtonProps & AdaptivityProps) => {
+const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
+  label,
+  sizeX,
+  ...restProps
+}: PanelHeaderButtonProps & AdaptivityProps) => {
   const platform = usePlatform();
-  const showLabel = platform === VKCOM || platform === IOS && sizeX === SizeType.REGULAR;
+  const showLabel =
+    platform === VKCOM || (platform === IOS && sizeX === SizeType.REGULAR);
 
   return (
     <PanelHeaderButton
       {...restProps}
-      vkuiClass={classNames(getClassName('PanelHeaderBack', platform), {
-        'PanelHeaderBack--has-label': showLabel && !!label,
+      vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
+        "PanelHeaderBack--has-label": showLabel && !!label,
       })}
       label={showLabel && label}
     >
@@ -32,9 +49,12 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({ label,
 };
 
 PanelHeaderBack.defaultProps = {
-  'aria-label': 'Назад',
+  "aria-label": "Назад",
 };
 
-export default React.memo(withAdaptivity(PanelHeaderBack, {
-  sizeX: true,
-}));
+// eslint-disable-next-line import/no-default-export
+export default React.memo(
+  withAdaptivity(PanelHeaderBack, {
+    sizeX: true,
+  })
+);

package/src/components/PanelHeaderBack/Readme.md

@@ -1,9 +1,9 @@
 Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы.
 
 ```jsx static
-import { PanelHeaderBack } from '@vkontakte/vkui';
+import { PanelHeaderBack } from "@vkontakte/vkui";
 
 <PanelHeader left={<PanelHeaderBack onClick={this.props.onBackClick} />}>
   Заголовок панели
-</PanelHeader>
+</PanelHeader>;
 ```

package/src/components/PanelHeaderButton/PanelHeaderButton.css

@@ -11,7 +11,7 @@
 }
 
 .PanelHeaderButton[disabled] {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .PanelHeaderButton .Counter {
@@ -76,8 +76,8 @@
 }
 
 .PanelHeaderButton--vkcom > :not(.Counter) {
-  transition: opacity .3s;
-  opacity: .7;
+  transition: opacity 0.3s;
+  opacity: 0.7;
 }
 
 .PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(.Counter),

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -1,38 +1,43 @@
-import * as React from 'react';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { isPrimitiveReactNode } from '../../lib/utils';
-import { IOS, VKCOM, ANDROID } from '../../lib/platform';
-import Text from '../Typography/Text/Text';
-import Title from '../Typography/Title/Title';
-import './PanelHeaderButton.css';
+import * as React from "react";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { isPrimitiveReactNode } from "../../lib/utils";
+import { IOS, VKCOM, ANDROID } from "../../lib/platform";
+import Text from "../Typography/Text/Text";
+import Title from "../Typography/Title/Title";
+import "./PanelHeaderButton.css";
 
-export interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {
+export interface PanelHeaderButtonProps extends Omit<TappableProps, "label"> {
   primary?: boolean;
   label?: React.ReactNode;
 }
 
 interface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {
-  primary?: PanelHeaderButtonProps['primary'];
+  primary?: PanelHeaderButtonProps["primary"];
 }
 
-const ButtonTypography: React.FC<ButtonTypographyProps> = ({ primary, children }: ButtonTypographyProps) => {
+const ButtonTypography: React.FC<ButtonTypographyProps> = ({
+  primary,
+  children,
+}: ButtonTypographyProps) => {
   const platform = usePlatform();
 
   if (platform === IOS) {
     return (
-      <Title Component="span" level="3" weight={primary ? 'semibold' : 'regular'}>
+      <Title
+        Component="span"
+        level="3"
+        weight={primary ? "semibold" : "regular"}
+      >
         {children}
       </Title>
     );
   }
 
   return (
-    <Text weight={platform === VKCOM ? 'regular' : 'medium'}>
-      {children}
-    </Text>
+    <Text weight={platform === VKCOM ? "regular" : "medium"}>{children}</Text>
   );
 };
 
@@ -51,47 +56,46 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
 
   switch (platform) {
     case ANDROID:
-      hoverMode = 'background';
-      activeMode = 'background';
+      hoverMode = "background";
+      activeMode = "background";
       break;
     case IOS:
-      hoverMode = 'background';
-      activeMode = 'opacity';
+      hoverMode = "background";
+      activeMode = "opacity";
       break;
     case VKCOM:
-      hoverMode = 'PanelHeaderButton--hover';
-      activeMode = 'PanelHeaderButton--active';
+      hoverMode = "PanelHeaderButton--hover";
+      activeMode = "PanelHeaderButton--active";
   }
 
   return (
     <Tappable
       {...restProps}
       hoverMode={hoverMode}
-      Component={restProps.href ? 'a' : 'button'}
+      Component={restProps.href ? "a" : "button"}
       activeEffectDelay={200}
       activeMode={activeMode}
-      vkuiClass={classNames(
-        getClassName('PanelHeaderButton', platform),
-        {
-          'PanelHeaderButton--primary': primary,
-          'PanelHeaderButton--primitive': isPrimitive,
-          'PanelHeaderButton--notPrimitive': !isPrimitive && !isPrimitiveLabel,
-        },
-      )}
+      vkuiClass={classNames(getClassName("PanelHeaderButton", platform), {
+        "PanelHeaderButton--primary": primary,
+        "PanelHeaderButton--primitive": isPrimitive,
+        "PanelHeaderButton--notPrimitive": !isPrimitive && !isPrimitiveLabel,
+      })}
     >
-      {isPrimitive
-        ? <ButtonTypography primary={primary}>{children}</ButtonTypography>
-        : children
-      }
-      {isPrimitiveLabel
-        ? <ButtonTypography primary={primary}>{label}</ButtonTypography>
-        : label
-      }
+      {isPrimitive ? (
+        <ButtonTypography primary={primary}>{children}</ButtonTypography>
+      ) : (
+        children
+      )}
+      {isPrimitiveLabel ? (
+        <ButtonTypography primary={primary}>{label}</ButtonTypography>
+      ) : (
+        label
+      )}
     </Tappable>
   );
 };
 
 PanelHeaderButton.defaultProps = {
-  'primary': false,
-  'aria-label': 'Закрыть',
+  primary: false,
+  "aria-label": "Закрыть",
 };

package/src/components/PanelHeaderButton/Readme.md

@@ -4,29 +4,41 @@
 Кнопки могут быть переданы в `left` или `right` компонента `PanelHeader`:
 
 ```jsx static
-import { PanelHeader, PanelHeaderButton } from '@vkontakte/vkui';
-import { Icon28Notifications, Icon28SettingsOutline } from '@vkontakte/icons';
+import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
+import { Icon28Notifications, Icon28SettingsOutline } from "@vkontakte/icons";
 
 <PanelHeader
-  left={<PanelHeaderButton><Icon28Notifications/></PanelHeaderButton>}
-  right={<PanelHeaderButton><Icon28SettingsOutline/></PanelHeaderButton>}
-/>
+  left={
+    <PanelHeaderButton>
+      <Icon28Notifications />
+    </PanelHeaderButton>
+  }
+  right={
+    <PanelHeaderButton>
+      <Icon28SettingsOutline />
+    </PanelHeaderButton>
+  }
+/>;
 ```
 
 Если нужно несколько кнопок справа или слева, то используем `React.Fragment`:
 
 ```jsx static
-import { PanelHeader, PanelHeaderButton } from '@vkontakte/vkui';
-import { Icon28SettingsOutline, Icon28Notifications } from '@vkontakte/icons';
+import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
+import { Icon28SettingsOutline, Icon28Notifications } from "@vkontakte/icons";
 
 <PanelHeader
   right={
     <React.Fragment>
-      <PanelHeaderButton><Icon28SettingsOutline /></PanelHeaderButton>
-      <PanelHeaderButton><Icon28Notifications /></PanelHeaderButton>
+      <PanelHeaderButton>
+        <Icon28SettingsOutline />
+      </PanelHeaderButton>
+      <PanelHeaderButton>
+        <Icon28Notifications />
+      </PanelHeaderButton>
     </React.Fragment>
   }
-/>
+/>;
 ```
 
 **VK Mini Apps**

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -1,21 +1,35 @@
-import * as React from 'react';
-import { Icon28CancelOutline } from '@vkontakte/icons';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { getTitleFromChildren } from '../../lib/utils';
-import { usePlatform } from '../../hooks/usePlatform';
+import * as React from "react";
+import { Icon28CancelOutline } from "@vkontakte/icons";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { getTitleFromChildren } from "../../lib/utils";
+import { usePlatform } from "../../hooks/usePlatform";
 
-const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({ children, ...restProps }: PanelHeaderButtonProps) => {
+const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({
+  children,
+  ...restProps
+}: PanelHeaderButtonProps) => {
   const platform = usePlatform();
   return (
-    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>
-      {platform === ANDROID || platform === VKCOM ? <Icon28CancelOutline /> : children}
+    <PanelHeaderButton
+      aria-label={getTitleFromChildren(children)}
+      {...restProps}
+    >
+      {platform === ANDROID || platform === VKCOM ? (
+        <Icon28CancelOutline />
+      ) : (
+        children
+      )}
     </PanelHeaderButton>
   );
 };
 
 PanelHeaderClose.defaultProps = {
-  children: 'Отмена',
+  children: "Отмена",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderClose;

package/src/components/PanelHeaderClose/Readme.md

@@ -1,9 +1,9 @@
 Этот компонент используется для показа кнопки "Отмена" в модальных окнах для закрытия текущего `View` в рамках `Root`. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28CancelOutline />`:
 
 ```jsx static
-import { PanelHeaderClose } from '@vkontakte/vkui';
+import { PanelHeaderClose } from "@vkontakte/vkui";
 
 <PanelHeader left={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
   Заголовок модального окна
-</PanelHeader>
+</PanelHeader>;
 ```

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  font-family: var(--font-common);
 }
 
 .PanelHeaderContent__before {
@@ -47,10 +48,6 @@
 .PanelHeaderContent__children-in {
   flex-grow: 0;
   min-width: 0;
-  font-size: 21px;
-  line-height: var(--panelheader_height_ios);
-  font-weight: 800;
-  font-family: var(--font-tt);
 }
 
 .PanelHeaderContent__aside {
@@ -65,6 +62,10 @@
   width: 1000px;
 }
 
+/**
+ * iOS
+ */
+
 .PanelHeaderContent--ios .PanelHeaderContent__before ~ .PanelHeaderContent__in {
   align-items: flex-start;
 }
@@ -72,3 +73,35 @@
 .PanelHeaderContent--ios .PanelHeaderContent__in {
   align-items: center;
 }
+
+.PanelHeaderContent--ios .PanelHeaderContent__children-in {
+  font-size: 21px;
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: var(--panelheader_height_ios);
+}
+
+/**
+ * Android
+ */
+
+.PanelHeaderContent--android .PanelHeaderContent__children-in {
+  font-size: 23px;
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: var(--panelheader_height_android);
+}
+
+/**
+ * VKCOM
+ */
+
+.PanelHeaderContent--vkcom
+  .PanelHeaderContent__before
+  ~ .PanelHeaderContent__in {
+  align-items: flex-start;
+}
+
+.PanelHeaderContent--vkcom .PanelHeaderContent__in {
+  align-items: center;
+}

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,19 +1,50 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable from '../Tappable/Tappable';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import Caption from '../Typography/Caption/Caption';
-import Headline from '../Typography/Headline/Headline';
-import { IOS } from '../../lib/platform';
-import './PanelHeaderContent.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable from "../Tappable/Tappable";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import Caption from "../Typography/Caption/Caption";
+import Headline from "../Typography/Headline/Headline";
+import { IOS, Platform } from "../../lib/platform";
+import Text from "../Typography/Text/Text";
+import { HasPlatform } from "../../types";
+import "./PanelHeaderContent.css";
 
-export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PanelHeaderContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   aside?: React.ReactNode;
   before?: React.ReactNode;
   status?: React.ReactNode;
 }
 
+interface PanelHeaderChildrenProps extends HasPlatform {
+  hasStatus: boolean;
+  hasBefore: boolean;
+}
+
+const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
+  platform,
+  hasStatus,
+  hasBefore,
+  children,
+}) => {
+  if (platform === Platform.VKCOM) {
+    return (
+      <Text Component="div" weight="medium">
+        {children}
+      </Text>
+    );
+  }
+
+  return hasStatus || hasBefore ? (
+    <Headline Component="div" weight="medium">
+      {children}
+    </Headline>
+  ) : (
+    <div vkuiClass="PanelHeaderContent__children-in">{children}</div>
+  );
+};
+
 const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
   className,
   style,
@@ -24,38 +55,51 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
   onClick,
   ...restProps
 }: PanelHeaderContentProps) => {
-  const InComponent = onClick ? Tappable : 'div';
+  const InComponent = onClick ? Tappable : "div";
   const rootProps = onClick ? {} : restProps;
   const platform = usePlatform();
-  const inProps = onClick ? {
-    ...restProps,
-    onClick,
-    activeEffectDelay: 200,
-    hasActive: platform === IOS,
-    activeMode: 'opacity',
-  } : {};
-  const baseClassNames = getClassName('PanelHeaderContent', platform);
+  const inProps = onClick
+    ? {
+        ...restProps,
+        onClick,
+        activeEffectDelay: 200,
+        hasActive: platform === IOS,
+        activeMode: "opacity",
+      }
+    : {};
+  const baseClassNames = getClassName("PanelHeaderContent", platform);
 
   return (
-    <div {...rootProps} vkuiClass={baseClassNames} style={style} className={className}>
-      {hasReactNode(before) && <div vkuiClass="PanelHeaderContent__before">{before}</div>}
-      <InComponent
-        {...inProps}
-        vkuiClass="PanelHeaderContent__in"
-      >
-        {hasReactNode(status) &&
-          <Caption level="1" weight="regular" vkuiClass="PanelHeaderContent__status">
+    <div
+      {...rootProps}
+      vkuiClass={baseClassNames}
+      style={style}
+      className={className}
+    >
+      {hasReactNode(before) && (
+        <div vkuiClass="PanelHeaderContent__before">{before}</div>
+      )}
+      <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
+        {hasReactNode(status) && (
+          <Caption
+            level="1"
+            weight="regular"
+            vkuiClass="PanelHeaderContent__status"
+          >
             {status}
           </Caption>
-        }
+        )}
         <div vkuiClass="PanelHeaderContent__children">
-          {hasReactNode(status) ?
-            <Headline Component="span" weight="medium">
-              {children}
-            </Headline>
-            : <span vkuiClass="PanelHeaderContent__children-in">{children}</span>
-          }
-          {hasReactNode(aside) && <div vkuiClass="PanelHeaderContent__aside">{aside}</div>}
+          <PanelHeaderChildren
+            platform={platform}
+            hasStatus={hasReactNode(status)}
+            hasBefore={hasReactNode(before)}
+          >
+            {children}
+          </PanelHeaderChildren>
+          {hasReactNode(aside) && (
+            <div vkuiClass="PanelHeaderContent__aside">{aside}</div>
+          )}
         </div>
         {hasReactNode(before) && <div vkuiClass="PanelHeaderContent__width" />}
       </InComponent>
@@ -63,4 +107,5 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderContent;

package/src/components/PanelHeaderContent/Readme.md

@@ -8,18 +8,18 @@ const Example = () => {
       <Panel id="brand">
         <PanelHeader
           left={<PanelHeaderBack label="Назад" />}
-          right={(
+          right={
             <PanelHeaderButton>
               <Icon28MessageOutline
                 width={platform === VKCOM ? 24 : 28}
                 height={platform === VKCOM ? 24 : 28}
               />
             </PanelHeaderButton>
-          )}
+          }
         >
           <PanelHeaderContent
             status="был в сети сегодня, в 18:46"
-            before={<Avatar size={36} src={getAvatarUrl('user_va')} />}
+            before={<Avatar size={36} src={getAvatarUrl("user_va")} />}
           >
             Влад Анесов
           </PanelHeaderContent>
@@ -27,7 +27,7 @@ const Example = () => {
       </Panel>
     </View>
   );
-}
+};
 
-<Example />
+<Example />;
 ```