@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/dist/components/ModalRoot/useModalManager.js

@@ -1,205 +1,49 @@
-'use client';
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { isFunction, noop } from "@vkontakte/vkjs";
-import { getNavId } from "../../lib/getNavId.js";
+import { useContext, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-import { warnOnce } from "../../lib/warnOnce.js";
-function getModals(children) {
-    return React.Children.toArray(children);
-}
-const warn = warnOnce('ModalRoot');
-export function modalTransitionReducer(state, action) {
-    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 ? [
-            ...state.history
-        ] : [];
-        const isBack = Boolean(nextModal && history.includes(nextModal));
-        if (nextModal === null) {
-            history = [];
-        } else if (isBack) {
-            history = history.splice(0, history.indexOf(nextModal) + 1);
-        } else {
-            history.push(nextModal);
+import { ModalOverlay } from "../ModalOverlay/ModalOverlay.js";
+import { ModalRootContext } from "./ModalRootContext.js";
+import { VisuallyHiddenModalOverlay } from "./VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.js";
+export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed })=>{
+    const context = useContext(ModalRootContext);
+    const opened = context.isInsideModal ? context.activeModal === id : open;
+    const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
+    useIsomorphicLayoutEffect(function unsetUnmounted() {
+        if (!keepMounted && opened) {
+            setUnmounted((prev)=>prev ? false : prev);
         }
+    }, [
+        opened,
+        keepMounted
+    ]);
+    if (unmounted) {
         return {
-            activeModal: nextModal,
-            // not entering yet
-            enteringModal: null,
-            exitingModal: prevModal,
-            history,
-            isBack
+            mounted: false
         };
     }
-    if (action.type === 'entered' && action.id === state.enteringModal) {
-        return _object_spread_props(_object_spread({}, state), {
-            enteringModal: null
-        });
-    }
-    if (action.type === 'exited' && action.id === state.exitingModal) {
-        return _object_spread_props(_object_spread({}, state), {
-            exitingModal: null
-        });
-    }
-    if (action.type === 'inited' && action.id === state.activeModal) {
-        return _object_spread_props(_object_spread({}, 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, children, onOpen = noop, onOpened = noop, onClose = noop, onClosed = noop, initModal = noop) {
-    const modalsState = React.useRef({}).current;
-    getModals(children).forEach((Modal)=>{
-        const modalProps = Modal.props;
-        const id = getNavId(modalProps, warn);
-        const state = id !== undefined && modalsState[id] || {
-            id: id !== null && id !== void 0 ? id : null
-        };
-        state.onOpen = Modal.props.onOpen;
-        state.onOpened = Modal.props.onOpened;
-        state.onClose = Modal.props.onClose;
-        state.onClosed = Modal.props.onClosed;
-        state.preventClose = Modal.props.preventClose;
-        // ModalPage props
-        if (typeof modalProps.settlingHeight === 'number') {
-            state.settlingHeight = modalProps.settlingHeight;
-        }
-        if (state.id !== null) {
-            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(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');
-        }
-        dispatchTransition({
-            type: 'setActive',
-            id: safeActiveModal !== null && safeActiveModal !== void 0 ? safeActiveModal : null
-        });
-    }, [
-        activeModal
-    ]);
-    // Init activeModal & set enteringModal
-    useIsomorphicLayoutEffect(()=>{
-        if (transitionState.activeModal) {
-            initModal(modalsState[transitionState.activeModal]);
-            dispatchTransition({
-                type: 'inited',
-                id: transitionState.activeModal
-            });
-        }
-    }, [
-        transitionState.activeModal
-    ]);
-    const isCard = (id)=>{
-        var _modalsState_id;
-        return id != null && ((_modalsState_id = modalsState[id]) === null || _modalsState_id === void 0 ? void 0 : _modalsState_id.type) === 'card';
-    };
-    const onEntered = React.useCallback((id)=>{
-        if (id) {
-            const modalState = modalsState[id];
-            if (isFunction(modalState.onOpened)) {
-                modalState.onOpened();
-            } else if (isFunction(onOpened)) {
-                onOpened(id);
+    return {
+        mounted: true,
+        open: opened,
+        noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
+        modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
+        ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,
+        onOpen: onOpen || getContextCallback(id, context.onOpen),
+        onOpened: onOpened || getContextCallback(id, context.onOpened),
+        onClose: onClose || getContextCallback(id, context.onClose),
+        onClosed: function handleClosed(...args) {
+            if (!keepMounted) {
+                setUnmounted(true);
             }
-        }
-        dispatchTransition({
-            type: 'entered',
-            id
-        });
-    }, [
-        modalsState,
-        onOpened
-    ]);
-    const onExited = React.useCallback((id)=>{
-        if (id) {
-            const modalState = modalsState[id];
-            if (isFunction(modalState.onClosed)) {
-                modalState.onClosed();
-            } else if (isFunction(onClosed)) {
-                onClosed(id);
+            if (onClosed) {
+                onClosed(...args);
+            } else {
+                var _context_onClosed;
+                (_context_onClosed = context.onClosed) === null || _context_onClosed === void 0 ? void 0 : _context_onClosed.call(context, id);
             }
         }
-        dispatchTransition({
-            type: 'exited',
-            id
-        });
-    }, [
-        modalsState,
-        onClosed
-    ]);
-    const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
-    const getModalState = React.useCallback((id)=>id ? modalsState[id] : undefined, [
-        modalsState
-    ]);
-    function onEnter() {
-        const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-        if (modalState) {
-            if (isFunction(modalState.onOpen)) {
-                modalState.onOpen();
-            } else if (isFunction(onOpen) && modalState.id) {
-                onOpen(modalState.id);
-            }
-        }
-    }
-    function onExit() {
-        const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-        if (modalState && !modalState.preventClose) {
-            if (isFunction(modalState.onClose)) {
-                modalState.onClose();
-            } else if (isFunction(onClose) && modalState.id) {
-                onClose(modalState.id);
-            }
-        }
-    }
-    return _object_spread_props(_object_spread({
-        onEnter,
-        onEntered,
-        onExit,
-        onExited
-    }, transitionState), {
-        delayEnter,
-        getModalState
-    });
-}
-export function withModalManager(initModal = noop) {
-    return function(Wrapped) {
-        return function WithModalManager(props) {
-            const transitionManager = useModalManager(props.activeModal, props.children, props.onOpen, props.onOpened, props.onClose, props.onClosed, initModal);
-            return /*#__PURE__*/ _jsx(Wrapped, _object_spread({}, props, transitionManager));
-        };
     };
+};
+function getContextCallback(id, fn) {
+    return fn ? ()=>fn(id) : undefined;
 }
 
 //# sourceMappingURL=useModalManager.js.map

package/dist/components/ModalRoot/useModalManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasChildren } from '../../types';\nimport type { ModalsState, ModalsStateEntry } from './types';\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string | undefined | null) => ModalsStateEntry | undefined;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: 'setActive' | 'entered' | 'exited' | 'inited';\n    id: string | null;\n  },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.preventClose = Modal.props.preventClose;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) => id != null && modalsState[id]?.type === 'card';\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: 'entered', id });\n    },\n    [modalsState, onOpened],\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: 'exited', id });\n    },\n    [modalsState, onClosed],\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),\n  );\n  const getModalState = React.useCallback(\n    (id: string | undefined | null) => (id ? modalsState[id] : undefined),\n    [modalsState],\n  );\n\n  function onEnter() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen) && modalState.id) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState && !modalState.preventClose) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose) && modalState.id) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\ntype WithModalManager<Props extends ModalTransitionProps> = HasChildren &\n  Omit<Props, keyof ModalTransitionProps> & {\n    activeModal?: string | null;\n  };\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.ComponentType<WithModalManager<Props>> {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal,\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"names":["React","isFunction","noop","getNavId","useIsomorphicLayoutEffect","warnOnce","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","preventClose","settlingHeight","isMissing","safeActiveModal","transitionState","dispatchTransition","useReducer","process","env","NODE_ENV","isCard","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n  id: string;\n  open: boolean;\n  keepMounted: boolean;\n  modalOverlayTestId?: string;\n  noFocusToDialog?: boolean;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n  open: boolean;\n  noFocusToDialog?: boolean;\n  modalOverlayTestId?: string;\n  ModalOverlay: React.ComponentType<ModalOverlayProps>;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n  | { mounted: false }\n  | ({ mounted: true } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n  id,\n  open,\n  keepMounted,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: UseModalManager): UseModalManagerResult => {\n  const context = useContext(ModalRootContext);\n  const opened = context.isInsideModal ? context.activeModal === id : open;\n\n  const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n  useIsomorphicLayoutEffect(\n    function unsetUnmounted() {\n      if (!keepMounted && opened) {\n        setUnmounted((prev) => (prev ? false : prev));\n      }\n    },\n    [opened, keepMounted],\n  );\n\n  if (unmounted) {\n    return { mounted: false };\n  }\n\n  return {\n    mounted: true,\n    open: opened,\n    noFocusToDialog: noFocusToDialog || context.noFocusToDialog,\n    modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,\n    ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n    onOpen: onOpen || getContextCallback(id, context.onOpen),\n    onOpened: onOpened || getContextCallback(id, context.onOpened),\n    onClose: onClose || getContextCallback(id, context.onClose),\n    onClosed: function handleClosed(...args: any[]) {\n      if (!keepMounted) {\n        setUnmounted(true);\n      }\n\n      if (onClosed) {\n        onClosed(...args);\n      } else {\n        context.onClosed?.(id);\n      }\n    },\n  };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {\n  return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;IAEpE,MAAM,CAACY,WAAWC,aAAa,GAAGpB,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,SAASoB;QACP,IAAI,CAACb,eAAeQ,QAAQ;YAC1BI,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;QAACN;QAAQR;KAAY;IAGvB,IAAIW,WAAW;QACb,OAAO;YAAEI,SAAS;QAAM;IAC1B;IAEA,OAAO;QACLA,SAAS;QACThB,MAAMS;QACNN,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,UAAUa,mBAAmBlB,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,YAAYY,mBAAmBlB,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,WAAWW,mBAAmBlB,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,SAASW,aAAa,GAAGC,IAAW;YAC5C,IAAI,CAAClB,aAAa;gBAChBY,aAAa;YACf;YAEA,IAAIN,UAAU;gBACZA,YAAYY;YACd,OAAO;oBACLX;iBAAAA,oBAAAA,QAAQD,QAAQ,cAAhBC,wCAAAA,uBAAAA,SAAmBT;YACrB;QACF;IACF;AACF,EAAE;AAEF,SAASkB,mBAAmBlB,EAAU,EAAEqB,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,GAAGrB,MAAMsB;AAC7B"}

package/dist/components/ModalRoot/useModalRootContext.d.ts

@@ -1,3 +1,3 @@
-import { type ModalRootContextInterface } from './ModalRootContext';
-export declare const useModalRootContext: () => ModalRootContextInterface;
+import type { UseModalRootContext } from './types';
+export declare const useModalRootContext: () => UseModalRootContext;
 //# sourceMappingURL=useModalRootContext.d.ts.map

package/dist/components/ModalRoot/useModalRootContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalRootContext.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/useModalRootContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEtF,eAAO,MAAM,mBAAmB,QAAO,yBACH,CAAC"}
+{"version":3,"file":"useModalRootContext.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/useModalRootContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,mBAAmB,QAAO,mBAgBtC,CAAC"}

package/dist/components/ModalRoot/useModalRootContext.js

@@ -1,5 +1,21 @@
-import * as React from "react";
+import { useCallback, useContext } from "react";
 import { ModalRootContext } from "./ModalRootContext.js";
-export const useModalRootContext = ()=>React.useContext(ModalRootContext);
+export const useModalRootContext = ()=>{
+    const { activeModal, isInsideModal, onClose: onCloseContext, updateModalHeight, registerModal } = useContext(ModalRootContext);
+    const onClose = useCallback(()=>{
+        if (onCloseContext && activeModal !== null && activeModal !== undefined) {
+            onCloseContext(activeModal);
+        }
+    }, [
+        activeModal,
+        onCloseContext
+    ]);
+    return {
+        isInsideModal,
+        onClose,
+        updateModalHeight,
+        registerModal
+    };
+};
 
 //# sourceMappingURL=useModalRootContext.js.map

package/dist/components/ModalRoot/useModalRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/useModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\n\nexport const useModalRootContext = (): ModalRootContextInterface =>\n  React.useContext(ModalRootContext);\n"],"names":["React","ModalRootContext","useModalRootContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAwC,wBAAqB;AAEtF,OAAO,MAAMC,sBAAsB,IACjCF,MAAMG,UAAU,CAACF,kBAAkB"}
+{"version":3,"sources":["../../../src/components/ModalRoot/useModalRootContext.ts"],"sourcesContent":["import { useCallback, useContext } from 'react';\nimport { ModalRootContext } from './ModalRootContext';\nimport type { UseModalRootContext } from './types';\n\nexport const useModalRootContext = (): UseModalRootContext => {\n  const {\n    activeModal,\n    isInsideModal,\n    onClose: onCloseContext,\n    updateModalHeight,\n    registerModal,\n  } = useContext(ModalRootContext);\n\n  const onClose = useCallback(() => {\n    if (onCloseContext && activeModal !== null && activeModal !== undefined) {\n      onCloseContext(activeModal);\n    }\n  }, [activeModal, onCloseContext]);\n\n  return { isInsideModal, onClose, updateModalHeight, registerModal };\n};\n"],"names":["useCallback","useContext","ModalRootContext","useModalRootContext","activeModal","isInsideModal","onClose","onCloseContext","updateModalHeight","registerModal","undefined"],"mappings":"AAAA,SAASA,WAAW,EAAEC,UAAU,QAAQ,QAAQ;AAChD,SAASC,gBAAgB,QAAQ,wBAAqB;AAGtD,OAAO,MAAMC,sBAAsB;IACjC,MAAM,EACJC,WAAW,EACXC,aAAa,EACbC,SAASC,cAAc,EACvBC,iBAAiB,EACjBC,aAAa,EACd,GAAGR,WAAWC;IAEf,MAAMI,UAAUN,YAAY;QAC1B,IAAIO,kBAAkBH,gBAAgB,QAAQA,gBAAgBM,WAAW;YACvEH,eAAeH;QACjB;IACF,GAAG;QAACA;QAAaG;KAAe;IAEhC,OAAO;QAAEF;QAAeC;QAASE;QAAmBC;IAAc;AACpE,EAAE"}

package/dist/components/ModalRoot/withModalRootContext.d.ts

@@ -1,6 +1,11 @@
+/** TODO [>=8] Удалить HOC */
 import * as React from 'react';
-import type { ModalRootContextInterface } from './ModalRootContext';
+import type { ModalRootContextInterface } from './types';
 type PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;
+/**
+ * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`
+ *  для модальных окон с `dynamicContentHeight` больше не требуется.
+ */
 export declare function withModalRootContext<P extends PickedProps>(Component: React.ComponentType<P>): React.ComponentType<Omit<P, keyof PickedProps>>;
 export {};
 //# sourceMappingURL=withModalRootContext.d.ts.map

package/dist/components/ModalRoot/withModalRootContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withModalRootContext.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/withModalRootContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAGpE,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;AAExE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,EACxD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAChC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAAC,CAOjD"}
+{"version":3,"file":"withModalRootContext.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/withModalRootContext.tsx"],"names":[],"mappings":"AAEA,6BAA6B;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;AAExE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,EACxD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAChC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAAC,CAOjD"}

package/dist/components/ModalRoot/withModalRootContext.js

@@ -2,11 +2,14 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useModalRootContext } from "./useModalRootContext.js";
-export function withModalRootContext(Component) {
+/** TODO [>=8] Удалить HOC */ import * as React from "react";
+import { ModalRootContext } from "./ModalRootContext.js";
+/**
+ * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`
+ *  для модальных окон с `dynamicContentHeight` больше не требуется.
+ */ export function withModalRootContext(Component) {
     function WithModalRootContext(props) {
-        const { updateModalHeight } = useModalRootContext();
+        const { updateModalHeight } = React.useContext(ModalRootContext);
         return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, props), {
             updateModalHeight: updateModalHeight
         }));

package/dist/components/ModalRoot/withModalRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ModalRootContextInterface } from './ModalRootContext';\nimport { useModalRootContext } from './useModalRootContext';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\nexport function withModalRootContext<P extends PickedProps>(\n  Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n  function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n    const { updateModalHeight } = useModalRootContext();\n\n    return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n  }\n  return WithModalRootContext;\n}\n"],"names":["React","useModalRootContext","withModalRootContext","Component","WithModalRootContext","props","updateModalHeight"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,2BAAwB;AAI5D,OAAO,SAASC,qBACdC,SAAiC;IAEjC,SAASC,qBAAqBC,KAAiC;QAC7D,MAAM,EAAEC,iBAAiB,EAAE,GAAGL;QAE9B,qBAAO,KAACE,mDAAeE;YAAaC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}
+{"version":3,"sources":["../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["'use client';\n\n/** TODO [>=8] Удалить HOC */\nimport * as React from 'react';\nimport { ModalRootContext } from './ModalRootContext';\nimport type { ModalRootContextInterface } from './types';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\n/**\n * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`\n *  для модальных окон с `dynamicContentHeight` больше не требуется.\n */\nexport function withModalRootContext<P extends PickedProps>(\n  Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n  function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n    const { updateModalHeight } = React.useContext(ModalRootContext);\n\n    return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n  }\n  return WithModalRootContext;\n}\n"],"names":["React","ModalRootContext","withModalRootContext","Component","WithModalRootContext","props","updateModalHeight","useContext"],"mappings":"AAAA;;;;AAEA,2BAA2B,GAC3B,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,wBAAqB;AAKtD;;;CAGC,GACD,OAAO,SAASC,qBACdC,SAAiC;IAEjC,SAASC,qBAAqBC,KAAiC;QAC7D,MAAM,EAAEC,iBAAiB,EAAE,GAAGN,MAAMO,UAAU,CAACN;QAE/C,qBAAO,KAACE,mDAAeE;YAAaC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -1,3 +1,4 @@
+import { type ChangeEvent } from 'react';
 import * as React from 'react';
 import type { HasAlign, HasRef, HasRootRef } from '../../types';
 import { type FormFieldProps } from '../FormField/FormField';
@@ -25,8 +26,11 @@ export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLS
     defaultValue?: SelectValue;
     /**
      * Коллбэк срабатывающий при изменении выбранного значения.
+     * Вторым параметром прокидывается новое значение
+     *
+     * > ⚠️ Лучше использовать второй параметр при работе с компонентом
      */
-    onChange?: (newValue: SelectValue) => void;
+    onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;
     placeholder?: string;
     multiline?: boolean;
     selectType?: SelectType;
@@ -35,11 +39,6 @@ export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLS
      */
     icon?: React.ReactNode;
 }
-export interface SelectState {
-    value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];
-    title?: string;
-    notSelected?: boolean;
-}
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */

package/dist/components/NativeSelect/NativeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,iCAAiC,UAAW,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,UAAW,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,EACD,MAAM,CAAC,iBAAiB,CAAC,EACzB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,+KAkBf,iBAAiB,KAAG,KAAK,CAAC,SAiE5B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,iCAAiC,UAAW,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,UAAW,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,EACD,MAAM,CAAC,iBAAiB,CAAC,EACzB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,+KAkBf,iBAAiB,KAAG,KAAK,CAAC,SAuE5B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -58,7 +58,13 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
     };
     const _onChange = (e)=>{
         const newValue = remapFromNativeValueToSelectValue(e.target.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        if (e.target.value === NOT_SELECTED.NATIVE) {
+            e.target.value = '';
+        }
+        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+            e.currentTarget.value = '';
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue);
     };
     useIsomorphicLayoutEffect(checkSelectedOption, [
         children

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   */\n  onChange?: (newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    onChange?.(newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","Component","after","mode","select","undefined","ref","option","div","aria-hidden"],"mappings":"AAAA;;;;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,8BAA8B,QAAQ,sBAAmB;AAClE,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,SAAS,QAA6B,4BAAyB;AAExE,SAASC,gBAAgB,QAAQ,0CAAuC;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,OAAO,MAAMC,eAAe;IAC1BC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC,QAChDA,UAAUJ,aAAaE,MAAM,GAAGF,aAAaC,MAAM,GAAGG,MAAM;AAE9D,OAAO,MAAMC,oCAAoC,CAACD,QAChDA,UAAUJ,aAAaC,MAAM,GAAGD,aAAaE,MAAM,GAAGE,MAAM;AA0C9D;;CAEC,GACD,MAAME,eAAe;QAAC,EACpBC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,aAAa,SAAS,EACtBC,MAAM,EACNC,qBAAO,KAACxB,iBAAe,EACvByB,MAAM,EACNC,QAAQ,EACRhB,KAAK,EACLiB,YAAY,EAEM,WADfC;QAhBHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAhB;QACAiB;;IAGA,MAAM,CAACE,OAAOC,SAAS,GAAGrC,MAAMsC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGxC,MAAMsC,QAAQ,CAAC;IACzC,MAAMG,YAAYtC,aAAasB;IAC/B,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGxC;IAE3B,MAAMyC,sBAAsB;YACHF;QAAvB,MAAMG,kBAAiBH,qBAAAA,UAAUI,OAAO,cAAjBJ,yCAAAA,mBAAmBK,OAAO,CAACL,UAAUI,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBP,SAASO,eAAeI,IAAI;YAC5BR,SAASI,eAAe3B,KAAK,KAAKJ,aAAaC,MAAM,IAAIQ,eAAe;QAC1E;IACF;IAEA,MAAM2B,YAAmD,CAACC;QACxD,MAAMC,WAAWjC,kCAAkCgC,EAAEE,MAAM,CAACnC,KAAK;QACjEgB,qBAAAA,+BAAAA,SAAWkB;IACb;IACA7C,0BAA0BqC,qBAAqB;QAACpB;KAAS;IAEzD,qBACE,MAACf;QACC6C,WAAU;QACV7B,WAAWvB,+BAET,4BACA+B,mCACAO,8BACAX,sCACAP,UAAU,uCACVA,UAAU,qCACVqB,UAAU,aAAahC,eAAe,CAACgC,MAAM,EAC7ClB;QAEFJ,OAAOA;QACPM,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRsB,OAAOvB;QACPD,QAAQA;QACRyB,MAAMlD,+BAA+BwB;;0BAErC,MAAC2B,kDACKrB;gBACJlB,OAAOA,UAAUwC,YAAYzC,kCAAkCC,SAASA;gBACxEiB,cACEA,iBAAiBuB,YACbzC,kCAAkCkB,gBAClCA;gBAENP,UAAUA;gBACVH,SAAS;gBACTS,UAAU7B,aAAa6C,WAAWN;gBAClCe,KAAKjB;;oBAEJnB,6BAAe,KAACqC;wBAAO1C,OAAOJ,aAAaC,MAAM;kCAAGQ;;oBACpDC;;;0BAEH,KAACqC;gBAAIpC,SAAS;gBAAoBqC,aAAW;0BAC3C,cAAA,KAACpD;oBAAiBe,SAAS;oBAAgBK,YAAYA;8BACpDO;;;;;AAKX;AAEA,SAASjB,YAAY,GAAG"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","after","mode","select","undefined","ref","option","div","aria-hidden"],"mappings":"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"}

package/dist/components/NavTransitionContext/NavTransitionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,gBAAgB,QAAO,sBAA6D,CAAC;AAElG,eAAO,MAAM,qBAAqB,4BAG/B,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,KAAG,KAAK,CAAC,SAM1D,CAAC"}
+{"version":3,"file":"NavTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,gBAAgB,QAAO,sBAA6D,CAAC;AAElG,eAAO,MAAM,qBAAqB,4BAG/B,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,KAAG,KAAK,CAAC,SAU1D,CAAC"}

package/dist/components/NavTransitionContext/NavTransitionContext.js

@@ -1,16 +1,18 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 const TransitionContext = /*#__PURE__*/ React.createContext({
     entering: false
 });
 export const useNavTransition = ()=>React.useContext(TransitionContext);
 export const NavTransitionProvider = ({ children, entering })=>{
     const parentContext = useNavTransition();
-    const contextValue = useObjectMemo({
-        entering: parentContext.entering || entering
-    });
+    const contextValue = React.useMemo(()=>({
+            entering: parentContext.entering || entering
+        }), [
+        entering,
+        parentContext.entering
+    ]);
     return /*#__PURE__*/ _jsx(TransitionContext.Provider, {
         value: contextValue,
         children: children

package/dist/components/NavTransitionContext/NavTransitionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\n\nexport interface TransitionContextProps {\n  entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n  entering: false,\n});\nexport const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\n  const parentContext = useNavTransition();\n  const contextValue = useObjectMemo({\n    entering: parentContext.entering || entering,\n  });\n  return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["React","useObjectMemo","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,+BAA4B;AAK1D,MAAMC,kCAAoBF,MAAMG,aAAa,CAAyB;IACpEC,UAAU;AACZ;AACA,OAAO,MAAMC,mBAAmB,IAA8BL,MAAMM,UAAU,CAACJ,mBAAmB;AAElG,OAAO,MAAMK,wBAAwB,CAAC,EACpCC,QAAQ,EACRJ,QAAQ,EACwC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeT,cAAc;QACjCG,UAAUK,cAAcL,QAAQ,IAAIA;IACtC;IACA,qBAAO,KAACF,kBAAkBS,QAAQ;QAACC,OAAOF;kBAAeF;;AAC3D,EAAE"}
+{"version":3,"sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport interface TransitionContextProps {\n  entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n  entering: false,\n});\nexport const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\n  const parentContext = useNavTransition();\n  const contextValue = React.useMemo(\n    () => ({\n      entering: parentContext.entering || entering,\n    }),\n    [entering, parentContext.entering],\n  );\n\n  return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["React","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAK/B,MAAMC,kCAAoBD,MAAME,aAAa,CAAyB;IACpEC,UAAU;AACZ;AACA,OAAO,MAAMC,mBAAmB,IAA8BJ,MAAMK,UAAU,CAACJ,mBAAmB;AAElG,OAAO,MAAMK,wBAAwB,CAAC,EACpCC,QAAQ,EACRJ,QAAQ,EACwC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLP,UAAUK,cAAcL,QAAQ,IAAIA;QACtC,CAAA,GACA;QAACA;QAAUK,cAAcL,QAAQ;KAAC;IAGpC,qBAAO,KAACF,kBAAkBU,QAAQ;QAACC,OAAOH;kBAAeF;;AAC3D,EAAE"}

package/dist/components/PanelHeader/PanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AA2BrB,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;CACvF;AA8CD;;GAEG;AACH,eAAO,MAAM,WAAW,iIAarB,gBAAgB,KAAG,KAAK,CAAC,SA2D3B,CAAC"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AA0BrB,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;CACvF;AA8CD;;GAEG;AACH,eAAO,MAAM,WAAW,iIAarB,gBAAgB,KAAG,KAAK,CAAC,SA2D3B,CAAC"}

package/dist/components/PanelHeader/PanelHeader.js

@@ -5,12 +5,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useModalContext } from "../../context/ModalContext.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender/index.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { FixedLayout } from "../FixedLayout/FixedLayout.js";
-import { ModalRootContext } from "../ModalRoot/ModalRootContext.js";
 import { OnboardingTooltipContainer } from "../OnboardingTooltip/OnboardingTooltipContainer.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Separator } from "../Separator/Separator.js";
@@ -34,7 +34,7 @@ const PanelHeaderIn = ({ before, after, children, typographyProps = {} })=>{
         "Component"
     ]);
     const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();
-    const { isInsideModal } = React.useContext(ModalRootContext);
+    const isInsideModal = useModalContext().id !== null;
     const platform = usePlatform();
     const afterSlotProps = !hasCustomPanelHeaderAfter || isInsideModal ? {
         children: after