@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAA4BC,qCAAAA,OAAMC,SAAS,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,OAAuB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,iDAAyD;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,wBAAWJ,aAAaR,aAAaa,mBAASC,MAAM,MAAM;IAC1FZ,OAAMa,UAAU;QACd,CAACX,UAAUO,wBAAwBK;IACrC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,eAAXD;IACRE,IAAAA,gDAAuBF,QAAQ,aAAa,SAACR;eAAMA,EAAEW;OAAkB;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,uCAET;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,qCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAC1FZ,OAAMa,SAAS,CAAC;QACd,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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 { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } 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 styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<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\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  className,\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    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\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  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\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    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\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    </div>\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","className","restProps","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","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","div","classNames","ref","convertFloatingDataToReactCSSProperties","PopperArrow","coords","getRootRef","Icon","AppRootPortal"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } 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 styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<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\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  className,\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    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\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  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\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    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\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    </div>\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","className","restProps","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","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","div","classNames","ref","convertFloatingDataToReactCSSProperties","PopperArrow","coords","getRootRef","Icon","AppRootPortal"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["PopperArrow","placementClassNames","right","bottom","left","coords","arrowClassName","placement","getRootRef","Icon","DefaultIcon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","classNames","x","y","startsWith","top","undefined"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;+DAzBU;oBACI;2BAGC;AAQ5B,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASO,IAAMJ,cAAc;QACzBK,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOC;IAEP,IAAsCC,2CAAAA,qBAAqBJ,WAAWF,aAA/DO,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,qBAACG;QACCC,KAAKP;QACLQ,OAAOH;QACPI,WAAWC,IAAAA,qCAETN,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,qBAACH;QAAKQ,WAAWC,IAAAA,yCAAsCZ;;AAG7D;AAEA,SAASK,qBACPJ,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEc,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIb,UAAUc,WAAW,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLlB,MAAMC,OAAOc;YACf;SACD;IACH,OAAO,IAAIZ,UAAUc,WAAW,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKjB,OAAOe;gBACZhB,MAAM;YACR;SACD;IACH,OAAO,IAAIG,UAAUc,WAAW,WAAW;QACzC,OAAO;YACLE;YACA;gBACEpB,QAAQ;gBACRC,MAAMC,OAAOc;YACf;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKjB,OAAOe;gBACZlB,OAAO;YACT;SACD;IACH;AACF"}
+{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["PopperArrow","placementClassNames","right","bottom","left","coords","arrowClassName","placement","getRootRef","Icon","DefaultIcon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","classNames","x","y","startsWith","top","undefined"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;+DAzBU;oBACI;2BAGC;AAQ5B,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASO,IAAMJ,cAAc;QACzBK,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOC,wBAAW;IAElB,IAAsCC,2CAAAA,qBAAqBJ,WAAWF,aAA/DO,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,qBAACG;QACCC,KAAKP;QACLQ,OAAOH;QACPI,WAAWC,IAAAA,gBAAU,qBAEnBN,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,qBAACH;QAAKQ,WAAWC,IAAAA,gBAAU,yBAA4BZ;;AAG7D;AAEA,SAASK,qBACPJ,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEc,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIb,UAAUc,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLlB,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO,IAAIZ,UAAUc,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKjB,OAAOe,CAAC;gBACbhB,MAAM;YACR;SACD;IACH,OAAO,IAAIG,UAAUc,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEpB,QAAQ;gBACRC,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKjB,OAAOe,CAAC;gBACblB,OAAO;YACT;SACD;IACH;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","style","width"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;+DAtBU;oBACI;oBACL;AActB,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMF,WAAW;8BACtBG,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,aAAMN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,qBACE,qBAACS;QACCC,iBAAeT;QACfO,OAAOA;OACHH;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,kCAET;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BgB,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATd,UAAS;QAAG;;AAG7E"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","style","width"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;+DAtBU;oBACI;oBACL;AActB,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMF,WAAW;8BACtBG,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,WAAK,EAACN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,qBACE,qBAACS;QACCC,iBAAeT;QACfO,OAAOA;OACHH;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,gBAAU,kBAEnB;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BgB,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATd,UAAS;QAAG;;AAG7E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PromoBanner","warn","warnOnce","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","classNames","Footnote","advertisingLabel","ageRestrictions","Icon24Dismiss","SimpleCell","href","trackingLink","rel","target","before","iconLink","Image","size","src","alt","title","data-testid","undefined","after","ctaText","Button","mode","subtitle","domain","length","img"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;;+DAxDU;qBACO;oBACH;wBACF;sBACF;qBACD;0BACK;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,oBAAS;AA8Cf,IAAMF,cAAc;mCACzBG,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,IAAIC,aAAa,eAAe;QAC1CT,KACE;IAEJ;IAEA,IAAwCU,qCAAAA,OAAMC,SAAS,SAAhDC,eAAiCF,oBAAnBG,kBAAmBH;IAExC,IAAMI,cAAcJ,OAAMK,QACxB;eACGb,WAAWc,aACRd,WAAWc,WAAWC,OAAO,SAACC,KAAKC;mBAAU,4CAAKD,MAAK,uBAACC,KAAKC,MAAOD,KAAKE;WAAQ,CAAC,KAClF,CAAC;OACP;QAACnB,WAAWc;KAAW;IAGzB,IAAMM,UAAUZ,OAAMa,YACpB;eAAMV,gBAAgBC,YAAYU,SAAS;OAC3C;QAACV,YAAYU;KAAM;IAGrBd,OAAMe,UAAU;QACd,IAAIX,YAAYY,iBAAiB;YAC/Bb,gBAAgBC,YAAYY;QAC9B;IACF,GAAG;QAACZ,YAAYY;KAAgB;IAEhC,qBACE,qBAACC;QAAItB,WAAWuB,IAAAA,qCAAkCvB;OAAgBC,0BAChE,qBAACqB;QAAItB,SAAS;qBACZ,qBAACwB,0BAAU3B,WAAW4B,oBAAoB,kBACzC5B,WAAW6B,iCACV,qBAACF;QAASxB,SAAS;OAA+BH,WAAW6B,kBAG9D,CAAC3B,qCACA,qBAACuB;QAAItB,SAAS;QAAgCiB,SAASnB;qBACrD,qBAAC6B,6CAIP,qBAACC;QACCC,MAAMhC,WAAWiC;QACjBb,SAASA;QACTc,KAAI;QACJC,QAAO;QACPC,QACEpC,WAAWqC,0BACT,qBAACC;YACCC,MAAM;YACNC,KAAKxC,WAAWqC;YAChBI,KAAKzC,WAAW0C;YAChBC,eAAatC,QAAQC,IAAIC,aAAa,SAAS,WAAWqC;;QAIhEC,OACE7C,WAAW8C,yBACT,qBAACC;YACCC,MAAK;YACLL,eAAatC,QAAQC,IAAIC,aAAa,SAAS,mBAAmBqC;WAEjE5C,WAAW8C;QAIlBG,UAAUjD,WAAWkD;OAEpBlD,WAAW0C,QAGbhC,aAAayC,SAAS,mBACrB,qBAAC1B;QAAItB,SAAS;qBACZ,qBAACiD;QAAIZ,KAAK9B;QAAc+B,KAAI;;AAKtC"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PromoBanner","warn","warnOnce","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","classNames","Footnote","advertisingLabel","ageRestrictions","Icon24Dismiss","SimpleCell","href","trackingLink","rel","target","before","iconLink","Image","size","src","alt","title","data-testid","undefined","after","ctaText","Button","mode","subtitle","domain","length","img"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;;+DAxDU;qBACO;oBACH;wBACF;sBACF;qBACD;0BACK;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AA8Cf,IAAMF,cAAc;mCACzBG,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ;IAEA,IAAwCU,qCAAAA,OAAMC,QAAQ,CAAC,SAAhDC,eAAiCF,oBAAnBG,kBAAmBH;IAExC,IAAMI,cAAcJ,OAAMK,OAAO,CAC/B;eACGb,WAAWc,UAAU,GAClBd,WAAWc,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,4CAAKD,MAAK,uBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAACnB,WAAWc,UAAU;KAAC;IAGzB,IAAMM,UAAUZ,OAAMa,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrBd,OAAMe,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,qBAACC;QAAItB,WAAWuB,IAAAA,gBAAU,qBAAwBvB;OAAgBC,0BAChE,qBAACqB;QAAItB,SAAS;qBACZ,qBAACwB,kBAAQ,QAAE3B,WAAW4B,gBAAgB,IAAI,kBACzC5B,WAAW6B,eAAe,kBACzB,qBAACF,kBAAQ;QAACxB,SAAS;OAA+BH,WAAW6B,eAAe,GAG7E,CAAC3B,qCACA,qBAACuB;QAAItB,SAAS;QAAgCiB,SAASnB;qBACrD,qBAAC6B,oBAAa,yBAIpB,qBAACC,sBAAU;QACTC,MAAMhC,WAAWiC,YAAY;QAC7Bb,SAASA;QACTc,KAAI;QACJC,QAAO;QACPC,QACEpC,WAAWqC,QAAQ,kBACjB,qBAACC,YAAK;YACJC,MAAM;YACNC,KAAKxC,WAAWqC,QAAQ;YACxBI,KAAKzC,WAAW0C,KAAK;YACrBC,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWqC;;QAIhEC,OACE7C,WAAW8C,OAAO,kBAChB,qBAACC,cAAM;YACLC,MAAK;YACLL,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBqC;WAEjE5C,WAAW8C,OAAO;QAIzBG,UAAUjD,WAAWkD,MAAM;OAE1BlD,WAAW0C,KAAK,GAGlBhC,aAAayC,MAAM,GAAG,mBACrB,qBAAC1B;QAAItB,SAAS;qBACZ,qBAACiD;QAAIZ,KAAK9B;QAAc+B,KAAI;;AAKtC"}

package/dist/cjs/components/PullToRefresh/PullToRefresh.js

@@ -175,9 +175,10 @@ var PullToRefresh = function(_param) {
         setTouchDown(true);
     };
     var onTouchMove = function(e) {
+        var _scroll;
         var isY = e.isY, shiftY = e.shiftY;
         var start = initParams.start, max = initParams.max;
-        var pageYOffset = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
+        var pageYOffset = (_scroll = scroll) === null || _scroll === void 0 ? void 0 : _scroll.getScroll().y;
         if (watching && touchDown) {
             cancelEvent(e);
             var positionMultiplier = initParams.positionMultiplier, maxY = initParams.maxY;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["PullToRefresh","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["PullToRefresh","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

package/dist/cjs/components/PullToRefresh/PullToRefreshSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["PullToRefreshSpinner","calcStrokeDashOffset","value","radius","progress","Math","PI","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","classNames","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;+DAjBU;oBACI;AAG3B,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,KAAKH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUO,IAAMJ,uBAAuB;0BAClCO,IAAAA,4BAAK,sCACLC,MAAAA,gCAAO,6CACPC,aAAAA,8CAAc,0BACdC,cAAAA,+BACAN,UAAAA,wCAAW,qBACGO,YAAd,eAAcA,YAAAA,iBAAY,6BAAZA;IAEd,IAAMR,SAAS,MAAMK,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIP,KAAKC,KAAKH;IAChC,IAAMU,eAAe,MAAML;IAE3B,IAAMM,aAAab,qBAAqBM,KAAK,KAAKH,UAAUD;IAE5D,qBACE,qBAACY;QACCC,WAAWC,IAAAA,gDAETV;QAEFG,OAAOA;QACPQ,cAAYX,KAAKI,YAAYQ;qBAE7B,qBAACC;QACCC,MAAK;QACLL,SAAS;QACTN,OAAO;YACLY,OAAOd;YACPe,QAAQf;QACV;QACAgB,SAAS,AAAC,OAAchB,OAARA,MAAK,KAAQ,OAALA;QACxBiB,OAAM;qBAEN,qBAACC;QACChB,OAAO;YACLY,OAAOd;YACPe,QAAQf;YACRmB,iBAAiB,AAAC,GAAoBd,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,qBAACe;QACCZ,SAAS;QACTa,MAAK;QACLC,iBAAiBlB;QACjBmB,kBAAkBjB;QAClBL,aAAaA;QACbuB,eAAc;QACdC,IAAIpB;QACJqB,IAAIrB;QACJsB,GAAGhC;;AAMf"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["PullToRefreshSpinner","calcStrokeDashOffset","value","radius","progress","Math","PI","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","classNames","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;+DAjBU;oBACI;AAG3B,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUO,IAAMJ,uBAAuB;0BAClCO,IAAAA,4BAAK,sCACLC,MAAAA,gCAAO,6CACPC,aAAAA,8CAAc,0BACdC,cAAAA,+BACAN,UAAAA,wCAAW,qBACGO,YAAd,eAAcA,YAAAA,iBAAY,6BAAZA;IAEd,IAAMR,SAAS,MAAMK,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIP,KAAKC,EAAE,GAAGH;IAChC,IAAMU,eAAe,MAAML;IAE3B,IAAMM,aAAab,qBAAqBM,KAAK,KAAKH,UAAUD;IAE5D,qBACE,qBAACY;QACCC,WAAWC,IAAAA,gBAAU,gCAEnBV;QAEFG,OAAOA;QACPQ,cAAYX,KAAKI,YAAYQ;qBAE7B,qBAACC;QACCC,MAAK;QACLL,SAAS;QACTN,OAAO;YACLY,OAAOd;YACPe,QAAQf;QACV;QACAgB,SAAS,AAAC,OAAchB,OAARA,MAAK,KAAQ,OAALA;QACxBiB,OAAM;qBAEN,qBAACC;QACChB,OAAO;YACLY,OAAOd;YACPe,QAAQf;YACRmB,iBAAiB,AAAC,GAAoBd,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,qBAACe;QACCZ,SAAS;QACTa,MAAK;QACLC,iBAAiBlB;QACjBmB,kBAAkBjB;QAClBL,aAAaA;QACbuB,eAAc;QACdC,IAAIpB;QACJqB,IAAIrB;QACJsB,GAAGhC;;AAMf"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.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 { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Radio","sizeYClassNames","none","SizeType","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","Tappable","Component","classNames","REGULAR","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","span","hasReactNode","Footnote"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;;+DArCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;8BACM;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAGZ,IAAMC,YAAY,SAACC;IACjB,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,qBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,qBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAaO,IAAMjB,QAAQ;QACnBmB,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAH,mBAAAA,WACAI,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCC,WAAU;QACVV,OAAOA;QACPH,WAAWc,IAAAA,+BAETH,UAAU1B,qBAAS8B,WAAWhC,eAAe,CAAC4B,MAAM,EACpDX;QAEFgB,mBAAmBR,aAAaS,mBAASC,MAAM,MAAMC;QACrDC,UAAUb,UAAUa;QACpBhB,YAAYA;qBAEZ,qBAACiB,4EACKd;QACJM,WAAU;QACVS,MAAK;QACLlB,YAAYE;QACZN,SAAS;uBAEX,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACb;QAAUa,SAAS;sBACpB,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACwB,cAAMvB,yBACP,qBAACsB;QAAIvB,SAAS;OAAgCK,cAE/CoB,IAAAA,oBAAavB,8BACZ,qBAACwB;QAAS1B,SAAS;OAAiCE;AAMhE"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.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 { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Radio","sizeYClassNames","none","SizeType","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","Tappable","Component","classNames","REGULAR","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","span","hasReactNode","Footnote"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;;+DArCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;8BACM;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,YAAY,SAACC;IACjB,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,qBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,qBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAaO,IAAMjB,QAAQ;QACnBmB,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAH,mBAAAA,WACAI,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ;QACPC,WAAU;QACVV,OAAOA;QACPH,WAAWc,IAAAA,gBAAU,eAEnBH,UAAU1B,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAAC4B,MAAM,EACpDX;QAEFgB,mBAAmBR,aAAaS,kBAAQ,CAACC,GAAG,GAAG,MAAMC,6BAAmB;QACxEC,UAAUb,UAAUa,QAAQ;QAC5BhB,YAAYA;qBAEZ,qBAACiB,8BAAc,8CACTd;QACJM,WAAU;QACVS,MAAK;QACLlB,YAAYE;QACZN,SAAS;uBAEX,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACb;QAAUa,SAAS;sBACpB,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACwB,cAAMvB,yBACP,qBAACsB;QAAIvB,SAAS;OAAgCK,cAE/CoB,IAAAA,kBAAY,EAACvB,8BACZ,qBAACwB,kBAAQ;QAAC1B,SAAS;OAAiCE;AAMhE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["RadioGroup","mode","children","className","restProps","div","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;+DAXU;oBACI;AAUpB,IAAMA,aAAa;6BACxBC,MAAAA,gCAAO,0BACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;WAGA,qBAACE;QACCF,WAAWG,IAAAA,oCAET,0BACAL,SAAS,mDACTE;OAEEC,YAEHF;AACE"}
+{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["RadioGroup","mode","children","className","restProps","div","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;+DAXU;oBACI;AAUpB,IAAMA,aAAa;6BACxBC,MAAAA,gCAAO,0BACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;WAGA,qBAACE;QACCF,WAAWG,IAAAA,gBAAU,oBAEnB,0BACAL,SAAS,mDACTE;OAEEC,YAEHF;AACE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider, type SliderMultipleProps } from '../Slider/Slider';\n\nexport type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n *\n * @deprecated 5.5.0\n *\n * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).\n */\nexport const RangeSlider = ({\n  step = 0,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  ...restProps\n}: RangeSliderProps) => {\n  return (\n    <Slider step={step} min={min} max={max} defaultValue={defaultValue} {...restProps} multiple />\n  );\n};\n"],"names":["RangeSlider","step","min","max","defaultValue","restProps","Slider","multiple"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;sBAC0B;AAW1C,IAAMA,cAAc;6BACzBC,MAAAA,gCAAO,qCACPC,KAAAA,8BAAM,oCACNC,KAAAA,8BAAM,+CACNC,cAAAA,gDAAe;QAACF;QAAKC;KAAI,wBACtBE;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QAAOL,MAAMA;QAAMC,KAAKA;QAAKC,KAAKA;QAAKC,cAAcA;OAAkBC;QAAWE,UAAAA;;AAEvF"}
+{"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider, type SliderMultipleProps } from '../Slider/Slider';\n\nexport type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n *\n * @deprecated 5.5.0\n *\n * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).\n */\nexport const RangeSlider = ({\n  step = 0,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  ...restProps\n}: RangeSliderProps) => {\n  return (\n    <Slider step={step} min={min} max={max} defaultValue={defaultValue} {...restProps} multiple />\n  );\n};\n"],"names":["RangeSlider","step","min","max","defaultValue","restProps","Slider","multiple"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;sBAC0B;AAW1C,IAAMA,cAAc;6BACzBC,MAAAA,gCAAO,qCACPC,KAAAA,8BAAM,oCACNC,KAAAA,8BAAM,+CACNC,cAAAA,gDAAe;QAACF;QAAKC;KAAI,wBACtBE;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,cAAM;QAACL,MAAMA;QAAMC,KAAKA;QAAKC,KAAKA;QAAKC,cAAcA;OAAkBC;QAAWE,UAAAA;;AAEvF"}

package/dist/cjs/components/Removable/Removable.js

@@ -41,8 +41,8 @@ var _Tappable = require("../Tappable/Tappable");
     });
     var onRemoveTransitionEnd = function() {
         if (removeOffset > 0) {
-            var _removeButtonRef_current;
-            removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef_current = removeButtonRef.current) === null || _removeButtonRef_current === void 0 ? void 0 : _removeButtonRef_current.focus();
+            var _removeButtonRef_current, _removeButtonRef;
+            (_removeButtonRef = removeButtonRef) === null || _removeButtonRef === void 0 ? void 0 : (_removeButtonRef_current = _removeButtonRef.current) === null || _removeButtonRef_current === void 0 ? void 0 : _removeButtonRef_current.focus();
         } else {
             disabledRef.current = true;
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","useDOM","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"mappings":";;;;+BA8HaA;;;eAAAA;;;;;;;;+DA9HU;qBACM;oBACI;4BACJ;sCACU;2BACX;mBACL;wBACE;qBACY;0BAEV;wBACF;AAkBzB;;CAEC,GACD,IAAMC,eAAe;QACnBC,iBAAAA,UACAC,0BAAAA,mBACAC,gCAAAA,yBACAC,iBAAAA;IAEA,IAAM,AAAEC,SAAWC,IAAAA,eAAXD;IAER,IAAME,kBAAkBC,OAAMC,OAAoB;IAClD,IAAMC,cAAcF,OAAMC,OAAO;IACjC,IAA2CD,qCAAAA,OAAMG,SAAS,QAAnDC,eAAoCJ,oBAAtBK,qBAAsBL;IAE3CM,IAAAA,gDACET,QACA,SACA;QACE,IAAIO,eAAe,GAAG;YACpBC,mBAAmB;QACrB;IACF,GACA;QAAEE,SAAS;IAAK;IAGlB,IAAMC,wBAAwB;QAC5B,IAAIJ,eAAe,GAAG;gBACpBL;YAAAA,4BAAAA,6BAAAA,KAAAA,IAAAA,CAAAA,2BAAAA,gBAAiBU,qBAAjBV,sCAAAA,KAAAA,IAAAA,yBAA0BW;QAC5B,OAAO;YACLR,YAAYO,UAAU;QACxB;IACF;IAEA,IAAME,wBAAwB,SAACC;QAC7BA,EAAEC;QACF,IAAI,CAACd,gBAAgBU,SAAS;YAC5B;QACF;QACA,IAAM,AAAEK,cAAgBf,gBAAgBU,QAAhCK;QACRZ,YAAYO,UAAU;QACtBJ,mBAAmBS;IACrB;IAEA,qBACE,qBAACC;QACCC,WAAWC,IAAAA,4CAAyC;QACpDC,OAAO;YAAEC,WAAW,AAAC,eAAgC,OAAlBf,yBAAAA,0BAAAA,eAAgB,GAAE;QAAK;QAC1DgB,iBAAiBZ;qBAEjB,qBAACa;QACCC,WAAW;QACXC,UAAU;QACVC,cAAY7B;QACZqB,WAAWC,IAAAA;QACXQ,SAASd;QACTe,UAAUtB,eAAe;qBAEzB,qBAACuB;QAAEX,SAAS;QAAkCY,MAAK;SAEpDhC,wBAED,qBAACiC;QAAKb,SAAS;QAA+Bc,eAAAA;sBAE9C,qBAACC;QACCC,WAAU;QACVV,WAAW;QACXC,UAAU;QACVG,UAAUxB,YAAYO;QACtBwB,YAAYlC;QACZiB,SAAS;QACTS,SAAShC;qBAET,qBAACoC;QAAKb,SAAS;OAAmCtB;AAI1D;AAoBO,IAAMH,YAAY;QACvB0C,oBAAAA,YACArC,kBAAAA,mCACAH,UAAAA,wCAAWyC,gEACXxC,mBAAAA,0DAAoB,4DACpByC,OAAAA,kCAAQ,yBACRnB,mBAAAA,kCACAoB,QAAAA,oCAAS,uBACNC;QAPHJ;QACArC;QACAH;QACAC;QACAyC;QACAnB;QACAoB;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,MAAMC,IAAAA,4BAAaR;IAEzB,IAAMS,gBAAgB,SAAC9B;QACrBA,EAAE+B;QACFlD,SAASmB;IACX;IAEA,IAAMjB,0BAAkCiD,IAAAA,6BAAqBlD;IAE7D,qBACE,qBAACqB,mDACKsB;QACJG,KAAKA;QACLxB,WAAWC,IAAAA,kBACTqB,aAAaO,mBAASC,6BACtBX,UAAU,yCACVC,mCACApB;QAGDsB,aAAaO,mBAASC,qBACrB,qBAAC/B;QAAIC,WAAWC,IAAAA,4CAAyC;OACtDrB,wBAED,qBAACyB;QACC0B,YAAW;QACXC,WAAU;QACVhC,SAAS;QACTS,SAASiB;QACTlB,cAAY7B;qBAEZ,qBAACsD;QAAarB,MAAK;uBAGrB,qBAACC;QAAKb,SAAS;QAA+Bc,eAAAA;SAIjDQ,aAAaO,mBAASC,qBACrB,qBAACtD;QACCC,UAAUiD;QACVhD,mBAAmBA;QACnBC,yBAAyBA;OAExBC;AAKX"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","useDOM","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","SizeType","COMPACT","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","Tappable","classNames","REGULAR","div","Subhead","Component","Icon","RichCellIcon"],"mappings":";;;;+BAmEaA;;;eAAAA;;;;;;;;+DAnEU;oBACI;6BACG;0BACL;wBACe;uBAChB;4BACK;AAG7B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAwDL,IAAMJ,WAAW;QACtBK,iBAAAA,SACAC,kBAAAA,UACAC,cAAAA,MACAC,iBAAAA,SACAC,gBAAAA,QACAC,eAAAA,OACAC,sBAAAA,cACAC,gBAAAA,QACAC,iBAAAA,SACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,gEACKH;QACJD,WAAWK,IAAAA,kCAET,CAACN,4CACDI,UAAUf,qBAASkB,WAAWpB,eAAe,CAACiB,MAAM,EACpDH;QAGDN,wBAAU,qBAACa;QAAIP,SAAS;OAA+BN,uBACxD,qBAACa;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;OACXV,yBACC,qBAACkB;QAAQC,WAAU;QAAMT,SAAS;OAC/BV,wBAGL,qBAACiB;QAAIP,SAAS;OAAiCT,WAC9CC,sBAAQ,qBAACe;QAAIP,SAAS;OAA6BR,OACnDC,yBACC,qBAACe;QAAQC,WAAU;QAAMT,SAAS;OAC/BP,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,qBAACW;QAAIP,SAAS;OACXL,uBAAS,qBAACY;QAAIP,SAAS;OAAuCL,QAC9DC,8BACC,qBAACW;QAAIP,SAAS;OAAsCJ,iBAK3DC,wBAAU,qBAACU;QAAIP,SAAS;OAA+BH,SACvDC,yBAAW,qBAACS;QAAIP,SAAS;OAAgCF;AAIlE;AAEAb,SAASyB,OAAOC"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","SizeType","COMPACT","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","Tappable","classNames","REGULAR","div","Subhead","Component","Icon","RichCellIcon"],"mappings":";;;;+BAmEaA;;;eAAAA;;;;;;;;+DAnEU;oBACI;6BACG;0BACL;wBACe;uBAChB;4BACK;AAG7B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAwDZ,IAAMJ,WAAW;QACtBK,iBAAAA,SACAC,kBAAAA,UACAC,cAAAA,MACAC,iBAAAA,SACAC,gBAAAA,QACAC,eAAAA,OACAC,sBAAAA,cACAC,gBAAAA,QACAC,iBAAAA,SACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,8CACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDI,UAAUf,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACiB,MAAM,EACpDH;QAGDN,wBAAU,qBAACa;QAAIP,SAAS;OAA+BN,uBACxD,qBAACa;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;OACXV,yBACC,qBAACkB,gBAAO;QAACC,WAAU;QAAMT,SAAS;OAC/BV,wBAGL,qBAACiB;QAAIP,SAAS;OAAiCT,WAC9CC,sBAAQ,qBAACe;QAAIP,SAAS;OAA6BR,OACnDC,yBACC,qBAACe,gBAAO;QAACC,WAAU;QAAMT,SAAS;OAC/BP,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,qBAACW;QAAIP,SAAS;OACXL,uBAAS,qBAACY;QAAIP,SAAS;OAAuCL,QAC9DC,8BACC,qBAACW;QAAIP,SAAS;OAAsCJ,iBAK3DC,wBAAU,qBAACU;QAAIP,SAAS;OAA+BH,SACvDC,yBAAW,qBAACS;QAAIP,SAAS;OAAgCF;AAIlE;AAEAb,SAASyB,IAAI,GAAGC,0BAAY"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["RichCellIcon","children","className","restProps","div","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;+DAJU;oBACI;AAGpB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,mDAAQD;QAAWD,WAAWG,IAAAA,sCAAmCH;QAC/DD;AAGP"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["RichCellIcon","children","className","restProps","div","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;+DAJU;oBACI;AAGpB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,mDAAQD;QAAWD,WAAWG,IAAAA,gBAAU,sBAAyBH;QAC/DD;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['RichTooltip--appearance-accent'],\n            white: styles['RichTooltip--appearance-white'],\n            black: styles['RichTooltip--appearance-black'],\n            inversion: styles['RichTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["RichTooltip","children","arrow","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrowClassName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;+DAfU;oBACI;2BACmB;AAavC,IAAMA,cAAc;QACzBC,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCF,WAAWG,IAAAA,qCAETJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFF,OAAOA;QACPU,cAAc;OACVP,cAEHJ;AAGP"}
+{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['RichTooltip--appearance-accent'],\n            white: styles['RichTooltip--appearance-white'],\n            black: styles['RichTooltip--appearance-black'],\n            inversion: styles['RichTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["RichTooltip","children","arrow","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrowClassName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;+DAfU;oBACI;2BACmB;AAavC,IAAMA,cAAc;QACzBC,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFF,OAAOA;QACPU,cAAc;OACVP,cAEHJ;AAGP"}

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

@@ -7,6 +7,7 @@ export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdPr
         from: string;
         to: string;
     }): void;
+    children: React.ReactElement | Iterable<React.ReactElement>;
 }
 export interface RootState {
     activeView: string;