@vkontakte/vkui 4.28.1 → 4.29.0

package/src/components/ModalRoot/ModalRoot.tsx

@@ -45,9 +45,25 @@ export interface ModalRootProps extends HasPlatform {
   activeModal?: string | null;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
+   */
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
    */
   onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
+
   /**
    * @ignore
    */
@@ -76,7 +92,7 @@ class ModalRootTouchComponent extends React.Component<
       updateModalHeight: this.updateModalHeight,
       registerModal: ({ id, ...data }) =>
         Object.assign(this.getModalState(id), data),
-      onClose: () => this.props.closeActiveModal(),
+      onClose: () => this.props.onExit(),
       isInsideModal: true,
     };
 
@@ -150,11 +166,12 @@ class ModalRootTouchComponent extends React.Component<
     ) {
       const { enteringModal } = this.props;
       const enteringState = this.getModalState(enteringModal);
+      this.props.onEnter();
       this.waitTransitionFinish(enteringState, () => {
         if (enteringState?.innerElement) {
           enteringState.innerElement.style.transitionDelay = "";
         }
-        this.props.onEnter(enteringModal);
+        this.props.onEntered(enteringModal);
       });
 
       if (enteringState?.innerElement) {
@@ -274,7 +291,11 @@ class ModalRootTouchComponent extends React.Component<
     const prevModalState = this.getModalState(id);
 
     if (!prevModalState) {
-      id && warn(`[closeActiveModal] Modal ${id} does not exist - not closing`);
+      id &&
+        warn(
+          `closeActiveModal: Modal ${id} does not exist - not closing`,
+          "error"
+        );
       return;
     }
 
@@ -284,7 +305,7 @@ class ModalRootTouchComponent extends React.Component<
 
     const prevIsPage =
       !!prevModalState && prevModalState.type === ModalType.PAGE;
-    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
+    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));
     const exitTranslate =
       prevIsPage &&
       nextIsPage &&
@@ -475,7 +496,7 @@ class ModalRootTouchComponent extends React.Component<
       modalState.hidden = translateY === 100;
 
       if (modalState.hidden) {
-        this.props.closeActiveModal();
+        this.props.onExit();
       }
 
       setStateCallback = () => {
@@ -519,7 +540,7 @@ class ModalRootTouchComponent extends React.Component<
       modalState.hidden = translateY === 100;
 
       if (modalState.hidden) {
-        this.props.closeActiveModal();
+        this.props.onExit();
       }
 
       setStateCallback = () => {
@@ -647,6 +668,7 @@ 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),
               {
@@ -662,7 +684,7 @@ class ModalRootTouchComponent extends React.Component<
           >
             <div
               vkuiClass="ModalRoot__mask"
-              onClick={this.props.closeActiveModal}
+              onClick={this.props.onExit}
               ref={this.maskElementRef}
             />
             <div vkuiClass="ModalRoot__viewport" ref={this.viewportRef}>
@@ -689,8 +711,9 @@ class ModalRootTouchComponent extends React.Component<
                         modalState.modalElement = e;
                       }
                     }}
-                    onClose={this.props.closeActiveModal}
+                    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,
@@ -743,7 +766,7 @@ function initModal(modalState: ModalsStateEntry) {
     case ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn("[initActiveModal] modalState.type is unknown");
+      IS_DEV && warn("initActiveModal: modalState.type is unknown", "error");
   }
 }
 

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -15,9 +15,24 @@ export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
    */
-  onClose?: (modalId: string) => void;
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
+   */
+  onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
 }
 
 const ModalRootComponent: React.FC<

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -32,9 +32,24 @@ export interface ModalRootProps extends HasPlatform {
   configProvider?: ConfigProviderContextInterface;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
+   */
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
    */
   onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
 }
 
 class ModalRootDesktopComponent extends React.Component<
@@ -49,7 +64,7 @@ class ModalRootDesktopComponent extends React.Component<
       updateModalHeight: () => undefined,
       registerModal: ({ id, ...data }) =>
         Object.assign(this.getModalState(id), data),
-      onClose: () => this.props.closeActiveModal(),
+      onClose: () => this.props.onExit(),
       isInsideModal: true,
     };
   }
@@ -92,10 +107,11 @@ class ModalRootDesktopComponent extends React.Component<
     ) {
       const { enteringModal } = this.props;
       const enteringState = this.getModalState(enteringModal);
+      this.props.onEnter();
       requestAnimationFrame(() => {
         if (this.props.enteringModal === enteringModal) {
           this.waitTransitionFinish(enteringState, () =>
-            this.props.onEnter(enteringModal)
+            this.props.onEntered(enteringModal)
           );
           this.animateModalOpacity(enteringState, true);
         }
@@ -123,7 +139,7 @@ class ModalRootDesktopComponent extends React.Component<
       return;
     }
 
-    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
+    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));
     this.animateModalOpacity(prevModalState, false);
     if (!this.props.activeModal) {
       this.setMaskOpacity(prevModalState, 0);
@@ -152,7 +168,7 @@ class ModalRootDesktopComponent extends React.Component<
     }
   }
 
-  /* Анимирует сдивг модалки */
+  /* Анимирует сдвиг модалки */
   animateModalOpacity(
     modalState: ModalsStateEntry | undefined,
     display: boolean
@@ -202,6 +218,7 @@ 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),
             {
@@ -214,7 +231,7 @@ class ModalRootDesktopComponent extends React.Component<
           <div
             vkuiClass="ModalRoot__mask"
             ref={this.maskElementRef}
-            onClick={this.props.closeActiveModal}
+            onClick={this.props.onExit}
           />
           <div vkuiClass="ModalRoot__viewport">
             {this.modals.map((Modal: React.ReactElement) => {
@@ -228,9 +245,10 @@ class ModalRootDesktopComponent extends React.Component<
               return (
                 <FocusTrap
                   restoreFocus={false}
-                  onClose={this.props.closeActiveModal}
+                  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 &&

package/src/components/ModalRoot/Readme.md

@@ -660,3 +660,115 @@ class SelectModal extends Component {
 
 export default withModalRootContext(SelectModal);
 ```
+
+#### В мобильной версии при параметре `autoFocus` у контрола ломается поведение карточки
+
+К сожалению, из-за особенностей React, `autoFocus` ломает CSS анимацию.
+
+Чтобы исправить проблему, следует отказаться от `autoFocus` и выставлять фокус в ручную при событии `onOpened`.
+Подписываться на `onOpened` можно двумя разными способами.
+
+1️⃣ `<ModalRoot onOpened={(id) => ...} />`
+
+```jsx static
+const App = () => {
+  const inputRef = useRef(null);
+
+  const handleOpen = React.useCallback((id) => {
+    if (id === "modal-with-auto-focus" && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal="modal-with-auto-focus" onOpened={handleOpen}>
+      <ModalPage id="modal-with-auto-focus">
+        <Input getRootRef={inputRef} />
+      </ModalPage>
+    </ModalRoot>
+  );
+  // ...
+};
+```
+
+2️⃣ `<ModalPage onOpened={() => ...} />`
+
+> ⚠️ в этом случае `ModalPage` нельзя заворачивать в другой компонент
+> иначе `ModalRoot` не сможет получить доступ к `onOpened`.
+
+```jsx static
+const App = () => {
+  const inputRef = useRef(null);
+
+  const handleOpen = React.useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal="modal-with-auto-focus">
+      <ModalPage id="modal-with-auto-focus" onOpened={handleOpen}>
+        <Input getRootRef={inputRef} />
+      </ModalPage>
+    </ModalRoot>
+  );
+  // ...
+};
+```
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+const Example = () => {
+  const firstInputRef = useRef(null);
+  const secondInputRef = useRef(null);
+  const [activeModal, setActiveModal] = React.useState(false);
+
+  const handleOpenOfModalRoot = React.useCallback((id) => {
+    if (id === "modal-1") {
+      firstInputRef.current.focus();
+    }
+  }, []);
+
+  const handleOpenOfModalPage = React.useCallback(() => {
+    secondInputRef.current.focus();
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal={activeModal} onOpened={handleOpenOfModalRoot}>
+      <ModalPage id="modal-1" onClose={() => setActiveModal(null)}>
+        <Div>
+          <input type="text" ref={firstInputRef} />
+        </Div>
+      </ModalPage>
+      <ModalPage
+        id="modal-2"
+        onOpened={handleOpenOfModalPage}
+        onClose={() => setActiveModal(null)}
+      >
+        <Div>
+          <input type="text" ref={secondInputRef} />
+        </Div>
+      </ModalPage>
+    </ModalRoot>
+  );
+
+  return (
+    <SplitLayout modal={modal}>
+      <SplitCol>
+        <View activePanel="main">
+          <Panel id="main">
+            <CellButton multiline onClick={() => setActiveModal("modal-1")}>
+              Пример с onOpened() на ModalRoot
+            </CellButton>
+            <CellButton multiline onClick={() => setActiveModal("modal-2")}>
+              Пример с onOpened() на ModalPage
+            </CellButton>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
+
+Example();
+```

package/src/components/ModalRoot/types.ts

@@ -16,7 +16,22 @@ export interface ModalElements {
 
 export interface ModalsStateEntry extends ModalElements {
   id: string | null;
-  onClose?: () => any;
+  /**
+   * Событие начала открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Событие открытия модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Событие начала закрытия модалки.
+   */
+  onClose?: VoidFunction;
+  /**
+   * Событие закрытия модалки.
+   */
+  onClosed?: VoidFunction;
   type?: ModalType;
 
   settlingHeight?: number;

package/src/components/ModalRoot/useModalManager.tsx

@@ -15,10 +15,11 @@ interface ModalTransitionState {
 }
 
 export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: (id: string | null) => void;
-  onExit: (id: string | null) => void;
+  onEnter: VoidFunction;
+  onEntered: (id: string | null) => void;
+  onExit: VoidFunction;
+  onExited: (id: string | null) => void;
   getModalState: (id: string) => ModalsStateEntry;
-  closeActiveModal: VoidFunction;
   delayEnter: boolean;
 }
 
@@ -86,7 +87,10 @@ export function modalTransitionReducer(
 export function useModalManager(
   activeModal: string | null | undefined,
   children: React.ReactNode | React.ReactNode[],
-  onClose: (id: string) => void,
+  onOpen: (id: string) => void = noop,
+  onOpened: (id: string) => void = noop,
+  onClose: (id: string) => void = noop,
+  onClosed: (id: string) => void = noop,
   initModal: (state: ModalsStateEntry) => void = noop
 ): ModalTransitionProps {
   const modalsState = React.useRef<ModalsState>({}).current;
@@ -97,7 +101,10 @@ export function useModalManager(
       id: id ?? null,
     };
 
+    state.onOpen = Modal.props.onOpen;
+    state.onOpened = Modal.props.onOpened;
     state.onClose = Modal.props.onClose;
+    state.onClosed = Modal.props.onClosed;
     state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
     // ModalPage props
     if (typeof modalProps.settlingHeight === "number") {
@@ -126,7 +133,7 @@ export function useModalManager(
   useIsomorphicLayoutEffect(() => {
     // ignore non-existent activeModal
     if (process.env.NODE_ENV === "development" && isMissing) {
-      warn(`Can't transition - modal ${activeModal} not found`);
+      warn(`Can't transition - modal ${activeModal} not found`, "error");
     }
     dispatchTransition({ type: "setActive", id: safeActiveModal ?? null });
   }, [activeModal]);
@@ -141,13 +148,37 @@ export function useModalManager(
 
   const isCard = (id: string | null | undefined) =>
     id != null && modalsState[id]?.type === ModalType.CARD;
-  const onEnter = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "entered", id }),
-    []
+  const onEntered = React.useCallback(
+    (id: string | null) => {
+      if (id) {
+        const modalState = modalsState[id];
+
+        if (isFunction(modalState.onOpened)) {
+          modalState.onOpened();
+        } else if (isFunction(onOpened)) {
+          onOpened(id);
+        }
+      }
+
+      dispatchTransition({ type: "entered", id });
+    },
+    [modalsState, onOpened]
   );
-  const onExit = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "exited", id }),
-    []
+  const onExited = React.useCallback(
+    (id: string | null) => {
+      if (id) {
+        const modalState = modalsState[id];
+
+        if (isFunction(modalState.onClosed)) {
+          modalState.onClosed();
+        } else if (isFunction(onClosed)) {
+          onClosed(id);
+        }
+      }
+
+      dispatchTransition({ type: "exited", id });
+    },
+    [modalsState, onClosed]
   );
   const delayEnter = Boolean(
     transitionState.exitingModal &&
@@ -158,7 +189,19 @@ export function useModalManager(
     [modalsState]
   );
 
-  function closeActiveModal() {
+  function onEnter() {
+    const modalState =
+      transitionState.activeModal && modalsState[transitionState.activeModal];
+    if (modalState) {
+      if (isFunction(modalState.onOpen)) {
+        modalState.onOpen();
+      } else if (isFunction(onOpen)) {
+        onOpen(modalState.id);
+      }
+    }
+  }
+
+  function onExit() {
     const modalState =
       transitionState.activeModal && modalsState[transitionState.activeModal];
     if (modalState) {
@@ -166,19 +209,18 @@ export function useModalManager(
         modalState.onClose();
       } else if (isFunction(onClose)) {
         onClose(modalState.id);
-      } else if (process.env.NODE_ENV === "development") {
-        warn("onClose is undefined");
       }
     }
   }
 
   return {
     onEnter,
+    onEntered,
     onExit,
+    onExited,
     ...transitionState,
     delayEnter,
     getModalState,
-    closeActiveModal,
   };
 }
 
@@ -194,7 +236,10 @@ export function withModalManager(
       const transitionManager = useModalManager(
         props.activeModal,
         props.children,
+        (props as any).onOpen,
+        (props as any).onOpened,
         (props as any).onClose,
+        (props as any).onClosed,
         initModal
       );
       return <Wrapped {...(props as any)} {...transitionManager} />;

package/src/components/NativeSelect/NativeSelect.tsx

@@ -71,6 +71,7 @@ const NativeSelect: React.FC<
   return (
     <FormField
       Component="label"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Select", platform), {
         ["Select--not-selected"]: notSelected,
         [`Select--align-${align}`]: !!align,

package/src/components/Pagination/Pagination.tsx

@@ -12,7 +12,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { PaginationPageType, usePagination } from "../../hooks/usePagination";
 
 import Tappable from "../Tappable/Tappable";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 
 import "./Pagination.css";
 
@@ -44,17 +44,17 @@ export interface PaginationProps
    */
   disabled?: boolean;
   /**
-   * Переобределение `aria-label` для кнопки навигации назад.
+   * Переопределение `aria-label` для кнопки навигации назад.
    * По умолчанию используется текст на "ru_RU".
    */
   prevButtonAriaLabel?: string;
   /**
-   * Переобределение `aria-label` для кнопки навигации вперёд.
+   * Переопределение `aria-label` для кнопки навигации вперёд.
    * По умолчанию используется текст на "ru_RU".
    */
   nextButtonAriaLabel?: string;
   /**
-   * Функция для переопределния и/или локализации `aria-label` атрибута.
+   * Функция для переопределения и/или локализации `aria-label` атрибута.
    * По умолчанию используется текст на "ru_RU".
    */
   getPageAriaLabel?(page: number, isCurrent: boolean): string;

package/src/components/Pagination/Readme.md

@@ -8,7 +8,7 @@
 
 ## `usePagination`
 
-Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимиает почти те же параметры, что и `Pagination`.
+Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимает почти те же параметры, что и `Pagination`.
 
 ```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
 const Example = () => {

package/src/components/Panel/Panel.tsx

@@ -30,6 +30,7 @@ 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}`,

package/src/components/PanelHeader/PanelHeader.tsx

@@ -91,6 +91,7 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("PanelHeader", platform),
         {

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -36,6 +36,7 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   return (
     <PanelHeaderButton
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
         "PanelHeaderBack--has-label": showLabel && !!label,
       })}

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import "./PanelHeaderButton.css";
 
 export interface PanelHeaderButtonProps extends Omit<TappableProps, "label"> {
@@ -76,7 +76,8 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
 
     if (!hasAccessibleName) {
       warn(
-        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label."
+        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.",
+        "error"
       );
     }
   }
@@ -88,6 +89,7 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
       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,

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -63,6 +63,7 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   return (
     <FixedLayout
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderContext", platform), {
         "PanelHeaderContext--opened": opened,
         "PanelHeaderContext--closing": closing,

package/src/components/Placeholder/Placeholder.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import { HasRootRef } from "../../types";
 import "./Placeholder.css";
@@ -42,6 +42,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
     <div
       {...restProps}
       ref={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("Placeholder", {
         "Placeholder--stretched": stretched,
       })}

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -54,6 +54,7 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         baseClassNames,
         `PopoutWrapper--v-${alignY}`,