@vkontakte/vkui 4.29.1 → 4.32.0

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,53 +51,79 @@ export interface PanelHeaderProps
 }
 
 const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
+  before,
+  after,
+  separator,
   children,
-  left,
-  right,
 }) => {
   const { webviewType } = React.useContext(ConfigProviderContext);
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
   return (
-    <TooltipContainer fixed vkuiClass="PanelHeader__in">
-      <div vkuiClass="PanelHeader__left">{left}</div>
-      <div vkuiClass="PanelHeader__content">
-        {platform === VKCOM ? (
-          <Text weight="medium">{children}</Text>
-        ) : (
-          <span vkuiClass="PanelHeader__content-in">{children}</span>
-        )}
-      </div>
-      <div vkuiClass="PanelHeader__right">
-        {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
-      </div>
-    </TooltipContainer>
+    <React.Fragment>
+      <TooltipContainer fixed vkuiClass="PanelHeader__in">
+        <div vkuiClass="PanelHeader__before">{before}</div>
+        <div vkuiClass="PanelHeader__content">
+          {platform === VKCOM ? (
+            <Text weight="2">{children}</Text>
+          ) : (
+            <span vkuiClass="PanelHeader__content-in">{children}</span>
+          )}
+        </div>
+        <div vkuiClass="PanelHeader__after">
+          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}
+        </div>
+      </TooltipContainer>
+      {separator && platform === VKCOM && <Separator wide />}
+    </React.Fragment>
   );
 };
 
-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}
@@ -101,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}`
@@ -115,29 +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
-          vkuiClass="PanelHeader__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

@@ -11,9 +11,9 @@
 
 > **Важно**
 >
-> Правая часть шапки будет скрыта, если в [`ConfigProvider`](#/ConfigProvider) передан `webviewType={WebviewType.VKAPPS}`.
+> Правая часть шапки скрыта по умолчанию, если требуется показать её, передайте в [`ConfigProvider`](#/ConfigProvider) свойство `webviewType={WebviewType.INTERNAL}`.
 
-```jsx
+```jsx { "props": { "webviewType": true } }
 class Example extends React.Component {
   constructor(props) {
     super(props);
@@ -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);
 }
 
 /**

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -4,9 +4,9 @@ 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 { Headline } from "../Typography/Headline/Headline";
 import { IOS, Platform } from "../../lib/platform";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { HasPlatform } from "../../types";
 import "./PanelHeaderContent.css";
 
@@ -30,14 +30,14 @@ const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
 }) => {
   if (platform === Platform.VKCOM) {
     return (
-      <Text Component="div" weight="medium">
+      <Text Component="div" weight="2">
         {children}
       </Text>
     );
   }
 
   return hasStatus || hasBefore ? (
-    <Headline Component="div" weight="medium">
+    <Headline Component="div" weight="2">
       {children}
     </Headline>
   ) : (
@@ -45,6 +45,9 @@ const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
+ */
 const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
   className,
   style,

package/src/components/PanelHeaderContent/Readme.md

@@ -7,8 +7,8 @@ const Example = () => {
     <View activePanel="brand">
       <Panel id="brand">
         <PanelHeader
-          left={<PanelHeaderBack label="Назад" />}
-          right={
+          before={<PanelHeaderBack label="Назад" />}
+          after={
             <PanelHeaderButton>
               <Icon28MessageOutline
                 width={platform === VKCOM ? 24 : 28}

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -18,6 +18,9 @@ export interface PanelHeaderContextProps
   onClose: VoidFunction;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
+ */
 export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   children,
   onClose,

package/src/components/PanelHeaderContext/Readme.md

@@ -39,8 +39,8 @@ const Example = withPlatform(
               <View activePanel="context2">
                 <Panel id="context2">
                   <PanelHeader
-                    left={<PanelHeaderBack />}
-                    right={
+                    before={<PanelHeaderBack />}
+                    after={
                       <PanelHeaderButton>
                         <Icon28AddOutline />
                       </PanelHeaderButton>

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -22,6 +22,9 @@ export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
   doneLabel?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
+ */
 const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
   isActive,
   editLabel,

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

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

package/src/components/PanelHeaderSubmit/Readme.md

@@ -4,7 +4,7 @@
 import { PanelHeaderSubmit } from "@vkontakte/vkui";
 
 <PanelHeader
-  right={
+  after={
     <PanelHeaderSubmit onClick={this.props.onSubmit}>Готово</PanelHeaderSubmit>
   }
 >

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -1,21 +1,17 @@
 import * as React from "react";
-import Spinner, { SpinnerProps } from "../Spinner/Spinner";
+import { Spinner, SpinnerProps } from "../Spinner/Spinner";
 
 export interface PanelSpinnerProps extends SpinnerProps {
   height?: number;
 }
 
-const PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({
-  height,
-  style,
-  ...restProps
-}: PanelSpinnerProps) => {
-  return <Spinner size="regular" {...restProps} style={{ height, ...style }} />;
-};
+/**
+ * @see https://vkcom.github.io/VKUI/#/PanelSpinner
+ */
+export const PanelSpinner = React.memo(
+  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (
+    <Spinner size="regular" {...restProps} style={{ height, ...style }} />
+  )
+);
 
-PanelSpinner.defaultProps = {
-  height: 96,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(PanelSpinner);
+PanelSpinner.displayName = "PanelSpinner";

package/src/components/PanelSpinner/Readme.md

@@ -4,7 +4,7 @@
 import { PanelSpinner } from "@vkontakte/vkui";
 
 <Panel>
-  <PanelHeader left={<PanelHeaderBack />}>Заголовок панели</PanelHeader>
+  <PanelHeader before={<PanelHeaderBack />}>Заголовок панели</PanelHeader>
 
   {loading ? (
     <PanelSpinner />

package/src/components/Placeholder/Placeholder.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { HasRootRef } from "../../types";
 import "./Placeholder.css";
 
@@ -27,6 +27,9 @@ export interface PlaceholderProps
   stretched?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Placeholder
+ */
 const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
   const {
     icon,
@@ -55,7 +58,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
           </Title>
         )}
         {hasReactNode(children) && (
-          <Headline weight="regular" vkuiClass="Placeholder__text">
+          <Headline weight="3" vkuiClass="Placeholder__text">
             {children}
           </Headline>
         )}

package/src/components/Placeholder/Readme.md

@@ -49,7 +49,7 @@ class PlaceholderExample extends React.Component {
 
         <Panel id="example-2">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
             }
           >
@@ -74,7 +74,7 @@ class PlaceholderExample extends React.Component {
 
         <Panel id="example-3">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
             }
           >

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,16 +1,13 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import {
-  withAdaptivity,
-  ViewWidth,
-  ViewHeight,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./PopoutRoot.css";
 
 export interface PopoutRootProps
@@ -36,9 +33,7 @@ export const PopoutRootComponent: React.FC<
   } = props;
   const { document } = useDOM();
 
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   React.useEffect(() => {
     popout && blurActiveElement(document);

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -17,6 +17,9 @@ export interface PopoutWrapperProps
   closing?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
+ */
 export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   alignY = "center",
   alignX = "center",

package/src/components/Popper/Popper.css

@@ -1,5 +1,17 @@
-.PopperPortal {
-  position: relative;
+/**
+ * ⚠ WARNING️ ⚠
+ *
+ * Если указать `position: relaitve` контейнеру, где позиционируется `Popper`, то при кейсе когда:
+ * 1. Мы передали `sameWidth`.
+ * 2. Мы позциционируем `Popper` через `position: absolute`.
+ * 3. Мы используем `height: 100%` или `height: 100vh`, чтобы растянуть страницу на всю высоту.
+ * 4. НЕТ скроллбара.
+ * будет неправильно высчитан `offsetWidth` у `targetRef` при первом вызове `effect()` модификатора `sameWdith`,
+ *  а именно из `offsetWidth` будет вычтен размер скроллабара, которого на самом деле на странице нет (см. п. 4)
+ *
+ * Второй и последующие вызовы исправляют ситуацию.
+ */
+.Popper {
   z-index: 100;
 }