@vkontakte/vkui 4.28.1 → 4.30.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: модальное окно (страница) ${id} не существует`,
+          "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,11 @@ 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="${modalState.type}" не поддерживается`,
+          "error"
+        );
   }
 }
 

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -10,14 +10,30 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 
 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<
@@ -28,6 +44,8 @@ const ModalRootComponent: React.FC<
     viewWidth >= ViewWidth.SMALL_TABLET &&
     (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
+  useScrollLock(!!props.activeModal);
+
   const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;
 
   return <RootComponent {...props} />;

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

@@ -34,7 +34,7 @@ export interface SelectState {
   notSelected?: boolean;
 }
 
-const NativeSelect: React.FC<
+const NativeSelectComponent: React.FC<
   NativeSelectProps & AdaptivityContextInterface
 > = ({
   style,
@@ -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,
@@ -106,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/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.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;
 }