@vkontakte/vkui 4.35.4 → 4.37.0

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,75 @@
   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);
+/* TODO: v5.0.0 новая адаптивность - 6 селекторов внизу */
+.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 +133,14 @@
 
 .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 {
+/* TODO: v5.0.0 новая адаптивность */
+.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">

package/src/components/PanelHeader/PanelHeader.css

@@ -21,7 +21,7 @@
   align-items: center;
   white-space: nowrap;
   position: relative;
-  background: var(--header_background);
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 .PanelHeader--trnsp .PanelHeader__in {
@@ -34,7 +34,7 @@
 
 .PanelHeader__before {
   box-sizing: border-box;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent_themed));
   display: flex;
   flex-shrink: 0;
 }
@@ -50,14 +50,17 @@
 }
 
 .PanelHeader__content-in {
-  color: var(--header_text);
+  color: var(--header_text, var(--vkui--color_text_primary));
   font-weight: 500;
   font-family: var(--font-display);
 }
 
 .PanelHeader::before,
 .PanelHeader__in {
-  height: var(--panelheader_height);
+  height: var(
+    --panelheader_height,
+    var(--vkui--size_panel_header_height--regular)
+  );
   padding-top: var(--safe-area-inset-top);
 }
 
@@ -65,7 +68,7 @@
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent_themed));
 }
 
 .PanelHeader--vkapps .PanelHeader__after {
@@ -76,7 +79,10 @@
  * iOS
  */
 .PanelHeader--ios {
-  --panelheader_height: var(--panelheader_height_ios);
+  --panelheader_height: var(
+    --panelheader_height_ios,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 .PanelHeader--ios .PanelHeader__before {
@@ -197,7 +203,10 @@
  * VKCOM
  */
 .PanelHeader--vkcom {
-  --panelheader_height: var(--panelheader_height_vkcom);
+  --panelheader_height: var(
+    --panelheader_height_vkcom,
+    var(--vkui--size_panel_header_height--regular)
+  );
 
   position: relative;
   z-index: 10;
@@ -210,7 +219,10 @@
   right: var(--thin-border);
   bottom: 0;
   height: var(--thin-border);
-  background-color: var(--header_background);
+  background-color: var(
+    --header_background,
+    var(--vkui--color_background_content)
+  );
   content: "";
 }
 

package/src/components/PanelHeader/PanelHeader.tsx

@@ -127,20 +127,19 @@ const PanelHeaderComponent = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("PanelHeader", platform),
-        {
-          "PanelHeader--trnsp": transparent,
-          "PanelHeader--shadow": needShadow,
-          "PanelHeader--vis": visor,
-          "PanelHeader--sep": separator && visor,
-          "PanelHeader--vkapps":
-            webviewType === WebviewType.VKAPPS && !isInsideModal,
-          "PanelHeader--no-before": !before,
-          "PanelHeader--no-after": !after,
-          "PanelHeader--fixed": isFixed,
-        },
+        transparent && "PanelHeader--trnsp",
+        needShadow && "PanelHeader--shadow",
+        visor && "PanelHeader--vis",
+        separator && visor && "PanelHeader--sep",
+        webviewType === WebviewType.VKAPPS &&
+          !isInsideModal &&
+          "PanelHeader--vkapps",
+        !before && "PanelHeader--no-before",
+        !after && "PanelHeader--no-after",
+        isFixed && "PanelHeader--fixed",
+        // TODO v5.0.0 поправить под новую адаптивность
         `PanelHeader--sizeX-${sizeX}`
       )}
       ref={isFixed ? getRootRef : getRef}

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -15,7 +15,6 @@ import {
   SizeType,
   AdaptivityProps,
 } from "../../hoc/withAdaptivity";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import "./PanelHeaderBack.css";
 
@@ -41,10 +40,12 @@ export const PanelHeaderBackComponent = ({
     <PanelHeaderButton
       {...restProps}
       aria-label={ariaLabel}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
-        "PanelHeaderBack--has-label": showLabel && !!label,
-      })}
+      vkuiClass={classNames(
+        "PanelHeaderBack",
+        platform === IOS && "PanelHeaderBack--ios",
+        platform === VKCOM && "PanelHeaderBack--vkcom",
+        showLabel && !!label && "PanelHeaderBack--has-label"
+      )}
       label={showLabel && label}
     >
       {platform === ANDROID && <Icon28ArrowLeftOutline />}

package/src/components/PanelHeaderButton/PanelHeaderButton.css

@@ -21,6 +21,12 @@
   right: 2px;
 }
 
+.PanelHeaderButton--primitive {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 12px;
+}
+
 /*
  * iOS
  */
@@ -35,7 +41,6 @@
 .PanelHeaderButton--ios.PanelHeaderButton--primitive {
   height: 44px;
   line-height: 44px;
-  padding: 0 12px;
 }
 
 .PanelHeaderButton--ios .Icon--24 {
@@ -50,16 +55,10 @@
  * Android
  */
 
-.PanelHeaderButton--android {
+.PanelHeaderButton--android.PanelHeaderButton--notPrimitive {
   border-radius: 50%;
 }
 
-.PanelHeaderButton--android.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 12px;
-}
-
 .PanelHeaderButton--android .Icon--24 {
   padding: 12px;
 }
@@ -72,7 +71,7 @@
 * VKCOM
 */
 .PanelHeaderButton--vkcom {
-  color: var(--header_text_secondary);
+  color: var(--header_text_secondary, var(--vkui--color_text_secondary));
 }
 
 .PanelHeaderButton--vkcom > :not(.Counter) {
@@ -91,12 +90,6 @@
   padding: 10px;
 }
 
-.PanelHeaderButton--vkcom.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 10px;
-}
-
 .PanelHeaderButton--vkcom.PanelHeaderButton--notPrimitive {
   border-radius: 50%;
 }

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -88,12 +88,12 @@ export const PanelHeaderButton = ({
       Component={restProps.href ? "a" : "button"}
       activeEffectDelay={200}
       activeMode={activeMode}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderButton", platform), {
-        "PanelHeaderButton--primary": primary,
-        "PanelHeaderButton--primitive": isPrimitive,
-        "PanelHeaderButton--notPrimitive": !isPrimitive && !isPrimitiveLabel,
-      })}
+      vkuiClass={classNames(
+        getClassName("PanelHeaderButton", platform),
+        primary && "PanelHeaderButton--primary",
+        isPrimitive && "PanelHeaderButton--primitive",
+        !isPrimitive && !isPrimitiveLabel && "PanelHeaderButton--notPrimitive"
+      )}
     >
       {isPrimitive ? (
         <ButtonTypography primary={primary}>{children}</ButtonTypography>

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -3,7 +3,7 @@ import {
   PanelHeaderButton,
   PanelHeaderButtonProps,
 } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { getTitleFromChildren } from "../../lib/utils";
 import { usePlatform } from "../../hooks/usePlatform";
 
@@ -20,11 +20,7 @@ export const PanelHeaderClose = ({
       aria-label={getTitleFromChildren(children)}
       {...restProps}
     >
-      {platform === ANDROID || platform === VKCOM ? (
-        <Icon28CancelOutline />
-      ) : (
-        children
-      )}
+      {platform === IOS ? children : <Icon28CancelOutline />}
     </PanelHeaderButton>
   );
 };

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -35,7 +35,7 @@
   order: 1;
   margin-top: 1px;
   max-width: 100%;
-  color: var(--header_text_secondary);
+  color: var(--header_text_secondary, var(--vkui--color_text_secondary));
 }
 
 .PanelHeaderContent__children {
@@ -54,30 +54,29 @@
   align-items: center;
   justify-content: flex-start;
   margin-left: 2px;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent));
 }
 
 .PanelHeaderContent__width {
   width: 1000px;
 }
 
+.PanelHeaderContent__in--centered {
+  align-items: center;
+}
+
 /**
  * iOS
  */
 
-.PanelHeaderContent--ios .PanelHeaderContent__before ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--ios .PanelHeaderContent__in {
-  align-items: center;
-}
-
 .PanelHeaderContent--ios .PanelHeaderContent__children-in {
   font-size: 21px;
   font-family: var(--font-display);
   font-weight: 500;
-  line-height: var(--panelheader_height_ios);
+  line-height: var(
+    --panelheader_height_ios,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 /**
@@ -88,21 +87,10 @@
   font-size: 23px;
   font-family: var(--font-display);
   font-weight: 500;
-  line-height: var(--panelheader_height);
-}
-
-/**
- * VKCOM
- */
-
-.PanelHeaderContent--vkcom
-  .PanelHeaderContent__before
-  ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--vkcom .PanelHeaderContent__in {
-  align-items: center;
+  line-height: var(
+    --panelheader_height,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 /**

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
 import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { getClassName } from "../../helpers/getClassName";
 import { Caption } from "../Typography/Caption/Caption";
 import { Headline } from "../Typography/Headline/Headline";
-import { IOS, Platform } from "../../lib/platform";
+import { IOS, ANDROID, Platform } from "../../lib/platform";
 import { Text } from "../Typography/Text/Text";
 import { HasPlatform } from "../../types";
 import "./PanelHeaderContent.css";
@@ -82,7 +83,13 @@ export const PanelHeaderContent = ({
       {hasReactNode(before) && (
         <div vkuiClass="PanelHeaderContent__before">{before}</div>
       )}
-      <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
+      <InComponent
+        {...inProps}
+        vkuiClass={classNames(
+          "PanelHeaderContent__in",
+          !before && platform !== ANDROID && "PanelHeaderContent__in--centered"
+        )}
+      >
         {hasReactNode(status) && (
           <Caption vkuiClass="PanelHeaderContent__status">{status}</Caption>
         )}