@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -38,7 +38,6 @@ export function useModalRegistry(id: string, type: ModalType) {
     innerElement: (e) => elements.innerElement = e,
     headerElement: (e) => elements.headerElement = e,
     contentElement: (e) => elements.contentElement = e,
-    footerElement: (e) => elements.footerElement = e,
   }).current;
   return { refs };
 }

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { isFunction } from '../../lib/utils';
 import { transitionEvent } from '../../lib/supportEvents';
 import { HasPlatform } from '../../types';
 import { withPlatform } from '../../hoc/withPlatform';
@@ -11,17 +10,17 @@ import {
   ConfigProviderContextInterface,
   WebviewType,
 } from '../ConfigProvider/ConfigProviderContext';
-import { ModalsStateEntry, ModalType } from './types';
+import { ModalsStateEntry } from './types';
 import { ANDROID, VKCOM } from '../../lib/platform';
 import { getClassName } from '../../helpers/getClassName';
 import { DOMProps, withDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { ModalTransitionProps, withModalManager } from './useModalManager';
 import './ModalRoot.css';
 
 const warn = warnOnce('ModalRoot');
-const IS_DEV = process.env.NODE_ENV === 'development';
 
 export interface ModalRootProps extends HasPlatform {
   activeModal?: string | null;
@@ -36,172 +35,76 @@ export interface ModalRootProps extends HasPlatform {
   onClose?(modalId: string): void;
 }
 
-interface ModalRootState {
-  activeModal?: string;
-  prevModal?: string;
-  nextModal?: string;
-  visibleModals?: string[];
-  animated?: boolean;
-  switching?: boolean;
-  history?: string[];
-  isBack?: boolean;
-  inited?: boolean;
-}
-
-class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps, ModalRootState> {
-  constructor(props: ModalRootProps) {
+class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps & ModalTransitionProps> {
+  constructor(props: ModalRootProps & ModalTransitionProps) {
     super(props);
 
-    const activeModal = props.activeModal;
-
-    this.state = {
-      activeModal: null,
-      prevModal: null,
-      nextModal: activeModal,
-      visibleModals: activeModal ? [activeModal] : [],
-      animated: !!activeModal,
-      switching: false,
-      history: activeModal ? [activeModal] : [],
-      isBack: false,
-      inited: false,
-    };
-
     this.maskElementRef = React.createRef();
-    this.activeTransitions = 0;
-
-    this.initModalsState();
 
     this.modalRootContext = {
       updateModalHeight: () => undefined,
-      registerModal: ({ id, ...data }) => Object.assign(this.modalsState[id], data),
-      onClose: this.triggerActiveModalClose,
+      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id), data),
+      onClose: () => this.props.closeActiveModal(),
       isInsideModal: true,
     };
   }
 
-  private modalsState: { [id: string]: ModalsStateEntry };
   private readonly maskElementRef: React.RefObject<HTMLDivElement>;
   private maskAnimationFrame: number;
   private readonly modalRootContext: ModalRootContextInterface;
   private restoreFocusTo: HTMLElement;
 
-  activeTransitions: number;
-
-  get timeout() {
+  private get timeout() {
     return this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400;
   }
 
-  get modals() {
+  private get modals() {
     return React.Children.toArray(this.props.children) as React.ReactElement[];
   }
 
-  initModalsState() {
-    this.modalsState = this.modals.reduce<{ [id: string]: ModalsStateEntry }>((acc, Modal) => {
-      const modalProps = Modal.props;
-      const state: ModalsStateEntry = {
-        id: getNavId(Modal.props, warn),
-        onClose: Modal.props.onClose,
-        dynamicContentHeight: !!modalProps.dynamicContentHeight,
-      };
-
-      // ModalPage props
-      if (typeof modalProps.settlingHeight === 'number') {
-        state.settlingHeight = modalProps.settlingHeight;
-      }
-
-      acc[state.id] = state;
-      return acc;
-    }, {});
-  }
-
-  componentDidMount() {
-    this.initActiveModal();
+  getModalState(id: string) {
+    return this.props.getModalState(id);
   }
 
-  componentDidUpdate(prevProps: ModalRootProps, prevState: ModalRootState) {
-    if (this.props.activeModal !== prevProps.activeModal) {
-      const nextModal = this.props.activeModal;
-      const prevModal = prevProps.activeModal;
-
-      if (IS_DEV && nextModal !== null && !this.modalsState[nextModal]) {
-        return warn(`[ModalRoot.componentDidUpdate] nextModal ${nextModal} not found`);
-      }
-
-      let history = [...this.state.history];
-      let isBack = false;
-
-      if (nextModal === null) {
-        history = [];
-      } else if (history.includes(nextModal)) {
-        history = history.splice(0, history.indexOf(nextModal) + 1);
-        isBack = true;
-      } else {
-        history.push(nextModal);
-      }
+  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {
+    // transition phase 2: animate exiting modal
+    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
+      this.closeModal(this.props.exitingModal);
+    }
 
-      return this.setState({
-        activeModal: null,
-        nextModal,
-        prevModal,
-        visibleModals: [nextModal, prevModal],
-        history,
-        isBack,
-        animated: true,
-        inited: false,
-        switching: false,
-      }, () => {
-        if (nextModal === null) {
-          this.closeActiveModal();
-        } else {
-          this.initActiveModal();
+    // transition phase 3: animate entering modal
+    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+      const { enteringModal } = this.props;
+      const enteringState = this.getModalState(enteringModal);
+      requestAnimationFrame(() => {
+        if (this.props.enteringModal === enteringModal) {
+          this.waitTransitionFinish(enteringState, () => this.props.onEnter(enteringModal));
+          this.animateModalOpacity(enteringState, true);
         }
       });
     }
 
-    if (this.state.switching && !prevState.switching) {
-      requestAnimationFrame(() => this.switchPrevNext());
+    // focus restoration
+    if (this.props.activeModal && !prevProps.activeModal) {
+      this.restoreFocusTo = this.props.document.activeElement as HTMLElement;
     }
-  }
-
-  /**
-   * Инициализирует модалку перед анимацией открытия
-   */
-  initActiveModal() {
-    const activeModal = this.state.activeModal || this.state.nextModal;
-    if (!activeModal) {
-      return;
+    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+      this.restoreFocusTo.focus();
+      this.restoreFocusTo = null;
     }
-
-    const modalState = this.modalsState[activeModal];
-
-    switch (modalState.type) {
-      case ModalType.PAGE:
-        modalState.settlingHeight = modalState.settlingHeight || 75;
-        break;
-
-      case ModalType.CARD:
-        break;
-
-      default:
-        if (IS_DEV) {
-          warn('[initActiveModal] modalState.type is unknown');
-        }
-    }
-
-    this.setState({ inited: true, switching: true });
   }
 
-  closeActiveModal() {
-    const { prevModal } = this.state;
-    if (IS_DEV && !prevModal) {
-      return warn(`[closeActiveModal] prevModal is ${prevModal}`);
+  closeModal(id: string) {
+    const prevModalState = this.getModalState(id);
+    if (!prevModalState) {
+      return;
     }
 
-    const prevModalState = this.modalsState[prevModal];
-
-    this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
+    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
     this.animateModalOpacity(prevModalState, false);
-    this.setMaskOpacity(prevModalState, 0);
+    if (!this.props.activeModal) {
+      this.setMaskOpacity(prevModalState, 0);
+    }
   }
 
   waitTransitionFinish(modalState: ModalsStateEntry, eventHandler: () => void) {
@@ -217,90 +120,15 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
     }
   }
 
-  switchPrevNext() {
-    const { prevModal, nextModal } = this.state;
-
-    const prevModalState = this.modalsState[prevModal];
-    const nextModalState = this.modalsState[nextModal];
-
-    if (IS_DEV && !prevModalState && !nextModalState) {
-      return warn(`[switchPrevNext] prevModal is ${prevModal}, nextModal is ${nextModal}`);
-    }
-
-    const prevIsCard = !!prevModalState && prevModalState.type === ModalType.CARD;
-
-    const nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
-    const nextIsCard = !!nextModalState && nextModalState.type === ModalType.CARD;
-
-    // Ждём полного скрытия предыдущей модалки
-    if (prevModalState && (nextIsCard || prevIsCard && nextIsPage)) {
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(prevModalState, () => {
-        this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-        this.animateModalOpacity(nextModalState, true);
-      });
-
-      requestAnimationFrame(() => {
-        this.animateModalOpacity(prevModalState, false);
-      });
-
-      return;
-    }
-
-    if (prevModalState && nextIsPage) {
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-      requestAnimationFrame(() => {
-        this.animateModalOpacity(prevModalState, false);
-      });
-    }
-
-    if (!prevModal && this.props.document.activeElement) {
-      this.restoreFocusTo = this.props.document.activeElement as HTMLElement;
-    }
-
-    this.activeTransitions += 1;
-    this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-    requestAnimationFrame(() => {
-      this.animateModalOpacity(nextModalState, true);
-    });
-  }
-
-  prevNextSwitchEndHandler = () => {
-    this.activeTransitions = Math.max(0, this.activeTransitions - 1);
-    if (this.activeTransitions > 0) {
-      return;
-    }
-
-    const activeModal = this.state.nextModal;
-
-    const newState: ModalRootState = {
-      prevModal: null,
-      nextModal: null,
-      visibleModals: [activeModal],
-      activeModal: activeModal,
-      animated: false,
-      switching: false,
-    };
-
-    if (!activeModal) {
-      newState.history = [];
-      if (this.restoreFocusTo) {
-        this.restoreFocusTo.focus();
-      }
-    }
-
-    this.setState(newState);
-  };
-
   /* Анимирует сдивг модалки */
   animateModalOpacity(modalState: ModalsStateEntry, display: boolean) {
+    modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? `${this.timeout}ms` : null;
     modalState.innerElement.style.opacity = display ? '1' : '0';
   }
 
   /* Устанавливает прозрачность для полупрозрачной подложки */
   setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number = null) {
-    if (forceOpacity === null && this.state.history[0] !== modalState.id) {
+    if (forceOpacity === null && this.props.history[0] !== modalState.id) {
       return;
     }
 
@@ -315,30 +143,10 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
     });
   }
 
-  /**
-   * Закрывает текущую модалку
-   */
-  triggerActiveModalClose = () => {
-    const activeModalState = this.modalsState[this.state.activeModal];
-    if (activeModalState) {
-      this.doCloseModal(activeModalState);
-    }
-  };
-
-  private readonly doCloseModal = (modalState: ModalsStateEntry) => {
-    if (isFunction(modalState.onClose)) {
-      modalState.onClose();
-    } else if (isFunction(this.props.onClose)) {
-      this.props.onClose(modalState.id);
-    } else if (IS_DEV) {
-      warn('onClose is undefined');
-    }
-  };
-
   render() {
-    const { prevModal, activeModal, nextModal, visibleModals, animated } = this.state;
+    const { exitingModal, activeModal, enteringModal } = this.props;
 
-    if (!activeModal && !prevModal && !nextModal && !animated) {
+    if (!activeModal && !exitingModal) {
       return null;
     }
 
@@ -351,13 +159,13 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
         >
           <div
             vkuiClass="ModalRoot__mask"
-            onClick={this.triggerActiveModalClose}
             ref={this.maskElementRef}
+            onClick={this.props.closeActiveModal}
           />
           <div vkuiClass="ModalRoot__viewport">
             {this.modals.map((Modal: React.ReactElement) => {
               const modalId = getNavId(Modal.props, warn);
-              if (!visibleModals.includes(modalId)) {
+              if (modalId !== activeModal && modalId !== exitingModal) {
                 return null;
               }
 
@@ -366,13 +174,13 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
               return (
                 <FocusTrap
                   restoreFocus={false}
-                  onClose={this.triggerActiveModalClose}
+                  onClose={this.props.closeActiveModal}
                   timeout={this.timeout}
                   key={key}
                   vkuiClass={classNames('ModalRoot__modal', {
-                    'ModalRoot__modal--active': modalId === activeModal,
-                    'ModalRoot__modal--prev': modalId === prevModal,
-                    'ModalRoot__modal--next': modalId === nextModal,
+                    'ModalRoot__modal--active': !exitingModal && !enteringModal && modalId === activeModal,
+                    'ModalRoot__modal--prev': modalId === exitingModal,
+                    'ModalRoot__modal--next': exitingModal && modalId === activeModal,
                   })}
                 >{Modal}</FocusTrap>
               );
@@ -384,4 +192,10 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
   }
 }
 
-export const ModalRootDesktop = withContext(withPlatform(withDOM<ModalRootProps>(ModalRootDesktopComponent)), ConfigProviderContext, 'configProvider');
+export const ModalRootDesktop = withContext(
+  withPlatform(
+    withDOM<ModalRootProps>(
+      withModalManager()(ModalRootDesktopComponent),
+    ),
+  ),
+  ConfigProviderContext, 'configProvider');

package/src/components/ModalRoot/Readme.md

@@ -23,9 +23,9 @@ class App extends Component {
     );
 
     return (
-      <View modal={modal}>
+      <SplitLayout modal={modal}>
         ...
-      </View>
+      </SplitLayout>
     );
   }
 }
@@ -47,7 +47,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const MODAL_PAGE_FILTERS = 'filters';
 const MODAL_PAGE_COUNTRIES = 'countries';
 const MODAL_PAGE_STORY_FEEDBACK = 'story-feedback';
@@ -410,25 +410,29 @@ const App = withPlatform(withAdaptivity(class App extends React.Component {
     );
 
     return (
-      <View activePanel="modals" modal={modal}>
-        <Panel id="modals">
-          <PanelHeader>Модальные окна</PanelHeader>
-            <Group>
-              <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_FILTERS)}>
-                Открыть модальную страницу
-              </CellButton>
-              <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_FULLSCREEN)}>
-                Открыть полноэкранную модальную страницу
-              </CellButton>
-              <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_DYNAMIC)}>
-                Открыть модальную страницу с динамической высотой
-              </CellButton>
-              <CellButton onClick={() => this.setActiveModal(MODAL_CARD_MONEY_SEND)}>
-                Открыть модальные карточки
-              </CellButton>
-            </Group>
-        </Panel>
-      </View>
+      <SplitLayout modal={modal}>
+        <SplitCol>
+        <View activePanel="modals">
+          <Panel id="modals">
+            <PanelHeader>Модальные окна</PanelHeader>
+              <Group>
+                <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_FILTERS)}>
+                  Открыть модальную страницу
+                </CellButton>
+                <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_FULLSCREEN)}>
+                  Открыть полноэкранную модальную страницу
+                </CellButton>
+                <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_DYNAMIC)}>
+                  Открыть модальную страницу с динамической высотой
+                </CellButton>
+                <CellButton onClick={() => this.setActiveModal(MODAL_CARD_MONEY_SEND)}>
+                  Открыть модальные карточки
+                </CellButton>
+              </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     );
   }
 }, {
@@ -464,11 +468,15 @@ class App extends Component {
     );
 
     return (
-      <View activePanel="main" modal={modal}>
-        <Panel id="main">
-          ...
-        </Panel>
-      </View>
+      <SplitLayout modal={modal}>
+        <SplitCol>
+        <View activePanel="main">
+          <Panel id="main">
+            ...
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     );
   }
 }

package/src/components/ModalRoot/types.ts

@@ -12,7 +12,6 @@ export interface ModalElements {
   innerElement?: HTMLElement | null;
   headerElement?: HTMLElement | null;
   contentElement?: HTMLElement | null;
-  footerElement?: HTMLElement | null;
 }
 
 export interface ModalsStateEntry extends ModalElements {

package/src/components/ModalRoot/useModalManager.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { ModalsState, ModalsStateEntry, ModalType } from './types';
+import { warnOnce } from '../../lib/warnOnce';
+import { getNavId } from '../../lib/getNavId';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { noop, isFunction } from '../../lib/utils';
+
+interface ModalTransitionState {
+  activeModal?: string;
+  enteringModal?: string;
+  exitingModal?: string;
+
+  history?: string[];
+  isBack?: boolean;
+}
+
+export interface ModalTransitionProps extends ModalTransitionState {
+  onEnter: (id: string) => void;
+  onExit: (id: string) => void;
+  getModalState: (id: string) => ModalsStateEntry;
+  closeActiveModal: VoidFunction;
+  delayEnter: boolean;
+}
+
+function getModals(children: React.ReactNode | React.ReactNode[]) {
+  return React.Children.toArray(children) as React.ReactElement[];
+}
+
+const warn = warnOnce('ModalRoot');
+
+export function modalTransitionReducer(
+  state: ModalTransitionState,
+  action: { type: 'setActive' | 'entered' | 'exited' | 'inited'; id: string },
+): ModalTransitionState {
+  if (action.type === 'setActive' && action.id !== state.activeModal) {
+    const nextModal = action.id;
+    // preserve exiting modal if switching mid-transition
+    const prevModal = state.exitingModal || state.activeModal;
+    let history = [...state.history];
+    const isBack = history.includes(nextModal);
+
+    if (nextModal === null) {
+      history = [];
+    } else if (isBack) {
+      history = history.splice(0, history.indexOf(nextModal) + 1);
+    } else {
+      history.push(nextModal);
+    }
+
+    return {
+      activeModal: nextModal,
+      // not entering yet
+      enteringModal: null,
+      exitingModal: prevModal,
+      history,
+      isBack,
+    };
+  }
+  if (action.type === 'entered' && action.id === state.enteringModal) {
+    return { ...state, enteringModal: null };
+  }
+  if (action.type === 'exited' && action.id === state.exitingModal) {
+    return { ...state, exitingModal: null };
+  }
+  if (action.type === 'inited' && action.id === state.activeModal) {
+    return { ...state, enteringModal: action.id };
+  }
+  return state;
+}
+
+/**
+ * Реализует переход модалок. При смене activeModal m1 -> m2:
+ * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
+ * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
+ * одновременный переход между ModalPage:
+ *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
+ *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
+ * ИЛИ дожидаемся скрытия ModalCard
+ *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
+ *   4b. enteringModal переходит в null после завершения анимации
+ * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
+ */
+export function useModalManager(
+  activeModal: string,
+  children: React.ReactNode | React.ReactNode[],
+  onClose: (id: string) => void,
+  initModal: (state: ModalsStateEntry) => void = noop,
+): ModalTransitionProps {
+  const modalsState = React.useRef<ModalsState>({}).current;
+  getModals(children).forEach((Modal) => {
+    const modalProps = Modal.props;
+    const id = getNavId(modalProps, warn);
+    const state: ModalsStateEntry = modalsState[id] || { id };
+
+    state.onClose = Modal.props.onClose;
+    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
+    // ModalPage props
+    if (typeof modalProps.settlingHeight === 'number') {
+      state.settlingHeight = modalProps.settlingHeight;
+    }
+
+    modalsState[state.id] = state;
+  });
+
+  const isMissing = activeModal && !modalsState[activeModal];
+  const safeActiveModal = isMissing ? null : activeModal;
+  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {
+    activeModal: safeActiveModal,
+    enteringModal: null,
+    exitingModal: null,
+    history: safeActiveModal ? [safeActiveModal] : [],
+    isBack: false,
+  });
+
+  // Map props to state, render activeModal for init
+  useIsomorphicLayoutEffect(() => {
+    // ignore non-existent activeModal
+    if (process.env.NODE_ENV === 'development' && isMissing) {
+      warn(`Can't transition - modal ${activeModal} not found`);
+    }
+    dispatchTransition({ type: 'setActive', id: safeActiveModal });
+  }, [activeModal]);
+
+  // Init activeModal & set enteringModal
+  useIsomorphicLayoutEffect(() => {
+    if (transitionState.activeModal) {
+      initModal(modalsState[transitionState.activeModal]);
+      dispatchTransition({ type: 'inited', id: transitionState.activeModal });
+    }
+  }, [transitionState.activeModal]);
+
+  const isCard = (id: string) => modalsState[id]?.type === ModalType.CARD;
+  const onEnter = React.useCallback((id: string) => dispatchTransition({ type: 'entered', id }), []);
+  const onExit = React.useCallback((id: string) => dispatchTransition({ type: 'exited', id }), []);
+  const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
+  const getModalState = React.useCallback((id: string) => modalsState[id], []);
+
+  function closeActiveModal() {
+    const modalState = modalsState[transitionState.activeModal];
+    if (modalState) {
+      if (isFunction(modalState.onClose)) {
+        modalState.onClose();
+      } else if (isFunction(onClose)) {
+        onClose(modalState.id);
+      } else if (process.env.NODE_ENV === 'development') {
+        warn('onClose is undefined');
+      }
+    }
+  }
+
+  return {
+    onEnter,
+    onExit,
+    ...transitionState,
+    delayEnter,
+    getModalState,
+    closeActiveModal,
+  };
+}
+
+export function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {
+  return function<Props extends ModalTransitionProps>(
+    Wrapped: React.ComponentType<Props>,
+  ): React.FC<Omit<Props, keyof ModalTransitionProps> & { activeModal: string }> {
+    return function WithModalManager(props) {
+      const transitionManager = useModalManager(
+        props.activeModal,
+        props.children,
+        (props as any).onClose,
+        initModal);
+      return <Wrapped {...props as any} {...transitionManager} />;
+    };
+  };
+}