@vkontakte/vkui 6.6.0 → 6.7.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport type { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n  activeModal: activeModalProp,\n  children,\n  noFocusToDialog = false,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  modalOverlayTestId,\n}: ModalRootWithDOMProps): React.ReactNode => {\n  const maskElementRef = React.useRef<HTMLDivElement>(null);\n  const maskAnimationFrame = React.useRef<number | undefined>(undefined);\n  const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { document } = useDOM();\n  const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n  const {\n    activeModal,\n    exitingModal,\n    onExit,\n    getModalState,\n    enteringModal,\n    onEnter,\n    onEntered: onEnteredProp,\n    onExited,\n    history,\n    delayEnter,\n  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n  const waitTransitionFinish = useWaitTransitionFinish();\n  const prevProps = usePrevious({\n    exitingModal,\n    enteringModal,\n    activeModal,\n  });\n  const modalRootContext: ModalRootContextInterface = useObjectMemo({\n    updateModalHeight: () => undefined,\n    registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n    onClose: onExit,\n    isInsideModal: true,\n  });\n\n  const timeout = platform === 'ios' ? 400 : 320;\n  const modals = React.Children.toArray(children) as React.ReactElement[];\n\n  /* Анимирует сдвиг модального окна */\n  const animateModalOpacity = (modalState: ModalsStateEntry | undefined, display: boolean) => {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  };\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number | null = null) => {\n    if (forceOpacity === null && history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (maskAnimationFrame.current) {\n      cancelAnimationFrame(maskAnimationFrame.current);\n    }\n    maskAnimationFrame.current = requestAnimationFrame(() => {\n      if (maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  };\n\n  const onEntered = ({ id, modalElement }: ModalsStateEntry) => {\n    if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {\n      modalElement.focus();\n    }\n\n    onEnteredProp(id);\n  };\n\n  const openModal = () => {\n    if (!enteringModal || !prevProps) {\n      return;\n    }\n\n    const enteringState = getModalState(enteringModal);\n    onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (enteringModal === enteringModal && enteringState) {\n          waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);\n          animateModalOpacity(enteringState, true);\n          setMaskOpacity(enteringState, 1);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    requestAnimationFrame(() => {\n      if (enteringState?.innerElement) {\n        enteringState.innerElement.style.transition = 'none';\n        enteringState.innerElement.style.opacity = '1';\n        setMaskOpacity(enteringState, 1);\n      }\n    });\n\n    if (enteringState) {\n      onEntered(enteringState);\n    }\n  };\n\n  const closeModal = (id: string) => {\n    const prevModalState = getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!activeModal) {\n      requestAnimationFrame(() => {\n        waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n        animateModalOpacity(prevModalState, false);\n        setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    onExited(id);\n  };\n\n  React.useEffect(() => {\n    if (!prevProps) {\n      return;\n    }\n\n    // transition phase 2: animate exiting modal\n    if (exitingModal && exitingModal !== prevProps.exitingModal) {\n      closeModal(exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (enteringModal && enteringModal !== prevProps.enteringModal) {\n      openModal();\n    }\n\n    // focus restoration\n    if (activeModal && !prevProps.activeModal) {\n      restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement | undefined;\n    }\n    if (!activeModal && !exitingModal && restoreFocusTo.current) {\n      restoreFocusTo.current.focus();\n      restoreFocusTo.current = undefined;\n    }\n  });\n\n  if (!activeModal && !exitingModal) {\n    return null;\n  }\n\n  return (\n    <ModalRootContext.Provider value={modalRootContext}>\n      <div\n        className={classNames(\n          styles['ModalRoot'],\n          hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'],\n          styles['ModalRoot--desktop'],\n        )}\n      >\n        <div\n          data-testid={modalOverlayTestId}\n          className={styles['ModalRoot__mask']}\n          ref={maskElementRef}\n          onClick={onExit}\n        />\n        <div className={styles['ModalRoot__viewport']}>\n          {modals.map((Modal: React.ReactElement) => {\n            const modalId = getNavId(Modal.props, warn);\n            if (modalId !== activeModal && modalId !== exitingModal) {\n              return null;\n            }\n\n            const key = `modal-${modalId}`;\n\n            return (\n              <FocusTrap\n                autoFocus={false}\n                restoreFocus={false}\n                onClose={onExit}\n                timeout={timeout}\n                key={key}\n                className={styles['ModalRoot__modal']}\n              >\n                {Modal}\n              </FocusTrap>\n            );\n          })}\n        </div>\n      </div>\n    </ModalRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","warn","ModalRootDesktop","activeModal","activeModalProp","children","noFocusToDialog","onOpen","onOpened","onClose","onClosed","modalOverlayTestId","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onEnteredProp","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","modalElement","contains","activeElement","focus","openModal","enteringState","closeModal","prevModalState","useEffect","Provider","value","div","className","data-testid","ref","onClick","map","Modal","modalId","props","key","autoFocus","restoreFocus"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,gBAAgB,QAAwC,qBAAqB;AAEtF,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,MAAMC,OAAOL,SAAS;AAEtB,OAAO,MAAMM,mBAAmB,CAAC,EAC/BC,aAAaC,eAAe,EAC5BC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,kBAAkB,EACI;IACtB,MAAMC,iBAAiBzB,MAAM0B,MAAM,CAAiB;IACpD,MAAMC,qBAAqB3B,MAAM0B,MAAM,CAAqBE;IAC5D,MAAMC,iBAAiB7B,MAAM0B,MAAM,CAA0BE;IAE7D,MAAM,EAAEE,QAAQ,EAAE,GAAGvB;IACrB,MAAM,EAAEwB,yBAAyB,EAAEC,QAAQ,EAAE,GAAGtB;IAChD,MAAM,EACJM,WAAW,EACXiB,YAAY,EACZC,MAAM,EACNC,aAAa,EACbC,aAAa,EACbC,OAAO,EACPC,WAAWC,aAAa,EACxBC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACX,GAAG7B,gBAAgBI,iBAAiBC,UAAUE,QAAQC,UAAUC,SAASC,UAAUrB;IAEpF,MAAMyC,uBAAuBrC;IAC7B,MAAMsC,YAAYvC,YAAY;QAC5B4B;QACAG;QACApB;IACF;IACA,MAAM6B,mBAA8CzC,cAAc;QAChE0C,mBAAmB,IAAMlB;QACzBmB,eAAe;gBAAC,EAAEC,EAAE,EAAW,WAANC;gBAAPD;;gBAAgCb;mBAAde,OAAOC,MAAM,CAAChB,CAAAA,iBAAAA,cAAca,iBAAdb,4BAAAA,iBAAqB,CAAC,GAAGc;;QAC3E3B,SAASY;QACTkB,eAAe;IACjB;IAEA,MAAMC,UAAUrB,aAAa,QAAQ,MAAM;IAC3C,MAAMsB,SAAStD,MAAMuD,QAAQ,CAACC,OAAO,CAACtC;IAEtC,mCAAmC,GACnC,MAAMuC,sBAAsB,CAACC,YAA0CC;QACrE,IAAID,uBAAAA,iCAAAA,WAAYE,YAAY,EAAE;YAC5BF,WAAWE,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;YAC3CJ,WAAWE,YAAY,CAACC,KAAK,CAACE,eAAe,GAAGJ,WAAWjB,aAAa,CAAC,EAAEW,QAAQ,EAAE,CAAC,GAAG;YACzFK,WAAWE,YAAY,CAACC,KAAK,CAACG,OAAO,GAAGL,UAAU,MAAM;QAC1D;IACF;IAEA,0DAA0D,GAC1D,MAAMM,iBAAiB,CAACP,YAA8BQ,eAA8B,IAAI;QACtF,IAAIA,iBAAiB,QAAQzB,CAAAA,oBAAAA,8BAAAA,OAAS,CAAC,EAAE,MAAKiB,WAAWV,EAAE,EAAE;YAC3D;QACF;QAEA,IAAIrB,mBAAmBwC,OAAO,EAAE;YAC9BC,qBAAqBzC,mBAAmBwC,OAAO;QACjD;QACAxC,mBAAmBwC,OAAO,GAAGE,sBAAsB;YACjD,IAAI5C,eAAe0C,OAAO,EAAE;gBAC1B,MAAM,EAAEG,aAAa,CAAC,EAAEC,oBAAoB,CAAC,EAAE,GAAGb;gBAElD,MAAMM,UACJE,iBAAiB,OACb,IAAI,AAACK,CAAAA,oBAAoBD,UAAS,IAAM,CAAA,MAAMA,UAAS,KAAM,IAC7DJ;gBACNzC,eAAe0C,OAAO,CAACN,KAAK,CAACG,OAAO,GAAG7D,MAAM6D,SAAS,GAAG,KAAKQ,QAAQ;YACxE;QACF;IACF;IAEA,MAAMlC,YAAY,CAAC,EAAEU,EAAE,EAAEyB,YAAY,EAAoB;QACvD,IAAI,CAACtD,mBAAmBsD,gBAAgB,CAACA,aAAaC,QAAQ,CAAC5C,SAAU6C,aAAa,GAAG;YACvFF,aAAaG,KAAK;QACpB;QAEArC,cAAcS;IAChB;IAEA,MAAM6B,YAAY;QAChB,IAAI,CAACzC,iBAAiB,CAACQ,WAAW;YAChC;QACF;QAEA,MAAMkC,gBAAgB3C,cAAcC;QACpCC;QAEA,oCAAoC;QACpC,IAAI,CAACO,UAAUX,YAAY,EAAE;YAC3BoC,sBAAsB;gBACpB,IAAIjC,kBAAkBA,iBAAiB0C,eAAe;oBACpDnC,qBAAqBmC,cAAclB,YAAY,EAAE,IAAMtB,UAAUwC,gBAAgBzB;oBACjFI,oBAAoBqB,eAAe;oBACnCb,eAAea,eAAe;gBAChC;YACF;YAEA;QACF;QAEA,+CAA+C;QAC/CT,sBAAsB;YACpB,IAAIS,0BAAAA,oCAAAA,cAAelB,YAAY,EAAE;gBAC/BkB,cAAclB,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;gBAC9CgB,cAAclB,YAAY,CAACC,KAAK,CAACG,OAAO,GAAG;gBAC3CC,eAAea,eAAe;YAChC;QACF;QAEA,IAAIA,eAAe;YACjBxC,UAAUwC;QACZ;IACF;IAEA,MAAMC,aAAa,CAAC/B;QAClB,MAAMgC,iBAAiB7C,cAAca;QACrC,IAAI,CAACgC,gBAAgB;YACnB;QACF;QAEA,oCAAoC;QACpC,IAAI,CAAChE,aAAa;YAChBqD,sBAAsB;gBACpB1B,qBAAqBqC,2BAAAA,qCAAAA,eAAgBpB,YAAY,EAAE,IAAMpB,SAASQ,KAAKK;gBACvEI,oBAAoBuB,gBAAgB;gBACpCf,eAAee,gBAAgB;YACjC;YAEA;QACF;QAEA,+CAA+C;QAC/CxC,SAASQ;IACX;IAEAhD,MAAMiF,SAAS,CAAC;QACd,IAAI,CAACrC,WAAW;YACd;QACF;QAEA,4CAA4C;QAC5C,IAAIX,gBAAgBA,iBAAiBW,UAAUX,YAAY,EAAE;YAC3D8C,WAAW9C;QACb;QAEA,6CAA6C;QAC7C,IAAIG,iBAAiBA,kBAAkBQ,UAAUR,aAAa,EAAE;YAC9DyC;QACF;QAEA,oBAAoB;QACpB,IAAI7D,eAAe,CAAC4B,UAAU5B,WAAW,EAAE;gBACfc;YAA1BD,eAAesC,OAAO,GAAIrC,CAAAA,0BAAAA,qBAAAA,+BAAAA,SAAU6C,aAAa,cAAvB7C,qCAAAA,0BAA2BF;QACvD;QACA,IAAI,CAACZ,eAAe,CAACiB,gBAAgBJ,eAAesC,OAAO,EAAE;YAC3DtC,eAAesC,OAAO,CAACS,KAAK;YAC5B/C,eAAesC,OAAO,GAAGvC;QAC3B;IACF;IAEA,IAAI,CAACZ,eAAe,CAACiB,cAAc;QACjC,OAAO;IACT;IAEA,qBACE,KAACrB,iBAAiBsE,QAAQ;QAACC,OAAOtC;kBAChC,cAAA,MAACuC;YACCC,WAAWpF,4BAET8B;;8BAIF,KAACqD;oBACCE,eAAa9D;oBACb6D,SAAS;oBACTE,KAAK9D;oBACL+D,SAAStD;;8BAEX,KAACkD;oBAAIC,SAAS;8BACX/B,OAAOmC,GAAG,CAAC,CAACC;wBACX,MAAMC,UAAUnF,SAASkF,MAAME,KAAK,EAAE9E;wBACtC,IAAI6E,YAAY3E,eAAe2E,YAAY1D,cAAc;4BACvD,OAAO;wBACT;wBAEA,MAAM4D,MAAM,CAAC,MAAM,EAAEF,QAAQ,CAAC;wBAE9B,qBACE,KAAChF;4BACCmF,WAAW;4BACXC,cAAc;4BACdzE,SAASY;4BACTmB,SAASA;4BAETgC,SAAS;sCAERK;2BAHIG;oBAMX;;;;;AAKV,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport type { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n  activeModal: activeModalProp,\n  children,\n  noFocusToDialog = false,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  modalOverlayTestId,\n}: ModalRootWithDOMProps): React.ReactNode => {\n  const maskElementRef = React.useRef<HTMLDivElement>(null);\n  const maskAnimationFrame = React.useRef<number | undefined>(undefined);\n  const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { document } = useDOM();\n  const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n  const {\n    activeModal,\n    exitingModal,\n    onExit,\n    getModalState,\n    enteringModal,\n    onEnter,\n    onEntered: onEnteredProp,\n    onExited,\n    history,\n    delayEnter,\n  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n  const waitTransitionFinish = useWaitTransitionFinish();\n  const prevProps = usePrevious({\n    exitingModal,\n    enteringModal,\n    activeModal,\n  });\n  const modalRootContext: ModalRootContextInterface = useObjectMemo({\n    updateModalHeight: () => undefined,\n    registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n    onClose: onExit,\n    isInsideModal: true,\n  });\n\n  const timeout = platform === 'ios' ? 400 : 320;\n  const modals = React.Children.toArray(children) as React.ReactElement[];\n\n  /* Анимирует сдвиг модального окна */\n  const animateModalOpacity = (modalState: ModalsStateEntry | undefined, display: boolean) => {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  };\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number | null = null) => {\n    if (forceOpacity === null && history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (maskAnimationFrame.current) {\n      cancelAnimationFrame(maskAnimationFrame.current);\n    }\n    maskAnimationFrame.current = requestAnimationFrame(() => {\n      if (maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  };\n\n  const onEntered = ({ id, modalElement }: ModalsStateEntry) => {\n    if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {\n      modalElement.focus();\n    }\n\n    onEnteredProp(id);\n  };\n\n  const openModal = () => {\n    if (!enteringModal || !prevProps) {\n      return;\n    }\n\n    const enteringState = getModalState(enteringModal);\n    onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (enteringModal === enteringModal && enteringState) {\n          waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);\n          animateModalOpacity(enteringState, true);\n          setMaskOpacity(enteringState, 1);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    requestAnimationFrame(() => {\n      if (enteringState?.innerElement) {\n        enteringState.innerElement.style.transition = 'none';\n        enteringState.innerElement.style.opacity = '1';\n        setMaskOpacity(enteringState, 1);\n      }\n    });\n\n    if (enteringState) {\n      onEntered(enteringState);\n    }\n  };\n\n  const closeModal = (id: string) => {\n    const prevModalState = getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!activeModal) {\n      requestAnimationFrame(() => {\n        waitTransitionFinish(\n          prevModalState?.innerElement,\n          (event) => {\n            // Исключаем дочерние элементы\n            if (event && event.target === prevModalState?.innerElement) {\n              onExited(id);\n            } else if (!event) {\n              // Вызвался по тайм-ауту\n              onExited(id);\n            }\n          },\n          timeout,\n        );\n        animateModalOpacity(prevModalState, false);\n        setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    onExited(id);\n  };\n\n  React.useEffect(() => {\n    if (!prevProps) {\n      return;\n    }\n\n    // transition phase 2: animate exiting modal\n    if (exitingModal && exitingModal !== prevProps.exitingModal) {\n      closeModal(exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (enteringModal && enteringModal !== prevProps.enteringModal) {\n      openModal();\n    }\n\n    // focus restoration\n    if (activeModal && !prevProps.activeModal) {\n      restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement | undefined;\n    }\n    if (!activeModal && !exitingModal && restoreFocusTo.current) {\n      restoreFocusTo.current.focus();\n      restoreFocusTo.current = undefined;\n    }\n  });\n\n  if (!activeModal && !exitingModal) {\n    return null;\n  }\n\n  return (\n    <ModalRootContext.Provider value={modalRootContext}>\n      <div\n        className={classNames(\n          styles['ModalRoot'],\n          hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'],\n          styles['ModalRoot--desktop'],\n        )}\n      >\n        <div\n          data-testid={modalOverlayTestId}\n          className={styles['ModalRoot__mask']}\n          ref={maskElementRef}\n          onClick={onExit}\n        />\n        <div className={styles['ModalRoot__viewport']}>\n          {modals.map((Modal: React.ReactElement) => {\n            const modalId = getNavId(Modal.props, warn);\n            if (modalId !== activeModal && modalId !== exitingModal) {\n              return null;\n            }\n\n            const key = `modal-${modalId}`;\n\n            return (\n              <FocusTrap\n                autoFocus={false}\n                restoreFocus={false}\n                onClose={onExit}\n                timeout={timeout}\n                key={key}\n                className={styles['ModalRoot__modal']}\n              >\n                {Modal}\n              </FocusTrap>\n            );\n          })}\n        </div>\n      </div>\n    </ModalRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","warn","ModalRootDesktop","activeModal","activeModalProp","children","noFocusToDialog","onOpen","onOpened","onClose","onClosed","modalOverlayTestId","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onEnteredProp","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","modalElement","contains","activeElement","focus","openModal","enteringState","closeModal","prevModalState","event","target","useEffect","Provider","value","div","className","data-testid","ref","onClick","map","Modal","modalId","props","key","autoFocus","restoreFocus"],"mappings":"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"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -14,7 +14,7 @@ import { FormField } from '../FormField/FormField';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
 const sizeYClassNames = {
     none: "vkuiSelect--sizeY-none",
-    ['compact']: "vkuiSelect--sizeY-compact"
+    compact: "vkuiSelect--sizeY-compact"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * 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['Select--sizeY-none'],\n  ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\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  ...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 === '' && placeholder != null);\n    }\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\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        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={callMultiple(onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__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","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","value","Component","after","mode","select","ref","option","div","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAuBA;;CAEC,GACD,MAAMC,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,KAACjB,iBAAe,EACvBkB,MAAM,EACNC,QAAQ,EAEU,WADfC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,OAAOC,SAAS,GAAG7B,MAAM8B,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGhC,MAAM8B,QAAQ,CAAC;IACzC,MAAMG,YAAY9B,aAAae;IAC/B,MAAM,EAAEgB,QAAQ,MAAM,EAAE,GAAGhC;IAE3B,MAAMiC,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,eAAeK,KAAK,KAAK,MAAM1B,eAAe;QACzD;IACF;IACAT,0BAA0B6B,qBAAqB;QAACnB;KAAS;IAEzD,qBACE,MAACR;QACCkC,WAAU;QACVzB,WAAWhB,yBAET,4BACAwB,mCACAM,8BACAV,sCACAP,UAAU,wCACVA,UAAU,sCACVoB,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CjB;QAEFJ,OAAOA;QACPM,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRkB,OAAOnB;QACPD,QAAQA;QACRqB,MAAMvC,+BAA+BiB;;0BAErC,MAACuB,kDACKlB;gBACJP,UAAUA;gBACVH,SAAS;gBACTS,UAAUtB,aAAasB,UAAUS;gBACjCW,KAAKb;;oBAEJlB,6BAAe,KAACgC;wBAAON,OAAM;kCAAI1B;;oBACjCC;;;0BAEH,KAACgC;gBAAI/B,SAAS;gBAA+BgC,aAAW;0BACtD,cAAA,KAACxC;oBAAiBQ,SAAS;oBAA2BK,YAAYA;8BAC/DM;;;;;AAKX;AAEA,SAAShB,YAAY,GAAG"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * 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['Select--sizeY-none'],\n  compact: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\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  ...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 === '' && placeholder != null);\n    }\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\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        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={callMultiple(onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__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","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","value","Component","after","mode","select","ref","option","div","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAuBA;;CAEC,GACD,MAAMC,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,KAAClB,iBAAe,EACvBmB,MAAM,EACNC,QAAQ,EAEU,WADfC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,OAAOC,SAAS,GAAG9B,MAAM+B,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGjC,MAAM+B,QAAQ,CAAC;IACzC,MAAMG,YAAY/B,aAAagB;IAC/B,MAAM,EAAEgB,QAAQ,MAAM,EAAE,GAAGjC;IAE3B,MAAMkC,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,eAAeK,KAAK,KAAK,MAAM1B,eAAe;QACzD;IACF;IACAV,0BAA0B8B,qBAAqB;QAACnB;KAAS;IAEzD,qBACE,MAACT;QACCmC,WAAU;QACVzB,WAAWjB,yBAET,4BACAyB,mCACAM,8BACAV,sCACAP,UAAU,wCACVA,UAAU,sCACVoB,UAAU,aAAazB,eAAe,CAACyB,MAAM,EAC7CjB;QAEFJ,OAAOA;QACPM,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRkB,OAAOnB;QACPD,QAAQA;QACRqB,MAAMxC,+BAA+BkB;;0BAErC,MAACuB,kDACKlB;gBACJP,UAAUA;gBACVH,SAAS;gBACTS,UAAUvB,aAAauB,UAAUS;gBACjCW,KAAKb;;oBAEJlB,6BAAe,KAACgC;wBAAON,OAAM;kCAAI1B;;oBACjCC;;;0BAEH,KAACgC;gBAAI/B,SAAS;gBAA+BgC,aAAW;0BACtD,cAAA,KAACzC;oBAAiBS,SAAS;oBAA2BK,YAAYA;8BAC/DM;;;;;AAKX;AAEA,SAAShB,YAAY,GAAG"}

package/dist/components/Panel/Panel.js

@@ -12,8 +12,8 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import { Touch } from '../Touch/Touch';
 const sizeXClassNames = {
     none: "vkuiPanel--sizeX-none",
-    ['compact']: "vkuiPanel--sizeX-compact",
-    ['regular']: "vkuiPanel--sizeX-regular"
+    compact: "vkuiPanel--sizeX-compact",
+    regular: "vkuiPanel--sizeX-regular"
 };
 const stylesMode = {
     none: "vkuiPanel--mode-none",

package/dist/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { NavPanelIdContext } from '../NavIdContext/NavIdContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  ['compact']: styles['Panel--sizeX-compact'],\n  ['regular']: styles['Panel--sizeX-regular'],\n};\n\nconst stylesMode = {\n  none: styles['Panel--mode-none'],\n  plain: styles['Panel--mode-plain'],\n  card: styles['Panel--mode-card'],\n};\n\nexport interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  centered?: boolean;\n  /**\n   * Тип оформления панели.\n   *\n   * Позволяет переопределить тип оформления панели,\n   * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),\n   * глобально задающим тип оформления макета.\n   *\n   * Если установлен `card` - Panel имеет фон отличный от фона контента.\n   * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.\n   * Тип `plain` — соответствует фону по умолчанию.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отключает задний фон\n   */\n  disableBackground?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  nav,\n  mode: modeProp,\n  disableBackground,\n  ...restProps\n}: PanelProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = usePanelMode(modeProp, sizeX);\n\n  return (\n    <NavPanelIdContext.Provider value={restProps.id || nav}>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Panel'],\n          sizeXClassNames[sizeX],\n          centered && 'vkuiInternalPanel--centered',\n          disableBackground && styles['Panel--disableBackground'],\n          stylesMode[mode],\n        )}\n      >\n        <Touch\n          Component={OnboardingTooltipContainer}\n          className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n        >\n          <div className={styles['Panel__in-before']} />\n          {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n          <div className={styles['Panel__in-after']} />\n        </Touch>\n      </RootComponent>\n    </NavPanelIdContext.Provider>\n  );\n};\n\nfunction usePanelMode(\n  modeProp: PanelProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (modeProp) {\n    return modeProp;\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n"],"names":["React","classNames","useAdaptivity","AppRootContext","NavPanelIdContext","OnboardingTooltipContainer","RootComponent","Touch","sizeXClassNames","none","stylesMode","plain","card","Panel","centered","children","nav","mode","modeProp","disableBackground","restProps","sizeX","usePanelMode","Provider","value","id","baseClassName","Component","className","div","layout","useContext"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAI1D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AAGvC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;IACX,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBD,IAAI;IACJE,KAAK;IACLC,IAAI;AACN;AAsBA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EACdC,iBAAiB,EAEN,WADRC;QALHN;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,MAAMe,OAAOK,aAAaJ,UAAUG;IAEpC,qBACE,KAACjB,kBAAkBmB,QAAQ;QAACC,OAAOJ,UAAUK,EAAE,IAAIT;kBACjD,cAAA,KAACV,uDACKc;YACJM,eAAezB,wBAEbO,eAAe,CAACa,MAAM,EACtBP,YAAY,+BACZK,qDACAT,UAAU,CAACO,KAAK;sBAGlB,cAAA,MAACV;gBACCoB,WAAWtB;gBACXuB,WAAW3B,4BAAgC;;kCAE3C,KAAC4B;wBAAID,SAAS;;oBACbd,yBAAW,KAACe;wBAAID,SAAS;kCAA8Bb;yBAAkBA;kCAC1E,KAACc;wBAAID,SAAS;;;;;;AAKxB,EAAE;AAEF,SAASN,aACPJ,QAA4B,EAC5BG,KAA8B;IAE9B,MAAM,EAAES,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC5B;IAEpC,IAAIe,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIY,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIT,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { NavPanelIdContext } from '../NavIdContext/NavIdContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  compact: styles['Panel--sizeX-compact'],\n  regular: styles['Panel--sizeX-regular'],\n};\n\nconst stylesMode = {\n  none: styles['Panel--mode-none'],\n  plain: styles['Panel--mode-plain'],\n  card: styles['Panel--mode-card'],\n};\n\nexport interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  centered?: boolean;\n  /**\n   * Тип оформления панели.\n   *\n   * Позволяет переопределить тип оформления панели,\n   * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),\n   * глобально задающим тип оформления макета.\n   *\n   * Если установлен `card` - Panel имеет фон отличный от фона контента.\n   * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.\n   * Тип `plain` — соответствует фону по умолчанию.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отключает задний фон\n   */\n  disableBackground?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  nav,\n  mode: modeProp,\n  disableBackground,\n  ...restProps\n}: PanelProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = usePanelMode(modeProp, sizeX);\n\n  return (\n    <NavPanelIdContext.Provider value={restProps.id || nav}>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Panel'],\n          sizeXClassNames[sizeX],\n          centered && 'vkuiInternalPanel--centered',\n          disableBackground && styles['Panel--disableBackground'],\n          stylesMode[mode],\n        )}\n      >\n        <Touch\n          Component={OnboardingTooltipContainer}\n          className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n        >\n          <div className={styles['Panel__in-before']} />\n          {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n          <div className={styles['Panel__in-after']} />\n        </Touch>\n      </RootComponent>\n    </NavPanelIdContext.Provider>\n  );\n};\n\nfunction usePanelMode(\n  modeProp: PanelProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (modeProp) {\n    return modeProp;\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n"],"names":["React","classNames","useAdaptivity","AppRootContext","NavPanelIdContext","OnboardingTooltipContainer","RootComponent","Touch","sizeXClassNames","none","compact","regular","stylesMode","plain","card","Panel","centered","children","nav","mode","modeProp","disableBackground","restProps","sizeX","usePanelMode","Provider","value","id","baseClassName","Component","className","div","layout","useContext"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAI1D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AAGvC,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBH,IAAI;IACJI,KAAK;IACLC,IAAI;AACN;AAsBA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EACdC,iBAAiB,EAEN,WADRC;QALHN;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGrB;IAE3B,MAAMiB,OAAOK,aAAaJ,UAAUG;IAEpC,qBACE,KAACnB,kBAAkBqB,QAAQ;QAACC,OAAOJ,UAAUK,EAAE,IAAIT;kBACjD,cAAA,KAACZ,uDACKgB;YACJM,eAAe3B,wBAEbO,eAAe,CAACe,MAAM,EACtBP,YAAY,+BACZK,qDACAT,UAAU,CAACO,KAAK;sBAGlB,cAAA,MAACZ;gBACCsB,WAAWxB;gBACXyB,WAAW7B,4BAAgC;;kCAE3C,KAAC8B;wBAAID,SAAS;;oBACbd,yBAAW,KAACe;wBAAID,SAAS;kCAA8Bb;yBAAkBA;kCAC1E,KAACc;wBAAID,SAAS;;;;;;AAKxB,EAAE;AAEF,SAASN,aACPJ,QAA4B,EAC5BG,KAA8B;IAE9B,MAAM,EAAES,MAAM,EAAE,GAAGhC,MAAMiC,UAAU,CAAC9B;IAEpC,IAAIiB,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIY,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIT,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAWpE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAsBD;;GAEG;AACH,eAAO,MAAM,iBAAiB,0DAM3B,sBAAsB,KAAG,KAAK,CAAC,SA8DjC,CAAC"}
+{"version":3,"file":"PanelHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAWpE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAsBD;;GAEG;AACH,eAAO,MAAM,iBAAiB,0DAM3B,sBAAsB,KAAG,KAAK,CAAC,SA6DjC,CAAC"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.js

@@ -75,7 +75,7 @@ const warn = warnOnce('PanelHeaderButton');
         hoverMode: hoverMode,
         activeEffectDelay: 200,
         activeMode: activeMode,
-        className: classNames('vkuiInternalPanelHeaderButton', "vkuiPanelHeaderButton", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className),
+        className: classNames("vkuiPanelHeaderButton", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className),
         children: [
             isPrimitive ? /*#__PURE__*/ _jsx(ButtonTypography, {
                 primary: primary,

package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBACE,KAACR;YAAMS,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACR;QAAKY,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOhB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMiB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EAEc,WADpBC;QAJHV;QACAD;QACAS;QACAC;;IAGA,MAAME,cAAczB,qBAAqBc;IACzC,MAAMY,mBAAmB1B,qBAAqBsB;IAC9C,MAAMP,WAAWd;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe9B,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUQ;aAAM;WACxBE;QAGL,IAAI,CAACQ,cAAc;YACjBZ,KAAKjB,gBAAgB8B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAC7B;QACCW,WAAWQ,UAAUU,IAAI,GAAG,MAAM;OAC9BV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAWxB,WACT,0DAEAS,mBAAmB4B,cAAc,CAACrB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9Be,mDACA,CAACA,eAAe,CAACC,2DACjBH;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,SAAS;0BAC1CD;iBAGHA;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBACE,KAACR;YAAMS,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACR;QAAKY,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOhB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMiB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EAEc,WADpBC;QAJHV;QACAD;QACAS;QACAC;;IAGA,MAAME,cAAczB,qBAAqBc;IACzC,MAAMY,mBAAmB1B,qBAAqBsB;IAC9C,MAAMP,WAAWd;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe9B,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUQ;aAAM;WACxBE;QAGL,IAAI,CAACQ,cAAc;YACjBZ,KAAKjB,gBAAgB8B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAC7B;QACCW,WAAWQ,UAAUU,IAAI,GAAG,MAAM;OAC9BV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAWxB,oCAETS,mBAAmB4B,cAAc,CAACrB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9Be,mDACA,CAACA,eAAe,CAACC,2DACjBH;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,SAAS;0BAC1CD;iBAGHA;;;AAIR,EAAE"}

package/dist/components/RichCell/RichCell.js

@@ -10,7 +10,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { RichCellIcon } from './RichCellIcon/RichCellIcon';
 const sizeYClassNames = {
     none: "vkuiRichCell--sizeY-none",
-    ['compact']: "vkuiRichCell--sizeY-compact"
+    compact: "vkuiRichCell--sizeY-compact"
 };
 const alignAfterClassNames = {
     start: "vkuiRichCell__content-after--align-start",

package/dist/components/RichCell/RichCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nconst alignAfterClassNames = {\n  start: styles['RichCell__content-after--align-start'],\n  center: styles['RichCell__content-after--align-center'],\n  end: styles['RichCell__content-after--align-end'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: 'start' | 'center' | 'end';\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const afterRender = () => {\n    if (!after && !afterCaption) {\n      return;\n    }\n    return (\n      <div\n        className={classNames(styles['RichCell__content-after'], alignAfterClassNames[afterAlign])}\n      >\n        {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n        {afterCaption && <div className={styles['RichCell__after-caption']}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","sizeYClassNames","none","alignAfterClassNames","start","center","end","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","afterAlign","restProps","sizeY","afterRender","div","Component","Icon"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAG3D,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,uBAAuB;IAC3BC,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAwDA;;CAEC,GACD,OAAO,MAAMC,WAET;QAAC,EACHC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,aAAa,OAAO,EAEN,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGxB;IAE3B,MAAMyB,cAAc;QAClB,IAAI,CAACT,SAAS,CAACC,cAAc;YAC3B;QACF;QACA,qBACE,MAACS;YACCL,WAAWtB,0CAA8CO,oBAAoB,CAACgB,WAAW;;gBAExFN,uBAAS,KAACU;oBAAIL,SAAS;8BAAuCL;;gBAC9DC,8BAAgB,KAACS;oBAAIL,SAAS;8BAAsCJ;;;;IAG3E;IAEA,qBACE,MAAChB,kDACKsB;QACJF,WAAWtB,2BAET,CAACqB,4CACDI,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CH;;YAGDN,wBAAU,KAACW;gBAAIL,SAAS;0BAA+BN;;0BACxD,MAACW;gBAAIL,SAAS;;kCACZ,MAACK;wBAAIL,SAAS;;0CACZ,MAACK;gCAAIL,SAAS;;oCACXV,yBACC,KAACT;wCAAQyB,WAAU;wCAAMN,SAAS;kDAC/BV;;kDAGL,KAACe;wCAAIL,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,KAACa;wCAAIL,SAAS;kDAA6BR;;oCACnDC,yBACC,KAACZ;wCAAQyB,WAAU;wCAAMN,SAAS;kDAC/BP;;;;4BAINQ,eAAe,WAAWG;;;oBAE5BP,wBAAU,KAACQ;wBAAIL,SAAS;kCAA+BH;;oBACvDC,yBAAW,KAACO;wBAAIL,SAAS;kCAAgCF;;;;YAE3DG,eAAe,WAAWG;;;AAGjC,EAAE;AAEFf,SAASkB,IAAI,GAAGzB"}
+{"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  compact: styles['RichCell--sizeY-compact'],\n};\n\nconst alignAfterClassNames = {\n  start: styles['RichCell__content-after--align-start'],\n  center: styles['RichCell__content-after--align-center'],\n  end: styles['RichCell__content-after--align-end'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: 'start' | 'center' | 'end';\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const afterRender = () => {\n    if (!after && !afterCaption) {\n      return;\n    }\n    return (\n      <div\n        className={classNames(styles['RichCell__content-after'], alignAfterClassNames[afterAlign])}\n      >\n        {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n        {afterCaption && <div className={styles['RichCell__after-caption']}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","sizeYClassNames","none","compact","alignAfterClassNames","start","center","end","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","afterAlign","restProps","sizeY","afterRender","div","Component","Icon"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAG3D,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,uBAAuB;IAC3BC,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAwDA;;CAEC,GACD,OAAO,MAAMC,WAET;QAAC,EACHC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,aAAa,OAAO,EAEN,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,cAAc;QAClB,IAAI,CAACT,SAAS,CAACC,cAAc;YAC3B;QACF;QACA,qBACE,MAACS;YACCL,WAAWvB,0CAA8CQ,oBAAoB,CAACgB,WAAW;;gBAExFN,uBAAS,KAACU;oBAAIL,SAAS;8BAAuCL;;gBAC9DC,8BAAgB,KAACS;oBAAIL,SAAS;8BAAsCJ;;;;IAG3E;IAEA,qBACE,MAACjB,kDACKuB;QACJF,WAAWvB,2BAET,CAACsB,4CACDI,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CH;;YAGDN,wBAAU,KAACW;gBAAIL,SAAS;0BAA+BN;;0BACxD,MAACW;gBAAIL,SAAS;;kCACZ,MAACK;wBAAIL,SAAS;;0CACZ,MAACK;gCAAIL,SAAS;;oCACXV,yBACC,KAACV;wCAAQ0B,WAAU;wCAAMN,SAAS;kDAC/BV;;kDAGL,KAACe;wCAAIL,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,KAACa;wCAAIL,SAAS;kDAA6BR;;oCACnDC,yBACC,KAACb;wCAAQ0B,WAAU;wCAAMN,SAAS;kDAC/BP;;;;4BAINQ,eAAe,WAAWG;;;oBAE5BP,wBAAU,KAACQ;wBAAIL,SAAS;kCAA+BH;;oBACvDC,yBAAW,KAACO;wBAAIL,SAAS;kCAAgCF;;;;YAE3DG,eAAe,WAAWG;;;AAGjC,EAAE;AAEFf,SAASkB,IAAI,GAAG1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAoBxC,CAAC"}
+{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAqBxC,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinner.js

@@ -10,13 +10,14 @@ import { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */ export const ScreenSpinner = (_param)=>{
-    var { style, className, state = 'loading', onClick, cancelLabel, mode } = _param, restProps = _object_without_properties(_param, [
+    var { style, className, state = 'loading', onClick, cancelLabel, mode, caption } = _param, restProps = _object_without_properties(_param, [
         "style",
         "className",
         "state",
         "onClick",
         "cancelLabel",
-        "mode"
+        "mode",
+        "caption"
     ]);
     useScrollLock();
     return /*#__PURE__*/ _jsx(PopoutWrapper, {
@@ -26,6 +27,7 @@ import { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';
         children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
             state: state,
             mode: mode,
+            caption: caption,
             children: [
                 /*#__PURE__*/ _jsx(ScreenSpinnerLoader, _object_spread({}, restProps)),
                 /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {

package/dist/components/ScreenSpinner/ScreenSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state} mode={mode}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,QAAQ,0BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT;QAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EAEe,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGAX;IAEA,qBACE,KAACC;QAAcM,WAAWA;QAAWD,OAAOA;QAAOO,YAAY;kBAC7D,cAAA,MAACX;YAAuBM,OAAOA;YAAOG,MAAMA;;8BAC1C,KAACR,wCAAwBS;8BACzB,KAACR;oBAAsBK,SAASA;oBAASC,aAAaA;;;;;AAI9D,EAAE;AAEFL,cAAcS,WAAW,GAAG;AAE5BT,cAAcU,SAAS,GAAGb;AAC1BG,cAAcU,SAAS,CAACD,WAAW,GAAG;AAEtCT,cAAcW,MAAM,GAAGb;AACvBE,cAAcW,MAAM,CAACF,WAAW,GAAG;AAEnCT,cAAcY,QAAQ,GAAGb;AACzBC,cAAcY,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  caption,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state} mode={mode} caption={caption}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","caption","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,QAAQ,0BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT;QAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGAZ;IAEA,qBACE,KAACC;QAAcM,WAAWA;QAAWD,OAAOA;QAAOQ,YAAY;kBAC7D,cAAA,MAACZ;YAAuBM,OAAOA;YAAOG,MAAMA;YAAMC,SAASA;;8BACzD,KAACT,wCAAwBU;8BACzB,KAACT;oBAAsBK,SAASA;oBAASC,aAAaA;;;;;AAI9D,EAAE;AAEFL,cAAcU,WAAW,GAAG;AAE5BV,cAAcW,SAAS,GAAGd;AAC1BG,cAAcW,SAAS,CAACD,WAAW,GAAG;AAEtCV,cAAcY,MAAM,GAAGd;AACvBE,cAAcY,MAAM,CAACF,WAAW,GAAG;AAEnCV,cAAca,QAAQ,GAAGd;AACzBC,cAAca,QAAQ,CAACH,WAAW,GAAG"}

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { type ScreenSpinnerProps } from './types';
-type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> & Pick<ScreenSpinnerProps, 'state' | 'mode'>;
+type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> & Pick<ScreenSpinnerProps, 'state' | 'mode' | 'caption'>;
 export declare const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps>;
 export {};
 //# sourceMappingURL=ScreenSpinnerContainer.d.ts.map

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinnerContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAclD,KAAK,2BAA2B,GAAG,yBAAyB,CAAC,eAAe,CAAC,GAC3E,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAE7C,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiBxE,CAAC"}
+{"version":3,"file":"ScreenSpinnerContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAclD,KAAK,2BAA2B,GAAG,yBAAyB,CAAC,eAAe,CAAC,GAC3E,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEzD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA2BxE,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.js

@@ -1,9 +1,11 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { Footnote } from '../Typography/Footnote/Footnote';
 import { ScreenSpinnerContext } from './context';
 const stateClassNames = {
     cancelable: "vkuiScreenSpinner--state-cancelable",
@@ -15,17 +17,32 @@ const modeClassNames = {
     overlay: "vkuiScreenSpinner--mode-overlay"
 };
 export const ScreenSpinnerContainer = (_param)=>{
-    var { state = 'loading', mode = 'shadow' } = _param, restProps = _object_without_properties(_param, [
+    var { state = 'loading', mode = 'shadow', caption, children } = _param, restProps = _object_without_properties(_param, [
         "state",
-        "mode"
+        "mode",
+        "caption",
+        "children"
     ]);
     return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
         value: {
-            state
+            state,
+            caption
         },
-        children: /*#__PURE__*/ _jsx(RootComponent, _object_spread({
-            baseClassName: classNames("vkuiScreenSpinner", modeClassNames[mode], state !== 'loading' && stateClassNames[state])
-        }, restProps))
+        children: /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+            baseClassName: classNames("vkuiScreenSpinner", modeClassNames[mode], state !== 'loading' && stateClassNames[state], hasReactNode(caption) && "vkuiScreenSpinner--has-caption")
+        }, restProps), {
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiScreenSpinner__icon-slot",
+                    children: children
+                }),
+                hasReactNode(caption) && /*#__PURE__*/ _jsx(Footnote, {
+                    className: "vkuiScreenSpinner__caption",
+                    "aria-hidden": true,
+                    children: caption
+                })
+            ]
+        }))
     });
 };
 ScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';

package/dist/components/ScreenSpinner/ScreenSpinnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles['ScreenSpinner--state-cancelable'],\n  done: styles['ScreenSpinner--state-done'],\n  error: styles['ScreenSpinner--state-error'],\n};\n\nconst modeClassNames = {\n  shadow: styles['ScreenSpinner--mode-shadow'],\n  overlay: styles['ScreenSpinner--mode-overlay'],\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode'>;\n\nexport const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  mode = 'shadow',\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles['ScreenSpinner'],\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n        )}\n        {...restProps}\n      />\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';\n"],"names":["React","classNames","RootComponent","ScreenSpinnerContext","stateClassNames","cancelable","done","error","modeClassNames","shadow","overlay","ScreenSpinnerContainer","state","mode","restProps","Provider","value","baseClassName","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,oBAAoB,QAAQ,YAAY;AAIjD,MAAMC,kBAAkB;IACtBC,UAAU;IACVC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,iBAAiB;IACrBC,MAAM;IACNC,OAAO;AACT;AAKA,OAAO,MAAMC,yBAAgE;QAAC,EAC5EC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAEa,WADzBC;QAFHF;QACAC;;IAGA,qBACE,KAACV,qBAAqBY,QAAQ;QAACC,OAAO;YAAEJ;QAAM;kBAC5C,cAAA,KAACV;YACCe,eAAehB,gCAEbO,cAAc,CAACK,KAAK,EACpBD,UAAU,aAAaR,eAAe,CAACQ,MAAM;WAE3CE;;AAIZ,EAAE;AAEFH,uBAAuBO,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles['ScreenSpinner--state-cancelable'],\n  done: styles['ScreenSpinner--state-done'],\n  error: styles['ScreenSpinner--state-error'],\n};\n\nconst modeClassNames = {\n  shadow: styles['ScreenSpinner--mode-shadow'],\n  overlay: styles['ScreenSpinner--mode-overlay'],\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode' | 'caption'>;\n\nexport const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  mode = 'shadow',\n  caption,\n  children,\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state, caption }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles['ScreenSpinner'],\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n          hasReactNode(caption) && styles['ScreenSpinner--has-caption'],\n        )}\n        {...restProps}\n      >\n        <div className={styles['ScreenSpinner__icon-slot']}>{children}</div>\n        {hasReactNode(caption) && (\n          <Footnote className={styles.ScreenSpinner__caption} aria-hidden>\n            {caption}\n          </Footnote>\n        )}\n      </RootComponent>\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';\n"],"names":["React","classNames","hasReactNode","RootComponent","Footnote","ScreenSpinnerContext","stateClassNames","cancelable","done","error","modeClassNames","shadow","overlay","ScreenSpinnerContainer","state","mode","caption","children","restProps","Provider","value","baseClassName","div","className","aria-hidden","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,oBAAoB,QAAQ,YAAY;AAIjD,MAAMC,kBAAkB;IACtBC,UAAU;IACVC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,iBAAiB;IACrBC,MAAM;IACNC,OAAO;AACT;AAKA,OAAO,MAAMC,yBAAgE;QAAC,EAC5EC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACfC,OAAO,EACPC,QAAQ,EAEoB,WADzBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACZ,qBAAqBc,QAAQ;QAACC,OAAO;YAAEN;YAAOE;QAAQ;kBACrD,cAAA,MAACb;YACCkB,eAAepB,gCAEbS,cAAc,CAACK,KAAK,EACpBD,UAAU,aAAaR,eAAe,CAACQ,MAAM,EAC7CZ,aAAac;WAEXE;;8BAEJ,KAACI;oBAAIC,SAAS;8BAAuCN;;gBACpDf,aAAac,0BACZ,KAACZ;oBAASmB,SAAS;oBAAiCC,aAAW;8BAC5DR;;;;;AAMb,EAAE;AAEFH,uBAAuBY,WAAW,GAAG"}

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinnerLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAUtD,CAAC"}
+{"version":3,"file":"ScreenSpinnerLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqBtD,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.js

@@ -3,18 +3,23 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { Spinner } from '../Spinner/Spinner';
+import { ScreenSpinnerContext } from './context';
 export const ScreenSpinnerLoader = (_param)=>{
-    var { size = 'large', children = 'Пожалуйста, подождите...' } = _param, restProps = _object_without_properties(_param, [
+    var { size = 'large', children } = _param, restProps = _object_without_properties(_param, [
         "size",
         "children"
     ]);
+    const { caption } = React.useContext(ScreenSpinnerContext);
+    // TODO [>=7]: см. https://github.com/VKCOM/VKUI/pull/7505#discussion_r1754153438
+    const a11yText = children ? children : caption !== null && caption !== void 0 ? caption : 'Пожалуйста, подождите...';
     return /*#__PURE__*/ _jsx(Spinner, _object_spread_props(_object_spread({
-        className: "vkuiScreenSpinner__spinner",
+        className: classNames("vkuiScreenSpinner__spinner", !caption && "vkuiScreenSpinner__spinner--transition"),
         size: size,
         noColor: true
     }, restProps), {
-        children: children
+        children: a11yText
     }));
 };
 ScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';

package/dist/components/ScreenSpinner/ScreenSpinnerLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport type { SpinnerProps } from '../Spinner/Spinner';\nimport styles from './ScreenSpinner.module.css';\n\nexport const ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n  size = 'large',\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: SpinnerProps) => {\n  return (\n    <Spinner className={styles['ScreenSpinner__spinner']} size={size} noColor {...restProps}>\n      {children}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';\n"],"names":["React","Spinner","ScreenSpinnerLoader","size","children","restProps","className","noColor","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAI7C,OAAO,MAAMC,sBAA8C;QAAC,EAC1DC,OAAO,OAAO,EACdC,WAAW,0BAA0B,EAExB,WADVC;QAFHF;QACAC;;IAGA,qBACE,KAACH;QAAQK,SAAS;QAAoCH,MAAMA;QAAMI,OAAO;OAAKF;kBAC3ED;;AAGP,EAAE;AAEFF,oBAAoBM,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Spinner } from '../Spinner/Spinner';\nimport type { SpinnerProps } from '../Spinner/Spinner';\nimport { ScreenSpinnerContext } from './context';\nimport styles from './ScreenSpinner.module.css';\n\nexport const ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n  size = 'large',\n  children,\n  ...restProps\n}: SpinnerProps) => {\n  const { caption } = React.useContext(ScreenSpinnerContext);\n  // TODO [>=7]: см. https://github.com/VKCOM/VKUI/pull/7505#discussion_r1754153438\n  const a11yText = children ? children : caption ?? 'Пожалуйста, подождите...';\n  return (\n    <Spinner\n      className={classNames(\n        styles['ScreenSpinner__spinner'],\n        !caption && styles['ScreenSpinner__spinner--transition'],\n      )}\n      size={size}\n      noColor\n      {...restProps}\n    >\n      {a11yText}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';\n"],"names":["React","classNames","Spinner","ScreenSpinnerContext","ScreenSpinnerLoader","size","children","restProps","caption","useContext","a11yText","className","noColor","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,oBAAoB,QAAQ,YAAY;AAGjD,OAAO,MAAMC,sBAA8C;QAAC,EAC1DC,OAAO,OAAO,EACdC,QAAQ,EAEK,WADVC;QAFHF;QACAC;;IAGA,MAAM,EAAEE,OAAO,EAAE,GAAGR,MAAMS,UAAU,CAACN;IACrC,iFAAiF;IACjF,MAAMO,WAAWJ,WAAWA,WAAWE,oBAAAA,qBAAAA,UAAW;IAClD,qBACE,KAACN;QACCS,WAAWV,yCAET,CAACO;QAEHH,MAAMA;QACNO,OAAO;OACHL;kBAEHG;;AAGP,EAAE;AAEFN,oBAAoBS,WAAW,GAAG"}

package/dist/components/ScreenSpinner/context.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type ScreenSpinnerProps } from './types';
 export interface ScreenSpinnerContextProps {
     state: NonNullable<ScreenSpinnerProps['state']>;
+    caption?: ScreenSpinnerProps['caption'];
 }
 export declare const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps>;
 //# sourceMappingURL=context.d.ts.map

package/dist/components/ScreenSpinner/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAGtE,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAItE,CAAC"}

package/dist/components/ScreenSpinner/context.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export const ScreenSpinnerContext = React.createContext({
-    state: 'loading'
+    state: 'loading',
+    caption: undefined
 });
 
 //# sourceMappingURL=context.js.map

package/dist/components/ScreenSpinner/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;AACT,GAAG"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n  caption?: ScreenSpinnerProps['caption'];\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n    caption: undefined,\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state","caption","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAQ/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;IACPC,SAASC;AACX,GAAG"}

package/dist/components/ScreenSpinner/types.d.ts

@@ -1,7 +1,12 @@
+import type * as React from 'react';
 import type { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
     state?: 'loading' | 'cancelable' | 'done' | 'error';
     mode?: 'shadow' | 'overlay';
+    /**
+     * Текст под иконкой
+     */
+    caption?: React.ReactNode;
     cancelLabel?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScreenSpinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/components/ScreenSpinner/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type { SpinnerProps } from '../Spinner/Spinner';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n  mode?: 'shadow' | 'overlay';\n  cancelLabel?: string;\n}\n"],"names":[],"mappings":"AAEA,WAIC"}
+{"version":3,"sources":["../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type * as React from 'react';\nimport type { SpinnerProps } from '../Spinner/Spinner';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n  mode?: 'shadow' | 'overlay';\n  /**\n   * Текст под иконкой\n   */\n  caption?: React.ReactNode;\n  cancelLabel?: string;\n}\n"],"names":[],"mappings":"AAGA,WAQC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK5E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAwKtB,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK5E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SA6KtB,CAAC"}

package/dist/components/Search/Search.js

@@ -4,7 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { useBooleanState } from '../../hooks/useBooleanState';
@@ -49,6 +49,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
     const { sizeY = 'none' } = useAdaptivity();
     const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
     const platform = usePlatform();
+    const hasAfter = platform === 'ios' && hasReactNode(after);
     const onFocus = (e)=>{
         setFocusedTrue();
         inputProps.onFocus && inputProps.onFocus(e);
@@ -109,7 +110,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
             ]
         }));
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames('vkuiInternalSearch', "vkuiSearch", sizeY === 'none' && "vkuiSearch--sizeY-none", sizeY === 'compact' && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", hasValue && "vkuiSearch--has-value", after && "vkuiSearch--has-after", iconProp && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
+        className: classNames('vkuiInternalSearch', "vkuiSearch", sizeY === 'none' && "vkuiSearch--sizeY-none", sizeY === 'compact' && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", hasValue && "vkuiSearch--has-value", hasAfter && "vkuiSearch--has-after", iconProp && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
         ref: getRootRef,
         style: style,
         children: [
@@ -173,17 +174,21 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
                     })
                 ]
             }),
-            platform === 'ios' && after && /*#__PURE__*/ _jsx(Button, {
-                mode: "tertiary",
-                size: "m",
+            hasAfter && /*#__PURE__*/ _jsx("div", {
                 className: "vkuiSearch__after",
-                focusVisibleMode: "inside",
-                onClick: onCancel,
-                onFocus: setFocusedTrue,
-                onBlur: setFocusedFalse,
-                children: /*#__PURE__*/ _jsx("span", {
-                    className: "vkuiSearch__afterText",
-                    children: after
+                children: /*#__PURE__*/ _jsx(Button, {
+                    mode: "tertiary",
+                    size: "m",
+                    focusVisibleMode: "inside",
+                    hoverMode: "opacity",
+                    activeMode: "opacity",
+                    onClick: onCancel,
+                    onFocus: setFocusedTrue,
+                    onBlur: setFocusedFalse,
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: "vkuiSearch__afterTextClip",
+                        children: after
+                    })
                 })
             })
         ]