@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/Pagination/Pagination.tsx

@@ -61,6 +61,9 @@ export interface PaginationProps
   onChange?(page: number): void;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Pagination
+ */
 export const Pagination: React.FC<PaginationProps> = ({
   currentPage = 1,
   siblingCount = 1,

package/src/components/Panel/Panel.css

@@ -46,7 +46,7 @@
 
 .Panel__centered .PanelHeader--android.PanelHeader--vis + *,
 .Panel__centered .PanelHeader--vkcom.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height_android);
+  margin-top: var(--panelheader_height);
 }
 
 .Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
@@ -57,7 +57,7 @@
   .Panel__centered
   .PanelHeader--android.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_android) + 5px);
+  margin-top: calc(var(--panelheader_height) + 5px);
 }
 
 .Panel--sizeX-compact
@@ -75,7 +75,7 @@
   .Panel__centered
   .PanelHeader--android.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_android) + 16px);
+  margin-top: calc(var(--panelheader_height) + 16px);
 }
 
 .Panel--sizeX-regular

package/src/components/Panel/Panel.tsx

@@ -22,6 +22,9 @@ export interface PanelProps
   centered?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Panel
+ */
 export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
   ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
     const platform = usePlatform();

package/src/components/Panel/Readme.md

@@ -42,7 +42,7 @@ class Example extends React.Component {
         <Panel id="panel2">
           <PanelHeader
             separator={false}
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel1" })}
               />
@@ -77,7 +77,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel3" centered>
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel2" })}
               />

package/src/components/PanelHeader/PanelHeader.css

@@ -32,7 +32,7 @@
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
 }
 
-.PanelHeader__left {
+.PanelHeader__before {
   box-sizing: border-box;
   color: var(--header_tint);
   display: flex;
@@ -55,33 +55,31 @@
   font-family: var(--font-display);
 }
 
-.PanelHeader__right {
+.PanelHeader::before,
+.PanelHeader__in {
+  height: var(--panelheader_height);
+  padding-top: var(--safe-area-inset-top);
+}
+
+.PanelHeader__after {
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
   color: var(--header_tint);
 }
 
-.PanelHeader--vkapps .PanelHeader__right {
+.PanelHeader--vkapps .PanelHeader__after {
   min-width: 90px;
 }
 
 /**
  * iOS
  */
-
-.PanelHeader--ios ~ .FixedLayout--top,
-.PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
+.PanelHeader--ios {
+  --panelheader_height: var(--panelheader_height_ios);
 }
 
-.PanelHeader--ios::before,
-.PanelHeader--ios .PanelHeader__in {
-  height: var(--panelheader_height_ios);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--ios .PanelHeader__left {
+.PanelHeader--ios .PanelHeader__before {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
@@ -91,7 +89,7 @@
 }
 
 .PanelHeader--ios
-  .PanelHeader__left
+  .PanelHeader__before
   .PanelHeaderButton
   + .PanelHeaderButton--primitive {
   margin-left: -6px;
@@ -106,30 +104,29 @@
 
 .PanelHeader--ios .PanelHeader__content-in {
   font-size: 21px;
-  line-height: var(--panelheader_height_ios);
 }
 
 .PanelHeader--ios .PanelHeader__content > * {
   padding: 0 4px;
 }
 
-.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content > * {
+.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content > * {
   padding-left: 0;
 }
 
-.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content {
+.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content {
   padding-left: 8px;
 }
 
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content > * {
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
 }
 
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content {
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content {
   padding-right: 8px;
 }
 
-.PanelHeader--ios .PanelHeader__right {
+.PanelHeader--ios .PanelHeader__after {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
@@ -138,8 +135,8 @@
   padding: 4px 4px 4px 0;
 }
 
-.View--ios .View__panel--prev .PanelHeader__left,
-.View--ios .View__panel--prev .PanelHeader__right,
+.View--ios .View__panel--prev .PanelHeader__before,
+.View--ios .View__panel--prev .PanelHeader__after,
 .View--ios .View__panel--prev .PanelHeader__content {
   opacity: 0;
 }
@@ -147,18 +144,7 @@
 /**
  * Android
  */
-.PanelHeader--android ~ .FixedLayout--top,
-.PanelHeader--android ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_android) + var(--safe-area-inset-top));
-}
-
-.PanelHeader--android::before,
-.PanelHeader--android .PanelHeader__in {
-  height: var(--panelheader_height_android);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--android .PanelHeader__left:not(:empty) {
+.PanelHeader--android .PanelHeader__before:not(:empty) {
   padding: 4px 0 4px 4px;
 }
 
@@ -181,64 +167,52 @@
   padding: 0 4px;
 }
 
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-left .PanelHeader__content > * {
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-before .PanelHeader__content > * {
   padding-left: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content {
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
   padding-left: 16px;
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-left:not(.ModalPageHeader__in)
+  .PanelHeader--android.PanelHeader--no-before:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-left: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-right .PanelHeader__content > * {
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content {
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content {
   padding-right: 16px;
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-right:not(.ModalPageHeader__in)
+  .PanelHeader--android.PanelHeader--no-after:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-right: 0;
 }
 
-.PanelHeader--android .PanelHeader__right:not(:empty),
-.PanelHeader--vkcom .PanelHeader__right:not(:empty) {
+.PanelHeader--android .PanelHeader__after:not(:empty),
+.PanelHeader--vkcom .PanelHeader__after:not(:empty) {
   padding: 4px 4px 4px 0;
 }
 
 /**
  * VKCOM
  */
-
 .PanelHeader--vkcom {
+  --panelheader_height: var(--panelheader_height_vkcom);
+
   position: relative;
   z-index: 10;
 }
 
-.PanelHeader--vkcom ~ .FixedLayout--top,
-.PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
-}
-
 /* TODO: v5.0.0 новая адаптивность */
-.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)
-  .PanelHeader__in {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;
-  border-bottom: none;
-}
-
 .PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)::after {
   position: absolute;
   left: var(--thin-border);
@@ -253,18 +227,12 @@
   text-align: center;
 }
 
-.PanelHeader--vkcom::before,
-.PanelHeader--vkcom .PanelHeader__in {
-  height: var(--panelheader_height_vkcom);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--vkcom .PanelHeader__left:not(:empty) {
+.PanelHeader--vkcom .PanelHeader__before:not(:empty) {
   padding: 0 0 0 4px;
 }
 
-.PanelHeader--vkcom .PanelHeader__left,
-.PanelHeader--vkcom .PanelHeader__right {
+.PanelHeader--vkcom .PanelHeader__before,
+.PanelHeader--vkcom .PanelHeader__after {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;

package/src/components/PanelHeader/PanelHeader.tsx

@@ -2,8 +2,9 @@ import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
 import FixedLayout from "../FixedLayout/FixedLayout";
-import Separator from "../Separator/Separator";
+import { Separator } from "../Separator/Separator";
 import { Platform, VKCOM } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";
 import {
@@ -15,9 +16,10 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import ModalRootContext from "../ModalRoot/ModalRootContext";
+import { Spacing } from "../Spacing/Spacing";
 import "./PanelHeader.css";
 
 export interface PanelHeaderProps
@@ -25,7 +27,15 @@ export interface PanelHeaderProps
     HasRef<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
     AdaptivityProps {
+  before?: React.ReactNode;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте `before`
+   */
   left?: React.ReactNode;
+  after?: React.ReactNode;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте `after`
+   */
   right?: React.ReactNode;
   separator?: boolean;
   transparent?: boolean;
@@ -41,10 +51,10 @@ export interface PanelHeaderProps
 }
 
 const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
-  children,
-  left,
-  right,
+  before,
+  after,
   separator,
+  children,
 }) => {
   const { webviewType } = React.useContext(ConfigProviderContext);
   const { isInsideModal } = React.useContext(ModalRootContext);
@@ -53,16 +63,16 @@ const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
   return (
     <React.Fragment>
       <TooltipContainer fixed vkuiClass="PanelHeader__in">
-        <div vkuiClass="PanelHeader__left">{left}</div>
+        <div vkuiClass="PanelHeader__before">{before}</div>
         <div vkuiClass="PanelHeader__content">
           {platform === VKCOM ? (
-            <Text weight="medium">{children}</Text>
+            <Text weight="2">{children}</Text>
           ) : (
             <span vkuiClass="PanelHeader__content-in">{children}</span>
           )}
         </div>
-        <div vkuiClass="PanelHeader__right">
-          {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
+        <div vkuiClass="PanelHeader__after">
+          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}
         </div>
       </TooltipContainer>
       {separator && platform === VKCOM && <Separator wide />}
@@ -70,28 +80,50 @@ const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
   );
 };
 
-const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
-  const {
-    left,
-    children,
-    right,
-    separator,
-    visor,
-    transparent,
-    shadow,
-    getRef,
-    getRootRef,
-    sizeX,
-    sizeY,
-    fixed,
-    ...restProps
-  } = props;
+const warn = warnOnce("PanelHeader");
+const PanelHeaderComponent = ({
+  // TODO: поправить перед 5.0.0
+  before: propsBefore,
+  left,
+  after: propsAfter,
+  right,
+  // /end TODO
+  children,
+  separator = true,
+  visor = true,
+  transparent = false,
+  shadow,
+  getRef,
+  getRootRef,
+  sizeX,
+  sizeY,
+  fixed,
+  ...restProps
+}: PanelHeaderProps) => {
   const platform = usePlatform();
   const { webviewType } = React.useContext(ConfigProviderContext);
   const { isInsideModal } = React.useContext(ModalRootContext);
   const needShadow = shadow && sizeX === SizeType.REGULAR;
   let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
 
+  // TODO: удалить перед 5.0.0
+  const before = propsBefore ?? left;
+  const after = propsAfter ?? right;
+
+  if (process.env.NODE_ENV === "development") {
+    right &&
+      warn(
+        "Свойство right устарелo и будет удалено в 5.0.0. Используйте after."
+      );
+    left &&
+      warn(
+        "Свойство left устарелo и будет удалено в 5.0.0. Используйте before."
+      );
+  }
+  // /end TODO
+
+  const innerProps = { before, after, separator, children };
+
   return (
     <div
       {...restProps}
@@ -105,8 +137,8 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
           "PanelHeader--sep": separator && visor,
           "PanelHeader--vkapps":
             webviewType === WebviewType.VKAPPS && !isInsideModal,
-          "PanelHeader--no-left": !left,
-          "PanelHeader--no-right": !right,
+          "PanelHeader--no-before": !before,
+          "PanelHeader--no-after": !after,
           "PanelHeader--fixed": isFixed,
         },
         `PanelHeader--sizeX-${sizeX}`
@@ -119,26 +151,23 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
           vertical="top"
           getRootRef={getRef}
         >
-          <PanelHeaderIn {...props} />
+          <PanelHeaderIn {...innerProps} />
         </FixedLayout>
       ) : (
-        <PanelHeaderIn {...props} />
-      )}
-      {separator && visor && platform !== VKCOM && (
-        <Separator expanded={sizeX === SizeType.REGULAR} />
+        <PanelHeaderIn {...innerProps} />
       )}
+      {separator &&
+        visor &&
+        platform !== VKCOM &&
+        (sizeX === SizeType.REGULAR ? <Spacing size={16} /> : <Separator />)}
     </div>
   );
 };
 
-PanelHeader.defaultProps = {
-  separator: true,
-  transparent: false,
-  visor: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(PanelHeader, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeader
+ */
+export const PanelHeader = withAdaptivity(PanelHeaderComponent, {
   sizeX: true,
   sizeY: true,
 });

package/src/components/PanelHeader/Readme.md

@@ -32,8 +32,8 @@ class Example extends React.Component {
         <View id="main" activePanel={this.state.mainPanel}>
           <Panel id="panel1">
             <PanelHeader
-              left={<PanelHeaderClose />}
-              right={<Avatar size={36} />}
+              before={<PanelHeaderClose />}
+              after={<Avatar size={36} />}
             >
               Стартовый экран
             </PanelHeader>
@@ -47,13 +47,13 @@ class Example extends React.Component {
           </Panel>
           <Panel id="panel2">
             <PanelHeader
-              left={
+              before={
                 <PanelHeaderBack
                   onClick={() => this.setState({ mainPanel: "panel1" })}
                   label={platform === VKCOM ? "Назад" : undefined}
                 />
               }
-              right={
+              after={
                 <PanelHeaderButton
                   aria-label="Изображения"
                   label={
@@ -82,12 +82,12 @@ class Example extends React.Component {
           </Panel>
           <Panel id="panel3">
             <PanelHeader
-              left={
+              before={
                 <PanelHeaderBack
                   onClick={() => this.setState({ mainPanel: "panel2" })}
                 />
               }
-              right={
+              after={
                 <React.Fragment>
                   <PanelHeaderButton
                     aria-label="Настройки"
@@ -134,14 +134,14 @@ class Example extends React.Component {
         <View id="modal" activePanel={this.state.modalPanel}>
           <Panel id="modal-panel1">
             <PanelHeader
-              left={
+              before={
                 <PanelHeaderButton
                   onClick={() => this.setState({ activeView: "main" })}
                 >
                   Отмена
                 </PanelHeaderButton>
               }
-              right={
+              after={
                 <PanelHeaderButton
                   disabled
                   primary
@@ -163,7 +163,7 @@ class Example extends React.Component {
           </Panel>
           <Panel id="modal-panel2">
             <PanelHeader
-              left={
+              before={
                 <PanelHeaderBack
                   onClick={() => this.setState({ modalPanel: "modal-panel1" })}
                   label={platform === VKCOM ? "Назад" : undefined}
@@ -188,7 +188,7 @@ class Example extends React.Component {
           <Panel id="modal-panel3">
             <PanelHeader
               separator={platform === VKCOM || sizeX === SizeType.REGULAR}
-              left={
+              before={
                 platform !== VKCOM && (
                   <PanelHeaderBack
                     onClick={() =>
@@ -218,7 +218,7 @@ class Example extends React.Component {
           <Panel id="modal-panel4">
             <PanelHeader
               separator={platform === VKCOM || sizeX === SizeType.REGULAR}
-              left={
+              before={
                 <PanelHeaderBack
                   onClick={() => this.setState({ modalPanel: "modal-panel3" })}
                 />

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -24,6 +24,9 @@ export type PanelHeaderBackProps = PanelHeaderButtonProps &
     "aria-label"?: string;
   };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
+ */
 const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   label,
   sizeX,

package/src/components/PanelHeaderBack/Readme.md

@@ -3,7 +3,7 @@
 ```jsx static
 import { PanelHeaderBack } from "@vkontakte/vkui";
 
-<PanelHeader left={<PanelHeaderBack onClick={this.props.onBackClick} />}>
+<PanelHeader before={<PanelHeaderBack onClick={this.props.onBackClick} />}>
   Заголовок панели
 </PanelHeader>;
 ```

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -6,7 +6,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 import "./PanelHeaderButton.css";
 
@@ -33,12 +33,14 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = ({
     );
   }
 
-  return (
-    <Text weight={platform === VKCOM ? "regular" : "medium"}>{children}</Text>
-  );
+  return <Text weight={platform === VKCOM ? undefined : "2"}>{children}</Text>;
 };
 
 const warn = warnOnce("PanelHeaderButton");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
+ */
 export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
   children,
   primary = false,

package/src/components/PanelHeaderButton/Readme.md

@@ -8,12 +8,12 @@ import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
 import { Icon28Notifications, Icon28SettingsOutline } from "@vkontakte/icons";
 
 <PanelHeader
-  left={
+  before={
     <PanelHeaderButton>
       <Icon28Notifications />
     </PanelHeaderButton>
   }
-  right={
+  after={
     <PanelHeaderButton>
       <Icon28SettingsOutline />
     </PanelHeaderButton>
@@ -28,7 +28,7 @@ import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
 import { Icon28SettingsOutline, Icon28Notifications } from "@vkontakte/icons";
 
 <PanelHeader
-  right={
+  after={
     <React.Fragment>
       <PanelHeaderButton>
         <Icon28SettingsOutline />

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -8,6 +8,9 @@ import { ANDROID, VKCOM } from "../../lib/platform";
 import { getTitleFromChildren } from "../../lib/utils";
 import { usePlatform } from "../../hooks/usePlatform";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
+ */
 const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({
   children,
   ...restProps

package/src/components/PanelHeaderClose/Readme.md

@@ -3,7 +3,7 @@
 ```jsx static
 import { PanelHeaderClose } from "@vkontakte/vkui";
 
-<PanelHeader left={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
+<PanelHeader before={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
   Заголовок модального окна
 </PanelHeader>;
 ```

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -89,7 +89,7 @@
   font-size: 23px;
   font-family: var(--font-display);
   font-weight: 500;
-  line-height: var(--panelheader_height_android);
+  line-height: var(--panelheader_height);
 }
 
 /**