@vkontakte/vkui 4.30.0 → 4.31.0

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/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;
 }
 

package/src/components/Radio/Radio.css

@@ -5,7 +5,7 @@
 .FormItem .Radio {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .Radio__input {

package/src/components/RadioGroup/RadioGroup.css

@@ -7,6 +7,6 @@
  * FormItem
  */
 .FormItem .RadioGroup {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
   box-sizing: content-box;
 }

package/src/components/Removable/Removable.css

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-left: var(--formitem_padding);
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .Removable__action {
@@ -102,7 +102,7 @@
 
 .Removable--ios .Removable__content {
   padding-left: 0;
-  padding-right: var(--formitem_padding);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .FormLayoutGroup--removable .Removable__content {

package/src/components/RichCell/RichCell.css

@@ -12,7 +12,7 @@
 .FormItem .RichCell {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .RichCell--mult {

package/src/components/SimpleCell/SimpleCell.css

@@ -254,5 +254,5 @@
  * FormItem
  */
 .FormItem > .SimpleCell {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/Tooltip/Readme.md

@@ -48,12 +48,12 @@ class Example extends React.Component {
           <PanelHeader>Tooltip</PanelHeader>
           <Group>
             <List>
-              <Cell>Музыка</Cell>
-              <Cell>Видео</Cell>
-              <Cell>Игры</Cell>
-              <Cell>Закладки</Cell>
-              <Cell>Документы</Cell>
-              <Cell>Денежные переводы</Cell>
+              <SimpleCell>Музыка</SimpleCell>
+              <SimpleCell>Видео</SimpleCell>
+              <SimpleCell>Игры</SimpleCell>
+              <SimpleCell>Закладки</SimpleCell>
+              <SimpleCell>Документы</SimpleCell>
+              <SimpleCell>Денежные переводы</SimpleCell>
             </List>
           </Group>
           <Group>
@@ -64,9 +64,11 @@ class Example extends React.Component {
               onClose={() => this.setState({ tooltip: false })}
               offsetX={10}
             >
-              <Cell onClick={() => this.setState({ activePanel: "tooltip2" })}>
+              <SimpleCell
+                onClick={() => this.setState({ activePanel: "tooltip2" })}
+              >
                 VK Pay
-              </Cell>
+              </SimpleCell>
             </Tooltip>
           </Group>
         </Panel>
@@ -74,39 +76,25 @@ class Example extends React.Component {
         <Panel id="tooltip2">
           <PanelHeader
             left={
-              <PanelHeaderButton
-                onClick={() => this.setState({ activePanel: "tooltip" })}
+              <Tooltip
+                isShown={this.state.tooltip2}
+                onClose={() =>
+                  this.setState({ tooltip2: false, tooltip3: true })
+                }
+                text="Нажмите на кнопку, если хотите вернуться"
+                header="Возвратиться"
               >
-                {this.props.platform === ANDROID ||
-                this.props.platform === VKCOM ? (
-                  <Icon24Back />
-                ) : (
-                  <Icon28ChevronBack />
-                )}
-              </PanelHeaderButton>
-            }
-            right={
-              <PanelHeaderButton>
-                <Tooltip
-                  isShown={this.state.tooltip2}
-                  onClose={() =>
-                    this.setState({ tooltip2: false, tooltip3: true })
-                  }
-                  cornerOffset={-10}
-                  offsetX={7}
-                  text="Обновлённый раздел поможет найти друзей"
-                  header="Рекомендации друзей"
-                >
-                  <Icon24Add />
-                </Tooltip>
-              </PanelHeaderButton>
+                <PanelHeaderBack
+                  onClick={() => this.setState({ activePanel: "tooltip" })}
+                />
+              </Tooltip>
             }
           >
             Tooltip
           </PanelHeader>
           <Group>
             <List>
-              <Cell
+              <SimpleCell
                 before={
                   <Tooltip
                     text="Теперь у нас появились аватарки в списках. Правда круто?"
@@ -120,25 +108,25 @@ class Example extends React.Component {
                 description="Веб-сайт"
               >
                 Команда ВКонтакте
-              </Cell>
-              <Cell before={<Avatar />} description="Музыкант">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Музыкант">
                 Robbie Williams
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
+              </SimpleCell>
             </List>
           </Group>
         </Panel>

package/src/hooks/useAdaptivity.ts

@@ -3,10 +3,25 @@ import {
   AdaptivityContext,
   AdaptivityProps,
   AdaptivityContextInterface,
+  ViewWidth,
+  ViewHeight,
 } from "../components/AdaptivityProvider/AdaptivityContext";
+import { usePlatform } from "./usePlatform";
+import { VKCOM } from "../lib/platform";
 
 export type { AdaptivityProps };
 
 export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };
+
+export const useAdaptivityIsDesktop = (): boolean => {
+  const platform = usePlatform();
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+
+  return (
+    (viewWidth >= ViewWidth.SMALL_TABLET &&
+      (hasMouse || viewHeight >= ViewHeight.MEDIUM)) ||
+    platform === VKCOM
+  );
+};

package/src/index.ts

@@ -308,6 +308,7 @@ export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
 export { usePagination } from "./hooks/usePagination";
+export { useScrollLock } from "./components/AppRoot/ScrollContext";
 
 /**
  * Utils

package/src/styles/constants.css

@@ -32,6 +32,7 @@
   --thin-border: 1px;
 
   /* paddings */
+  /* TODO: v5 удалить */
   --formitem_padding: 16px;
 
   /* colors */

package/tsconfig.json

@@ -29,6 +29,7 @@
     ".github/**/*.js",
     "eslint-plugin-vkui/*.js",
     "postcss-plugin-vk-sans/*.js",
+    "postcss-custom-properties-fallback/*.js",
     "*.js"
   ],
   "files": [