@vkontakte/vkui 5.3.2 → 5.4.1

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 } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\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  ...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 className={wrapperClassName} onClose={handleContentKeyDownEscape}>\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","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<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>,\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/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/**\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":";;;;+BAsDaA;;;eAAAA;;;;;;;;;2DAtDU;qBACO;oBACH;wBACF;sBACF;qBACD;0BACK;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AA4Cf,IAAMF,cAAc,iBAMH;mCALtBG,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,CAAC;IAED,IAAwCU,iCAAAA,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,qCAAKD,MAAK,oBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC,CAAC;OACR;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,WAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C,CAAC;IACH,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,SAAS;;QAIzEC,OACE7C,WAAW8C,OAAO,kBAChB,qBAACC,cAAM;YACLC,MAAK;YACLL,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBqC,SAAS;WAE1E5C,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"}
+{"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;;;;;;;;;2DAxDU;qBACO;oBACH;wBACF;sBACF;qBACD;0BACK;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AA8Cf,IAAMF,cAAc,iBAMH;mCALtBG,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,CAAC;IAED,IAAwCU,iCAAAA,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,qCAAKD,MAAK,oBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC,CAAC;OACR;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,WAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C,CAAC;IACH,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,SAAS;;QAIzEC,OACE7C,WAAW8C,OAAO,kBAChB,qBAACC,cAAM;YACLC,MAAK;YACLL,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBqC,SAAS;WAE1E5C,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.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DOMProps } from '../../lib/dom';
-import { AnyFunction } from '../../types';
+import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface } from '../AppRoot/ScrollContext';
 import { TouchProps } from '../Touch/Touch';
-export interface PullToRefreshProps extends DOMProps, TouchProps {
+export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)
      */
@@ -14,7 +14,6 @@ export interface PullToRefreshProps extends DOMProps, TouchProps {
     isFetching?: boolean;
     /** @ignore */
     scroll?: ScrollContextInterface;
-    children?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/PullToRefresh

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 } 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 {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n  children?: React.ReactNode;\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']}>\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","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']}>\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","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

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

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { HasRef, HasRootRef } from '../../types';
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement> {
     description?: React.ReactNode;
+    titleAfter?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
  */
-export declare const Radio: ({ children, description, style, className, getRootRef, ...restProps }: RadioProps) => JSX.Element;
+export declare const Radio: ({ children, description, style, className, getRootRef, titleAfter, getRef, ...restProps }: RadioProps) => JSX.Element;

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

@@ -21,7 +21,7 @@ var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _tappable = require("../Tappable/Tappable");
 var _footnote = require("../Typography/Footnote/Footnote");
-var _visuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var sizeYClassNames = _defineProperty({
     none: "vkuiRadio--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiRadio--sizeY-compact");
@@ -46,12 +46,14 @@ var RadioIcon = function(props) {
     }));
 };
 var Radio = function(_param) {
-    var children = _param.children, description = _param.description, style = _param.style, className = _param.className, getRootRef = _param.getRootRef, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, description = _param.description, style = _param.style, className = _param.className, getRootRef = _param.getRootRef, titleAfter = _param.titleAfter, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
         "children",
         "description",
         "style",
         "className",
-        "getRootRef"
+        "getRootRef",
+        "titleAfter",
+        "getRef"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
@@ -62,9 +64,11 @@ var Radio = function(_param) {
         activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _tappable.ACTIVE_EFFECT_DELAY,
         disabled: restProps.disabled,
         getRootRef: getRootRef
-    }, /*#__PURE__*/ _react.createElement(_visuallyHiddenInput.VisuallyHiddenInput, _objectSpreadProps(_objectSpread({}, restProps), {
-        className: "vkuiRadio__input",
-        type: "radio"
+    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+        Component: "input",
+        type: "radio",
+        getRootRef: getRef,
+        className: "vkuiRadio__input"
     })), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiRadio__container"
     }, /*#__PURE__*/ _react.createElement(RadioIcon, {
@@ -72,8 +76,10 @@ var Radio = function(_param) {
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiRadio__content"
     }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRadio__children"
-    }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+        className: "vkuiRadio__title"
+    }, /*#__PURE__*/ _react.createElement("span", null, children), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiRadio__titleAfter"
+    }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
         className: "vkuiRadio__description"
     }, description))));
 };

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 { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\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}\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  ...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      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</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","restProps","platform","usePlatform","useAdaptivity","sizeY","Tappable","Component","classNames","REGULAR","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","VisuallyHiddenInput","type","div","hasReactNode","Footnote"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;;2DApCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;mCACW;AAGpC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,YAAY,SAACC,OAAyC;IAC1D,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;OAAKJ,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;AAYO,IAAMjB,QAAQ,iBAOH;QANhBmB,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAH,mBAAAA,WACAI,oBAAAA,YACGC;QALHJ;QACAC;QACAC;QACAH;QACAI;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ;QACPC,WAAU;QACVR,OAAOA;QACPH,WAAWY,IAAAA,gBAAU,eAEnBH,UAAUxB,oBAAQ,CAAC4B,OAAO,IAAI9B,eAAe,CAAC0B,MAAM,EACpDT;QAEFc,mBAAmBR,aAAaS,kBAAQ,CAACC,GAAG,GAAG,MAAMC,6BAAmB;QACxEC,UAAUb,UAAUa,QAAQ;QAC5Bd,YAAYA;qBAEZ,qBAACe,wCAAmB,uCAAKd;QAAWL,SAAS;QAA0BoB,MAAK;uBAC5E,qBAACC;QAAIrB,SAAS;qBACZ,qBAACb;QAAUa,SAAS;sBACpB,qBAACqB;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;OAA8BC,WAC3CqB,IAAAA,kBAAY,EAACpB,8BACZ,qBAACqB,kBAAQ;QAACvB,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;;;;;;;;2DArCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;8BACM;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,YAAY,SAACC,OAAyC;IAC1D,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;OAAKJ,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,iBASH;QARhBmB,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,uCACTd;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/Removable/Removable.d.ts

@@ -10,14 +10,19 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
     /**
      * Расположение кнопки удаления.
      */
     align?: 'start' | 'center';
+    /**
+     * Скрывает кнопку, но оставляет отступ.
+     * @since 5.4.0
+     */
+    indent?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, ...restProps }: RemovableOwnProps) => JSX.Element;
+export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => JSX.Element;
 export {};

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

@@ -88,13 +88,14 @@ var _tappable = require("../Tappable/Tappable");
     }, removePlaceholder)));
 };
 var Removable = function(_param) {
-    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, _param_indent = _param.indent, indent = _param_indent === void 0 ? false : _param_indent, restProps = _objectWithoutProperties(_param, [
         "getRootRef",
         "children",
         "onRemove",
         "removePlaceholder",
         "align",
-        "className"
+        "className",
+        "indent"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var ref = (0, _useExternRef.useExternRef)(getRootRef);
@@ -105,7 +106,7 @@ var Removable = function(_param) {
     var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
     return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
         ref: ref,
-        className: (0, _vkjs.classNames)(platform === _platform.Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", className)
+        className: (0, _vkjs.classNames)(platform === _platform.Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent", className)
     }), platform !== _platform.Platform.IOS && /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiRemovable__content", "vkuiInternalRemovable__content")
     }, children, /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {

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 { 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 {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\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.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\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  ...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        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","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"mappings":"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"}
+{"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/Root/Root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","classNames","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","classNames","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}

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

@@ -10,8 +10,10 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     icon?: React.ReactNode;
     onIconClick?: (e: VKUITouchEvent) => void;
     defaultValue?: string;
+    iconAriaLabel?: string;
+    clearAriaLabel?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, ...inputProps }: SearchProps) => JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, ...inputProps }: SearchProps) => JSX.Element;