@vkontakte/vkui 4.35.1 → 4.36.0

package/src/components/ModalPage/ModalPage.css

@@ -1,4 +1,6 @@
 .ModalPage {
+  display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -9,9 +11,7 @@
 }
 
 .ModalPage--desktop {
-  display: flex;
   align-items: center;
-  justify-content: center;
 }
 
 .ModalPage__in-wrap {
@@ -26,22 +26,65 @@
   transition: transform 320ms var(--android-easing);
 }
 
-.ModalRoot--switching .ModalPage__in-wrap {
-  pointer-events: none;
+.ModalPage--ios .ModalPage__in-wrap {
+  transition: transform 400ms var(--ios-easing);
+}
+
+.ModalPage--desktop .ModalPage__in-wrap {
+  position: relative;
+  align-items: initial;
+  margin: 32px 56px;
+  height: auto;
+  max-height: 640px;
+  opacity: 0;
+  transform: none;
+  transition: opacity 340ms var(--android-easing);
+}
+
+@media (max-height: 672px) {
+  .ModalPage--desktop .ModalPage__in-wrap {
+    max-height: calc(100% - 32px * 2);
+  }
+}
+
+.ModalPage--s .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_small--regular);
+}
+
+.ModalPage--m .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_medium--regular);
+}
+
+.ModalPage--l .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_large--regular);
+}
+
+/* Для VKCOM `size` работать не будет */
+.ModalPage--vkcom .ModalPage__in-wrap {
+  max-width: 448px;
 }
 
 .ModalPage__in {
-  width: 416px;
-  max-width: 100%;
-  margin: 0 auto;
-  background: var(--background_content);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_modal)
+  );
   overflow: visible;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: 12px 12px 0 0;
+  border-top-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-top-left-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.ModalPage--desktop .ModalPage__in {
+  height: auto;
+  box-shadow: var(--vkui--elevation3);
+  border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 .ModalPage__header {
@@ -75,72 +118,35 @@
   padding-bottom: var(--safe-area-inset-bottom);
 }
 
-.ModalRoot__modal--collapsed .ModalPage__content,
-.ModalRoot__modal--dragging .ModalPage__content {
-  overflow: hidden;
-  touch-action: pan-y;
-}
-
 .ModalPage__footer {
-  background: var(--background_content);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_modal)
+  );
   position: relative;
   z-index: 10;
 }
 
-.ModalRoot--touched .ModalPage__footer {
-  transition: none;
-}
-
-/**
- * iOS
- */
-.ModalPage--ios .ModalPage__in-wrap {
-  transition: transform 400ms var(--ios-easing);
-}
-
-.ModalPage--ios .ModalPage__in {
-  border-radius: 14px 14px 0 0;
-}
-
 /**
- * VKCOM
+ * CMP:
+ * ModalRoot
+ *
+ * [дополнительно] также ищи в файле `ModalRoot__modal--expandable`
  */
-.ModalPage--vkcom .ModalPage__in {
-  border-radius: 8px 8px 0 0;
-  width: 448px;
-}
-
-/**
- * desktop
- */
-
-.ModalPage--desktop .ModalPage__in-wrap {
-  align-items: center;
-  opacity: 0;
-  transition: opacity 340ms var(--android-easing);
-  width: auto;
-  height: auto;
-  position: relative;
-  transform: none;
+.ModalRoot--touched .ModalPage__in-wrap {
+  transition: none;
 }
 
-.ModalPage--desktop .ModalPage__in {
-  height: auto;
-  max-height: 640px;
-  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
+.ModalRoot--switching .ModalPage__in-wrap {
+  pointer-events: none;
 }
 
-@media (max-height: 672px) {
-  .ModalPage--desktop .ModalPage__in {
-    max-height: calc(100vh - 32px);
-  }
+.ModalRoot__modal--collapsed .ModalPage__content,
+.ModalRoot__modal--dragging .ModalPage__content {
+  overflow: hidden;
+  touch-action: pan-y;
 }
 
-/**
- * common
- */
-
-.ModalRoot--touched .ModalPage__in-wrap {
+.ModalRoot--touched .ModalPage__footer {
   transition: none;
 }

package/src/components/ModalPage/ModalPage.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import {
   ModalRootContext,
@@ -7,7 +6,7 @@ import {
 } from "../ModalRoot/ModalRootContext";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useOrientationChange } from "../../hooks/useOrientationChange";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
@@ -29,6 +28,14 @@ export interface ModalPageProps
    * Шапка модальной страницы, `<ModalPageHeader />`
    */
   header?: React.ReactNode;
+  /**
+   * Задаёт контенту максимальную ширину.
+   *
+   * > ⚠️ **Заметки:**
+   * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `"s"`
+   * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.
+   */
+  size?: "s" | "m" | "l";
   /**
    * Будет вызвано при начале открытия модалки.
    */
@@ -54,6 +61,10 @@ export interface ModalPageProps
    */
   dynamicContentHeight?: boolean;
   getModalContentRef?: React.Ref<HTMLDivElement>;
+  /**
+   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+   */
+  hideCloseButton?: boolean;
 }
 
 const warn = warnOnce("ModalPage");
@@ -61,6 +72,7 @@ const warn = warnOnce("ModalPage");
 const ModalPageComponent = ({
   children,
   header,
+  size: sizeProp = "s",
   viewWidth,
   viewHeight,
   sizeX,
@@ -74,6 +86,7 @@ const ModalPageComponent = ({
   getModalContentRef,
   nav,
   id,
+  hideCloseButton = false,
   ...restProps
 }: ModalPageProps & AdaptivityContextInterface) => {
   const { updateModalHeight } = React.useContext(ModalRootContext);
@@ -88,8 +101,8 @@ const ModalPageComponent = ({
   ]);
 
   const isDesktop = useAdaptivityIsDesktop();
-  const canShowCloseBtn =
-    viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
+  const isCloseButtonShown = !hideCloseButton && isDesktop;
+  const size = isDesktop ? sizeProp : "s";
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(
@@ -101,13 +114,13 @@ const ModalPageComponent = ({
     <div
       {...restProps}
       id={id}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("ModalPage", platform),
-        `ModalPage--sizeX-${sizeX}`,
-        {
-          "ModalPage--desktop": isDesktop,
-        }
+        "ModalPage",
+        platform === Platform.IOS && "ModalPage--ios",
+        platform === Platform.VKCOM && "ModalPage--vkcom",
+        `ModalPage--sizeX-${sizeX}`, // TODO v5.0.0 поправить под новую адаптивность
+        isDesktop && "ModalPage--desktop",
+        size && `ModalPage--${size}`
       )}
     >
       <div vkuiClass="ModalPage__in-wrap" ref={refs.innerElement}>
@@ -127,7 +140,7 @@ const ModalPageComponent = ({
               <div vkuiClass="ModalPage__content-in">{children}</div>
             </div>
           </div>
-          {canShowCloseBtn && (
+          {isCloseButtonShown && (
             <ModalDismissButton onClick={onClose || modalContext.onClose} />
           )}
         </div>

package/src/components/ModalPageHeader/ModalPageHeader.css

@@ -1,24 +1,21 @@
 .ModalPageHeader {
-  position: relative;
-  z-index: 2;
-
   --safe-area-inset-top: 0;
-}
 
-.ModalPageHeader--desktop.ModalPageHeader--android {
-  padding-left: 6px;
-  padding-right: 6px;
+  position: relative;
+  z-index: 2;
 }
 
-.ModalPageHeader--desktop.ModalPageHeader--ios {
-  padding-left: 4px;
+.ModalPageHeader--withGaps {
   padding-right: 4px;
+  padding-left: 4px;
 }
 
-.ModalPageHeader .Icon--dismiss_24 {
-  color: var(--placeholder_icon_foreground_primary);
+.ModalPageHeader--desktop.ModalPageHeader--withGaps {
+  padding-right: 8px;
+  padding-left: 8px;
 }
 
+.ModalPageHeader .Icon--dismiss_24, /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
 .ModalPageHeader .Icon--cancel_24 {
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -6,7 +6,6 @@ import { VKCOM } from "../../lib/platform";
 import { Separator } from "../Separator/Separator";
 import { PanelHeader, PanelHeaderProps } from "../PanelHeader/PanelHeader";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import "./ModalPageHeader.css";
 
 export interface ModalPageHeaderProps
@@ -25,12 +24,14 @@ export const ModalPageHeader = ({
 }: ModalPageHeaderProps) => {
   const platform = usePlatform();
   const hasSeparator = separator && platform === VKCOM;
+  // TODO v5.0.0 поправить под новую адаптивность
   const isDesktop = useAdaptivityIsDesktop();
 
   return (
     <div
       vkuiClass={classNames(
-        getClassName("ModalPageHeader", platform),
+        "ModalPageHeader",
+        platform !== VKCOM && "ModalPageHeader--withGaps",
         isDesktop && "ModalPageHeader--desktop"
       )}
       ref={getRef}

package/src/components/ModalRoot/ModalRoot.tsx

@@ -670,15 +670,12 @@ class ModalRootTouchComponent extends React.Component<
       <TouchRootContext.Provider value={true}>
         <ModalRootContext.Provider value={this.modalRootContext}>
           <Touch
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames(
               getClassName("ModalRoot", this.props.platform),
-              {
-                "ModalRoot--vkapps":
-                  this.props.configProvider?.webviewType === WebviewType.VKAPPS,
-                "ModalRoot--touched": touchDown,
-                "ModalRoot--switching": !!(enteringModal || exitingModal),
-              }
+              this.props.configProvider?.webviewType === WebviewType.VKAPPS &&
+                "ModalRoot--vkapps",
+              touchDown && "ModalRoot--touched",
+              !!(enteringModal || exitingModal) && "ModalRoot--switching"
             )}
             onMove={this.onTouchMove}
             onEnd={this.onTouchEnd}
@@ -715,23 +712,26 @@ class ModalRootTouchComponent extends React.Component<
                     }}
                     onClose={this.props.onExit}
                     timeout={this.timeout}
-                    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-                    vkuiClass={classNames("ModalRoot__modal", {
-                      "ModalRoot__modal--active": modalId === activeModal,
-                      "ModalRoot__modal--prev": modalId === exitingModal,
-                      "ModalRoot__modal--next":
-                        (exitingModal && modalId === activeModal) ||
-                        modalId === enteringModal,
-
-                      "ModalRoot__modal--dragging": dragging,
-
-                      "ModalRoot__modal--expandable":
-                        isPage && modalState.expandable,
-                      "ModalRoot__modal--expanded":
-                        isPage && modalState.expanded,
-                      "ModalRoot__modal--collapsed":
-                        isPage && modalState.collapsed,
-                    })}
+                    vkuiClass={classNames(
+                      "ModalRoot__modal",
+                      modalId === activeModal && "ModalRoot__modal--active",
+                      modalId === exitingModal && "ModalRoot__modal--prev",
+                      ((exitingModal && modalId === activeModal) ||
+                        modalId === enteringModal) &&
+                        "ModalRoot__modal--next",
+
+                      dragging && "ModalRoot__modal--dragging",
+
+                      isPage &&
+                        modalState.expandable &&
+                        "ModalRoot__modal--expandable",
+                      isPage &&
+                        modalState.expanded &&
+                        "ModalRoot__modal--expanded",
+                      isPage &&
+                        modalState.collapsed &&
+                        "ModalRoot__modal--collapsed"
+                    )}
                     restoreFocus={false}
                   >
                     {Modal}

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -220,13 +220,10 @@ class ModalRootDesktopComponent extends React.Component<
     return (
       <ModalRootContext.Provider value={this.modalRootContext}>
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames(
             getClassName("ModalRoot", this.props.platform),
-            {
-              "ModalRoot--vkapps":
-                this.props.configProvider?.webviewType === WebviewType.VKAPPS,
-            },
+            this.props.configProvider?.webviewType === WebviewType.VKAPPS &&
+              "ModalRoot--vkapps",
             "ModalRoot--desktop"
           )}
         >
@@ -250,16 +247,17 @@ class ModalRootDesktopComponent extends React.Component<
                   onClose={this.props.onExit}
                   timeout={this.timeout}
                   key={key}
-                  // eslint-disable-next-line vkui/no-object-expression-in-arguments
-                  vkuiClass={classNames("ModalRoot__modal", {
-                    "ModalRoot__modal--active":
-                      !exitingModal &&
+                  vkuiClass={classNames(
+                    "ModalRoot__modal",
+                    !exitingModal &&
                       !enteringModal &&
-                      modalId === activeModal,
-                    "ModalRoot__modal--prev": modalId === exitingModal,
-                    "ModalRoot__modal--next":
-                      Boolean(exitingModal) && modalId === activeModal,
-                  })}
+                      modalId === activeModal &&
+                      "ModalRoot__modal--active",
+                    modalId === exitingModal && "ModalRoot__modal--prev",
+                    Boolean(exitingModal) &&
+                      modalId === activeModal &&
+                      "ModalRoot__modal--next"
+                  )}
                 >
                   {Modal}
                 </FocusTrap>

package/src/components/ModalRoot/Readme.md

@@ -5,8 +5,8 @@
 
 Этот компонент должен быть передан в качестве свойства `modal` компоненту [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).
 
-**Важно:** структура модальных страниц и карточек должна определяться единожды на старте приложения. Структура – это _декларация_ приложения.
-То есть, один раз определив структуру вида:
+> ⚠️ Структура модальных страниц и карточек должна определяться единожды на старте приложения. Структура – это _декларация_ приложения.
+> То есть, один раз определив структуру вида:
 
 ```jsx static
 class App extends Component {
@@ -155,6 +155,7 @@ const App = withPlatform(
               id={MODAL_PAGE_FULLSCREEN}
               onClose={this.modalBack}
               settlingHeight={100}
+              hideCloseButton={platform === IOS}
               header={
                 <ModalPageHeader
                   before={
@@ -567,7 +568,11 @@ const App = withPlatform(
 <App />;
 ```
 
-### Решение проблем
+### FAQ
+
+#### Как поменять максимальную ширину контента?
+
+Используйте параметр `size`.
 
 #### Я указал `dynamicContentHeight` у `ModalPage`, но высота модальной страницы не меняется
 

package/src/components/NativeSelect/NativeSelect.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, HasRef, HasRootRef } from "../../types";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
@@ -21,7 +21,8 @@ export interface NativeSelectProps
     HasRef<HTMLSelectElement>,
     HasRootRef<HTMLLabelElement>,
     HasAlign,
-    AdaptivityProps {
+    AdaptivityProps,
+    Pick<FormFieldProps, "status"> {
   placeholder?: string;
   multiline?: boolean;
   selectType?: keyof typeof SelectType;
@@ -47,6 +48,7 @@ const NativeSelectComponent = ({
   sizeY,
   multiline,
   selectType = SelectType.default,
+  status,
   ...restProps
 }: NativeSelectProps & AdaptivityContextInterface) => {
   const platform = usePlatform();
@@ -80,6 +82,7 @@ const NativeSelectComponent = ({
       getRootRef={getRootRef}
       disabled={disabled}
       after={<DropdownIcon />}
+      status={status}
     >
       <select
         {...restProps}

package/src/components/Panel/Panel.css

@@ -40,49 +40,74 @@
   box-sizing: border-box;
 }
 
-.Panel__centered .PanelHeader--ios.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height_ios);
+.Panel__centered .PanelHeader--vis + * {
+  margin-top: var(
+    --panelheader_height,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
-.Panel__centered .PanelHeader--android.PanelHeader--vis + *,
-.Panel__centered .PanelHeader--vkcom.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height);
+.Panel__centered .PanelHeader--ios.PanelHeader--vis + * {
+  margin-top: var(
+    --panelheader_height_ios,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
-.Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
-  margin-top: calc(var(--panelheader_height_ios) + 5px);
+.Panel--sizeX-compact .Panel__centered .PanelHeader--sep + * {
+  margin-top: calc(
+    var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) +
+      5px
+  );
 }
 
-.Panel--sizeX-compact
-  .Panel__centered
-  .PanelHeader--android.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height) + 5px);
+.Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
+  margin-top: calc(
+    var(
+        --panelheader_height_ios,
+        var(--vkui--size_panel_header_height--regular)
+      ) + 5px
+  );
 }
 
 .Panel--sizeX-compact
   .Panel__centered
   .PanelHeader--vkcom.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_vkcom) + 5px);
+  margin-top: calc(
+    var(
+        --panelheader_height_vkcom,
+        var(--vkui--size_panel_header_height--regular)
+      ) + 5px
+  );
 }
 
-.Panel--sizeX-regular .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
-  margin-top: calc(var(--panelheader_height_ios) + 16px);
+.Panel--sizeX-regular .Panel__centered .PanelHeader--sep + * {
+  margin-top: calc(
+    var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) +
+      16px
+  );
 }
 
-.Panel--sizeX-regular
-  .Panel__centered
-  .PanelHeader--android.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height) + 16px);
+.Panel--sizeX-regular .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
+  margin-top: calc(
+    var(
+        --panelheader_height_ios,
+        var(--vkui--size_panel_header_height--regular)
+      ) + 16px
+  );
 }
 
 .Panel--sizeX-regular
   .Panel__centered
   .PanelHeader--vkcom.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_vkcom) + 16px);
+  margin-top: calc(
+    var(
+        --panelheader_height_vkcom,
+        var(--vkui--size_panel_header_height--regular)
+      ) + 16px
+  );
 }
 
 .Epic .Panel__in {
@@ -107,10 +132,13 @@
 
 .Panel .Panel__in,
 .Panel::after {
-  background-color: var(--background_content);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
 }
 
-.Panel.Panel--regular .Panel__in,
-.Panel.Panel--regular::after {
+.Panel.Panel--sizeX-regular .Panel__in,
+.Panel.Panel--sizeX-regular::after {
   background-color: transparent;
 }

package/src/components/Panel/Panel.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { Touch } from "../Touch/Touch";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import { HasRootRef } from "../../types";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { IOS } from "../../lib/platform";
+import { IOS, VKCOM } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { NavIdProps } from "../../lib/getNavId";
 import {
@@ -33,14 +32,13 @@ export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
       <div
         {...restProps}
         ref={getRootRef}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
-          getClassName("Panel", platform),
-          `Panel--${sizeX}`,
-          {
-            "Panel--centered": centered,
-            [`Panel--sizeX-${sizeX}`]: true,
-          }
+          "Panel",
+          platform === IOS && "Panel--ios",
+          platform === VKCOM && "Panel--vkcom",
+          // TODO v5.0.0 поправить под новую адаптивность
+          `Panel--sizeX-${sizeX}`,
+          centered && "Panel--centered"
         )}
       >
         <Touch Component={TooltipContainer} vkuiClass="Panel__in">