@hh.ru/magritte-ui-modal 11.0.41 → 11.0.43

package/internal/constants.js

@@ -1,52 +1,43 @@
 import './../index.css';
 import coreTokens from '@hh.ru/magritte-design-tokens/core-tokens';
-import { s as styles } from '../modal-Df_WVial.js';
+import { s as styles } from '../modal-DKfr_WcM.js';
 
-/** Отступ сверху под page-header (px) — дефолт для `position=left|right` без оверлея. */
 const DEFAULT_PAGE_HEADER_PADDING = 72;
-const noop = () => undefined;
-/** Длительности анимации появления/исчезновения модала (мс) — из дизайн-токенов (см. modal.less). */
-const ENTER_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-300'].duration;
-const EXIT_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-200'].duration;
-/**
- * Таймаут `CSSTransition` для анимации модала (мс).
- * При `prefers-reduced-motion` анимация мгновенная (0) — согласовано с media-query в modal.less.
- */
+const noop = () => void 0;
+const ENTER_ANIMATION_DURATION = coreTokens["magritte-semantic-animation-ease-in-out-300"].duration;
+const EXIT_ANIMATION_DURATION = coreTokens["magritte-semantic-animation-ease-in-out-200"].duration;
 const getAnimationTimeout = () => {
-    const prefersReducedMotion = typeof window !== 'undefined' &&
-        typeof window.matchMedia === 'function' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if (prefersReducedMotion) {
-        return { enter: 0, exit: 0 };
-    }
-    return { enter: ENTER_ANIMATION_DURATION, exit: EXIT_ANIMATION_DURATION };
+  const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (prefersReducedMotion) {
+    return { enter: 0, exit: 0 };
+  }
+  return { enter: ENTER_ANIMATION_DURATION, exit: EXIT_ANIMATION_DURATION };
 };
-/** Классы фаз `CSSTransition` по позиции модала. */
 const CSS_CLASSES = {
-    center: {
-        appear: styles.animationEnterCenter,
-        appearActive: styles.animationEnterCenterActive,
-        enter: styles.animationEnterCenter,
-        enterActive: styles.animationEnterCenterActive,
-        exit: styles.animationExitCenter,
-        exitActive: styles.animationExitCenterActive,
-    },
-    left: {
-        appear: styles.animationEnterLeft,
-        appearActive: styles.animationEnterLeftActive,
-        enter: styles.animationEnterLeft,
-        enterActive: styles.animationEnterLeftActive,
-        exit: styles.animationExitLeft,
-        exitActive: styles.animationExitLeftActive,
-    },
-    right: {
-        appear: styles.animationEnterRight,
-        appearActive: styles.animationEnterRightActive,
-        enter: styles.animationEnterRight,
-        enterActive: styles.animationEnterRightActive,
-        exit: styles.animationExitRight,
-        exitActive: styles.animationExitRightActive,
-    },
+  center: {
+    appear: styles.animationEnterCenter,
+    appearActive: styles.animationEnterCenterActive,
+    enter: styles.animationEnterCenter,
+    enterActive: styles.animationEnterCenterActive,
+    exit: styles.animationExitCenter,
+    exitActive: styles.animationExitCenterActive
+  },
+  left: {
+    appear: styles.animationEnterLeft,
+    appearActive: styles.animationEnterLeftActive,
+    enter: styles.animationEnterLeft,
+    enterActive: styles.animationEnterLeftActive,
+    exit: styles.animationExitLeft,
+    exitActive: styles.animationExitLeftActive
+  },
+  right: {
+    appear: styles.animationEnterRight,
+    appearActive: styles.animationEnterRightActive,
+    enter: styles.animationEnterRight,
+    enterActive: styles.animationEnterRightActive,
+    exit: styles.animationExitRight,
+    exitActive: styles.animationExitRightActive
+  }
 };
 
 export { CSS_CLASSES, DEFAULT_PAGE_HEADER_PADDING, getAnimationTimeout, noop };

package/internal/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["src/internal/constants.ts"],"sourcesContent":["import coreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\n\nimport styles from './modal.less';\n\n/** Отступ сверху под page-header (px) — дефолт для `position=left|right` без оверлея. */\nexport const DEFAULT_PAGE_HEADER_PADDING = 72;\n\nexport const noop = (): undefined => undefined;\n\n/** Длительности анимации появления/исчезновения модала (мс) — из дизайн-токенов (см. modal.less). */\nconst ENTER_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-300'].duration;\nconst EXIT_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-200'].duration;\n\n/**\n * Таймаут `CSSTransition` для анимации модала (мс).\n * При `prefers-reduced-motion` анимация мгновенная (0) — согласовано с media-query в modal.less.\n */\nexport const getAnimationTimeout = (): { enter: number; exit: number } => {\n    const prefersReducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    if (prefersReducedMotion) {\n        return { enter: 0, exit: 0 };\n    }\n\n    return { enter: ENTER_ANIMATION_DURATION, exit: EXIT_ANIMATION_DURATION };\n};\n\n/** Классы фаз `CSSTransition` по позиции модала. */\nexport const CSS_CLASSES = {\n    center: {\n        appear: styles.animationEnterCenter,\n        appearActive: styles.animationEnterCenterActive,\n        enter: styles.animationEnterCenter,\n        enterActive: styles.animationEnterCenterActive,\n        exit: styles.animationExitCenter,\n        exitActive: styles.animationExitCenterActive,\n    },\n    left: {\n        appear: styles.animationEnterLeft,\n        appearActive: styles.animationEnterLeftActive,\n        enter: styles.animationEnterLeft,\n        enterActive: styles.animationEnterLeftActive,\n        exit: styles.animationExitLeft,\n        exitActive: styles.animationExitLeftActive,\n    },\n    right: {\n        appear: styles.animationEnterRight,\n        appearActive: styles.animationEnterRightActive,\n        enter: styles.animationEnterRight,\n        enterActive: styles.animationEnterRightActive,\n        exit: styles.animationExitRight,\n        exitActive: styles.animationExitRightActive,\n    },\n};\n"],"names":[],"mappings":";;;AAIA;AACO,MAAM,2BAA2B,GAAG,GAAG;MAEjC,IAAI,GAAG,MAAiB,UAAU;AAE/C;AACA,MAAM,wBAAwB,GAAG,UAAU,CAAC,6CAA6C,CAAC,CAAC,QAAQ,CAAC;AACpG,MAAM,uBAAuB,GAAG,UAAU,CAAC,6CAA6C,CAAC,CAAC,QAAQ,CAAC;AAEnG;;;AAGG;AACI,MAAM,mBAAmB,GAAG,MAAsC;AACrE,IAAA,MAAM,oBAAoB,GACtB,OAAO,MAAM,KAAK,WAAW;AAC7B,QAAA,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;AACvC,QAAA,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;IAElE,IAAI,oBAAoB,EAAE;QACtB,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;KAChC;IAED,OAAO,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC;AAC9E,EAAE;AAEF;AACa,MAAA,WAAW,GAAG;AACvB,IAAA,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,oBAAoB;QACnC,YAAY,EAAE,MAAM,CAAC,0BAA0B;QAC/C,KAAK,EAAE,MAAM,CAAC,oBAAoB;QAClC,WAAW,EAAE,MAAM,CAAC,0BAA0B;QAC9C,IAAI,EAAE,MAAM,CAAC,mBAAmB;QAChC,UAAU,EAAE,MAAM,CAAC,yBAAyB;AAC/C,KAAA;AACD,IAAA,IAAI,EAAE;QACF,MAAM,EAAE,MAAM,CAAC,kBAAkB;QACjC,YAAY,EAAE,MAAM,CAAC,wBAAwB;QAC7C,KAAK,EAAE,MAAM,CAAC,kBAAkB;QAChC,WAAW,EAAE,MAAM,CAAC,wBAAwB;QAC5C,IAAI,EAAE,MAAM,CAAC,iBAAiB;QAC9B,UAAU,EAAE,MAAM,CAAC,uBAAuB;AAC7C,KAAA;AACD,IAAA,KAAK,EAAE;QACH,MAAM,EAAE,MAAM,CAAC,mBAAmB;QAClC,YAAY,EAAE,MAAM,CAAC,yBAAyB;QAC9C,KAAK,EAAE,MAAM,CAAC,mBAAmB;QACjC,WAAW,EAAE,MAAM,CAAC,yBAAyB;QAC7C,IAAI,EAAE,MAAM,CAAC,kBAAkB;QAC/B,UAAU,EAAE,MAAM,CAAC,wBAAwB;AAC9C,KAAA;;;;;"}
+{"version":3,"file":"constants.js","sources":["src/internal/constants.ts"],"sourcesContent":["import coreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\n\nimport styles from './modal.less';\n\n/** Отступ сверху под page-header (px) — дефолт для `position=left|right` без оверлея. */\nexport const DEFAULT_PAGE_HEADER_PADDING = 72;\n\nexport const noop = (): undefined => undefined;\n\n/** Длительности анимации появления/исчезновения модала (мс) — из дизайн-токенов (см. modal.less). */\nconst ENTER_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-300'].duration;\nconst EXIT_ANIMATION_DURATION = coreTokens['magritte-semantic-animation-ease-in-out-200'].duration;\n\n/**\n * Таймаут `CSSTransition` для анимации модала (мс).\n * При `prefers-reduced-motion` анимация мгновенная (0) — согласовано с media-query в modal.less.\n */\nexport const getAnimationTimeout = (): { enter: number; exit: number } => {\n    const prefersReducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    if (prefersReducedMotion) {\n        return { enter: 0, exit: 0 };\n    }\n\n    return { enter: ENTER_ANIMATION_DURATION, exit: EXIT_ANIMATION_DURATION };\n};\n\n/** Классы фаз `CSSTransition` по позиции модала. */\nexport const CSS_CLASSES = {\n    center: {\n        appear: styles.animationEnterCenter,\n        appearActive: styles.animationEnterCenterActive,\n        enter: styles.animationEnterCenter,\n        enterActive: styles.animationEnterCenterActive,\n        exit: styles.animationExitCenter,\n        exitActive: styles.animationExitCenterActive,\n    },\n    left: {\n        appear: styles.animationEnterLeft,\n        appearActive: styles.animationEnterLeftActive,\n        enter: styles.animationEnterLeft,\n        enterActive: styles.animationEnterLeftActive,\n        exit: styles.animationExitLeft,\n        exitActive: styles.animationExitLeftActive,\n    },\n    right: {\n        appear: styles.animationEnterRight,\n        appearActive: styles.animationEnterRightActive,\n        enter: styles.animationEnterRight,\n        enterActive: styles.animationEnterRightActive,\n        exit: styles.animationExitRight,\n        exitActive: styles.animationExitRightActive,\n    },\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,2BAA8B,GAAA,GAAA;AAEpC,MAAM,OAAO,MAAiB,KAAA,EAAA;AAGrC,MAAM,wBAAA,GAA2B,UAAW,CAAA,6CAA6C,CAAE,CAAA,QAAA,CAAA;AAC3F,MAAM,uBAAA,GAA0B,UAAW,CAAA,6CAA6C,CAAE,CAAA,QAAA,CAAA;AAMnF,MAAM,sBAAsB,MAAuC;AACtE,EAAM,MAAA,oBAAA,GACF,OAAO,MAAA,KAAW,WAClB,IAAA,OAAO,MAAO,CAAA,UAAA,KAAe,UAC7B,IAAA,MAAA,CAAO,UAAW,CAAA,kCAAkC,CAAE,CAAA,OAAA,CAAA;AAE1D,EAAA,IAAI,oBAAsB,EAAA;AACtB,IAAA,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,IAAA,EAAM,CAAE,EAAA,CAAA;AAAA,GAC/B;AAEA,EAAA,OAAO,EAAE,KAAA,EAAO,wBAA0B,EAAA,IAAA,EAAM,uBAAwB,EAAA,CAAA;AAC5E,EAAA;AAGO,MAAM,WAAc,GAAA;AAAA,EACvB,MAAQ,EAAA;AAAA,IACJ,QAAQ,MAAO,CAAA,oBAAA;AAAA,IACf,cAAc,MAAO,CAAA,0BAAA;AAAA,IACrB,OAAO,MAAO,CAAA,oBAAA;AAAA,IACd,aAAa,MAAO,CAAA,0BAAA;AAAA,IACpB,MAAM,MAAO,CAAA,mBAAA;AAAA,IACb,YAAY,MAAO,CAAA,yBAAA;AAAA,GACvB;AAAA,EACA,IAAM,EAAA;AAAA,IACF,QAAQ,MAAO,CAAA,kBAAA;AAAA,IACf,cAAc,MAAO,CAAA,wBAAA;AAAA,IACrB,OAAO,MAAO,CAAA,kBAAA;AAAA,IACd,aAAa,MAAO,CAAA,wBAAA;AAAA,IACpB,MAAM,MAAO,CAAA,iBAAA;AAAA,IACb,YAAY,MAAO,CAAA,uBAAA;AAAA,GACvB;AAAA,EACA,KAAO,EAAA;AAAA,IACH,QAAQ,MAAO,CAAA,mBAAA;AAAA,IACf,cAAc,MAAO,CAAA,yBAAA;AAAA,IACrB,OAAO,MAAO,CAAA,mBAAA;AAAA,IACd,aAAa,MAAO,CAAA,yBAAA;AAAA,IACpB,MAAM,MAAO,CAAA,kBAAA;AAAA,IACb,YAAY,MAAO,CAAA,wBAAA;AAAA,GACvB;AACJ;;;;"}

package/internal/isTreeSelectorChild.js

@@ -2,11 +2,6 @@ import './../index.css';
 import { Children } from 'react';
 import { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';
 
-/**
- * `true`, если среди детей модала есть `TreeSelector`-обёртка. Единая точка детекции: её используют и
- * `Modal` (форсит `height='full-screen'`), и `ModalContent` (рендерит особый контейнер) — проверка детей
- * должна совпадать в обоих местах, иначе детекция разъедется.
- */
 const isTreeSelectorChild = (children) => Children.toArray(children).some(isValidTreeSelectorWrapper);
 
 export { isTreeSelectorChild };

package/internal/isTreeSelectorChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"isTreeSelectorChild.js","sources":["src/internal/isTreeSelectorChild.ts"],"sourcesContent":["import { Children, type ReactNode } from 'react';\n\nimport { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';\n\n/**\n * `true`, если среди детей модала есть `TreeSelector`-обёртка. Единая точка детекции: её используют и\n * `Modal` (форсит `height='full-screen'`), и `ModalContent` (рендерит особый контейнер) — проверка детей\n * должна совпадать в обоих местах, иначе детекция разъедется.\n */\nexport const isTreeSelectorChild = (children: ReactNode): boolean =>\n    Children.toArray(children).some(isValidTreeSelectorWrapper);\n"],"names":[],"mappings":";;;AAIA;;;;AAIG;MACU,mBAAmB,GAAG,CAAC,QAAmB,KACnD,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,0BAA0B;;;;"}
+{"version":3,"file":"isTreeSelectorChild.js","sources":["src/internal/isTreeSelectorChild.ts"],"sourcesContent":["import { Children, type ReactNode } from 'react';\n\nimport { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';\n\n/**\n * `true`, если среди детей модала есть `TreeSelector`-обёртка. Единая точка детекции: её используют и\n * `Modal` (форсит `height='full-screen'`), и `ModalContent` (рендерит особый контейнер) — проверка детей\n * должна совпадать в обоих местах, иначе детекция разъедется.\n */\nexport const isTreeSelectorChild = (children: ReactNode): boolean =>\n    Children.toArray(children).some(isValidTreeSelectorWrapper);\n"],"names":[],"mappings":";;;AASa,MAAA,mBAAA,GAAsB,CAAC,QAChC,KAAA,QAAA,CAAS,QAAQ,QAAQ,CAAA,CAAE,KAAK,0BAA0B;;;;"}

package/internal/useModalOrder.js

@@ -2,90 +2,83 @@ import './../index.css';
 import { useState, useLayoutEffect, useEffect } from 'react';
 import { useDomStoredUniqueId, getValueFromDom, storeValueInDom } from '@hh.ru/magritte-common-dom-storage';
 
-const STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';
+const STORAGE_NAME = "_MAGRITTE_MODAL_COUNTER_";
 const getState = () => {
-    const state = getValueFromDom(STORAGE_NAME);
-    if (state === undefined) {
-        return {
-            prevVisiblility: {},
-            positions: {},
-            subscribers: {},
-            count: 0,
-        };
-    }
-    return state;
+  const state = getValueFromDom(STORAGE_NAME);
+  if (state === void 0) {
+    return {
+      prevVisiblility: {},
+      positions: {},
+      subscribers: {},
+      count: 0
+    };
+  }
+  return state;
 };
 const storeState = (state) => {
-    storeValueInDom(STORAGE_NAME, state);
+  storeValueInDom(STORAGE_NAME, state);
 };
 const counterFactory = () => {
-    return {
-        updateVisiblility: (id, visible) => {
-            // eslint-disable-next-line prefer-const
-            const state = getState();
-            const prevVisible = !!state.prevVisiblility[id];
-            if (visible === prevVisible) {
-                return;
-            }
-            state.prevVisiblility[id] = visible;
-            if (visible) {
-                state.count += 1;
-                state.positions[id] = state.count;
-            }
-            else {
-                state.count -= 1;
-                const currentPosition = state.positions[id];
-                state.positions[id] = 0;
-                Object.entries(state.positions).forEach(([key, value]) => {
-                    state.positions[key] = value > currentPosition ? value - 1 : value;
-                });
-            }
-            storeState(state);
-        },
-        subscribe: (id, callback) => {
-            const state = getState();
-            state.subscribers[id] = callback;
-            storeState(state);
-        },
-        unsubscribe: (id) => {
-            const state = getState();
-            delete state.subscribers[id];
-            storeState(state);
-        },
-        notifyAll: () => {
-            const { subscribers, count, positions } = getState();
-            Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));
-        },
-    };
+  return {
+    updateVisiblility: (id, visible) => {
+      const state = getState();
+      const prevVisible = !!state.prevVisiblility[id];
+      if (visible === prevVisible) {
+        return;
+      }
+      state.prevVisiblility[id] = visible;
+      if (visible) {
+        state.count += 1;
+        state.positions[id] = state.count;
+      } else {
+        state.count -= 1;
+        const currentPosition = state.positions[id];
+        state.positions[id] = 0;
+        Object.entries(state.positions).forEach(([key, value]) => {
+          state.positions[key] = value > currentPosition ? value - 1 : value;
+        });
+      }
+      storeState(state);
+    },
+    subscribe: (id, callback) => {
+      const state = getState();
+      state.subscribers[id] = callback;
+      storeState(state);
+    },
+    unsubscribe: (id) => {
+      const state = getState();
+      delete state.subscribers[id];
+      storeState(state);
+    },
+    notifyAll: () => {
+      const { subscribers, count, positions } = getState();
+      Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));
+    }
+  };
 };
 const counter = counterFactory();
 const useModalOrder = (visible, modalRef) => {
-    const [position, setPosition] = useState({ position: 0, count: 0 });
-    const id = useDomStoredUniqueId();
-    useLayoutEffect(() => {
-        counter.updateVisiblility(id, visible);
-        counter.notifyAll();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    useEffect(() => {
-        counter.subscribe(id, setPosition);
-        counter.updateVisiblility(id, visible);
-        return () => {
-            counter.unsubscribe(id);
-            counter.updateVisiblility(id, false);
-            counter.notifyAll();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
-    useLayoutEffect(() => {
-        // Если это самый "верхний" модал передаем туда фокус
-        if (position.position === position.count &&
-            position.count > 0 &&
-            !modalRef.current?.contains(document.activeElement)) {
-            modalRef.current?.focus();
-        }
-    }, [position, modalRef]);
-    return [position.position, position.count];
+  const [position, setPosition] = useState({ position: 0, count: 0 });
+  const id = useDomStoredUniqueId();
+  useLayoutEffect(() => {
+    counter.updateVisiblility(id, visible);
+    counter.notifyAll();
+  }, [visible]);
+  useEffect(() => {
+    counter.subscribe(id, setPosition);
+    counter.updateVisiblility(id, visible);
+    return () => {
+      counter.unsubscribe(id);
+      counter.updateVisiblility(id, false);
+      counter.notifyAll();
+    };
+  }, [id]);
+  useLayoutEffect(() => {
+    if (position.position === position.count && position.count > 0 && !modalRef.current?.contains(document.activeElement)) {
+      modalRef.current?.focus();
+    }
+  }, [position, modalRef]);
+  return [position.position, position.count];
 };
 
 export { useModalOrder };

package/internal/useModalOrder.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModalOrder.js","sources":["src/internal/useModalOrder.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { storeValueInDom, getValueFromDom, useDomStoredUniqueId } from '@hh.ru/magritte-common-dom-storage';\n\ntype NotifyCallbackArg = { position: number; count: number };\n\ntype Subscribers = Record<string, (position: NotifyCallbackArg) => void>;\ntype VisibilityMap = Record<string, boolean>;\ntype PositionMap = Record<string, number>;\n\ntype ModalCounterState = {\n    prevVisiblility: VisibilityMap;\n    positions: PositionMap;\n    subscribers: Subscribers;\n    count: number;\n};\n\nconst STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';\n\nconst getState = (): ModalCounterState => {\n    const state = getValueFromDom<ModalCounterState>(STORAGE_NAME);\n    if (state === undefined) {\n        return {\n            prevVisiblility: {},\n            positions: {},\n            subscribers: {},\n            count: 0,\n        };\n    }\n    return state;\n};\n\nconst storeState = (state: ModalCounterState): void => {\n    storeValueInDom(STORAGE_NAME, state);\n};\n\nconst counterFactory = () => {\n    return {\n        updateVisiblility: (id: string, visible: boolean) => {\n            // eslint-disable-next-line prefer-const\n            const state = getState();\n            const prevVisible = !!state.prevVisiblility[id];\n            if (visible === prevVisible) {\n                return;\n            }\n            state.prevVisiblility[id] = visible;\n            if (visible) {\n                state.count += 1;\n                state.positions[id] = state.count;\n            } else {\n                state.count -= 1;\n                const currentPosition = state.positions[id];\n                state.positions[id] = 0;\n                Object.entries(state.positions).forEach(([key, value]) => {\n                    state.positions[key] = value > currentPosition ? value - 1 : value;\n                });\n            }\n            storeState(state);\n        },\n        subscribe: (id: string, callback: (position: NotifyCallbackArg) => void) => {\n            const state = getState();\n            state.subscribers[id] = callback;\n            storeState(state);\n        },\n        unsubscribe: (id: string) => {\n            const state = getState();\n            delete state.subscribers[id];\n            storeState(state);\n        },\n        notifyAll: () => {\n            const { subscribers, count, positions } = getState();\n            Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));\n        },\n    };\n};\n\nconst counter = counterFactory();\n\nexport const useModalOrder = (visible: boolean, modalRef: RefObject<HTMLDivElement>): [number, number] => {\n    const [position, setPosition] = useState<{ position: number; count: number }>({ position: 0, count: 0 });\n    const id = useDomStoredUniqueId();\n\n    useLayoutEffect(() => {\n        counter.updateVisiblility(id, visible);\n        counter.notifyAll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [visible]);\n\n    useEffect(() => {\n        counter.subscribe(id, setPosition);\n        counter.updateVisiblility(id, visible);\n        return () => {\n            counter.unsubscribe(id);\n            counter.updateVisiblility(id, false);\n            counter.notifyAll();\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [id]);\n\n    useLayoutEffect(() => {\n        // Если это самый \"верхний\" модал передаем туда фокус\n        if (\n            position.position === position.count &&\n            position.count > 0 &&\n            !modalRef.current?.contains(document.activeElement)\n        ) {\n            modalRef.current?.focus();\n        }\n    }, [position, modalRef]);\n\n    return [position.position, position.count];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useModalOrder.js","sources":["src/internal/useModalOrder.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { storeValueInDom, getValueFromDom, useDomStoredUniqueId } from '@hh.ru/magritte-common-dom-storage';\n\ntype NotifyCallbackArg = { position: number; count: number };\n\ntype Subscribers = Record<string, (position: NotifyCallbackArg) => void>;\ntype VisibilityMap = Record<string, boolean>;\ntype PositionMap = Record<string, number>;\n\ntype ModalCounterState = {\n    prevVisiblility: VisibilityMap;\n    positions: PositionMap;\n    subscribers: Subscribers;\n    count: number;\n};\n\nconst STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';\n\nconst getState = (): ModalCounterState => {\n    const state = getValueFromDom<ModalCounterState>(STORAGE_NAME);\n    if (state === undefined) {\n        return {\n            prevVisiblility: {},\n            positions: {},\n            subscribers: {},\n            count: 0,\n        };\n    }\n    return state;\n};\n\nconst storeState = (state: ModalCounterState): void => {\n    storeValueInDom(STORAGE_NAME, state);\n};\n\nconst counterFactory = () => {\n    return {\n        updateVisiblility: (id: string, visible: boolean) => {\n            // eslint-disable-next-line prefer-const\n            const state = getState();\n            const prevVisible = !!state.prevVisiblility[id];\n            if (visible === prevVisible) {\n                return;\n            }\n            state.prevVisiblility[id] = visible;\n            if (visible) {\n                state.count += 1;\n                state.positions[id] = state.count;\n            } else {\n                state.count -= 1;\n                const currentPosition = state.positions[id];\n                state.positions[id] = 0;\n                Object.entries(state.positions).forEach(([key, value]) => {\n                    state.positions[key] = value > currentPosition ? value - 1 : value;\n                });\n            }\n            storeState(state);\n        },\n        subscribe: (id: string, callback: (position: NotifyCallbackArg) => void) => {\n            const state = getState();\n            state.subscribers[id] = callback;\n            storeState(state);\n        },\n        unsubscribe: (id: string) => {\n            const state = getState();\n            delete state.subscribers[id];\n            storeState(state);\n        },\n        notifyAll: () => {\n            const { subscribers, count, positions } = getState();\n            Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));\n        },\n    };\n};\n\nconst counter = counterFactory();\n\nexport const useModalOrder = (visible: boolean, modalRef: RefObject<HTMLDivElement>): [number, number] => {\n    const [position, setPosition] = useState<{ position: number; count: number }>({ position: 0, count: 0 });\n    const id = useDomStoredUniqueId();\n\n    useLayoutEffect(() => {\n        counter.updateVisiblility(id, visible);\n        counter.notifyAll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [visible]);\n\n    useEffect(() => {\n        counter.subscribe(id, setPosition);\n        counter.updateVisiblility(id, visible);\n        return () => {\n            counter.unsubscribe(id);\n            counter.updateVisiblility(id, false);\n            counter.notifyAll();\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [id]);\n\n    useLayoutEffect(() => {\n        // Если это самый \"верхний\" модал передаем туда фокус\n        if (\n            position.position === position.count &&\n            position.count > 0 &&\n            !modalRef.current?.contains(document.activeElement)\n        ) {\n            modalRef.current?.focus();\n        }\n    }, [position, modalRef]);\n\n    return [position.position, position.count];\n};\n"],"names":[],"mappings":"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"}

package/internal/useModalTransition.js

@@ -6,79 +6,78 @@ import { useModalOrder } from './useModalOrder.js';
 import '@hh.ru/magritte-common-dom-storage';
 
 const INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];
-/**
- * Жизненный цикл модала вокруг `CSSTransition`: блокировка скролла страницы на время показа, возврат
- * фокуса на активатор после закрытия, колбэки `onAppear/onBeforeExit/onAfterExit`, регистрация в стеке
- * модалов (`useModalOrder`) и обработка смены брейкпоинта (на XS/S модал скрывается). Возвращает
- * хендлеры для `CSSTransition` и флаг «скрыт на текущем брейкпоинте».
- */
-const useModalTransition = ({ visible, isServerEnv, showOverlay, returnFocusOnClose, onAppear, onBeforeExit, onAfterExit, modalRef, animationTimeoutExit, }) => {
-    const enableScrollRef = useRef();
-    const onAfterExitRef = useRef(onAfterExit);
-    const onBeforeExitRef = useRef(onBeforeExit);
-    onAfterExitRef.current = onAfterExit;
-    onBeforeExitRef.current = onBeforeExit;
-    const animationTimeoutExitRef = useRef(animationTimeoutExit);
-    animationTimeoutExitRef.current = animationTimeoutExit;
-    const activatorRef = useRef(null);
-    const onEntering = useCallback(() => {
-        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
-            activatorRef.current = document.activeElement;
-        }
-        if (!enableScrollRef.current && showOverlay) {
-            enableScrollRef.current = disableScroll();
-        }
-        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
-            modalRef.current.focus();
-        }
-    }, [returnFocusOnClose, showOverlay, modalRef]);
-    const onEntered = useCallback(() => {
-        onAppear?.();
-    }, [onAppear]);
-    const onExit = useCallback(() => {
-        onBeforeExitRef.current?.();
-    }, []);
-    const onExited = useCallback(() => {
-        // оставляем обработку скрола еще и тут
-        // чтобы обработать историю со сменой breakpoint
-        enableScrollRef.current?.();
-        enableScrollRef.current = undefined;
-        onAfterExitRef.current?.();
-        if (activatorRef.current !== null && document.contains(activatorRef.current)) {
-            activatorRef.current?.focus();
-            activatorRef.current = null;
-        }
-    }, []);
-    useModalOrder(!!visible && !isServerEnv, modalRef);
-    const { breakpoint } = useBreakpoint();
-    useEffect(() => {
-        if (!visible) {
-            return;
-        }
-        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
-        if (!currentBreakpointVisible) {
-            onExit();
-            onExited();
-            return;
-        }
-        onEntering();
-        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта
-        // visible обрабатывается CSSTransition
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [breakpoint, onEntering, onExited, onExit]);
-    useEffect(() => {
-        return () => {
-            enableScrollRef.current?.(animationTimeoutExitRef.current);
-            enableScrollRef.current = undefined;
-        };
-    }, [visible, showOverlay]);
-    return {
-        onEntering,
-        onEntered,
-        onExit,
-        onExited,
-        isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint),
+const useModalTransition = ({
+  visible,
+  isServerEnv,
+  showOverlay,
+  returnFocusOnClose,
+  onAppear,
+  onBeforeExit,
+  onAfterExit,
+  modalRef,
+  animationTimeoutExit
+}) => {
+  const enableScrollRef = useRef();
+  const onAfterExitRef = useRef(onAfterExit);
+  const onBeforeExitRef = useRef(onBeforeExit);
+  onAfterExitRef.current = onAfterExit;
+  onBeforeExitRef.current = onBeforeExit;
+  const animationTimeoutExitRef = useRef(animationTimeoutExit);
+  animationTimeoutExitRef.current = animationTimeoutExit;
+  const activatorRef = useRef(null);
+  const onEntering = useCallback(() => {
+    if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
+      activatorRef.current = document.activeElement;
+    }
+    if (!enableScrollRef.current && showOverlay) {
+      enableScrollRef.current = disableScroll();
+    }
+    if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
+      modalRef.current.focus();
+    }
+  }, [returnFocusOnClose, showOverlay, modalRef]);
+  const onEntered = useCallback(() => {
+    onAppear?.();
+  }, [onAppear]);
+  const onExit = useCallback(() => {
+    onBeforeExitRef.current?.();
+  }, []);
+  const onExited = useCallback(() => {
+    enableScrollRef.current?.();
+    enableScrollRef.current = void 0;
+    onAfterExitRef.current?.();
+    if (activatorRef.current !== null && document.contains(activatorRef.current)) {
+      activatorRef.current?.focus();
+      activatorRef.current = null;
+    }
+  }, []);
+  useModalOrder(!!visible && !isServerEnv, modalRef);
+  const { breakpoint } = useBreakpoint();
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
+    if (!currentBreakpointVisible) {
+      onExit();
+      onExited();
+      return;
+    }
+    onEntering();
+  }, [breakpoint, onEntering, onExited, onExit]);
+  useEffect(() => {
+    return () => {
+      enableScrollRef.current?.(animationTimeoutExitRef.current);
+      enableScrollRef.current = void 0;
     };
+  }, [visible, showOverlay]);
+  return {
+    onEntering,
+    onEntered,
+    onExit,
+    onExited,
+    isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint)
+  };
 };
 
 export { useModalTransition };

package/internal/useModalTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModalTransition.js","sources":["src/internal/useModalTransition.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\nimport { disableScroll, type TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/internal/useModalOrder';\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\ninterface UseModalTransitionParams {\n    visible: boolean | undefined;\n    isServerEnv: boolean;\n    showOverlay: boolean;\n    returnFocusOnClose: boolean | undefined;\n    onAppear?: VoidFunction;\n    onBeforeExit?: VoidFunction;\n    onAfterExit?: VoidFunction;\n    modalRef: RefObject<HTMLDivElement>;\n    /** Длительность анимации закрытия (мс) — с ней разблокируется скролл при размонтировании. */\n    animationTimeoutExit: number;\n}\n\ninterface UseModalTransitionResult {\n    onEntering: VoidFunction;\n    onEntered: VoidFunction;\n    onExit: VoidFunction;\n    onExited: VoidFunction;\n    /** Текущий брейкпоинт входит в число тех, на которых модал не рендерится (XS/S). */\n    isHiddenForBreakpoint: boolean;\n}\n\n/**\n * Жизненный цикл модала вокруг `CSSTransition`: блокировка скролла страницы на время показа, возврат\n * фокуса на активатор после закрытия, колбэки `onAppear/onBeforeExit/onAfterExit`, регистрация в стеке\n * модалов (`useModalOrder`) и обработка смены брейкпоинта (на XS/S модал скрывается). Возвращает\n * хендлеры для `CSSTransition` и флаг «скрыт на текущем брейкпоинте».\n */\nexport const useModalTransition = ({\n    visible,\n    isServerEnv,\n    showOverlay,\n    returnFocusOnClose,\n    onAppear,\n    onBeforeExit,\n    onAfterExit,\n    modalRef,\n    animationTimeoutExit,\n}: UseModalTransitionParams): UseModalTransitionResult => {\n    const enableScrollRef = useRef<TimeoutCallback>();\n    const onAfterExitRef = useRef(onAfterExit);\n    const onBeforeExitRef = useRef(onBeforeExit);\n    onAfterExitRef.current = onAfterExit;\n    onBeforeExitRef.current = onBeforeExit;\n    const animationTimeoutExitRef = useRef(animationTimeoutExit);\n    animationTimeoutExitRef.current = animationTimeoutExit;\n\n    const activatorRef = useRef<HTMLElement | null>(null);\n\n    const onEntering = useCallback(() => {\n        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n            activatorRef.current = document.activeElement;\n        }\n        if (!enableScrollRef.current && showOverlay) {\n            enableScrollRef.current = disableScroll();\n        }\n        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n            modalRef.current.focus();\n        }\n    }, [returnFocusOnClose, showOverlay, modalRef]);\n\n    const onEntered = useCallback(() => {\n        onAppear?.();\n    }, [onAppear]);\n\n    const onExit = useCallback(() => {\n        onBeforeExitRef.current?.();\n    }, []);\n\n    const onExited = useCallback(() => {\n        // оставляем обработку скрола еще и тут\n        // чтобы обработать историю со сменой breakpoint\n        enableScrollRef.current?.();\n        enableScrollRef.current = undefined;\n\n        onAfterExitRef.current?.();\n\n        if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n            activatorRef.current?.focus();\n            activatorRef.current = null;\n        }\n    }, []);\n\n    useModalOrder(!!visible && !isServerEnv, modalRef);\n\n    const { breakpoint } = useBreakpoint();\n    useEffect(() => {\n        if (!visible) {\n            return;\n        }\n\n        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n        if (!currentBreakpointVisible) {\n            onExit();\n            onExited();\n            return;\n        }\n\n        onEntering();\n        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n        // visible обрабатывается CSSTransition\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [breakpoint, onEntering, onExited, onExit]);\n\n    useEffect(() => {\n        return () => {\n            enableScrollRef.current?.(animationTimeoutExitRef.current);\n            enableScrollRef.current = undefined;\n        };\n    }, [visible, showOverlay]);\n\n    return {\n        onEntering,\n        onEntered,\n        onExit,\n        onExited,\n        isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint),\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useModalTransition.js","sources":["src/internal/useModalTransition.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\nimport { disableScroll, type TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/internal/useModalOrder';\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\ninterface UseModalTransitionParams {\n    visible: boolean | undefined;\n    isServerEnv: boolean;\n    showOverlay: boolean;\n    returnFocusOnClose: boolean | undefined;\n    onAppear?: VoidFunction;\n    onBeforeExit?: VoidFunction;\n    onAfterExit?: VoidFunction;\n    modalRef: RefObject<HTMLDivElement>;\n    /** Длительность анимации закрытия (мс) — с ней разблокируется скролл при размонтировании. */\n    animationTimeoutExit: number;\n}\n\ninterface UseModalTransitionResult {\n    onEntering: VoidFunction;\n    onEntered: VoidFunction;\n    onExit: VoidFunction;\n    onExited: VoidFunction;\n    /** Текущий брейкпоинт входит в число тех, на которых модал не рендерится (XS/S). */\n    isHiddenForBreakpoint: boolean;\n}\n\n/**\n * Жизненный цикл модала вокруг `CSSTransition`: блокировка скролла страницы на время показа, возврат\n * фокуса на активатор после закрытия, колбэки `onAppear/onBeforeExit/onAfterExit`, регистрация в стеке\n * модалов (`useModalOrder`) и обработка смены брейкпоинта (на XS/S модал скрывается). Возвращает\n * хендлеры для `CSSTransition` и флаг «скрыт на текущем брейкпоинте».\n */\nexport const useModalTransition = ({\n    visible,\n    isServerEnv,\n    showOverlay,\n    returnFocusOnClose,\n    onAppear,\n    onBeforeExit,\n    onAfterExit,\n    modalRef,\n    animationTimeoutExit,\n}: UseModalTransitionParams): UseModalTransitionResult => {\n    const enableScrollRef = useRef<TimeoutCallback>();\n    const onAfterExitRef = useRef(onAfterExit);\n    const onBeforeExitRef = useRef(onBeforeExit);\n    onAfterExitRef.current = onAfterExit;\n    onBeforeExitRef.current = onBeforeExit;\n    const animationTimeoutExitRef = useRef(animationTimeoutExit);\n    animationTimeoutExitRef.current = animationTimeoutExit;\n\n    const activatorRef = useRef<HTMLElement | null>(null);\n\n    const onEntering = useCallback(() => {\n        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n            activatorRef.current = document.activeElement;\n        }\n        if (!enableScrollRef.current && showOverlay) {\n            enableScrollRef.current = disableScroll();\n        }\n        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n            modalRef.current.focus();\n        }\n    }, [returnFocusOnClose, showOverlay, modalRef]);\n\n    const onEntered = useCallback(() => {\n        onAppear?.();\n    }, [onAppear]);\n\n    const onExit = useCallback(() => {\n        onBeforeExitRef.current?.();\n    }, []);\n\n    const onExited = useCallback(() => {\n        // оставляем обработку скрола еще и тут\n        // чтобы обработать историю со сменой breakpoint\n        enableScrollRef.current?.();\n        enableScrollRef.current = undefined;\n\n        onAfterExitRef.current?.();\n\n        if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n            activatorRef.current?.focus();\n            activatorRef.current = null;\n        }\n    }, []);\n\n    useModalOrder(!!visible && !isServerEnv, modalRef);\n\n    const { breakpoint } = useBreakpoint();\n    useEffect(() => {\n        if (!visible) {\n            return;\n        }\n\n        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n        if (!currentBreakpointVisible) {\n            onExit();\n            onExited();\n            return;\n        }\n\n        onEntering();\n        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n        // visible обрабатывается CSSTransition\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [breakpoint, onEntering, onExited, onExit]);\n\n    useEffect(() => {\n        return () => {\n            enableScrollRef.current?.(animationTimeoutExitRef.current);\n            enableScrollRef.current = undefined;\n        };\n    }, [visible, showOverlay]);\n\n    return {\n        onEntering,\n        onEntered,\n        onExit,\n        onExited,\n        isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint),\n    };\n};\n"],"names":[],"mappings":"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"}