@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Pagination.module.css';\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <Text\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                &#8230;\n              </Text>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                <Text normalize={false}>{page}</Text>\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav role=\"navigation\" aria-label=\"Навигация по страницам\" ref={getRootRef} {...resetProps}>\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","Text","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","className","COMPACT","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","onClick","normalize","nav","role","ref","ul","size","before","width","appearance","mode","map","after"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Pagination.module.css';\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <Text\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                &#8230;\n              </Text>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                <Text normalize={false}>{page}</Text>\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav role=\"navigation\" aria-label=\"Навигация по страницам\" ref={getRootRef} {...resetProps}>\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","Text","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","className","COMPACT","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","onClick","normalize","nav","role","ref","ul","size","before","width","appearance","mode","map","after"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBL,SAASM,uDAFY,MAGrBN,SAASO,sCAHY;AAaxB;;CAEC,GACD,OAAO,IAAMC,QAAQ;iCACnBC,UAAAA,wCAAW,yBACXC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKH;QACJI,KAAKP;QACLE,WAAWhB,wBAETO,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;sBAGF,oBAACV;QACCgB,WAAWjB;QACXW,WAAWhB,4BAAgC;qBAE3C,oBAACoB;QAAIJ,SAAS;QACbJ,yBAAW,oBAACQ;QAAIJ,SAAS;OAA8BH,YAAkBA,UACzEK,aAAad,SAASmB,qBAAO,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,SAAS;;AAItB,EAAE"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBL,SAASM,OAAO,gDAFK,MAGrBN,SAASO,OAAO,+BAHK;AAaxB;;CAEC,GACD,OAAO,IAAMC,QAAQ;iCACnBC,UAAAA,wCAAW,yBACXC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKH;QACJI,KAAKP;QACLE,WAAWhB,wBAETO,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;sBAGF,oBAACV;QACCgB,WAAWjB;QACXW,WAAWhB,4BAAgC;qBAE3C,oBAACoB;QAAIJ,SAAS;QACbJ,yBAAW,oBAACQ;QAAIJ,SAAS;OAA8BH,YAAkBA,UACzEK,aAAad,SAASmB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,SAAS;;AAItB,EAAE"}

package/dist/components/PanelHeader/LegacyPanelHeaderContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeader/LegacyPanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nexport interface LegacyPanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nexport const LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n"],"names":["React","usePlatform","Platform","warnOnce","Text","warn","LegacyPanelHeaderContent","children","Component","id","process","env","NODE_ENV","platform","VKCOM","weight","className","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,IAAI,QAAQ,0BAA0B;AAO/C,IAAMC,OAAOF,SAAS;AAEtB;;;CAGC,GACD,OAAO,IAAMG,2BAA2B;QACtCC,iBAAAA,mCACAC,WAAAA,0CAAY,2BACZC,WAAAA;IAEA,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1CP,KACE;IAEJ;IAEA,IAAMQ,WAAWZ;IAEjB,OAAOY,aAAaX,SAASY,sBAC3B,oBAACV;QAAKW,QAAO;QAAIP,WAAWA;QAAWC,IAAIA;OACxCF,0BAGH,oBAACC;QAAUQ,SAAS;QAAqCP,IAAIA;OAC1DF;AAGP,EAAE;AAEFD,yBAAyBW,cAAc"}
+{"version":3,"sources":["../../../src/components/PanelHeader/LegacyPanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nexport interface LegacyPanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nexport const LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n"],"names":["React","usePlatform","Platform","warnOnce","Text","warn","LegacyPanelHeaderContent","children","Component","id","process","env","NODE_ENV","platform","VKCOM","weight","className","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,IAAI,QAAQ,0BAA0B;AAO/C,IAAMC,OAAOF,SAAS;AAEtB;;;CAGC,GACD,OAAO,IAAMG,2BAA2B;QACtCC,iBAAAA,mCACAC,WAAAA,0CAAY,2BACZC,WAAAA;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CP,KACE;IAEJ;IAEA,IAAMQ,WAAWZ;IAEjB,OAAOY,aAAaX,SAASY,KAAK,iBAChC,oBAACV;QAAKW,QAAO;QAAIP,WAAWA;QAAWC,IAAIA;OACxCF,0BAGH,oBAACC;QAAUQ,SAAS;QAAqCP,IAAIA;OAC1DF;AAGP,EAAE;AAEFD,yBAAyBW,WAAW,GAAG"}

package/dist/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","LegacyPanelHeaderContent","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","LegacyPanelHeaderContent","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT","aria-label"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAOnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB;QAC7BC,eAAAA,OACcC,aAAd,eAAcA,YAAAA,iBAAY,UAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,WAAWT;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAChB,iFAAiF;IACjF,wGAAwG;IACxG,IAAMC,YAAYF,aAAaP,SAASU,SAASH,aAAaP,SAASW;IAEvE,IAAIC,qBAAO,oBAACnB;IACZ,OAAQc;QACN,KAAKP,SAASW;YACZC,qBAAO,oBAAClB;YACR;QACF,KAAKM,SAASU;YACZE,qBAAO,oBAACjB;YACR;IACJ;IAEA,qBACE,oBAACM,2DACKK;QACJD,WAAWT,WACTY,UAAUT,SAASc,iDACnBN,aAAaP,SAASW,mCACtBJ,aAAaP,SAASU,uCACtBD,aAAa,CAAC,CAACN,2CACfE;QAEFF,OAAOM,aAAaN;QACpBW,cAAYV;QAEXQ;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT","aria-label"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAOnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB;QAC7BC,eAAAA,OACcC,aAAd,eAAcA,YAAAA,iBAAY,UAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,WAAWT;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAChB,iFAAiF;IACjF,wGAAwG;IACxG,IAAMC,YAAYF,aAAaP,SAASU,KAAK,IAAIH,aAAaP,SAASW,GAAG;IAE1E,IAAIC,qBAAO,oBAACnB;IACZ,OAAQc;QACN,KAAKP,SAASW,GAAG;YACfC,qBAAO,oBAAClB;YACR;QACF,KAAKM,SAASU,KAAK;YACjBE,qBAAO,oBAACjB;YACR;IACJ;IAEA,qBACE,oBAACM,2DACKK;QACJD,WAAWT,WACTY,UAAUT,SAASc,OAAO,0CAC1BN,aAAaP,SAASW,GAAG,gCACzBJ,aAAaP,SAASU,KAAK,kCAC3BD,aAAa,CAAC,CAACN,2CACfE;QAEFF,OAAOM,aAAaN;QACpBW,cAAYV;QAEXQ;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,IAAMC,mBAAmB;QAAGC,gBAAAA,SAASC,iBAAAA;IACnC,IAAMC,WAAWd;IAEjB,IAAIc,aAAab,SAASc,KAAK;QAC7B,qBACE,oBAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM;WACvDC;IAGP;IAEA,qBAAO,oBAACR;QAAKa,QAAQJ,aAAab,SAASkB,QAAQC,YAAY;OAAMP;AACvE;AAEA,IAAMQ,OAAOlB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMmB,oBAAoB;QAC/BT,kBAAAA,kCACAD,SAAAA,sCAAU,wBACVW,eAAAA,OACAC,mBAAAA,WACGC;QAJHZ;QACAD;QACAW;QACAC;;IAGA,IAAME,cAAc3B,qBAAqBc;IACzC,IAAMc,mBAAmB5B,qBAAqBwB;IAC9C,IAAMT,WAAWd;IAEjB,IAAI4B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKb,SAASc;YACZa,YAAY;YACZC,aAAa;YACb;QACF,KAAK5B,SAASkB;YACZS;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBC,QACxBhC,qBAAqBW,aACnBX,qBAAqBqB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ;IACF;IAEA,qBACE,oBAACjB;QACCY,WAAWS,UAAUU,OAAO,MAAM;OAC9BV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW1B,WACT,0DAEAS,mBAAmB8B,eAAevB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,SACvBiB,mDACA,CAACA,eAAe,CAACC,2DACjBH;QAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,UAClFc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,SAAS;OAC1CD,SAGHA;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,IAAMC,mBAAmB;QAAGC,gBAAAA,SAASC,iBAAAA;IACnC,IAAMC,WAAWd;IAEjB,IAAIc,aAAab,SAASc,GAAG,EAAE;QAC7B,qBACE,oBAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM;WACvDC;IAGP;IAEA,qBAAO,oBAACR;QAAKa,QAAQJ,aAAab,SAASkB,KAAK,GAAGC,YAAY;OAAMP;AACvE;AAEA,IAAMQ,OAAOlB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMmB,oBAAoB;QAC/BT,kBAAAA,kCACAD,SAAAA,sCAAU,wBACVW,eAAAA,OACAC,mBAAAA,WACGC;QAJHZ;QACAD;QACAW;QACAC;;IAGA,IAAME,cAAc3B,qBAAqBc;IACzC,IAAMc,mBAAmB5B,qBAAqBwB;IAC9C,IAAMT,WAAWd;IAEjB,IAAI4B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKb,SAASc,GAAG;YACfa,YAAY;YACZC,aAAa;YACb;QACF,KAAK5B,SAASkB,KAAK;YACjBS;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBC,QACxBhC,qBAAqBW,aACnBX,qBAAqBqB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ;IACF;IAEA,qBACE,oBAACjB;QACCY,WAAWS,UAAUU,IAAI,GAAG,MAAM;OAC9BV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW1B,WACT,0DAEAS,mBAAmB8B,cAAc,CAACvB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BiB,mDACA,CAACA,eAAe,CAACC,2DACjBH;QAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,UAClFc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,SAAS;OAC1CD,SAGHA;AAIR,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28CancelOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderClose","children","restProps","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,mBAAmB;iCAAGC,UAAAA,wCAAW,4BAAaC;QAAxBD;;IACjC,IAAME,WAAWP;IACjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;OAAeC,YAChEC,aAAaN,SAASQ,MAAMJ,yBAAW,oBAACN;AAG/C,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28CancelOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderClose","children","restProps","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,mBAAmB;iCAAGC,UAAAA,wCAAW,4BAAaC;QAAxBD;;IACjC,IAAME,WAAWP;IACjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;OAAeC,YAChEC,aAAaN,SAASQ,GAAG,GAAGJ,yBAAW,oBAACN;AAG/C,EAAE"}

package/dist/components/PanelHeaderContent/PanelHeaderContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWd;IACjB,IAAIc,aAAab,SAASc,OAAO;QAC/B,qBACE,oBAACV;YAAKW,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,SAAS;OAA8CH;AAEhE;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB;QAChCJ,mBAAAA,WACAK,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAX,kBAAAA,UACAY,iBAAAA,SACGC;QAPHV;QACAK;QACAC;QACAC;QACAC;QACAX;QACAY;;IAGA,IAAME,cAAcF,UAAUvB,WAAW;IACzC,IAAM0B,YAAYH,UAAU,CAAC,IAAIC;IACjC,IAAMZ,WAAWd;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWjB,aAAab,SAAS+B;QACjCC,YAAY;SAEd,CAAC;IAEL,qBACE,oBAACd,+CACKS;QACJP,OAAOA;QACPL,WAAWlB,qCAETQ,mBAAmB4B,eAAepB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,SACvBQ;QAGDjB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;OAAyCQ,uBAChF,oBAACG,qDACKE;QACJb,WAAWlB,yCAET,CAAC0B,UAAUV,aAAab,SAASkC;QAGlCpC,aAAawB,yBACZ,oBAACpB;QAASa,SAAS;OAAyCO,uBAE9D,oBAACJ;QAAIH,SAAS;qBACZ,oBAACN;QAAoBC,WAAWZ,aAAawB;QAASX,WAAWb,aAAayB;OAC3EX,WAEFd,aAAauB,wBACZ,oBAACH;QAAIH,SAAS;OAAwCM,SAGzDvB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;;AAI/C,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWd;IACjB,IAAIc,aAAab,SAASc,KAAK,EAAE;QAC/B,qBACE,oBAACV;YAAKW,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,SAAS;OAA8CH;AAEhE;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB;QAChCJ,mBAAAA,WACAK,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAX,kBAAAA,UACAY,iBAAAA,SACGC;QAPHV;QACAK;QACAC;QACAC;QACAC;QACAX;QACAY;;IAGA,IAAME,cAAcF,UAAUvB,WAAW;IACzC,IAAM0B,YAAYH,UAAU,CAAC,IAAIC;IACjC,IAAMZ,WAAWd;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWjB,aAAab,SAAS+B,GAAG;QACpCC,YAAY;SAEd,CAAC;IAEL,qBACE,oBAACd,+CACKS;QACJP,OAAOA;QACPL,WAAWlB,qCAETQ,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BQ;QAGDjB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;OAAyCQ,uBAChF,oBAACG,qDACKE;QACJb,WAAWlB,yCAET,CAAC0B,UAAUV,aAAab,SAASkC,OAAO;QAGzCpC,aAAawB,yBACZ,oBAACpB;QAASa,SAAS;OAAyCO,uBAE9D,oBAACJ;QAAIH,SAAS;qBACZ,oBAACN;QAAoBC,WAAWZ,aAAawB;QAASX,WAAWb,aAAayB;OAC3EX,WAEFd,aAAauB,wBACZ,oBAACH;QAAIH,SAAS;OAAwCM,SAGzDvB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;;AAI/C,EAAE"}

package/dist/components/PanelHeaderContext/PanelHeaderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,oEAFY,MAGrBR,SAASS,mDAHY;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAChCC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,SAASL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,OAAuB;IAEhDrB,0BAA0B;QACxBU,UAAUO,WAAW;IACvB,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,SAASZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK;QACA,IAAIH,WAAWI,WAAW,CAACJ,WAAWI,QAAQC,SAASF,MAAMG,SAAiB;YAC5EH,MAAMI;YACNlB;QACF;IACF,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW;;IACxC,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,UACJ;eAAOb,UAAUY,kBAAkBE,QAAQF,kBAAkBG;OAC7D;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,sCACtBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd;YACRA,MAAMI;YACNlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CvB,yBAAW,oBAACoB;QAAIzB,SAAS;OAA0CH;AAI5E,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,6DAFK,MAGrBR,SAASS,OAAO,4CAHK;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAChCC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,QAAQ,CAACL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,MAAM,CAAiB;IAEhDrB,0BAA0B;QACxBU,UAAUO,WAAW;IACvB,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK;QACA,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF;IACF,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW;;IACxC,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,SAAS,CACb;eAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK;OAClE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,GAAG,mCACzBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd;YACRA,MAAMI,eAAe;YACrBlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CvB,yBAAW,oBAACoB;QAAIzB,SAAS;OAA0CH;AAI5E,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB;iCAC7BC,UAAAA,wCAAW,mDACXC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD;IACvC,IAAMI,cAAcL,WAAWN,oBAAoBC;IACnD,IAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;OAAaD,YACzCG,aAAaT,SAASW,MAAMJ,wBAAU,oBAACC;AAG9C,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB;iCAC7BC,UAAAA,wCAAW,mDACXC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD;IACvC,IAAMI,cAAcL,WAAWN,oBAAoBC;IACnD,IAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;OAAaD,YACzCG,aAAaT,SAASW,GAAG,GAAGJ,wBAAU,oBAACC;AAG9C,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,oBAAoB;iCAC/BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA;OAAYH,YACxEC,aAAaN,SAASS,MAAML,yBAAW,oBAACN;AAG/C,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,oBAAoB;iCAC/BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA;OAAYH,YACxEC,aAAaN,SAASS,GAAG,GAAGL,yBAAW,oBAACN;AAG/C,EAAE"}

package/dist/components/PanelSpinner/PanelSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,IAAMC,6BAAeF,MAAMG,KAChC;+BAAGC,QAAAA,oCAAS,oBAAIC,eAAAA,OAAUC;QAAvBF;QAAaC;;WACd,oBAACJ;QAAQM,MAAK;OAAcD;QAAWD,OAAO;YAAED,QAAAA;WAAWC;;AAAU,GAEvE;AAEFH,aAAaM,cAAc"}
+{"version":3,"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,IAAMC,6BAAeF,MAAMG,IAAI,CACpC;+BAAGC,QAAAA,oCAAS,oBAAIC,eAAAA,OAAUC;QAAvBF;QAAaC;;WACd,oBAACJ;QAAQM,MAAK;OAAcD;QAAWD,OAAO;YAAED,QAAAA;WAAWC;;AAAU,GAEvE;AAEFH,aAAaM,WAAW,GAAG"}

package/dist/components/PopoutRoot/PopoutRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AAOzD,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcN,kCAAdM;IAER,qBACE,oBAACC;QACCC,WAAWT,qCAETO;OAGDD;AAGP;AAMA,IAAMI,kBAAkB;QAAGJ,iBAAAA;IACzB,qBAAO,oBAACE;QAAIC,SAAS;OAAgCH;AACvD;AASA,OAAO,IAAMK,aAAa;QACxBC,gBAAAA,QACAC,eAAAA,OACAP,kBAAAA,UACAQ,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAP;QACAQ;QACAL;;IAGA,IAAM,AAAEO,WAAab,SAAba;IAERjB,MAAMkB,UAAU;QACdL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ,+CAAQO;QAAWN,WAAWT,6BAAiCS;QAAYS,KAAKJ;QAC9ER,wBACD,oBAACF,qBACE,CAAC,CAACQ,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AAOzD,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcN,kCAAdM;IAER,qBACE,oBAACC;QACCC,WAAWT,qCAETO;OAGDD;AAGP;AAMA,IAAMI,kBAAkB;QAAGJ,iBAAAA;IACzB,qBAAO,oBAACE;QAAIC,SAAS;OAAgCH;AACvD;AASA,OAAO,IAAMK,aAAa;QACxBC,gBAAAA,QACAC,eAAAA,OACAP,kBAAAA,UACAQ,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAP;QACAQ;QACAL;;IAGA,IAAM,AAAEO,WAAab,SAAba;IAERjB,MAAMkB,SAAS,CAAC;QACdL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ,+CAAQO;QAAWN,WAAWT,6BAAiCS;QAAYS,KAAKJ;QAC9ER,wBACD,oBAACF,qBACE,CAAC,CAACQ,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

package/dist/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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,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,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,SAAS,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,OAAuB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,iDAAyD;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,MAAM,MAAM;IAC1F3B,MAAM4B,UAAU;QACd,CAACT,UAAUO,wBAAwBG;IACrC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO;OAAkB;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}
+{"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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,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,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM;IAC1F3B,MAAM4B,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}

package/dist/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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

package/dist/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":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","useState","arrowRef","setArrowRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef","Icon"],"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":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","useState","arrowRef","setArrowRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef","Icon"],"mappings":"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"}

package/dist/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":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASA,OAAO,IAAMC,cAAc;QACzBC,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOV;IAEP,IAAsCW,yCAAAA,qBAAqBH,WAAWF,aAA/DM,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,oBAACG;QACCC,KAAKN;QACLO,OAAOH;QACPI,WAAWlB,8BAETa,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,oBAACF;QAAKO,WAAWlB,kCAAsCQ;;AAG7D,EAAE;AAEF,SAASI,qBACPH,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEY,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIX,UAAUY,WAAW,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY;YACf;SACD;IACH,OAAO,IAAIV,UAAUY,WAAW,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa;gBACZf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,WAAW,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY;YACf;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa;gBACZjB,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":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASA,OAAO,IAAMC,cAAc;QACzBC,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOV;IAEP,IAAsCW,yCAAAA,qBAAqBH,WAAWF,aAA/DM,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,oBAACG;QACCC,KAAKN;QACLO,OAAOH;QACPI,WAAWlB,8BAETa,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,oBAACF;QAAKO,WAAWlB,kCAAsCQ;;AAG7D,EAAE;AAEF,SAASI,qBACPH,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEY,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIX,UAAUY,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,OAAO;YACT;SACD;IACH;AACF"}

package/dist/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":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,OAAOL,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,IAAMM,cAAc;mCACzBC,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,IAAIC,aAAa,eAAe;QAC1CT,KACE;IAEJ;IAEA,IAAwCR,mCAAAA,MAAMkB,SAAS,SAAhDC,eAAiCnB,oBAAnBoB,kBAAmBpB;IAExC,IAAMqB,cAAcrB,MAAMsB,QACxB;eACGZ,WAAWa,aACRb,WAAWa,WAAWC,OAAO,SAACC,KAAKC;mBAAU,wCAAKD,MAAK,qBAACC,KAAKC,MAAOD,KAAKE;WAAQ,CAAC,KAClF,CAAC;OACP;QAAClB,WAAWa;KAAW;IAGzB,IAAMM,UAAU7B,MAAM8B,YACpB;eAAMV,gBAAgBC,YAAYU,SAAS;OAC3C;QAACV,YAAYU;KAAM;IAGrB/B,MAAMgC,UAAU;QACd,IAAIX,YAAYY,iBAAiB;YAC/Bb,gBAAgBC,YAAYY;QAC9B;IACF,GAAG;QAACZ,YAAYY;KAAgB;IAEhC,qBACE,oBAACC;QAAIrB,WAAWX,8BAAkCW;OAAgBC,0BAChE,oBAACoB;QAAIrB,SAAS;qBACZ,oBAACN,gBAAUG,WAAWyB,oBAAoB,kBACzCzB,WAAW0B,iCACV,oBAAC7B;QAASM,SAAS;OAA+BH,WAAW0B,kBAG9D,CAACxB,qCACA,oBAACsB;QAAIrB,SAAS;QAAgCgB,SAASlB;qBACrD,oBAACV,sCAIP,oBAACK;QACC+B,MAAM3B,WAAW4B;QACjBT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,0BACT,oBAACrC;YACCsC,MAAM;YACNC,KAAKlC,WAAWgC;YAChBG,KAAKnC,WAAWoC;YAChBC,eAAahC,QAAQC,IAAIC,aAAa,SAAS,WAAW+B;;QAIhEC,OACEvC,WAAWwC,yBACT,oBAAC9C;YACC+C,MAAK;YACLJ,eAAahC,QAAQC,IAAIC,aAAa,SAAS,mBAAmB+B;WAEjEtC,WAAWwC;QAIlBE,UAAU1C,WAAW2C;OAEpB3C,WAAWoC,QAGb3B,aAAamC,SAAS,mBACrB,oBAACpB;QAAIrB,SAAS;qBACZ,oBAAC0C;QAAIX,KAAKzB;QAAc0B,KAAI;;AAKtC,EAAE"}
+{"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":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,OAAOL,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,IAAMM,cAAc;mCACzBC,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,IAAwCR,mCAAAA,MAAMkB,QAAQ,CAAC,SAAhDC,eAAiCnB,oBAAnBoB,kBAAmBpB;IAExC,IAAMqB,cAAcrB,MAAMsB,OAAO,CAC/B;eACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,wCAAKD,MAAK,qBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAAClB,WAAWa,UAAU;KAAC;IAGzB,IAAMM,UAAU7B,MAAM8B,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB/B,MAAMgC,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIrB,WAAWX,8BAAkCW;OAAgBC,0BAChE,oBAACoB;QAAIrB,SAAS;qBACZ,oBAACN,gBAAUG,WAAWyB,gBAAgB,IAAI,kBACzCzB,WAAW0B,eAAe,kBACzB,oBAAC7B;QAASM,SAAS;OAA+BH,WAAW0B,eAAe,GAG7E,CAACxB,qCACA,oBAACsB;QAAIrB,SAAS;QAAgCgB,SAASlB;qBACrD,oBAACV,sCAIP,oBAACK;QACC+B,MAAM3B,WAAW4B,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,QAAQ,kBACjB,oBAACrC;YACCsC,MAAM;YACNC,KAAKlC,WAAWgC,QAAQ;YACxBG,KAAKnC,WAAWoC,KAAK;YACrBC,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAW+B;;QAIhEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC9C;YACC+C,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B;WAEjEtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWoC,KAAK,GAGlB3B,aAAamC,MAAM,GAAG,mBACrB,oBAACpB;QAAIrB,SAAS;qBACZ,oBAAC0C;QAAIX,KAAKzB;QAAc0B,KAAI;;AAKtC,EAAE"}