@vkontakte/vkui 5.8.1 → 5.8.2

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

@@ -81,7 +81,6 @@ var ModalRootDesktop = function(param) {
         });
     };
     var openModal = function() {
-        var _enteringState;
         if (!enteringModal || !prevProps) {
             return;
         }
@@ -96,15 +95,22 @@ var ModalRootDesktop = function(param) {
                         return onEntered(enteringModal);
                     }, timeout);
                     animateModalOpacity(enteringState, true);
+                    if (enteringState) {
+                        setMaskOpacity(enteringState, 1);
+                    }
                 }
             });
             return;
         }
         // Переход между модальными окнами без анимации
-        if ((_enteringState = enteringState) === null || _enteringState === void 0 ? void 0 : _enteringState.innerElement) {
-            enteringState.innerElement.style.transition = "none";
-            enteringState.innerElement.style.opacity = "1";
-        }
+        requestAnimationFrame(function() {
+            var _enteringState;
+            if ((_enteringState = enteringState) === null || _enteringState === void 0 ? void 0 : _enteringState.innerElement) {
+                enteringState.innerElement.style.transition = "none";
+                enteringState.innerElement.style.opacity = "1";
+                setMaskOpacity(enteringState, 1);
+            }
+        });
         onEntered(enteringModal);
     };
     var closeModal = function(id) {

package/dist/cjs/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 { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { 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  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: ModalRootWithDOMProps) => {\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,\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 === 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 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) {\n          waitTransitionFinish(\n            enteringState?.innerElement,\n            () => onEntered(enteringModal),\n            timeout,\n          );\n          animateModalOpacity(enteringState, true);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    if (enteringState?.innerElement) {\n      enteringState.innerElement.style.transition = 'none';\n      enteringState.innerElement.style.opacity = '1';\n    }\n\n    onEntered(enteringModal);\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 className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\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                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":["ModalRootDesktop","warn","warnOnce","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","React","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","useDOM","useConfigProvider","hasCustomPanelHeaderAfter","platform","useModalManager","noop","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","useWaitTransitionFinish","prevProps","usePrevious","modalRootContext","useObjectMemo","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","Platform","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","clamp","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","ModalRootContext","Provider","value","div","className","classNames","ref","onClick","map","Modal","modalId","getNavId","props","key","FocusTrap","restoreFocus"],"mappings":"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"}
+{"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 { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { 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  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: ModalRootWithDOMProps) => {\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,\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 === 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 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) {\n          waitTransitionFinish(\n            enteringState?.innerElement,\n            () => onEntered(enteringModal),\n            timeout,\n          );\n          animateModalOpacity(enteringState, true);\n          if (enteringState) {\n            setMaskOpacity(enteringState, 1);\n          }\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    onEntered(enteringModal);\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 className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\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                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":["ModalRootDesktop","warn","warnOnce","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","React","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","useDOM","useConfigProvider","hasCustomPanelHeaderAfter","platform","useModalManager","noop","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","useWaitTransitionFinish","prevProps","usePrevious","modalRootContext","useObjectMemo","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","Platform","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","clamp","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","ModalRootContext","Provider","value","div","className","classNames","ref","onClick","map","Modal","modalId","getNavId","props","key","FocusTrap","restoreFocus"],"mappings":"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"}

package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.d.ts

@@ -4,6 +4,6 @@ export type PanelHeaderBackProps = PanelHeaderButtonProps & {
     'aria-label'?: string;
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export declare const PanelHeaderBack: ({ label, "aria-label": ariaLabel, className, ...restProps }: PanelHeaderButtonProps) => React.JSX.Element;

package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderBack","label","ariaLabel","className","restProps","platform","usePlatform","useAdaptivity","sizeX","showLabel","Platform","VKCOM","IOS","icon","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","PanelHeaderButton","classNames","SizeType","COMPACT","aria-label"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;+DArBU;qBAKhB;oBACoB;6BACG;2BACF;0BACH;wBACA;iCACiC;AAUnD,IAAMA,kBAAkB;QAC7BC,eAAAA,OACcC,aAAd,eAAcA,YAAAA,iBAAY,UAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,iFAAiF;IACjF,wGAAwG;IACxG,IAAMC,YAAYJ,aAAaK,kBAAQ,CAACC,KAAK,IAAIN,aAAaK,kBAAQ,CAACE,GAAG;IAE1E,IAAIC,qBAAO,qBAACC,6BAAsB;IAClC,OAAQT;QACN,KAAKK,kBAAQ,CAACE,GAAG;YACfC,qBAAO,qBAACE,wBAAiB;YACzB;QACF,KAAKL,kBAAQ,CAACC,KAAK;YACjBE,qBAAO,qBAACG,+BAAwB;YAChC;IACJ;IAEA,qBACE,qBAACC,oCAAiB,8CACZb;QACJD,WAAWe,IAAAA,gBAAU,EACnBV,UAAUW,oBAAQ,CAACC,OAAO,0CAC1Bf,aAAaK,kBAAQ,CAACE,GAAG,gCACzBP,aAAaK,kBAAQ,CAACC,KAAK,kCAC3BF,aAAa,CAAC,CAACR,2CACfE;QAEFF,OAAOQ,aAAaR;QACpBoB,cAAYnB;QAEXW;AAGP"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderBack","label","ariaLabel","className","restProps","platform","usePlatform","useAdaptivity","sizeX","showLabel","Platform","VKCOM","IOS","icon","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","PanelHeaderButton","classNames","SizeType","COMPACT","aria-label"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;+DArBU;qBAKhB;oBACoB;6BACG;2BACF;0BACH;wBACA;iCACiC;AAUnD,IAAMA,kBAAkB;QAC7BC,eAAAA,OACcC,aAAd,eAAcA,YAAAA,iBAAY,UAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,iFAAiF;IACjF,wGAAwG;IACxG,IAAMC,YAAYJ,aAAaK,kBAAQ,CAACC,KAAK,IAAIN,aAAaK,kBAAQ,CAACE,GAAG;IAE1E,IAAIC,qBAAO,qBAACC,6BAAsB;IAClC,OAAQT;QACN,KAAKK,kBAAQ,CAACE,GAAG;YACfC,qBAAO,qBAACE,wBAAiB;YACzB;QACF,KAAKL,kBAAQ,CAACC,KAAK;YACjBE,qBAAO,qBAACG,+BAAwB;YAChC;IACJ;IAEA,qBACE,qBAACC,oCAAiB,8CACZb;QACJD,WAAWe,IAAAA,gBAAU,EACnBV,UAAUW,oBAAQ,CAACC,OAAO,0CAC1Bf,aAAaK,kBAAQ,CAACE,GAAG,gCACzBP,aAAaK,kBAAQ,CAACC,KAAK,kCAC3BF,aAAa,CAAC,CAACR,2CACfE;QAEFF,OAAOQ,aAAaR;QACpBoB,cAAYnB;QAEXW;AAGP"}

package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export declare const PanelHeaderClose: ({ children, ...restProps }: PanelHeaderButtonProps) => React.JSX.Element;

package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","aria-label","getTitleFromChildren","Platform","IOS","Icon28CancelOutline"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;qBACa;2BACR;wBACH;qBACY;iCACqB;AAKnD,IAAMA,mBAAmB;iCAAGC,UAAAA,wCAAW,4BAAaC;QAAxBD;;IACjC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYC,IAAAA,2BAAoB,EAACN;OAAeC,YAChEC,aAAaK,kBAAQ,CAACC,GAAG,GAAGR,yBAAW,qBAACS,0BAAmB;AAGlE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","aria-label","getTitleFromChildren","Platform","IOS","Icon28CancelOutline"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;qBACa;2BACR;wBACH;qBACY;iCACqB;AAKnD,IAAMA,mBAAmB;iCAAGC,UAAAA,wCAAW,4BAAaC;QAAxBD;;IACjC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYC,IAAAA,2BAAoB,EAACN;OAAeC,YAChEC,aAAaK,kBAAQ,CAACC,GAAG,GAAGR,yBAAW,qBAACS,0BAAmB;AAGlE"}

package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.d.ts

@@ -15,6 +15,6 @@ export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
     doneLabel?: string;
 }
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export declare const PanelHeaderEdit: ({ isActive, editLabel, doneLabel, ...restProps }: PanelHeaderEditProps) => React.JSX.Element;

package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","PanelHeaderButton","aria-label","Platform","IOS"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;+DAxBU;qBAC8B;2BACzB;wBACH;iCACiC;AAoBnD,IAAMA,kBAAkB;iCAC7BC,UAAAA,wCAAW,mDACXC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD;IACvC,IAAMI,cAAcL,WAAWM,wBAAiB,GAAGC,wBAAiB;IACpE,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYP;OAAaD,YACzCK,aAAaI,kBAAQ,CAACC,GAAG,GAAGT,wBAAU,qBAACC;AAG9C"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","PanelHeaderButton","aria-label","Platform","IOS"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;+DAxBU;qBAC8B;2BACzB;wBACH;iCACiC;AAoBnD,IAAMA,kBAAkB;iCAC7BC,UAAAA,wCAAW,mDACXC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD;IACvC,IAAMI,cAAcL,WAAWM,wBAAiB,GAAGC,wBAAiB;IACpE,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYP;OAAaD,YACzCK,aAAaI,kBAAQ,CAACC,GAAG,GAAGT,wBAAU,qBAACC;AAG9C"}

package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export declare const PanelHeaderSubmit: ({ children, ...restProps }: PanelHeaderButtonProps) => React.JSX.Element;

package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","aria-label","getTitleFromChildren","primary","Platform","IOS","Icon28DoneOutline"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;qBACW;2BACN;wBACH;qBACY;iCACqB;AAKnD,IAAMA,oBAAoB;iCAC/BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYC,IAAAA,2BAAoB,EAACN;QAAWO,SAAAA;OAAYN,YACxEC,aAAaM,kBAAQ,CAACC,GAAG,GAAGT,yBAAW,qBAACU,wBAAiB;AAGhE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","aria-label","getTitleFromChildren","primary","Platform","IOS","Icon28DoneOutline"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;qBACW;2BACN;wBACH;qBACY;iCACqB;AAKnD,IAAMA,oBAAoB;iCAC/BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,cAAYC,IAAAA,2BAAoB,EAACN;QAAWO,SAAAA;OAAYN,YACxEC,aAAaM,kBAAQ,CAACC,GAAG,GAAGT,yBAAW,qBAACU,wBAAiB;AAGhE"}

package/dist/cjs/components/Popper/Popper.js

@@ -17,6 +17,7 @@ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _useExternRef = require("../../hooks/useExternRef");
 var _floating = require("../../lib/floating");
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _DefaultIcon = require("../PopperArrow/DefaultIcon");
 var _PopperArrow = require("../PopperArrow/PopperArrow");
@@ -118,13 +119,13 @@ var Popper = function(_param) {
     }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow, hide = _useFloating_middlewareData.hide;
     // TODO [>=6]: убрать getRef
     var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef, getRootRef);
-    _react.useEffect(function() {
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         refs.setReference(targetRef.current);
     }, [
         refs,
         targetRef
     ]);
-    _react.useEffect(function() {
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (resolvedPlacement && onPlacementChange) {
             onPlacementChange({
                 placement: resolvedPlacement

package/dist/cjs/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  hideMiddleware,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n  /**\n   * Принудительно скрывает компонет если целевой элемент исчез\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  getRootRef,\n  hideWhenReferenceHidden,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n    hideWhenReferenceHidden,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords, hide },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  // TODO [>=6]: убрать getRef\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef, getRootRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n        ...(hide?.referenceHidden && {\n          visibility: 'hidden',\n        }),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </RootComponent>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","arrowClassName","ArrowIcon","DefaultIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","getRootRef","hideWhenReferenceHidden","restProps","hide","React","useState","arrowRef","setArrowRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","hideMiddleware","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","RootComponent","baseClassName","convertFloatingDataToReactCSSProperties","referenceHidden","visibility","PopperArrow","coords","Icon","className","AppRootPortal"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  hideMiddleware,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n  /**\n   * Принудительно скрывает компонет если целевой элемент исчез\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  getRootRef,\n  hideWhenReferenceHidden,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n    hideWhenReferenceHidden,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords, hide },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  // TODO [>=6]: убрать getRef\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n        ...(hide?.referenceHidden && {\n          visibility: 'hidden',\n        }),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </RootComponent>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","arrowClassName","ArrowIcon","DefaultIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","getRootRef","hideWhenReferenceHidden","restProps","hide","React","useState","arrowRef","setArrowRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","hideMiddleware","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useIsomorphicLayoutEffect","setReference","current","dropdown","RootComponent","baseClassName","convertFloatingDataToReactCSSProperties","referenceHidden","visibility","PopperArrow","coords","Icon","className","AppRootPortal"],"mappings":"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"}

package/dist/cjs/components/ScrollArrow/ScrollArrow.js

@@ -42,6 +42,7 @@ var ScrollArrow = function(_param) {
     ]);
     return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
         Component: "button",
+        type: "button",
         baseClassName: (0, _vkjs.classNames)("vkuiScrollArrow", stylesSize[size], stylesDirection[direction])
     }, restProps), /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiScrollArrow__icon",

package/dist/cjs/components/ScrollArrow/ScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  left: styles['ScrollArrow--direction-left'],\n  right: styles['ScrollArrow--direction-right'],\n};\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <RootComponent\n      Component=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","left","right","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","children","restProps","RootComponent","Component","baseClassName","classNames","span","className","style","top","undefined"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;+DArDU;qBAMhB;oBACoB;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,KAAK;AACP;AAEA,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,wBAAiB,wBAAM,qBAACC,oBAAa;IACtE;IAEA,OAAOF,cAAc,uBAAS,qBAACG,+BAAwB,wBAAM,qBAACC,oBAAa;AAC7E;AAyBO,IAAMb,cAAc;6BACzBQ,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,oCACAM,UAAAA,sDAAW,qBAACR;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CQ;QAJHR;QACAM;QACAL;QACAM;;IAGA,qBACE,qBAACE,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,qBAEvBnB,UAAU,CAACO,KAAK,EAChBJ,eAAe,CAACK,UAAU;OAExBO,0BAEJ,qBAACK;QAAKC,SAAS;QAA+BC,OAAOT,UAAU;YAAEU,KAAKV;QAAQ,IAAIW;OAC/EV;AAIT"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  left: styles['ScrollArrow--direction-left'],\n  right: styles['ScrollArrow--direction-right'],\n};\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","left","right","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","children","restProps","RootComponent","Component","type","baseClassName","classNames","span","className","style","top","undefined"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;+DArDU;qBAMhB;oBACoB;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,KAAK;AACP;AAEA,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,wBAAiB,wBAAM,qBAACC,oBAAa;IACtE;IAEA,OAAOF,cAAc,uBAAS,qBAACG,+BAAwB,wBAAM,qBAACC,oBAAa;AAC7E;AAyBO,IAAMb,cAAc;6BACzBQ,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,oCACAM,UAAAA,sDAAW,qBAACR;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CQ;QAJHR;QACAM;QACAL;QACAM;;IAGA,qBACE,qBAACE,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,eAAeC,IAAAA,gBAAU,qBAEvBpB,UAAU,CAACO,KAAK,EAChBJ,eAAe,CAACK,UAAU;OAExBO,0BAEJ,qBAACM;QAAKC,SAAS;QAA+BC,OAAOV,UAAU;YAAEW,KAAKX;QAAQ,IAAIY;OAC/EX;AAIT"}

package/dist/cjs/components/SimpleCell/SimpleCell.js

@@ -26,15 +26,9 @@ var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Chevron = require("./Chevron/Chevron");
 var warn = (0, _warnOnce.warnOnce)("SimpleCell");
-var platformClassNames = {
-    ios: (0, _vkjs.classNames)("vkuiSimpleCell--ios", "vkuiInternalSimpleCell--ios"),
-    android: "vkuiSimpleCell--android",
-    vkcom: "vkuiSimpleCell--vkcom"
-};
-var _obj;
-var sizeYClassNames = (_obj = {
-    none: (0, _vkjs.classNames)("vkuiSimpleCell--sizeY-none", "vkuiInternalSimpleCell--sizeY-none")
-}, _define_property._(_obj, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiSimpleCell--sizeY-compact", "vkuiInternalSimpleCell--sizeY-compact")), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiSimpleCell--sizeY-regular"), _obj);
+var sizeYClassNames = _define_property._({
+    none: "vkuiSimpleCell--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSimpleCell--sizeY-compact");
 var SimpleCell = function(_param) {
     var badgeBeforeTitle = _param.badgeBeforeTitle, badgeAfterTitle = _param.badgeAfterTitle, badgeBeforeSubtitle = _param.badgeBeforeSubtitle, badgeAfterSubtitle = _param.badgeAfterSubtitle, before = _param.before, indicator = _param.indicator, children = _param.children, after = _param.after, expandable = _param.expandable, multiline = _param.multiline, subhead = _param.subhead, subtitle = _param.subtitle, extraSubtitle = _param.extraSubtitle, className = _param.className, _param_chevronSize = _param.chevronSize, chevronSize = _param_chevronSize === void 0 ? "m" : _param_chevronSize, restProps = _object_without_properties._(_param, [
         "badgeBeforeTitle",
@@ -62,9 +56,11 @@ var SimpleCell = function(_param) {
     var hasAfter = (0, _vkjs.hasReactNode)(after) || hasChevron;
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiSimpleCell", "vkuiInternalSimpleCell", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
-    }), before, /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiSimpleCell__main", "vkuiInternalSimpleCell__main")
+        className: (0, _vkjs.classNames)("vkuiSimpleCell", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSimpleCell__before"
+    }, before), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSimpleCell__middle"
     }, subhead && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
         Component: "span",
         className: (0, _vkjs.classNames)("vkuiSimpleCell__text", "vkuiSimpleCell__subhead")

package/dist/cjs/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","warn","warnOnce","platformClassNames","ios","classNames","android","vkcom","sizeYClassNames","none","SizeType","COMPACT","REGULAR","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","process","env","NODE_ENV","hasChevron","Platform","IOS","hasAfter","hasReactNode","useAdaptivity","sizeY","Tappable","hasOwnProperty","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAgGaA;;;eAAAA;;;;;;;;+DAhGU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;wBAEe;wBACf;wBACA;uBACD;uBACA;AAGxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAEtB,IAAMC,qBAAqB;IACzBC,KAAKC,IAAAA,gBAAU,yBAA4B;IAC3CC,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMJ,IAAAA,gBAAU,gCAAmC;GACnD,mBAFsB,MAErBK,oBAAQ,CAACC,OAAO,EAAGN,IAAAA,gBAAU,mCAE5B,8DAJoB,MAMrBK,oBAAQ,CAACE,OAAO,oCANK;AAyEjB,IAAMZ,aAAa;QACxBa,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBZ,eAAe,MAAM;QACjE,yDAAyD;QACzDpB,KACE;IAEJ;IAEA,IAAMiC,aACJb,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAaM,kBAAQ,CAACC,GAAG;IAE9E,IAAMC,WAAWC,IAAAA,kBAAY,EAAClB,UAAUc;IACxC,IAA2BK,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,8CACHb;QACJF,WAAWrB,IAAAA,gBAAU,oBAEnB,0BACAF,mBAAmBuC,cAAc,CAACb,YAC9B1B,kBAAkB,CAAC0B,SAAS,GAC5B1B,mBAAmBG,OAAO,EAC9BE,eAAe,CAACgC,MAAM,EACtBlB,qCACAI;QAGDT,sBACD,qBAAC0B;QAAIjB,WAAWrB,IAAAA,gBAAU,0BAA6B;OACpDkB,yBACC,qBAACqB,gBAAO;QACNC,WAAU;QACVnB,WAAWrB,IAAAA,gBAAU;OAEpBkB,wBAGL,qBAACoB;QAAIjB,SAAS;OACXb,kCACC,qBAACiC;QAAKpB,SAAS;OAAgCb,iCAEjD,qBAACkC,kBAAQ;QAACF,WAAU;QAAOnB,SAAS;QAAkCsB,QAAO;OAC1E7B,WAEFmB,IAAAA,kBAAY,EAACxB,kCACZ,qBAACgC;QAAKpB,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACmB;QAAIjB,SAAS;OACXX,qCACC,qBAAC+B;QAAKpB,SAAS;OAAgCX,oCAEjD,qBAACkC,kBAAQ;QACPC,WAAW;QACXxB,WAAWrB,IAAAA,gBAAU;OAEpBmB,WAEFR,oCACC,qBAAC8B;QAAKpB,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACwB,kBAAQ;QACPvB,WAAWrB,IAAAA,gBAAU;OAEpBoB,iBAINa,IAAAA,kBAAY,EAACpB,4BACZ,qBAAC6B,kBAAQ;QAACF,WAAU;QAAOG,QAAO;QAAItB,SAAS;OAC5CR,YAGJmB,0BACC,qBAACM;QAAIjB,WAAWrB,IAAAA,gBAAU,2BAA8B;OACrDe,OACAc,4BACC,qBAACiB,gBAAO;QAACC,MAAMzB;QAAaD,SAAS;;AAMjD"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['SimpleCell--sizeY-compact'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      <div className={styles['SimpleCell__before']}>{before}</div>\n      <div className={styles['SimpleCell__middle']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","warn","warnOnce","sizeYClassNames","none","SizeType","COMPACT","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","process","env","NODE_ENV","hasChevron","Platform","IOS","hasAfter","hasReactNode","useAdaptivity","sizeY","Tappable","classNames","REGULAR","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAsFaA;;;eAAAA;;;;;;;;+DAtFU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;wBAEe;wBACf;wBACA;uBACD;uBACA;AAGxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAEtB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAmEZ,IAAMN,aAAa;QACxBO,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBZ,eAAe,MAAM;QACjE,yDAAyD;QACzDd,KACE;IAEJ;IAEA,IAAM2B,aACJb,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAaM,kBAAQ,CAACC,GAAG;IAE9E,IAAMC,WAAWC,IAAAA,kBAAY,EAAClB,UAAUc;IACxC,IAA2BK,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,8CACHb;QACJF,WAAWgB,IAAAA,gBAAU,oBAEnBF,UAAU7B,oBAAQ,CAACgC,OAAO,IAAIlC,eAAe,CAAC+B,MAAM,EACpDlB,qCACAI;sBAGF,qBAACkB;QAAIlB,SAAS;OAAiCT,uBAC/C,qBAAC2B;QAAIlB,SAAS;OACXH,yBACC,qBAACsB,gBAAO;QACNC,WAAU;QACVpB,WAAWgB,IAAAA,gBAAU;OAEpBnB,wBAGL,qBAACqB;QAAIlB,SAAS;OACXb,kCACC,qBAACkC;QAAKrB,SAAS;OAAgCb,iCAEjD,qBAACmC,kBAAQ;QAACF,WAAU;QAAOpB,SAAS;QAAkCuB,QAAO;OAC1E9B,WAEFmB,IAAAA,kBAAY,EAACxB,kCACZ,qBAACiC;QAAKrB,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACoB;QAAIlB,SAAS;OACXX,qCACC,qBAACgC;QAAKrB,SAAS;OAAgCX,oCAEjD,qBAACmC,kBAAQ;QACPC,WAAW;QACXzB,WAAWgB,IAAAA,gBAAU;OAEpBlB,WAEFR,oCACC,qBAAC+B;QAAKrB,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACyB,kBAAQ;QACPxB,WAAWgB,IAAAA,gBAAU;OAEpBjB,iBAINa,IAAAA,kBAAY,EAACpB,4BACZ,qBAAC8B,kBAAQ;QAACF,WAAU;QAAOG,QAAO;QAAIvB,SAAS;OAC5CR,YAGJmB,0BACC,qBAACO;QAAIlB,WAAWgB,IAAAA,gBAAU,2BAA8B;OACrDtB,OACAc,4BACC,qBAACkB,gBAAO;QAACC,MAAM1B;QAAaD,SAAS;;AAMjD"}

package/dist/components/ActionSheet/ActionSheet.js

@@ -101,14 +101,18 @@ var warn = warnOnce("ActionSheet");
         onClose: onClose,
         className: isDesktop ? className : undefined,
         style: isDesktop ? style : undefined
-    }), (header || text) && /*#__PURE__*/ React.createElement("header", {
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiActionSheet__content-wrapper"
+    }, (header || text) && /*#__PURE__*/ React.createElement("header", {
         className: "vkuiActionSheet__header"
     }, header && /*#__PURE__*/ React.createElement(Footnote, {
         weight: "2",
         className: "vkuiActionSheet__title"
     }, header), text && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiActionSheet__text"
-    }, text)), children, platform === Platform.IOS && !isDesktop && (iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ React.createElement(ActionSheetDefaultIosCloseItem, null))));
+    }, text)), children), platform === Platform.IOS && !isDesktop && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiActionSheet__close-item-wrapper--ios"
+    }, iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ React.createElement(ActionSheetDefaultIosCloseItem, null))));
     if (isDesktop) {
         return actionSheet;
     }

package/dist/components/ActionSheet/ActionSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS &&\n          !isDesktop &&\n          (iosCloseItem ?? <ActionSheetDefaultIosCloseItem />)}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","useState","undefined","closingBy","setClosingBy","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <header className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </header>\n          )}\n          {children}\n        </div>\n        {platform === Platform.IOS && !isDesktop && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","useState","undefined","closingBy","setClosingBy","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","div","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;
@@ -6,7 +6,6 @@ export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivEleme
      * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
      */
     mode?: 'stretch' | 'none';
-    children: React.ReactNode;
     /**
      * Например 16 / 9, 4 / 3, 1920 / 1080
      */
@@ -15,8 +14,8 @@ export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivEleme
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
- 
+
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export declare function AspectRatio({ ratio, children, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;
+export declare function AspectRatio({ ratio, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/components/AspectRatio/AspectRatio.js

@@ -7,13 +7,12 @@ import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
- 
+
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ export function AspectRatio(_param) {
-    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, styleProp = _param.style, props = _object_without_properties(_param, [
+    var ratio = _param.ratio, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, styleProp = _param.style, props = _object_without_properties(_param, [
         "ratio",
-        "children",
         "mode",
         "style"
     ]);

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n \n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  children,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","AspectRatio","ratio","children","mode","style","styleProp","props","String","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAgB/D;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,AAAOC,YAJmB,OAI1BD,OACGE,mCALuB;QAC1BL;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAON;IAG5C,qBACE,oBAACF;QACCS,eAAeV,8BAEbK,SAAS;QAEXC,OAAO,mBAAKC,WAAcD;OACtBE;AAGV"}
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","AspectRatio","ratio","mode","style","styleProp","props","String","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAe/D;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,qBAD0B,OAE1BC,MAAAA,gCAAO,yBACPC,AAAOC,YAHmB,OAG1BD,OACGE,mCAJuB;QAC1BJ;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAOL;IAG5C,qBACE,oBAACF;QACCQ,eAAeT,8BAEbI,SAAS;QAEXC,OAAO,mBAAKC,WAAcD;OACtBE;AAGV"}

package/dist/components/Banner/Banner.js

@@ -13,10 +13,6 @@ import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
-var stylesSize = {
-    s: "vkuiBanner--size-s",
-    m: "vkuiBanner--size-m"
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export var Banner = function(_param) {
@@ -63,7 +59,7 @@ var stylesSize = {
     return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
         Component: "section"
     }, restProps), {
-        baseClassName: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", stylesSize[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
+        baseClassName: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", size === "m" && "vkuiBanner--size-m", mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
     }), asideMode === "expand" ? /*#__PURE__*/ React.createElement(Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === Platform.IOS ? "opacity" : "background",