@vkontakte/vkui 4.33.3 → 4.34.1

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { Text } from "../Typography/Text/Text";
-import { Tappable } from "../../components/Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
 
@@ -52,13 +50,15 @@ export interface MiniInfoCellProps
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */
-export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
-  props: MiniInfoCellProps
-) => {
-  const platform = usePlatform();
-  const { before, after, mode, textWrap, textLevel, children, ...restProps } =
-    props;
-
+export const MiniInfoCell = ({
+  before,
+  after,
+  mode = "base",
+  textWrap = "nowrap",
+  textLevel = "secondary",
+  children,
+  ...restProps
+}: MiniInfoCellProps) => {
   const isClickable = !!restProps.onClick;
 
   return (
@@ -67,13 +67,10 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
       disabled={!isClickable}
       role={isClickable ? "button" : undefined}
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("MiniInfoCell", platform),
-        {
-          [`MiniInfoCell--md-${mode}`]: mode !== "base",
-          [`MiniInfoCell--wr-${textWrap}`]: textWrap !== "nowrap",
-        },
+        "MiniInfoCell",
+        mode !== "base" && `MiniInfoCell--md-${mode}`,
+        textWrap !== "nowrap" && `MiniInfoCell--wr-${textWrap}`,
         `MiniInfoCell--lvl-${textLevel}`
       )}
     >
@@ -90,9 +87,3 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
     </Tappable>
   );
 };
-
-MiniInfoCell.defaultProps = {
-  mode: "base",
-  textWrap: "nowrap",
-  textLevel: "secondary",
-};

package/src/components/ModalCard/ModalCard.tsx

@@ -30,9 +30,7 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
-const ModalCardComponent: React.FC<
-  ModalCardProps & AdaptivityContextInterface
-> = ({
+const ModalCardComponent = ({
   icon,
   header,
   subheader,
@@ -47,7 +45,7 @@ const ModalCardComponent: React.FC<
   nav,
   id,
   ...restProps
-}) => {
+}: ModalCardProps & AdaptivityContextInterface) => {
   const isDesktop = useAdaptivityIsDesktop();
 
   const modalContext = React.useContext(ModalRootContext);
@@ -60,10 +58,10 @@ const ModalCardComponent: React.FC<
     <div
       {...restProps}
       id={id}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("ModalCard", platform), {
-        "ModalCard--desktop": isDesktop,
-      })}
+      vkuiClass={classNames(
+        getClassName("ModalCard", platform),
+        isDesktop && "ModalCard--desktop"
+      )}
     >
       <ModalCardBase
         vkuiClass="ModalCard__in"

package/src/components/ModalCardBase/ModalCardBase.css

@@ -4,7 +4,7 @@
 .ModalCardBase__container {
   box-sizing: border-box;
   position: relative;
-  background: var(--modal_card_background);
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
   border-radius: 18px;
   padding: 16px;
   margin-bottom: var(--safe-area-inset-bottom);
@@ -12,6 +12,7 @@
   flex-direction: column;
   justify-content: center;
   pointer-events: initial;
+  box-shadow: var(--vkui--elevation3);
 }
 
 .ModalCardBase__container--softwareKeyboardOpened {
@@ -27,11 +28,11 @@
 }
 
 .ModalCardBase__header {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .ModalCardBase__subheader {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_subhead));
 }
 
 .ModalCardBase__header + .ModalCardBase__subheader {
@@ -40,7 +41,7 @@
 
 .ModalCardBase__icon {
   margin: 8px auto 16px;
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .ModalCardBase__actions {
@@ -51,7 +52,7 @@
 }
 
 .ModalCardBase .UsersStack + .ModalCardBase__actions {
-  margin-top: 32px;
+  margin-top: 24px;
 }
 
 .ModalCardBase__header + .ModalCardBase__actions,
@@ -71,14 +72,19 @@
   right: 4px;
   width: 48px;
   height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
+  color: var(
+    --placeholder_icon_foreground_primary,
+    var(--vkui--color_icon_secondary)
+  );
   justify-content: center;
 }
 
 /**
  * iOS
  */
-
+/*
+ * TODO v5.0.0: зачем этот стиль? Удалить?
+*/
 .ModalCardBase--ios .ModalCardBase__header:first-child {
   padding-left: 36px;
   padding-right: 36px;
@@ -91,7 +97,6 @@
 .ModalCardBase--android .ModalCardBase__container,
 .ModalCardBase--vkcom .ModalCardBase__container {
   border-radius: 12px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 /**
@@ -100,5 +105,4 @@
 
 .ModalCardBase--desktop .ModalCardBase__container {
   border-radius: 8px;
-  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
 }

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -8,7 +8,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { ViewWidth, withAdaptivity } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, IOS, Platform } from "../../lib/platform";
+import { IOS, Platform } from "../../lib/platform";
 import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
@@ -87,28 +87,24 @@ export const ModalCardBase = withAdaptivity<
     return (
       <div
         {...restProps}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames(getClassName("ModalCardBase", platform), {
-          "ModalCardBase--desktop": isDesktop,
-        })}
+        vkuiClass={classNames(
+          getClassName("ModalCardBase", platform),
+          isDesktop && "ModalCardBase--desktop"
+        )}
         ref={getRootRef}
       >
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("ModalCardBase__container", {
-            "ModalCardBase__container--softwareKeyboardOpened":
-              isSoftwareKeyboardOpened,
-          })}
+          vkuiClass={classNames(
+            "ModalCardBase__container",
+            isSoftwareKeyboardOpened &&
+              "ModalCardBase__container--softwareKeyboardOpened"
+          )}
         >
           {hasReactNode(icon) && (
             <div vkuiClass="ModalCardBase__icon">{icon}</div>
           )}
           {hasReactNode(header) && (
-            <Title
-              level="2"
-              weight={platform === ANDROID ? "2" : "1"}
-              vkuiClass="ModalCardBase__header"
-            >
+            <Title level="2" weight="2" vkuiClass="ModalCardBase__header">
               {header}
             </Title>
           )}
@@ -120,10 +116,10 @@ export const ModalCardBase = withAdaptivity<
 
           {hasReactNode(actions) && (
             <div
-              // eslint-disable-next-line vkui/no-object-expression-in-arguments
-              vkuiClass={classNames("ModalCardBase__actions", {
-                "ModalCardBase__actions--v": actionsLayout === "vertical",
-              })}
+              vkuiClass={classNames(
+                "ModalCardBase__actions",
+                actionsLayout === "vertical" && "ModalCardBase__actions--v"
+              )}
             >
               {actions}
             </div>

package/src/components/ModalCardBase/Readme.md

@@ -1,4 +1,4 @@
-Низкоуровневый компонент для отрисовки карточки со сложным содержимым. Используется внутри [ModalCard](#/ModalCard).
+Низкоуровневый компонент для отрисовки карточки со сложным содержимым. Используется внутри [ModalCard](https://vkcom.github.io/VKUI/#/ModalCard).
 
 ### Кнопка для закрытия
 

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -10,7 +10,7 @@ export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */
-export const ModalDismissButton: React.FC<ModalDismissButtonProps> = ({
+export const ModalDismissButton = ({
   "aria-label": ariaLabel = "Закрыть",
   ...restProps
 }: ModalDismissButtonProps) => {

package/src/components/ModalPage/ModalPage.tsx

@@ -58,9 +58,7 @@ export interface ModalPageProps
 
 const warn = warnOnce("ModalPage");
 
-const ModalPageComponent: React.FC<
-  ModalPageProps & AdaptivityContextInterface
-> = ({
+const ModalPageComponent = ({
   children,
   header,
   viewWidth,
@@ -77,7 +75,7 @@ const ModalPageComponent: React.FC<
   nav,
   id,
   ...restProps
-}) => {
+}: ModalPageProps & AdaptivityContextInterface) => {
   const { updateModalHeight } = React.useContext(ModalRootContext);
 
   const platform = usePlatform();

package/src/components/ModalRoot/ModalRoot.tsx

@@ -69,6 +69,7 @@ export interface ModalRootProps extends HasPlatform {
    * @ignore
    */
   configProvider?: ConfigProviderContextInterface;
+  children?: React.ReactNode;
 }
 
 interface ModalRootState {

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -31,11 +31,12 @@ export interface ModalRootProps extends AdaptivityProps {
    * Будет вызвано при окончательном закрытии активной модалки с её id
    */
   onClosed?(modalId: string): void;
+  children?: React.ReactNode;
 }
 
-const ModalRootComponent: React.FC<
-  ModalRootProps & AdaptivityContextInterface
-> = (props) => {
+const ModalRootComponent = (
+  props: ModalRootProps & AdaptivityContextInterface
+) => {
   const isDesktop = useAdaptivityIsDesktop();
 
   useScrollLock(!!props.activeModal);

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -31,6 +31,7 @@ export interface ModalRootProps extends HasPlatform {
    * @ignore
    */
   configProvider?: ConfigProviderContextInterface;
+  children?: React.ReactNode;
 
   /**
    * Будет вызвано при начале открытия активной модалки с её id

package/src/components/ModalRoot/Readme.md

@@ -3,7 +3,7 @@
 
 #### Структура
 
-Этот компонент должен быть передан в качестве свойства `modal` компоненту [`SplitLayout`](#/SplitLayout).
+Этот компонент должен быть передан в качестве свойства `modal` компоненту [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).
 
 **Важно:** структура модальных страниц и карточек должна определяться единожды на старте приложения. Структура – это _декларация_ приложения.
 То есть, один раз определив структуру вида:

package/src/components/ModalRoot/useModalManager.tsx

@@ -232,8 +232,11 @@ export function withModalManager(
 ) {
   return function <Props extends ModalTransitionProps>(
     Wrapped: React.ComponentType<Props>
-  ): React.FC<
-    Omit<Props, keyof ModalTransitionProps> & { activeModal?: string | null }
+  ): React.ComponentType<
+    Omit<Props, keyof ModalTransitionProps> & {
+      activeModal?: string | null;
+      children?: React.ReactNode;
+    }
   > {
     return function WithModalManager(props) {
       const transitionManager = useModalManager(

package/src/components/NativeSelect/NativeSelect.tsx

@@ -33,9 +33,7 @@ export interface SelectState {
   notSelected?: boolean;
 }
 
-const NativeSelectComponent: React.FC<
-  NativeSelectProps & AdaptivityContextInterface
-> = ({
+const NativeSelectComponent = ({
   style,
   defaultValue = "",
   align,
@@ -50,7 +48,7 @@ const NativeSelectComponent: React.FC<
   multiline,
   selectType = SelectType.default,
   ...restProps
-}) => {
+}: NativeSelectProps & AdaptivityContextInterface) => {
   const platform = usePlatform();
   const [title, setTitle] = React.useState("");
   const [empty, setEmpty] = React.useState(false);

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -9,10 +9,10 @@ const TransitionContext = React.createContext<TransitionContextProps>({
 });
 export const useNavTransition = () => React.useContext(TransitionContext);
 
-export const NavTransitionProvider: React.FC<TransitionContextProps> = ({
+export const NavTransitionProvider = ({
   children,
   entering,
-}) => {
+}: React.PropsWithChildren<TransitionContextProps>) => {
   const parentContext = useNavTransition();
   const contextValue = useObjectMemo({
     entering: parentContext.entering || entering,

package/src/components/Pagination/Pagination.tsx

@@ -64,7 +64,7 @@ export interface PaginationProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */
-export const Pagination: React.FC<PaginationProps> = ({
+export const Pagination = ({
   currentPage = 1,
   siblingCount = 1,
   boundaryCount = 1,
@@ -76,7 +76,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   getRootRef,
   onChange,
   ...resetProps
-}) => {
+}: PaginationProps) => {
   const { sizeY } = useAdaptivity();
 
   const pages = usePagination({

package/src/components/PanelHeader/PanelHeader.tsx

@@ -50,12 +50,12 @@ export interface PanelHeaderProps
   fixed?: boolean;
 }
 
-const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
+const PanelHeaderIn = ({
   before,
   after,
   separator,
   children,
-}) => {
+}: PanelHeaderProps) => {
   const { webviewType } = React.useContext(ConfigProviderContext);
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();

package/src/components/PanelHeader/Readme.md

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

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -27,9 +27,7 @@ export type PanelHeaderBackProps = PanelHeaderButtonProps &
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
  */
-export const PanelHeaderBackComponent: React.FunctionComponent<
-  PanelHeaderBackProps
-> = ({
+export const PanelHeaderBackComponent = ({
   label,
   sizeX,
   "aria-label": ariaLabel = "Назад",

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -19,10 +19,7 @@ interface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {
   primary?: PanelHeaderButtonProps["primary"];
 }
 
-const ButtonTypography: React.FC<ButtonTypographyProps> = ({
-  primary,
-  children,
-}: ButtonTypographyProps) => {
+const ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {
   const platform = usePlatform();
 
   if (platform === IOS) {
@@ -41,7 +38,7 @@ const warn = warnOnce("PanelHeaderButton");
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
-export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
+export const PanelHeaderButton = ({
   children,
   primary = false,
   label,

package/src/components/PanelHeaderButton/Readme.md

@@ -1,7 +1,7 @@
 Компонент для отрисовки кнопок в шапке панели. Внутрь компонента передается либо [иконка](https://vkcom.github.io/icons/),
 либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для Android.
 
-Кнопки могут быть переданы в `left` или `right` компонента `PanelHeader`:
+Кнопки могут быть переданы в `before` или `after` компонента `PanelHeader`:
 
 ```jsx static
 import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Icon28CancelOutline } from "@vkontakte/icons";
 import {
   PanelHeaderButton,
@@ -11,9 +10,10 @@ import { usePlatform } from "../../hooks/usePlatform";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
  */
-export const PanelHeaderClose: React.FunctionComponent<
-  PanelHeaderButtonProps
-> = ({ children = "Отмена", ...restProps }: PanelHeaderButtonProps) => {
+export const PanelHeaderClose = ({
+  children = "Отмена",
+  ...restProps
+}: PanelHeaderButtonProps) => {
   const platform = usePlatform();
   return (
     <PanelHeaderButton

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -20,14 +20,15 @@ export interface PanelHeaderContentProps
 interface PanelHeaderChildrenProps extends HasPlatform {
   hasStatus: boolean;
   hasBefore: boolean;
+  children?: React.ReactNode;
 }
 
-const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
+const PanelHeaderChildren = ({
   platform,
   hasStatus,
   hasBefore,
   children,
-}) => {
+}: PanelHeaderChildrenProps) => {
   if (platform === Platform.VKCOM) {
     return (
       <Text Component="div" weight="2">
@@ -48,9 +49,7 @@ const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */
-export const PanelHeaderContent: React.FunctionComponent<
-  PanelHeaderContentProps
-> = ({
+export const PanelHeaderContent = ({
   className,
   style,
   aside,

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -21,12 +21,12 @@ export interface PanelHeaderContextProps
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
-export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
+export const PanelHeaderContext = ({
   children,
   onClose,
   opened = false,
   ...restProps
-}) => {
+}: PanelHeaderContextProps) => {
   const { document } = useDOM();
   const platform = usePlatform();
   const [visible, setVisible] = React.useState(opened);

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   PanelHeaderButton,
   PanelHeaderButtonProps,
@@ -25,7 +24,7 @@ export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
  */
-export const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
+export const PanelHeaderEdit = ({
   isActive = false,
   editLabel = "Редактировать",
   doneLabel = "Готово",

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   PanelHeaderButton,
   PanelHeaderButtonProps,
@@ -11,9 +10,10 @@ import { getTitleFromChildren } from "../../lib/utils";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */
-export const PanelHeaderSubmit: React.FunctionComponent<
-  PanelHeaderButtonProps
-> = ({ children = "Готово", ...restProps }: PanelHeaderButtonProps) => {
+export const PanelHeaderSubmit = ({
+  children = "Готово",
+  ...restProps
+}: PanelHeaderButtonProps) => {
   const platform = usePlatform();
 
   return (

package/src/components/Placeholder/Placeholder.css

@@ -26,15 +26,18 @@
   margin-bottom: 12px;
   display: inline-block;
   vertical-align: top;
-  color: var(--placeholder_icon_foreground_secondary);
+  color: var(
+    --placeholder_icon_foreground_secondary,
+    var(--vkui--color_icon_secondary)
+  );
 }
 
 .Placeholder__header {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Placeholder__text {
-  color: var(--text_placeholder);
+  color: var(--text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Placeholder__header + .Placeholder__text {
@@ -42,9 +45,5 @@
 }
 
 .Placeholder__action:not(:first-child) {
-  margin-top: 24px;
-}
-
-.Placeholder__action .Button--lvl-tertiary {
-  top: -8px;
+  margin-top: 16px;
 }