@vkontakte/vkui 4.29.0 → 4.31.0

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -4,10 +4,9 @@ import { HasRef } from "../../types";
 import { VKCOM } from "../../lib/platform";
 import PanelHeader, { PanelHeaderProps } from "../PanelHeader/PanelHeader";
 import Separator from "../Separator/Separator";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalPageHeader.css";
 
 export interface ModalPageHeaderProps
@@ -22,11 +21,8 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
   ...restProps
 }: ModalPageHeaderProps) => {
   const platform = usePlatform();
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const hasSeparator = separator && platform === VKCOM;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   return (
     <div

package/src/components/ModalRoot/ModalRoot.css

@@ -34,13 +34,14 @@
   pointer-events: none;
 }
 
-:not(.ModalRoot--desktop).ModalRoot--ios .ModalRoot__viewport {
+:not(.ModalRoot--desktop).ModalRoot--ios .ModalRoot__viewport,
+:not(.ModalRoot--desktop).ModalRoot--android .ModalRoot__viewport {
   top: var(--safe-area-inset-top);
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: var(--panelheader_height_android);
+  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_android));
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios

package/src/components/ModalRoot/ModalRoot.tsx

@@ -293,7 +293,7 @@ class ModalRootTouchComponent extends React.Component<
     if (!prevModalState) {
       id &&
         warn(
-          `closeActiveModal: Modal ${id} does not exist - not closing`,
+          `closeActiveModal: модальное окно (страница) ${id} не существует`,
           "error"
         );
       return;
@@ -766,7 +766,11 @@ function initModal(modalState: ModalsStateEntry) {
     case ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn("initActiveModal: modalState.type is unknown", "error");
+      IS_DEV &&
+        warn(
+          `initActiveModal: modalState.type="${modalState.type}" не поддерживается`,
+          "error"
+        );
   }
 }
 

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -1,15 +1,13 @@
 import * as React from "react";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { ModalRootTouch } from "./ModalRoot";
 import { ModalRootDesktop } from "./ModalRootDesktop";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useScrollLock } from "../AppRoot/ScrollContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 
 export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
@@ -38,10 +36,9 @@ export interface ModalRootProps extends AdaptivityProps {
 const ModalRootComponent: React.FC<
   ModalRootProps & AdaptivityContextInterface
 > = (props) => {
-  const { viewWidth, viewHeight, hasMouse } = props;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
+
+  useScrollLock(!!props.activeModal);
 
   const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;
 

package/src/components/ModalRoot/Readme.md

@@ -39,7 +39,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx { "props": { "layout": false, "adaptivity": true } }
+```jsx { "props": { "layout": false, "adaptivity": true, "webviewType": true } }
 const MODAL_PAGE_FILTERS = "filters";
 const MODAL_PAGE_COUNTRIES = "countries";
 const MODAL_PAGE_STORY_FEEDBACK = "story-feedback";

package/src/components/ModalRoot/useModalManager.tsx

@@ -133,7 +133,10 @@ export function useModalManager(
   useIsomorphicLayoutEffect(() => {
     // ignore non-existent activeModal
     if (process.env.NODE_ENV === "development" && isMissing) {
-      warn(`Can't transition - modal ${activeModal} not found`, "error");
+      warn(
+        `Переход невозможен - модальное окно (страница) ${activeModal} не существует`,
+        "error"
+      );
     }
     dispatchTransition({ type: "setActive", id: safeActiveModal ?? null });
   }, [activeModal]);

package/src/components/NativeSelect/NativeSelect.tsx

@@ -34,7 +34,7 @@ export interface SelectState {
   notSelected?: boolean;
 }
 
-const NativeSelect: React.FC<
+const NativeSelectComponent: React.FC<
   NativeSelectProps & AdaptivityContextInterface
 > = ({
   style,
@@ -107,8 +107,7 @@ const NativeSelect: React.FC<
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(NativeSelect, {
+export const NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true,
 });

package/src/components/PanelHeader/PanelHeader.css

@@ -66,10 +66,6 @@
   min-width: 90px;
 }
 
-.PanelHeader--sizeX-compact .PanelHeader__separator {
-  padding-top: 4px;
-}
-
 /**
  * iOS
  */
@@ -151,14 +147,6 @@
 /**
  * Android
  */
-
-@supports not (padding-top: env(safe-area-inset-top)) {
-  .PanelHeader--android,
-  .PanelHeader--vkcom {
-    --safe-area-inset-top: 0px;
-  }
-}
-
 .PanelHeader--android ~ .FixedLayout--top,
 .PanelHeader--android ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
   top: calc(var(--panelheader_height_android) + var(--safe-area-inset-top));
@@ -242,13 +230,25 @@
   top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
 }
 
-.PanelHeader--vkcom.PanelHeader--sep .PanelHeader__in {
+/* 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);
+  right: var(--thin-border);
+  bottom: 0;
+  height: var(--thin-border);
+  background-color: var(--header_background);
+  content: "";
+}
+
 .PanelHeader--vkcom .PanelHeader__content {
   text-align: center;
 }

package/src/components/PanelHeader/PanelHeader.tsx

@@ -44,25 +44,29 @@ const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
   children,
   left,
   right,
+  separator,
 }) => {
   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__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>
+      {separator && platform === VKCOM && <Separator wide />}
+    </React.Fragment>
   );
 };
 
@@ -121,10 +125,7 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
         <PanelHeaderIn {...props} />
       )}
       {separator && visor && platform !== VKCOM && (
-        <Separator
-          vkuiClass="PanelHeader__separator"
-          expanded={sizeX === SizeType.REGULAR}
-        />
+        <Separator expanded={sizeX === SizeType.REGULAR} />
       )}
     </div>
   );

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);

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -9,6 +9,7 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./PanelHeaderContext.css";
 
 export interface PanelHeaderContextProps
@@ -35,6 +36,8 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
     opened && setVisible(true);
   }, [opened]);
 
+  useScrollLock(!isDesktop && opened);
+
   // start closing on outer click
   useGlobalEventListener(
     document,

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

@@ -3,6 +3,7 @@ import Spinner, { SpinnerProps } from "../Spinner/Spinner";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./ScreenSpinner.css";
 
 export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
@@ -14,6 +15,8 @@ const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
   const { style, className, ...restProps } = props;
   const platform = usePlatform();
 
+  useScrollLock();
+
   return (
     <PopoutWrapper
       hasMask={false}

package/src/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import NativeSelect from "../NativeSelect/NativeSelect";
+import { NativeSelect } from "../NativeSelect/NativeSelect";
 import { CustomSelect, CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
 import {
   withAdaptivity,
@@ -21,10 +21,10 @@ export interface SelectMimicryProps
   extends React.HTMLAttributes<HTMLElement>,
     HasAlign,
     HasRootRef<HTMLElement>,
-    AdaptivityProps {
+    AdaptivityProps,
+    Pick<FormFieldProps, "before" | "after"> {
   multiline?: boolean;
   disabled?: boolean;
-  after?: React.ReactNode;
   selectType?: SelectType;
 }
 
@@ -39,6 +39,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   onClick,
   sizeX,
   sizeY,
+  before,
   after = <DropdownIcon />,
   selectType = SelectType.Default,
   ...restProps
@@ -68,6 +69,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      before={before}
       after={after}
     >
       <TypographyComponent

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/Snackbar/Snackbar.css

@@ -46,6 +46,7 @@
   flex: 1;
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 .Snackbar--l-vertical .Snackbar__content {
@@ -55,10 +56,12 @@
 
 .Snackbar__content-text {
   flex: 1;
-}
-
-.Snackbar__content-text {
   color: var(--text_primary);
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .Snackbar--l-horizontal .Snackbar__action {

package/src/components/SplitLayout/SplitLayout.css

@@ -26,7 +26,9 @@
 
 .SplitLayout--android .SplitLayout__inner--header,
 .SplitLayout--vkcom .SplitLayout__inner--header {
-  margin-top: calc(-1 * var(--panelheader_height_android));
+  margin-top: calc(
+    -1 * calc(var(--panelheader_height_android) + var(--safe-area-inset-top))
+  );
 }
 
 .SplitLayout__popout {

package/src/components/Switch/Readme.md

@@ -5,51 +5,27 @@
   <Panel id="switch">
     <PanelHeader>Switch</PanelHeader>
     <Group>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch aria-label="Комментарии к записям" />}
-      >
+      <SimpleCell Component="label" after={<Switch />}>
         Комментарии к записям
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch defaultChecked aria-label="Ссылки" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" after={<Switch defaultChecked />}>
         Ссылки
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch disabled aria-label="Фотоальбомы" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" disabled after={<Switch disabled />}>
         Фотоальбомы
-      </Cell>
+      </SimpleCell>
     </Group>
     <Group header={<Header mode="secondary">Компактный вид</Header>}>
       <AdaptivityProvider sizeY="compact">
-        <Cell
-          role={null}
-          disabled
-          after={<Switch aria-label="Комментарии к записям" />}
-        >
+        <SimpleCell Component="label" after={<Switch />}>
           Комментарии к записям
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch defaultChecked aria-label="Ссылки" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" after={<Switch defaultChecked />}>
           Ссылки
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch disabled aria-label="Фотоальбомы" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" disabled after={<Switch disabled />}>
           Фотоальбомы
-        </Cell>
+        </SimpleCell>
       </AdaptivityProvider>
     </Group>
   </Panel>

package/src/components/TabbarItem/TabbarItem.tsx

@@ -16,7 +16,7 @@ export interface TabbarItemProps
     HasComponent {
   selected?: boolean;
   /**
-   * Тест рядом с иконкой
+   * Текст рядом с иконкой
    */
   text?: React.ReactNode;
   /**